/* ============================================================ EPH shared chrome — Material-3 "glass" top app bar + footer. Self-contained and SCOPED to .topbar / .site-footer so it can be loaded on the cart page (or any host) without leaking colours/typography onto the theme or the React cart. The palette seeds (--seed = primary, --seed2 = secondary, --seed3 = on-primary) come from (the cart injects them via EPH_Chrome::seed_head()); the colour role tokens below are derived ONLY inside the .topbar / .site-footer subtrees. LIGHT roles are the default; add data-theme="dark" on to switch. Mirrors the landing chrome rules in eph-event-landing.css. The MARKUP is the single source of truth (EPH_Chrome::topbar()/footer() in eph-chrome.php). ============================================================ */ /* ---------- self-hosted fonts (OFL) ---------- */ @font-face{ font-family:'Bricolage Grotesque'; font-style:normal; font-weight:300 800; font-display:swap; src:url('../fonts/eph-landing/bricolage.woff2') format('woff2'); } @font-face{ font-family:'Figtree'; font-style:normal; font-weight:300 800; font-display:swap; src:url('../fonts/eph-landing/figtree.woff2') format('woff2'); } /* ---------- tokens (scalar + LIGHT colour roles) scoped to the chrome ---------- */ .topbar, .site-footer{ --shape-full:999px; --font-display:'Bricolage Grotesque', sans-serif; --font-body:'Figtree', sans-serif; --ease-emph:cubic-bezier(.2,0,0,1); color-scheme:light; --primary:var(--seed); --on-primary:var(--seed3); --primary-container:color-mix(in oklab, var(--seed) 14%, white); --secondary-container:color-mix(in oklab, var(--seed2) 16%, white); --on-secondary-container:color-mix(in oklab, var(--seed2) 62%, black); --surface:color-mix(in oklab, var(--seed) 2%, white); --surface-container:color-mix(in oklab, var(--seed) 5%, white); --surface-container-high:color-mix(in oklab, var(--seed) 6.5%, white); --on-surface:color-mix(in oklab, var(--seed) 12%, #1d1c1b); --on-surface-variant:color-mix(in oklab, var(--seed) 16%, #4c4a47); --outline-variant:color-mix(in oklab, var(--seed) 10%, #d9d6d0); --shadow-1:0 1px 2px rgb(0 0 0/.14), 0 1px 3px 1px rgb(0 0 0/.08); } /* ---------- DARK role overrides ---------- */ html[data-theme="dark"] :where(.topbar, .site-footer){ color-scheme:dark; --primary-container:color-mix(in oklab, var(--seed) 38%, #14120f); --secondary-container:color-mix(in oklab, var(--seed2) 38%, #14120f); --on-secondary-container:color-mix(in oklab, var(--seed2) 22%, white); --surface:color-mix(in oklab, var(--seed) 6%, #141312); --surface-container:color-mix(in oklab, var(--seed) 10%, #1e1c1a); --surface-container-high:color-mix(in oklab, var(--seed) 12%, #242220); --on-surface:color-mix(in oklab, var(--seed) 8%, #ece9e5); --on-surface-variant:color-mix(in oklab, var(--seed) 12%, #c9c5bf); --outline-variant:color-mix(in oklab, var(--seed) 12%, #474440); --shadow-1:0 1px 2px rgb(0 0 0/.5), 0 1px 3px 1px rgb(0 0 0/.3); } /* ============ top app bar ============ */ .topbar{ position:sticky; top:0; z-index:60; background:color-mix(in oklab, var(--surface) 62%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s; font-family:var(--font-body); } .topbar.scrolled{border-bottom-color:var(--outline-variant)} .topbar-inner{max-width:1200px; margin:0 auto; padding:0 20px; height:66px; display:flex; align-items:center; gap:16px} .topbar .brand{display:flex; align-items:center; gap:11px} .topbar .logo, .site-footer .logo{height:27px; width:auto; display:block} /* default (light): black logo; dark: white logo */ .topbar .logo-white, .site-footer .logo-white{display:none} html[data-theme="dark"] .topbar .logo-black, html[data-theme="dark"] .site-footer .logo-black{display:none} html[data-theme="dark"] .topbar .logo-white, html[data-theme="dark"] .site-footer .logo-white{display:block} .topbar-actions{margin-left:auto; display:flex; gap:12px; align-items:center} .topbar .i{width:22px; height:22px; flex:none; vertical-align:middle} /* sign-in button (scoped copy of the landing .btn / .btn.tonal / .signin-btn) */ .topbar .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-size:.95rem; font-weight:700; border:none; cursor:pointer; border-radius:var(--shape-full); background:var(--primary); color:var(--on-primary); padding:0 26px; height:46px; white-space:nowrap; text-decoration:none; transition:box-shadow .25s var(--ease-emph), transform .12s var(--ease-emph); box-shadow:var(--shadow-1); } .topbar .btn.tonal{ background:var(--secondary-container); color:var(--on-secondary-container); box-shadow:inset 0 1px 0 color-mix(in oklab, white 40%, transparent); } .topbar .btn:active{transform:scale(.97)} .topbar .signin-btn{height:40px; padding:0 22px; font-size:.9rem} /* account pill */ .topbar .account-pill{ display:inline-flex; align-items:center; gap:9px; height:40px; padding:4px 16px 4px 4px; border-radius:var(--shape-full); font-size:.9rem; font-weight:700; text-decoration:none; color:var(--on-surface); border:1.5px solid var(--outline-variant); background:color-mix(in oklab, var(--surface-container) 55%, transparent); transition:background .2s, border-color .2s; } .topbar .account-pill:hover{background:var(--surface-container-high); border-color:var(--primary); color:var(--on-surface)} .topbar .account-avatar{width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--primary-container)} /* share icon button (landing only; harmless when absent) */ .topbar .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--shape-full); border:1.5px solid var(--outline-variant); background:transparent; color:var(--on-surface-variant); cursor:pointer; transition:background .2s, color .2s, transform .12s; text-decoration:none; } .topbar .icon-btn:hover{background:var(--surface-container-high); color:var(--primary)} .topbar .icon-btn:active{transform:scale(.94)} /* ============ footer ============ */ .site-footer{margin:40px 0 20px; font-family:var(--font-body)} .site-footer .shell{max-width:1200px; margin:0 auto; padding:0 20px} .site-footer .footer-inner{display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center} .site-footer .body-sm{font-size:.86rem; color:var(--on-surface-variant)} .site-footer a{color:var(--primary); text-decoration:none} /* admin-bar offset for logged-in staff */ body.admin-bar .topbar{top:32px} @media (max-width:782px){ body.admin-bar .topbar{top:46px} } /* ============ responsive ============ */ @media (max-width:560px){ .topbar-inner{height:58px; padding:0 14px} .topbar .brand .logo{height:24px} .topbar .icon-btn{width:40px; height:40px} .topbar .account-label{display:none} .topbar .account-pill{padding:4px} .topbar .signin-btn{padding:0 16px} .site-footer{font-size:.78rem} } @media (max-width:374px){ .topbar .brand .logo{height:20px} }