/*!
* Brand palette overrides — loaded after theme.css.
*
* The original brand green (#90c471) is a pastel: it scores 2.03:1 against
* white, failing WCAG AA for normal text (4.5:1) and even large text (3.0:1).
* It is kept here as a decorative accent for dark backgrounds only, and a
* darker green of the same hue (98°) takes over wherever text is involved.
*
* Kept separate from theme.css so it survives a gulp rebuild and can be
* reverted by removing one .
*/
:root {
/* accessible working green — same hue as the original, dark enough for text */
--baer-green: #4a7c2f; /* 4.98:1 on white, 4.98:1 behind white text */
--baer-green-hover: #3d6b26; /* 6.31:1 */
--baer-green-soft: #eaf3e4; /* tint for card / section fills */
/* decorative pastel — only over dark backgrounds */
--baer-green-accent: #90c471; /* 5.13:1 on --baer-teal */
--baer-teal: #20454a; /* 10.44:1 on white — unchanged, already good */
--baer-teal-soft: #2b5a61;
--baer-teal-mist: #edf1f2; /* teal at 8% on white — page-section fill */
--baer-red: #d1003c; /* was #ff0046 (3.93:1) */
--baer-muted: #767676; /* was #949494 (3.03:1) */
}
/*-----------------------------------------------
| Sticky top navigation
|
| theme.css redefines Bootstrap's .fixed-top as position:absolute, so
| the whole bar scrolled off the page with the content and the menu —
| below 1200px the only way into the navigation at all — became
| unreachable. A later rule put it back to fixed, but only up to
| 992px, which left 993–1199px (the widest hamburger range) without a
| sticky bar. Pin it at every width instead.
-----------------------------------------------*/
#mainNav.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
}
/* Once the page has moved, the bar sits over arbitrary content, so it
needs its own ground. theme.css only did this up to 992px.
It stays translucent so the section underneath shows through, and
the veil thickens towards the right, where the menu items are: the
logo only needs enough ground to stay a shape, the nav text needs
enough to stay readable. 50% black over a white section composites
to #808080 — 3.95:1 against the white logo, so the light edge still
clears the 3:1 floor for graphics.
The blur is what keeps the text calm over a busy background; without
backdrop-filter support the gradient alone still carries it.
background-color must be reset too: .navbar-fix (subpages) paints
#000 with !important, and a solid layer under the gradient would
swallow the transparency on those two pages. */
#mainNav.scrolled {
background-color: transparent !important;
background-image: linear-gradient(to right,
rgba(0, 0, 0, 0.5) 0%,
rgba(0, 0, 0, 0.72) 50%,
rgba(0, 0, 0, 0.88) 100%);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
/* The colour logo's wordmark is #1F454A and disappears on the black
scrolled bar; the sw variant is the light-on-dark cut (it is what the
subpages use for their permanently black bar). Both are already
in the markup, so scrolling just swaps which one shows — and the
smaller mark keeps the fixed bar from eating ~113px of viewport. */
@media (min-width: 1200px) {
#mainNav.scrolled .logo-color {
display: none;
}
#mainNav.scrolled .logo-sw {
display: inline-block;
width: 160px;
}
}
/* Hamburger panel: opaque rather than a 50% black inset over whatever
section happens to be behind it, and scrollable so a short landscape
viewport can still reach the last item. */
@media (max-width: 1199.98px) {
#mainNav .navbar-collapse {
background-color: rgba(0, 0, 0, 0.94);
max-height: calc(100vh - 4rem);
overflow-y: auto;
}
}
/* The bar now covers the top of whatever an anchor lands on. The nav
links are plain hash links (no data-fancyscroll), so the native
smooth scroll honours scroll-margin. */
#services,
#projects,
#automationbg,
#about,
#contact {
scroll-margin-top: 4.5rem;
}
@media (min-width: 1200px) {
#services,
#projects,
#automationbg,
#about,
#contact {
scroll-margin-top: 6rem;
}
}
/*-----------------------------------------------
| Green: text, links, fills
-----------------------------------------------*/
a {
color: var(--baer-green);
}
a:hover,
a:focus {
color: var(--baer-green-hover);
}
.text-baer,
.text-bear {
color: var(--baer-green) !important;
}
.text-acc2 {
color: var(--baer-green) !important;
}
.bg-baer {
background-color: var(--baer-green-accent);
color: var(--baer-teal);
}
/* .text-white is !important in theme.css, so beat it on specificity */
.bg-baer.text-white,
.bg-baer .text-white,
span.text-white.bg-baer,
h1.bg-baer.text-white,
h2.bg-baer.text-white {
color: var(--baer-teal) !important;
}
.btn-baer {
background-color: var(--baer-green-accent);
border-color: var(--baer-green-accent);
color: var(--baer-teal);
}
.btn-baer:hover,
.btn-baer:focus {
background-color: var(--baer-green-hover);
border-color: var(--baer-green-hover);
color: #fff;
}
.ul-ani:before {
background-color: var(--baer-green);
}
/* the pastel stays legible on the dark teal, so keep it there */
.bg-baer-dark .text-baer,
.bg-baer-dark .text-bear,
.bg-baer-dark .text-acc2,
.bg-baer-lightdark .text-baer,
footer .text-baer {
color: var(--baer-green-accent) !important;
}
/*-----------------------------------------------
| Hero — the three capability lines
|
| They were • bullets inside one
, so the header's most
| important claim looked like a plain-text afterthought. Each line is
| its own discipline, so each gets the icon medallion the #services
| cards already use (pastel disc, teal glyph, 5.13:1) — hero and
| section below then read as one system instead of two designs.
|
| The
is inline-block: the hero column is .text-center below lg,
| which would leave three ragged centred rows; as one block it centres
| as a unit while the rows stay aligned to each other. max-width keeps
| the long third label from pushing the column open on small phones.
-----------------------------------------------*/
.hero-caps {
list-style: none;
display: inline-block;
max-width: 100%;
padding: 0;
margin-bottom: 0;
text-align: left;
}
.hero-cap {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.55rem 0;
}
/* hairlines between the rows, not around them — the block stays open
towards the headline above and the button below */
.hero-cap + .hero-cap {
border-top: 1px solid #e4ebe0;
}
.hero-cap-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background-color: var(--baer-green-accent);
color: var(--baer-teal);
transition: background-color 0.2s ease, color 0.2s ease;
}
/* the icons are CSS masks sized in em, so the disc scales the glyph */
.hero-cap-icon .fas {
font-size: 1.25rem;
}
.hero-cap-label {
font-size: 1.333rem; /* .fs-1, the size the
carried */
line-height: 1.3;
color: var(--baer-teal);
overflow-wrap: break-word;
}
/* "Infra | Automation | OpsDev | SRE" — the pipes are separators, not
content, so they step back and let the four terms read as terms */
.hero-cap-sep {
color: var(--baer-muted);
padding: 0 0.15rem;
}
/* the row is the hover target, not just the label: the medallion fills
and the existing .ul-ani underline sweeps in together */
.hero-cap:hover .hero-cap-icon {
background-color: var(--baer-green);
color: #fff;
}
.hero-cap:hover .ul-ani::before {
transform: translate(-50%, 0) scaleX(1);
}
@media (max-width: 575.98px) {
.hero-cap {
gap: 0.7rem;
}
.hero-cap-icon {
width: 2.25rem;
height: 2.25rem;
}
.hero-cap-icon .fas {
font-size: 1rem;
}
.hero-cap-label {
font-size: 1.125rem;
}
}
/*-----------------------------------------------
| Teal mist — the #about text column
|
| The photo next to it is cool and desaturated; its pale sky (~#dbe9ea)
| meets this column at the top edge, where the previous .bg-light
| (#fafafa, a neutral grey with no blue in it) left a visible seam.
| Body copy (#404040) sits at 8.9:1 here.
-----------------------------------------------*/
.bg-baer-mist {
background-color: var(--baer-teal-mist);
}
/*-----------------------------------------------
| Footer region — the contact / profiles block
|
| It used to be a white section between the white certifications
| section above and the black copyright bar below, so it read as the
| tail of the certifications rather than as the closing block. On the
| dark teal it closes the page and steps down into the black bar.
|
| White on #20454a is 10.44:1; the working green (#4a7c2f) only manages
| 2.1:1 there, so links take the decorative pastel (5.13:1) — the same
| swap the footer bar already makes for .text-baer.
-----------------------------------------------*/
.footer-region {
color: #fff;
}
.footer-region h4,
.footer-region address,
.footer-region p {
color: #fff;
}
.footer-region a {
color: var(--baer-green-accent);
}
.footer-region a:hover,
.footer-region a:focus {
color: #fff;
}
.footer-region a:focus-visible {
outline-color: var(--baer-green-accent);
}
/* Invitation column
*
* "Haben Sie Interesse …" / "Dann nehmen Sie Kontakt …" were two
* same-size paragraphs, so the block had no entry point. It now reads
* kicker → claim → line, the same three-step the .cta-band uses.
*/
.footer-region .footer-kicker {
color: var(--baer-green-accent);
letter-spacing: 0.08em;
}
.footer-region .footer-claim {
color: #fff;
line-height: 1.25;
}
/* Two blocks, not three.
*
* Profiles used to be a third column carrying the same weight as the
* contact data, which made the row read as a link farm. The footer is
* now one primary column on the left — kicker, claim, and past a rule
* the two contact tiles, so the invitation and the way to answer it are
* one uninterrupted read — and one secondary column on the right
* carrying the identity: logo, and past a second rule the profile links
* with the postal address closing the column.
*
* Both column headings share .footer-sublabel; they are