/* ============================================================================ Scarlett St. Claire — shared page chrome Top announcement bar · nav · mobile drawer · footer · buttons · cookie banner One implementation, used byte-identically by every main_site page. Before this file existed each page redeclared its own nav and footer, which is how the three pages drifted into three different navs and three different footers. Add a page, link this file, copy the markup blocks — do not fork. Depends on: ds/styles.css (tokens). Link that first. Structural note — the nav is deliberately EDGE-ALIGNED (two zones: brand + section links hard left, actions hard right) rather than the three-zone "wordmark left / links centred / button right" bar. That three-zone shape is the single most template-looking nav on the web and it reads the same on any site; the two-zone version keeps every destination but stops looking stamped out. Keep it that way. ============================================================================ */ /* ── Root guards ─────────────────────────────────────────────────────────── */ html { overflow-x: clip; } body { overflow-x: clip; } /* ── Brand type helpers ────────────────────────────────────────────────────── The SCARLETT / St. Claire lockup: condensed caps display beside an intimate italic serif. Used in the nav, the footer and the drawer, so it lives with the chrome rather than being redeclared per page. ────────────────────────────────────────────────────────────────────────── */ .brand-b { font-family: var(--font-display); font-weight: var(--w-reg); letter-spacing: .06em; line-height: .95; } .brand-i { font-family: var(--font-serif); font-style: italic; font-weight: var(--w-light); letter-spacing: var(--track-serif); line-height: var(--lh-head); } /* ══════════════════════════════════════════════════════════════════════════ TOP ANNOUNCEMENT BAR Shown by page JS (adds .has-top-bar to ); hidden by default. ══════════════════════════════════════════════════════════════════════════ */ .ssc-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-topbar); height: var(--topbar-h); display: none; /* page JS flips this to flex */ align-items: center; background: var(--black); border-bottom: 1px solid var(--hairline-dark); } .ssc-topbar__label { flex-shrink: 0; height: 100%; display: flex; align-items: center; padding: 0 var(--sp-5); font-family: var(--font-ui); font-size: var(--t-3xs); font-weight: var(--w-bold); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--white); background: var(--pink); white-space: nowrap; } .ssc-topbar__text { flex: 1; min-width: 0; padding: 0 var(--sp-5); font-family: var(--font-ui); font-size: var(--t-xs); font-weight: var(--w-light); letter-spacing: .04em; color: var(--on-dark-2); white-space: nowrap; overflow: hidden; transition: opacity .3s; } .ssc-topbar__text a { color: inherit; } .ssc-topbar__text a:hover { color: var(--pink); } .ssc-topbar__text.scrolling { animation: sscTickerScroll var(--ticker-dur, 10s) linear 1.4s infinite; } .ssc-topbar__close { flex-shrink: 0; height: 100%; width: 44px; display: flex; align-items: center; justify-content: center; color: var(--on-dark-4); cursor: pointer; transition: color var(--ease-hover); font-size: var(--t-base); border: none; background: none; } .ssc-topbar__close:hover { color: var(--on-dark-2); } @keyframes sscTickerScroll { 0% { transform: translateX(0); } 12% { transform: translateX(0); } 80% { transform: translateX(var(--ticker-tx, 0px)); } 92% { transform: translateX(var(--ticker-tx, 0px)); } 100% { transform: translateX(0); } } /* ══════════════════════════════════════════════════════════════════════════ NAV — edge-aligned, two zones [ wordmark │ section links ] ······················· [ actions ] [ burger ] ══════════════════════════════════════════════════════════════════════════ */ .ssc-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); display: flex; align-items: center; gap: var(--sp-6); height: var(--nav-h); padding: 0 var(--sp-12); background: var(--black); border-bottom: 1px solid var(--hairline-dark); transition: border-bottom-color .3s; } .ssc-nav.is-scrolled { border-bottom-color: var(--hairline-dark-2); } .has-top-bar .ssc-nav { top: var(--topbar-h); } /* Brand lockup */ .ssc-nav__brand { display: flex; align-items: baseline; gap: 5px; flex-shrink: 0; text-decoration: none; white-space: nowrap; } .ssc-nav__brand .brand-b { font-size: 26px; color: var(--white); } .ssc-nav__brand .brand-i { font-size: 20px; color: var(--pink); } /* Section links sit immediately beside the wordmark, divided by a hairline — this is what breaks the centred-link template shape. */ .ssc-nav__links { display: flex; align-items: center; gap: var(--sp-9); list-style: none; margin: 0; padding: 0 0 0 var(--sp-6); border-left: 1px solid var(--hairline-dark-2); min-width: 0; } .ssc-nav__links a { display: inline-block; font-family: var(--font-ui); font-size: var(--t-xs); font-weight: var(--w-med); letter-spacing: .15em; text-transform: uppercase; color: var(--on-dark-2); text-decoration: none; white-space: nowrap; transition: color var(--ease-hover); } .ssc-nav__links a:hover, .ssc-nav__links a.is-active { color: var(--white); } /* Actions pinned to the right edge */ .ssc-nav__actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; flex-shrink: 0; } /* Action button variants */ .ssc-navbtn { font-family: var(--font-ui); font-size: var(--t-2xs); font-weight: var(--w-semi); letter-spacing: .18em; text-transform: uppercase; padding: 9px var(--sp-5); border-radius: var(--r-full); text-decoration: none; white-space: nowrap; transition: opacity var(--ease-hover), color var(--ease-hover), border-color var(--ease-hover); } .ssc-navbtn--primary { color: var(--white); background: var(--pink); border: 1px solid var(--pink); padding: 10px var(--sp-6); } .ssc-navbtn--primary:hover { opacity: .85; } .ssc-navbtn--solid { color: var(--black); background: var(--white); border: 1px solid var(--white); font-weight: var(--w-bold); } .ssc-navbtn--solid:hover { opacity: .85; } .ssc-navbtn--ghost { color: var(--on-dark-3); background: transparent; border: 1px solid var(--hairline-dark-2); } .ssc-navbtn--ghost:hover { color: var(--white); border-color: var(--on-dark-3); } /* Hamburger */ .ssc-nav__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: var(--sp-2); margin-left: auto; background: none; border: none; cursor: pointer; } .ssc-nav__burger span { display: block; width: 22px; height: 1.5px; background: var(--white); border-radius: 2px; transition: transform .3s, opacity .3s; } .ssc-nav__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .ssc-nav__burger.is-open span:nth-child(2) { opacity: 0; } .ssc-nav__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ── Mobile drawer ───────────────────────────────────────────────────────── */ .ssc-drawer { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: var(--z-mobilemenu); background: var(--black); border-bottom: 1px solid var(--hairline-dark-2); padding: var(--sp-6) var(--sp-5) var(--sp-8); flex-direction: column; gap: 0; max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; } .ssc-drawer.is-open { display: flex; } .has-top-bar .ssc-drawer { top: calc(var(--nav-h) + var(--topbar-h)); } .ssc-drawer a { display: block; padding: 14px var(--sp-1); font-family: var(--font-ui); font-size: var(--t-base); font-weight: var(--w-med); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.07); transition: color var(--ease-hover); } .ssc-drawer a:last-of-type { border-bottom: none; } .ssc-drawer a:hover, .ssc-drawer a.is-active { color: var(--white); } .ssc-drawer__cta { margin-top: var(--sp-5); text-align: center; background: var(--pink); color: var(--white) !important; padding: 14px; border-radius: var(--r-full); font-size: var(--t-xs); letter-spacing: .18em; border-bottom: none !important; } .ssc-drawer__cta:hover { opacity: .85; } @media (max-width: 900px) { .ssc-nav { padding: 0 var(--sp-5); gap: var(--sp-4); } .ssc-nav__links, .ssc-nav__actions { display: none; } .ssc-nav__burger { display: flex; } } /* ══════════════════════════════════════════════════════════════════════════ FOOTER — statement close The wordmark carries the close at display scale, then one utility row, then the fine print. Not a four-column sitemap: this site has a handful of destinations and pretending otherwise is what made the old footer generic. ══════════════════════════════════════════════════════════════════════════ */ .ssc-footer { background: var(--black); padding: var(--sp-20) var(--sp-12) var(--sp-8); } .ssc-footer__inner { max-width: var(--content-max); margin: 0 auto; } /* Statement */ .ssc-footer__statement { display: block; margin-bottom: var(--sp-4); } .ssc-footer__statement .brand-b { display: block; font-family: var(--font-display); font-size: var(--d-lg); letter-spacing: var(--track-display); line-height: var(--lh-display); color: var(--white); overflow-wrap: anywhere; min-width: 0; } .ssc-footer__statement .brand-i { display: block; font-family: var(--font-serif); font-style: italic; font-weight: var(--w-light); font-size: var(--s-lg); letter-spacing: var(--track-serif); line-height: var(--lh-head); color: var(--pink); margin-top: 2px; } .ssc-footer__rule { width: 60px; height: 1px; background: var(--pink); opacity: .5; margin: 0 0 var(--sp-12); } /* Utility row — destinations left, socials right */ .ssc-footer__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--hairline-dark); margin-bottom: var(--sp-6); } .ssc-footer__nav { display: flex; gap: var(--sp-8); flex-wrap: wrap; } .ssc-footer__nav a { font-family: var(--font-ui); font-size: var(--t-xs); font-weight: var(--w-med); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); text-decoration: none; white-space: nowrap; transition: color var(--ease-hover); } .ssc-footer__nav a:hover { color: var(--on-dark-1); } .ssc-footer__socials { display: flex; gap: 14px; align-items: center; } .ssc-footer__socials a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hairline-dark-2); display: flex; align-items: center; justify-content: center; line-height: 0; color: var(--on-dark-3); transition: color var(--ease-hover), border-color var(--ease-hover); } .ssc-footer__socials a:hover { border-color: var(--pink); color: var(--pink); } /* Firestore-populated contact line */ .ssc-footer__contact { font-family: var(--font-ui); font-size: var(--t-xs); letter-spacing: .05em; color: var(--on-dark-3); margin-bottom: 14px; } .ssc-footer__contact a { color: var(--on-dark-3); text-decoration: underline; text-underline-offset: 3px; transition: color var(--ease-hover); } .ssc-footer__contact a:hover { color: var(--on-dark-2); } .ssc-footer__contact .dot { margin: 0 var(--sp-2); opacity: .4; } .ssc-footer__contact:empty { display: none; } /* Fine print */ .ssc-footer__fine { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); font-family: var(--font-ui); font-size: var(--t-2xs); letter-spacing: .07em; color: rgba(255,255,255,.28); } .ssc-footer__legal { display: flex; gap: var(--sp-6); flex-wrap: wrap; } .ssc-footer__legal a { color: rgba(255,255,255,.28); text-decoration: none; white-space: nowrap; transition: color var(--ease-hover); } .ssc-footer__legal a:hover, .ssc-footer__legal a.is-active { color: var(--on-dark-3); } @media (max-width: 900px) { .ssc-footer { padding: var(--sp-12) var(--sp-6) var(--sp-6); } .ssc-footer__row { flex-direction: column; align-items: flex-start; } } /* ══════════════════════════════════════════════════════════════════════════ SHARED BUTTONS ══════════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 13px 34px; font-family: var(--font-ui); font-size: var(--t-xs); font-weight: var(--w-semi); letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r-full); white-space: nowrap; cursor: pointer; border: none; transition: background-color var(--ease-btn), border-color var(--ease-btn), opacity var(--ease-btn), transform var(--ease-btn); } .btn-crimson { background: var(--pink); color: var(--white); border: 1px solid var(--pink); } .btn-crimson:hover { opacity: .85; transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--white); border: 1px solid var(--hairline-dark-2); } .btn-outline:hover { background: var(--surface-dark-2); border-color: var(--on-dark-3); } /* ══════════════════════════════════════════════════════════════════════════ COOKIE CONSENT BANNER ══════════════════════════════════════════════════════════════════════════ */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-cookie); background: rgba(14,13,12,.98); backdrop-filter: blur(16px); border-top: 2px solid var(--pink); box-shadow: 0 -8px 40px rgba(0,0,0,.7); padding: var(--sp-6) var(--sp-12); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; } .cookie-banner[hidden] { display: none; } .cookie-text { font-family: var(--font-ui); font-size: var(--t-base); font-weight: var(--w-light); letter-spacing: .03em; color: var(--on-dark-1); line-height: 1.7; flex: 1; min-width: 200px; } .cookie-text strong { color: var(--white); font-weight: var(--w-med); } .cookie-text a { color: var(--pink); } .cookie-actions { display: flex; gap: var(--sp-3); flex-shrink: 0; } .cookie-btn { padding: 11px 28px; font-size: var(--t-xs); } @media (max-width: 600px) { .cookie-banner { padding: var(--sp-4) var(--sp-5); } .cookie-actions { width: 100%; } .cookie-btn { flex: 1; justify-content: center; } } /* ══════════════════════════════════════════════════════════════════════════ FOCUS — the design system defines --focus-ring; chrome actually uses it. Never transitioned: a keyboard user must see the ring on the first frame. ══════════════════════════════════════════════════════════════════════════ */ .ssc-nav a:focus-visible, .ssc-nav button:focus-visible, .ssc-drawer a:focus-visible, .ssc-footer a:focus-visible, .ssc-topbar button:focus-visible, .btn:focus-visible { outline: 2px solid var(--pink-light); outline-offset: 2px; border-radius: var(--r-sm); } /* ══════════════════════════════════════════════════════════════════════════ REDUCED MOTION ══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .ssc-topbar__text.scrolling { animation: none; } .btn-crimson:hover { transform: none; } .ssc-nav__burger span { transition: none; } }