/* ============================================================ base.css — reset, global rules, keyframes, and the fixed "furniture" that sits on top of every section: the page frame, crosshair, top nav, builder's-log mark, and the boot overlay. Plus the reusable corner-bracket component. ============================================================ */ /* ---- Reset / globals ------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ink); } /* Hide the viewport scrollbar (page still scrolls via wheel/keys/drag). The document scrolls at the root, so the bar lives on . */ html { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy Edge/IE */ } html::-webkit-scrollbar { /* Chromium / Safari */ width: 0; height: 0; display: none; } body { font-family: var(--font-body); color: var(--ink); cursor: crosshair; /* native crosshair, under the custom lines */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--blue); color: var(--bone); } img, svg, canvas { display: block; } /* The whole document scrolls vertically; the page wrapper sets the default light surface that individual sections override. */ .page { background: var(--bone); color: var(--ink); font-family: var(--font-body); } .is-hidden { display: none !important; } /* ---- Keyframes ------------------------------------------- */ @keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes blinkDot { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ---- Reusable corner brackets ---------------------------- * A relative parent + ×4>. Each draws one L-shaped corner from two borders. Size/colour/offset are tunable via custom properties so the same component serves the hero, cards, workshop and boot. */ .corners { position: absolute; inset: 0; pointer-events: none; --c-color: var(--blue); --c-size: 20px; --c-w: 2px; } .corners > i { position: absolute; width: var(--c-size); height: var(--c-size); } .corners > i:nth-child(1) { top: 0; left: 0; border-top: var(--c-w) solid var(--c-color); border-left: var(--c-w) solid var(--c-color); } .corners > i:nth-child(2) { top: 0; right: 0; border-top: var(--c-w) solid var(--c-color); border-right: var(--c-w) solid var(--c-color); } .corners > i:nth-child(3) { bottom: 0; left: 0; border-bottom: var(--c-w) solid var(--c-color); border-left: var(--c-w) solid var(--c-color); } .corners > i:nth-child(4) { bottom: 0; right: 0; border-bottom: var(--c-w) solid var(--c-color); border-right: var(--c-w) solid var(--c-color); } .corners--hero { inset: -22px -30px; } .corners--boot { inset: -18px -34px; } .corners--card { inset: -1px; --c-size: 18px; } .corners--end { --c-size: 18px; --c-color: var(--bone); } .corners--workshop { --c-size: 22px; } /* ---- Crosshair cursor (positions set by js/crosshair.js) -- */ .cross-v, .cross-h, .cross-coords { position: fixed; top: 0; left: 0; background: var(--bone); mix-blend-mode: difference; /* reads through any background */ pointer-events: none; z-index: var(--z-cross); } .cross-v { width: 1px; height: 100vh; transform: translateX(-20px); will-change: transform; } .cross-h { height: 1px; width: 100vw; transform: translateY(-20px); will-change: transform; } .cross-coords { background: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--bone); white-space: pre; will-change: transform; } /* ---- Fixed page-edge frame ------------------------------- */ .frame { position: fixed; inset: var(--frame-inset); border: 1px solid var(--bone); mix-blend-mode: difference; pointer-events: none; z-index: var(--z-frame); } /* ---- Top navigation bar ---------------------------------- */ .topbar { position: fixed; top: var(--frame-inset); left: var(--frame-inset); right: var(--frame-inset); z-index: var(--z-nav); height: 44px; display: flex; align-items: stretch; background: var(--bone); border: 1px solid var(--ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink); } .topbar__logo { display: flex; align-items: center; gap: 9px; padding: 0 20px; border-right: 1px solid var(--ink); color: var(--ink); text-decoration: none; } .topbar__logo-text { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; } .topbar__dot { width: 7px; height: 7px; background: var(--blue); } .topbar__spacer { flex: 1; } .topbar__spacer--border { flex: 1; border-left: 1px solid var(--ink); } .nav-link { display: flex; align-items: center; padding: 0 18px; border-left: 1px solid var(--ink); color: var(--ink); text-decoration: none; transition: background 0.15s, color 0.15s; } .nav-link:hover, .nav-link.is-active { background: var(--ink); color: var(--bone); } .topbar__meta { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-left: 1px solid var(--ink); color: rgba(20,20,20,0.7); } /* ---- Builder's-log corner mark --------------------------- */ .builder-log { position: fixed; bottom: 20px; right: 26px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--bone); mix-blend-mode: difference; pointer-events: none; z-index: var(--z-frame); } /* ---- Boot overlay ---------------------------------------- */ .boot { position: fixed; inset: 0; z-index: var(--z-boot); background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.5s ease; } .boot.is-done { transform: translateY(-100%); opacity: 0; pointer-events: none; } .boot__brand { position: relative; padding: 10px 0; } .boot__name { font-family: var(--font-display); font-size: 16vw; line-height: 0.9; color: var(--bone); text-transform: uppercase; } .boot__panel { width: min(520px, 72vw); margin-top: 6vh; display: flex; flex-direction: column; gap: 10px; } .boot__row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: rgba(244,241,234,0.7); } .boot__pct { color: var(--bone); } .boot__bar { height: 2px; background: rgba(244,241,234,0.15); position: relative; } .boot__bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--blue); } .boot__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: rgba(244,241,234,0.4); }