/* landing.css — the public page, on the new design system. * * WHY THIS FILE EXISTS AT ALL, next to /assets/ui.css. ui.css is the APPLICATION's * stylesheet: a sidebar, a writing sheet, a report, a drawer, sixty components * a shop window has no use for. This page loads none of it. What it does load * is the same token VALUES, copied out of ui.css's three theme blocks below — * so a visitor who taps «Kirish» and lands in the app is looking at the same * paper, * the same orange, the same two typefaces, and never learns that two * stylesheets were involved. * * The values are copied and not imported deliberately. This page is served at * `/`, outside the shell, by routes/landing.js; importing the application's * stylesheet would put the whole shell's CSS on the one page whose first paint * decides whether a stranger stays. If a token ever moves in ui.css it must be * moved here too, and the three blocks below are ordered and named exactly as * they are there so the diff is obvious. * * THE ANATOMY IS THE OLD PAGE'S, THE VOCABULARY IS NEW. The ruled hero, the * marked-up essay card, the seal, the fact band, three cards, three steps, the * rewrite, the ink block at the foot — all of it stays exactly where it was. * What changed is what those things are drawn WITH: the display face is * Bricolage Grotesque instead of a serif, cards are 22px-radius paper with a * hairline, the fact band wears the dashboard's four tints, the errors are * marked the way the report marks errors, and the orange is spent on ONE thing. * * TARGET IS A MID-RANGE ANDROID WEBVIEW: no color-mix(), no :has(), no nesting, * no container queries. Everything here works in a 2021 browser. */ /* ============================================================ themes */ /* Copied from /assets/ui.css. Three of them, because tema.js in the applies * whatever this device chose inside the product — a student who set the night * theme and then signed out arrives here in it, and a page that only knew about * daylight would hand them a white sheet at eleven at night. * * QUYOSH — warm paper, orange accent. The default, and the one this page was * designed in. */ :root, :root[data-theme="quyosh"] { --bg: #f6f1e8; --side: #1b1c20; --side-ink: #f4f2ec; --side-mut: #9a9aa4; --side-line: #303138; --card: #fffdf8; --card2: #f0ead9; --line: #e5ddc9; --line2: #d8cfb6; --ink: #1c1d21; --ink2: #45443f; --mut: #71706a; --accent: #ee5a2e; --on-accent: #ffffff; --accent-soft: #fde3d8; --low: #c22f1d; --mid: #96660a; --high: #1e7a3f; --low-soft: #fbe3de; --mid-soft: #f8ecd2; --high-soft: #ddf1e2; --t1: #ffd166; --t1i: #3d2e04; --t2: #ddcdf9; --t2i: #2c1f52; --t3: #c3e2f8; --t3i: #10395a; --t4: #cfeeda; --t4i: #114a26; --r: 22px; --rs: 12px; --pill: 999px; --fd: "Bricolage Grotesque", "Avenir Next", "Trebuchet MS", sans-serif; --fb: "Plus Jakarta Sans", "Avenir Next", ui-sans-serif, system-ui, sans-serif; --shadow: 0 1px 2px rgba(40,30,10,.05); --shadow-up: 0 10px 30px rgba(40,30,10,.10); color-scheme: light; } /* BINAFSHA — white, tight radii, purple accent. Its rail is WHITE, so the ink * block at the foot of this page is a white band in this theme rather than a * near-black one. That is the theme working, not a bug: the block is «the * colour the rail is», and in binafsha the rail is paper. */ :root[data-theme="binafsha"] { --bg: #f6f6fa; --side: #ffffff; --side-ink: #17181d; --side-mut: #7c7f8d; --side-line: #e9e9f1; --card: #ffffff; --card2: #f1f1f7; --line: #e8e8f0; --line2: #d9d9e5; --ink: #17181d; --ink2: #42444e; --mut: #74767f; --accent: #6553e0; --on-accent: #ffffff; --accent-soft: #efecfd; --low: #cb2e2e; --mid: #9c6205; --high: #14824a; --low-soft: #fbe6e6; --mid-soft: #f8eed6; --high-soft: #ddf3e6; --t1: #ffedbe; --t1i: #6b4c05; --t2: #e9e3fd; --t2i: #4534b3; --t3: #ddeffd; --t3i: #155081; --t4: #def4e6; --t4i: #14653a; --r: 14px; --rs: 10px; --pill: 10px; --fd: "Figtree", "Avenir Next", ui-sans-serif, system-ui, sans-serif; --fb: "Figtree", "Avenir Next", ui-sans-serif, system-ui, sans-serif; --shadow: 0 1px 3px rgba(23,24,40,.06); --shadow-up: 0 10px 30px rgba(23,24,40,.12); color-scheme: light; } /* TUNGI — night. */ :root[data-theme="tungi"] { --bg: #0e141b; --side: #0a0f15; --side-ink: #e9edf3; --side-mut: #7f8ba0; --side-line: #1c2430; --card: #171e28; --card2: #202a37; --line: #26303d; --line2: #33404f; --ink: #e9edf3; --ink2: #c3ccd9; --mut: #93a0b4; --accent: #5ad0dc; --on-accent: #06262c; --accent-soft: #143038; --low: #ff8272; --mid: #e3b34f; --high: #66d692; --low-soft: #3a1f1c; --mid-soft: #362b10; --high-soft: #14301f; --t1: #33290e; --t1i: #ffd166; --t2: #261e42; --t2i: #cbb8f5; --t3: #10293c; --t3i: #8fc7ee; --t4: #143020; --t4i: #9adfae; --r: 16px; --rs: 10px; --pill: 999px; --fd: "Lora", "Iowan Old Style", Georgia, serif; --fb: "Inter", ui-sans-serif, system-ui, sans-serif; --shadow: none; --shadow-up: 0 10px 30px rgba(0,0,0,.5); color-scheme: dark; } /* ============================================================ base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--fb); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; } button { font: inherit; color: inherit; cursor: pointer; } img, svg { max-width: 100%; } /* [hidden] LOUDLY. The refusal notice is `display: flex` from its own class, * which is one selector of exactly the same weight as the browser's own * [hidden] rule and comes later in this file — so without this line the box's * refusal is on screen before anybody has pressed anything, which is the worst * sentence on the page shown to somebody it is not about. The `!important` also * settles the two theme glyphs: they are SVG, and how far the UA's own [hidden] * rule reaches into SVG is not a thing to bet a masthead on. */ [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--accent-soft); color: var(--ink); } /* Screen-reader-only, but focusable — the skip link. */ .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .vh:focus { position: fixed; top: 10px; left: 10px; width: auto; height: auto; clip: auto; margin: 0; padding: 10px 16px; z-index: 90; background: var(--card); color: var(--ink); border-radius: var(--rs); box-shadow: 0 6px 24px rgba(0,0,0,.18); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ============================================================ the column */ /* One measure for the whole page. 1120px rather than ui.css's 1320: that width * is for a dashboard with a rail beside it, and a line of marketing prose the * width of a cinema is not a feature. */ .lp-col { max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* ============================================================ buttons */ /* ONE FILLED BUTTON EXISTS ON THIS PAGE and it is the free essay. Everything * else that can be pressed — sign in, the sample report, the two switches — is * outlined or quiet. A stranger arriving here has exactly one thing to do, and * three orange buttons is three ways of not saying which. */ .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 13px 24px; border-radius: var(--pill); border: 1.5px solid transparent; font-family: var(--fb); font-weight: 700; font-size: 14px; line-height: 1.1; text-decoration: none; text-align: center; transition: filter .15s, background .15s, border-color .15s; } .lp-btn-solid { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .lp-btn-solid:hover { filter: brightness(1.06); } .lp-btn-line { background: transparent; color: var(--ink); border-color: var(--line2); } .lp-btn-line:hover { background: var(--card2); border-color: var(--mut); } .lp-btn-sm { min-height: 44px; padding: 10px 18px; font-size: 13px; } .lp-btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; } /* The masthead's two switches. 44px tall like everything else that is tapped; * the label is the width, so they stay legible at a glance rather than becoming * two mystery glyphs. */ .lp-quiet { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 9px 14px; border: 0; border-radius: var(--pill); background: transparent; color: var(--mut); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s; } .lp-quiet:hover { background: var(--card2); color: var(--ink); } .lp-ico { flex-shrink: 0; } /* ============================================================ masthead */ .lp-top { position: sticky; top: 0; z-index: 20; background: var(--card); border-bottom: 1px solid var(--line); } /* WRAPPING AT EVERY WIDTH, not only inside the phone block. Five things sit in * this bar and three of them are translated: «Qanday ishlaydi» and «Til / * Language» are half again as wide in Uzbek as their English, and a masthead * that overflows in one language is a masthead that was measured in the other. * Wrapped, the worst case is two rows; unwrapped it is a horizontal scrollbar * on the whole document. */ .lp-top-in { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; min-height: 68px; padding-top: 8px; padding-bottom: 8px; } .lp-mark { display: inline-flex; align-items: center; gap: 9px; font-family: var(--fd); font-weight: 700; font-size: 14px; letter-spacing: .13em; color: var(--ink); text-decoration: none; white-space: nowrap; } .lp-mark-i { color: var(--accent); } .lp-nav { display: flex; gap: 20px; font-size: 13.5px; font-weight: 600; } .lp-nav a { color: var(--mut); text-decoration: none; padding: 11px 0; } .lp-nav a:hover { color: var(--ink); } .lp-top-act { margin-left: auto; display: flex; align-items: center; gap: 6px; } /* A GROUP RATHER THAN A LINK, because there are two doors now — sign up and * sign in, both outlined; see the comment beside them in landing.html. The pair * travels together at every width: they are one decision, and a masthead that * wraps between them puts «Kirish» on a line of its own where it reads as an * afterthought. flex-shrink:0 keeps the Uzbek labels off two lines. */ .lp-top-go { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* ============================================================ hero */ /* THE RULING IS THE PAGE'S ONE IDEA and it runs behind the whole hero rather * than inside a box: this page is the examination paper. 33px of nothing and a * 1px hairline is the same 34px period the writing sheet in the app rules its * textarea with, in the same token — the two surfaces are one surface. */ .lp-hero { padding: 60px 0 56px; background-image: repeating-linear-gradient(transparent 0 33px, var(--line) 33px 34px); } .lp-hero-in { display: grid; grid-template-columns: 1.06fr 1fr; gap: 48px; align-items: start; } .lp-hero-say { min-width: 0; } .lp-eyebrow { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; } /* THE ORANGE IS A FILL, NOT AN INK, and quyosh is where that matters. #ee5a2e * on this paper is 3.0:1 — fine behind white letters on a button, and under the * 4.5:1 an 11px label needs. ui.css hit the same wall painting the dashboard's * hero and answered it with this exact value; it is that file's colour, not a * new one, and it reads at 5.8:1. The other two themes' accents already clear * the bar on their own grounds. */ :root[data-theme="quyosh"] .lp-eyebrow, :root[data-theme="quyosh"] .lp-fig-eye { color: #a33c12; } .lp-h1 { margin: 16px 0 0; font-family: var(--fd); font-weight: 700; font-size: clamp(32px, 4.6vw, 46px); line-height: 1.08; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; } .lp-lede { margin: 16px 0 0; max-width: 480px; font-size: 15.5px; line-height: 1.65; color: var(--ink2); } /* -------- the call to action, whose markup comes from routes/landing.js in two * variants: the free essay, or the door when the centre has switched it off. * Every class name in this block — and .lp-btn, .lp-btn-solid and .lp-btn-line * above — is written on the server. They are a contract: renaming one here * silently unstyles the most important control on the site, and nothing in this * file would go red to say so. */ .lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; } .lp-cta-note { margin: 14px 0 0; font-size: 12px; color: var(--mut); } .lp-dot { padding: 0 7px; color: var(--line2); } .lp-cta-err { margin: 16px 0 0; max-width: 460px; } /* The refusal. Warm amber rather than red on purpose: «today's free essay is * used» is a limit with somewhere to go, not a failure. */ .notice { display: flex; flex-direction: column; gap: 3px; border-radius: var(--rs); padding: 12px 16px; font-size: 13.5px; line-height: 1.55; } .notice-warn { background: var(--mid-soft); color: var(--mid); } .notice-title { font-weight: 800; } /* ============================================================ the proof */ /* THE REPORT SCREEN, IN MINIATURE. Paper, a hairline, 22px corners and the * lifted shadow — the same card the report is built out of — and inside it the * report's own marking: the error ground with a 2px rule under it, a * superscript in the error's ink, and the correction on the line below. */ /* THE CARD KEEPS A RIGHT MARGIN SO THE SEAL HAS SOMEWHERE TO SIT. 52px of it, * against a 104px disc pushed 16px past the column: the seal lands on the * card's corner and its 22px of padding, and never on a word. A stamp over the * quotation would be a decoration covering the one piece of evidence this page * offers. The 16px overhang is smaller than .lp-col's own 24px gutter, so * nothing leaves the page. */ .lp-hero-show { position: relative; padding: 30px 24px 0 0; } .lp-sheet { margin: 0 52px 0 0; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-up); } .lp-sheet-cap { margin: 0 0 12px; font-family: var(--fb); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--mut); } .lp-sheet-text { margin: 0; font-family: var(--fd); font-size: 14.5px; line-height: 2; color: var(--ink); } .lp-flag { background: var(--low-soft); border-bottom: 2px solid var(--low); border-radius: 3px 3px 0 0; padding: 1px 2px; } .lp-flag sup { margin-left: 1px; font-size: 10px; font-weight: 800; color: var(--low); } .lp-sheet-fix { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; color: var(--mut); } .lp-fix-n { color: var(--low); font-weight: 800; } .lp-fix-ok { color: var(--high); font-weight: 700; } /* The seal. Amber, because that is the tint the dashboard's headline number * wears; rotated, because it is a stamp and not a badge. Decoration, and * aria-hidden in the markup — the claim it makes is made in words further down. */ .lp-seal { position: absolute; top: 0; right: -16px; width: 104px; height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 50%; background: var(--t1); color: var(--t1i); transform: rotate(-9deg); text-align: center; box-shadow: var(--shadow-up); } .lp-seal-t { font-size: 8.5px; font-weight: 800; letter-spacing: .12em; } .lp-seal-n { font-family: var(--fd); font-size: 22px; font-weight: 700; line-height: 1.1; } .lp-seal-b { font-size: 8.5px; font-weight: 700; letter-spacing: .2em; } /* ============================================================ facts */ /* FOUR TINTED CELLS, and they are the dashboard's four. A student who signs in * meets amber, violet, sky and mint doing exactly this job — carrying one * number and the noun under it — on the first screen inside. */ .lp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; padding-top: 0; padding-bottom: 0; } .lp-fact { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: var(--r); } .lp-fact-n { font-family: var(--fd); font-size: 34px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .lp-fact-l { font-size: 12.5px; font-weight: 600; line-height: 1.4; } .lp-t1 { background: var(--t1); color: var(--t1i); } .lp-t2 { background: var(--t2); color: var(--t2i); } .lp-t3 { background: var(--t3); color: var(--t3i); } .lp-t4 { background: var(--t4); color: var(--t4i); } /* The one cell whose «number» is two letters. Tabular figures do nothing for * them and the pair sits tight without a little tracking. */ .lp-fact-uz .lp-fact-n { letter-spacing: .03em; } /* ============================================================ the readout */ /* WHAT USED TO BE HERE. Three cards — write / report / progress — and then three * numbered steps saying the same three things in the same number of words, and * after them a paragraph about the band-8 rewrite. About a hundred and eighty * words of promising. They are gone, and what replaces them is the report's own * band card drawn at the size it fits in: the ring, the four criteria, the rule * that capped one of them, and the sentence that closes the gap. * * NOTHING IN THIS BLOCK IS A NEW PICTURE. The ring is hisobot.js's ring — same * viewBox, same r=52, same 9px stroke, same «a full ring is 9.0» arithmetic. * The criterion rows are secCrits()'s rows: a name, its band in the band ink, * and a track filled to band ÷ 9. A visitor who signs in an hour later meets * this drawing again, at full size, with their own numbers in it. */ .lp-report { padding: 56px 0; } /* THE MASTHEAD IS STICKY ABOVE 780px AND IT IS 68px TALL, so an anchor that * lands exactly on a section heading lands it underneath the bar. Both nav * links and the «Namuna hisobot» button routes/landing.js writes point at these * two sections; 84px is the bar plus a hairline of air. Harmless on a phone, * where the masthead is static. */ #main, .lp-report, .lp-more { scroll-margin-top: 84px; } .lp-report-in { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; } .lp-report-say { min-width: 0; } .lp-h2 { margin: 12px 0 0; font-family: var(--fd); font-size: clamp(24px, 3vw, 29px); font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; } .lp-read { margin: 0; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-up); } /* WRAPPING, NOT A BREAKPOINT. The four criterion names are the longest strings * on this page that cannot be shortened — «Grammatical Range & Accuracy» is * IELTS's own wording — so the rows claim 240px and take the ring's row away * from it when they cannot have that. */ .lp-read-in { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 24px; } .lp-ring { position: relative; width: 104px; height: 104px; flex-shrink: 0; } .lp-ring-v { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .lp-ring-v b { font-family: var(--fd); font-size: 30px; font-weight: 700; line-height: 1; color: var(--ink); } .lp-ring-v small { margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--mut); } .lp-crits { flex: 1 1 240px; min-width: 0; margin: 0; padding: 0; list-style: none; } .lp-crit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); } .lp-crit:first-child { border-top: 0; padding-top: 0; } .lp-crit-n { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--ink2); } .lp-crit-b { font-family: var(--fd); font-size: 17px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); } /* bandVar()'s two answers for the numbers on this card: --high from 7.0 up, and * --good below it — which is --ink in all three themes, so it is written as * --ink here rather than copying a fourth token that is never anything else. */ .lp-b-high { color: var(--high); } .lp-track { grid-column: 1 / -1; height: 7px; border-radius: var(--pill); background: var(--card2); overflow: hidden; } .lp-track i { display: block; height: 100%; border-radius: var(--pill); background: var(--ink); } .lp-track-high i { background: var(--high); } /* The cap, in the amber the report prints it in: a band that was LOWERED and * the rule that lowered it is the one thing on this card no free marker gives * anybody, so it is the one row that carries a second line. */ .lp-crit-cap { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.5; color: var(--mid); } .lp-crit-cap b { font-weight: 800; font-variant-numeric: tabular-nums; } .lp-gap { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; color: var(--ink2); } .lp-gap-l { margin-right: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--mut); } /* ============================================================ the two figures */ /* The band in the second paper, hairlined top and bottom — the page's one change * of ground between the fact band and the foot. It used to carry three numbered * steps; it carries two drawings now, and the drawings are the product's files. * * align-items: start, because the two cards are honestly different heights: the * vocabulary entry is four short blocks and the Task 1 question has eight * numbers in it. Stretching the shorter one to match would put a hand's width * of empty paper under a card that had finished. */ .lp-more { padding: 52px 0; background: var(--card2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .lp-more-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .lp-fig { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); } .lp-fig-cap { display: flex; flex-direction: column; gap: 6px; } .lp-fig-eye { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; } .lp-fig-h { margin: 0; font-family: var(--fd); font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--ink); } /* -------- the 5.5 → 7.5 gap, in lugat.js's own three lines: the phrase, the * sentence a student would have written struck through, and the same idea at * 7.5 on the green ground the report keeps for a sentence that WORKED. */ .lp-ph { margin: 0; font-family: var(--fd); font-size: 19px; font-weight: 700; color: var(--ink); } .lp-weak { margin: 0; font-size: 13px; line-height: 1.55; color: var(--mut); text-decoration: line-through; } .lp-strong { margin: 0; padding: 10px 12px; border-radius: var(--rs); background: var(--high-soft); font-size: 13px; line-height: 1.55; color: var(--ink); } /* On the night ground the green ground is nearly black, so the ink carries it. */ :root[data-theme="tungi"] .lp-strong { color: var(--high); } .lp-vrow { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink2); } .lp-vrow-l { margin-right: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); } .lp-vrow b { color: var(--ink); font-weight: 600; } /* -------- the Task 1 question and its chart: a labelled bar per category and * series, each track filled to its share of the largest number in the set. The * prompt sits on the second paper, which is where the writing screen puts it * too. * * THIS IS THIS PAGE'S OWN DRAWING, not the one inside the product. There, * core/figures.js draws each question as the form its own first sentence names * — columns, a line graph, a donut, a table, a numbered process — off the * --s1..--s6 series palette in /assets/ui.css, the application stylesheet this page * exists in order not to load. The numbers are the same numbers. */ .lp-q { margin: 0; padding: 12px 14px; border-radius: var(--rs); background: var(--card2); font-size: 12.5px; line-height: 1.6; color: var(--ink2); } .lp-fig-t { margin: 0; font-family: var(--fd); font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ink); } .lp-fig-rows { display: flex; flex-direction: column; gap: 9px; } .lp-fig-row { display: flex; flex-direction: column; gap: 5px; } .lp-fh { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; } .lp-fh b { color: var(--ink); font-weight: 600; } .lp-fh span { color: var(--mut); font-variant-numeric: tabular-nums; } .lp-ftrack { height: 9px; border-radius: 5px; background: var(--card2); overflow: hidden; } .lp-ftrack i { display: block; height: 100%; border-radius: 5px; background: var(--accent); } .lp-fig-u { margin: 0; font-size: 11.5px; color: var(--mut); } /* ============================================================ the close */ /* The page ends on the colour the product is built around — the application's * own rail, full bleed. The button in it is the same button as the one in the * hero, and it goes back to it. */ .lp-end { padding: 56px 0; background: var(--side); color: var(--side-ink); border-top: 1px solid var(--line); } .lp-end-in { display: flex; flex-direction: column; align-items: center; text-align: center; } .lp-end-h { margin: 0; font-family: var(--fd); font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; line-height: 1.15; color: var(--side-ink); text-wrap: balance; } .lp-end-b { margin: 10px 0 0; font-size: 13.5px; color: var(--side-mut); } .lp-end .lp-btn { margin-top: 24px; } /* ============================================================ narrower */ /* THE HERO BREAKS FIRST AND THE SEAL CHANGES SHAPE WITH IT. Below the two * column hero the proof card is full width, and a disc hanging off its corner * by a negative offset would hang over the quotation instead. It is decoration, * so on a phone it becomes what it always was underneath — a claim, in a pill, * under the thing it is a claim about. */ @media (max-width: 1000px) { .lp-hero-in { grid-template-columns: minmax(0, 1fr); gap: 36px; } .lp-hero-show { padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .lp-sheet { margin-right: 0; align-self: stretch; } .lp-seal { position: static; width: auto; height: auto; flex-direction: row; gap: 9px; padding: 9px 18px; border-radius: var(--pill); transform: none; box-shadow: none; } .lp-seal-n { font-size: 16px; } .lp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* THE READOUT'S TEXT GOES OVER IT rather than beside it, and the card keeps its own width: at 1000px the two-column split leaves the criterion rows about 300px, which is where «Grammatical Range & Accuracy» starts wrapping to three lines beside a 104px ring. */ .lp-report-in { grid-template-columns: minmax(0, 1fr); gap: 26px; } } @media (max-width: 780px) { /* The two anchors go here rather than at 1000px, and after the fact band has already halved. Everything they point at is a scroll away on a page this short, and the two switches are the only controls here that cannot be reached any other way — so the anchors are what the masthead gives up first. In Uzbek the pair is about 230px of text, which is why they survive the tablet width the three of them did not. */ .lp-nav { display: none; } .lp-more-in { grid-template-columns: minmax(0, 1fr); } .lp-col { padding-left: 16px; padding-right: 16px; } /* NOT STICKY ON A PHONE. Wrapped onto two rows the masthead is 110px tall, and 110px of a 640px screen permanently spent on a wordmark and two switches is the reading area of the page it is selling. */ .lp-top { position: static; } .lp-top-in { gap: 10px; min-height: 0; padding-top: 12px; padding-bottom: 12px; } /* TWO ROWS, IN THIS ORDER: the mark and the way in, then the two switches. The three of them side by side are about 360px of labels — the width of the phone this page is mostly read on, before its gutters. */ .lp-mark { order: -2; } .lp-top-go { order: -1; margin-left: auto; } .lp-top-act { order: 0; width: 100%; margin-left: 0; gap: 4px; } .lp-hero { padding: 34px 0 40px; } .lp-lede { max-width: none; } .lp-report { padding: 40px 0; } .lp-more { padding: 36px 0; } .lp-end { padding: 44px 0; } .lp-fact { padding: 16px 18px; } .lp-fact-n { font-size: 28px; } } @media (max-width: 560px) { /* Two buttons side by side at 360px are two buttons of forty characters each, wrapped to three lines. Stacked, the filled one is first and full width, which is the order they are meant to be read in anyway. */ .lp-cta .lp-btn { flex: 1 1 100%; } .lp-sheet { padding: 16px 18px; } .lp-sheet-text { font-size: 14px; } /* AT 360px THE GUTTERS LEAVE 328px, and a card that keeps 22px of padding on each side leaves 282px of paper inside it. That is the number every rule in this block is measured against. THE RING TAKES ITS OWN ROW HERE — .lp-read-in already wraps, and 88px of disc over four full-width rows reads better than 104px of it beside rows 240px wide. The four criterion names then have 240px each, which is enough for «Grammatical Range & Accuracy» on one line at 12.5px. */ .lp-read { padding: 16px 18px; } .lp-read-in { gap: 16px; } .lp-ring { width: 88px; height: 88px; } .lp-ring svg { width: 88px; height: 88px; } .lp-ring-v b { font-size: 26px; } .lp-fig { padding: 18px 18px; gap: 11px; } /* THE TASK 1 FIGURE IS EIGHT ROWS TALL because the question has eight numbers in it, and none of them may be dropped to make the picture shorter — a chart missing a year is a chart nobody can write the answer to. So the rhythm tightens instead: 28px a row rather than 35px, which gives the card back about a fifth of its height without touching a single value. */ .lp-fig-rows { gap: 7px; } .lp-fig-row { gap: 4px; } .lp-fh { font-size: 11.5px; } .lp-ftrack { height: 8px; } /* THE TWO DOORS TAKE THEIR OWN ROW, and the arithmetic is why. At 360px the gutters leave 328px; the wordmark is about 178px of it and the pair is about 234px, so they cannot share a line in either language — and a 44px button whose label has wrapped onto two lines is a button that has overflowed. Full width and half each, the Uzbek «Roʻyxatdan oʻtish» gets 160px for 112px of label, which is the widest either of them ever is. It costs the masthead a third row. The mark alone on the first row is 25px rather than the 44px it was when it shared that row with a button, so the real price is about 35px — and what it buys is a stranger being able to see both ways in without scrolling, which is the whole point of adding one. */ .lp-top-go { width: 100%; margin-left: 0; } .lp-top-go .lp-btn { flex: 1 1 0; min-width: 0; } } /* ==================================================== the ground, in the corner * The same switch as everywhere else in the product, and deliberately the same * rules: this page and ui.css share no stylesheet — landing.html refuses ui.css * on purpose — so the component is copied rather than imported. It is copied * verbatim, which is the point: two drawings of one control is how a switch * starts behaving differently on different pages. * * Every token it asks for is already defined three times over at the top of this * file, once per theme, so nothing here names a colour. * * z-index 46 clears .lp-top's sticky 20 and loses to .vh:focus's 90 — the skip * link, which lands in the opposite corner and must stay on top of everything. */ /* THE ROW POSITIONS IT, NOT THE BUTTON, and it does so in two ways because this * page has two kinds of top. Above 781px .lp-top is sticky and opaque, so the * switch can float over the masthead and cost nothing. Below it, .lp-top is * deliberately NOT sticky — see the note beside that rule; wrapped onto two rows * the masthead is 166px, and that much of a 640px screen is the reading area of * the page it is selling — so a floating switch has nothing to float over and * sits on the page itself. Measured at 390px: it covered the hero's one filled * button, «Bitta insho yozib koʻring», and took the tap. * * So on a phone it takes a row, opaque, sticky: 56px once, at the top of a page * four thousand tall, instead of 96px off every line of the column. It is the * same answer the two doors and /privacy give, for the same reason. */ .groundbar { position: sticky; top: 0; z-index: 46; background: var(--bg); display: flex; justify-content: flex-end; padding: 12px 16px 0; padding-top: calc(12px + env(safe-area-inset-top)); } @media (min-width: 781px) { .groundbar { position: fixed; top: 0; right: 0; left: auto; padding: 6px 12px 0; background: none; } /* Only up here does the masthead run under the switch. */ .lp-top-in { padding-right: 96px; } } #btnGround { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 5px; background: none; border: 0; border-radius: 999px; } .groundtrack { position: relative; display: flex; align-items: center; width: 62px; height: 34px; padding: 3px; background: var(--card2); border: 1px solid var(--line); border-radius: 999px; } #btnGround:hover .groundtrack { border-color: var(--line2); } .groundknob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); transition: transform .18s; } /* 28px is arithmetic: 62 less two 1px rules and two 3px pads is a 54px content box, less the 26px knob. The hairline is tungi's alone — that theme has no --shadow and its --card is darker than its --card2, so an unedged knob reads as a hole punched in the track. */ :root[data-theme="tungi"] .groundknob { transform: translateX(28px); border: 1px solid var(--line2); } /* position:relative is load-bearing: the knob is positioned and the icons are not, so without it the knob paints over both of them. */ .groundhalf { position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; color: var(--mut); } .gsun { color: var(--ink); } :root[data-theme="tungi"] .gsun { color: var(--mut); } :root[data-theme="tungi"] .gmoon { color: var(--ink); } @media print { .groundbar { display: none !important; } }