/* ========================================================================== PRJ-48 · PIM — Component styles (v3). Compiles Nick's Stitch mockup (design-refs/stitch-home-v1.html) into semantic classes on the v3 tokens. Governed by design-direction-v3-amendment.md. No Tailwind/utility markup, no Stitch-CDN assets — semantic classes + repo assets. Do not hardcode colour/type/radii — consume the --tokens. v3 pass (Gate 2R, Home) — reverses v2's hard-edged rules per the amendment: • Geometry: rounded (cards 16px, buttons/inputs 8px, badges pill) + shadows + hover lift/border-accent transitions. • Grounds: pure #000 / #fff. Neutrals = one cool-grey ramp (--ink/-soft/--muted/ --line-light). On-black text = white-opacity scale (≥.62 for AA). • One saturated hue (--lime); --error is form-validation only. • Type: body 18/1.6; Space Grotesk 700 headings to ~96px hero / ~60px section; lime *italic* emphasis span (.hl) is the standard heading accent. • Material Symbols Outlined for functional icons only. KILLED from the mockup: the 20%-opacity wallpaper icon in the Local SEO card, the invented form checkmark trio, the footer social column, all Stitch-hosted images. Page-type blocks below (audit/local-seo/interior/blog/legal) still consume the legacy token aliases and are NOT re-derived here — they re-gate individually. ========================================================================== */ *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:88px} /* clears the sticky header for #anchors */ body{ margin:0;background:var(--white);color:var(--ink); font-family:var(--font-body,'Space Grotesk',Helvetica,Arial,sans-serif); font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0;letter-spacing:-0.02em;font-weight:700;line-height:1.1} p{margin:0} img{max-width:100%;height:auto} .mono{font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,Menlo,monospace)} /* lime italic emphasis span — the standard heading accent (amendment §4) */ .hl{color:var(--lime);font-style:italic} /* Material Symbols Outlined — functional icons only */ .material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal; line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap; direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24} .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,48px)} .skip-link{position:absolute;left:-9999px;top:0;background:var(--lime);color:var(--black);padding:10px 16px;z-index:100;border-radius:var(--r-btn)} .skip-link:focus{left:8px;top:8px} /* eyebrow / section label — plain tracked uppercase (the hero variant is a pill badge, below) */ .eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;margin-bottom:16px} .eyebrow.on-dark{color:var(--lime)} .eyebrow.on-light{color:var(--ink-soft)} /* buttons — rounded (8px), sentence-case bold, shadow + hover lift (v3) */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:16px; padding:15px 30px;border-radius:var(--r-btn);border:1px solid transparent;cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease; white-space:nowrap;font-family:inherit;line-height:1.2} .btn:active{transform:scale(.98)} .btn-lime{background:var(--lime);color:var(--black)} .btn-lime:hover{filter:brightness(.96);box-shadow:var(--shadow-cta)} .btn-ghost-dark{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.20)} .btn-ghost-dark:hover{background:rgba(255,255,255,.18)} .btn-white{background:var(--white);color:var(--black)} .btn-white:hover{filter:brightness(.94)} .btn-ghost-light{border-color:var(--line-light);color:var(--ink)} .btn-ghost-light:hover{border-color:var(--ink)} .btn-ink{background:var(--ink);color:var(--lime)} .btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:3px solid var(--lime);outline-offset:3px} /* ---------- header (dark, sticky) ---------- */ .dark{background:var(--black);color:#fff} header.dark{position:sticky;top:0;z-index:50;box-shadow:var(--shadow-sm)} /* GeneratePress reuses the class name `.site-header` and its inline dynamic CSS paints it `background-color:var(--base-3)` (white), which overpaints our black `header.dark`. Our inner wrapper is `
`, so neutralise GP's ground here (scoped to header.dark so it beats GP's 0,1,0 inline rule). Not visible in the static previews, which don't load the GP parent CSS. */ header.dark .site-header{background:transparent} .site-header{display:flex;align-items:center;justify-content:space-between;gap:24px; padding:16px 0;border-bottom:1px solid var(--line-dark)} .brand{display:flex;align-items:center;gap:10px} /* 3:1 cropped wordmark — sized by WIDTH, height auto. 240 → ~78px tall; the logo drives the bar height (~111px, as at v1-final) — no min-height override. */ .brand img{width:240px;height:auto;max-width:100%;display:block} .nav{display:flex;gap:32px;font-size:14px;color:var(--on-black-1);align-items:center} /* Resting link colour made EXPLICIT (not just inherited from .nav) so the GeneratePress parent's link colour can't darken it on the live render — the previews never load GP, which is why this only surfaced there. Matches the preview's readable value. */ .nav a{color:var(--on-black-1)} .nav a:hover{color:var(--lime)} .nav a[aria-current="page"]{color:#fff;font-weight:700;border-bottom:2px solid var(--lime);padding-bottom:2px} .nav .btn{color:var(--black);padding:10px 22px;font-size:14px} .nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px} .nav-toggle span{width:24px;height:2px;background:var(--lime);display:block;transition:transform .2s ease,opacity .2s ease} /* ---------- hero (dark, image-slot-ready) — left-aligned, big type ---------- */ .hero-band{position:relative;display:flex;align-items:center;overflow:hidden; min-height:clamp(480px,74vh,720px)} .hero-media{position:absolute;inset:0;z-index:0} /* slot: monochrome photo goes here */ .hero-media img{width:100%;height:100%;object-fit:cover} .hero-band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:rgba(0,0,0,.72)} /* heavy overlay — flat black until a photo is sourced */ .hero-band > .wrap{position:relative;z-index:2;width:100%} .hero{padding:clamp(32px,4vw,56px) 0;max-width:896px;text-align:left} .hero h1{font-size:var(--h1);line-height:1.1;letter-spacing:-0.03em;color:#fff;margin:0 0 24px} .hero .sub{margin:0 0 32px;font-size:clamp(18px,2vw,20px);line-height:1.6;color:var(--on-black-1);max-width:640px} .hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:flex-start} /* hero eyebrow = pill badge (bordered, backdrop-blur) */ .hero .eyebrow{display:inline-block;background:rgba(0,0,0,.5);color:var(--lime); border:1px solid rgba(183,227,75,.3);border-radius:var(--r-badge);padding:7px 16px; font-size:12px;font-weight:700;letter-spacing:.16em;margin-bottom:24px;backdrop-filter:blur(4px)} /* ---------- trust + stats band (dark, bordered) ---------- */ .trust-band{border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:40px 0} .trust-strip{text-align:center;font-size:11px;letter-spacing:.2em;font-weight:700; text-transform:uppercase;color:var(--on-black-2);margin-bottom:48px} .trust-strip .lead{color:var(--lime)} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .stat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px; border-radius:var(--r-card);transition:background .2s ease} .stat:hover{background:rgba(255,255,255,.05)} .stat + .stat{border-left:1px solid var(--line-dark)} .stat .k{font-size:clamp(24px,2.8vw,30px);font-weight:700;color:#fff;letter-spacing:-0.02em} .stat .v{font-size:15px;color:var(--on-black-2);margin-top:8px} /* ---------- section shell ---------- */ section{scroll-margin-top:88px} /* clears the sticky header for in-page anchors */ .sec-head{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:64px} @media (min-width:1024px){.sec-head{grid-template-columns:1fr 1fr;align-items:end;gap:48px}} .sec-head h2{font-size:var(--h2)} .sec-head .lede{font-size:18px;line-height:1.6;color:var(--ink-soft);border-left:4px solid var(--lime);padding-left:24px} /* ---------- services (light) ---------- */ .services{padding:clamp(64px,9vw,96px) 0} .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .card{background:var(--white);border-radius:var(--r-card);padding:32px;border:1px solid var(--line-light); box-shadow:var(--shadow-card);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease} .card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)} .card .chip{width:48px;height:48px;border-radius:var(--r-chip);display:flex;align-items:center; justify-content:center;margin-bottom:24px;background:var(--black);color:var(--lime);transition:background .2s ease,color .2s ease} .card:hover .chip{background:var(--lime);color:var(--black)} .card .chip .material-symbols-outlined{font-size:24px} .card .tag{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px} /* --ink-soft (not --muted) for clean AA at 10px */ .card h3{font-size:24px;font-weight:700;margin-bottom:16px} .card p{font-size:16px;line-height:1.6;color:var(--ink-soft)} /* spine = the emphasised service ("main thing"): black card, elevated. No wallpaper icon. */ .card.spine{background:var(--black);color:#fff;border-color:transparent;box-shadow:var(--shadow-lg)} .card.spine .chip,.card.spine:hover .chip{background:var(--lime);color:var(--black)} .card.spine .tag{color:var(--lime)} .card.spine p{color:var(--on-black-1)} /* ---------- process (light panel) — free/paid line visible ---------- */ .process{padding:clamp(64px,9vw,96px) 0} .panel{background:var(--white);border-radius:var(--r-card);border:1px solid var(--line-light); padding:clamp(32px,5vw,64px);box-shadow:var(--shadow-panel)} .panel > .eyebrow,.panel > h2,.panel > .lede{text-align:center;margin-left:auto;margin-right:auto} .panel > h2{font-size:var(--h2);margin-bottom:24px;max-width:820px} .panel > .lede{font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:680px;margin-bottom:64px} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px} .step{position:relative;padding-top:28px} .step .n{position:absolute;top:-8px;left:-4px;z-index:0;font-size:clamp(48px,6vw,60px);font-weight:700; line-height:1;letter-spacing:-0.02em;color:rgba(0,0,0,.12);transition:color .2s ease} .step:hover .n{color:rgba(183,227,75,.28)} .step .cost,.step h3,.step p{position:relative;z-index:1} .step h3{font-size:20px;font-weight:700;margin-bottom:12px} .step p{font-size:14px;line-height:1.6;color:var(--ink-soft)} .step .cost{display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase; padding:5px 12px;border-radius:var(--r-badge);margin-bottom:16px;font-weight:700} .step .cost.free{background:var(--lime);color:var(--black)} .step .cost.paid{background:var(--black);color:#fff} /* ---------- reality-check form (white section, black form panel) ---------- */ .rc-section{background:var(--white);padding:clamp(64px,9vw,96px) 0} .rc-section .rc-inner{max-width:640px;margin:0 auto} .rc-form{background:var(--black);color:#fff;border:1px solid var(--line-dark);border-radius:var(--r-card); padding:clamp(28px,4vw,40px);box-shadow:var(--shadow-panel)} .rc-form .form-label{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:12px} .rc-form h2{font-size:clamp(28px,3.4vw,36px);margin:0 0 12px;color:#fff} .rc-form .form-intro{font-size:16px;color:var(--on-black-1);margin-bottom:28px;line-height:1.6} .rc-field{margin-bottom:20px} .rc-field label{display:block;font-size:13px;font-weight:700;color:var(--on-black-1);margin-bottom:8px} .rc-field input,.rc-field textarea{width:100%;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20); border-radius:var(--r-input);color:#fff;font:inherit;font-size:16px;padding:12px 14px;transition:border-color .2s ease,box-shadow .2s ease} .rc-field input::placeholder,.rc-field textarea::placeholder{color:var(--on-black-3)} .rc-field input:focus,.rc-field textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 2px rgba(183,227,75,.4)} .rc-row{display:grid;grid-template-columns:1fr 1fr;gap:20px} .rc-form button{width:100%;margin-top:6px} .rc-consent{font-size:12.5px;color:var(--on-black-2);margin-top:16px;line-height:1.55;text-align:center} .rc-consent a{color:#fff;text-decoration:underline} .rc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .rc-status{margin-top:14px;font-size:14px} .rc-status.is-ok{color:var(--lime);padding:12px 0} /* on-dark rendering of the --error red exception (amendment §2), lightened for AA on black */ .rc-status.is-err{color:#ff9d9d;font-weight:700;padding:12px 0} /* ---------- proof (light section, bordered cards) ---------- */ .proof{padding:clamp(64px,9vw,96px) 0} .proof .band{background:transparent;padding:0;border-radius:0} .proof .sec-head{grid-template-columns:1fr;text-align:center;margin-bottom:64px} .proof .sec-head h2{font-size:var(--h2);color:var(--ink)} .proof .sec-head .lede{border:0;padding:0;color:var(--ink-soft);max-width:640px;margin:0 auto} .proof-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .proof-card{background:var(--white);border:1px solid var(--line-light);border-radius:var(--r-card); padding:32px;transition:border-color .2s ease} .proof-card:hover{border-color:rgba(183,227,75,.5)} .proof-card .chip{color:var(--black);margin-bottom:24px;transition:color .2s ease} .proof-card:hover .chip{color:var(--lime)} .proof-card .chip .material-symbols-outlined{font-size:36px} .proof-card h3{font-size:24px;font-weight:700;margin-bottom:16px;color:var(--ink)} .proof-card p{font-size:14px;line-height:1.6;color:var(--ink-soft)} /* ---------- CTA (dark, radial glow) — free primary + paid audit secondary ---------- */ .cta{position:relative;overflow:hidden;background:var(--black);color:#fff;text-align:center;padding:clamp(72px,10vw,112px) 0} .cta::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(circle at 50% 40%, rgba(183,227,75,.14), transparent 60%)} .cta > .wrap{position:relative;z-index:1} .cta .eyebrow{color:var(--lime);letter-spacing:.2em;margin-bottom:24px} /* Base heading colour EXPLICIT white (was only inherited from .cta{color:#fff}); the GP parent's heading colour otherwise wins on the live render and tints #cta-h. The .hl span keeps its own color:var(--lime), so "free" stays green — per the preview. */ .cta h2{font-size:var(--h2-cta);max-width:900px;margin:0 auto 24px;color:#fff} .cta p{margin:0 auto 40px;font-size:18px;line-height:1.6;color:var(--on-black-2);max-width:640px} .cta-actions{display:inline-flex;gap:20px;flex-wrap:wrap;justify-content:center} /* ---------- footer (dark) ---------- */ .site-footer{background:var(--black);color:#fff;padding:clamp(56px,8vw,80px) 0 32px;border-top:1px solid var(--line-dark)} .foot-top{display:flex;justify-content:space-between;gap:56px;flex-wrap:wrap} .foot-about{max-width:360px} .foot-about img{width:240px;height:auto;max-width:100%;margin-bottom:24px} .foot-about p{font-size:14px;line-height:1.7;color:var(--on-black-2)} .foot-cols{display:flex;gap:64px;flex-wrap:wrap;font-size:14px} .foot-col{display:flex;flex-direction:column;gap:16px;color:var(--on-black-1)} .foot-col a:hover{color:var(--lime)} .foot-col .h{color:#fff;font-weight:700;margin-bottom:8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase} .foot-col address{font-style:normal;color:var(--on-black-1);line-height:1.9} .foot-bottom{margin-top:56px;padding-top:32px;border-top:1px solid var(--line-dark); display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--on-black-2)} /* ========================================================================== COMMERCIAL / CONTENT PAGE-TYPE — shared kit for the long-form locked masters (Audit §2–§6, and reused by Local SEO / Interior / Legal at their gates). v3 (Gate 3): re-derived to the Home patterns — 18px prose, var(--h2) headings, v3 cards (border + radius + shadow), rounded chips. No mono. Consumes v3 tokens. ========================================================================== */ /* light content-section shell + header (used by §2 §3 §4 §5 §6) */ .a-sec{padding:clamp(64px,9vw,96px) 0} .a-head{max-width:820px;margin-bottom:48px} .a-head .eyebrow{margin-bottom:16px} .a-head h2{font-size:var(--h2)} .a-head .a-intro{font-size:18px;line-height:1.6;color:var(--ink-soft);margin-top:20px} /* prose (§2, §5) — locked long-form copy; --ink on #fff ≈ 16:1 */ .prose{max-width:760px} .prose > * + *{margin-top:18px} .prose p{font-size:18px;line-height:1.7;color:var(--ink)} .prose strong{font-weight:700;color:var(--ink)} .prose .credit{font-size:20px;line-height:1.6;font-weight:700;color:var(--ink); border-left:4px solid var(--lime);padding-left:24px} /* §3 — the itemised deliverable checklist (8 lines): v3 cards, lime counter chip. */ .deliverables .deliv-list{list-style:none;margin:0;padding:0;display:grid;gap:16px;max-width:880px;counter-reset:d} .deliv{background:var(--white);border:1px solid var(--line-light);border-radius:var(--r-card); box-shadow:var(--shadow-card);padding:24px 30px 24px 72px;position:relative; transition:box-shadow .2s ease,border-color .2s ease} .deliv:hover{box-shadow:var(--shadow-lg)} .deliv::before{counter-increment:d;content:counter(d);position:absolute;left:26px;top:24px; width:30px;height:30px;border-radius:var(--r-chip);background:var(--lime);color:var(--black); font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center} .deliv p{font-size:16px;line-height:1.6;color:var(--ink-soft)} .deliv strong{color:var(--ink);font-weight:700} /* §4 — price + scope: white .panel with a black price-figure inset (lime figure). */ .price-panel{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,48px);align-items:start} .price-figure{background:var(--black);border-radius:var(--r-card);padding:32px 36px;text-align:center;min-width:220px} .price-figure .fig{font-size:clamp(44px,6vw,60px);font-weight:700;color:var(--lime);letter-spacing:-0.03em;line-height:1} .price-figure .fig-sub{font-size:13px;line-height:1.5;color:var(--on-black-2);margin-top:14px} .price-body h2{font-size:var(--h2);margin-bottom:16px} .price-body > p{font-size:18px;line-height:1.7;color:var(--ink-soft);margin-bottom:24px;max-width:620px} .scope-list{list-style:none;margin:0;padding:0;display:grid;gap:12px} .scope-list li{position:relative;padding-left:36px;font-size:16px;line-height:1.6;color:var(--ink)} /* tick reuses the .deliv chip grammar — lime chip, ink glyph — scaled down */ .scope-list li::before{content:"\2713";position:absolute;left:0;top:1px;width:24px;height:24px; border-radius:var(--r-chip);background:var(--lime);color:var(--black); font-size:13px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center} /* §6 — who it's for: bold-led list + a closing "not for you" note, on light */ .fit-list{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:18px;max-width:780px} .fit-list li{position:relative;padding-left:30px;font-size:18px;line-height:1.6;color:var(--ink-soft)} .fit-list li::before{content:"+";position:absolute;left:0;top:0;color:var(--lime-ink);font-weight:700;font-size:20px} .fit-list li strong{color:var(--ink)} .fit-not{max-width:780px;font-size:18px;line-height:1.6;color:var(--ink-soft); border-top:1px solid var(--line-light);padding-top:24px} .fit-not strong{color:var(--ink)} @media (max-width:720px){ .price-panel{grid-template-columns:1fr} .price-figure{min-width:0} .deliv{padding:22px 24px 22px 64px} } /* ========================================================================== LOCAL SEO PAGE-TYPE (Gate 3) — inherits the Audit commercial template wholesale (.a-sec/.a-head/.prose/.panel/.fit-list/.scope-list/.hero/.cta all reused as-is). Only NEW plumbing here, no new archetype, no new tokens: • .subsec — a de-emphasised variant of .a-sec for §4 (PPC). It must read as a SUPPORTING note, not a peer service (spec §3, Option B): a hairline separates it, the heading is smaller, the prose is lighter/narrower. • .terms-panel — spacing helper so §5's .panel holds an eyebrow + prose + the reused .scope-list cleanly (the base .panel only styles > h2 / > .lede). ========================================================================== */ /* §4 — Google Ads as a SUBORDINATE supporting section (visually lighter than §2/§3) */ .subsec{padding:clamp(36px,4.5vw,56px) 0} .subsec .subsec-inner{max-width:720px;border-top:1px solid var(--line-light);padding-top:clamp(30px,4vw,40px)} .subsec .a-head{margin-bottom:18px} .subsec .a-head h2{font-size:clamp(21px,2.3vw,25px)} /* below the peer h2 range (29–36px) */ .subsec .prose{max-width:720px} .subsec .prose p{font-size:16px;color:var(--ink-soft)} /* lighter than peer prose (17px --ink) */ /* §5 — terms panel: eyebrow + h2 + prose + reused .scope-list inside one .panel */ .terms-panel .eyebrow{margin-bottom:16px} .terms-panel > h2{margin-bottom:6px} .terms-panel .prose{max-width:640px;margin-top:18px} .terms-panel .scope-list{margin-top:28px} /* ========================================================================== INTERIOR TEMPLATE (Gate 4) — established by the Approach page; About + Contact inherit this block. Reuses the commercial kit wholesale (.hero/.a-sec/.a-head/ .prose/.proof/.panel/.cta all as-is). Only NEW plumbing here, no new archetype, no new tokens: • .prose ol.cycle — the §3 numbered framework cycle rendered INSIDE .prose. Reuses the established .deliv counter-chip grammar (lime chip, ink counter, --r-chip, mono) — the kit's sanctioned numbered-item treatment — so it is not a new component, just prose list typography for the locked copy. • .lines-panel — spacing so §6's reused .panel holds an eyebrow + h2 + the reused .fit-list cleanly (the base .panel only styles > h2 / > .lede). ========================================================================== */ /* §3 — numbered framework cycle inside .prose (reuses the .deliv chip grammar) */ .prose ol.cycle{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:cyc;max-width:720px} .prose ol.cycle li{position:relative;padding-left:48px;font-size:17px;line-height:1.75;color:var(--ink)} .prose ol.cycle li::before{counter-increment:cyc;content:counter(cyc);position:absolute;left:0;top:2px; width:28px;height:28px;border-radius:var(--r-chip);background:var(--lime);color:var(--ink); font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center} .prose ol.cycle li strong{color:var(--ink);font-weight:700} /* §6 — "the lines" panel: eyebrow + h2 + reused .fit-list inside one .panel. (Also reused by the Contact page §4 "faster route" panel — eyebrow + h2 + prose.) */ .lines-panel .eyebrow{margin-bottom:16px} .lines-panel > h2{margin-bottom:6px} .lines-panel .fit-list{margin-top:26px;margin-bottom:0} .lines-panel .prose{max-width:640px;margin-top:18px} /* Contact §3 — Google Maps Embed API map of the PIM GBP place. The `pb` embed is keyed to the place by feature ID + name (pin/card = "Positive Internet Marketing Ltd", verified 9 Jul) — a shared-centre address string would resolve to the BUILDING; this does not. Lazy-loaded (CWV); responsive wrapper. */ .map-embed{margin-top:30px;border:1px solid var(--line-light);border-radius:var(--r-btn);overflow:hidden;line-height:0} .map-embed iframe{width:100%;height:400px;border:0;display:block} /* ========================================================================== BLOG PAGE-TYPE (Gate 6) — the single template inherits the Interior template. Composed from the 2a kit + tokens; no new visual language. New here: • .prose h2/h3 — in-body subheads for the long single-post .prose (the Interior pages had one section head each; a blog body flows many). Sized on the existing scale, existing tokens. • .pdiagram / .pd-* — the ONE new element: the token-only proximity SVG (bone ground, charcoal grid/nodes, --lime centre pin only). No new tokens. • .post-list / .post-card — archive list. NO dates, counts, pagination, or "latest/recent" framing (cadence prohibition); reads intentional at n=1. ========================================================================== */ /* in-body subheads for the single-post prose (kit type scale, existing tokens) */ .prose h2{font-size:clamp(23px,2.6vw,29px);line-height:1.2;letter-spacing:-0.02em; color:var(--ink);margin-top:14px} .prose h3{font-size:clamp(19px,2.1vw,22px);line-height:1.25;color:var(--ink);margin-top:8px} .prose > h2 + p,.prose > h3 + p{margin-top:14px} /* GUARD: the reality-check form is a self-contained DARK component; on the blog single it is embedded inside .prose (via the_content), so .prose's light-ground text colours would cascade into it dark-on-dark. Re-assert the form's OWN colours, scoped to .prose so no other page is touched. (.prose h2 ties .rc-form h2 on specificity and won on source order; .prose p out-specifies .rc-consent — both corrected here.) Component fix, not markup. */ .prose .rc-form h2{color:#fff} .prose .rc-form .form-intro{color:var(--on-black-1)} .prose .rc-form .rc-consent{color:var(--on-black-2)} .prose .rc-form .rc-field label{color:var(--on-black-2)} /* Body links. The global reset (a{color:inherit;text-decoration:none}) leaves a body link indistinguishable from text. Give blog-post prose links a real affordance — SCOPED to .blog-single so signed-off pages that also nest links in .prose (e.g. Contact §3 tel/mailto) are untouched. --lime-ink on bone = ~8.8:1 (AA/AAA). */ .blog-single .prose a{color:var(--lime-ink);text-decoration:underline;text-underline-offset:2px} .blog-single .prose a:hover{text-decoration-thickness:2px} .blog-single .prose .rc-form a{color:#fff} /* any form link stays legible on the dark card */ /* Bullet lists in post prose. Post 3 is the first blog post to use them; there was no .prose ul/li rule, so they rendered browser-default. Give them a token-only treatment matching .prose p rhythm (17px/1.75, --ink) with a lime marker. SCOPED to .blog-single so signed-off page-types that nest .prose lists are untouched — same discipline as the body-link and .rc-form scoping above. NOT borrowed from .scope-list/.fit-list (those carry check/plus semantics of their own). Decorative marker → no text-contrast requirement. */ .blog-single .prose ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:720px} .blog-single .prose ul li{position:relative;padding-left:26px;font-size:17px;line-height:1.75;color:var(--ink)} .blog-single .prose ul li::before{content:"";position:absolute;left:3px;top:11px; width:7px;height:7px;border-radius:50%;background:var(--lime)} /* single-post shell + title hero (reuses .hero; title only — no eyebrow/sub/date) */ .blog-single .prose{max-width:720px} .blog-hero{max-width:900px} .blog-hero h1{margin-top:0} /* ---- the proximity diagram (schematic; tokens only) ---- */ .pdiagram{margin:34px 0 0;max-width:720px} .pd-svg{display:block;width:100%;height:auto;border:1px solid var(--line-light);border-radius:var(--r-btn)} .pd-ground{fill:var(--white)} .pd-grid line{stroke:var(--black);stroke-opacity:.20;stroke-width:2} .pd-node{fill:var(--white);stroke:var(--black);stroke-width:2.5} .pd-centre{fill:var(--lime);stroke:var(--lime)} .pd-hollow{fill:none;stroke:var(--black);stroke-opacity:.45;stroke-width:2;stroke-dasharray:5 7} .pd-label{font-family:var(--font-mono);font-size:30px;fill:var(--ink); text-anchor:middle;dominant-baseline:central} .pd-label-centre{fill:var(--ink)} /* ink on --lime = 11.81:1 AA */ .pd-label-hollow{fill:var(--ink-soft)} /* unranked mark carries meaning → AA-normal (6.25:1) */ .pd-caption{font-family:var(--font-display);font-size:14px;line-height:1.5; color:var(--ink-soft);margin-top:12px} /* ---- archive: intentional at exactly one post; no cadence signals ---- */ .post-list{list-style:none;margin:0;padding:0;display:grid;gap:20px;max-width:760px} .post-card{background:var(--white);border-radius:var(--r-btn);padding:30px 32px; border:1px solid var(--line-light)} .post-card a{display:block;text-decoration:none;color:inherit} .post-card h2{font-size:clamp(22px,2.6vw,28px);line-height:1.2;letter-spacing:-0.02em;color:var(--ink)} .post-card p{font-size:16px;line-height:1.7;color:var(--ink-soft);margin-top:12px} /* whole card is the link (title is the anchor text) — no separate affordance string */ .post-card a:hover h2{text-decoration:underline;text-underline-offset:3px} .post-card a:focus-visible{outline:3px solid var(--lime);outline-offset:3px} /* ========================================================================== LEGAL / UTILITY pages + cookie consent (Legal gate). Interior-template kit reused (.a-sec/.wrap/.prose); tokens only, no new palette. Utility pages carry NO hero, so the H1 lives in the light section — the one style the reused kit didn't already carry. ========================================================================== */ .legal .prose{max-width:760px} .legal-prose h1{font-size:clamp(30px,4vw,42px);line-height:1.1;letter-spacing:-0.02em;color:var(--ink);margin-bottom:10px} .legal-prose h2{font-size:clamp(21px,2.4vw,26px);line-height:1.2;color:var(--ink);margin-top:12px} .legal-prose > h2 + p{margin-top:14px} .legal-prose a{color:var(--lime-ink);text-decoration:underline;text-underline-offset:2px} /* body-link affordance on bone (~8.8:1) */ .legal-prose a:hover{text-decoration-thickness:2px} .legal-prose code{font-family:var(--font-mono);font-size:.9em;background:var(--lime-soft);color:var(--lime-ink);padding:1px 6px;border-radius:var(--r-chip)} /* footer legal links (Privacy / Terms / Cookie settings) — the "Cookie settings" trigger re-opens the banner, so it's a real