/* ══════════════════════════════════════════════════════════════ * TRIRL PAPER SITE — MASTER STYLESHEET * ══════════════════════════════════════════════════════════════ * * ┌─────────────────────────────────────────────────────────┐ * │ SECTION 1 · CONFIG — edit only this section │ * │ to restyle the entire site. │ * └─────────────────────────────────────────────────────────┘ * * All colours, fonts, sizes, and radii live here as CSS * custom properties. Everything below this block references * them exclusively — change a value once, it applies site-wide. * ══════════════════════════════════════════════════════════════ */ :root { /* ── FONTS ──────────────────────────────────────────────────── * --font-heading : paper/post title only (the large h1). * --font-body : all other text. * To change: 1) update the Google Fonts in each HTML * file (look for the "FONT" comment in ). * 2) update the family name(s) below. */ --font-heading : 'Source Serif 4', Georgia, serif; --font-body : 'Inter', system-ui, sans-serif; --font-mono : 'DM Mono', 'Fira Code', 'Courier New', monospace; /* ── TYPE SCALE ──────────────────────────────────────────── */ --text-author_afils : 16px; /* authors and affiliations */ --text-xs : 11px; /* tiny labels, badges */ --text-sm : 14px; /* captions, metadata, footer */ --text-base : 16px; /* body copy */ --text-lg : 17px; /* TL;DR, lead paragraph */ --text-h1 : 32px; /* paper title */ --text-h2 : 22px; /* section labels (uppercase) */ --text-stat : 22px; /* stat strip numbers */ --lh-base : 1.72; /* body line-height */ --lh-tight : 1.22; /* headings */ /* ── LAYOUT ──────────────────────────────────────────────── */ --page-w : 1040px; /* max content width — all pages */ --page-pad : 44px; /* horizontal padding (desktop) */ --page-pad-sm : 20px; /* horizontal padding (mobile) */ --page-pad-top : 44px; /* vertical padding — top */ --page-pad-bottom: 88px; /* vertical padding — bottom */ /* ── RADII ───────────────────────────────────────────────── */ --r-sm : 4px; --r-md : 6px; --r-lg : 9px; /* ══════════════════════════════════════════════════════════ * COLOR PRESETS * Uncomment exactly ONE preset block. Comment the others. * Each block defines the full light AND dark palette — accent, * surfaces, border, and dot — so one comment/uncomment switches * both modes. Save and reload to apply. * ══════════════════════════════════════════════════════════ */ /* ── PRESET 1 · Powder Blue (default) ───────────────────── */ /* --c-accent : #5b8fc9; --c-accent-dark : #7aaee0; --c-surf : #f7f7f8; --c-surf-dark : #101320; --c-surf2 : #f1f4f9; --c-surf2-dark : #141828; --c-border-dk : #1d2433; --c-dot-dk : #273040; --c-title-accent: #5b8fc9; --c-title-accent-dark: #7aaee0; */ /* ── PRESET 2 · Slate (uncomment to try) ────────────────── */ /* --c-accent : #5f7592; --c-accent-dark : #8aaac4; --c-surf : #f7f8f8; --c-surf-dark : #101214; --c-surf2 : #f1f3f6; --c-surf2-dark : #14171c; --c-border-dk : #1c2028; --c-dot-dk : #262c36; --c-title-accent: #5f7592; --c-title-accent-dark: #8aaac4; */ /* ── PRESET 3 · Sage Green (uncomment to try) ───────────── */ /* --c-accent : #4e7d68; --c-accent-dark : #72a891; --c-surf : #f7f8f7; --c-surf-dark : #0e1410; --c-surf2 : #f1f5f3; --c-surf2-dark : #121814; --c-border-dk : #1a2620; --c-dot-dk : #24342c; --c-title-accent: #4e7d68; --c-title-accent-dark: #72a891; */ /* ── PRESET 4 · Warm Sienna (uncomment to try) ──────────── */ /* --c-accent : #b06b40; --c-accent-dark : #d4925e; --c-surf : #f8f7f6; --c-surf-dark : #140f0c; --c-surf2 : #f5f0eb; --c-surf2-dark : #19130f; --c-border-dk : #261e18; --c-dot-dk : #332620; --c-title-accent: #b06b40; --c-title-accent-dark: #d4925e; */ /* ── PRESET 5 · Charcoal (monochrome) ───────────────────── */ /* --c-accent : #4a5568; --c-accent-dark : #7890a8; --c-surf : #f7f7f7; --c-surf-dark : #111214; --c-surf2 : #efefef; --c-surf2-dark : #161819; --c-border-dk : #1e2024; --c-dot-dk : #282c32; --c-title-accent: #4a5568; --c-title-accent-dark: #7890a8; */ /* ── PRESET 6 · Mauve Fig ─────────────────────────────────── */ /* --c-accent : #7a5264; --c-accent-dark : #d19ab0; --c-surf : #f8f7f8; --c-surf-dark : #111014; --c-surf2 : #f2eff2; --c-surf2-dark : #17141b; --c-border-dk : #27222c; --c-dot-dk : #342d38; --c-title-accent: #7a5264; --c-title-accent-dark: #d19ab0; */ /* ── PRESET 7 · Clean Slate (active) ────────────────────────── */ --c-accent : #3a6ea5; --c-accent-dark : #6fa3d0; --c-surf : #f7f9fc; --c-surf-dark : #0e1318; --c-surf2 : #edf2f8; --c-surf2-dark : #131c26; --c-border-dk : #1c2a38; --c-dot-dk : #263850; --c-title-accent: #3a6ea5; --c-title-accent-dark: #6fa3d0; /* ── BASE PALETTE (shared by all presets) ─────────────────── */ --c-bg : #ffffff; /* page background */ --c-text : #111111; /* body text — near black */ --c-head : #050505; /* headings & bold elements — black */ --c-muted : #444444; /* secondary text — dark gray */ --c-subtle : #777777; /* tertiary text — medium gray */ --c-border : #e0e4ea; /* borders */ --c-dot : #d0d8e4; /* dot-grid dots in hero placeholder */ } /* ── DARK MODE ──────────────────────────────────────────────── Only colour tokens override. Layout and type are inherited. All per-preset colours (accent, surfaces, border, dot) resolve from the active preset block — switch preset, both modes update. */ html.dark { --c-bg : #0b0f16; --c-surf : var(--c-surf-dark); /* from active preset */ --c-surf2 : var(--c-surf2-dark); /* from active preset */ --c-accent : var(--c-accent-dark); /* from active preset */ --c-text : #e8edf4; --c-head : #f5f7fa; --c-muted : #a0adb8; --c-subtle : #5a6a7a; --c-border : var(--c-border-dk); /* from active preset */ --c-dot : var(--c-dot-dk); /* from active preset */ --c-title-accent: var(--c-title-accent-dark); } /* ══════════════════════════════════════════════════════════════ * SECTION 2 · RESET & BASE * ══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family : var(--font-body); font-size : var(--text-base); line-height : var(--lh-base); color : var(--c-text); background : var(--c-bg); -webkit-font-smoothing: antialiased; transition : background .3s ease, color .3s ease; } img, svg { display: block; max-width: 100%; } a { color : var(--c-accent); text-decoration : none; border-bottom : 1px solid var(--c-border); transition : border-color .15s; } a:hover { border-bottom-color: var(--c-accent); } /* ══════════════════════════════════════════════════════════════ * SECTION 3 · PAGE LAYOUT * ══════════════════════════════════════════════════════════════ */ .page { max-width : var(--page-w); margin : 0 auto; padding : var(--page-pad-top) var(--page-pad) var(--page-pad-bottom); } /* blog posts use the same width as the main page (--page-w) */ /* ══════════════════════════════════════════════════════════════ * SECTION 4 · NAVIGATION BAR * ══════════════════════════════════════════════════════════════ */ .site-nav { display : flex; justify-content : space-between; align-items : center; margin-bottom : 36px; } .nav-back { font-size : var(--text-sm); color : var(--c-muted); text-decoration: none; border : none; transition : color .2s; } .nav-back:hover { color: var(--c-accent); border: none; } .theme-btn { background : none; border : none; cursor : pointer; font-size : 15px; color : var(--c-subtle); padding : 2px; transition : color .2s; line-height: 1; } .theme-btn:hover { color: var(--c-head); } /* ── Sticky section nav (built by JS from h2.section-label) ── */ .sticky-nav { position : fixed; top : 16px; right : 20px; display : flex; align-items : center; gap : 2px; z-index : 1000; background : rgba(255, 255, 255, 0.90); backdrop-filter : blur(10px); -webkit-backdrop-filter: blur(10px); border : 1px solid var(--c-border); border-radius : 100px; padding : 6px 10px; box-shadow : 0 1px 10px rgba(0, 0, 0, 0.07); } html.dark .sticky-nav { background : rgba(11, 15, 22, 0.92); } .sticky-nav__link { font-size : 13px; font-weight : 600; color : var(--c-muted); padding : 6px 12px; border-radius : 100px; text-decoration: none; border : none; white-space : nowrap; line-height : 1; transition : color .15s, background .15s; } .sticky-nav__link:hover { color : var(--c-head); background : var(--c-surf); border-bottom : none; } .sticky-nav__sep { width : 1px; height : 16px; background : var(--c-border); flex-shrink: 0; margin : 0 4px; } .sticky-nav .theme-btn { font-size : 18px; padding : 6px 10px; color : var(--c-muted); } .sticky-nav .theme-btn:hover { color: var(--c-head); } /* ══════════════════════════════════════════════════════════════ * SECTION 5 · PAGE HEADER ELEMENTS * (venue tag, title, authors, affiliations) * ══════════════════════════════════════════════════════════════ */ /* ── Venue / badge tag ── */ .venue-tag { display : inline-flex; align-items : center; gap : 10px; color : #18181b; background : #ffffff; border : 1px solid #e0e3e8; border-radius : var(--r-md); padding : 8px 14px 8px 11px; margin-bottom : 20px; line-height : 1; box-shadow : 0 1px 2px rgba(15, 23, 42, .04); } .venue-tag__logo { height : 31px; width : auto; display : block; flex-shrink : 0; } .venue-tag__meta { font-size : 17px; font-weight : 900; letter-spacing : .10em; color : #18181b; line-height : 1; } /* ── Paper / post title ── */ .site-title { font-family : var(--font-heading); font-size : var(--text-h1); font-weight : 700; letter-spacing: -.01em; line-height : var(--lh-tight); color : var(--c-head); margin-bottom: 16px; } /* Fragment inside the title — colour removed, inherits black */ /* .title-accent { color: inherit; } */ .title-accent { color: var(--c-title-accent); } /* ── Authors ── */ .authors { font-size : var(--text-author_afils); color : var(--c-muted); margin-bottom: 4px; } .authors a { color : inherit; border-bottom : none; } .authors a:hover { color : var(--c-accent); border-bottom : none; } /* ── Affiliations ── */ .affils { font-size : var(--text-sm); color : var(--c-subtle); margin-bottom: 22px; line-height : 1.55; } /* ══════════════════════════════════════════════════════════════ * SECTION 5.1 · AFFILIATIONS * ══════════════════════════════════════════════════════════════ */ /* ── Affiliation logo strip ── */ .affil-logos { display : flex; flex-wrap : wrap; align-items : center; gap : 14px 20px; margin : 4px 0 20px; } .affil-logo-pair { display : inline-flex; align-items : center; justify-content : center; flex-shrink : 0; } .affil-logo { display : block; width : var(--logo-w); height : auto; object-fit : contain; } .affil-logo--dark { display : none; } html.dark .affil-logo--light { display : none; } html.dark .affil-logo--dark { display : block; } /* ══════════════════════════════════════════════════════════════ * SECTION 6 · BUTTONS * Visual variants: .btn (outlined) and .btn--primary (filled). * ══════════════════════════════════════════════════════════════ */ .btns { display : flex; flex-wrap : wrap; gap : 8px; margin-bottom: 32px; } .btn { display : inline-flex; align-items : center; gap : 6px; font-family : var(--font-body); font-size : var(--text-sm); font-weight : 600; padding : 7px 15px; border-radius : var(--r-sm); border : 1.5px solid var(--c-border); background : var(--c-surf); color : var(--c-text); text-decoration: none; cursor : pointer; transition : border-color .15s, color .15s, background .15s, box-shadow .15s; } .btn:hover { border-color : var(--c-accent); color : var(--c-accent); box-shadow : 0 0 0 3px color-mix(in srgb, var(--c-accent) 12%, transparent); border-bottom: 1.5px solid var(--c-accent); } /* Filled / primary variant */ .btn--primary { background : var(--c-accent); border-color : var(--c-accent); color : #fff; } .btn--primary:hover { background : color-mix(in srgb, var(--c-accent) 80%, #000); border-color : color-mix(in srgb, var(--c-accent) 80%, #000); color : #fff; box-shadow : 0 0 0 3px color-mix(in srgb, var(--c-accent) 20%, transparent); } /* ══════════════════════════════════════════════════════════════ * SECTION 7 · FIGURE + ALGORITHM ROW * Side-by-side layout for a figure and an algorithm block. * Collapses to a single column on mobile (≤ 720px). * ══════════════════════════════════════════════════════════════ */ .fig-alg-row { display : flex; align-items : stretch; gap : 32px; margin : 26px 0; } .fig-alg-row__fig { flex : 1 1 0; min-width : 0; display : flex; flex-direction : column; } .fig-alg-row .fig-img-switch { margin-top : auto; margin-bottom : 8px; width : 100%; } .fig-alg-row .fig-img-switch .fig-img { width : 100%; max-width : none; } .fig-alg-row .latex-algorithm { flex : 1 1 0; min-width : 0; max-width : none; margin : 0; } @media (max-width: 720px) { .fig-alg-row { flex-direction : column; } .fig-alg-row .latex-algorithm { margin-top : 20px; } } /* ══════════════════════════════════════════════════════════════ * SECTION 8 · TL;DR BLOCK * Left-accented paragraph at the top of the page. * Change --c-accent to restyle the left bar colour. * ══════════════════════════════════════════════════════════════ */ .tldr { font-size : var(--text-lg); font-weight : 500; line-height : 1.65; color : var(--c-head); margin : 26px 0 30px; } .tldr strong { color: var(--c-accent); font-weight: 700; } /* ══════════════════════════════════════════════════════════════ * SECTION 9 · STAT STRIP * 4-column grid of key numbers. Cells share a 1-px border gap. * Add/remove
blocks inside .stats to resize. * ══════════════════════════════════════════════════════════════ */ .stats { display : grid; grid-template-columns: repeat(4, 1fr); border : 1px solid var(--c-border); border-radius : var(--r-lg); overflow : hidden; margin-bottom : 8px; background : var(--c-border); /* gap colour */ gap : 1px; } .stat { background : var(--c-surf); padding : 16px 15px 14px; } .stat__val { font-size : var(--text-stat); font-weight : 700; letter-spacing : -.02em; color : var(--c-head); line-height : 1; margin-bottom : 5px; } .stat__name { font-size : var(--text-sm); font-weight : 600; color : var(--c-head); margin-bottom : 3px; } .stat__desc { font-size : 12px; color : var(--c-muted); line-height : 1.45; } /* ══════════════════════════════════════════════════════════════ * SECTION 10 · SECTION HEADINGS * h2: small uppercase label with a coloured left-bar. * h3: smaller sub-label, no bar. * ══════════════════════════════════════════════════════════════ */ h2.section-label { font-size : var(--text-h2); font-weight : 800; text-transform : uppercase; letter-spacing : .04em; color : var(--c-head); margin : 52px 0 20px; padding-bottom : 12px; border-bottom : 1px solid var(--c-border); } h3.sub-label { font-size : 12px; font-weight : 600; text-transform : uppercase; letter-spacing : .07em; color : var(--c-subtle); margin : 30px 0 12px; } /* ══════════════════════════════════════════════════════════════ * SECTION 11 · PROSE CONTENT * Body paragraphs, inline links. * ══════════════════════════════════════════════════════════════ */ .prose p { margin-bottom : 14px; color : var(--c-text); text-align : justify; hyphens : auto; } .prose p:last-child { margin-bottom: 0; } /* Standalone paragraphs outside .prose */ p { margin-bottom : 14px; text-align : justify; hyphens : auto; } p:last-child { margin-bottom: 0; } /* ══════════════════════════════════════════════════════════════ * SECTION 12 · EQUATION BLOCK * Centred, surfaced container for display-math equations. * Wrap your $$ ... $$ in
. * ══════════════════════════════════════════════════════════════ */ .eq-block { /* background : var(--c-surf); */ /* border : 1px solid var(--c-border); border-radius : var(--r-md); */ padding : 18px 22px; margin : 18px 0; text-align : center; overflow-x : auto; } /* ══════════════════════════════════════════════════════════════ * SECTION 13 · THEOREM / HIGHLIGHT BLOCK * Two variants: * .thm-block — tinted background, for theorems/lemmas * .hl-block — left-bar accent, for callouts / key points * ══════════════════════════════════════════════════════════════ */ /* Theorem block — neutral gray, no accent tint */ .thm-block { background : var(--c-surf); border : 1px solid var(--c-border); border-radius : var(--r-md); padding : 16px 20px; margin : 18px 0; font-size : var(--text-base); line-height : 1.68; } .thm-block__label { font-size : var(--text-sm); font-weight : 900; text-transform : uppercase; letter-spacing : .08em; color : var(--c-muted); margin-bottom : 7px; } /* Highlight / callout block */ .hl-block { border-left : 3px solid var(--c-accent); border-radius : 0 var(--r-md) var(--r-md) 0; background : var(--c-surf2); padding : 14px 18px; margin : 18px 0; font-size : var(--text-base); line-height : 1.68; color : var(--c-text); } /* ══════════════════════════════════════════════════════════════ * LATEX-STYLE ALGORITHM BLOCK * ══════════════════════════════════════════════════════════════ */ .latex-algorithm { margin : 28px auto; max-width : 760px; color : var(--c-text); font-size : var(--text-sm); line-height : 1.45; } .latex-algorithm__caption { text-align : center; color : var(--c-head); font-size : var(--text-sm); margin-bottom : 6px; hyphens : none; } .latex-algorithm__label { font-weight : 700; } .latex-algorithm__title { font-weight : 400; } .latex-algorithmic { counter-reset : alg-line; list-style : none; margin : 0; padding : 6px 0; border-top : 1.4px solid var(--c-head); border-bottom : 1.4px solid var(--c-head); font-family : var(--font-body); background : transparent; } .latex-algorithmic li { counter-increment : alg-line; display : flex; align-items : baseline; padding : 3px 0; color : var(--c-text); hyphens : none; } .latex-algorithmic li::before { content : counter(alg-line) ":"; flex-shrink : 0; width : 30px; text-align : right; padding-right: 10px; color : var(--c-muted); font-size : var(--text-sm); line-height : inherit; } .latex-algorithmic .alg-indent { padding-left : 20px; } .latex-algorithmic .alg-indent::before { margin-left : -20px; } .alg-highlight { background : color-mix(in srgb, var(--c-accent) 8%, transparent); box-shadow : inset 3px 0 0 var(--c-accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .alg-keyword { font-weight : 700; color : var(--c-head); } .alg-ref { color : var(--c-muted); font-size : 12px; margin-left : 4px; } /* Keep MathJax inline math visually close to LaTeX algorithm output */ .latex-algorithm mjx-container { line-height : 0; } /* Mobile: keep the algorithm readable without overflowing badly */ @media (max-width: 540px) { .latex-algorithm { max-width : 100%; font-size : 12px; } .latex-algorithmic { overflow-x : auto; } .latex-algorithmic li { min-width : 620px; } } /* ══════════════════════════════════════════════════════════════ * SECTION 14 · FIGURE WRAPPERS & PLACEHOLDERS * ══════════════════════════════════════════════════════════════ */ /* Placeholder — dashed box used before real figures are ready */ .fig-ph { width : 100%; background : var(--c-surf); border : 1.5px dashed var(--c-border); border-radius : var(--r-lg); display : flex; align-items : center; justify-content: center; color : var(--c-subtle); font-size : var(--text-sm); font-style : italic; padding : 52px 20px; margin : 18px 0 8px; text-align : center; } /* Taller placeholder variant — add class="fig-ph fig-ph--tall" */ .fig-ph--tall { padding: 72px 20px; } /* Real figure image — add class="fig-img" to elements */ .fig-img { width : 100%; /* border-radius : var(--r-lg); */ /* border : 1px solid var(--c-border); */ margin : 18px 0 8px; } .fig-img-pair { margin : 18px 0 26px; } .fig-img-switch { display : flex; justify-content : center; align-items : center; margin : 18px 0 8px; } .fig-img-switch .fig-img { width : 100%; max-width : 960px; margin : 0 auto; } /* Default: show dark-text figure on light page */ .fig-img-switch .fig-img--light { display : block; } /* Default: hide light-text figure */ .fig-img-switch .fig-img--dark { display : none; } /* Dark mode: hide dark-text figure */ html.dark .fig-img-switch .fig-img--light { display : none; } /* Dark mode: show light-text figure */ html.dark .fig-img-switch .fig-img--dark { display : block; } .fig-caption-center { text-align : center; hyphens : none; margin-bottom : 26px; } /* Two figures side by side — each child takes equal width. Collapses to a single column on mobile (≤ 720px). */ .fig-pair { display : flex; align-items : center; gap : 28px; margin : 26px 0; } .fig-pair > figure { flex : 1 1 0; min-width : 0; margin : 0; } .fig-pair .fig-img-switch { width : 60%; margin : 0 auto; } @media (max-width: 720px) { .fig-pair { flex-direction : column; } } figcaption { font-size : var(--text-sm); font-style : italic; color : var(--c-muted); line-height : 1.55; margin-bottom : 26px; } figcaption strong { color: var(--c-text); font-style: normal; } /* ── Booktabs-style results table ── */ .booktabs-table { margin : 22px 0 30px; } .booktabs-table figcaption { font-size : var(--text-sm); font-style : italic; color : var(--c-muted); line-height : 1.55; margin-bottom : 12px; text-align : left; hyphens : none; } .table-scroll { width : 100%; overflow-x : auto; } .perf-table { width : 100%; min-width : 920px; border-collapse : separate; border-spacing : 0; font-size : 12px; line-height : 1.42; color : var(--c-text); background : transparent; } .perf-table th, .perf-table td { padding : 8px 10px; text-align : center; vertical-align : middle; white-space : nowrap; border : none; } .perf-table thead tr:first-child th { border-top : 1.6px solid var(--c-head); } .perf-table thead tr:last-child th { border-bottom : 1.1px solid var(--c-head); } .perf-table tbody tr:last-child th, .perf-table tbody tr:last-child td { border-bottom : 1.6px solid var(--c-head); } .perf-table tbody th { text-align : left; font-weight : 700; color : var(--c-head); } .perf-table thead th { font-weight : 700; color : var(--c-head); } .perf-table .task-head { text-align : left; vertical-align : bottom; border-bottom : 1.1px solid var(--c-head); } .perf-table .group-head { position : relative; padding-bottom : 9px; } .perf-table .group-head::after { content : ''; position : absolute; left : 8px; right : 8px; bottom : 2px; height : 1px; background : var(--c-head); } .perf-table strong { font-weight : 800; color : var(--c-head); } .table-line { display : block; line-height : 1.45; } /* ══════════════════════════════════════════════════════════════ * SECTION 15 · CODE / CITATION BLOCK * ══════════════════════════════════════════════════════════════ */ pre, code { font-family : var(--font-mono); } pre { background : var(--c-surf); border : 1px solid var(--c-border); border-radius : var(--r-lg); padding : 18px 20px; font-size : 12px; line-height : 1.65; overflow-x : auto; white-space : pre; } /* ══════════════════════════════════════════════════════════════ * SECTION 16 · BLOG-SPECIFIC ELEMENTS * ══════════════════════════════════════════════════════════════ */ /* Post metadata row */ .post-meta { display : flex; flex-wrap : wrap; gap : 14px; font-size : var(--text-sm); color : var(--c-subtle); margin-bottom: 26px; align-items : center; } .post-meta i { font-size: 11px; margin-right: 3px; } /* Section headings inside blog posts */ h2.blog-h2 { font-size : 17px; font-weight : 700; letter-spacing : -.01em; color : var(--c-head); margin : 38px 0 12px; } h2.blog-h2:first-of-type { margin-top: 0; } /* Placeholder content block (blog draft sections) */ .ph-block { background : var(--c-surf); border : 1.5px dashed var(--c-border); border-radius : var(--r-md); padding : 24px 20px; margin : 14px 0; color : var(--c-subtle); font-size : var(--text-sm); font-style : italic; line-height : 1.65; } .ph-block strong { display : block; font-style : normal; font-weight : 700; font-size : var(--text-xs); text-transform : uppercase; letter-spacing : .08em; color : var(--c-muted); margin-bottom : 7px; } /* Dot-grid figure placeholder (blog variant) */ .fig-ph--dotgrid { background-color : var(--c-surf); background-image : radial-gradient(circle, var(--c-dot) 1px, transparent 1px); background-size : 20px 20px; border : 1px solid var(--c-border); } /* Back-to-paper CTA at bottom of blog */ .back-cta { display : inline-flex; align-items : center; gap : 7px; font-size : var(--text-sm); font-weight : 600; color : var(--c-accent); border : 1.5px solid var(--c-accent); border-radius : var(--r-sm); padding : 8px 16px; margin-top : 30px; text-decoration: none; transition : background .15s, color .15s; } .back-cta:hover { background : var(--c-accent); color : #fff; border-color : var(--c-accent); border-bottom: 1.5px solid var(--c-accent); } /* Horizontal rule */ hr { border : none; border-top : 1px solid var(--c-border); margin : 28px 0; } /* ══════════════════════════════════════════════════════════════ * SECTION 16.5 · VIDEO GRID * Autoplay, looping, square-cropped videos. No controls. * ══════════════════════════════════════════════════════════════ */ .video-grid { display : grid; grid-template-columns : repeat(3, 1fr); gap : 12px; margin : 20px auto 8px; max-width : 640px; } .video-col { display : flex; flex-direction : column; gap : 6px; } .video-col-title { font-size : var(--text-sm); font-weight : 600; text-align : center; color : var(--c-muted); } .video-wrapper { position : relative; width : 100%; aspect-ratio : 1 / 1; border-radius : var(--r-md); overflow : hidden; border : 1px solid var(--c-border); background : #000; } .video-wrapper video { width : 100%; height : 100%; object-fit : cover; display : block; pointer-events: none; } .video-grid--mujoco { /* To add another video: increment --mujoco-cols by 1. */ --mujoco-cols : 5; grid-template-columns : repeat(var(--mujoco-cols), 1fr); /* 101px per column + 12px gap between each column */ max-width : calc(var(--mujoco-cols) * 101px + (var(--mujoco-cols) - 1) * 12px); margin-top : 10px; } @media (max-width: 600px) { .video-grid, .video-grid--mujoco { grid-template-columns : 1fr; } } /* ══════════════════════════════════════════════════════════════ * SECTION 17 · FOOTER * ══════════════════════════════════════════════════════════════ */ .site-footer { margin-top : 64px; padding-top : 20px; border-top : 1px solid var(--c-border); font-size : var(--text-sm); color : var(--c-subtle); } .site-footer a { color : var(--c-subtle); border : none; transition : color .15s; } .site-footer a:hover { color: var(--c-accent); } /* ══════════════════════════════════════════════════════════════ * SECTION 17.5 · KEY MESSAGE BANNER * ══════════════════════════════════════════════════════════════ */ .key-banner { display : flex; align-items : center; gap : 14px; background : #fff5f5; border : 1.5px solid #fca5a5; border-radius : var(--r-md); padding : 12px 18px; margin-bottom : 24px; flex-wrap : wrap; } .key-banner__icon { width : 22px; height : 22px; flex-shrink : 0; color : #e03131; } .key-banner__text { font-size : 15px; font-weight : 600; color : #6b1a1a; flex : 1; min-width : 0; line-height : 1.4; } .key-banner__cta { font-size : var(--text-sm); font-weight : 600; color : #e03131; border : none; white-space : nowrap; } .key-banner__cta:hover { color: #6b1a1a; border: none; } html.dark .key-banner { background : #1c0505; border-color: #7f1d1d; } html.dark .key-banner__icon { color: #fc8181; } html.dark .key-banner__text { color: #fecaca; } html.dark .key-banner__cta { color: #fc8181; } html.dark .key-banner__cta:hover { color: #fecaca; border: none; } /* ══════════════════════════════════════════════════════════════ * SECTION 18 · APPEAR ANIMATIONS * Elements with class="ap" fade in when scrolled into view. * JavaScript (bottom of each HTML file) drives this via * IntersectionObserver. Delay is set programmatically. * ══════════════════════════════════════════════════════════════ */ .ap { opacity : 0; transition : opacity .5s ease; } .ap.in { opacity: 1; } /* ══════════════════════════════════════════════════════════════ * SECTION 19 · RESPONSIVE * ══════════════════════════════════════════════════════════════ */ /* ── Tablet (≤ 720px) ── */ @media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } .page { padding-left: 28px; padding-right: 28px; } } /* ── Large phone (≤ 540px) ── */ @media (max-width: 540px) { .page { padding-left: var(--page-pad-sm); padding-right: var(--page-pad-sm); } .site-title { font-size: 21px; } .tldr { font-size: var(--text-base); } .btns { gap: 7px; } /* let buttons wrap naturally — no forced column */ } /* ── Phone (≤ 420px) ── */ @media (max-width: 420px) { .stats { grid-template-columns: 1fr; } .site-title { font-size: 19px; } .stat__val { font-size: 20px; } }