/* ============================================================================ master.css — ALL TECH SCREENING · PUBLIC MARKETING SITE · SINGLE SOURCE OF TRUTH ---------------------------------------------------------------------------- Token-first design system for the PUBLIC website (alltechscreening.com). Structured identically to the admin portal's master.css so it's just as easy to modify — but it is a SEPARATE, INDEPENDENT file. The public marketing brand can diverge from the internal admin tool without touching the portal. HOW TO MODIFY (read me first) --------------------------------------------------------------------------- • CHANGE THE BRAND COLOR IN ONE LINE: edit --brand-500 in SECTION 1 (:root). Every button, link, active nav item, focus ring, hero gradient, tag and accent derives from it via color-mix(). Two ready alternates sit beside it. • Spacing, radius, shadow, type: all live as tokens in SECTION 1. Nothing below SECTION 1 uses a raw brand hex — every accent references a var(). • Sections are numbered and labelled: 1 DESIGN TOKENS (:root) 8 SERVICE CARDS / GRID 2 RESET / BASE 9 SERVICE PAGE / GALLERY 3 TYPOGRAPHY 10 FORMS 4 LAYOUT / CONTAINERS 11 RESCREEN WIZARD (self-quote) 5 BUTTONS 12 FOOTER 6 HEADER / NAV 13 RESPONSIVE / MEDIA 7 HERO / SECTIONS / TRUST ============================================================================ */ /* ============================================================================ 1 · DESIGN TOKENS (the whole public look is driven from here) ============================================================================ */ :root{ /* --- 1a · BRAND -------------------------------------------------------- >>> ONE-LINE BRAND SWAP: change --brand-500 only. <<< Default = professional blue (shared starting point with the portal, but independent — re-skin here freely without affecting the admin tool). */ --brand-500:#2563eb; /* DEFAULT — professional blue */ /* --brand-500:#0d9488; */ /* ALT A — coastal teal (Florida marine) */ /* --brand-500:#c2410c; */ /* ALT B — warm terracotta (local/friendly) */ /* Derived brand shades (auto-computed; no need to edit) */ --brand-700:color-mix(in srgb,var(--brand-500),#000 26%); --brand-600:color-mix(in srgb,var(--brand-500),#000 13%); --brand-400:color-mix(in srgb,var(--brand-500),#fff 16%); --brand-100:color-mix(in srgb,var(--brand-500),#fff 82%); --brand-050:color-mix(in srgb,var(--brand-500),#fff 92%); --brand-contrast:#ffffff; /* text/icon color on brand fills */ /* --- 1b · NEUTRALS / INK ---------------------------------------------- */ --ink-900:#111827; --ink-700:#1f2937; --ink-500:#6b7280; --ink-400:#9ca3af; --line-200:#e5e7eb; --line-100:#f1f2f4; /* --- 1c · SURFACES ---------------------------------------------------- */ --surface-app:#f4f6fa; /* page background */ --surface-card:#ffffff; /* cards / panels / inputs */ --surface-2:#f8fafc; --surface-3:#eef2f7; /* --- 1d · SEMANTIC ---------------------------------------------------- */ --ok-500:#16a34a; --ok-050:#ecfdf3; --warn-050:#fff7ed; --warn-700:#b45309; --danger-500:#dc2626; --danger-050:#fef2f2; /* --- 1e · SPACING SCALE (4px base) ------------------------------------ */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; /* --- 1f · TYPOGRAPHY -------------------------------------------------- */ --font-sans:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.15rem; --fs-xl:1.4rem; --fs-2xl:1.9rem; --fs-3xl:2.6rem; /* --- 1g · RADII ------------------------------------------------------- */ --radius-sm:.35rem; --radius:.55rem; --radius-md:.625rem; --radius-lg:.75rem; --radius-pill:999px; /* --- 1h · SHADOWS ----------------------------------------------------- */ --shadow-sm:0 1px 2px rgba(16,24,40,.06); --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.05); --shadow-md:0 4px 12px rgba(16,24,40,.10); --shadow-lg:0 12px 30px rgba(16,24,40,.16); /* --- 1i · MOTION + FOCUS --------------------------------------------- */ --t:.18s ease; --focus-ring:0 0 0 .2rem color-mix(in srgb,var(--brand-500),transparent 74%); } /* ============================================================================ 2 · RESET / BASE ============================================================================ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--surface-app);color:var(--ink-700);font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.55;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} :focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)} .skip{position:absolute;left:-999px} .skip:focus{left:var(--sp-3);top:var(--sp-3);background:#fff;padding:.5rem .75rem;z-index:50;box-shadow:var(--shadow)} /* ============================================================================ 3 · TYPOGRAPHY ============================================================================ */ h1,h2,h3,h4{color:var(--ink-900);font-weight:600;line-height:1.18;margin:0 0 .5em} h1{font-size:var(--fs-3xl)} h2{font-size:var(--fs-2xl)} h3{font-size:var(--fs-lg)} p{margin:0 0 1rem} a{color:var(--brand-600);text-decoration:none} a:hover{color:var(--brand-700);text-decoration:underline} .muted{color:var(--ink-500)} .eyebrow{color:var(--brand-600);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-sm)} /* ============================================================================ 4 · LAYOUT / CONTAINERS ============================================================================ */ .wrap{max-width:1120px;margin:0 auto;padding:0 var(--sp-4)} .section{padding:var(--sp-7) 0} .section-head{text-align:center;max-width:40rem;margin:0 auto var(--sp-6)} .alt{background:var(--surface-card);border-top:1px solid var(--line-200);border-bottom:1px solid var(--line-200)} .panel{background:var(--surface-card);border:1px solid var(--line-200);border-radius:var(--radius-lg);padding:var(--sp-5);box-shadow:var(--shadow-sm)} .split{display:grid;grid-template-columns:1.4fr .6fr;gap:var(--sp-6);align-items:start} .grid{display:grid;gap:var(--sp-5)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} .note{background:var(--brand-050);border:1px solid var(--brand-100);border-radius:var(--radius);padding:var(--sp-4);color:var(--ink-700);font-size:var(--fs-sm)} .disclaim{font-size:var(--fs-sm);color:var(--ink-500);margin-top:var(--sp-3)} /* ============================================================================ 5 · BUTTONS ============================================================================ */ .btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid transparent;border-radius:var(--radius); padding:.7rem 1.15rem;font-weight:600;font-size:var(--fs-base);cursor:pointer;transition:var(--t);text-decoration:none;line-height:1} .btn:hover{text-decoration:none} .btn-brand{background:var(--brand-500);color:var(--brand-contrast);border-color:var(--brand-500)} .btn-brand:hover{background:var(--brand-600);color:#fff} .btn-ghost{background:#fff;color:var(--brand-600);border-color:var(--line-200)} .btn-ghost:hover{border-color:var(--brand-500);color:var(--brand-700)} .btn-lg{padding:.9rem 1.5rem;font-size:var(--fs-lg)} .btn[disabled]{opacity:.55;cursor:not-allowed} /* ============================================================================ 6 · HEADER / NAV ============================================================================ */ .site-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-200)} .head-inner{display:flex;align-items:center;gap:var(--sp-4);height:64px} .brand{display:flex;align-items:center;gap:.55rem;color:var(--ink-900);font-weight:700;font-size:1.15rem} .brand:hover{text-decoration:none;color:var(--brand-700)} .brand-mark{color:var(--brand-500);display:inline-flex} .site-nav{display:flex;gap:.35rem;margin-left:auto} .site-nav a{color:var(--ink-700);font-weight:500;padding:.5rem .7rem;border-radius:var(--radius)} .site-nav a:hover{background:var(--surface-3);text-decoration:none} .site-nav a.is-active{color:var(--brand-700);background:var(--brand-050)} .head-cta{white-space:nowrap} /* ============================================================================ 7 · HERO / SECTIONS / TRUST ============================================================================ */ .hero{background:linear-gradient(135deg,var(--brand-700),var(--brand-500));color:#fff;padding:var(--sp-7) 0} .hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-6);align-items:center} .hero h1{color:#fff;letter-spacing:-.5px} .hero p.lead{color:rgba(255,255,255,.92);font-size:var(--fs-lg);max-width:34rem} .hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:var(--sp-5)} .hero .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)} .hero .btn-ghost:hover{background:rgba(255,255,255,.2)} .hero-badges{display:flex;gap:1.25rem;flex-wrap:wrap;margin-top:var(--sp-5);font-size:var(--fs-sm)} .hero-badges span{display:flex;align-items:center;gap:.4rem;color:#fff;opacity:.95} .hero-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-lg);padding:var(--sp-5);box-shadow:var(--shadow-lg)} .hero-card h3{color:#fff} .hero-art{width:100%;height:auto;border-radius:var(--radius);display:block} .trust{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-5);padding:var(--sp-5) 0} .trust .pill{display:flex;align-items:center;gap:.5rem;background:var(--surface-card);border:1px solid var(--line-200); border-radius:var(--radius-pill);padding:.5rem 1rem;box-shadow:var(--shadow-sm);font-weight:600;color:var(--ink-700)} .trust .pill svg{color:var(--brand-500)} /* ============================================================================ 8 · SERVICE CARDS / GRID ============================================================================ */ .card{background:var(--surface-card);border:1px solid var(--line-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm); overflow:hidden;display:flex;flex-direction:column;transition:var(--t)} .card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} /* Founder 2026-07-09: larger, crisper service-card images. Image region grew from aspect-ratio 16/10 (h≈62.5% of width) to 4/3 (h=75% of width) with a min-height floor so cards read as photos, not thumbnails. Stays responsive (ratio scales with the grid column; no fixed overflow). */ .card-media{aspect-ratio:4/3;min-height:220px;background:linear-gradient(135deg,var(--brand-100),var(--surface-3));display:flex;align-items:center;justify-content:center;color:var(--brand-600)} .card-media svg{width:72px;height:72px;opacity:.9} .card-media--img{padding:0;aspect-ratio:1/1;min-height:0} /* square media = square art, no crop */ .card-media--img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block} .card-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:.4rem;flex:1} .card-body h3{margin:0} .card-body .muted{font-size:var(--fs-sm);flex:1} .card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem} .tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .5rem;border-radius:var(--radius-pill)} .tag-live{background:var(--ok-050);color:var(--ok-500)} .tag-soon{background:var(--warn-050);color:var(--warn-700)} /* ============================================================================ 9 · SERVICE PAGE / GALLERY ============================================================================ */ .page-hero{background:linear-gradient(135deg,var(--brand-700),var(--brand-500));color:#fff;padding:var(--sp-7) 0} .page-hero .wrap{max-width:1120px} .page-hero h1{color:#fff} .page-hero p{color:rgba(255,255,255,.92);max-width:42rem} .breadcrumb{font-size:var(--fs-sm);color:rgba(255,255,255,.85);margin-bottom:.5rem} .breadcrumb a{color:#fff;text-decoration:underline} .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)} .gallery .shot{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-200);background:var(--surface-3)} .gallery .shot img{width:100%;height:100%;object-fit:cover} .gallery .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:var(--brand-600); background:linear-gradient(135deg,var(--brand-100),var(--surface-3));height:100%} .gallery .ph svg{width:40px;height:40px} .gallery .ph small{color:var(--ink-500)} .aside-cta{background:var(--surface-card);border:1px solid var(--line-200);border-radius:var(--radius-lg);padding:var(--sp-5);box-shadow:var(--shadow-sm);position:sticky;top:84px} /* ============================================================================ 10 · FORMS ============================================================================ */ .field{margin-bottom:var(--sp-4)} .field label{display:block;font-weight:600;margin-bottom:.35rem;color:var(--ink-900)} .input,select.input,textarea.input{width:100%;padding:.7rem .8rem;border:1px solid var(--line-200);border-radius:var(--radius); font:inherit;color:var(--ink-900);background:#fff;transition:var(--t)} .input:focus{border-color:var(--brand-500);box-shadow:var(--focus-ring)} textarea.input{min-height:110px;resize:vertical} .hp{position:absolute;left:-9999px} .form-msg{padding:.75rem 1rem;border-radius:var(--radius);margin-bottom:var(--sp-4);font-weight:500} .form-msg.ok{background:var(--ok-050);color:var(--ok-500)} .form-msg.err{background:var(--danger-050);color:var(--danger-500)} /* ============================================================================ 11 · RESCREEN WIZARD (public self-quote — toolpop-style stepper) ============================================================================ */ .wizard{max-width:760px;margin:0 auto} .steps{display:flex;gap:.5rem;margin-bottom:var(--sp-5);flex-wrap:wrap} .steps .dot{flex:1;min-width:80px;text-align:center;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em; color:var(--ink-400);padding-bottom:.5rem;border-bottom:3px solid var(--line-200)} .steps .dot.is-active{color:var(--brand-600);border-color:var(--brand-500)} .steps .dot.is-done{color:var(--ok-500);border-color:var(--ok-500)} .wstep{display:none;animation:fade .25s ease} .wstep.is-active{display:block} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)} .tier{border:2px solid var(--line-200);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;background:#fff;transition:var(--t);text-align:left;padding:0;font:inherit} .tier:hover{border-color:var(--brand-400);box-shadow:var(--shadow-md)} .tier.is-sel{border-color:var(--brand-500);box-shadow:var(--focus-ring)} .tier .tier-img{aspect-ratio:16/10;width:100%;display:block;background:var(--surface-3)} .tier .tier-body{padding:var(--sp-4)} .tier .price{font-weight:700;color:var(--brand-700);font-size:var(--fs-lg)} .addons{display:flex;flex-direction:column;gap:.6rem} .addon{display:flex;align-items:center;gap:.75rem;border:1px solid var(--line-200);border-radius:var(--radius);padding:.6rem .8rem} .addon .addon-name{flex:1;font-weight:600} .addon input[type=number]{width:64px;padding:.4rem;border:1px solid var(--line-200);border-radius:var(--radius-sm);font:inherit} .estimate{background:var(--brand-050);border:1px solid var(--brand-100);border-radius:var(--radius-lg);padding:var(--sp-5)} .estimate .total{font-size:var(--fs-2xl);font-weight:700;color:var(--brand-700)} .est-lines{width:100%;border-collapse:collapse;margin:var(--sp-3) 0} .est-lines td{padding:.4rem 0;border-bottom:1px solid var(--brand-100);font-size:var(--fs-sm)} .est-lines td:last-child{text-align:right;font-variant-numeric:tabular-nums} .wnav{display:flex;justify-content:space-between;gap:.75rem;margin-top:var(--sp-5)} /* Individual Screen Panel Replacements — indicator image + per-type price tags */ .panel-indicator{margin:0 0 var(--sp-4)} .panel-indicator img{width:300px;height:300px;max-width:100%;object-fit:contain;display:block;margin:0 auto;background:var(--surface-3);border:1px solid var(--line-200);border-radius:var(--radius-lg)} .addon .panel-price{min-width:92px;text-align:right;font-variant-numeric:tabular-nums} /* ============================================================================ 12 · FOOTER ============================================================================ */ .site-foot{background:var(--ink-900);color:rgba(255,255,255,.8);margin-top:var(--sp-7);padding-top:var(--sp-6)} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--sp-6);padding-bottom:var(--sp-5)} .foot-brand{font-weight:700;font-size:1.1rem;color:#fff;margin-bottom:.4rem} .site-foot h4{color:#fff;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em} .foot-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.35rem} .foot-list a{color:rgba(255,255,255,.8)} .foot-list a:hover{color:#fff} .foot-bar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding:var(--sp-4) var(--sp-4);font-size:var(--fs-sm)} .site-foot .muted{color:rgba(255,255,255,.55)} /* ============================================================================ 13 · RESPONSIVE / MEDIA ============================================================================ */ @media(max-width:900px){ .hero .wrap,.split{grid-template-columns:1fr} .grid-3{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr} .aside-cta{position:static} } @media(max-width:640px){ :root{--fs-3xl:2rem;--fs-2xl:1.6rem} .site-nav{display:none} .grid-3,.grid-2,.tier-grid,.gallery{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .head-cta{display:none} } /* ============================================================================ 14 · SERVICE-AREA / LOCATION PAGES (SEO geo layer — token-driven) ============================================================================ */ .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--sp-3) 0} .chip{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border:1px solid var(--line-200); border-radius:var(--radius-pill);background:var(--surface-card);color:var(--ink-700);font-size:var(--fs-sm);font-weight:600;transition:var(--t)} .chip:hover{border-color:var(--brand-400);color:var(--brand-700);box-shadow:var(--shadow-sm)} .county-block{margin-bottom:var(--sp-5)} .county-block h3{margin:0 0 .5rem;font-size:var(--fs-lg)} .county-block .muted-sub{color:var(--ink-500);font-size:var(--fs-sm);font-weight:500} .loc-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--sp-3) 0} .loc-meta .pill{background:var(--brand-050);border:1px solid var(--brand-100);color:var(--brand-700)} .svc-in-loc{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:var(--sp-4) 0} @media(max-width:640px){.svc-in-loc{grid-template-columns:1fr}} /* ============================================================================ 14 · ACCOUNT / AUTH (header control + login-signup toolpop) — unification ============================================================================ */ .head-account{display:flex;align-items:center;gap:.5rem;margin-left:.75rem} .head-acct-link{font-size:.92rem;font-weight:600;color:var(--ink-700);text-decoration:none;padding:.35rem .5rem} .head-acct-link:hover{color:var(--brand-600)} .head-acct-btn{cursor:pointer;font:inherit;font-size:.92rem;font-weight:700;color:var(--brand-600); background:var(--brand-050);border:1px solid var(--brand-100);border-radius:8px;padding:.45rem .8rem} .head-acct-btn:hover{background:var(--brand-100)} /* Toolpop overlay */ .auth-toolpop{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center} .auth-toolpop[hidden]{display:none} .auth-toolpop__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px)} .auth-toolpop__panel{position:relative;margin-top:7vh;width:min(94vw,420px);background:var(--surface-card); border:1px solid var(--line-200);border-radius:14px;box-shadow:0 24px 60px rgba(2,6,23,.28);padding:1.5rem 1.5rem 1.25rem} .auth-toolpop__x{position:absolute;top:.6rem;right:.75rem;border:0;background:none;font-size:1.6rem;line-height:1; color:var(--ink-500);cursor:pointer} .auth-toolpop__x:hover{color:var(--ink-900)} .auth-toolpop__brand{font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-500); font-weight:700;margin-bottom:.9rem} /* Auth box (shared with fallback page) */ .auth-box{max-width:420px;margin:0 auto} .auth-tabs{display:flex;gap:.25rem;background:var(--surface-3);border-radius:10px;padding:.25rem;margin-bottom:1rem} .auth-tab{flex:1;border:0;background:none;font:inherit;font-weight:700;color:var(--ink-500);cursor:pointer; padding:.5rem;border-radius:8px} .auth-tab.is-active{background:var(--surface-card);color:var(--brand-700);box-shadow:0 1px 3px rgba(2,6,23,.12)} .auth-panel{display:none;flex-direction:column;gap:.75rem} .auth-panel.is-active{display:flex} .auth-field{display:flex;flex-direction:column;gap:.3rem;font-size:.86rem;font-weight:600;color:var(--ink-700)} .auth-field em{font-weight:400;color:var(--ink-400);font-style:normal} .auth-field input,.auth-field select{font:inherit;padding:.6rem .7rem;border:1px solid var(--line-200); border-radius:8px;background:var(--surface-card);color:var(--ink-900)} .auth-field input:focus,.auth-field select:focus{outline:none;border-color:var(--brand-400); box-shadow:0 0 0 3px var(--brand-100)} .auth-submit{margin-top:.35rem;width:100%;justify-content:center} .auth-note{font-size:.8rem;color:var(--ink-500);margin:.1rem 0 0} .auth-alt{font-size:.85rem;color:var(--ink-500);margin:.4rem 0 0} .auth-alt a{color:var(--brand-600);font-weight:600;text-decoration:none} .auth-flash{border-radius:8px;padding:.6rem .75rem;font-size:.86rem;margin-bottom:.85rem} .auth-flash--success{background:var(--ok-050);color:var(--ok-500);border:1px solid var(--ok-500)} .auth-flash--info{background:var(--brand-050);color:var(--brand-700);border:1px solid var(--brand-100)} .auth-flash--danger{background:var(--danger-050);color:var(--danger-500);border:1px solid var(--danger-500)} /* Account pages (login fallback, set-password, dashboard) */ .account-wrap{max-width:960px;margin:2.5rem auto;padding:0 1rem} .account-card{background:var(--surface-card);border:1px solid var(--line-200);border-radius:14px; padding:1.75rem;box-shadow:0 6px 20px rgba(2,6,23,.06);max-width:440px;margin:0 auto} .account-card h1{margin:.1rem 0 1rem;font-size:1.4rem} .dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1.25rem} .dash-tile{display:block;background:var(--surface-card);border:1px solid var(--line-200);border-radius:12px; padding:1.1rem;text-decoration:none;color:var(--ink-900);transition:border-color .15s,box-shadow .15s} .dash-tile:hover{border-color:var(--brand-400);box-shadow:0 6px 18px rgba(2,6,23,.08)} .dash-tile__t{font-weight:700;margin-bottom:.25rem;color:var(--brand-700)} .dash-tile__d{font-size:.85rem;color:var(--ink-500)} .dash-soon{display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em; color:var(--warn-700);background:var(--warn-050);border-radius:6px;padding:.1rem .4rem;margin-left:.4rem} /* Customer privilege pages (appointments, quotes, invoices) */ .acct-nav{display:flex;flex-wrap:wrap;gap:.35rem .65rem;margin-bottom:1.25rem;padding-bottom:.85rem; border-bottom:1px solid var(--line-200)} .acct-nav__link{font-size:.86rem;font-weight:600;color:var(--ink-500);text-decoration:none;padding:.25rem 0} .acct-nav__link:hover{color:var(--brand-600)} .acct-nav__link.is-active{color:var(--brand-700);border-bottom:2px solid var(--brand-500)} .acct-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin:.2rem 0} .acct-head__actions{display:flex;flex-wrap:wrap;gap:.5rem} .acct-section-title{font-size:1rem;margin:1.5rem 0 .65rem;color:var(--ink-700)} .acct-table-wrap{overflow-x:auto;border:1px solid var(--line-200);border-radius:12px;background:var(--surface-card)} .acct-table{width:100%;border-collapse:collapse;font-size:.88rem} .acct-table th,.acct-table td{padding:.65rem .75rem;text-align:left;border-bottom:1px solid var(--line-200)} .acct-table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-500);background:var(--surface-2)} .acct-table tr:last-child td{border-bottom:none} .acct-table tfoot td{border-top:2px solid var(--line-200)} .acct-actions{white-space:nowrap} .acct-actions a{color:var(--brand-600);font-weight:600;text-decoration:none;margin-right:.65rem} .acct-actions a:hover{text-decoration:underline} .acct-badge{display:inline-block;font-size:.72rem;font-weight:700;padding:.15rem .45rem;border-radius:6px} .acct-badge--brand{color:var(--brand-700);background:var(--brand-050)} .acct-badge--ok{color:var(--ok-500);background:var(--ok-050)} .acct-badge--warn{color:var(--warn-700);background:var(--warn-050)} .acct-badge--muted{color:var(--ink-500);background:var(--line-100)} .acct-empty{text-align:center;padding:2rem 1rem;background:var(--surface-card);border:1px dashed var(--line-200); border-radius:12px;margin-top:1rem} .acct-empty p{margin:0 0 1rem;color:var(--ink-500)} .acct-back{margin-top:1.5rem} .acct-form-card{max-width:520px;margin:1.25rem 0 0} .acct-form-card textarea{font:inherit;padding:.6rem .7rem;border:1px solid var(--line-200);border-radius:8px; resize:vertical;min-height:4.5rem;width:100%;box-sizing:border-box} .acct-form-card textarea:focus{outline:none;border-color:var(--brand-400);box-shadow:0 0 0 3px var(--brand-050)} .acct-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1rem} .acct-detail-card{background:var(--surface-card);border:1px solid var(--line-200);border-radius:12px;padding:1.1rem} .acct-detail-card h2{font-size:.95rem;margin:0 0 .75rem;color:var(--brand-700)} .acct-dl{display:grid;grid-template-columns:minmax(6rem,auto) 1fr;gap:.35rem .75rem;margin:0;font-size:.88rem} .acct-dl dt{color:var(--ink-500);font-weight:600} .acct-dl dd{margin:0} .acct-note{font-size:.82rem;margin-top:1rem} .acct-inline-form{display:inline;margin:0} .btn-sm{padding:.35rem .65rem;font-size:.78rem} .acct-pay-stub{border-style:dashed!important} @media(max-width:640px){.head-account .head-acct-link{display:none}} /* ============================================================================ 14 · DECORATIVE DOOR GALLERY + SELF-QUOTE (ALLTECH-INIT-007) Appended block — token-driven; does not touch any prior rules. ============================================================================ */ .door-gallery-section{padding-top:var(--sp-6)} .door-gallery-section > .wrap > h2{font-size:var(--fs-2xl);margin:0 0 .35rem} /* 3-wide grid */ .door-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5); margin:var(--sp-5) 0; } .door-card{ background:var(--surface-card);border:1px solid var(--line-200); border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm); display:flex;flex-direction:column;transition:box-shadow var(--t),transform var(--t); } .door-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} .door-thumb{ position:relative;display:block;width:100%;border:0;padding:0;cursor:zoom-in; background:var(--surface-2);aspect-ratio:1/1;overflow:hidden; } .door-imgs-both{display:grid;grid-template-columns:1fr 1fr;width:100%;height:100%} .door-img{width:100%;height:100%;object-fit:contain;padding:.5rem;background:var(--surface-2)} .door-img-bw{background:#fff} .door-zoom-hint{ position:absolute;right:.4rem;bottom:.4rem;background:color-mix(in srgb,var(--ink-900),transparent 25%); color:#fff;border-radius:var(--radius-pill);font-size:.8rem;padding:.15rem .45rem;line-height:1.4; } .door-body{padding:var(--sp-3) var(--sp-4) var(--sp-4);display:flex;flex-direction:column;gap:.25rem;flex:1} .door-name{font-size:var(--fs-lg);margin:.1rem 0 0} .door-collection{font-size:var(--fs-sm);color:var(--ink-500)} .door-price{font-weight:700;color:var(--brand-700);font-size:var(--fs-lg)} .door-actions{display:flex;gap:.5rem;align-items:center;margin-top:auto;padding-top:var(--sp-3)} .door-qty input{ width:56px;padding:.4rem;border:1px solid var(--line-200);border-radius:var(--radius-sm); font-size:var(--fs-base);text-align:center; } .door-add{flex:1;justify-content:center} .door-call{width:100%;justify-content:center;margin-top:auto} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0} /* pagination */ .door-pager{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:var(--sp-5) 0 .5rem} .door-pg{ min-width:2.25rem;text-align:center;padding:.45rem .6rem;border:1px solid var(--line-200); border-radius:var(--radius-sm);background:var(--surface-card);color:var(--ink-700); text-decoration:none;font-weight:600;transition:background var(--t),border-color var(--t); } .door-pg:hover{background:var(--surface-3)} .door-pg.is-current{background:var(--brand-500);border-color:var(--brand-500);color:var(--brand-contrast)} .door-pageinfo{text-align:center;font-size:var(--fs-sm)} /* lightbox (toolpop layer) */ .door-lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--sp-4)} .door-lightbox[hidden]{display:none} .door-lightbox-backdrop{position:absolute;inset:0;background:rgba(16,24,40,.72)} .door-lightbox-panel{ position:relative;z-index:1;background:var(--surface-card);border-radius:var(--radius-lg); max-width:640px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg);padding:var(--sp-5); } .door-lightbox-panel img{width:100%;max-height:60vh;object-fit:contain;background:var(--surface-2);border-radius:var(--radius)} .door-lightbox-meta{margin-top:var(--sp-3)} .door-lightbox-meta h3{margin:0 0 .2rem;font-size:var(--fs-xl)} .door-lightbox-x,.door-modal-x{ position:absolute;top:.5rem;right:.6rem;border:0;background:transparent;font-size:1.8rem;line-height:1; cursor:pointer;color:var(--ink-500); } /* floating cart bar */ .door-cartbar{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--surface-card); border-top:1px solid var(--line-200);box-shadow:0 -6px 20px rgba(16,24,40,.12)} .door-cartbar[hidden]{display:none} .door-cartbar-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0} .door-cartbar-summary{display:flex;flex-direction:column;line-height:1.2} .door-cartbar-actions{display:flex;gap:.5rem} /* self-quote modal */ .door-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--sp-4)} .door-modal[hidden]{display:none} .door-modal-backdrop{position:absolute;inset:0;background:rgba(16,24,40,.72)} .door-modal-panel{position:relative;z-index:1;background:var(--surface-card);border-radius:var(--radius-lg); max-width:520px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg);padding:var(--sp-5)} .door-step{display:none} .door-step.is-active{display:block} .door-cart-table{width:100%;border-collapse:collapse;margin:var(--sp-3) 0} .door-cart-table td{padding:.45rem 0;border-bottom:1px solid var(--line-100);vertical-align:top} .door-cart-table td:last-child{text-align:right;white-space:nowrap;font-weight:600} .door-line-rm{border:0;background:transparent;color:var(--danger-500);cursor:pointer;font-size:1.05rem;margin-left:.4rem;line-height:1} .door-cart-totals{margin:var(--sp-3) 0} .door-cart-totals .row{display:flex;justify-content:space-between;padding:.25rem 0} .door-cart-totals .row strong{font-size:var(--fs-lg)} .door-modal-nav{display:flex;justify-content:space-between;gap:.5rem;margin-top:var(--sp-4)} @media (max-width:820px){ .door-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)} } @media (max-width:560px){ .door-grid{grid-template-columns:1fr} .door-cartbar-inner{flex-direction:column;align-items:stretch;gap:.5rem} } /* Rescreen self-quote — title disclaimer + real mesh tier images */ .est-disclaimer{display:inline-block;font-size:.5em;font-weight:500;color:#6b7280;letter-spacing:0;line-height:1.2;vertical-align:middle} /* Mesh/mode cards: square image on top showing the ENTIRE picture (contain, not cropped), with the label block + price beneath it. Card footprint (grid width) is unchanged and both tiers render identically. */ .tier{display:flex;flex-direction:column} .tier .tier-img{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;background:var(--surface-3);border-radius:10px 10px 0 0;display:block;padding:6px;box-sizing:border-box} .tier .tier-body{margin-top:auto} @media (max-width:560px){ .est-disclaimer{display:block;font-size:.7rem;margin-top:.25rem} } /* ============================================================================ REQUEST-A-CALL — persistent top-left button + toolpop (site-wide, public) ============================================================================ */ .rc-fab{position:fixed;top:82px;left:14px;z-index:1200;display:inline-flex;align-items:center; gap:.5rem;padding:.4rem .8rem .4rem .4rem;border:3px solid var(--brand-600,#1273b8); border-radius:999px;background:#fff;color:var(--brand-700,#0b4a6f);cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.14);font-weight:700;font-size:.9rem;line-height:1; transition:transform .12s ease, box-shadow .12s ease} .rc-fab:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.18)} .rc-fab img{width:34px;height:34px;object-fit:contain;border-radius:50%;display:block} .rc-fab__txt{white-space:nowrap} @media (max-width:640px){ .rc-fab{top:auto;bottom:16px;left:14px;padding:.35rem .7rem .35rem .35rem} .rc-fab img{width:30px;height:30px} } .rc-toolpop{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center} .rc-toolpop[hidden]{display:none} .rc-toolpop__backdrop{position:absolute;inset:0;background:rgba(15,25,35,.55)} .rc-toolpop__panel{position:relative;z-index:1;width:min(92vw,420px);background:#fff; border-radius:var(--radius-lg,14px);box-shadow:0 24px 60px rgba(0,0,0,.35);padding:1.5rem 1.4rem} .rc-toolpop__x{position:absolute;top:.5rem;right:.7rem;border:0;background:none;font-size:1.6rem; line-height:1;cursor:pointer;color:var(--ink-500,#5b6a77)} .rc-toolpop__brand{font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--brand-600,#116089)} .rc-toolpop__title{margin:.25rem 0 .1rem;font-size:1.25rem} .rc-toolpop__sub{margin:0 0 1rem} .rc-field{display:block;margin:0 0 .75rem} .rc-field>span{display:block;font-weight:600;font-size:.85rem;margin-bottom:.25rem} .rc-field input{width:100%;padding:.6rem .7rem;border:1px solid var(--line-200,#d9e0e6); border-radius:var(--radius-md,10px);font-size:1rem} .rc-submit{width:100%;margin-top:.35rem} .rc-msg{margin:.6rem 0 0;font-size:.9rem} .rc-msg.is-error{color:#b3261e} .rc-msg.is-ok{color:#1a7f4b} .rc-toolpop__or{margin:.85rem 0 0;text-align:center;font-size:.85rem} .rc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ============================================================================ 14 · PER-SERVICE INSTANT-QUOTE CTA + TOOLPOP (services grid) Reuses the .rc-toolpop shell + tokens; only card CTA + toolpop-body extras. ============================================================================ */ .iq-btn{width:100%;justify-content:center;margin-top:.7rem} .iq-toolpop .rc-toolpop__panel{width:min(94vw,460px)} .iq-cta{width:100%;justify-content:center;margin:.2rem 0 .3rem} .iq-note{margin:.6rem 0 0;font-size:.82rem;background:var(--warn-050);color:var(--warn-700); border-radius:var(--radius-md,10px);padding:.55rem .7rem} .iq-range{margin:.2rem 0 .6rem} .iq-range-out{margin-top:.4rem;font-size:1rem} .iq-range-val{color:var(--brand-700)} .iq-sub{margin:.2rem 0 .7rem;font-size:.86rem} /* ── 6d · web_cart: Your-Quote bar + add-to-quote forms (Phase 1) ─────────── */ .qc-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink-900,#16232e); color:#fff;box-shadow:0 -4px 18px rgba(0,0,0,.18)} .qc-bar__row{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;flex-wrap:wrap} .qc-bar__label{opacity:.75;font-size:.9rem} .qc-bar__spacer{flex:1} .qc-btn{padding:.35rem .8rem;font-size:.88rem} .qc-bar .btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.35);background:transparent} .qc-bar .btn-ghost:hover{background:rgba(255,255,255,.12)} body:has(.qc-bar:not([hidden])) .site-foot{padding-bottom:3.4rem} /* Current Quote panel: viewport-constrained with internal scroll (large quotes) */ .qc-toolpop .rc-toolpop__panel{display:flex;flex-direction:column;max-height:min(84vh,760px); margin:8vh auto;overflow:hidden} .qc-toolpop #qcBody{overflow-y:auto;flex:1 1 auto;min-height:0;padding-right:.25rem; overscroll-behavior:contain} .qc-lines{width:100%;border-collapse:collapse;margin:.3rem 0 .5rem;font-size:.92rem} .qc-lines th,.qc-lines td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--line-200,#e5e9ee)} .qc-lines th:last-child,.qc-lines td:last-child{text-align:right} .qc-spec{font-size:.78rem} .qc-total{text-align:right;font-size:1.02rem;margin:.3rem 0 .1rem} .qc-disclaimer{font-size:.78rem;margin-top:.7rem} .qc-recall h4{margin:.6rem 0 .3rem} .qc-empty-actions{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap} .qc-empty-actions .btn{flex:1;justify-content:center;text-align:center;min-width:150px} .iq-cart-form{margin:.2rem 0 .5rem} .iq-panel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.5rem;margin:.3rem 0} .iq-panel-qty input{width:100%} .iq-toolpop .rc-toolpop__panel:has(.iq-lanai-sections),.iq-toolpop .rc-toolpop__panel:has(.iq-fr-room){width:min(96vw,520px);max-height:90vh;overflow:auto} .iq-lanai-sections{display:flex;flex-direction:column;gap:.75rem;margin:.4rem 0} .iq-lanai-section{border:1px solid var(--line-200,#e5e9ef);border-radius:var(--radius-md,10px);padding:.65rem .75rem;background:var(--surface-2,#f8fafc)} .iq-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem} .iq-fr-room{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem;margin:.25rem 0} .iq-check{display:flex;align-items:center;gap:.45rem;font-weight:500} .iq-check input{width:auto;margin:0} .iq-pending-note{font-size:.82rem;margin:.25rem 0 0} .iq-ident{border:1px dashed var(--line-300,#d5dbe2);border-radius:var(--radius-md,10px); padding:.6rem .7rem;margin:.6rem 0} .iq-ident legend{font-size:.82rem;padding:0 .3rem} .iq-add-btn{margin-top:.4rem} .iq-or-cta{font-size:.85rem;margin-left:.45rem} /* Reserve the scrollbar gutter permanently: opening any toolpop (which locks body scroll) no longer shifts the page sideways. */ html{scrollbar-gutter:stable} /* ── 6l · header brand image (replaces grid icon + text, founder 2026-07-09) ── */ .brand-img{display:block;height:58px;width:auto} /* 90% of the 64px header row */ @media (max-width:760px){.brand-img{height:46px}} /* ── 6m · header layout: nav ONE line; CTA centered 5px below; account links styled identically to nav links (founder 2026-07-09) ───────────────── */ .site-nav{flex-wrap:nowrap;white-space:nowrap;gap:.15rem;align-items:center} /* every item on ONE line internally — no two-line "Service Areas" / "Free Quote" */ .site-nav a{white-space:nowrap;line-height:1.2} /* CTA floats at the SAME vertical level as the Request-a-Call fab (top:82px), mirrored to the right side. No layout space consumed. */ /* This bar is position:fixed and floats OVER the page. Its own box must never intercept the mouse — only its actual controls may. Without this, the empty column gap (and any transparent image padding) sits invisibly on top of the page and swallows clicks on whatever is underneath — that is what was killing the "Download PDF" button on account.php. Children re-enable pointer events. */ .head-cta-bar{position:fixed;top:82px;right:14px;z-index:1200;padding:0; display:flex;flex-direction:column;align-items:center;gap:6px; pointer-events:none} .head-cta-bar > *{pointer-events:auto} .head-cta-bar .head-cta{display:inline-flex;box-shadow:0 6px 18px rgba(0,0,0,.14); border:3px solid #fff} /* $100-off Schedule-Today badge (founder 2026-07-10): sits DIRECTLY under the Instant Rescreen Estimate button, uniform scale. 2026-07-13: the source PNG was a 480x320 canvas holding only 307x252 of art — ~48% of the anchor was invisible transparent padding, so the hover/hit area was roughly TWICE the visible badge and overhung neighbouring buttons. The asset is now cropped to its opaque bounds (311x256), so the box == the badge. Width drops 75% -> 48% (75% x 64% art) purely to keep the badge the SAME size on screen now that the dead space is gone. */ .head-cta-bar .schedule-today-badge{display:block;width:48%;line-height:0} .head-cta-bar .schedule-today-badge img{width:100%;height:auto;display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.22));transition:transform .15s ease} .head-cta-bar .schedule-today-badge:hover img{transform:scale(1.04)} /* Real end date (admin-set) shown above the badge — only rendered when set */ .schedule-today-ends{display:block;text-align:center;font-size:.72rem;font-weight:700; line-height:1.3;color:#fff;background:var(--brand-600,#1f5fa8);border-radius:999px; padding:.15rem .6rem;margin-bottom:4px;box-shadow:0 2px 6px rgba(0,0,0,.18)} @media (max-width:760px){ .head-cta-bar{top:auto;bottom:16px;right:14px} /* mirrors the fab's mobile drop */ } /* Menu cluster (nav + account) centered in the space right of the brand: auto margins both sides; ONE uniform .15rem gap between every item. */ .head-inner{gap:.15rem} .head-account{display:flex;align-items:center;gap:.15rem;margin-left:0;margin-right:auto; white-space:nowrap} .head-acct-link, .head-acct-btn{font:inherit;font-size:inherit;font-weight:500;line-height:1.2; white-space:nowrap;color:var(--ink-700);text-decoration:none;padding:.5rem .7rem; border-radius:var(--radius);background:transparent;border:0;cursor:pointer} .head-acct-link:hover, .head-acct-btn:hover{background:var(--surface-3);color:var(--ink-700); text-decoration:none} @media (max-width:920px){.head-cta-bar{padding:4px 0 6px}} /* ── 6n · embed mode: bare flow for the Management quote-builder iframe ────── */ .embed-mode .site-head, .embed-mode .site-foot, .embed-mode .rc-fab, .embed-mode .head-cta-bar, .embed-mode .li-badge-link, .embed-mode .admin-badge-link, .embed-mode .page-hero{display:none !important} .embed-mode{background:var(--surface-2,#f6f8fa)} /* ── 6k · FORM CONTROL CONSISTENCY (founder 2026-07-09) ────────────────────── ONE curved style for every text box, dropdown and textarea site-wide. Placed last so it wins over earlier per-context rules. */ .rc-field input:not([type=checkbox]):not([type=radio]), .rc-field select, .rc-field textarea, .auth-field input, .auth-field select, .acct-profile-grid input, .acct-profile-grid select, .acct-form-card input:not([type=checkbox]), .acct-form-card select, .acct-form-card textarea, .qc-recall input, .input, select.input, textarea.input{ width:100%;padding:.6rem .75rem;font:inherit;color:var(--ink-900,#16232e); background-color:var(--surface-card,#fff);border:1px solid var(--line-200,#d9e0e6); border-radius:var(--radius-md,10px); transition:border-color .15s ease, box-shadow .15s ease} /* dropdowns: strip the native arrow, add one consistent chevron */ .rc-field select, .auth-field select, .acct-profile-grid select, .acct-form-card select, select.input{ appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23566472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .7rem center;padding-right:2.2rem} /* one focus treatment everywhere */ .rc-field input:focus, .rc-field select:focus, .rc-field textarea:focus, .auth-field input:focus, .auth-field select:focus, .acct-profile-grid input:focus, .acct-profile-grid select:focus, .acct-form-card input:focus, .acct-form-card select:focus, .acct-form-card textarea:focus, .qc-recall input:focus, .input:focus, select.input:focus, textarea.input:focus{ outline:none;border-color:var(--brand-400,#4d94d0); box-shadow:0 0 0 3px var(--brand-050,#e8f2fb)} /* exceptions: checkboxes stay natural; compact number boxes keep their widths */ .rc-field input[type=checkbox], .rc-field input[type=radio]{width:auto;margin-right:.4rem} /* compact counters: tighter padding than text boxes, fixed width incl. spinner */ .iq-panel-grid--side .iq-panel-qty input, .iq-panel-grid .iq-panel-qty input{width:4.5rem;min-width:0;flex:0 0 auto; padding:.45rem .25rem .45rem .55rem;text-align:left} .addon input[type=number]{width:64px;padding:.4rem} /* garage toolpop: options stacked VERTICALLY, centered — label left, counter right */ .iq-garage-grid{display:flex;flex-direction:column;gap:.5rem;max-width:380px;margin:.2rem auto .4rem} .iq-garage-grid .iq-panel-qty{display:flex;align-items:center;justify-content:space-between; gap:.7rem;margin:0;padding:.45rem .6rem;border:1px solid var(--line-200,#e5e9ee); border-radius:var(--radius-md,10px);background:var(--surface-2,#f8fafc)} .iq-garage-grid .iq-panel-qty > span{flex:1;margin:0;font-size:.9rem} /* panel-repair toolpop: wider canvas + fixed counter column so nothing clips */ .iq-toolpop .rc-toolpop__panel{max-width:640px;width:min(94vw,640px)} .iq-panel-wrap{gap:.8rem} .iq-panel-grid--side{flex:0 0 168px} .iq-panel-img{max-width:calc(100% - 178px)} @media (max-width:560px){.iq-panel-img{max-width:100%}} .rc-field textarea, .acct-form-card textarea{min-height:110px;resize:vertical} /* ── 6e · standard toolpop footer: Request-a-Call + Call now (all toolpops) ── */ .tp-foot{display:flex;gap:.6rem;margin-top:1rem;padding-top:.8rem; border-top:1px solid var(--line-200,#e5e9ee);flex-wrap:wrap} .tp-foot .btn{flex:1;justify-content:center;text-align:center;min-width:150px; padding:.5rem .8rem;font-size:.92rem} .tp-foot__rc{border:1px solid var(--line-300,#d5dbe2)} .tp-foot__view{border:1px solid var(--brand-300,#9fc3e8);color:var(--brand-700,#0e6ba8)} .qc-toolpop .tp-foot__view{display:none} /* no self-reference inside the quote panel */ /* ── 6f · toolpop quantity inputs: spinners ALWAYS visible + panel diagram ── */ .iq-cart-form input[type=number]::-webkit-inner-spin-button, .iq-cart-form input[type=number]::-webkit-outer-spin-button{ opacity:1;-webkit-appearance:inner-spin-button;height:1.6em;cursor:pointer} .iq-cart-form input[type=number]{-moz-appearance:number-input;appearance:auto} .iq-panel-wrap{display:flex;gap:1rem;align-items:stretch;margin:.3rem 0} /* image scales UP to the full height of the 5 quantity rows; width follows aspect */ .iq-panel-img{align-self:stretch;width:auto;max-width:68%;min-width:0;object-fit:contain; border-radius:var(--radius-md,10px);border:1px solid var(--line-200,#e5e9ee)} .iq-panel-grid--side{flex:1 1 auto;grid-template-columns:1fr;gap:.4rem;margin:0} /* qty boxes narrowed 60%; label + price left, box right */ .iq-panel-grid--side .iq-panel-qty{display:flex;align-items:center;justify-content:space-between;gap:.5rem} .iq-panel-grid--side .iq-panel-qty input{width:40%;max-width:5.2rem;min-width:3.6rem;flex:0 0 auto} .iq-panel-price{font-style:normal;color:var(--brand-700,#0e6ba8);font-size:.82rem;white-space:nowrap;display:block} .iq-ident-row{margin:.6rem 0 .2rem} .iq-ident-btn{border:1px dashed var(--line-300,#d5dbe2);width:100%;justify-content:center} /* ── 6g · lanai toolpop: icon strip + faded section background (lanai5) ───── */ .iq-lanai-icons{display:flex;gap:.6rem;margin:.2rem 0 .8rem;justify-content:center} .iq-lanai-icons img{flex:1;min-width:0;max-width:33%;height:auto;border-radius:var(--radius-md,10px); border:1px solid var(--line-200,#e5e9ee);object-fit:cover} .iq-lanai-icons img:only-child{flex:0 1 auto;max-width:60%} /* single icon: centered */ .iq-lanai-section{position:relative;border:1px solid var(--line-200,#e5e9ee); border-radius:var(--radius-md,10px);padding:.7rem .8rem;margin:.5rem 0; background:linear-gradient(rgba(255,255,255,.88),rgba(255,255,255,.92)), url('../assets/lanai/lanai5.png') center/cover no-repeat} .iq-lanai-section .iq-section-head{display:flex;justify-content:space-between;align-items:center; margin-bottom:.4rem} /* ── 6i · logged-in badge: static bottom-right (founder 2026-07-09) ────────── */ .li-badge-link{position:fixed;right:.7rem;bottom:.7rem;z-index:70;display:block; transition:transform .12s ease;cursor:pointer} .li-badge-link:hover{transform:translateY(-2px)} .li-badge{display:block;width:148px;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))} body:has(.qc-bar:not([hidden])) .li-badge-link{bottom:3.9rem} /* lift above Your-Quote bar */ @media (max-width:560px){.li-badge{width:112px}} /* ── 6j · account PANEL rail (cpx-style, mirrors notary /panel) ───────────── */ .account-wrap:has(> .acct-rail){display:grid;grid-template-columns:236px minmax(0,1fr);gap:1.4rem; align-items:start;max-width:1200px} /* wider canvas when the panel rail is present */ .account-wrap:has(> .acct-rail) > *{grid-column:2;min-width:0} .account-wrap > .acct-rail{grid-column:1;grid-row:1 / span 99;position:sticky;top:1rem} .acct-rail{background:var(--ink-900,#16232e);color:#fff;border-radius:var(--radius-lg,14px); padding:1rem .8rem;display:flex;flex-direction:column;gap:.9rem;min-height:520px} .acct-rail__brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.98rem; padding:0 .35rem} .acct-rail__brand svg{width:22px;height:22px;color:var(--brand-300,#9fc3e8);flex:0 0 auto} .acct-rail__new{display:block;text-align:center;background:var(--brand-600,#1273b8);color:#fff; border-radius:10px;padding:.55rem .6rem;font-weight:600;font-size:.9rem;text-decoration:none} .acct-rail__new:hover{background:var(--brand-700,#0e6ba8)} .acct-rail__nav{display:flex;flex-direction:column;gap:.15rem;flex:1} .acct-rail__item{display:flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.78); text-decoration:none;padding:.5rem .6rem;border-radius:9px;font-size:.92rem} .acct-rail__item svg{width:18px;height:18px;flex:0 0 auto;opacity:.85} .acct-rail__item:hover{background:rgba(255,255,255,.08);color:#fff} .acct-rail__item.is-active{background:rgba(255,255,255,.14);color:#fff;font-weight:600} .acct-rail__foot{display:flex;align-items:center;gap:.55rem;border-top:1px solid rgba(255,255,255,.14); padding-top:.75rem} .acct-rail__avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center; justify-content:center;font-weight:700;font-size:.82rem;color:#fff;flex:0 0 auto} .acct-rail__who{font-size:.85rem;font-weight:600;flex:1;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .acct-rail__out{color:rgba(255,255,255,.65);font-size:.78rem;text-decoration:none} .acct-rail__out:hover{color:#fff;text-decoration:underline} @media (max-width:760px){ .account-wrap{display:block} .acct-rail{position:static;min-height:0;margin-bottom:1rem} .acct-rail__nav{flex-direction:row;flex-wrap:wrap;gap:.3rem} .acct-rail__item{padding:.45rem .55rem} .acct-rail__item span{font-size:.85rem} } /* constant content card: every account section renders in the SAME container */ .acct-content{background:var(--surface-card,#fff);border:1px solid var(--line-200,#e5e9ee); border-radius:var(--radius-lg,14px);padding:1.4rem 1.5rem;min-height:560px;width:100%; box-shadow:var(--shadow-sm,0 2px 8px rgba(2,6,23,.05))} @media (max-width:760px){.acct-content{min-height:0;padding:1rem}} /* admin badge: bottom-LEFT, links to /Management (founder 2026-07-09) */ .admin-badge-link{position:fixed;left:.7rem;bottom:.7rem;z-index:70;display:block; transition:transform .12s ease} .admin-badge-link:hover{transform:translateY(-2px)} .admin-badge{display:block;width:148px;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))} body:has(.qc-bar:not([hidden])) .admin-badge-link{bottom:3.9rem} @media (max-width:640px){.admin-badge-link{bottom:4.6rem}.admin-badge{width:112px}} /* clear the mobile rc-fab */ /* ── 6h · account My Info form ─────────────────────────────────────────────── */ .acct-profile-form{max-width:640px} .acct-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .9rem} .acct-profile-wide{grid-column:1 / -1} .acct-profile-note{margin:.5rem 0 .8rem;font-size:.85rem} @media (max-width:560px){.acct-profile-grid{grid-template-columns:1fr}} .iq-after-add{margin-top:.7rem;display:flex;gap:.6rem} .iq-after-add .btn{flex:1;justify-content:center;text-align:center} .iq-ew-sidelights,.iq-ew-sunburst{border:1px solid var(--line-200,#e5e9ef);border-radius:var(--radius-md,10px); padding:.55rem .7rem;margin:.45rem 0;background:var(--surface-2,#f8fafc)} .iq-ew-sidelights legend,.iq-ew-sunburst legend{font-size:.82rem;padding:0 .25rem} @media (max-width:560px){.iq-panel-wrap{flex-direction:column} .iq-panel-img{max-width:100%}.iq-panel-grid--side{grid-template-columns:repeat(2,1fr)}} /* ── Gallery picker (toolpop.gallery_picker) — reusable overlay + field ── */ .gp-overlay{z-index:1350} .gp-panel{width:min(94vw,520px);max-height:min(88vh,720px);display:flex;flex-direction:column} .gp-body{padding:.2rem 0 .4rem;overflow:auto;flex:1} .gp-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.25rem} .gp-thumb{width:52px;height:52px;object-fit:cover;border-radius:var(--radius-sm,6px);border:1px solid var(--line-200,#e5e9ee)} .gp-picked{font-size:.85rem;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:.55rem} .gp-cell{border:2px solid transparent;border-radius:var(--radius-md,10px);padding:0;background:#fff;cursor:pointer; overflow:hidden;transition:border-color .15s} .gp-cell:hover,.gp-cell:focus-visible{border-color:var(--brand-500,#1685c0);outline:none} .gp-cell img{display:block;width:100%;aspect-ratio:1;object-fit:cover} .gp-empty-note{margin:0 0 .6rem;font-size:.88rem} .gp-text-fallback{width:100%} /* ── Unified quote (constant quote) — line remove controls (ALLTECH-INIT-UNIFIED-QUOTE) ── */ .qc-remove{background:none;border:0;color:var(--muted,#888);font-size:1.15rem;line-height:1;cursor:pointer;padding:0 .35rem;border-radius:6px} .qc-remove:hover{color:#c0392b;background:rgba(192,57,43,.08)} .mq-remove{padding:.1rem .5rem;line-height:1.2} #myQuotePanel .qc-lines th,#myQuotePanel .qc-lines td{padding:.5rem .4rem;border-bottom:1px solid var(--line,#eee);vertical-align:top} #myQuotePanel .qc-spec{font-size:.8rem;margin-top:.15rem} /* ============================================================================ 16 · CLICK-TO-PREVIEW IMAGE LIGHTBOX (site-wide service images) Reuses the .rc-toolpop shell; wider media panel + caption. Generic handler in js/image-preview.js; markup in inc/image_preview.php. Founder 2026-07-09. ============================================================================ */ [data-img-preview]{cursor:zoom-in} [data-img-preview]:focus-visible{outline:3px solid var(--brand-500,#1685c0);outline-offset:2px} .img-preview .rc-toolpop__panel.img-preview__panel{width:min(94vw,900px);padding:1rem 1rem 1.1rem} .img-preview__figure{display:flex;align-items:center;justify-content:center;background:var(--surface-3,#eef2f5); border-radius:var(--radius,10px);overflow:hidden} .img-preview__figure img{max-width:100%;max-height:78vh;width:auto;height:auto;display:block;object-fit:contain} .img-preview__cap{margin:.75rem 0 .1rem;text-align:center;font-weight:600;color:var(--ink-900,#16232e)} .img-preview__cap[hidden]{display:none} body.img-preview-open{overflow:hidden} /* ============================================================================ 6o · SB-CONSISTENCY-SWEEP pass 2 — unified sizes/shapes/positions Overrides older section-14 account/auth rules to match 6b-6n primitives. ============================================================================ */ /* Containers */ .account-wrap{max-width:960px;margin:var(--sp-7) auto;padding:0 var(--sp-4)} .account-wrap:has(> .acct-rail){max-width:1200px;margin:var(--sp-7) auto;padding:0 var(--sp-4)} /* Cards / panels — one radius, border, shadow, padding */ .account-card{border-radius:var(--radius-lg);padding:var(--sp-5);box-shadow:var(--shadow-sm)} .dash-tile{border-radius:var(--radius-lg);padding:var(--sp-4)} .acct-table-wrap{border-radius:var(--radius-lg)} .acct-empty{border-radius:var(--radius-lg)} .acct-detail-card{border-radius:var(--radius-lg);padding:var(--sp-4)} .acct-content{border-radius:var(--radius-lg);padding:var(--sp-5);box-shadow:var(--shadow-sm)} .auth-toolpop__panel{border-radius:var(--radius-lg)} /* Buttons */ .btn-sm{padding:var(--sp-1) var(--sp-3);font-size:var(--fs-sm)} .btn-block{width:100%;justify-content:center} /* Section rhythm + alignment utilities */ .section-head--left{text-align:left;max-width:none;margin-left:0;margin-right:0} .h-spaced{margin-top:var(--sp-6)} .mt-sp-1{margin-top:var(--sp-1)} .mt-sp-3{margin-top:var(--sp-3)} .mt-sp-4{margin-top:var(--sp-4)} .mt-sp-5{margin-top:var(--sp-5)} .text-center{text-align:center} .hero-cta--center{justify-content:center} .steps-list{padding-left:1.1rem;line-height:1.9;margin:0} /* Hero card sub-block (home) */ .hero-card h2{margin-top:var(--sp-4);font-size:var(--fs-xl)} .hero-card p.sub{color:rgba(255,255,255,.9);margin:0} /* Aside / contact blocks */ .aside-divider{border:none;border-top:1px solid var(--line-200);margin:var(--sp-4) 0} .aside-phone{font-size:var(--fs-xl);font-weight:700;margin:0} .aside-phone a{text-decoration:none} .contact-line{margin:.4rem 0} .panel-accent{border-left:4px solid var(--brand-500)} .panel-spaced{margin-bottom:var(--sp-5)} .panel-centered{text-align:center} /* Card / tier typography */ .tier-body h3{margin:.1rem 0} .price-unit{font-size:.8rem;font-weight:500} .heading-base{font-size:var(--fs-base)} .acct-desc{font-size:.85rem;margin-top:.75rem} .acct-logout{margin-top:var(--sp-5)} .acct-head-title{margin:.2rem 0} /* Coverage map */ .coverage-fig{margin:var(--sp-5) 0 0;text-align:center} .coverage-img{display:block;margin:0 auto;max-width:700px;width:100%;height:auto; border-radius:var(--radius-lg);box-shadow:var(--shadow-md)} /* Wizard narrow fields */ .field-narrow{max-width:280px} .est-label{font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.75rem} /* Quote page actions */ .mq-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-4)} .mq-recall{margin-top:var(--sp-4)} /* Unified data tables (acct, quote cart, rescreen estimate, door cart) */ .acct-table th,.qc-lines th,.door-cart-table th{ font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-500); background:var(--surface-2);font-weight:600} .acct-table th,.acct-table td,.qc-lines th,.qc-lines td,.door-cart-table td{ padding:.65rem .75rem;border-bottom:1px solid var(--line-200)} .qc-lines,.door-cart-table{width:100%;border-collapse:collapse} .qc-lines th:last-child,.qc-lines td:last-child,.door-cart-table td:last-child{text-align:right} .est-lines th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-500)} .est-lines th,.est-lines td{padding:.5rem 0} .num-right{text-align:right} .num-right-strong{text-align:right;font-weight:700} /* ── 6p · SIGN-IN BENEFITS BLURB (founder 2026-07-10) ──────────────────────── Shown above the login/register tabs: why sign in — order status, scheduled appointments, schedule-today. Warm, compact, brand-tinted card. */ .auth-benefits{background:var(--surface-2,#f6f8fa);border:1px solid var(--line-200,#e3e8ee); border-left:4px solid var(--brand-600,#1f5fa8);border-radius:var(--radius,10px); padding:.9rem 1.1rem;margin-bottom:1.1rem} .auth-benefits__lead{margin:0 0 .35rem;font-weight:600;color:var(--ink-700)} .auth-benefits__list{margin:0 0 .45rem;padding-left:1.15rem} .auth-benefits__list li{margin:.15rem 0;color:var(--ink-700)} .auth-benefits__sub{margin:0;font-size:.85rem;line-height:1.45} /* ── 6q · CUSTOMER ACTION HUB (SB-ACTION-HUB) ─────────────────────────────── Mobile-first tokenized quote hub: lines, photos, pay, approve, referral. */ .hub-wrap{max-width:520px;margin:0 auto} .hub-card{background:var(--surface-card,#fff);border:1px solid var(--line-200,#e3e8ee); border-radius:var(--radius-lg,12px);padding:1.1rem 1.15rem;margin-bottom:1rem; box-shadow:0 4px 14px rgba(2,6,23,.05)} .hub-card h2{margin:.2rem 0 .65rem;font-size:1.15rem} .hub-card h3{margin:.1rem 0 .5rem;font-size:1rem} .hub-eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em; color:var(--brand-600,#1f5fa8)} .hub-badge{display:inline-block;font-size:.75rem;font-weight:700;padding:.2rem .55rem; border-radius:6px;background:var(--ok-050,#ecfdf5);color:var(--ok-500,#059669)} .hub-badge--locked{background:var(--warn-050,#fffbeb);color:var(--warn-700,#b45309)} .hub-actions{display:flex;flex-direction:column;gap:.65rem;margin-top:.85rem} .hub-actions .btn{min-height:48px;font-size:1rem;justify-content:center} .hub-stepup{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap} .hub-stepup input{flex:1;min-width:120px;max-width:160px;padding:.65rem .75rem;font-size:1.1rem; border:2px solid var(--line-200);border-radius:var(--radius-sm,8px);letter-spacing:.15em;text-align:center} .hub-gallery{display:flex;gap:.5rem;overflow-x:auto;padding:.35rem 0;-webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory} .hub-gallery img{height:120px;width:auto;border-radius:8px;scroll-snap-align:start;object-fit:cover; border:1px solid var(--line-200)} .hub-photo-lane{margin-top:.75rem} .hub-upload-btn{display:block;width:100%;min-height:56px;padding:1rem;text-align:center; font-size:1.05rem;font-weight:700;border:2px dashed var(--brand-400,#3b82c4); border-radius:var(--radius-lg,12px);background:var(--brand-050,#eff6ff);cursor:pointer} .hub-upload-btn input{position:absolute;opacity:0;width:0;height:0} .hub-upload-wrap{position:relative} .hub-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem} .hub-chip{font-size:.78rem;padding:.25rem .5rem;border-radius:6px;background:var(--surface-2); border:1px solid var(--line-200)} .hub-chip--ok{background:var(--ok-050);border-color:var(--ok-500)} .hub-chip--err{background:#fef2f2;border-color:#fca5a5;color:#b91c1c} .hub-staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:.5rem;margin-top:.65rem} .hub-staff-thumb{position:relative;border-radius:8px;overflow:hidden;border:2px solid var(--line-200); cursor:pointer;aspect-ratio:1;background:var(--surface-2)} .hub-staff-thumb img{width:100%;height:100%;object-fit:cover;display:block} .hub-staff-thumb.is-public{border-color:var(--ok-500)} .hub-staff-thumb.is-private{border-color:var(--warn-700);opacity:.85} .hub-staff-thumb__flag{position:absolute;top:2px;right:2px;font-size:.6rem;font-weight:700; background:rgba(0,0,0,.55);color:#fff;padding:.1rem .25rem;border-radius:4px} .hub-refer-qr{text-align:center;margin:.75rem 0} .hub-refer-qr svg{max-width:180px;height:auto} .hub-callout{font-size:.88rem;color:var(--ink-500);margin:.5rem 0 0} .hub-muted{font-size:.85rem;color:var(--ink-500)} .hub-status-pill{display:inline-block;padding:.15rem .5rem;border-radius:6px;font-size:.78rem;font-weight:600; background:var(--surface-2);color:var(--ink-700)} @media (min-width:600px){.hub-actions--row{flex-direction:row}.hub-actions--row .btn{flex:1}} /* ============================================================================ 22 · SEQUENCE-IN-TOOLPOP HOST (INIT-357a · doctrine D176) The generic public-sequence modal (inc/sequence_toolpop.php). The wizard internals reuse the EXISTING classes (.wstep .panel .steps .dot .addons .estimate .wnav) — only the shell needs sizing: wider than the lead-capture toolpops and scrollable so multi-row grids never clip. */ .seq-toolpop .rc-toolpop__panel{width:min(92vw,560px);max-height:88vh;overflow-y:auto} .seq-toolpop .steps{margin:.9rem 0 var(--sp-4)} .seq-toolpop .steps[hidden]{display:none} .seq-toolpop .panel{padding:0;border:0;background:transparent;box-shadow:none} .seq-toolpop .estimate{padding:var(--sp-4)} .seq-toolpop .wnav{margin-top:var(--sp-4)} /* ── INIT-357 (b1) · generic sequence step chrome (js/sequence-public.js) ── Domain-neutral twins of the bespoke iq-* toolpop classes, used by the `smart:repeat-section` step-type and the extended `questions` step. */ .seq-icons{display:flex;gap:.6rem;margin:.2rem 0 .8rem;justify-content:center} .seq-icons img{flex:1;min-width:0;max-width:33%;height:auto;border-radius:var(--radius-md,10px);object-fit:cover} .seq-icons img:only-child{flex:0 1 auto;max-width:60%} .seq-sections{display:flex;flex-direction:column;gap:.75rem;margin:.4rem 0} .seq-section{position:relative;border:1px solid var(--line-200,#e5e9ee);border-radius:var(--radius-md,10px); padding:.65rem .75rem;background:var(--surface-2,#f8fafc)} .seq-section .field{margin-bottom:.6rem} .seq-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem} .seq-section-head .seq-rm{padding:.1rem .55rem;line-height:1;font-size:1.05rem} .seq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem;margin:.25rem 0} .seq-grid .field{margin-bottom:0} .seq-grid .field-narrow{max-width:none} .seq-add{margin:.2rem 0 .6rem} .seq-check{display:flex;align-items:center;gap:.45rem;font-weight:500} .seq-check input{width:auto;margin:0} .seq-toolpop .field label{display:block;font-weight:600;font-size:.85rem;margin-bottom:.25rem}