/* ============================================================ OBI FRONT: the front page a signed-out visitor meets first: what Obi does, in about a minute, and Sign in for the teachers who already use it (Pass 6, Stage 6f; R55 to R57). The words: plans/FRONT-PAGE.md §2 (nothing else may appear). The behaviour: tools/FRONT-CONTRACT.md. The look: plans/WEB-EXTENSIONS.md §19, inside Obi v2 (tokens only, and Obi's own component values). obi-front.js builds the page (#obiFront) inside Thabo's sign-in overlay (#authOverlay) and puts the overlay in front mode (.ov-front); this file styles both. Every selector is scoped under #obiFront or #authOverlay.ov-front, so nothing reaches the app. The signature is the drawn apricot full stop (.obf-stop, §19.1) that ends the h1 and every section heading; everything else stays quiet. Every value that is not a token says why, beside it (a "keep" note). Spacing that grows with the window is a clamp between two of Obi's spacing tokens; its middle term (a vw rate) is not a size, only how fast it moves from the smaller token to the larger, and its keep note says where each end is reached. ============================================================ */ /* ---- 1. The overlay in front mode (FRONT-CONTRACT "DOM in front mode") ---- The overlay is the scroll container; the page fits it, it is never clipped (no overflow-x:hidden). Two ids outrank ovation-loginfx.js's #authOverlay#authOverlay rule (its flex centring, its padding). While the page shows, every other child of the overlay (the card, the carousel, a splash) is hidden; outside front mode the page is. */ #obiFront { display: none; } #authOverlay#authOverlay.ov-front { display: block; padding: 0; overflow-y: auto; } #authOverlay.ov-front > :not(#obiFront) { display: none; } #authOverlay.ov-front > #obiFront { display: block; } /* ---- 2. Inter's stand-in (6.VB). Inter comes from Google Fonts (font-display:swap), so the first frame is set in a fallback face and Inter replaces it about 100ms later on a cold load. With an ordinary fallback the 96px headline re-wrapped at that moment. These faces are the computer's own Arial (local(): no request), scaled to Inter's widths as the page sets them (evidence/pass-6/6vb-fix/fontfit.mjs) and given Inter's ascent and descent (0.96875 and 0.2412 of the em, each divided by the size-adjust), so the swap changes the letterforms, not the lines. "Display" is for the h1 and the h2s (Inter's optical size makes it about 4.5% narrower than Arial Bold there); the other face serves the rest of the page's text (Regular for 400 and 500, Bold for 600 and 700). Each element a local face sets in a frame costs the browser about 2ms before that frame (evidence/pass-6/6vb-fix/paint-variants3.mjs), so in the first frame (the bar and the hero) only the h1 uses one: the lede, the buttons and the wordmark stay on Obi's own stack, where they keep their lines when Inter arrives (linebreaks.mjs), and the h1 is drawn as soon as before (G21). Where Arial is missing the stack goes on to Obi's own fallbacks as before. ---- */ @font-face { font-family: "Obi Inter Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 104.5%; ascent-override: 92.70%; descent-override: 23.08%; line-gap-override: 0%; } /*keep: Inter Regular at 17 to 19px is 4.1 to 5.4% wider than Arial*/ @font-face { font-family: "Obi Inter Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; font-style: normal; font-display: swap; size-adjust: 98%; ascent-override: 98.85%; descent-override: 24.61%; line-gap-override: 0%; } /*keep: Inter SemiBold and Bold at 15 to 21px against Arial Bold, 0.98 to 1.01*/ @font-face { font-family: "Obi Inter Display Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; font-style: normal; font-display: swap; size-adjust: 95.5%; ascent-override: 101.44%; descent-override: 25.26%; line-gap-override: 0%; } /*keep: Inter Bold at 32px and up (its display optical size) is 0.955 of Arial Bold*/ /* ---- 3. The page ---- */ #obiFront { --obf-gutter: clamp(var(--space-4), 5vw, var(--space-7)); /*keep: §19.4, the 5vw rate: 16px up to 320 (§6's gutter), 48px from 960*/ --obf-section: clamp(var(--space-8), 9vw, var(--space-9)); /*keep: §19.4, the space between sections; the 9vw rate: 64px up to about 710, 96px from about 1070*/ --obf-bar: var(--space-8); /* the top bar's height: a 40px button and 12px above and below */ box-sizing: border-box; min-height: 100%; margin: 0; background: var(--bg-page); color: var(--ink); font-family: "Inter", "Obi Inter Fallback", var(--font-sans); /* Obi's Inter, then its stand-in (§2), then Obi's own stack */ font-size: var(--text-body); line-height: var(--lh-body); text-align: left; overflow-wrap: anywhere; /* a word longer than its line (300% text, 320px) wraps inside itself rather than running off the side */ } #obiFront *, #obiFront *::before, #obiFront *::after { box-sizing: border-box; } #obiFront .obf-wrap { width: 100%; margin-inline: auto; padding-inline: var(--obf-gutter); max-width: calc(1200px/*keep: §19.4, a reading page's width, narrower than the app's 1780px grids*/ + 2 * var(--obf-gutter)); } #obiFront p { margin: 0; } #obiFront :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Obi's ring, whatever the app's rules say */ /* Headings. ovation.css and obi-web.css style bare h1, h2 and h3 for the app's views: every property they set is set here. */ #obiFront :is(.obf-h1, .obf-h2, .obf-h3) { margin: 0; max-width: none; font-family: inherit; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; } #obiFront :is(.obf-h1, .obf-h2) { font-family: "Inter", "Obi Inter Display Fallback", var(--font-sans); } /* §2: the display stand-in */ @media (max-width: 559px/*keep: below this the h2s are under about 28px, where Inter's optical size is near its text size and the text stand-in matches it better (linebreaks.mjs)*/) { #obiFront .obf-h2 { font-family: "Inter", "Obi Inter Fallback", var(--font-sans); } } /* The closing promise is two sentences: each starts its own line, so a line never ends on "Record" (obi-front.js wraps each in .obf-line). */ #obiFront .obf-line { display: block; } #obiFront .obf-h1 { font-size: clamp(2.25rem, 1.6rem + 5.2vw, 6rem); /*keep: §19.3, the one bend: about 42px at 320, 96px from about 1354; rem, so it follows the reader's text size*/ font-weight: var(--fw-bold); line-height: 1.02; /*keep: §19.3, two lines of 96px type set solid read as one statement*/ letter-spacing: -.035em; /*keep: §19.3, Inter this large reads loose at Obi's -0.02em*/ text-wrap: balance; } #obiFront .obf-h2 { font-size: clamp(var(--text-h2), 1rem + 2.2vw, var(--text-display)); /*keep: §19.3, between Obi's h2 and display steps, never above display; the 1rem + 2.2vw rate: 26px up to about 455, 40px from about 1090*/ font-weight: var(--fw-bold); line-height: var(--lh-h2); letter-spacing: var(--ls-tight); text-wrap: balance; scroll-margin-top: var(--space-5); } #obiFront .obf-h3 { font-size: var(--text-h3); font-weight: var(--fw-semibold); line-height: var(--lh-h3); letter-spacing: var(--ls-tight); } #obiFront .obf-h2[tabindex="-1"]:focus:not(:focus-visible) { outline: none; } /* "See how it works" moves focus here; a mouse user gets no ring */ /* The signature (§19.1): the wordmark's apricot full stop, drawn (0.19em, sitting on the baseline) rather than typed, because an apricot glyph on bone (2.50:1) would count as text; drawn and aria-hidden it is decoration. .obf-end holds the heading's last letter and the stop together, so the stop never wraps onto a line of its own. */ #obiFront .obf-end { white-space: nowrap; } #obiFront .obf-stop { display: inline-block; width: .19em; height: .19em; /*keep: §19.1, the drawn full stop, the size of Inter's own (0.18 to 0.21em)*/ margin-left: .03em; /*keep: §19.1, with the letter's own side and the tracking, the 0.04em gap a typed full stop leaves (6.VB)*/ vertical-align: baseline; border-radius: var(--radius-full); background: var(--apricot); } /* ---- 4. Buttons: Obi's Button (primary, secondary, ghost), as real