/* =========================================================== Luminosity Painting Company — Painters (San Bernardino) Premium, static, mobile-first. No libraries. Self-contained. Brand: charcoal + warm white, rose/crimson CTA (from logo red), logo rainbow used as a restrained "spectrum" signature accent. =========================================================== */ :root { --ink: #14161c; --ink-2: #1f232e; --ink-3: #0c0e13; --paper: #ffffff; --tint: #f7f4ee; /* warm section tint */ --tint-2: #f0eae0; --brand: #e11d48; /* rose/crimson CTA (from logo red #f01830) */ --brand-dark: #be123c; --brand-soft: #ffe4ea; --blue: #2f6fd0; /* secondary accent (logo blue, darkened for contrast) */ --slate: #515a6e; --slate-2: #3a4150; --line: #e8e2d7; --line-2: #eceae4; --star: #f5a623; --white: #ffffff; --spectrum: linear-gradient(90deg,#ffc000 0%,#f01830 27%,#d830d8 52%,#48a8ff 76%,#60c000 100%); --radius: 14px; --radius-lg: 22px; --radius-xl: 28px; --shadow-sm: 0 2px 10px rgba(20,22,28,.07); --shadow: 0 14px 38px rgba(20,22,28,.13); --shadow-lg: 0 30px 70px rgba(12,14,19,.34); --maxw: 1180px; --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; } body { font-family: var(--font); color: var(--slate-2); background: var(--paper); line-height: 1.62; font-size: 17px; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { color: var(--ink); font-weight: 800; letter-spacing: -.022em; line-height: 1.1; } h1 { font-size: clamp(2rem, 4.6vw, 3.15rem); } h2 { font-size: clamp(1.75rem, 3.8vw, 2.7rem); } h3 { font-size: 1.18rem; letter-spacing: -.01em; } p { color: var(--slate); } section { padding: clamp(56px, 7.5vw, 96px) 0; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .center { text-align: center; } .narrow { max-width: 780px; margin-inline: auto; } .eyebrow { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-dark); margin-bottom: 12px; } .lead { font-size: 1.14rem; max-width: 680px; color: var(--slate); } .center.lead, .center .lead { margin-inline: auto; } /* draft/verification flags — light pill, readable on light & dark */ .label-flag { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .04em; background: #fdecc8; color: #573f00 !important; padding: 1px 7px; border-radius: 999px; vertical-align: middle; text-transform: uppercase; white-space: nowrap; } /* spectrum highlighter underline for hero keyword */ .hl { color: #fff; background: var(--spectrum); background-repeat: no-repeat; background-position: 0 92%; background-size: 100% .16em; padding-bottom: .02em; } /* ---- Scroll reveal (no-JS safe: only hides when ) ---- */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 800; font-size: 1.01rem; padding: 15px 28px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; text-align: center; line-height: 1.1; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; white-space: nowrap; } .btn svg { width: 19px; height: 19px; } .btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; box-shadow: 0 10px 26px rgba(190,18,60,.34); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(190,18,60,.44); } .btn-call { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn-call:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .btn-ghost { background: transparent; color: var(--ink); border-color: #cfd4dd; } .btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .btn-lg { padding: 17px 34px; font-size: 1.08rem; } .btn-block { width: 100%; } /* ===================== HEADER ===================== */ .spectrum-bar { height: 4px; background: var(--spectrum); } .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line-2); } .header-inner { display: flex; align-items: center; gap: 20px; height: 68px; } .brand { display: flex; align-items: center; } .brand-logo-img { height: 36px; width: auto; } .nav-anchors { display: flex; gap: 24px; margin-left: 12px; } .nav-anchors a { font-weight: 600; font-size: .96rem; color: var(--slate-2); transition: color .15s; } .nav-anchors a:hover { color: var(--brand-dark); } .header-cta { margin-left: auto; display: flex; align-items: center; gap: 16px; } .header-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); font-size: 1.02rem; } .header-phone svg { color: var(--brand); } .header-phone small { display: block; font-weight: 600; font-size: .68rem; color: var(--slate); letter-spacing: .01em; } .header-btn { padding: 11px 20px; font-size: .95rem; } /* ===================== HERO ===================== */ .hero { position: relative; color: #fff; isolation: isolate; padding: 0; background: #14161c url("assets/img/hero-paint.webp") center / cover no-repeat; } .hero-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(101deg, rgba(11,13,18,.85) 0%, rgba(11,13,18,.58) 40%, rgba(11,13,18,.24) 66%, rgba(11,13,18,.16) 100%), linear-gradient(0deg, rgba(11,13,18,.52) 0%, rgba(11,13,18,0) 52%); } .hero h1, .hero-sub, .hero-chips li { text-shadow: 0 2px 14px rgba(0,0,0,.45); } .hero-grid { display: grid; grid-template-columns: 1.1fr minmax(358px, 428px); gap: 34px 48px; align-items: center; padding-top: clamp(28px, 3.6vw, 50px); padding-bottom: clamp(30px, 3.8vw, 54px); } .hero-copy { max-width: 600px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); padding: 7px 14px; border-radius: 999px; font-size: .84rem; font-weight: 700; color: #fff; margin-bottom: 18px; } .hero-badge .stars { display: inline-flex; color: var(--star); } .hero-badge .stars svg { width: 15px; height: 15px; } .hero h1 { color: #fff; margin-bottom: 16px; } .hero-sub { color: rgba(255,255,255,.9); font-size: 1.14rem; margin-bottom: 22px; } .hero-bullets { list-style: none; display: grid; gap: 10px; margin-bottom: 26px; } .hero-bullets li { display: flex; align-items: flex-start; gap: 10px; color: #fff; font-weight: 600; } .hero-bullets svg { color: #7ee0a6; flex: none; margin-top: 3px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } .hero-trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .9rem; color: rgba(255,255,255,.82); } .hero-trust-row b { color: #fff; } /* ---- Hero benefit chips + license seal ---- */ .hero-chips { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 20px; margin-bottom: 20px; } .hero-chips li { display: flex; align-items: flex-start; gap: 9px; color: #fff; font-weight: 600; font-size: .97rem; } .hero-chips svg { color: #7ee0a6; flex: none; margin-top: 3px; } .hero-extra .hero-actions { margin-bottom: 18px; } .hero-seal { display: inline-flex; align-items: center; gap: 13px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 11px 16px; } .seal-badge { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); display: flex; align-items: center; justify-content: center; color: #fff; flex: none; box-shadow: 0 6px 16px rgba(190,18,60,.4); } .seal-badge svg { width: 24px; height: 24px; } .hero-seal p { color: rgba(255,255,255,.82); font-size: .8rem; margin: 0; line-height: 1.42; } .hero-seal b { color: #fff; } .hero-chips { margin-bottom: 20px; } /* ---- Hero form card ---- */ .form-card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 26px 26px 30px; color: var(--slate-2); position: relative; overflow: hidden; } .form-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--spectrum); } .offer-flag { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 800; font-size: .82rem; padding: 7px 13px; border-radius: 999px; margin-bottom: 14px; } .offer-flag svg { width: 17px; height: 17px; } .form-head h2 { font-size: 1.5rem; margin-bottom: 4px; } .form-head p { font-size: .96rem; margin-bottom: 6px; } .form-trust { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: .8rem; font-weight: 700; color: var(--slate-2); margin: 8px 0 16px; } .form-trust .stars { color: var(--star); display: inline-flex; } .form-trust .stars svg { width: 14px; height: 14px; } .steps-indicator { display: flex; gap: 7px; margin-bottom: 18px; } .steps-indicator .dot { height: 6px; flex: 1; border-radius: 999px; background: var(--line); transition: background .25s; } .steps-indicator .dot.active { background: var(--brand); } .hp { position: absolute; left: -9999px; } /* No-JS fallback: without JS every step shows as one plain form so it still submits. JS (html.js) turns it back into the multi-step experience. */ .fstep { display: block; } .js .fstep { display: none; } .js .fstep.active { display: block; animation: fade .3s ease; } html:not(.js) [data-next], html:not(.js) [data-prev], html:not(.js) .steps-indicator { display: none; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .field { margin-bottom: 14px; } .field > label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 7px; font-size: .95rem; } .muted-note { font-weight: 600; color: var(--slate); font-size: .82rem; } .field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; } .field textarea { min-height: 84px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .field.two label { font-size: .88rem; } .choice-grid { display: grid; gap: 9px; } .choice { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 600; color: var(--ink); transition: border-color .15s, background .15s, box-shadow .15s; } .choice:hover { border-color: #c9b4bb; } .choice .ico { font-size: 1.15rem; line-height: 1; } .choice input { position: absolute; opacity: 0; width: 0; height: 0; } .choice.selected { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand-soft); } .form-nav { display: flex; gap: 10px; margin-top: 6px; } .form-nav .btn { flex: 1; padding: 14px 18px; } .form-nav .btn-ghost { flex: 0 0 auto; } .form-reassure { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--slate); margin-top: 12px; } .form-reassure svg { color: #3aa76d; width: 16px; height: 16px; flex: none; } /* ===================== TRUST BAR ===================== */ .trustbar { background: var(--ink); padding: 20px 0; } .trustbar-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 24px; } .tb-item { display: flex; align-items: center; gap: 11px; color: #fff; font-size: .92rem; flex: 1 1 auto; } .tb-item svg { color: var(--star); width: 24px; height: 24px; flex: none; } .tb-item b { color: #fff; } .tb-item span { line-height: 1.3; color: rgba(255,255,255,.82); } .tb-item .label-flag { margin-left: 2px; } /* ===================== REVIEW / RATINGS STRIP ===================== */ .review-strip { background: var(--tint); padding: 40px 0; border-bottom: 1px solid var(--line-2); } .review-strip-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; } .rs-lead { font-weight: 700; color: var(--ink); font-size: clamp(1.1rem, 2.2vw, 1.35rem); } .rs-lead b { color: var(--brand-dark); } .rs-cards { width: 100%; display: flex; flex-wrap: wrap; gap: 16px; } .rs-card { flex: 1 1 200px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px; box-shadow: var(--shadow-sm); } .rs-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--ink); font-size: 1.08rem; } .rs-name svg { width: 19px; height: 19px; color: var(--brand); } .rs-card .stars { color: var(--star); display: inline-flex; } .rs-card .stars svg { width: 18px; height: 18px; } .rs-meta { font-size: .86rem; color: var(--slate); font-weight: 600; } /* ===================== SERVICES ===================== */ .services { background: var(--paper); } .services .center { margin-bottom: 40px; } .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .svc-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; } .svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .svc-media { aspect-ratio: 4 / 3; overflow: hidden; } .svc-media img { width: 100%; height: 100%; object-fit: cover; } .svc-body { padding: 22px; display: flex; flex-direction: column; flex: 1; } .svc-body h3 { margin-bottom: 8px; } .svc-body p { font-size: .96rem; margin-bottom: 14px; } .ticks { list-style: none; display: grid; gap: 7px; margin-bottom: 18px; } .ticks li { display: flex; align-items: flex-start; gap: 8px; font-size: .92rem; color: var(--slate-2); font-weight: 600; } .ticks svg { color: var(--brand); width: 17px; height: 17px; flex: none; margin-top: 3px; } .svc-link { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--brand-dark); font-size: .95rem; } .svc-link svg { width: 17px; height: 17px; transition: transform .15s; } .svc-link:hover svg { transform: translateX(3px); } /* ===================== WORK / GALLERY ===================== */ .work { background: var(--tint); } .work .center { margin-bottom: 36px; } .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 34px; } .g-item { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); aspect-ratio: 4 / 3; } .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .g-item:hover img { transform: scale(1.05); } .g-item figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(12,14,19,.72); color: #fff; font-size: .78rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(2px); } /* ---- Before / After showcase ---- */ .beforeafter { background: var(--paper); } .beforeafter .center { margin-bottom: 34px; } .ba-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; max-width: 960px; margin: 0 auto 26px; } .ba-shot { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .ba-shot img { width: 100%; display: block; aspect-ratio: 2 / 1; object-fit: cover; } .ba-tag { position: absolute; top: 12px; left: 12px; color: #fff; font-weight: 800; font-size: .74rem; letter-spacing: .05em; padding: 6px 13px; border-radius: 999px; text-transform: uppercase; } .ba-tag.before { background: rgba(12,14,19,.82); } .ba-tag.after { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); box-shadow: 0 6px 16px rgba(190,18,60,.4); } .ba-arrow { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 8px 18px rgba(190,18,60,.35); } .ba-arrow svg { width: 22px; height: 22px; } .ba-points { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; max-width: 860px; margin: 0 auto 28px; } .ba-points li { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--slate-2); font-size: .97rem; } .ba-points svg { color: var(--brand); width: 18px; height: 18px; flex: none; } @media (max-width: 760px) { .ba-compare { grid-template-columns: 1fr; gap: 14px; max-width: 460px; } .ba-arrow { transform: rotate(90deg); margin: -2px auto; } } /* ===================== PAINT-BRAND STRIP ===================== */ .brands { background: var(--tint); padding: clamp(38px,5vw,60px) 0; border-top: 1px solid var(--line-2); } .brands-inner { text-align: center; } .brands-inner p { font-weight: 700; color: var(--ink); font-size: 1rem; margin-bottom: 22px; } .brands-inner p span { color: var(--slate); font-weight: 600; } .brand-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px 44px; } .brand-logos img { height: 34px; width: auto; opacity: .78; filter: grayscale(1); transition: opacity .2s, filter .2s; } .brand-logos img:hover { opacity: 1; filter: none; } /* ===================== GUARANTEE BAND ===================== */ .guarantee { background: linear-gradient(120deg, var(--ink), var(--ink-2)); color: #fff; } .guarantee-inner { display: flex; align-items: center; gap: 30px; } .guarantee-seal { flex: none; width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff 0%, #fdf3f6 60%, #ffe4ea 100%); border: 4px solid var(--brand); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 16px 40px rgba(190,18,60,.4); } .guarantee-seal b { color: var(--brand-dark); font-size: 1.9rem; line-height: 1; } .guarantee-seal span { color: var(--ink); font-weight: 800; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; } .guarantee-body h2 { color: #fff; margin-bottom: 8px; } .guarantee-body p { color: rgba(255,255,255,.86); max-width: 640px; } .guarantee-body .label-flag { margin-top: 10px; } @media (max-width: 700px) { .guarantee-inner { flex-direction: column; text-align: center; gap: 20px; } } /* ===================== COMPARISON ===================== */ .compare { background: var(--tint); } .compare .center { margin-bottom: 36px; } .cmp-table { max-width: 860px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .cmp-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; } .cmp-row + .cmp-row { border-top: 1px solid var(--line-2); } .cmp-cell { padding: 14px 16px; font-size: .96rem; display: flex; align-items: center; line-height: 1.35; } .cmp-feature { font-weight: 700; color: var(--ink); } .cmp-us, .cmp-them, .cmp-c { justify-content: center; text-align: center; } .cmp-us { background: var(--brand-soft); font-weight: 800; color: var(--brand-dark); gap: 6px; } .cmp-us svg { width: 18px; height: 18px; color: var(--brand); flex: none; } .cmp-them { color: var(--slate); } .cmp-c { font-weight: 800; } .cmp-row.head .cmp-cell { background: var(--ink); color: #fff; font-weight: 800; } .cmp-row.head .cmp-us { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; } @media (max-width: 560px) { .cmp-cell { padding: 12px 9px; font-size: .84rem; } .cmp-row { grid-template-columns: 1.5fr .85fr .85fr; } } /* ===================== WHY US ===================== */ .why { background: var(--paper); } .why .center { margin-bottom: 42px; } .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .why-card { background: var(--tint); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 26px 24px; } .why-card svg { width: 30px; height: 30px; color: var(--brand); margin-bottom: 14px; } .why-card h3 { margin-bottom: 8px; } .why-card p { font-size: .95rem; } /* ===================== REVIEWS ===================== */ .reviews { background: var(--ink); color: #fff; } .reviews h2 { color: #fff; } .reviews .eyebrow { color: #ffb3c2; } .reviews .lead { color: rgba(255,255,255,.86); } .reviews .center { margin-bottom: 40px; } .stars { display: inline-flex; color: var(--star); } .stars.big svg { width: 24px; height: 24px; } .rev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .rev-card { background: var(--ink-2); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius-lg); padding: 24px; } .rev-card .stars svg { width: 18px; height: 18px; } .rev-card blockquote { color: #fff; font-size: 1.05rem; line-height: 1.55; margin: 12px 0 14px; font-weight: 500; } .rev-card figcaption { color: rgba(255,255,255,.72); font-weight: 700; font-size: .92rem; } .rev-src { display: inline-block; font-weight: 600; font-size: .74rem; color: rgba(255,255,255,.66); margin-left: 4px; } .rev-proj { display: block; margin-top: 5px; font-size: .76rem; font-weight: 700; color: #ffb3c2; letter-spacing: .02em; } .rev-proj svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; } /* ===================== HOW IT WORKS ===================== */ .how { background: var(--tint); } .how .center { margin-bottom: 42px; } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .step-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 30px 26px; position: relative; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; font-weight: 800; font-size: 1.3rem; margin-bottom: 16px; } .step-card h3 { margin-bottom: 8px; } .step-card p { font-size: .95rem; } /* ===================== MID CTA ===================== */ .midcta { background: var(--paper); } .midcta-inner { background: linear-gradient(120deg, var(--ink), var(--ink-2)); border-radius: var(--radius-xl); color: #fff; padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; position: relative; overflow: hidden; } .midcta-inner::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--spectrum); } .midcta-inner h2 { color: #fff; margin-bottom: 6px; font-size: clamp(1.5rem, 3vw, 2rem); } .midcta-inner p { color: rgba(255,255,255,.86); max-width: 520px; } .midcta-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* ===================== FAQ ===================== */ .faq { background: var(--paper); } .faq .center { margin-bottom: 34px; } .faq-list { display: grid; gap: 12px; } .faq-item { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; } .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 18px 20px; font-family: inherit; font-weight: 800; font-size: 1.04rem; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 14px; } .faq-ico { position: relative; width: 16px; height: 16px; flex: none; } .faq-ico::before, .faq-ico::after { content: ""; position: absolute; background: var(--brand); border-radius: 2px; transition: transform .25s; } .faq-ico::before { top: 7px; left: 0; width: 16px; height: 2.5px; } .faq-ico::after { left: 7px; top: 0; width: 2.5px; height: 16px; } .faq-q[aria-expanded="true"] .faq-ico::after { transform: rotate(90deg); opacity: 0; } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .faq-a p { padding: 0 20px 18px; font-size: .98rem; color: var(--slate); } /* ===================== FINAL CTA (photo band) ===================== */ .finalcta { position: relative; color: #fff; isolation: isolate; text-align: center; background: #14161c url("assets/img/cta-band.webp") center / cover no-repeat; } .finalcta-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12,14,19,.9), rgba(12,14,19,.72)); } .finalcta-inner { max-width: 720px; margin-inline: auto; } .finalcta h2 { color: #fff; margin-bottom: 12px; } .finalcta p { color: rgba(255,255,255,.9); margin-bottom: 24px; font-size: 1.08rem; } .finalcta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ===================== FOOTER ===================== */ .site-footer { background: var(--ink-3); color: rgba(255,255,255,.72); padding: 54px 0 30px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 34px; } .foot-brand img { height: 40px; width: auto; margin-bottom: 14px; } .foot-brand p { color: rgba(255,255,255,.72); font-size: .92rem; max-width: 360px; } .foot-col h3 { color: #fff; font-size: .95rem; margin-bottom: 12px; letter-spacing: .02em; } .foot-col p { color: rgba(255,255,255,.8); font-size: .92rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .foot-col a { color: rgba(255,255,255,.78); transition: color .15s; } .foot-col a:hover { color: #fff; } .foot-col svg { width: 16px; height: 16px; color: var(--brand); flex: none; } .foot-legal { text-decoration: underline; text-underline-offset: 3px; } .foot-bottom { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); } .foot-bottom p { font-size: .82rem; color: rgba(255,255,255,.62); margin-bottom: 6px; } .foot-disc { font-size: .78rem; } /* ===================== STICKY MOBILE CALL ===================== */ .sticky-cta { position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 60; display: none; align-items: center; justify-content: center; gap: 9px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; font-weight: 800; padding: 15px; border-radius: 999px; box-shadow: 0 12px 30px rgba(190,18,60,.44); } .sticky-cta svg { width: 20px; height: 20px; } /* ===================== RESPONSIVE ===================== */ @media (max-width: 960px) { .nav-anchors { display: none; } .hero-grid { grid-template-columns: 1fr; gap: 24px; } .hero-copy { max-width: none; } .hero-chips { grid-template-columns: 1fr 1fr; } .svc-grid, .why-grid, .steps-grid { grid-template-columns: 1fr 1fr; } .gallery { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } } @media (max-width: 700px) { .hero { background-image: url("assets/img/hero-paint-sm.webp"); } .hero-chips { grid-template-columns: 1fr 1fr; gap: 8px 14px; } .header-phone { color: #fff; background: linear-gradient(135deg, #1f8a54, #157043); padding: 9px 15px; border-radius: 999px; box-shadow: 0 5px 14px rgba(20,110,64,.34); } .header-phone svg { color: #fff; } .header-phone small { display: none; } .header-btn { display: none; } .svc-grid, .why-grid, .steps-grid, .rev-grid { grid-template-columns: 1fr; } .gallery { grid-template-columns: 1fr 1fr; } .trustbar-inner { gap: 14px; } .tb-item { flex: 1 1 42%; font-size: .86rem; } .midcta-inner { padding: 30px 24px; } .footer-grid { grid-template-columns: 1fr; } .sticky-cta { display: flex; } .hero-actions { display: none; } body { padding-bottom: 76px; } .field.two { grid-template-columns: 1fr; } } @media (max-width: 380px) { .gallery { gap: 10px; } }