/* ═══════════════════════════════════════════════════════════════ base.css — shared across all pages reset · html/body · grain overlay · view transitions · nav · buttons · section labels · reveal · scroll progress · footers Loads after tokens.css, before pages.css. ═══════════════════════════════════════════════════════════════ */ /* ── Legacy token aliases ────────────────────────────────────── collection.html and autocodex.html still carry inline style="…var(--line2)…" attributes on .nav-right / .nav-lang. These aliases keep those declarations valid until the markup is cleaned up. --shadow-sm is not defined in tokens.css but is still referenced by cards, so it is defined here per theme. */ :root{ --border:var(--line); --border2:var(--line2); --accent2:var(--accent-soft); --shadow-sm:0 2px 8px rgba(0,0,0,.5); } html.light{ --shadow-sm:0 2px 8px rgba(26,23,20,.08); } /* ── RESET ── */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--fg);font-family:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased} img{image-rendering:auto} [onclick],[role=button]{cursor:pointer} /* ── GRAIN / NOISE OVERLAY ── */ body::before{content:'';position:fixed;inset:0;z-index:9001;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} html.light body::before{opacity:.018;filter:invert(1)} /* ── RETIRED FEATURES ─────────────────────────────────────────── Custom cursor, preloader, hero ghost, scroll indicator and the marquee are gone from the design but their markup is still in the HTML (removed in a later task). Their styling is deleted; this keeps the orphaned nodes out of the layout meanwhile. */ #cur,#cur-r,#cursor,#cursor-ring, #preloader,#hero-ghost,.scroll-indicator,.marquee-wrap{display:none} /* ── VIEW TRANSITIONS (Chrome 111+) ── */ @view-transition{navigation:auto} @keyframes vt-out{to{opacity:0;transform:scale(.97);filter:blur(2px)}} @keyframes vt-in{from{opacity:0;transform:scale(1.03);filter:blur(2px)}} ::view-transition-old(root){animation:280ms ease-in both vt-out} ::view-transition-new(root){animation:420ms cubic-bezier(.16,1,.3,1) 60ms both vt-in} /* ── SCROLL PROGRESS ────────────────────────────────────────── Width is set inline by JS; transform/box-shadow carry the velocity feedback (compositor only, no reflow). */ #scroll-progress{position:fixed;top:0;left:0;width:0%;height:2px;background:var(--accent);z-index:9999} #scroll-prog{position:fixed;top:0;left:0;width:0%;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-soft));z-index:600} #scroll-progress,#scroll-prog{transform-origin:top center;transition:transform .14s,box-shadow .14s} /* ── NAV ── */ /* Centred with auto margins, NOT translateX(-50%). A transformed ancestor becomes the containing block for position:fixed descendants, which made the mobile menu panel size itself to the nav instead of the viewport. */ nav{position:fixed;top:18px;left:0;right:0;margin-inline:auto;z-index:700;display:flex;justify-content:space-between;align-items:center;padding:10px 12px 10px 22px;background:rgba(var(--bg-rgb),.5);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1px solid rgba(255,255,255,.12);border-radius:999px;width:calc(100% - 48px);max-width:1100px;box-shadow:0 8px 32px rgba(0,0,0,.37),inset 0 1px 0 rgba(255,255,255,.15);transition:border-color .3s,box-shadow .3s,background .3s} .nav-logo{font-family:var(--display);font-style:italic;font-size:17px;letter-spacing:.04em;color:var(--fg);text-decoration:none;flex-shrink:0;transition:color .2s} .nav-logo:hover{color:var(--accent)} .nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0} .nav-links{display:flex;gap:0;list-style:none;align-items:center} .nav-links a{display:inline-block;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);text-decoration:none;padding:7px 13px;border-radius:999px;transition:color .22s,background .22s} .nav-links a:hover{color:var(--fg);background:rgba(255,255,255,.04)} .nav-links a.coll-link,.nav-links a.active{color:var(--accent)} .nav-links a.coll-link:hover{background:var(--accent-soft)} .nav-cta{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-fill-fg);background:var(--accent-grad);background-size:180% 180%;background-position:0% 50%;padding:9px 20px;border-radius:999px;text-decoration:none;box-shadow:0 4px 16px rgba(var(--accent-rgb),.22);transition:opacity .2s,transform .2s,box-shadow .2s;flex-shrink:0} .nav-cta:hover{opacity:.88;transform:scale(.97);box-shadow:0 6px 24px rgba(var(--accent-rgb),.35)} .nav-lang{font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3);background:transparent;border:1px solid var(--line2);padding:6px 11px;border-radius:999px;cursor:pointer;font-family:var(--text);transition:color .2s,border-color .2s} .nav-lang:hover{color:var(--fg);border-color:var(--line2)} .nav-theme{display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:15px;background:transparent;border:1px solid var(--line2);border-radius:999px;cursor:pointer;color:var(--fg3);font-family:var(--text);transition:color .2s,border-color .2s,background .2s;flex-shrink:0} .nav-theme:hover{color:var(--fg);border-color:var(--line2);background:var(--accent-soft)} .nav-back{display:inline-block;font-size:11px;font-weight:450;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);text-decoration:none;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--line2);border-radius:999px;transition:color .2s,border-color .2s,background .2s} .nav-back::before{content:'←'} .nav-back:hover{color:var(--fg);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)} /* ── BUTTONS ── */ .btn-primary{display:inline-flex;align-items:center;gap:8px;font-family:var(--text);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-fill-fg);background:var(--accent-grad);background-size:180% 180%;background-position:0% 50%;padding:13px 26px;border-radius:999px;text-decoration:none;box-shadow:0 4px 20px rgba(var(--accent-rgb),.22);transition:opacity .2s,transform .2s,box-shadow .2s} .btn-primary:hover{opacity:.88;transform:translateY(-2px);box-shadow:0 8px 32px rgba(var(--accent-rgb),.36)} .btn-ghost{font-family:var(--text);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);text-decoration:none;padding:13px 22px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.02);transition:color .2s,border-color .2s,background .2s} .btn-ghost:hover{color:var(--fg);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)} /* ── SECTION LABELS ── */ .section-label{font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;display:flex;align-items:center;gap:10px} .section-label::before{content:'';width:18px;height:1px;background:var(--accent)} /* ── SCROLL REVEAL ── */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--expo),transform .7s var(--expo)} .reveal.vis{opacity:1;transform:translateY(0)} /* ── FOOTER — index ── */ .footer-bar{display:flex;justify-content:center;align-items:center;padding:48px;border-top:1px solid var(--line);max-width:1320px;margin:0 auto} .footer-copy{font-size:10px;letter-spacing:.14em;color:var(--fg3)} /* ── FOOTER — collection ── */ #page-footer{padding:32px 48px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;background:rgba(var(--bg-rgb),.55);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)} .pf-copy{font-size:10px;letter-spacing:.14em;color:var(--fg3)} .pf-back{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);text-decoration:none;border:1px solid var(--line2);padding:8px 16px;border-radius:999px;transition:color .2s,border-color .2s,background .2s} .pf-back:hover{color:var(--fg);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)} /* ── FOOTER — autocodex ── */ #acx-footer{padding:56px 48px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center} .acx-foot-left .acx-foot-title{font-family:var(--display);font-size:1.8rem;letter-spacing:.06em;margin-bottom:6px;color:var(--fg)} .acx-foot-left p{font-size:12px;color:var(--fg2)} .acx-foot-right{display:flex;gap:12px} .acx-foot-btn{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--accent-grad);background-size:180% 180%;background-position:0% 50%;padding:12px 22px;border-radius:999px;text-decoration:none;box-shadow:0 4px 16px rgba(var(--accent-rgb),.28);transition:opacity .2s,transform .2s} .acx-foot-btn:hover{opacity:.85;transform:translateY(-1px)} .acx-foot-btn-ghost{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);text-decoration:none;border:1px solid var(--line2);padding:12px 18px;border-radius:999px;display:flex;align-items:center;transition:color .2s,border-color .2s,background .2s} .acx-foot-btn-ghost:hover{color:var(--fg);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)} /* ── RESPONSIVE — nav + footers ── */ @media (max-width:900px){ nav{top:12px;width:calc(100% - 24px);padding:9px 12px 9px 16px} .footer-bar{padding:32px 20px;flex-direction:column;gap:12px;align-items:flex-start} #acx-footer{flex-direction:column;gap:20px;align-items:flex-start;padding:40px 20px} } @media (max-width:768px){ #page-footer{flex-direction:column;gap:12px;align-items:flex-start;padding:28px 20px} } @media (max-width:540px){ nav{top:10px;width:calc(100% - 20px);padding:8px 10px 8px 14px} .nav-lang{display:inline-flex} nav .nav-cta{display:none} } /* ══════════════════════════════════════════════════════════════ Ported from the CSS that enhancements.js used to inject at runtime. That injection ran after first paint, which is what caused the dark-to-light flash on every navigation. Everything here that was only re-stating a colour under body.light has been dropped: the tokens in tokens.css already flip under html.light, so the rules were fighting a battle that no longer exists. Hence no !important. ══════════════════════════════════════════════════════════════ */ /* Native cross-page transition. Replaces the old JS veil, which painted over the page after load and delayed every click by 350ms. The browser drives this before paint; unsupported browsers just navigate. */ @view-transition{navigation:auto} @keyframes vt-out{to{opacity:0;transform:scale(.97);filter:blur(2px)}} @keyframes vt-in{from{opacity:0;transform:scale(1.03);filter:blur(2px)}} ::view-transition-old(root){animation:280ms ease-in both vt-out} ::view-transition-new(root){animation:420ms var(--expo) 60ms both vt-in} /* Magnetic nav needs inline-block to accept a transform */ .nav-links a,.nav-cta,.nav-back{display:inline-block} /* scaleY instead of width avoids a layout reflow on every scroll frame */ #scroll-progress,#scroll-prog{transform-origin:top center;transition:transform .14s,box-shadow .14s} /* Theme toggle. The button is created by JS, so it has no styles anywhere else. */ .nav-theme{font-size:15px;background:transparent;border:1px solid var(--line2); border-radius:var(--r-pill);width:32px;height:32px;display:flex;align-items:center; justify-content:center;cursor:pointer;color:var(--fg3);flex-shrink:0; font-family:var(--text);transition:color .2s,border-color .2s,background .2s} .nav-theme:hover{color:var(--fg);border-color:var(--line2);background:rgba(var(--fg-rgb),.06)} /* iOS-style frosted chrome, now token-driven so one rule covers both themes */ nav{background:rgba(var(--bg-rgb),.55);backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%); border:1px solid var(--line2);box-shadow:var(--shadow-md),inset 0 1px 0 rgba(var(--fg-rgb),.10)} #filter-bar{background:rgba(var(--bg-rgb),.60);backdrop-filter:blur(28px) saturate(170%); -webkit-backdrop-filter:blur(28px) saturate(170%);border-bottom:1px solid var(--line)} #page-footer,#acx-footer{background:rgba(var(--bg-rgb),.60); backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)} /* Native cursors. The custom dot/ring was removed in v13; its elements are gone. */ html,body{cursor:auto} a,button,summary,label,select,.bc,.fbtn,.gdot,.lb-arrow,.nav-cta,.nav-lang,.nav-theme,[onclick],[role=button]{cursor:pointer} input,textarea{cursor:text} /* The grain overlay is a dark-on-light noise texture; invert it on a light ground */ html.light body::before{opacity:.018;filter:invert(1)} html.light .acx-hero-bg{opacity:.06} /* ── MOBILE MENU ────────────────────────────────────────────── Replaces the old selector-chain link-hiding hack, which showed a different set of links at different widths with no way to reach the hidden ones. One markup, one menu: `.menu-panel` wraps the single