/* ========================================================================== WI.NE 71 — premium polish layer Loaded LAST, after: bootstrap.min.css -> usn-global.min.css -> wine71-footer.css. Scoped to real theme selectors only; the Bootstrap 3 grid (.container/.row/.col-*) is never touched. The footer and .int-credit are owned by wine71-footer.css and are intentionally out of scope here. Direction: "premium exaggerated minimalism" — oversized clamp() display type, wide-tracked kickers, generous rhythm, refined micro-detail, WCAG AA. Palette (theme utilities): c1 #4cb8a6 teal, c2 #7bdccb, c3 #151515 ink, c4 #197868 deep green, c5 #fff, c6 #95dcd0 pale teal, red #e84b0f (LOGO ONLY). AA strategy: #4cb8a6 becomes decorative/accent + text-on-dark only; the deep greens #197868 / #1c7a63 carry every text + fill role on light surfaces; red #e84b0f retreats to the WI.NE71 logo mark. Encode Sans is the only font (weights 300-900, normal only — never italic; browsers would fake-oblique). ========================================================================== */ /* ========================================================================== 1. Design tokens ========================================================================== */ :root { --ink: #151515; /* c3 — deepest surface / text */ --ink-soft: #374151; /* body copy on light (10.3:1 on white) */ --ink-mute: #4b5563; /* secondary label copy */ --deep: #1c7a63; /* brand deep green (accent-bar, borders) */ --deep-2: #197868; /* theme c4 — AA workhorse fill (white 5.35:1) */ --deep-strong: #145f52; /* hover / pressed */ --deep-darker: #14604f; /* darkest green — dropdowns, gradients */ --teal: #4cb8a6; /* c1 — decorative + text on dark */ --teal-light: #7bdccb; /* c2 — accents on dark, focus ring on dark */ --teal-pale: #95dcd0; /* c6 */ --card: #f2faf8; /* refined pale card surface */ --focus: #197868; /* focus ring on light */ --focus-dark: #95dcd0; /* focus ring on dark (11.7:1 on ink) */ --ring: 0 0 0 3px rgba(28, 122, 99, .25); --ease: cubic-bezier(.22, .61, .36, 1); } /* ========================================================================== 2. Typography & vertical rhythm German is set on — long compounds get wrapping/hyphenation. ========================================================================== */ /* Long-word safety on content containers (never on grid classes) */ #content .text, .content-wrapper, .promo-pods .item .heading, .promo-pods .item .text, .apc.pod-windows .item .heading, .content.c3-bg .listing .item .heading, .items-values, .cookie-notice .text { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } /* Ink upgrade + rhythm on LIGHT surfaces only (never overrides .c5-text on dark bands, which stays scoped away from these selectors). */ .content.c5-bg .base-text, .content.c5-bg .text, .promo-pods .item .text, .content-wrapper, .content-wrapper p { color: var(--ink-soft); } .content.c5-bg .text, .content .content-wrapper, .content-wrapper p, .promo-pods .item .text { line-height: 1.7; } /* Section kickers — wide-tracked premium micro-heading */ .secondary-heading { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; } /* Kicker contrast: teal c1-text fails on white — swap to deep green on light surfaces; teal is kept where it sits on dark bands (c3/c4). */ .content.c5-bg .secondary-heading.c1-text, .contact.form .secondary-heading.c1-text { color: var(--deep-2); } /* Kicker on a photo hero (mietobjekte overview on the metallic-gray shot): teal c1-text has too little luminance contrast against the photo. Brighten the brand teal and add a dark halo so the kicker reads on any part of the image. */ .content[style*="background-image"] .overview .secondary-heading.c1-text { color: #7fe0cd; font-size: 18px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 12px rgba(0, 0, 0, .45); } /* Section headings — larger, tighter, with a short brand accent bar that replaces the dated JS-injected full-width underline (span.line). */ .heading.main span.line { border: 0; /* neutralize scripts/application.js wrapInner underline */ padding: 0; } .spc .heading.main, .apc:not(.banner) .heading.main { font-size: clamp(1.75rem, 2.2vw + .9rem, 2.6rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; } .content h1.heading.main { font-size: clamp(2.1rem, 3vw + 1rem, 3.25rem); font-weight: 800; letter-spacing: -.02em; } /* Accent bar */ .heading.main::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 14px; background: linear-gradient(90deg, var(--deep) 0%, var(--teal) 100%); border-radius: 2px; } .text-center .heading.main::after { margin-left: auto; margin-right: auto; } /* No accent bar on the hero or on tile headings (photo cards) */ .apc.banner .heading.main::after, .item .heading.main::after, .item .heading::after { display: none; } /* Lead / intro paragraph ("byline" lead sentences). NOTE: the theme sets the root font-size to 10px, so 1rem = 10px here — every rem below is half what a 16px root would give. A prior polish pass sized this in rem assuming a 16px root, which quietly shrank the lead text to ~13px (the theme's own intent was ~22px). Restored to a comfortable ~20px on tablet rising to ~22px on wide desktop, so it reads easily for older visitors on all pages. */ .intro { font-size: clamp(2rem, .3vw + 1.85rem, 2.25rem); line-height: 1.65; font-weight: 400; color: var(--ink-soft); } /* Generous section rhythm on real content bands. Banner, .no-padding and the kontakt map band are excluded (they own their own geometry). */ #content > section.content.apc:not(.banner):not(.no-padding):not(.map), #content > section.content.c5-bg:not(.apc) { padding-top: clamp(64px, 9vw, 128px); padding-bottom: clamp(64px, 9vw, 128px); } /* Intra-section air */ .spc .overview { margin-bottom: clamp(24px, 4vw, 48px); } .spc .overview .heading.main + .text { margin-top: 20px; } /* ========================================================================== 3. Header & primary navigation — boutique sticky bar The theme ships a cramped 50px teal/charcoal bar that hides on scroll-down and reveals on scroll-up. Here it becomes a taller (72px desktop), frosted, ALWAYS-visible bar with a prominent white logo lockup, larger tracked links, an animated teal underline, and a frosted-charcoal dropdown. Colours match the theme's own scrolled state (#151515 + white links) so AA is preserved. ========================================================================== */ /* --- 3a. Sticky & always visible ----------------------------------------- */ /* Defeat the hide-on-scroll-down: while scrolling down (html.nav-up) the theme drops the bar to top:-90px, fades the logo to opacity:0, and stretches the nav to full width (left:0, items float left). Since we keep the bar pinned, all three side-effects must be neutralised so the pinned bar keeps its logo and right-aligned links. Equal specificity + later cascade — no !important needed. */ html.nav-up header { top: 0; } html.nav-up header #logo { opacity: 1; } html.nav-up .navigation nav.main { left: auto; } /* --- 3b. Frosted bar surface --------------------------------------------- */ /* Over the hero at the very top of banner pages: transparent (the theme paints a teal fill here) with a top-down charcoal scrim so white links/logo hold contrast on bright photography. */ body.banner-top header { background-color: transparent; background-image: linear-gradient(180deg, rgba(15, 17, 16, .74) 0%, rgba(15, 17, 16, .30) 60%, rgba(15, 17, 16, 0) 100%); } /* Scrolled state + all header-less (non-banner) pages: frosted charcoal glass with a hairline and soft drop shadow. Selectors mirror the theme's own #151515 rules exactly, so later cascade wins without !important. */ html.nav-down header, html.nav-up header, body:not(.banner-top) header { background-color: rgba(18, 20, 19, .82); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .26); } /* --- 3c. Prominent logo lockup ------------------------------------------- */ /* The theme hides the wordmark and paints a 35x40 badge. Promote it to a white rounded chip so the WI.NE71 mark reads as a boutique logo on any background. body-prefixed selectors out-rank the per-page inline