/* ============================================================ Augur Sciences — site stylesheet One design system, two themes. Theme is set via by assets/js/theme.js. ============================================================ */ /* Brand palette: Augur blue #38c1f1 (from the official mark). The light theme uses a darkened blue for interactive elements so text stays readable on white; the dark theme uses the brand blue verbatim. */ :root { --bg: #f6f8fa; --surface: #ffffff; --surface-2: #eef1f4; --ink: #16191d; --muted: #5b6470; --line: #e2e6ea; --accent: #0b7cad; --accent-bright: #38c1f1; --accent-ink: #ffffff; --accent-soft: rgba(56, 193, 241, 0.13); --good: #2e7d4f; --warn: #b3541e; --bad: #b3372e; /* point blank window / its zero, as table row shading */ --pbr-in: rgba(46, 125, 79, 0.16); --pbr-zero: rgba(56, 193, 241, 0.3); --shadow: 0 1px 2px rgba(20, 22, 26, 0.05), 0 8px 24px rgba(20, 22, 26, 0.06); --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: "Iowan Old Style", Georgia, "Times New Roman", serif; color-scheme: light; } :root[data-theme="dark"] { --bg: #121214; --surface: #1a1a1d; --surface-2: #212125; --ink: #eceae8; --muted: #9ba0a8; --line: #2a2b30; --accent: #38c1f1; --accent-bright: #38c1f1; --accent-ink: #0d1216; --accent-soft: rgba(56, 193, 241, 0.13); --good: #58b184; --warn: #e09144; --bad: #e06b60; --pbr-in: rgba(88, 177, 132, 0.22); --pbr-zero: rgba(56, 193, 241, 0.26); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--bg); transition: background-color 160ms ease, color 160ms ease; } h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 650; } p { margin: 0 0 1em; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* ---------- header ---------- */ .site-header { border-bottom: 1px solid var(--line); background: var(--surface); } .site-header .wrap { display: flex; align-items: center; gap: 16px; height: 64px; } .brand { display: flex; align-items: center; gap: 11px; color: var(--ink); font-family: var(--serif); font-weight: 700; letter-spacing: 0.09em; font-size: 16px; text-transform: uppercase; white-space: nowrap; } .brand:hover { text-decoration: none; } /* Theme-swapped brand logo (black-A version for light, white-A for dark) */ .logo { display: block; width: auto; } .logo.logo-dark { display: none; } :root[data-theme="dark"] .logo.logo-light { display: none; } :root[data-theme="dark"] .logo.logo-dark { display: block; } .brand .logo { height: 30px; } /* footer link group + theme toggle, kept together on the right */ .footer-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .theme-toggle { appearance: none; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .theme-toggle:hover { border-color: var(--muted); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ---------- homepage ---------- */ .hero { padding: 96px 0 72px; text-align: center; } .hero .mark-lg { margin: 0 auto 30px; height: 96px; } .hero .mark-lg .logo { height: 96px; margin: 0 auto; } .hero h1 { font-family: var(--serif); font-size: clamp(34px, 6vw, 56px); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; } .hero .tagline { font-size: clamp(17px, 2.4vw, 21px); color: var(--muted); max-width: 620px; margin: 0 auto 12px; } /* small uppercase eyebrow label — used in the hero and the product teaser */ .kicker { display: inline-block; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 18px; } .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; font-weight: 650; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform 80ms ease, box-shadow 80ms ease; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); } .btn-ghost { border-color: var(--line); color: var(--ink); background: var(--surface); } .btn-ghost:hover { border-color: var(--muted); } /* homepage product teaser — the headline item on the page */ .teaser { max-width: 640px; margin: 0 auto; padding: 0 24px 58px; text-align: center; } .teaser::before { content: ""; display: block; width: 40px; height: 1px; background: var(--line); margin: 0 auto 34px; } .teaser .kicker { margin-bottom: 14px; } .teaser p { color: var(--muted); font-size: 16px; line-height: 1.6; } .teaser .teaser-lead { color: var(--ink); font-size: clamp(20px, 3vw, 23px); line-height: 1.35; font-weight: 650; margin-bottom: 12px; } /* homepage free-tool block: the calculator. Deliberately downstream of the product teaser and boxed off from it — it is something we give away, not the thing we are building. */ .tool-section { padding: 0 24px 88px; } .tool-card { max-width: 700px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 28px 32px 30px; } .tool-card h2 { font-size: 21px; margin-bottom: 12px; } .tool-card p { color: var(--muted); font-size: 15.5px; line-height: 1.62; margin-bottom: 14px; } .tool-card p:last-of-type { margin-bottom: 0; } /* feature list: two columns, each a label with a one-line gloss */ .feature-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; } .feature-grid li { position: relative; padding-left: 21px; font-size: 13.5px; line-height: 1.45; color: var(--muted); } .feature-grid li::before { content: "✓"; position: absolute; left: 0; top: 0; font-size: 13px; font-weight: 700; color: var(--accent); } .feature-grid strong { display: block; color: var(--ink); font-size: 14.5px; font-weight: 650; line-height: 1.4; } .tool-cta { margin-top: 26px; text-align: center; } /* the card is already on --surface, so the ghost button needs a tone of its own to stay visible (especially in the dark theme) */ .tool-card .btn-ghost { background: var(--surface-2); } @media (max-width: 560px) { .tool-card { padding: 24px 20px 26px; } .tool-card .btn { width: 100%; justify-content: center; } .feature-grid { grid-template-columns: 1fr; gap: 12px; } } .home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; padding: 24px 0 80px; } .home-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; box-shadow: var(--shadow); } .home-card h3 { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .home-card p { color: var(--muted); font-size: 15px; margin: 0; } .site-footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--muted); font-size: 13.5px; } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; } /* ---------- long-form pages (terms) ---------- */ .prose-main { padding: 40px 0 64px; } .prose { max-width: 760px; } .prose h1 { font-size: 30px; margin-bottom: 6px; } .prose h2 { font-size: 15px; letter-spacing: 0.04em; margin: 30px 0 8px; color: var(--ink); } .prose p { color: var(--muted); line-height: 1.65; } .prose p strong { color: var(--ink); } .prose-meta { font-size: 13px; color: var(--muted); margin-bottom: 26px; } /* ---------- calculator layout ---------- */ .calc-main { padding: 28px 0 64px; } .calc-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; } .dev-notice { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; padding: 11px 16px; border: 1px solid var(--warn); border-radius: 10px; background: rgba(214, 138, 60, 0.09); font-size: 13.5px; color: var(--ink); } .dev-notice strong { color: var(--warn); } .dev-notice a { font-weight: 650; white-space: nowrap; } /* Shown only when the page was opened from a shared link. */ .share-loaded { margin: 0 0 18px; padding: 11px 16px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft); font-size: 13.5px; color: var(--ink); } .share-loaded strong { color: var(--accent); } .calc-title-row h1 { font-size: 26px; margin: 0; } .calc-title-row .sub { color: var(--muted); font-size: 14px; } .mode-toggle { appearance: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 650; padding: 7px 12px; cursor: pointer; } .mode-toggle:hover { border-color: var(--accent); } .mode-toggle.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .mode-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } .mode-toggle.on .mode-toggle-dot { background: var(--accent); box-shadow: 10px 0 0 var(--accent); margin-right: 10px; } /* Inputs: three balanced columns of paired cards, then a full-width Output bar. Results render below. */ .calc-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; margin-bottom: 16px; } .calc-inputs .col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .calc-inputs .col .card:last-child { flex: 1; } .calc-inputs .card { margin-bottom: 0; } .card-wide { grid-column: 1 / -1; } /* Comparison mode deliberately separates shared conditions from the two physical load profiles. The cards are the same familiar controls, but their grid makes it obvious what applies to both tables. */ .comparison-area { margin-bottom: 16px; } .calc-inputs[hidden], .comparison-area[hidden], .comparison-results[hidden], .results-grid[hidden], .calc-results[hidden] { display: none !important; } .comparison-intro { margin: 0 0 10px; color: var(--muted); font-size: 13px; } .comparison-section-title { margin: 20px 0 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .comparison-shared { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .comparison-shared > .card { margin: 0; } .comparison-shared #output-card { grid-column: 1 / -1; } .comparison-atmosphere-wind .comparison-wind-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .comparison-atmosphere-wind .comparison-wind-section h3 { margin: 0 0 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .comparison-atmosphere-wind .comparison-wind-section .card-body { padding: 0; } .comparison-profiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .comparison-profile { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.85fr); gap: 12px; align-items: start; } .comparison-profile-label { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; padding: 2px 2px 0; } .comparison-profile-label strong { font-size: 17px; color: var(--ink); } .comparison-profile-label span { font-size: 12px; color: var(--muted); } .comparison-load-core { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .comparison-load-core > .card, .comparison-profile > .card { margin: 0; } .comparison-profile .card-head h2 { font-size: 16px; } .comparison-profile .bullet-picker-row { grid-template-columns: 1fr; } .comparison-profile .field-grid { grid-template-columns: 1fr; } .comparison-profile .seg { flex-wrap: wrap; } .comparison-profile .seg button { flex: 1 1 auto; } .compare-load-pill { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11px; } .comparison-profile .compare-load-pill { margin-left: 4px; } @media (max-width: 900px) { .comparison-shared { grid-template-columns: repeat(2, minmax(0, 1fr)); } .comparison-profiles { grid-template-columns: 1fr; } .comparison-profile { grid-template-columns: minmax(0, 1.55fr) minmax(240px, 0.8fr); } } @media (max-width: 680px) { .comparison-shared, .comparison-profile { grid-template-columns: 1fr; } } .output-flow { /* The output card has two logical rows. A defined grid keeps those groups aligned instead of letting one flex row break wherever space happens to run out. The same card is moved intact in comparison mode, so this layout stays identical in both modes. */ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 26px 24px; align-items: flex-start; } .output-flow > .field:nth-child(1), .output-flow > .field:nth-child(2) { grid-column: span 2; } .output-flow > .field:nth-child(3) { grid-column: span 3; } .output-flow > .field:nth-child(4) { grid-column: span 5; } .output-flow > .field:nth-child(5) { grid-column: span 5; } .output-flow > .field:nth-child(6) { grid-column: span 4; } .output-flow > .field:nth-child(7) { grid-column: span 3; } .output-flow .field input { width: 110px; } /* Rounding and point-blank range finish their rows. Keep their explanatory bubbles inside the card too, including when the grid switches columns. */ .output-flow > .field:nth-child(4)::after, .output-flow > .field:nth-child(7)::after { left: auto; right: 0; } /* Keep the controls balanced as the card narrows, before the compact two-column form takes over on tablets. */ @media (max-width: 1500px) { .output-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } .output-flow > .field:nth-child(1), .output-flow > .field:nth-child(2), .output-flow > .field:nth-child(3), .output-flow > .field:nth-child(4), .output-flow > .field:nth-child(6), .output-flow > .field:nth-child(7) { grid-column: span 1; } .output-flow > .field:nth-child(5) { grid-column: span 2; } } @media (max-width: 980px) { .output-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .output-flow > .field:nth-child(5) { grid-column: span 2; } } @media (max-width: 620px) { .output-flow { grid-template-columns: 1fr; } .output-flow > .field:nth-child(n) { grid-column: span 1; } } @media (max-width: 1060px) { .calc-inputs { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .calc-inputs { grid-template-columns: 1fr; } } /* ---------- cards & forms ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); margin-bottom: 18px; /* overflow stays visible so field tooltips can escape the card and the sticky table header keeps working; the card-head rounds its own corners instead of relying on clipping */ } .card-head { border-radius: 13px 13px 0 0; } .card-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .card-head h2 { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0; font-weight: 700; } .card-head .hint { margin-left: auto; font-size: 12px; color: var(--muted); } .card-body { padding: 16px 18px 18px; } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; } .field-grid .full { grid-column: 1 / -1; } .field label { display: block; font-size: 12px; font-weight: 650; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 5px; } .field .unit-note { font-weight: 500; opacity: 0.8; } input[type="text"], input[type="number"], input[type="search"], select { width: 100%; padding: 9px 11px; font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; outline: none; transition: border-color 100ms ease, box-shadow 100ms ease; } input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input::placeholder { color: var(--muted); opacity: 0.65; } input[type="number"] { font-family: var(--mono); font-size: 14.5px; } /* no spinner arrows */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input:disabled { opacity: 0.45; cursor: not-allowed; } /* ---------- stepped BC ---------- */ /* a small button parked inside the right edge of an input */ .input-affix { position: relative; display: block; } .input-affix > input { padding-right: 38px; } .affix-btn { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; appearance: none; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 17px; font-weight: 600; line-height: 1; padding: 0; cursor: pointer; transition: transform 150ms ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .affix-btn:hover { border-color: var(--muted); color: var(--ink); } /* open: the + rotates into an x */ .affix-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: translateY(-50%) rotate(45deg); } .affix-btn.on:hover { color: var(--accent-ink); } .bc-steps { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 10px 11px 11px; } .bc-steps[hidden] { display: none; } .bc-steps-head { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; margin-bottom: 9px; } .bc-steps-head .mini-btn { margin-left: auto; padding: 4px 10px; font-size: 12px; } .bc-steps-head .mini-btn:disabled { opacity: 0.45; cursor: not-allowed; border-color: var(--line); } .bc-steps-title { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--muted); } .bc-steps-sub { font-size: 11.5px; color: var(--muted); opacity: 0.8; } .bc-step-rows { display: flex; flex-direction: column; gap: 7px; } .bc-step-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) 14px minmax(0, 1fr) 20px; align-items: center; gap: 6px; } .bc-step-row input[type="number"] { padding: 6px 8px; font-size: 13.5px; border-radius: 7px; background: var(--surface); } .bc-step-n, .bc-step-ge { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-align: center; } /* one of the two numbers filled in = the row is dropped; flag it */ .bc-step-row.partial input[type="number"] { border-color: var(--warn); } .bc-step-del { appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 15px; line-height: 1; padding: 3px; border-radius: 6px; cursor: pointer; } .bc-step-del:hover { color: var(--bad); background: var(--surface-2); } .bc-steps-summary { margin: 9px 0 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.4; color: var(--muted); } .bc-steps-summary.warn { font-family: var(--sans); color: var(--warn); } /* The stepped panel makes the Projectile card taller. The Wind card sits at the bottom of the same column and is mostly slack space, so it gives the room back — its direction note duplicates the field's own tooltip. */ body.bc-steps-open .wind-card .muted-note { display: none; } /* multi-select chips (output units & columns) */ .chips { display: flex; flex-wrap: wrap; gap: 7px; } .chips button { appearance: none; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 650; padding: 6px 13px; cursor: pointer; } .chips button:hover { border-color: var(--muted); } .chips button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--bg); } .seg button { appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 650; padding: 8px 14px; cursor: pointer; } .seg button + button { border-left: 1px solid var(--line); } .seg button.on { background: var(--accent); color: var(--accent-ink); } .checkline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); } .checkline input { accent-color: var(--accent); width: 15px; height: 15px; } .solve-bar { display: flex; gap: 10px; margin-bottom: 6px; } .solve-bar .btn { flex: 1; justify-content: center; padding: 14px; font-size: 16px; } .muted-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; } /* ---------- results ---------- */ /* Results: compact firing-solution table with the summary chips stacked in a column to its right (wrapping below on narrow screens). */ .results-grid { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .results-grid .solution-card { flex: 0 1 auto; min-width: min(100%, 520px); margin-bottom: 0; } .stat-col { display: flex; flex-direction: column; gap: 12px; flex: 1 1 230px; min-width: 220px; position: sticky; top: 16px; } .stat-col .stat[data-tip]:hover::after { left: auto; right: 0; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; position: relative; } /* mouseover explanations — any element with a data-tip attribute shows a short helper card after a brief hover delay */ [data-tip] { position: relative; } .stat[data-tip] { cursor: help; } [data-tip]::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 8px); z-index: 40; width: 270px; max-width: 72vw; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); color: var(--ink); font-size: 12.5px; font-weight: 450; line-height: 1.45; letter-spacing: 0; text-transform: none; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms ease 400ms, visibility 0s linear 520ms; } [data-tip]:hover::after { opacity: 1; visibility: visible; } /* keep tooltips on the right edge of the page inside the viewport */ .stat-col [data-tip]::after, .calc-inputs .col:last-child [data-tip]::after { left: auto; right: 0; } .stat .k { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 3px; } .stat .v { font-family: var(--mono); font-size: 18px; font-weight: 600; } .stat .v.v-sm { font-size: 14.5px; } .stat .v small { font-size: 12px; color: var(--muted); font-weight: 500; } /* On wide screens the wrapper doesn't scroll, so the sticky header sticks to the page view; on small screens it becomes a horizontal scroller (losing stickiness, which needs a non-scrolling ancestor). */ .table-scroll { overflow-x: visible; } @media (max-width: 900px) { .table-scroll { overflow-x: auto; } } table.results { width: auto; border-collapse: collapse; font-family: var(--mono); font-size: 13px; } table.results th, table.results td { padding: 7px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); } table.results th { font-family: var(--sans); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); position: sticky; top: 0; background: var(--surface); border-bottom: 0; box-shadow: 0 1px 0 var(--line); /* border-bottom doesn't stick */ } table.results th .th-label, table.results th .th-unit { display: block; } table.results th .th-label { line-height: 1.2; } table.results th .th-unit { margin-top: 2px; font-size: 9.5px; letter-spacing: 0.05em; line-height: 1.1; } table.results th:first-child, table.results td:first-child { text-align: left; font-weight: 650; } table.results tbody tr:hover { background: var(--accent-soft); } table.results td.sub-sonic { color: var(--bad); } table.results td.trans-sonic { color: var(--warn); } /* Point blank marks: the zero that opens the window, and every row inside it. Both beat :hover on specificity — the shading is the point. */ table.results tbody tr.pbr-in { background: var(--pbr-in); } table.results tbody tr.pbr-zero { background: var(--pbr-zero); } table.results tbody tr.pbr-in:hover, table.results tbody tr.pbr-zero:hover { filter: brightness(1.08); } /* Comparison rows stay linked while the pointer is over either solution. */ table.results tbody tr.compare-row-hover, table.results tbody tr.compare-row-hover:hover { background: var(--accent-soft); filter: brightness(1.08); } table.results td:first-child small { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-left: 6px; } .results-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); } .comparison-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .comparison-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; } .compare-result-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); } .compare-result-card .card-head { padding: 14px 18px; border-bottom: 1px solid var(--line); } .compare-result-card .card-head h2 { font-size: 16px; } .compare-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); } .compare-summary div { min-width: 0; padding: 9px 11px; background: var(--surface-2); } .compare-summary b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 13px; color: var(--ink); } .compare-summary span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .compare-result-card .table-scroll { overflow-x: auto; max-height: 68vh; } .compare-result-card table.results { min-width: 100%; } .compare-result-card table.results th, .compare-result-card table.results td { padding-left: 7px; padding-right: 7px; } @media (max-width: 900px) { .comparison-results { grid-template-columns: 1fr; } } .mini-btn { appearance: none; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 13px; cursor: pointer; } .mini-btn:hover { border-color: var(--muted); } .empty-state { padding: 56px 24px; text-align: center; color: var(--muted); } .empty-state svg { opacity: 0.5; margin-bottom: 12px; } /* bullet picker */ .bullet-picker-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; } #bullet-results, #b-bullet-results { margin-top: 8px; border: 1px solid var(--line); border-radius: 9px; max-height: 210px; overflow-y: auto; display: none; background: var(--surface); } #bullet-results.open, #b-bullet-results.open { display: block; } .bullet-item { padding: 8px 12px; cursor: pointer; font-size: 13.5px; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); } .bullet-item:last-child { border-bottom: 0; } .bullet-item:hover { background: var(--accent-soft); } .bullet-item .bc { font-family: var(--mono); color: var(--muted); font-size: 12.5px; white-space: nowrap; } .bullet-loaded { margin-top: 8px; font-size: 13px; color: var(--good); display: none; } .bullet-loaded.no-bc { color: var(--warn); } .bullet-loaded.manual { color: var(--muted); } /* caveat callout shown under a selected load (rimfire MV, generic profile) */ .load-note { margin: 8px 0 0; padding: 9px 11px; border-left: 3px solid var(--warn); border-radius: 0 8px 8px 0; background: rgba(214, 138, 60, 0.09); font-size: 12.5px; line-height: 1.45; color: var(--ink); } .load-note strong { color: var(--warn); } /* ---------- calculator: about & FAQ ---------- */ /* Plain prose under the tool: what the solver actually does, and the questions people ask before trusting it. */ .calc-about { max-width: 760px; margin: 52px 0 0; padding-top: 34px; border-top: 1px solid var(--line); } .calc-about h2 { font-size: 17.5px; margin: 40px 0 12px; } .calc-about h2:first-child { margin-top: 0; } .calc-about h3 { font-size: 14.5px; font-weight: 650; margin: 22px 0 6px; color: var(--ink); } .calc-about p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 12px; } .calc-about p strong { color: var(--ink); } .calc-about ul { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 12px; padding-left: 20px; } .calc-about li { margin-bottom: 7px; } .calc-about li strong { color: var(--ink); } /* ---------- print (range card) ---------- */ @media print { body { background: #fff; color: #000; } .site-header, .calc-inputs, .solve-bar, .muted-note, .results-actions, .site-footer, .theme-toggle, .calc-about, .dev-notice, .share-loaded { display: none !important; } .card, .stat { box-shadow: none; border-color: #bbb; } table.results { min-width: 0; font-size: 11px; } /* the point blank window is half the reason to print a range card, so keep its shading instead of letting the printer drop backgrounds */ table.results tbody tr.pbr-in, table.results tbody tr.pbr-zero { -webkit-print-color-adjust: exact; print-color-adjust: exact; } table.results tbody tr.pbr-in { background: #e6f2ea !important; } table.results tbody tr.pbr-zero { background: #cfeaf8 !important; } }