/* ================================================================ Salsielo — shared design tokens + site chrome (header/nav/footer) One file, used on every page. Edit here, it applies everywhere — injected automatically by functions/_middleware.js, so you never need to this by hand or copy these rules into a page. ================================================================ */ :root{ --bg:#F8F3EA; --surface:#FFFFFF; --surface-2:#F1E9DA; --ink:#241E1A; --ink-soft:#6B5F55; --accent:#E8432B; --accent-ink:#FFFFFF; --accent-2:#2F7A4F; --amber:#F4A32C; --line:#E7DDD0; --shadow: 0 1px 2px rgba(36,30,26,.06), 0 10px 28px rgba(36,30,26,.08); } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Public Sans", ui-sans-serif, system-ui, sans-serif; font-size:16px; line-height:1.6; } h1,h2,h3{ font-family:"Archivo", ui-sans-serif, system-ui, sans-serif; text-wrap:balance; line-height:1.1; margin:0; } p{ margin:0; } img,svg{ max-width:100%; display:block; } a{ color:inherit; } .wrap{ max-width:1320px; margin:0 auto; padding:0 32px; } @media (max-width:640px){ .wrap{ padding:0 20px; } } .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:17px; padding:19px 36px; border-radius:14px; border:2px solid transparent; cursor:pointer; text-decoration:none; font-family:"Public Sans", sans-serif; transition:transform .15s ease, box-shadow .15s ease; } .btn-primary{ background:var(--amber); color:var(--ink); border-color:var(--ink); box-shadow:var(--shadow); } .btn-primary:hover{ background:#FFC24D; transform:translateY(-2px); } .btn-outline{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.8); } .btn-outline:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); } /* ============ header — two modes ============ 1) "transparent hero" mode (index.html): starts see-through, overlays a dark hero, solidifies on scroll. Opt in with . 2) "solid" mode (every other page): light bar, sits in normal flow at the top, sticks while scrolling. This is the default. */ header.site{ position:absolute; top:0; left:0; right:0; z-index:40; padding:18px 0; transition:background .25s ease, box-shadow .25s ease, padding .25s ease, position 0s; } header.site.solid{ position:fixed; background:rgba(248,243,234,.96); backdrop-filter:blur(6px); box-shadow:0 1px 0 var(--line); padding:12px 0; } header.site.chrome-static{ position:sticky; top:0; background:rgba(248,243,234,.96); backdrop-filter:blur(6px); box-shadow:0 1px 0 var(--line); padding:12px 0; } .nav-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; } .wordmark{ display:flex; align-items:center; text-decoration:none; flex-shrink:0; } .wordmark .logo-img{ height:28px; width:auto; display:block; } @media (min-width:760px){ .wordmark .logo-img{ height:32px; } } .nav-links{ display:none; list-style:none; margin:0; padding:0; gap:28px; align-items:center; } .nav-links a{ font-weight:600; font-size:14.5px; text-decoration:none; color:#fff; opacity:.92; transition:opacity .2s ease, color .2s ease; } .nav-links a:hover{ opacity:1; } header.site.solid .nav-links a, header.site.chrome-static .nav-links a{ color:var(--ink); opacity:.85; } header.site.solid .nav-links a:hover, header.site.chrome-static .nav-links a:hover{ color:var(--accent); opacity:1; } @media (min-width:900px){ .nav-links{ display:flex; } } .nav-right{ display:flex; align-items:center; gap:14px; } #lang-toggle{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:12px; font-weight:600; letter-spacing:.03em; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:7px 12px; cursor:pointer; color:#fff; } header.site.solid #lang-toggle, header.site.chrome-static #lang-toggle{ background:var(--surface); border-color:var(--line); color:var(--ink-soft); } #lang-toggle b{ color:var(--amber); } header.site.solid #lang-toggle b, header.site.chrome-static #lang-toggle b{ color:var(--accent); } .icon-link{ display:flex; align-items:center; gap:6px; color:#fff; text-decoration:none; font-size:13.5px; font-weight:600; } header.site.solid .icon-link, header.site.chrome-static .icon-link{ color:var(--ink); } .icon-link svg{ width:20px; height:20px; } .basket-link{ position:relative; } .basket-count{ position:absolute; top:-6px; right:-8px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono", monospace; } .signin-label, .basket-label{ display:none; } @media (min-width:1080px){ .signin-label, .basket-label{ display:inline; } } .nav-cta{ display:none; align-items:center; font-family:"Public Sans", sans-serif; font-weight:700; font-size:13.5px; color:var(--ink); background:var(--amber); border-radius:999px; padding:9px 18px; text-decoration:none; transition:transform .15s ease; } .nav-cta:hover{ transform:translateY(-1px); } @media (min-width:900px){ .nav-cta{ display:inline-flex; } } /* Admin-only link, shown site-wide the moment an admin phone is logged in (see _middleware.js/isAdmin) — so admin access is never invisible. Distinct green from the amber reserve CTA on purpose: this isn't a marketing action, it's "you have elevated access, here's the door." */ .admin-badge{ display:none; align-items:center; gap:5px; font-family:"Public Sans", sans-serif; font-weight:700; font-size:12.5px; color:#fff; background:var(--accent-2); border-radius:999px; padding:7px 13px; text-decoration:none; white-space:nowrap; } .admin-badge:hover{ opacity:.9; } @media (min-width:900px){ .admin-badge{ display:inline-flex; } } #mobile-menu .mm-foot a.admin-badge-mobile{ display:inline-flex; align-items:center; gap:6px; font-family:"Archivo",sans-serif; font-weight:700; font-size:14px; color:#fff; background:var(--accent-2); border-radius:999px; padding:10px 18px; text-decoration:none; align-self:flex-start; } .mm-cta{ display:inline-flex; align-items:center; justify-content:center; font-family:"Archivo",sans-serif; font-weight:700; font-size:15px; color:var(--ink); background:var(--amber); border-radius:999px; padding:12px 20px; text-decoration:none; } #menu-toggle{ display:flex; width:40px; height:40px; border-radius:8px; border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.1); align-items:center; justify-content:center; cursor:pointer; } header.site.solid #menu-toggle, header.site.chrome-static #menu-toggle{ border-color:var(--line); background:var(--surface); } #menu-toggle svg{ width:20px; height:20px; stroke:#fff; } header.site.solid #menu-toggle svg, header.site.chrome-static #menu-toggle svg{ stroke:var(--ink); } @media (min-width:900px){ #menu-toggle{ display:none; } } #mobile-menu{ display:none; position:fixed; inset:0; z-index:50; background:var(--ink); padding:20px 22px; overflow-y:auto; } #mobile-menu.open{ display:block; } #mobile-menu .close-row{ display:flex; justify-content:space-between; align-items:center; } #mobile-menu .wordmark .logo-img{ height:26px; } #menu-close{ width:40px; height:40px; border-radius:8px; border:1px solid rgba(255,255,255,.3); background:transparent; display:flex; align-items:center; justify-content:center; } #menu-close svg{ width:18px; height:18px; stroke:#fff; } #mobile-menu ul{ list-style:none; margin:36px 0 0; padding:0; display:flex; flex-direction:column; gap:22px; } #mobile-menu a{ color:#fff; font-family:"Archivo",sans-serif; font-weight:700; font-size:1.5rem; text-decoration:none; } #mobile-menu .mm-foot{ margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.15); display:flex; flex-direction:column; gap:16px; } #mobile-menu .mm-foot a{ font-size:15px; font-weight:600; color:#D9CFC1; display:flex; align-items:center; gap:8px; } /* Pages using the solid/static header (everything but the homepage hero) need the header out of "overlay" mode from the very first paint, so there's no flash of it floating over the top of the page content. */ body:not([data-header="hero"]) header.site{ position:sticky; } /* ============ footer — bold full-bleed dark band ============ */ footer.site{ background:var(--ink); padding:100px 0 60px; } .footer-grid{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; } .footer-brand .logo-img{ height:28px; margin-bottom:12px; filter:brightness(0) invert(1); } .footer-brand p{ font-size:13.5px; color:#D9CFC1; max-width:30ch; } .footer-links{ display:flex; gap:48px; flex-wrap:wrap; } .footer-links h4{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:#A79484; margin-bottom:14px; } .footer-links ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; } .footer-links a{ font-size:14px; color:#F8F3EA; text-decoration:none; } .footer-links a:hover{ color:var(--amber); } .footer-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(248,243,234,.14); font-size:12.5px; color:#A79484; } /* Pre-launch: hide entry points to sign-in until there's something to sign into for a public visitor. Remove this rule (and the class from functions/_lib/layout.js) once orders are open. */ .prelaunch-hide{ display:none !important; }