/* ============================================================================ ЖАБА ДУШИТЬ — tokens. Single source of truth. Every colour is sampled out of alt-1/ref/ with a Node PNG decoder. See REFERENCES.md for the measurements and PLAN.md §1 for why each one is here. ========================================================================= */ /* ---- FACES ------------------------------------------------------------- Self-hosted, unsubsetted: the site opens from the filesystem with no CDN, and unsubsetted files sidestep the trap that a `cyrillic` subset ships without , . ’ « — (punctuation lives in `latin`). See PLAN.md §2. ---------------------------------------------------------------------- */ /* Lettering — balloons, SFX, buttons. INFM axis carries balloon-vs-caption. */ @font-face { font-family: 'Shantell Sans'; src: url('assets/fonts/ShantellSans.ttf') format('truetype'); font-weight: 300 800; font-display: swap; } /* Display — masthead, headlines. NoDerivatives: shipped byte-for-byte. */ @font-face { font-family: 'KyivType Serif'; src: url('assets/fonts/KyivTypeSerif-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; } @font-face { font-family: 'KyivType Sans'; src: url('assets/fonts/KyivTypeSans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* Body — the 1,500 words. */ @font-face { font-family: 'Alegreya'; src: url('assets/fonts/Alegreya.ttf') format('truetype'); font-weight: 400 900; font-display: swap; } /* Utility — nav, meta, indicia. */ @font-face { font-family: 'Fixel'; src: url('assets/fonts/FixelVariable.ttf') format('truetype'); font-weight: 100 900; font-stretch: 87.5% 100%; font-display: swap; } :root { --face-letter: 'Shantell Sans', 'Comic Sans MS', cursive; --face-display: 'KyivType Serif', 'Alegreya', Georgia, serif; --face-display-alt: 'KyivType Sans', 'Fixel', sans-serif; --face-body: 'Alegreya', Georgia, 'Times New Roman', serif; --face-util: 'Fixel', 'Segoe UI', sans-serif; /* ---- THE PAGE — what the site is printed on ------------------------ 4 values. The paper is #FFF and its colour is the AVERAGE OF THE DOT SCREEN, not a fill — there is no hex anywhere producing the ~#F5F6F8 you actually see. That is the anti-cream position. PLAN.md §1. */ --paper: #FFFFFF; --ink: #0B0907; /* measured #050504 — 18% of first-post.png */ --amber: #FA8506; /* his eye. FILL ONLY: 2.49:1 on paper. */ --sky-ink: #305889; /* links. The sky's own shadow. 7.28:1 AAA. */ /* ink at reduced strength — for rules, meta, disabled */ --ink-70: #4A4644; --ink-40: #8C8987; --ink-15: #DEDCDB; --ink-07: #EFEEED; /* ---- THE PANEL — the drawn world. 3-step cel ramps, because the rendering is hard cel shading and a single "brand colour" per material would be a lie about how these images are drawn. */ --sky-sh: #305889; --sky: #357AC2; --sky-hi: #619ED9; --bronze-sh: #5E3004; --bronze: #83490A; --bronze-hi: #B1600F; --olive-sh: #443E01; --olive: #5E5403; --olive-hi: #C7B32F; --violet-sh: #1F0D2F; --violet: #452966; --violet-hi: #6E49A6; /* The mark's own lettering gold, sampled off gambletoad-logo.png (top-lit #F0B030 band → #D07010 body → #B05010 shade buckets). FILL ONLY, like amber: mid-gold on paper is ~2.5:1, so wherever it fills type the ink contour carries the reading, never the gold. */ --gold-sh: #A05C10; --gold: #E9A21C; --gold-hi: #F7CD4F; --flesh: #E1AB81; --cloud: #CAD4E7; /* the "white" of first-post.png is NOT #FFFFFF */ --road: #272628; /* NO GREEN. He is hue 10–60°; the widest green test returns 0.01% of empty2.png. Green is Pepe's colour, not his. REFERENCES.md. */ /* ---- THE PLATES — cheap four-colour printing ---------------------- MEASURED, not assumed: an evenly-weighted CMY rosette on white renders #F8F6F4 — hue 30°, R−B +4. That is WARM. That is cream. Yellow ink absorbs blue, so a balanced screen always trends warm; real newsprint does exactly this, and it is the one trap this brief walks closest to. So the press is deliberately ink-starved on yellow and over-inked on cyan — which is not a cheat but a press fault, from the same family as the misregistration this whole design is built on. Cheap presses have bad ink balance. And it matches the anchor: first-post.png's clouds measure #CAD4E7 — the reference's own white is cool (B−R = +29). Verified rendered output: #F5F7FA. Radii live in each page's . */ --plate-c: #00AEEF; /* r 1.05 — over-inked */ --plate-m: #EC008C; /* r 0.78 */ --plate-y: #FFF200; /* r 0.50 — starved. This is what kills the cream. */ --screen-pitch: 5px; --screen-alpha: 0.26; --misreg: 0px; /* driven on scroll. Masthead only. Used once. */ /* ---- INK GRAMMAR ------------------------------------------------- */ --ink-w: 3px; /* the contour. Not a 1px border. */ --ink-w-heavy: 4.5px; --drop: 6px; /* hard offset shadow. Solid, no blur. */ --drop-lg: 9px; --radius: 3px; --radius-panel: 5px; /* A balloon is not a rounded rectangle. Uneven corners + big radii read as drawn; 26px read as a box with soft corners, which is what it was. */ --radius-balloon: 48px 56px 44px 52px / 44px 40px 50px 46px; /* ---- SPACE ------------------------------------------------------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --gutter: clamp(12px, 1.6vw, 22px); /* between panels — bare paper */ --host-col: clamp(0px, 7vw, 104px); /* his margin at the page edge. NOT a gutter down the middle: the plan killed the double-page spread because a frog on the centrefold walls off the two things that must be seen together, and that argument applies wherever he stands between them. The margin is paper too. */ --page-pad: clamp(14px, 3vw, 40px); --measure: 62ch; /* the reading column */ --page-max: 1280px; /* Distance from the SCREEN edge to the content box. The page is a centred 1280px column, so anything positioned against the column drifts further from the screen edge the wider the monitor gets — the frog would hang in the middle of the margin instead of being cropped by the page. He is anchored to the screen with this, not to the column. */ --bleed: calc(max(0px, (100vw - var(--page-max)) / 2) + var(--page-pad)); /* ---- TYPE SCALE -------------------------------------------------- */ --t-masthead: clamp(2.4rem, 6.4vw, 5.4rem); --t-splash: clamp(1.8rem, 3.6vw, 3.1rem); --t-h1: clamp(2rem, 4.8vw, 3.6rem); --t-h2: clamp(1.4rem, 2.4vw, 2rem); --t-h3: clamp(1.1rem, 1.6vw, 1.35rem); --t-body: 1.1875rem; /* 19px */ --t-small: 0.875rem; --t-micro: 0.75rem; --lh-body: 1.66; --lh-tight: 1.06; /* Shantell's axes. Set, never animated — BNCE moves baselines and SPAC changes advance widths, i.e. it would reflow text while you read it. */ --infm-say: 68; /* balloon — what he SAYS is performed */ --infm-know: 6; /* caption — what he KNOWS is not */ --bnce-say: 22; --bnce-know: 0; /* ---- MOTION ------------------------------------------------------ */ --boil-dur: 0.375s; /* 3 frames at ~8fps — the hand-drawn wobble */ --ease: cubic-bezier(0.22, 0.68, 0.36, 1); --tap: 44px; /* hit target, however ragged the outline */ } /* The den is the one legitimately dark surface on the site, and the only place violet appears. Ink inverts: paper-white on violet is 11.92:1, ink on violet is 1.68:1 — so it takes light type and only light type. */ .is-den { --paper: #1F0D2F; --ink: #F2ECE4; --ink-70: #B3A6BC; --ink-40: #7C6B8C; --ink-15: #3B2650; --ink-07: #2A1A3C; --sky-ink: #C7B32F; --screen-alpha: 0.10; } /* Dark mode is a stub. The comedy is bright, the frog is the darkest object in the set, and the sibling concept already owns dark. */ @media (prefers-color-scheme: dark) { :root { color-scheme: light; } }