/* ============================================================================ Allied Insurance, quote.html page styles (v2 REDO) Page-scoped ONLY. Reuses the LOCKED v2 system in styles.css (tokens, .btn, .container, nav, footer, .legacy, .eyebrow, .rise). Every colour is a v2 token that traces to the Allied logo (gold / amber / brown on warm cream + dark brown). No green, no mint. Flat: zero box-shadows (focus rings only). Radii held to the kit set {12, 16, 24(--r-card), 32(--r-panel), pill}. ========================================================================== */ /* ========================================================================== HERO BAND (dark warm-brown panel, giant cream headline; a BAND, not 100vh) ========================================================================== */ .qhero{ position:relative; min-height:clamp(440px,62vh,660px); display:flex; align-items:flex-end; overflow:hidden; background:var(--brand-dark); color:var(--cream-on-dark); padding:calc(var(--nav-h) + 52px) 0 clamp(40px,6vh,76px); } .qhero__media{ position:absolute; inset:0; z-index:0; } .qhero__media img{ width:100%; height:100%; object-fit:cover; object-position:58% 34%; } .qhero__media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(28,23,16,.52) 0%, rgba(28,23,16,.12) 34%, rgba(28,23,16,.5) 66%, rgba(28,23,16,.95) 100%), linear-gradient(90deg, rgba(28,23,16,.84) 0%, rgba(28,23,16,.34) 48%, rgba(28,23,16,0) 82%); } .qhero__inner{ position:relative; z-index:2; width:100%; } .qhero__eyebrow{ margin-bottom:22px; } .qhero h1{ font-weight:500; letter-spacing:-.035em; line-height:.94; font-size:clamp(44px,7.4vw,108px); max-width:15ch; } .qhero h1 .beat{ display:block; } .qhero h1 .beat-2{ color:var(--cream-70); } /* split-headline hooks (app.js buildHeadline): clip the char reveal per word */ .qhero h1 .word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; } .qhero h1 .word .ch{ display:inline-block; will-change:transform; } .qhero__sub{ margin-top:28px; max-width:58ch; color:var(--cream-70); font-size:clamp(16px,1.3vw,20px); line-height:1.55; } /* ========================================================================== QUOTE SECTION (cream canvas, 2-col: dark form panel + light aside) ========================================================================== */ .quote{ background:var(--canvas); padding:clamp(56px,9vh,124px) 0; } .quote__grid{ display:grid; grid-template-columns:1.16fr .84fr; gap:clamp(30px,4.5vw,72px); align-items:start; } .quote__intro .eyebrow{ margin-bottom:18px; } .quote__intro h2{ font-weight:500; letter-spacing:-.03em; line-height:1.03; font-size:clamp(30px,3.7vw,54px); max-width:16ch; } .quote__lead{ margin-top:18px; max-width:50ch; color:var(--ink-70); font-size:clamp(16px,1.15vw,18px); } /* ---- the dark gold-on-dark form panel ----------------------------------- */ .quote-panel{ margin-top:28px; border-radius:var(--r-panel); color:var(--cream-on-dark); background:radial-gradient(125% 92% at 12% 0%, #241c11 0%, var(--brand-dark) 58%); padding:clamp(26px,3.4vw,44px); } .quote-form{ display:block; } .qfield{ margin-bottom:18px; } .qfield-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .qfield label{ display:block; font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--cream-70); margin-bottom:8px; } .qfield label .opt{ color:var(--cream-45); font-weight:400; } .quote-form input, .quote-form select, .quote-form textarea{ width:100%; font-family:inherit; font-size:16px; line-height:1.4; color:var(--cream-on-dark); background:rgba(245,239,227,.045); border:1px solid var(--cream-45); border-radius:12px; padding:13px 16px; transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease; scroll-margin-top:100px; -webkit-appearance:none; appearance:none; } .quote-form textarea{ resize:vertical; min-height:120px; } .quote-form input::placeholder, .quote-form textarea::placeholder{ color:var(--cream-45); } .quote-form select{ cursor:pointer; padding-right:44px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23e0b657' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; } .quote-form select option{ color:#1c1710; background:#fbf7ee; } .quote-form select:required:invalid{ color:var(--cream-45); } .quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{ outline:none; border-color:var(--gold-bright); background:rgba(245,239,227,.08); box-shadow:0 0 0 3px rgba(224,182,87,.20); } /* error state (terracotta: a warm functional signal, page-scoped, not a brand token) */ .quote-form [aria-invalid="true"]{ border-color:#e0795f; box-shadow:0 0 0 3px rgba(224,121,95,.18); } .qfield-msg{ display:none; } .qfield-msg.is-error{ display:block; color:#efa88f; font-size:13px; line-height:1.4; margin-top:7px; } .form-status{ margin:2px 0 16px; padding:12px 15px; border-radius:12px; background:rgba(224,121,95,.1); border:1px solid rgba(224,121,95,.32); color:#f0b7a6; font-size:14.5px; line-height:1.45; } .form-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; } .form-actions .wa-glyph{ flex:none; } .form-note{ margin-top:16px; font-size:13px; line-height:1.55; color:var(--cream-45); max-width:54ch; } .form-note a{ color:var(--gold-bright); } .form-note a:hover{ color:var(--gold); } /* ---- confirmation state (on the dark panel) ------------------------------ */ .quote-confirm{ scroll-margin-top:100px; } .quote-confirm:focus{ outline:none; } .confirm-mark{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:var(--pill); background:var(--gold); color:var(--ink); margin-bottom:16px; } .quote-confirm h3{ font-size:clamp(22px,2.4vw,28px); font-weight:500; letter-spacing:-.02em; color:var(--cream-on-dark); } .quote-confirm > p{ margin-top:10px; color:var(--cream-70); font-size:16px; line-height:1.55; max-width:48ch; } .confirm-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; } .confirm-note{ margin-top:16px; font-size:13px; line-height:1.55; color:var(--cream-45); max-width:46ch; } .quote-confirm .btn-reset{ margin-top:20px; } /* ========================================================================== ASIDE (light surface cards + one gold-on-dark store card) ========================================================================== */ .quote__aside{ display:grid; gap:18px; position:sticky; top:calc(var(--nav-h) + 20px); } .qcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:26px 24px; } .qcard h3{ font-size:19px; font-weight:500; letter-spacing:-.01em; color:var(--ink); } /* how it works: numbered steps */ .qsteps{ list-style:none; display:grid; gap:16px; margin-top:16px; } .qsteps li{ display:flex; gap:14px; align-items:flex-start; } .qsteps .n{ flex:none; width:30px; height:30px; border-radius:var(--pill); background:var(--gold); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; font-weight:500; font-size:14px; } .qsteps .t{ display:block; font-weight:500; color:var(--ink); font-size:15.5px; } .qsteps .d{ display:block; margin-top:3px; font-size:14px; color:var(--ink-70); line-height:1.5; } /* store card: the second gold-on-dark accent, link OUT to the existing store */ .qcard--store{ border-color:transparent; color:var(--cream-on-dark); background:radial-gradient(120% 105% at 100% 0%, #2a2116 0%, var(--brand-dark) 62%); } .qcard--store h3{ color:var(--cream-on-dark); } .qcard--store p{ margin-top:8px; margin-bottom:18px; color:var(--cream-70); font-size:15px; line-height:1.55; } .qcard--store .ext-arrow{ font-size:15px; line-height:1; } /* talk-to-us card */ .qcard--talk p{ margin-top:6px; color:var(--ink-70); font-size:15px; line-height:1.55; } .qcard--talk .qtalk-lines{ margin-top:14px; display:grid; gap:9px; } .qcard--talk .qtalk-lines a{ color:var(--amber); font-weight:500; transition:color .25s ease; } .qcard--talk .qtalk-lines a:hover{ color:var(--brown); } .qcard--talk .ql-wa{ display:inline-flex; align-items:center; gap:.5em; color:var(--amber); font-weight:500; } .qcard--talk .ql-wa svg{ width:18px; height:18px; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:900px){ .quote__grid{ grid-template-columns:1fr; gap:40px; } .quote__aside{ position:static; } } @media (max-width:560px){ .qhero{ min-height:clamp(400px,58vh,560px); } .qfield-row{ grid-template-columns:1fr; gap:0; } .qfield-row .qfield{ margin-bottom:18px; } .form-actions .btn, .confirm-actions .btn{ width:100%; } .quote-panel{ padding:22px 18px 26px; } .qcard{ padding:22px 20px; } } /* ========================================================================== REDUCED MOTION (system already covers .rise / headline; nothing extra here) ========================================================================== */ @media (prefers-reduced-motion:reduce){ .quote-form input, .quote-form select, .quote-form textarea{ transition:none !important; } } /* ========================================================================== RICHNESS PASS (page-scoped) -- reuses the LOCKED shared runtimes: 097 Text Glow (eyebrow), 075 Feature Switcher (cover quick-pick) carrying the 204 Lottie cover-icons. Every colour is a v2 token that traces to the Allied logo (gold / amber / brown / ink / cream). Flat, no shadows, radii from the kit set, reduced-motion safe. No new :root tokens (gate-taste safe). ========================================================================== */ /* ---- 097 Text Glow: match the homepage hero-eyebrow treatment ------------ */ .qhero__eyebrow[data-component="097"]{ text-shadow:0 0 20px rgba(224,182,87,.35); } /* ---- 075 Feature Switcher: cover-line quick-pick, prefills the