/* ========================================================================== AIMS Field Guides — shared design system aims.tidua.io Each guide keeps the palette and metrics it was authored with. data-doc on selects between them: workbook plum 42001 petrol 19011 olive 42005 indigo That covers more than the accent — neutrals are hue-biased toward each accent, semantic colours differ (42005's benefit is teal, not green), and the workbook was set tighter than the three reference guides throughout. See "Tokens, per document" below and "Per-document metrics" near the end. Theme: data-theme="light|dark" on , or unset to follow the OS. ========================================================================== */ /* --------------------------------------------------------------------------- Tokens, per document. Each guide was authored with its own palette: neutrals biased toward its accent, and its own semantic colours (42005's "benefit" is teal, not the green the others use). Averaging them into one house palette changed how three of the four looked, so they are kept exactly as authored and selected by data-doc on . The unprefixed :root block is the platform default and matches the workbook, which is what the home page uses. --------------------------------------------------------------------------- */ :root { --ground: #FAF9FB; --surface: #FFFFFF; --surface-2: #F2EFF4; --ink: #1B1620; --ink-2: #514857; --ink-3: #807587; --rule: #E6E1EA; --rule-strong: #CBC2D2; --pos: #2C6A46; --pos-soft: #E3F0E8; --mid: #8A5A08; --mid-soft: #F7EEDC; --neg: #9B3324; --neg-soft: #F7E8E5; --accent: #5B2A6B; --accent-soft: #F0E8F4; } :root[data-doc="42001"] { --ground: #FAFBFC; --surface: #FFFFFF; --surface-2: #EFF3F5; --ink: #131A1E; --ink-2: #46545B; --ink-3: #74848C; --rule: #DFE7EB; --rule-strong: #C2CFD5; --pos: #2F6B3C; --pos-soft: #E6F1E8; --mid: #8A5A08; --mid-soft: #F7EEDC; --neg: #9B3324; --neg-soft: #F7E8E5; --accent: #0E5A72; --accent-soft: #E1EFF4; } :root[data-doc="19011"] { --ground: #FAFAF6; --surface: #FFFFFF; --surface-2: #F1F2EA; --ink: #1A1C14; --ink-2: #4F5443; --ink-3: #7C8270; --rule: #E3E5D9; --rule-strong: #C7CBB8; --pos: #2E6A4A; --pos-soft: #E3F0E9; --mid: #8A5A08; --mid-soft: #F7EEDC; --neg: #99372A; --neg-soft: #F6E8E5; --accent: #4B5A1C; --accent-soft: #EBEFDC; } :root[data-doc="42005"] { --ground: #FAFAFC; --surface: #FFFFFF; --surface-2: #F2F2F7; --ink: #17161F; --ink-2: #4C4A5C; --ink-3: #7B788D; --rule: #E3E2EC; --rule-strong: #C9C7D6; --pos: #0D6E5F; --pos-soft: #E2F1EE; --mid: #8A5A08; --neg: #A03626; --neg-soft: #F7E9E6; --accent: #322F92; --accent-soft: #ECEBFA; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #131017; --surface: #1C1822; --surface-2: #26202D; --ink: #ECE6F0; --ink-2: #BAB0C2; --ink-3: #8F8598; --rule: #302939; --rule-strong: #473D51; --pos: #6FC195; --pos-soft: #16301F; --mid: #D9A441; --mid-soft: #33280F; --neg: #E68B7A; --neg-soft: #351E1A; --accent: #C99BDD; --accent-soft: #301A3A; } :root:not([data-theme="light"])[data-doc="42001"] { --ground: #0D1316; --surface: #161F23; --surface-2: #1E2A2F; --ink: #E4EDF1; --ink-2: #AEBEC5; --ink-3: #84959D; --rule: #26343A; --rule-strong: #3A4B52; --pos: #6FC183; --pos-soft: #16301D; --mid: #D9A441; --mid-soft: #33280F; --neg: #E68B7A; --neg-soft: #351E1A; --accent: #6BC6E0; --accent-soft: #0F3644; } :root:not([data-theme="light"])[data-doc="19011"] { --ground: #12140E; --surface: #1B1E15; --surface-2: #24281B; --ink: #EAEDE0; --ink-2: #B8BEA8; --ink-3: #8B927C; --rule: #2E3324; --rule-strong: #444B36; --pos: #6FC195; --pos-soft: #16301F; --mid: #D9A441; --mid-soft: #33280F; --neg: #E68B7A; --neg-soft: #351E1A; --accent: #B4C96A; --accent-soft: #2A3315; } :root:not([data-theme="light"])[data-doc="42005"] { --ground: #101017; --surface: #191922; --surface-2: #21212C; --ink: #E9E8F2; --ink-2: #B4B2C4; --ink-3: #8B889D; --rule: #2C2B38; --rule-strong: #403E51; --pos: #4CC3AB; --pos-soft: #12332E; --mid: #D9A441; --neg: #E9887A; --neg-soft: #37201C; --accent: #A6A2FF; --accent-soft: #24224A; } } :root[data-theme="dark"] { --ground: #131017; --surface: #1C1822; --surface-2: #26202D; --ink: #ECE6F0; --ink-2: #BAB0C2; --ink-3: #8F8598; --rule: #302939; --rule-strong: #473D51; --pos: #6FC195; --pos-soft: #16301F; --mid: #D9A441; --mid-soft: #33280F; --neg: #E68B7A; --neg-soft: #351E1A; --accent: #C99BDD; --accent-soft: #301A3A; } :root[data-theme="dark"][data-doc="42001"] { --ground: #0D1316; --surface: #161F23; --surface-2: #1E2A2F; --ink: #E4EDF1; --ink-2: #AEBEC5; --ink-3: #84959D; --rule: #26343A; --rule-strong: #3A4B52; --pos: #6FC183; --pos-soft: #16301D; --mid: #D9A441; --mid-soft: #33280F; --neg: #E68B7A; --neg-soft: #351E1A; --accent: #6BC6E0; --accent-soft: #0F3644; } :root[data-theme="dark"][data-doc="19011"] { --ground: #12140E; --surface: #1B1E15; --surface-2: #24281B; --ink: #EAEDE0; --ink-2: #B8BEA8; --ink-3: #8B927C; --rule: #2E3324; --rule-strong: #444B36; --pos: #6FC195; --pos-soft: #16301F; --mid: #D9A441; --mid-soft: #33280F; --neg: #E68B7A; --neg-soft: #351E1A; --accent: #B4C96A; --accent-soft: #2A3315; } :root[data-theme="dark"][data-doc="42005"] { --ground: #101017; --surface: #191922; --surface-2: #21212C; --ink: #E9E8F2; --ink-2: #B4B2C4; --ink-3: #8B889D; --rule: #2C2B38; --rule-strong: #403E51; --pos: #4CC3AB; --pos-soft: #12332E; --mid: #D9A441; --neg: #E9887A; --neg-soft: #37201C; --accent: #A6A2FF; --accent-soft: #24224A; } /* Platform-level, theme-independent */ :root { --max: 1200px; --prose: 68ch; --topbar-h: 56px; } /* Aliases: the guides' markup was authored against these names. Each resolves to the document's own semantic colour, so a class means the same thing everywhere while looking the way its guide intended. */ :root { --benefit: var(--pos); --benefit-soft: var(--pos-soft); --good: var(--pos); --good-soft: var(--pos-soft); --pass: var(--pos); --pass-soft: var(--pos-soft); --warn: var(--mid); --warn-soft: var(--mid-soft); --part: var(--mid); --part-soft: var(--mid-soft); --caution: var(--mid); --harm: var(--neg); --harm-soft: var(--neg-soft); --stop: var(--neg); --stop-soft: var(--neg-soft); --fail: var(--neg); --fail-soft: var(--neg-soft); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; } /* ========================================================================== Platform chrome — top bar ========================================================================== */ .topbar { position: sticky; top: 0; z-index: 60; height: var(--topbar-h); display: flex; align-items: center; gap: 20px; padding: 0 28px; background: color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter: saturate(150%) blur(10px); -webkit-backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--rule); } .topbar-inner { width: 100%; max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 20px; } .brand { font-family: Archivo, "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: 9px; } .brand .mark { width: 20px; height: 20px; flex: none; border-radius: 3px; background: var(--accent); display: grid; place-items: center; color: var(--surface); font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600; line-height: 1; } .topnav { display: flex; gap: 3px; margin-left: 8px; overflow-x: auto; scrollbar-width: none; } .topnav::-webkit-scrollbar { display: none; } .topnav a { font-family: Archivo, sans-serif; font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; padding: 6px 10px; border-radius: 4px; } .topnav a:hover { color: var(--ink); background: var(--surface-2); } .topnav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; } .iconbtn { appearance: none; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); border-radius: 4px; cursor: pointer; height: 30px; padding: 0 10px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 7px; } .iconbtn:hover { color: var(--accent); border-color: var(--rule-strong); } .iconbtn kbd { font-family: inherit; font-size: 10px; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 3px; padding: 1px 4px; } @media (max-width: 900px) { .topbar { padding: 0 18px; } .topnav a { padding: 6px 8px; font-size: 12.5px; } .iconbtn kbd { display: none; } } /* ========================================================================== Search ========================================================================== */ .search-overlay { position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--ink) 34%, transparent); display: none; padding: 10vh 20px 20px; } .search-overlay[open], .search-overlay.is-open { display: block; } .search-panel { max-width: 660px; margin: 0 auto; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 6px; overflow: hidden; box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--ink) 45%, transparent); } .search-panel input { width: 100%; border: none; outline: none; background: transparent; padding: 16px 18px; font-family: inherit; font-size: 17px; color: var(--ink); border-bottom: 1px solid var(--rule); } .search-panel input::placeholder { color: var(--ink-3); } .search-results { max-height: 58vh; overflow-y: auto; margin: 0; padding: 0; list-style: none; } .search-results li { margin: 0; border-bottom: 1px solid var(--rule); } .search-results li:last-child { border-bottom: none; } .search-results a { display: block; padding: 12px 18px; text-decoration: none; color: inherit; } .search-results a:hover, .search-results a:focus-visible, .search-results li.is-active a { background: var(--surface-2); } .search-results .r-doc { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 3px; } .search-results .r-title { font-family: Archivo, sans-serif; font-weight: 600; font-size: 15px; } .search-results .r-snip { font-size: 14px; color: var(--ink-3); margin-top: 2px; line-height: 1.45; } .search-results mark { background: var(--accent-soft); color: var(--accent); padding: 0 2px; border-radius: 2px; } .search-empty { padding: 22px 18px; color: var(--ink-3); font-size: 15px; } .search-hint { padding: 9px 18px; border-top: 1px solid var(--rule); background: var(--surface-2); font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; } /* ========================================================================== Page frame ========================================================================== */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px 96px; } .masthead { border-bottom: 1px solid var(--rule); padding: 64px 0 40px; margin-bottom: 48px; } .eyebrow { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 20px; } h1 { font-family: Archivo, "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: clamp(2.4rem, 5.4vw, 3.9rem); line-height: 1.02; letter-spacing: -0.024em; text-wrap: balance; margin: 0 0 10px; } .subtitle { font-size: clamp(1.05rem, 2.1vw, 1.35rem); color: var(--ink-2); max-width: 46ch; margin: 0 0 34px; text-wrap: balance; } .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .fact { background: var(--surface); padding: 16px 18px; } .fact dt { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; } .fact dd { margin: 0; font-family: Archivo, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.35; } .cols { display: block; } @media (min-width: 1080px) { .cols { display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: 60px; align-items: start; } /* The guides pinned the sidebar 28px from the top of the viewport; here it clears the platform's top bar as well. Same optical result. */ .toc { position: sticky; top: calc(var(--topbar-h) + 28px); max-height: calc(100vh - var(--topbar-h) - 56px); overflow-y: auto; } } /* sidebar — .toc in the guides, .rail in the workbook */ .toc { border-left: 2px solid var(--rule); padding-left: 16px; margin-bottom: 48px; } .toc p { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; } .toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .toc a, .rail a { font-family: Archivo, sans-serif; font-size: 13.5px; line-height: 1.3; color: var(--ink-2); text-decoration: none; display: block; } .toc a:hover, .toc a:focus-visible, .rail a:hover, .rail a:focus-visible { color: var(--accent); } .toc a.is-current, .rail a.is-current { color: var(--accent); font-weight: 600; } .rail { margin-bottom: 48px; } .rail-label { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; } .rail nav { border-left: 2px solid var(--rule); padding-left: 15px; } .rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .rail .part-label { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); margin: 14px 0 2px; } .rail .part-label:first-child { margin-top: 0; } .progress-box { border: 1px solid var(--rule); background: var(--surface); padding: 14px 16px; margin-bottom: 22px; } .progress-count { font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 0 0 8px; line-height: 1; } .progress-count span { font-size: 0.9rem; font-weight: 500; color: var(--ink-3); } .bar { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; } .bar > i { display: block; height: 100%; width: 0%; background: var(--accent); transition: width .25s ease; } .reset { margin-top: 12px; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; background: none; border: none; color: var(--ink-3); cursor: pointer; padding: 2px 0; text-decoration: underline; text-underline-offset: 3px; } .reset:hover { color: var(--accent); } /* ========================================================================== Typography ========================================================================== */ main > section { margin-bottom: 76px; scroll-margin-top: calc(var(--topbar-h) + 24px); } h2 { font-family: Archivo, sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -0.018em; line-height: 1.12; text-wrap: balance; margin: 0 0 8px; padding-top: 22px; border-top: 2px solid var(--ink); } h2 .num { display: block; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 12px; } h3 { font-family: Archivo, sans-serif; font-weight: 600; font-size: 1.24rem; letter-spacing: -0.01em; margin: 40px 0 10px; text-wrap: balance; } h4 { font-family: Archivo, sans-serif; font-weight: 600; font-size: 1rem; margin: 26px 0 6px; } p, ul, ol { max-width: var(--prose); } p { margin: 0 0 16px; } ul, ol { margin: 0 0 16px; padding-left: 1.15em; } li { margin-bottom: 7px; } a { color: var(--accent); text-underline-offset: 2px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } strong { font-weight: 600; } em { font-style: italic; } code, .mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 0.87em; } code { background: var(--surface-2); padding: 1px 5px; border-radius: 3px; } .lede { font-size: 1.14rem; color: var(--ink-2); max-width: 60ch; margin-bottom: 28px; } .part-divider { margin: 0 0 44px; padding: 30px 0 0; border-top: 4px double var(--ink); } .part-divider .kicker { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; } .part-divider h2 { border-top: none; padding-top: 0; font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 10px; } .part-divider p { color: var(--ink-2); font-size: 1.08rem; max-width: 58ch; margin: 0; } /* ========================================================================== Blocks ========================================================================== */ .clause { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: start; } .clause:first-of-type { border-top: 1px solid var(--rule); } .clause > .ref { font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; color: var(--accent); padding-top: 3px; font-variant-numeric: tabular-nums; } .clause h4 { margin: 0 0 6px; font-size: 1.05rem; } .clause p { margin: 0 0 10px; max-width: 62ch; } .clause p:last-child { margin-bottom: 0; } .clause .does { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.02em; } .clause .does b { color: var(--ink-2); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; } @media (max-width: 560px) { .clause { grid-template-columns: 1fr; gap: 4px; } } .note { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--accent); padding: 18px 20px; margin: 26px 0; max-width: var(--prose); } .note.caution { border-left-color: var(--mid); } .note.stop, .note.harm { border-left-color: var(--neg); } .note p { margin-bottom: 10px; } .note p:last-child { margin-bottom: 0; } .note .tag { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 8px; } .scroller { overflow-x: auto; margin: 24px 0; border: 1px solid var(--rule); background: var(--surface); } table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14.5px; } th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; } thead th { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; background: var(--surface-2); border-bottom: 1px solid var(--rule-strong); white-space: nowrap; } tbody tr:last-child td { border-bottom: none; } td.mono, th.mono { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; } td.mono { color: var(--accent); font-weight: 500; } tr.grouphead td { background: var(--accent-soft); font-family: Archivo, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.01em; color: var(--accent); } .chip { display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; white-space: nowrap; } .chip-b, .chip-g, .chip-p { background: var(--pos-soft); color: var(--pos); } .chip-w { background: var(--mid-soft); color: var(--mid); } .chip-h, .chip-s, .chip-f { background: var(--neg-soft); color: var(--neg); } .chip-a { background: var(--accent-soft); color: var(--accent); } .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 26px 0; } .split > div { background: var(--surface); padding: 20px 22px; } .split h4 { margin-top: 0; } .split p { max-width: none; } .split ul { margin-bottom: 0; padding-left: 1.05em; max-width: none; } .split li { font-size: 15px; } .pane-benefit h4, .pane-good h4, .pane-yes h4 { color: var(--pos); } .pane-harm h4, .pane-bad h4, .pane-no h4 { color: var(--neg); } .form-section { border: 1px solid var(--rule); background: var(--surface); padding: 0; margin: 0 0 -1px; } .form-head { display: flex; gap: 12px; align-items: baseline; padding: 14px 20px; background: var(--surface-2); border-bottom: 1px solid var(--rule); } .form-head .ref { font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; color: var(--accent); } .form-head h4 { margin: 0; font-size: 1rem; } .form-body { padding: 16px 20px; } .form-body ul { margin: 0; padding-left: 1.1em; } .form-body li { font-size: 15px; margin-bottom: 5px; } .steps { counter-reset: step; list-style: none; padding: 0; max-width: var(--prose); } .steps > li { counter-increment: step; position: relative; padding-left: 44px; margin-bottom: 22px; } .steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 3px 7px; border-radius: 2px; } .steps h4 { margin: 0 0 4px; } .steps p { margin: 0; font-size: 15.5px; color: var(--ink-2); } .principles { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 26px 0; } .principle { background: var(--surface); padding: 18px 22px; display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 18px; align-items: start; } .principle .ref { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-weight: 600; color: var(--accent); padding-top: 3px; } .principle h4 { margin: 0 0 5px; font-size: 1.02rem; } .principle p { margin: 0; max-width: 62ch; font-size: 15.5px; } @media (max-width: 560px) { .principle { grid-template-columns: 1fr; gap: 4px; } } /* workbook — step cards, question banks, checklists */ .step { border: 1px solid var(--rule); background: var(--surface); margin: 0 0 -1px; } .step-head { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 14px; align-items: baseline; padding: 14px 20px; background: var(--surface-2); border-bottom: 1px solid var(--rule); } .step-head .n { font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; } .step-head h4 { margin: 0; font-size: 1.02rem; } .step-body { padding: 16px 20px; } .step-body > :last-child { margin-bottom: 0; } .step-body p, .step-body ul, .step-body ol { max-width: 62ch; } .qbank { border: 1px solid var(--rule); background: var(--surface); margin: 0 0 -1px; } .qbank-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 13px 20px; background: var(--surface-2); border-bottom: 1px solid var(--rule); } .qbank-head .ref { font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; } .qbank-head h4 { margin: 0; font-size: 1rem; } .qbank-head .who { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); margin-left: auto; } .qbank-body { padding: 14px 20px 16px; } .qbank-body .qs { margin: 0 0 14px; padding-left: 1.05em; } .qbank-body .qs li { font-size: 15.5px; margin-bottom: 6px; } .evi, .weak { font-size: 14px; margin: 0 0 8px; max-width: 62ch; color: var(--ink-2); padding-left: 12px; border-left: 2px solid var(--rule); } .evi b, .weak b { display: block; font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.11em; text-transform: uppercase; margin-bottom: 3px; font-weight: 500; } .evi { border-left-color: var(--pos); } .evi b { color: var(--pos); } .weak { border-left-color: var(--neg); } .weak b { color: var(--neg); } .checklist { list-style: none; padding: 0; margin: 20px 0; max-width: var(--prose); } .checklist li { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--rule); margin: 0; } .checklist li:first-child { border-top: 1px solid var(--rule); } .checklist input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 3px 0 0; border: 1.5px solid var(--rule-strong); border-radius: 3px; background: var(--surface); cursor: pointer; position: relative; flex: none; } .checklist input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .checklist input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(45deg); } .checklist label { cursor: pointer; font-size: 16px; line-height: 1.5; } .checklist input:checked + label { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; } .checklist label b { font-weight: 600; } .checklist label .hint { display: block; font-size: 14px; color: var(--ink-3); margin-top: 2px; } .script { font-family: "IBM Plex Mono", monospace; font-size: 13.5px; line-height: 1.65; background: var(--surface-2); border: 1px solid var(--rule); padding: 16px 18px; margin: 20px 0; max-width: var(--prose); white-space: pre-wrap; overflow-x: auto; } /* ========================================================================== Home page ========================================================================== */ .hero { padding: 64px 0 44px; border-bottom: 1px solid var(--rule); margin-bottom: 52px; } .hero h1 { max-width: 16ch; } .hero .subtitle { max-width: 54ch; font-size: clamp(1.1rem, 2.2vw, 1.42rem); } .deck { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 0 0 60px; } @media (min-width: 860px) { .deck { grid-template-columns: 1fr 1fr; } } .card { background: var(--surface); padding: 26px 26px 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 9px; position: relative; } .card:hover { background: var(--surface-2); } .card .card-ref { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--card-accent, var(--accent)); } .card h3 { margin: 0; font-size: 1.42rem; letter-spacing: -0.018em; } .card p { margin: 0; color: var(--ink-2); font-size: 15.5px; max-width: 44ch; } .card .card-meta { margin-top: auto; padding-top: 14px; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.07em; color: var(--ink-3); text-transform: uppercase; } .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--card-accent, var(--accent)); } .card.is-primary { background: var(--accent-soft); } .card.is-primary:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); } .card-workbook { --card-accent: #5B2A6B; } .card-42001 { --card-accent: #0E5A72; } .card-19011 { --card-accent: #4B5A1C; } .card-42005 { --card-accent: #322F92; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card-workbook { --card-accent: #C99BDD; } :root:not([data-theme="light"]) .card-42001 { --card-accent: #6BC6E0; } :root:not([data-theme="light"]) .card-19011 { --card-accent: #B4C96A; } :root:not([data-theme="light"]) .card-42005 { --card-accent: #A6A2FF; } } :root[data-theme="dark"] .card-workbook { --card-accent: #C99BDD; } :root[data-theme="dark"] .card-42001 { --card-accent: #6BC6E0; } :root[data-theme="dark"] .card-19011 { --card-accent: #B4C96A; } :root[data-theme="dark"] .card-42005 { --card-accent: #A6A2FF; } .routes { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 24px 0 60px; } @media (min-width: 760px) { .routes { grid-template-columns: repeat(3, 1fr); } } .route { background: var(--surface); padding: 22px 24px; } .route h4 { margin: 0 0 6px; } .route p { margin: 0 0 12px; font-size: 15px; color: var(--ink-2); max-width: none; } .route a { font-family: Archivo, sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; } .route a:hover { text-decoration: underline; } /* ========================================================================== Footer ========================================================================== */ footer { border-top: 2px solid var(--ink); padding-top: 24px; margin-top: 32px; font-size: 14px; color: var(--ink-3); } footer p { max-width: 72ch; } .attribution { font-family: Archivo, sans-serif; font-size: 13px; color: var(--ink-2); margin-top: 22px; } .sitefoot { border-top: 1px solid var(--rule); margin-top: 0; padding: 30px 28px 44px; font-size: 13.5px; color: var(--ink-3); } .sitefoot-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px 40px; } .sitefoot a { color: var(--ink-2); } .sitefoot p { max-width: 60ch; margin: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--surface); color: var(--accent); padding: 10px 16px; border: 1px solid var(--accent); font-family: Archivo, sans-serif; font-size: 14px; } .skip-link:focus { left: 8px; top: 8px; } /* ========================================================================== Per-document metrics The four guides were authored as two lineages. The three reference guides share one set of spacing and type metrics — that is the base above. The workbook was set slightly tighter throughout, and a handful of values are particular to one guide. Restored here so each document renders exactly as it was authored rather than averaged into a house style. ========================================================================== */ [data-doc="19011"] .clause { grid-template-columns: 74px minmax(0, 1fr); } [data-doc="42005"] .subtitle { max-width: 44ch; } [data-doc="workbook"] body, body[data-doc="workbook"] { line-height: 1.6; } [data-doc="workbook"] .masthead { padding: 60px 0 36px; margin-bottom: 44px; } [data-doc="workbook"] h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); line-height: 1.0; letter-spacing: -0.026em; margin: 0 0 12px; } [data-doc="workbook"] .subtitle { max-width: 48ch; margin: 0 0 32px; } [data-doc="workbook"] .facts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } [data-doc="workbook"] main > section { margin-bottom: 70px; scroll-margin-top: calc(var(--topbar-h) + 20px); } [data-doc="workbook"] h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); margin: 0 0 10px; padding-top: 20px; } [data-doc="workbook"] h2 .num { margin-bottom: 11px; } [data-doc="workbook"] h3 { font-size: 1.22rem; margin: 38px 0 10px; } [data-doc="workbook"] h4 { margin: 24px 0 6px; } [data-doc="workbook"] p { margin: 0 0 15px; } [data-doc="workbook"] ul, [data-doc="workbook"] ol { margin: 0 0 15px; } [data-doc="workbook"] li { margin-bottom: 6px; } [data-doc="workbook"] .lede { font-size: 1.13rem; margin-bottom: 26px; } [data-doc="workbook"] .clause { grid-template-columns: 74px minmax(0, 1fr); } [data-doc="workbook"] .note { padding: 17px 20px; margin: 24px 0; } [data-doc="workbook"] .scroller { margin: 22px 0; } [data-doc="workbook"] table { min-width: 580px; } [data-doc="workbook"] th, [data-doc="workbook"] td { padding: 10px 14px; } [data-doc="workbook"] .split { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin: 24px 0; } [data-doc="workbook"] .split > div { padding: 18px 20px; } [data-doc="workbook"] .split h4 { margin-bottom: 8px; } [data-doc="workbook"] .step-head h4, [data-doc="workbook"] .qbank-head h4 { margin: 0; } [data-doc="workbook"] footer { padding-top: 22px; margin-top: 30px; } [data-doc="workbook"] .attribution { margin-top: 20px; } /* The workbook's two-column layout starts 20px later and runs a wider rail. */ @media (min-width: 1080px) and (max-width: 1099.98px) { [data-doc="workbook"] .cols { display: block; } } @media (min-width: 1100px) { [data-doc="workbook"] .cols { grid-template-columns: 230px minmax(0, 1fr); gap: 56px; } [data-doc="workbook"] .rail { position: sticky; top: calc(var(--topbar-h) + 24px); max-height: calc(100vh - var(--topbar-h) - 48px); overflow-y: auto; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } @media print { .topbar, .rail, .toc, .search-overlay, .sitefoot, .skip-link { display: none !important; } .cols { display: block; } body { font-size: 11pt; background: #fff; color: #000; } .step, .qbank, .note, .scroller, .form-section, .principle { break-inside: avoid; } h2, h3 { break-after: avoid; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } }