/* =============================================================
ScrapeFleet — brand override
Load AFTER css/site.css. Nothing here renames your existing
variables, so every component you already ship keeps working.
============================================================= */
/* --- 1. Fonts -------------------------------------------------
Space Grotesk + JetBrains Mono are loaded via in
partials/head.php (faster than an @import here).
------------------------------------------------------------- */
:root {
--font-sans: 'Space Grotesk', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* --- 2. Citron -----------------------------------------------
Four values run the identity. --primary is redefined rather
than replaced, so .btn-primary, .badge, .text-primary,
.eyebrow, .sec-label etc. all recolor for free.
----------------------------------------------------------- */
--citron: #CDEA4B; /* field / accent on dark */
--citron-hover: #A9C22B;
--citron-deep: #5E7211; /* the only citron safe as small text on white */
--ink: #0B0E10;
--primary: var(--citron);
--on-primary: var(--ink); /* text that sits ON citron — never #fff */
--primary-glow: rgba(205, 234, 75, 0.34);
--primary-soft: rgba(205, 234, 75, 0.13);
--primary-line: rgba(205, 234, 75, 0.24);
/* Pink retired as the decorative accent — it fights citron.
Kept as a token so nothing 404s, but pointed at citron-hover. */
--accent: var(--citron-hover);
/* Status tokens (--pass/--fail/--warn + variants) live in the
"Status is its own scale" section further down. */
}
[data-theme="light"] {
/* On white, citron is a FIELD, never ink. Anything that renders
--primary as text or a 1px stroke uses the deep value. */
--primary: var(--citron-deep);
--on-primary: #ffffff;
--primary-glow: rgba(94, 114, 17, 0.16);
--primary-soft: rgba(94, 114, 17, 0.09);
--primary-line: rgba(94, 114, 17, 0.22);
/* Surfaces. Your current light theme sets --bg-body and --bg-surface
both to #ffffff, so every .card and .status-panel is invisible
except for its 1px border. Dropping the page to a warm off-white
lets white cards lift off it — and warm paper is what makes citron
read as a deliberate choice rather than a highlighter. */
--bg-body: #FBFBF9;
--bg-surface: #FFFFFF;
--bg-surface-hover: #F4F5EF;
--border-color: #E4E5DE;
--text-muted: #5C6472; /* was #64748b — 5.8:1 on the new paper */
--nav-bg: rgba(251, 251, 249, 0.85);
}
/* --- 2b. Light mode, component level ------------------------- */
/* Hero grid + glow: citron at low alpha, not blue. */
[data-theme="light"] .grid-bg { opacity: 0.85; }
[data-theme="light"] .glow-spot {
background: radial-gradient(circle, rgba(205,234,75,0.55) 0%, transparent 70%);
opacity: 0.8;
}
/* Cards: citron-deep on hover reads on paper; raw citron does not. */
[data-theme="light"] .card:hover { border-color: var(--citron-deep); }
[data-theme="light"] .card { box-shadow: 0 1px 2px rgba(11,14,16,0.04); }
/* Code panels stay dark in both themes — a light code block in a
scraping product is a downgrade, and it keeps one anchor of ink
on the page so the layout doesn't float. */
[data-theme="light"] .code-bg, [data-theme="light"] .scraper-page .code { color: #d7deec; }
/* Badges and pills: tinted citron field, ink text, deep citron border.
The badge straddles the card edge, so its field must be OPAQUE —
this hex is the 22% citron tint precomposed over white. */
[data-theme="light"] .badge { background: #F4FAD7; color: #3F4C0B; border-color: var(--citron-deep); }
[data-theme="light"] .credits-pill { background: rgba(205,234,75,0.22); border-color: var(--primary-line); color: var(--ink); }
[data-theme="light"] .scraper-page .plan-gets { background: rgba(205,234,75,0.22); border-color: var(--primary-line); }
/* Step + flow chrome. The icon tiles sit on the paper, not on white,
so they stay distinguishable from the card they live in. */
[data-theme="light"] .step-item, [data-theme="light"] .scraper-page .flow { background: var(--bg-surface); }
[data-theme="light"] .scraper-page .fstep .ico { background: var(--bg-body); color: var(--citron-deep); }
[data-theme="light"] .data-packet, [data-theme="light"] .scraper-page .flow .data-packet {
background: linear-gradient(90deg, transparent, var(--citron-hover), var(--ink));
box-shadow: 0 0 12px rgba(169,194,43,0.5);
}
/* Hero annotation callouts. */
[data-theme="light"] .marker-text { color: #3F4C0B; }
[data-theme="light"] .marker-annotation { stroke: var(--citron-deep); }
/* The one place raw citron belongs on paper: as a full field.
The .scraper-page selector is needed to outweigh the ink-band rule
in section 4 below (equal specificity would lose on source order). */
[data-theme="light"] .cta-band,
[data-theme="light"] .scraper-page .cta-band,
.cta-band--citron {
background: var(--citron);
}
[data-theme="light"] .scraper-page .cta-band h2 { color: var(--ink); }
[data-theme="light"] .scraper-page .cta-band p { color: rgba(11,14,16,0.72); }
[data-theme="light"] .scraper-page .cta-band::after {
background: radial-gradient(600px 300px at 80% -20%, rgba(255,255,255,0.45), transparent 60%);
}
[data-theme="light"] .scraper-page .cta-band .btn-primary { background: var(--ink); color: var(--citron); }
[data-theme="light"] .scraper-page .cta-band .btn-primary:hover { background: #1c2430; color: var(--citron); }
/* --- 3. Type -------------------------------------------------- */
body { font-family: var(--font-sans); }
/* site.css hardcodes 'Inter' on form fields; Inter is no longer loaded.
Buttons don't inherit font by default, so set them too (the cookie
banner buttons are inline-styled with no font-family). */
button,
.form-group input,
.form-group textarea { font-family: var(--font-sans); }
h1, h2, h3, h4 { font-family: var(--font-sans); }
h1 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.06; }
h2 { font-weight: 700; letter-spacing: -0.022em; }
h3 { font-weight: 600; letter-spacing: -0.012em; }
/* Space Grotesk sets a little wider than Inter — pull long copy in.
In centered contexts (footer, CTA bands) the capped box must stay
centered too; the cookie banner's flex row must not be capped at all
(its paragraph is what pushes the buttons to the right edge). */
p { max-width: 68ch; }
.text-center p, .cta-band p { margin-inline: auto; }
#cookieBanner p { max-width: none; }
.container > p, .hero .lede { text-wrap: pretty; }
/* Every number in the product is data: tabular, mono, no wobble. */
.credits-pill, .plan-credits, .plan-gets, .gauge .num, .rating-big .score,
.stat-row .v, .price-cost .pc-num, .hrow .when {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* --- 4. Contrast repairs the recolour forces ------------------
These are the only places where citron-as-primary would have
produced unreadable pairings.
------------------------------------------------------------- */
.btn-primary { color: var(--on-primary); }
.btn-primary:hover { background: var(--citron-hover); }
[data-theme="light"] .btn-primary { background: var(--ink); color: var(--citron); }
[data-theme="light"] .btn-primary:hover { background: #1c2430; }
/* Was a --primary gradient with white text: citron + white fails.
Ink band, citron headline — much stronger anyway. */
.scraper-page .cta-band { background: var(--ink); }
.scraper-page .cta-band::after {
background: radial-gradient(600px 300px at 80% -20%, rgba(205,234,75,0.18), transparent 60%);
}
.scraper-page .cta-band h2 { color: var(--citron); }
.scraper-page .cta-band .btn-primary { background: var(--citron); color: var(--ink); }
.scraper-page .cta-band .btn-primary:hover { background: #dbf26b; color: var(--ink); }
.skip-link { color: var(--on-primary); }
/* site.css hardcodes the old blue tint on .credits-pill, so it stayed
blue while its sibling .plan-gets (token-based) went citron. */
.credits-pill { background: var(--primary-soft); border-color: var(--primary-line); }
.scraper-page .req { color: var(--fail); }
/* Avatar gradient was primary -> pink. Keep it in family. */
.scraper-page .avatar {
background: linear-gradient(135deg, var(--citron), var(--citron-deep));
color: var(--ink);
}
/* Flow packet: citron travelling into white reads as data arriving. */
.data-packet, .scraper-page .flow .data-packet {
background: linear-gradient(90deg, transparent, var(--citron), #ffffff);
box-shadow: 0 0 15px var(--primary-glow);
}
/* Status is its own scale — never the accent. Citron = brand + the one
primary action; status = matched moss/brick pair. */
:root {
--pass: #6FC98A; /* text & thin glyphs on dark */
--pass-bar: #52A96B; /* bars, mass */
--pass-field: #52A96B; /* solid badge field, white glyph on top */
--pass-soft: rgba(111, 201, 138, 0.15);
--pass-line: rgba(111, 201, 138, 0.32);
--fail: #F0897E;
--fail-bar: #D4574C;
--fail-field: #D4574C;
--fail-soft: rgba(240, 137, 126, 0.15);
--fail-line: rgba(240, 137, 126, 0.32);
--warn: #E8B457;
--warn-bar: #C9902C;
--warn-field: #C9902C;
--warn-soft: rgba(232, 180, 87, 0.15);
--warn-line: rgba(232, 180, 87, 0.30);
}
/* Light: fields hold their hex, text darkens for AA on white. */
[data-theme="light"] {
--pass: #3D8452;
--pass-bar: #52A96B;
--pass-field: #52A96B;
--pass-soft: rgba(82, 169, 107, 0.12);
--pass-line: rgba(61, 132, 82, 0.28);
--fail: #B0443C;
--fail-bar: #D4574C;
--fail-field: #D4574C;
--fail-soft: rgba(212, 87, 76, 0.10);
--fail-line: rgba(176, 68, 60, 0.26);
--warn: #8A5B08;
--warn-bar: #C9902C;
--warn-field: #C9902C;
--warn-soft: rgba(201, 144, 44, 0.14);
--warn-line: rgba(138, 91, 8, 0.24);
}
/* Filled badge — one value, both themes, white glyph. */
.badge-pass, .badge-fail, .badge-warn {
width: 26px; height: 26px; border-radius: 50%; flex: none;
display: inline-flex; align-items: center; justify-content: center;
color: #FFFFFF;
}
.badge-pass { background: var(--pass-field); }
.badge-fail { background: var(--fail-field); }
.badge-warn { background: var(--warn-field); }
/* Pills — tinted field, coloured text, hairline border. */
.pill-pass { background: var(--pass-soft); border: 1px solid var(--pass-line); color: var(--pass); }
.pill-fail { background: var(--fail-soft); border: 1px solid var(--fail-line); color: var(--fail); }
.pill-warn { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
/* site.css hardcodes the warn pill's amber hairline; align it. */
.scraper-page .pill.warn { border-color: var(--warn-line); }
/* Bars (scoped: site.css's .scraper-page .runs i would outweigh bare .runs i). */
.scraper-page .runs i { background: var(--pass-bar); }
.scraper-page .runs i.fail { background: var(--fail-bar); }
/* Gauge number: keep the gradient inside the pass scale (site.css
hardcodes a mint stop that clashes with the moss pair). */
.scraper-page .gauge .num { background: linear-gradient(120deg, var(--pass-bar), var(--pass)); -webkit-background-clip: text; background-clip: text; }
/* --- 5. Hero annotations -------------------------------------
Kept on Fuzzy Bubbles (site.css) — they already use --primary,
so the citron recolor happens via the token alone.
------------------------------------------------------------- */
/* --- 6. Logo -------------------------------------------------
The new lockup is multi-colour, so it must NOT inherit a fill.
Ship three files and let CSS pick, rather than recolouring one.
------------------------------------------------------------- */
.logo { width: 168px; height: 34px; fill: none; }
.logo-mark { width: 26px; height: 26px; fill: none; flex: none; }
.logo-lockup { display: flex; align-items: center; gap: 9px; }
.logo-word {
font-family: var(--font-sans);
font-weight: 600;
font-size: 1.06rem;
letter-spacing: -0.02em;
color: var(--text-main);
}
.logo-tld { font-family: var(--font-mono); font-size: 0.62rem; color: var(--primary); align-self: flex-end; padding-bottom: 0.22rem; }
/* Clear space: never less than one unit-width on every side. */
.logo-lockup { padding: 0.34rem 0; }
/* Footer lockup sits in a text-centered container. */
footer .logo-lockup { display: inline-flex; }
/* Mark unit fills (markup lives in partials/logo.php).
Dark theme (default): citron leads, fleet recedes into the ink. */
.logo-mark .u-back { fill: #3A3A32; }
.logo-mark .u-mid { fill: #6B7248; }
.logo-mark .u-lead { fill: var(--citron); }
/* Light theme: hierarchy inverts so all six units stay >=3:1 on white.
Do not simply lighten these — citron cannot be the lead on white. */
[data-theme="light"] .logo-mark .u-back { fill: #7E8A63; }
[data-theme="light"] .logo-mark .u-mid { fill: #748617; }
[data-theme="light"] .logo-mark .u-lead { fill: var(--ink); }