/* * Paintcoats homepage component styles. * Ported from paintcoats-homepage.html (the reference implementation — * see CLAUDE.md §5). Scoped under .pc so it can't leak * onto the rest of the site; the class names below match the reference * file 1:1 wherever possible so this file stays a near-verbatim port. * * Adaptations for WordPress core blocks (not present in the static * reference): * - Reset/base rules are scoped to .pc instead of * / body. * - Nav (.nav*) and footer (.foot*) rules are dropped — those render * through Kadence's Header/Footer builder, not this pattern. * - Button classes target .wp-block-button.btn-x .wp-block-button__link * because Gutenberg puts "Additional CSS Class" on the outer wrapper, * not the itself. * - Table classes target .wp-block-table.tbl table / th / td for the * same reason (wrapper vs. inner ). * - Grid/flex layouts use plain block-level children under a * display:grid / display:flex container className — no reliance on * core/columns or core/group's native grid layout attributes, so the * pattern markup stays simple core/group + core/paragraph/heading. */ .pc, .pc * { box-sizing: border-box; margin: 0; padding: 0; } .pc { font-family: 'Poppins', system-ui, sans-serif; color: var(--charcoal); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; } .pc .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } .pc h1, .pc h2, .pc h3, .pc h4 { line-height: 1.1; letter-spacing: -.02em; font-weight: 700; } .pc a { color: inherit; } .pc :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } /* placeholder flag */ .pc .ph { background: rgba(0, 102, 204, .10); border-bottom: 2px dashed var(--blue); padding: 0 3px; font-style: normal; } /* ---------- BUTTONS ---------- */ .pc .wp-block-button.btn .wp-block-button__link { display: inline-block; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .03em; padding: 14px 26px; border: 2px solid transparent; border-radius: 0; transition: .18s; cursor: pointer; } .pc .wp-block-button.btn-red .wp-block-button__link { background: var(--red); color: #fff; } .pc .wp-block-button.btn-red .wp-block-button__link:hover { background: var(--red-deep); } .pc .wp-block-button.btn-blue .wp-block-button__link { background: var(--blue); color: #fff; } .pc .wp-block-button.btn-blue .wp-block-button__link:hover { background: #0055aa; } .pc .wp-block-button.btn-ghost .wp-block-button__link { background: transparent; color: var(--blue); border-color: var(--blue); } .pc .wp-block-button.btn-ghost .wp-block-button__link:hover { background: var(--blue); color: #fff; } .pc .wp-block-button.btn-ghost-light .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .pc .wp-block-button.btn-ghost-light .wp-block-button__link:hover { border-color: #fff; background: rgba(255,255,255,.1); } .pc .wp-block-button.btn-onred .wp-block-button__link { background: #fff; color: var(--red); } .pc .wp-block-button.btn-onred .wp-block-button__link:hover { background: var(--charcoal); color: #fff; } /* * Gutenberg's core/group block wraps its children in an extra * .wp-block-group__inner-container div whenever the block doesn't * declare an explicit "layout" attribute (legacy behavior). This * pattern's markup was authored without that attribute, so every * grid/flex container below has one extra level of nesting between * it and its real children. Making that wrapper `display:contents` * removes it from the box tree at every nesting level, restoring the * intended direct-child relationship for CSS Grid/Flexbox without * touching the pattern markup itself. */ .pc .wp-block-group__inner-container { display: contents; } /* * WordPress core injects a default margin-bottom (block spacing) on * .wp-block-group elements, which eats unevenly into stretched grid rows * (repeating cards trail off at different heights, most visible in the * last row/column of pillars/services/eeat/geo/aud grids). * * THIS USED TO BE `.pc .wp-block-group { margin-bottom: 0 !important; }` * — a blanket reset matching every group in .pc, not just grid cards. See * CLAUDE.md §10.6 gotcha #5 for the full incident, but in short: forcing * margin-bottom to 0 on EVERY group — including ones with no card-height * problem at all, like `.clock-head`, `.lede`'s neighbors, and the * `.label`+h2 wrapper before `.mathbox`/`.flow`/`.eeat`/`.svc-grid` — * corrupted sibling margin-collapsing for the next element in the flattened * `.wp-block-group__inner-container { display:contents }` chain above. * `.clock`'s own `margin-top:56px` and `.reason`'s own `margin-bottom:22px` * (and others) were never touched directly, but the collapsing computation * they depend on was, so they silently lost their spacing anyway. * * Fix: scope the reset to only the actual repeating-card classes that sit * as direct children of a CSS-grid container and need uniform height — * not every `.wp-block-group` in existence. Every other group is free to * use its own margin declarations without this rule touching it. If a * future grid gets a new repeating-card class, add it here explicitly — * don't widen this back to `.wp-block-group`. */ .pc .pillar, .pc .svc, .pc .ee-c, .pc .geo-c, .pc .aud-c { margin-bottom: 0 !important; } /* This heading sits in the narrower clock-head column; let it wrap at its own column width instead of the sitewide 20ch cap. */ .pc .clock-head h2 { max-width: none; } /* ---------- HERO ---------- */ .pc .hero { position: relative; background: var(--charcoal); color: #fff; overflow: hidden; } .pc .hero-sweep { position: absolute; right: -8%; top: -10%; width: 70%; height: 120%; background: linear-gradient(115deg, transparent 42%, var(--red) 42.4%, var(--red) 58%, transparent 58.4%); opacity: .92; transform: skewX(-4deg); pointer-events: none; } .pc .hero-sweep::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 62%, var(--red-deep) 62.3%, var(--red-deep) 68%, transparent 68.3%); opacity: .75; } .pc .hero-in { position: relative; z-index: 2; padding-top: clamp(60px,9vw,110px); } .pc .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.1); border-left: 3px solid var(--red); padding: 8px 16px; margin-bottom: 26px; } .pc .hero h1 { color: #fff; font-size: clamp(40px,7vw,74px); font-weight: 800; letter-spacing: -.035em; max-width: 15ch; } .pc .hero h1 .dot { color: var(--red); } .pc .hero-sub { font-size: clamp(16px,2vw,19px); color: rgba(255,255,255,.82); max-width: 52ch; margin-top: 24px; font-weight: 400; } .pc .hero-ctas.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } .pc .hero-trust { margin-top: 30px; font-size: 13px; color: rgba(255,255,255,.6); } /* pillars */ .pc .pillars { position: relative; z-index: 2; margin-top: 64px !important; background: var(--charcoal-2); border-top: 3px solid var(--red); } .pc .pillars-grid { display: grid; grid-template-columns: repeat(4,1fr); } .pc .pillar { padding: 30px 26px; border-right: 1px solid rgba(255,255,255,.09); } .pc .pillar:last-child { border-right: 0; } .pc .pillar-t { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 6px; } .pc .pillar-d { font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.5; } /* ---------- SECTION BASE ---------- */ .pc .sec { padding: clamp(64px,8vw,104px) 0; } .pc .sec-gray { background: var(--gray); } .pc .sec-dark { background: var(--charcoal); color: #fff; } .pc .label { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; } .pc .sec h2 { font-size: clamp(29px,4.2vw,46px); max-width: 20ch; } .pc .sec-dark h2, .pc .sec-dark h3 { color: #fff; } .pc .lede { font-size: clamp(16px,1.8vw,18.5px); color: var(--ink-soft); max-width: 62ch; margin-top: 20px; } .pc .sec-dark .lede { color: rgba(255,255,255,.75); } /* ---------- SIGNATURE: TURN CLOCK ---------- */ .pc .clock-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: end; } .pc .cost-card { background: var(--red); color: #fff; padding: 30px 32px; border-left: 6px solid var(--charcoal); } .pc .cost-num { font-size: clamp(42px,6vw,62px); font-weight: 800; font-style: italic; letter-spacing: -.04em; line-height: 1; } .pc .cost-lab { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; opacity: .9; } .pc .clock { margin-top: 56px !important; border-top: 2px solid var(--charcoal); padding-top: 0; } .pc .clock-row { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; } .pc .day { padding: 26px 20px 30px; border-right: 1px solid var(--gray-mid); position: relative; background: #fff; transition: .2s; } .pc .day:last-child { border-right: 0; } .pc .day::before { content: ""; position: absolute; top: -2px; left: 0; height: 4px; width: 0; background: var(--red); transition: width .7s cubic-bezier(.2,.7,.3,1); } .pc .day.on::before { width: 100%; } .pc .day-n { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; } .pc .day-t { font-size: 16.5px; font-weight: 700; margin-bottom: 7px; letter-spacing: -.01em; } .pc .day-d { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; } .pc .clock-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; border-top: 2px solid var(--charcoal); padding-top: 18px; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); } .pc .mathbox { margin-top: 52px !important; background: var(--charcoal); color: #fff; padding: clamp(30px,4vw,46px); display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; } .pc .math-n { font-size: clamp(30px,4vw,42px); font-weight: 800; font-style: italic; letter-spacing: -.03em; color: var(--red); line-height: 1; } .pc .math-n--sm { font-size: clamp(20px,2.6vw,26px); } .pc .math-l { font-size: 14px; color: rgba(255,255,255,.72); margin-top: 10px; line-height: 1.5; } .pc .src { font-size: 12.5px; color: var(--ink-soft); margin-top: 22px; } .pc .sec-dark .src { color: rgba(255,255,255,.45); } /* ---------- SERVICES ---------- */ .pc .svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--gray-mid); margin-top: 52px !important; } .pc .svc { background: #fff; padding: 32px 28px 30px; transition: .2s; position: relative; } .pc .svc:hover { background: var(--charcoal); color: #fff; } .pc .svc:hover .svc-d { color: rgba(255,255,255,.7); } .pc .svc:hover .svc-link { color: #fff; } .pc .svc-t { font-size: 19px; font-weight: 700; margin-bottom: 11px; letter-spacing: -.015em; } .pc .svc-d { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 18px; } .pc .svc-link { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); text-decoration: none; } /* ---------- TEAM (About page) ---------- * Modeled directly on .svc-grid/.svc above (3-column, 1px gap-as-divider * on --gray-mid, white cards) rather than the pillar/day border-right * approach — the gap-divider technique has no per-item border/nth-child * logic to get wrong at a breakpoint (see CLAUDE.md §10.6's .day fix for * what that class of bug looks like). Card = .imgph-team photo (already * registered, §10.8) + name + role + bio. First use of .team-grid/ * .imgph-team, built for the About page. */ .pc .team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--gray-mid); margin-top: 52px !important; } .pc .team-c { background: #fff; padding: 30px 28px 32px; } .pc .imgph-team { margin-bottom: 20px !important; } .pc .team-n { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 3px; } .pc .team-r { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; } .pc .team-d { font-size: 14px; color: var(--ink-soft); line-height: 1.6; } /* ---------- CONTACT (Contact page) ---------- * .contact-grid: form (left, wider) / .contact-card (right). Plain * core/group, not a Kadence row — same reasoning as .team-grid/.svc-grid, * no column-reorder need here. Breakpoint is 900px per this page's own * build rules (page-09-contact.md), deliberately not the shared * 1000px/720px breakpoints every other grid on the site uses — this is * the one component where that's an intentional, page-specific value, * not an oversight. .contact-card mirrors the .team-c/.ee-c pattern * (bordered box, -t/-d label+value pairs) rather than inventing a new * shape. First use of both classes, built for the Contact page. */ .pc .contact-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(36px,5vw,64px); align-items: start; margin-top: 44px !important; } .pc .contact-card { border: 1px solid var(--gray-mid); background: var(--gray); padding: 32px 28px; } .pc .cc-item { margin-bottom: 22px !important; } .pc .cc-item:last-child { margin-bottom: 0 !important; } .pc .cc-t { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; } .pc .cc-d { font-size: 15px; color: var(--charcoal); line-height: 1.5; } .pc .cc-d a { color: inherit; text-decoration: none; } .pc .cc-d a:hover { color: var(--red); } @media (max-width: 900px) { .pc .contact-grid { grid-template-columns: 1fr; } } /* ---------- SPLIT / PROSE ---------- */ .pc .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); align-items: start; } .pc .prose p { margin-bottom: 17px; color: var(--ink-soft); font-size: 15.5px; } .pc .prose strong { color: var(--charcoal); font-weight: 600; } .pc .sec-dark .prose p { color: rgba(255,255,255,.75); } .pc .sec-dark .prose strong { color: #fff; } .pc .reason { border-left: 3px solid var(--blue); padding: 4px 0 4px 20px; margin-bottom: 22px !important; } .pc .reason-t { font-weight: 700; font-size: 16px; margin-bottom: 5px; } .pc .reason-d { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; } /* ---------- TABLES ---------- */ .pc .wp-block-table.tbl table { width: 100%; border-collapse: collapse; margin-top: 34px; font-size: 15px; } .pc .wp-block-table.tbl th { text-align: left; padding: 15px 16px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid var(--charcoal); } .pc .wp-block-table.tbl th.us { color: var(--red); } .pc .wp-block-table.tbl th.them { color: var(--ink-soft); } .pc .wp-block-table.tbl td { padding: 15px 16px; border-bottom: 1px solid var(--gray-mid); vertical-align: top; } .pc .wp-block-table.tbl tr:hover td { background: var(--gray); } .pc .td-lab { font-weight: 600; width: 31%; } .pc .td-us { color: var(--charcoal); } .pc .td-them { color: var(--ink-soft); } .pc .wp-block-table.sheen th { border-bottom-color: var(--blue); } /* ---------- WORKFLOW ---------- */ .pc .flow { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 52px !important; } .pc .flow-c { background: #fff; padding: 30px 28px; border-top: 4px solid var(--blue); } .pc .flow-t { font-size: 18px; font-weight: 700; margin-bottom: 12px; letter-spacing: -.01em; } .pc .flow-d { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; } .pc .rainbar { margin-top: 34px !important; background: var(--blue); color: #fff; padding: 26px 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .pc .rain-t { font-size: 19px; font-weight: 700; margin-bottom: 5px; } .pc .rain-d { font-size: 14.5px; opacity: .88; max-width: 62ch; } /* ---------- AUDIENCE ---------- */ .pc .aud { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 52px !important; } .pc .aud-c { border: 1px solid var(--gray-mid); padding: 28px 26px; transition: .2s; } .pc .aud-c:hover { border-color: var(--red); transform: translateY(-3px); } .pc .aud-t { font-size: 17.5px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.01em; } .pc .aud-d { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 16px; } /* ---------- LOCAL ---------- */ .pc .geo { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: rgba(255,255,255,.12); margin-top: 52px !important; } .pc .geo-c { background: var(--charcoal); padding: 26px 28px; } .pc .geo-t { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 4px; letter-spacing: -.01em; } .pc .geo-z { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--red); margin-bottom: 10px; } .pc .geo-d { font-size: 14px; color: rgba(255,255,255,.68); line-height: 1.6; } .pc .climate { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 52px !important; } .pc .cl-t { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 9px; } .pc .cl-d { font-size: 14.5px; color: rgba(255,255,255,.7); line-height: 1.6; } /* ---------- EEAT ---------- */ .pc .eeat { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--gray-mid); margin-top: 52px !important; } .pc .ee-c { background: #fff; padding: 30px 28px; } .pc .ee-t { font-size: 17.5px; font-weight: 700; margin-bottom: 9px; letter-spacing: -.01em; } .pc .ee-d { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; } /* ---------- FAQ ---------- */ .pc .faq { margin-top: 48px !important; border-top: 2px solid var(--charcoal); } .pc .q { border-bottom: 1px solid var(--gray-mid); } .pc .q summary { padding: 22px 44px 22px 0; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; position: relative; letter-spacing: -.01em; } .pc .q summary::-webkit-details-marker { display: none; } .pc .q summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: var(--red); transition: .2s; line-height: 1; } .pc .q[open] summary::after { content: "\2013"; } .pc .q summary:hover { color: var(--red); } .pc .q-a { padding: 0 60px 26px 0; font-size: 15.5px; color: var(--ink-soft); line-height: 1.7; } .pc .q-a p + p { margin-top: 13px; } /* ---------- FINAL CTA ---------- */ .pc .final { background: var(--red); color: #fff; text-align: center; padding: clamp(60px,8vw,96px) 0; } .pc .final h2 { font-size: clamp(30px,4.6vw,50px); color: #fff; margin: 0 auto; max-width: 18ch; } .pc .final p { margin: 22px auto 0; max-width: 56ch; font-size: 16.5px; opacity: .92; } .pc .final-ctas.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; } .pc .final-note { margin-top: 26px; font-size: 13.5px; opacity: .8; } /* * ---------- SERVICE PAGE COMPONENTS ---------- * Added for the Unit Turn Painting service page (the Service Page * Template — see page-02-unit-turn-painting.md). Not present in * paintcoats-homepage.html; new component types this file didn't * cover yet. Kept in this file rather than a separate stylesheet * so service pages stay on the same shared component system as the * homepage instead of forking a second one. */ .pc .callout-red { margin-top: 30px; background: var(--red); color: #fff; padding: 26px 30px; border-left: 6px solid var(--charcoal); font-size: 16.5px; line-height: 1.6; } .pc .callout-red strong { font-weight: 800; } .pc .scope-list { list-style: none; margin-top: 18px; } .pc .scope-list li { position: relative; padding: 10px 0 10px 22px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; border-bottom: 1px solid var(--gray-mid); } .pc .scope-list li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; background: var(--blue); } .pc .scope-list li:last-child { border-bottom: 0; } /* * ---------- PRICING PAGE COMPONENTS ---------- * Added for the Pricing page (page-05-pricing.md). .price-table is a * variant of .tbl for tables whose whole purpose is showing a dollar * figure per row — same base chrome (border/padding/hover) as .tbl, * plus a visually prominent price column so the number reads as the * anchor of each row even while it's still wrapped in .ph (every * figure on this page is a market benchmark, not confirmed pricing — * see CLAUDE.md's .ph scoping rule, §10.12). */ .pc .wp-block-table.price-table th.price-col { color: var(--red); } .pc .wp-block-table.price-table td.td-price { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--charcoal); white-space: nowrap; } /* * ---------- DISCLAIMER (regulatory content) ---------- * Added for the HOA & Condo Painting page (page-12), which cites Florida * SIRS/milestone-inspection statute. Bordered, muted note block for a legal * caveat — deliberately distinct from .callout-red (that class is reserved * for emphasis claims, not a liability disclaimer) and from .proof-ph (that * one signals "content pending," not real finished copy). Solid border, not * dashed, since this is real, deliberate text, not a placeholder. Reusable * wherever regulatory/statutory content appears on future pages. */ .pc .disclaimer { margin-top: 26px !important; border: 1px solid var(--gray-mid); background: var(--gray); padding: 22px 26px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; } .pc .disclaimer strong { color: var(--charcoal); font-weight: 600; } /* Second paragraph is the "Last reviewed" line — set off with a thin rule and smaller italic type so it reads as a timestamp, not more caveat prose. */ .pc .disclaimer p + p { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-mid); font-size: 12.5px; font-style: italic; } /* * .flow-row / .eeat-row: spacing-only equivalents of .flow / .eeat for use * on native Kadence Row Layout wrappers (or groups wrapping them). The * homepage's .flow/.eeat apply display:grid directly to a plain core/group * that holds .flow-c/.ee-c as direct children — correct there. A Kadence * Row Layout already lays out its own columns via an internal grid on a * nested .kt-row-column-wrap div, so putting .flow/.eeat's display:grid on * the Row Layout's outer wrapper (or a group wrapping the whole row) nests * a second grid around the first and collapses the columns. These variants * keep only the spacing, leaving column layout to Kadence. */ .pc .flow-row { margin-top: 52px; } .pc .eeat-row { margin-top: 52px; } /* * Standard hero + key-facts-strip header (CLAUDE.md §10.6): the strip is a * native Kadence Row Layout nested inside the hero's kadence/column, sitting * where the homepage nests a plain-group .pillars inside .hero. Two things * a plain core/group + .wrap gets for free that Kadence's own grid doesn't: * 1. Content width — .wrap constrains to var(--maxw) with centered padding; * Kadence's .kt-row-column-wrap grid has no max-width of its own and * spans full-bleed edge-to-edge unless told otherwise. Constrain it here * exactly like .wrap, scoped to just this row so other Kadence rows * already sitting inside a .sec > .wrap aren't double-constrained. * 2. Margin-top collapse — .pillars' margin-top:64px collapses against the * preceding sibling in a plain-group nesting (measures ~0px on the * homepage), but doesn't collapse the same way once the strip is a * Kadence Row Layout (measured a real 64px gap, i.e. the margin doesn't * collapse there). Zero it out here and let the two sit flush, matching * the homepage's effective (collapsed) spacing. */ .pc .pillars.key-facts-strip > .kt-row-column-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } .pc .hero .pillars { margin-top: 0; } /* * Kadence's Row Layout applies its own default top/bottom padding (24px, * its "SM" spacing preset) to .kt-row-column-wrap regardless of content — * on the hero row this left a visible 24px sliver of .hero's own * background showing below the key-facts-strip (the strip has its own * charcoal-2 bg + red top border; that trailing charcoal is .hero's plain * background peeking out past where the strip actually ends). All real * spacing here is already controlled explicitly by .hero-in's own padding * and the strip's own chrome, so zero Kadence's default out entirely on * this specific row. */ .pc .hero > .kt-row-column-wrap { padding: 0; } .pc .ee-c { border: 1px solid var(--gray-mid); } /* * ---------- GUIDE TEMPLATE COMPONENTS ---------- * Added for the Paint Matching & Color Standardization Guide (page-03) — * the reusable Guide Template for the other five pillar guides. Guides are * long-form pillar content, not service pages: simplified hero (no * key-facts-strip), narrower ~68ch prose measure, and a sticky TOC rail * that runs the length of the article. .hero/.hero-sweep/.hero-in/.eyebrow * are reused as-is from the standard header (CLAUDE.md §10.6); only the * key-facts-strip is swapped out for .guide-meta. */ /* Author + updated-date line, replaces the key-facts-strip under a guide's simplified hero. Sits on the dark .hero background like .hero-trust. */ .pc .guide-meta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: rgba(255,255,255,.65); } .pc .guide-meta strong { color: #fff; font-weight: 600; } .pc .guide-meta .sep { opacity: .5; } /* * TOC + long-form body, two-column for the length of the article. A plain * core/group with an explicit grid-template-columns — same precedent as * .clock-head's 1.15fr/.85fr split — rather than a kadence/rowlayout: the * TOC is generated chrome (anchor links into this page's own H2s), not a * client-editable/reorderable column pair, so there's no reorder/width * control need that would justify the added Row Layout markup. */ .pc .guide-layout { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; margin-top: 52px !important; } .pc .guide-toc { position: sticky; top: 24px; border-left: 3px solid var(--gray-mid); padding-left: 20px; } .pc .guide-toc-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; } .pc .guide-toc ol { list-style: none; counter-reset: toc; } .pc .guide-toc li { counter-increment: toc; margin-bottom: 11px; } .pc .guide-toc a { display: flex; gap: 10px; font-size: 13.5px; color: var(--ink-soft); text-decoration: none; line-height: 1.4; } .pc .guide-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--blue); font-weight: 700; flex-shrink: 0; } .pc .guide-toc a:hover { color: var(--red); } /* Narrower measure for long-form guide prose (~68ch), per the guide-template spec — narrower than the sitewide .wrap max-width (var(--maxw)). Content sections inside reuse .sec/.sec-gray/.label/.lede/.prose/.reason/.tbl/ .faq/.final as-is; they just render as bounded blocks inside this column instead of full-bleed page-width bands, since a guide's body is a single narrow reading column, not alternating full-width sections. */ .pc .guide-body { max-width: 68ch; } .pc .guide-body .sec { padding: clamp(40px,5vw,64px) 0; } .pc .guide-body .sec:first-child { padding-top: 0; } .pc .guide-body h2 { max-width: none; scroll-margin-top: 24px; } /* * ---------- IMAGE PLACEHOLDERS ---------- * Solid-color stand-ins for real photography, sized to the final aspect * ratio of each slot so swapping in a real /background-image later * doesn't reflow the page. Brand charcoal fill (not generic gray) + * the sitewide dashed-blue placeholder signal (.ph) so these read as * "still needs a photo" rather than an intentional dark design choice. * Base .imgph is layout-agnostic; pair it with an aspect-ratio modifier * for the slot. Registered here for reuse across every future page — * see CLAUDE.md §10.9 for the full slot inventory. */ .pc .imgph { background: var(--charcoal); color: rgba(255,255,255,.82); display: flex; align-items: center; justify-content: center; text-align: center; border: 1px dashed var(--blue); box-sizing: border-box; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; padding: 14px; width: 100%; } /* Hero background slot: full-bleed behind .hero-sweep, dark scrim so hero copy stays legible over whatever photo eventually fills this. Sits first in .hero's markup (below .hero-sweep and .hero-in in document order) so it stacks under both without needing explicit z-index. */ .pc .hero-bg { position: absolute; inset: 0; border: 0; align-items: flex-end; justify-content: flex-start; color: rgba(255,255,255,.5); font-size: 11px; padding: 20px; } .pc .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,35,40,.5) 0%, rgba(31,35,40,.88) 100%); } .pc .hero-bg p { position: relative; z-index: 1; margin: 0; } /* Day-clock: one image per day card, above the day number/title/description. */ .pc .imgph-day { aspect-ratio: 4 / 3; margin-bottom: 18px !important; } /* Before/after grid (Unit Turn page): 3 pairs, each pair a 2-up before/after image block plus a caption underneath. */ .pc .ba-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 52px !important; } .pc .ba-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .pc .imgph-ba { aspect-ratio: 4 / 5; } .pc .ba-lab { margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); text-align: center; } /* Grid items default to min-width:auto (their own min-content size), not 0 — with .ba-imgs (a nested grid) plus .imgph's width:100% inside each pair, that min-content blows way past the 1fr track share and overflows the whole gallery off-screen. Found live on the published Unit Turn page while building the Apartment Painting page's 2-pair variant (§10.13) — this was never a new-variant-only bug, .ba-grid has needed this since the original 3-pair build. min-width:0 lets each pair shrink to its actual track width. */ .pc .ba-grid .wp-block-group { min-width: 0; } /* .ba-grid variant for pages with 2 pairs instead of 3 (Apartment Painting page) — the base 3-column grid would leave a dead empty third track with only 2 items. Caps width and centers so 2 cards read as a deliberate pair, not a 3-up grid missing an item. */ .pc .ba-grid.ba-2 { grid-template-columns: repeat(2,1fr); max-width: 700px; margin-left: auto; margin-right: auto; } /* Comparison table inline thumbnail: small, sits beside the cell's text via .td-imgwrap (flex row). */ .pc .td-imgwrap { display: flex; align-items: center; gap: 10px; } .pc .imgph-td { aspect-ratio: 1 / 1; width: 52px; height: 52px; flex-shrink: 0; font-size: 8px; padding: 4px; letter-spacing: .03em; } /* Guide inline photo: single wide image dropped into long-form prose. */ .pc .imgph-guide { aspect-ratio: 16 / 9; margin: 30px 0 !important; } /* About/team headshot slot — registered for the About page build, not used yet on any shipped page. Portrait ratio matching .imgph-ba. */ .pc .imgph-team { aspect-ratio: 4 / 5; } /* * ---------- LOCATION TEMPLATE COMPONENTS ---------- * Added for the Southside & Baymeadows location page (page-04) — the * reusable Location Page Template for the remaining five submarkets. */ /* Map embed slot. Visually matches the .imgph placeholder language (same charcoal/dashed-blue signal) but kept as its own class rather than an .imgph modifier: this holds a live map embed later, not a static photo, so it's a semantically distinct slot even though it looks the same today. */ .pc .loc-map { aspect-ratio: 16 / 9; margin-top: 32px !important; background: var(--charcoal); color: rgba(255,255,255,.82); display: flex; align-items: center; justify-content: center; text-align: center; border: 1px dashed var(--blue); box-sizing: border-box; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 14px; } /* Plain, neutral placeholder box for text that's genuinely missing (e.g. a client-supplied testimonial) — distinct on purpose from .callout-red (which is reserved for emphasis claims, not empty slots) and from .imgph (which is for image slots, not text). Light gray/dashed so it reads as "content pending" rather than a styled callout. */ .pc .proof-ph { margin-top: 30px !important; border: 1px dashed var(--gray-mid); background: var(--gray); padding: 24px 28px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; } .pc .proof-ph strong { color: var(--charcoal); } /* ---------- REVEAL ---------- */ .pc .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .pc .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .pc .rv { opacity: 1; transform: none; transition: none; } .pc .day::before { transition: none; } } /* * Block editor: force the revealed state unconditionally, rather than * relying on JS to add `.in` once. The block editor re-renders a block's * DOM on selection/edit, which re-fires the `.6s` opacity/transform * transition even after `.in` was already added — sections visibly fade * out and back in every time you click into one. `transition: none * !important` is the actual fix (it kills the animation outright instead * of trying to out-run re-renders); forcing opacity/transform is what * keeps content visible from the first paint, before any JS runs at all. * See CLAUDE.md §10.10. */ .editor-styles-wrapper .pc .rv, .block-editor-iframe__body .pc .rv { opacity: 1 !important; transform: none !important; transition: none !important; } .block-editor-iframe__body .pc .day::before { transition: none !important; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 1000px) { .pc .pillars-grid { grid-template-columns: repeat(2,1fr); } .pc .pillar { border-bottom: 1px solid rgba(255,255,255,.09); } /* At 2 columns, :last-child alone only excludes the border-right on item 4 — item 2 is also a rightmost (outer-edge) column but keeps its border-right from the 4-column base rule, showing as a stray line on the grid's outer edge. nth-child(even) is correct for any 2-column grid regardless of item count: only left-column items (odd) need a divider on their right; right-column items never do. */ .pc .pillars-grid .pillar:nth-child(even) { border-right: 0; } .pc .svc-grid, .pc .team-grid, .pc .flow, .pc .aud, .pc .climate, .pc .ba-grid { grid-template-columns: repeat(2,1fr); } .pc .clock-row { grid-template-columns: repeat(2,1fr); } .pc .day { border-bottom: 1px solid var(--gray-mid); } .pc .clock-head, .pc .split { grid-template-columns: 1fr; gap: 32px; } .pc .mathbox { grid-template-columns: 1fr; gap: 26px; } /* Guide TOC: stack above the body and drop sticky positioning — a sidebar rail makes no sense once it's full-width above the content it's meant to sit beside. */ .pc .guide-layout { grid-template-columns: 1fr; gap: 30px; } .pc .guide-toc { position: static; border-left: 0; border-top: 3px solid var(--gray-mid); padding-left: 0; padding-top: 20px; } } @media (max-width: 720px) { .pc .svc-grid, .pc .team-grid, .pc .flow, .pc .aud, .pc .climate, .pc .geo, .pc .eeat, .pc .ba-grid, .pc .ba-grid.ba-2, .pc .clock-row { grid-template-columns: 1fr; } .pc .hero-sweep { opacity: .4; width: 120%; right: -30%; } .pc .wp-block-table.tbl table { font-size: 14px; } .pc .wp-block-table.tbl th, .pc .wp-block-table.tbl td { padding: 12px 9px; } } /* * The hero + key-facts-strip is one standard header component (CLAUDE.md * §10.6) and must behave identically on mobile whether the strip is built * as a plain CSS grid (homepage's .pillars-grid) or a native Kadence Row * Layout (every page after it, incl. Unit Turn). Kadence's own responsive * engine defaults to collapsing a Row Layout straight to 1 column at its * own 767px breakpoint (confirmed from its generated inline