/* Site Sprint template — token-driven so a rebrand is a variable change. Four theme presets selected by (set from data.js). */ :root { --ink:#1A2330; --dim:#5C6B7A; --bg:#FFFFFF; --soft:#F5F7FA; --line:#E4E9EF; --accent:#1E62D0; --accent-ink:#FFFFFF; --radius:12px; --font:-apple-system,"Segoe UI",Roboto,sans-serif; --display:var(--font); } [data-theme="trade"] { --accent:#D96B12; --ink:#20242B; --soft:#F7F4EF; } [data-theme="warm"] { --accent:#7A8450; --ink:#2E2A24; --bg:#FDFBF7; --soft:#F4EFE6; --line:#E7DFD2; } [data-theme="sharp"] { --ink:#EAF0F6; --dim:#93A1B0; --bg:#101720; --soft:#18212C; --line:#243040; --accent:#E8B54A; --accent-ink:#141414; } [data-theme="studio"] { --ink:#F2F6FF; --dim:#8FA0BC; --bg:#070B14; --soft:#0F1727; --line:#1D2A47; --accent:#F5B84D; --accent-ink:#160F02; --dw:800; } * { box-sizing:border-box; margin:0; } body { font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.6; } img { max-width:100%; display:block; border-radius:var(--radius); } .wrap { max-width:1020px; margin:0 auto; padding:0 20px; } header.top { position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--line); z-index:10; } .topRow { display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:12px; } .logo { font-weight:900; font-size:19px; color:var(--ink); text-decoration:none; } nav[data-nav] { display:flex; gap:18px; align-items:center; } nav[data-nav] a { color:var(--ink); text-decoration:none; font-weight:600; font-size:15px; } nav[data-nav] a.navCta { background:var(--accent); color:var(--accent-ink); padding:9px 18px; border-radius:9px; font-weight:800; } .hero { padding:64px 0 44px; } .hero h1 { font-family:var(--display); font-size:clamp(30px,5.4vw,54px); line-height:1.08; font-weight:var(--dw,900); max-width:720px; letter-spacing:-.5px; } .hero .tag { margin-top:14px; font-size:18px; color:var(--dim); max-width:600px; } .ctaRow { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; } .btn { display:inline-block; padding:13px 26px; border-radius:10px; font-weight:800; text-decoration:none; font-size:16px; } .btn.primary { background:var(--accent); color:var(--accent-ink); } .btn.ghost { border:1.5px solid var(--accent); color:var(--accent); } .proofStrip { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .stat { text-align:center; } .stat b { display:block; font-size:24px; font-weight:900; color:var(--accent); } .stat span { color:var(--dim); font-size:13.5px; } section { padding:46px 0; } section + section { border-top:1px solid var(--line); } h2 { font-family:var(--display); font-size:26px; font-weight:900; margin-bottom:10px; } .lead { color:var(--dim); max-width:640px; margin-bottom:24px; } .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; } .card { background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:22px; } .card h3 { font-size:17px; margin-bottom:8px; } .card p { color:var(--dim); font-size:14.5px; } .card .price { margin-top:12px; font-weight:800; color:var(--accent); } .chips { display:flex; flex-wrap:wrap; gap:8px; } .chip { border:1px solid var(--line); background:var(--soft); border-radius:999px; padding:6px 14px; font-size:14px; font-weight:600; } dl[data-faq] dt { font-weight:800; margin-top:18px; } dl[data-faq] dd { margin:6px 0 0; color:var(--dim); } form[data-form] { max-width:520px; } form[data-form] label { display:block; font-weight:700; font-size:14px; margin:14px 0 6px; } form[data-form] input, form[data-form] textarea, form[data-form] select { width:100%; border:1.5px solid var(--line); border-radius:9px; padding:11px 12px; font:inherit; font-size:15px; background:var(--bg); color:var(--ink); } form[data-form] input:focus, form[data-form] textarea:focus { outline:none; border-color:var(--accent); } form[data-form] button { margin-top:18px; background:var(--accent); color:var(--accent-ink); border:0; font-weight:800; font-size:16px; padding:13px 30px; border-radius:10px; cursor:pointer; } .formMsg { margin-top:10px; font-size:14px; font-weight:700; color:var(--accent); } .gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; } footer.bottom { border-top:1px solid var(--line); padding:30px 0 44px; color:var(--dim); font-size:14px; } footer.bottom a { color:var(--dim); } footer.bottom [data-footer] { display:flex; flex-direction:column; gap:6px; } @media (max-width:640px) { nav[data-nav] a:not(.navCta) { display:none; } /* phone: logo + CTA only */ .hero { padding:44px 0 32px; } } @media print { header.top, .ctaRow, form[data-form] { display:none; } } /* ---------- v2 industry blocks ---------- */ .emerg { display:flex; justify-content:center; gap:14px; align-items:center; background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:14px; padding:9px 14px; } .emerg a { color:inherit; text-decoration:underline; font-weight:900; } .badgeRow { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .badge { border:1px solid var(--line); background:var(--soft); border-radius:7px; padding:4px 10px; font-size:12px; font-weight:700; color:var(--dim); } .ctaTrust { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .licLine { margin-top:8px; font-size:12.5px; color:var(--dim); } .offersGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; } .offer { border:2px dashed var(--accent); border-radius:12px; padding:18px; background:var(--soft); display:flex; flex-direction:column; gap:6px; } .offer b { font-size:18px; } .offer span { color:var(--dim); font-size:13px; } .offer a { margin-top:8px; align-self:flex-start; background:var(--accent); color:var(--accent-ink); font-weight:800; border-radius:8px; padding:8px 16px; text-decoration:none; font-size:14px; } .finBand { border-radius:var(--radius); background:var(--soft); border:1px solid var(--line); padding:24px; } .finInner { display:flex; flex-wrap:wrap; gap:14px; align-items:center; } .finInner b { font-size:19px; } .finInner span { color:var(--dim); } .finInner a { margin-left:auto; } .clubCard { border:1.5px solid var(--accent); border-radius:var(--radius); padding:24px; max-width:460px; background:var(--soft); } .clubHead { display:flex; justify-content:space-between; align-items:baseline; } .clubHead b { font-size:19px; } .clubPrice { font-weight:900; color:var(--accent); font-size:22px; } .clubCard ul { margin:14px 0 18px 18px; } .clubCard li { margin-bottom:6px; } .teamCard .teamTitle { color:var(--accent); font-weight:700; font-size:13px; margin:2px 0 8px; } .teamCard .teamBook { display:inline-block; margin-top:10px; border:1.5px solid var(--accent); color:var(--accent); border-radius:8px; padding:7px 14px; text-decoration:none; font-weight:800; font-size:13.5px; } .quoteCard { background:var(--soft); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:20px 22px; } .quoteCard p { font-size:16px; font-weight:600; } .quoteCard .who { margin-top:8px; color:var(--dim); font-size:13.5px; font-weight:700; } .quotes { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; } .shot { margin:0; } .shot img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; border:1px solid var(--line); } .shot figcaption { font-size:13px; color:var(--dim); margin-top:6px; font-weight:600; } .heroImgBand.hasImg { background-size:cover; background-position:center; border-radius:var(--radius); min-height:300px; position:relative; } .pricingNote { color:var(--dim); font-size:14px; margin-top:14px; max-width:640px; } /* live embed frame (studio) */ .buildBar { display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line); border-bottom:0; border-radius:14px 14px 0 0; background:var(--soft); } .buildBar .dot { width:10px; height:10px; border-radius:50%; background:var(--line); } .buildBar .addr { flex:1; text-align:center; font-size:12.5px; color:var(--dim); font-weight:600; font-family:ui-monospace,Consolas,monospace; } .vpClip { position:relative; height:520px; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:0 0 14px 14px; } .vpClip iframe { border:0; display:block; background:#fff; transform-origin:0 0; } /* process steps (was missing — found by dogfood v2) */ .steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; } .step { background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:18px; color:var(--dim); font-size:14px; } .step b { display:block; margin:6px 0 4px; font-size:15.5px; color:var(--ink); } .step .n { color:var(--accent); font-weight:900; font-size:11.5px; letter-spacing:1.6px; } /* instant-quote calculator */ .calc { background:var(--soft); border:1.5px solid var(--accent); border-radius:16px; padding:22px; max-width:560px; } .calcRow { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .calcRow label { font-weight:700; font-size:13.5px; } .calcRow select { border:1.5px solid var(--line); border-radius:8px; padding:8px 10px; font:inherit; background:var(--bg); color:var(--ink); } .calcFreq { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; } .freqBtn { border:1.5px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px; padding:7px 14px; font-weight:700; font-size:13.5px; cursor:pointer; } .freqBtn em { font-style:normal; color:var(--accent); font-weight:800; } .freqBtn.on { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); } .freqBtn.on em { color:inherit; } .calcAdd { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:14px; } .addChk { font-size:13.5px; font-weight:600; display:flex; gap:6px; align-items:center; } .addChk input { width:auto; } .addChk span { color:var(--dim); } .calcOut { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; flex-wrap:wrap; } .calcPrice { font-size:34px; font-weight:900; color:var(--accent); } .calcPer { color:var(--dim); font-size:13.5px; } .calcNote { margin-top:10px; font-size:12.5px; color:var(--dim); }