/* ============================================================ RebarWise — "The Drafting Table" · BLUEPRINT palette (locked) Ported from design/prototype/index.html (v9-responsive) for the WordPress block theme. Deltas from the prototype, all documented: · font vars split to the build faces (headings Montserrat, body Source Sans 3, utility JetBrains Mono) — loaded in functions.php · the prototype's few inline styles are promoted to classes (.svc-strap, .form-note, .rfq submit) per the DEV notes Everything else is the signed-off prototype CSS, verbatim. ============================================================ */ :root { /* WP build faces — fall back to the prototype's system stacks if a webfont fails */ --font-sans: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* body */ --font-head: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* headings + wordmark */ --font-mono: 'JetBrains Mono', ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Roboto Mono", monospace; --measure: 66ch; --wrap: 1180px; --radius: 3px; --ease: cubic-bezier(.22,.61,.36,1); /* ---------- BLUEPRINT palette (locked selection) ---------- */ --ground: #0B2A47; /* reserved blue: hero, contact, footer, copyright */ --ground-raised: #123B5E; --footer: #0A2540; /* footer = a step darker than contact */ --deepest: #082138; /* copyright bar & top banner (darkest) */ --paper: #EAF1F6; /* light middle · step 1 */ --paper-2: #E0E9F1; /* light middle · step 2 (subtle deeper) */ --paper-raised: #F6FAFD; /* raised cards/callouts (lift on both steps) */ --on-dark: #DCEBF8; --on-dark-dim: #8DB3D2; --on-light: #0C2033; --on-light-dim: #4C6579; --hair-dark: rgba(150,192,228,.18); --hair-light: rgba(10,42,66,.11); /* fainter tones dedicated to the drafting-grid texture (hero & contact only) */ --grid-dark: rgba(150,192,228,.09); --accent: #F2C230; /* brand accent — DARK grounds, filled buttons, and highlights/ borders/ticks/icons on light (never as light-ground TEXT) */ --on-accent: #241C00; --tech: #6FD0E8; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Desktop zoom easing — browser zoom and OS display scaling shrink the CSS viewport, so within the desktop band the root em eases down as the viewport narrows: text at 150% scale reads ~1.3× instead of a full 1.5×. All type is rem-based so this scales every label; layout containers are px-based and unaffected. 16px at ≥1536px, ~14px at 1280px, floor 13px. Tablet/mobile (≤921px) keep the signed-off 16px root. GATED on min-resolution ≥1.25dppx: zoom and OS scaling raise the device-pixel-ratio, a physically narrowed window does not — so plain resizing at 100% scale keeps the full 16px root and only genuinely zoomed/scaled displays get the easing. Unsupported browsers simply skip the rule (safe 16px default). */ @media (min-width: 922px) and (min-resolution: 1.25dppx) { html { font-size: clamp(13px, 0.78125vw + 4px, 16px); } } body { margin: 0; font-family: var(--font-sans); background: var(--ground); color: var(--on-dark); font-size: 1.0625rem; /* 17px at the 16px root; follows the zoom easing */ line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; /* clip hides x-overflow WITHOUT making a scroll container (unlike `hidden`), so it can never trap the sticky nav */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } .wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; } /* ---------- utility type ---------- */ .eyebrow { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; display: inline-flex; align-items: center; gap: .6em; color: var(--on-dark-dim); } .eyebrow::before { content:""; width: 22px; height: 1px; background: var(--accent); display: inline-block; } .band-light .eyebrow { color: var(--on-light-dim); } .mono { font-family: var(--font-mono); } .tnum { font-variant-numeric: tabular-nums; } /* ---------- accessibility utilities (WCAG round 2026-07-12) ---------- */ /* headings for unlabeled bands (stats, tech ribbon) — outline only, invisible */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path: inset(50%); white-space:nowrap; border:0; } /* skip link — hidden above the viewport until keyboard-focused (2.4.1) */ .skip { position: fixed; top: 12px; left: 12px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: var(--radius); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; transform: translateY(-200%); } .skip:focus { transform: none; outline: 2px solid var(--on-accent); outline-offset: -4px; } /* ---------- bands ---------- */ section { position: relative; } .band-dark { background: var(--ground); color: var(--on-dark); } .band-light { background: var(--paper); color: var(--on-light); } .band-light-2 { background: var(--paper-2); color: var(--on-light); } /* seam only at a tone change; same-tone neighbours (About + Team) read as one block */ .band-light + .band-light-2, .band-light-2 + .band-light { border-top: 1px solid var(--hair-light); } /* R3 rule 1b — on LIGHT grounds the accent stays yellow for highlights, drawings, borders, ticks and icons, but is NEVER used as text (poor legibility). The accent *text* elements on light are recolored to deep ink — no exceptions since the WCAG round (stat suffixes went to ink; the yellow ticks carry the accent). */ .band-light .dimline .tag, .band-light-2 .dimline .tag { color: var(--on-light); } .pad { padding-block: clamp(64px, 9vw, 128px); } /* Nav is 67px sticky and hides on scroll-down; sections carry a big .pad top (up to 128px). Cancel that padding so an anchor jump lands the "0X —" index rule a constant ~75px from the top (just clear of the nav) at every width, instead of ~padding px below it. */ .anchor { scroll-margin-top: calc(75px - clamp(64px, 9vw, 128px)); } .about.anchor { scroll-margin-top: calc(75px - clamp(60px, 7.5vw, 100px)); } /* About has a shorter .pad top */ /* Home has no .pad — the generic cancel above would land it 50px+ past the top. A margin larger than the hero's offset clamps the scroll to 0 = true page top. */ .hero.anchor { scroll-margin-top: 200px; } /* drafting grid texture — hero & contact only, kept subtle */ .grid-bg::before { content:""; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(var(--grid-dark) 1px, transparent 1px), linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(120% 80% at 70% 0%, #000 22%, transparent 72%); mask-image: radial-gradient(120% 80% at 70% 0%, #000 22%, transparent 72%); } /* dimension-line section divider */ .dimline { display:flex; align-items:center; gap:14px; margin-bottom: 40px; } .dimline .rule { flex: 1; height: 1px; background: currentColor; opacity: .16; position: relative; } .dimline .rule::before, .dimline .rule::after { content:""; position:absolute; top:-4px; width:1px; height:9px; background: currentColor; opacity:.5; } .dimline .rule::before { left: 0; } .dimline .rule::after { right: 0; } .dimline .tag { font-family: var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--accent); white-space:nowrap; } /* contact eyebrow rule sits on a grid ground — accent it so it reads distinct from the faint grid lines */ #contact .dimline .rule { background: var(--accent); opacity: .55; } /* ---------- buttons ---------- */ .btn { --pad: 15px 26px; display:inline-flex; align-items:center; gap:.6em; font-family: var(--font-mono); font-size:.82rem; letter-spacing:.06em; font-weight:600; text-transform: uppercase; padding: var(--pad); border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s; will-change: transform; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { transform: translateY(-2px); } .btn-ghost { background: transparent; color: currentColor; border-color: color-mix(in srgb, currentColor 34%, transparent); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .btn .arrow { transition: transform .2s var(--ease); } .btn:hover .arrow { transform: translateX(3px); } /* ================= TOP CONTACT BANNER ================= */ .topbar { background: var(--deepest); border-bottom: 1px solid var(--hair-dark); font-family: var(--font-mono); font-size:.95rem; letter-spacing:.035em; } .topbar .wrap { display:flex; align-items:center; justify-content:center; gap:28px; min-height: 40px; padding-block: 6px; } .topbar .info { display:flex; gap:28px; color: var(--on-dark-dim); font-weight:600; flex-wrap:wrap; justify-content:center; } .topbar .info span { display:inline-flex; align-items:center; gap:7px; } .topbar .info a { color: inherit; } .topbar .info svg { width:1em; height:1em; color: var(--accent); } /* free-sample notice (V2 Section 0) — the bar's default state; the close button swaps in .info. Padding-inline clears the absolutely-placed close button at every width. */ .topbar .notice { display:flex; align-items:center; justify-content:center; width:100%; position:relative; padding-inline: 36px; } /* text-wrap:balance — no-op at desktop (one line); at phone measure it stops the sentence breaking to a stranded "free." on its own 40px line. DES call 2026-07-28: the widow was the real defect, not the height — reaching 2 lines needs asymmetric padding that throws the text 13px off-centre plus a smaller face, to save 21px. Not worth it on a utility band. */ .topbar .notice-msg { display:inline-flex; align-items:center; gap:.6em; color: var(--on-dark); font-weight:600; text-align:center; text-wrap: balance; transition: color .2s; } .topbar .notice-msg .arrow { color: var(--accent); transition: transform .2s var(--ease); } .topbar .notice-msg:hover { color: var(--accent); } .topbar .notice-msg:hover .arrow { transform: translateX(3px); } .topbar .notice-msg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); } .topbar .notice-close { position:absolute; right:0; top:50%; transform: translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; background:none; border:1px solid transparent; border-radius: var(--radius); color: var(--on-dark-dim); cursor:pointer; transition: color .2s, border-color .2s; } .topbar .notice-close:hover { color: var(--on-dark); border-color: var(--hair-dark); } .topbar .notice-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .topbar .notice-close svg { width:14px; height:14px; } /* .info/.notice carry a display, so the UA [hidden] rule needs matching specificity */ .topbar [hidden] { display: none; } /* ================= NAV (dark — mid-step of the topbar → nav → hero gradient) ================= */ /* The header template part wraps topbar+nav in a SHORT

box (~108px). position:sticky can only stick within its parent's box, so the nav would unstick and scroll away after ~108px (and only return near the top). display:contents drops that wrapper box, making the nav's containing block the full-height .wp-site-blocks so it stays sticky the whole page. */ header.wp-block-template-part { display: contents; } .nav { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--footer) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair-dark); transition: transform .34s var(--ease), background .3s, box-shadow .3s, border-color .3s; will-change: transform; } .nav.stuck { background: color-mix(in srgb, var(--footer) 97%, #000); box-shadow: 0 8px 24px -18px rgba(0,0,0,.9); } .nav.nav-hidden { transform: translateY(-100%); } .nav .wrap { display:flex; align-items:center; justify-content:space-between; min-height: 66px; } .brand { display:flex; align-items:center; gap:10px; } .brand .mark { width: 30px; height: 30px; display:block; flex-shrink:0; } .brand .word { font-family: var(--font-head); font-weight: 800; font-size: 1.32rem; letter-spacing:-.02em; color: var(--on-dark); } .brand .word b { color: var(--accent); font-weight:800; } .navlinks { display:flex; align-items:center; gap: 30px; list-style:none; margin:0; padding:0; } .navlinks li { display: contents; } /* list semantics for AT; anchors stay the flex items — zero geometry change */ .navlinks a { font-size:.95rem; color: var(--on-dark-dim); position: relative; padding: 6px 0; transition: color .2s; } .navlinks a::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background: var(--accent); transition: width .25s var(--ease); } .navlinks a:hover { color: var(--on-dark); } .navlinks a:hover::after { width: 100%; } .navlinks a.active { color: var(--on-dark); } .navlinks a.active::after { width: 100%; } .nav .cta { margin-left: 14px; padding: 6px 10px; font-size: .82rem; color: var(--on-accent); } .nav .cta::after { display: none; } .nav .cta:hover { color: var(--on-accent); } .hamburger { display:none; background:none; border:1px solid var(--hair-dark); border-radius: var(--radius); width:44px; height:44px; cursor:pointer; color: var(--on-dark); } .hamburger svg { width:20px; height:20px; } /* burger ↔ close swap follows the aria-expanded state the menu JS already toggles */ .hamburger .i-close { display:none; } .hamburger[aria-expanded="true"] .i-open { display:none; } .hamburger[aria-expanded="true"] .i-close { display:block; } /* ================= HERO ================= */ .hero { overflow: hidden; } .hero .wrap { display:grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items:center; align-content:center; padding-block: clamp(40px, 5.6vw, 72px); min-height: min(820px, calc(100svh - 250px)); } .hero .eyebrow { margin-bottom: 22px; } .hero h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); } .hero h1 .amber { color: var(--accent); } .hero .lede { color: var(--on-dark-dim); font-size: 1.16rem; max-width: 46ch; margin-top: 24px; } .hero .actions { display:flex; gap: 14px; margin-top: 36px; flex-wrap:wrap; } .hero .codes { display:flex; gap: 10px; margin-top: 34px; flex-wrap:wrap; } .chip { font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--on-dark-dim); border:1px solid var(--hair-dark); border-radius: 100px; padding: 6px 13px; display:inline-flex; align-items:center; gap:7px; } .chip::before { content:""; width:5px; height:5px; border-radius:50%; background: var(--tech); } /* ---- Hero drawing: real column-section sample, merged into the hero blueprint ---- */ .hero-sheet { position: relative; align-self: center; margin: 0; } .svg-defs { position: absolute; width: 0; height: 0; } /* single-pass blueprint duotone: transparent paper + muted light-blue lines (no flash, no blend) */ .sheet-img { display: block; width: 100%; height: auto; max-height: 450px; object-fit: cover; object-position: top center; /* A–I + a sliver of J/K/L */ transform: scaleX(.86); /* squeeze width inward -> near-square, no extra crop */ transform-origin: center; filter: url(#bp-duotone); } .sheet-scale { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair-dark); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-dim); } .sheet-scale .sc { margin-left: auto; color: var(--accent); } /* ================= ABOUT — "Section cut": image left, content right ================= */ .about.pad { padding-top: clamp(60px, 7.5vw, 100px); padding-bottom: clamp(36px, 5vw, 60px); } .about-grid { display:grid; grid-template-columns: 45fr 55fr; gap: clamp(30px, 4.4vw, 64px); align-items:start; } .about h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 0 0 24px; } .about p + p { margin-top: 18px; } .about .body { color: var(--on-light); max-width: var(--measure); text-align: left; } /* flush left (was justify) — client call, validation round: kills the rivers at every width */ /* Subsection-text tier (standards) — hierarchy by spacing only, no box/highlight */ .about .body .standards { margin-top: 26px; } /* "How We Work" crosshead (V2). Promoted per client sign-off 2026-07-28 (Option A): the first pass was .74rem in --on-light-dim, i.e. smaller AND fainter than the 17px body it divides, so the one element meant to break the column was its lowest-contrast item and read as a caption on the second paragraph. Full ink at .82rem with the 22px accent tick borrowed from .eyebrow — same drafting-annotation vocabulary the dimlines use. */ .about .body .subhead { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--on-light); margin: 34px 0 14px; display:flex; align-items:center; gap:.7em; } .about .body .subhead::before { content:""; width:22px; height:2px; background: var(--accent); flex:none; } /* Duotone-tinted real rebar photo, theme-matched, beside the copy. Scrolls with the page (client call 2026-07-28). Was `position: sticky; top: 92px`, which pinned the photo while the copy scrolled past — but only when the copy column ran taller than the photo, which depends on viewport width: ~140px of travel at 960px and exactly 0 at 1280px, where the photo is the taller column. A pin that engages at some widths and not others reads as a glitch rather than an effect. `.av-frame` keeps `position: relative` so the accent corner ticks still anchor to it. */ .av-frame { position: relative; } .av-photo { aspect-ratio: 4 / 5; background-image: linear-gradient(179deg, rgba(11,42,71,.26) 0%, rgba(8,33,64,.80) 100%), url("../img/about-rebar.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-blend-mode: multiply; filter: grayscale(1) contrast(1.05) brightness(1.02); border: 1px solid var(--hair-light); } /* accent registration ticks — echo the dimline / blueprint-sheet motif */ .av-frame .av-tick { position:absolute; width:16px; height:16px; border:2px solid var(--accent); } .av-frame .av-tick.tl { left:-1px; top:-1px; border-right:none; border-bottom:none; } .av-frame .av-tick.tr { right:-1px; top:-1px; border-left:none; border-bottom:none; } .av-frame .av-tick.bl { left:-1px; bottom:-1px; border-right:none; border-top:none; } .av-frame .av-tick.br { right:-1px; bottom:-1px; border-left:none; border-top:none; } .av-cap { position:absolute; left:16px; bottom:14px; display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:#EAF1F8; } .av-cap::before { content:""; width:22px; height:2px; background:var(--accent); } /* ================= STATS (Team Experience — light, extends About) ================= */ .stats-sec { padding-top: clamp(18px, 2.6vw, 34px); padding-bottom: clamp(64px, 9vw, 120px); } .stats-head { display:flex; flex-direction:column; gap:10px; margin-bottom: 32px; } .stats-head p { color: var(--on-light-dim); max-width: none; font-size: 1.05rem; font-weight: 600; } .stats { display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; border:1px solid var(--hair-light); border-radius: var(--radius); overflow: hidden; background: var(--paper-raised); } .stat { padding: 34px 28px; border-right:1px solid var(--hair-light); position:relative; } .stat:last-child { border-right: none; } .stat .val { font-family: var(--font-mono); font-weight: 700; font-size: clamp(2.3rem, 4.6vw, 3.4rem); letter-spacing:-.02em; line-height: 1; color: var(--on-light); } .stat .val .suf { color: inherit; } /* ink like the digits — accent-on-light text measured 1.6:1 (WCAG round); the tick below keeps the yellow */ .stat .tick { width: 34px; height: 3px; background: var(--accent); margin: 16px 0 14px; } .stat .lbl { font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color: var(--on-light-dim); line-height:1.5; } /* ================= SERVICES — "Schedule" layout (ledger / drawing-schedule rows) ================= */ .svc-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom: 40px; } .svc-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); max-width: 16ch; } /* strapline (was an inline style in the prototype) */ .svc-strap { color: var(--on-light-dim); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; } /* framed ledger: one bordered container, hairline row dividers, no raised tiles/gaps/lift */ .svc-grid { display:grid; grid-template-columns: 1fr; gap: 0; border:1px solid var(--hair-light); border-radius: var(--radius); overflow:hidden; background: var(--paper-raised); } .card { display:grid; grid-template-columns: 54px 120px 1fr; gap: 26px; align-items:start; background: transparent; border:none; border-top:1px solid var(--hair-light); border-radius:0; padding: 28px 26px; position: relative; transition: background .25s var(--ease); } .svc-grid .card:first-child { border-top: none; } .card:hover { background: color-mix(in srgb, var(--accent) 5%, var(--paper-raised)); } /* schedule row styling: accent index marker, compact sizes */ .card .idx { font-family:var(--font-mono); font-size:1.2rem; letter-spacing:.03em; color: var(--on-light); line-height:1.3; } .card .ico { width: 120px; height: 120px; align-self: center; } /* line-work inherits band ink (theme-aware); accent layer set per-path */ /* large feature icons keep drafted hairline weight: strokes stay in screen px as the glyph scales */ .card .ico, .pillar .ico { stroke-width: 2.4; } .card .ico :is(path,circle), .pillar .ico :is(path,circle) { vector-effect: non-scaling-stroke; } .card .card-body { max-width: 66ch; } .card h3 { font-size: 1.18rem; margin-bottom: 14px; } .card .key { color: var(--on-light); font-family:var(--font-mono); font-size:.82rem; letter-spacing:.03em; margin-bottom: 12px; font-weight:600; } .card p { color: var(--on-light-dim); font-size: .96rem; text-align: left; } /* ================= TECH RIBBON ================= */ .tech { border-top:1px solid var(--hair-light); } .tech .wrap { display:flex; align-items:center; gap: 40px; flex-wrap:wrap; justify-content:center; padding-block: 30px; } .tech .lead { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--on-light-dim); } .tech .logos { display:flex; gap: 44px; flex-wrap:wrap; align-items:center; justify-content:center; } .tech .logos .logo { display:inline-flex; align-items:center; } .tech .logos .logo img { height: 27px; width: auto; display:block; opacity:.9; transition: opacity .2s var(--ease), transform .2s var(--ease); } .tech .logos .logo:hover img { opacity:1; transform: translateY(-1px); } /* ================= ADVANTAGE — "Section cut": headline column left (25), cards right (75) ================= */ .adv-cut { display:grid; grid-template-columns: 30fr 70fr; gap: clamp(30px, 4.4vw, 64px); align-items:start; } .adv-head .dimline { margin-bottom: 20px; } .adv-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 0; } .adv-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 0; } .pillar { padding: 30px 24px; border:1px solid var(--hair-light); border-radius: var(--radius); background: var(--paper-raised); transition: transform .25s var(--ease), border-color .25s; position:relative; } .pillar:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 40%, var(--hair-light)); } .pillar .ico { width: 112px; height: 112px; margin-bottom: 16px; } /* inherits band ink; accent layer per-path */ .pillar h3 { font-size: 1.1rem; margin-bottom: 10px; } .pillar p { color: var(--on-light-dim); font-size: .92rem; text-align: left; } .pillar .no { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; color: var(--on-light-dim); opacity:.55; position:absolute; top: 30px; right: 24px; } /* index tag pinned top-right; icon owns the top-left */ /* ================= FAQ (V2 section 6.b) — services-ledger accordion on a raised block ================= */ .faq-head { margin-bottom: 40px; } .faq-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); max-width: 20ch; } .faq-list { border:1px solid var(--hair-light); border-radius: var(--radius); overflow:hidden; background: var(--paper-raised); max-width: 900px; } .faq-item { border-top:1px solid var(--hair-light); scroll-margin-top: 88px; } .faq-item:first-child { border-top:none; } .faq-item > summary { list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:20px; padding: clamp(18px,2.4vw,24px) clamp(20px,2.6vw,28px); transition: background .2s var(--ease); } .faq-item > summary::-webkit-details-marker { display:none; } .faq-item > summary:hover { background: color-mix(in srgb, var(--accent) 5%, var(--paper-raised)); } .faq-item > summary:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; } .faq-item .q { font-weight:700; font-size:1.02rem; line-height:1.35; color: var(--on-light); flex:1; letter-spacing:-.01em; } .faq-item .sign { flex:none; width:18px; height:18px; margin-top:3px; position:relative; color: var(--accent); } .faq-item .sign::before, .faq-item .sign::after { content:""; position:absolute; background: currentColor; border-radius:2px; } .faq-item .sign::before { top:8px; left:1px; width:16px; height:2px; } .faq-item .sign::after { left:8px; top:1px; width:2px; height:16px; transition: transform .25s var(--ease); transform-origin:center; } .faq-item[open] .sign::after { transform: scaleY(0); } .faq-item .faq-a { padding: 0 clamp(20px,2.6vw,28px) clamp(20px,2.6vw,26px); } .faq-item .faq-a p { color: var(--on-light-dim); max-width: 68ch; font-size: .97rem; } .faq-item .faq-a p + p { margin-top: 14px; } /* ================= CONTACT ================= */ .contact-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items:center; } .contact h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 12px 0 16px; } .contact .lede { color: var(--on-dark-dim); max-width: 40ch; } /* ---- Jetpack contact-form reskin ---- The live form is a Jetpack block, so we style by ELEMENT inside .rfq-wrap rather than by Jetpack's own class names — the dark-input look survives any Jetpack markup change. Mirrors the prototype's .rfq / .field styling. */ .rfq-wrap { margin-top: 34px; } .rfq-wrap .grunion-field-wrap { margin-bottom: 16px; } .rfq-wrap label, .rfq-wrap .grunion-field-label { display:block; margin-bottom: 8px; font-family: var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--on-dark-dim); } .rfq-wrap .grunion-field-label span { text-transform:none; letter-spacing:0; opacity:.65; } .rfq-wrap input[type="text"], .rfq-wrap input[type="email"], .rfq-wrap input[type="tel"], .rfq-wrap textarea { background: var(--ground-raised); border:1px solid var(--hair-dark); border-radius: var(--radius); color: var(--on-dark); font-family: var(--font-sans); font-size: 1rem; padding: 13px 15px; width:100%; transition: border-color .2s; } .rfq-wrap input:focus, .rfq-wrap textarea:focus { outline: none; border-color: var(--accent); } /* Jetpack's grunion.css sets `.contact-form input::placeholder { color: inherit }` (0,1,2), which beats a bare `.rfq-wrap ::placeholder` — so the hint showed in bright input ink. Match its class with higher specificity to mute it like the prototype (Jetpack's own hover/focus opacity fade still applies on top). */ .rfq-wrap .wp-block-jetpack-contact-form input::placeholder, .rfq-wrap .wp-block-jetpack-contact-form textarea::placeholder { color: var(--on-dark-dim); opacity: 1; } /* Jetpack ships the textarea with rows="20" (~200px). Cap to the prototype's 120px (overrides the presentational rows attr); it stays user-resizable. */ .rfq-wrap textarea { resize: vertical; height: 120px; min-height: 120px; } .rfq-wrap .wp-block-button__link, .rfq-wrap button[type="submit"] { display:inline-flex; align-items:center; gap:.6em; margin-top: 4px; background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size:.82rem; letter-spacing:.06em; font-weight:600; text-transform:uppercase; padding: 15px 26px; border:1px solid transparent; border-radius: var(--radius); cursor:pointer; transition: transform .2s var(--ease), background .2s; } .rfq-wrap .wp-block-button__link:hover, .rfq-wrap button[type="submit"]:hover { transform: translateY(-2px); } /* Arrow to match the prototype's "Send Requirements →" (button is inline-flex with gap, so the ::after sits as a spaced child and nudges on hover). */ .rfq-wrap .wp-block-button__link::after, .rfq-wrap button[type="submit"]::after { content: "\2192"; transition: transform .2s var(--ease); } .rfq-wrap .wp-block-button__link:hover::after, .rfq-wrap button[type="submit"]:hover::after { transform: translateX(3px); } /* Jetpack confirmation / validation copy on the navy ground */ .rfq-wrap .contact-form__label, .rfq-wrap .grunion-error { color: var(--on-dark-dim); } .contact-info { background: var(--ground-raised); border:1px solid var(--hair-dark); border-radius: var(--radius); padding: 30px; display:flex; flex-direction:column; } .contact-info .row { display:flex; gap: 14px; padding: 16px 0; border-bottom:1px solid var(--hair-dark); } /* last row (coverage) pinned to the panel foot so a taller form leaves no dead gap */ .contact-info .row:last-child { border-bottom:none; } .contact-info .row svg { width:20px; height:20px; color: var(--accent); flex:none; margin-top:2px; } .contact-info .k { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color: var(--on-dark-dim); } .contact-info .v { font-size: .98rem; color: var(--on-dark); margin-top: 3px; } .contact-info .v a { color: inherit; } .contact-info .v.soon { color: var(--on-dark-dim); font-style: italic; } /* ================= FOOTER ================= */ .footer { background: var(--footer); border-top:1px solid var(--hair-dark); } .footer .top { display:flex; justify-content:space-between; gap: 40px; flex-wrap:wrap; padding-block: 52px; } .footer .brand .mark { width: 34px; height: 34px; } .footer .brand .word { font-family: var(--font-head); font-size: 1.5rem; color: var(--on-dark); } .footer .tag { color: var(--on-dark-dim); font-family:var(--font-mono); font-size:.8rem; letter-spacing:.06em; margin-top: 16px; max-width: 34ch; } .footer .cols { display:flex; gap: 64px; flex-wrap:wrap; } .footer .col h3 { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color: var(--on-dark-dim); margin-bottom: 14px; } /* h3 (was h4) — closes the h2→h4 outline skip; label-tier styling unchanged */ .footer .col a, .footer .col p { display:block; color: var(--on-dark); font-size:.92rem; margin-bottom: 9px; } .footer .col a:hover { color: var(--accent); } .footer .col p.soon { color: var(--on-dark-dim); font-style: italic; } .footer .social { display:flex; gap: 12px; margin-top: 16px; } .footer .social .soc { width: 34px; height: 34px; margin: 0; display:grid; place-items:center; border:1px solid var(--hair-dark); border-radius: var(--radius); color: var(--accent); cursor: pointer; transition: border-color .2s, background .2s; } .footer .social .soc:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .footer .social .soc svg { width: 17px; height: 17px; } /* full-bleed copyright bar — deepest tone, matches the top banner */ .copyright { background: var(--deepest); border-top:1px solid var(--hair-dark); } .copyright .wrap { padding-block: 20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color: var(--on-dark-dim); } /* ================= GO TO TOP ================= */ #gotop { position: fixed; right: 26px; bottom: 26px; width: 48px; height: 48px; border-radius: 50%; border:none; background: var(--accent); color: var(--on-accent); cursor:pointer; display:grid; place-items:center; opacity:0; visibility:hidden; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility .25s, background .2s; z-index: 55; box-shadow: 0 8px 22px -8px rgba(0,0,0,.5); } #gotop.show { opacity:1; visibility:visible; transform: none; } #gotop:hover { transform: translateY(-3px); } #gotop svg { width:20px; height:20px; } /* reveal */ html.anim .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); } html.anim .reveal.in { opacity: 1; transform: none; } html.anim .stagger > * { opacity:0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); } html.anim .stagger.in > * { opacity:1; transform:none; } /* ---- Home body via page 2215 (core/post-content) ---- The home now renders the page content through core/post-content, so the sections sit inside a .wp-block-post-content wrapper. Strip its default margins and flow block-gap so the colored bands stay full-bleed and butt together seamlessly — exactly as when the body was inline in the template. */ main#main { margin-block: 0; } /* kill FSE root block-spacing above the hero */ .wp-block-post-content { margin: 0; } .wp-block-post-content > * { margin-block: 0; } /* ================= RESPONSIVE ================= Breakpoints (client-confirmed 2026-07-12, Astra-compatible): tablet ≤921px · mobile ≤544px. Desktop ≥922px is the locked v6 composition and compresses fluidly — no desktop-zone breakpoints. */ /* ---------- TABLET (545–921px) ---------- */ @media (max-width: 921px) { /* nav collapses to the hamburger menu (touch-first, Astra-style header break) */ .navlinks { display:none; position:absolute; top: 66px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background: color-mix(in srgb, var(--footer) 98%, #000); border-bottom:1px solid var(--hair-dark); padding: 8px 24px 18px; box-shadow: 0 16px 30px -20px rgba(0,0,0,.8); } .navlinks.open { display:flex; } .navlinks a { padding: 13px 0; border-bottom:1px solid var(--hair-dark); } .navlinks .cta { margin: 12px 0 0; justify-content:center; } .hamburger { display:grid; place-items:center; } /* hero: copy left, sample sheet right (client sketch) — sheet crops to the first sections (img at 150% width = matrix cols 1-2; window ≈ 1.7 rows), starts at the hero top, bleeds off the right edge, fades toward the foot; no legend/scale. Keeps the hero light instead of a dark block below copy. */ .hero .wrap { gap: 24px; align-items: start; align-content: start; min-height: 0; } .hero-sheet { align-self: start; margin: 0 -14vw 0 0; overflow: hidden; aspect-ratio: 352 / 380; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 80%), linear-gradient(90deg, #000 55%, transparent 97%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 40%, transparent 80%), linear-gradient(90deg, #000 55%, transparent 97%); mask-composite: intersect; } .sheet-img { width: 150%; height: auto; max-height: none; object-fit: fill; transform: none; } .sheet-scale { display: none; } /* about: single column — copy leads, photo beneath; both centered so the 66ch measure doesn't leave a dead right margin */ .about-grid { grid-template-columns: 1fr; gap: 30px; } .about-copy { max-width: var(--measure); margin-inline: auto; } .about-visual { position: static; order: 1; width: min(100%, 460px); margin-inline: auto; } .av-photo { aspect-ratio: 16 / 11; background-position: center 40%; } /* stats: 2×2 */ .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: none; } .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--hair-light); } /* services ledger: icon scales fluidly so the body text keeps a readable measure */ .card { grid-template-columns: 44px auto 1fr; gap: 20px; } .card .ico { width: clamp(84px, 14vw, 120px); height: clamp(84px, 14vw, 120px); } /* advantage: headline above the pillars; ≥280px floor holds a clean 2×2 across the band (spaced evenly full-width), wrapping 1-up near the floor */ .adv-cut { grid-template-columns: 1fr; gap: 28px; } .adv-head .dimline { margin-bottom: 12px; } .adv-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .pillar .ico { width: clamp(84px, 12vw, 112px); height: clamp(84px, 12vw, 112px); } /* contact: form above the info panel; panel trimmed to content width, centered */ .contact-grid { grid-template-columns: 1fr; gap: 34px; } .contact-info { width: 100%; max-width: 460px; margin-inline: auto; } /* footer: brand above; three equal thirds, each column block centered in its third (client sketch) — text stays left-aligned inside the block */ .footer .top { flex-direction: column; gap: 36px; } .footer .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; } .footer .col { justify-self: center; } } /* ---------- MOBILE (≤544px) ---------- */ @media (max-width: 544px) { /* topbar: phone-only (round-4 client call) */ .topbar .info span.mail { display:none; } /* the notice wraps to two/three lines at phone measure — ease the type so it stays a band, not a block */ .topbar .notice { padding-inline: 32px; } .topbar .notice-msg { font-size: .8rem; letter-spacing: .02em; line-height: 1.45; } .topbar .notice-msg .arrow { display: none; } /* hero: single column, drawing removed (client call) — headline and CTAs own the fold; the real sample still reads in About and Services */ .hero .wrap { grid-template-columns: 1fr; } .hero-sheet { display: none; } /* hero CTAs: full-width stack for thumb reach */ .hero .actions { flex-direction: column; align-items: stretch; } .hero .actions .btn { justify-content: center; } /* stats: single column */ .stats { grid-template-columns: 1fr; } .stat { border-right:none; border-bottom:1px solid var(--hair-light); } .stat:last-child { border-bottom:none; } /* services card restacks: index far left, icon nudged right of it, full-width text */ .card { display:block; padding: 26px 22px; } .card .idx { position:absolute; top: 24px; left: 22px; font-size: 1rem; color: var(--on-light-dim); } /* was opacity .55 → 3.75:1; dim ink measures 5.81:1 (WCAG AA) */ .card .ico { display:block; width: 84px; height: 84px; margin: 0 0 14px 46px; } /* pillars: single column */ .adv-grid { grid-template-columns: 1fr; } /* footer: Navigate + Services share a row (like the pre-grid layout), Reach Us full-width below */ .footer .top { flex-direction: column; } .footer .cols { grid-template-columns: 1fr 1fr; gap: 28px 40px; } .footer .col { justify-self: start; } .footer .col:nth-child(3) { grid-column: 1 / -1; } /* tech ribbon: tighter wrap rhythm */ .tech .logos { gap: 22px 30px; } #gotop { right: 18px; bottom: 18px; } }