/* ========== THEME PARAMETERS — THE FACES IN DEVELOPMENT =========== Ameek: this is YOUR playground. The résumé and exploratory faces read from here (preview: SITE_MODE=resume npm start); the PUBLIC page does NOT — it has its own frozen copy, src/css/live/theme.css — so nothing you change here can reach ameeksingh.com. Edit a value, save — the preview reloads by itself. Keep units on every number ("0px", not "0"). Sections: 1 LAYOUT 2 COLOURS 3 TEXTURE 4 TYPE 5 MARGIN CARDS 6 MOBILE ================================================================ */ :root { /* ===================== 1. LAYOUT ========================== */ /* Three bands: left ribbon | main panel | right rail. As the window narrows: the ribbon gives way first (down to --ribbon-min), then the panel (down to --panel-min), then margin cards open below their link and the rail yields; phones show the panel alone. */ --panel-width: 52rem; /* the main panel, rule to rule, on wide windows. Text measure = this minus --column-inset minus the 2.5rem rail gap. */ --panel-min: 40rem; /* how narrow the panel may get before the rail starts giving way instead */ --leftbar-width: 12rem; /* the left ribbon on wide windows; also the panel's fixed left offset */ --ribbon-min: 2rem; /* the ribbon's floor (the résumé face raises it to hold its sidebar card) */ --column-inset: 2.75rem; /* space between the panel's left rule and the text/photo (phones: 1.25rem) */ --key-width: 9rem; /* the rows' key column (date + stamp); the text column is what remains. 9rem holds "October 2026" and a two-line stamp with room to spare */ --key-gap: 1rem; /* gap between the key and text columns */ --row-between: 0.8rem; /* every other row (grants, talks, teaching, projects, writing): above and below each, so twice this between rows */ --paper-within: 0.2rem; /* paper rows (research): space between the title and its chips */ --paper-between: 1rem; /* …and above/below each paper (the gap between papers is twice this) */ --portrait-width: 9.5rem; /* the photo beside the name — fixed at every window size; height follows */ --top-rule: 0px; /* ink rule across the top of the window: 0px = none; 4px = the field-notes look */ --page-min: 40rem; /* on a DESKTOP browser the page never gets narrower than this — and never narrower than --ribbon-min + --panel-min, so the panel reaches its minimum exactly as the layout freezes and a horizontal scrollbar appears. Raise it above that sum to freeze earlier (keeping some rail). Phones and tablets ignore it and stay fluid. */ --card-margin: 1.5rem; /* the least space a margin card keeps from the top and bottom of the page; a card that would overshoot is shifted up/down */ --ribbon-height: 6rem; /* the scroll ribbon (live face): its full height, rule to rule; photo and name sit centred in it */ --ribbon-photo: 3.2rem; /* the tiny photo's height in the ribbon */ /* The SWITCH POINTS (cards open below their link; the résumé sidebar appears; the desktop sideways scroll) are computed from these knobs at every build — nothing to keep in sync. */ /* ===================== 2. COLOURS ========================= */ /* The standard (16 Jul 2026, "ink structure, green links"): three chromatic jobs only — the link green, the neon marker, the paper and rail tints. Everything else is ink and grey. Text colours are solid 6-digit hex (an 8th-digit pair is transparency) and keep ≥ 4.5:1 contrast on --bg (webaim.org/resources/contrastchecker). */ --bg: #f0f0f0; /* the paper */ --ink: #111111; /* body text */ --muted: #6b6b66; /* secondary text: dates, coauthors, meta */ --hairline: #b4b4b4; /* thin rules, borders, boxes (set it equal to --bg to make rules invisible) */ --accent: #111111; /* structure is ink: headings, the top rule when on, blockquote bars */ --site-name: #111111; /* the "AMEEK SINGH" wordmark */ --link: #bceb04; /* the green ACCENT: the left rule of tags, stamps, the "now" line and the chat's question lists. (Until 24 Oct 2026 also the links' underline; links now carry none — see "LINKS" in base.css.) */ --link-hover: #14602f; /* the underline on hover */ --underline-offset: 4px; /* how far below the text the link and "abstract" underlines sit */ --chip-underline: 1.25px; /* the underline under the chips (pdf ›, abstract ›): thinner than the links' */ --underline-thickness: 2.25px; /* the underlines' weight. 1.5px reads paler than the stamps' 3px rule in the same green; 2px matches it to the eye */ --highlight: #d9fb4a; /* the neon marker: selection, , nav and chip hover, an open "abstract ›" — BACKGROUNDS ONLY, never text d9fb4a */ --mark-x: 0.4em; /* THE MARKER'S ROOM: how far a highlight (the faint one on hover, the full one while open) reaches past a link's words, sideways… */ --mark-top: 0.08em; /* …above the words, and… */ --mark-bottom: 0.22em; /* …below them: more below than above, so the letters sit in the middle of the block (a mono font's own box leaves more room above the letters than below; Ameek, 26 Oct 2026). Links and chips in a line of text; the ribbon's tabs and the chat's settings, already a line tall, take only --mark-drop more at the bottom. Nothing moves: negative margins take it back. */ --mark-drop: 0.06em; --highlight-faint: color-mix(in srgb, var(--highlight) 40%, transparent); --highlight-flash: color-mix(in srgb, var(--highlight) 65%, transparent); /* a title reached by a link flashes this deep (face.css): between the hover's faint marker and the full one (27 Oct 2026, Ameek) */ /* the faint marker, where the full one means "open": hover on the ribbon's tabs and the chat's settings, and the FLASH on a title reached by a link (/#job-market-paper) */ /* ===================== 3. TEXTURE ========================= */ /* The left ribbon and right rail: a tint with an optional pattern. */ --rail-bg: #e3e3e3; /* the tint */ --rail-dot: #e3e3e3; /* the pattern's ink (equal to the tint = no visible pattern; the old green dots were #6fff6da6) */ --rail-dot-size: 1.3px; /* dot radius (dots preset only) */ --rail-spacing: 15px 15px; /* pattern repeat distance */ /* --rail-pattern: the recipe. Presets to paste in: dots: radial-gradient(var(--rail-dot) var(--rail-dot-size), transparent calc(var(--rail-dot-size) + 0.2px)) graph grid: linear-gradient(var(--rail-dot) 1px, transparent 1px), linear-gradient(90deg, var(--rail-dot) 1px, transparent 1px) (with --rail-spacing: 18px 18px) diagonal hatch: repeating-linear-gradient(45deg, var(--rail-dot) 0 1px, transparent 1px 10px) (with --rail-spacing: auto) plain tint: none */ --rail-pattern: radial-gradient(var(--rail-dot) var(--rail-dot-size), transparent calc(var(--rail-dot-size) + 0.2px)); /* ===================== 4. TYPE ============================ */ /* Body prose. The first name installed wins; the rest are fallbacks. "Newsreader" is self-hosted with the site. */ --font-body: Cambria, "Newsreader", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; --body-size: 1.1rem; /* body prose (the bio, essays): 1.1rem = 17.6px, 1.125rem = 18px, 1.1875rem = 19px. Titles, rows and chips have fixed sizes of their own */ --stamp-size: 0.75rem; /* the stamps ("Job market paper") and the chips (pdf ›, abstract ›): 0.75rem = 12px */ --date-size: 0.75rem; /* the dates in the key column, and the date under a paper's stamp: 0.7rem = 11.2px */ /* The "ledger voice": dates, coauthors, stages, nav, "abstract ›". Sizes are fixed in the stylesheets (0.8rem meta, 0.7rem micro). */ --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* The arrow after "abstract": › beside the text on wide windows, ⌄ when the card opens below. Sizes are relative to the word ("1em" = the same size as "abstract"); lifts move the glyph up — the glyph only, never the line it sits on. */ --arrow-size: 1.25em; /* try 1.25em, 1.35em … one step at a time */ --arrow-lift: 0em; /* vertical nudge for the › (positive = up) */ --arrow-down-lift: 0.25em; /* vertical nudge for the ⌄, which sits low */ --arrow-gap: 0.25em; /* visible space between "abstract" and the arrow: 0em = touching, 0.3em = roughly a normal space */ /* ===================== 5. MARGIN CARDS ==================== */ /* The click-to-open cards in the right rail (abstracts, notes). */ --marginbox-width: 20rem; /* MAXIMUM card width (cards grow with the window from 11rem up to this); also sets the rail room reserved for them */ --marginbox-gap: 0.9rem; /* distance from the panel's rule to the card's left edge */ --marginbox-radius: 7px; /* corner softness (0px = sharp) */ /* READER cards — the abstract card and the PDF/page frame — share one width: they fill the rail between a floor and a ceiling. The rail keeps room for the floor, so the ribbon, then the panel, give way before a card does; narrower still and cards open below their link. */ --reader-min: auto; /* the floor. auto = the width a card has when it opens BELOW its link (the rows' text column at the panel's minimum, ≈23rem today), so the card is never narrower in the rail than it would be below — the width is continuous across the switch. Or a width, e.g. 30rem */ --reader-max: 35rem; /* the ceiling, reached only on wide windows */ --frame-ratio: 1.3; /* a frame's height as a multiple of its width (1.41 = A4); the window's height caps it */ --frame-top: 2rem; /* …the frame's distance from the window's top */ --frame-bottom: 1.5rem; /* …the least space kept below it */ --frame-height-down: 60vh; /* the frame's height when it opens BELOW its link */ --reader-handle: var(--hairline); /* the width grip (three short lines) on a card's right edge — rail only; green on hover and while dragged */ --frame-inset: 0.75rem; /* the frame's margin around the PDF viewer — at least 0.7rem, so the width grip (9px in from the edge) clears the viewer */ --cards-below: auto; /* window width below which cards open below their link: auto = --ribbon-min + --panel-min + card room, or set a width, e.g. 60rem */ --marginbox-font: var(--font-body); /* small-card text: the abstract cards' serif (23 Oct 2026; was mono) */ --marginbox-size: 0.9rem; /* small-card text size = --reader-size */ --reader-size: 0.9rem; /* abstract/reader card text: 0.9rem = 14.4px, 0.875rem = 14px, 1rem = 16px */ /* ===================== 6. MOBILE ========================== */ /* Phones have their own stylesheet, src/css/mobile.css, whose first line is the ONE definition of "a phone" (a touch screen ≤ 40rem wide). Everything phone-specific lives there; these knobs feed it. */ --mobile-key-width: 7rem; /* the rows' key column on phones (--key-width, 10.5rem, elsewhere) */ --mobile-key-gap: 0.75rem; /* gap between key and text columns */ --mobile-portrait-width: 7.5rem; /* the hero photo on phones */ }