/* Death Penalty Transparency Monitor — design system. Every colour, font and radius is read from CSS custom properties that the active theme writes onto . Switching theme rebinds those variables; no rule below hard-codes a theme value. */ * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent); color: var(--accent-ink); } ::-webkit-scrollbar { height: 8px; width: 8px; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; } @keyframes dppulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } } a { color: inherit; } h1, h2, h3 { font-family: var(--font-head); font-weight: 600; letter-spacing: -.01em; } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; } .tabnum { font-variant-numeric: tabular-nums; } .muted { color: var(--ink-3); } .muted-2 { color: var(--ink-2); } .accent { color: var(--accent); } .eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } /* --- accessibility: focus + skip link ------------------------------------ */ a:focus-visible, button:focus-visible, summary:focus-visible, .pill:focus-visible, .input:focus-visible, .select:focus-visible, .dr-row:focus-visible, .kanban-card:focus-visible, .module:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); } .ng-state:focus-visible { outline: none; stroke: var(--ink); stroke-width: 2.4; } .skip-link { position: absolute; left: 12px; top: -48px; z-index: 200; background: var(--accent); color: var(--accent-ink); padding: 9px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 600; text-decoration: none; transition: top .15s; } .skip-link:focus { top: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Inline content links stay distinguishable even though `a` inherits colour. */ .page-body a, .muted a, .muted-2 a, .messages a, .ft-list a, p a { color: var(--accent); text-decoration: underline; } /* --- header -------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--surface); border-bottom: 1px solid var(--line); } .site-header .bar { display: flex; align-items: center; gap: 20px; padding: 11px 24px; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; } .brand .mark { width: 32px; height: 32px; background: var(--accent); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--accent-ink); font-family: var(--font-head); font-weight: 700; font-size: 17px; } .brand .org { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .brand .name { font-family: var(--font-head); font-weight: 600; font-size: 15px; } .nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; } .nav a { padding: 9px 12px; text-decoration: none; color: var(--ink-2); font-size: 13.5px; font-weight: 500; border-radius: var(--radius); white-space: nowrap; border-bottom: 2px solid transparent; } .nav a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); } @media (max-width: 720px) { .site-header .bar { flex-wrap: wrap; gap: 10px; padding: 10px 16px; } .nav { margin-left: 0; width: 100%; gap: 0; border-top: 1px solid var(--line); padding-top: 4px; } .nav a { padding: 8px 11px; } } main.wrap { min-height: 60vh; } /* --- buttons / pills ----------------------------------------------------- */ .btn { display: inline-block; padding: 13px 22px; border-radius: var(--radius); font-size: 15px; font-weight: 600; cursor: pointer; font-family: var(--font-body); text-decoration: none; border: 1px solid transparent; } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-sm { padding: 8px 14px; font-size: 12.5px; border: 1px solid var(--line); color: var(--ink-2); background: transparent; border-radius: var(--radius); } .pill { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: var(--font-body); white-space: nowrap; text-decoration: none; display: inline-block; transition: all .12s; } .pill.active { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; } .tag { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 600; } /* --- forms --------------------------------------------------------------- */ .field-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; display: block; margin-bottom: 8px; } .input, .select, textarea.input { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 14px; font-family: var(--font-body); } .select { cursor: pointer; } /* --- cards / surfaces ---------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .shadow { box-shadow: 0 1px 2px rgba(20,16,12,.04), 0 14px 40px rgba(20,16,12,.07); } .section { padding: 34px 0 60px; } .page-head { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 26px; } .page-head h1 { font-size: clamp(28px, 3.4vw, 42px); margin: 0; } .page-head p { font-size: 15px; color: var(--ink-2); margin: 8px 0 0; max-width: 68ch; } /* --- home ---------------------------------------------------------------- */ .hero { padding: 60px 0 44px; border-bottom: 1px solid var(--line); } .hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: center; } .hero h1 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.03; margin: 16px 0 0; text-wrap: balance; } .hero p { font-size: 17px; color: var(--ink-2); max-width: 50ch; margin: 22px 0 0; } .hero-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; } .counter-card .live { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .counter-card .live .dot { width: 8px; height: 8px; border-radius: 50%; background: #3d7a4f; animation: dppulse 1.6s infinite; } .bignum { font-family: var(--font-head); font-weight: 600; line-height: .95; font-variant-numeric: tabular-nums; } .counter-card .bignum { font-size: clamp(58px, 9vw, 108px); margin: 14px 0 6px; } .hstat-row { display: flex; gap: 24px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); } .hstat .n { font-family: var(--font-head); font-size: 26px; font-weight: 600; } .hstat .l { font-size: 12px; color: var(--ink-3); } .cost-band { margin: 38px 0; background: var(--ink); color: var(--bg); border-radius: var(--radius); padding: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; align-items: center; } .cost-band .bignum { font-size: clamp(38px, 6vw, 72px); line-height: 1; margin-top: 10px; } .cost-band .note { font-size: 14px; opacity: .85; line-height: 1.6; border-left: 2px solid rgba(255,255,255,.25); padding-left: 20px; } .modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .module { text-align: left; background: var(--surface); padding: 24px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; min-height: 172px; } .module:hover { background: var(--surface-2); } .module .n { font-family: var(--font-head); font-size: 13px; color: var(--accent); font-weight: 600; letter-spacing: .06em; } .module .t { font-family: var(--font-head); font-size: 19px; font-weight: 600; } .module .d { font-size: 13.5px; color: var(--ink-2); flex: 1; } .module .go { font-size: 13px; font-weight: 600; } .home-foot { padding: 44px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 36px; } blockquote.case { margin: 0; font-family: var(--font-head); font-size: 22px; line-height: 1.4; text-wrap: pretty; } .update-row { padding: 14px 0; border-bottom: 1px solid var(--line); } .update-row .date { font-size: 12px; color: var(--accent); font-weight: 600; } .update-row .text { font-size: 14.5px; } /* --- tracker ------------------------------------------------------------- */ /* 12-col split: narrow filters (3) on the left, a wide map + the results (9) on the right. Filters are sticky so they stay in reach while you scroll. */ .tracker-grid { display: grid; grid-template-columns: 3fr 9fr; gap: 28px; align-items: start; } .tracker-sidebar { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; padding-right: 4px; } .tracker-filters { display: flex; flex-direction: column; gap: 18px; } .tracker-right { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .tracker-main { min-width: 0; transition: opacity .15s; } .tracker-map { padding: 20px; } .tracker-map .map-title { font-family: var(--font-head); font-size: 17px; font-weight: 600; margin-bottom: 14px; } .tracker-map .ng-map { width: 100%; height: auto; max-height: 480px; } .tracker-map .map-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .map-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600; padding: 4px 4px 4px 12px; border-radius: 999px; } .map-chip a { text-decoration: none; color: var(--accent); width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 15px; line-height: 1; } .map-chip a:hover { background: var(--accent); color: var(--accent-ink); } .results-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; } .filter-pills { display: flex; flex-wrap: wrap; gap: 7px; } @media (max-width: 880px) { /* Stack as filters → map → table (natural order, filters reachable). */ .tracker-grid { grid-template-columns: 1fr; } .tracker-sidebar { position: static; max-height: none; overflow: visible; } } .table-shell { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .dr-table { min-width: 680px; } .dr-row { display: grid; grid-template-columns: 108px 1.1fr 1.1fr 96px 92px 1.2fr; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); align-items: center; font-size: 13.5px; text-decoration: none; color: inherit; } .dr-head { padding: 13px 18px; background: var(--surface-2); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .dr-row:hover:not(.dr-head) { background: var(--surface-2); } .dr-row .cid { font-weight: 600; color: var(--accent); } .dr-row .num { text-align: right; font-weight: 600; } .sort-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .tracker-main[aria-busy="true"] { opacity: .5; } /* --- case detail --------------------------------------------------------- */ .case-detail { max-width: 760px; } .kv { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .kv .k { color: var(--ink-3); } .kv .v { font-weight: 600; text-align: right; } .metric-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 22px 0 26px; } .metric { background: var(--surface-2); padding: 16px; } .metric .label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .metric .big { font-family: var(--font-head); font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); } .timeline { display: flex; flex-direction: column; } .tl-event { display: flex; gap: 14px; } .tl-event .rail { display: flex; flex-direction: column; align-items: center; flex: none; } .tl-event .node { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); margin-top: 4px; } .tl-event .line { width: 2px; flex: 1; background: var(--line); } .tl-event .body { padding-bottom: 18px; } .tl-event .lab { font-size: 14px; font-weight: 600; } .tl-event .meta { font-size: 12.5px; color: var(--ink-3); } .story-box { background: var(--accent-soft); border-radius: var(--radius); padding: 20px; } .story-box p { font-family: var(--font-head); font-size: 16px; line-height: 1.5; margin: 0; text-wrap: pretty; } /* --- case status (kanban) ------------------------------------------------ */ .board-scroll { overflow-x: auto; padding-bottom: 8px; } .board { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 16px; min-width: 1080px; } .col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .col-head { padding: 13px 15px; border-bottom: 2px solid var(--line); display: flex; align-items: center; gap: 8px; background: var(--surface); } .col-head .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .col-head .title { font-size: 13px; font-weight: 700; } .col-head .count { margin-left: auto; font-size: 12px; color: var(--ink-3); font-weight: 600; } .col-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 80px; } .kanban-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px; text-decoration: none; color: inherit; } .kanban-card:hover { border-color: var(--accent); } .kanban-card .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .kanban-card .cid { font-size: 13px; font-weight: 700; color: var(--accent); } .staff-strip { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ink-3); } .kanban-item { display: flex; flex-direction: column; gap: 6px; } .upd-btn { width: 100%; cursor: pointer; } .view-toggle { display: inline-flex; } .view-toggle a { padding: 8px 16px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink-2); background: transparent; } .view-toggle a:first-child { border-radius: var(--radius) 0 0 var(--radius); border-right: none; } .view-toggle a:last-child { border-radius: 0 var(--radius) var(--radius) 0; } .view-toggle a.active { background: var(--ink); color: var(--bg); } .staff-panel { margin-top: 26px; background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } /* --- dashboard ----------------------------------------------------------- */ .dash-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; } .dash-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; } .bar-line { display: grid; grid-template-columns: 150px 1fr 40px; gap: 10px; align-items: center; font-size: 13px; margin-bottom: 11px; } .bar-track { height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden; } .bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 99px; } .bar-fill.alt { background: var(--ink-3); } .bar-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 420px; } .heat-cell { display: flex; align-items: flex-end; padding: 4px; aspect-ratio: 1/1; border: none; border-radius: 3px; font-size: 8.5px; font-weight: 700; letter-spacing: .02em; line-height: 1; cursor: pointer; overflow: hidden; text-decoration: none; color: #3a2a20; } .heat-cell.dark { color: #fff; } .legend { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 11px; color: var(--ink-3); } .legend .sw { width: 20px; height: 11px; border-radius: 2px; } .gender-bars { display: flex; align-items: flex-end; gap: 24px; height: 150px; } .gender-bars .g { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; } .gender-bars .g .bar { width: 100%; max-width: 70px; border-radius: var(--radius) var(--radius) 0 0; } .compare-row { display: grid; grid-template-columns: 90px 1fr 220px; gap: 14px; align-items: center; font-size: 13.5px; margin-bottom: 16px; } .compare-track { height: 22px; background: var(--surface-2); border-radius: var(--radius); overflow: hidden; } .compare-fill { display: flex; align-items: center; justify-content: flex-end; height: 100%; border-radius: var(--radius); color: #fff; font-size: 12px; font-weight: 700; padding-right: 8px; } /* --- interactive map ----------------------------------------------------- */ .ng-map-wrap { width: 100%; } .ng-map { width: 100%; height: auto; max-height: 460px; display: block; } .ng-state { stroke: var(--surface); stroke-width: 0.8; cursor: pointer; transition: opacity .12s, stroke .12s; } .ng-state:hover { stroke: var(--accent); stroke-width: 2; opacity: .9; } .ng-state.active { stroke: var(--ink); stroke-width: 2.4; } .ng-legend { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 11px; } .ng-legend .sw { width: 22px; height: 11px; border-radius: 2px; } .map-panel { padding: 22px; } /* --- editor's guide ------------------------------------------------------ */ .guide-banner { background: var(--accent-soft); color: var(--accent); border-radius: var(--radius); padding: 12px 18px; font-size: 13.5px; font-weight: 600; margin-bottom: 22px; } .guide-sec { margin-bottom: 18px; } .g-row { display: grid; grid-template-columns: 1fr 1.2fr 1.6fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; align-items: start; } .g-row:last-child { border-bottom: none; } .g-head { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .g-row .gname { font-weight: 600; color: var(--ink); } .g-row .gsrc a { font-weight: 600; } .g-row .gnote { color: var(--ink-2); line-height: 1.5; } .g-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } @media (max-width: 760px) { .g-row { grid-template-columns: 1fr; gap: 4px; } .g-head { display: none; } } /* --- data import --------------------------------------------------------- */ .import-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .import-toggles { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: 13.5px; } .import-toggles label { display: flex; align-items: center; gap: 7px; cursor: pointer; } .import-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin: 4px 0 8px; } .import-summary .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-align: center; } .import-summary .stat .n { font-family: var(--font-head); font-size: 24px; font-weight: 600; } .import-summary .stat .l { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; } .import-summary .stat.ok .n { color: #2f6b43; } .import-summary .stat.warn .n { color: #b07a2a; } .import-summary .stat.err .n { color: var(--accent); } .map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 20px; font-size: 13px; } .map-row { display: flex; gap: 8px; align-items: baseline; } .imp-row { display: grid; grid-template-columns: 60px 130px 92px 100px 130px 100px 1fr; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 13px; align-items: start; } .imp-head { background: var(--surface-2); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .imp-row.lvl-error { background: #fdecea; } .imp-row.lvl-warn { background: #fbf4e9; } .act { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; text-transform: capitalize; } .act-create { background: #e7efe9; color: #2f6b43; } .act-update { background: #e4eef2; color: #2a6f8a; } .act-skip { background: var(--surface-2); color: var(--ink-3); } .act-duplicate, .act-replace { background: #f6ecd9; color: #b07a2a; } .act-delete, .act-error { background: #fbe3df; color: #8a1c12; } .msg-error { color: #8a1c12; } .msg-warn { color: #96692a; } .msg-ok { color: var(--ink-3); } /* --- pagination ---------------------------------------------------------- */ .pager { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 20px; } .pager .disabled { opacity: .4; pointer-events: none; } /* --- history: immersive scrolly timeline --------------------------------- */ .timeline-hero { text-align: center; max-width: 720px; margin: 0 auto; } .timeline-hero h1 { font-size: clamp(30px, 5vw, 52px); margin: 10px 0 0; text-wrap: balance; } .timeline-hero p { font-size: 16px; max-width: 60ch; margin: 14px auto 0; line-height: 1.6; } .scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 26px; color: var(--ink-3); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; } .scroll-cue .chev { width: 15px; height: 15px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); } /* Central spine with a scroll-linked progress fill (height set by JS). */ .timeline { position: relative; max-width: 940px; margin: 46px auto 0; } .timeline-spine { position: absolute; top: 6px; bottom: 6px; left: 50%; width: 2px; transform: translateX(-50%); background: var(--line); border-radius: 2px; } .timeline-progress { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--accent); border-radius: 2px; } .timeline-progress::after { content: ""; position: absolute; bottom: -3px; left: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translateX(-50%); background: var(--accent); box-shadow: 0 0 12px 2px var(--accent); } .tl-item { position: relative; width: 50%; padding: 10px 46px 40px; } .tl-item.left { left: 0; } .tl-item.right { left: 50%; } .tl-marker { position: absolute; top: 22px; width: 18px; height: 18px; z-index: 2; } .tl-item.left .tl-marker { right: -9px; } .tl-item.right .tl-marker { left: -9px; } .tl-dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease; } .tl-item.passed .tl-dot { background: var(--accent); border-color: var(--accent); } .tl-item.is-active .tl-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); transform: scale(1.18); } .tl-card { position: relative; transition: border-color .35s ease, box-shadow .35s ease; } .tl-item.is-active .tl-card { border-color: var(--accent); box-shadow: 0 16px 44px rgba(20,16,12,.12); } .tl-card::after { content: ""; position: absolute; top: 30px; width: 34px; height: 2px; background: var(--line); transition: background .35s ease; } .tl-item.left .tl-card::after { right: -34px; } .tl-item.right .tl-card::after { left: -34px; } .tl-item.passed .tl-card::after, .tl-item.is-active .tl-card::after { background: var(--accent); } .tl-head { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; margin-bottom: 4px; } .tl-year { font-family: var(--font-head); font-size: 30px; font-weight: 600; line-height: 1; color: var(--ink); } .tl-era { color: var(--accent); } .tl-title { font-size: 20px; font-weight: 600; margin: 2px 0 7px; line-height: 1.25; } .tl-blurb { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0; } .tl-detail { margin-top: 14px; } .tl-more { font-size: 12.5px; font-weight: 600; } details.hist[open] > summary .tl-more { display: none; } .tl-era-break { position: relative; width: 100%; text-align: center; margin: 14px 0 20px; z-index: 2; } .tl-era-break span { display: inline-block; background: var(--bg); padding: 7px 18px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; border: 1px solid var(--line); border-radius: 999px; } details.hist > summary { list-style: none; cursor: pointer; } details.hist > summary::-webkit-details-marker { display: none; } /* Infographic: full-width up to its natural size, never overflowing — these rules are self-contained so the layout holds even before CSS finishes loading. */ .hist-figure { margin: 0 0 16px; max-width: 480px; } .hist-media { display: block; width: 100%; max-width: 480px; height: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); } /* --- resources ----------------------------------------------------------- */ .res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 48px; } .res-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 9px; text-decoration: none; color: inherit; } .res-card:hover { border-color: var(--accent); } .res-card .type { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .res-card .t { font-family: var(--font-head); font-size: 16.5px; font-weight: 600; line-height: 1.3; } .res-card .d { font-size: 13px; color: var(--ink-2); flex: 1; } .res-card .src { font-size: 12px; color: var(--ink-3); padding-top: 6px; border-top: 1px solid var(--line); } .directory { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 36px; } .dir-row { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); } .dir-row .nm { font-weight: 600; font-size: 14px; } .dir-row .meta { font-size: 12.5px; color: var(--ink-3); } /* --- messages + footer --------------------------------------------------- */ .messages { list-style: none; padding: 0; margin: 18px 0 0; } .messages li { padding: 11px 16px; border-radius: var(--radius); font-size: 13.5px; margin-bottom: 8px; border: 1px solid var(--line); } .messages li.success { background: var(--accent-soft); color: var(--accent); } .messages li.error { background: #fdecea; color: #8a1c12; } .site-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 40px; } .site-footer .cols { padding: 40px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; } .site-footer .ft-title { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 12px; } .site-footer .ft-list { font-size: 13.5px; color: var(--ink-2); line-height: 2; } dialog { color: var(--ink); } dialog::backdrop { background: rgba(20, 16, 12, .45); } @media (max-width: 720px) { .metric-pair { grid-template-columns: 1fr; } .bar-line { grid-template-columns: 120px 1fr 38px; } } @media (max-width: 560px) { .compare-row { grid-template-columns: 1fr; gap: 4px; } .compare-row span:last-child { font-size: 11px; } .hist-node { grid-template-columns: 64px 1fr; gap: 14px; } } /* --- scroll reveal (JS-gated; no-JS & reduced-motion show everything) ----- */ @media (prefers-reduced-motion: no-preference) { .reveal-init { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); } .reveal-in { opacity: 1; transform: none; } } /* --- history timeline: motion (reduced-motion & no-JS safe) -------------- */ .tl-title { transition: color .15s ease; } .hist summary:hover .tl-title { color: var(--accent); } .hist-media { transition: transform .3s ease, box-shadow .3s ease; } @media (prefers-reduced-motion: no-preference) { .scroll-cue .chev { animation: cueBounce 1.9s ease-in-out infinite; } @keyframes cueBounce { 0%, 100% { transform: rotate(45deg) translate(-2px,-2px); opacity: .35; } 50% { transform: rotate(45deg) translate(2px,2px); opacity: 1; } } /* Cards fly in from their own side of the spine; era chips rise. */ .tl-item.reveal-init { opacity: 0; } .tl-item.left.reveal-init { transform: translate(-36px, 14px); } .tl-item.right.reveal-init { transform: translate(36px, 14px); } .tl-item.reveal-in { opacity: 1; transform: none; } details.hist[open] .tl-detail { animation: histOpen .45s cubic-bezier(.16,.8,.3,1); } @keyframes histOpen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .hist-figure:hover .hist-media { transform: scale(1.02); box-shadow: 0 14px 36px rgba(20,16,12,.15); } } /* ==== Responsive layer: coherent layout from 320px up ==================== */ @media (max-width: 760px) { .section { padding: 26px 0 44px; } .hero { padding: 38px 0 30px; } .hero-grid { gap: 30px; } .cost-band { padding: 24px; margin: 26px 0; } .page-head { margin-bottom: 22px; } } @media (max-width: 600px) { .wrap { padding: 0 16px; } .card { padding: 18px; } .section { padding: 20px 0 36px; } .tracker-map .ng-map { max-height: 62vh; } /* Tracker: replace the horizontally-scrolling table with stacked cards so nothing is clipped off-screen on a phone. Labels come from data-label. Scoped to #tracker so other tables (e.g. import preview) keep scrolling. */ #tracker .table-shell { overflow-x: visible; border: none; background: transparent; border-radius: 0; } .dr-table { min-width: 0; } .dr-head { display: none; } .dr-row { grid-template-columns: 1fr; gap: 7px; padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 10px; } .dr-row:hover:not(.dr-head) { background: var(--surface); border-color: var(--accent); } .dr-row > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; } .dr-row > div[data-label]::before { content: attr(data-label); flex: none; color: var(--ink-3); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; } .dr-row .cid { font-size: 15px; } .dr-row .num { text-align: right; } .heatmap { max-width: 100%; } .board { grid-auto-columns: minmax(200px, 1fr); } } /* Timeline collapses to a single left-aligned rail on narrow screens. */ @media (max-width: 720px) { .timeline { margin-top: 30px; } .timeline-spine { left: 9px; transform: none; } .tl-item, .tl-item.left, .tl-item.right { width: 100%; left: 0; padding: 4px 0 28px 44px; } .tl-item.left .tl-marker, .tl-item.right .tl-marker { left: 1px; right: auto; } .tl-card::after { display: none; } .tl-head { gap: 10px; } .tl-year { font-size: 25px; } .tl-era-break { text-align: left; padding-left: 44px; } .tl-item.left.reveal-init, .tl-item.right.reveal-init { transform: translate(22px, 12px); } }