/* S04 / WP15 / ceor-hub -- H1 project index. Surface stylesheet, this page only. Author: Imad A. Adel. It carries four things: the tokens the shared house layer expects, the repairs to the baseline defects the Appearance control makes reachable, the title band that replaced the film hero, and the index table. It defines no new colour that the page's own token set does not already carry. */ /* ---- tokens the shared house layer reads. The hub's own set names them differently, so they are aliased rather than duplicated. ---- */ :root{--panel:var(--ground2);--line:var(--hair);--line2:var(--hair2)} /* The top bar is dark in both schemes (research-hub-brand), so the controls inside it take the bar's own palette. Aliasing to the page tokens would put a near-white pressed button on a white panel in the light scheme. */ :root .topbar{--panel:#25282d;--line:rgba(255,255,255,.14);--line2:rgba(255,255,255,.34)} /* ---- F-WP15-02: the ground was painted on only, so reported no background of its own and a per-scheme read returned transparent in both. ---- */ body{background:var(--ground)} /* ---- F-WP15-01: assets/ambient-drift.css states that the host must hide these on a light theme. The served hub never did, and nothing on it could reach data-theme="light". The Appearance control reaches it at once. ---- */ :root[data-theme="light"] #ambient, :root[data-theme="light"] #grain{display:none} /* ---- light scheme: --faint measured 3.94:1 on the page ground and 4.26:1 on a white panel, both below 4.5:1. It carries the count-box labels, the index row numbers, the figure readouts and the footer rights line, so it is corrected once at the token rather than at eight selectors. #5E6C7B measures 4.97:1 and 5.38:1. The dark scheme's --faint measured clean and is not touched. ---- */ :root[data-theme="light"]{--faint:#5E6C7B} /* the panel letters (a) and (b): the first is pinned to the dark #7D858E and sits on a white figure frame in the light scheme, which measured 3.74:1 */ :root[data-theme="light"] .fig3d .plab{color:var(--muted)} /* ---- Appearance control in the bar ---- */ /* The bar is dark in both schemes, so its controls carry the bar's own pair rather than the page tokens. Read from the page tokens, the pressed button measured 1.11:1 in the light scheme, because .topbar.solid redefines --ink to the light-scheme ink while the bar stays #17191D. Measured here: label 9.2:1, button 12.9:1, pressed button 12.9:1. */ :root .topbar .fbtn{background:#25282d;color:#F1EFE9;border-color:rgba(255,255,255,.34)} :root .topbar .fbtn.on{background:#F1EFE9;color:#25282d;border-color:#F1EFE9} :root .topbar .applbl{color:#B9BBC0} .topbar .appearance{flex:none;gap:5px} @media(max-width:860px){ .topbar .appearance{width:100%;flex-wrap:wrap} /* The nav scrolls horizontally on phones (brand stylesheet, served behaviour). At 320-390 px its content is 446 px wide, so the third label is cut mid-word against a hard edge and reads as a rendering fault rather than as something to scroll. The edge is faded instead. The scrolling itself is the served behaviour and is not changed here; it is recorded for the family pass. */ :root .topnav{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent); } } /* 320 px and 200 % text together: the control's three buttons and its label are the widest inline run in the bar, and at that size they must be allowed to wrap rather than push the document wider than the viewport. */ @media(max-width:400px){ .topbar .appearance{gap:4px} .topbar .appearance .fbtn{padding:5px 7px;font-size:.62rem} .topbar .applbl{width:100%;margin:0 0 2px} } /* ---- title band: no film, no veil, no hero buttons ---- The film band was 100 vh, so whatever the fixed bar did above it was invisible. A band sized to its own content is not: the bar is 72 px at 1440 and 157 px at 320, where it carries the product mark, three nav links and the Appearance control on three rows, and the eyebrow measured 150 px from the top -- under the bar. The band reserves the bar's own height. --barh is declared per breakpoint so the reservation holds with scripting off, and hub.layout.js replaces it with the measured height, so it also holds at 200 % text where the bar grows again. ---- */ :root{--barh:72px} @media(max-width:1180px){:root{--barh:124px}} @media(max-width:860px){:root{--barh:162px}} .hero{ min-height:0;background:var(--ground);border-bottom:1px solid var(--hair); align-items:flex-start;padding:calc(var(--barh) + clamp(26px,4vw,72px)) 0 clamp(30px,4vw,54px); } :root[data-theme="light"] .hero{ --ink:#14202E; --muted:#5A6B7D; --faint:#5A6B7D; --hair:rgba(20,32,46,.12); --hair2:rgba(20,32,46,.26); --washrgb:20,32,46; } /* The band was a photographic island and carried its own dark palette: the title was pinned to #fff and the eyebrow to --sky. On the page ground in the light scheme those measured 1.08:1 and 2.76:1. Measured after: 15.2:1 and 6.3:1. */ :root[data-theme="light"] .hero h1{color:var(--ink)} :root[data-theme="light"] .hero .eyebrow{color:var(--blue)} :root[data-theme="light"] .hero .eyebrow::before{background:var(--blue)} .hero .hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto; padding:0 var(--pad);width:100%} .hero .hero-sub{max-width:52rem} .hb-data{ margin-top:18px;max-width:52rem;font-size:.7rem;line-height:1.8;letter-spacing:.03em; color:var(--muted); } .hb-data .bd{vertical-align:1px} /* ---- the scripting-off paragraph sits before
and the bar is fixed over it, so without this it opens underneath the bar. --barh carries the per-breakpoint value in exactly the state where hub.layout.js cannot run. ---- */ .nojs{margin-top:calc(var(--barh) + 24px)} /* ---- the project index ---- */ .idx-cap{max-width:52rem;margin:0 0 14px;color:var(--muted);font-size:.92rem;line-height:1.7} #projects .cue{margin-bottom:8px} .idx{width:100%;border-collapse:collapse;min-width:860px;text-align:left} .idx-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap} .idx thead th{ font-family:'IBM Plex Mono',monospace;font-size:.58rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--muted); padding:0 16px 10px 0;border-bottom:1px solid var(--hair2);vertical-align:bottom; } .idx tbody th,.idx tbody td{ padding:18px 16px 18px 0;border-bottom:1px solid var(--hair);vertical-align:top; font-size:.86rem;line-height:1.6;color:var(--muted); } .idx-no{width:44px;font-size:.7rem!important;font-weight:500;color:var(--faint)!important; letter-spacing:.08em} .idx-t{width:26%;color:var(--head)!important;font-weight:600;font-size:.95rem!important; letter-spacing:-.01em} .idx-k{width:12%;font-size:.62rem!important;letter-spacing:.12em;text-transform:uppercase; color:var(--accent)!important} .idx-r{width:19%} .idx-s{width:27%} .idx-c{width:16%} .idx-group th{ font-family:'IBM Plex Mono',monospace;font-size:.58rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--muted);padding:26px 0 8px;border-bottom:1px solid var(--hair2); } .idx-go{ display:inline-flex;flex-direction:column;gap:5px;min-height:44px;justify-content:center; color:var(--ink);font-weight:600;font-size:.8rem;text-decoration:none; border-bottom:1px solid var(--hair2);padding-bottom:4px; } .idx-go:hover{border-bottom-color:var(--ink)} .idx-go:focus-visible{outline:2px solid var(--sky2);outline-offset:3px} :root[data-theme="light"] .idx-go:focus-visible{outline-color:var(--blue)} .idx-host{font-size:.6rem;font-weight:400;letter-spacing:.04em;color:var(--muted)} @media(max-width:900px){ .idx{min-width:740px} .idx-t{width:30%} } @media(max-width:600px){ .idx{min-width:660px} .idx thead th,.idx tbody th,.idx tbody td{padding-right:12px} } /* ---- manuscripts: a row with nothing to offer says so, rather than carrying a control that does nothing (F-WP15-03, S01-RES-01) ---- */ .msnone{ font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint); align-self:center; } :root[data-theme="light"] .msnone{color:var(--muted)} .msacts{flex-wrap:wrap} /* ---- footer: the baseline's .foot p+p rule drops the second and later paragraphs to --faint, which measured 3.94:1 in the light scheme. The house credit lines take the body colour instead. ---- */ .foot p.credit{color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:.625rem; letter-spacing:.06em;line-height:1.85;margin-top:2px} .foot .foot-back{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair2)} .foot .foot-back:hover{border-bottom-color:var(--ink)} .foot .foot-back:focus-visible{outline:2px solid var(--sky2);outline-offset:3px} :root[data-theme="light"] .foot .foot-back:focus-visible{outline-color:var(--blue)} /* ---- the count-box label and the figure captions sit on --faint, which is below 4.5:1 against both grounds at this size. ---- */ .stat .k,.fcap,.cconst,.cticks,.ctag{color:var(--muted)} /* ---- the method disclosure inherits the house block; it needs the page's own monospace measure for its equations only ---- */ .disc-b i{font-style:italic} @media (prefers-reduced-motion:reduce){ .idx-go{transition:none} }