/* ============================================================ Dillon's Welding — Blueprint Design System dw-site-blueprint.css · shared by the homepage + inner pages Pairs with dw-site.js (form, photo/info injection, status, version). Fonts (load in each page ): Archivo, Archivo Narrow, Space Mono. ============================================================ */ :root{ --paper:#f4f1ea; --paper-2:#ece8df; --ink:#1c1c1c; --ink-2:#3a3733; --acc:#2c72b0; --acc-text:#266398; --gray:#6b665e; --line:#1c1c1c; --line-soft:#c9c3b6; --grid:#0000000a; /* --acc-text: darker accent for SMALL TEXT only (eyebrows, step labels, inline links). #2c72b0 on the paper bg sits at ~4.4:1, just under the WCAG 4.5:1 small-text line (the Lighthouse contrast failures, 2026-08-15). #266398 measures ~5.5:1 on --paper and ~5.2:1 on --paper-2. Buttons, borders, hovers, and large elements keep --acc. */ } *{margin:0;padding:0;box-sizing:border-box;} html{ -webkit-font-smoothing:antialiased; scroll-behavior:smooth; } /* Metric-matched fallbacks (v2.48.0): with dw-site.js deferred the page paints before the webfonts arrive, and the raw Arial/Courier swap moved the hero column (CLS 0 -> 0.1 in the 2026-08-16 PSI run). size-adjust ratios were MEASURED in-browser (canvas advance-width of the live hero headline string): Archivo = 98.84% of Arial, Archivo Narrow = 100.6% of Arial Narrow, Space Mono = 101.98% of Courier New. Line-heights are explicit site-wide, so width is the only axis that reflows - no ascent/descent overrides needed. */ @font-face{ font-family:'Archivo Fallback'; src:local('Arial'); size-adjust:98.84%; } @font-face{ font-family:'Archivo Narrow Fallback'; src:local('Arial Narrow'),local('Arial'); size-adjust:100.6%; } @font-face{ font-family:'Space Mono Fallback'; src:local('Courier New'); size-adjust:101.98%; } body{ background-color:var(--paper); font-family:'Archivo','Archivo Fallback',sans-serif; color:var(--ink); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:30px 30px; background-position:center top; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; border:none; background:none; } img{ max-width:100%; display:block; } /* Content sheet: capped + centered, sitting on the gridded body (drafting table). Solid paper (Dillon, go-live pass): content reads on a flat surface; the body grid shows only in the side gutters on wide screens. Flex column + min-height so leftover viewport is paper in main, not empty black in the footer. */ .sheet{ max-width:1800px; margin:0 auto; position:relative; background:var(--paper); border-left:1px solid var(--line-soft); border-right:1px solid var(--line-soft); min-height:100dvh; display:flex; flex-direction:column; } .sheet > main{ flex:1 0 auto; } @media (max-width:1800px){ .sheet{ border-left:0; border-right:0; } } .cross{ display:none; } /* registration crosshairs removed per request */ /* utility strip */ .util{ display:flex; justify-content:center; align-items:center; gap:12px; padding:9px 30px; border-bottom:1px solid var(--line); font-family:'Space Mono','Space Mono Fallback',monospace; font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gray); background:var(--paper-2); } .util b{ color:var(--ink); } .util .dot{ color:var(--acc); } .util .open-status{ display:inline-flex; align-items:center; gap:6px; } .open-status__dot{ width:7px; height:7px; border-radius:50%; background:#999; } .open-status__dot--open{ background:#2e7d32; } .open-status__dot--closed{ background:#9a9387; } /* nav — sticky on desktop so Services/Gallery/Estimate stay reachable while scrolling */ .nav{ display:flex; justify-content:space-between; align-items:center; padding:18px 30px; border-bottom:2px solid var(--line); } @media (min-width:861px){ .nav{ position:sticky; top:0; z-index:900; background:var(--paper); } .sheet [id]{ scroll-margin-top:96px; } } .brand{ display:flex; flex-direction:column; align-items:center; } .brand .mark{ height:40px; width:auto; display:block; } .brand .name{ font-weight:900; font-size:22px; letter-spacing:-.5px; text-transform:uppercase; line-height:1; } .brand .sub{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:11px; font-weight:700; letter-spacing:2px; color:var(--ink-2); text-transform:uppercase; margin-top:4px; text-align:center; margin-right:-2px; } .nav__links{ display:flex; align-items:center; gap:24px; list-style:none; } .nav__links a{ font-family:'Archivo','Archivo Fallback',sans-serif; font-size:14px; font-weight:600; letter-spacing:.3px; color:var(--ink-2); } .nav__links a:hover,.nav__links a.active{ color:var(--acc); } .nav__links a.btn-cta,.nav__links a.btn-solid{ color:var(--paper); } .nav__links a.btn-cta:hover{ color:var(--paper); } /* Services dropdown — inner pages (homepage keeps the in-page #services jump). Hover + focus-within so mouse and keyboard both reach the 7 service URLs. Padding-top on the menu is an invisible hover bridge so the menu does not close in the gap under the bar. */ .nav__item--services{ position:relative; } .nav__services{ background:none; border:0; padding:0; cursor:pointer; font-family:'Archivo','Archivo Fallback',sans-serif; font-size:14px; font-weight:600; letter-spacing:.3px; color:var(--ink-2); } .nav__services::after{ content:''; display:inline-block; width:0; height:0; margin-left:6px; vertical-align:middle; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; } .nav__item--services:hover .nav__services, .nav__item--services:focus-within .nav__services, .nav__item--services.is-open .nav__services, .nav__services:hover{ color:var(--acc); } .nav__dropdown{ display:none; position:absolute; top:calc(100% - 4px); left:-12px; min-width:220px; padding-top:12px; z-index:950; list-style:none; } .nav__item--services:hover .nav__dropdown, .nav__item--services:focus-within .nav__dropdown, .nav__item--services.is-open .nav__dropdown{ display:block; } .nav__dropdown a{ display:block; padding:9px 16px; background:var(--paper); border-left:1px solid var(--line); border-right:1px solid var(--line); white-space:nowrap; } .nav__dropdown li:first-child a{ border-top:1px solid var(--line); } .nav__dropdown li:last-child a{ border-bottom:1px solid var(--line); } .nav__dropdown a:hover,.nav__dropdown a.active{ background:var(--paper-2); } .nav__hamburger{ display:none; position:relative; width:26px; height:16px; flex-direction:column; justify-content:space-between; } /* Enlarge the mobile menu tap target to ~44px without moving the bars, which stay 26x16 (mobile audit F2). */ .nav__hamburger::before{ content:''; position:absolute; top:-14px; bottom:-14px; left:-8px; right:-8px; } .nav__hamburger span{ display:block; width:100%; height:2px; background:var(--ink); transition:all .3s; } .nav__hamburger.open span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); } .nav__hamburger.open span:nth-child(2){ opacity:0; } .nav__hamburger.open span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); } .nav__phone{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:13px !important; color:var(--acc-text) !important; font-weight:700; letter-spacing:.5px; display:inline-flex; align-items:center; gap:6px; } .nav__phone svg{ width:14px; height:14px; } .nav__mobile{ display:none; align-items:center; gap:10px; } .nav__call{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; background:var(--acc); color:var(--paper); } .nav__call svg{ width:19px; height:19px; } .btn{ font-family:'Archivo','Archivo Fallback',sans-serif; font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; display:inline-block; transition:all .2s; } .btn-solid{ background:var(--ink); color:var(--paper); padding:12px 22px; } .btn-solid:hover{ background:var(--acc); } .btn-ghost{ color:var(--ink); border:1.5px solid var(--ink); padding:12px 22px; } .btn-ghost:hover{ background:var(--ink); color:var(--paper); } .btn-cta{ background:var(--acc); color:var(--paper); padding:14px 26px; position:relative; overflow:hidden; } .btn-cta:hover{ background:var(--ink); } /* CTA shimmer — sweeps once on load, then every ~6s, to draw the eye to primary actions */ .btn-cta::after, .sticky-cta__estimate::after{ content:""; position:absolute; top:0; bottom:0; left:-160%; width:55%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg); animation:cta-shimmer 6s ease-in-out infinite; pointer-events:none; } /* transform, not left: animating `left` relayouts every frame of a 6s loop that never ends, on every CTA on every page. translateX is compositor-only. */ @keyframes cta-shimmer{ 0%{ transform:skewX(-20deg) translateX(0); } 12%{ transform:skewX(-20deg) translateX(582%); } 100%{ transform:skewX(-20deg) translateX(582%); } } @media (prefers-reduced-motion:reduce){ .btn-cta::after, .sticky-cta__estimate::after{ animation:none; } } .btn-dim{ color:var(--ink); border:1.5px solid var(--line-soft); padding:14px 26px; } .btn-dim:hover{ border-color:var(--ink); } /* mobile menu */ .mobile-menu{ display:none; position:fixed; inset:0; z-index:999; background:var(--paper); flex-direction:column; align-items:center; justify-content:flex-start; gap:22px; overflow-y:auto; padding:72px 20px 48px; } .mobile-menu.open{ display:flex; } .mobile-menu a{ font-weight:800; font-size:26px; text-transform:uppercase; } .mobile-menu a:hover{ color:var(--acc); } .mobile-menu__group{ display:flex; flex-direction:column; align-items:center; gap:10px; } .mobile-menu__lbl{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gray); } .mobile-menu__group a{ font-size:20px; } /* section scaffolding */ .sheet-tag{ display:flex; align-items:center; gap:12px; font-family:'Space Mono','Space Mono Fallback',monospace; font-size:12.5px; letter-spacing:2px; text-transform:uppercase; color:var(--gray); padding:18px 30px 0; } .sheet-tag .num{ display:none; } /* SHEET/SPEC/RFQ drafting chips hidden for the public (soften pass); markup kept */ .sheet-tag .rule{ flex:1; height:1px; background:repeating-linear-gradient(90deg,var(--line-soft) 0 5px,transparent 5px 10px); } .sec-h{ font-weight:900; font-size:34px; text-transform:uppercase; letter-spacing:-.5px; padding:8px 30px 0; } .eyebrow{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--acc-text); } /* Phone widths: trim the mono tracking so the eyebrow holds one line, no orphaned TN or city (mobile audit F1). */ @media (max-width:430px){ .eyebrow{ letter-spacing:0.8px; font-size:11px; } } /* hero (homepage) */ .hero{ display:grid; grid-template-columns:1fr 1fr; border-bottom:2px solid var(--line); } .hero-l{ padding:46px 30px 30px; } .hero h1{ font-weight:900; font-size:40px; line-height:1; letter-spacing:-.5px; text-transform:uppercase; margin:16px 0 0; } .hero h1 .lede{ display:block; font-family:'Archivo Narrow','Archivo Narrow Fallback',sans-serif; font-weight:400; font-size:23px; line-height:1.55; letter-spacing:0; text-transform:none; color:var(--ink-2); margin-top:18px; max-width:480px; } .hero-cta{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; } .hero-meta{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:11.5px; color:#55514a; margin-top:24px; letter-spacing:1px; line-height:1.7; } .hero-meta b{ color:var(--ink); } .hero-r{ border-left:2px solid var(--line); padding:28px 30px; display:flex; flex-direction:column; } .titleblock{ border:1.5px solid var(--line); font-family:'Archivo','Archivo Fallback',sans-serif; font-size:12.5px; letter-spacing:.2px; } .titleblock .row{ display:flex; justify-content:space-between; gap:10px; padding:7px 11px; border-bottom:1px solid var(--line); } .titleblock .row:last-child{ border-bottom:0; } .titleblock .row b{ color:var(--ink); } .titleblock .row span{ color:var(--gray); } .hero-shots{ position:relative; flex:1; min-height:320px; margin-top:18px; border:1.5px solid var(--line); overflow:hidden; } .hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.2s ease; } .hero-slide.active{ opacity:1; } /* Ken Burns drift tried v2.38.0, removed v2.39.0 (Dillon: looked cheap). Crossfade only. */ .hero-slide:not(.has-photo){ background:repeating-linear-gradient(45deg,#e7e2d8 0 12px,#ece8df 12px 24px); } .hero-shots__cap{ position:absolute; left:0; bottom:0; z-index:2; font-family:'Space Mono','Space Mono Fallback',monospace; font-size:9.5px; letter-spacing:1px; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:6px 10px; } /* stats */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:2px solid var(--line); } .statx{ padding:22px 24px; border-right:1px solid var(--line); } .statx:last-child{ border-right:0; } .statx b{ display:block; font-weight:900; font-size:30px; line-height:1; } .statx .u{ font-family:'Archivo Narrow','Archivo Narrow Fallback',sans-serif; font-weight:400; font-size:20px; color:var(--gray); } .statx span{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--gray); margin-top:6px; display:block; } /* services */ .svc-wrap{ border-bottom:2px solid var(--line); padding-bottom:30px; } .svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); margin-top:18px; } .service-card{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; color:var(--ink); display:block; } .service-card:nth-child(3n){ border-right:0; } .service-card:hover{ background:var(--paper-2); } .service-card:hover h3{ color:var(--acc); } .service-card:hover .service-card__img{ filter:contrast(1.05) saturate(1.05); } .service-card__img{ height:180px; background-size:cover; background-position:center; position:relative; border-bottom:1px solid var(--line); background-image:repeating-linear-gradient(45deg,#e7e2d8 0 12px,#ece8df 12px 24px); display:flex; align-items:center; justify-content:center; transition:filter .25s; } .service-card__img .ph{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:10px; color:#9a9387; border:1px dashed #9a9387; padding:4px 8px; border-radius:2px; } .service-card__img.has-photo .ph{ display:none; } .service-card__no{ position:absolute; top:10px; left:10px; z-index:2; font-family:'Space Mono','Space Mono Fallback',monospace; font-size:10px; color:var(--paper); background:var(--ink); padding:2px 7px; } .service-card__body{ padding:16px 22px 22px; } .service-card h3{ font-weight:700; font-size:19px; text-transform:uppercase; letter-spacing:.2px; margin-bottom:6px; } .service-card p{ font-size:15px; line-height:1.55; color:#55514a; } .service-card.wide{ grid-column:1 / -1; border-right:0; display:grid; grid-template-columns:300px 1fr; } .service-card.wide .service-card__img{ height:auto; min-height:160px; border-bottom:0; border-right:1px solid var(--line); } /* Quiet full-width text strip for demoted services (repairs, OTC): findable, not promoted */ .svc-more{ grid-column:1 / -1; border-right:0; } .svc-more .service-card__body{ display:flex; gap:40px; flex-wrap:wrap; align-items:flex-start; padding:16px 22px; } .svc-more p{ font-size:14px; margin:0; color:#55514a; } .svc-more a, .svc-more b{ font-weight:700; color:var(--acc-text); } .svc-more b{ color:var(--ink); } .svc-more a:hover{ text-decoration:underline; } @media (max-width:680px){ .svc-more .service-card__body{ gap:14px; flex-direction:column; } } /* process */ .proc{ display:grid; grid-template-columns:repeat(3,1fr); border-bottom:2px solid var(--line); margin-top:18px; } .step{ padding:24px 26px; border-right:1px solid var(--line); } .step:last-child{ border-right:0; } .step .rev{ font-family:'Archivo','Archivo Fallback',sans-serif; font-size:13px; font-weight:700; color:var(--acc-text); letter-spacing:.3px; } .step h3{ font-weight:800; font-size:19px; text-transform:uppercase; margin:8px 0 6px; } .step p{ font-size:15px; color:#55514a; line-height:1.6; } /* gallery */ .gal{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); margin-top:18px; border-bottom:2px solid var(--line); } .cell{ aspect-ratio:4/3; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; background:repeating-linear-gradient(45deg,#e7e2d8 0 10px,#ece8df 10px 20px); background-size:cover; background-position:center; display:flex; align-items:flex-end; overflow:hidden; } .cell:nth-child(3n){ border-right:0; } .cell.has-photo::before{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%); z-index:1; } .cell .cap{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:9.5px; letter-spacing:.5px; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:5px 9px; margin:10px; position:relative; z-index:2; } .cell.has-photo .cap{ background:rgba(28,28,28,.85); } .cell .ph{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'Space Mono','Space Mono Fallback',monospace; font-size:10px; color:#9a9387; border:1px dashed #9a9387; padding:5px 9px; border-radius:2px; } .cell.has-photo .ph{ display:none; } .gal-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:24px 30px 0; } .gal-cta .or{ font-family:'Archivo','Archivo Fallback',sans-serif; font-size:13px; color:var(--gray); } .gal-cta .or a{ color:var(--acc-text); } /* RFQ form */ .rfq{ border-bottom:2px solid var(--line); padding-bottom:30px; } .rfq-box{ margin:18px 30px 0; border:1.5px solid var(--line); } .rfq-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 16px; border-bottom:1.5px solid var(--line); background:var(--ink); color:var(--paper); font-family:'Archivo','Archivo Fallback',sans-serif; font-size:13px; font-weight:600; letter-spacing:.3px; } .rfq-body{ padding:20px 16px; } .config-progress{ display:flex; gap:8px; margin-bottom:20px; } .config-progress__dot{ flex:1; height:4px; background:var(--line-soft); } .config-progress__dot.active{ background:var(--acc); } .config-progress__dot.done{ background:var(--ink); } .config-step{ display:none; } .config-step.active{ display:block; animation:fadein .35s ease; } @keyframes fadein{ from{ opacity:0; } to{ opacity:1; } } .config-step__title{ font-weight:800; font-size:20px; text-transform:uppercase; } .config-step__hint{ font-family:'Archivo','Archivo Fallback',sans-serif; font-size:13px; color:var(--gray); letter-spacing:.2px; margin:4px 0 16px; } .type-grid{ display:grid; grid-template-columns:repeat(4,1fr); border:1.5px solid var(--line); } .type-card{ padding:14px 10px; border-right:1px solid var(--line); border-top:1px solid var(--line); cursor:pointer; text-align:center; } .type-card:nth-child(-n+4){ border-top:0; } .type-card:nth-child(4n){ border-right:0; } .type-card:hover{ background:var(--paper-2); } .type-card.selected{ background:var(--ink); } .type-card.selected .type-card__label,.type-card.selected .type-card__sub{ color:var(--paper); } .type-card__label{ font-family:'Archivo','Archivo Fallback',sans-serif; font-size:13.5px; font-weight:700; letter-spacing:.2px; color:var(--ink); } .type-card__sub{ font-size:12px; color:var(--gray); margin-top:3px; } .config-form{ margin-top:18px; } .config-group{ margin-bottom:16px; } .config-group label{ font-family:'Archivo','Archivo Fallback',sans-serif; font-size:13px; font-weight:600; letter-spacing:.2px; color:var(--ink-2); display:block; margin-bottom:6px; } .config-group input,.config-group textarea,.config-group select{ width:100%; font-family:'Archivo','Archivo Fallback',sans-serif; font-size:16px; color:var(--ink); background:#fff; border:1.5px solid var(--line); padding:10px; outline:none; border-radius:0; } .config-group textarea{ resize:vertical; min-height:80px; } .config-group input:focus,.config-group textarea:focus,.config-group select:focus{ border-color:var(--acc); } .config-group input::placeholder,.config-group textarea::placeholder{ color:#7a746c; } /* 4.6:1 on the white input fill */ .config-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .config-upload{ border:1.5px dashed var(--line); padding:18px; text-align:center; cursor:pointer; } .config-upload__text{ font-family:'Archivo','Archivo Fallback',sans-serif; font-size:13.5px; font-weight:600; letter-spacing:.2px; color:var(--ink-2); } .config-upload__hint{ font-family:'Archivo','Archivo Fallback',sans-serif; font-size:12px; color:var(--gray); margin-top:4px; } .upload-mobile{ display:none; } .file-preview{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .file-preview__item{ width:60px; height:60px; position:relative; border:1px solid var(--line); } .file-preview__item img{ width:100%; height:100%; object-fit:cover; } .file-preview__remove{ position:absolute; top:-7px; right:-7px; width:18px; height:18px; background:var(--ink); color:#fff; border-radius:50%; font-size:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .config-nav{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; } .config-success{ display:none; text-align:center; padding:40px 16px; } .config-success.show{ display:block; } .config-success__icon{ width:54px; height:54px; border:1.5px solid var(--acc); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; } .config-success h3{ font-weight:900; font-size:24px; text-transform:uppercase; } .config-success p{ font-size:14px; color:var(--gray); margin-top:8px; line-height:1.6; } .config-success a{ color:var(--acc-text); } /* about */ .about{ display:grid; grid-template-columns:1fr 1fr; border-bottom:2px solid var(--line); } .about-img{ border-right:2px solid var(--line); min-height:260px; position:relative; background-size:cover; background-position:center; background-image:repeating-linear-gradient(45deg,#e7e2d8 0 10px,#ece8df 10px 20px); display:flex; align-items:center; justify-content:center; } .about-img.has-photo .ph{ display:none; } .about-img .ph{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:10px; color:#9a9387; border:1px dashed #9a9387; padding:6px 10px; } .about-txt{ padding:34px 30px; } .about-txt h2{ font-weight:900; font-size:30px; text-transform:uppercase; letter-spacing:-.5px; line-height:1; margin-top:10px; } .about-txt p{ font-size:17px; line-height:1.65; color:var(--ink-2); margin-top:16px; max-width:520px; } /* service area */ .area{ padding:26px 30px; border-bottom:2px solid var(--line); text-align:center; } .area h3{ font-weight:800; font-size:22px; text-transform:uppercase; margin:8px 0 12px; } .area .cities{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:11px; color:var(--gray); line-height:2; letter-spacing:.5px; } .area .cities b{ color:var(--ink); } /* map */ /* map — keep it a locator strip, not a second page of empty streets */ .map-section iframe{ width:100%; height:220px; border:0; display:block; filter:grayscale(.4) contrast(1.05); border-bottom:2px solid var(--line); } /* Click-to-load map. The live Google embed pulls 14 scripts and 3 extra font files on every visit, so it only loads when someone actually asks for it. */ .map-facade{ width:100%; height:220px; border:0; border-bottom:2px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; cursor:pointer; text-align:center; padding:20px; font:inherit; color:var(--ink); background:repeating-linear-gradient(45deg,#e7e2d8 0 12px,#ece8df 12px 24px); } .map-facade:hover .map-facade__btn{ background:var(--ink); color:var(--paper); } .map-facade__addr{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:12px; letter-spacing:.06em; color:var(--gray); } .map-facade__btn{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:10px 16px; border:1px solid var(--line); background:var(--paper); transition:background .2s,color .2s; } .map-facade__note{ font-size:11px; color:var(--gray); } /* footer */ .foot{ background:var(--ink); color:var(--paper); flex:0 0 auto; margin-top:auto; } .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:20px; padding:22px 30px 16px; } .foot h4{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#8a8279; margin-bottom:8px; } .foot .fname{ font-weight:900; font-size:20px; text-transform:uppercase; letter-spacing:-.3px; } .foot .fsub{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:9.5px; letter-spacing:2px; color:#8a8279; text-transform:uppercase; margin:4px 0 8px; } .foot p{ font-size:14px; color:#c9c3b6; line-height:1.65; max-width:280px; } .foot ul{ list-style:none; } .foot li{ margin-bottom:6px; } .foot a{ color:#dcd6cb; font-size:14px; } .foot a:hover{ color:#7fb0e0; } .foot-bar{ border-top:1px solid #3a3733; padding:10px 30px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:'Space Mono','Space Mono Fallback',monospace; font-size:10px; letter-spacing:1px; color:#8a8279; text-transform:uppercase; } .foot-bar a{ color:#8a8279; } .foot-bar__counties:empty{ display:none; } /* sticky CTA + back to top */ .sticky-cta{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:998; padding:10px 14px; padding-bottom:max(10px,env(safe-area-inset-bottom)); background:var(--ink); gap:10px; transform:translateY(100%); transition:transform .3s; } .sticky-cta.visible{ transform:translateY(0); } .sticky-cta__estimate{ flex:1; text-align:center; background:var(--acc); color:var(--paper); padding:14px; position:relative; overflow:hidden; font-family:'Space Mono','Space Mono Fallback',monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase; } .sticky-cta__call{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:#2a2723; border:1px solid #444; flex-shrink:0; } .sticky-cta__call svg{ width:18px; height:18px; color:var(--paper); } .back-to-top{ position:fixed; bottom:24px; right:24px; z-index:997; width:42px; height:42px; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; } .back-to-top.visible{ opacity:1; pointer-events:auto; } .back-to-top svg{ width:16px; height:16px; } /* platform admin bar (shown when logged in via Shop Admin) */ .platform-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 20px; height:32px; background:#111; color:#c9c3b6; font-family:'Space Mono','Space Mono Fallback',monospace; font-size:11px; letter-spacing:1px; } .platform-bar a{ color:#c9c3b6; } .platform-bar a:hover{ color:#fff; } .platform-bar__links{ display:flex; align-items:center; gap:10px; } .platform-bar__sep{ color:#444; } .platform-bar__logout{ color:#c9c3b6; font-family:inherit; font-size:11px; } /* ============================================================ INNER PAGES (service pages, about, etc.) ============================================================ */ /* breadcrumb */ .breadcrumb{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--gray); padding:14px 30px; border-bottom:1px solid var(--line-soft); } .breadcrumb a{ color:var(--gray); } .breadcrumb a:hover{ color:var(--acc); } .breadcrumb .sep{ margin:0 8px; color:var(--line-soft); } .breadcrumb .cur{ color:var(--ink); } /* inner-page hero (single column, full width) */ .svc-hero{ padding:44px 30px 40px; border-bottom:2px solid var(--line); } .svc-hero h1{ font-weight:900; font-size:54px; line-height:.95; letter-spacing:-1px; text-transform:uppercase; margin:14px 0 0; } .svc-hero .lede{ font-family:'Archivo Narrow','Archivo Narrow Fallback',sans-serif; font-weight:400; font-size:21px; line-height:1.6; color:var(--ink-2); margin-top:16px; max-width:720px; } .svc-hero .hero-cta{ margin-top:24px; } /* big service photo banner */ .svc-photo{ height:420px; position:relative; background-size:cover; background-position:center; border-bottom:2px solid var(--line); background-image:repeating-linear-gradient(45deg,#e7e2d8 0 12px,#ece8df 12px 24px); display:flex; align-items:flex-end; } .svc-photo .ph{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'Space Mono','Space Mono Fallback',monospace; font-size:10px; color:#9a9387; border:1px dashed #9a9387; padding:5px 9px; border-radius:2px; } .svc-photo.has-photo .ph{ display:none; } .svc-photo .cap{ position:relative; z-index:2; font-family:'Space Mono','Space Mono Fallback',monospace; font-size:9.5px; letter-spacing:1px; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:6px 10px; margin:14px; } /* two-column detail block (What We Build / Styles & Options) */ .svc-detail{ display:grid; grid-template-columns:1fr 1fr; border-bottom:2px solid var(--line); } .svc-detail .col{ padding:34px 30px; } .svc-detail .col + .col{ border-left:1px solid var(--line); } .svc-detail h2{ font-weight:800; font-size:23px; text-transform:uppercase; letter-spacing:-.3px; margin-bottom:14px; } .svc-detail p{ font-size:15px; line-height:1.7; color:#55514a; margin-top:10px; } .svc-detail p:first-of-type{ margin-top:0; } .svc-detail strong{ color:var(--ink); font-weight:700; } /* FAQ accordion */ .faq-list{ border-top:1px solid var(--line); margin-top:18px; border-bottom:2px solid var(--line); } .faq-item{ border-bottom:1px solid var(--line); } .faq-item:last-child{ border-bottom:0; } .faq-item summary{ font-weight:700; font-size:16px; text-transform:uppercase; letter-spacing:.3px; padding:16px 48px 16px 30px; cursor:pointer; list-style:none; position:relative; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:"+"; position:absolute; right:30px; top:14px; color:var(--acc); font-family:'Space Mono','Space Mono Fallback',monospace; font-size:18px; font-weight:700; } .faq-item[open] summary::after{ content:"\2013"; } .faq-item p{ padding:0 30px 18px; font-size:15px; line-height:1.7; color:#55514a; max-width:980px; } /* Desktop: two FAQ columns so answers fill the width instead of leaving a wide empty right column. All FAQ pages carry an even item count (8 or 4) so the bottom row is always full. Border model mirrors .prod-grid (list = top+left frame, cells = right+bottom). */ @media (min-width:861px){ .faq-list{ display:grid; grid-template-columns:1fr 1fr; border-left:1px solid var(--line); } .faq-item{ border-right:1px solid var(--line); } .faq-item:last-child{ border-bottom:1px solid var(--line); } .faq-item:nth-last-child(-n+2){ border-bottom:0; } .faq-item p{ max-width:none; } } /* related-service chips */ .other-svc{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:24px 30px; border-bottom:2px solid var(--line); } .other-svc .lbl{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--gray); margin-right:6px; } .other-svc a{ font-family:'Space Mono','Space Mono Fallback',monospace; font-size:11.5px; letter-spacing:.5px; text-transform:uppercase; padding:9px 14px; border:1px solid var(--line); color:var(--ink); } .other-svc a:hover{ background:var(--ink); color:var(--paper); } /* Placeholder PHOTO chips are a build/review aid: visible on staging (dw-site.js adds body.dw-staging there), hidden for real visitors — an empty slot just shows its hatch. */ body:not(.dw-staging) .ph{ display:none; } /* Cards and boxes match the solid paper sheet (Dillon 2026-08-11: white fills clashed and were reverted same day; only form inputs stay white). The flat surface comes from .sheet itself. */ /* friendly microcopy / reassurance nudges */ .reassure{ font-family:'Archivo','Archivo Fallback',sans-serif; font-size:13.5px; color:var(--ink-2); margin-top:14px; letter-spacing:.2px; } .form-note{ font-family:'Archivo','Archivo Fallback',sans-serif; font-size:14px; color:#55514a; line-height:1.55; margin-top:16px; padding:12px 14px; border:1px dashed var(--line-soft); background:var(--paper-2); } /* RFQ section header (inner pages reuse sheet-tag + sec-h above the form) */ /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:860px){ .hero{ grid-template-columns:1fr; } .hero-r{ border-left:0; border-top:2px solid var(--line); flex-direction:column-reverse; } .hero-shots{ margin-top:0; margin-bottom:18px; } .hero h1{ font-size:40px; } .stats{ grid-template-columns:repeat(2,1fr); } .statx:nth-child(2){ border-right:0; } .statx:nth-child(-n+2){ border-bottom:1px solid var(--line); } .svc-grid{ grid-template-columns:1fr 1fr; } .service-card:nth-child(3n){ border-right:1px solid var(--line); } .service-card:nth-child(2n){ border-right:0; } .proc{ grid-template-columns:1fr; } .step{ border-right:0; border-bottom:1px solid var(--line); } .gal{ grid-template-columns:1fr 1fr; } .cell:nth-child(3n){ border-right:1px solid var(--line); } .cell:nth-child(2n){ border-right:0; } .about{ grid-template-columns:1fr; } .about-img{ border-right:0; border-bottom:2px solid var(--line); min-height:200px; } .foot-grid{ grid-template-columns:1fr 1fr; } .type-grid{ grid-template-columns:repeat(2,1fr); } .type-card:nth-child(4n){ border-right:1px solid var(--line); } .type-card:nth-child(2n){ border-right:0; } .type-card:nth-child(-n+2){ border-top:0; } .type-card:nth-child(3),.type-card:nth-child(4){ border-top:1px solid var(--line); } .svc-detail{ grid-template-columns:1fr; } .svc-detail .col + .col{ border-left:0; border-top:1px solid var(--line); } } @media (max-width:680px){ .nav__links{ display:none; } .nav__hamburger{ display:flex; } .nav__mobile{ display:flex; } .util{ flex-direction:column-reverse; align-items:center; gap:5px; text-align:center; font-size:10px; padding:9px 14px; letter-spacing:1px; line-height:1.4; } .sec-h{ font-size:26px; } /* Mobile hero: compress the text block so the photo rises above the fold (Dillon 2026-08-14 - too much empty space was crowding the picture off the first screen). v2.44.3 tightened further per Dillon: smaller headline, less vertical padding above the eyebrow and under the headline, so the photo has more room above the fold. */ .hero-l{ padding:12px 20px 16px; } .hero h1{ font-size:26px; margin-top:4px; } .hero h1 .lede{ font-size:18px; margin-top:6px; } /* Homepage hero CTAs share one row on mobile (Dillon) - smaller buttons so both fit down to 360px. Scoped to .hero so the About and service-page CTAs keep their normal stacking. */ .hero-cta{ margin-top:12px; } .hero .hero-cta{ flex-wrap:nowrap; gap:8px; } .hero .hero-cta .btn{ flex:1 1 auto; padding:11px 10px; font-size:11.5px; letter-spacing:.2px; white-space:nowrap; text-align:center; } /* tighter tracking/size keeps the 3 market categories on one line down to 360px (no orphaned MISCELLANEOUS) */ .hero-meta{ margin-top:10px; line-height:1.5; font-size:11px; letter-spacing:0.4px; } .hero-r{ padding:10px 20px 16px; } .svc-grid,.gal{ grid-template-columns:1fr; } .service-card,.cell{ border-right:0 !important; } .service-card.wide{ grid-template-columns:1fr; } .service-card.wide .service-card__img{ min-height:170px; border-right:0; border-bottom:1px solid var(--line); } .config-row{ grid-template-columns:1fr; } .foot-grid{ grid-template-columns:1fr; } .sticky-cta{ display:flex; } .upload-desktop{ display:none; } .upload-mobile{ display:inline; } .svc-hero h1{ font-size:38px; } .svc-photo{ height:260px; } }