/* ══════════════════════════════════════════════════════════ PROPORTIO DIVINA — design system Renaissance luxury × engineering blueprint. Palette: obsidian void / cyan blueprint / crimson focus / sacred gold / editorial paper. ══════════════════════════════════════════════════════════ */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/bodoni-moda.woff2) format('woff2'); } @font-face { font-family: 'JB Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/JetBrainsMono.woff2) format('woff2'); } :root { --void: #080808; --void-2: #121212; --cyan: #64d8ff; --crimson: #ff3b30; --gold: #ffd080; --gold-2: #e6c387; --paper: #d8d2c4; --dim: rgba(216, 210, 196, .60); --dim-2: rgba(216, 210, 196, .42); --hair: rgba(216, 210, 196, .13); --page: #080808; --serif: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif; --mono: 'JB Mono', ui-monospace, 'SF Mono', Menlo, monospace; } * { box-sizing: border-box; } html { background: var(--page); -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100svh; background: var(--page); color: var(--paper); font-family: var(--serif); overflow-x: hidden; } body.locked { overflow: hidden; height: 100svh; } /* never gate motion on prefers-reduced-motion: this is a showcase piece and iOS Safari can stall rAF entirely when Reduce Motion is on (the engine has a timer watchdog for that case). */ .mono { font-family: var(--mono); font-weight: 400; } ::selection { background: var(--gold); color: var(--void); } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* ══════════════ GATE ══════════════ */ .gate[hidden] { display: none !important; } .gate { /* normal document flow — NOT position:fixed. iOS Safari samples background for the chrome bars and ignores fixed-position layers. */ position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); background: radial-gradient(120% 90% at 50% 40%, #16161a 0%, var(--void) 62%); } .gate::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(216,210,196,.030) 1px, transparent 1px), linear-gradient(90deg, rgba(216,210,196,.030) 1px, transparent 1px); background-size: 78px 78px; mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 78%); } .gate-inner { position: relative; z-index: 1; text-align: center; max-width: 620px; } .gate-mark { color: var(--gold); margin-bottom: 22px; } .gate-mark svg { display: block; margin: 0 auto; } .gate-arc { transform-origin: 60px 60px; animation: arcspin 26s linear infinite; } @keyframes arcspin { to { transform: rotate(360deg); } } .gate-kicker { font-family: var(--mono); font-size: 9.5px; letter-spacing: .42em; color: var(--gold-2); text-transform: uppercase; margin: 0 0 18px; opacity: .8; } .gate-title { font-family: var(--serif); font-size: clamp(40px, 9.2vw, 96px); font-weight: 500; line-height: .96; letter-spacing: .02em; margin: 0; color: var(--paper); display: flex; flex-direction: column; gap: 2px; } .gate-thin { font-weight: 400; font-style: italic; color: var(--gold); letter-spacing: .12em; } .gate-sub { margin: 26px 0 0; font-size: clamp(13px, 2.5vw, 15.5px); color: var(--dim); letter-spacing: .04em; } .gate-sub.zh2 { margin-top: 7px; font-size: clamp(12px, 2.2vw, 13.5px); color: var(--dim-2); } .gate-btn { margin-top: 34px; display: inline-flex; align-items: center; gap: 13px; padding: 15px 32px; border: 1px solid rgba(216,210,196,.26); border-radius: 1px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--paper); background: rgba(216,210,196,.03); transition: border-color .4s, background .4s, color .4s, letter-spacing .4s; } .gate-btn:hover, .gate-btn:focus-visible { border-color: var(--gold); color: var(--gold); background: rgba(255,208,128,.05); letter-spacing: .32em; outline: none; } .gate-btn .arw { transition: transform .4s; } .gate-btn:hover .arw { transform: translateX(5px); } .gate-foot { margin: 40px 0 0; font-size: 8.5px; letter-spacing: .3em; color: var(--dim-2); } /* ══════════════ APP SHELL ══════════════ */ .app { position: relative; min-height: 100svh; display: flex; flex-direction: column; background: var(--page); } .stage { position: fixed; inset: 0; z-index: 0; } #gl { display: block; width: 100%; height: 100%; } /* faint engineering grid over the void */ .stage-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(216,210,196,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(216,210,196,.028) 1px, transparent 1px); background-size: 96px 96px; mask-image: radial-gradient(78% 70% at 50% 50%, #000 0%, transparent 82%); -webkit-mask-image: radial-gradient(78% 70% at 50% 50%, #000 0%, transparent 82%); } .stage-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(78% 70% at 50% 48%, transparent 44%, rgba(0,0,0,.72) 100%); } /* ══════════════ HUD BARS ══════════════ */ .bar { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px clamp(14px, 3.4vw, 40px); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); } .bar-top { padding-top: max(15px, env(safe-area-inset-top)); } .bar-bot { padding-bottom: max(15px, env(safe-area-inset-bottom)); margin-top: auto; flex-wrap: wrap; } .brand { color: var(--paper); letter-spacing: .3em; } .bar-mid { display: flex; align-items: center; gap: 12px; } .tc { color: var(--gold-2); font-variant-numeric: tabular-nums; } .sep { color: var(--dim-2); } .bar-right { display: flex; align-items: center; gap: 12px; } .lang { cursor: pointer; color: var(--paper); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; } .lang:hover { color: var(--gold); border-color: var(--gold); } .snd { color: var(--dim-2); } /* corner register marks */ .reg { position: fixed; z-index: 31; font-size: 13px; color: var(--dim-2); pointer-events: none; line-height: 1; } .reg-tl { top: max(52px, calc(env(safe-area-inset-top) + 44px)); left: 13px; } .reg-tr { top: max(52px, calc(env(safe-area-inset-top) + 44px)); right: 13px; } .reg-bl { bottom: max(58px, calc(env(safe-area-inset-bottom) + 50px)); left: 13px; } .reg-br { bottom: max(58px, calc(env(safe-area-inset-bottom) + 50px)); right: 13px; } /* ══════════════ PLATE (left rail) ══════════════ */ .plate { position: fixed; z-index: 30; left: clamp(20px, 4vw, 62px); top: 50%; transform: translateY(-50%); width: min(300px, 30vw); pointer-events: none; } .plate-n { font-size: 10px; letter-spacing: .34em; color: var(--gold-2); margin: 0 0 12px; } .plate-title { font-family: var(--serif); font-size: clamp(20px, 3.1vw, 34px); font-weight: 500; line-height: 1.06; letter-spacing: .05em; margin: 0; color: var(--paper); } .plate-zh { font-size: clamp(12px, 1.6vw, 14.5px); letter-spacing: .3em; color: var(--gold-2); margin: 9px 0 0; } .plate-desc { font-size: 13px; line-height: 1.68; color: rgba(216,210,196,.74); margin: 15px 0 0; max-width: 27ch; } .plate-state { font-size: 9.5px; letter-spacing: .28em; color: var(--cyan); margin: 17px 0 0; transition: color .6s; } .plate-state.awake { color: var(--gold); } /* ══════════════ READOUT (right rail) ══════════════ */ .readout { position: fixed; z-index: 30; right: clamp(20px, 4vw, 62px); top: 50%; transform: translateY(-50%); width: 168px; pointer-events: none; font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; } .ro-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--hair); } .ro-k { color: var(--dim); } .ro-v { color: var(--paper); font-variant-numeric: tabular-nums; } /* ══════════════ CAPTION ══════════════ */ .caption { position: fixed; z-index: 30; left: 50%; bottom: calc(74px + max(15px, env(safe-area-inset-bottom))); transform: translateX(-50%); margin: 0; font-size: 10px; letter-spacing: .26em; color: var(--dim); text-align: center; max-width: 84vw; pointer-events: none; } /* ══════════════ AWAKEN PROMPT ══════════════ */ .awaken { position: fixed; z-index: 32; left: 50%; bottom: calc(112px + max(15px, env(safe-area-inset-bottom))); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 9px 4px; transition: opacity .5s, color .5s; color: var(--cyan); } .awaken[hidden] { display: none; } .aw-line { display: block; width: 34px; height: 1px; background: currentColor; opacity: .45; } .aw-txt { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; } .awaken:hover { color: var(--gold); } .awaken:hover .aw-line { opacity: .8; } /* ══════════════ CHAPTERS ══════════════ */ .chapters { display: flex; align-items: center; gap: clamp(8px, 1.5vw, 20px); flex-wrap: wrap; } .ch { position: relative; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); padding: 5px 1px; transition: color .35s; white-space: nowrap; } .ch::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s; } .ch:hover { color: var(--paper); } .ch:hover::after { transform: scaleX(1); } .ch.on { color: var(--gold); } .ch.on::after { transform: scaleX(1); } .ch-i { color: var(--dim-2); margin-right: 5px; } .ch.on .ch-i { color: var(--gold-2); } .credit { font-size: 10px; letter-spacing: .26em; color: var(--dim); margin: 0; } /* ══════════════ NO-WEBGL FALLBACK ══════════════ */ .nogl { position: relative; z-index: 30; max-width: 640px; margin: auto; padding: 40px 24px; text-align: center; } .nogl p { font-size: 12px; letter-spacing: .3em; color: var(--gold-2); } .nogl p.zh { font-family: var(--serif); letter-spacing: .06em; color: var(--dim); margin-top: 14px; } .nogl ul { list-style: none; padding: 0; margin: 26px 0 0; text-align: left; } .nogl li { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--dim); padding: 9px 0; border-bottom: 1px solid var(--hair); } /* ══════════════ REVEAL ══════════════ */ .app[hidden] { display: none; } /* ══════════════ RESPONSIVE ══════════════ */ @media (max-width: 1080px) { .readout { display: none; } .plate { width: min(280px, 34vw); } } @media (max-width: 820px) { .plate { position: static; transform: none; width: auto; margin: 0; padding: 0 clamp(14px, 3.4vw, 40px); text-align: left; } .plate-desc { max-width: none; } .caption { position: static; transform: none; margin: 12px auto 0; } .awaken { position: static; transform: none; margin: 16px auto 0; justify-content: center; } .bar-top { padding-top: max(12px, env(safe-area-inset-top)); } .bar { letter-spacing: .18em; } .brand { letter-spacing: .2em; } .reg { display: none; } .stage { position: fixed; } .app { justify-content: flex-start; } } @media (max-width: 560px) { .gate-title { font-size: clamp(34px, 12vw, 56px); } .chapters { gap: 10px; } .ch { font-size: 8px; letter-spacing: .16em; } .bar-mid { font-size: 8.5px; } .plate-title { font-size: 22px; } } @media (max-height: 560px) { .gate { min-height: 100svh; padding-top: 20px; padding-bottom: 20px; } .gate-mark { margin-bottom: 12px; } .gate-mark svg { width: 76px; height: 76px; } .gate-sub, .gate-sub.zh2 { display: none; } .gate-btn { margin-top: 20px; } .gate-foot { margin-top: 18px; } } /* ══════════════ LEGIBILITY OVER THE SWARM ══════════════ On small screens the HUD sits on top of the densest wireframe region. A soft radial scrim keeps the type readable without hiding the sculpture. */ .plate-txt-scrim { position: relative; } @media (max-width: 820px) { .plate { padding: 14px clamp(14px, 3.4vw, 40px) 10px; background: linear-gradient(180deg, rgba(6,6,8,.86) 0%, rgba(6,6,8,.62) 68%, rgba(6,6,8,0) 100%); } .caption, .awaken { text-shadow: 0 1px 10px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,1); } .chapters { background: linear-gradient(180deg, rgba(6,6,8,0) 0%, rgba(6,6,8,.72) 42%, rgba(6,6,8,.9) 100%); padding: 10px 0 4px; } }