*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#07100d;color:#fff;font-family:Inter,Arial,sans-serif}.wrap{width:min(1520px,calc(100% - 90px));margin:0 auto}.site-header{height:98px;background:#07100d;border-bottom:1px solid rgba(255,255,255,.05);position:relative;z-index:20}.header-inner{height:100%;display:flex;align-items:center}.brand{text-decoration:none;color:#fff;display:flex;flex-direction:column;line-height:1}.brand-name{font-size:29px;letter-spacing:-1.4px}.brand-name b{font-weight:800}.brand-name i{font-style:normal;color:#7ee7ad}.brand-sub{font-size:10px;letter-spacing:2.25px;color:#c1c8c5;margin-top:8px}.main-nav{display:flex;gap:40px;margin-left:auto}.main-nav a{color:#f4f6f5;text-decoration:none;font-size:15px;position:relative}.main-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:2px;background:#7ee7ad}.top-cta{margin-left:50px}.button{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 28px;border-radius:10px;border:1px solid transparent;text-decoration:none;font-weight:800;transition:transform .22s ease,box-shadow .22s ease}.button:hover{transform:translateY(-2px)}.button::after{content:"";position:absolute;top:-100%;left:-45%;width:28%;height:300%;background:rgba(255,255,255,.22);transform:rotate(20deg) translateX(-260%);transition:transform .6s ease}.button:hover::after{transform:rotate(20deg) translateX(700%)}.primary{background:#7ee7ad;color:#07100d;box-shadow:0 8px 24px rgba(69,218,142,.07)}.ghost{border-color:#9ca59f;color:#fff;background:rgba(7,16,13,.35)}.top-screen{position:relative;overflow:hidden;background:radial-gradient(circle at 67% 34%,rgba(47,121,76,.19),transparent 33%),linear-gradient(90deg,#07100d 0%,#07100d 55%,#08140f 100%)}.ambient{position:absolute;width:460px;height:460px;border-radius:50%;left:var(--mx,68%);top:var(--my,34%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(90,235,160,.10),rgba(90,235,160,.025) 46%,transparent 70%);pointer-events:none;transition:left .1s linear,top .1s linear}.hero-grid{height:572px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;position:relative;z-index:2}.hero-copy{padding-right:20px}.eyebrow{font-size:12px;letter-spacing:2.7px;color:#c3cbc7}.hero-copy h1{font-family:Manrope,Inter,sans-serif;font-size:clamp(52px,4.7vw,76px);line-height:1.02;letter-spacing:-3.2px;margin:18px 0 24px;max-width:800px}.hero-copy h1 span,.services-heading h2 span,.about-grid h2 span{color:#7ee7ad}.hero-copy>p{font-size:18px;line-height:1.7;color:#d3d9d6;max-width:690px;margin:0 0 26px}.cta-row{display:flex;gap:18px;flex-wrap:wrap}.wa-icon{font-size:21px}.proof-row{display:flex;gap:43px;margin-top:24px;color:#d1d8d4;font-size:14px}.proof-row b{color:#7ee7ad;font-size:16px;margin-right:7px}.portrait-zone{height:100%;position:relative;display:flex;align-items:flex-end;justify-content:flex-start}.portrait-frame{height:100%;width:74%;margin-left:0;position:relative;overflow:hidden;border-radius:24px 24px 0 0}.portrait-frame:after{content:"";position:absolute;inset:0;box-shadow:inset 30px 0 55px #07100d,inset -18px 0 45px rgba(7,16,13,.72),inset 0 -50px 58px #07100d;pointer-events:none}.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:center 13%;filter:grayscale(1) contrast(1.06);transform:translate(var(--px,0),var(--py,0)) scale(1.015);transition:transform .2s ease-out}.intro-note{position:absolute;right:0;top:27%;width:230px;color:#fff}.scribble{font-family:Caveat,cursive;font-size:39px;line-height:1;white-space:nowrap}.intro-small{font-size:14px;line-height:1.55;margin:14px 0 0 34px}.intro-arrow{position:absolute;width:125px;height:95px;left:-118px;top:103px;color:#fff;transform:rotate(6deg)}.services-band{height:204px;border-top:1px solid rgba(255,255,255,.09);background:rgba(5,13,10,.72);position:relative;z-index:2}.services-layout{height:100%;display:grid;grid-template-columns:.92fr 1fr 1fr 1.12fr;align-items:center}.services-heading{padding-right:40px}.services-heading h2{font-family:Manrope,Inter,sans-serif;font-size:36px;line-height:1.05;letter-spacing:-1.8px;margin:10px 0 0}.service{min-height:112px;padding:0 32px;border-left:1px solid rgba(255,255,255,.14);display:flex;align-items:flex-start;gap:22px;border-radius:12px;transition:transform .25s ease,background .25s ease}.service:hover{transform:translateY(-5px);background:rgba(126,231,173,.035)}.service-copy h3{font-size:19px;margin:5px 0 10px}.service-copy p{font-size:14.5px;line-height:1.48;color:#d1d7d4;margin:0}.ads-logo{width:58px;height:58px;position:relative;flex:0 0 58px}.ads-logo span:nth-child(1){position:absolute;width:14px;height:48px;background:#2c74f0;border-radius:8px;transform:rotate(32deg);left:14px;top:3px}.ads-logo span:nth-child(2){position:absolute;width:14px;height:43px;background:#f9c93b;border-radius:8px;transform:rotate(-31deg);left:28px;top:10px}.ads-logo span:nth-child(3){position:absolute;width:17px;height:17px;background:#35b46d;border-radius:50%;left:4px;bottom:2px}.icon{width:58px;height:58px;flex:0 0 58px;border:1px solid #26332d;border-radius:12px;background:#0d1512;position:relative}.search-icon:before{content:"";position:absolute;width:24px;height:24px;border:5px solid #278cff;border-radius:50%;left:11px;top:10px}.search-icon:after{content:"";position:absolute;width:20px;height:5px;border-radius:3px;background:#278cff;transform:rotate(45deg);left:34px;top:37px}.pin-icon:before{content:"";position:absolute;width:28px;height:36px;background:#278cff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);left:14px;top:9px}.pin-icon i{position:absolute;width:9px;height:9px;border-radius:50%;background:#08130f;left:24px;top:20px;z-index:2}.booking-section{background:#f6f6f4;padding:70px 0 78px}.booking-card{display:grid;grid-template-columns:430px 1fr 370px;overflow:hidden;border:1px solid #dbddda;border-radius:17px;background:#fff;box-shadow:0 12px 34px rgba(0,0,0,.08);color:#252a27}.booking-info,.calendar-panel,.times-panel{padding:35px 38px}.calendar-panel,.times-panel{border-left:1px solid #dedfdd}.profile-row{display:flex;align-items:center;gap:14px;margin-bottom:30px}.profile-row img{width:44px;height:44px;border-radius:50%;object-fit:cover;filter:grayscale(1)}.profile-row strong,.profile-row small{display:block}.profile-row strong{font-size:17px}.profile-row small{font-size:12px;color:#747d78;margin-top:3px}.booking-info h2{font-size:30px;margin:0 0 18px}.booking-info p{font-size:15px;line-height:1.7;color:#59625d}.booking-info h3{font-size:17px;margin:28px 0 12px}.booking-info ul{padding-left:20px;color:#59625d;line-height:1.7}.booking-meta{display:grid;gap:16px;margin-top:42px;color:#515a55}.calendar-title,.times-title{display:flex;align-items:center;justify-content:space-between}.calendar-title strong{font-size:22px}.calendar-title strong span{font-weight:500;color:#747d78}.calendar-title div{font-size:24px;color:#8e9692}.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;text-align:center}.labels{margin:30px 0 15px;font-size:11px;font-weight:800;letter-spacing:.8px}.days span,.days button{height:48px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;font-size:15px}.days button{cursor:pointer;transition:.16s ease}.days button:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.08)}.days .available{background:#e5e6e9;font-weight:700}.days .selected{background:#282a29;color:#fff;font-weight:800;position:relative}.days .selected:after{content:"";position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;background:#fff}.times-panel{display:flex;flex-direction:column;gap:10px}.toggle{display:flex;gap:2px;background:#f0f0ee;border-radius:18px;padding:3px}.toggle span{font-size:13px;padding:6px 9px;border-radius:15px;color:#69716d}.toggle .on{background:#fff;color:#242825;box-shadow:0 1px 5px rgba(0,0,0,.12)}.times-panel>button{height:49px;border:1px solid #cfd3d0;border-radius:10px;background:#fff;color:#303632;font-size:16px;cursor:pointer;transition:.16s ease}.times-panel>button:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.08)}.times-panel>button.chosen-time{background:#282a29;color:#fff;border-color:#282a29}.wa-confirm{display:none;min-height:49px;align-items:center;justify-content:center;border-radius:10px;background:#7ee7ad;color:#07100d;text-decoration:none;font-weight:800;margin-top:4px}.wa-confirm.show{display:flex}.slot-hint{text-align:center;font-size:12px;color:#89918d}.about-section{padding:72px 0;border-top:1px solid rgba(255,255,255,.06)}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.about-grid h2{font-family:Manrope,Inter,sans-serif;font-size:46px;line-height:1.05;letter-spacing:-2px;margin:12px 0 0}.about-points{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.about-points strong{font-size:18px}.about-points p{color:#bec7c2;line-height:1.6}.contact-section{padding:0 0 70px}.contact-card{border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:34px 38px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,rgba(40,105,68,.12),rgba(126,231,173,.025))}.contact-card h2{font-family:Manrope,Inter,sans-serif;font-size:34px;margin:10px 0 0;letter-spacing:-1.2px}footer{border-top:1px solid rgba(255,255,255,.06);padding:38px 0 48px}.footer-inner{display:flex;justify-content:space-between;align-items:end}.footer-inner>span{font-size:12px;color:#77817c}.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.1s}.delay-2{transition-delay:.18s}
@media (min-width:1000px) and (max-height:820px){.site-header{height:76px}.brand-name{font-size:25px}.brand-sub{font-size:8.5px;margin-top:6px}.main-nav a{font-size:14px}.top-cta{padding:12px 21px}.hero-grid{height:430px}.hero-copy h1{font-size:clamp(44px,3.85vw,59px);margin:12px 0 16px}.hero-copy>p{font-size:14.5px;line-height:1.52;margin-bottom:17px}.hero-copy .button{padding:11px 18px}.proof-row{margin-top:14px;font-size:12.5px}.eyebrow{font-size:10.5px}.portrait-frame{width:70%}.intro-note{top:23%;width:210px}.scribble{font-size:32px}.intro-small{font-size:12px}.intro-arrow{left:-104px;top:91px;width:110px}.services-band{height:160px}.services-heading h2{font-size:29px}.service{min-height:85px;padding:0 25px}.service-copy h3{font-size:16px}.service-copy p{font-size:12.5px}.ads-logo,.icon{width:48px;height:48px;flex-basis:48px}.search-icon:before{width:20px;height:20px;left:9px;top:8px}.search-icon:after{left:29px;top:31px}.pin-icon:before{width:24px;height:30px;left:12px;top:8px}.pin-icon i{left:20px;top:17px}}
@media(max-width:1050px){.wrap{width:min(100% - 38px,1520px)}.main-nav,.top-cta{display:none}.hero-grid{height:auto;min-height:650px;grid-template-columns:1fr 1fr}.hero-copy h1{font-size:52px}.portrait-frame{width:78%}.services-band{height:auto}.services-layout{grid-template-columns:1fr 1fr;gap:30px;padding:35px 0}.service{border-left:0;padding:0}.booking-card{grid-template-columns:1fr 1.3fr}.times-panel{grid-column:1/-1;border-left:0;border-top:1px solid #dedfdd;display:grid;grid-template-columns:repeat(4,1fr)}.times-title,.wa-confirm,.slot-hint{grid-column:1/-1}.about-grid{grid-template-columns:1fr}.about-points{grid-template-columns:1fr 1fr}.contact-card{flex-direction:column;align-items:flex-start;gap:24px}}
@media(max-width:720px){.site-header{height:78px}.wrap{width:min(100% - 28px,1520px)}.hero-grid{grid-template-columns:1fr;min-height:0;padding-top:42px}.hero-copy h1{font-size:43px;letter-spacing:-2px}.hero-copy>p{font-size:16px}.cta-row .button{width:100%}.proof-row{flex-direction:column;gap:10px}.portrait-zone{height:430px}.portrait-frame{width:82%;height:100%}.intro-note{right:0;top:21%;width:160px}.scribble{font-size:29px}.intro-small{font-size:11px;margin-left:20px}.intro-arrow{width:78px;left:-62px;top:72px}.services-layout{grid-template-columns:1fr}.service{border-top:1px solid rgba(255,255,255,.12);padding-top:22px}.booking-section{padding:35px 0}.booking-card{grid-template-columns:1fr}.calendar-panel,.times-panel{border-left:0;border-top:1px solid #dedfdd}.times-panel{display:flex}.about-points{grid-template-columns:1fr}.contact-card .cta-row{width:100%}.footer-inner{flex-direction:column;align-items:flex-start;gap:20px}}
/* =========================
V6 REFERENCE MATCH + UI
========================= */
:root{
--page-bg:#07100d;
--page-bg-2:#08130f;
--text:#ffffff;
--muted:#d3d9d6;
--line:rgba(255,255,255,.08);
--header-bg:#07100d;
--accent:#7ee7ad;
--accent-ink:#07100d;
--card-dark:#0d1512;
}
body.light-theme{
--page-bg:#f7f8f7;
--page-bg-2:#eef3f0;
--text:#121614;
--muted:#4d5752;
--line:rgba(10,22,16,.12);
--header-bg:#ffffff;
--accent:#37b978;
--accent-ink:#ffffff;
--card-dark:#ffffff;
}
/* theme-aware main surfaces */
body{
background:var(--page-bg);
color:var(--text);
transition:background .35s ease,color .35s ease;
}
.site-header{
background:var(--header-bg);
border-bottom-color:var(--line);
transition:background .35s ease,border-color .35s ease;
}
.top-screen{
background:
radial-gradient(circle at var(--mx,70%) var(--my,30%), rgba(66,179,113,.16), transparent 31%),
linear-gradient(90deg,var(--page-bg) 0%,var(--page-bg) 52%,var(--page-bg-2) 100%);
transition:background .35s ease;
}
.hero-copy>p,.service-copy p,.about-points p,.contact-card p,.proof-row{
color:var(--muted);
}
.main-nav a,.brand,.footer-inner,.button.ghost{
color:var(--text);
}
.services-band{
border-top-color:var(--line);
background:color-mix(in srgb, var(--page-bg) 91%, transparent);
}
.service{
border-left-color:var(--line);
}
.icon{
background:var(--card-dark);
border-color:var(--line);
}
.about-section,footer{
border-color:var(--line);
}
body.light-theme .button.ghost{
border-color:#2c3731;
}
body.light-theme .contact-card{
background:linear-gradient(135deg,rgba(55,185,120,.08),rgba(55,185,120,.02));
border-color:rgba(20,50,35,.15);
}
/* header theme switch */
.header-actions{
margin-left:34px;
display:flex;
align-items:center;
gap:14px;
}
.header-actions .top-cta{margin-left:0}
.theme-toggle{
border:0;
background:transparent;
padding:0;
cursor:pointer;
}
.toggle-track{
width:58px;
height:32px;
border-radius:18px;
background:#17211d;
border:1px solid rgba(255,255,255,.16);
display:block;
position:relative;
transition:.3s ease;
}
.toggle-knob{
width:26px;
height:26px;
border-radius:50%;
position:absolute;
left:3px;
top:2px;
display:grid;
place-items:center;
background:#f3f5f4;
color:#151a17;
font-size:14px;
transition:transform .3s ease,background .3s ease,color .3s ease;
}
body.light-theme .toggle-track{
background:#dcefe4;
border-color:#9bcbb0;
}
body.light-theme .toggle-knob{
transform:translateX(25px);
background:#ffffff;
}
body.light-theme .brand-sub{color:#5e6963}
/* Hero: match the approved screenshot more closely */
@media (min-width:1060px){
.hero-grid{
grid-template-columns:1.06fr .94fr;
}
.portrait-zone{
justify-content:flex-start;
}
.portrait-frame{
width:67%;
margin-left:2%;
}
.intro-note{
right:2%;
top:28%;
width:220px;
}
.intro-arrow{
width:135px;
height:100px;
left:-120px;
top:98px;
transform:none;
}
/* arrowhead terminates in EMPTY SPACE, left of the shoulder */
.intro-arrow path{
vector-effect:non-scaling-stroke;
}
}
/* exact first-screen proportions on common 15.6" laptop browser heights */
@media (min-width:1060px) and (max-height:860px){
.site-header{height:74px}
.hero-grid{height:430px}
.services-band{height:160px}
.hero-copy h1{font-size:clamp(44px,3.8vw,59px)}
.hero-copy>p{font-size:14.5px;line-height:1.52}
.portrait-frame{width:64%}
.intro-note{right:1%;top:23%}
.intro-arrow{left:-112px;top:86px;width:124px}
}
/* Consultancy process, matching supplied screenshot */
.process-section{
background:#b9d9ec;
padding:72px 0 62px;
color:#070707;
}
.process-head{
text-align:center;
margin-bottom:50px;
}
.process-kicker{
color:#335365;
margin-bottom:12px;
}
.process-head h2{
margin:0;
font-family:Manrope,Inter,sans-serif;
font-size:clamp(42px,4vw,62px);
line-height:1;
letter-spacing:-2.4px;
font-weight:800;
}
.process-head p{
font-size:22px;
margin:16px 0 0;
}
.process-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
.process-card{
min-height:390px;
background:#f8f8f7;
border-radius:38px;
padding:48px 54px;
box-shadow:0 10px 24px rgba(44,74,92,.06);
transition:transform .28s ease,box-shadow .28s ease;
}
.process-card:hover{
transform:translateY(-8px);
box-shadow:0 18px 38px rgba(44,74,92,.13);
}
.process-number{
font-family:Manrope,Inter,sans-serif;
font-size:82px;
line-height:.9;
font-weight:800;
margin-bottom:28px;
}
.process-card h3{
font-family:Manrope,Inter,sans-serif;
font-size:34px;
line-height:1.07;
letter-spacing:-1.4px;
margin:0 0 26px;
}
.process-card p{
font-size:18px;
line-height:1.55;
margin:0;
}
.process-cta{
display:flex;
justify-content:center;
margin-top:38px;
}
/* "Work with me": black → white fill left-to-right */
.work-with-me{
position:relative;
min-width:260px;
height:68px;
padding:0 28px;
border-radius:12px;
border:2px solid #050505;
background:#050505;
color:#fff;
text-decoration:none;
display:flex;
align-items:center;
justify-content:space-between;
overflow:hidden;
font-size:20px;
font-weight:600;
isolation:isolate;
}
.work-with-me::before{
content:"";
position:absolute;
inset:0;
background:#fff;
transform:scaleX(0);
transform-origin:left;
transition:transform .42s cubic-bezier(.2,.75,.2,1);
z-index:-1;
}
.work-with-me:hover{
color:#050505;
}
.work-with-me:hover::before{
transform:scaleX(1);
}
.work-with-me b{
font-size:34px;
line-height:1;
font-weight:400;
transition:transform .3s ease;
}
.work-with-me:hover b{transform:translateX(5px)}
/* Interactive glow is intentionally stronger but still subtle */
.ambient{
opacity:1;
}
.service,.process-card,.button,.work-with-me{
will-change:transform;
}
/* Light theme details */
body.light-theme .top-screen{
box-shadow:inset 0 -1px 0 rgba(10,20,15,.08);
}
body.light-theme .services-band{
background:rgba(255,255,255,.74);
}
body.light-theme .service:hover{
background:rgba(55,185,120,.06);
}
body.light-theme .scribble,
body.light-theme .intro-small,
body.light-theme .intro-arrow{
color:#151a17;
}
body.light-theme .proof-row b{color:#2aa86a}
body.light-theme footer{background:#ffffff}
/* responsive process */
@media(max-width:1000px){
.header-actions{margin-left:auto}
.theme-toggle{display:block}
.process-grid{grid-template-columns:1fr}
.process-card{min-height:0}
}
@media(max-width:720px){
.header-actions .top-cta{display:none}
.header-actions{gap:0}
.process-section{padding:54px 0}
.process-head{margin-bottom:32px}
.process-head h2{font-size:38px}
.process-head p{font-size:17px}
.process-card{padding:34px 30px;border-radius:28px}
.process-number{font-size:62px}
.process-card h3{font-size:28px}
.process-card p{font-size:16px}
}
/* =========================
V7 fixes requested by Alex
========================= */
/* 1. Arrow: point to empty space beside the left shoulder, never the face */
@media (min-width:1060px){
.intro-note{
right:1.2%;
top:27%;
}
.intro-arrow{
width:150px;
height:96px;
left:-145px;
top:118px;
transform:rotate(6deg);
}
}
/* 2. Light theme: portrait should blend into the page with no visible dark photo rectangle */
body.light-theme .portrait-frame{
background:transparent !important;
box-shadow:none !important;
border-color:transparent !important;
}
body.light-theme .hero-portrait{
mix-blend-mode:multiply;
opacity:.96;
-webkit-mask-image:
linear-gradient(to right, transparent 0%, #000 10%, #000 84%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 7%, #000 88%, transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(to right, transparent 0%, #000 10%, #000 84%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 7%, #000 88%, transparent 100%);
mask-composite:intersect;
filter:grayscale(1) contrast(1.04);
}
body.light-theme .portrait-zone{
background:transparent !important;
}
/* 3. Consultancy process uses the same site background, not blue */
.process-section{
background:var(--page-bg) !important;
color:var(--text) !important;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
transition:background .35s ease,color .35s ease;
}
.process-kicker{
color:var(--accent) !important;
}
.process-head p{
color:var(--muted);
}
.process-card{
background:color-mix(in srgb, var(--card-dark) 94%, transparent) !important;
color:var(--text) !important;
border:1px solid var(--line);
box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.process-card p{
color:var(--muted);
}
body.light-theme .process-card{
background:#ffffff !important;
border-color:rgba(10,25,17,.10);
box-shadow:0 12px 30px rgba(20,60,38,.07);
}
body.light-theme .process-section{
background:var(--page-bg) !important;
}
/* Make the process section visually feel like the rest of the site */
.process-wrap{
position:relative;
}
.process-wrap::before,
.process-wrap::after{
content:"";
position:absolute;
width:280px;
height:280px;
border-radius:50%;
background:radial-gradient(circle, rgba(82,220,146,.08), transparent 68%);
pointer-events:none;
}
.process-wrap::before{left:-150px;top:20%}
.process-wrap::after{right:-150px;bottom:0}
/* Keep Work with me animation intact in both themes */
body.light-theme .work-with-me{
background:#050505;
color:#fff;
border-color:#050505;
}
body.light-theme .work-with-me::before{
background:#fff;
}
body.light-theme .work-with-me:hover{
color:#050505;
}
/* Slightly better light-mode text contrast */
body.light-theme .intro-note,
body.light-theme .intro-note small,
body.light-theme .intro-arrow{
color:#111 !important;
}
/* Smaller screens */
@media (max-width:1059px){
.intro-arrow{
left:-82px !important;
top:92px !important;
width:90px !important;
}
}
/* =========================
V8 FINAL PHOTO + ARROW FIX
========================= */
/* Transparent portrait in BOTH themes */
.portrait-frame{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
}
.hero-portrait{
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:center bottom !important;
background:transparent !important;
border-radius:0 !important;
mix-blend-mode:normal !important;
opacity:1 !important;
filter:grayscale(1) contrast(1.05) !important;
-webkit-mask-image:none !important;
mask-image:none !important;
}
body.light-theme .hero-portrait{
background:transparent !important;
mix-blend-mode:normal !important;
opacity:1 !important;
-webkit-mask-image:none !important;
mask-image:none !important;
}
/* Move portrait left and create a genuine empty gap between image and note */
@media (min-width:1060px){
.portrait-zone{
justify-content:flex-start !important;
}
.portrait-frame{
width:58% !important;
margin-left:0 !important;
transform:translateX(-5%) !important;
}
.intro-note{
right:0 !important;
top:27% !important;
width:215px !important;
}
.intro-arrow{
width:108px !important;
height:78px !important;
left:-104px !important;
top:102px !important;
transform:none !important;
color:currentColor;
pointer-events:none;
}
}
/* Laptop heights */
@media (min-width:1060px) and (max-height:860px){
.portrait-frame{
width:56% !important;
transform:translateX(-7%) !important;
}
.intro-note{
top:24% !important;
}
.intro-arrow{
left:-100px !important;
top:94px !important;
width:102px !important;
}
}
/* On light mode, remove any photo-area tint */
body.light-theme .portrait-zone,
body.light-theme .portrait-frame{
background:transparent !important;
box-shadow:none !important;
}
/* Keep arrow/text readable in each theme */
body:not(.light-theme) .intro-note,
body:not(.light-theme) .intro-note small,
body:not(.light-theme) .intro-arrow{
color:#fff !important;
}
body.light-theme .intro-note,
body.light-theme .intro-note small,
body.light-theme .intro-arrow{
color:#111 !important;
}
/* V9 — light-mode portrait bug fix */
body.light-theme .portrait-zone,
body.light-theme .portrait-frame,
body.light-theme .hero-portrait{
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.light-theme .hero-portrait{
filter: grayscale(1) contrast(1.04) !important;
}
/* V10 — portrait fix.
Keep the ORIGINAL photo so the neck/shoulders are never cut off.
In light mode the rectangular photo edge is softly dissolved into the page. */
body.light-theme .portrait-frame{
overflow: visible !important;
background: transparent !important;
box-shadow: none !important;
}
body.light-theme .portrait-frame::after{
display:none !important;
}
body.light-theme .portrait-frame img{
object-fit:cover !important;
object-position:center 13% !important;
filter:grayscale(1) contrast(1.04) !important;
border-radius:0 !important;
background:transparent !important;
/* remove the visible rectangular edge without cutting the neck */
-webkit-mask-image:
linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 9%, #000 90%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 9%, #000 90%, transparent 100%);
mask-composite: intersect;
}
/* Keep the approved arrow safely OUTSIDE the face/photo. */
@media (min-width:1060px){
.intro-arrow{
left:-82px !important;
top:112px !important;
width:105px !important;
height:86px !important;
}
}
.admin-link{color:var(--muted);text-decoration:none;font-size:12px;opacity:.45}.admin-link:hover{opacity:1}
.admin-link{color:var(--muted);text-decoration:none;font-size:12px;opacity:.5}.admin-link:hover{opacity:1}
/* FAQ */
.faq-section{
background:var(--page-bg);
color:var(--text);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:78px 0;
}
.faq-head{
margin-bottom:34px;
}
.faq-head .eyebrow{
color:var(--accent);
margin-bottom:12px;
}
.faq-head h2{
font-family:Manrope,Inter,sans-serif;
font-size:clamp(34px,4vw,56px);
letter-spacing:-2px;
margin:0;
}
.faq-list{
border-top:1px solid var(--line);
}
.faq-item{
border-bottom:1px solid var(--line);
}
.faq-question{
width:100%;
border:0;
background:transparent;
color:var(--text);
padding:24px 0;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
text-align:left;
font:700 19px/1.35 Inter,Arial,sans-serif;
cursor:pointer;
}
.faq-question:hover{
color:var(--accent);
}
.faq-icon{
font-size:26px;
transition:transform .25s ease,color .25s ease;
color:var(--muted);
}
.faq-question[aria-expanded="true"] .faq-icon{
transform:rotate(180deg);
color:var(--accent);
}
.faq-answer{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .32s ease;
}
.faq-answer > p{
overflow:hidden;
margin:0;
color:var(--muted);
line-height:1.7;
max-width:920px;
font-size:15px;
}
.faq-item.open .faq-answer{
grid-template-rows:1fr;
}
.faq-item.open .faq-answer > p{
padding:0 0 24px;
}
body.light-theme .faq-section{
background:var(--page-bg);
}
@media(max-width:720px){
.faq-section{padding:54px 0}
.faq-question{font-size:17px;padding:20px 0}
}
/* =========================================================
V16 — CLEAN LIGHT MODE WITH TRUE TRANSPARENT PORTRAIT
Dark mode remains unchanged.
========================================================= */
.portrait-light{display:none!important}
body.light-theme .top-screen{
background:
radial-gradient(circle at 18% 26%, rgba(126,231,173,.10), transparent 30%),
#fbfcfb !important;
}
body.light-theme .site-header{
background:rgba(255,255,255,.96)!important;
border-bottom:1px solid rgba(18,28,23,.08)!important;
box-shadow:none!important;
}
body.light-theme .portrait-frame{
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
overflow:visible!important;
}
body.light-theme .portrait-frame::before,
body.light-theme .portrait-frame::after{
display:none!important;
}
body.light-theme .portrait-dark{
display:none!important;
}
body.light-theme .portrait-light{
display:block!important;
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center bottom!important;
border-radius:0!important;
filter:grayscale(1) contrast(1.04)!important;
background:transparent!important;
opacity:1!important;
mix-blend-mode:normal!important;
-webkit-mask-image:none!important;
mask-image:none!important;
}
body.light-theme .hero-copy h1,
body.light-theme .brand,
body.light-theme .main-nav a,
body.light-theme .scribble{
color:#101612!important;
}
body.light-theme .hero-copy h1 span,
body.light-theme .services-heading h2 span{
color:#62dc99!important;
}
body.light-theme .hero-copy>p,
body.light-theme .intro-small,
body.light-theme .service-copy p,
body.light-theme .proof-row{
color:#4c5952!important;
}
body.light-theme .hero-copy .eyebrow,
body.light-theme .services-heading .eyebrow{
color:#9ba7a0!important;
}
body.light-theme .button.ghost{
background:#fff!important;
color:#111714!important;
border-color:#cbd2ce!important;
box-shadow:0 8px 22px rgba(19,42,28,.04)!important;
}
body.light-theme .services-band{
background:#fff!important;
border-top:1px solid rgba(18,28,23,.08)!important;
border-bottom:1px solid rgba(18,28,23,.06)!important;
box-shadow:none!important;
}
body.light-theme .service{
border-left-color:rgba(18,28,23,.09)!important;
}
body.light-theme .service-copy h3,
body.light-theme .services-heading h2{
color:#131a16!important;
}
/* Clean portrait layout: no rectangle, no overlap into services */
@media (min-width:1060px){
body.light-theme .portrait-zone{
justify-content:flex-start!important;
overflow:visible!important;
}
body.light-theme .portrait-frame{
width:64%!important;
height:94%!important;
margin-left:0!important;
transform:translateX(-2%)!important;
}
body.light-theme .intro-note{
right:0!important;
top:25%!important;
width:215px!important;
}
body.light-theme .intro-arrow{
color:#111714!important;
width:112px!important;
height:80px!important;
left:-105px!important;
top:104px!important;
transform:rotate(7deg)!important;
}
}
@media (min-width:1060px) and (max-height:860px){
body.light-theme .portrait-frame{
width:61%!important;
height:91%!important;
}
}
@media (max-width:1059px){
body.light-theme .portrait-frame{
width:min(74%,520px)!important;
margin:0 auto!important;
transform:none!important;
}
}
@media (max-width:720px){
body.light-theme .portrait-frame{
width:88%!important;
}
body.light-theme .intro-arrow{display:none!important}
}
/* =========================================================
V17 — fixes from annotated screenshot
========================================================= */
/* BUG 1: remove the black browser-looking rectangle around the day/night control */
.theme-toggle{
-webkit-appearance:none !important;
appearance:none !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
background:transparent !important;
padding:0 !important;
}
.theme-toggle:focus,
.theme-toggle:focus-visible{
outline:2px solid var(--accent) !important;
outline-offset:4px !important;
border-radius:999px !important;
}
.toggle-track{
border:1px solid rgba(19,45,31,.18) !important;
box-shadow:none !important;
}
body.light-theme .toggle-track{
background:#e8f7ee !important;
border-color:#9fd8b7 !important;
}
/* BUG 2: light mode portrait has a REAL transparent background */
body.light-theme .portrait-frame{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
border-radius:0 !important;
}
body.light-theme .portrait-frame::before,
body.light-theme .portrait-frame::after{
display:none !important;
}
body.light-theme .portrait-dark{
display:none !important;
}
body.light-theme .portrait-light{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:center bottom !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
filter:grayscale(1) contrast(1.04) !important;
mix-blend-mode:normal !important;
-webkit-mask-image:none !important;
mask-image:none !important;
}
/* Prevent any accidental horizontal overflow from portrait/note positioning */
html, body{
overflow-x:hidden !important;
}
.top-screen,
.hero-grid,
.portrait-zone{
max-width:100% !important;
}
/* Keep arrow in the empty gap, outside the face */
@media (min-width:1060px){
body.light-theme .portrait-frame{
width:60% !important;
height:92% !important;
margin-left:0 !important;
transform:translateX(-4%) !important;
}
body.light-theme .intro-note{
right:1.5% !important;
top:25% !important;
}
body.light-theme .intro-arrow{
width:104px !important;
height:76px !important;
left:-98px !important;
top:104px !important;
transform:rotate(5deg) !important;
}
}
/* =========================================================
V18 — ACTUAL fixes
========================================================= */
/* 1) Remove native black rectangle around theme toggle */
button.theme-toggle.clean-toggle{
all:unset !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
cursor:pointer !important;
box-sizing:border-box !important;
width:58px !important;
height:32px !important;
border-radius:999px !important;
}
button.theme-toggle.clean-toggle .toggle-track{
position:relative !important;
display:block !important;
width:58px !important;
height:32px !important;
border-radius:999px !important;
background:#17211d !important;
border:1px solid rgba(255,255,255,.16) !important;
box-shadow:none !important;
}
body.light-theme button.theme-toggle.clean-toggle .toggle-track{
background:#e8f7ee !important;
border:1px solid #a8d9ba !important;
}
button.theme-toggle.clean-toggle:focus-visible{
outline:2px solid var(--accent) !important;
outline-offset:4px !important;
}
/* 2) Dark theme uses untouched original photo */
.portrait-dark{
display:block !important;
}
.portrait-light{
display:none !important;
}
/* 3) Light theme uses the real transparent PNG cutout */
body.light-theme .portrait-dark{
display:none !important;
}
body.light-theme .portrait-light{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:center bottom !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
filter:grayscale(1) contrast(1.04) !important;
opacity:1 !important;
mix-blend-mode:normal !important;
-webkit-mask-image:none !important;
mask-image:none !important;
}
/* Absolutely no photo card / dark rectangle in light mode */
body.light-theme .portrait-zone,
body.light-theme .portrait-frame{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
border-radius:0 !important;
}
body.light-theme .portrait-frame{
overflow:visible !important;
}
body.light-theme .portrait-frame::before,
body.light-theme .portrait-frame::after{
content:none !important;
display:none !important;
}
/* Clean light layout */
body.light-theme .top-screen{
background:
radial-gradient(circle at 17% 28%, rgba(126,231,173,.10), transparent 30%),
#fbfcfb !important;
}
body.light-theme .services-band{
background:#fff !important;
border-top:1px solid rgba(18,28,23,.08) !important;
}
/* Keep photo fully inside hero; no overlap into services */
@media (min-width:1060px){
body.light-theme .portrait-frame{
width:60% !important;
height:88% !important;
margin-left:0 !important;
transform:translateX(-5%) !important;
align-self:end !important;
}
body.light-theme .portrait-light{
object-position:center bottom !important;
}
/* Arrow ends in the empty gap to the left of the note, not on the face */
body.light-theme .intro-note{
right:1.5% !important;
top:25% !important;
}
body.light-theme .intro-arrow{
left:-92px !important;
top:108px !important;
width:94px !important;
height:70px !important;
transform:rotate(2deg) !important;
color:#111714 !important;
}
}
/* Prevent the horizontal-scroll bug */
html,body{
max-width:100% !important;
overflow-x:hidden !important;
}
.top-screen,.hero-grid,.services-band,.portrait-zone{
max-width:100% !important;
}
/* =========================================================
V19 — REFERENCE PORTRAIT + THEME GEOMETRY LOCK
========================================================= */
/* Theme may change COLORS, never the geometry of the hero. */
.site-header,
body.light-theme .site-header{
box-sizing:border-box !important;
}
.hero-grid,
body.light-theme .hero-grid{
align-items:center !important;
}
.hero-copy,
body.light-theme .hero-copy{
align-self:center !important;
padding-top:0 !important;
padding-bottom:0 !important;
transform:none !important;
}
.hero-copy h1,
body.light-theme .hero-copy h1{
line-height:1.02 !important;
}
.cta-row,
body.light-theme .cta-row{
align-items:center !important;
}
.button,
body.light-theme .button{
box-sizing:border-box !important;
line-height:1 !important;
}
/* Common 15.6" laptop geometry: IDENTICAL for light and dark */
@media (min-width:1060px) and (max-height:860px){
.site-header,
body.light-theme .site-header{
height:74px !important;
}
.hero-grid,
body.light-theme .hero-grid{
height:430px !important;
min-height:430px !important;
}
.hero-copy h1,
body.light-theme .hero-copy h1{
font-size:clamp(44px,3.8vw,59px) !important;
margin:12px 0 16px !important;
}
.hero-copy>p,
body.light-theme .hero-copy>p{
font-size:14.5px !important;
line-height:1.52 !important;
margin:0 0 17px !important;
}
.hero-copy .button,
body.light-theme .hero-copy .button{
padding:11px 18px !important;
min-height:44px !important;
}
.proof-row,
body.light-theme .proof-row{
margin-top:14px !important;
font-size:12.5px !important;
}
.services-band,
body.light-theme .services-band{
height:160px !important;
}
}
/* LIGHT MODE: match the user's reference composition */
body.light-theme .portrait-frame{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
border-radius:0 !important;
}
body.light-theme .portrait-frame::before,
body.light-theme .portrait-frame::after{
content:none !important;
display:none !important;
}
body.light-theme .portrait-dark{
display:none !important;
}
body.light-theme .portrait-light{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:center bottom !important;
filter:none !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
opacity:1 !important;
}
@media (min-width:1060px){
body.light-theme .portrait-frame{
width:72% !important;
height:96% !important;
margin-left:-4% !important;
transform:none !important;
align-self:end !important;
}
body.light-theme .intro-note{
right:0 !important;
top:24% !important;
width:220px !important;
}
body.light-theme .intro-arrow{
left:-104px !important;
top:105px !important;
width:108px !important;
height:78px !important;
transform:rotate(4deg) !important;
color:#111714 !important;
}
}
/* Toggle has no native button frame in either mode. */
button.theme-toggle.clean-toggle{
border:0 !important;
outline:0 !important;
box-shadow:none !important;
background:transparent !important;
}
/* No accidental layout width change / horizontal scrollbar. */
html,body{
overflow-x:hidden !important;
scrollbar-gutter:stable;
}
/* =========================================================
V20 — idle pixel cat easter egg
Appears after 60s inactivity, Chrome dinosaur style
========================================================= */
.idle-cat-layer{
position:fixed;
inset:0;
pointer-events:none;
z-index:9999;
overflow:hidden;
display:none;
}
.idle-cat-layer.active{display:block}
.idle-cat-runner{
position:absolute;
left:-110px;
bottom:16px;
width:92px;
height:58px;
animation:catCrossScreen 8.2s linear forwards;
}
.pixel-cat{
position:relative;
width:72px;
height:50px;
color:#111;
transform-origin:center bottom;
image-rendering:pixelated;
animation:catBob .28s steps(2,end) infinite;
}
/* Theme-aware cat color */
body:not(.light-theme) .pixel-cat{color:#fff}
body.light-theme .pixel-cat{color:#111}
.cat-head,
.cat-body,
.cat-ear,
.cat-tail,
.cat-leg{
position:absolute;
background:currentColor;
}
/* chunky pixel silhouette */
.cat-head{
width:26px;
height:23px;
left:36px;
top:10px;
}
.cat-body{
width:39px;
height:20px;
left:14px;
top:25px;
}
.cat-ear{
width:10px;
height:10px;
top:4px;
}
.ear-left{left:36px;clip-path:polygon(0 100%,50% 0,100% 100%)}
.ear-right{left:52px;clip-path:polygon(0 100%,50% 0,100% 100%)}
.cat-tail{
width:26px;
height:7px;
left:-5px;
top:24px;
transform:rotate(-28deg);
transform-origin:right center;
}
.cat-tail::before{
content:"";
position:absolute;
width:7px;
height:20px;
left:-2px;
top:-13px;
background:currentColor;
}
.cat-leg{
width:7px;
height:12px;
top:41px;
}
.leg-1{left:18px}
.leg-2{left:29px}
.leg-3{left:43px}
.leg-4{left:51px}
.cat-eye{
position:absolute;
width:4px;
height:4px;
background:var(--page-bg);
top:8px;
}
.eye-left{left:7px}
.eye-right{left:16px}
body.light-theme .cat-eye{background:#fff}
body:not(.light-theme) .cat-eye{background:#07100d}
/* footsteps */
.idle-cat-runner::after{
content:"· · · · ·";
position:absolute;
left:-48px;
bottom:2px;
font-size:18px;
letter-spacing:5px;
color:currentColor;
opacity:.28;
}
/* run and tiny jump */
@keyframes catCrossScreen{
0% {transform:translateX(0) translateY(0)}
34% {transform:translateX(34vw) translateY(0)}
40% {transform:translateX(40vw) translateY(-30px)}
46% {transform:translateX(46vw) translateY(0)}
100% {transform:translateX(calc(100vw + 160px)) translateY(0)}
}
@keyframes catBob{
0%{transform:translateY(0)}
50%{transform:translateY(-2px)}
100%{transform:translateY(0)}
}
/* simple running legs */
.leg-1,.leg-3{animation:legA .28s steps(2,end) infinite}
.leg-2,.leg-4{animation:legB .28s steps(2,end) infinite}
@keyframes legA{
0%{transform:translateX(0)}
50%{transform:translateX(5px)}
}
@keyframes legB{
0%{transform:translateX(5px)}
50%{transform:translateX(0)}
}
/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
.idle-cat-layer{display:none!important}
}
/* =========================================================
V22 — Cat pulls the page to FAQ and reads it
========================================================= */
.idle-cat-layer{display:none!important}
.cat-guide-layer{
position:fixed;
inset:0;
z-index:10000;
pointer-events:none;
display:none;
overflow:hidden;
}
.cat-guide-layer.active{display:block}
.cat-guide{
position:absolute;
left:-120px;
bottom:22px;
width:105px;
height:72px;
color:#111;
transition:left .95s cubic-bezier(.2,.75,.25,1), bottom .45s ease;
}
body:not(.light-theme) .cat-guide{color:#fff}
.cat-guide.arrived{left:22px}
.cat-guide-layer.reading .cat-guide{bottom:24px}
.cat-bubble{
position:absolute;
left:72px;
bottom:58px;
min-width:132px;
max-width:min(340px,72vw);
padding:9px 12px;
border-radius:12px 12px 12px 3px;
background:#fff;
border:1px solid rgba(10,20,15,.16);
color:#111;
font:600 12px/1.35 Inter,Arial,sans-serif;
box-shadow:0 10px 28px rgba(0,0,0,.12);
opacity:0;
transform:translateY(5px);
transition:.22s ease;
}
.cat-bubble.show{
opacity:1;
transform:none;
}
body:not(.light-theme) .cat-bubble{
background:#101714;
color:#fff;
border-color:rgba(255,255,255,.16);
}
.cat-rope{
position:absolute;
width:3px;
height:0;
left:70px;
bottom:44px;
background:currentColor;
opacity:.55;
transform:rotate(-20deg);
transform-origin:bottom;
transition:height .25s ease;
}
.cat-rope.show{height:46px}
.guide-cat{
position:absolute;
left:0;
bottom:0;
}
.cat-guide-layer.pulling .guide-cat{
animation:catPull .3s steps(2,end) infinite;
}
@keyframes catPull{
0%{transform:translateX(0) rotate(0)}
50%{transform:translateX(-3px) rotate(-2deg)}
}
/* highlight FAQ currently being "read" */
.faq-item.cat-reading{
background:color-mix(in srgb, var(--accent) 7%, transparent);
}
.faq-item.cat-reading .faq-question{
color:var(--accent);
}
.faq-item.cat-reading{
box-shadow:inset 3px 0 0 var(--accent);
padding-left:14px;
transition:background .25s ease, box-shadow .25s ease, padding-left .25s ease;
}
/* Pixel cat shape (standalone, Chrome Dino-like) */
.pixel-cat{
position:relative;
width:72px;
height:50px;
color:inherit;
image-rendering:pixelated;
}
.cat-head,.cat-body,.cat-ear,.cat-tail,.cat-leg{
position:absolute;
background:currentColor;
}
.cat-head{width:26px;height:23px;left:36px;top:10px}
.cat-body{width:39px;height:20px;left:14px;top:25px}
.cat-ear{width:10px;height:10px;top:4px}
.ear-left{left:36px;clip-path:polygon(0 100%,50% 0,100% 100%)}
.ear-right{left:52px;clip-path:polygon(0 100%,50% 0,100% 100%)}
.cat-tail{width:26px;height:7px;left:-5px;top:24px;transform:rotate(-28deg);transform-origin:right center}
.cat-tail::before{content:"";position:absolute;width:7px;height:20px;left:-2px;top:-13px;background:currentColor}
.cat-leg{width:7px;height:12px;top:41px}
.leg-1{left:18px}.leg-2{left:29px}.leg-3{left:43px}.leg-4{left:51px}
.cat-eye{position:absolute;width:4px;height:4px;background:#fff;top:8px}
.eye-left{left:7px}.eye-right{left:16px}
body:not(.light-theme) .cat-eye{background:#07100d}
@media (prefers-reduced-motion: reduce){
.cat-guide-layer{display:none!important}
}
/* =========================================================
V32 — service pages, clarified booking, estimate form
========================================================= */
.service-copy h3 a{
color:inherit;
text-decoration:none;
}
.service-copy h3 a:hover{color:var(--accent)}
.service-more{
display:inline-block;
margin-top:9px;
color:var(--accent);
font-size:13px;
font-weight:800;
text-decoration:none;
opacity:.9;
}
.service-more:hover{transform:translateX(3px)}
.slot-hint{
line-height:1.45;
}
/* Estimate form */
.quote-section{
padding:88px 0;
background:var(--bg);
}
.quote-shell{
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);
gap:54px;
padding:44px;
border:1px solid var(--line);
border-radius:26px;
background:
radial-gradient(circle at 10% 15%, rgba(101,231,174,.10), transparent 34%),
var(--panel);
box-shadow:0 24px 70px rgba(0,0,0,.16);
}
.quote-intro h2{
margin:10px 0 18px;
font-size:clamp(36px,4vw,58px);
line-height:.98;
letter-spacing:-.045em;
}
.quote-intro h2 span{color:var(--accent)}
.quote-intro p{
max-width:570px;
color:var(--muted);
font-size:17px;
line-height:1.65;
}
.quote-benefits{
display:grid;
gap:10px;
margin-top:28px;
color:var(--text);
font-weight:700;
}
.quote-benefits span::first-letter{color:var(--accent)}
.quote-form{
padding:30px;
border:1px solid var(--line);
border-radius:22px;
background:rgba(255,255,255,.025);
}
.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}
.form-grid label{
display:grid;
gap:8px;
}
.form-grid label>span{
font-size:13px;
font-weight:800;
color:var(--muted);
letter-spacing:.02em;
}
.form-grid .span-2{grid-column:1/-1}
.quote-form input,
.quote-form select,
.quote-form textarea{
width:100%;
box-sizing:border-box;
border:1px solid var(--line);
border-radius:14px;
background:var(--bg);
color:var(--text);
padding:14px 15px;
font:inherit;
outline:none;
transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.quote-form textarea{resize:vertical;min-height:122px}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus{
border-color:var(--accent);
box-shadow:0 0 0 4px rgba(101,231,174,.10);
}
.quote-actions{
display:flex;
align-items:center;
gap:18px;
margin-top:22px;
flex-wrap:wrap;
}
.quote-actions small{color:var(--muted)}
.quote-submit{border:0;cursor:pointer}
.quote-status{
min-height:22px;
margin-top:12px;
color:var(--accent);
font-weight:700;
font-size:13px;
}
/* Light theme */
body.light-theme .quote-shell{
background:
radial-gradient(circle at 10% 15%, rgba(101,231,174,.16), transparent 34%),
#fff;
}
body.light-theme .quote-form{background:#fafafa}
body.light-theme .quote-form input,
body.light-theme .quote-form select,
body.light-theme .quote-form textarea{background:#fff}
@media(max-width:900px){
.quote-shell{grid-template-columns:1fr;padding:28px;gap:30px}
}
@media(max-width:620px){
.quote-section{padding:58px 0}
.quote-shell{padding:20px;border-radius:20px}
.quote-form{padding:18px}
.form-grid{grid-template-columns:1fr}
.form-grid .span-2{grid-column:auto}
}
/* Dedicated service pages */
.service-page{
min-height:100vh;
background:var(--bg);
color:var(--text);
}
.service-page .service-page-main{padding:70px 0 100px}
.service-page .back-link{
color:var(--muted);
text-decoration:none;
font-weight:700;
}
.service-page .back-link:hover{color:var(--accent)}
.service-hero{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:56px;
align-items:center;
padding:74px 0 68px;
}
.service-hero h1{
font-size:clamp(48px,6vw,86px);
line-height:.95;
letter-spacing:-.055em;
margin:14px 0 22px;
}
.service-hero h1 span{color:var(--accent)}
.service-hero p{
color:var(--muted);
font-size:19px;
line-height:1.65;
max-width:720px;
}
.service-hero-card{
padding:30px;
border:1px solid var(--line);
border-radius:24px;
background:var(--panel);
}
.service-hero-card strong{font-size:22px}
.service-hero-card ul{padding-left:20px;color:var(--muted);line-height:1.8}
.service-detail-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:28px;
}
.service-detail-card{
padding:26px;
border:1px solid var(--line);
border-radius:20px;
background:var(--panel);
}
.service-detail-card h3{margin:0 0 10px;font-size:20px}
.service-detail-card p{margin:0;color:var(--muted);line-height:1.6}
.service-page-cta{
margin-top:54px;
padding:34px;
border:1px solid var(--line);
border-radius:24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
background:linear-gradient(120deg,rgba(101,231,174,.12),transparent 45%),var(--panel);
}
.service-page-cta h2{margin:0 0 6px}
.service-page-cta p{margin:0;color:var(--muted)}
@media(max-width:820px){
.service-hero{grid-template-columns:1fr}
.service-detail-grid{grid-template-columns:1fr}
.service-page-cta{align-items:flex-start;flex-direction:column}
}
/* =========================================================
V33 — homepage spacing cleanup
========================================================= */
.contact-cta-section{
padding-bottom:28px!important;
margin-bottom:0!important;
}
.quote-section{
padding-top:34px!important;
}
.contact-cta,
.quote-shell{
margin-bottom:0!important;
}
@media(max-width:700px){
.contact-cta-section{padding-bottom:20px!important}
.quote-section{padding-top:24px!important}
}
/* =========================================================
V33 — dedicated service pages redesign
========================================================= */
.service-page{
min-height:100vh;
background:var(--bg);
color:var(--text);
}
.service-page .site-header{
position:sticky;
top:0;
z-index:30;
background:color-mix(in srgb,var(--bg) 94%,transparent);
backdrop-filter:blur(18px);
border-bottom:1px solid var(--line);
}
.service-page .service-page-main{
padding:0 0 88px!important;
}
.service-page .back-link{
display:inline-flex;
align-items:center;
gap:8px;
margin-top:28px;
color:var(--muted);
text-decoration:none;
font-weight:750;
}
.service-page .back-link:hover{color:var(--accent)}
.service-hero{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr);
gap:44px;
align-items:stretch;
padding:42px 0 46px!important;
}
.service-hero>div:first-child{
display:flex;
flex-direction:column;
justify-content:center;
min-height:480px;
padding:46px;
border:1px solid var(--line);
border-radius:28px;
background:
radial-gradient(circle at 12% 14%, rgba(101,231,174,.12), transparent 34%),
linear-gradient(180deg,rgba(255,255,255,.02),transparent),
var(--panel);
}
.service-hero .eyebrow{
margin-bottom:12px;
}
.service-hero h1{
margin:0 0 20px!important;
max-width:780px;
font-size:clamp(52px,6vw,88px)!important;
line-height:.94!important;
letter-spacing:-.055em!important;
}
.service-hero h1 span{color:var(--accent)}
.service-hero p{
margin:0;
max-width:700px;
color:var(--muted);
font-size:18px!important;
line-height:1.65!important;
}
.service-hero .hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:28px;
}
.service-hero-card{
min-height:480px;
padding:36px!important;
border:1px solid var(--line)!important;
border-radius:28px!important;
background:
linear-gradient(180deg,rgba(101,231,174,.08),transparent 45%),
var(--panel)!important;
display:flex;
flex-direction:column;
justify-content:center;
}
.service-hero-card strong{
display:block;
margin-bottom:18px;
font-size:24px!important;
letter-spacing:-.02em;
}
.service-hero-card ul{
margin:0;
padding:0;
list-style:none;
display:grid;
gap:14px;
}
.service-hero-card li{
position:relative;
padding-left:24px;
color:var(--muted);
line-height:1.55;
}
.service-hero-card li::before{
content:"✓";
position:absolute;
left:0;
top:0;
color:var(--accent);
font-weight:900;
}
.service-page section>.eyebrow{
margin:8px 0 16px;
}
.service-detail-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px!important;
margin-top:0!important;
}
.service-detail-card{
min-height:210px;
padding:28px!important;
border:1px solid var(--line)!important;
border-radius:22px!important;
background:var(--panel)!important;
}
.service-detail-card h3{
margin:0 0 10px!important;
font-size:22px!important;
}
.service-detail-card p{
margin:0!important;
color:var(--muted)!important;
line-height:1.62!important;
}
.service-page-cta{
margin-top:26px!important;
padding:30px 32px!important;
border:1px solid var(--line)!important;
border-radius:24px!important;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
background:
radial-gradient(circle at 10% 20%,rgba(101,231,174,.13),transparent 34%),
var(--panel)!important;
}
.service-page-cta h2{
margin:0 0 6px!important;
font-size:clamp(28px,3vw,40px);
letter-spacing:-.03em;
}
.service-page-cta p{
margin:0!important;
color:var(--muted)!important;
max-width:720px;
}
body.light-theme .service-hero>div:first-child,
body.light-theme .service-hero-card,
body.light-theme .service-detail-card,
body.light-theme .service-page-cta{
background-color:#fff!important;
}
@media(max-width:980px){
.service-hero{
grid-template-columns:1fr!important;
}
.service-hero>div:first-child,
.service-hero-card{
min-height:auto;
}
}
@media(max-width:780px){
.service-page .service-page-main{padding-bottom:60px!important}
.service-hero{
padding:26px 0 34px!important;
gap:18px!important;
}
.service-hero>div:first-child,
.service-hero-card{
padding:26px!important;
border-radius:22px!important;
}
.service-detail-grid{
grid-template-columns:1fr!important;
}
.service-page-cta{
flex-direction:column;
align-items:flex-start!important;
}
}
/* =========================================================
V34 — exact fixes:
1) service pages use the site's REAL theme variables
2) remove the gap between contact CTA and estimate form
3) light-theme booking card becomes dark for contrast
========================================================= */
/* ----- Remove the large vertical gap ----- */
.contact-section{
padding-bottom:12px!important;
margin-bottom:0!important;
}
.quote-section{
padding-top:12px!important;
margin-top:0!important;
}
.contact-card{
margin-bottom:0!important;
}
.quote-shell{
margin-top:0!important;
}
@media(max-width:720px){
.contact-section{padding-bottom:8px!important}
.quote-section{padding-top:8px!important}
}
/* ----- LIGHT THEME: dark booking block for strong contrast ----- */
body.light-theme .booking-section{
background:#f4f6f5!important;
}
body.light-theme .booking-card{
background:#07100d!important;
color:#f7faf8!important;
border-color:#1d2a24!important;
box-shadow:0 18px 55px rgba(7,16,13,.18)!important;
}
body.light-theme .booking-info,
body.light-theme .calendar-panel,
body.light-theme .times-panel{
background:#07100d!important;
color:#f7faf8!important;
}
body.light-theme .calendar-panel,
body.light-theme .times-panel{
border-color:#25332d!important;
}
body.light-theme .profile-row small,
body.light-theme .booking-info p,
body.light-theme .booking-info ul,
body.light-theme .booking-meta,
body.light-theme .calendar-title strong span,
body.light-theme .calendar-title div,
body.light-theme .slot-hint{
color:#aebbb5!important;
}
body.light-theme .booking-info h2,
body.light-theme .booking-info h3,
body.light-theme .profile-row strong,
body.light-theme .calendar-title strong,
body.light-theme .times-title strong,
body.light-theme .labels{
color:#ffffff!important;
}
body.light-theme .days span{
color:#e8efeb!important;
}
body.light-theme .days button{
color:#f7faf8!important;
}
body.light-theme .days .available{
background:#15221c!important;
color:#ffffff!important;
}
body.light-theme .days .available:hover{
background:#1c3026!important;
}
body.light-theme .days .selected{
background:#7ee7ad!important;
color:#07100d!important;
}
body.light-theme .days .selected:after{
background:#07100d!important;
}
body.light-theme .toggle{
background:#142019!important;
}
body.light-theme .toggle span{
color:#aebbb5!important;
}
body.light-theme .toggle .on{
background:#26352e!important;
color:#ffffff!important;
box-shadow:none!important;
}
body.light-theme .times-panel>button{
background:#0d1713!important;
color:#f7faf8!important;
border-color:#2b3a33!important;
}
body.light-theme .times-panel>button:hover{
background:#15251d!important;
}
body.light-theme .times-panel>button.chosen-time{
background:#7ee7ad!important;
color:#07100d!important;
border-color:#7ee7ad!important;
}
body.light-theme .wa-confirm{
background:#7ee7ad!important;
color:#07100d!important;
}
/* ----- SERVICE PAGES: correct theme variables and proper layout ----- */
.service-page{
background:var(--page-bg)!important;
color:var(--text)!important;
}
.service-page .site-header{
background:var(--header-bg)!important;
border-bottom:1px solid var(--line)!important;
}
.service-page .service-page-main{
padding:0 0 72px!important;
background:var(--page-bg)!important;
}
.service-page .back-link{
margin-top:28px!important;
color:var(--muted)!important;
}
.service-page .back-link:hover{
color:var(--accent)!important;
}
.service-page .service-hero{
display:grid!important;
grid-template-columns:minmax(0,1.05fr) minmax(340px,.72fr)!important;
gap:24px!important;
padding:28px 0 30px!important;
}
.service-page .service-hero-main,
.service-page .service-hero-card{
border:1px solid var(--line)!important;
border-radius:26px!important;
}
.service-page .service-hero-main{
min-height:470px!important;
padding:44px!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
background:
radial-gradient(circle at 10% 12%,rgba(126,231,173,.12),transparent 36%),
var(--page-bg-2)!important;
}
.service-page .service-hero-card{
min-height:470px!important;
padding:36px!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
background:
linear-gradient(180deg,rgba(126,231,173,.08),transparent 50%),
var(--page-bg-2)!important;
}
.service-page .service-hero h1{
margin:10px 0 20px!important;
max-width:830px!important;
font-family:Manrope,Inter,sans-serif!important;
font-size:clamp(48px,5.4vw,78px)!important;
line-height:.98!important;
letter-spacing:-3.5px!important;
color:var(--text)!important;
}
.service-page .service-hero h1 span{
color:var(--accent)!important;
}
.service-page .service-hero p{
max-width:720px!important;
margin:0!important;
color:var(--muted)!important;
font-size:18px!important;
line-height:1.65!important;
}
.service-page .service-hero .hero-actions{
display:flex!important;
gap:12px!important;
flex-wrap:wrap!important;
margin-top:28px!important;
}
.service-page .service-hero-card strong{
color:var(--text)!important;
font-size:23px!important;
}
.service-page .service-hero-card ul{
list-style:none!important;
margin:20px 0 0!important;
padding:0!important;
display:grid!important;
gap:14px!important;
}
.service-page .service-hero-card li{
position:relative!important;
padding-left:25px!important;
color:var(--muted)!important;
line-height:1.5!important;
}
.service-page .service-hero-card li:before{
content:"✓"!important;
position:absolute!important;
left:0!important;
color:var(--accent)!important;
font-weight:900!important;
}
.service-page .service-section-title{
margin:4px 0 16px!important;
}
.service-page .service-detail-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:16px!important;
margin:0!important;
}
.service-page .service-detail-card{
min-height:190px!important;
padding:26px!important;
border:1px solid var(--line)!important;
border-radius:20px!important;
background:var(--page-bg-2)!important;
}
.service-page .service-detail-card h3{
margin:0 0 10px!important;
color:var(--text)!important;
font-size:21px!important;
}
.service-page .service-detail-card p{
margin:0!important;
color:var(--muted)!important;
line-height:1.62!important;
}
.service-page .service-page-cta{
margin-top:18px!important;
padding:28px 30px!important;
border:1px solid var(--line)!important;
border-radius:22px!important;
background:
radial-gradient(circle at 10% 20%,rgba(126,231,173,.12),transparent 34%),
var(--page-bg-2)!important;
}
.service-page .service-page-cta h2{
color:var(--text)!important;
}
.service-page .service-page-cta p{
color:var(--muted)!important;
}
body.light-theme.service-page .service-hero-main,
body.light-theme.service-page .service-hero-card,
body.light-theme.service-page .service-detail-card,
body.light-theme.service-page .service-page-cta{
background-color:#ffffff!important;
}
@media(max-width:980px){
.service-page .service-hero{
grid-template-columns:1fr!important;
}
.service-page .service-hero-main,
.service-page .service-hero-card{
min-height:auto!important;
}
}
@media(max-width:720px){
.service-page .service-hero{
padding:20px 0 24px!important;
}
.service-page .service-hero-main,
.service-page .service-hero-card{
padding:24px!important;
border-radius:20px!important;
}
.service-page .service-detail-grid{
grid-template-columns:1fr!important;
}
}
/* =========================================================
V35 — CTA buttons in one row + mobile stacking
========================================================= */
.contact-card{
gap:28px;
}
.contact-card .cta-row{
flex-wrap:nowrap!important;
align-items:center;
justify-content:flex-end;
gap:14px!important;
}
.contact-card .cta-row .button{
min-height:58px;
white-space:nowrap;
padding-left:26px;
padding-right:26px;
}
.contact-card .cta-row .button:nth-child(1){
min-width:285px;
}
.contact-card .cta-row .button:nth-child(2){
min-width:190px;
}
.contact-card .cta-row .button:nth-child(3){
min-width:245px;
}
/* Keep WhatsApp visually secondary but with a green accent */
.contact-card .cta-row .button:nth-child(3){
border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
}
.contact-card .cta-row .button:nth-child(3):hover{
border-color:var(--accent);
}
@media(max-width:1100px){
.contact-card{
align-items:flex-start;
flex-direction:column;
}
.contact-card .cta-row{
width:100%;
justify-content:flex-start;
flex-wrap:wrap!important;
}
}
@media(max-width:720px){
.contact-card .cta-row{
display:grid!important;
grid-template-columns:1fr!important;
}
.contact-card .cta-row .button{
width:100%!important;
min-width:0!important;
}
}
/* =========================================================
V39 — safe hero cleanup
HTML structure untouched.
========================================================= */
/* Hide the complete trust/proof row under the hero buttons. */
.hero-proof,
.hero-trust,
.trust-row,
.proof-row{
display:none !important;
}
/* Extra breathing room between "Irish Businesses" and supporting copy. */
.hero-copy h1{
margin-bottom:44px !important;
}
/* Keep buttons comfortably separated from the supporting text. */
.hero-copy .hero-actions{
margin-top:26px !important;
margin-bottom:0 !important;
}
@media (max-width:900px){
.hero-copy h1{margin-bottom:34px !important;}
}
@media (max-width:600px){
.hero-copy h1{margin-bottom:27px !important;}
}
/* =========================================================
V40 — Google Ads Budget Calculator demo
========================================================= */
.tool-page{padding-top:86px}
.tool-hero{padding:86px 0 58px;position:relative;overflow:hidden}
.tool-hero:before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(114,255,201,.12),transparent 68%);right:-150px;top:-260px;pointer-events:none}
.tool-hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:72px;align-items:center}
.tool-hero-copy h1{font-family:Manrope,Inter,sans-serif;font-size:clamp(48px,6vw,82px);line-height:.98;letter-spacing:-.055em;max-width:940px;margin:18px 0 28px}
.tool-hero-copy h1 span,.mint-text{color:var(--mint)}
.tool-hero-copy>p{font-size:19px;line-height:1.65;max-width:720px;color:var(--muted)}
.tool-badges{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;color:var(--muted);font-size:14px}
.tool-badges span:first-letter{color:var(--mint)}
.tool-mini-card{justify-self:end;width:min(100%,330px);min-height:330px;border:1px solid var(--line);border-radius:28px;background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px;box-shadow:0 20px 70px rgba(0,0,0,.18)}
.tool-mini-card strong{font:800 48px/1 Manrope,Inter,sans-serif;letter-spacing:-.04em;margin:10px 0 5px}
.tool-mini-card span{color:var(--muted)}
.tool-mini-label{font-size:12px!important;text-transform:uppercase;letter-spacing:.14em}
.tool-mini-arrow{font-size:24px;color:var(--mint);padding:20px 0 5px}
.calculator-section{padding:36px 0 110px}
.calculator-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,.72fr);border:1px solid var(--line);border-radius:30px;overflow:hidden;background:var(--panel);box-shadow:0 26px 90px rgba(0,0,0,.16)}
.calc-left{padding:46px}
.calc-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;margin-bottom:14px}
.calc-topline h2{font:800 clamp(30px,3.5vw,46px)/1.08 Manrope,Inter,sans-serif;letter-spacing:-.04em;margin:10px 0 0}
.calc-intro{color:var(--muted);max-width:680px;line-height:1.6;margin:0 0 34px}
.mode-switch{display:flex;background:var(--bg);border:1px solid var(--line);padding:4px;border-radius:999px;flex:none}
.mode-btn{border:0;background:transparent;color:var(--muted);font:700 13px/1 Inter,sans-serif;padding:11px 16px;border-radius:999px;cursor:pointer}
.mode-btn.active{background:var(--mint);color:#07130e}
.calc-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.calc-field{display:flex;flex-direction:column;gap:9px}
.calc-field>span{font-size:14px;font-weight:700}
.calc-field small{font-size:12px;line-height:1.45;color:var(--muted)}
.calc-field select,.calc-field input{width:100%;height:54px;border:1px solid var(--line);border-radius:13px;background:var(--bg);color:var(--text);font:600 15px Inter,sans-serif;padding:0 15px;outline:none}
.calc-field select:focus,.calc-field input:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(114,255,201,.08)}
.money-input,.suffix-input{display:flex;align-items:center;height:54px;border:1px solid var(--line);border-radius:13px;background:var(--bg);overflow:hidden}
.money-input:focus-within,.suffix-input:focus-within{border-color:var(--mint);box-shadow:0 0 0 3px rgba(114,255,201,.08)}
.money-input i,.suffix-input i{font-style:normal;color:var(--muted);font-weight:700;padding-left:16px}
.money-input input,.suffix-input input{border:0!important;box-shadow:none!important;background:transparent!important;padding-left:9px}
.suffix-input i{padding:0 16px 0 0}
.calc-results{background:#0b1210;color:#f6faf7;padding:46px;display:flex;flex-direction:column}
.results-kicker{font-size:11px;font-weight:800;letter-spacing:.15em;color:#72ffc9;margin-bottom:24px}
.results-budget{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12)}
.results-budget span{color:#aab6b0;font-size:14px}.results-budget strong{font:800 31px/1 Manrope,Inter,sans-serif}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:22px 0}
.result-card{min-height:145px;border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:18px;background:rgba(255,255,255,.025);display:flex;flex-direction:column}
.result-card span{font-size:12px;line-height:1.35;color:#aab6b0}
.result-card strong{font:800 26px/1.1 Manrope,Inter,sans-serif;letter-spacing:-.03em;margin:auto 0 6px}
.result-card small{font-size:11px;color:#7f8c86}
.result-card.highlight{border-color:rgba(114,255,201,.45);background:rgba(114,255,201,.07)}
.result-card.highlight strong{color:#72ffc9}
.results-detail{border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);padding:16px 0}
.results-detail div{display:flex;justify-content:space-between;gap:20px;padding:7px 0;font-size:13px}
.results-detail span{color:#aab6b0}
.estimate-note{display:flex;flex-direction:column;gap:6px;margin:20px 0 24px;font-size:11px;line-height:1.5;color:#849089}
.estimate-note b{color:#cbd4d0}
.result-cta{width:100%;justify-content:center;margin-top:auto}
.result-link{text-align:center;color:#aab6b0;font-size:12px;margin-top:14px;text-decoration:none}.result-link:hover{color:#72ffc9}
.tool-explainer{padding:100px 0;background:var(--panel)}
.tool-explainer-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:76px;align-items:start}
.tool-explainer h2{font:800 clamp(35px,4vw,56px)/1.05 Manrope,Inter,sans-serif;letter-spacing:-.045em;margin:14px 0 0}
.explainer-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.explainer-cards article{border:1px solid var(--line);border-radius:20px;padding:25px;min-height:220px;background:var(--bg)}
.explainer-cards article>b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mint);color:#07130e;margin-bottom:30px}
.explainer-cards h3{font:750 18px/1.25 Manrope,Inter,sans-serif;margin:0 0 10px}.explainer-cards p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}
.tool-cta-section{padding:90px 0 110px}
.tool-cta-card{border:1px solid var(--line);border-radius:28px;padding:48px;display:flex;align-items:center;justify-content:space-between;gap:50px;background:var(--panel)}
.tool-cta-card h2{font:800 clamp(30px,3.5vw,48px)/1.05 Manrope,Inter,sans-serif;letter-spacing:-.04em;margin:11px 0 14px}
.tool-cta-card p{color:var(--muted);max-width:700px;line-height:1.6;margin:0}
.tool-cta-card .button{flex:none}
body.light .calculator-shell{box-shadow:0 24px 70px rgba(18,28,24,.08)}
body.light .tool-mini-card{box-shadow:0 22px 60px rgba(18,28,24,.08)}
@media(max-width:1000px){
.tool-hero-grid,.tool-explainer-grid{grid-template-columns:1fr}
.tool-mini-card{justify-self:start}
.calculator-shell{grid-template-columns:1fr}
.calc-results{min-height:auto}
}
@media(max-width:760px){
.tool-page{padding-top:72px}
.tool-hero{padding:64px 0 38px}
.tool-hero-copy h1{font-size:clamp(42px,13vw,62px)}
.tool-mini-card{display:none}
.calculator-section{padding-bottom:70px}
.calc-left,.calc-results{padding:28px 22px}
.calc-topline{flex-direction:column}
.calc-form{grid-template-columns:1fr}
.result-grid{grid-template-columns:1fr 1fr}
.explainer-cards{grid-template-columns:1fr}
.tool-explainer{padding:70px 0}
.tool-cta-card{padding:30px 24px;align-items:flex-start;flex-direction:column}
}
@media(max-width:460px){
.result-grid{grid-template-columns:1fr}
}
/* =========================================================
V41 — theme geometry + calculator mode fix
========================================================= */
/* [hidden] must win over .calc-form{display:grid}. */
.calc-form[hidden]{
display:none !important;
}
/* Hero geometry must be identical in light and dark themes.
Theme changes colours only, never spacing/position. */
.hero-grid,
body.light-theme .hero-grid{
height:572px !important;
align-items:center !important;
}
.hero-copy,
body.light-theme .hero-copy{
padding-right:20px !important;
transform:none;
}
.hero-copy .eyebrow,
body.light-theme .hero-copy .eyebrow{
margin:0 !important;
}
.hero-copy h1,
body.light-theme .hero-copy h1{
margin-top:18px !important;
margin-bottom:44px !important;
line-height:1.02 !important;
}
.hero-copy>p,
body.light-theme .hero-copy>p{
margin-top:0 !important;
margin-bottom:26px !important;
line-height:1.7 !important;
}
.hero-copy .cta-row,
body.light-theme .hero-copy .cta-row{
margin:0 !important;
}
/* Keep removed proof/trust row removed in both themes. */
.proof-row,
body.light-theme .proof-row{
display:none !important;
}
/* Use the same portrait box geometry in both themes. */
.portrait-zone,
body.light-theme .portrait-zone{
height:100% !important;
align-items:flex-end !important;
}
.portrait-frame,
body.light-theme .portrait-frame{
height:100% !important;
}
/* Prevent theme transition from animating layout-like properties. */
.hero-grid,.hero-copy,.portrait-zone,.portrait-frame,
.hero-copy h1,.hero-copy>p{
transition:none !important;
}
@media (min-width:1000px) and (max-height:820px){
.hero-grid,
body.light-theme .hero-grid{
height:430px !important;
}
.hero-copy h1,
body.light-theme .hero-copy h1{
margin-top:12px !important;
margin-bottom:30px !important;
line-height:1.02 !important;
}
.hero-copy>p,
body.light-theme .hero-copy>p{
margin-bottom:17px !important;
line-height:1.52 !important;
}
}
@media(max-width:1050px){
.hero-grid,
body.light-theme .hero-grid{
height:auto !important;
min-height:650px !important;
}
}
@media(max-width:720px){
.hero-grid,
body.light-theme .hero-grid{
min-height:0 !important;
padding-top:42px !important;
}
.hero-copy h1,
body.light-theme .hero-copy h1{
margin-bottom:27px !important;
}
}
/* =========================================================
V42 — calculator card like homepage booking/calendar
Dark site + light calculator surface
========================================================= */
/* Main calculator becomes a light floating card on dark theme */
body:not(.light-theme) .calculator-shell{
background:#f7f7f3 !important;
color:#101714 !important;
border-color:#d9dedb !important;
box-shadow:0 24px 70px rgba(0,0,0,.34) !important;
}
/* Left side */
body:not(.light-theme) .calc-left{
background:#fbfbf8 !important;
color:#101714 !important;
}
body:not(.light-theme) .calc-topline h2,
body:not(.light-theme) .calc-field>span{
color:#101714 !important;
}
body:not(.light-theme) .calc-intro,
body:not(.light-theme) .calc-field small{
color:#66706b !important;
}
/* Simple / Advanced switch */
body:not(.light-theme) .mode-switch{
background:#ecefeb !important;
border-color:#d5dbd7 !important;
}
body:not(.light-theme) .mode-btn{
color:#5f6964 !important;
}
body:not(.light-theme) .mode-btn.active{
background:var(--mint) !important;
color:#07130e !important;
}
/* Inputs */
body:not(.light-theme) .calc-field select,
body:not(.light-theme) .calc-field input,
body:not(.light-theme) .money-input,
body:not(.light-theme) .suffix-input{
background:#ffffff !important;
color:#111714 !important;
border-color:#d7ddd9 !important;
}
body:not(.light-theme) .money-input i,
body:not(.light-theme) .suffix-input i{
color:#46514c !important;
}
/* Right results side — soft white/mint like booking/calendar */
body:not(.light-theme) .calc-results{
background:
radial-gradient(circle at 85% 8%, rgba(114,255,201,.18), transparent 32%),
#f4f7f4 !important;
color:#111714 !important;
border-left:1px solid #d9dedb !important;
}
body:not(.light-theme) .results-kicker{
color:#209b6d !important;
}
body:not(.light-theme) .results-budget{
border-bottom-color:#d9dedb !important;
}
body:not(.light-theme) .results-budget span,
body:not(.light-theme) .result-card span,
body:not(.light-theme) .result-card small,
body:not(.light-theme) .results-detail span,
body:not(.light-theme) .estimate-note{
color:#69736e !important;
}
body:not(.light-theme) .results-budget strong,
body:not(.light-theme) .result-card strong,
body:not(.light-theme) .results-detail b{
color:#111714 !important;
}
body:not(.light-theme) .result-card{
background:rgba(255,255,255,.76) !important;
border-color:#d8ded9 !important;
}
body:not(.light-theme) .result-card.highlight{
background:rgba(114,255,201,.12) !important;
border-color:#38b982 !important;
}
body:not(.light-theme) .result-card.highlight strong{
color:#13a56d !important;
}
body:not(.light-theme) .results-detail{
border-top-color:#d9dedb !important;
border-bottom-color:#d9dedb !important;
}
body:not(.light-theme) .estimate-note{
background:#f8faf8 !important;
border:1px solid #d9dedb !important;
border-radius:14px !important;
padding:14px 16px !important;
}
body:not(.light-theme) .estimate-note b{
color:#1b2520 !important;
}
body:not(.light-theme) .result-link{
color:#5f6964 !important;
}
body:not(.light-theme) .result-link:hover{
color:#159b68 !important;
}
/* Preserve readable appearance on light theme too */
body.light-theme .calculator-shell{
background:#ffffff !important;
color:#101714 !important;
border-color:#d9dedb !important;
}
body.light-theme .calc-results{
background:
radial-gradient(circle at 85% 8%, rgba(114,255,201,.13), transparent 32%),
#f7f9f7 !important;
color:#101714 !important;
}
@media(max-width:1000px){
body:not(.light-theme) .calc-results{
border-left:0 !important;
border-top:1px solid #d9dedb !important;
}
}
/* =========================================================
V44 — refinement based strictly on stable V42
1) tighter vertical spacing
2) opposite calculator surface by theme
3) very subtle headline effect only
========================================================= */
/* ---------- tighter page spacing ---------- */
.tool-hero{
padding-top:58px !important;
padding-bottom:38px !important;
}
.calculator-section{
padding-top:20px !important;
padding-bottom:70px !important;
}
.tool-explainer{
padding-top:72px !important;
padding-bottom:72px !important;
}
.tool-cta-section{
padding-top:56px !important;
padding-bottom:44px !important;
}
.site-footer{
margin-top:0 !important;
}
.site-footer .footer-inner{
padding-top:34px !important;
padding-bottom:34px !important;
}
/* ---------- LIGHT THEME: calculator becomes dark ---------- */
body.light-theme .calculator-shell{
background:#07110e !important;
color:#f4f8f6 !important;
border-color:#1c2a25 !important;
box-shadow:0 24px 70px rgba(18,28,24,.14) !important;
}
body.light-theme .calc-left{
background:#07110e !important;
color:#f4f8f6 !important;
}
body.light-theme .calc-topline h2,
body.light-theme .calc-field>span{
color:#f4f8f6 !important;
}
body.light-theme .calc-intro,
body.light-theme .calc-field small{
color:#a8b5af !important;
}
body.light-theme .mode-switch{
background:#0c1713 !important;
border-color:#22332c !important;
}
body.light-theme .mode-btn{
color:#aab7b1 !important;
}
body.light-theme .mode-btn.active{
background:var(--mint) !important;
color:#07130e !important;
}
body.light-theme .calc-field select,
body.light-theme .calc-field input,
body.light-theme .money-input,
body.light-theme .suffix-input{
background:#0b1511 !important;
color:#f4f8f6 !important;
border-color:#24352e !important;
}
body.light-theme .money-input i,
body.light-theme .suffix-input i{
color:#c8d3ce !important;
}
body.light-theme .calc-results{
background:
radial-gradient(circle at 82% 8%, rgba(114,255,201,.10), transparent 34%),
#0a1511 !important;
color:#f4f8f6 !important;
border-left:1px solid #23342d !important;
}
body.light-theme .results-kicker{
color:var(--mint) !important;
}
body.light-theme .results-budget{
border-bottom-color:#24352e !important;
}
body.light-theme .results-budget span,
body.light-theme .result-card span,
body.light-theme .result-card small,
body.light-theme .results-detail span,
body.light-theme .estimate-note{
color:#a8b5af !important;
}
body.light-theme .results-budget strong,
body.light-theme .result-card strong,
body.light-theme .results-detail b{
color:#f4f8f6 !important;
}
body.light-theme .result-card{
background:rgba(255,255,255,.025) !important;
border-color:#25372f !important;
}
body.light-theme .result-card.highlight{
background:rgba(114,255,201,.075) !important;
border-color:#3ea978 !important;
}
body.light-theme .result-card.highlight strong{
color:var(--mint) !important;
}
body.light-theme .results-detail{
border-top-color:#24352e !important;
border-bottom-color:#24352e !important;
}
body.light-theme .estimate-note{
background:#0d1814 !important;
border:1px solid #26372f !important;
border-radius:14px !important;
padding:14px 16px !important;
}
body.light-theme .estimate-note b{
color:#e7efeb !important;
}
body.light-theme .result-link{
color:#a8b5af !important;
}
body.light-theme .result-link:hover{
color:var(--mint) !important;
}
/* ---------- subtle hero headline treatment ---------- */
/* No icons, no graphics: just a soft mint depth on "Google Ads". */
.tool-hero-copy h1 span{
position:relative;
display:inline-block;
color:var(--mint);
text-shadow:
0 0 18px rgba(114,255,201,.10),
0 0 42px rgba(114,255,201,.05);
}
.tool-hero-copy h1 span::after{
content:"";
position:absolute;
left:3%;
right:3%;
bottom:-7px;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,transparent,rgba(114,255,201,.5),transparent);
opacity:.55;
transform:scaleX(.72);
transform-origin:center;
}
@media(max-width:1000px){
body.light-theme .calc-results{
border-left:0 !important;
border-top:1px solid #23342d !important;
}
}
@media(max-width:760px){
.tool-hero{
padding-top:42px !important;
padding-bottom:28px !important;
}
.calculator-section{
padding-top:12px !important;
padding-bottom:52px !important;
}
.tool-explainer{
padding-top:56px !important;
padding-bottom:56px !important;
}
.tool-cta-section{
padding-top:42px !important;
padding-bottom:34px !important;
}
.site-footer .footer-inner{
padding-top:28px !important;
padding-bottom:28px !important;
}
}
/* =========================================================
V45 — visible Simple/Advanced + homepage-style hero glow
========================================================= */
/* Make the mode switch unambiguous in both themes */
.mode-switch{
overflow:hidden !important;
}
.mode-btn{
min-width:102px !important;
text-align:center !important;
opacity:1 !important;
}
body:not(.light-theme) .mode-btn{
color:#3f4a45 !important;
}
body:not(.light-theme) .mode-btn.active{
background:var(--mint) !important;
color:#07130e !important;
box-shadow:0 0 0 1px rgba(19,165,109,.14),
0 7px 18px rgba(19,165,109,.16) !important;
}
body.light-theme .mode-btn{
color:#aebbb5 !important;
}
body.light-theme .mode-btn.active{
background:var(--mint) !important;
color:#07130e !important;
box-shadow:0 0 0 1px rgba(114,255,201,.18),
0 7px 20px rgba(114,255,201,.12) !important;
}
/* Same pointer-following mint glow language as homepage hero */
.tool-hero{
--tool-mx:50%;
--tool-my:42%;
}
.tool-hero::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
background:
radial-gradient(
420px circle at var(--tool-mx) var(--tool-my),
rgba(114,255,201,.13),
rgba(114,255,201,.055) 34%,
transparent 69%
);
opacity:.95;
transition:opacity .25s ease;
}
body.light-theme .tool-hero::after{
background:
radial-gradient(
430px circle at var(--tool-mx) var(--tool-my),
rgba(52,207,143,.12),
rgba(52,207,143,.045) 35%,
transparent 70%
);
}
.tool-hero .wrap{
position:relative;
z-index:1;
}
/* =========================================================
V46 — definitive Simple / Advanced visibility fix
Use explicit colours rather than theme variables.
========================================================= */
.mode-switch{
padding:4px !important;
gap:2px !important;
border-radius:999px !important;
}
.mode-btn{
min-width:132px !important;
height:46px !important;
border-radius:999px !important;
font-weight:800 !important;
opacity:1 !important;
}
/* DARK PAGE / LIGHT CALCULATOR */
body:not(.light-theme) .mode-switch{
background:#e9eeeb !important;
border:1px solid #d1d8d4 !important;
}
body:not(.light-theme) .mode-btn{
background:transparent !important;
color:#59645f !important;
}
body:not(.light-theme) .mode-btn.active{
background:#63e6ad !important;
color:#07130e !important;
border:0 !important;
box-shadow:none !important;
}
/* LIGHT PAGE / DARK CALCULATOR */
body.light-theme .mode-switch{
background:#101c17 !important;
border:1px solid #2a3b34 !important;
}
body.light-theme .mode-btn{
background:transparent !important;
color:#b9c6c0 !important;
}
body.light-theme .mode-btn.active{
background:#63e6ad !important;
color:#07130e !important;
border:0 !important;
box-shadow:0 5px 16px rgba(99,230,173,.14) !important;
}
/* Also support builds where the theme class is "light". */
body.light .mode-switch{
background:#101c17 !important;
border:1px solid #2a3b34 !important;
}
body.light .mode-btn{
background:transparent !important;
color:#b9c6c0 !important;
}
body.light .mode-btn.active{
background:#63e6ad !important;
color:#07130e !important;
border:0 !important;
}
/* =========================================================
V48 — rebuilt result panel: tooltips + 3 scenarios + insights
========================================================= */
.compact-results{
grid-template-columns:1fr 1fr !important;
padding-bottom:16px !important;
}
.scenario-block{
padding:4px 0 22px;
}
.scenario-heading{
display:flex;
justify-content:space-between;
gap:18px;
align-items:end;
margin-bottom:12px;
}
.scenario-heading>span{
font-size:11px;
font-weight:800;
letter-spacing:.13em;
}
.scenario-heading>small{
font-size:10px;
color:#7a867f;
}
.scenario-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}
.scenario-card{
min-height:152px;
border:1px solid #d8ded9;
border-radius:16px;
padding:15px 14px;
display:flex;
flex-direction:column;
background:#fff;
}
.scenario-name{
font-size:11px;
font-weight:800;
letter-spacing:.02em;
color:#66716b;
}
.scenario-card strong{
margin-top:auto;
font:800 29px/1 Manrope,Inter,sans-serif;
color:#111714;
}
.scenario-card small{
margin-top:5px;
color:#77827c;
font-size:10px;
}
.scenario-card b{
margin-top:12px;
font:800 17px/1 Manrope,Inter,sans-serif;
color:#111714;
}
.scenario-card.expected{
border-color:#2fb37d;
background:rgba(114,255,201,.12);
}
.scenario-card.expected .scenario-name,
.scenario-card.expected strong,
.scenario-card.expected b{
color:#159d6a;
}
.scenario-card.strong{
background:#f8faf8;
}
.metric-tip{
position:relative;
display:inline-grid;
place-items:center;
width:18px;
height:18px;
margin-left:5px;
padding:0;
border-radius:50%;
border:1px solid currentColor;
background:transparent;
color:inherit;
font:800 11px/1 Inter,sans-serif;
cursor:pointer;
vertical-align:middle;
}
.metric-tip::after{
content:attr(data-tip);
position:absolute;
left:50%;
bottom:calc(100% + 11px);
width:250px;
padding:11px 12px;
border-radius:10px;
background:#101713;
color:#fff;
font:500 12px/1.45 Inter,sans-serif;
box-shadow:0 12px 32px rgba(0,0,0,.25);
transform:translateX(-50%) translateY(5px);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:.15s ease;
z-index:30;
}
.metric-tip:hover::after,
.metric-tip.open::after{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}
.website-quality-note{
display:grid;
grid-template-columns:30px 1fr;
gap:12px;
align-items:start;
padding:15px;
margin:18px 0;
border:1px solid #d9dedb;
border-radius:14px;
background:#f7faf8;
}
.note-icon{
width:26px;
height:26px;
border-radius:50%;
display:grid;
place-items:center;
background:rgba(114,255,201,.22);
color:#159d6a;
font-weight:900;
}
.website-quality-note b{
display:block;
color:#15201b;
font-size:12px;
margin-bottom:4px;
}
.website-quality-note p{
margin:0;
color:#69736e;
font-size:11px;
line-height:1.5;
}
.business-meaning{
padding:16px;
margin:18px 0;
border:1px solid #bcd8cb;
border-radius:14px;
background:linear-gradient(135deg,rgba(114,255,201,.12),rgba(255,255,255,.7));
}
.business-meaning-kicker{
font-size:10px;
letter-spacing:.13em;
font-weight:800;
color:#159d6a;
margin-bottom:8px;
}
.business-meaning p{
margin:0 0 8px;
color:#25302a;
font-size:12px;
line-height:1.55;
}
.business-meaning small{
color:#738078;
font-size:10px;
line-height:1.45;
}
/* Dark calculator when site is light */
body.light-theme .scenario-heading>span{color:#f2f6f4}
body.light-theme .scenario-heading>small{color:#8d9b94}
body.light-theme .scenario-card{
background:#0d1814;
border-color:#26372f;
}
body.light-theme .scenario-name,
body.light-theme .scenario-card small{color:#9eaca5}
body.light-theme .scenario-card strong,
body.light-theme .scenario-card b{color:#f4f8f6}
body.light-theme .scenario-card.expected{
background:rgba(114,255,201,.075);
border-color:#3ea978;
}
body.light-theme .scenario-card.expected .scenario-name,
body.light-theme .scenario-card.expected strong,
body.light-theme .scenario-card.expected b{color:#63e6ad}
body.light-theme .scenario-card.strong{background:#101b17}
body.light-theme .website-quality-note{
background:#0d1814;
border-color:#26372f;
}
body.light-theme .website-quality-note b{color:#e7efeb}
body.light-theme .website-quality-note p{color:#a8b5af}
body.light-theme .business-meaning{
background:linear-gradient(135deg,rgba(114,255,201,.075),#0d1814);
border-color:#315144;
}
body.light-theme .business-meaning p{color:#dce7e1}
body.light-theme .business-meaning small{color:#9ca9a3}
@media(max-width:700px){
.scenario-grid{grid-template-columns:1fr}
.scenario-card{min-height:112px}
.scenario-heading{align-items:flex-start;flex-direction:column}
}
/* =========================================================
V49 — Free Tools / exact Google Ads calculators
========================================================= */
.exact-tools-hero{padding-bottom:46px}
.free-tools-section{padding:30px 0 72px}
.free-tools-intro{
display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin-bottom:26px
}
.free-tools-intro h2,.formula-reference h2,.tools-cta h2{
margin:6px 0 0;font:800 clamp(26px,3vw,42px)/1.05 Manrope,Inter,sans-serif
}
.free-tools-intro>p{margin:0;color:var(--muted);line-height:1.65;max-width:520px}
.calculator-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.calc-tab{
border:1px solid var(--line);background:transparent;color:var(--muted);
padding:10px 14px;border-radius:999px;font:700 12px/1 Inter,sans-serif;cursor:pointer;
transition:.18s ease
}
.calc-tab:hover{border-color:var(--mint);color:var(--text)}
.calc-tab.active{background:var(--mint);border-color:var(--mint);color:#07130e}
.exact-calculator-shell{
display:grid;grid-template-columns:.88fr 1.12fr;gap:0;
border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#0c1511
}
.exact-calculator-copy{padding:38px;color:#f4f8f6;background:#0c1511}
.exact-calc-label{font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--mint)}
.exact-calculator-copy h3{font:800 34px/1.05 Manrope,Inter,sans-serif;margin:10px 0 12px}
.exact-calculator-copy>p{color:#aebbb5;line-height:1.6;margin:0 0 28px}
.formula-box{border:1px solid #293a33;background:#101d17;border-radius:14px;padding:15px 16px}
.formula-box span{display:block;font-size:9px;letter-spacing:.13em;color:#8fa097;margin-bottom:6px}
.formula-box strong{font-size:14px;color:#eaf2ee}
.formula-note{font-size:11px;line-height:1.55;color:#87958e;margin-top:12px}
.exact-calculator-card{padding:38px;background:#f5f7f5;color:#111714}
#dynamicFields{display:grid;gap:14px}
.exact-field>span{display:block;font-size:11px;font-weight:800;color:#536059;margin-bottom:7px}
.exact-input-wrap{
display:flex;align-items:center;border:1px solid #d4dbd7;border-radius:12px;background:#fff;overflow:hidden
}
.exact-input-wrap:focus-within{border-color:#38b982;box-shadow:0 0 0 3px rgba(99,230,173,.13)}
.exact-input-wrap i{font-style:normal;font-weight:800;color:#65716b;padding-left:14px}
.exact-input-wrap input{
width:100%;border:0;outline:0;background:transparent;color:#101713;padding:14px;
font:700 15px/1 Inter,sans-serif
}
.exact-result{margin-top:20px;border-top:1px solid #d9dfdb;padding-top:20px}
.exact-result>span{display:block;font-size:10px;letter-spacing:.12em;font-weight:800;color:#65716b}
.exact-result strong{display:block;font:800 42px/1 Manrope,Inter,sans-serif;color:#159d6a;margin:8px 0}
.exact-result small{display:block;color:#6d7972;line-height:1.5}
.formula-reference{padding:70px 0 20px}
.formula-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.formula-grid article{
border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:7px
}
.formula-grid b{font-size:13px}.formula-grid span{font-size:11px;color:var(--muted);line-height:1.45}
.tools-cta{
margin-top:46px;padding:28px;border:1px solid var(--line);border-radius:20px;
display:flex;justify-content:space-between;align-items:center;gap:30px
}
.tools-cta h2{font-size:26px}.tools-cta p{color:var(--muted);max-width:650px;margin:9px 0 0;line-height:1.55}
.tools-cta .button{flex:0 0 auto}
/* Keep the calculator visually inverted like the preferred previous version */
body.light-theme .exact-calculator-shell{border-color:#d7ded9}
body.light-theme .exact-calculator-copy{background:#0c1511;color:#f4f8f6}
body.light-theme .exact-calculator-card{background:#0f1b16;color:#f4f8f6}
body.light-theme .exact-field>span{color:#a8b5af}
body.light-theme .exact-input-wrap{background:#101f18;border-color:#2b3c34}
body.light-theme .exact-input-wrap input{color:#f4f8f6}
body.light-theme .exact-input-wrap i{color:#a9b6b0}
body.light-theme .exact-result{border-color:#2a3a33}
body.light-theme .exact-result>span,body.light-theme .exact-result small{color:#9eaca5}
body.light-theme .exact-result strong{color:var(--mint)}
@media(max-width:900px){
.free-tools-intro,.exact-calculator-shell{grid-template-columns:1fr}
.formula-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.free-tools-section{padding-top:20px}
.free-tools-intro{gap:16px}
.exact-calculator-copy,.exact-calculator-card{padding:24px 20px}
.formula-grid{grid-template-columns:1fr}
.tools-cta{align-items:flex-start;flex-direction:column}
.calculator-tabs{gap:6px}
.calc-tab{padding:9px 11px}
}
/* =========================================================
V50 — Free Tools layout/readability correction
========================================================= */
/* This page gets its own reliable centered width instead of inheriting
narrower/offset container rules from older sections. */
.exact-tools-hero .container,
.free-tools-section .container{
width:min(1320px, calc(100% - 64px)) !important;
max-width:1320px !important;
margin-left:auto !important;
margin-right:auto !important;
padding-left:0 !important;
padding-right:0 !important;
}
.exact-tools-hero{
padding-top:72px !important;
padding-bottom:64px !important;
overflow:hidden;
}
.exact-tools-hero .tool-hero-inner{
display:grid !important;
grid-template-columns:minmax(0, 1.45fr) minmax(310px, .55fr) !important;
gap:80px !important;
align-items:center !important;
}
.exact-tools-hero .tool-hero-copy{
max-width:900px !important;
min-width:0;
}
.exact-tools-hero .tool-hero-copy h1{
max-width:900px !important;
font-size:clamp(54px, 5.2vw, 82px) !important;
line-height:.98 !important;
letter-spacing:-.055em !important;
margin:16px 0 28px !important;
}
.exact-tools-hero .tool-hero-copy p{
max-width:790px !important;
font-size:18px !important;
line-height:1.65 !important;
}
.exact-tools-hero .tool-example-card{
width:100% !important;
max-width:380px !important;
justify-self:end !important;
padding:28px !important;
border-radius:20px !important;
}
.exact-tools-hero .tool-example-card>span{
display:block;
font-size:11px !important;
letter-spacing:.12em;
margin-bottom:12px;
}
.exact-tools-hero .tool-example-card>strong{
display:block;
font-size:20px !important;
line-height:1.3 !important;
}
.exact-tools-hero .tool-example-card b{
display:block;
font-size:32px !important;
line-height:1 !important;
margin:14px 0 10px !important;
}
.exact-tools-hero .tool-example-card small{
font-size:12px !important;
line-height:1.5 !important;
}
/* Intro and tabs */
.free-tools-section{
padding-top:72px !important;
}
.free-tools-intro{
grid-template-columns:minmax(0, 1.3fr) minmax(330px, .7fr) !important;
gap:70px !important;
align-items:end !important;
margin-bottom:34px !important;
}
.free-tools-intro h2{
font-size:clamp(38px, 4vw, 58px) !important;
line-height:1.03 !important;
letter-spacing:-.04em !important;
max-width:900px;
}
.free-tools-intro>p{
font-size:16px !important;
line-height:1.65 !important;
max-width:500px !important;
justify-self:end;
}
.calculator-tabs{
gap:10px !important;
margin:0 0 24px !important;
}
.calc-tab{
min-height:46px !important;
padding:0 19px !important;
font-size:14px !important;
font-weight:800 !important;
white-space:nowrap;
border-width:1px !important;
}
.calc-tab.active{
background:#63e6ad !important;
border-color:#63e6ad !important;
color:#07130e !important;
-webkit-text-fill-color:#07130e !important;
opacity:1 !important;
}
/* Main calculator */
.exact-calculator-shell{
grid-template-columns:minmax(360px, .82fr) minmax(480px, 1.18fr) !important;
min-height:450px;
}
.exact-calculator-copy{
padding:48px !important;
}
.exact-calculator-copy h3{
font-size:40px !important;
margin:12px 0 16px !important;
}
.exact-calculator-copy>p{
font-size:15px !important;
}
.formula-box{
padding:18px 20px !important;
}
.formula-box strong{
font-size:17px !important;
}
.formula-note{
font-size:13px !important;
}
.exact-calculator-card{
padding:48px !important;
}
.exact-field>span{
font-size:13px !important;
margin-bottom:9px !important;
}
.exact-input-wrap{
min-height:56px;
}
.exact-input-wrap i{
font-size:16px;
}
.exact-input-wrap input{
font-size:18px !important;
padding:17px 16px !important;
}
.exact-result{
margin-top:28px !important;
padding-top:26px !important;
}
.exact-result>span{
font-size:12px !important;
}
.exact-result strong{
font-size:56px !important;
margin:10px 0 12px !important;
}
.exact-result small{
font-size:13px !important;
}
/* Reference formulas are also easier to scan */
.formula-grid article{
min-height:105px;
padding:20px !important;
}
.formula-grid b{
font-size:16px !important;
}
.formula-grid span{
font-size:13px !important;
}
@media(max-width:1100px){
.exact-tools-hero .container,
.free-tools-section .container{
width:min(100% - 40px, 1040px) !important;
}
.exact-tools-hero .tool-hero-inner{
gap:42px !important;
grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr) !important;
}
.exact-tools-hero .tool-hero-copy h1{
font-size:clamp(48px,6vw,68px) !important;
}
.exact-calculator-shell{
grid-template-columns:.9fr 1.1fr !important;
}
}
@media(max-width:820px){
.exact-tools-hero .container,
.free-tools-section .container{
width:calc(100% - 32px) !important;
}
.exact-tools-hero .tool-hero-inner,
.free-tools-intro,
.exact-calculator-shell{
grid-template-columns:1fr !important;
}
.exact-tools-hero .tool-example-card{
justify-self:start !important;
max-width:100% !important;
}
.free-tools-intro{
gap:18px !important;
}
.free-tools-intro>p{
justify-self:start;
}
.exact-calculator-copy,
.exact-calculator-card{
padding:30px !important;
}
}
@media(max-width:520px){
.exact-tools-hero .container,
.free-tools-section .container{
width:calc(100% - 24px) !important;
}
.exact-tools-hero{
padding-top:48px !important;
}
.exact-tools-hero .tool-hero-copy h1{
font-size:44px !important;
}
.exact-tools-hero .tool-hero-copy p{
font-size:16px !important;
}
.free-tools-intro h2{
font-size:38px !important;
}
.calculator-tabs{
flex-wrap:nowrap !important;
overflow-x:auto;
padding-bottom:7px;
}
.calc-tab{
flex:0 0 auto;
font-size:13px !important;
}
.exact-calculator-copy,
.exact-calculator-card{
padding:24px 20px !important;
}
.exact-result strong{
font-size:46px !important;
}
}
/* =========================================================
V51 — calculator tabs + light-theme separation + footer fix
========================================================= */
/* Remove browser-default blue/underlined appearance from footer/site links */
footer a,
.site-footer a,
.footer a{
color:inherit !important;
text-decoration:none !important;
}
footer a:hover,
.site-footer a:hover,
.footer a:hover{
color:var(--mint) !important;
}
/* Calculator selector: same mint interaction language as the rest of the site */
.calculator-tabs{
position:relative;
isolation:isolate;
}
.calc-tab{
position:relative;
overflow:hidden;
isolation:isolate;
background:rgba(255,255,255,.015) !important;
border:1px solid rgba(255,255,255,.13) !important;
color:#e8efeb !important;
-webkit-text-fill-color:#e8efeb !important;
box-shadow:none !important;
}
.calc-tab::before{
content:"";
position:absolute;
inset:-1px;
z-index:-1;
background:linear-gradient(110deg,
transparent 0%,
transparent 32%,
rgba(99,230,173,.08) 42%,
rgba(99,230,173,.42) 50%,
rgba(99,230,173,.08) 58%,
transparent 68%,
transparent 100%);
background-size:260% 100%;
background-position:160% 0;
opacity:0;
}
.calc-tab:hover{
border-color:rgba(99,230,173,.72) !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
transform:translateY(-1px);
}
.calc-tab:hover::before{
opacity:1;
animation:tabMintSweep 1.8s linear infinite;
}
.calc-tab.active{
background:#63e6ad !important;
border-color:#63e6ad !important;
color:#07130e !important;
-webkit-text-fill-color:#07130e !important;
box-shadow:0 0 0 2px #07130e, 0 0 0 3px rgba(99,230,173,.7) !important;
}
.calc-tab.active::before{
display:none;
}
/* On the white theme the pills need stronger separation from the background. */
body.light-theme .calc-tab{
background:#fff !important;
border-color:#c9d2cd !important;
color:#26322c !important;
-webkit-text-fill-color:#26322c !important;
box-shadow:0 4px 14px rgba(12,28,21,.055) !important;
}
body.light-theme .calc-tab:hover{
border-color:#48c58e !important;
color:#111914 !important;
-webkit-text-fill-color:#111914 !important;
box-shadow:0 7px 20px rgba(21,91,61,.10) !important;
}
body.light-theme .calc-tab::before{
background:linear-gradient(110deg,
transparent 0%,
transparent 30%,
rgba(99,230,173,.04) 39%,
rgba(99,230,173,.30) 50%,
rgba(99,230,173,.04) 61%,
transparent 70%,
transparent 100%);
background-size:260% 100%;
}
body.light-theme .calc-tab.active{
background:#63e6ad !important;
border-color:#2eae77 !important;
color:#07130e !important;
-webkit-text-fill-color:#07130e !important;
box-shadow:0 0 0 2px #fff, 0 0 0 3px #2eae77, 0 8px 22px rgba(33,164,108,.16) !important;
}
@keyframes tabMintSweep{
from{background-position:160% 0}
to{background-position:-80% 0}
}
@media (prefers-reduced-motion: reduce){
.calc-tab:hover::before{animation:none}
}
/* V52 — remove native white number-input spinner UI */
.exact-input-wrap input[type="number"]{
appearance:textfield;
-moz-appearance:textfield;
}
.exact-input-wrap input[type="number"]::-webkit-inner-spin-button,
.exact-input-wrap input[type="number"]::-webkit-outer-spin-button{
-webkit-appearance:none;
appearance:none;
margin:0;
}
/* =========================================================
V53 — autonomous mint light travelling around calculator tabs
========================================================= */
/* Stop the previous mouse-hover sweep */
.calc-tab:hover::before{
animation:none !important;
opacity:0 !important;
}
/* A moving highlight travels around each pill border by itself */
.calc-tab::after{
content:"";
position:absolute;
inset:-2px;
border-radius:inherit;
padding:2px;
background:conic-gradient(
from var(--tab-angle),
transparent 0deg,
transparent 300deg,
rgba(99,230,173,.12) 318deg,
rgba(99,230,173,.95) 342deg,
#b9ffe0 352deg,
rgba(99,230,173,.55) 358deg,
transparent 360deg
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
pointer-events:none;
z-index:2;
animation:tabContourTravel 3.6s linear infinite;
opacity:.82;
}
/* Stagger the lights so all pills do not move in perfect sync */
.calc-tab:nth-child(2)::after{animation-delay:-.45s}
.calc-tab:nth-child(3)::after{animation-delay:-.9s}
.calc-tab:nth-child(4)::after{animation-delay:-1.35s}
.calc-tab:nth-child(5)::after{animation-delay:-1.8s}
.calc-tab:nth-child(6)::after{animation-delay:-2.25s}
.calc-tab:nth-child(7)::after{animation-delay:-2.7s}
.calc-tab:nth-child(8)::after{animation-delay:-3.15s}
/* Active pill is already mint, so keep its border clean */
.calc-tab.active::after{
opacity:0;
}
@property --tab-angle{
syntax:"";
initial-value:0deg;
inherits:false;
}
@keyframes tabContourTravel{
to{--tab-angle:360deg}
}
/* Slightly more visible on white theme */
body.light-theme .calc-tab::after{
opacity:1;
background:conic-gradient(
from var(--tab-angle),
transparent 0deg,
transparent 296deg,
rgba(43,188,125,.08) 314deg,
rgba(43,188,125,.78) 340deg,
#63e6ad 352deg,
rgba(43,188,125,.42) 358deg,
transparent 360deg
);
}
body.light-theme .calc-tab.active::after{opacity:0}
@media (prefers-reduced-motion: reduce){
.calc-tab::after{animation:none;opacity:0}
}
/* =========================================================
V54 — moving mint contour ONLY on the hero example card
========================================================= */
/* Disable autonomous contour animation on calculator tabs */
.calc-tab::after{
display:none !important;
}
/* Keep normal tab interaction without animated border */
.calc-tab{
overflow:hidden;
}
.calc-tab:hover::before{
animation:none !important;
opacity:0 !important;
}
/* Highlight the example/result card in the hero */
.exact-tools-hero .tool-example-card{
position:relative;
isolation:isolate;
overflow:hidden;
border:1px solid rgba(99,230,173,.22) !important;
}
.exact-tools-hero .tool-example-card::before{
content:"";
position:absolute;
inset:-2px;
border-radius:inherit;
padding:2px;
background:conic-gradient(
from var(--example-angle),
transparent 0deg,
transparent 300deg,
rgba(99,230,173,.10) 316deg,
rgba(99,230,173,.72) 338deg,
#b9ffe0 351deg,
rgba(99,230,173,.40) 358deg,
transparent 360deg
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
pointer-events:none;
z-index:2;
animation:exampleContourTravel 3.8s linear infinite;
}
.exact-tools-hero .tool-example-card::after{
content:"";
position:absolute;
width:130px;
height:130px;
border-radius:50%;
right:-40px;
top:-45px;
background:radial-gradient(circle, rgba(99,230,173,.16), transparent 68%);
pointer-events:none;
z-index:-1;
}
@property --example-angle{
syntax:"";
initial-value:0deg;
inherits:false;
}
@keyframes exampleContourTravel{
to{--example-angle:360deg}
}
/* Slightly stronger contrast on the light theme */
body.light-theme .exact-tools-hero .tool-example-card{
border-color:rgba(46,174,119,.26) !important;
box-shadow:0 12px 36px rgba(20,85,58,.06);
}
body.light-theme .exact-tools-hero .tool-example-card::before{
background:conic-gradient(
from var(--example-angle),
transparent 0deg,
transparent 298deg,
rgba(46,174,119,.08) 315deg,
rgba(46,174,119,.68) 338deg,
#63e6ad 351deg,
rgba(46,174,119,.34) 358deg,
transparent 360deg
);
}
@media (prefers-reduced-motion: reduce){
.exact-tools-hero .tool-example-card::before{
animation:none;
opacity:.45;
}
}
/* =========================================================
V55 — one unified footer across every page
========================================================= */
.unified-footer{
border-top:1px solid var(--line);
background:var(--bg);
color:var(--text);
}
.unified-footer .container{
width:min(1320px, calc(100% - 64px)) !important;
max-width:1320px !important;
margin-left:auto !important;
margin-right:auto !important;
padding-left:0 !important;
padding-right:0 !important;
}
.footer-main{
display:grid;
grid-template-columns:1.45fr .65fr .85fr 1.05fr;
gap:64px;
padding-top:64px !important;
padding-bottom:54px !important;
}
.footer-logo{
display:inline-block;
color:var(--text) !important;
text-decoration:none !important;
font:500 30px/1 Manrope,Inter,sans-serif;
letter-spacing:-.05em;
}
.footer-logo span{font-weight:800}
.footer-logo i{
color:var(--mint);
font-style:normal;
font-weight:900;
}
.footer-subtitle{
margin-top:7px;
font-size:9px;
letter-spacing:.28em;
color:var(--muted);
}
.footer-brand>p{
max-width:350px;
margin:22px 0 0;
color:var(--muted);
font-size:13px;
line-height:1.65;
}
.footer-heading{
margin-bottom:18px;
color:var(--text);
font-size:11px;
font-weight:800;
letter-spacing:.13em;
text-transform:uppercase;
}
.footer-column{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.footer-column>a:not(.footer-cta){
margin:0 0 11px;
color:var(--muted) !important;
text-decoration:none !important;
font-size:13px;
transition:.18s ease;
}
.footer-column>a:not(.footer-cta):hover{
color:var(--mint) !important;
transform:translateX(2px);
}
.footer-contact>p{
max-width:280px;
margin:0 0 18px;
color:var(--muted);
font-size:13px;
line-height:1.55;
}
.footer-cta{
display:inline-flex;
align-items:center;
gap:18px;
min-height:44px;
padding:0 18px;
border-radius:11px;
background:var(--mint);
color:#07130e !important;
text-decoration:none !important;
font-size:12px;
font-weight:800;
transition:.18s ease;
}
.footer-cta:hover{
color:#07130e !important;
transform:translateY(-2px);
box-shadow:0 9px 24px rgba(42,181,119,.16);
}
.footer-bottom{
display:flex;
justify-content:space-between;
gap:24px;
padding-top:20px !important;
padding-bottom:24px !important;
border-top:1px solid var(--line);
color:var(--muted);
font-size:10px;
}
/* Explicit light-theme treatment */
body.light-theme .unified-footer{
background:#f7f8f7;
border-top-color:#dfe4e1;
}
body.light-theme .footer-bottom{
border-top-color:#dfe4e1;
}
@media(max-width:980px){
.unified-footer .container{
width:calc(100% - 40px) !important;
}
.footer-main{
grid-template-columns:1.3fr 1fr 1fr;
gap:42px;
}
.footer-contact{
grid-column:1/-1;
}
}
@media(max-width:650px){
.unified-footer .container{
width:calc(100% - 28px) !important;
}
.footer-main{
grid-template-columns:1fr 1fr;
gap:36px 28px;
padding-top:44px !important;
padding-bottom:38px !important;
}
.footer-brand,.footer-contact{
grid-column:1/-1;
}
.footer-bottom{
flex-direction:column;
gap:7px;
}
}
/* =========================================================
V56 — Free Tools roadmap: Audit / Compare / Calculators
Graphical placeholders only. No audit backend yet.
========================================================= */
.future-tools-section{
padding:26px 0 82px;
position:relative;
}
.future-tools-container{
width:min(1320px, calc(100% - 64px)) !important;
max-width:1320px !important;
margin:0 auto !important;
}
.future-tools-head{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:40px;
margin-bottom:28px;
}
.future-tools-copy{max-width:800px}
.future-tools-copy h2{
margin:10px 0 12px;
font-size:clamp(38px,4.5vw,58px);
line-height:1.02;
letter-spacing:-.045em;
}
.future-tools-copy p{
max-width:760px;
margin:0;
color:var(--muted);
line-height:1.65;
font-size:14px;
}
.future-tools-note{
display:inline-flex;
align-items:center;
gap:9px;
padding:10px 13px;
border:1px solid var(--line);
border-radius:999px;
color:var(--muted);
font-size:11px;
white-space:nowrap;
}
.future-tools-note-dot{
width:7px;height:7px;border-radius:50%;
background:var(--mint);
box-shadow:0 0 0 5px rgba(99,230,173,.08);
}
.future-tools-grid{
display:grid;
grid-template-columns:1.18fr 1fr 1fr;
gap:18px;
}
.future-tool-card{
position:relative;
overflow:hidden;
min-height:430px;
padding:26px;
border:1px solid var(--line);
border-radius:22px;
background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012));
display:flex;
flex-direction:column;
}
.future-tool-card::before{
content:"";
position:absolute;
inset:auto -90px -110px auto;
width:220px;height:220px;
border-radius:50%;
background:radial-gradient(circle, rgba(99,230,173,.09), transparent 68%);
pointer-events:none;
}
.future-tool-card--primary{
border-color:rgba(99,230,173,.28);
box-shadow:0 18px 60px rgba(0,0,0,.08);
}
.future-tool-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:28px;
}
.future-tool-index{
color:var(--muted);
font-size:11px;
font-weight:800;
letter-spacing:.14em;
}
.future-tool-status{
padding:7px 10px;
border:1px solid rgba(99,230,173,.28);
border-radius:999px;
color:var(--mint);
background:rgba(99,230,173,.055);
font-size:10px;
font-weight:800;
letter-spacing:.04em;
}
.future-tool-status--live{
background:var(--mint);
color:#07130e;
border-color:var(--mint);
}
.future-tool-card h3{
margin:0 0 10px;
font-size:24px;
letter-spacing:-.025em;
}
.future-tool-card>p{
margin:0 0 24px;
min-height:66px;
color:var(--muted);
font-size:13px;
line-height:1.65;
}
.future-tool-icon{
display:flex;
align-items:flex-end;
gap:5px;
width:54px;height:42px;
margin-bottom:23px;
}
.future-tool-icon span{
width:12px;
border-radius:5px 5px 2px 2px;
background:var(--mint);
opacity:.85;
}
.future-tool-icon span:nth-child(1){height:20px;opacity:.35}
.future-tool-icon span:nth-child(2){height:31px;opacity:.6}
.future-tool-icon span:nth-child(3){height:42px}
.future-tool-mock{
margin-top:auto;
padding:14px;
border:1px solid var(--line);
border-radius:16px;
background:rgba(0,0,0,.11);
}
.future-tool-mock label,
.future-tool-compare-fields label{
display:block;
margin-bottom:8px;
color:var(--muted);
font-size:9px;
text-transform:uppercase;
letter-spacing:.12em;
font-weight:800;
}
.future-tool-input{
display:flex;
gap:10px;
align-items:center;
}
.future-tool-input>span{
flex:1;
min-width:0;
min-height:46px;
display:flex;
align-items:center;
padding:0 13px;
border:1px solid var(--line);
border-radius:11px;
color:var(--muted);
font-size:12px;
}
.future-tool-input button,
.future-tool-disabled-btn{
border:0;
border-radius:11px;
background:var(--mint);
color:#07130e;
min-height:46px;
padding:0 14px;
font-size:11px;
font-weight:800;
opacity:.74;
cursor:default;
}
.future-tool-tags{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:12px;
}
.future-tool-tags span,
.future-tool-metrics span{
border:1px solid var(--line);
border-radius:999px;
padding:6px 9px;
color:var(--muted);
font-size:9px;
font-weight:700;
}
/* compare card */
.future-tool-compare-icon{
display:flex;
align-items:center;
gap:7px;
margin-bottom:24px;
}
.compare-left,.compare-right{
width:30px;height:30px;border-radius:9px;
border:1px solid rgba(99,230,173,.35);
background:rgba(99,230,173,.06);
position:relative;
}
.compare-left::before,.compare-right::before{
content:"";
position:absolute;
left:7px;right:7px;bottom:7px;
height:2px;
background:var(--mint);
box-shadow:0 -5px 0 rgba(99,230,173,.55), 0 -10px 0 rgba(99,230,173,.25);
}
.compare-vs{
color:var(--muted);
font-size:9px;
font-weight:900;
}
.future-tool-compare-fields{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:end;
gap:8px;
margin-top:auto;
}
.future-tool-compare-fields>div:not(.future-tool-vs){
min-width:0;
padding:11px;
border:1px solid var(--line);
border-radius:12px;
}
.future-tool-compare-fields span{
display:block;
overflow:hidden;
text-overflow:ellipsis;
color:var(--text);
font-size:11px;
white-space:nowrap;
}
.future-tool-vs{
padding-bottom:12px;
color:var(--mint);
font-size:9px;
font-weight:900;
}
.future-tool-disabled-btn{
width:100%;
margin-top:10px;
border:1px solid rgba(99,230,173,.2);
background:rgba(99,230,173,.08);
color:var(--mint);
}
/* calculator card */
.future-tool-calc-icon{
display:flex;
gap:7px;
margin-bottom:24px;
}
.future-tool-calc-icon span{
width:32px;height:32px;
display:grid;
place-items:center;
border-radius:9px;
border:1px solid var(--line);
color:var(--mint);
background:rgba(99,230,173,.04);
font-size:12px;
font-weight:900;
}
.future-tool-metrics{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:auto;
}
.future-tool-live-btn{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
min-height:46px;
margin-top:18px;
padding:0 14px;
border-radius:11px;
background:var(--mint);
color:#07130e !important;
text-decoration:none !important;
font-size:11px;
font-weight:800;
transition:.18s ease;
}
.future-tool-live-btn:hover{
color:#07130e !important;
transform:translateY(-2px);
box-shadow:0 9px 24px rgba(42,181,119,.14);
}
/* Light theme */
body.light-theme .future-tool-card{
background:#fff;
box-shadow:0 12px 36px rgba(24,47,37,.045);
}
body.light-theme .future-tool-card--primary{
border-color:rgba(46,174,119,.30);
}
body.light-theme .future-tool-mock{
background:#f7f9f8;
}
body.light-theme .future-tool-input>span,
body.light-theme .future-tool-compare-fields>div:not(.future-tool-vs),
body.light-theme .future-tool-calc-icon span,
body.light-theme .future-tool-tags span,
body.light-theme .future-tool-metrics span{
border-color:#d9e0dc;
}
@media(max-width:1080px){
.future-tools-grid{grid-template-columns:1fr 1fr}
.future-tool-card--live{grid-column:1/-1;min-height:330px}
}
@media(max-width:760px){
.future-tools-container{width:calc(100% - 32px)!important}
.future-tools-head{align-items:flex-start;flex-direction:column;gap:18px}
.future-tools-grid{grid-template-columns:1fr}
.future-tool-card--live{grid-column:auto}
}
@media(max-width:520px){
.future-tools-section{padding-bottom:58px}
.future-tools-container{width:calc(100% - 24px)!important}
.future-tool-card{padding:21px;min-height:auto}
.future-tool-card>p{min-height:auto}
.future-tool-input{flex-direction:column;align-items:stretch}
.future-tool-input button{width:100%}
}
/* =========================================================
V57 — simplified Free Tools directory
========================================================= */
/* Hide the previous V56 card UI if any old markup/styles remain */
.future-tools-section{display:none!important}
.tools-directory{
padding:22px 0 78px;
}
.tools-directory-container{
width:min(1320px, calc(100% - 64px))!important;
max-width:1320px!important;
margin:0 auto!important;
}
.tools-directory-head{
max-width:720px;
margin-bottom:30px;
}
.tools-directory-head h2{
margin:10px 0 12px;
font-size:clamp(38px,4.3vw,58px);
line-height:1.02;
letter-spacing:-.045em;
}
.tools-directory-head p{
margin:0;
color:var(--muted);
font-size:14px;
line-height:1.65;
}
.tools-directory-list{
border-top:1px solid var(--line);
}
.tool-directory-row{
display:grid;
grid-template-columns:54px minmax(0,1fr) auto;
gap:22px;
align-items:center;
min-height:126px;
padding:25px 4px;
border-bottom:1px solid var(--line);
}
.tool-directory-number{
align-self:start;
padding-top:7px;
color:var(--muted);
font-size:10px;
font-weight:800;
letter-spacing:.14em;
}
.tool-directory-titleline{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}
.tool-directory-content h3{
margin:0;
font-size:22px;
line-height:1.15;
letter-spacing:-.025em;
}
.tool-directory-content p{
max-width:700px;
margin:9px 0 0;
color:var(--muted);
font-size:13px;
line-height:1.55;
}
.tool-directory-badge{
display:inline-flex;
align-items:center;
min-height:25px;
padding:0 9px;
border:1px solid var(--line);
border-radius:999px;
color:var(--muted);
font-size:9px;
font-weight:800;
letter-spacing:.035em;
}
.tool-directory-badge--available{
border-color:rgba(99,230,173,.32);
background:rgba(99,230,173,.07);
color:var(--mint);
}
.tool-directory-action{
min-width:154px;
min-height:44px;
display:inline-flex;
justify-content:space-between;
align-items:center;
gap:20px;
padding:0 15px;
border-radius:11px;
background:var(--mint);
color:#07130e!important;
text-decoration:none!important;
font-size:11px;
font-weight:800;
transition:.18s ease;
}
a.tool-directory-action:hover{
transform:translateY(-2px);
color:#07130e!important;
box-shadow:0 9px 24px rgba(42,181,119,.14);
}
.tool-directory-action--disabled{
justify-content:center;
border:1px solid var(--line);
background:transparent;
color:var(--muted)!important;
opacity:.72;
}
.tool-directory-row--available{
position:relative;
}
.tool-directory-row--available::before{
content:"";
position:absolute;
left:0;
top:28px;
bottom:28px;
width:2px;
border-radius:99px;
background:var(--mint);
}
body.light-theme .tools-directory-list,
body.light-theme .tool-directory-row{
border-color:#dfe4e1;
}
body.light-theme .tool-directory-action--disabled,
body.light-theme .tool-directory-badge{
border-color:#d6ddda;
}
@media(max-width:760px){
.tools-directory-container{width:calc(100% - 32px)!important}
.tool-directory-row{
grid-template-columns:38px 1fr;
gap:12px;
padding:22px 0;
}
.tool-directory-action{
grid-column:2;
width:100%;
margin-top:4px;
}
}
@media(max-width:520px){
.tools-directory{padding-bottom:56px}
.tools-directory-container{width:calc(100% - 24px)!important}
.tool-directory-titleline{align-items:flex-start}
}
/* =========================================================
V58 — Free Tools hub + separate tool pages
========================================================= */
.tools-hub-page{
min-height:70vh;
}
.tools-hub-container,
.future-tool-page-container{
width:min(1320px, calc(100% - 64px))!important;
max-width:1320px!important;
margin:0 auto!important;
}
.tools-hub-hero{
padding:112px 0 54px;
}
.tools-hub-hero h1{
margin:10px 0 14px;
font-size:clamp(56px,7vw,92px);
line-height:.96;
letter-spacing:-.055em;
}
.tools-hub-hero p{
max-width:760px;
margin:0;
color:var(--muted);
font-size:16px;
line-height:1.65;
}
.tools-hub-list{
padding:0 0 100px;
}
.tools-hub-card{
display:grid;
grid-template-columns:58px minmax(0,1fr) 60px;
gap:22px;
align-items:center;
min-height:154px;
padding:28px 6px;
border-top:1px solid var(--line);
color:var(--text)!important;
text-decoration:none!important;
transition:.18s ease;
}
.tools-hub-card:last-child{
border-bottom:1px solid var(--line);
}
.tools-hub-card:hover{
padding-left:14px;
padding-right:14px;
background:rgba(99,230,173,.025);
}
.tools-hub-card-number{
align-self:start;
padding-top:8px;
color:var(--muted);
font-size:10px;
font-weight:800;
letter-spacing:.14em;
}
.tools-hub-titleline{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}
.tools-hub-titleline h2{
margin:0;
font-size:30px;
letter-spacing:-.035em;
}
.tools-hub-card-copy p{
max-width:760px;
margin:10px 0 0;
color:var(--muted);
font-size:14px;
line-height:1.6;
}
.tools-hub-badge{
display:inline-flex;
align-items:center;
min-height:27px;
padding:0 10px;
border:1px solid var(--line);
border-radius:999px;
color:var(--muted);
font-size:9px;
font-weight:800;
}
.tools-hub-badge--live{
border-color:rgba(99,230,173,.34);
background:rgba(99,230,173,.075);
color:var(--mint);
}
.tools-hub-arrow{
justify-self:end;
width:44px;height:44px;
display:grid;
place-items:center;
border:1px solid var(--line);
border-radius:50%;
color:var(--text);
font-size:18px;
transition:.18s ease;
}
.tools-hub-card:hover .tools-hub-arrow{
border-color:var(--mint);
color:var(--mint);
transform:translateX(3px);
}
.tools-hub-card--live{
position:relative;
}
.tools-hub-card--live::before{
content:"";
position:absolute;
left:0;
top:34px;
bottom:34px;
width:2px;
border-radius:99px;
background:var(--mint);
}
/* Future tool detail pages */
.future-tool-hero{
padding:92px 0 66px;
}
.future-tool-back{
display:inline-block;
margin-bottom:54px;
color:var(--muted)!important;
text-decoration:none!important;
font-size:12px;
}
.future-tool-back:hover{color:var(--mint)!important}
.future-tool-hero h1{
max-width:980px;
margin:10px 0 18px;
font-size:clamp(54px,7vw,88px);
line-height:.96;
letter-spacing:-.055em;
}
.future-tool-hero p{
max-width:760px;
margin:0 0 24px;
color:var(--muted);
font-size:16px;
line-height:1.65;
}
.future-tool-page-status{
display:inline-flex;
align-items:center;
min-height:30px;
padding:0 11px;
border:1px solid rgba(99,230,173,.3);
border-radius:999px;
color:var(--mint);
background:rgba(99,230,173,.06);
font-size:10px;
font-weight:800;
}
.future-tool-preview{
padding:28px 0 100px;
}
.future-tool-preview-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:76px;
align-items:center;
}
.future-tool-preview-copy h2{
margin:10px 0 22px;
font-size:clamp(38px,4.2vw,56px);
line-height:1.02;
letter-spacing:-.045em;
}
.future-tool-preview-copy ul{
margin:0;
padding-left:20px;
color:var(--text);
}
.future-tool-preview-copy li{
margin:0 0 12px;
color:var(--muted);
line-height:1.55;
font-size:14px;
}
.future-tool-disclaimer{
margin:24px 0 0;
color:var(--muted);
font-size:12px;
line-height:1.55;
}
.future-tool-preview-card{
padding:30px;
border:1px solid var(--line);
border-radius:24px;
background:linear-gradient(180deg, rgba(99,230,173,.035), rgba(255,255,255,.015));
}
.future-mock-label{
margin:0 0 8px;
color:var(--muted);
font-size:10px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.future-mock-input{
min-height:54px;
display:flex;
align-items:center;
padding:0 15px;
border:1px solid var(--line);
border-radius:12px;
color:var(--muted);
font-size:13px;
}
.future-mock-button{
min-height:50px;
display:flex;
align-items:center;
justify-content:center;
margin-top:12px;
border-radius:12px;
background:var(--mint);
color:#07130e;
font-size:12px;
font-weight:800;
opacity:.78;
}
.future-mock-note{
margin-top:12px;
color:var(--muted);
font-size:10px;
text-align:center;
}
.future-mock-vs{
margin:14px 0;
color:var(--mint);
font-size:10px;
font-weight:900;
text-align:center;
}
/* Light theme */
body.light-theme .tools-hub-card{
border-color:#dfe4e1;
}
body.light-theme .tools-hub-arrow,
body.light-theme .tools-hub-badge,
body.light-theme .future-tool-preview-card,
body.light-theme .future-mock-input{
border-color:#d8dfdb;
}
body.light-theme .future-tool-preview-card{
background:#fff;
box-shadow:0 16px 42px rgba(22,50,37,.05);
}
@media(max-width:820px){
.tools-hub-container,.future-tool-page-container{
width:calc(100% - 32px)!important;
}
.tools-hub-card{
grid-template-columns:40px minmax(0,1fr);
}
.tools-hub-arrow{
grid-column:2;
justify-self:start;
margin-top:4px;
}
.future-tool-preview-grid{
grid-template-columns:1fr;
gap:38px;
}
}
@media(max-width:520px){
.tools-hub-container,.future-tool-page-container{
width:calc(100% - 24px)!important;
}
.tools-hub-hero{padding-top:78px}
.tools-hub-titleline h2{font-size:25px}
.tools-hub-card{padding:24px 0}
}
/* =========================================================
V59 — polished Free Tools hub
========================================================= */
.tools-hub-page--polished{
overflow:hidden;
}
.tools-hub-hero--polished{
position:relative;
padding:92px 0 76px;
border-bottom:1px solid var(--line);
background:
radial-gradient(circle at 78% 34%, rgba(99,230,173,.10), transparent 28%),
linear-gradient(180deg, rgba(99,230,173,.025), transparent 70%);
}
.tools-hub-hero--polished::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.25;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size:54px 54px;
mask-image:linear-gradient(to bottom, #000, transparent 85%);
}
.tools-hub-hero-grid{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);
gap:72px;
align-items:center;
}
.tools-hub-hero-copy h1{
margin:12px 0 22px;
max-width:920px;
font-size:clamp(62px,7.4vw,108px);
line-height:.9;
letter-spacing:-.065em;
}
.tools-hub-hero-copy h1 span{
color:var(--mint);
}
.tools-hub-hero-copy p{
max-width:720px;
margin:0;
color:var(--muted);
font-size:17px;
line-height:1.68;
}
.tools-hub-hero-panel{
position:relative;
padding:24px;
border:1px solid rgba(99,230,173,.18);
border-radius:24px;
background:rgba(7,18,13,.36);
box-shadow:0 30px 70px rgba(0,0,0,.12);
backdrop-filter:blur(12px);
}
.tools-hub-panel-label{
margin-bottom:14px;
color:var(--muted);
font-size:10px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
}
.tools-hub-panel-row{
display:grid;
grid-template-columns:34px 1fr auto;
gap:12px;
align-items:center;
min-height:62px;
padding:0 4px;
border-top:1px solid var(--line);
}
.tools-hub-panel-row span{
color:var(--muted);
font-size:10px;
font-weight:800;
letter-spacing:.08em;
}
.tools-hub-panel-row strong{
font-size:13px;
}
.tools-hub-panel-row i{
color:var(--muted);
font-size:9px;
font-style:normal;
}
.tools-hub-panel-row--active strong,
.tools-hub-panel-row--active i{
color:var(--mint);
}
.tools-hub-cards-section{
padding:78px 0 88px;
}
.tools-hub-section-head{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:60px;
margin-bottom:30px;
}
.tools-hub-section-head h2{
margin:10px 0 0;
font-size:clamp(40px,4.7vw,64px);
line-height:.98;
letter-spacing:-.05em;
}
.tools-hub-section-head>p{
max-width:440px;
margin:0 0 6px;
color:var(--muted);
font-size:14px;
line-height:1.65;
}
.tools-hub-cards{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.tools-hub-feature-card{
position:relative;
min-height:430px;
display:flex;
flex-direction:column;
padding:26px;
overflow:hidden;
border:1px solid var(--line);
border-radius:22px;
background:linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.012));
color:var(--text)!important;
text-decoration:none!important;
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.tools-hub-feature-card::after{
content:"";
position:absolute;
width:220px;
height:220px;
right:-110px;
bottom:-110px;
border-radius:50%;
background:radial-gradient(circle, rgba(99,230,173,.08), transparent 68%);
transition:transform .3s ease,opacity .3s ease;
pointer-events:none;
}
.tools-hub-feature-card:hover{
transform:translateY(-6px);
border-color:rgba(99,230,173,.38);
box-shadow:0 24px 55px rgba(0,0,0,.11);
}
.tools-hub-feature-card:hover::after{
transform:scale(1.18);
}
.tools-hub-feature-card--live{
border-color:rgba(99,230,173,.34);
background:
radial-gradient(circle at 85% 15%, rgba(99,230,173,.08), transparent 28%),
linear-gradient(180deg, rgba(99,230,173,.04), rgba(255,255,255,.012));
}
.tools-hub-feature-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
}
.tools-hub-feature-number{
color:var(--muted);
font-size:10px;
font-weight:800;
letter-spacing:.14em;
}
.tools-hub-feature-status{
display:inline-flex;
align-items:center;
min-height:27px;
padding:0 10px;
border:1px solid var(--line);
border-radius:999px;
color:var(--muted);
font-size:9px;
font-weight:800;
}
.tools-hub-feature-status--live{
border-color:var(--mint);
background:var(--mint);
color:#07130e;
}
.tools-hub-feature-icon{
margin:34px 0 30px;
height:72px;
}
.tools-hub-feature-icon--audit{
position:relative;
width:78px;
border:1px solid rgba(99,230,173,.26);
border-radius:16px;
background:rgba(99,230,173,.04);
}
.audit-line{
position:absolute;
left:14px;
height:5px;
border-radius:99px;
background:rgba(99,230,173,.35);
}
.audit-line-1{top:17px;width:31px}
.audit-line-2{top:31px;width:42px}
.audit-line-3{top:45px;width:25px}
.audit-check{
position:absolute;
right:10px;
bottom:10px;
width:24px;height:24px;
display:grid;
place-items:center;
border-radius:50%;
background:var(--mint);
color:#07130e;
font-size:12px;
font-weight:900;
}
.tools-hub-feature-icon--compare{
display:flex;
align-items:center;
gap:8px;
}
.compare-box{
width:54px;height:54px;
border:1px solid rgba(99,230,173,.25);
border-radius:14px;
background:rgba(99,230,173,.04);
position:relative;
}
.compare-box::after{
content:"";
position:absolute;
left:10px;
right:10px;
bottom:12px;
height:3px;
border-radius:99px;
background:var(--mint);
box-shadow:0 -9px 0 rgba(99,230,173,.48),0 -18px 0 rgba(99,230,173,.2);
}
.compare-center{
color:var(--muted);
font-size:9px;
font-weight:900;
}
.tools-hub-feature-icon--calc{
display:flex;
align-items:center;
gap:8px;
}
.tools-hub-feature-icon--calc span{
width:46px;height:46px;
display:grid;
place-items:center;
border:1px solid rgba(99,230,173,.26);
border-radius:13px;
background:rgba(99,230,173,.04);
color:var(--mint);
font-size:15px;
font-weight:900;
}
.tools-hub-feature-card h3{
margin:0 0 12px;
font-size:26px;
line-height:1.08;
letter-spacing:-.035em;
}
.tools-hub-feature-card p{
margin:0;
color:var(--muted);
font-size:13px;
line-height:1.65;
}
.tools-hub-feature-meta{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:auto;
padding-top:28px;
}
.tools-hub-feature-meta span{
padding:6px 9px;
border:1px solid var(--line);
border-radius:999px;
color:var(--muted);
font-size:9px;
font-weight:700;
}
.tools-hub-feature-link{
display:flex;
justify-content:space-between;
align-items:center;
min-height:48px;
margin-top:16px;
padding:0 14px;
border-top:1px solid var(--line);
color:var(--text);
font-size:11px;
font-weight:800;
}
.tools-hub-feature-link span{
color:var(--mint);
font-size:17px;
transition:transform .2s ease;
}
.tools-hub-feature-card:hover .tools-hub-feature-link span{
transform:translateX(4px);
}
.tools-hub-feature-link--live{
border:0;
border-radius:11px;
background:var(--mint);
color:#07130e;
}
.tools-hub-feature-link--live span{
color:#07130e;
}
.tools-hub-trust{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:13px;
margin-top:28px;
color:var(--muted);
font-size:10px;
}
.tools-hub-trust i{
width:4px;height:4px;
border-radius:50%;
background:var(--mint);
opacity:.7;
}
/* Light theme */
body.light-theme .tools-hub-hero--polished{
background:
radial-gradient(circle at 78% 34%, rgba(99,230,173,.14), transparent 28%),
linear-gradient(180deg, #f7faf8, #fff 78%);
}
body.light-theme .tools-hub-hero-panel{
background:rgba(255,255,255,.84);
box-shadow:0 20px 60px rgba(25,63,45,.07);
}
body.light-theme .tools-hub-feature-card{
background:#fff;
box-shadow:0 12px 34px rgba(25,63,45,.035);
}
body.light-theme .tools-hub-feature-card--live{
background:
radial-gradient(circle at 85% 15%, rgba(99,230,173,.12), transparent 28%),
#fff;
}
body.light-theme .tools-hub-feature-meta span,
body.light-theme .tools-hub-feature-link,
body.light-theme .tools-hub-feature-status{
border-color:#dbe2de;
}
@media(max-width:1080px){
.tools-hub-hero-grid{
grid-template-columns:1fr;
gap:42px;
}
.tools-hub-hero-panel{
max-width:700px;
}
.tools-hub-cards{
grid-template-columns:1fr 1fr;
}
.tools-hub-feature-card--live{
grid-column:1/-1;
min-height:360px;
}
}
@media(max-width:760px){
.tools-hub-hero--polished{padding:72px 0 58px}
.tools-hub-section-head{
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.tools-hub-cards{
grid-template-columns:1fr;
}
.tools-hub-feature-card--live{
grid-column:auto;
}
}
@media(max-width:520px){
.tools-hub-feature-card{
min-height:auto;
}
.tools-hub-hero-copy h1{
font-size:clamp(54px,17vw,72px);
}
.tools-hub-hero-panel{
padding:18px;
}
.tools-hub-panel-row{
grid-template-columns:26px 1fr;
}
.tools-hub-panel-row i{
grid-column:2;
margin-top:-8px;
}
}
/* =========================================================
V60 — Light theme: full Toolbox panel stays dark
========================================================= */
body.light-theme .tools-hub-hero-panel{
background:
radial-gradient(circle at 92% 8%, rgba(99,230,173,.11), transparent 34%),
linear-gradient(145deg, #06110d 0%, #071710 100%) !important;
border-color:rgba(99,230,173,.22) !important;
box-shadow:0 24px 64px rgba(14,42,30,.16) !important;
color:#f7fbf9 !important;
}
body.light-theme .tools-hub-hero-panel .tools-hub-panel-label{
color:#b9c8c1 !important;
}
body.light-theme .tools-hub-hero-panel .tools-hub-panel-row{
border-color:rgba(213,239,227,.13) !important;
}
body.light-theme .tools-hub-hero-panel .tools-hub-panel-row span,
body.light-theme .tools-hub-hero-panel .tools-hub-panel-row i{
color:#aebdb6 !important;
}
body.light-theme .tools-hub-hero-panel .tools-hub-panel-row strong{
color:#f7fbf9 !important;
}
body.light-theme .tools-hub-hero-panel .tools-hub-panel-row--active strong,
body.light-theme .tools-hub-hero-panel .tools-hub-panel-row--active i{
color:var(--mint) !important;
}
/* =========================================================
V61 — Light mode Toolbox: mint glow like dark mode
========================================================= */
body.light-theme .tools-hub-hero-panel{
position:relative;
isolation:isolate;
border-color:rgba(99,230,173,.30) !important;
box-shadow:
0 26px 72px rgba(14,42,30,.16),
0 0 52px rgba(99,230,173,.10),
inset 0 0 42px rgba(99,230,173,.035) !important;
}
body.light-theme .tools-hub-hero-panel::before{
content:"";
position:absolute;
z-index:-1;
width:270px;
height:270px;
right:-58px;
top:-78px;
border-radius:50%;
background:radial-gradient(circle,
rgba(99,230,173,.24) 0%,
rgba(99,230,173,.10) 36%,
rgba(99,230,173,.025) 58%,
transparent 72%);
filter:blur(8px);
pointer-events:none;
}
body.light-theme .tools-hub-hero-panel::after{
content:"";
position:absolute;
z-index:-1;
width:230px;
height:230px;
left:-72px;
bottom:-92px;
border-radius:50%;
background:radial-gradient(circle,
rgba(99,230,173,.12) 0%,
rgba(99,230,173,.045) 44%,
transparent 70%);
filter:blur(12px);
pointer-events:none;
}
/* =========================================================
V62 — softer Toolbox ambience + mint hover on tool cards
========================================================= */
/* Softer background glow around the dark Toolbox in light mode */
body.light-theme .tools-hub-hero-panel{
box-shadow:
0 24px 58px rgba(14,42,30,.13),
0 0 34px rgba(99,230,173,.055),
inset 0 0 30px rgba(99,230,173,.022) !important;
}
body.light-theme .tools-hub-hero-panel::before{
width:240px !important;
height:180px !important;
right:-35px !important;
top:-48px !important;
background:radial-gradient(
ellipse,
rgba(99,230,173,.12) 0%,
rgba(99,230,173,.055) 38%,
rgba(99,230,173,.014) 62%,
transparent 76%
) !important;
filter:blur(15px) !important;
opacity:.85;
}
body.light-theme .tools-hub-hero-panel::after{
width:260px !important;
height:145px !important;
left:34px !important;
bottom:-64px !important;
background:radial-gradient(
ellipse,
rgba(99,230,173,.085) 0%,
rgba(99,230,173,.032) 48%,
transparent 74%
) !important;
filter:blur(18px) !important;
opacity:.8;
}
/* Cards: mint outline + soft background tint on hover */
.tools-hub-feature-card{
--card-hover-x:50%;
--card-hover-y:50%;
}
.tools-hub-feature-card:hover{
border-color:rgba(99,230,173,.72) !important;
background:
radial-gradient(circle at 50% 28%, rgba(99,230,173,.085), transparent 44%),
linear-gradient(180deg, rgba(99,230,173,.035), rgba(255,255,255,.01)) !important;
box-shadow:
0 20px 48px rgba(0,0,0,.10),
0 0 0 1px rgba(99,230,173,.10),
0 0 30px rgba(99,230,173,.08) !important;
}
.tools-hub-feature-card:hover .tools-hub-feature-icon--audit,
.tools-hub-feature-card:hover .compare-box,
.tools-hub-feature-card:hover .tools-hub-feature-icon--calc span{
border-color:rgba(99,230,173,.52);
background:rgba(99,230,173,.085);
}
.tools-hub-feature-card:hover .tools-hub-feature-meta span{
border-color:rgba(99,230,173,.30);
color:var(--text);
}
/* Light theme: stronger visibility without becoming neon */
body.light-theme .tools-hub-feature-card:hover{
background:
radial-gradient(circle at 50% 22%, rgba(99,230,173,.12), transparent 46%),
linear-gradient(180deg, #ffffff, #f8fffb) !important;
border-color:rgba(74,213,151,.78) !important;
box-shadow:
0 18px 42px rgba(26,74,51,.08),
0 0 0 1px rgba(99,230,173,.10),
0 0 26px rgba(99,230,173,.10) !important;
}
body.light-theme .tools-hub-feature-card:hover .tools-hub-feature-link{
border-color:rgba(99,230,173,.26);
}
@media (prefers-reduced-motion: reduce){
.tools-hub-feature-card{
transition:none !important;
}
}
/* V63 — footer logo dot matches the mint logo accent */
.footer-logo-dot{
color:#63e6ad !important;
}
/* V64 — FIX: actual visible dot in the footer logo */
.site-footer .footer-logo .footer-brand-dot,
.footer-logo .footer-brand-dot{
color:#63e6ad !important;
-webkit-text-fill-color:#63e6ad !important;
opacity:1 !important;
font-style:normal !important;
}
/* =========================================================
V65 — SOFT LIGHT
Exact light palette transferred from 60sec v10.6.1
Core palette:
page #f4f4f1
surface #fbfbf8
surface-2 #f3f3ef
line #d8d8d2
line-2 #c8c8c1
text #292a2d
muted #707177
========================================================= */
body.light-theme{
--page-bg:#f4f4f1 !important;
--page-bg-2:#ececea !important;
--text:#292a2d !important;
--muted:#707177 !important;
--line:#d8d8d2 !important;
--header-bg:#fbfbf8 !important;
--card-dark:#fbfbf8 !important;
/* aliases used by newer pages/components */
--bg:#f4f4f1;
--panel:#fbfbf8;
--panel2:#f3f3ef;
}
/* Main page atmosphere */
body.light-theme{
background:#f4f4f1 !important;
color:#292a2d !important;
}
body.light-theme .site-header{
background:rgba(251,251,248,.96) !important;
border-bottom-color:#d8d8d2 !important;
}
body.light-theme .top-screen{
background:
radial-gradient(circle at 17% 28%, rgba(126,231,173,.07), transparent 30%),
linear-gradient(90deg,#f4f4f1 0%,#f4f4f1 58%,#f3f3ef 100%) !important;
}
body.light-theme .services-band{
background:#fbfbf8 !important;
border-top-color:#d8d8d2 !important;
}
body.light-theme .about-section,
body.light-theme .process-section,
body.light-theme .faq-section,
body.light-theme .contact-section{
background:#f4f4f1 !important;
border-color:#d8d8d2 !important;
}
body.light-theme .process-card,
body.light-theme .contact-card,
body.light-theme .quote-shell{
background:#fbfbf8 !important;
border-color:#d8d8d2 !important;
color:#292a2d !important;
box-shadow:none !important;
}
body.light-theme .quote-form{
background:#f3f3ef !important;
}
body.light-theme .quote-form input,
body.light-theme .quote-form select,
body.light-theme .quote-form textarea{
background:#fdfdfb !important;
color:#292a2d !important;
border-color:#cdcdc7 !important;
}
body.light-theme .hero-copy h1,
body.light-theme .services-heading h2,
body.light-theme .about-grid h2,
body.light-theme .process-card h3,
body.light-theme .contact-card h2{
color:#292a2d !important;
}
body.light-theme .hero-copy>p,
body.light-theme .service-copy p,
body.light-theme .about-points p,
body.light-theme .process-card p,
body.light-theme .contact-card p,
body.light-theme .proof-row{
color:#707177 !important;
}
body.light-theme .hero-copy .eyebrow,
body.light-theme .services-heading .eyebrow,
body.light-theme .brand-sub{
color:#707177 !important;
}
body.light-theme .service{
border-color:#d8d8d2 !important;
}
body.light-theme .service:hover{
background:#f3f3ef !important;
}
body.light-theme .icon{
background:#f3f3ef !important;
border-color:#d8d8d2 !important;
}
/* Service detail pages */
body.light-theme.service-page,
body.light-theme .service-page{
background:#f4f4f1 !important;
}
body.light-theme.service-page .service-hero-main,
body.light-theme.service-page .service-hero-card,
body.light-theme.service-page .service-detail-card,
body.light-theme.service-page .service-page-cta{
background:#fbfbf8 !important;
border-color:#d8d8d2 !important;
color:#292a2d !important;
box-shadow:none !important;
}
body.light-theme.service-page .service-detail-card p,
body.light-theme.service-page .service-hero-card ul{
color:#707177 !important;
}
/* Free Tools hub: soft-light page surfaces.
Toolbox intentionally stays dark, as previously approved. */
body.light-theme .tools-hub-hero--polished,
body.light-theme .tools-hub-section,
body.light-theme .tool-hero,
body.light-theme .calculator-section,
body.light-theme .tool-explainer,
body.light-theme .tool-cta-section{
background-color:#f4f4f1 !important;
}
body.light-theme .tools-hub-feature-card{
background:#fbfbf8 !important;
border-color:#d8d8d2 !important;
color:#292a2d !important;
box-shadow:none !important;
}
body.light-theme .tools-hub-feature-card p,
body.light-theme .tools-hub-section-head p,
body.light-theme .tools-hub-hero-copy p{
color:#707177 !important;
}
body.light-theme .tools-hub-feature-card:hover{
background:
radial-gradient(circle at 50% 22%, rgba(99,230,173,.09), transparent 46%),
linear-gradient(180deg,#fbfbf8,#f3f3ef) !important;
}
/* Unified footer now follows the same Soft Light palette */
body.light-theme .unified-footer{
background:#fbfbf8 !important;
border-top-color:#d8d8d2 !important;
color:#292a2d !important;
}
body.light-theme .footer-bottom{
border-top-color:#d8d8d2 !important;
}
body.light-theme .footer-logo,
body.light-theme .footer-heading{
color:#292a2d !important;
}
body.light-theme .footer-subtitle,
body.light-theme .footer-brand>p,
body.light-theme .footer-column>a:not(.footer-cta),
body.light-theme .footer-contact>p,
body.light-theme .footer-bottom{
color:#707177 !important;
}
/* Keep the intentionally dark contrast components from the current design:
booking card, calculators and Toolbox remain dark in light mode. */
body.light-theme .booking-card,
body.light-theme .calculator-shell,
body.light-theme .tools-hub-hero-panel{
color-scheme:dark;
}
/* =========================================================
V67 — REFINED LIGHT HERO
Based on v65. Keep transparent portrait, add breathing room,
soften light-theme green and preserve the original composition.
Dark theme unchanged.
========================================================= */
body.light-theme{
--light-accent:#36b875;
--light-accent-hover:#299a60;
}
/* Calm Soft Light hero — no dark photo rectangle */
body.light-theme .top-screen{
background:
radial-gradient(circle at 72% 34%, rgba(54,184,117,.075), transparent 27%),
radial-gradient(circle at 16% 30%, rgba(54,184,117,.035), transparent 29%),
#f4f4f1 !important;
}
/* More restrained green specifically for light mode */
body.light-theme .hero-copy h1 .accent,
body.light-theme .services-heading h2 span,
body.light-theme .service-link{
color:var(--light-accent) !important;
-webkit-text-fill-color:var(--light-accent) !important;
}
body.light-theme .button.primary,
body.light-theme .header-cta{
background:var(--light-accent) !important;
border-color:var(--light-accent) !important;
color:#102018 !important;
box-shadow:0 10px 26px rgba(41,154,96,.09) !important;
}
body.light-theme .button.primary:hover,
body.light-theme .header-cta:hover{
background:var(--light-accent-hover) !important;
border-color:var(--light-accent-hover) !important;
color:#fff !important;
}
/* Transparent portrait only — no card/background/frame */
body.light-theme .portrait-zone,
body.light-theme .portrait-frame{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
border-radius:0 !important;
}
body.light-theme .portrait-frame{
overflow:visible !important;
}
body.light-theme .portrait-frame::before,
body.light-theme .portrait-frame::after{
content:none !important;
display:none !important;
}
/* Desktop portrait: smaller and calmer than v65 */
@media (min-width:1060px){
body.light-theme .portrait-frame{
width:53% !important;
height:82% !important;
margin-left:1.5% !important;
transform:translateX(-2%) !important;
align-self:end !important;
}
body.light-theme .portrait-light{
object-fit:contain !important;
object-position:center bottom !important;
filter:contrast(.92) brightness(1.055) !important;
}
/* Keep handwritten note completely off the face */
body.light-theme .intro-note{
right:1.2% !important;
top:22% !important;
width:190px !important;
z-index:6 !important;
color:#292a2d !important;
}
body.light-theme .intro-note p{
color:#64666a !important;
}
/* Arrow ends near shoulder/negative space */
body.light-theme .intro-arrow{
left:-108px !important;
top:112px !important;
width:102px !important;
height:72px !important;
transform:rotate(1deg) !important;
color:#292a2d !important;
opacity:.78 !important;
}
}
/* Keep services strip visually quiet beneath hero */
body.light-theme .services-band{
background:#fbfbf8 !important;
border-top:1px solid #d8d8d2 !important;
}
/* =========================================================
V68 — UNIFIED LIGHT THEME
One continuous Soft Light background across header, hero,
services and page sections. Dark theme unchanged.
Geometry is locked to stop text/layout jumping on toggle.
========================================================= */
body.light-theme{
--light-page:#f4f4f1;
--light-surface:#f4f4f1;
--light-text:#292a2d;
--light-muted:#707177;
--light-line:rgba(41,42,45,.10);
--light-accent:#48c987;
background:var(--light-page)!important;
color:var(--light-text)!important;
}
/* One visual plane: header + hero + service strip */
body.light-theme .site-header,
body.light-theme .top-screen,
body.light-theme .services-band{
background:var(--light-page)!important;
background-color:var(--light-page)!important;
box-shadow:none!important;
}
body.light-theme .site-header{
border-bottom:0!important;
}
body.light-theme .services-band{
border-top:0!important;
}
/* Remove previous light-theme decorative washes so sections visually merge */
body.light-theme .top-screen::before,
body.light-theme .top-screen::after{
opacity:0!important;
background:none!important;
}
/* A single very soft atmospheric glow behind the portrait only */
body.light-theme .portrait-zone{
background:
radial-gradient(circle at 48% 43%, rgba(72,201,135,.10), transparent 43%)!important;
}
/* Use the transparent cut-out with no card, frame or white rectangle */
body.light-theme .portrait-frame{
background:transparent!important;
border:0!important;
box-shadow:none!important;
border-radius:0!important;
overflow:visible!important;
}
body.light-theme .portrait-frame::before,
body.light-theme .portrait-frame::after{
content:none!important;
display:none!important;
}
body.light-theme .portrait-light{
object-fit:contain!important;
object-position:center bottom!important;
filter:none!important;
}
/* Same geometry in both themes = no text/layout jump when switching */
body.light-theme .site-header{height:98px!important}
body.light-theme .hero-grid{
height:572px!important;
min-height:572px!important;
grid-template-columns:1.05fr .95fr!important;
align-items:center!important;
}
body.light-theme .hero-copy{
align-self:center!important;
padding-top:0!important;
padding-bottom:0!important;
transform:none!important;
}
body.light-theme .hero-copy h1{
font-size:clamp(52px,4.7vw,76px)!important;
line-height:1.02!important;
letter-spacing:-3.2px!important;
margin:18px 0 24px!important;
max-width:800px!important;
}
body.light-theme .hero-copy>p{
margin:0 0 28px!important;
}
body.light-theme .services-band{
height:204px!important;
}
/* Portrait geometry mirrors the dark hero instead of changing composition */
@media (min-width:1060px){
body.light-theme .portrait-frame{
height:100%!important;
width:74%!important;
margin-left:0!important;
transform:none!important;
}
body.light-theme .intro-note{
right:2.2%!important;
top:27%!important;
}
body.light-theme .intro-arrow{
color:#292a2d!important;
}
}
/* Headings and text stay calm on the unified background */
body.light-theme .brand-name,
body.light-theme .main-nav a,
body.light-theme .hero-copy h1,
body.light-theme .service-copy h3,
body.light-theme .service-copy h3 a{
color:var(--light-text)!important;
}
body.light-theme .brand-sub,
body.light-theme .eyebrow,
body.light-theme .hero-copy>p,
body.light-theme .service-copy p{
color:var(--light-muted)!important;
}
/* Keep the original mint identity, slightly restrained in light mode */
body.light-theme .hero-copy h1 .accent,
body.light-theme .service-more,
body.light-theme .services-heading h2 span:last-child{
color:var(--light-accent)!important;
-webkit-text-fill-color:var(--light-accent)!important;
}
body.light-theme .button.primary,
body.light-theme .top-cta{
background:var(--light-accent)!important;
border-color:var(--light-accent)!important;
color:#102018!important;
}
/* Below the hero: keep page visually continuous too */
body.light-theme .process-section,
body.light-theme .booking-section,
body.light-theme .about-section,
body.light-theme .contact-section,
body.light-theme .quote-section,
body.light-theme .faq-section,
body.light-theme .service-page-main,
body.light-theme .tools-hub-section,
body.light-theme .tools-hub-hero--polished,
body.light-theme .tool-hero,
body.light-theme .calculator-section,
body.light-theme .tool-explainer,
body.light-theme .tool-cta-section{
background:var(--light-page)!important;
}
/* Cards can still separate through a subtle line, not a different page colour */
body.light-theme .process-card,
body.light-theme .service-detail-card,
body.light-theme .service-hero-main,
body.light-theme .service-hero-card,
body.light-theme .service-page-cta,
body.light-theme .tools-hub-feature-card{
background:rgba(255,255,255,.28)!important;
border-color:var(--light-line)!important;
box-shadow:none!important;
}
/* Keep intentionally dark functional panels for contrast */
body.light-theme .booking-card,
body.light-theme .calculator-shell,
body.light-theme .tools-hub-hero-panel{
background:#09110e!important;
color:#f5f7f5!important;
}
/* Laptop geometry lock matching the dark theme */
@media (min-width:1060px) and (max-height:860px){
body.light-theme .site-header{height:74px!important}
body.light-theme .hero-grid{height:430px!important;min-height:430px!important}
body.light-theme .hero-copy h1{
font-size:clamp(44px,3.8vw,59px)!important;
margin:12px 0 16px!important;
}
}
/* =========================================================
V69 — LIGHT HERO PHOTO / COMPOSITION FIX
Uses the exact uploaded transparent portrait.
No image retouching or generative changes.
========================================================= */
@media (min-width:1060px){
/* Keep the unified light background from v68 */
body.light-theme .top-screen,
body.light-theme .site-header,
body.light-theme .services-band{
background:#f4f4f1 !important;
}
/* Give hero enough room so CTAs never get clipped */
body.light-theme .hero-grid{
height:560px !important;
min-height:560px !important;
align-items:center !important;
}
body.light-theme .hero-copy{
transform:translateY(-8px) !important;
}
body.light-theme .hero-copy h1{
margin-top:14px !important;
margin-bottom:22px !important;
}
body.light-theme .hero-copy > p{
margin-bottom:30px !important;
}
body.light-theme .cta-row{
position:relative !important;
z-index:8 !important;
margin-bottom:0 !important;
}
/* Portrait container: wider so shoulders remain visible */
body.light-theme .portrait-zone{
overflow:visible !important;
min-width:0 !important;
}
body.light-theme .portrait-frame{
width:72% !important;
height:92% !important;
margin-left:2% !important;
align-self:end !important;
transform:none !important;
overflow:visible !important;
background:transparent !important;
}
/* Exact uploaded portrait, only positioned/scaled with CSS */
body.light-theme .portrait-light{
width:100% !important;
height:100% !important;
max-width:none !important;
object-fit:contain !important;
object-position:center bottom !important;
transform:translateY(1%) scale(.93) !important;
transform-origin:center bottom !important;
filter:none !important;
}
/* Keep annotation in clear negative space */
body.light-theme .intro-note{
right:1.4% !important;
top:27% !important;
width:190px !important;
z-index:10 !important;
}
body.light-theme .intro-arrow{
left:-103px !important;
top:110px !important;
width:98px !important;
height:70px !important;
transform:rotate(1deg) !important;
}
/* Services begin after hero; do not overlap CTA/photo */
body.light-theme .services-band{
position:relative !important;
z-index:3 !important;
height:204px !important;
margin-top:0 !important;
}
}
/* Laptop-height lock: still preserve full buttons and shoulders */
@media (min-width:1060px) and (max-height:860px){
body.light-theme .hero-grid{
height:455px !important;
min-height:455px !important;
}
body.light-theme .hero-copy{
transform:translateY(-3px) !important;
}
body.light-theme .portrait-frame{
width:70% !important;
height:94% !important;
}
body.light-theme .portrait-light{
transform:translateY(1%) scale(.90) !important;
}
body.light-theme .hero-copy h1{
margin:12px 0 16px !important;
}
body.light-theme .hero-copy > p{
margin-bottom:22px !important;
}
}
/* Tablet/mobile uses the same source file, contained naturally */
@media (max-width:1059px){
body.light-theme .portrait-light{
content:url("assets/alex-hendler-light-final.png");
object-fit:contain !important;
object-position:center bottom !important;
filter:none !important;
transform:none !important;
}
}
/* =========================================================
V70 — THEME GEOMETRY LOCK
Dark theme is the geometry reference.
Light theme changes colours/assets only, never spacing,
dimensions or positions on desktop.
========================================================= */
/* Desktop geometry copied from the approved dark composition */
@media (min-width:1060px){
body.light-theme .site-header{
height:98px !important;
}
body.light-theme .hero-grid{
height:572px !important;
min-height:0 !important;
display:grid !important;
grid-template-columns:1.05fr .95fr !important;
align-items:center !important;
position:relative !important;
z-index:2 !important;
}
body.light-theme .hero-copy{
align-self:auto !important;
padding:0 !important;
margin:0 !important;
transform:none !important;
}
body.light-theme .hero-copy h1{
font-size:clamp(52px,4.7vw,76px) !important;
line-height:1.02 !important;
letter-spacing:-3.2px !important;
margin:18px 0 24px !important;
max-width:800px !important;
}
body.light-theme .hero-copy > p{
margin:0 0 28px !important;
}
body.light-theme .cta-row{
margin:0 !important;
transform:none !important;
}
body.light-theme .portrait-zone{
height:100% !important;
align-self:stretch !important;
position:relative !important;
overflow:hidden !important;
margin:0 !important;
padding:0 !important;
transform:none !important;
}
body.light-theme .portrait-frame{
height:100% !important;
width:74% !important;
margin-left:0 !important;
position:relative !important;
overflow:hidden !important;
border-radius:24px 24px 0 0 !important;
align-self:auto !important;
transform:none !important;
}
/* Different image, identical image box/anchor */
body.light-theme .portrait-light{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
max-width:none !important;
object-fit:contain !important;
object-position:center bottom !important;
margin:0 !important;
transform:none !important;
transform-origin:center bottom !important;
filter:none !important;
}
/* Annotation inherits the same coordinates used by dark mode */
body.light-theme .intro-note{
right:0 !important;
top:142px !important;
width:auto !important;
margin:0 !important;
transform:none !important;
}
body.light-theme .intro-arrow{
left:auto !important;
top:auto !important;
width:130px !important;
height:90px !important;
transform:none !important;
}
body.light-theme .services-band{
height:204px !important;
margin:0 !important;
position:relative !important;
z-index:2 !important;
}
}
/* Same compact desktop breakpoint as dark mode */
@media (min-width:1060px) and (max-height:860px){
body.light-theme .site-header{
height:74px !important;
}
body.light-theme .hero-grid{
height:430px !important;
min-height:0 !important;
}
body.light-theme .hero-copy{
transform:none !important;
}
body.light-theme .hero-copy h1{
font-size:clamp(44px,3.8vw,59px) !important;
margin:12px 0 16px !important;
}
body.light-theme .hero-copy > p{
margin-bottom:20px !important;
}
body.light-theme .portrait-frame{
height:100% !important;
width:74% !important;
margin-left:0 !important;
transform:none !important;
}
body.light-theme .portrait-light{
transform:none !important;
}
}
/* Theme switch must not animate layout-affecting properties */
.site-header,
.hero-grid,
.hero-copy,
.hero-copy h1,
.hero-copy > p,
.cta-row,
.portrait-zone,
.portrait-frame,
.portrait-dark,
.portrait-light,
.intro-note,
.intro-arrow,
.services-band,
.services-layout,
.service,
.services-heading{
transition-property:background-color,color,border-color,box-shadow,opacity,filter !important;
}
/* =========================================================
V72 FIX — LIGHT THEME ONLY
Dark theme from v70 remains untouched.
========================================================= */
.light-product-ui{display:none}
body.light-theme .portrait-frame,
body.light-theme .intro-note,
body.light-theme .intro-arrow{
display:none!important;
}
body.light-theme .light-product-ui{
display:block;
position:absolute;
inset:6% 0 6% 1%;
pointer-events:none;
isolation:isolate;
}
body.light-theme .light-product-ui::before{
content:"";
position:absolute;
inset:-18%;
z-index:-2;
background:
radial-gradient(circle at 58% 45%,rgba(83,216,147,.18),transparent 34%),
radial-gradient(circle at 78% 25%,rgba(83,216,147,.08),transparent 25%);
filter:blur(9px);
}
body.light-theme .lp-card{
position:absolute;
background:rgba(255,255,253,.93);
border:1px solid rgba(20,31,25,.10);
box-shadow:0 24px 70px rgba(20,38,29,.08);
color:#171b19;
}
body.light-theme .lp-main{
width:68%;
height:320px;
right:5%;
top:15%;
border-radius:24px;
padding:24px 26px;
}
body.light-theme .lp-head{
display:flex;
justify-content:space-between;
font:700 9px Inter,sans-serif;
letter-spacing:.13em;
color:#7c8580;
}
body.light-theme .lp-head span{color:#57c98c}
body.light-theme .lp-head b{font-weight:600;color:#89918d}
body.light-theme .lp-main h3{
font:700 24px Manrope,Inter,sans-serif;
margin:18px 0 8px;
letter-spacing:-.04em;
}
body.light-theme .lp-main svg{width:100%;height:140px}
body.light-theme .lp-main .grid{fill:none;stroke:rgba(20,31,25,.07)}
body.light-theme .lp-main .area{fill:rgba(86,218,149,.09)}
body.light-theme .lp-main .line{fill:none;stroke:#38b978;stroke-width:3;stroke-linecap:round}
body.light-theme .lp-stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
border-top:1px solid rgba(20,31,25,.08);
padding-top:13px;
}
body.light-theme .lp-stats span{
font:600 8px Inter,sans-serif;
color:#919894;
letter-spacing:.08em;
}
body.light-theme .lp-stats strong{
display:block;
font:650 11px Inter,sans-serif;
color:#45504a;
margin-top:5px;
letter-spacing:0;
}
body.light-theme .lp-ads{
left:0;
top:5%;
width:235px;
min-height:86px;
border-radius:18px;
padding:14px;
display:grid;
grid-template-columns:42px 1fr 18px;
align-items:center;
gap:10px;
}
body.light-theme .lp-ads>i{
width:40px;
height:40px;
border-radius:11px;
background:#f3f5f2;
display:grid;
place-items:center;
color:#4285f4;
font-style:normal;
font-size:25px;
}
body.light-theme .lp-ads>span{
display:flex;
flex-direction:column;
gap:3px;
}
body.light-theme .lp-ads small{
font:700 8px Inter,sans-serif;
color:#8b928e;
letter-spacing:.12em;
}
body.light-theme .lp-ads strong{font:700 12px Inter,sans-serif}
body.light-theme .lp-ads em{font:500 10px Inter,sans-serif;color:#7e8782;font-style:normal}
body.light-theme .lp-ads>b{color:#36b877;font-size:18px}
body.light-theme .lp-seo{
width:245px;
height:165px;
left:3%;
bottom:3%;
border-radius:20px;
padding:18px;
}
body.light-theme .lp-seo>div{
display:flex;
justify-content:space-between;
align-items:center;
}
body.light-theme .lp-seo small{
font:700 8px Inter,sans-serif;
color:#858d89;
letter-spacing:.12em;
}
body.light-theme .lp-seo>div b{
font:600 8px Inter,sans-serif;
color:#2fad6e;
background:#e9f8f0;
padding:6px 8px;
border-radius:99px;
}
body.light-theme .lp-seo section{
height:65px;
display:flex;
align-items:flex-end;
gap:7px;
margin:13px 0 10px;
}
body.light-theme .lp-seo section i{
flex:1;
background:#dfe6e1;
border-radius:4px 4px 2px 2px;
}
body.light-theme .lp-seo section i:nth-child(1){height:25%}
body.light-theme .lp-seo section i:nth-child(2){height:38%}
body.light-theme .lp-seo section i:nth-child(3){height:33%}
body.light-theme .lp-seo section i:nth-child(4){height:56%;background:#bcebd2}
body.light-theme .lp-seo section i:nth-child(5){height:72%;background:#8de1b4}
body.light-theme .lp-seo section i:nth-child(6){height:91%;background:#55cf8e}
body.light-theme .lp-seo footer{
display:flex;
justify-content:space-between;
align-items:end;
}
body.light-theme .lp-seo footer strong{font:700 11px Inter,sans-serif}
body.light-theme .lp-seo footer span{font:500 8px Inter,sans-serif;color:#89908c}
body.light-theme .lp-pill{
position:absolute;
background:#fff;
border:1px solid rgba(20,31,25,.09);
border-radius:99px;
box-shadow:0 14px 35px rgba(20,38,29,.07);
padding:9px 13px;
font:650 9px Inter,sans-serif;
color:#59625d;
}
body.light-theme .lp-pill.p1{right:0;bottom:20%}
body.light-theme .lp-pill.p2{right:14%;bottom:4%}
@media(max-width:1059px){
body.light-theme .light-product-ui{
position:relative;
inset:auto;
width:100%;
height:420px;
margin-top:20px;
}
body.light-theme .lp-main{
width:76%;
right:3%;
}
}
/* =========================================================
V73 — service icon cleanup + light SEO card repair
Dark theme: icons only. No dark layout/hero changes.
========================================================= */
.service-icon{
display:flex;
align-items:center;
justify-content:center;
overflow:visible;
}
.service-icon .service-svg{
display:block;
width:48px;
height:48px;
flex:0 0 48px;
}
/* Keep GBP pin centre readable in light mode. */
body.light-theme .service-svg-gbp circle{fill:#16231d}
/* LIGHT ONLY: SEO Visibility is one self-contained card. */
body.light-theme .lp-seo{
box-sizing:border-box!important;
width:245px!important;
height:178px!important;
left:3%!important;
bottom:3%!important;
padding:18px 18px 16px!important;
overflow:hidden!important;
display:flex!important;
flex-direction:column!important;
background:rgba(255,255,253,.96)!important;
}
body.light-theme .lp-seo > div{
flex:0 0 auto!important;
}
body.light-theme .lp-seo section{
flex:1 1 auto!important;
min-height:64px!important;
height:auto!important;
margin:12px 0 9px!important;
padding:0!important;
display:flex!important;
align-items:flex-end!important;
}
body.light-theme .lp-seo footer{
position:static!important;
flex:0 0 auto!important;
width:100%!important;
min-height:24px!important;
margin:0!important;
padding:9px 0 0!important;
border-top:1px solid rgba(20,31,25,.08)!important;
background:transparent!important;
box-shadow:none!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:12px!important;
}
body.light-theme .lp-seo footer strong{
margin:0!important;
white-space:nowrap!important;
font:700 11px/1.15 Inter,sans-serif!important;
color:#171b19!important;
}
body.light-theme .lp-seo footer span{
margin:0!important;
white-space:nowrap!important;
font:500 8px/1.15 Inter,sans-serif!important;
color:#89908c!important;
}
/* =========================================================
V74 — LIGHT HERO MESSAGE REWORK
Dark theme remains unchanged.
========================================================= */
.light-hero-message{display:none}
body.light-theme .hero-copy > .eyebrow,
body.light-theme .hero-copy > h1,
body.light-theme .hero-copy > p:not(.light-hero-tools){
display:none!important;
}
body.light-theme .light-hero-message{
display:block;
max-width:760px;
margin:0 0 28px;
}
body.light-theme .light-hero-message h1{
display:block!important;
margin:0!important;
max-width:760px;
font-family:Manrope,Inter,sans-serif!important;
font-size:clamp(48px,4.2vw,68px)!important;
line-height:1.02!important;
letter-spacing:-.052em!important;
font-weight:700!important;
color:#222625!important;
}
body.light-theme .light-hero-message h1 span{
color:#43c987!important;
}
body.light-theme .light-hero-tools{
display:flex!important;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin:22px 0 0!important;
font:600 15px/1.4 Inter,sans-serif!important;
letter-spacing:-.01em;
color:#69716d!important;
}
body.light-theme .light-hero-tools i{
font-style:normal;
color:#43c987;
font-weight:700;
}
body.light-theme .hero-copy .cta-row{
margin-top:0!important;
}
@media (max-width:1059px){
body.light-theme .light-hero-message{
max-width:680px;
margin-bottom:24px;
}
body.light-theme .light-hero-message h1{
font-size:clamp(42px,7vw,60px)!important;
}
}
@media (max-width:640px){
body.light-theme .light-hero-message h1{
font-size:clamp(36px,10vw,48px)!important;
line-height:1.04!important;
}
body.light-theme .light-hero-tools{
font-size:14px!important;
gap:8px;
}
}
/* =========================================================
V75 — approved centered LIGHT hero
Dark theme is intentionally untouched.
========================================================= */
body.light-theme .hero-grid{
grid-template-columns:1fr!important;
align-items:center!important;
justify-items:center!important;
}
body.light-theme .hero-copy{
width:100%!important;
max-width:none!important;
text-align:center!important;
align-items:center!important;
justify-self:stretch!important;
}
body.light-theme .portrait-zone{
display:none!important;
}
body.light-theme .hero-copy > .eyebrow,
body.light-theme .hero-copy > h1:not(.light-hero-message h1),
body.light-theme .hero-copy > p:not(.light-hero-tools),
body.light-theme .hero-copy > .cta-row,
body.light-theme .hero-copy > .proof-row{
display:none!important;
}
body.light-theme .light-hero-message{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
max-width:1320px!important;
margin:0 auto!important;
text-align:center!important;
}
body.light-theme .light-eyebrow{
margin:0 0 28px!important;
font:600 13px/1.2 Inter,sans-serif!important;
letter-spacing:.24em!important;
color:#7d858a!important;
}
body.light-theme .light-hero-message h1{
display:block!important;
width:100%!important;
max-width:1320px!important;
margin:0!important;
color:#151a1d!important;
font-family:Manrope,Inter,sans-serif!important;
font-weight:700!important;
font-size:clamp(52px,5vw,82px)!important;
line-height:1.05!important;
letter-spacing:-.055em!important;
text-align:center!important;
}
body.light-theme .light-hero-message h1 span{
color:inherit!important;
}
body.light-theme .light-tools{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:28px!important;
margin:42px 0 0!important;
flex-wrap:nowrap!important;
}
body.light-theme .light-tool{
display:flex!important;
align-items:center!important;
gap:14px!important;
color:#171b1d!important;
font:600 22px/1.2 Inter,sans-serif!important;
white-space:nowrap!important;
}
body.light-theme .light-tool svg{
width:48px!important;
height:48px!important;
flex:0 0 48px!important;
}
body.light-theme .light-tool-divider{
width:1px!important;
height:54px!important;
background:rgba(25,36,31,.18)!important;
display:block!important;
}
body.light-theme .light-hero-actions{
display:flex!important;
justify-content:center!important;
align-items:center!important;
gap:12px!important;
margin-top:42px!important;
}
body.light-theme .light-hero-actions .button{
min-height:62px!important;
padding:0 28px!important;
font-size:17px!important;
border-radius:14px!important;
}
body.light-theme .light-trust-line{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:24px!important;
margin-top:34px!important;
color:#838b90!important;
font:600 11px/1.2 Inter,sans-serif!important;
letter-spacing:.17em!important;
}
body.light-theme .light-trust-line i{
display:block!important;
width:1px!important;
height:15px!important;
background:#aeb5b1!important;
}
body.light-theme .top-screen{
background:
radial-gradient(circle at 0% 52%, rgba(100,225,164,.08), transparent 23%),
radial-gradient(circle at 100% 50%, rgba(100,225,164,.09), transparent 24%),
#f5f5f1!important;
}
@media (min-width:1060px){
body.light-theme .hero-grid{
height:610px!important;
min-height:610px!important;
}
}
@media (min-width:1060px) and (max-height:860px){
body.light-theme .hero-grid{
height:560px!important;
min-height:560px!important;
}
body.light-theme .light-hero-message h1{
font-size:clamp(48px,4.6vw,72px)!important;
}
body.light-theme .light-tools{
margin-top:32px!important;
}
body.light-theme .light-hero-actions{
margin-top:30px!important;
}
body.light-theme .light-trust-line{
margin-top:24px!important;
}
}
@media (max-width:900px){
body.light-theme .light-hero-message h1{
font-size:clamp(42px,8vw,62px)!important;
}
body.light-theme .light-tools{
gap:18px!important;
flex-wrap:wrap!important;
}
body.light-theme .light-tool-divider{
display:none!important;
}
body.light-theme .light-tool{
font-size:18px!important;
}
}
@media (max-width:640px){
body.light-theme .light-eyebrow{
font-size:10px!important;
margin-bottom:20px!important;
}
body.light-theme .light-hero-message h1{
font-size:clamp(36px,11vw,48px)!important;
}
body.light-theme .light-tools{
flex-direction:column!important;
gap:14px!important;
margin-top:28px!important;
}
body.light-theme .light-tool{
width:100%!important;
justify-content:center!important;
font-size:16px!important;
}
body.light-theme .light-tool svg{
width:36px!important;
height:36px!important;
flex-basis:36px!important;
}
body.light-theme .light-hero-actions{
flex-direction:column!important;
width:100%!important;
margin-top:28px!important;
}
body.light-theme .light-hero-actions .button{
width:min(100%,360px)!important;
}
body.light-theme .light-trust-line{
flex-wrap:wrap!important;
gap:10px 14px!important;
margin-top:24px!important;
font-size:9px!important;
}
}
/* =========================================================
V76 — cleaner service icons + clickable service links
Light hero only. Dark theme unchanged.
========================================================= */
body.light-theme .light-tool{
text-decoration:none!important;
color:#171b1d!important;
cursor:pointer!important;
border-radius:14px!important;
padding:10px 14px!important;
transition:background-color .18s ease, transform .18s ease, color .18s ease!important;
}
body.light-theme .light-tool .tool-icon{
width:52px!important;
height:52px!important;
display:grid!important;
place-items:center!important;
flex:0 0 52px!important;
}
body.light-theme .light-tool .tool-icon svg{
width:48px!important;
height:48px!important;
display:block!important;
}
body.light-theme .light-tool:hover{
background:rgba(69,204,139,.08)!important;
transform:translateY(-2px)!important;
color:#15945a!important;
}
body.light-theme .light-tool:focus-visible{
outline:2px solid #43c987!important;
outline-offset:4px!important;
}
body.light-theme .light-tool:hover .tool-icon svg{
transform:scale(1.035);
}
body.light-theme .light-tool .tool-icon svg{
transition:transform .18s ease!important;
}
@media(max-width:640px){
body.light-theme .light-tool{
width:auto!important;
min-width:250px!important;
}
body.light-theme .light-tool .tool-icon{
width:42px!important;
height:42px!important;
flex-basis:42px!important;
}
body.light-theme .light-tool .tool-icon svg{
width:38px!important;
height:38px!important;
}
}
/* =========================================================
V77 — LIGHT THEME ONLY
Remove duplicated services strip below the hero.
Dark theme remains unchanged.
========================================================= */
body.light-theme .services-band{
display:none!important;
}
/* =========================================================
V78 — Tool names + full-width tool-page titles
Applies to BOTH light and dark themes.
========================================================= */
/* Free Tools hub: make the actual tool name easier to scan. */
.tools-hub-feature-card h3 .tool-name-accent{
color:var(--mint);
}
/* Individual tool pages: use the available width instead of
forcing the title into a narrow left column. */
.future-tool-hero.tool-title-wide .future-tool-page-container{
width:min(1540px, calc(100% - 72px))!important;
max-width:1540px!important;
}
.future-tool-hero.tool-title-wide h1{
width:100%!important;
max-width:none!important;
font-size:clamp(54px,5.15vw,92px)!important;
line-height:.96!important;
letter-spacing:-.058em!important;
white-space:nowrap!important;
}
/* Calculator page: title gets the full row; supporting content
stays beneath it instead of squeezing the headline. */
.exact-tools-hero.tool-title-wide .tool-hero-inner{
width:min(1540px, calc(100% - 72px))!important;
max-width:1540px!important;
margin:0 auto!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) 360px!important;
gap:26px 56px!important;
align-items:start!important;
}
.exact-tools-hero.tool-title-wide .tool-hero-copy{
display:contents!important;
}
.exact-tools-hero.tool-title-wide .tool-hero-copy .eyebrow{
grid-column:1 / -1!important;
margin-bottom:-6px!important;
}
.exact-tools-hero.tool-title-wide .tool-hero-copy h1{
grid-column:1 / -1!important;
width:100%!important;
max-width:none!important;
margin:0 0 6px!important;
font-size:clamp(54px,5.15vw,92px)!important;
line-height:.96!important;
letter-spacing:-.058em!important;
white-space:nowrap!important;
}
.exact-tools-hero.tool-title-wide .tool-hero-copy > p{
grid-column:1!important;
max-width:900px!important;
margin:0!important;
}
.exact-tools-hero.tool-title-wide .tool-example-card{
grid-column:2!important;
grid-row:3!important;
margin-top:0!important;
}
/* Tablet/mobile can wrap naturally. */
@media(max-width:980px){
.future-tool-hero.tool-title-wide .future-tool-page-container,
.exact-tools-hero.tool-title-wide .tool-hero-inner{
width:min(100% - 36px, 1540px)!important;
}
.future-tool-hero.tool-title-wide h1,
.exact-tools-hero.tool-title-wide .tool-hero-copy h1{
white-space:normal!important;
font-size:clamp(46px,9vw,72px)!important;
}
.exact-tools-hero.tool-title-wide .tool-hero-inner{
grid-template-columns:1fr!important;
}
.exact-tools-hero.tool-title-wide .tool-hero-copy > p,
.exact-tools-hero.tool-title-wide .tool-example-card{
grid-column:1!important;
}
.exact-tools-hero.tool-title-wide .tool-example-card{
grid-row:auto!important;
justify-self:start!important;
margin-top:20px!important;
}
}
/* =========================================================
V79 — Free Tools names: stacked editorial treatment
BOTH themes. Other page layouts remain unchanged.
========================================================= */
.tools-hub-feature-card h3.stacked-tool-title{
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
gap:0!important;
margin:0 0 18px!important;
font-family:Manrope,Inter,sans-serif!important;
font-size:clamp(31px,2.05vw,40px)!important;
line-height:.92!important;
letter-spacing:-.055em!important;
font-weight:750!important;
}
.tools-hub-feature-card h3.stacked-tool-title span{
display:block!important;
color:var(--text)!important;
}
.tools-hub-feature-card h3.stacked-tool-title span:first-child{
color:var(--accent)!important;
}
/* Give the taller titles enough breathing room without making cards busier. */
.tools-hub-feature-card{
min-height:500px!important;
}
@media(max-width:980px){
.tools-hub-feature-card h3.stacked-tool-title{
font-size:34px!important;
}
}
/* =========================================================
V81 — Tool naming + cohesive Free Tools cards
Applies to BOTH themes.
========================================================= */
/* ---------- Tool hub card system ---------- */
.tools-hub-cards{
align-items:stretch!important;
}
.tools-hub-feature-card{
box-sizing:border-box!important;
min-height:460px!important;
padding:30px 30px 26px!important;
display:flex!important;
flex-direction:column!important;
position:relative!important;
overflow:hidden!important;
border-radius:28px!important;
border:1px solid var(--line)!important;
background:
radial-gradient(circle at 18% 12%, rgba(67,201,135,.08), transparent 31%),
linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.06))!important;
box-shadow:
0 18px 50px rgba(23,35,29,.045),
inset 0 1px 0 rgba(255,255,255,.45)!important;
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease!important;
}
.tools-hub-feature-card::after{
content:"";
position:absolute;
left:28px;
right:28px;
bottom:76px;
height:1px;
background:var(--line);
pointer-events:none;
}
.tools-hub-feature-card:hover{
transform:translateY(-4px)!important;
border-color:rgba(67,201,135,.58)!important;
box-shadow:
0 24px 64px rgba(23,35,29,.075),
0 0 0 1px rgba(67,201,135,.08)!important;
}
/* Top row stays compact even when a status badge is absent. */
.tools-hub-feature-top{
min-height:34px!important;
margin-bottom:22px!important;
align-items:center!important;
}
.tools-hub-feature-number{
font-weight:750!important;
letter-spacing:.12em!important;
}
/* Icons sit close to titles instead of floating in empty space. */
.tools-hub-feature-icon{
margin:4px 0 22px!important;
}
/* Editorial stacked names retained, but tighter and more balanced. */
.tools-hub-feature-card h3.stacked-tool-title{
margin:0 0 18px!important;
font-size:clamp(31px,2vw,39px)!important;
line-height:.91!important;
letter-spacing:-.055em!important;
}
.tools-hub-feature-card > p{
margin:0!important;
max-width:94%!important;
line-height:1.55!important;
}
/* Tags become part of the content block rather than floating low. */
.tools-hub-feature-meta{
margin-top:25px!important;
margin-bottom:74px!important;
}
/* Consistent finished footer inside every card. */
.tools-hub-feature-link{
position:absolute!important;
left:30px!important;
right:30px!important;
bottom:0!important;
height:76px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
margin:0!important;
padding:0!important;
font-weight:750!important;
}
.tools-hub-feature-link > span{
font-size:22px!important;
transition:transform .18s ease!important;
}
.tools-hub-feature-card:hover .tools-hub-feature-link > span{
transform:translateX(4px)!important;
}
/* "Available now" remains useful but visually quieter. */
.tools-hub-feature-status--live{
background:rgba(67,201,135,.08)!important;
border-color:rgba(67,201,135,.25)!important;
}
/* ---------- Dark-theme equivalent ---------- */
body:not(.light-theme) .tools-hub-feature-card{
background:
radial-gradient(circle at 18% 12%, rgba(75,226,154,.09), transparent 31%),
linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006))!important;
border-color:rgba(88,196,142,.20)!important;
box-shadow:
0 20px 54px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.025)!important;
}
body:not(.light-theme) .tools-hub-feature-card::after{
background:rgba(110,195,154,.16)!important;
}
body:not(.light-theme) .tools-hub-feature-card:hover{
border-color:rgba(75,226,154,.55)!important;
box-shadow:
0 26px 68px rgba(0,0,0,.26),
0 0 42px rgba(47,190,120,.055)!important;
}
/* Toolbox rows no longer reserve visual space for removed "Coming soon". */
.tools-hub-panel-row{
grid-template-columns:34px minmax(0,1fr) auto!important;
}
.tools-hub-panel-row:not(.tools-hub-panel-row--active) i:empty{
display:none!important;
}
/* Individual future-tool pages: no status gap after removing badge. */
.future-tool-hero .future-tool-page-status{
display:none!important;
}
/* Tablet/mobile */
@media(max-width:980px){
.tools-hub-feature-card{
min-height:430px!important;
}
}
@media(max-width:640px){
.tools-hub-feature-card{
min-height:420px!important;
padding:25px 24px 22px!important;
border-radius:24px!important;
}
.tools-hub-feature-card::after{
left:24px!important;
right:24px!important;
bottom:68px!important;
}
.tools-hub-feature-link{
left:24px!important;
right:24px!important;
height:68px!important;
}
}
/* =========================================================
V82 — Tool product pages redesign
Shared visual system for Audit / Compare / Calculators
Works in BOTH themes.
========================================================= */
.tool-product-page,
.tool-product-shell{
position:relative;
overflow:hidden;
}
.tool-product-shell{
min-height:calc(100vh - 86px);
padding:38px 0 54px;
background:var(--bg);
}
.tool-product-bg{
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 2% 20%, rgba(67,201,135,.10), transparent 24%),
radial-gradient(circle at 98% 82%, rgba(67,201,135,.08), transparent 22%);
}
.tool-product-container{
position:relative;
z-index:1;
width:min(1520px, calc(100% - 72px))!important;
max-width:1520px!important;
}
.tool-product-breadcrumb{
display:flex;
align-items:center;
gap:10px;
margin-bottom:54px;
color:var(--muted);
font:500 13px/1.2 Inter,sans-serif;
}
.tool-product-breadcrumb a{
color:var(--muted);
text-decoration:none;
}
.tool-product-breadcrumb span{
letter-spacing:.24em;
font-size:11px;
}
.tool-product-grid{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(480px,.95fr);
gap:68px;
align-items:center;
}
.tool-product-copy h1{
margin:0;
max-width:820px;
font-family:Manrope,Inter,sans-serif;
font-size:clamp(62px,5.5vw,96px);
line-height:.92;
letter-spacing:-.065em;
color:var(--text);
}
.tool-product-copy h1 span{
color:var(--accent);
}
.tool-product-lead{
max-width:760px;
margin:24px 0 0;
color:var(--muted);
font-size:18px;
line-height:1.55;
}
.tool-product-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:24px;
}
.tool-product-tags span{
padding:8px 14px;
border:1px solid rgba(67,201,135,.28);
border-radius:999px;
background:rgba(67,201,135,.055);
color:var(--text);
font:650 12px/1 Inter,sans-serif;
}
.tool-feature-list{
margin-top:34px;
max-width:820px;
border-top:1px solid var(--line);
}
.tool-feature-row{
display:grid;
grid-template-columns:46px 180px minmax(0,1fr);
gap:16px;
align-items:center;
min-height:62px;
border-bottom:1px solid var(--line);
}
.tp-icon{
width:38px;
height:38px;
display:grid;
place-items:center;
border:1px solid rgba(67,201,135,.24);
border-radius:11px;
background:rgba(67,201,135,.075);
color:var(--accent);
font:750 20px/1 Inter,sans-serif;
}
.tool-feature-row b{
color:var(--text);
font:700 14px/1.25 Inter,sans-serif;
}
.tool-feature-row p{
margin:0;
color:var(--muted);
font-size:13px;
line-height:1.35;
}
.tool-product-note{
max-width:820px;
margin:20px 0 0;
color:var(--muted);
font-size:12px;
line-height:1.5;
}
.tool-action-card{
position:relative;
padding:32px;
border:1px solid rgba(67,201,135,.38);
border-radius:28px;
background:
radial-gradient(circle at 88% 12%, rgba(67,201,135,.08), transparent 26%),
var(--panel);
box-shadow:0 28px 75px rgba(28,52,40,.09);
}
.tool-action-head{
display:flex;
gap:18px;
align-items:flex-start;
margin-bottom:26px;
}
.tool-action-icon{
width:58px;
height:58px;
flex:0 0 58px;
display:grid;
place-items:center;
border:1px solid rgba(67,201,135,.24);
border-radius:15px;
background:rgba(67,201,135,.08);
color:var(--accent);
font:800 28px/1 Inter,sans-serif;
}
.tool-action-head h2{
margin:1px 0 6px;
color:var(--text);
font-family:Manrope,Inter,sans-serif;
font-size:26px;
letter-spacing:-.035em;
}
.tool-action-head p{
margin:0;
color:var(--muted);
font-size:13px;
line-height:1.45;
}
.tool-action-card label{
display:block;
margin:18px 0 9px;
color:var(--muted);
font:750 10px/1 Inter,sans-serif;
letter-spacing:.16em;
}
.tool-action-input,
.tool-action-select{
box-sizing:border-box;
min-height:64px;
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 18px;
border:1px solid var(--line);
border-radius:14px;
background:var(--field);
color:var(--muted);
text-decoration:none;
font-size:15px;
}
.tool-action-button{
min-height:60px;
width:100%;
margin-top:20px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
border:0;
border-radius:14px;
background:var(--accent);
color:#06120c;
text-decoration:none;
font:800 15px/1 Inter,sans-serif;
cursor:pointer;
transition:transform .18s ease, filter .18s ease;
}
.tool-action-button:hover{
transform:translateY(-2px);
filter:brightness(1.03);
}
.tool-trust-row{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:18px 28px;
margin-top:22px;
color:var(--muted);
font-size:11px;
}
.tool-mini-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.tool-product-shell--calc{
min-height:auto;
padding-bottom:72px;
}
/* Dark mode */
body:not(.light-theme) .tool-product-shell{
background:#07100c;
}
body:not(.light-theme) .tool-product-bg{
background:
radial-gradient(circle at 5% 22%, rgba(73,227,154,.10), transparent 24%),
radial-gradient(circle at 95% 80%, rgba(73,227,154,.07), transparent 22%);
}
body:not(.light-theme) .tool-action-card{
background:
radial-gradient(circle at 88% 12%, rgba(73,227,154,.07), transparent 26%),
#0b1712;
border-color:rgba(73,227,154,.30);
box-shadow:0 30px 80px rgba(0,0,0,.24);
}
body:not(.light-theme) .tool-action-input,
body:not(.light-theme) .tool-action-select{
background:#0d1914;
border-color:rgba(255,255,255,.09);
}
body:not(.light-theme) .tool-product-tags span,
body:not(.light-theme) .tp-icon,
body:not(.light-theme) .tool-action-icon{
background:rgba(73,227,154,.075);
border-color:rgba(73,227,154,.23);
}
/* Responsive */
@media(max-width:1120px){
.tool-product-grid{
grid-template-columns:1fr;
gap:42px;
}
.tool-action-card{
max-width:760px;
}
}
@media(max-width:720px){
.tool-product-shell{
padding-top:24px;
}
.tool-product-container{
width:min(100% - 30px, 1520px)!important;
}
.tool-product-breadcrumb{
margin-bottom:34px;
flex-wrap:wrap;
}
.tool-product-copy h1{
font-size:clamp(48px,14vw,70px);
}
.tool-product-lead{
font-size:16px;
}
.tool-feature-row{
grid-template-columns:42px 1fr;
gap:10px 12px;
padding:12px 0;
}
.tool-feature-row p{
grid-column:2;
}
.tool-action-card{
padding:24px 20px;
border-radius:22px;
}
.tool-action-head h2{
font-size:22px;
}
.tool-mini-grid{
grid-template-columns:1fr;
}
.tool-trust-row{
justify-content:flex-start;
}
}
/* =========================================================
V83 — FIX: tool pages were stuck to the left edge
Center the whole product layout in BOTH themes.
========================================================= */
.tool-product-container{
width:min(1520px, calc(100% - 96px))!important;
max-width:1520px!important;
margin-left:auto!important;
margin-right:auto!important;
padding-left:0!important;
padding-right:0!important;
}
.tool-product-grid{
width:100%!important;
margin-left:auto!important;
margin-right:auto!important;
}
.tool-product-copy{
min-width:0!important;
}
.tool-action-card{
width:100%!important;
box-sizing:border-box!important;
}
@media(max-width:1120px){
.tool-product-container{
width:min(100% - 56px, 1520px)!important;
}
}
@media(max-width:720px){
.tool-product-container{
width:min(100% - 30px, 1520px)!important;
}
}
/* =========================================================
V84 — Google Ads Calculators page cleanup
Keep the functional calculator section; remove duplicated hero.
========================================================= */
.calc-page-compact-head{
padding:34px 0 6px!important;
background:var(--bg)!important;
}
.calc-page-compact-head .container{
width:min(1520px, calc(100% - 96px))!important;
max-width:1520px!important;
margin:0 auto!important;
display:flex!important;
align-items:center!important;
gap:12px!important;
}
.calc-page-compact-head a{
color:var(--muted)!important;
text-decoration:none!important;
font-size:13px!important;
}
.calc-page-compact-head span{
color:var(--muted)!important;
font:600 10px/1 Inter,sans-serif!important;
letter-spacing:.24em!important;
}
#calculators.free-tools-section{
padding-top:42px!important;
}
#calculators .free-tools-intro{
margin-top:0!important;
}
body:not(.light-theme) .calc-page-compact-head{
background:#07100c!important;
}
@media(max-width:1120px){
.calc-page-compact-head .container{
width:min(100% - 56px, 1520px)!important;
}
}
@media(max-width:720px){
.calc-page-compact-head{
padding-top:22px!important;
}
.calc-page-compact-head .container{
width:min(100% - 30px, 1520px)!important;
flex-wrap:wrap!important;
}
#calculators.free-tools-section{
padding-top:28px!important;
}
}
/* =========================================================
V85 — DARK TOOL PAGES ONLY
Calmer green system. Light theme unchanged.
v84 remains the locked working baseline.
========================================================= */
/* Product/tool pages: use green as an accent, not as a dominant colour. */
body:not(.light-theme) .tool-product-shell{
--tool-calm-green:#6fc69a;
--tool-calm-green-soft:#4f9f79;
--tool-calm-border:rgba(111,198,154,.22);
--tool-calm-fill:rgba(111,198,154,.055);
--tool-calm-glow:rgba(111,198,154,.045);
}
/* Reduce the green atmospheric glow. */
body:not(.light-theme) .tool-product-bg{
background:
radial-gradient(circle at 6% 20%, rgba(111,198,154,.045), transparent 25%),
radial-gradient(circle at 94% 82%, rgba(111,198,154,.025), transparent 23%)!important;
}
/* Titles: softer, less fluorescent green. */
body:not(.light-theme) .tool-product-copy h1 span{
color:var(--tool-calm-green)!important;
}
/* Pills: mostly neutral, with only a quiet green border. */
body:not(.light-theme) .tool-product-tags span{
color:#d7ddd9!important;
background:rgba(255,255,255,.018)!important;
border-color:var(--tool-calm-border)!important;
}
/* Feature icons: muted green instead of bright mint. */
body:not(.light-theme) .tp-icon{
color:var(--tool-calm-green)!important;
background:var(--tool-calm-fill)!important;
border-color:var(--tool-calm-border)!important;
}
/* Right product card: quieter border and almost no green glow. */
body:not(.light-theme) .tool-action-card{
background:
radial-gradient(circle at 88% 12%, var(--tool-calm-glow), transparent 28%),
#0b1712!important;
border-color:var(--tool-calm-border)!important;
box-shadow:0 28px 72px rgba(0,0,0,.22)!important;
}
body:not(.light-theme) .tool-action-icon{
color:var(--tool-calm-green)!important;
background:var(--tool-calm-fill)!important;
border-color:var(--tool-calm-border)!important;
}
/* CTA remains visible but no longer looks fluorescent. */
body:not(.light-theme) .tool-action-button{
background:var(--tool-calm-green)!important;
color:#07110c!important;
}
body:not(.light-theme) .tool-action-button:hover{
filter:brightness(1.035)!important;
}
/* Input/select focus uses the calmer accent too. */
body:not(.light-theme) .tool-action-input:focus,
body:not(.light-theme) .tool-action-select:focus{
border-color:rgba(111,198,154,.38)!important;
}
/* Free Tools hub in dark mode: reduce green card glow/borders. */
body:not(.light-theme) .tools-hub-feature-card{
background:
radial-gradient(circle at 18% 12%, rgba(111,198,154,.04), transparent 31%),
linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006))!important;
border-color:rgba(111,198,154,.14)!important;
}
body:not(.light-theme) .tools-hub-feature-card:hover{
border-color:rgba(111,198,154,.34)!important;
box-shadow:
0 26px 68px rgba(0,0,0,.25),
0 0 34px rgba(111,198,154,.025)!important;
}
body:not(.light-theme) .tools-hub-feature-card h3.stacked-tool-title span:first-child{
color:#6fc69a!important;
}
/* Dark calculator working area: preserve functionality, soften mint accents. */
body:not(.light-theme) #calculators{
--accent:#6fc69a;
--mint:#6fc69a;
}
body:not(.light-theme) #calculators .free-tools-tab.active,
body:not(.light-theme) #calculators .calculator-tab.active{
background:#6fc69a!important;
border-color:#6fc69a!important;
color:#07110c!important;
}
/* V86 — calculator production states; layout/design intentionally unchanged */
#calculators .calc-input-error{
border-color:#b94a48!important;
outline:none!important;
}
#calculators .calc-validation-message{
margin-top:10px;
font-size:12px;
line-height:1.45;
color:#b94a48;
}
body:not(.light-theme) #calculators .calc-validation-message{
color:#d98c89;
}
#calculators input[type="number"]:focus-visible,
#calculators button:focus-visible,
#calculators a:focus-visible,
#calculators [role="button"]:focus-visible{
outline:2px solid currentColor;
outline-offset:3px;
}
/* =========================================================
V87 — Calculator card soft centre transition
Visual-only change. No calculator logic/layout changed.
========================================================= */
/* Desktop: overlap both halves slightly and dissolve the hard seam. */
@media (min-width: 900px){
#calculators .calculator-card,
#calculators .calc-card{
position:relative;
overflow:hidden;
isolation:isolate;
}
#calculators .calculator-card::after,
#calculators .calc-card::after{
content:"";
position:absolute;
top:0;
bottom:0;
left:calc(50% - 70px);
width:140px;
pointer-events:none;
z-index:2;
background:linear-gradient(
90deg,
rgba(7,16,12,0) 0%,
rgba(7,16,12,.10) 18%,
rgba(32,48,40,.16) 38%,
rgba(126,139,132,.14) 50%,
rgba(225,230,227,.13) 64%,
rgba(245,247,246,.07) 82%,
rgba(245,247,246,0) 100%
);
filter:blur(10px);
}
/* Light theme: a slightly softer neutral blend. */
body.light-theme #calculators .calculator-card::after,
body.light-theme #calculators .calc-card::after{
background:linear-gradient(
90deg,
rgba(7,16,12,0) 0%,
rgba(30,45,38,.10) 22%,
rgba(111,128,119,.13) 43%,
rgba(205,212,208,.12) 62%,
rgba(247,248,247,0) 100%
);
filter:blur(12px);
}
}
/* =========================================================
V88 — Working Free Website Audit
========================================================= */
.website-audit-form{display:grid;gap:12px}
.audit-url-input{
width:100%;
box-sizing:border-box;
appearance:none;
font:inherit;
cursor:text;
}
.audit-url-input::placeholder{color:inherit;opacity:.48}
.audit-url-input:focus{outline:2px solid rgba(111,198,154,.34);outline-offset:2px}
.tool-action-button:disabled{opacity:.68;cursor:wait}
.audit-form-message{min-height:1.35em;margin:2px 0 0;font-size:13px;line-height:1.4;color:#c87572}
body.light-theme .audit-form-message{color:#a54440}
.audit-results-section{
padding:70px 0 92px;
border-top:1px solid rgba(255,255,255,.07);
background:#08110d;
color:#f5f7f6;
}
body.light-theme .audit-results-section{
background:#f4f4f1;
color:#292a2d;
border-top:1px solid #d8d8d2;
}
.audit-results-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:28px;
margin-bottom:28px;
}
.audit-kicker{
display:block;
margin-bottom:9px;
font-size:12px;
font-weight:800;
letter-spacing:.14em;
color:#6fc69a;
}
.audit-results-head h2{margin:0 0 8px;font-size:clamp(32px,4vw,50px);line-height:1}
.audit-results-head p{margin:0;color:#9aa9a1;font-size:14px}
body.light-theme .audit-results-head p{color:#707177}
.audit-score-card{
min-width:190px;
padding:18px 20px;
border:1px solid rgba(111,198,154,.24);
border-radius:18px;
background:rgba(111,198,154,.06);
text-align:right;
}
.audit-score-card span{display:block;font-size:11px;line-height:1.25;color:#9fb4aa}
.audit-score-card strong{font-size:42px;line-height:1;color:#6fc69a}
.audit-score-card small{font-size:15px;color:#9fb4aa}
body.light-theme .audit-score-card span,
body.light-theme .audit-score-card small{color:#707177}
.audit-summary-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
margin:0 0 20px;
}
.audit-summary-item{
padding:17px 18px;
border:1px solid rgba(255,255,255,.09);
border-radius:16px;
background:rgba(255,255,255,.025);
}
.audit-summary-item strong{display:block;font-size:27px;line-height:1.1}
.audit-summary-item span{display:block;margin-top:5px;font-size:12px;color:#9aa9a1}
body.light-theme .audit-summary-item{border-color:#d8d8d2;background:#fbfbf8}
body.light-theme .audit-summary-item span{color:#707177}
.audit-groups{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.audit-group{
overflow:hidden;
border:1px solid rgba(255,255,255,.09);
border-radius:20px;
background:#0c1712;
}
body.light-theme .audit-group{border-color:#d8d8d2;background:#fbfbf8}
.audit-group>h3{
margin:0;
padding:18px 20px;
border-bottom:1px solid rgba(255,255,255,.08);
font-size:17px;
}
body.light-theme .audit-group>h3{border-color:#e2e2dc}
.audit-check{
display:grid;
grid-template-columns:34px minmax(0,1fr);
gap:12px;
padding:17px 20px;
border-bottom:1px solid rgba(255,255,255,.06);
}
body.light-theme .audit-check{border-color:#ecece7}
.audit-check:last-child{border-bottom:0}
.audit-check-symbol{
display:grid;
place-items:center;
width:30px;height:30px;
border-radius:50%;
font-weight:900;
background:rgba(255,255,255,.06);
}
.audit-status-passed .audit-check-symbol{color:#6fc69a;background:rgba(111,198,154,.10)}
.audit-status-warning .audit-check-symbol{color:#d6ad64;background:rgba(214,173,100,.10)}
.audit-status-issue .audit-check-symbol{color:#d77d79;background:rgba(215,125,121,.10)}
.audit-status-unverified .audit-check-symbol{color:#9aa9a1;background:rgba(154,169,161,.09)}
.audit-check-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}
.audit-check-top strong{font-size:14px}
.audit-check-top span{font-size:11px;color:#9aa9a1}
body.light-theme .audit-check-top span{color:#707177}
.audit-check-copy p{margin:5px 0 0;color:#aab8b1;font-size:13px;line-height:1.5}
body.light-theme .audit-check-copy p{color:#62646a}
.audit-check-copy code{
display:block;
margin-top:8px;
overflow-wrap:anywhere;
white-space:normal;
font:500 11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
color:#bdc9c3;
}
body.light-theme .audit-check-copy code{color:#62646a}
.audit-results-cta{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
margin-top:20px;
padding:24px;
border:1px solid rgba(111,198,154,.18);
border-radius:20px;
background:rgba(111,198,154,.045);
}
.audit-results-cta span{font-size:11px;font-weight:800;letter-spacing:.12em;color:#6fc69a}
.audit-results-cta h3{margin:6px 0 0;font-size:19px}
body.light-theme .audit-results-cta{background:#fbfbf8;border-color:#d8d8d2}
@media (max-width:800px){
.audit-results-section{padding:48px 0 64px}
.audit-results-head{align-items:stretch;flex-direction:column}
.audit-score-card{text-align:left;min-width:0}
.audit-summary-grid{grid-template-columns:repeat(2,1fr)}
.audit-groups{grid-template-columns:1fr}
.audit-results-cta{align-items:flex-start;flex-direction:column}
}