inside .section-body, so the generic `.section-body p` rule (0,1,1) outranked `.table-caption` (0,1,0) and the caption inherited the running-text size. Matched on the element too so the specificities tie and source order decides. */ p.table-caption, .section-body p.table-caption { font-size: 15px; line-height: 1.6; color: #4a5058; } /* ========================================================================== One family: Lato -------------------------------------------------------------------------- Lato ships 100/300/400/700/900 and nothing between. Every 500 and 600 in the sheet would therefore be synthesised — the browser smears the 400 outlines — so they are remapped to real weights here. That also lets the findings table keep three genuine steps rather than two real ones and a fake: regular 400, semi 700, high 900. ========================================================================== */ :root { --sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body, .body-text, .body-text p, .measure-list li, .impl-list, .impl-list li p, .section-body p, .authors-line, .hero-title, .paper-subtitle, .section-heading, .subsection-heading, .bibtex-title, .findings-carousel-caption, .table-caption, p.table-caption, .nav-item, .dropdown-item, .btn-primary, .res-btn, .resource-btn, .btn-copy, .tc-cell, .research-cell, .research-cell p, .tc-result-content, .research-result-content, .tc-time-heading, .tc-access-heading, .research-time-heading, .research-access-heading, .page-footer p, .spine .lab, .carousel-caption p { font-family: var(--sans); } /* ---- headings ---- */ .hero-title { font-weight: 900; font-size: 44px; line-height: 1.18; letter-spacing: -0.02em; } .section-heading { font-weight: 900; font-size: 27px; letter-spacing: -0.012em; color: rgba(0, 0, 0, 0.66); } .subsection-heading { font-weight: 700; font-size: 21px; letter-spacing: -0.008em; color: rgba(0, 0, 0, 0.66); } .paper-subtitle { font-weight: 700; font-size: 26px; line-height: 1.32; letter-spacing: -0.008em; } .paper-subtitle strong { font-weight: 700; } .bibtex-title, #bibtex .section-heading { font-weight: 900; font-size: 27px; } /* ---- running text ---- */ /* Lato has a smaller x-height than Source Serif, so it wants a touch less size and a touch more leading to hold the same colour on the page. */ .body-text, .body-text p, .measure-list li, .impl-list li p, .section-body p { font-size: 17.5px; line-height: 1.72; color: #1c1f24; } .authors-line { font-size: 16.5px; } .findings-carousel-caption { font-size: 15.5px; line-height: 1.6; } p.table-caption, .section-body p.table-caption { font-size: 14.5px; line-height: 1.65; } strong, .body-text strong, .section-body strong { font-weight: 700; } /* ---- conditions: 500 is not a Lato weight ---- */ .cond { font-weight: 700; font-style: italic; } /* ---- the three performance steps, all real weights ---- */ .fw-reg { font-weight: 400; } .fw-semi { font-weight: 700; } .fw-high { font-weight: 900; } /* ---- interface ---- */ .nav-item, .dropdown-item { font-weight: 400; } .nav-item { font-size: 15.5px; } .btn-primary, .res-btn, .resource-btn, .btn-copy { font-weight: 700; } .tc-cell, .tc-header-row .tc-cell, .tc-row-hd, .research-header-row .research-cell, .research-row-hd, .tc-time-heading, .tc-access-heading, .research-time-heading, .research-access-heading { font-weight: 700; } .tc-data, .research-data, .research-cell p { font-weight: 400; } .page-footer p { font-weight: 400; } @media (max-width: 768px) { .hero-title { font-size: 33px; } .section-heading, .bibtex-title, #bibtex .section-heading { font-size: 24px; } .subsection-heading { font-size: 19px; } .paper-subtitle { font-size: 21px; } .body-text, .body-text p, .measure-list li, .impl-list li p, .section-body p { font-size: 16.5px; } .authors-line { font-size: 15px; } } /* ---- two stragglers from the Lato switch --------------------------------- The interface-carousel caption still asked for 500, which Lato does not ship, and #bibtex .section-heading (1,1,0) outranked the .section-heading (0,1,0) in the Lato block, so that one heading stayed in Newsreader. */ .carousel-caption p { font-family: var(--sans); font-weight: 700; } #bibtex .section-heading, .bibtex-title { font-family: var(--sans); } /* ---- larger titles ------------------------------------------------------- Lato runs small for its point size, so the previous numbers read a step quieter than the Newsreader they replaced. */ .hero-title { font-size: 54px; line-height: 1.14; } .section-heading, #bibtex .section-heading, .bibtex-title { font-size: 32px; } .subsection-heading { font-size: 23px; } .paper-subtitle { font-size: 30px; line-height: 1.28; } @media (max-width: 900px) { .hero-title { font-size: 44px; } } @media (max-width: 768px) { .hero-title { font-size: 36px; line-height: 1.18; } .section-heading, #bibtex .section-heading, .bibtex-title { font-size: 27px; } .subsection-heading { font-size: 20px; } .paper-subtitle { font-size: 23px; } } /* ========================================================================== One family: Roboto -------------------------------------------------------------------------- Unlike Lato, Roboto does ship a 500, so the semi-bold step the original design asked for is a real weight again rather than something remapped. The findings table therefore reads exactly as its caption claims: regular 400, semi-bold 500, bold 700. Roboto also has a noticeably larger x-height than Lato, so everything comes down about half a step to hold the same apparent size. ========================================================================== */ :root { --sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ---- headings ---- */ .hero-title { font-weight: 700; font-size: 52px; line-height: 1.16; letter-spacing: -0.022em; } .section-heading, #bibtex .section-heading, .bibtex-title { font-weight: 700; font-size: 30px; letter-spacing: -0.012em; } .subsection-heading { font-weight: 500; font-size: 22px; letter-spacing: -0.006em; } .paper-subtitle { font-weight: 500; font-size: 28px; line-height: 1.3; letter-spacing: -0.008em; } .paper-subtitle strong { font-weight: 500; } /* ---- running text ---- */ .body-text, .body-text p, .measure-list li, .impl-list li p, .section-body p { font-size: 17px; line-height: 1.7; color: #1c1f24; } .authors-line { font-size: 16px; } .findings-carousel-caption { font-size: 15px; line-height: 1.6; } p.table-caption, .section-body p.table-caption { font-size: 14px; line-height: 1.65; } strong, .body-text strong, .section-body strong { font-weight: 500; } /* ---- conditions: 500 exists in Roboto, so back to the original weight ---- */ .cond { font-weight: 500; font-style: italic; } /* ---- the three performance steps, all real ---- */ .fw-reg { font-weight: 400; } .fw-semi { font-weight: 500; } .fw-high { font-weight: 700; } /* ---- interface ---- */ .nav-item, .dropdown-item { font-weight: 500; } .nav-item { font-size: 15px; } .btn-primary, .res-btn, .resource-btn { font-weight: 500; } .btn-copy { font-weight: 500; } .carousel-caption p { font-family: var(--sans); font-weight: 500; } .tc-cell, .tc-header-row .tc-cell, .tc-row-hd, .research-header-row .research-cell, .research-row-hd, .tc-time-heading, .tc-access-heading, .research-time-heading, .research-access-heading { font-weight: 500; } .tc-data, .research-data, .research-cell p, .page-footer p { font-weight: 400; } @media (max-width: 900px) { .hero-title { font-size: 42px; } } @media (max-width: 768px) { .hero-title { font-size: 34px; line-height: 1.2; } .section-heading, #bibtex .section-heading, .bibtex-title { font-size: 26px; } .subsection-heading { font-size: 19px; } .paper-subtitle { font-size: 22px; } .body-text, .body-text p, .measure-list li, .impl-list li p, .section-body p { font-size: 16px; } .authors-line { font-size: 15px; } } /* ---- Hero as two real columns -------------------------------------------- The title and the chart used to be separate absolutely-positioned layers, each sized as a percentage of the viewport, so neither could be widened without the two meeting in the middle. They are now a grid: the row divides the space and an overlap is not expressible. */ .hero-overlay { padding: 0 6%; } .hero-inner { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 4%; align-items: center; width: 100%; } .hero-text-block { max-width: none; } .hero-plot { position: static; inset: auto; display: block; padding: 0; } .hero-plot svg { width: 100%; max-width: 560px; height: auto; margin-left: auto; } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .hero-plot { display: none; } .hero-overlay { padding: 0 8%; } } /* The paper title is the second most important line on the page and was sitting only two points above the section headings. */ .paper-subtitle { font-size: 34px; line-height: 1.26; } @media (max-width: 900px) { .paper-subtitle { font-size: 28px; } } @media (max-width: 768px) { .paper-subtitle { font-size: 24px; line-height: 1.28; } } /* ========================================================================== The workshop site's type system, transferred -------------------------------------------------------------------------- cscw2026-website runs Lato throughout at 12 / 14 / 17 / 19 / 24 / 32 / clamp(28px, 3.7vw, 46px), body 17 at 1.72, headings at 700. Its serif is reserved for one thing — the word "Ripples" in the wordmark — and this page has no equivalent mark, so the serif has no job here and is not loaded. That scale gives three heading steps for four levels, so they map: hero to --t-hero, the paper's name to 32, sections to 24, subsections to 19. Lato ships no 500 or 600, so weights stay on 400 / 700 / 900. ========================================================================== */ :root { --sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --t-meta: 14px; --t-body: 17px; --t-h4: 19px; --t-h3: 24px; --t-h2: 32px; --t-hero: clamp(28px, 3.7vw, 46px); } body { line-height: 1.72; } /* ---- headings ---- */ .hero-title { font-size: var(--t-hero); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } .paper-subtitle { font-size: var(--t-h2); font-weight: 700; line-height: 1.28; letter-spacing: -0.012em; } .paper-subtitle strong { font-weight: 700; } .section-heading, #bibtex .section-heading, .bibtex-title { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.008em; } .subsection-heading { font-size: var(--t-h4); font-weight: 700; letter-spacing: normal; } /* ---- running text ---- */ .body-text, .body-text p, .measure-list li, .impl-list li p, .section-body p { font-size: var(--t-body); line-height: 1.72; color: #1c1f24; } .authors-line { font-size: var(--t-body); } .findings-carousel-caption { font-size: var(--t-meta); line-height: 1.65; } p.table-caption, .section-body p.table-caption { font-size: var(--t-meta); line-height: 1.65; } strong, .body-text strong, .section-body strong { font-weight: 700; } /* ---- Lato has no 500 or 600 ---- */ .cond { font-weight: 700; font-style: italic; } .fw-reg { font-weight: 400; } .fw-semi { font-weight: 700; } .fw-high { font-weight: 900; } .nav-item, .dropdown-item { font-weight: 400; font-size: var(--t-meta); } .btn-primary, .res-btn, .resource-btn, .btn-copy { font-weight: 700; } .carousel-caption p { font-weight: 700; } .tc-cell, .tc-header-row .tc-cell, .tc-row-hd, .research-header-row .research-cell, .research-row-hd, .tc-time-heading, .tc-access-heading, .research-time-heading, .research-access-heading { font-weight: 700; } .tc-data, .research-data, .research-cell p, .page-footer p { font-weight: 400; } .page-footer p { font-size: var(--t-meta); } @media (max-width: 768px) { :root { --t-h2: 26px; --t-h3: 21px; --t-h4: 18px; --t-body: 16px; } } /* ---- hero breathing room -------------------------------------------------- 6% of a 1280px window is only 77px, which put the title and the button almost against the edge. The overlay now uses the same gutter the content sections below it use, so the hero and the paper line up. */ .hero-overlay { padding: 0 max(6%, 60px) 0 max(10%, 88px); } .hero-inner { grid-template-columns: 1.08fr 0.92fr; gap: 5%; } .hero-plot svg { max-width: 440px; } @media (max-width: 900px) { .hero-overlay { padding: 0 8%; } } /* The paper's name should hold two lines at every width rather than gaining a third as the window narrows, so it scales with the viewport up to the 32px ceiling. `balance` evens the two lines instead of leaving a long first line and a short second. */ .paper-subtitle { font-size: clamp(22px, 2.55vw, 32px); text-wrap: balance; } @media (max-width: 768px) { .paper-subtitle { font-size: clamp(19px, 4.6vw, 24px); } } /* ---- heading hierarchy ---------------------------------------------------- At 24px against 17px body the section headings were only a 1.4x step, which is not enough separation to read as the top of a section. The steps are now 46 / 34 / 30 / 21 / 17 — each clearly above the one below. */ .section-heading, #bibtex .section-heading, .bibtex-title { font-size: 30px; line-height: 1.26; letter-spacing: -0.014em; } .subsection-heading { font-size: 21px; line-height: 1.3; } .paper-subtitle { font-size: clamp(24px, 2.7vw, 34px); } @media (max-width: 900px) { .section-heading, #bibtex .section-heading, .bibtex-title { font-size: 27px; } .subsection-heading { font-size: 20px; } } @media (max-width: 768px) { .section-heading, #bibtex .section-heading, .bibtex-title { font-size: 24px; } .subsection-heading { font-size: 19px; } .paper-subtitle { font-size: clamp(20px, 4.8vw, 25px); } } /* ========================================================================== IBM Plex — one superfamily, three voices -------------------------------------------------------------------------- Serif for headings, sans for the argument, mono for the BibTeX. The code block stops being a guest: it is now the same hand as the rest of the page. Plex ships real 500 and 600, so nothing here is synthesised. ========================================================================== */ :root { --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --blue: #2d3c83; --ink: #1c1f24; } body { font-family: var(--sans); } /* ---- headings: serif, and larger ---- */ .hero-title { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 4.1vw, 54px); line-height: 1.14; letter-spacing: -0.018em; color: var(--blue); } .paper-subtitle { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3.1vw, 40px); line-height: 1.24; letter-spacing: -0.012em; color: var(--indigo-2, #394ba0); } .paper-subtitle strong { font-weight: 600; } /* Section headings carry the blue; subsections sit in ink underneath, so the two levels are told apart by colour as well as size. */ .section-heading, #bibtex .section-heading, .bibtex-title { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.24; letter-spacing: -0.014em; color: var(--blue); } .subsection-heading { font-family: var(--sans); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -0.008em; color: var(--ink); } /* ---- running text ---- */ .body-text, .body-text p, .measure-list li, .impl-list li p, .section-body p { font-family: var(--sans); font-size: 17px; line-height: 1.68; color: var(--ink); } .authors-line { font-family: var(--sans); font-size: 17px; } .findings-carousel-caption { font-family: var(--sans); font-size: 15px; line-height: 1.6; } p.table-caption, .section-body p.table-caption { font-family: var(--sans); font-size: 14px; line-height: 1.62; } strong, .body-text strong, .section-body strong { font-weight: 600; } /* ---- Plex has real 500 and 600 ---- */ .cond { font-weight: 500; font-style: italic; } .fw-reg { font-weight: 400; } .fw-semi { font-weight: 500; } .fw-high { font-weight: 700; } /* ---- interface ---- */ .nav-item, .dropdown-item { font-family: var(--sans); font-weight: 500; font-size: 15px; } .btn-primary, .res-btn, .resource-btn, .btn-copy { font-family: var(--sans); font-weight: 500; } .carousel-caption p { font-family: var(--sans); font-weight: 500; } .tc-cell, .research-cell, .research-cell p, .tc-result-content, .research-result-content, .tc-time-heading, .tc-access-heading, .research-time-heading, .research-access-heading, .page-footer p, .spine .lab { font-family: var(--sans); } .tc-header-row .tc-cell, .tc-row-hd, .research-header-row .research-cell, .research-row-hd { font-weight: 600; } .tc-data, .research-data, .research-cell p, .page-footer p { font-weight: 400; } /* ---- the code block now belongs ---- */ .bibtex-pre { font-family: var(--mono); font-size: 13.5px; line-height: 1.6; } @media (max-width: 900px) { .section-heading, #bibtex .section-heading, .bibtex-title { font-size: 29px; } .subsection-heading { font-size: 20px; } } @media (max-width: 768px) { .section-heading, #bibtex .section-heading, .bibtex-title { font-size: 26px; } .subsection-heading { font-size: 19px; } .body-text, .body-text p, .measure-list li, .impl-list li p, .section-body p { font-size: 16px; } .authors-line { font-size: 15.5px; } .bibtex-pre { font-size: 12.5px; } } /* `balance` evens the line lengths, which on a title this long meant every line stopping short of the measure — it read as a narrow column inside a wide one. `pretty` only guards the last line against a widow, so the rest fill the width available. */ .paper-subtitle { text-wrap: pretty; } /* ========================================================================== Blue and yellow -------------------------------------------------------------------------- Yellow rather than orange: #ed6500 already means "Insufficient time" in the condition coding, so an orange accent would be indistinguishable from a semantic one. The yellow is used as a highlighter — the same role it plays on jzhi.app — never as a brand fill. ========================================================================== */ :root { --amber: #e9b830; /* solid marks */ --amber-wash: rgba(247, 208, 70, 0.45); /* the highlighter */ --amber-line: rgba(233, 184, 48, 0.55); } /* ---- selection: the highlighter ---- */ ::selection { background: var(--amber-wash); color: #1a1a1a; } ::-moz-selection { background: var(--amber-wash); color: #1a1a1a; } /* ---- the carousel's current slide ---- Blue carries interaction (the arrows), so the indicator uses the other colour: what is showing is marked, not merely coloured in the same hue as the buttons beside it. */ .carousel-dot.active, .findings-carousel-dot.active { background-color: var(--amber); transform: scale(1.35); } .carousel-dot:hover:not(.active), .findings-carousel-dot:hover:not(.active) { background-color: rgba(0, 0, 0, 0.38); } /* ---- the section spine, same logic ---- */ .spine a.current .dot { background: var(--amber); } /* ---- inline links keep the blue, but pick up the highlighter on hover ---- */ .text-link:hover { background: var(--amber-wash); box-shadow: 0 0 0 2px var(--amber-wash); text-decoration: none; } /* ---- chart width ---------------------------------------------------------- The 620px cap was set when the charts were 4:3 and stood 690px tall in the column. The engagement charts are 3:1, so the same cap left them tiny — the cap now scales with the figure's own proportions instead of being one number for both shapes. */ .findings-carousel-image-wrap { max-width: 820px; } @media (max-width: 900px) { .findings-carousel-image-wrap { max-width: 100%; } } /* ========================================================================== Blue and red -------------------------------------------------------------------------- The red is not new: #a10000 already carries every citation on the page, so promoting it to the accent makes an existing colour do more work rather than introducing a sixth one. Everything decorative now runs through --accent, so the whole theme is one value to change. The wash is red at 14%, which stays well clear of #ed6500 ("Insufficient") — a tint, not a second orange. ========================================================================== */ :root { --accent: #a10000; --accent-wash: rgba(161, 0, 0, 0.14); --accent-soft: rgba(161, 0, 0, 0.55); } ::selection { background: var(--accent-wash); color: #1a1a1a; } ::-moz-selection { background: var(--accent-wash); color: #1a1a1a; } .carousel-dot.active, .findings-carousel-dot.active { background-color: var(--accent); transform: scale(1.35); } .spine a.current .dot { background: var(--accent); } /* Citations already sit in this colour, so hovering tints the ground behind them rather than restating the colour. */ .text-link:hover { background: var(--accent-wash); box-shadow: 0 0 0 2px var(--accent-wash); text-decoration: none; } /* The section break picks up the accent at low strength — the one place the red appears without meaning "citation". */ .content-section:after { color: var(--accent-soft); opacity: 0.45; } /* ========================================================================== Links: two jobs, two treatments -------------------------------------------------------------------------- Author names and inline citations look the same in the markup but are not the same thing. The three names are a short, scannable list you might actually click; the forty-odd citations interrupt sentences and are read past. So the names get a quiet permanent mark, and the citations get a highlighter that only appears under the pointer. ========================================================================== */ /* ---- inline citations: the highlighter ---- */ .text-link { color: var(--ink); background-image: linear-gradient(var(--accent-wash), var(--accent-wash)); background-repeat: no-repeat; background-position: 0 100%; /* both ends are percentages: a length and a percentage will not animate */ background-size: 100% 0%; box-shadow: none; text-decoration: none; transition: background-size 0.28s ease-out, color 0.28s; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .text-link:hover, .text-link:focus-visible { background-size: 100% 100%; background-color: transparent; box-shadow: none; color: #1a1a1a; text-decoration: none; } /* Citations inside the tables sit on a tinted ground, so the wash needs to read against #f9fafb rather than white. */ .tc-cell .text-link, .research-cell .text-link { color: var(--ink); } /* ---- author names: the dotted rule ---- */ .authors-line .text-link { color: var(--ink); background-image: none; border-bottom: 1px dotted rgba(161, 0, 0, 0.55); transition: border-bottom-color 0.16s, border-bottom-style 0.16s, color 0.16s; } .authors-line .text-link:hover, .authors-line .text-link:focus-visible { border-bottom-style: solid; border-bottom-color: var(--accent); color: var(--accent); background-image: none; } @media (prefers-reduced-motion: reduce) { .text-link { transition: none; } } /* ========================================================================== One link treatment: the dotted rule -------------------------------------------------------------------------- Citations and author names now read the same way. The mark is permanent, so a link can be found by looking rather than only by hovering, and the colour stays out of the sentence — the only coloured words in a paragraph remain the ones that mean something. ========================================================================== */ .text-link, .authors-line .text-link { color: var(--ink); background-image: none; background-color: transparent; box-shadow: none; text-decoration: none; border-bottom: 1px dotted rgba(161, 0, 0, 0.55); transition: border-bottom-color 0.16s, color 0.16s; } .text-link:hover, .text-link:focus-visible, .authors-line .text-link:hover, .authors-line .text-link:focus-visible { background-image: none; background-color: transparent; box-shadow: none; border-bottom-style: solid; border-bottom-color: var(--accent); color: var(--accent); } /* ---- chart size ---------------------------------------------------------- Capping by width could not serve both shapes: the performance charts are 4:3 and the engagement charts 3:1, so any width that suited one starved or towered over the other. Capping the height instead lets each figure take the width its own proportions ask for. */ .findings-carousel-image-wrap { max-width: 820px; margin: 0 auto; display: flex; justify-content: center; } .findings-carousel-image-wrap img { width: auto; max-width: 100%; max-height: 400px; object-fit: contain; } @media (max-width: 900px) { .findings-carousel-image-wrap img { max-height: 300px; } } /* The paper's name takes the same indigo as the hero and the section headings, so the three blues on the page become one, and comes down a step so it sits below the hero rather than rivalling it. */ .paper-subtitle { color: var(--blue); font-size: clamp(24px, 2.8vw, 36px); } @media (max-width: 768px) { .paper-subtitle { font-size: clamp(20px, 4.6vw, 24px); } } /* ========================================================================== Hero: one left column, artwork ramping across -------------------------------------------------------------------------- Title, then the finding, then the way in — read top to bottom on a single left edge rather than split across two columns. The artwork returns to full strength but only earns it on the right: a horizontal mask takes it from 10% at the left, where the words are, to 100% at the far edge. ========================================================================== */ .hero-wash { opacity: 1; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 30%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 1) 100%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 30%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 1) 100%); } .hero-inner { display: block; } .hero-text-block { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; max-width: 560px; text-align: left; } .hero-title { margin: 0; max-width: 100%; } /* The plot is now part of the stack rather than a facing column. */ .hero-plot { position: static; inset: auto; display: block; width: 100%; max-width: 430px; padding: 0; } .hero-plot svg { width: 100%; max-width: none; margin: 0; } .hero-actions { margin: 0; } @media (max-width: 900px) { .hero-text-block { max-width: 78%; gap: 22px; } .hero-plot { display: block; max-width: 340px; } } @media (max-width: 620px) { .hero-plot { display: none; } .hero-text-block { max-width: 88%; } } /* ========================================================================== Carousel: a counter, and a frame that does not move -------------------------------------------------------------------------- The engagement carousel holds two different shapes — two charts at 3:1 and one at 4:3 — so the figure changed height between slides and dragged the arrows up and down with it. The figure area is now a fixed frame and each chart is contained inside it, so the controls stay where you left them. ========================================================================== */ .findings-carousel-image-wrap { display: flex; align-items: center; justify-content: center; height: 400px; max-width: 820px; margin: 0 auto; } .findings-carousel-image-wrap img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } /* ---- the counter ---- */ .carousel-indicators, .findings-carousel-indicators { min-height: 20px; } .carousel-counter { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--grey, #757575); font-variant-numeric: tabular-nums; /* the digits cannot shift the row */ letter-spacing: 0.04em; } @media (max-width: 900px) { .findings-carousel-image-wrap { height: 300px; } } @media (max-width: 620px) { .findings-carousel-image-wrap { height: 240px; } } /* A harder ramp: the artwork stays a whisper for the whole left half, then climbs quickly, so the right-hand third reads at nearly full strength instead of easing in gently. */ .hero-wash { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 30%, rgba(0, 0, 0, 0.70) 62%, rgba(0, 0, 0, 1) 100%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 30%, rgba(0, 0, 0, 0.70) 62%, rgba(0, 0, 0, 1) 100%); } /* Ramp brought forward: the climb starts at 55% instead of 62%, so the artwork reaches strength earlier and holds it across more of the right. */ .hero-wash { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 30%, rgba(0, 0, 0, 0.70) 55%, rgba(0, 0, 0, 1) 100%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 30%, rgba(0, 0, 0, 0.70) 55%, rgba(0, 0, 0, 1) 100%); } /* ---- the artwork holds its right edge ------------------------------------- `cover` centred re-crops from both sides as the window narrows, so the head and gears — the part the ramp exists to reveal — drift and get cut. Anchored right, the scaling takes its loss from the left instead, which is the band already masked down to 10%. The right-hand content is therefore unchanged at every width until the layout actually breaks. */ .hero-wash { background-position: 100% 50%; } @media (max-width: 900px) { /* The text column gives way first; the artwork is still doing its job. */ .hero-wash { background-position: 100% 50%; } } /* ---- captions, up a step -------------------------------------------------- They carry the actual reading of each figure and each table, so they were sitting a long way below the 17px body for text that has to be read carefully rather than skimmed. */ .findings-carousel-caption { font-size: 16.5px; line-height: 1.62; } p.table-caption, .section-body p.table-caption { font-size: 15.5px; line-height: 1.62; } .carousel-caption p { font-size: 15.5px; line-height: 1.5; } @media (max-width: 900px) { .findings-carousel-caption { font-size: 15.5px; } p.table-caption, .section-body p.table-caption { font-size: 15px; } .carousel-caption p { font-size: 14px; } } @media (max-width: 620px) { .findings-carousel-caption { font-size: 15px; } p.table-caption, .section-body p.table-caption { font-size: 14.5px; } .carousel-caption p { font-size: 13px; } } /* ========================================================================== Motion on scroll -------------------------------------------------------------------------- Restrained on purpose: blocks arrive, they do not perform. One transform, one distance, one duration, applied at the level of a heading or a figure rather than every paragraph — a page where each sentence animates reads as a template rather than a paper. The reveal class is only ever added by script, so if the script does not run nothing is left hidden. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { .rise { opacity: 0; transform: translateY(16px); transition: opacity 0.55s cubic-bezier(0.22, 0.7, 0.3, 1), transform 0.55s cubic-bezier(0.22, 0.7, 0.3, 1); } .rise.in { opacity: 1; transform: none; } /* The hero states itself on arrival rather than being revealed by scroll. */ .hero-title, .hero-plot, .hero-actions { opacity: 0; transform: translateY(14px); transition: opacity 0.7s cubic-bezier(0.22, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.22, 0.7, 0.3, 1); } .hero-ready .hero-title, .hero-ready .hero-plot, .hero-ready .hero-actions { opacity: 1; transform: none; } .hero-ready .hero-plot { transition-delay: 0.12s; } .hero-ready .hero-actions { transition-delay: 0.22s; } /* The artwork drifts a little slower than the page, so the hero has depth without anything sliding around. */ .hero-wash { will-change: transform; } } /* ========================================================================== Prior-work table: one weight -------------------------------------------------------------------------- The cells were carrying three different weights for no reason: the column headers were 600 via .tc-header-row, the row headers 600 via .tc-row-hd, the finding text 600 through a , and the citation inside the same sentence 400. Reading across a row meant reading four weights. One weight now, and the emphasis the table needs comes from its tinted header band rather than from the type. ========================================================================== */ .tc-table .tc-cell, .tc-table .tc-cell strong, .tc-table .tc-cell span, .tc-table .tc-cell .text-link, .tc-table .tc-col-hd, .tc-table .tc-col-hd strong, .tc-table .tc-row-hd, .tc-table .tc-row-hd strong, .tc-table .tc-data, .tc-table .tc-data strong, .tc-table .tc-prior-cell, .tc-table .tc-prior-cell strong, .tc-table .tc-prior-text, .tc-table .tc-prior-text strong { font-weight: 500; } /* strong inside a data cell was also a flex container, which forced the emoji and the text onto their own line box */ .tc-table .tc-data strong, .tc-table .tc-prior-text strong { display: inline; gap: 0; } /* the mobile cards carry the same table, so they take the same rule */ .tc-mobile-cards .tc-result-content, .tc-mobile-cards .tc-result-content strong, .tc-mobile-cards .tc-result-content .text-link { font-weight: 500; } /* ========================================================================== Resources buttons: the hero button, scaled down -------------------------------------------------------------------------- Same construction as "About the Paper" — a pill with the arrow riding in its own translucent chip, so only the chip moves on hover and the label never shifts. Smaller throughout, because these sit inside a section rather than opening the page. ========================================================================== */ .resource-btn, .resources-button .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 13px; width: auto; height: 44px; padding: 0 7px 0 22px; background-color: var(--btn, #2d3c83); border-radius: 999px; color: #fff; font-family: var(--sans); font-size: 15.5px; font-weight: 500; box-shadow: var(--btn-shadow, 0 1px 2px rgba(17, 24, 39, 0.14)); transition: background-color 0.18s, box-shadow 0.18s; } .resource-btn .btn-chip, .resources-button .btn-primary .btn-chip { width: 30px; height: 30px; } .resource-btn .btn-arrow, .resources-button .btn-primary .btn-arrow { width: 15px; height: 15px; transform: none; } .resource-btn:hover, .resources-button .btn-primary:hover { background-color: var(--btn-hover, #3a4ba1); box-shadow: var(--btn-shadow-hover, 0 5px 14px rgba(45, 60, 131, 0.24)); transform: none; } .resource-btn:hover .btn-chip, .resources-button .btn-primary:hover .btn-chip { background: rgba(255, 255, 255, 0.28); transform: translateX(3px); } .resource-btn:active, .resources-button .btn-primary:active { background-color: var(--btn-active, #25316d); box-shadow: var(--btn-shadow, 0 1px 2px rgba(17, 24, 39, 0.14)); } @media (max-width: 768px) { .resource-btn, .resources-button .btn-primary { height: 40px; font-size: 14.5px; padding: 0 6px 0 18px; } .resource-btn .btn-chip, .resources-button .btn-primary .btn-chip { width: 27px; height: 27px; } } /* ========================================================================== Prior-work table, corrected -------------------------------------------------------------------------- Three things: the citations were carrying the same 500 as the surrounding text but reading heavier because of their rule, so they drop to 400 with the rest of the cell; the cells declared `white-space: nowrap`, which is why a long citation ran past its column instead of wrapping inside it; and the column and row names were at the data size, so nothing marked them as the frame of the table. ========================================================================== */ /* ---- one weight for the data, links included ---- */ .tc-table .tc-data, .tc-table .tc-data strong, .tc-table .tc-data span, .tc-table .tc-data .text-link, .tc-table .tc-prior-cell, .tc-table .tc-prior-cell strong, .tc-table .tc-prior-cell span, .tc-table .tc-prior-cell .text-link, .tc-table .tc-prior-text, .tc-table .tc-prior-text strong { font-weight: 400; font-size: 13.5px; } /* ---- text wraps inside its cell ---- */ .tc-table .tc-cell, .tc-table .tc-data, .tc-table .tc-prior-cell, .tc-table .nowrap-content, .tc-table .tc-data strong, .tc-table .tc-prior-text, .tc-table .tc-prior-text strong { white-space: normal; overflow-wrap: anywhere; } /* the emoji-and-text strongs were flex containers, which forced a line break between the glyph and the words */ .tc-table .tc-data strong, .tc-table .tc-prior-text strong { display: inline; gap: 0; } /* ---- the frame of the table, one step up ---- */ .tc-table .tc-col-hd, .tc-table .tc-col-hd strong, .tc-table .tc-row-hd, .tc-table .tc-row-hd strong { font-size: 15px; font-weight: 500; line-height: 1.35; } /* the findings table keeps the same treatment */ .research-table .research-col-hd, .research-table .research-col-hd strong, .research-table .research-row-hd, .research-table .research-row-hd strong { font-size: 15px; font-weight: 500; } .research-table .research-data, .research-table .research-data p { font-size: 13.5px; } /* The two Resources buttons sit in the same column one section apart, so they have to be the same object. `width: auto` let each size to its own label — 178px against 240px — which read as two slightly different buttons. A shared minimum makes them a pair again, with the label left and the chip parked at the right edge the way the hero button does it. */ .resource-btn, .resources-button .btn-primary { min-width: 244px; justify-content: space-between; } @media (max-width: 768px) { .resource-btn, .resources-button .btn-primary { min-width: 216px; } } /* ========================================================================== Findings table: everything on one left edge -------------------------------------------------------------------------- The header row was centring its cells while the data rows were left aligned, so the column names floated free of the values beneath them. Every cell is now a left-aligned column with its lines stacked from the same edge. ========================================================================== */ .research-table .research-cell, .research-table .research-header-row .research-cell, .research-table .research-col-hd, .research-table .research-row-hd, .research-table .research-data { align-items: flex-start; justify-content: flex-start; text-align: left; } .research-table .research-cell p { text-align: left; margin: 0 0 4px; } .research-table .research-cell p:last-child { margin-bottom: 0; } /* The column headers were vertically centred in a 60px box while the data sat at the top of theirs; both now start from the top. */ .research-table .research-header-row .research-cell { padding-top: 10px; } /* Same for the prior-work table's column headers, which were centred. */ .tc-table .tc-col-hd { text-align: left; } /* The 244px minimum was making both buttons wider than either label needs — equal, but padded out with empty space. They size to their content again, with the padding tightened so each sits close around its own label. */ .resource-btn, .resources-button .btn-primary { min-width: 0; width: auto; gap: 11px; padding: 0 6px 0 20px; justify-content: flex-start; } @media (max-width: 768px) { .resource-btn, .resources-button .btn-primary { min-width: 0; padding: 0 5px 0 16px; } } /* ========================================================================== Phone -------------------------------------------------------------------------- Three real problems at 390px, none of them visible from the desktop view: 1. The hero kept its desktop gutter. `max(10%, 88px)` is a tenth of a wide window but nearly a quarter of a phone, so the title was reading in a 278px column inside a 390px screen. 2. The carousels put their arrows beside the figure. Two 30px buttons plus gaps took 84px of a 351px column, leaving the chart 267px — the arrows were costing a quarter of the figure. 3. The findings frame stayed 240px tall regardless of the chart's shape, so a 3:1 chart sat in a box two thirds empty. ========================================================================== */ @media (max-width: 620px) { /* ---- hero: the gutter comes back to a phone gutter ---- */ .hero-overlay { padding: 0 20px; } .hero-text-block { max-width: 100%; gap: 20px; } .hero-title { font-size: clamp(28px, 8.6vw, 36px); line-height: 1.18; } .hero-actions .btn-primary { height: 46px; font-size: 16px; padding: 0 6px 0 20px; } .hero-actions .btn-chip { width: 32px; height: 32px; } /* ---- carousels: the figure takes the full width, controls sit under ---- */ .findings-carousel-body, .carousel-body { flex-wrap: wrap; justify-content: center; gap: 14px; } .findings-carousel-image-wrap, .carousel-track-wrap { order: -1; flex: 1 0 100%; width: 100%; } .findings-carousel-image-wrap { height: auto; max-height: 260px; } .findings-carousel-image-wrap img { max-height: 260px; } .findings-carousel-btn, .carousel-btn { width: 34px; height: 34px; } /* ---- the interface caption cannot be hover-only on a touch screen ---- */ .carousel-caption { opacity: 1; position: static; background: none; padding: 10px 2px 0; } .carousel-caption p { color: #4a5058; font-weight: 400; } /* ---- tighter frame for the rest ---- */ .content-section { padding-left: 0; padding-right: 0; } .abstract-top { gap: 12px; } .bibtex-code-box { padding: 14px; } .bibtex-pre { font-size: 11.5px; } .btn-copy { padding: 8px 16px; font-size: 14px; } } @media (max-width: 390px) { .hero-title { font-size: 28px; } .findings-carousel-image-wrap, .findings-carousel-image-wrap img { max-height: 220px; } } /* ========================================================================== Hero as a header, not a cover -------------------------------------------------------------------------- The workshop site's pattern: the hero sits in normal flow, the artwork is a contained figure with its own edges rather than a full-bleed background, and the paper begins straight after it. Nothing is cropped, nothing is masked, and the page no longer spends a whole screen before it says anything. The reversal plot is out of the hero: two figures in a header compete, and the artwork is the one that reads at a glance. The plot belongs in Findings if you want it back. ========================================================================== */ .hero-section { height: auto; min-height: 0; background: none; overflow: visible; padding: 76px 0 0; } .hero-overlay { height: auto; padding: 0 var(--gutter, 40px); justify-content: flex-start; } .hero-inner { display: block; max-width: var(--shell, 1000px); margin: 0 auto; } .hero-text-block { max-width: 780px; gap: 26px; } .hero-figure { margin: 44px 0 0; border-radius: 14px; overflow: hidden; background: #f6f6f6; } .hero-figure img { display: block; width: 100%; height: auto; } @media (max-width: 900px) { .hero-section { padding-top: 56px; } .hero-text-block { max-width: 100%; } .hero-figure { margin-top: 32px; } } @media (max-width: 620px) { .hero-section { padding-top: 40px; } .hero-overlay { padding: 0 20px; } .hero-figure { margin-top: 26px; border-radius: 10px; } } /* ========================================================================== Touch -------------------------------------------------------------------------- Every hover on this page was written without a guard, which on a phone means the state latches: tap a button and it stays "hovered" until you tap somewhere else. So all of them move behind a pointer query, and touch gets :active instead — a state that ends when the finger lifts. Tap targets are raised to 44px where they were smaller, which is the floor a finger can hit reliably. ========================================================================== */ @media (hover: none), (pointer: coarse) { /* ---- nothing latches ---- */ .btn-primary:hover, .res-btn:hover, .resource-btn:hover, .btn-copy:hover, .carousel-btn:hover, .findings-carousel-btn:hover, .nav-item:hover, .dropdown-item:hover, .text-link:hover, .authors-line .text-link:hover, .spine a:hover, .tc-row:hover, .research-row:hover { background-color: initial; box-shadow: none; transform: none; } .res-btn:hover { background-color: #fff; color: var(--btn); } .res-btn:hover .res-icon { color: var(--btn); } .btn-primary:hover, .resource-btn:hover, .btn-copy:hover { background-color: var(--btn); } .carousel-btn:hover, .findings-carousel-btn:hover { background-color: #f2f4f9; } .text-link:hover, .authors-line .text-link:hover { border-bottom-color: rgba(161, 0, 0, 0.55); border-bottom-style: dotted; color: var(--ink); } .btn-primary:hover .btn-chip, .resource-btn:hover .btn-chip { background: rgba(255, 255, 255, 0.16); transform: none; } /* ---- pressed states, which end when the finger lifts ---- */ .btn-primary:active, .resource-btn:active, .btn-copy:active { background-color: var(--btn-active); transform: scale(0.985); } .res-btn:active { background-color: var(--btn); color: #fff; } .res-btn:active .res-icon { color: #fff; } .carousel-btn:active, .findings-carousel-btn:active { background-color: #d7dcee; transform: scale(0.94); } .text-link:active, .authors-line .text-link:active { border-bottom-style: solid; border-bottom-color: var(--accent); color: var(--accent); } .nav-item:active, .dropdown-item:active { background: rgba(45, 60, 131, 0.08); } .spine a:active .dot { background: var(--accent); } /* ---- targets a finger can actually hit ---- */ .carousel-btn, .findings-carousel-btn { width: 44px; height: 44px; } .carousel-btn svg, .findings-carousel-btn svg { width: 20px; height: 20px; } .res-btn { height: 40px; } .dropdown-item { padding: 12px 16px; } .nav-item { min-height: 44px; } .btn-copy { min-height: 44px; } /* A hover-revealed caption can never be reached, so it is simply shown. */ .carousel-caption { opacity: 1; } } /* ---- hero row: words left, finding right ----------------------------------- The header is a two-column row — title and button on one side, the reversal on the other — with the artwork spanning beneath both. The plot is a grid item rather than an absolute layer, so the two can never meet in the middle however the window is sized. */ .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); gap: 6%; align-items: center; } .hero-text-block { max-width: none; } .hero-plot { position: static; display: block; width: 100%; max-width: 400px; margin-left: auto; padding: 0; } .hero-plot svg { width: 100%; height: auto; max-width: none; margin: 0; } .hero-figure { grid-column: 1 / -1; } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: 30px; } .hero-plot { margin: 0; max-width: 360px; } } @media (max-width: 620px) { /* The artwork below already carries the header; a fine two-line chart at phone width would be a third graphic competing for the same glance. */ .hero-plot { display: none; } } /* ---- more room for the question, less for the chart ------------------------ The columns were sized as fractions, so the chart grew with the window and took width the title wanted. The chart is now a fixed 320px and the title takes everything else. */ .hero-inner { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; } .hero-plot { max-width: 320px; } /* ---- a shorter artwork ---------------------------------------------------- The figure was showing the full 16:9 frame at 562px tall, which pushed the paper a long way down. Cropped to 380 with the centre held, so the head and the wave both survive — the loss is sky at the top and empty ground at the bottom. */ .hero-figure { height: 380px; } .hero-figure img { height: 100%; object-fit: cover; object-position: center; } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .hero-figure { height: 300px; } } @media (max-width: 620px) { .hero-figure { height: 210px; } } /* The text block still carried an 88% cap from an earlier layout, so on a phone the title was reading in 298px of a 350px column. It takes the column now. */ @media (max-width: 620px) { .hero-text-block { max-width: 100%; width: 100%; } }