/* =========================================================================== elfayad.me tokens. Nothing outside this file may declare a literal colour, font size, spacing, line-height or letter-spacing; tools/check_tokens.py fails the build if anything does. Register: one deep teal ground for the masthead and the disclosure record, ink on white paper for everything else, and the brights of Fayad's palette living in the generated flame rather than in the interface. =========================================================================== */ /* ---------- typefaces ---------- Inter carries everything read; Bricolage Grotesque carries every heading, in two static instances cut from the variable font at the same optical size: 700 for display and section heads, 600 for titles of 21px and under, so a list title never competes with the heading above it. Both self-hosted and subset. Hashes kept current by tools/stamp_fonts.py. */ @font-face{font-family:Inter;src:url(/assets/fonts/inter-sub.woff2?v=10865063) format('woff2'); font-weight:400 700;font-style:normal;font-display:swap} @font-face{font-family:Bricolage;src:url(/assets/fonts/bricolage-700-sub.woff2?v=297f2466) format('woff2'); font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:Bricolage;src:url(/assets/fonts/bricolage-600-sub.woff2?v=321239b3) format('woff2'); font-weight:600;font-style:normal;font-display:swap} /* Fallbacks shaped like the web fonts. Before a web font arrives the page is set in a local font scaled to the same average width (measured over the site's own prose) and the same line metrics, so a title wraps where it will wrap after the swap and nothing below it moves. One face per platform font: Arial and Georgia (Windows, macOS), Roboto and Noto Serif (Android). */ @font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT"); size-adjust:107.17%;ascent-override:90.39%;descent-override:22.51%;line-gap-override:0%} @font-face{font-family:"Inter Fallback R";src:local("Roboto"),local("Roboto-Regular"); size-adjust:107.19%;ascent-override:90.37%;descent-override:22.5%;line-gap-override:0%} @font-face{font-family:"Bricolage Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 700; size-adjust:101.83%;ascent-override:91.33%;descent-override:26.52%;line-gap-override:0%} @font-face{font-family:"Bricolage Fallback R";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:600 700; size-adjust:108.2%;ascent-override:85.95%;descent-override:24.95%;line-gap-override:0%} @font-face{font-family:"Source Serif Fallback";src:local("Georgia"); size-adjust:101.48%;ascent-override:102.08%;descent-override:33.01%;line-gap-override:0%} @font-face{font-family:"Source Serif Fallback R";src:local("Noto Serif"),local("NotoSerif-Regular"); size-adjust:93.62%;ascent-override:110.66%;descent-override:35.78%;line-gap-override:0%} :root{ /* ---------- 1. COLOUR ---------- Token names keep the old "navy" spelling so the history reads; the values are teal. The brights are too light to be text on white, so they are fills only. --ink and --muted are darkened in family so prose stays AAA. */ --navy: #0A5C53; /* deep teal: headings, primary button (7.9:1 on white) */ --navy-d: #073F39; /* darker teal: button hover, text on bright fills */ --accent: #04695F; /* links and small accent text (6.5:1 on white) */ --accent-soft:#CDF7F2; /* aqua wash: ghost-button hover */ --ink: #10302E; /* body and prose (14:1, AAA) */ --muted: #52666E; /* secondary text and meta (6.0:1) */ --sub: #3E5057; /* secondary paragraphs: warmer and darker than meta (8.2:1) */ --paper-2: #F2F7F5; /* the soft tint that alternates with white on the homepage */ --paper: #FFFFFF; /* page ground */ --soft: #DFEDEA; /* soft mint: footer, code, notes */ --line: #DCE8E5; /* hairline, in the teal family (the old #DFE2ED leaned blue) */ --line-3: #6F8784; /* form field edge (3.8:1 on white, above the 3:1 floor) */ --on-navy: #FFFFFF; /* text on deep ground */ --on-navy-2: #CDF7F2; /* emphasis on deep ground, next to white (14.5:1) */ --on-navy-3: #A6CEC8; /* ledes, meta and quiet links on deep ground: a step below, still AAA (9.8:1) */ --navy-line: rgba(255,255,255,.16); --navy-line-2:rgba(255,255,255,.32); --bright-1: #04C2B0; /* teal-cyan: bright button, active marks */ --bright-2: #55E6D9; /* turquoise: hover, focus on deep ground */ --plate: #0A0D12; /* dark ground behind video posters while they load */ --tap: rgba(4,194,176,.18); /* the flash a tap leaves on a phone */ --print-ink: #000000; /* print only */ /* the deep ground. The flame is rendered on it (make_flame.py --ground 4,34,31), so artwork and ground are one surface. The darkest teal in the family. */ --deep: #04221F; --deep-2: #072C28; /* one step up from the deep ground: the closing band and the open phone menu */ --deep-line: rgba(205,247,242,.18); /* hairline on deep ground */ --deep-fill: rgba(205,247,242,.05); /* row hover on deep ground */ --deep-line-2:rgba(205,247,242,.3); /* the edge of a pill on deep ground */ /* scrims: clean ground under the text, full-strength drawing elsewhere */ --scrim-left: linear-gradient(90deg,#04221F 0%,rgba(4,34,31,.9) 24%,rgba(4,34,31,.3) 50%,rgba(4,34,31,0) 68%); --scrim-foot: linear-gradient(0deg,#04221F 0%,rgba(4,34,31,.7) 14%,rgba(4,34,31,0) 34%); --scrim-top: linear-gradient(180deg,#04221F 0%,rgba(4,34,31,0) 14%); --scrim-m: linear-gradient(180deg,rgba(4,34,31,0) 0%,rgba(4,34,31,0) 48%,rgba(4,34,31,.6) 76%,#04221F 100%); /* the flame in an inner cover fades in from the left (desktop) or down from the top right (phones) */ --mask-fade: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 55%); --mask-fade-m: linear-gradient(205deg,#000 0%,rgba(0,0,0,.5) 30%,transparent 62%); --menu-shadow: 0 24px 48px rgba(0,0,0,.35); --mask-fade-r: linear-gradient(90deg,#000 90%,transparent 100%); /* code that runs on past the edge */ /* ---------- 2. TYPE ---------- */ --t-100: 13px; /* meta, table heads */ --t-150: 14px; /* code, notes on the plate, meta on a cover */ --t-200: 15px; /* interface */ --t-250: 16px; /* descriptive paragraphs on wide screens */ --t-300: 18px; /* prose, ledes */ --t-400: 21px; /* list titles, h3 */ --t-500: clamp(26px, 3vw, 31px); /* prose h2, feature title */ --t-600: clamp(30px, 4.4vw, 42px); /* section h2 */ --t-700: clamp(34px, 5.2vw, 56px); /* page h1 */ --t-800: clamp(40px, 6.1vw, 84px); /* the plate headline, sized so the flame core clears it */ --t-800m: 36px; /* phones: the plate headline breaks into three even lines at 360 to 430px */ --t-800t: clamp(52px, 7.6vw, 64px); /* tablets and zoomed windows: the plate headline between the two */ --t-wordmark-m: clamp(14px, 4.5vw, 15px); /* phones: the name in the bar gives a pixel at 320px so the bar stays one row */ --t-read: clamp(18px, 0.35vw + 16.4px, 20px); /* essay body, in the serif */ --t-h2read: clamp(24px, 1.6vw + 16px, 30px); /* essay section heads: quieter on phones */ --t-h3read: clamp(20px, 0.5vw + 17px, 22px); /* essay sub-heads: above the 20px body, never below it */ --t-feature: clamp(28px, 3.4vw, 34px); /* the featured essay's title in its half column */ --t-quote: clamp(88px, 10vw, 140px); /* the hung quotation mark of a pull quote */ /* ---------- 3. SPACING ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 22px; --s-6: 32px; --s-7: 46px; --s-8: 64px; --s-9: 88px; --s-10: 120px; --band: clamp(56px, 7vw, 80px); /* vertical rhythm between sections */ --gutter: clamp(20px, 4vw, 32px); /* page margin */ /* ---------- 4. LINE-HEIGHT ---------- */ --lh-display: .98; /* the plate headline */ --lh-tight: 1.05; /* page h1 */ --lh-head: 1.1; /* section heads of 30px and over: display type sets tight */ --lh-snug: 1.25; /* headings that wrap */ --lh-normal: 1.5; /* interface */ --lh-prose: 1.7; /* long-form */ --lh-read: 1.72; /* the serif essay body: a touch more air than the sans */ --lh-code: 1.6; /* code blocks */ /* ---------- 5. LETTER-SPACING ---------- */ --ls-display: -.035em; --ls-tight: -.03em; --ls-snug: -.02em; --ls-none: 0; /* ---------- structure ---------- */ --r-1: 10px; --r-pill: 999px; --shell: 1080px; --measure: 60ch; /* reading column (Inter's zero is narrow: 60ch sets about 62 to 70 characters) */ --measure-lede: 50ch; /* a cover's lede */ --measure-read: 62ch; /* the serif essay column (the serif sets wider) */ --bridge: clamp(40px, 8vw, 120px); /* how far an image reaches up into the cover */ --measure-head: 820px; /* article head: title and facts */ --fact-w: 150px; /* narrowest column in a facts strip */ --avatar: 320px; --portrait-m: 180px; /* phones: the portrait above the statement */ --mark: 26px; /* the flame mark beside the name */ --mark-s: 22px; /* phones */ --face: 200px; /* the portrait on the back cover */ --face-m: 104px; --mat-s: clamp(8px, 1.4vw, 14px); /* the thinner mat around a gallery screenshot */ --rail-w: 78%; /* phones: one gallery item and a peek of the next */ --end-mark: 15px; /* the mark that closes an essay */ --mat: clamp(12px, 2.4vw, 28px); /* the deep mat around a screenshot */ --r-2: 16px; /* mats */ --plate-h: min(88vh, 860px); --plate-short-h: min(62vh, 600px); --plate-lost-h: calc(100vh - var(--s-8)); --plate-art-w: 56%; --plate-art-m: 112vw; --plate-lift: 82vw; /* phones: the headline rises out of the drawing's foot */ --develop: 1.2s; /* the one motion: the plate develops, from a visible first frame */ --dur-1: .15s; /* colour and fill changes */ --dur-2: .25s; /* small movements: a chevron, an edge, the bar */ --dur-3: .35s; /* a picture lifting */ --anchor: calc(var(--s-8) + var(--s-6)); /* where a heading lands after a contents jump: 32px under the 64px bar */ --ring-off: var(--s-2); /* a focus ring's distance from a large block link */ --gap-bar-m: clamp(8px, 3.2vw, 12px); /* phones: the bar's gaps give way at 320px */ --pad-pill-m: clamp(10px, 4vw, 16px); /* phones: the Contact pill's side padding, likewise */ --plate-art-t: min(74vw, 78vh); /* tablets and zoomed windows: the drawing, bounded by the height too */ --plate-lift-t: min(46vw, 38vh); --tap-min: 44px; /* the smallest thing a thumb is asked to hit */ --btn-h: 48px; /* a primary form button */ --field-h: 200px; /* a message box that invites more than a line */ --thumb-w: 120px; /* an essay's picture beside its entry */ --thumb-w-s: 64px; /* the same, in the archive and on phones */ --adj-w: 280px; --phone-shot: 340px; /* a phone screenshot in an article: the size of a phone, not of the page */ /* the picture of the next project at a case study's end */ --toc-w: 264px; /* the contents rail beside an essay on wide screens */ --cover-art-w: 58%; /* phones: the flame's box before the fade */ /* desktop: the flame starts where the cover's text ends, so it never runs under it; each kind of cover declares how wide its text runs */ --cover-text: 560px; /* a title and a 56ch lede */ --cover-text-read: 660px; /* an essay: a 20ch title at the big size */ --cover-text-about: 640px; /* the About statement beside the portrait */ --cover-text-contact: 800px; /* the portrait, then the heading and lede */ --cover-art-o: .55; --cover-art-o-m: .3; /* phones: fainter, since the text runs across it */ --stick-top: 96px; /* where a sticky side block rests under the bar */ /* ---------- 6. BREAKPOINTS (media queries cannot read these; documented) ---------- */ --bp-s: 640px; --bp-m: 900px; --bp-l: 1200px; --sans: Inter, "Inter Fallback", "Inter Fallback R", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --display: Bricolage, "Bricolage Fallback", "Bricolage Fallback R", Inter, -apple-system, sans-serif; --serif: "Source Serif", "Source Serif Fallback", "Source Serif Fallback R", Georgia, "Times New Roman", serif; /* essays only (article.css) */ --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ease: cubic-bezier(.2,.7,.3,1); color-scheme: light; } /* phones: tighter rhythm and gutters so the page scrolls less and reads denser */ @media(max-width:640px){ :root{ --band: 44px; --s-9: 56px; --s-8: 44px; --s-7: 30px; --s-6: 24px; --gutter:20px; --avatar:200px; } }