/* ================================================================ Limakdeco - site chrome - HEADER SKIN Single source of truth for the header on every page (EN + FR). Loaded last in , so it wins without editing page CSS. Owns: background, hairline, scroll state, transition. Does NOT own: height, grid, breakpoints, drawer layout. 2026-08-09 ================================================================ */ :root{ --lk-hdr-ink:#0D1419; --lk-hdr-navy:#101E2C; --lk-hdr-line:rgba(201,168,100,.18); } /* the bar itself paints nothing; two pseudo layers do the work */ html body nav.nav, html body .nav{ background:transparent!important; background-image:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; border-bottom:1px solid transparent!important; box-shadow:none!important; transition:border-color .3s ease!important; } /* layer 1 - the opaque skin, faded in once the page is scrolled */ html body nav.nav::before, html body .nav::before{ content:'';position:absolute;left:0;right:0;top:0;bottom:0; background:var(--lk-hdr-ink); opacity:0;transition:opacity .3s ease; pointer-events:none;z-index:-1; } /* layer 2 - reading scrim, so the logo and links stay legible on a photo. Taller than the bar so it fades out instead of ending on a visible edge. */ html body nav.nav::after, html body .nav::after{ content:'';position:absolute;left:0;right:0;top:0;height:210%; background:linear-gradient(180deg, rgba(13,20,25,.86) 0%, rgba(13,20,25,.72) 16%, rgba(13,20,25,.54) 32%, rgba(13,20,25,.36) 48%, rgba(13,20,25,.20) 64%, rgba(13,20,25,.09) 78%, rgba(13,20,25,.03) 90%, rgba(13,20,25,0) 100%); opacity:1;transition:opacity .3s ease; pointer-events:none;z-index:-1; } /* home + faq: the first band is a flat dark surface, so no scrim, just match the colour the hero starts on and the seam disappears */ html body nav.nav.nav--flush{ background:var(--lk-hdr-navy)!important; } html body nav.nav.nav--flush::after{ opacity:0!important; } /* scrolled, or mobile menu open: one opaque skin on every page */ html body nav.nav.solid::before, html body .nav.solid::before, html body nav.nav.open::before, html body.lk-lock nav.nav::before, html body.menu-open nav.nav::before, html body.scroll-locked nav.nav::before{ opacity:1; } html body nav.nav.solid::after, html body .nav.solid::after, html body nav.nav.open::after, html body.lk-lock nav.nav::after, html body.menu-open nav.nav::after, html body.scroll-locked nav.nav::after{ opacity:0; } html body nav.nav.solid, html body .nav.solid, html body nav.nav.open, html body.lk-lock nav.nav, html body.menu-open nav.nav, html body.scroll-locked nav.nav{ border-bottom-color:var(--lk-hdr-line)!important; } /* faq.html un-pinned its header below 640px; align it with every other page */ @media (max-width:640px){ html body nav.nav.nav--flush{ position:sticky!important; top:0!important; } } @media (prefers-reduced-motion:reduce){ html body nav.nav, html body .nav, html body nav.nav::before, html body .nav::before, html body nav.nav::after, html body .nav::after{ transition:none!important; } } /* ===== v2 nav density + CTA restore (2026-08-09) ===== */ html body nav.nav .nav-tel, html body nav.nav .nav-book, html body nav.nav .nav-mid a{white-space:nowrap!important} @media (min-width:1361px) and (max-width:1560px){ html body nav.nav .nav-mid{gap:14px!important} html body nav.nav .nav-mid a{letter-spacing:1.6px!important} html body nav.nav .nav-book{padding:12px 15px!important;letter-spacing:.10em!important} html body nav.nav .nav-tel{padding:11px 14px!important} html body nav.nav .lang a{padding:8px 8px!important} } @media (min-width:1361px) and (max-width:1500px){ html body nav.nav .nav-book{display:inline-flex!important} } /* ===== v3 sticky-header rescue (2026-08-09) ===== overflow-x:hidden on turns it into a scroll container, which kills position:sticky on the nav (this is why faq.html lost its header on scroll). overflow-x:clip crops the same way WITHOUT creating a scroll container. Browsers without clip support simply ignore this and keep the old value. */ /* handled in chrome.js, scoped to the pages that actually need it */ /* ===== v4 legibility over bright photos (2026-08-09) ===== Measured: the hero photos average RGB(167,157,133) behind the bar, and the old scrim left the nav links at roughly 1.9:1 contrast between 0 and 60px of scroll. Scrim strengthened, links lifted to cream while the bar is see-through. */ html body nav.nav::after, html body .nav::after{ background:linear-gradient(180deg, rgba(13,20,25,.94) 0%, rgba(13,20,25,.90) 18%, rgba(13,20,25,.84) 34%, rgba(13,20,25,.74) 46%, rgba(13,20,25,.56) 60%, rgba(13,20,25,.36) 72%, rgba(13,20,25,.18) 84%, rgba(13,20,25,.06) 93%, rgba(13,20,25,0) 100%)!important; } html body nav.nav:not(.solid):not(.nav--flush) .nav-mid a:not([aria-current]), html body nav.nav:not(.solid):not(.nav--flush) .lang a:not([aria-current]){ color:rgba(243,238,231,.94)!important; text-shadow:0 1px 2px rgba(0,0,0,.45); } html body nav.nav:not(.solid):not(.nav--flush) .nav-logo img{ filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); } /* Hero scrim: the old one dipped to 12% opacity exactly where the headline sits, so cream text landed on a white kitchen. Now a directional scrim keeps the left column dark for the type and lets the photo stay clean on the right. */ html body header.hero::after{ background: linear-gradient(90deg, rgba(13,20,25,.80) 0%, rgba(13,20,25,.68) 32%, rgba(13,20,25,.36) 56%, rgba(13,20,25,.12) 78%, rgba(13,20,25,0) 100%), linear-gradient(180deg, rgba(13,20,25,.76) 0%, rgba(13,20,25,.46) 22%, rgba(13,20,25,.40) 50%, rgba(13,20,25,.58) 74%, rgba(13,20,25,.94) 100%)!important; } @media (max-width:980px){ html body header.hero::after{ background:linear-gradient(180deg, rgba(13,20,25,.80) 0%, rgba(13,20,25,.60) 24%, rgba(13,20,25,.58) 50%, rgba(13,20,25,.72) 76%, rgba(13,20,25,.96) 100%)!important; } } /* ===== v5 one header for both nav structures (2026-08-09) ===== index.html + faq.html (EN/FR) use .nav-logo-wrap/.nav-links/.nav-actions, the other 65 pages use .nav-logo/.nav-mid/.nav-right. Same look, two names, so every skin rule below is written for both. */ html body nav.nav .nav-phone, html body nav.nav .nav-bookbtn, html body nav.nav .nav-links > a, html body nav.nav .nav-links > .nd > .nd-t{white-space:nowrap!important} @media (min-width:1361px) and (max-width:1560px){ html body nav.nav .nav-links{gap:14px!important} html body nav.nav .nav-links > a, html body nav.nav .nav-links > .nd > .nd-t{letter-spacing:1.6px!important} html body nav.nav .nav-bookbtn{padding:12px 15px!important;letter-spacing:.10em!important;margin-left:10px!important} } @media (min-width:1361px) and (max-width:1500px){ html body nav.nav .nav-bookbtn{display:inline-flex!important} } /* French labels are longer than English ones, so the FR bar needs its own density steps to keep the CTA visible without the links touching it. */ @media (min-width:1361px) and (max-width:1500px){ html[lang^="fr"] body nav.nav .nav-mid, html[lang^="fr"] body nav.nav .nav-links{gap:9px!important} html[lang^="fr"] body nav.nav .nav-mid a, html[lang^="fr"] body nav.nav .nav-links > a, html[lang^="fr"] body nav.nav .nav-links > .nd > .nd-t{letter-spacing:1px!important} html[lang^="fr"] body nav.nav .nav-book, html[lang^="fr"] body nav.nav .nav-bookbtn{padding:12px 11px!important;letter-spacing:.04em!important;font-size:10px!important} html[lang^="fr"] body nav.nav .nav-tel{padding:11px 12px!important} html[lang^="fr"] body nav.nav .lang a{padding:8px 8px!important} html[lang^="fr"] body nav.nav .nav-right, html[lang^="fr"] body nav.nav .nav-actions{gap:8px!important} } @media (min-width:1501px) and (max-width:1640px){ html[lang^="fr"] body nav.nav .nav-mid, html[lang^="fr"] body nav.nav .nav-links{gap:12px!important} html[lang^="fr"] body nav.nav .nav-mid a, html[lang^="fr"] body nav.nav .nav-links > a, html[lang^="fr"] body nav.nav .nav-links > .nd > .nd-t{letter-spacing:1.4px!important} html[lang^="fr"] body nav.nav .nav-book, html[lang^="fr"] body nav.nav .nav-bookbtn{padding:12px 13px!important;letter-spacing:.06em!important} html[lang^="fr"] body nav.nav .nav-tel{padding:11px 14px!important} } /* ===== v6 shared footer (2026-08-09) ===== faq.html and fr/faq.html shipped without any footer at all. The markup is now the same element the two home pages use, so the styling lives here once. */ footer.lk-foot{padding:26px var(--pad-x,clamp(20px,5vw,80px)) 110px;border-top:1px solid var(--border,rgba(201,168,100,.15));font:300 12px/1.9 'Inter',sans-serif;color:var(--muted2,#9a927f);text-align:center} footer.lk-foot a{color:inherit;text-decoration:none} footer.lk-foot a:hover{color:var(--gold,#C9A864)} @media (max-width:900px){footer.lk-foot{padding-bottom:76px}} /* Footer skin, one palette everywhere. The interior pages and the two Journals still carried a warm grey (139,126,107) from an older palette while their own body copy had already moved to the cool grey the rest of the site uses. */ html body > footer{color:var(--muted2,#A8BAC8)!important;border-top:1px solid rgba(201,168,100,.15)!important;padding-top:26px!important} html body > footer a{color:inherit!important;text-decoration:none!important} html body > footer a:hover{color:var(--gold,#C9A864)!important} /* ===== v7 . unified site footer (2026-08-09) ===================== One footer component for every static page, EN + FR. The markup is built by chrome.js so there is a single source of truth; this file is only its skin. It replaces three different footers that used to ship: the bare