/* ============================================================ GLOW v3 — visible colour + growing accent on every box Load order: shared.css → premium.css → motion.css → glow3.css ============================================================ */ /* ---- 1. GROWING TOP ACCENT BAR (the "colour that grows") ---- */ .lit{position:relative} .lit::after{ content:'';position:absolute;z-index:2; bottom:0;left:16px;height:3px;width:0; border-radius:3px 3px 0 0; background:linear-gradient(90deg,#0e6b5c 0%,#18b87a 48%,#ffb825 100%); transition:width 1.05s cubic-bezier(.33,.9,.28,1),height .3s ease; pointer-events:none; } .lit.is-lit::after{width:calc(100% - 32px)} .lit:hover::after{height:4px} /* ---- 2. VISIBLE TIER-2 RING (replaces the invisible .07–.14) ---- */ .premium .stat-tile:not(.glow-card),.premium .mech-card:not(.glow-card), .premium .step:not(.glow-card),.premium .tcard:not(.glow-card), .premium .svc:not(.glow-card),.premium .svc-card:not(.glow-card), .premium .answer-block:not(.glow-card),.premium .stat:not(.glow-card), .premium .ba-card:not(.glow-card),.premium .p-split-copy:not(.glow-card), .premium .stepcard:not(.glow-card),.premium .price-card:not(.glow-card), .premium .ctabox:not(.glow-card),.premium .qcard:not(.glow-card), .glow-t2:not(.glow-card),.lit:not(.glow-card){ box-shadow: 0 0 0 1.5px rgba(255,184,37,.22), 0 6px 30px rgba(255,184,37,.07), 0 4px 46px rgba(34,48,74,.08); } .premium .faq details:not(.glow-card){ box-shadow: 0 0 0 1.5px rgba(255,184,37,.18), 0 4px 20px rgba(255,184,37,.05), 0 4px 16px rgba(34,48,74,.06); } /* ---- 3. HOVER: colour intensifies ---- */ @media (min-width:1024px) and (prefers-reduced-motion:no-preference){ .glow-t2:not(.glow-card):hover,.lit:not(.glow-card):hover, .premium .svc-card:not(.glow-card):hover,.premium .tcard:not(.glow-card):hover, .premium .step:not(.glow-card):hover,.premium .stat-tile:not(.glow-card):hover, .premium .answer-block:not(.glow-card):hover,.premium .qcard:not(.glow-card):hover, .premium .price-card:not(.glow-card):hover,.premium .ctabox:not(.glow-card):hover{ box-shadow: 0 0 0 1.5px rgba(255,184,37,.72), 0 10px 40px rgba(255,184,37,.26), 0 4px 70px rgba(34,48,74,.12); transition:box-shadow .35s ease; } } /* ---- 4. HEADING ACCENT — fires on card's first heading regardless of DOM position. HARD LIMIT: exactly one bar per card — h3 is suppressed when a sibling h2 exists. Uses :has() (Chrome 105+, FF 121+, Safari 15.4+) for the suppression logic. ---- */ .lit > h2:first-of-type::before, .lit:not(:has(> h2)) > h3:first-of-type::before, .lit > .lit-hd::before{ content:'';display:block;width:34px;height:3px;border-radius:2px;margin-bottom:10px; background:linear-gradient(90deg,#0e6b5c,#18b87a); } /* ---- 5. HOMEPAGE / HERO COLOUR BAND ---- */ .hero-band{ position:relative; background: radial-gradient(900px 420px at 12% -10%, rgba(24,184,122,.16), transparent 62%), radial-gradient(760px 380px at 88% 0%, rgba(255,184,37,.16), transparent 60%), linear-gradient(180deg,#fffdf8 0%,#faf6ee 100%); } .hero-band::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:4px; background:linear-gradient(90deg,#0e6b5c,#18b87a 42%,#ffb825 78%,#0e6b5c); background-size:220% 100%; animation:zipBandFlow 9s linear infinite; } @keyframes zipBandFlow{to{background-position:220% 0}} /* animated underline under the hero accent word */ .hl-grow{ background-image:linear-gradient(90deg,rgba(24,184,122,.34),rgba(255,184,37,.42)); background-repeat:no-repeat;background-position:0 88%; background-size:0% .42em; animation:zipHlGrow 1.5s cubic-bezier(.33,.9,.28,1) .35s forwards; padding:0 .06em; } @keyframes zipHlGrow{to{background-size:100% .42em}} /* ---- 6. SECTION TINT so pages are not one flat cream ---- */ .tint-mint{background:linear-gradient(180deg,rgba(24,184,122,.07),rgba(24,184,122,.02))} .tint-amber{background:linear-gradient(180deg,rgba(255,184,37,.09),rgba(255,184,37,.02))} /* ---- 7. IMAGE SIZING — one rule, everywhere ---- */ .svc-media,.card-media,.lit-media{ aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:#f1ece1 } .svc-media img,.card-media img,.lit-media img{ width:100%;height:100%;object-fit:cover;display:block } .premium img:not(.nav-ico):not([class*=ico]):not(svg){max-width:100%;height:auto} /* Photo-strip marquee: must beat the catch-all above (spec 0,3,3) — use !important */ .pcard img{height:230px!important;width:auto!important;max-width:none!important} @media(max-width:860px){.pcard img{height:170px!important}} /* ---- 8. LINE CTA — logo + ทัก LINE, never bare text ---- `js-line-cta` is a JS BEHAVIOUR hook (line-modal.js), NOT a style class. Styling it green+white hijacked secondary/ghost buttons that keep their own pale background, producing white-on-white unreadable text (found live on pin-google-maps.html `.btn-sec.js-line-cta`, 2026-08-02). Green pill styling belongs to `.btn-line` only; the hook is excluded from any button that already declares its own appearance. */ .btn-line, .js-line-cta:not(.btn-sec):not(.link-pill):not(.btn-check):not(.line-fab){ display:inline-flex;align-items:center;gap:8px; background:#06C755;color:#fff!important;border:0; font-weight:700;text-decoration:none;white-space:nowrap; border-radius:999px;padding:11px 20px;min-height:44px; box-shadow:0 6px 20px rgba(6,199,85,.34) } .btn-line:hover, .js-line-cta:not(.btn-sec):not(.link-pill):not(.btn-check):not(.line-fab):hover{ background:#05b34c;box-shadow:0 10px 28px rgba(6,199,85,.48) } .btn-line svg,.js-line-cta svg{flex-shrink:0} /* Secondary LINE CTA: keeps its pale background, so it needs dark ink and a readable border. Never inherits the white text from the green pill. */ .btn-sec.js-line-cta{ color:var(--sky,#0e6b5c)!important; border:1.5px solid rgba(14,107,92,.45); background:#fffdf8; font-weight:700;text-decoration:none } .btn-sec.js-line-cta:hover{ background:rgba(14,107,92,.07); border-color:var(--sky,#0e6b5c) } /* ---- 9. Reduced motion ---- */ @media (prefers-reduced-motion:reduce){ .lit::after{width:calc(100% - 32px)!important;transition:none!important} .hero-band::after,.hl-grow{animation:none!important} .hl-grow{background-size:100% .42em} } /* ---- 10. SVC-CARD BOXED RING — .svc-card has overflow:hidden which clips the .boxed::before gradient ring. Compensate with an inset ring via box-shadow so rail cards match the rest of the site. (20260802b) ---- */ .svc-card.boxed:not(.glow-card){ box-shadow: 0 0 0 1.5px rgba(255,184,37,.22), 0 6px 30px rgba(255,184,37,.07), 0 4px 46px rgba(34,48,74,.08), inset 0 0 0 2px rgba(24,184,122,.40); } /* ---- 90-day guarantee block (20260802h) ---- */ .guarantee-sec{padding:clamp(38px,5vw,64px) 20px} .gtee{ max-width:760px;margin:0 auto;padding:clamp(26px,3.4vw,40px); border-radius:20px; background: radial-gradient(600px 300px at 8% -20%, rgba(24,184,122,.13), transparent 60%), linear-gradient(180deg,#fffdf8,#fdf8ec); } .gtee-badge{ display:inline-flex;align-items:center;gap:7px; font-size:12.5px;font-weight:700;letter-spacing:.02em; color:#0e6b5c;background:rgba(24,184,122,.12); border:1px solid rgba(24,184,122,.3); border-radius:999px;padding:6px 13px;margin-bottom:16px } .gtee-hd{ font-size:clamp(21px,2.7vw,31px);line-height:1.35;margin:0 0 22px; letter-spacing:-.01em } .gtee-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:13px} .gtee-list li{display:flex;gap:13px;align-items:flex-start} .gtee-n{ flex-shrink:0;width:27px;height:27px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; font-size:13.5px;font-weight:800;color:#fff; background:linear-gradient(135deg,#0e6b5c,#18b87a); box-shadow:0 3px 10px rgba(14,107,92,.3) } .gtee-list p{margin:2px 0 0;font-size:16px;line-height:1.7;color:var(--ink,#1c2321)} .gtee-cond{ font-size:13.5px;line-height:1.65;color:var(--muted,#5c6660); border-top:1px solid var(--line,#ddd5c4);padding-top:14px;margin:0 0 20px } .gtee-cta{margin-top:2px} @media(max-width:560px){ .gtee-list p{font-size:15px} }