/* ============================================================ PAR v4 shared system , single source of truth Extracted verbatim from par-home-v4.html. Page-specific section CSS (hero/calculator/services/iMessage) stays per-page, inline. Tokens, reset, type, .btn, header, footer, brand bits + motion layer. ============================================================ */ /* ============================================================ TWO-THEME TOKEN SYSTEM DARK = Graphite & Brass (the chosen dir3 look, unchanged) LIGHT = the day version of the SAME layout (warm paper + ink) Theme paints from (set pre-paint). ============================================================ */ /* DARK , Graphite & Brass (default / fallback) */ :root, html[data-resolved="dark"]{ color-scheme:dark; --bg:#0C0C0C; /* graphite base */ --surface:#141414; /* elevation L1 (lighten, not shadow) */ --surface-2:#1B1B1B; /* elevation L2 */ --panel:#0A0A0A; /* phone panel */ --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16); --text:#EDE9E1; /* warm paper text, ~13:1 on graphite */ --text-strong:#FBF8F2; --muted:#A7A199; /* warm gray secondary , ~7:1 */ --muted-2:#79736B; --orange:#F4752E; /* PAR orange , the spark / accents */ --orange-2:#FF8A47; /* lifted orange for TEXT on dark (legible) */ --on-orange:#FFFFFF; /* CRISP white on the deep-orange button (~4.7:1) */ /* CTA fill tokens , WHITE text on a deep burnt-orange (readable + premium); bright F4752E stays as the spark accent only. hover lifts + glows. */ --cta-fill:#C2511A; --cta-fill-hover:#CD5A1E; --cta-glow:0 8px 22px rgba(244,117,46,.34), 0 0 0 1px rgba(255,138,71,.18); --cta-glow-hover:0 12px 30px rgba(255,138,71,.50), 0 0 26px rgba(244,117,46,.30); --brass:#C9930A; --brass-2:#E0AE2E; --gold:#E0AE2E; /* stars */ --hdr-bg:rgba(12,12,12,.72); --sel-bg:rgba(244,117,46,.30); --sel-fg:#ffffff; /* glows (dark only) , softened to a near-whisper so orange is a spark, not a wash */ --glow-hero:rgba(244,117,46,.05); --glow-van:rgba(244,117,46,.10); --glow-tn:none; --glow-score:none; --van-shadow:drop-shadow(0 24px 40px rgba(0,0,0,.6)); --panel-shadow:0 30px 70px rgba(0,0,0,.6); --row-hover:transparent; --ghost-hover-bg:rgba(255,255,255,.04); --region-fill:rgba(255,255,255,.03); --r-8:8px; --r-12:12px; --r-16:16px; --r-24:24px; --maxw:1200px; } /* LIGHT , the day version. Warm paper base, ink text, PAR orange spark. Same layout + soul; glows softened to near-zero (no heavy shadows on light). */ html[data-resolved="light"]{ color-scheme:light; --bg:#FBFAF7; /* warm paper */ --surface:#FFFFFF; /* elevation by lightness + hairline */ --surface-2:#F4F1EA; /* L2 / inbound bubble */ --panel:#FFFFFF; /* phone panel */ --line:rgba(26,23,20,.12); --line-strong:rgba(26,23,20,.20); --text:#1A1714; /* ink , ~15:1 on paper */ --text-strong:#0E0C0A; --muted:#5C554C; /* warm slate , ~7.1:1 on paper (passes 6:1) */ --muted-2:#857D72; --orange:#F4752E; /* PAR orange , button fill (ink sits on it) */ --orange-2:#C04E18; /* deepened orange for TEXT on light (>=6:1) */ --on-orange:#FFFFFF; /* CRISP white on the deep-orange button (~4.7:1) */ /* CTA fill tokens , LIGHT: WHITE on a deep burnt-orange (readable + premium). */ --cta-fill:#C2511A; --cta-fill-hover:#CD5A1E; --cta-glow:0 6px 16px rgba(244,117,46,.22); --cta-glow-hover:0 10px 24px rgba(244,117,46,.30); --brass:#8A6307; --brass-2:#6E4F05; --gold:#B07F08; /* stars , deeper brass-gold so they read on paper */ --hdr-bg:rgba(251,250,247,.80); --sel-bg:rgba(244,117,46,.22); --sel-fg:#1A1714; /* glows softened for a light surface , faint neutral wash, no text-shadow */ --glow-hero:rgba(244,117,46,.05); --glow-van:rgba(244,117,46,.07); --glow-tn:none; --glow-score:none; --van-shadow:drop-shadow(0 18px 30px rgba(26,23,20,.16)); --panel-shadow:0 22px 50px rgba(26,23,20,.12); --row-hover:transparent; --ghost-hover-bg:rgba(26,23,20,.04); --region-fill:rgba(26,23,20,.03); --r-8:8px; --r-12:12px; --r-16:16px; --r-24:24px; --maxw:1200px; } /* AUTO with no manual choice and no resolver (e.g. JS off): media query still auto-follows the device so dark mode works with zero action. */ @media(prefers-color-scheme:light){ html[data-theme="auto"]:not([data-resolved]){ color-scheme:light; --bg:#FBFAF7; --surface:#FFFFFF; --surface-2:#F4F1EA; --panel:#FFFFFF; --line:rgba(26,23,20,.12); --line-strong:rgba(26,23,20,.20); --text:#1A1714; --text-strong:#0E0C0A; --muted:#5C554C; --muted-2:#857D72; --orange-2:#C04E18; --brass:#8A6307; --brass-2:#6E4F05; --gold:#B07F08; --on-orange:#FFFFFF; --cta-fill:#C2511A; --cta-fill-hover:#CD5A1E; --cta-glow:0 6px 16px rgba(244,117,46,.22); --cta-glow-hover:0 10px 24px rgba(244,117,46,.30); --hdr-bg:rgba(251,250,247,.80); --sel-bg:rgba(244,117,46,.22); --sel-fg:#1A1714; --glow-hero:rgba(244,117,46,.05); --glow-van:rgba(244,117,46,.07); --glow-tn:none; --glow-score:none; --van-shadow:drop-shadow(0 18px 30px rgba(26,23,20,.16)); --panel-shadow:0 22px 50px rgba(26,23,20,.12); --row-hover:transparent; --ghost-hover-bg:rgba(26,23,20,.04); --region-fill:rgba(26,23,20,.03); } } /* RESET + BASE */ *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{font-family:'Inter',-apple-system,sans-serif; color:var(--text); background:var(--bg); line-height:1.5; overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background .3s ease, color .3s ease;} ::selection{background:var(--sel-bg); color:var(--sel-fg);} /* DISPLAY = Fraunces serif (headings + wordmark). Everything else stays Inter sans. Numbers, buttons, nav, labels and phones are explicitly kept sans below. */ h1,h2,h3,.sname,.big,.stamp,.word,.lede,.cta h2{font-family:'Fraunces',Georgia,serif;} /* keep these SANS (they sat in the old display rule but are labels/numbers, not headings) */ .eyebrow,.range,.tn,.snum,.rscore .n,.fphone{font-family:'Inter',-apple-system,sans-serif;} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;} a{color:inherit; text-decoration:none;} .eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600;} h1{font-weight:600; color:var(--text-strong); letter-spacing:-0.01em;} h2{font-weight:600; font-size:36px; line-height:1.08; letter-spacing:-0.01em; color:var(--text-strong);} .sub{color:var(--muted); font-size:16px; line-height:1.6;} .block{padding:128px 0;} .band{background:var(--surface);} .tnums{font-variant-numeric:tabular-nums;} /* ONE system button everywhere */ /* PRIMARY CTA , WHITE on deep burnt-orange. On hover the fill BRIGHTENS, the button lifts 1px, and a soft warm glow blooms. Works in both themes. */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--cta-fill); color:var(--on-orange); border:none; border-radius:var(--r-12); font-family:'Inter',-apple-system,sans-serif; font-weight:600; font-size:16px; padding:15px 24px; cursor:pointer; box-shadow:var(--cta-glow); transition:background .18s ease, box-shadow .22s ease, transform .18s cubic-bezier(.22,.61,.36,1); white-space:nowrap;} .btn:hover{background:var(--cta-fill-hover); color:var(--on-orange); transform:translateY(-1px); box-shadow:var(--cta-glow-hover);} .btn:active{transform:translateY(0) scale(.985); box-shadow:var(--cta-glow);} .btn:focus-visible{outline:2px solid var(--brass-2); outline-offset:3px;} .btn.ghost{background:transparent; color:var(--text-strong); border:1px solid var(--line-strong); box-shadow:none;} .btn.ghost:hover{border-color:var(--orange); color:var(--orange-2); background:var(--ghost-hover-bg); box-shadow:none; transform:none;} /* HEADER */ header{position:sticky; top:0; z-index:50; background:var(--hdr-bg); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .25s, padding .25s, background .3s; padding:16px 0;} header.scrolled{border-color:var(--line); padding:11px 0;} .hbar{max-width:var(--maxw); margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:24px;} .word{font-weight:600; font-size:20px; color:var(--text-strong); letter-spacing:-0.02em; white-space:nowrap; display:flex; align-items:center; gap:9px;} .word .spark{width:9px; height:9px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(244,117,46,.16);} .hnav{display:flex; gap:26px; font-size:14px; align-items:center; color:var(--muted); font-weight:500;} .hnav a{white-space:nowrap;} .hnav a:hover{color:var(--orange-2);} /* tablet range: tighten the full header so the nav fits on one line, no wrapping */ @media(min-width:881px) and (max-width:1120px){ .hnav{gap:20px; font-size:13.5px;} .word{font-size:18px;} .hright{gap:12px;} .phone{font-size:15px;} .book{padding:10px 16px; font-size:13.5px;} } /* Puls-inspired Services dropdown (hover, CSS-only, no JS) */ .hasmenu{position:relative;} .menutrig{display:inline-flex; align-items:center; gap:5px; background:none; border:0; font:inherit; color:var(--muted); font-weight:500; cursor:pointer; white-space:nowrap; padding:6px 0;} .menutrig svg{transition:transform .2s ease;} .hasmenu:hover .menutrig{color:var(--orange-2);} .hasmenu:hover .menutrig svg{transform:rotate(180deg);} .hasmenu::after{content:""; position:absolute; top:100%; left:-12px; right:-12px; height:16px;} /* hover bridge */ .hmenu{position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px); background:var(--surface); border:1px solid var(--line-strong); border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.35); padding:8px; min-width:232px; opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease; z-index:60;} .hasmenu:hover .hmenu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);} .hmenu a{display:block; padding:11px 14px; border-radius:9px; font-size:14px; color:var(--text); white-space:nowrap;} .hmenu a:hover{background:var(--ghost-hover-bg); color:var(--text-strong);} header.scrolled .word{font-size:18px;} /* scroll-shrink wordmark (Puls) */ .hright{display:flex; align-items:center; gap:16px;} .phone{color:var(--text-strong); font-weight:600; font-size:16px; font-family:'Inter',-apple-system,sans-serif; white-space:nowrap;} .phone:hover{color:var(--orange-2);} .book{font-size:14px; padding:11px 18px;} /* THEME TOGGLE , one system button, reused on desktop + mobile */ .themebtn{width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--text); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:border-color .16s, color .16s, background .16s;} .themebtn:hover{border-color:var(--orange); color:var(--orange-2); background:var(--ghost-hover-bg);} .themebtn:focus-visible{outline:2px solid var(--brass-2); outline-offset:2px;} .themebtn svg{width:19px; height:19px;} #themeBtnM{display:none;} /* the mobile theme button is hidden on desktop , the header one (#themeBtn) is shown */ .themebtn .ic{display:none;} html[data-theme="auto"] .themebtn .ic-auto{display:block;} html[data-theme="light"] .themebtn .ic-light{display:block;} html[data-theme="dark"] .themebtn .ic-dark{display:block;} .burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px;} .burger i{width:22px; height:2px; background:var(--text); display:block;} .mcall{display:none; color:var(--text-strong);} /* MOBILE HEADER 880-first */ @media(max-width:880px){ .hnav,.hright{display:none;} .hbar{display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center; padding:0 18px;} .burger{display:flex; justify-self:start;} .word{justify-self:center; grid-column:2; font-size:17px;} .themebtn{width:34px; height:34px;} #themeBtn{display:none;} #themeBtnM{display:inline-flex; justify-self:end;} /* mobile: only the standalone theme button shows */ .mcall{display:inline-flex; justify-self:end;} } /* MOBILE MENU , slides in from the right, hairline panel, real toggle (JS-wired) */ .mmenu{position:fixed; inset:0; z-index:90; visibility:hidden; pointer-events:none;} .mmenu .scrim{position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; transition:opacity .28s ease;} html[data-resolved="light"] .mmenu .scrim{background:rgba(26,23,20,.34);} .mmenu .panel{position:absolute; top:0; right:0; height:100%; width:min(82vw,330px); background:var(--bg); border-left:1px solid var(--line); padding:22px 22px 28px; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s cubic-bezier(.22,.61,.36,1); box-shadow:-24px 0 60px rgba(0,0,0,.28);} html[data-resolved="light"] .mmenu .panel{box-shadow:-24px 0 60px rgba(26,23,20,.14);} .mmenu.open{visibility:visible; pointer-events:auto;} .mmenu.open .scrim{opacity:1;} .mmenu.open .panel{transform:translateX(0);} .mmenu .mtop{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;} .mmenu .mword{font-family:'Inter'; font-weight:600; font-size:16px; color:var(--text-strong); display:flex; align-items:center; gap:8px;} .mmenu .mword .spark{width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(244,117,46,.16);} .mclose{width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--text); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none;} .mclose:focus-visible{outline:2px solid var(--brass-2); outline-offset:2px;} .mmenu .mlinks{display:flex; flex-direction:column; margin-top:18px; border-top:1px solid var(--line);} .mmenu .mlinks a{font-family:'Inter'; font-weight:600; font-size:19px; color:var(--text-strong); padding:18px 2px; border-bottom:1px solid var(--line);} .mmenu .mlinks a:hover,.mmenu .mlinks a:active{color:var(--text);} .mmenu .mact{margin-top:auto; display:flex; flex-direction:column; gap:12px; padding-top:24px;} .mmenu .mact .btn{width:100%;} .mmenu .mphone{display:flex; align-items:center; justify-content:center; gap:8px; font-family:'Inter'; font-weight:600; font-size:16px; color:var(--text-strong); border:1px solid var(--line-strong); border-radius:var(--r-12); padding:14px;} .mmenu .mphone:hover{border-color:var(--line-strong); color:var(--text-strong);} @media(min-width:881px){ .mmenu{display:none;} } @media(prefers-reduced-motion:reduce){ .mmenu .scrim,.mmenu .panel{transition:none;} } /* FOOTER , graphite premium presence (same #0C0C0C base as the closing band). Fixed dark-panel colors so it stays calm + premium in light AND dark. */ footer{background:#0C0C0C; color:#A7A199; padding:72px 0 44px; border-top:1px solid rgba(255,255,255,.09);} .ftop{display:grid; grid-template-columns:1fr 1fr 1fr 1.1fr; gap:36px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.09);} .fcol h4{font-family:'Inter'; font-size:12px; letter-spacing:.06em; color:#FBF8F2; font-weight:600; margin-bottom:14px; text-transform:uppercase;} .fcol a{display:block; font-size:14px; color:#A7A199; margin-bottom:9px;} .fcol a:hover{color:#FF8A47;} .fphone{font-size:18px; font-weight:600; color:#FBF8F2; display:block; margin-bottom:12px;} .fnap{font-size:12px; color:#79736B; line-height:1.6; margin-top:10px;} /* newsletter subscribe + socials row */ .fmid{display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding:36px 0; border-bottom:1px solid rgba(255,255,255,.09);} .fsub .ftitle{font-family:'Inter'; font-size:15px; font-weight:600; color:#FBF8F2; margin-bottom:4px;} .fsub .fline{font-size:13px; color:#A7A199;} .fform{display:flex; gap:8px; align-items:center; background:#141414; border:1px solid rgba(255,255,255,.16); border-radius:26px; padding:6px 6px 6px 18px; min-width:300px;} .fform input{flex:1; min-width:0; background:none; border:none; outline:none; color:#FBF8F2; font-size:14px; font-family:'Inter';} .fform input::placeholder{color:#A7A199;} .fform .fbtn{border:none; cursor:pointer; background:var(--cta-fill); color:var(--on-orange); font-family:'Inter'; font-weight:600; font-size:13px; padding:10px 18px; border-radius:22px; transition:background .16s;} .fform .fbtn:hover{background:var(--cta-fill-hover);} .fthanks{font-size:14px; color:#EDE9E1; font-family:'Inter'; padding:12px 18px; background:#141414; border:1px solid rgba(255,255,255,.16); border-radius:26px; min-width:300px; text-align:center;} .fsoc{display:flex; align-items:center; gap:14px;} .fsoc a{width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.16); color:#A7A199; display:inline-flex; align-items:center; justify-content:center; transition:border-color .16s, color .16s;} .fsoc a:hover{border-color:var(--orange); color:#FF8A47;} .fsoc svg{width:17px; height:17px;} .fgprofile{font-size:13px; color:#A7A199; font-weight:600; display:inline-flex; align-items:center; gap:7px;} .fgprofile:hover{color:#FF8A47;} .fgprofile .gg{width:15px; height:15px; display:inline-flex;} .fgprofile .gg svg{width:100%; height:100%;} /* payment trust , recognizable marks on white chips (work on light + dark) */ .fpay{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:36px; padding-top:30px; border-top:1px solid rgba(255,255,255,.09);} .fpay-l{font-size:13px; color:#A7A199; font-weight:500;} .fpay-marks{display:flex; gap:10px; flex-wrap:wrap;} .pm{height:30px; min-width:48px; padding:0 11px; border-radius:7px; background:#fff; border:1px solid rgba(0,0,0,.09); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 2px rgba(0,0,0,.05);} .pm .visa{font-family:Arial,Helvetica,sans-serif; font-weight:800; font-style:italic; font-size:15px; letter-spacing:.4px; color:#1434CB;} .pm .venmo{font-family:Arial,Helvetica,sans-serif; font-weight:700; font-size:14px; letter-spacing:-.2px; color:#008CFF;} .pm .cash{display:inline-flex; width:20px; height:20px; border-radius:5px; background:#00D54B; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px; font-family:Arial,Helvetica,sans-serif;} .pm svg{display:block;} .stamp{font-size:88px; font-weight:600; color:#FBF8F2; line-height:0.92; margin:52px 0 0; letter-spacing:-0.03em;} .stamp .dim{color:#FF8A47;} @media(max-width:760px){ .wrap{padding:0 20px;} .block{padding:64px 0;} h2{font-size:28px;} .ftop{grid-template-columns:1fr 1fr; gap:26px;} .stamp{font-size:44px; line-height:1.02;} .fmid{flex-direction:column; align-items:flex-start; gap:20px;} .fform{min-width:0; width:100%;} } /* ============================================================ REVIEWS , shared component (verbatim from par-home-v4.html so every kit page renders the same Google-reviews block as the home). ============================================================ */ .rvwrap{display:grid; grid-template-columns:.78fr 1.22fr; gap:48px; align-items:start; margin-top:32px;} .rsum{border:1px solid var(--line); border-radius:var(--r-16); padding:28px; background:var(--surface);} .rgl{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-bottom:16px;} .rgl .g{width:16px; height:16px; display:inline-flex;} .rgl .g svg{width:100%; height:100%;} .rscore{display:flex; align-items:baseline; gap:10px;} .rscore .n{font-size:72px; font-weight:600; color:var(--text-strong); line-height:1; letter-spacing:-0.03em;} .rscore .stars{color:var(--gold); font-size:15px; letter-spacing:1px;} .rcnt{font-size:13px; color:var(--muted); margin:8px 0 20px;} .bars{display:flex; flex-direction:column; gap:7px; margin-bottom:22px;} .barR{display:grid; grid-template-columns:14px 1fr; gap:9px; align-items:center; font-size:12px; color:var(--muted);} .track{height:6px; background:var(--line-strong); border-radius:4px; overflow:hidden;} .fill{height:100%; background:var(--gold);} .readall{display:block; text-align:center; font-size:13px; color:var(--muted); margin-top:6px;} .readall:hover{color:var(--orange-2);} .rlist{display:flex; flex-direction:column;} .rev{padding:20px 0; border-bottom:1px solid var(--line);} .rev:first-child{padding-top:0;} .rhead{display:flex; align-items:center; gap:12px; margin-bottom:9px;} .av{width:38px; height:38px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; color:var(--muted); flex:none; font-family:'Inter';} .rname{font-size:14px; font-weight:600; color:var(--text-strong); font-family:'Inter';} .rmeta{font-size:12px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;} .rmeta .s{color:var(--gold); letter-spacing:1px;} .rmeta .gg{width:13px; height:13px; display:inline-flex; flex:none;} .rmeta .gg svg{width:100%; height:100%; display:block;} .rev p{font-size:14px; line-height:1.65; color:var(--text);} @media(max-width:760px){ .rvwrap{grid-template-columns:1fr; gap:28px;} .rscore .n{font-size:56px;} } /* ============================================================ MOTION LAYER , premium, calm. Animate ONLY transform + opacity. Scroll-reveal fires ONCE via IntersectionObserver (adds .is-in). All of it OFF for reduced-motion. ============================================================ */ :root{--reveal-ease:cubic-bezier(.22,.61,.36,1);} /* scroll-reveal: hidden until observed, then fade + rise. JS adds .reveal so no-JS visitors always see content (progressive enhancement). */ .reveal{opacity:0; transform:translateY(18px); transition:opacity .55s var(--reveal-ease), transform .55s var(--reveal-ease);} .reveal.is-in{opacity:1; transform:none;} /* gentle sibling stagger , set inline via --d (ms) by the observer */ .reveal{transition-delay:var(--d,0ms);} /* advantage emphasis: each trust number scales in as its cell lands (sequential attention , the eye catches each benefit one by one). Subtle settle, no overshoot. */ .trust .tcell.reveal .tn{transform:scale(.68); transform-origin:left center; opacity:.35;} .trust .tcell.reveal.is-in .tn{transform:none; opacity:1; transition:transform .55s var(--reveal-ease) calc(var(--d,0ms) + 90ms), opacity .45s var(--reveal-ease) calc(var(--d,0ms) + 90ms);} @media(prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} /* everything visible immediately , no hidden-start states */ .reveal{opacity:1!important; transform:none!important;} .trust .tcell .tn{transform:none!important;} } /* ============================================================ SECTION LIBRARY CSS , consolidated into the kit so every page assembled from sections-v4/ inherits it (no per-section inline CSS). Extracted verbatim from par-home-v4.html + the symptom page so the look/spacing/measurement matches the home exactly. hero-symptom · services · service-areas · cta · causes · cost · faq · brand-panel ============================================================ */ /* HERO , answer-first symptom hero. Van glowing on dark, asymmetric. (hero-symptom.html , .hero/.hgrid/.answer/.hcta/.callbox/.trustline/.van) */ .hero{position:relative; padding:54px 0 96px; overflow:hidden;} .hero::before{content:""; position:absolute; top:-10%; right:-8%; width:680px; height:680px; background:radial-gradient(circle, var(--glow-hero) 0%, rgba(244,117,46,0) 62%); pointer-events:none; z-index:0;} .hgrid{position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center;} .hero h1{font-size:58px; line-height:1.0; max-width:14ch; margin:22px 0 22px;} .answer{font-size:19px; color:var(--text); line-height:1.6; max-width:46ch; margin-bottom:26px;} .answer b{color:var(--text-strong); font-weight:600;} .hcta{display:flex; align-items:center; gap:20px; margin-bottom:24px; flex-wrap:wrap;} .callbox .ph{font-weight:600; color:var(--text-strong); font-size:17px; font-family:'Inter',-apple-system,sans-serif;} .callbox small{display:block; color:var(--muted); font-size:13px; margin-top:3px;} .trustline{display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:14px; color:var(--muted);} .trustline .glogo{width:18px; height:18px; display:inline-flex;} .trustline .glogo svg{width:100%; height:100%;} .trustline .stars{color:var(--gold); letter-spacing:1px; font-size:15px;} .trustline .gnum{font-weight:600; color:var(--text-strong); font-size:15px; font-family:'Inter';} .trustline .dot{color:var(--muted-2);} .van{position:relative; display:flex; align-items:center; justify-content:center;} .van::after{content:""; position:absolute; left:50%; bottom:6%; width:74%; height:30px; border-radius:50%; background:radial-gradient(ellipse at center, var(--glow-van) 0%, rgba(0,0,0,0) 70%); filter:blur(8px); transform:translateX(-50%); z-index:-1;} .van img{width:108%; max-width:108%; height:auto; display:block; filter:var(--van-shadow);} /* the repair van drives in from the right and brakes to a stop (once, on load) */ @media (prefers-reduced-motion: no-preference){ @keyframes vanDriveIn{ 0% { opacity:0; transform:translateX(90px); } 68% { opacity:1; transform:translateX(-7px); } 100% { opacity:1; transform:translateX(0); } } .van{ animation:vanDriveIn 1s cubic-bezier(.22,.61,.36,1) .12s both; } } /* SERVICES , numbered rhythm, card-less (services.html , .slist/.srow/.snum/...) */ .slist{border-top:1px solid var(--line); margin-top:44px;} .srow{display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:28px; padding:34px 4px; border-bottom:1px solid var(--line); transition:padding-left .18s ease, background .18s ease;} .srow:hover{padding-left:14px; background:var(--row-hover);} .snum{font-size:52px; font-weight:500; color:var(--muted-2); line-height:1; transition:color .18s ease;} .srow:hover .snum{color:var(--text);} .smid{min-width:0;} .snm{display:flex; align-items:center; gap:14px;} .sic{width:28px; height:28px; color:var(--muted); flex:none;} .sic svg{width:100%; height:100%;} .srow:hover .sic{color:var(--text);} .sname{font-size:25px; font-weight:600; color:var(--text-strong); letter-spacing:-0.02em;} .ssyms{margin-top:10px; font-size:13px; color:var(--muted);} .ssyms a{color:var(--muted); border-bottom:1px solid var(--line-strong);} .ssyms a:hover{color:var(--text-strong); border-color:var(--line-strong);} .sright{text-align:right; display:flex; flex-direction:column; gap:7px; align-items:flex-end; white-space:nowrap;} .sprice{font-family:'Inter'; font-size:16px; font-weight:600; color:var(--text-strong);} .sprice small{color:var(--muted); font-weight:400; font-size:12px; font-family:'Inter';} .smore{font-family:'Inter'; font-size:13px; font-weight:600; color:var(--text-strong);} .smore:hover{color:var(--orange-2);} /* SERVICE AREAS , Philadelphia + Main Line (service-areas.html , .awrap/.amap/...) */ .awrap{display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center;} .agrp{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; font-weight:600;} .anames{font-size:16px; line-height:2; color:var(--text); margin-bottom:20px;} .anames a{color:var(--text-strong); font-weight:500; border-bottom:2px solid var(--line-strong);} .anames a:hover{color:var(--text); border-color:var(--orange);} .anames .plain{color:var(--muted);} .alegend{font-size:12px; color:var(--muted); margin-bottom:20px;} .aask{font-size:14px; color:var(--muted);} .aask b{color:var(--text-strong);} .amap svg{width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:var(--r-16);} .amap .mbg{fill:var(--surface);} .amap .region{fill:var(--region-fill); stroke:var(--line-strong); stroke-width:1.6; stroke-dasharray:6 5;} .amap .dot{fill:var(--muted);} .amap .hub{fill:var(--orange); stroke:var(--bg); stroke-width:2.5;} .amap .lbl{font-family:'Inter'; font-size:11px; fill:var(--text); font-weight:500;} .amap .hublbl{font-family:'Inter'; font-size:12px; fill:var(--text-strong); font-weight:600;} .amapcap{font-size:12px; color:var(--muted); text-align:center; margin-top:12px;} /* CLOSING CTA , premium graphite brand panel + composer (cta.html , .cta/.composer/.cinput/.csend/.calt) */ .cta{position:relative; background:#0C0C0C; padding:150px 0; text-align:center; border-top:1px solid var(--line); overflow:hidden;} .cta::before{content:""; position:absolute; top:-130px; left:50%; transform:translateX(-50%); width:520px; height:520px; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(244,117,46,.07), transparent 70%);} .cta .wrap{position:relative; z-index:1;} .cta h2{font-size:40px; margin-bottom:18px; color:#FBF8F2; font-weight:600; line-height:1.08; letter-spacing:-0.03em;} .cta .csub{font-size:16px; color:#A7A199; max-width:42ch; margin:0 auto 40px; line-height:1.6;} .cta .csub b{color:#FBF8F2; font-weight:600;} .composer{max-width:480px; margin:0 auto; display:flex; align-items:center; gap:10px; background:#141414; border:1px solid rgba(255,255,255,.16); border-radius:30px; padding:7px 7px 7px 22px;} .cinput{flex:1; min-width:0; background:none; border:none; outline:none; color:#FBF8F2; font-size:14px; font-family:'Inter';} .cinput::placeholder{color:#A7A199;} .csend{width:46px; height:46px; border-radius:50%; background:var(--cta-fill); display:flex; align-items:center; justify-content:center; flex:none; border:none; cursor:pointer; transition:background .16s;} .csend:hover{background:var(--cta-fill-hover);} .csend svg{width:20px; height:20px;} .calt{margin-top:24px; font-size:14px; color:#A7A199; line-height:1.7;} .calt a{color:#FBF8F2; font-weight:600;} .calt a:hover{color:#FF8A47;} /* COMMON CAUSES , numbered list (causes.html , .causes/.clist/.crow/.cnum/.cname/.cdesc) */ .causes h2{margin:12px 0 8px;} .clist{border-top:1px solid var(--line); margin-top:36px;} .crow{display:grid; grid-template-columns:64px 1fr; align-items:baseline; gap:24px; padding:30px 4px; border-bottom:1px solid var(--line);} .cnum{font-family:'Inter'; font-size:48px; font-weight:500; color:var(--muted-2); line-height:1;} .cname{font-family:'Fraunces',Georgia,serif; font-size:22px; font-weight:600; color:var(--text-strong); letter-spacing:-0.01em; margin-bottom:8px;} .cdesc{font-size:16px; color:var(--muted); line-height:1.6; max-width:54ch;} /* COST , high-intent answer block (cost.html , .costwrap/.costans/.spark-u) */ .costwrap{max-width:760px; margin:30px 0 0;} .costans{font-size:17px; color:var(--text); line-height:1.7;} .costans b{color:var(--text-strong); font-weight:600;} .costans .spark-u{border-bottom:2px solid var(--orange);} /* scannable text block , a confident serif lead + digestible supporting body */ .costlead{font-size:19px; line-height:1.55; color:var(--text-strong); font-weight:500; letter-spacing:-0.005em; margin:0; max-width:48ch;} .costlead b{color:var(--orange-2); font-weight:600;} .costbody{font-size:15.5px; color:var(--muted); line-height:1.75; max-width:58ch; margin:18px 0 0;} .costbody b{color:var(--text-strong); font-weight:600;} @media(max-width:760px){ .costlead{font-size:18px;} } /* business/priority intake form , typed lead capture on audience pages */ .intakeform{margin-top:30px; max-width:600px;} .ifgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px;} .iflabel{display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:600; color:var(--text-strong); letter-spacing:.01em;} .iflabel .ifopt{color:var(--muted); font-weight:400; font-size:12px;} .iffull{grid-column:1 / -1;} .ifinput{font:inherit; font-size:15px; font-weight:400; color:var(--text-strong); background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 14px; transition:border-color .18s ease;} .ifinput::placeholder{color:var(--muted);} .ifinput:focus{outline:none; border-color:var(--orange);} textarea.ifinput{resize:vertical; min-height:82px;} .ifsubmit{margin-top:22px;} .ifnote{margin-top:14px; font-size:13px; color:var(--muted);} .ifnote a{color:var(--text-strong); font-weight:600;} .ifnote a:hover{color:var(--orange-2);} .ifthanks{margin-top:26px; font-size:17px; color:var(--text); line-height:1.65; max-width:52ch;} .ifthanks b{color:var(--text-strong); font-weight:600;} .ifthanks a{color:var(--text-strong); font-weight:600;} @media(max-width:560px){ .ifgrid{grid-template-columns:1fr;} } /* brand film , poster + click-to-play (video only fetched on click, so zero load cost) */ /* DESKTOP: text left, film right (film spans both text rows, vertically centered) */ .hfgrid{display:grid; align-items:center; grid-template-columns:1.02fr .98fr; gap:0 52px; grid-template-areas:"top film" "bottom film";} .herofilm .hftop{grid-area:top; align-self:end;} .herofilm .hfbottom{grid-area:bottom; align-self:start; margin-top:30px;} .herofilm h1{margin:14px 0 0; max-width:15ch;} .herofilm .deck{margin:18px 0 0; max-width:46ch;} .herofilm .hcta{margin:0;} .herofilm .grating{display:flex; justify-content:flex-start; margin-top:20px;} .filmstage{grid-area:film; position:relative; aspect-ratio:1/1; width:100%; max-width:500px; margin:0 auto; border-radius:20px; overflow:hidden; border:1px solid var(--line-strong); background:#0C0C0C; box-shadow:0 24px 60px rgba(0,0,0,.35), 18px 18px 0 rgba(201,147,10,.20);} /* soft depth + a décalé brass offset (visible on dark) */ .filmplay{position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; display:block;} .filmplay img{width:100%; height:100%; object-fit:cover; display:block;} .filmbtn{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74px; height:74px; border-radius:999px; background:var(--orange-2); color:var(--on-orange); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.4); transition:transform .18s ease;} .filmplay:hover .filmbtn{transform:translate(-50%,-50%) scale(1.08);} .filmbtn svg{margin-left:3px;} .filmvid{display:none; width:100%; height:100%; object-fit:cover;} .filmstage.playing .filmplay{display:none;} .filmstage.playing .filmvid{display:block;} /* MOBILE (<=820): the centered stack Tariq liked , top, film, then CTA + rating */ @media(max-width:820px){ .hfgrid{grid-template-columns:1fr; grid-template-areas:"top" "film" "bottom"; text-align:center;} .herofilm .hftop, .herofilm .hfbottom{align-self:auto;} .herofilm .hfbottom{margin-top:26px;} .herofilm h1, .herofilm .deck{margin-left:auto; margin-right:auto;} .herofilm .hcta{justify-content:center; flex-direction:column; align-items:center;} .herofilm .grating{justify-content:center;} .filmstage{max-width:400px; margin:28px auto 0;} .filmbtn{width:64px; height:64px;} } .priceanchor{margin-top:30px; font-size:16px; color:var(--text); line-height:1.6;} .priceanchor b{color:var(--text-strong); font-weight:600;} .priceanchor .spark-u{border-bottom:2px solid var(--orange);} /* FAQ , visible accordion (faq.html , .faqwrap/.faq + details/summary/.a) */ .faqwrap{max-width:760px; margin:36px auto 0;} .faq{border-bottom:1px solid var(--line);} .faq summary{font-family:'Inter'; font-weight:600; font-size:18px; color:var(--text-strong); padding:24px 44px 24px 0; cursor:pointer; list-style:none; position:relative;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+"; position:absolute; right:4px; top:20px; font-size:24px; color:var(--muted); font-weight:300; line-height:1;} .faq[open] summary::after{color:var(--orange-2); content:"\2212";} .faq .a{font-size:16px; color:var(--muted); line-height:1.65; padding:0 44px 24px 0;} /* BRAND PANEL , graphite family signature (brand-panel.html , .brandpanel/.bp-*) */ .brandpanel{position:relative; background:#0C0C0C; padding:120px 0; text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden;} .brandpanel::before{content:""; position:absolute; top:-130px; left:50%; transform:translateX(-50%); width:520px; height:520px; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(244,117,46,.07), transparent 70%);} .brandpanel .wrap{position:relative; z-index:1;} .bp-spark{display:inline-flex; align-items:center; gap:9px; font-family:'Inter'; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#A7A199; font-weight:600; margin-bottom:22px;} .bp-spark .spark{width:9px; height:9px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(244,117,46,.16);} .bp-head{font-family:'Fraunces',Georgia,serif; font-size:44px; font-weight:600; color:#FBF8F2; line-height:1.06; letter-spacing:-0.01em; max-width:18ch; margin:0 auto 30px;} .bp-head .u{border-bottom:3px solid var(--orange); padding-bottom:2px;} .bp-review{font-size:19px; color:#EDE9E1; line-height:1.65; max-width:50ch; margin:0 auto 22px; font-style:italic;} .bp-by{font-size:14px; color:#A7A199; margin-bottom:30px;} .bp-by .s{color:var(--gold); letter-spacing:1px;} .bp-rate{display:inline-flex; align-items:center; gap:9px; font-size:14px; color:#A7A199;} .bp-rate .glogo{width:18px; height:18px; display:inline-flex;} .bp-rate .glogo svg{width:100%; height:100%;} .bp-rate .stars{color:var(--gold); letter-spacing:1px; font-size:15px;} .bp-rate .v{font-family:'Inter'; font-weight:600; color:#FBF8F2; font-size:15px;} /* HOW IT WORKS + iMESSAGE THREAD , shared component (canonical copy from the home kit, so service pages reuse it instead of inlining a page-local duplicate). .band/.hwwrap/ .lead/.miniL/.hwcta/.hwcall + .phoneC/.phead/.bub/.bin/.bout + play/typing. (.band lives once, above.) */ .hwwrap{display:grid; grid-template-columns:1fr .92fr; gap:56px; align-items:center;} .lead{font-size:16px; color:var(--muted); line-height:1.6; max-width:42ch; margin:16px 0 30px;} .miniL{display:flex; flex-direction:column; gap:18px;} .miniL .s{display:flex; gap:16px; align-items:flex-start;} .miniL .n{width:30px; height:30px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:var(--text-strong); flex:none; font-family:'Inter';} .miniL .tx{font-size:15px; color:var(--text); line-height:1.5;} .miniL .tx b{color:var(--text-strong); font-weight:600;} .hwcta{display:inline-flex; margin-top:30px;} .hwcall{font-size:13px; color:var(--muted); margin-top:14px;} .hwcall a{color:var(--text-strong); font-weight:600;} .hwcall a:hover{color:var(--orange-2);} .phoneC{max-width:340px; margin:0 auto; background:var(--panel); border:1px solid var(--line-strong); border-radius:28px; padding:16px 13px 20px; box-shadow:var(--panel-shadow);} .phead{text-align:center; font-size:12px; color:var(--muted); padding:6px 0 14px; border-bottom:1px solid var(--line); margin-bottom:16px;} .phead b{display:block; color:var(--text-strong); font-size:13px; margin-bottom:3px; font-family:'Inter';} .bub{max-width:80%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.4; margin-bottom:8px;} .bin{background:var(--surface-2); color:var(--text); border-bottom-left-radius:5px;} .bout{background:linear-gradient(#1f9cff,#0a84ff); color:#fff; margin-left:auto; border-bottom-right-radius:5px; font-weight:500;} .phoneC.playing .bub{display:none;} .phoneC.playing .bub.sent{display:block;} .phoneC.playing .bout.sent{display:block;} .bub.sent{animation:bubpop .42s cubic-bezier(.22,.61,.36,1) both;} .bub.typing{display:inline-flex!important; gap:5px; align-items:center; padding:13px 15px;} .bub.typing span{width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.4; animation:typedot 1.1s infinite;} .bub.typing span:nth-child(2){animation-delay:.16s;} .bub.typing span:nth-child(3){animation-delay:.32s;} @keyframes bubpop{from{opacity:0; transform:translateY(9px) scale(.93);} to{opacity:1; transform:none;}} @keyframes typedot{0%,60%,100%{transform:translateY(0); opacity:.35;} 30%{transform:translateY(-4px); opacity:.95;}} @media(prefers-reduced-motion:reduce){ .phoneC.playing .bub{display:block;} .bub.typing{display:none!important;} } /* SECTION LIBRARY , mobile (matches the home/symptom 760 breakpoint) */ @media(max-width:760px){ .hero{padding:30px 0 56px;} .hgrid{grid-template-columns:1fr; gap:14px;} .hero h1{font-size:38px; line-height:1.04; margin:18px 0 18px; max-width:none;} .answer{font-size:17px; max-width:none;} .hcta{flex-direction:column; align-items:stretch; gap:14px;} .btn{width:100%; padding:16px;} .van{margin-top:8px;} .van img{width:100%; max-width:100%;} .srow{grid-template-columns:auto 1fr; gap:12px 16px;} .snum{font-size:30px;} .sright{grid-column:1/-1; text-align:left; align-items:flex-start; flex-direction:row; gap:16px; margin-top:4px;} .awrap{grid-template-columns:1fr; gap:28px;} .amap{order:-1;} .cta{padding:80px 0;} .cta h2{font-size:30px;} .crow{grid-template-columns:48px 1fr; gap:16px;} .cnum{font-size:34px;} .brandpanel{padding:72px 0;} .bp-head{font-size:30px;} .hwwrap{grid-template-columns:1fr; gap:36px;} }