/* Harmonie Beauté — polish-base.css: shared chrome (nav, toggles, menu, Book, footer). #navbar = landing, over dark hero */ :root{ --hbc-ink:color-mix(in srgb,var(--earth,#8B6F5C) 74%,var(--charcoal,#2C1820)); --hbc-line:color-mix(in srgb,var(--sand,#DDD4C0) 85%,transparent); --hbc-edge:color-mix(in srgb,var(--sand-dark,var(--sand-dk,#C8BFB0)) 85%,transparent); --hbc-gold-line:color-mix(in srgb,var(--gold,#C8906A) 50%,transparent); --hbc-tint:color-mix(in srgb,var(--moss) 32%,transparent); --hbc-champagne:#F3DDBC; --hbc-ease:cubic-bezier(.22,.61,.36,1); } /* Intentional: legal pages ship a green-only :root; re-theme under rose (pale lighter: moss on it 6.6:1) */ html[data-theme="rose"]:has(.policy-section){--moss:#7A3050;--moss-light:#9A4A6A;--moss-pale:#EED8E1;--charcoal:#2C1820;--dark:#2C1820;--shadow:rgba(122,48,80,.10)} /* ── NAVBAR: translucent cream, gold thread, soft depth ── */ .navbar:not(#navbar){ position:sticky;top:0; background:color-mix(in srgb,var(--cream) 90%,transparent); -webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px); border-bottom:1px solid var(--hbc-line); box-shadow:0 1px 2px rgba(0,0,0,.03),0 10px 28px -20px var(--hbc-tint); } .navbar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--hbc-gold-line) 30% 70%,transparent)} #navbar:not(.scrolled)::after{opacity:0} #navbar.scrolled{background:color-mix(in srgb,var(--cream) 90%,transparent);border-bottom-color:var(--hbc-line); box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 30px -18px var(--hbc-tint)} .logo{white-space:nowrap} /* Links: AA ink, gold underline */ .nav-links a{white-space:nowrap;color:var(--hbc-ink);position:relative;padding:6px 0;transition:color .25s var(--hbc-ease)} .nav-links a:hover,.nav-links a.active{color:var(--moss)} .nav-links a::after{content:'';position:absolute;left:50%;bottom:0;width:0;height:1.5px;border-radius:2px;background:var(--gold); transition:.3s var(--hbc-ease);transition-property:width,left} .nav-links a:hover::after,.nav-links a.active::after{width:100%;left:0} /* ── RIGHT CLUSTER ── */ .nav-right{gap:12px} /* Theme + lang: soft pills */ .theme-toggle{position:relative;height:34px;padding:0 6px 0 9px;gap:6px;border:1px solid var(--hbc-edge);border-radius:999px; background:color-mix(in srgb,var(--white,#FAF6F0) 70%,transparent);box-shadow:inset 0 1px 2px rgba(0,0,0,.04); transition:.25s var(--hbc-ease);transition-property:border-color,background} .theme-toggle:hover{border-color:var(--hbc-gold-line)} .theme-toggle::after{content:'';position:absolute;inset:-7px -2px} .theme-toggle-track{width:36px;height:20px;background:var(--moss);border:1px solid rgba(0,0,0,.06);box-shadow:inset 0 1px 2px rgba(0,0,0,.18)} .theme-toggle-thumb{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)} .navbar .lang-toggle{height:34px;padding:2px;gap:2px;align-items:center;overflow:visible;border:1px solid var(--hbc-edge);border-radius:999px; background:color-mix(in srgb,var(--white,#FAF6F0) 70%,transparent);box-shadow:inset 0 1px 2px rgba(0,0,0,.04)} .navbar .lang-btn{position:relative;height:28px;min-width:34px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center; border-radius:999px;color:color-mix(in srgb,var(--moss) 82%,var(--earth,#8B6F5C));transition:.25s var(--hbc-ease);transition-property:background,color} .navbar .lang-btn:not(.active):hover{background:color-mix(in srgb,var(--moss) 9%,transparent)} .navbar .lang-toggle .lang-btn.active{background:var(--moss);color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.12),0 3px 8px -4px color-mix(in srgb,var(--moss) 60%,transparent)} .navbar .lang-btn::after{content:'';position:absolute;inset:-8px 0} /* Book: moss pill, 44px+ hit */ .btn-nav{position:relative;height:38px;line-height:38px;padding:0 1.4rem;border-radius:999px;white-space:nowrap;font-weight:600;letter-spacing:.12em; background:var(--moss);color:var(--hbc-champagne); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.08),0 10px 22px -12px color-mix(in srgb,var(--moss) 75%,transparent); transition:.25s var(--hbc-ease);transition-property:transform,box-shadow,background} .btn-nav:hover{background:color-mix(in srgb,var(--moss) 82%,var(--charcoal));transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 4px rgba(0,0,0,.08),0 14px 28px -12px color-mix(in srgb,var(--moss) 80%,transparent)} .btn-nav::after{content:'';position:absolute;inset:-4px 0} /* Hamburger: 36px chip, 40x44 hit */ .hamburger{position:relative;width:36px;height:36px;padding:0;align-items:center;justify-content:center;border-radius:12px; background:color-mix(in srgb,var(--moss) 8%,transparent);transition:background .25s var(--hbc-ease)} .hamburger::after{content:'';position:absolute;inset:-4px -2px} .nav-right .hamburger{order:5} /* last when Book shows */ .hamburger:hover,.hamburger.open{background:color-mix(in srgb,var(--moss) 13%,transparent)} .hamburger span{width:20px} /* Landing over dark hero */ #navbar:not(.scrolled) .theme-toggle,#navbar:not(.scrolled) .lang-toggle{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07);box-shadow:none} #navbar:not(.scrolled) .lang-btn:not(.active){color:rgba(255,255,255,.8)} #navbar:not(.scrolled) .hamburger{background:rgba(255,255,255,.1)} /* beats inline .navbar.scrolled .lang-btn (3.1:1) */ #navbar.scrolled .lang-btn:not(.active){color:color-mix(in srgb,var(--moss) 85%,var(--charcoal))} #navbar .btn-nav,#navbar ~ .mobile-menu .mobile-menu-book button{background:linear-gradient(135deg,#8E5C38,#9A6640);color:#fff} :is(.navbar,.mobile-menu) :is(a,button):focus-visible,body>footer a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:999px} /* ── MOBILE MENU sheet ── */ .mobile-menu{background:color-mix(in srgb,var(--cream) 95%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border-bottom:1px solid var(--hbc-line);border-radius:0 0 20px 20px; box-shadow:0 1px 0 var(--hbc-gold-line) inset,0 24px 44px -24px color-mix(in srgb,var(--moss) 45%,transparent)} .mobile-menu.open{max-height:480px} .mobile-menu ul{padding:.4rem 0} .mobile-menu ul li a{display:flex;align-items:center;justify-content:space-between;margin:0 1.25rem;padding:.95rem .25rem; color:var(--hbc-ink);border-bottom:1px solid var(--hbc-line);transition:color .2s var(--hbc-ease)} .mobile-menu ul li:last-child a{border-bottom:none} .mobile-menu ul li a::after{content:'';width:6px;height:6px;flex-shrink:0;border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold);transform:rotate(45deg)} .mobile-menu ul li a:hover{background:none;color:var(--moss)} .mobile-menu-book{padding:.4rem 1.25rem 1.25rem;border-top:none} .mobile-menu-book button{min-height:48px;border-radius:999px;background:var(--moss);color:var(--hbc-champagne);letter-spacing:.12em; box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 24px -12px color-mix(in srgb,var(--moss) 80%,transparent)} /* ── RESPONSIVE NAV ── */ @media (min-width:901px) and (max-width:1100px){ .navbar:not(#navbar),#navbar{padding-left:2rem;padding-right:2rem} .nav-links{gap:1.5rem} } @media (max-width:900px){ .navbar{gap:10px} .navbar:not(#navbar),#navbar{padding-left:16px;padding-right:16px} .logo{font-size:1.3rem} .navbar .logo{padding-block:6px;min-height:40px} /* 40px tap */ .nav-right{gap:8px} .mobile-menu{display:block!important} /* index hid it at 768+ */ .navbar .btn-nav{height:36px;line-height:36px;padding:0 1.1rem;font-size:.68rem} .navbar .lang-toggle{gap:0} .navbar .lang-btn{min-width:36px} .navbar .lang-btn:first-child::after{left:-4px} /* ≈40px hit */ .navbar .lang-btn:last-child::after{right:-4px} } @media (max-width:900px){.navbar .btn-nav{display:inline-block}} /* Book is the CTA: always in the bar */ @media (max-width:639px){ .navbar{gap:6px} .nav-right{gap:6px} .logo{font-size:1.15rem} .theme-toggle-icon{display:none} .theme-toggle{height:32px;padding:0 3px;gap:0} .navbar .lang-toggle{height:32px;padding:0} .navbar .lang-toggle .lang-btn.active{display:none} /* only the language to switch to */ .navbar .lang-btn{height:30px;min-width:36px;padding:0 8px} .navbar .lang-btn:is(:first-child,:last-child)::after{inset:-7px -3px} .navbar .btn-nav{height:34px;line-height:34px;padding:0 .8rem;font-size:.64rem;letter-spacing:.08em} .hamburger{width:34px;height:34px} .hamburger::after{inset:-4px -3px} } @media (max-width:420px){ .nav-right{gap:5px} .logo{font-size:1.05rem} .navbar .logo{gap:6px!important} /* index inline gap */ .logo-mascot{display:none} /* index: room for Book */ .navbar .btn-nav{padding:0 .7rem;letter-spacing:.06em} } @media (max-width:389px){ .navbar{gap:4px} .navbar:not(#navbar),#navbar{padding-left:14px;padding-right:14px} .nav-right{gap:4px} .logo{font-size:.95rem} .navbar .logo{letter-spacing:0} .theme-toggle{padding:0 2px} .navbar .btn-nav{padding:0 .5rem;font-size:.62rem;letter-spacing:.04em} } @media (max-width:359px){.navbar .theme-toggle{display:none}} /* 320px: logo + lang + Book + menu only */ /* Deeper shadow once scrolled (progressive) */ @supports (animation-timeline:scroll()){ @media (prefers-reduced-motion:no-preference){ .navbar:not(#navbar){animation:hbc-nav-depth linear both;animation-timeline:scroll(root);animation-range:0 140px} @keyframes hbc-nav-depth{to{background-color:color-mix(in srgb,var(--cream) 94%,transparent); box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 32px -16px var(--hbc-tint)}} } } /* ── FOOTER (body>footer: posts also use