/* * Emerald — black, white and green. * * Type: Bricolage Grotesque (display), Manrope (text), JetBrains Mono (figures) * Motion: spring overshoot on everything you can touch; nothing moves for * anyone who has asked their system for reduced motion. * * Two greens, by context, because one cannot do both jobs: * #047857 deep — white text on it 5.48:1, the only green safe on white * #34D399 bright — black text on it 10.04:1, the green for dark sections * #10B981 is decoration only: it is 2.54:1 against white, too faint for a * button edge on a light page. */ html[data-skin="emerald"]{ --black:#07100C; --ink:#0E1A15; --white:#FFFFFF; --paper:#F4F7F5; --green:#10B981; --green-deep:#047857; --green-bright:#34D399; --mint:#A7F3D0; --muted-d:#9DB4AA; /* Retoken the base theme so every component inherits the palette. */ --navy:var(--ink); --navy-2:#173027; --orange:var(--green); --orange-2:var(--green-bright); --orange-ink:var(--green-deep); --orange-btn:var(--green-deep); --steel:#C9D6D0; --steel-2:#E6EEEA; --galv:#5E7369; --ok:#047857; --err:#B42318; --bg:var(--paper); --fg:var(--ink); --muted:#4A5A53; --card:#FFFFFF; --line:#DDE6E1; --r-s:10px; --r-m:20px; --r-l:32px; --shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 24px 48px -24px rgba(7,16,12,.32), 0 2px 6px -2px rgba(7,16,12,.12); --shadow-lift:0 1px 0 rgba(255,255,255,.8) inset, 0 36px 70px -30px rgba(7,16,12,.42), 0 6px 16px -6px rgba(4,120,87,.22); --spring:cubic-bezier(.34,1.56,.64,1); --bounce:cubic-bezier(.68,-.6,.32,1.6); --ease:cubic-bezier(.22,.61,.36,1); --f:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --f-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; } html[data-skin="emerald"][data-theme="dark"]{ --bg:var(--black); --fg:#ECF3EF; --muted:var(--muted-d); --card:var(--ink); --line:#1F3229; --orange-ink:var(--green-bright); --orange-btn:var(--green-bright); --steel-2:#16261F; --shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 48px -24px rgba(0,0,0,.7); --shadow-lift:0 1px 0 rgba(255,255,255,.07) inset, 0 36px 70px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(52,211,153,.25); } /* ---------- House rule: no italics, anywhere ---------- */ html[data-skin="emerald"] *, html[data-skin="emerald"] *::before, html[data-skin="emerald"] *::after{font-style:normal!important} /* ============================================================ * Type * ========================================================== */ html[data-skin="emerald"] body{ font-family:var(--f);font-size:1.04rem;line-height:1.65;letter-spacing:-.003em; font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } html[data-skin="emerald"] h1,html[data-skin="emerald"] h2,html[data-skin="emerald"] h3,html[data-skin="emerald"] h4{ font-family:var(--f-display);font-stretch:100%;letter-spacing:-.025em;line-height:1.04;font-weight:700; font-optical-sizing:auto;text-wrap:balance; } html[data-skin="emerald"] h1{font-size:clamp(2.5rem,5.2vw,4.6rem);font-weight:780;letter-spacing:-.045em} html[data-skin="emerald"] h2{font-size:clamp(2rem,3.8vw,3.3rem);font-weight:740;letter-spacing:-.035em} html[data-skin="emerald"] h3{font-size:clamp(1.18rem,1.6vw,1.42rem);font-weight:680} html[data-skin="emerald"] .lead{font-size:clamp(1.08rem,1.4vw,1.28rem);color:var(--muted);line-height:1.6;text-wrap:pretty} html[data-skin="emerald"] .sum-total .big, html[data-skin="emerald"] .svc .from, html[data-skin="emerald"] .an-stats b, html[data-skin="emerald"] .takeoff-total, html[data-skin="emerald"] .price, html[data-skin="emerald"] code{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-stretch:100%} html[data-skin="emerald"] ::selection{background:var(--green-bright);color:var(--black)} /* An eyebrow above section titles */ html[data-skin="emerald"] .sh h2::before{ content:"";display:block;width:44px;height:4px;border-radius:4px;margin-bottom:18px; background:linear-gradient(90deg,var(--green-deep),var(--green-bright)); } /* ============================================================ * Header — glass, and a hairline that wakes up when you scroll * ========================================================== */ html[data-skin="emerald"] .site-header{ border-bottom:1px solid transparent;transition:border-color .4s var(--ease),box-shadow .4s var(--ease); } html[data-skin="emerald"] .site-header::before{ background:color-mix(in srgb,var(--bg) 72%,transparent); -webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px); } html[data-skin="emerald"] .site-header.shrink{ border-bottom-color:color-mix(in srgb,var(--green) 30%,transparent); box-shadow:0 10px 30px -18px rgba(7,16,12,.35); } html[data-skin="emerald"] .nav a{font-weight:600;letter-spacing:-.01em;position:relative} html[data-skin="emerald"] .nav a::after{ content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px; background:var(--green-deep);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--spring); } html[data-skin="emerald"][data-theme="dark"] .nav a::after{background:var(--green-bright)} html[data-skin="emerald"] .nav a:hover::after,html[data-skin="emerald"] .nav a[aria-current="page"]::after{transform:scaleX(1)} /* Scroll progress, a thin green thread along the top */ html[data-skin="emerald"] #pss-progress{height:3px;background:linear-gradient(90deg,var(--green-deep),var(--green-bright),var(--mint));box-shadow:0 0 12px rgba(52,211,153,.6)} /* ============================================================ * Buttons — glossy, with a sweep of light and a spring * ========================================================== */ html[data-skin="emerald"] .btn{ background:linear-gradient(180deg,#078059 0%,var(--green-deep) 55%,#036349 100%); color:#fff;border:0;border-radius:999px;padding:15px 28px;font-weight:700;letter-spacing:-.01em; box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 -2px 0 rgba(0,0,0,.18) inset, 0 14px 30px -14px rgba(4,120,87,.75), 0 2px 4px -1px rgba(7,16,12,.25); transition:transform .55s var(--spring),box-shadow .4s var(--ease),filter .3s; will-change:transform; } html[data-skin="emerald"] .btn::after{ background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,0) 60%); width:55%;transform:skewX(-18deg);transition:left .9s var(--ease); } html[data-skin="emerald"] .btn:hover{ transform:translateY(-3px) scale(1.035); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 -2px 0 rgba(0,0,0,.2) inset, 0 22px 40px -16px rgba(4,120,87,.85), 0 4px 8px -2px rgba(7,16,12,.25); } html[data-skin="emerald"] .btn:active{transform:translateY(0) scale(.96);transition-duration:.12s} html[data-skin="emerald"] .btn.ghost{ background:transparent;color:var(--fg)!important;box-shadow:inset 0 0 0 1.5px var(--fg); } html[data-skin="emerald"] .btn.ghost:hover{background:var(--fg);color:var(--bg);box-shadow:inset 0 0 0 1.5px var(--fg),0 18px 34px -18px rgba(7,16,12,.55)} /* On dark ground the button flips to bright green with a black label (10:1). */ html[data-skin="emerald"] .hero .btn:not(.ghost), html[data-skin="emerald"] .cta-band .btn:not(.ghost), html[data-skin="emerald"] .site-footer .btn:not(.ghost), html[data-skin="emerald"][data-theme="dark"] .btn:not(.ghost){ background:linear-gradient(180deg,#6EE7B7 0%,var(--green-bright) 45%,#1FB985 100%); /* !important because the base .btn sets its white label with !important. */ color:var(--black)!important; box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 -2px 0 rgba(0,0,0,.12) inset, 0 0 0 1px rgba(52,211,153,.4), 0 16px 40px -14px rgba(52,211,153,.65); } html[data-skin="emerald"] .hero .btn.ghost, html[data-skin="emerald"] .cta-band .btn.ghost{color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)} html[data-skin="emerald"] .hero .btn.ghost:hover, html[data-skin="emerald"] .cta-band .btn.ghost:hover{background:#fff;color:var(--black)!important} html[data-skin="emerald"] .btn.ghost:hover{color:var(--bg)!important} html[data-skin="emerald"] .mini{border-radius:999px;transition:transform .45s var(--spring),background .25s} html[data-skin="emerald"] .mini:hover{transform:translateY(-2px)} /* ============================================================ * Hero — black, lit from where the pointer is * ========================================================== */ html[data-skin="emerald"] .hero{ --mx:70%; --my:20%; background: radial-gradient(600px circle at var(--mx) var(--my),rgba(52,211,153,.22),transparent 60%), radial-gradient(900px 500px at 10% 110%,rgba(4,120,87,.35),transparent 65%), linear-gradient(180deg,#07100C 0%,#0B1712 100%); color:#ECF3EF;position:relative;isolation:isolate;padding:96px 0 120px; } /* A fine engineering grid, fading out toward the copy */ html[data-skin="emerald"] .hero::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:linear-gradient(rgba(167,243,208,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(167,243,208,.06) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%); } html[data-skin="emerald"] .hero h1{color:#fff;font-stretch:100%;font-weight:780} /* Line two is lit green — solid fallback first, gradient where supported */ html[data-skin="emerald"] .hero h1 .stroke{ -webkit-text-stroke:0;color:var(--green-bright); background:linear-gradient(100deg,#6EE7B7 0%,#34D399 35%,#A7F3D0 50%,#34D399 65%,#10B981 100%); background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; animation:em-sheen 7s var(--ease) infinite; } @keyframes em-sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} html[data-skin="emerald"] .hero .lead{color:#B9CCC3} html[data-skin="emerald"] .hero .crumbs a, html[data-skin="emerald"] .hero .crumbs{color:#9DB4AA} html[data-skin="emerald"] .hero .hero-proof b{color:#fff;font-family:var(--f-display)} html[data-skin="emerald"] .hero .hero-proof span{color:#9DB4AA} html[data-skin="emerald"] .hero .openstate{color:#D9E7E0} html[data-skin="emerald"] .hero .promo-badge{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.4);color:#fff} html[data-skin="emerald"] .hero .promo-badge code{color:var(--green-bright)} html[data-skin="emerald"] .hero .reach-btn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} html[data-skin="emerald"] .hero .reach-btn small{color:#9DB4AA} html[data-skin="emerald"] .hero .reach-call svg{color:var(--green-bright)} html[data-skin="emerald"] .hero .logo-card, html[data-skin="emerald"] .site-footer .logo-card{background:#fff;border-radius:18px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)} /* Page heroes on inner pages share the dark treatment, lighter touch */ html[data-skin="emerald"] .page-hero{background:linear-gradient(180deg,#07100C,#0E1A15);color:#fff;padding:80px 0 64px} html[data-skin="emerald"] .page-hero h1{color:#fff} html[data-skin="emerald"] .page-hero .lead,html[data-skin="emerald"] .page-hero .crumbs,html[data-skin="emerald"] .page-hero .crumbs a{color:#B9CCC3} /* ============================================================ * Cards — glossy, layered, lift on a spring * ========================================================== */ html[data-skin="emerald"] .card, html[data-skin="emerald"] .plan, html[data-skin="emerald"] .pitem, html[data-skin="emerald"] .findus, html[data-skin="emerald"] .deliv > *{ background:linear-gradient(180deg,color-mix(in srgb,var(--card) 100%,transparent),color-mix(in srgb,var(--card) 94%,var(--paper))); border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow); transition:transform .6s var(--spring),box-shadow .45s var(--ease),border-color .3s; } html[data-skin="emerald"] .plan:hover, html[data-skin="emerald"] .pitem:hover, html[data-skin="emerald"] .post-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--green) 45%,var(--line))} /* A glint across a card on hover */ html[data-skin="emerald"] .plan::after, html[data-skin="emerald"] .pitem::after, html[data-skin="emerald"] .post-card::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%); background-size:250% 100%;background-position:150% 0;opacity:0;transition:background-position 1.1s var(--ease),opacity .3s; } html[data-skin="emerald"][data-theme="dark"] .plan::after, html[data-skin="emerald"][data-theme="dark"] .pitem::after, html[data-skin="emerald"][data-theme="dark"] .post-card::after{background-image:linear-gradient(115deg,transparent 30%,rgba(167,243,208,.12) 48%,transparent 62%)} html[data-skin="emerald"] .plan:hover::after, html[data-skin="emerald"] .pitem:hover::after, html[data-skin="emerald"] .post-card:hover::after{background-position:-50% 0;opacity:1} /* The featured plan sits on black */ html[data-skin="emerald"] .plan.feat{background:linear-gradient(180deg,#0E1A15,#07100C);color:#ECF3EF;border-color:rgba(52,211,153,.35)} html[data-skin="emerald"] .plan.feat .muted,html[data-skin="emerald"] .plan.feat li{color:#B9CCC3} html[data-skin="emerald"] .plan.feat .btn{background:linear-gradient(180deg,#6EE7B7,var(--green-bright) 45%,#1FB985);color:var(--black)!important} /* ============================================================ * Services list * ========================================================== */ html[data-skin="emerald"] .svc{border-bottom-color:var(--line);border-radius:var(--r-s)} html[data-skin="emerald"] .svc:hover{background:var(--card);box-shadow:var(--shadow)} html[data-skin="emerald"] .svc .ico{background:var(--steel-2);color:var(--green-deep);border-radius:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.8)} html[data-skin="emerald"] .svc:hover .ico{background:linear-gradient(180deg,#078059,var(--green-deep));color:#fff; transform:rotate(-10deg) scale(1.16);box-shadow:0 12px 24px -10px rgba(4,120,87,.7)} html[data-skin="emerald"][data-theme="dark"] .svc .ico{color:var(--green-bright)} /* ============================================================ * Wizard — the fee panel is live, so it glows * ========================================================== */ html[data-skin="emerald"] .wiz-side{ background:linear-gradient(180deg,#0E1A15,#07100C);color:#ECF3EF;border-radius:var(--r-l); position:relative;isolation:isolate;border:0;box-shadow:0 30px 80px -30px rgba(7,16,12,.75); } @property --em-angle{syntax:'';inherits:false;initial-value:0deg} html[data-skin="emerald"] .wiz-side::before{ content:"";position:absolute;inset:-1.5px;z-index:-1;border-radius:inherit;padding:1.5px; background:conic-gradient(from var(--em-angle),rgba(52,211,153,0) 0deg,var(--green-bright) 60deg,var(--mint) 90deg,rgba(52,211,153,0) 160deg,rgba(52,211,153,0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; animation:em-orbit 6s linear infinite; } @keyframes em-orbit{to{--em-angle:360deg}} html[data-skin="emerald"] .wiz-side .sum-row span,html[data-skin="emerald"] .wiz-side .muted{color:#9DB4AA} html[data-skin="emerald"] .wiz-side .sum-total .big{color:#fff;font-weight:600} html[data-skin="emerald"] .wiz-side .list-price{color:#7E9A8E} html[data-skin="emerald"] .wiz-side .mini{border-color:rgba(255,255,255,.2);color:#ECF3EF} html[data-skin="emerald"] .wiz-steps li.on,html[data-skin="emerald"] .wiz-steps li.done{color:var(--green-deep)} html[data-skin="emerald"] .opt input:checked + label, html[data-skin="emerald"] .opt input:checked + span{border-color:var(--green-deep);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)} html[data-skin="emerald"] input[type="range"]{accent-color:var(--green-deep)} html[data-skin="emerald"] .field input,html[data-skin="emerald"] .field select,html[data-skin="emerald"] .field textarea{ border-radius:var(--r-s);transition:border-color .2s,box-shadow .3s var(--spring)} html[data-skin="emerald"] .field input:focus,html[data-skin="emerald"] .field select:focus,html[data-skin="emerald"] .field textarea:focus{ border-color:var(--green-deep);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 22%,transparent);outline:0} /* ============================================================ * Bands, footer, small parts * ========================================================== */ html[data-skin="emerald"] .cta-band{ background:radial-gradient(700px 300px at 85% 0%,rgba(52,211,153,.28),transparent 60%),linear-gradient(180deg,#0E1A15,#07100C); color:#fff;border-radius:var(--r-l);border:1px solid rgba(52,211,153,.2)} html[data-skin="emerald"] .cta-band p{color:#B9CCC3} html[data-skin="emerald"] .site-footer{background:var(--black);color:#B9CCC3;border-top:1px solid #16261F} html[data-skin="emerald"] .site-footer h3,html[data-skin="emerald"] .site-footer h4{color:#fff} html[data-skin="emerald"] .site-footer a{color:#ECF3EF} html[data-skin="emerald"] .site-footer a:hover{color:var(--green-bright)} html[data-skin="emerald"] .promobar{background:linear-gradient(90deg,#07100C,#0E1A15 50%,#07100C)} html[data-skin="emerald"] .promocode:hover{border-color:var(--green-bright);background:rgba(52,211,153,.12)} html[data-skin="emerald"] .status-pill{border-radius:999px} html[data-skin="emerald"] .fab > a,html[data-skin="emerald"] .fab > button{transition:transform .5s var(--spring)} html[data-skin="emerald"] .fab > a:hover,html[data-skin="emerald"] .fab > button:hover{transform:scale(1.14) rotate(-6deg)} html[data-skin="emerald"] .fab .ph{background:var(--black)} html[data-skin="emerald"] .ratecard-offer,html[data-skin="emerald"] .promo-line{ background:color-mix(in srgb,var(--green) 10%,transparent);border-color:color-mix(in srgb,var(--green) 40%,transparent)} html[data-skin="emerald"] .promo-badge{background:color-mix(in srgb,var(--green) 12%,transparent);border-color:color-mix(in srgb,var(--green) 45%,transparent)} html[data-skin="emerald"] .promo-badge code{color:var(--green-deep)} html[data-skin="emerald"] a{text-underline-offset:.2em;text-decoration-thickness:1.5px} html[data-skin="emerald"] :focus-visible{outline:3px solid var(--green-deep);outline-offset:3px;border-radius:6px} html[data-skin="emerald"] .hero :focus-visible,html[data-skin="emerald"] .site-footer :focus-visible, html[data-skin="emerald"] .wiz-side :focus-visible,html[data-skin="emerald"][data-theme="dark"] :focus-visible{outline-color:var(--green-bright)} /* ============================================================ * Entrances — a bounce, staggered * ========================================================== */ html[data-skin="emerald"] .rv{opacity:0;transform:translateY(34px) scale(.97); transition:opacity .7s var(--ease),transform .9s var(--spring);transition-delay:var(--d,0s)} html[data-skin="emerald"] .rv.in{opacity:1;transform:none} html[data-skin="emerald"] .hero h1{animation:em-rise 1.1s var(--spring) both} html[data-skin="emerald"] .hero .lead{animation:em-rise 1.1s var(--spring) .12s both} html[data-skin="emerald"] .hero .hero-ctas{animation:em-rise 1.1s var(--spring) .22s both} html[data-skin="emerald"] .hero .reach{animation:em-rise 1.1s var(--spring) .32s both} @keyframes em-rise{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}} /* A gentle float on the hero's side panel */ html[data-skin="emerald"] .hero .logo-card{animation:em-float 7s ease-in-out infinite} @keyframes em-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} /* Magnetic buttons are moved by JS through these two variables */ html[data-skin="emerald"] .btn.magnet{translate:var(--tx,0) var(--ty,0);transition:translate .35s var(--spring),transform .55s var(--spring),box-shadow .4s var(--ease)} /* ============================================================ * Respect the reader * ========================================================== */ @media (prefers-reduced-motion:reduce){ html[data-skin="emerald"] *,html[data-skin="emerald"] *::before,html[data-skin="emerald"] *::after{ animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important} html[data-skin="emerald"] .rv{opacity:1;transform:none} html[data-skin="emerald"] .btn.magnet{translate:none} html[data-skin="emerald"] .hero h1 .stroke{background:none;-webkit-text-fill-color:var(--green-bright)} } @media (hover:none){ html[data-skin="emerald"] .btn:hover,html[data-skin="emerald"] .plan:hover,html[data-skin="emerald"] .pitem:hover{transform:none} } @media print{ html[data-skin="emerald"] .hero,html[data-skin="emerald"] .page-hero,html[data-skin="emerald"] .wiz-side,html[data-skin="emerald"] .cta-band{background:#fff!important;color:#000!important} } /* ---------- Mobile menu: black panel, large display type ---------- */ @media (max-width:900px){ html[data-skin="emerald"] .nav{background:linear-gradient(180deg,#0E1A15,#07100C);box-shadow:-30px 0 80px rgba(0,0,0,.5)} html[data-skin="emerald"] .nav a{font-family:var(--f-display);font-size:1.9rem;font-weight:700;letter-spacing:-.035em;color:#fff} html[data-skin="emerald"] .nav a::after{background:var(--green-bright);bottom:-2px;height:3px} html[data-skin="emerald"] .nav.open li{animation:em-slide .7s var(--spring) both} html[data-skin="emerald"] .nav.open li:nth-child(2){animation-delay:.05s} html[data-skin="emerald"] .nav.open li:nth-child(3){animation-delay:.1s} html[data-skin="emerald"] .nav.open li:nth-child(4){animation-delay:.15s} html[data-skin="emerald"] .nav.open li:nth-child(5){animation-delay:.2s} html[data-skin="emerald"] .nav.open li:nth-child(6){animation-delay:.25s} } @keyframes em-slide{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}} /* ---------- The live takeoff drawing, in the new palette ---------- */ html[data-skin="emerald"] .takeoff{background:linear-gradient(180deg,rgba(14,26,21,.85),rgba(7,16,12,.92)); border:1px solid rgba(52,211,153,.18);border-radius:var(--r-l); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 40px 90px -40px rgba(0,0,0,.8)} html[data-skin="emerald"] .takeoff .m{stroke:#2C4A3D} html[data-skin="emerald"] .takeoff .m.on{stroke:var(--green-bright);filter:drop-shadow(0 0 7px rgba(52,211,153,.85))} html[data-skin="emerald"] .takeoff .m.done{stroke:var(--mint)} html[data-skin="emerald"] .takeoff .dim{stroke:#5E7A6E} html[data-skin="emerald"] .takeoff text{fill:#9DB4AA} html[data-skin="emerald"] .takeoff table td,html[data-skin="emerald"] .takeoff table th{border-color:rgba(167,243,208,.1);color:#D9E7E0} html[data-skin="emerald"] .takeoff table th{color:#9DB4AA;font-weight:600} html[data-skin="emerald"] .takeoff-total{color:#fff} html[data-skin="emerald"] .takeoff-total small,html[data-skin="emerald"] .takeoff-total span{color:var(--green-bright)} /* ---------- Contact widgets in Emerald ---------- */ html[data-skin="emerald"] .talkband{background:radial-gradient(800px 300px at 90% 0%,rgba(52,211,153,.2),transparent 60%),linear-gradient(180deg,#0E1A15,#07100C)} html[data-skin="emerald"] .talkband p{color:#B9CCC3} html[data-skin="emerald"] .tb-btn{border-radius:var(--r-m)} html[data-skin="emerald"] .tb-call svg{color:var(--green-bright)} html[data-skin="emerald"] .tb-call:hover{border-color:var(--green-bright)} html[data-skin="emerald"] .launcher-btn{background:linear-gradient(180deg,#078059,var(--green-deep) 55%,#036349); box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 18px 40px -14px rgba(4,120,87,.75)} html[data-skin="emerald"] .launcher-menu{border-radius:var(--r-l)} html[data-skin="emerald"] .launcher-menu svg{color:var(--green-deep)} html[data-skin="emerald"][data-theme="dark"] .launcher-menu svg{color:var(--green-bright)} html[data-skin="emerald"] .ccard{border-radius:var(--r-l)} html[data-skin="emerald"] .ccard-addr svg,html[data-skin="emerald"] .ccard-lines svg{color:var(--green-deep)} html[data-skin="emerald"] .actionbar{background:rgba(7,16,12,.92)} html[data-skin="emerald"] .actionbar .ab-quote{background:linear-gradient(180deg,#6EE7B7,var(--green-bright) 45%,#1FB985);color:var(--black)} html[data-skin="emerald"] .offerbanner{background:color-mix(in srgb,var(--green) 9%,var(--card));border-color:color-mix(in srgb,var(--green) 45%,var(--line));border-radius:var(--r-l)} html[data-skin="emerald"] .offer-kicker{color:var(--green-deep)} html[data-skin="emerald"][data-theme="dark"] .offer-kicker{color:var(--green-bright)} html[data-skin="emerald"] .legal-line{color:#8FA79B} html[data-skin="emerald"] .sisters a:hover{border-color:rgba(52,211,153,.45)} html[data-skin="emerald"] .crosssell{border-radius:var(--r-l)} html[data-skin="emerald"] .crosssell small{color:var(--green-deep)} html[data-skin="emerald"][data-theme="dark"] .crosssell small{color:var(--green-bright)}