/* ============================================================ JAACK Management Group LLC. Central theme tokens. Owner operated commercial cleaning, Killeen TX. JAN PRO franchise affiliate. Visual direction: "Boardroom at dusk." Dark luxury surface, emerald brand, warm champagne accents, warm bone text. Cream sections punctuate for rhythm. Edit ONLY this file to change palette across the site. ============================================================ */ :root{ /* ---------- DARK SURFACES ---------- */ --bg:#0A0F1A; /* primary page canvas, midnight */ --bg-2:#0D1422; /* slight elevation */ --surface:#11192B; /* card surface on dark */ --surface-2:#152237; /* deeper card */ --surface-3:#1B2B45; /* press states */ --panel:#070B14; /* deepest panel, footer */ --panel-2:#0F1622; /* nav background */ /* ---------- LIGHT SURFACES (cream sections) ---------- */ --bg-light:#F4EFE3; /* warm ivory section */ --bg-light-2:#EFE8D6; /* deeper cream */ --surface-light:#FBF7EC; /* cream card */ /* ---------- BRAND ---------- */ --brand:#147E59; /* emerald, primary brand */ --brand-d:#0E5C40; /* deeper emerald */ --brand-l:#1FA876; /* lighter emerald, glow */ --brand-pop:#22C28C; /* highlight emerald */ --brand-glow:rgba(31,168,118,.18); /* ---------- ACCENT (champagne brass) ---------- */ --brass:#C8A35B; /* warm champagne */ --brass-l:#E0C28A; /* lighter champagne, hover */ --brass-d:#9A7C3F; /* deeper for borders */ --brass-soft:rgba(200,163,91,.16); /* ---------- INK (text) ---------- */ --ink:#F2EDE0; /* primary text on dark, warm bone */ --ink-mid:#B4B0A6; /* body text on dark */ --ink-soft:#85827A; /* tertiary on dark */ --ink-on-light:#0A0F1A; /* text on cream sections */ --ink-on-light-mid:#3A4253; --ink-on-light-soft:#5C6473; /* ---------- BORDERS ---------- */ --border:rgba(242,237,224,.08); --border-md:rgba(242,237,224,.14); --border-strong:rgba(31,168,118,.32); --border-brass:rgba(200,163,91,.32); --border-on-light:rgba(10,15,26,.10); --border-on-light-md:rgba(10,15,26,.18); /* ---------- SHADOWS ---------- */ --shadow-1:0 1px 2px rgba(0,0,0,.18),0 0 0 1px rgba(242,237,224,.04); --shadow-2:0 8px 24px -12px rgba(0,0,0,.46),0 2px 4px rgba(0,0,0,.18); --shadow-3:0 28px 56px -28px rgba(20,126,89,.42),0 8px 16px rgba(0,0,0,.20); --shadow-glow:0 0 40px rgba(31,168,118,.16),0 0 0 1px rgba(31,168,118,.12); /* ---------- TYPE ---------- */ --fd:'Fraunces',Georgia,'Times New Roman',serif; --fb:'Inter','Helvetica Neue',-apple-system,BlinkMacSystemFont,sans-serif; --fmono:'SF Mono',Menlo,Consolas,monospace; /* ---------- LAYOUT ---------- */ --maxw:1280px; --maxw-prose:680px; --maxw-wide:1480px; --gutter:32px; --r-sm:6px; --r:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; /* ---------- MOTION ---------- */ --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); } /* ============================================================ LIGHT MODE OVERRIDES. Triggered by [data-theme="light"] on . Footer and the dark hero background stay dark for visual rhythm. ============================================================ */ [data-theme="light"]{ --bg:#F7F4ED; --bg-2:#EFE9D8; --surface:#FBF8EE; --surface-2:#ECE7DA; --surface-3:#E1DBC9; --panel:#0A0F1A; /* footer stays dark for contrast */ --panel-2:#0F1622; --bg-light:#F7F4ED; --bg-light-2:#EFE9D8; --surface-light:#FBF8EE; --brand:#0E5C40; /* deeper for contrast on light */ --brand-d:#08402C; --brand-l:#147E59; --brand-pop:#1FA876; --brand-glow:rgba(20,126,89,.18); --brass:#9A7C3F; --brass-l:#C8A35B; --brass-d:#74592A; --brass-soft:rgba(154,124,63,.16); --ink:#0A0F1A; --ink-mid:#3A4253; --ink-soft:#5C6473; --ink-on-light:#0A0F1A; --ink-on-light-mid:#3A4253; --ink-on-light-soft:#5C6473; --border:rgba(10,15,26,.10); --border-md:rgba(10,15,26,.16); --border-strong:rgba(20,126,89,.32); --border-brass:rgba(154,124,63,.32); --border-on-light:rgba(10,15,26,.10); --border-on-light-md:rgba(10,15,26,.18); --shadow-1:0 1px 2px rgba(10,15,26,.06),0 0 0 1px rgba(10,15,26,.04); --shadow-2:0 8px 24px -12px rgba(10,15,26,.18),0 2px 4px rgba(10,15,26,.06); --shadow-3:0 28px 56px -28px rgba(20,126,89,.28),0 8px 16px rgba(10,15,26,.08); } /* In light mode, certain surfaces stay dark (footer, alt accents). Override section.alt to a deeper cream for breathing rhythm. */ [data-theme="light"] section.alt{background:var(--bg-2)} [data-theme="light"] section.alt::before{ background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(20,126,89,.06) 0%,transparent 60%); } [data-theme="light"] .nav{ background:rgba(247,244,237,.86); border-bottom-color:var(--border); } [data-theme="light"] .nav.is-scrolled{ background:rgba(247,244,237,.96); box-shadow:0 1px 0 var(--border),0 6px 18px -16px rgba(10,15,26,.18); } [data-theme="light"] .nav-utility{ background:#0A0F1A; /* utility stays dark even in light mode for elite feel */ color:#B4B0A6; } [data-theme="light"] .nav-utility .utility-link{color:#B4B0A6} [data-theme="light"] .nav-utility .utility-link:hover{color:#E0C28A} [data-theme="light"] .nav-utility .utility-badge{color:#F2EDE0} [data-theme="light"] .nav-utility .utility-divider{background:rgba(242,237,224,.14)} [data-theme="light"] .stats-bar{background:#0A0F1A;color:#F2EDE0} [data-theme="light"] .stats-bar .stat-l{color:#B4B0A6} [data-theme="light"] .hero{background:var(--bg)} [data-theme="light"] .hero::before{ background: radial-gradient(ellipse 70% 60% at 80% 0%,rgba(20,126,89,.08) 0%,transparent 60%), radial-gradient(ellipse 60% 50% at 5% 100%,rgba(154,124,63,.10) 0%,transparent 60%); } [data-theme="light"] .hero::after{ background-image: linear-gradient(rgba(10,15,26,.030) 1px,transparent 1px), linear-gradient(90deg,rgba(10,15,26,.030) 1px,transparent 1px); } [data-theme="light"] .subhero{background:var(--bg)} [data-theme="light"] .subhero::before{ background: radial-gradient(ellipse 70% 50% at 90% 0%,rgba(20,126,89,.06) 0%,transparent 60%), radial-gradient(ellipse 50% 40% at 10% 100%,rgba(154,124,63,.05) 0%,transparent 60%); } [data-theme="light"] .service-card, [data-theme="light"] .testimonial, [data-theme="light"] .vertical{ background:var(--surface); border-color:var(--border); } [data-theme="light"] .service-card:hover, [data-theme="light"] .testimonial:hover{background:#fff} [data-theme="light"] .vertical:hover{background:#fff} [data-theme="light"] .verticals{background:var(--border-md);border-color:var(--border-md)} [data-theme="light"] .form{background:var(--surface)} [data-theme="light"] .field input, [data-theme="light"] .field select, [data-theme="light"] .field textarea{ background:var(--bg);color:var(--ink); border-color:var(--border-md); } [data-theme="light"] .field input:focus, [data-theme="light"] .field select:focus, [data-theme="light"] .field textarea:focus{ background:#fff; border-color:var(--brand); box-shadow:0 0 0 3px rgba(20,126,89,.16); } [data-theme="light"] .choice{background:var(--bg)} [data-theme="light"] .choice:has(input:checked){ background:var(--brand);color:#F2EDE0;border-color:var(--brand); } [data-theme="light"] .cta-block{ background:linear-gradient(140deg,#0A0F1A 0%,#11192B 100%); color:#F2EDE0; border-color:transparent; } [data-theme="light"] .cta-block h2{color:#F2EDE0} [data-theme="light"] .cta-block p{color:#B4B0A6} [data-theme="light"] .cta-block .phone{color:#F2EDE0} [data-theme="light"] .cta-block .eyebrow{color:#E0C28A} [data-theme="light"] .cta-block .eyebrow::before{background:#C8A35B} /* On dark surfaces inside light mode (cta-block, footer), keep ink white */ [data-theme="light"] .footer, [data-theme="light"] .nav-utility, [data-theme="light"] .stats-bar{ --ink:#F2EDE0; --ink-mid:#B4B0A6; --ink-soft:#85827A; } [data-theme="light"] .nav-utility .utility-badge::before{background:#22C28C} [data-theme="light"] body{transition:background-color .35s ease,color .25s ease} /* Theme toggle button itself respects mode */ [data-theme="light"] .theme-toggle .theme-toggle-sun{display:none} [data-theme="light"] .theme-toggle .theme-toggle-moon{display:block} /* ============================================================ RESET AND BASE ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--fb); font-size:16px; line-height:1.6; font-feature-settings:"kern","liga","calt","ss01"; } img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit} /* Skip to content for accessibility */ .skip-link{ position:absolute;left:-9999px;top:0; background:var(--brand);color:var(--ink); padding:12px 18px;font-family:var(--fb);font-size:13px; font-weight:600;letter-spacing:.08em;text-transform:uppercase; z-index:200;border-radius:0 0 var(--r) 0; } .skip-link:focus{left:0;outline:2px solid var(--brass);outline-offset:2px} :focus-visible{ outline:2px solid var(--brass);outline-offset:3px; border-radius:2px; } ::selection{background:var(--brand);color:var(--ink)} /* ============================================================ CONTAINER ============================================================ */ .container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} .container-narrow{max-width:920px;margin:0 auto;padding:0 var(--gutter)} .container-wide{max-width:var(--maxw-wide);margin:0 auto;padding:0 var(--gutter)} /* ============================================================ TYPE SCALE ============================================================ */ h1,h2,h3,h4{ font-family:var(--fd); font-weight:500; letter-spacing:-.02em; color:var(--ink); margin:0 0 .4em; line-height:1.06; } h1{font-size:clamp(44px,6.4vw,84px)} h2{font-size:clamp(32px,3.8vw,52px)} h3{font-size:clamp(22px,2.2vw,28px)} h4{font-size:clamp(18px,1.6vw,22px);letter-spacing:-.01em} h1 em,h2 em,h3 em{ font-style:italic; font-weight:400; background:linear-gradient(120deg,var(--brand-l) 0%,var(--brand-pop) 50%,var(--brand-l) 100%); background-size:200% 100%; -webkit-background-clip:text;background-clip:text; color:transparent; animation:shimmer 9s ease-in-out infinite; } @keyframes shimmer{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} } @media (prefers-reduced-motion:reduce){h1 em,h2 em,h3 em{animation:none}} p{margin:0 0 1em;color:var(--ink-mid);line-height:1.7} p strong{color:var(--ink);font-weight:600} .eyebrow{ display:inline-flex;align-items:center;gap:12px; font-family:var(--fb);font-size:11px;font-weight:600; letter-spacing:.24em;text-transform:uppercase; color:var(--brass-l); } .eyebrow::before{ content:'';width:28px;height:1px;background:var(--brass); } .eyebrow.on-light{color:var(--brand-d)} .eyebrow.on-light::before{background:var(--brass-d)} .lede{ font-size:clamp(17px,1.6vw,20px); color:var(--ink-mid); line-height:1.65; max-width:var(--maxw-prose); } /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--fb);font-size:13px;font-weight:600; letter-spacing:.14em;text-transform:uppercase; padding:16px 30px;border-radius:var(--r); border:1px solid transparent;cursor:pointer; transition:transform .25s var(--ease-out),background .25s ease, color .25s ease,border-color .25s ease,box-shadow .25s ease, letter-spacing .25s ease; text-decoration:none; } .btn:active{transform:translateY(1px)} .btn-primary{ background:var(--brand);color:var(--ink); box-shadow:var(--shadow-2); } .btn-primary:hover{ background:var(--brand-l); letter-spacing:.16em; box-shadow:var(--shadow-3); transform:translateY(-2px); } .btn-secondary{ background:transparent;color:var(--ink); border-color:var(--border-md); } .btn-secondary:hover{ border-color:var(--brass-l); color:var(--brass-l); background:rgba(200,163,91,.06); } .btn-brass{ background:var(--brass);color:var(--panel); box-shadow:var(--shadow-2); } .btn-brass:hover{ background:var(--brass-l); letter-spacing:.16em; transform:translateY(-2px); box-shadow:0 16px 36px -16px rgba(200,163,91,.55); } .btn-on-light{ background:var(--ink-on-light);color:var(--ink); } .btn-on-light:hover{background:var(--brand);color:var(--ink)} /* ============================================================ DOUBLE NAV BAR Utility bar (top) + Main nav (sticky). ============================================================ */ .nav-utility{ background:var(--panel); border-bottom:1px solid var(--border); font-family:var(--fb);font-size:12px;font-weight:500; color:var(--ink-mid); } .nav-utility .container{ display:flex;align-items:center;justify-content:space-between; height:40px;gap:24px;flex-wrap:nowrap; } .nav-utility-left{display:flex;align-items:center;gap:24px;flex-wrap:wrap} .nav-utility-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .utility-link{ display:inline-flex;align-items:center;gap:8px; color:var(--ink-mid);transition:color .2s ease; letter-spacing:.02em; } .utility-link:hover{color:var(--brass-l)} .utility-link svg{width:13px;height:13px;color:var(--brass)} .utility-divider{ width:1px;height:14px;background:var(--border-md);display:inline-block; } .utility-badge{ display:inline-flex;align-items:center;gap:8px; font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--ink); } .utility-badge::before{ content:'';width:6px;height:6px;border-radius:50%; background:var(--brand-pop);box-shadow:0 0 8px var(--brand-glow); } @media(max-width:880px){ .nav-utility{display:none} } .nav{ position:sticky;top:0;z-index:100; background:rgba(15,22,34,.78); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--border); transition:background .2s ease,border-color .2s ease,box-shadow .2s ease; } .nav.is-scrolled{ background:rgba(7,11,20,.92); box-shadow:0 1px 0 var(--border),0 8px 24px -16px rgba(0,0,0,.5); } .nav-row{ display:flex;align-items:center;justify-content:space-between; height:76px;max-width:var(--maxw-wide);margin:0 auto;padding:0 var(--gutter); gap:24px; } .nav-brand{ display:flex;align-items:center;gap:14px; text-decoration:none;color:var(--ink); font-family:var(--fd);font-size:20px;font-weight:600; letter-spacing:-.01em; } .nav-brand-mark{ width:38px;height:38px;border-radius:9px; background:linear-gradient(135deg,var(--brand-d) 0%,var(--brand) 100%); color:var(--brass-l); display:flex;align-items:center;justify-content:center; font-family:var(--fd);font-weight:600;font-size:18px; letter-spacing:0; border:1px solid var(--border-brass); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 12px rgba(20,126,89,.18); } .nav-brand-text{display:flex;flex-direction:column;line-height:1} .nav-brand-text span:first-child{font-size:17px;color:var(--ink)} .nav-brand-text span:last-child{ font-family:var(--fb);font-size:9.5px;font-weight:600; letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft); margin-top:4px; } .nav-links{ display:flex;align-items:center;gap:4px; list-style:none;margin:0;padding:0; } .nav-links a{ font-family:var(--fb);font-size:14px;font-weight:500; color:var(--ink);padding:9px 16px;border-radius:8px; transition:background .15s ease,color .15s ease; letter-spacing:.01em; } .nav-links a:hover{background:rgba(200,163,91,.08);color:var(--brass-l)} .nav-links a.is-active{color:var(--brass-l)} .nav-cta{margin-left:8px} .nav-cta a{ background:var(--brand);color:var(--ink) !important; padding:11px 20px !important;border-radius:var(--r); font-size:12px !important;font-weight:600 !important; letter-spacing:.14em;text-transform:uppercase; border:1px solid var(--border-brass); transition:all .25s var(--ease-out); } .nav-cta a:hover{ background:var(--brand-l) !important; transform:translateY(-1px); box-shadow:0 12px 24px -10px rgba(31,168,118,.45); } /* Theme toggle (sun / moon) */ .theme-toggle{ background:none;border:1px solid var(--border-md); cursor:pointer;width:40px;height:40px; border-radius:8px;color:var(--ink); display:inline-flex;align-items:center;justify-content:center; transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; margin-right:8px; } .theme-toggle:hover{ background:rgba(200,163,91,.10); border-color:var(--border-brass); color:var(--brass-l); transform:translateY(-1px); } .theme-toggle svg{width:18px;height:18px} .theme-toggle .theme-toggle-sun{display:block} .theme-toggle .theme-toggle-moon{display:none} @media(max-width:880px){ .theme-toggle{margin-right:0} } .nav-toggle{ display:none;background:none;border:none;cursor:pointer; width:44px;height:44px;align-items:center;justify-content:center; border-radius:8px;color:var(--ink); } .nav-toggle:hover{background:rgba(242,237,224,.08)} .nav-toggle svg{width:22px;height:22px} @media(max-width:880px){ .nav-links,.nav-cta{display:none} .nav-toggle{display:inline-flex} .nav.is-open .nav-mobile{display:flex} } .nav-mobile{ display:none;flex-direction:column; border-top:1px solid var(--border); padding:14px var(--gutter) 22px;gap:4px; background:var(--panel); } .nav-mobile a{ font-family:var(--fb);font-size:16px;font-weight:500; color:var(--ink);padding:14px 8px;border-bottom:1px solid var(--border); } .nav-mobile a:last-of-type{border-bottom:0} .nav-mobile .btn{margin-top:14px;align-self:flex-start} /* ============================================================ SECONDARY SUB NAV. Sticky below the main nav. Section anchor links with active state on scroll. ============================================================ */ .subnav{ position:sticky;top:76px;z-index:99; background:rgba(15,22,34,.86); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--border); } [data-theme="light"] .subnav{ background:rgba(247,244,237,.92); border-bottom-color:var(--border); } .subnav-row{ max-width:var(--maxw-wide); margin:0 auto;padding:0 var(--gutter); display:flex;align-items:center; height:48px;gap:8px; overflow-x:auto;overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; } .subnav-row::-webkit-scrollbar{display:none} .subnav-link{ flex:0 0 auto; display:inline-flex;align-items:center; font-family:var(--fb);font-size:13px;font-weight:500; color:var(--ink-mid); padding:8px 16px;border-radius:8px; letter-spacing:.02em; transition:color .2s ease,background .2s ease; position:relative; white-space:nowrap; } .subnav-link:hover{ color:var(--brass-l); background:rgba(200,163,91,.06); } .subnav-link.is-active{ color:var(--brand-pop); background:rgba(31,168,118,.10); } [data-theme="light"] .subnav-link.is-active{ color:var(--brand);background:rgba(20,126,89,.10); } .subnav-link .num{ font-family:var(--fd);font-size:11px;font-weight:500; color:var(--brass);margin-right:8px;letter-spacing:.04em; } .subnav-link:hover .num{color:var(--brass-l)} .subnav-divider{ flex:0 0 auto; width:1px;height:18px; background:var(--border-md); margin:0 4px; } /* If the page has a subnav, push the hero/subhero so the first section is visible */ .has-subnav{scroll-padding-top:130px} html{scroll-padding-top:90px} .has-subnav .hero{padding-top:80px} .has-subnav .subhero{padding-top:64px} /* ============================================================ HERO ============================================================ */ .hero{ position:relative;overflow:hidden; padding:120px 0 100px; background:var(--bg); } .hero::before{ content:'';position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse 70% 60% at 80% 0%,rgba(31,168,118,.16) 0%,transparent 60%), radial-gradient(ellipse 60% 50% at 5% 100%,rgba(200,163,91,.10) 0%,transparent 60%), radial-gradient(ellipse 90% 50% at 50% 110%,rgba(20,126,89,.20) 0%,transparent 60%); z-index:0; animation:hero-drift 28s ease-in-out infinite alternate; } @keyframes hero-drift{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(2%,1%,0) scale(1.04)} 100%{transform:translate3d(-1.5%,-1%,0) scale(1.02)} } @media (prefers-reduced-motion:reduce){.hero::before{animation:none}} .hero::after{ content:'';position:absolute;inset:0;pointer-events:none; background-image: linear-gradient(rgba(242,237,224,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(242,237,224,.025) 1px,transparent 1px); background-size:96px 96px; mask-image:radial-gradient(ellipse at 60% 30%,#000 30%,transparent 80%); -webkit-mask-image:radial-gradient(ellipse at 60% 30%,#000 30%,transparent 80%); z-index:0; } .hero .container{position:relative;z-index:2} .hero-grid{ display:grid;gap:64px; grid-template-columns:1fr;align-items:center; } @media(min-width:980px){ .hero-grid{grid-template-columns:1.15fr .85fr;gap:96px} } .hero h1{ font-size:clamp(46px,6.6vw,86px); line-height:1.02;letter-spacing:-.025em; margin:22px 0 26px;color:var(--ink); } .hero .lede{margin:0 0 38px;max-width:560px;color:var(--ink-mid)} .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center} .hero-ctas .phone-link{ font-family:var(--fb);font-size:14px;font-weight:600; color:var(--ink);letter-spacing:.02em; display:inline-flex;align-items:center;gap:10px; padding:14px 8px; } .hero-ctas .phone-link:hover{color:var(--brass-l)} .hero-ctas .phone-link svg{width:16px;height:16px;color:var(--brass)} .hero-trust{ margin-top:56px;display:flex;flex-wrap:wrap; gap:18px 28px;align-items:center; font-family:var(--fb);font-size:12px;font-weight:500; letter-spacing:.06em;color:var(--ink-soft); } .hero-trust strong{color:var(--ink);font-weight:600} .hero-trust .badge{ display:inline-flex;align-items:center;gap:8px; padding:8px 14px;border-radius:999px; background:rgba(242,237,224,.04); border:1px solid var(--border-md); color:var(--ink); } .hero-trust .badge::before{ content:'';width:6px;height:6px;border-radius:50%; background:var(--brand-pop); } /* Hero visual */ .hero-visual{ position:relative;border-radius:var(--r-lg);overflow:hidden; background:var(--surface); box-shadow:var(--shadow-3); border:1px solid var(--border-md); aspect-ratio:4/5; } .hero-visual::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg,transparent 50%,rgba(7,11,20,.65) 100%); } .hero-visual-card{ position:absolute;left:24px;bottom:24px;right:24px;z-index:2; background:rgba(15,22,34,.92); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid var(--border-md); border-radius:var(--r-md); padding:20px 24px; } .hero-visual-card .label{ font-family:var(--fb);font-size:10.5px;font-weight:600; letter-spacing:.24em;text-transform:uppercase;color:var(--brass-l); margin-bottom:8px; } .hero-visual-card .text{ font-family:var(--fd);font-size:18px;font-weight:500; line-height:1.35;color:var(--ink);letter-spacing:-.01em; } .hero-visual-svg{width:100%;height:100%;display:block} /* ============================================================ STATS BAR ============================================================ */ .stats-bar{ background:var(--panel); color:var(--ink); padding:44px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .stats-bar .container{ display:grid;grid-template-columns:repeat(4,1fr);gap:24px; max-width:var(--maxw-wide); } @media(max-width:780px){.stats-bar .container{grid-template-columns:repeat(2,1fr)}} .stat{text-align:left;padding:0 8px} .stat-n{ font-family:var(--fd);font-weight:500; font-size:clamp(30px,3.6vw,44px); color:var(--brand-pop);line-height:1;margin-bottom:8px; letter-spacing:-.02em; } .stat-l{ font-family:var(--fb);font-size:11px;font-weight:500; letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mid); } /* ============================================================ SECTIONS ============================================================ */ section{padding:112px 0;position:relative} section.tight{padding:72px 0} section.alt{background:var(--bg-2);position:relative} section.alt::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(31,168,118,.06) 0%,transparent 60%); } section.alt > *{position:relative;z-index:1} section.cream{ background:var(--bg-light); color:var(--ink-on-light); } section.cream h1,section.cream h2,section.cream h3,section.cream h4{ color:var(--ink-on-light); } section.cream h2 em,section.cream h1 em,section.cream h3 em{ background:linear-gradient(120deg,var(--brand-d) 0%,var(--brand) 50%,var(--brand-d) 100%); background-size:200% 100%; -webkit-background-clip:text;background-clip:text; color:transparent; } section.cream p{color:var(--ink-on-light-mid)} section.cream .eyebrow{color:var(--brand-d)} section.cream .eyebrow::before{background:var(--brass-d)} section.cream .lede{color:var(--ink-on-light-mid)} .section-head{margin-bottom:64px;max-width:820px} .section-head .eyebrow{margin-bottom:22px} .section-head h2{margin-bottom:18px} .section-head .lede{margin:0} /* ============================================================ SERVICE CARDS ============================================================ */ .service-grid{ display:grid;gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } .service-card{ background:var(--surface); border:1px solid var(--border-md); border-radius:var(--r-md); padding:34px 28px 28px; transition:transform .35s var(--ease-out), border-color .25s ease,box-shadow .25s ease, background .25s ease; text-decoration:none;color:inherit; display:flex;flex-direction:column; position:relative;overflow:hidden; } .service-card::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--brass) 0%,var(--brand-l) 100%); opacity:0;transition:opacity .25s ease; } .service-card:hover{ transform:translateY(-4px); border-color:var(--border-strong); box-shadow:var(--shadow-3); background:var(--surface-2); } .service-card:hover::before{opacity:1} .service-card .icon{ width:48px;height:48px;border-radius:11px; background:rgba(31,168,118,.12); display:flex;align-items:center;justify-content:center; color:var(--brand-pop);margin-bottom:22px; border:1px solid var(--border-strong); } .service-card .icon svg{width:24px;height:24px} .service-card h3{ font-family:var(--fd);font-size:23px;font-weight:500; letter-spacing:-.01em;color:var(--ink);margin:0 0 12px; } .service-card p{ font-size:14.5px;color:var(--ink-mid); line-height:1.65;margin:0 0 24px; } .service-card .arrow{ margin-top:auto; font-family:var(--fb);font-size:11.5px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--brass-l); display:inline-flex;align-items:center;gap:8px;transition:gap .2s ease,color .2s ease; } .service-card:hover .arrow{gap:12px;color:var(--brand-pop)} /* Cream variant for service cards inside cream sections */ section.cream .service-card{ background:var(--surface-light); border-color:var(--border-on-light); color:var(--ink-on-light); } section.cream .service-card:hover{ background:#fff;border-color:var(--brand); } section.cream .service-card h3{color:var(--ink-on-light)} section.cream .service-card p{color:var(--ink-on-light-mid)} section.cream .service-card .icon{ background:rgba(20,126,89,.10);color:var(--brand); border-color:rgba(20,126,89,.18); } section.cream .service-card .arrow{color:var(--brand-d)} /* ============================================================ VALUE PROPS ============================================================ */ .value-grid{ display:grid;gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } .value{ padding:30px 0;border-top:1px solid var(--border); } .value-num{ font-family:var(--fd);font-size:14px;font-weight:500; color:var(--brass);letter-spacing:.04em;margin-bottom:18px; } .value h3{ font-family:var(--fd);font-size:23px;font-weight:500; letter-spacing:-.01em;color:var(--ink);margin:0 0 10px; } .value p{font-size:14.5px;color:var(--ink-mid);line-height:1.65;margin:0;max-width:380px} section.cream .value{border-top-color:var(--border-on-light)} section.cream .value h3{color:var(--ink-on-light)} section.cream .value p{color:var(--ink-on-light-mid)} section.cream .value-num{color:var(--brass-d)} /* ============================================================ PROCESS TIMELINE ============================================================ */ .process{ display:grid;gap:0; grid-template-columns:repeat(4,1fr); position:relative; } @media(max-width:880px){.process{grid-template-columns:1fr;gap:32px}} .process::before{ content:'';position:absolute; left:36px;right:36px;top:38px;height:1px; background:var(--border-md); z-index:0; } @media(max-width:880px){.process::before{display:none}} .process-step{position:relative;z-index:2;padding:0 16px} .process-step .num{ width:76px;height:76px;border-radius:50%; background:var(--bg); border:1px solid var(--border-md); color:var(--brass-l); display:flex;align-items:center;justify-content:center; font-family:var(--fd);font-size:26px;font-weight:500; margin-bottom:28px; } section.cream .process-step .num{ background:var(--surface-light);border-color:var(--border-on-light);color:var(--brand-d); } section.cream .process::before{background:var(--border-on-light-md)} .process-step h3{font-size:18px;letter-spacing:-.005em;margin:0 0 8px} .process-step p{font-size:14px;color:var(--ink-mid);line-height:1.6;margin:0;max-width:240px} /* ============================================================ VERTICAL PROOF ============================================================ */ .verticals{ display:grid;gap:1px; grid-template-columns:repeat(3,1fr); background:var(--border-md); border:1px solid var(--border-md); border-radius:var(--r-md);overflow:hidden; } @media(max-width:880px){.verticals{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.verticals{grid-template-columns:1fr}} .vertical{ background:var(--surface);padding:36px 30px; display:flex;flex-direction:column;gap:14px; text-decoration:none;color:inherit; transition:background .2s ease; } .vertical:hover{background:var(--surface-2)} .vertical .label{ font-family:var(--fb);font-size:10.5px;font-weight:600; letter-spacing:.24em;text-transform:uppercase;color:var(--brass-l); } .vertical h3{ font-family:var(--fd);font-size:25px;font-weight:500; letter-spacing:-.01em;color:var(--ink);margin:0; } .vertical p{font-size:14px;color:var(--ink-mid);margin:0;line-height:1.6} .vertical .arrow{ margin-top:auto;color:var(--brand-pop); font-family:var(--fb);font-size:11px;font-weight:600; letter-spacing:.2em;text-transform:uppercase; display:inline-flex;align-items:center;gap:8px;transition:gap .2s ease; } .vertical:hover .arrow{gap:12px} /* ============================================================ TESTIMONIALS ============================================================ */ .quote-card{ border-left:2px solid var(--brass); padding:14px 0 14px 32px; max-width:760px; margin:0; } .quote-card blockquote{ font-family:var(--fd);font-size:clamp(22px,2.4vw,32px); font-style:italic;font-weight:400;line-height:1.35; color:var(--ink);margin:0 0 22px;letter-spacing:-.01em; } .quote-card cite{ font-family:var(--fb);font-size:13px;font-weight:500; font-style:normal;letter-spacing:.04em;color:var(--ink-soft); } .quote-card cite strong{color:var(--ink);font-weight:600;display:block;margin-bottom:2px} section.cream .quote-card blockquote{color:var(--ink-on-light)} section.cream .quote-card cite{color:var(--ink-on-light-soft)} section.cream .quote-card cite strong{color:var(--ink-on-light)} .testimonial-grid{ display:grid;gap:24px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); } .testimonial{ background:var(--surface); border:1px solid var(--border-md); border-radius:var(--r-md); padding:34px 30px; transition:transform .25s var(--ease-out),box-shadow .25s ease,border-color .25s ease; } .testimonial:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--border-strong); } .testimonial .stars{color:var(--brass);font-size:14px;letter-spacing:.16em;margin-bottom:16px} .testimonial blockquote{ font-family:var(--fd);font-size:18px;font-weight:500;font-style:italic; line-height:1.5;color:var(--ink);margin:0 0 20px; } .testimonial cite{ font-family:var(--fb);font-size:13px;font-style:normal; color:var(--ink-soft); } .testimonial cite strong{color:var(--ink);display:block;font-weight:600} /* ============================================================ SERVICE AREA / MAP ============================================================ */ .area-grid{ display:grid;gap:56px;align-items:center; grid-template-columns:1fr; } @media(min-width:880px){.area-grid{grid-template-columns:1fr 1.2fr}} .area-list{ list-style:none;padding:0;margin:24px 0 0; display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px; } .area-list li{ font-family:var(--fb);font-size:15px;font-weight:500; color:var(--ink);padding:11px 0; border-bottom:1px solid var(--border); display:flex;align-items:center;gap:12px; } .area-list li::before{ content:'';width:6px;height:6px;border-radius:50%;background:var(--brass); flex-shrink:0; } section.cream .area-list li{color:var(--ink-on-light);border-bottom-color:var(--border-on-light)} .area-map{ background:var(--surface); border:1px solid var(--border-md); border-radius:var(--r-md); aspect-ratio:1.1/1; position:relative;overflow:hidden; box-shadow:var(--shadow-2); } .area-map svg{width:100%;height:100%} /* ============================================================ CTA BLOCK ============================================================ */ .cta-block{ background:linear-gradient(140deg,var(--surface) 0%,var(--surface-2) 100%); color:var(--ink); border-radius:var(--r-lg); padding:72px 64px; position:relative;overflow:hidden; border:1px solid var(--border-md); } .cta-block::before{ content:'';position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse 70% 60% at 90% 10%,rgba(200,163,91,.18) 0%,transparent 60%), radial-gradient(ellipse 60% 50% at 5% 85%,rgba(20,126,89,.28) 0%,transparent 65%); } .cta-block > *{position:relative;z-index:1} .cta-block h2{margin-bottom:16px} .cta-block p{color:var(--ink-mid);font-size:17px;max-width:580px;margin-bottom:32px;line-height:1.6} .cta-block .ctas{display:flex;gap:18px;flex-wrap:wrap;align-items:center} .cta-block .phone{ font-family:var(--fb);font-size:14px;font-weight:600; color:var(--ink);letter-spacing:.04em; padding:14px 4px;display:inline-flex;align-items:center;gap:10px; } .cta-block .phone:hover{color:var(--brass-l)} .cta-block .phone svg{color:var(--brass)} @media(max-width:680px){.cta-block{padding:48px 28px}} /* ============================================================ FORMS ============================================================ */ .form{ background:var(--surface); border:1px solid var(--border-md); border-radius:var(--r-md); padding:40px 36px; } .form h3{ font-family:var(--fd);font-size:24px;font-weight:500;margin:0 0 24px; } .field{margin-bottom:20px} .field label{ display:block;font-family:var(--fb);font-size:12px;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft); margin-bottom:10px; } .field input,.field select,.field textarea{ width:100%; font-family:var(--fb);font-size:15px;color:var(--ink); background:var(--bg); border:1px solid var(--border-md); border-radius:var(--r-sm); padding:14px 16px; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; } .field input::placeholder,.field textarea::placeholder{color:var(--ink-soft)} .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand-pop); background:var(--surface-2); box-shadow:0 0 0 3px rgba(31,168,118,.20); } .field textarea{min-height:130px;resize:vertical} .field-row{display:grid;gap:16px;grid-template-columns:1fr 1fr} @media(max-width:580px){.field-row{grid-template-columns:1fr}} .choice-grid{ display:grid;gap:10px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); } .choice{ position:relative;display:block;cursor:pointer; background:var(--bg); border:1px solid var(--border-md); border-radius:var(--r-sm); padding:14px 16px; font-family:var(--fb);font-size:14px;font-weight:500;color:var(--ink); text-align:center;transition:all .2s ease; } .choice:hover{border-color:var(--brand-l);background:var(--surface-2)} .choice input{position:absolute;opacity:0;pointer-events:none} .choice:has(input:checked){ background:var(--brand);border-color:var(--brand-l);color:var(--ink); box-shadow:0 0 0 1px var(--brand-l) inset; } .honeypot{ position:absolute !important;left:-9999px !important;top:auto !important; width:1px !important;height:1px !important;overflow:hidden !important; } .form-success,.form-error{ display:none;padding:14px 18px;border-radius:var(--r-sm); font-family:var(--fb);font-size:14px;margin-top:14px; } .form-success{ background:rgba(31,168,118,.10);color:var(--brand-pop); border:1px solid var(--border-strong); } .form-error{ background:rgba(200,55,55,.08);color:#E58787; border:1px solid rgba(200,55,55,.24); } .form.is-success .form-success{display:block} .form.is-error .form-error{display:block} /* ============================================================ FOOTER. Generous, breathing room, three column. ============================================================ */ .footer{ background:var(--panel); color:var(--ink-mid); padding:120px 0 40px; border-top:1px solid var(--border); position:relative;overflow:hidden; } .footer::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(31,168,118,.10) 0%,transparent 60%); } .footer .container-wide{position:relative;z-index:1} .footer-top{ display:grid;gap:64px; grid-template-columns:1.4fr 1fr 1fr; margin-bottom:96px; padding-bottom:56px; border-bottom:1px solid var(--border); } @media(max-width:1024px){.footer-top{grid-template-columns:1fr 1fr;gap:48px}} @media(max-width:680px){.footer-top{grid-template-columns:1fr;gap:48px}} .footer-brand{max-width:480px} .footer-brand .nav-brand{margin-bottom:24px} .footer-brand .nav-brand-text span:first-child{color:var(--ink);font-size:19px} .footer-brand .nav-brand-text span:last-child{color:var(--ink-soft)} .footer-brand p{ font-size:15px;color:var(--ink-mid); line-height:1.7;max-width:420px;margin:0 0 24px; } .footer-brand .janpro-badge{ display:inline-flex;align-items:center;gap:10px; padding:8px 14px;border-radius:999px; background:rgba(242,237,224,.04); border:1px solid var(--border-md); color:var(--ink);font-size:11.5px;font-weight:600; letter-spacing:.18em;text-transform:uppercase; } .footer-brand .janpro-badge::before{ content:'';width:6px;height:6px;border-radius:50%;background:var(--brass-l); } .footer-col h4{ color:var(--ink);font-family:var(--fb);font-size:11px; font-weight:600;letter-spacing:.24em;text-transform:uppercase; margin:0 0 28px; } .footer-col ul{list-style:none;padding:0;margin:0} .footer-col li{margin-bottom:14px} .footer-col a{ color:var(--ink-mid);font-size:15px; transition:color .2s ease; display:inline-block;letter-spacing:.005em; } .footer-col a:hover{color:var(--brass-l)} .footer-col p{font-size:14.5px;color:var(--ink-mid);margin:0 0 8px;line-height:1.6} .footer-col .footer-contact-row{ display:flex;align-items:center;gap:10px;font-size:14.5px; color:var(--ink);margin-bottom:14px; } .footer-col .footer-contact-row svg{width:14px;height:14px;color:var(--brass);flex-shrink:0} .footer-col .footer-contact-row a{color:var(--ink);font-size:14.5px} .footer-col .footer-contact-row a:hover{color:var(--brass-l)} .footer-bottom{ display:flex;justify-content:space-between;flex-wrap:wrap; gap:18px;align-items:center; font-size:13px;color:var(--ink-soft);letter-spacing:.02em; } .footer-bottom-links{display:flex;gap:28px;flex-wrap:wrap} .footer-bottom a{font-size:13px;color:var(--ink-soft)} .footer-bottom a:hover{color:var(--brass-l)} /* ============================================================ SUB HERO (inner pages) ============================================================ */ .subhero{ position:relative;overflow:hidden; padding:96px 0 64px; background:var(--bg); border-bottom:1px solid var(--border); } .subhero::before{ content:'';position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse 70% 50% at 90% 0%,rgba(31,168,118,.12) 0%,transparent 60%), radial-gradient(ellipse 50% 40% at 10% 100%,rgba(200,163,91,.08) 0%,transparent 60%); } .subhero .container{position:relative;z-index:2} .subhero .breadcrumb{ font-family:var(--fb);font-size:12px;font-weight:500; letter-spacing:.06em;color:var(--ink-soft);margin-bottom:18px; } .subhero .breadcrumb a{color:var(--ink-soft);transition:color .15s ease} .subhero .breadcrumb a:hover{color:var(--brass-l)} .subhero h1{margin-bottom:16px} .subhero .lede{margin-top:20px} /* ============================================================ PROSE (legal, about) ============================================================ */ .prose{max-width:760px;margin:0 auto;color:var(--ink-mid)} .prose h2{margin-top:56px;margin-bottom:18px;color:var(--ink)} .prose h3{margin-top:36px;margin-bottom:12px;font-size:20px;color:var(--ink)} .prose p{font-size:16px;line-height:1.75;color:var(--ink-mid)} .prose ul,.prose ol{margin:0 0 1em;padding-left:24px;color:var(--ink-mid)} .prose li{margin-bottom:8px;line-height:1.7} .prose strong{color:var(--ink);font-weight:600} .prose a{color:var(--brand-pop);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .prose a:hover{color:var(--brass-l)} /* ============================================================ REVEAL ON SCROLL ============================================================ */ .reveal{ opacity:0;transform:translateY(16px); transition:opacity .8s var(--ease-out),transform .8s var(--ease-out); will-change:opacity,transform; } .reveal.is-visible{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} } /* ============================================================ UTILITY ============================================================ */ .text-center{text-align:center} .mx-auto{margin-left:auto;margin-right:auto} .mt-1{margin-top:14px}.mt-2{margin-top:28px}.mt-3{margin-top:42px}.mt-4{margin-top:56px} .mb-1{margin-bottom:14px}.mb-2{margin-bottom:28px}.mb-3{margin-bottom:42px}.mb-4{margin-bottom:56px} .hidden{display:none !important} /* ============================================================ PRINT ============================================================ */ @media print{ .nav,.nav-utility,.footer,.cta-block{display:none} body{background:#fff;color:#000} a{color:#000;text-decoration:underline} }