/* ========================================================================== Whetstone Tools — brand.css ("Bench Standard") Datasheet / calibration-document aesthetic. One CSS file, zero assets: no webfont, no icons, no images, no JS. The restraint is the brand. Load order (every page): /hitchmath/styles.css FIRST, then this file. styles.css is NEVER edited; if brand.css fails to load, every page still renders correctly on styles.css alone. ========================================================================== */ /* -------------------------------------------------------------------------- LAYER 1 — TOKEN OVERRIDES (gated: remove class="brand" from any page's and that page reverts entirely to the current cool-gray skin). Exactly four tokens. --accent, --accent-dark, --pass, --marginal, --fail are NEVER re-declared: verdicts, tags, bars, buttons render byte-identical. -------------------------------------------------------------------------- */ body.brand { --bg: #f7f6f2; /* Paper — warm page background (was #f6f8fa) */ --ink: #15181b; /* Ink — text + rule strokes (was #1a2330) */ --ink-soft: #50555d; /* Secondary ink — captions, units, mono labels (was #4a5568) */ --line: #dad8d2; /* Hairline — 1px rules, borders, ticks (was #e2e8f0) */ } /* -------------------------------------------------------------------------- LAYER 2 — CHROME RESTYLE (ungated; later stylesheet wins, original selectors in styles.css never edited). -------------------------------------------------------------------------- */ /* Every number in every calculator, table, and verdict aligns. */ body { font-variant-numeric: tabular-nums; } /* The honed edge — where stone meets paper, on every page. */ header.site { border-bottom: 2px solid var(--accent); } /* Wordmark: "Whetstone" 700 ink, "Tools" 400 secondary ink, green tick before. */ .logo { font-weight: 700; } .logo span { color: var(--ink-soft); font-weight: 400; } .logo .b-tick { display: inline-block; width: 10px; height: 6px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg) translateY(-2px); margin-right: 8px; } /* Anchor targets (e.g. /#standard) clear the header comfortably. */ section[id] { scroll-margin-top: 12px; } /* Brand focus ring — covers header nav, footer grid, and all .b- links (several of which remove underlines, leaving the faint UA default). */ :focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; } /* Visually-hidden utility for screen-reader-only link names. */ .sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* Active/current nav state carries a shape cue, not color alone (1.4.1). */ nav.main a.active, nav.main a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* Form-control boundaries meet 3:1 non-text contrast (1.4.11) — overrides styles.css's #cbd5e0 (1.49:1) without editing the frozen file. */ input[type="number"], select { border-color: #8a939e; } /* 320px: wordmark + both nav links must hold ONE row, no overlap. */ @media (max-width: 374px) { .logo { font-size: 1.02rem; } .logo .b-tick { margin-right: 6px; } nav.main a { margin-left: 10px; font-size: 0.84rem; } nav.main a:first-child { margin-left: 0; } } /* -------------------------------------------------------------------------- LAYER 3 — BRAND COMPONENTS. All classes namespaced .b- (zero collision risk with calculator markup; used only on homepage, /tools/, and the shared footer). Mono micro-labels: never used for body prose. -------------------------------------------------------------------------- */ /* The datasheet voice — mono micro-label treatment (source text stays normal case for screen readers; CSS does the uppercasing). */ .b-eyebrow, .b-group-head, .b-cardhead, .b-spectable dt, .b-foot-head { font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 400; } .b-eyebrow + h2 { margin-top: 0.35em; } /* Brand-page display headline: sentence case, ends with a period. */ .b-h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; margin: 0.35em 0 0.4em; } /* Calibration strip — the ownable motif: a machinist's-scale edge. 1px tick every 8px, taller tick every 40px, green origin tick. */ .b-strip { height: 14px; position: relative; margin: 20px 0 0; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 40px) left bottom / 100% 14px no-repeat, repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 8px) left bottom / 100% 8px no-repeat; } .b-strip::before { content: ""; position: absolute; left: 0; bottom: 0; width: 2px; height: 14px; background: var(--accent); } /* Hero spec strip — hairline-bounded row of mono label/value pairs. */ .b-specrow { display: flex; flex-wrap: wrap; gap: 6px 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 0; margin: 14px 0 0; } .b-specrow b { color: var(--ink); font-weight: 700; } /* Group heading (FIELD CALCULATORS / SEC DATA · CHROME EXTENSIONS). */ .b-group-head { border-bottom: 1px solid var(--line); padding-bottom: 6px; margin: 40px 0 4px; } /* Homepage index rows. */ .b-index { border-top: 1px solid var(--line); } .b-group-head + .b-index { border-top: none; } /* heading rule already drawn */ .b-index .b-row { border-bottom: 1px solid var(--line); padding: 14px 0; } .b-row > p { margin: 4px 0; } /* Catalog card — a miniature datasheet. The top border gets honed on hover. */ .b-card { background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--line); border-radius: 4px; padding: 24px; margin: 18px 0; } .b-card:hover, .b-card:focus-within { border-top-color: var(--accent); } .b-cardhead { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px; } /* Question-first headline — the whole line is the link. */ .b-question { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; } .b-question a { color: var(--ink); text-decoration: none; } .b-question a:hover, .b-question a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* Spec micro-table (definition list). */ .b-spectable { margin: 14px 0; font-size: 0.85rem; } .b-spectable > div { display: flex; gap: 16px; border-top: 1px solid var(--line); padding: 6px 0; } .b-spectable dt { flex: 0 0 5.5rem; padding-top: 2px; } .b-spectable dd { margin: 0; } /* The standard (homepage trust block) — spec-table variant. */ .b-clauses { font-size: 0.92rem; max-width: 70ch; } .b-clauses dt { flex: 0 0 2.2rem; } /* Honesty line. */ .b-cantknow { font-size: 0.85rem; color: var(--ink-soft); margin: 10px 0 0; } /* Link rows. */ .b-links { margin-top: 14px; font-size: 0.92rem; } .b-links a { color: var(--accent-dark); } .b-links a.b-open { color: var(--accent); font-weight: 700; text-decoration: none; } .b-links a.b-open:hover { color: var(--accent-dark); text-decoration: underline; } /* Homepage catalog CTA — the one road to the tools. */ .b-cta { background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--accent); border-radius: 4px; padding: 24px; margin: 36px 0; } .b-cta h2 { margin: 4px 0 10px; } .b-cta p { max-width: 70ch; } .b-cta-link { font-size: 1.05rem; } /* Expandable catalog categories (/tools/) — collapsed until opened. */ details.b-cat { border-top: 1px solid var(--line); } details.b-cat:last-of-type { border-bottom: 1px solid var(--line); } details.b-cat > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 14px; padding: 16px 0; } details.b-cat > summary::-webkit-details-marker { display: none; } .b-cat-title, .b-cat-count, details.b-cat > summary::after { font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; } .b-cat-title { font-size: 0.82rem; font-weight: 700; color: var(--ink); } .b-cat-count { font-size: 0.72rem; color: var(--ink-soft); margin-left: auto; } details.b-cat > summary::after { content: "+ expand"; font-size: 0.72rem; color: var(--accent); } details.b-cat[open] > summary::after { content: "\2212 collapse"; } details.b-cat > summary:hover .b-cat-title { color: var(--accent); } details.b-cat > .b-card:last-of-type { margin-bottom: 28px; } /* On the bench — single hairline row. */ .b-bench { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 12px; } .b-bench p { margin: 4px 0; } details.b-cat + .b-bench { border-top: none; margin-top: 24px; } /* category bottom rule already drawn */ /* Footer colophon. */ footer.site .b-strip { margin: 0 0 16px; } .b-foot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0; } @media (max-width: 560px) { .b-foot-grid { grid-template-columns: 1fr; } } .b-foot-head { margin: 0 0 6px; } .b-foot-grid a { display: block; color: var(--ink-soft); text-decoration: none; padding: 2px 0; } .b-foot-grid a:hover { color: var(--accent); } /* -------------------------------------------------------------------------- LAYER 4 — OPTIONAL WARM RE-TINT of hardcoded cool hexes. Ships commented-out; uncomment PER SELECTOR only if the full local preview shows a visible warm/cool clash on calculator/article pages. The mint .answer/.sticker-help/.keypoint boxes are green-tinted and pair with the accent — leave them unless preview says otherwise. -------------------------------------------------------------------------- */ /* pre.share { background: #f2f1ec; } */ /* table.spec th { background: #f2f1ec; } */ /* .subnav { background: #f2f1ec; } */ /* .bar { background: #edece7; } */ /* input[type="number"], select { border-color: #c9c6bf; } */