/* ========================================================================== LEADSTRIM — The Load Board Direction contract lives in index.html, first child of . ========================================================================== */ @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/barlow-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-condensed-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/courier-prime-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/courier-prime-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* --- Ground: the board itself --- */ --board: #E4E8EA; --board-deep: #D3D9DD; --row: #FFFFFF; --row-alt: #F4F6F7; --chrome: #0D1117; --chrome-2: #1B242D; /* --- Ink --- */ --ink: #0D1117; --ink-2: #454F58; --ink-3: #5A646D; --ink-invert: #EDF1F3; --ink-invert-2: #9FADB6; /* --- Rules --- */ --rule: #C3CBD0; --rule-soft: #DCE2E5; --rule-strong: #96A2AA; /* --- Status roles --- */ --covered: #0B6E4F; --open: #C2400A; --open-deep: #9E3308; --open-ink: #A83706; --open-soft: #FBE9E0; --attention: #8A5A00; --note-bg: #FFF8EC; --note-ink: #6B4A08; --note-ink-2: #4A3305; --note-invert: #FFC978; --open-bright: #FF7A45; --open-wash: #FFF1E9; --rule-invert: #2C3945; --rule-invert-2:#33414E; /* --- Shadow tints: never pure black; always drawn from the palette --- */ --shadow-ink: rgba(13, 17, 23, 0.55); --shadow-deep: rgba(13, 17, 23, 0.5); --shadow-open: rgba(194, 64, 10, 0.9); /* --- Type --- */ --display: "Barlow Condensed", "Arial Narrow", sans-serif; --ui: "Barlow", system-ui, sans-serif; --data: "Courier Prime", ui-monospace, "Courier New", monospace; /* --- Type ramp: every font-size in this file resolves to one of these --- */ --t-display-xl: clamp(2.5rem, 7vw, 5.4rem); --t-display: clamp(2.5rem, 6vw, 4.6rem); --t-head: clamp(2rem, 5.2vw, 3.4rem); --t-lede: clamp(1.05rem, 2vw, 1.2rem); --t-ledger: 2rem; --t-wordmark: 1.6rem; --t-title-lg: 1.5rem; --t-title: 1.32rem; --t-action: 1.15rem; --t-nav: 1.06rem; --t-body: 1.0625rem; --t-body-sm: 0.95rem; --t-data: 0.9rem; --t-body-xs: 0.85rem; --t-data-sm: 0.76rem; --t-label: 0.66rem; /* --- Rhythm --- */ --gut: clamp(1rem, 3.2vw, 2rem); --max: 1320px; --read: 68ch; /* --- Motion --- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 480ms; } /* ========================================================================== Reset + browser surfaces (the parts we did not draw still carry the design) ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--rule-strong) var(--board-deep); scrollbar-width: thin; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* State changes still read; they just stop travelling. The row snaps open rather than unrolling, colour still moves so the selection stays legible, and the hover lift is removed rather than merely shortened. */ .row-detail, .row-detail > .row-detail-inner, .row-btn, .chev { transition: none; } .btn { transition: background-color 120ms linear, color 120ms linear; } .btn-claim:hover, .btn-solid:hover, .btn-claim:active, .btn-solid:active { transform: none; } } body { margin: 0; background: var(--board); color: var(--ink); font-family: var(--ui); font-size: var(--t-body); line-height: 1.55; font-feature-settings: "kern" 1; caret-color: var(--open); -webkit-font-smoothing: antialiased; } ::selection { background: var(--open); color: #fff; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--board-deep); } ::-webkit-scrollbar-thumb { background: var(--rule-strong); border: 3px solid var(--board-deep); border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); } :focus-visible { outline: 2px solid var(--open); outline-offset: 2px; } /* The orange field would swallow an orange ring. */ .close :focus-visible, .btn-claim:focus-visible { outline-color: #fff; outline-offset: 3px; } .chrome :focus-visible { outline-color: var(--open-bright); } img, svg { max-width: 100%; display: block; } a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--rule-strong); transition: text-decoration-color 160ms var(--ease-out), color 160ms var(--ease-out); } a:hover { color: var(--open-ink); text-decoration-color: var(--open); } h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance; margin: 0; } p { margin: 0; max-width: var(--read); } /* Data is set in data type, and numerals line up. Not decoration. */ .data, .cell-val, .ref, time, .num { font-family: var(--data); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .shell { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); } .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; } .skip { position: absolute; left: var(--gut); top: -100px; z-index: 50; background: var(--open); color: #fff; padding: 0.75rem 1.25rem; font-family: var(--display); font-size: var(--t-body); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; } .skip:focus { top: 0.5rem; color: #fff; } /* ========================================================================== Board chrome — masthead + status strip ========================================================================== */ .chrome { background: var(--chrome); color: var(--ink-invert); border-bottom: 3px solid var(--open); position: sticky; top: 0; z-index: 30; } .chrome-bar { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: 62px; padding-block: 0.5rem; } .mark { font-family: var(--display); font-weight: 700; font-size: var(--t-wordmark); letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-invert); text-decoration: none; line-height: 1; white-space: nowrap; } .mark:hover { color: #fff; } .mark .mark-sub { display: block; font-family: var(--ui); font-weight: 500; font-size: var(--t-label); letter-spacing: 0.24em; color: var(--ink-invert-2); margin-top: 0.3rem; } .chrome-nav { display: flex; gap: clamp(0.9rem, 2.2vw, 1.9rem); margin-left: auto; align-items: center; } .chrome-nav a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-size: var(--t-nav); letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-invert-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; } .chrome-nav a:hover, .chrome-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--open); } .status-strip { background: var(--chrome-2); border-top: 1px solid var(--rule-invert); font-family: var(--data); font-size: var(--t-data-sm); letter-spacing: 0.06em; color: var(--ink-invert-2); overflow: hidden; } .status-strip .shell { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; padding-block: 0.5rem; } .status-strip b { color: var(--ink-invert); font-weight: 400; } .status-strip .open-count { color: var(--open-bright); } /* ========================================================================== Section furniture ========================================================================== */ section { padding-block: clamp(3.25rem, 7vw, 6rem); } .sec-head { display: flex; align-items: baseline; gap: 1.25rem; border-bottom: 2px solid var(--ink); padding-bottom: 0.75rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } .sec-head h2 { font-size: var(--t-head); text-transform: uppercase; letter-spacing: 0.005em; } .sec-head .sec-note { font-family: var(--ui); font-weight: 600; font-size: var(--t-label); letter-spacing: 0.14em; color: var(--ink-3); margin-left: auto; text-align: right; text-transform: uppercase; white-space: nowrap; } .lede { font-size: var(--t-lede); color: var(--ink-2); max-width: var(--read); } /* ========================================================================== THE POSTING — first viewport ========================================================================== */ .posting { padding-top: clamp(1.75rem, 3.2vw, 2.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); } .posting-hed { font-size: var(--t-display); text-transform: uppercase; max-width: 19ch; margin-bottom: 1rem; } .posting-hed em { font-style: normal; color: var(--open-ink); } .posting-sub { font-size: var(--t-lede); color: var(--ink-2); max-width: 56ch; margin-bottom: clamp(1.5rem, 2.6vw, 2rem); } /* The load ticket itself */ .ticket { background: var(--row); border: 1px solid var(--rule); border-top: 4px solid var(--open); box-shadow: 0 18px 44px -28px var(--shadow-ink); } .ticket-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding: 0.85rem clamp(1rem, 2.4vw, 1.6rem); border-bottom: 1px solid var(--rule-soft); background: var(--row-alt); } .tag { font-family: var(--display); font-size: var(--t-body-sm); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.28rem 0.6rem; line-height: 1.15; white-space: nowrap; } .tag-open { background: var(--open); color: #fff; } .tag-example { background: transparent; color: var(--attention); border: 1px dashed var(--attention); letter-spacing: 0.1em; } .ticket-ref { font-family: var(--data); font-size: var(--t-data-sm); color: var(--ink-3); letter-spacing: 0.04em; margin-left: auto; } .ticket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); border-bottom: 1px solid var(--rule-soft); } .cell { padding: 0.95rem clamp(1rem, 2.4vw, 1.6rem); border-right: 1px solid var(--rule-soft); min-width: 0; } .cell:last-child { border-right: 0; } .cell-key { font-family: var(--ui); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.4rem; } .cell-val { font-size: var(--t-body-sm); color: var(--ink); line-height: 1.35; overflow-wrap: break-word; } .cell-val.big { font-family: var(--display); font-size: var(--t-title-lg); letter-spacing: 0.01em; line-height: 1.1; } .cell-val.free { color: var(--covered); } .ticket-act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: clamp(1rem, 2.4vw, 1.5rem); } .ticket-act p { font-size: var(--t-body-sm); color: var(--ink-2); max-width: 46ch; margin: 0; } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--display); font-size: var(--t-action); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.72rem 1.5rem; border: 1px solid transparent; text-decoration: none; cursor: pointer; line-height: 1.2; transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out); } .btn svg { flex: none; } .btn-claim { background: var(--open); color: #fff; box-shadow: 0 10px 22px -14px var(--shadow-open); } .btn-claim:hover { background: var(--open-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 26px -14px var(--shadow-open); } .btn-claim:active { transform: translateY(0); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); } .btn-ghost:hover { background: var(--ink); color: var(--ink-invert); border-color: var(--ink); } .btn[aria-disabled="true"], .btn:disabled { background: var(--board-deep); color: var(--ink-3); border-color: var(--rule); box-shadow: none; cursor: not-allowed; pointer-events: none; } /* ========================================================================== ROUTE — how the load moves ========================================================================== */ .route { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-top: 2px solid var(--ink); background: var(--row); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .stop { padding: clamp(1.15rem, 2.6vw, 1.75rem); border-right: 1px solid var(--rule-soft); position: relative; } .stop:last-child { border-right: 0; } .stop-mark { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; } .stop-dot { width: 11px; height: 11px; background: var(--open); flex: none; } .stop-rule { height: 1px; background: var(--rule); flex: 1; } .stop h3 { font-size: var(--t-title-lg); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .stop p { font-size: var(--t-body-sm); color: var(--ink-2); line-height: 1.5; } /* ========================================================================== THE BOARD — expandable demonstration rows (signature interaction) ========================================================================== */ .board { background: var(--row); border: 1px solid var(--rule); border-top: 2px solid var(--ink); } /* The synthetic disclosure sits above the rows, not behind a click — it has to land before the reader believes these were real sends. */ .board-warn { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0; max-width: none; padding: 0.95rem clamp(0.85rem, 2vw, 1.35rem); background: var(--note-bg); border-bottom: 1px solid var(--rule); color: var(--note-ink); font-size: var(--t-data); line-height: 1.5; } .board-warn svg { flex: none; margin-top: 0.2em; color: var(--attention); } .board-warn b { color: var(--note-ink-2); font-weight: 600; } .board-head { display: grid; grid-template-columns: 96px minmax(0, 1.5fr) minmax(0, 2fr) 128px 44px; gap: 0 1rem; padding: 0.6rem clamp(0.85rem, 2vw, 1.35rem); background: var(--chrome); color: var(--ink-invert-2); font-family: var(--ui); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .board-rows { list-style: none; margin: 0; padding: 0; } .row { border-bottom: 1px solid var(--rule-soft); } .row:last-child { border-bottom: 0; } .row-btn { display: grid; grid-template-columns: 96px minmax(0, 1.5fr) minmax(0, 2fr) 128px 44px; gap: 0 1rem; align-items: center; width: 100%; padding: 0.95rem clamp(0.85rem, 2vw, 1.35rem); background: var(--row); border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); } .row:nth-child(even) .row-btn { background: var(--row-alt); } .row-btn:hover { background: var(--open-soft); } /* A selected posting inverts to the board's own chrome, the way a highlighted row does on the boards these buyers work all day. */ .row-btn[aria-expanded="true"] { background: var(--chrome); color: var(--ink-invert); } .row-btn[aria-expanded="true"] .row-age, .row-btn[aria-expanded="true"] .row-signal { color: var(--ink-invert-2); } .row-btn[aria-expanded="true"] .tag-example { color: var(--note-invert); border-color: var(--note-invert); } .row-age { font-family: var(--data); font-size: var(--t-body-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; } .row-lane { font-family: var(--display); font-size: var(--t-title); letter-spacing: 0.01em; line-height: 1.15; } .row-signal { font-size: var(--t-body-sm); color: var(--ink-2); line-height: 1.4; } .row-status { justify-self: start; } .chev { justify-self: end; color: var(--ink-3); transition: transform var(--dur) var(--ease-out), color 160ms var(--ease-out); } .row-btn[aria-expanded="true"] .chev { transform: rotate(90deg); color: var(--open); } /* The authored moment: a row opens the way a load-board detail opens — the panel unrolls from its own top edge, contents already in place. */ .row-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); background: var(--row-alt); } .row-detail[data-open="true"] { grid-template-rows: 1fr; } .row-detail > .row-detail-inner { overflow: hidden; min-height: 0; /* Collapsed detail leaves the accessibility tree too, not just the screen. */ visibility: hidden; transition: visibility 0s linear var(--dur); } .row-detail[data-open="true"] > .row-detail-inner { visibility: visible; transition-delay: 0s; } .detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1.25rem, 3vw, 2.5rem); padding: clamp(1.25rem, 3vw, 2rem) clamp(0.95rem, 2.2vw, 1.6rem); border-top: 1px solid var(--rule-soft); } .detail-h { font-family: var(--ui); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.7rem; } .sig-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.55rem; } .sig-list li { display: flex; gap: 0.65rem; font-size: var(--t-body-sm); color: var(--ink); line-height: 1.45; } .sig-list svg { color: var(--covered); flex: none; margin-top: 0.22em; } .msg { background: var(--row); border: 1px solid var(--rule); padding: clamp(1rem, 2.2vw, 1.4rem); } .msg-meta { font-family: var(--data); font-size: var(--t-data-sm); color: var(--ink-3); border-bottom: 1px solid var(--rule-soft); padding-bottom: 0.6rem; margin-bottom: 0.85rem; display: grid; gap: 0.15rem; } .msg-body { font-size: var(--t-body-sm); line-height: 1.62; color: var(--ink); white-space: pre-line; max-width: 58ch; } .example-note { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.85rem clamp(0.95rem, 2.2vw, 1.6rem); background: var(--note-bg); border-top: 1px solid var(--rule-soft); font-size: var(--t-body-xs); color: var(--attention); line-height: 1.45; } .example-note svg { flex: none; margin-top: 0.15em; } /* ========================================================================== FIT — the board filter ========================================================================== */ .filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; border: 1px solid var(--rule); border-top: 2px solid var(--ink); background: var(--row); } .filter-col { padding: clamp(1.25rem, 3vw, 2rem); } .filter-col + .filter-col { border-left: 1px solid var(--rule-soft); } .filter-col h3 { font-size: var(--t-title-lg); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); } .filter-col.pass h3 { color: var(--covered); } .filter-col.fail h3 { color: var(--ink-3); } .filter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .filter-list li { display: flex; gap: 0.7rem; font-size: var(--t-body-sm); line-height: 1.45; } .filter-list svg { flex: none; margin-top: 0.24em; } .pass .filter-list svg { color: var(--covered); } .fail .filter-list { color: var(--ink-2); } .fail .filter-list svg { color: var(--ink-3); } /* ========================================================================== CAPACITY — the honest slot count ========================================================================== */ .capacity { background: var(--chrome); color: var(--ink-invert); } .capacity .sec-head { border-bottom-color: var(--rule-invert-2); } .capacity .sec-head h2 { color: #fff; } .capacity .sec-head .sec-note { color: var(--ink-invert-2); } .capacity .lede { color: var(--ink-invert-2); } .slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--rule-invert-2); border: 1px solid var(--rule-invert-2); margin-bottom: clamp(1.75rem, 4vw, 2.5rem); } .slot { background: var(--chrome-2); padding: clamp(1.15rem, 2.6vw, 1.6rem); display: grid; gap: 0.6rem; align-content: start; } .slot-id { font-family: var(--data); font-size: var(--t-data-sm); letter-spacing: 0.08em; color: var(--ink-invert-2); } .slot-state { font-family: var(--display); font-size: var(--t-ledger); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; color: #fff; } .slot.is-open .slot-state { color: var(--open-bright); } .slot p { font-size: var(--t-data); color: var(--ink-invert-2); margin: 0; } /* ========================================================================== DRIVER — founder block ========================================================================== */ .driver { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; background: var(--row); border: 1px solid var(--rule); border-top: 2px solid var(--ink); padding: clamp(1.5rem, 3.5vw, 2.75rem); } .driver-body { display: grid; gap: 1rem; } .driver-body p { font-size: var(--t-body); color: var(--ink-2); } .driver-body p strong { color: var(--ink); font-weight: 600; } .plate { border: 1px solid var(--rule); background: var(--row-alt); padding: clamp(1.1rem, 2.6vw, 1.5rem); display: grid; gap: 0.9rem; } .plate-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 1rem; font-size: var(--t-body-sm); padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule-soft); } .plate-row:last-child { border-bottom: 0; padding-bottom: 0; } .plate-row dt { font-family: var(--ui); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.18em; } .plate-row dd { margin: 0; font-family: var(--data); font-size: var(--t-data); } /* ========================================================================== TERMS — FAQ ========================================================================== */ .terms { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); background: var(--row); } .term { border-bottom: 1px solid var(--rule-soft); padding: clamp(1.15rem, 2.6vw, 1.6rem) clamp(1rem, 2.4vw, 1.75rem); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); gap: clamp(1rem, 3vw, 2.5rem); } .term:last-child { border-bottom: 0; } .term h3 { font-size: var(--t-title); text-transform: uppercase; letter-spacing: 0.04em; } .term p { font-size: var(--t-body-sm); color: var(--ink-2); } .term p + p { margin-top: 0.7rem; } /* ========================================================================== CLOSE + FOOTER ========================================================================== */ .close { background: var(--open); color: #fff; padding-block: clamp(3.5rem, 8vw, 6.5rem); } .close h2 { font-size: var(--t-display-xl); text-transform: uppercase; color: #fff; max-width: 18ch; margin-bottom: 1.15rem; } .close p { font-size: var(--t-lede); color: var(--open-wash); max-width: 52ch; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); } .close .btn-ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; } .close .btn-ghost:hover { background: #fff; color: var(--open-deep); border-color: #fff; } /* On the orange field the primary action inverts to solid, so the page's last ask carries the same weight the ticket taught the reader to look for. */ .btn-solid { background: #fff; color: var(--open-deep); box-shadow: 0 10px 22px -14px var(--shadow-deep); } .btn-solid:hover { background: var(--chrome); color: #fff; transform: translateY(-1px); } .btn-solid:active { transform: translateY(0); } .close-acts { display: flex; flex-wrap: wrap; gap: 0.9rem; } .foot { background: var(--chrome); color: var(--ink-invert-2); padding-block: clamp(2.25rem, 5vw, 3.25rem); font-size: var(--t-data); } .foot a { color: var(--ink-invert); } .foot a:hover { color: #fff; text-decoration-color: var(--open); } .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(1.5rem, 4vw, 2.5rem); padding-bottom: 1.75rem; border-bottom: 1px solid var(--rule-invert); margin-bottom: 1.5rem; } .foot h4 { font-family: var(--ui); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-invert-2); margin-bottom: 0.85rem; } .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; } .foot ul a { display: inline-flex; align-items: center; min-height: 28px; } .foot p { color: var(--ink-invert-2); max-width: 44ch; } .foot-legal { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; font-family: var(--ui); font-size: var(--t-body-xs); } .placeholder { border-bottom: 1px dashed var(--attention); color: var(--note-invert); } /* ========================================================================== ABOUT page ========================================================================== */ .about-hero { padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); } .about-hero h1 { font-size: var(--t-display-xl); text-transform: uppercase; max-width: 16ch; margin-bottom: 1.25rem; } .about-hero .lede { font-size: var(--t-lede); } .prose { display: grid; gap: 1.15rem; max-width: var(--read); } .prose p { font-size: var(--t-body); color: var(--ink-2); } .prose p.first { font-size: var(--t-lede); color: var(--ink); } .prose strong { color: var(--ink); font-weight: 600; } .method-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } .method-list li { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.7fr); gap: clamp(0.75rem, 3vw, 2.5rem); padding: clamp(1rem, 2.4vw, 1.5rem) 0; border-bottom: 1px solid var(--rule); } .method-list h3 { font-size: var(--t-title); text-transform: uppercase; letter-spacing: 0.04em; } .method-list p { font-size: var(--t-body-sm); color: var(--ink-2); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 960px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } .driver { grid-template-columns: minmax(0, 1fr); } .term { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; } .method-list li { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } } @media (max-width: 780px) { .chrome-bar { flex-wrap: wrap; min-height: 0; padding-block: 0.7rem; gap: 0.75rem; } .chrome-nav { margin-left: 0; width: 100%; gap: 1.1rem; overflow-x: auto; padding-bottom: 0.15rem; scrollbar-width: none; } .chrome-nav::-webkit-scrollbar { display: none; } /* The board reflows from columns to stacked postings — a phone load board shows one posting at a time, it does not shrink the grid. */ .board-head { display: none; } .row-btn { grid-template-columns: minmax(0, 1fr) 34px; grid-template-areas: "age chev" "lane chev" "signal signal" "status status"; gap: 0.4rem 0.75rem; padding-block: 1.05rem; } .row-age { grid-area: age; } .row-lane { grid-area: lane; } .row-signal { grid-area: signal; } .row-status { grid-area: status; margin-top: 0.3rem; } .chev { grid-area: chev; align-self: start; } .ticket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cell { border-bottom: 1px solid var(--rule-soft); } .cell:nth-child(even) { border-right: 0; } /* An odd final field takes the full row rather than leaving a hairline stub. */ .ticket-grid .cell:last-child { grid-column: 1 / -1; border-right: 0; } .stop { border-right: 0; border-bottom: 1px solid var(--rule-soft); } .stop:last-child { border-bottom: 0; } .filter-col + .filter-col { border-left: 0; border-top: 1px solid var(--rule); } .plate-row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } .btn { width: 100%; justify-content: center; } .ticket-act .btn { width: auto; flex: 1 1 auto; } } @media (max-width: 460px) { .ticket-grid { grid-template-columns: minmax(0, 1fr); } .cell { border-right: 0; } .close-acts .btn { width: 100%; } }