/* ═══════════════════════════════════════════════════════════════════════════ PRISMGATE · SET AS AN INK SPECIMEN CARD The app is a printer's swatch book for four inks, and the game is the viewing booth those inks are read in. Every card opens with the same object a press sheet opens with: a colour bar, four solid patches of the working inks printed in the trim. That bar is the whole structural device. There are no rounded surfaces, no shadows, no gradients used as decoration, and no icons except the four shapes that ARE the inks. Rules this sheet keeps, without exception: · Structure has NO radius. Only the few things a finger operates get 2px. · There is NO elevation. A hairline, a solid patch and empty stock do every job a shadow would have done. · The measure is asymmetric: the colour bar and the headline run to the trim, the reading column stops 18px short of the right margin. · Rhythm is 24px. Sections are separated by a rule and 22 to 26px. · Motion is a 240ms ease-out crossfade. Nothing travels, nothing bounces. · The one exception to "nothing moves fast" is the ink laying down: a patch fills across, because that is what ink does. The page tokens below deliberately avoid --ink, --bg, --line, --accent and the rest: those names belong to brand.js, which writes them onto as inline style for game.js to read off the canvas. An inline value outranks this stylesheet, so a page token called --ink would silently become the plate's off-white and the card would print white on white. The page is set in --type on --stock; only the four ink hues are shared, and they are aliased through --i1..--i4 so there is exactly one source for them. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Written from JS by applySafeArea(). 0 outside Telegram fullscreen, so every utility that reads them collapses on its own. */ --tg-safe-top: 0px; --tg-safe-bottom: 0px; /* the stock. A specimen card is printed on bright neutral paper on purpose: a tinted sheet would shift every ink laid on it. */ --stock: #F7F6F3; --type: #131315; /* the text ink, 15.6:1 on stock */ --type-2: #4A4A50; /* secondary prose, 8.0:1 */ --type-3: #78777E; /* labels, references, small print, 4.6:1 */ --hair: #DCD8D0; /* the hairline: rules, boxes, empty patches */ --oxide: #A32D1C; /* the one destructive word, and a gauge running out */ --set: #1F6440; /* a proof passed */ /* The four working inks, aliased off the plate palette so the card and the booth can never print different colours. Fallbacks are first-paint only. */ --i1: var(--accent, #38BDF8); /* No. 1 circle */ --i2: var(--sp-2, #A78BFA); /* No. 2 triangle */ --i3: var(--sp-3, #FBBF24); /* No. 3 square */ --i4: var(--sp-4, #F472B6); /* No. 4 diamond */ /* The colour bar: four solids, hard stops, no blending. Printed in the trim of every card, panel and slip in the app. */ --colourbar: linear-gradient(90deg, var(--i1) 0 25%, var(--i2) 0 50%, var(--i3) 0 75%, var(--i4) 0 100%); --f-d: "Bodoni Moda", Didot, "Times New Roman", serif; --f-t: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mg: 26px; /* the trim margin */ --short: 18px; /* how far the reading column stops short of it */ --t: 240ms ease-out; } *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Overlays set their own display, which outranks the UA rule for [hidden]. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; background: var(--stock); overscroll-behavior: none; -webkit-overflow-scrolling: touch; } body { font-family: var(--f-t); font-size: 15px; line-height: 1.6; color: var(--type); -webkit-font-smoothing: antialiased; } h1, h2, p, ol, ul, figure, figcaption { margin: 0; padding: 0; } ol, ul { list-style: none; } button, input { font: inherit; color: inherit; } button { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; } /* ── the ink set ────────────────────────────────────────────────────────── Four filled shapes and nothing else. They are not decoration: the game prints the same four on every gate and up the locked beam, so a player who cannot separate the hues plays on shape alone. Filled, never stroked, the way a swatch book prints a solid. */ .inkset { position: absolute; width: 0; height: 0; overflow: hidden; } .shp { display: block; flex: none; width: 15px; height: 15px; fill: currentColor; stroke: none; } .shp-lg { width: 22px; height: 22px; } /* ── the colour bar ────────────────────────────────────────────────────── Printed full-bleed to the trim, cancelling the card margin. One object, used at the head of every card, panel and slip. */ .bar { flex: none; height: 5px; background: var(--colourbar); } /* On a card it bleeds to the trim; on a slip or a panel it already is the full width, so it stays put. */ .folio--card > .bar { margin: 0 calc(var(--mg) * -1); } .folio--booth > .bar { margin: 0 -20px; } /* ── type roles ──────────────────────────────────────────────────────────── */ /* The reference line: sans, small, widely letterspaced, quiet. Every label and every caption key in the app is one of these. */ .tag { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--type-3); line-height: 1.4; } .lead { font-family: var(--f-d); font-weight: 500; font-size: clamp(27px, 7.6vw, 32px); line-height: 1.14; letter-spacing: -0.006em; margin-top: 12px; padding-right: var(--short); text-wrap: balance; } .sub { font-family: var(--f-d); font-weight: 500; font-size: 21px; line-height: 1.22; margin-top: 30px; } .text { margin-top: 10px; color: var(--type-2); padding-right: var(--short); } .note { margin-top: 13px; font-family: var(--f-d); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--type-2); padding-right: var(--short); } .fineprint { margin-top: 30px; padding-top: 15px; border-top: 1px solid var(--hair); font-size: 12px; line-height: 1.55; color: var(--type-3); } /* Deliberately NOT pushed down with margin-top:auto. auto REPLACES the 30px the moment a card overflows, which lands the rule on the last line on exactly the cards that scroll. One fixed gap everywhere. */ /* ── actions ───────────────────────────────────────────────────────────── One bordered primary sitting inline with the text rather than spanning the width, and underlined words for everything else. */ .doline { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 22px; } .pull { display: inline-block; flex: none; border: 1px solid var(--type); border-radius: 2px; padding: 10px 18px; font-family: var(--f-d); font-size: 17px; font-weight: 500; line-height: 1.15; color: var(--type); background: transparent; transition: background var(--t), color var(--t), border-color var(--t); } .pull:active { background: var(--type); color: var(--stock); } .pull:disabled { color: var(--type-3); border-color: var(--hair); } .word { font-size: 14.5px; color: var(--type); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--type-3); transition: color var(--t), text-decoration-color var(--t); } .word:active { text-decoration-color: var(--type); } .word:disabled { color: var(--type-3); text-decoration-color: var(--hair); } :where(button, input):focus-visible { outline: 2px solid var(--type); outline-offset: 2px; } /* ── the lay-down bar ──────────────────────────────────────────────────── Not a progress bar: a patch being inked across a hairline box, which is the one thing on this card allowed to move at speed. shell.js only ever sets the width of the i. */ .lay { height: 13px; margin-top: 13px; border: 1px solid var(--hair); background: var(--stock); } .lay i { display: block; height: 100%; width: 0; background: var(--i1); transition: width var(--t); } /* ── cover ───────────────────────────────────────────────────────────────── */ #splash { position: fixed; inset: 0; z-index: 90; background: var(--stock); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--type); transition: opacity var(--t); } #splash.out { opacity: 0; } .cover-bar { display: flex; width: 168px; height: 34px; } .cover-bar span { flex: 1; } .cover-bar span:nth-child(1) { background: var(--i1); } .cover-bar span:nth-child(2) { background: var(--i2); } .cover-bar span:nth-child(3) { background: var(--i3); } .cover-bar span:nth-child(4) { background: var(--i4); } .cover-nm { font-family: var(--f-d); font-size: 44px; font-weight: 400; letter-spacing: -0.01em; margin-top: 22px; } .cover-line { font-family: var(--f-d); font-style: italic; font-size: 15.5px; color: var(--type-2); margin-top: 2px; } /* ── frame ───────────────────────────────────────────────────────────────── */ #app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--stock); } main { position: relative; flex: 1; min-height: 0; z-index: 0; } .folio { position: absolute; inset: 0; display: none; flex-direction: column; overflow-y: auto; } .folio.is-active { display: flex; } /* One slow crossfade per card. No stagger, no travel. */ @keyframes fade { from { opacity: 0; } } .folio.is-active { animation: fade var(--t) ease-out; } /* There is no chrome bar. Each card carries the fullscreen top inset itself and begins clear of Telegram's floating Close / ⋯ row. */ .folio--card { padding: calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) + 16px) var(--mg) 30px; } /* Fullscreen already reserves the chrome inset; trim a cosmetic sliver so the card does not open on a gap, floored at the inset itself. */ [data-fullscreen="1"] .folio--card { padding-top: max(var(--tg-safe-top), calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) - 1.4vh + 16px)); } /* The imprint under the colour bar: what the card is, what it is called, and the grade you have reached, all on one baseline over a hairline. */ .imprint { display: flex; align-items: baseline; gap: 10px; margin-top: 11px; padding-bottom: 9px; border-bottom: 1px solid var(--type); } .wm { font-family: var(--f-d); font-size: 17px; font-weight: 500; letter-spacing: 0.01em; } .grade { margin-left: auto; } /* ── the ink key ───────────────────────────────────────────────────────── THE module a colour-match game earns and no other game in this set can use: its own inks, printed. Patch, shape, name, reference. It is also the accessibility key, and putting it on the front card rather than inside a one-time overlay is the point: the shape mapping is available before the run, during the run and after it, permanently. */ /* The part's own rule opens the list, so it does not draw a second one. */ .inks { margin-top: 12px; } .inkrow { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hair); } /* The patch itself. Solid ink, square, with its shape knocked out of it in the colour of the plate the game is played on. */ .patch { flex: none; width: 62px; height: 38px; display: grid; place-items: center; color: var(--bg, #04101C); } .inkrow:nth-child(1) .patch { background: var(--i1); } .inkrow:nth-child(2) .patch { background: var(--i2); } .inkrow:nth-child(3) .patch { background: var(--i3); } .inkrow:nth-child(4) .patch { background: var(--i4); } .inknm { font-family: var(--f-d); font-size: 19px; font-weight: 500; line-height: 1.1; } .inkref { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--type-3); } /* ── the record, and the index under it ──────────────────────────────────── */ .rec { margin-top: 12px; } .rec-n { display: block; font-family: var(--f-d); font-size: 62px; font-weight: 400; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .rec-u { display: block; margin-top: 4px; font-family: var(--f-d); font-style: italic; font-size: 15.5px; color: var(--type-2); } /* The index: a leader-dotted list, the way a book of specimens indexes itself. The dots are a repeating background on the row, and the two ends sit on top of it in stock, which is what opens the gap they run through. */ .idx { margin-top: 20px; } .idx-r { display: flex; align-items: baseline; padding: 7px 0; background-image: radial-gradient(circle, var(--hair) 1px, transparent 1px); background-position: 0 92%; background-size: 6px 6px; background-repeat: repeat-x; } .idx-k { padding-right: 7px; background: var(--stock); color: var(--type-2); font-size: 14px; } .idx-v { margin-left: auto; padding-left: 7px; background: var(--stock); font-family: var(--f-d); font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; } /* ── today's proof ───────────────────────────────────────────────────────── */ .proof-goal { font-family: var(--f-d); font-size: 19px; line-height: 1.3; margin-top: 7px; padding-right: var(--short); } .proof-m { margin-top: 9px; font-size: 12.5px; color: var(--type-3); font-variant-numeric: tabular-nums; } .proof-m .sep { margin: 0 7px; } [data-daily-state].is-done { color: var(--set); } /* ── the supplement ────────────────────────────────────────────────────── One element, so the whole offer disappears together when ads are off or no block id is configured. A slip laid into the book, set like one. */ /* shell.js writes the daily cap here and leaves it EMPTY when there is none, so the line has to disappear on its own rather than leave a hole. */ .cap { display: block; margin-top: 6px; font-family: var(--f-d); font-style: italic; font-size: 13.5px; color: var(--type-3); } .cap:empty { display: none; } [data-offer] .word { display: inline-block; margin-top: 13px; } /* ── the parts of a card ───────────────────────────────────────────────── One rule and 30px opens every section below the standfirst. The rule runs the full trim; the prose inside it does not. */ .part { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hair); } /* ── the viewing booth ─────────────────────────────────────────────────── The one dark surface in the app, because the game is light and not paint: the canvas composites additively and would be meaningless on white. It is a booth set into the card, framed by a hairline, and the controls are words in the margin above it. */ /* The booth owns the screen: the tab row steps aside. */ [data-screen="play"] .tabbar { display: none; } /* The booth carries the fullscreen top inset itself, so the colour bar prints just under Telegram's floating chrome rather than behind it. */ .folio--booth { overflow: hidden; padding: max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) 20px 10px; } .read { flex: none; display: flex; align-items: baseline; gap: 13px; padding-top: 12px; } .read-c { margin-right: auto; } .read-c .tag { display: block; } .read-n { display: block; font-family: var(--f-d); font-size: 40px; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* The run of gates taken without a break. A figure in the margin, never a badge, and it only exists while there is one. */ .read-chain { font-family: var(--f-d); font-style: italic; font-size: 19px; color: var(--type); opacity: 0; transition: opacity var(--t); } .read-chain.is-on { opacity: 1; } .read-hold { font-size: 10px; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--type-2); } .read-acts { display: flex; gap: 16px; flex: none; } .read-acts .word { font-size: 13.5px; } /* The runway left to the next gate, printed as a control strip sitting directly on the lip of the booth. It carries no label and no caption on purpose: the gate falling down the plate already states its own runway, and a second, louder reading of the same fact competes with the one thing the player has to watch, which is the colour. */ .gauge { flex: none; height: 4px; margin-top: 16px; background: var(--hair); } .gauge i { display: block; height: 100%; width: 100%; background: var(--type); transition: width 90ms linear; } .gauge i.is-low { background: var(--oxide); } .booth { flex: 1; min-height: 0; position: relative; border: 1px solid var(--type); border-top: 0; background: var(--bg, #04101C); } #stage { display: block; width: 100%; height: 100%; background: var(--bg, #04101C); touch-action: none; } .booth-note { flex: none; margin-top: 9px; font-family: var(--f-d); font-style: italic; font-size: 13px; color: var(--type-3); } /* Laid over the booth until the run starts. The whole panel is the start target, so a tap anywhere begins the run. */ .preflight { position: absolute; inset: 0; background: var(--stock); display: flex; align-items: center; padding: 20px; overflow-y: auto; } .preflight-in { width: 100%; max-width: 340px; margin: auto; } .preflight-h { font-family: var(--f-d); font-weight: 500; font-size: 26px; line-height: 1.14; margin-top: 5px; } .preflight .text { padding-right: 0; } .preflight .doline { margin-top: 20px; } /* The one instruction that the old copy never printed: the tap is a toggle. */ .hold { margin-top: 15px; padding-left: 12px; border-left: 3px solid var(--i1); font-size: 13.5px; line-height: 1.5; color: var(--type-2); } /* ── the register ────────────────────────────────────────────────────────── */ .picker { display: flex; gap: 24px; margin-top: 22px; border-bottom: 1px solid var(--hair); } .seg-btn { padding: 0 0 9px; font-family: var(--f-d); font-size: 18px; font-weight: 400; color: var(--type-3); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t), border-color var(--t); } .seg-btn.is-on { color: var(--type); border-bottom-color: var(--type); } /* Ruled entries. The position sits in a gutter cell, and your own line has that cell inked solid, the way a swatch is marked in a book. */ .book { margin-top: 18px; border-top: 1px solid var(--type); } .rw { display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; border-bottom: 1px solid var(--hair); } .rw-pos { padding: 11px 9px 11px 0; font-family: var(--f-d); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--type-3); text-align: right; } /* Icons are almost absent in this language, and an avatar disc is an icon. */ .rw-av { display: none; } .rw-nm { padding: 11px 12px 11px 0; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rw-sc { padding: 11px 0; font-family: var(--f-d); font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; } .rw--top .rw-pos { color: var(--type); } .rw--me .rw-pos { background: var(--i1); color: var(--bg, #04101C); padding-right: 7px; } .rw--me .rw-nm { font-weight: 600; padding-left: 5px; } /* ── settings and papers ─────────────────────────────────────────────────── */ .toggles { margin-top: 22px; border-top: 1px solid var(--hair); } .toggle { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); } .toggle span { flex: 1; min-width: 0; } /* A patch that inks. Off is an empty hairline box; on is the box filled solid, laid down across it in the time everything else takes to fade. */ .sw { appearance: none; -webkit-appearance: none; flex: none; margin: 0; position: relative; width: 46px; height: 22px; background: var(--stock); border: 1px solid var(--hair); border-radius: 2px; transition: border-color var(--t); overflow: hidden; } .sw::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--i1); transition: width var(--t); } .sw:checked { border-color: var(--type); } .sw:checked::after { width: 100%; } .papers { margin-top: 14px; border-top: 1px solid var(--hair); } .papers li { padding: 12px 0; border-bottom: 1px solid var(--hair); } /* The fineprint's own rule closes the list, so it does not draw a second one 30px above it. */ .papers li:last-child { border-bottom: 0; } /* ── bottom tab row ────────────────────────────────────────────────────── A flex-column child of #app, so it pins to the bottom of the fixed viewport above the scrolling card. Each tab carries a patch of its own ink, which only prints when the tab is the one you are on: the row reads as the same colour bar every card opens with, one quarter at a time. */ .tabbar { flex: none; display: flex; background: var(--stock); border-top: 1px solid var(--type); padding-bottom: max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px)); } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 11px 4px 13px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--type-3); transition: color var(--t); } .tab::before { content: ""; width: 22px; height: 6px; background: var(--hair); transition: background var(--t); } .tab.is-on { color: var(--type); } .tab:nth-child(1).is-on::before { background: var(--i1); } .tab:nth-child(2).is-on::before { background: var(--i2); } .tab:nth-child(3).is-on::before { background: var(--i3); } .tab:nth-child(4).is-on::before { background: var(--i4); } /* ── overlays ────────────────────────────────────────────────────────────── */ .shade { position: fixed; inset: 0; z-index: 40; background: rgba(4, 16, 28, .62); } .folder { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; background: var(--stock); display: flex; flex-direction: column; padding-bottom: max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) - 40px); /* Deliberately NOT animated. A panel that slides up from below sits, for the length of the animation, with its own Close control under the fold, and if a client throttles animations it stays there. It just appears. */ } .folder .bar { margin: 0; } .folder-hd { flex: none; position: relative; padding: 16px var(--mg) 13px; border-bottom: 1px solid var(--type); } .folder-ti { font-family: var(--f-d); font-weight: 500; font-size: 24px; line-height: 1.14; margin-top: 4px; padding-right: 66px; } .folder-x { position: absolute; right: var(--mg); bottom: 15px; font-size: 13.5px; } .folder-bd { flex: 1; min-height: 0; overflow-y: auto; padding: 18px var(--mg) 4px; color: var(--type-2); } .folder-bd p { margin-bottom: 15px; padding-right: var(--short); } .folder-bd ul { margin-bottom: 15px; } .folder-bd li { position: relative; padding: 0 var(--short) 11px 22px; } /* A printed bullet: a small solid patch on the first line's baseline. */ .folder-bd li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; background: var(--i1); } .folder-bd b { font-weight: 600; color: var(--type); } .folder-ft { flex: none; padding: 13px var(--mg) 18px; border-top: 1px solid var(--hair); } .over { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 22px; pointer-events: none; } /* A specimen slip: stock, an ink border, the colour bar across its head, and no radius and no lift anywhere on it. */ .slip { pointer-events: auto; width: 100%; max-width: 330px; background: var(--stock); border: 1px solid var(--type); animation: fade var(--t) ease-out; } .slip-in { padding: 16px 20px 22px; } .slip-n { font-family: var(--f-d); font-size: 64px; font-weight: 400; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 8px; } .slip-u { font-family: var(--f-d); font-style: italic; font-size: 16.5px; color: var(--type-2); margin-top: 2px; } .slip-s { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--type-2); } .slip-h { font-family: var(--f-d); font-weight: 500; font-size: 25px; line-height: 1.14; margin-top: 6px; } .slip-alt { display: inline-block; margin-top: 17px; } /* The ad offer: a bordered notice that prints its reward and its free route before the tap, never a bright button. */ .slip-ad { display: block; width: 100%; margin-top: 17px; padding: 13px; border: 1px solid var(--hair); border-radius: 2px; transition: border-color var(--t); } .slip-ad:active { border-color: var(--type); } .slip-ad b { display: block; font-size: 14.5px; font-weight: 600; } .slip-ad i { display: block; font-family: var(--f-d); font-size: 13px; line-height: 1.4; color: var(--type-3); margin-top: 3px; } .slip-ad i:empty { display: none; } .count { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(4, 16, 28, .66); pointer-events: none; } .count span { font-family: var(--f-d); font-size: 140px; font-weight: 400; line-height: 1; color: var(--stock); font-variant-numeric: tabular-nums; animation: fade var(--t) ease-out; } .slug { position: fixed; z-index: 70; left: var(--mg); right: var(--mg); bottom: calc(94px + max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px))); background: var(--type); color: var(--stock); border-radius: 2px; padding: 12px 17px; font-size: 13.5px; text-align: center; } /* ── reduce motion: kill all of it ───────────────────────────────────────── */ [data-reduce-motion="1"] *, [data-reduce-motion="1"] *::before, [data-reduce-motion="1"] *::after { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Short phones: the display sizes give first, the measure never does. */ @media (max-height: 690px) { .folio--card { padding-top: calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) + 12px); } .lead { font-size: 26px; margin-top: 10px; } .rec { margin-top: 22px; } .rec-n { font-size: 50px; } .inkrow { padding: 8px 0; } .patch { height: 32px; } .read-n { font-size: 34px; } .slip-n { font-size: 54px; } .preflight-h { font-size: 22px; } }