/* ============================================================ Mac's Painting — production site stylesheet (self-contained). Brand tokens flattened from the Mac's Painting design system. Fonts are loaded non-blocking from (preconnect + async stylesheet). ============================================================ */ :root { /* ---- Brand blue scale ---- */ --blue-50:#E9F3FB; --blue-100:#CFE5F7; --blue-200:#A6CFF0; --blue-300:#6DB0E6; --blue-400:#2E8FD8; --blue-500:#0070C0; --blue-600:#005FA6; --blue-700:#004E89; --blue-800:#003E6E; --blue-900:#002E52; /* ---- Neutral / slate scale ---- */ --neutral-0:#FFFFFF; --neutral-25:#FAFBFC; --neutral-50:#F4F6F8; --neutral-100:#E9EDF1; --neutral-200:#D8DEE4; --neutral-300:#C2CAD2; --neutral-400:#97A2AD; --neutral-500:#6B7681; --neutral-600:#4D565F; --neutral-700:#353C43; --neutral-800:#262B30; --neutral-900:#1A1D21; --charcoal:#303030; /* ---- Status ---- */ --green-500:#1E874B; --green-50:#E7F4ED; --amber-500:#C8860A; --amber-50:#FBF1DD; --red-500:#D14343; --red-50:#FBEAEA; /* Surfaces */ --color-bg:var(--neutral-25); --color-surface:var(--neutral-0); --color-surface-2:var(--neutral-50); --color-surface-sunken:var(--neutral-100); --color-ink-surface:var(--charcoal); --color-brand-surface:var(--blue-50); /* Text */ --text-strong:#16191D; --text-body:var(--neutral-700); --text-muted:var(--neutral-500); --text-subtle:var(--neutral-400); --text-inverse:var(--neutral-0); --text-inverse-muted:rgba(255,255,255,.72); --text-brand:var(--blue-600); --text-link:var(--blue-600); /* Borders */ --border:var(--neutral-200); --border-strong:var(--neutral-300); --border-brand:var(--blue-500); --divider-on-dark:rgba(255,255,255,.14); /* Brand actions */ --brand:var(--blue-500); --brand-hover:var(--blue-600); --brand-active:var(--blue-700); --brand-contrast:var(--neutral-0); --brand-soft:var(--blue-50); --brand-soft-hover:var(--blue-100); --ink:var(--charcoal); --ink-hover:#232323; --ink-active:#161616; /* Status semantic */ --success:var(--green-500); --success-soft:var(--green-50); --warning:var(--amber-500); --warning-soft:var(--amber-50); --danger:var(--red-500); --danger-soft:var(--red-50); --focus-ring:color-mix(in srgb, var(--blue-500) 45%, transparent); /* Type */ --font-display:'Spectral','Iowan Old Style',Georgia,serif; --font-sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --text-2xs:.75rem; --text-xs:.8125rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.25rem; --text-xl:1.5rem; --text-2xl:1.875rem; --text-3xl:clamp(2rem,5vw,2.625rem); --text-4xl:clamp(2.5rem,6.5vw,3.5rem); --text-5xl:clamp(3rem,8vw,4.5rem); --tracking-caps:.12em; /* Spacing / radii / layout */ --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; --space-10:5rem; --space-12:7rem; --section-y:clamp(4rem,2rem + 8vw,7rem); --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px; --container-max:1200px; --container-narrow:760px; --container-pad:clamp(1.25rem,.5rem + 3vw,3rem); /* Elevation */ --shadow-xs:0 1px 2px rgba(22,36,51,.06); --shadow-sm:0 1px 3px rgba(22,36,51,.08),0 1px 2px rgba(22,36,51,.05); --shadow-md:0 4px 12px rgba(22,36,51,.08),0 2px 4px rgba(22,36,51,.05); --shadow-lg:0 14px 34px rgba(22,36,51,.12),0 4px 10px rgba(22,36,51,.06); --shadow-xl:0 30px 60px rgba(22,36,51,.16); --shadow-brand:0 10px 26px rgba(0,112,192,.26); --ring-focus:0 0 0 3px var(--focus-ring); --ease-out:cubic-bezier(.22,.61,.36,1); --dur-fast:120ms; --dur:200ms; --dur-slow:360ms; } /* ---------------- Base ---------------- */ * { box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { margin:0; background:var(--color-bg); color:var(--text-body); font-family:var(--font-sans); font-size:var(--text-base); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img { max-width:100%; display:block; } a { color:var(--text-link); } em { font-style:italic; } h1,h2,h3,h4 { margin:0; } :focus-visible { outline:none; box-shadow:var(--ring-focus); border-radius:var(--radius-xs); } .container { max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad); } .narrow { max-width:var(--container-narrow); } .section { padding:var(--section-y) 0; } .bg-surface { background:var(--color-surface); } .bg-bg { background:var(--color-bg); } .bg-ink { background:var(--color-ink-surface); } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---------------- Eyebrow / headings ---------------- */ .eyebrow { display:flex; align-items:center; gap:10px; width:fit-content; font-size:12px; font-weight:700; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--brand); margin:0; } .eyebrow::before { content:""; width:24px; height:2px; background:currentColor; border-radius:1px; flex:none; } .eyebrow.on-dark { color:var(--blue-300); } .section-heading.center .eyebrow { align-self:center; } .section-heading.center .eyebrow::before { display:none; } .section-title { font-family:var(--font-display); font-weight:500; color:var(--text-strong); font-size:var(--text-3xl); line-height:1.1; letter-spacing:-.02em; margin:0; } .section-title.display { font-size:var(--text-4xl); letter-spacing:-.025em; } .section-lead { font-size:var(--text-md); line-height:1.6; color:var(--text-body); margin:0; max-width:52ch; } .on-dark .section-title, .section-heading.on-dark .section-title { color:#fff; } .on-dark .section-lead { color:var(--text-inverse-muted); } .section-heading { display:flex; flex-direction:column; gap:14px; } .section-heading.center { align-items:center; text-align:center; } .section-heading.center .section-lead { margin-left:auto; margin-right:auto; } /* ---------------- Buttons ---------------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-sans); font-weight:600; font-size:15px; line-height:1; border-radius:var(--radius-sm); border:1.5px solid transparent; cursor:pointer; padding:12px 20px; text-decoration:none; white-space:nowrap; transition:filter var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn:active { transform:translateY(1px) scale(.99); } .btn svg { width:1.05em; height:1.05em; } .btn-lg { padding:15px 26px; font-size:16px; } .btn-primary { background:var(--brand); color:var(--brand-contrast); box-shadow:var(--shadow-brand); } .btn-primary:hover { filter:brightness(.96); transform:translateY(-1px); box-shadow:var(--shadow-brand), var(--shadow-md); } .btn-primary:active { transform:translateY(1px) scale(.99); } .btn-ink { background:var(--ink); color:#fff; } .btn-ink:hover { background:var(--ink-hover); } .btn-outline { background:transparent; color:var(--text-strong); border-color:var(--border-strong); } .btn-outline:hover { background:var(--brand-soft); border-color:var(--brand); color:var(--text-brand); } .btn-outline.on-dark { color:#fff; border-color:rgba(255,255,255,.4); } .btn-outline.on-dark:hover { background:rgba(255,255,255,.1); border-color:#fff; color:#fff; } .btn-block { width:100%; } /* ---------------- Badge / pill ---------------- */ .badge { display:inline-flex; align-items:center; gap:7px; border-radius:var(--radius-pill); font-size:13px; font-weight:600; padding:7px 14px; line-height:1; } .badge-brand { background:var(--brand-soft); color:var(--text-brand); } .badge-neutral { background:var(--color-surface-2); color:var(--text-body); border:1px solid var(--border); } .badge svg { width:13px; height:13px; } /* ---------------- Card ---------------- */ .card { background:var(--color-surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); } .card-soft { background:var(--brand-soft); border-color:transparent; box-shadow:none; } .card-padded { padding:clamp(1.5rem,1rem + 2vw,2.5rem); } /* ---------------- Header ---------------- */ .site-header { position:sticky; top:0; z-index:50; background:var(--color-surface); border-bottom:1px solid transparent; transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .site-header.scrolled { background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px); border-bottom-color:var(--border); box-shadow:var(--shadow-xs); } .header-inner { height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .header-logo img { height:56px; width:auto; } .header-nav { display:flex; align-items:center; gap:4px; } .header-nav a { position:relative; font-size:15px; font-weight:600; color:var(--text-body); text-decoration:none; padding:8px 14px; border-radius:var(--radius-sm); transition:color var(--dur) var(--ease-out), background var(--dur) var(--ease-out); } .header-nav a::after { content:""; position:absolute; left:14px; right:14px; bottom:5px; height:2px; border-radius:1px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease-out); } .header-nav a:hover { background:var(--color-surface-2); } .header-nav a.active, .header-nav a[aria-current="page"] { color:var(--text-brand); } .header-nav a:hover::after, .header-nav a.active::after, .header-nav a[aria-current="page"]::after { transform:scaleX(1); } .mobile-nav a[aria-current="page"] { color:var(--text-brand); } .header-actions { display:flex; align-items:center; gap:14px; } .header-phone { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--text-strong); font-weight:700; font-size:15px; } .header-phone svg { color:var(--brand); width:18px; height:18px; } .nav-toggle { display:none; background:none; border:none; padding:8px; cursor:pointer; color:var(--text-strong); } .nav-toggle svg { width:26px; height:26px; } /* ---------------- Hero ---------------- */ .hero { background:var(--color-surface); padding-top:clamp(2.5rem,1rem + 5vw,5rem); padding-bottom:var(--section-y); } .hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center; } .hero-copy { display:flex; flex-direction:column; align-items:flex-start; gap:26px; } .hero h1 { font-family:var(--font-display); font-weight:500; font-size:var(--text-5xl); line-height:1.04; letter-spacing:-.02em; color:var(--text-strong); } .hero h1 em { font-style:italic; color:var(--brand); font-weight:400; letter-spacing:-.005em; padding-right:.04em; } .hero-sub { font-size:19px; line-height:1.6; color:var(--text-body); max-width:46ch; margin:0; } .hero-cta { display:flex; flex-wrap:wrap; gap:12px; } .stat-row { display:flex; gap:clamp(1.5rem,1rem + 2vw,3rem); margin-top:8px; flex-wrap:wrap; } .stat .stat-value { font-family:var(--font-display); font-size:30px; font-weight:500; color:var(--brand); line-height:1; } .stat .stat-label { font-size:13.5px; color:var(--text-muted); margin-top:6px; max-width:14ch; } .hero-media { position:relative; } .hero-chip { position:absolute; left:-22px; bottom:26px; background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:16px 20px; display:flex; align-items:center; gap:13px; border:1px solid var(--border); } .hero-chip .chip-icon { width:44px; height:44px; border-radius:var(--radius-md); flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand); } .hero-chip strong { font-size:15px; color:var(--text-strong); } .hero-chip span.sub { font-size:13.5px; color:var(--text-muted); } /* ---------------- Photo placeholder ---------------- */ .photo { position:relative; width:100%; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(135deg,#2b3036 0%,#1c2024 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:rgba(255,255,255,.92); box-shadow:var(--shadow-md); } .photo.brand { background:linear-gradient(135deg,#2E8FD8 0%,#005FA6 100%); } .photo::before { content:""; position:absolute; inset:0; opacity:.12; background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 22px); } .photo svg { position:relative; opacity:.92; } .photo .photo-label { position:relative; font-size:13px; font-weight:600; letter-spacing:.02em; opacity:.9; } .photo > img.fill, .photo > picture.fill { position:absolute; inset:0; width:100%; height:100%; z-index:2; } .photo > img.fill, .photo > picture.fill > img { width:100%; height:100%; object-fit:cover; display:block; } /* ---------------- Services ---------------- */ .services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); } .service-card { padding:clamp(1.5rem,1rem + 1.5vw,2.25rem); display:flex; flex-direction:column; gap:16px; transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .service-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); } .service-card.featured { border-color:var(--border-brand); box-shadow:var(--shadow-md); } .service-card.featured .service-icon { background:var(--brand); color:#fff; } .service-icon { width:56px; height:56px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand); } .service-card h3 { font-family:var(--font-display); font-size:24px; font-weight:500; color:var(--text-strong); } .service-card .desc { font-size:15px; color:var(--text-body); margin:0; } .feature-list { list-style:none; margin:0; padding:0; display:grid; gap:11px; } .feature-list.cols-2 { grid-template-columns:1fr 1fr; gap:11px 24px; } .feature-list li { display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--text-body); line-height:1.4; } .feature-list .check { color:var(--brand); flex-shrink:0; margin-top:2px; } .on-dark .feature-list li { color:var(--text-inverse-muted); } .on-dark .feature-list .check { color:var(--blue-300); } /* ---------------- Why choose ---------------- */ .why-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center; } .why-copy { display:flex; flex-direction:column; align-items:flex-start; gap:28px; } .why-photos { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); } .why-photos .photo { aspect-ratio:1/1; } .why-photos .photo:nth-child(2) { margin-top:28px; } .why-photos .photo:nth-child(4) { margin-top:-28px; } /* ---------------- About ---------------- */ .about-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center; } .about-copy { display:flex; flex-direction:column; align-items:flex-start; gap:22px; } .about-copy p { font-size:18px; line-height:1.65; color:var(--text-body); margin:0; max-width:50ch; } .about-badges { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; } /* ---------------- Reviews ---------------- */ .reviews-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:var(--space-7); flex-wrap:wrap; } .reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); } .testimonial { padding:clamp(1.5rem,1rem + 1.5vw,2rem); display:flex; flex-direction:column; gap:16px; } .testimonial .stars { display:flex; gap:3px; color:#FFC53D; } .testimonial .stars svg { width:18px; height:18px; } .testimonial blockquote { margin:0; font-size:16px; line-height:1.6; color:var(--text-body); } .testimonial .who { display:flex; flex-direction:column; gap:2px; margin-top:auto; } .testimonial .who .name { font-weight:700; color:var(--text-strong); font-size:15px; } .testimonial .who .loc { font-size:13.5px; color:var(--text-muted); } /* ---------------- Estimate form ---------------- */ .estimate-grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:start; } .estimate-aside { display:flex; flex-direction:column; gap:24px; position:sticky; top:96px; } .checklist { list-style:none; margin:0; padding:0; display:grid; gap:9px; } .checklist li { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--text-body); line-height:1.4; } .checklist .check { color:var(--brand); margin-top:1px; flex-shrink:0; } .checklist-title { margin:0 0 14px; font-weight:700; font-size:15px; color:var(--text-strong); } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .field { display:flex; flex-direction:column; gap:7px; } .field.full { grid-column:1/-1; } .field label { font-size:13.5px; font-weight:600; color:var(--text-strong); display:flex; gap:4px; } .field label .req { color:var(--danger); } .field .hint { font-size:12.5px; color:var(--text-muted); } .input, .textarea, .select { font-family:var(--font-sans); font-size:15px; color:var(--text-strong); background:var(--color-surface); border:1.5px solid var(--border-strong); border-radius:var(--radius-sm); padding:12px 14px; width:100%; transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .textarea { resize:vertical; min-height:104px; line-height:1.55; } .input::placeholder, .textarea::placeholder { color:var(--text-subtle); } .input:focus, .textarea:focus, .select:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring-focus); } .input.invalid, .textarea.invalid { border-color:var(--danger); } .segmented { display:flex; gap:10px; } .segmented button { flex:1; padding:11px 0; border-radius:var(--radius-sm); cursor:pointer; font-family:var(--font-sans); font-weight:600; font-size:14.5px; border:1.5px solid var(--border-strong); background:var(--color-surface); color:var(--text-body); transition:all var(--dur) var(--ease-out); } .segmented button.on { border-color:var(--brand); background:var(--brand-soft); color:var(--text-brand); } .form-submit-row { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:4px; } .form-note { font-size:13.5px; color:var(--text-muted); } .form-note a { color:var(--text-link); font-weight:600; } .form-error { grid-column:1/-1; background:var(--danger-soft); color:#9a2b2b; border-radius:var(--radius-sm); padding:11px 14px; font-size:14px; display:none; } .form-error.show { display:block; } .form-success { display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:40px 12px; } .form-success .ok-icon { width:64px; height:64px; border-radius:var(--radius-pill); background:var(--success-soft); color:var(--success); display:flex; align-items:center; justify-content:center; } .form-success h3 { font-family:var(--font-display); font-size:26px; color:var(--text-strong); } .form-success p { font-size:16px; color:var(--text-body); max-width:38ch; margin:0; } /* Star rating control */ .rating { display:flex; gap:6px; } .rating button { background:none; border:none; cursor:pointer; padding:2px; color:var(--neutral-300); transition:color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .rating button svg { width:34px; height:34px; } .rating button:hover { transform:scale(1.08); } .rating button.on { color:#FFC53D; } .rating button.on svg { filter:drop-shadow(0 1px 2px rgba(200,150,30,.35)); } .rating-labels { display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-muted); margin-top:6px; max-width:230px; } /* ---------------- Service areas ---------------- */ .areas-chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:var(--space-6); } .area-chip { display:inline-flex; align-items:center; gap:7px; background:var(--color-surface); border:1px solid var(--border); border-radius:var(--radius-pill); padding:9px 16px; font-size:14.5px; font-weight:600; color:var(--text-body); } .area-chip svg { color:var(--brand); width:15px; height:15px; } /* ---------------- Footer ---------------- */ .footer { background:var(--color-ink-surface); color:rgba(255,255,255,.72); } .footer-cta { border-bottom:1px solid var(--divider-on-dark); } .footer-cta-inner { padding-block:clamp(2.5rem,1rem + 4vw,4rem); display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap; } .footer-cta-headline { font-family:var(--font-display); font-weight:500; font-size:var(--text-3xl); line-height:1.1; color:#fff; max-width:20ch; margin:0; } .footer-cta .footer-cta-btns { display:flex; gap:12px; flex-wrap:wrap; } .footer-main { padding-block:clamp(3rem,1.5rem + 4vw,4.5rem) clamp(2.5rem,1rem + 4vw,4rem); display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(1.75rem,1rem + 2.5vw,3.5rem); } .footer-brand { display:flex; flex-direction:column; gap:16px; align-items:flex-start; } .footer-brand img { height:92px; width:auto; } .footer-brand p { font-size:15px; line-height:1.6; max-width:42ch; margin:0; } .footer-trust { font-size:13px; font-weight:600; letter-spacing:.01em; color:rgba(255,255,255,.5); margin:2px 0 0; } .footer-col h3 { font-size:13px; font-weight:700; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:rgba(255,255,255,.5); margin:0 0 4px; } .footer-col { display:flex; flex-direction:column; gap:12px; } .footer-col a, .footer-col span.line { position:relative; font-size:15px; color:rgba(255,255,255,.78); text-decoration:none; width:fit-content; display:flex; align-items:center; gap:10px; } .footer-col a:hover { color:#fff; } .footer-col a[href^="tel:"] { font-weight:700; color:#fff; font-size:16px; } .footer-col a::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:1px; background:var(--blue-300); transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease-out); } .footer-col a:hover::after { transform:scaleX(1); } .footer-col .ico { color:var(--blue-300); display:inline-flex; } .footer-col .ico svg { width:18px; height:18px; } .footer-bottom { border-top:1px solid var(--divider-on-dark); } .footer-bottom-inner { padding-block:20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.5); } /* ---------------- Modal (review form) ---------------- */ .modal-overlay { position:fixed; inset:0; z-index:100; background:rgba(20,26,33,.55); backdrop-filter:blur(3px); display:none; align-items:flex-start; justify-content:center; padding:clamp(1rem,4vh,4rem) 1rem; overflow-y:auto; } .modal-overlay.open { display:flex; } .modal { background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); width:100%; max-width:560px; overflow:hidden; animation:modal-in var(--dur-slow) var(--ease-out); } @keyframes modal-in { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:none; } } .modal-head { background:var(--brand); height:6px; } .modal-body { padding:clamp(1.5rem,1rem + 2vw,2.5rem); } .modal-title-row { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:8px; } .modal h2, .modal .modal-h2 { font-family:var(--font-display); font-weight:500; font-size:28px; color:var(--text-strong); line-height:1.1; } .modal .modal-intro { font-size:15px; color:var(--text-body); margin:8px 0 24px; } .modal-close { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:6px; border-radius:var(--radius-sm); flex-shrink:0; } .modal-close:hover { background:var(--color-surface-2); color:var(--text-strong); } .modal-close svg { width:22px; height:22px; } .modal-form { display:flex; flex-direction:column; gap:20px; } /* ---------------- Mobile sticky call ---------------- */ .mobile-call { display:none; position:fixed; left:0; right:0; bottom:0; z-index:60; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); border-top:1px solid var(--border); gap:10px; } .mobile-call .btn { flex:1; } /* ---------------- Back to top ---------------- */ .to-top { position:fixed; right:20px; bottom:24px; z-index:55; width:46px; height:46px; border:none; cursor:pointer; border-radius:var(--radius-pill); background:var(--brand); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), filter var(--dur) var(--ease-out); } .to-top svg { width:20px; height:20px; } body.show-top .to-top { opacity:.9; visibility:visible; transform:none; } body.show-top .to-top:hover { opacity:1; } .to-top:hover { filter:brightness(.93); transform:translateY(-2px); } .to-top:active { transform:translateY(0) scale(.97); } @media (max-width:720px) { .to-top { bottom:84px; right:16px; } } /* ---------------- Reveal on scroll ---------------- */ /* Reveal: opacity stays 1 at ALL times (slide-only). Even a frozen/never-played animation leaves content visible — it can never get stuck hidden. */ @keyframes revealUp { from { transform:translateY(16px); } to { transform:none; } } html.js .reveal.in { animation:revealUp .55s var(--ease-out) both; } /* Staggered entrance for a grouped block (the hero copy): the container itself does not move; its direct children cascade in. Transform-only — content is never hidden even if the animation never plays. */ html.js .reveal-seq.in { animation:none; } html.js .reveal-seq.in > * { animation:revealUp .55s var(--ease-out) both; } .reveal-seq.in > :nth-child(1) { animation-delay:40ms; } .reveal-seq.in > :nth-child(2) { animation-delay:110ms; } .reveal-seq.in > :nth-child(3) { animation-delay:180ms; } .reveal-seq.in > :nth-child(4) { animation-delay:250ms; } .reveal-seq.in > :nth-child(5) { animation-delay:320ms; } @media (prefers-reduced-motion:reduce) { html.js .reveal.in, html.js .reveal-seq.in > * { animation:none; } html { scroll-behavior:auto; } } /* ---------------- Responsive ---------------- */ @media (max-width:980px) { .hero-grid, .why-grid, .about-grid, .estimate-grid { grid-template-columns:1fr; } .about-grid > .about-media { max-width:380px; } .estimate-aside { position:static; } .header-nav, .header-phone { display:none; } .nav-toggle { display:inline-flex; } .hero-media { max-width:480px; } .footer-main { grid-template-columns:1fr 1fr; } .footer-brand { grid-column:1 / -1; } } @media (max-width:720px) { .services-grid, .reviews-grid, .footer-main { grid-template-columns:1fr; } .form-grid { grid-template-columns:1fr; } .feature-list.cols-2 { grid-template-columns:1fr; } .footer-cta-inner { flex-direction:column; align-items:flex-start; } .mobile-call { display:flex; } body { padding-bottom:72px; } .why-photos .photo:nth-child(n) { margin-top:0; } } /* Mobile nav drawer */ .mobile-nav { display:none; flex-direction:column; gap:2px; padding:8px var(--container-pad) 16px; background:var(--color-surface); border-bottom:1px solid var(--border); } .mobile-nav.open { display:flex; } .mobile-nav a { padding:12px 8px; font-size:16px; font-weight:600; color:var(--text-body); text-decoration:none; border-radius:var(--radius-sm); } .mobile-nav a:hover { background:var(--color-surface-2); } .mobile-nav .mobile-nav-phone { color:var(--text-brand); display:flex; align-items:center; gap:8px; } @media (min-width:981px) { .mobile-nav { display:none !important; } } /* ============================================================ Additions — honeypot, consent, service-card links, and the paint-swatch / process / FAQ design language shared by the service landing pages and the homepage refresh. ============================================================ */ /* ---- Honeypot (off-screen, not display:none) ---- */ .hp-field { position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; } /* ---- Form consent microcopy (spans the form grid) ---- */ .form-consent { grid-column:1/-1; margin:0; font-size:12.5px; line-height:1.55; color:var(--text-muted); } /* ---- "More on…" link inside a service card ---- */ .card-link { display:inline-flex; align-items:center; gap:7px; margin-top:auto; font-weight:600; font-size:14.5px; color:var(--text-brand); text-decoration:none; } .card-link svg { width:1.05em; height:1.05em; transition:transform var(--dur) var(--ease-out); } .card-link:hover { color:var(--brand-active); } .card-link:hover svg { transform:translateX(3px); } /* ---- Paint-swatch divider motif (the memorable detail) ---- */ .swatch-divider { display:flex; gap:4px; align-items:center; margin:0; } .swatch-divider span { display:block; width:26px; height:8px; border-radius:2px; } .swatch-divider span:nth-child(1) { background:var(--blue-200); } .swatch-divider span:nth-child(2) { background:var(--blue-300); } .swatch-divider span:nth-child(3) { background:var(--blue-500); } .swatch-divider span:nth-child(4) { background:var(--blue-700); } .swatch-divider span:nth-child(5) { background:var(--blue-900); } .swatch-divider.center { justify-content:center; } .section-heading.center .swatch-divider { align-self:center; } /* ---- Breadcrumbs (landing pages) ---- */ .crumbs { display:flex; flex-wrap:wrap; gap:6px; font-size:13px; color:var(--text-muted); margin:0 0 18px; } .crumbs a { color:var(--text-muted); text-decoration:none; } .crumbs a:hover { color:var(--text-brand); } .crumbs span { color:var(--text-subtle); } /* ---- Page hero (interior/exterior landing pages) ---- */ .page-hero { background:var(--color-surface); padding-top:clamp(2rem,1rem + 4vw,3.75rem); padding-bottom:var(--section-y); border-bottom:1px solid var(--border); } .page-hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center; } .page-hero-copy { display:flex; flex-direction:column; align-items:flex-start; gap:20px; } .page-hero h1 { font-family:var(--font-display); font-weight:500; font-size:var(--text-4xl); line-height:1.05; letter-spacing:-.02em; color:var(--text-strong); } .page-hero h1 em { font-style:italic; color:var(--brand); font-weight:400; } .page-hero .lead { font-size:18px; line-height:1.6; color:var(--text-body); max-width:50ch; margin:0; } .page-hero-media .photo { aspect-ratio:4/5; } /* ---- Process timeline ---- */ .process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); } .process-step { position:relative; display:flex; flex-direction:column; gap:12px; padding-top:6px; } .process-step .step-num { width:46px; height:46px; border-radius:var(--radius-pill); flex:none; display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand); font-family:var(--font-display); font-size:21px; font-weight:600; } .process-step h3 { font-family:var(--font-display); font-size:19px; font-weight:500; color:var(--text-strong); } .process-step p { margin:0; font-size:14.5px; line-height:1.55; color:var(--text-body); } .process-step:not(:last-child) .step-num::after { content:""; position:absolute; top:23px; left:46px; right:-12px; height:2px; background:linear-gradient(90deg,var(--blue-200),transparent); border-radius:1px; } /* ---- FAQ (native
, no JS) ---- */ .faq { display:flex; flex-direction:column; gap:12px; max-width:var(--container-narrow); } .faq details { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-xs); } .faq summary { cursor:pointer; list-style:none; padding:18px 20px; gap:16px; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:16px; color:var(--text-strong); } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:""; flex:none; width:13px; height:13px; background:currentColor; color:var(--brand); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform var(--dur) var(--ease-out); } .faq details[open] summary::after { transform:rotate(135deg); } .faq summary:focus-visible { box-shadow:var(--ring-focus); border-radius:var(--radius-md); } .faq .faq-body { padding:0 20px 18px; font-size:15px; line-height:1.65; color:var(--text-body); } .faq .faq-body p { margin:0; } /* ---- Section CTA band (landing pages) ---- */ .cta-band { background:var(--color-brand-surface); border-radius:var(--radius-xl); padding:clamp(1.75rem,1rem + 3vw,3rem); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .cta-band h2 { font-family:var(--font-display); font-weight:500; font-size:var(--text-3xl); line-height:1.1; color:var(--text-strong); margin:0; max-width:22ch; } .cta-band .cta-band-actions { display:flex; gap:12px; flex-wrap:wrap; } /* ---- Inclusions / best-for grid (reuses cards) ---- */ .split-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:start; } .usecase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); } .usecase { padding:clamp(1.25rem,1rem + 1vw,1.75rem); display:flex; flex-direction:column; gap:8px; } .usecase .usecase-icon { width:44px; height:44px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand); margin-bottom:4px; } .usecase h3 { font-family:var(--font-display); font-size:19px; font-weight:500; color:var(--text-strong); } .usecase p { margin:0; font-size:14.5px; line-height:1.55; color:var(--text-body); } @media (max-width:980px) { .page-hero-grid { grid-template-columns:1fr; } .page-hero-media { max-width:440px; } .process-grid { grid-template-columns:1fr 1fr; } .process-step:not(:last-child) .step-num::after { display:none; } .split-grid { grid-template-columns:1fr; } } @media (max-width:720px) { .process-grid, .usecase-grid { grid-template-columns:1fr; } .cta-band { flex-direction:column; align-items:flex-start; } } /* ============================================================ ITERATION 1 — Visual design & brand identity polish. Atmosphere, craft-specificity, and a stronger paint motif, applied as overrides so the base system stays intact. ============================================================ */ /* Warm atmospheric tint on every hero (homepage + landing pages) */ .hero { background:linear-gradient(165deg,var(--blue-50) 0%,var(--neutral-0) 56%); } .page-hero { background:linear-gradient(165deg,var(--blue-50) 0%,var(--neutral-0) 60%); } /* Layered depth on the dark "why choose" sections (footer stays solid charcoal) */ .bg-ink { background:linear-gradient(150deg,var(--blue-900) 0%,var(--charcoal) 42%,#1a1d20 100%); } /* A warm alternate surface so stacked off-white sections don't read as dead grey */ .bg-warm { background:color-mix(in srgb, var(--blue-50) 24%, var(--neutral-25) 76%); } /* Tighter optical tracking on the Spectral display type — reads more crafted */ .section-title { letter-spacing:-.025em; } .section-title.display { letter-spacing:-.03em; } .hero h1, .page-hero h1 { letter-spacing:-.03em; } .footer-cta-headline { letter-spacing:-.02em; } /* Paint-swatch divider: stepped widths (fan/brush feel) + a hairline lead-in rule */ .swatch-divider span { width:auto; } .swatch-divider span:nth-child(1) { width:16px; } .swatch-divider span:nth-child(2) { width:21px; } .swatch-divider span:nth-child(3) { width:27px; } .swatch-divider span:nth-child(4) { width:21px; } .swatch-divider span:nth-child(5) { width:16px; } .swatch-divider::before { content:""; display:block; flex:none; width:34px; height:2px; border-radius:1px; margin-right:8px; background:linear-gradient(90deg,transparent,var(--blue-200)); } .swatch-divider.center::before { display:none; } /* Two-angle crosshatch on photo placeholders — a subtle painted-canvas texture */ .photo::before { opacity:.07; background-image: repeating-linear-gradient(45deg,#fff 0 1.5px,transparent 1.5px 22px), repeating-linear-gradient(-45deg,#fff 0 1.5px,transparent 1.5px 22px); } /* Testimonials read as "voice of the customer" with a quote-style left accent */ .testimonial { border-left:3px solid var(--blue-300); } /* ============================================================ ITERATION 2 — Motion & micro-interactions. CSS-only, transform/opacity (GPU-friendly), resilient (content never depends on JS to be visible), reduced-motion gated at the bottom of this block. ============================================================ */ /* Card grids cascade their children in instead of popping as one block. The container's own slide is disabled; its children inherit revealUp. reveal-seq (hero copy) keeps its own bespoke delays — excluded below. */ html.js .services-grid.reveal.in, html.js .process-grid.reveal.in, html.js .usecase-grid.reveal.in, html.js .reviews-grid.reveal.in, html.js .areas-chips.reveal.in { animation:none; } html.js .services-grid.reveal.in > *, html.js .process-grid.reveal.in > *, html.js .usecase-grid.reveal.in > *, html.js .reviews-grid.reveal.in > *, html.js .areas-chips.reveal.in > * { animation:revealUp .5s var(--ease-out) both; } html.js .reveal.in:not(.reveal-seq) > :nth-child(1) { animation-delay:0ms; } html.js .reveal.in:not(.reveal-seq) > :nth-child(2) { animation-delay:70ms; } html.js .reveal.in:not(.reveal-seq) > :nth-child(3) { animation-delay:140ms; } html.js .reveal.in:not(.reveal-seq) > :nth-child(4) { animation-delay:210ms; } html.js .reveal.in:not(.reveal-seq) > :nth-child(5) { animation-delay:280ms; } html.js .reveal.in:not(.reveal-seq) > :nth-child(6) { animation-delay:350ms; } html.js .services-grid.reveal.in > *, html.js .process-grid.reveal.in > *, html.js .usecase-grid.reveal.in > *, html.js .reviews-grid.reveal.in > * { will-change:transform; } /* Signature painterly micro-interaction: the swatch squares paint in L→R */ @keyframes swatchPaint { from { transform:scaleX(0); } to { transform:scaleX(1); } } .swatch-divider span { transform-origin:left center; } html.js .reveal.in .swatch-divider span { animation:swatchPaint .45s var(--ease-out) both; } html.js .reveal.in .swatch-divider span:nth-child(1) { animation-delay:120ms; } html.js .reveal.in .swatch-divider span:nth-child(2) { animation-delay:180ms; } html.js .reveal.in .swatch-divider span:nth-child(3) { animation-delay:240ms; } html.js .reveal.in .swatch-divider span:nth-child(4) { animation-delay:300ms; } html.js .reveal.in .swatch-divider span:nth-child(5) { animation-delay:360ms; } /* Consistent hover lift + tactile press across all card variants */ .testimonial, .usecase { transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .testimonial:hover, .usecase:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); } .service-card:hover, .testimonial:hover, .usecase:hover { will-change:transform; } .service-card:active, .testimonial:active, .usecase:active { transform:translateY(-1px) scale(.997); } .area-chip { transition:transform var(--dur-fast) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .area-chip:hover { transform:translateY(-2px); border-color:var(--border-brand); color:var(--text-brand); } /* FAQ: fade/slide the answer open + a hover/press affordance on the summary */ @keyframes faqReveal { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } } .faq details[open] .faq-body { animation:faqReveal .28s var(--ease-out) both; } .faq summary { transition:color var(--dur) var(--ease-out); } .faq summary:hover { color:var(--text-brand); } .faq summary:active { transform:translateY(.5px); } /* Honour reduced-motion for every animation introduced above */ @media (prefers-reduced-motion:reduce) { html.js .services-grid.reveal.in > *, html.js .process-grid.reveal.in > *, html.js .usecase-grid.reveal.in > *, html.js .reviews-grid.reveal.in > *, html.js .areas-grid.reveal.in > *, html.js .areas-chips.reveal.in > *, html.js .reveal.in .swatch-divider span, .faq details[open] .faq-body { animation:none; } .testimonial:hover, .usecase:hover, .area-chip:hover { transform:none; } } /* ============================================================ ITERATION 3 — Accessibility (WCAG 2.2 AA). ============================================================ */ /* Skip link — first focusable element, visible only on keyboard focus */ .skip-link { position:absolute; left:8px; top:-56px; z-index:200; background:var(--brand); color:#fff; padding:11px 18px; border-radius:var(--radius-sm); font-weight:600; font-size:15px; text-decoration:none; box-shadow:var(--shadow-lg); transition:top var(--dur) var(--ease-out); } .skip-link:focus { top:8px; outline:2px solid #fff; outline-offset:2px; } /* Robust keyboard focus: a real outline can't be clipped by overflow:hidden (cards, modal, photos), unlike the box-shadow ring alone. */ :focus-visible { outline:2px solid var(--brand-active); outline-offset:2px; } /* Contrast: lift muted text to >=4.5:1 on both white and the off-white bg (neutral-500 measured 4.47 on --color-bg, just under AA). */ :root { --text-muted:#5B6571; } /* Breadcrumb current item was --text-subtle (2.6:1) — promote to muted. */ .crumbs span { color:var(--text-muted); } /* ============================================================ ITERATION 4 — Performance & Core Web Vitals. ============================================================ */ /* Metric-adjusted fallback for the Spectral display serif: keeps large H1/H2 from reflowing when Spectral swaps in (display=swap). Body sans is left alone — its system fallbacks are already metric-close. */ @font-face { font-family:'Spectral Fallback'; src:local('Georgia'); size-adjust:105%; ascent-override:92%; descent-override:28%; line-gap-override:0%; } :root { --font-display:'Spectral','Spectral Fallback','Iowan Old Style',Georgia,serif; } /* ============================================================ ITERATION 5 — Conversion & content UX. ============================================================ */ /* The mobile call bar now shows the full number — keep it on one line alongside the Free Estimate button on the smallest phones. */ @media (max-width:400px) { .mobile-call .btn { font-size:13px; padding-left:10px; padding-right:10px; gap:6px; } } /* Human-follow-up reassurance under the estimate form */ .form-reassure { grid-column:1/-1; margin:2px 0 0; display:flex; gap:9px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--text-body); } .form-reassure .check { color:var(--success); flex:none; margin-top:1px; display:inline-flex; }