/* ============================================================ Patch Perfect — UI LAYER Loads last. Keeps the CEO's brand layer intact (navy field, Patch Blue, the lockup, Bebas on hero + logo, uppercase buttons) and rebuilds the *interface* layer underneath it for the people who actually have to read the page. Three moves: 1. Warm the neutrals. Every chromatic brand token is untouched — only the greys change. Real plaster is warm; the cool ramp is what read as clinical. Revert with . 2. Soften shape. 8 / 14 / 20 instead of 6 / 10 / 16. Pills stay retired — the boards killed those on purpose. 3. Quiet the type. Bebas pulled back to logo, hero, page titles, prices, and the tagline. Everything else is Montserrat, sentence case. ============================================================ */ :root { /* 1 — warm neutral ramp (chromatic tokens deliberately untouched) */ --pp-wall: #F6F3EE; --pp-wall-deep: #F0EBE3; --pp-plaster: #EBE5DB; --pp-plaster-deep: #D9D0C2; --pp-paper: #FFFFFF; --border: #E3DCD1; --border-strong: #CCC3B7; --fg-muted: #6B6862; --fg-subtle: #938F87; /* 2 — softened shape */ --radius-xs: 3px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; /* Warm the shadows to match the surface */ --shadow-xs: 0 1px 0 rgba(46, 38, 28, 0.05); --shadow-card: 0 1px 2px rgba(46, 38, 28, 0.05), 0 8px 22px rgba(46, 38, 28, 0.07); --shadow-lg: 0 4px 8px rgba(46, 38, 28, 0.07), 0 20px 44px rgba(46, 38, 28, 0.13); /* 3 — palette discipline: blue takes the CTA back from copper */ --action: var(--pp-blue); --action-fg: var(--pp-paper); } /* Escape hatch — restores the design system's cool ramp verbatim */ html[data-surface="cool"] { --pp-wall: #F5F7FA; --pp-wall-deep: #EDF1F7; --pp-plaster: #E4EAF2; --pp-plaster-deep: #D3DCE7; --border: #DCE3EC; --border-strong: #B9C4D2; --fg-muted: #5F6B78; --fg-subtle: #96A2B0; } /* ─────────── TYPE: quiet the interface ─────────── Bebas survives where it's a brand moment. Section heads and card titles become Montserrat sentence case — this is the single biggest change to how calm the page reads. */ .section-head h2, .partners-text h2, .final-cta h2, .deadline-band h2, .apply-block h2, .posting-head h2, .role-card h3, .posting-body h3, .scope-list h4, .estimate-q { font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: -0.015em; line-height: 1.15; } .section-head h2, .partners-text h2, .final-cta h2, .apply-block h2, .estimate-q { font-size: clamp(28px, 3.1vw, 40px); } .posting-head h2 { font-size: clamp(26px, 2.8vw, 36px); } .role-card h3 { font-size: clamp(23px, 2.2vw, 29px); } .posting-body h3 { font-size: 22px; } .scope-list h4 { font-size: 21px; } /* Card / tile titles — sentence case, no tracking-out */ .situation-tile h4, .process-step h4, .proof-card h4, .price-card h4, .partner-card .body strong, .partner-feature-card h4, .service-tile h4 { font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: -0.005em; line-height: 1.3; } .situation-tile h4 { font-size: 16.5px; } .process-step h4, .proof-card h4, .service-tile h4 { font-size: 18px; } .price-card h4 { font-size: 19px; } .partner-card .body strong, .partner-feature-card h4 { font-size: 15px; } /* Nav reads as navigation, not signage */ .nav-links a { text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 600; } /* Bebas stays here: logo, hero, page titles, prices, tagline. */ /* ─────────── DENSITY: let it breathe ─────────── */ .section { padding: 96px 0; } .section-head { margin-bottom: 56px; } .section-head p { font-size: 17px; line-height: 1.6; max-width: 620px; margin-left: auto; margin-right: auto; } .hero-sub { font-size: 19px; line-height: 1.6; } .hero-grid { padding: 72px 0 96px; gap: 64px; } .situation-grid, .process-grid, .svc-grid { gap: 18px; } .situation-tile { padding: 22px; min-height: 182px; gap: 16px; } .process-step { padding: 26px; } .price-card { padding: 28px; } .proof-card .body { padding: 22px; gap: 12px; } .process-step p, .proof-card .note, .partner-feature-card p { font-size: 14.5px; line-height: 1.6; } .situation-tile .meta, .process-step .timestamp { letter-spacing: 0.08em; } /* ─────────── COLOR DISCIPLINE ─────────── Green is a product-UI signal only. On marketing surfaces the proof is the photograph, so the tags go navy. */ .hero-card .badge-proof, .proof-card .badge-proof { background: var(--pp-navy); color: var(--pp-wall); border-color: var(--pp-navy); } .hero-card .badge-proof .dot, .proof-card .badge-proof .dot { background: var(--pp-finish); } .ba-tag.after { background: var(--pp-navy); color: var(--pp-wall); } /* Step 4 rejoins the sequence instead of turning green */ .process-step.is-done .num { background: var(--pp-blue); } /* Copper: hairline punctuation, never a fill. One per surface. */ .deadline-row.is-target .tag { color: var(--pp-copper); } .deadline-row.is-target { box-shadow: inset 2px 0 0 var(--pp-copper); padding-left: 14px; } /* ─────────── HERO: the evidence is the argument ─────────── */ .hero-grid { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: center; } .hero-h1 { font-size: clamp(46px, 5.2vw, 76px); } .hero-card { padding: 22px; border-radius: var(--radius-xl); } .hero-card .ba-grid { gap: 10px; } .hero-card .ba-frame { aspect-ratio: 3 / 4; border-radius: var(--radius-md); } .hero-card .ba-tag { font-size: 10.5px; padding: 5px 11px; border-radius: var(--radius-xs); } .hero-card-meta { margin-top: 18px; padding-top: 16px; } .hero-trust { gap: 10px 18px; } /* Stack earlier — the headline column gets cramped before 920 */ @media (max-width: 1040px) { .hero-grid, .landing-hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero-card .ba-frame { aspect-ratio: 4 / 3; } } @media (max-width: 920px) { .section { padding: 64px 0; } } /* ─────────── SOFTEN THE REMAINING HARD EDGES ─────────── */ .proof-card .imgs .ba-frame:first-child { border-radius: var(--radius-lg) 0 0 0; } .proof-card .imgs .ba-frame:last-child { border-radius: 0 var(--radius-lg) 0 0; } .option-card { border-radius: var(--radius-lg); padding: 18px 20px; } .estimate-shell { border-radius: var(--radius-xl); } /* ============================================================ PALETTE DISCIPLINE — full pass Green is a product signal: it lives inside the estimate flow and nowhere else. Copper is punctuation: the lockup's PAINT., one deadline hairline, and the careers annotation. Nothing else gets a third or fourth hue. ============================================================ */ /* Primary CTA returns to Patch Blue (btn-action hardcodes copper) */ .btn-action { background: var(--pp-blue); color: var(--pp-paper); } .btn-action:hover { background: var(--pp-blue-700); } .badge-action { color: var(--pp-blue-700); background: var(--pp-blue-100); border-color: var(--pp-blue); } /* Green off every marketing surface */ .hero-trust svg, .scope-list.is-does .ico, .role-card .facts svg, .pmu-checks li svg { color: var(--pp-blue); } .surface-blue .pmu-checks li svg, .card-patch.surface-blue .pmu-checks li svg { color: var(--pp-finish); } .badge-proof { color: var(--pp-navy); background: var(--pp-plaster); border-color: var(--pp-navy); } .badge-solid { background: var(--pp-navy); color: var(--pp-wall); } .proof-stamp { color: var(--pp-navy); border-color: var(--pp-navy); background: var(--pp-plaster); } .proof-stamp::before { background: var(--pp-blue); } /* ...and restored inside the estimate flow, where "done" needs a color that isn't the interactive one */ .estimate-page .badge-proof { color: var(--pp-proof-700); background: var(--pp-proof-100); border-color: var(--pp-proof); } .estimate-page .proof-stamp { color: var(--pp-proof-700); border-color: var(--pp-proof); background: var(--pp-proof-100); } .estimate-page .proof-stamp::before { background: var(--pp-proof); } .estimate-rail .bar.is-done, .confirm-check { background: var(--pp-proof); } .timeline-row.is-done .ico-end svg { color: var(--pp-proof); } /* Copper demoted from repeated separator to nothing */ .values-strip .dot { color: var(--fg-subtle); } /* Softer monogram tile to match the new radii */ .nav-logo svg rect:first-child { rx: 10; }