/* MTG-041b gate pages. Tokens come from /style.css; abyss is forced by data-theme on . Served by the auth router so nothing here exists with the flag off. */ .gate-body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 28px 16px; background: var(--bg-page); } .gate { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; } /* Same ring grammar as the sidebar crest (MTG-029), hero render (041b.1, notched .2/.3): the full kraken + card composition carries the disc. 380px is the RULED PERMANENT CEILING (041b.3) — do not notch again. */ .gate-crest { width: 380px; height: 380px; border-radius: 50%; border: 1px solid var(--gold-deep); padding: 6px; } /* 041b.2 optical centering: the crest-heavy mass sits above the column's geometric middle, so pure flex centering reads high with a void under the footer at desk heights. Bias the column down a hair — transform, so layout and the zero-scroll guarantee are untouched. Phones keep plain centering. */ @media (min-width: 700px) and (min-height: 760px) { .gate { transform: translateY(min(3vh, 44px)); } } /* 041b.2 gate error slot: one quiet line above the buttons; rendered only for known err codes, absent otherwise. */ .gate-alert { margin: 2px 0 0; color: var(--neg); font-size: 13.5px; } .gate-wordmark { font-size: 40px; } /* 041b.1 type scale: the welcome line moves toward the view-title tier (22px) but keeps the caps + quiet-foil section grammar so the engraved wordmark above still owns the hierarchy: crest > wordmark > welcome > description. */ .gate-head { margin: 8px 0 0; font-size: 22px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .gate-desc { margin: 0; color: var(--text-mid); font-size: 16px; } /* MTG-060.1: the gate hallmark mirrors .sb-beta (style.css) on the treatment — Cinzel, tracked caps, the same muted-gold color-mix — battery-pinned computed-equal across the two surfaces. Only the tuck margin is local geometry: the gate column's 12px gap needs a deeper pull than the lockup's 10px to seat the mark ~3px under the wordmark; the left margin rebalances the tracking's trailing space. No crest/translateY retuning. MTG-070: size leaves the shared family — 9px reads at sidebar proportions but vanishes under the gate's full lockup; 14px holds the wordmark ratio (40px gate wordmark vs the sidebar's, same tracked-caps grammar). The FAMILY pin is amended to per-surface sizes; tracking stays 0.42em (computed px scales with the size by design). */ .gate-beta { font-family: "Cinzel", Georgia, serif; font-size: 14px; font-weight: 600; letter-spacing: 0.42em; margin: -9px 0 0 0.42em; color: color-mix(in srgb, var(--gold) 52%, transparent); } /* Phone widths: the hero stays at 200px (the ruled 200-220 band; 375px viewports leave no room for more); 375 and 360 both clear. */ @media (max-width: 430px) { .gate-crest { width: 200px; height: 200px; } .gate-wordmark { font-size: 34px; } .gate-head { font-size: 19px; } } .gate-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 12px; } /* House button: hairline gold border, btn-gold family at tap size. */ .gate-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid var(--gold-deep); border-radius: 999px; color: var(--gold); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; } .gate-btn:hover { background: color-mix(in srgb, var(--gold) 22%, transparent); border-color: var(--gold); } .gate-btn svg { width: 18px; height: 18px; flex: none; } .gate-input { width: 100%; padding: 12px 14px; background: var(--surf-inset); border: 1px solid var(--border); border-radius: 10px; color: var(--text-hi); font: inherit; font-size: 15px; text-align: center; } .gate-input:focus { outline: none; border-color: var(--gold-deep); } .gate-form { width: 100%; display: flex; flex-direction: column; gap: 10px; } .gate-note { margin: 0; color: var(--text-low); font-size: 12px; } .gate-error { margin: 0; color: var(--neg); font-size: 13px; } /* Display convention: handle prominent, founder number muted small. */ .gate-welcome { margin: 6px 0 0; color: var(--text-hi); font-size: 17px; } .gate-welcome strong { font-weight: 700; } .gate-num { color: var(--text-low); font-size: 12px; vertical-align: 8%; } .gate-foot { margin-top: 20px; color: var(--text-low); font-size: 11.5px; } @media (prefers-reduced-motion: no-preference) { .gate-btn { transition: background-color 150ms ease, border-color 150ms ease; } .gate-input { transition: border-color 150ms ease; } } /* MTG-066: the stranger's paragraph — quieter tier than the ruled description above it, same centered column. */ .gate-pitch { margin: 0; color: var(--text-low); font-size: 14px; } /* MTG-066: quiet footer links, on the gate and the doc pages alike. */ .gate-foot a { color: var(--text-low); text-decoration: underline; text-underline-offset: 2px; } .gate-foot a:hover { color: var(--gold); } /* MTG-066 doc pages (/privacy, /terms): the gate's visual family opened into a reading column — small crest lockup centered, prose left. The 380px crest ceiling above is a GATE fact; the doc crest is its own 96px render, not a notch of the hero. */ .gate-doc { max-width: 640px; text-align: left; align-items: stretch; } .gate-doc .doc-crest { width: 96px; height: 96px; padding: 4px; margin: 0 auto; } .gate-doc .gate-wordmark { font-size: 28px; text-align: center; } .gate-doc .gate-head { text-align: center; } .doc { display: flex; flex-direction: column; gap: 6px; } /* Section heads stay normal-case on purpose: gate-head's uppercase transform on prose headings would wear words (BETA) the hallmark rules reserve for the two ruled surfaces. */ .doc h2 { margin: 16px 0 2px; font-family: "Cinzel", Georgia, serif; font-size: 15px; font-weight: 600; letter-spacing: 0.06em; color: var(--gold); } .doc p { margin: 0 0 6px; color: var(--text-mid); font-size: 14.5px; line-height: 1.55; } .doc a { color: var(--gold); } .gate-doc .gate-foot { text-align: center; }