/* Universal Law visual identity. Presentation only; no scientific authority. Local assets only. Status words and line patterns remain explicit. */ :root { color-scheme: dark; --ul-background: #07111f; --ul-surface: #0e1b2e; --ul-raised: #13243b; --ul-text: #eff5fd; --ul-muted: #b0c2d6; --ul-link: #78c1ff; --ul-gold: #e9c675; --ul-accept: #8cdec4; --ul-amend: #ffd095; --ul-error: #ffb3b7; --ul-engineering: #bdcbe0; --ul-border: #334960; --ul-edge: #7390af; --ul-focus: #e9c675; --ul-button: #e9c675; --ul-buttonText: #102039; /* Radius family: layout variables, not colours (brand/tokens.json records colours only). */ --ul-radius-s: 6px; --ul-radius-m: 8px; --ul-radius-l: 18px; --ul-radius-pill: 999px; } @media (prefers-color-scheme: light) { :root { color-scheme: light; --ul-background: #f6f8fc; --ul-surface: #ffffff; --ul-raised: #edf2f9; --ul-text: #17263b; --ul-muted: #495e76; --ul-link: #10558d; --ul-gold: #78570b; --ul-accept: #14634d; --ul-amend: #874608; --ul-error: #9c2c3a; --ul-engineering: #526179; --ul-border: #cad6e4; --ul-edge: #6a7e96; --ul-focus: #10558d; --ul-button: #17314f; --ul-buttonText: #ffffff; } } html { scroll-padding-top: 24px; } body { background: var(--ul-background); color: var(--ul-text); font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--ul-link); text-decoration-thickness: 1px; text-underline-offset: .22em; } a:hover { text-decoration-thickness: 2px; } body > header { max-width: 1360px; margin: auto; padding: 28px 4vw; border-bottom: 1px solid var(--ul-border); border-top: 3px solid var(--ul-gold); gap: 24px; flex-wrap: wrap; } .brand { color: var(--ul-text); font-weight: 750; letter-spacing: .13em; position: relative; padding-left: 57px; min-height: 44px; line-height: 1.65; } .brand::before { content: ""; position: absolute; left: 0; top: 1px; width: 42px; height: 42px; background: url("brand/mark.svg?site-release=3eebcf72e0c88771f1c28442e457fc5be93e8a1f93ac55a83dd7f3eb14822c59") center/contain no-repeat; } .brand span { color: var(--ul-muted); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } nav { gap: 12px 24px; flex-wrap: wrap; } nav a { color: var(--ul-text); min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; padding: 0 6px; margin: 0 -6px; } nav a:hover { color: var(--ul-link); text-decoration: underline; } nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; } main { max-width: 1220px; padding: 0 36px; } section { padding: 64px 0; border-bottom-color: var(--ul-border); } .hero, .museum-intro { padding-top: 76px; } .hero h1, .museum-intro h1 { max-width: 940px; } h1, h2 { color: var(--ul-text); font-family: Georgia, "Times New Roman", serif; letter-spacing: -.025em; font-weight: 400; } h1 { font-size: clamp(38px, 5.6vw, 68px); line-height: 1.09; } h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.2; } h3, h4 { color: var(--ul-text); } h3 { font-size: 21px; line-height: 1.35; font-weight: 600; } h4 { font-size: 16px; line-height: 1.4; } /* Reading measure for running prose. The museum's two status lines keep the full width: verification rewrites them, and under the measure each verified text took a second line at 1280px and moved the page below it by 23.8px. */ main > section > p:not(.eyebrow):not(.intro):not(#museum-state):not(#conditional-route-status), .latest-work > p, .about-section > div > p { max-width: 78ch; } .eyebrow { color: var(--ul-gold); font-size: 12px; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; } .intro, .museum-intro #museum-state, .muted, figcaption, footer { color: var(--ul-muted); } #museum-state.error, .conditional-route-refusal, .museum-card.refused p { color: var(--ul-error); } #conditional-route-status { font-size: 14px; } #conditional-route-status:not(.error) { color: var(--ul-muted); } .intro { max-width: 770px; font-size: 18px; } .actions { gap: 12px; flex-wrap: wrap; } .button, button { border: 1px solid var(--ul-button); background: var(--ul-button); color: var(--ul-buttonText); border-radius: var(--ul-radius-s); padding: 11px 19px; min-height: 44px; font: 650 14px/1.5 system-ui, sans-serif; box-shadow: none; } .button:hover, button:hover { filter: brightness(1.06); text-decoration: none; } .button.secondary { background: transparent; border-color: var(--ul-edge); color: var(--ul-link); } .button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; } button:disabled { filter: none; } button:disabled, input:disabled, select:disabled { cursor: not-allowed; } /* Scope note: a neutral edge on a raised block. Amber stays reserved for .cards article.amend, .status-object[data-class="AMEND/open"], .legend-open, .museum-card.amend-open and .fixture-absent. */ .boundary { color: var(--ul-text); background: var(--ul-raised); border-left: 3px solid var(--ul-edge); border-radius: 0 var(--ul-radius-s) var(--ul-radius-s) 0; padding: 13px 18px; line-height: 1.65; } .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .cards article { min-width: 0; background: var(--ul-surface); border: 1px solid var(--ul-border); border-top: 3px solid var(--ul-edge); border-radius: var(--ul-radius-m); padding: 25px; } .cards article.accept { border-top-color: var(--ul-accept); } .cards article.amend { border-top-color: var(--ul-amend); border-top-style: dashed; } .cards article.engineering { border-top: 3px double var(--ul-engineering); } .cards p, td small, dt { color: var(--ul-muted); } .count { color: var(--ul-text); font-size: 44px; } .status-group summary, .status-object { border-color: var(--ul-border); } summary { color: var(--ul-link); cursor: pointer; font-weight: 600; min-height: 40px; } .status-object[data-class="AMEND/open"] { border-left-color: var(--ul-amend); } .custody, .source-header { background: var(--ul-raised); border: 1px solid var(--ul-border); border-radius: var(--ul-radius-s); } .source-header .canvas-disclaimer, .cards .source-header .canvas-disclaimer { border-color: var(--ul-border); color: var(--ul-muted); } .explorer { background: var(--ul-surface); border-color: var(--ul-border); border-radius: var(--ul-radius-m); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } select, input { color: var(--ul-text); background: var(--ul-surface); border: 1px solid var(--ul-edge); min-height: 44px; max-width: 100%; border-radius: var(--ul-radius-s); } input::placeholder { color: var(--ul-muted); opacity: 1; } code, pre, dd, .source-identity { overflow-wrap: anywhere; } code { color: inherit; } /* Legibility floors; sizes only go up. Inline code is .9em of its context but never below the 13px that code, hashes and exact decimals share (style.css set 12px everywhere); a code block is never below 13px nor below the text around it (the 16px exact outputs on Reproduce and Cite stay 16px) and its code takes the block's size, except the museum claim-column blocks (.claim-column pre), which are 12px; quoted source identities (.source-identity dd) are 12px (brand.css loads after museum.css). */ code { font-size: max(.9em, 13px); } pre { font-size: max(13px, 1em); } pre code { font-size: inherit; } .source-identity dt, .source-identity dd, .claim-column pre, .claim-column details, .class-legend span, .object-class { font-size: 12px; } th { color: var(--ul-muted); background: var(--ul-raised); } caption { text-align: left; color: var(--ul-muted); font-size: 13px; padding: 8px 12px; } td { border-color: var(--ul-border); } .table-wrap { border: 1px solid var(--ul-border); border-radius: var(--ul-radius-s); } .error { color: var(--ul-error); } .good { color: var(--ul-accept); } footer { max-width: 1220px; margin: auto; padding: 32px 36px 56px; border-top: 1px solid var(--ul-border); font-size: 14px; color: var(--ul-muted); } footer p { margin: 8px 0; } footer a { color: var(--ul-text); } footer p a, .site-map a { display: inline-block; padding: 10px 2px; margin: -10px 0; } main > section:last-child { border-bottom: 0; } /* Existing plots retain a light drawing surface; their data/geometry code is untouched. */ #coefficient-chart, .geometry-host canvas, .geometry-host svg { background: #ffffff; border-radius: var(--ul-radius-s); } #coefficient-chart { border: 1px solid var(--ul-border); } #coefficient-chart:empty { background: transparent; } #coefficient-chart text { fill: #34475c; } #coefficient-chart line { stroke: #6a7e96; } #coefficient-chart rect[fill="#2b7565"] { fill: #216ca8; } #coefficient-chart rect[fill="#adc6ba"] { fill: #a5bed5; } /* Museum classifications use words AND distinct patterns, never brand color alone. */ .exhibit-links a { background: var(--ul-surface); border-color: var(--ul-edge); border-radius: var(--ul-radius-m); } .exhibit-links a:hover { background: var(--ul-raised); } .exhibit-links span { color: var(--ul-muted); } .class-legend span { background: var(--ul-surface); color: var(--ul-text); } .legend-accept { border-color: var(--ul-accept); } .legend-open { border-color: var(--ul-amend); border-style: dashed; } .legend-engineering { border-color: var(--ul-engineering); border-style: double; } .legend-illustration { border-color: var(--ul-edge); border-style: dotted; } .museum-card { background: var(--ul-surface); border-color: var(--ul-accept); border-radius: var(--ul-radius-m); } .museum-card.amend-open { border-color: var(--ul-amend); border-style: dashed; } .museum-card.engineering-only { border-color: var(--ul-engineering); border-style: double; } .museum-card.illustration { border-color: var(--ul-edge); border-style: dotted; } /* Unavailable views use a fifth pattern no class uses (thick solid left bar) with a literal legend label; .fixture-absent stays dashed amber because an absent fixture is an open obligation. */ .museum-card.refused { border-style: solid; border-width: 1px; border-left-width: 8px; border-color: var(--ul-error); padding: 20px; } .legend-refused { border: 1px solid var(--ul-error); border-left-width: 8px; } .museum-card-header { background: var(--ul-raised); border-color: var(--ul-border); } .amend-open .object-class { color: var(--ul-amend); } .source-identity dt, .canvas-disclaimer, .claim-column h4 { color: var(--ul-muted); } .source-quote { color: var(--ul-text); } .claim-column + .claim-column, .claim-column:first-child { border-color: var(--ul-border); } .claim-column pre { background: var(--ul-raised); border-color: var(--ul-border); } .engineering-strip { background: var(--ul-raised); border-color: var(--ul-border); color: var(--ul-muted); } .fixture-absent { background: var(--ul-raised); border-color: var(--ul-amend); } .geometry-host:focus { outline: 3px solid var(--ul-focus); outline-offset: 4px; } .geometry-host > .museum-visual:focus-visible { outline: 3px solid var(--ul-focus); outline-offset: 4px; } /* Room for that ring outside the figure, where it sits on the card surface in both schemes (inside, it would cross the white SVG): .geometry-host{overflow:hidden} (museum.css) clips at its padding edge, so the host gains 7px (offset 4px + ring 3px) and gives the sides back with -7px margins inside .museum-visual's 18-24px padding; the figure's width, left edge and sideways scroll are unchanged. */ .geometry-host { padding: 7px; margin: 0 -7px; max-width: none; } /* The conditional-route card (conditionals.mjs) has no padding, and its overflow:hidden (museum.css) clips at the padding edge. Its two links are direct children of .museum-card and its six summaries sit in ol > li > details with no inline-end padding, so the card cut one side of their 3px ring at its 4px offset (left of the links, right of the summaries). The card takes the inline inset of the other cards' rows (24px; 18px at museum.css's 600px phone step), more than the 7px the ring needs. */ #conditional-route > .museum-card { padding-inline: 24px; } @media (max-width: 600px) { #conditional-route > .museum-card { padding-inline: 18px; } } /* 8px between the summaries' list items, so a summary's ring (7px below it) ends above the next summary's text. On phones an open quote drops its 40px blockquote margins and takes its list item's width; the list keeps its 40px indent. */ #conditional-route ol > li + li { margin-top: 8px; } @media (max-width: 600px) { #conditional-route blockquote { margin-inline: 0; } } .skip-link { position: absolute; left: 20px; top: -120px; z-index: 10; padding: 12px 18px; background: var(--ul-surface); border: 2px solid var(--ul-focus); border-radius: var(--ul-radius-s); color: var(--ul-text); } .skip-link:focus { top: 12px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, textarea:focus-visible, canvas:focus-visible { outline: 3px solid var(--ul-focus); outline-offset: 4px; } #formal-coverage:focus, .table-wrap:focus-visible { outline: 3px solid var(--ul-focus); outline-offset: 4px; } @media (max-width: 950px) { body > header { align-items: flex-start; } .cards { grid-template-columns: 1fr; } } @media (max-width: 640px) { body > header { padding: 20px; gap: 20px; } main { padding: 0 20px; } footer { padding: 28px 20px 40px; } nav { gap: 4px 18px; } .hero, .museum-intro { padding-top: 42px; } section { padding: 44px 0; } .intro { font-size: 17px; } .actions { align-items: stretch; } .actions .button { width: 100%; text-align: center; } .explorer, .catalog-filters { grid-template-columns: minmax(0, 1fr); } .explorer { padding: 18px; } .section-heading > a { white-space: normal; } .source-header { padding: 12px; } .cards article { padding: 20px; } h1 { font-size: 39px; } .claim-column + .claim-column { border-color: var(--ul-border); } #inventory table { min-width: 560px; } #formal-coverage-table { min-width: 520px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } @media (forced-colors: active) { body, .cards article, .museum-card, .source-header, .boundary, .custody, .explorer { background: Canvas; color: CanvasText; } a, .button.secondary { color: LinkText; } .button, button { background: ButtonFace; color: ButtonText; border-color: ButtonText; } .button[aria-disabled="true"] { color: GrayText; border-color: GrayText; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, textarea:focus-visible, canvas:focus-visible { outline-color: Highlight; } #formal-coverage:focus, .table-wrap:focus-visible { outline-color: Highlight; } .geometry-host > .museum-visual:focus-visible { outline-color: Highlight; } .site-map, .lesson-links a, .legend-refused, .museum-card.refused { border-color: CanvasText; } .brand::before { display: none; } .brand { padding-left: 0; } } /* Secondary reader routes leave the four primary destinations unchanged; the kicker names the row and the links are 44px tap targets. */ .reader-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px 24px; flex-wrap: wrap; max-width: 1360px; margin: 0 auto; padding: 4px 4vw; box-sizing: border-box; border-bottom: 1px solid var(--ul-border); } .reader-tools-label { margin-right: auto; color: var(--ul-muted); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } .reader-tools a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; margin: 0 -6px; text-decoration: none; color: var(--ul-text); font-size: 13px; } .reader-tools a:hover { text-decoration: underline; } @media (max-width: 640px) { .reader-tools { padding: 4px 20px; } } /* Breadcrumb on the four deep pages (one real level; never on a primary page); uppercase via CSS on sentence-case text. */ .breadcrumb { display: block; font-weight: 400; margin: 0 0 22px; } /* 22px keeps the 3px focus ring at its 4px offset clear of the eyebrow below (14px overlapped it by 5px). */ .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ul-muted); } .breadcrumb li + li::before { content: "/" / ""; margin-right: 10px; } /* alternative text "" keeps the separator decorative for assistive technology */ .breadcrumb li[aria-current="page"] { color: var(--ul-text); } .breadcrumb a { color: var(--ul-link); font-size: inherit; display: inline-block; padding: 12px 0; margin: -12px 0; } /* In-page outline under a page intro (Source records): plain weight, wrapping row of 44px targets; undoes style.css nav{font-weight:650}. */ .page-outline { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 14px 0 0; font-size: 14px; font-weight: 400; } .page-outline a { min-height: 44px; display: inline-flex; align-items: center; } /* Shared footer site map: every route from every page without script; undoes style.css nav{display:flex;font-weight:650}. */ .site-map { display: block; font-weight: 400; font-size: 13px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ul-border); } .site-map ul { list-style: none; margin: 0; padding: 0; } .site-map li { margin: 6px 0; } .site-map strong { color: var(--ul-text); margin-right: 6px; } /* Lesson/reading-path links, shared by Explore, Measure and the Research hero (moved from explore.css: measure.html loads explore.css before brand.css). */ .lesson-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 25px; gap: 16px; } .lesson-links a { background: var(--ul-surface); padding: 16px 20px; border: 1px solid var(--ul-border); border-radius: var(--ul-radius-m); font-size: 15px; text-decoration: none; } .lesson-links a:hover { border-color: var(--ul-edge); } .lesson-links span { color: var(--ul-gold); font: 17px Georgia, serif; margin-right: 14px; } .lesson-links a { display: flex; align-items: center; min-height: 44px; margin: 0; } .lesson-links.four-up { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 950px) { .lesson-links.four-up { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .lesson-links { grid-template-columns: 1fr; gap: 8px; } .lesson-links.four-up { grid-template-columns: 1fr; } .lesson-links a { padding: 12px 16px; } } /* Dated list navigation (research hero, Library landing); undoes style.css nav{display:flex;font-weight:650}. */ .cut-list { display: block; font-weight: 400; font-size: 15px; margin-top: 30px; max-width: 78ch; } .cut-list > p { margin: 0 0 6px; color: var(--ul-muted); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } .cut-list ol, .cut-list ul { margin: 0; padding-left: 22px; line-height: 1.7; } .cut-list li { margin: 6px 0; } /* Phone legibility (W5 #4, W5b L4): page headings survive the WCAG 1.4.12 text-spacing override at 375px and 320px (Home and Library measured). */ h1 { overflow-wrap: anywhere; } /* Shared reader components (moved from home.css, so a page without home.css renders them alike: dependencies.html's two p.section-intro are the same muted aside). */ .text-link { font-size: 14px; padding: 10px 0; } .section-intro { max-width: 260px; color: var(--ul-muted); font-size: 15px; } .idea-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; margin-top: 36px; } .step-number { color: var(--ul-gold); font: 14px ui-monospace, monospace; } .idea-grid h3 { font-size: 18px; line-height: 1.5; margin-top: 20px; } .idea-grid p { color: var(--ul-muted); font-size: 15px; } /* One label scale: card and result kickers share the eyebrow's 12px/.16em, uppercased by CSS so source text may be sentence case. */ .card-kicker, .result-kicker { color: var(--ul-muted); font-size: 12px; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; } @media (max-width: 950px) { .idea-grid { grid-template-columns: 1fr; gap: 24px; } .idea-grid article { border-bottom: 1px solid var(--ul-border); padding-bottom: 12px; } .idea-grid article:last-child { border-bottom: 0; } } /* Print keeps the evidence in both colour schemes: every state and control colour takes its light value, and text, links and borders take darker print values on white or near-white (#f4f4f4) surfaces. Hidden here: the skip link, the header navigation, the research tools, the page outline, action-button rows, other buttons and empty search fields (with their labels); dependencies.css hides its filter controls and selected-node section links, explore.css the Explore and Measure experiment controls. Breadcrumbs, the site map and footer links print; Dependencies keeps its node and relation-name buttons, whose text is the evidence (dependencies.css); a filled search field prints its query beside the result count it produced; tables, code, hashes and source links stay; a collapsed disclosure says so. Kept last in this file: .reader-tools and .page-outline set display earlier at equal specificity. button.button: a