as the last child of the section that comes FIRST — it paints the colour of the section that follows, bulging up into a smile-shaped curve so there's no hard line. ===== */ .sm-curve{ position:absolute; left:0; right:0; bottom:-1px; height:clamp(40px, 6vw, 80px); background:var(--sm-curve-color, var(--sm-bg)); clip-path:url(#sm-curve-path); pointer-events:none; } /* ===== Logo marquee — continuous auto-scrolling strip of logos only (no labels) ===== */ .sm-logo-marquee{ position:relative; overflow:hidden; padding:6px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .sm-logo-track{ display:flex; align-items:center; gap:20px; width:max-content; animation:smMarquee 32s linear infinite; } @media (hover:hover) and (pointer:fine){ .sm-logo-marquee:hover .sm-logo-track{ animation-play-state:paused; } } /* Real logo assets need a white backing to read correctly in dark mode — same treatment as .sm-supplier-tile. No grayscale filter: logos shown in full colour. */ .sm-logo-track .sm-logo-chip{ flex-shrink:0; display:flex; align-items:center; justify-content:center; height:76px; width:150px; padding:16px 22px; background:#fff; border:1px solid var(--sm-border); border-radius:12px; box-shadow:var(--sm-card-shadow); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } @media (hover:hover) and (pointer:fine){ .sm-logo-track .sm-logo-chip:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.12); border-color:var(--sm-coral); } } .sm-logo-track .sm-logo-item{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; } /* NOT -50% — with a `gap` between flex items, half the *total* track width isn't the same point as the start of the duplicated set (the last gap before the midpoint throws it off), which is exactly what read as "a gap after Drax". The real seam is at exactly one set's width: 6 logos x (150px chip + 20px gap) = 1020px. */ @keyframes smMarquee{ from{ transform:translateX(0); } to{ transform:translateX(calc(-6 * (150px + 20px))); } } @media (prefers-reduced-motion: reduce){ .sm-logo-track{ animation:none; } } /* ========================================================================= Reusable page-content components (hero, cards, tables, calculator). Built for the homepage first; safe to reuse on other pages as they're converted (Suppliers, Pricing, Compare, Savings Calculator, etc.) ========================================================================= */ .sm-section{ position:relative; background:var(--sm-bg); font-family:var(--sm-font-body); color:var(--sm-ink); padding:72px 0; } @media(max-width:768px){ .sm-section{ padding:48px 0; } } .sm-wrap{ max-width:1320px; margin:0 auto; padding:0 24px; } .sm-kicker{ color:var(--sm-coral); font-weight:700; font-size:15px; font-variant-caps:small-caps; letter-spacing:.06em; margin-bottom:12px; display:block; } /* ---- Hero ---- */ .sm-hero{ position:relative; padding:56px 0 72px; background:var(--sm-bg); } .sm-hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; } @media(max-width:940px){ .sm-hero-grid{ grid-template-columns:1fr; } } /* ---- Glass trial: soft blurred colour blobs behind the hero — glass needs something behind it to diffuse, a flat background makes backdrop-filter invisible ---- */ .sm-glass-orb{ position:absolute; z-index:0; border-radius:50%; filter:blur(60px); pointer-events:none; opacity:.5; } .sm-glass-orb.sm-orb-1{ width:340px; height:340px; top:-60px; right:8%; background:radial-gradient(circle, var(--sm-coral) 0%, transparent 70%); } .sm-glass-orb.sm-orb-2{ width:280px; height:280px; bottom:-40px; right:28%; background:radial-gradient(circle, var(--sm-teal) 0%, transparent 70%); opacity:.35; } @media(max-width:940px){ .sm-glass-orb{ display:none; } } .sm-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--sm-teal-soft); background:var(--sm-teal-tint); padding:7px 14px; border-radius:6px; margin-bottom:22px; } html[data-theme="dark"] .sm-eyebrow{ color:#8FD4DC; } .sm-hero h1{ font-family:var(--sm-font-head); font-size:36px; line-height:1.28; margin:0 0 22px; font-weight:600; color:var(--sm-ink); } @media(max-width:640px){ .sm-hero h1{ font-size:26px; } } .sm-hero p{ font-size:15px; color:var(--sm-ink-soft); margin:0 0 14px; max-width:600px; line-height:1.65; } /* ---- In-text links (.sm-term) — the site-wide standard for links inside paragraphs/prose, wherever they appear (hero, About Us, legal pages, FAQ answers, calculator labels, etc). Was hero-only and hover'd to a darker pink; generalised so every in-text link looks the same everywhere, and hover now turns blue — a plain "this is clickable" affordance cue, distinct from brand pink at rest, rather than just a shade shift. Bold + dashed underline (not a plain hyperlink underline) so it still reads as a link without looking like inline navigation. ---- */ .sm-term{ font-weight:700; color:var(--sm-coral); text-decoration:none; border-bottom:1.5px dashed var(--sm-coral); padding-bottom:1px; transition:color .15s var(--sm-ease-out), border-color .15s var(--sm-ease-out); } @media (hover:hover) and (pointer:fine){ .sm-term:hover{ color:var(--sm-link-hover); border-bottom-color:var(--sm-link-hover); border-bottom-style:solid; } } .sm-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; margin-bottom:32px; } .sm-trust-row{ display:flex; flex-wrap:wrap; gap:20px; font-size:13px; color:var(--sm-ink-soft); } .sm-trust-row span{ display:flex; align-items:center; gap:6px; } .sm-trust-dot{ width:6px; height:6px; border-radius:50%; background:var(--sm-green); flex-shrink:0; } /* ---- Receipt card ---- */ .sm-receipt{ background:var(--sm-surface); border-radius:var(--sm-radius); border:1px solid var(--sm-border); padding:28px 28px 24px; box-shadow:var(--sm-card-shadow); } /* Reserves room for the floating "25+ years" chip hanging off the bottom edge (see .sm-float-chip) — without this, the chip's negative bottom offset overlapped the "With Smile" bar row instead of sitting in clear space below it. */ .sm-receipt-chip{ padding-bottom:64px; } .sm-receipt-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; } .sm-receipt-head h4{ font-family:var(--sm-font-head); font-size:15px; margin:0; font-weight:600; } .sm-receipt-head span{ font-size:11px; color:var(--sm-ink-soft); font-family:var(--sm-font-mono); } .sm-receipt-sub{ font-size:12.5px; color:var(--sm-ink-soft); margin-bottom:18px; } .sm-receipt-perf{ border-top:1px dashed var(--sm-border); margin:16px 0; } .sm-rline{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:14.5px; } .sm-rline .sm-label{ color:var(--sm-ink-soft); } .sm-rline .sm-val{ font-family:var(--sm-font-mono); font-weight:500; } .sm-rline.sm-strike .sm-val, .sm-rline.sm-strike .sm-label{ text-decoration:line-through; color:var(--sm-ink-soft); opacity:.65; } .sm-rline.sm-flag .sm-val{ color:var(--sm-gold); } .sm-rline.sm-total{ border-top:1px solid var(--sm-border); margin-top:6px; padding-top:12px; font-size:15.5px; font-weight:600; } .sm-rline.sm-total .sm-val{ color:var(--sm-green); font-size:17px; } /* ---- Uplift comparison bars — proportional visual read on the same figures above ---- */ .sm-uplift-bars{ display:flex; flex-direction:column; gap:14px; margin-top:18px; padding-top:18px; border-top:1px dashed var(--sm-border); } .sm-bar-row{ display:grid; grid-template-columns:96px 1fr 52px; align-items:center; gap:12px; } .sm-bar-row .sm-bar-label{ font-size:12px; color:var(--sm-ink-soft); } .sm-bar-row .sm-bar-val{ font-family:var(--sm-font-mono); font-size:12.5px; font-weight:600; text-align:right; color:var(--sm-ink); } .sm-bar-track{ height:8px; border-radius:99px; background:var(--sm-surface-alt); overflow:hidden; } .sm-bar-fill{ height:100%; border-radius:99px; width:0; } .sm-bar-fill.sm-bar-broker{ background:linear-gradient(90deg, var(--sm-coral), var(--sm-coral-deep)); } .sm-bar-fill.sm-bar-smile{ background:linear-gradient(90deg, var(--sm-green), var(--sm-green-deep)); } /* ---- Get Started panel ---- */ .sm-getstarted{ position:relative; background:var(--sm-surface-alt); border-top:1px solid var(--sm-border); border-bottom:1px solid var(--sm-border); } .sm-gs-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:stretch; } /* ---- Caution card — solid dark teal (same weight as the CTA band) so it holds its own next to the Get Started card instead of floating small beside it. Oversized watermark icon for depth, left-aligned copy to match the rest of the page. ---- */ .sm-caution-card{ position:relative; z-index:1; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:center; gap:18px; background:var(--sm-teal); border-radius:var(--sm-radius); padding:44px 42px; box-shadow:0 20px 50px rgba(27,74,84,.28); } html[data-theme="dark"] .sm-caution-card{ box-shadow:0 20px 50px rgba(0,0,0,.5); } .sm-caution-watermark{ position:absolute; z-index:-1; right:-26px; bottom:-46px; font-size:230px; line-height:1; color:rgba(255,255,255,.05); pointer-events:none; } .sm-caution-icon{ width:56px; height:56px; border-radius:14px; background:var(--sm-coral); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 10px 24px rgba(240,88,117,.35); } .sm-caution-card h4{ font-family:var(--sm-font-head); font-size:clamp(24px, 2.6vw, 30px); font-weight:700; letter-spacing:-0.01em; line-height:1.15; margin:0; color:#fff; } .sm-caution-card p{ margin:0; font-size:15px; line-height:1.7; color:#C7D6D8; max-width:400px; } .sm-caution-link{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; margin-top:4px; font-weight:600; font-size:14px; color:var(--sm-coral); text-decoration:none; } .sm-caution-link .sm-arrow{ transition:transform .18s ease; display:inline-block; } @media (hover:hover) and (pointer:fine){ .sm-caution-link:hover{ color:#ff7d94; } } @media (hover:hover) and (pointer:fine){ .sm-caution-link:hover .sm-arrow{ transform:translateX(4px); } } @media(max-width:640px){ .sm-caution-card{ padding:34px 28px; } } @media(max-width:900px){ .sm-gs-grid{ grid-template-columns:1fr; } } .sm-badge-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; } .sm-badge{ position:relative; width:230px; height:230px; border-radius:50%; background:var(--sm-surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; box-shadow:var(--sm-card-shadow); text-align:center; padding:24px; } .sm-badge-ring{ position:absolute; inset:0; width:100%; height:100%; } .sm-badge-ring .sm-track{ fill:none; stroke:var(--sm-border); stroke-width:1.5; } /* Default: fully drawn (safe no-JS fallback). JS animates from dashoffset:90 -> 0 each time it scrolls into view — see the reveal script in master.blade.php. */ .sm-badge-ring .sm-arc{ fill:none; stroke:var(--sm-coral); stroke-width:3; stroke-linecap:round; stroke-dasharray:90; stroke-dashoffset:0; } .sm-badge .sm-bicon{ width:42px; height:42px; border-radius:10px; background:var(--sm-gold-tint); color:var(--sm-gold); display:flex; align-items:center; justify-content:center; } .sm-badge .sm-bicon svg{ width:21px; height:21px; } .sm-badge .sm-num-row{ display:flex; align-items:baseline; gap:3px; } .sm-badge .sm-num{ font-family:var(--sm-font-head); font-size:40px; font-weight:700; color:var(--sm-ink); line-height:1; } .sm-badge .sm-plus{ font-family:var(--sm-font-head); font-size:20px; font-weight:700; color:var(--sm-coral); } .sm-badge .sm-bnum{ font-family:var(--sm-font-head); font-size:36px; font-weight:700; color:var(--sm-ink); line-height:1; } .sm-badge .sm-bnum .sm-check{ color:var(--sm-coral); } .sm-badge .sm-blabel{ font-size:13px; font-weight:600; letter-spacing:.05em; font-variant-caps:small-caps; color:var(--sm-ink-soft); line-height:1.5; } .sm-badge .sm-bsub{ font-size:11.5px; color:var(--sm-ink-soft); font-family:var(--sm-font-mono); margin-top:2px; } .sm-badge-caption{ font-size:13px; color:var(--sm-ink-soft); text-align:center; max-width:220px; } .sm-gs-card{ position:relative; overflow:hidden; background:var(--sm-surface); border:1px solid var(--sm-border); border-radius:var(--sm-radius); padding:32px; box-shadow:var(--sm-card-shadow); } .sm-gs-card::before{ content:''; position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .3s ease; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(240,88,117,.08), transparent 70%); } @media (hover:hover) and (pointer:fine){ .sm-gs-card:hover::before{ opacity:1; } } .sm-gs-card, .sm-fcard, .sm-receipt{ transform-style:preserve-3d; } .sm-gs-card > *, .sm-fcard > *, .sm-receipt > *{ position:relative; } .sm-gs-card h3{ font-family:var(--sm-font-head); font-size:23px; letter-spacing:-0.005em; margin:0 0 18px; font-weight:700; } .sm-cat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:24px; } @media(max-width:560px){ .sm-cat-row{ grid-template-columns:repeat(2,1fr); } } .sm-cat-btn{ padding:11px 8px; text-align:center; border-radius:8px; border:1px solid var(--sm-border); background:var(--sm-surface-alt); font-weight:600; font-size:13.5px; cursor:pointer; transition:.15s; color:var(--sm-ink); text-decoration:none; display:block; font-family:var(--sm-font-body); } .sm-cat-btn.sm-active{ background:var(--sm-coral); border-color:var(--sm-coral); color:#fff; } .sm-gs-card h5{ font-size:14px; margin:0 0 14px; color:var(--sm-ink-soft); font-weight:600; } .sm-checklist{ display:flex; flex-direction:column; gap:8px; margin-bottom:24px; list-style:none; padding:0; } .sm-checklist li{ display:flex; justify-content:space-between; align-items:center; font-size:14px; padding:10px 14px; background:var(--sm-surface-alt); border:1px solid var(--sm-border); border-radius:8px; transition:transform .15s ease, border-color .15s ease; } @media (hover:hover) and (pointer:fine){ .sm-checklist li:hover{ transform:translateX(3px); border-color:var(--sm-coral); } } .sm-checklist li .sm-li-label{ display:flex; align-items:center; gap:10px; } .sm-checklist li .sm-li-icon{ width:26px; height:26px; border-radius:7px; background:var(--sm-coral-tint); color:var(--sm-coral); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; transition:transform .2s ease; } @media (hover:hover) and (pointer:fine){ .sm-checklist li:hover .sm-li-icon{ transform:scale(1.15); } } .sm-checklist .sm-help{ font-size:12.5px; color:var(--sm-coral); font-weight:600; cursor:pointer; background:none; border:none; } .sm-trust-row .sm-trust-icon{ color:var(--sm-coral); font-size:12px; flex-shrink:0; } .sm-gs-card .sm-btn{ width:100%; justify-content:center; } /* ---- Feature / process cards ---- */ .sm-process{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } @media(max-width:860px){ .sm-process{ grid-template-columns:1fr; } } /* 4-column variant (Contact page). Was an inline style="grid-template-columns: repeat(4,1fr)" on the element — inline styles always win over an external stylesheet's media query regardless of specificity, so the page never actually collapsed to 1 column on mobile; it stayed 4-wide and crushed the card text into an unreadable single-character-per-line column. */ .sm-process-4col{ grid-template-columns:repeat(4,1fr); } @media(max-width:860px){ .sm-process-4col{ grid-template-columns:1fr 1fr; } } @media(max-width:560px){ .sm-process-4col{ grid-template-columns:1fr; } } /* transform is owned by the JS tilt effect (mousemove-driven rotateX/Y + scale) on pointer devices — this rule is just the box-shadow lift + the touch/no-JS fallback. */ .sm-fcard{ position:relative; overflow:hidden; background:var(--sm-surface); border:1px solid var(--sm-border); border-radius:var(--sm-radius); padding:28px; transition:box-shadow .18s ease, transform .18s ease; box-shadow:var(--sm-card-shadow); } @media (hover:hover) and (pointer:fine){ .sm-fcard:hover{ box-shadow:0 16px 32px rgba(0,0,0,.1); } } @media (hover:hover) and (pointer:fine){ html[data-theme="dark"] .sm-fcard:hover{ box-shadow:0 16px 32px rgba(0,0,0,.4); } } .sm-fcard::before{ content:''; position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .3s ease; background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(240,88,117,.12), transparent 70%); } @media (hover:hover) and (pointer:fine){ .sm-fcard:hover::before{ opacity:1; } } .sm-fcard .sm-ficon{ width:42px; height:42px; border-radius:10px; background:var(--sm-accent-tint); color:var(--sm-accent); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:17px; transition:transform .25s ease; } @media (hover:hover) and (pointer:fine){ .sm-fcard:hover .sm-ficon{ transform:scale(1.12) rotate(-8deg); } } /* Plain lift for hover-capable devices where the JS tilt didn't init (no-JS, reduced-motion). Gated behind hover:hover same as everything else here — touch devices get no hover-triggered transform at all, tilt or otherwise, since a tap has no hover equivalent and this used to be the fallback THEY got too, which is exactly what caused cards to look "stuck" after a tap. */ @media (hover:hover) and (pointer:fine){ html:not(.sm-tilt-ready) .sm-fcard:hover{ transform:translateY(-5px); } } .sm-fcard .sm-fnum{ font-family:var(--sm-font-mono); color:var(--sm-accent); font-size:12.5px; font-weight:700; margin-bottom:10px; display:block; letter-spacing:.06em; } .sm-fcard h3{ font-family:var(--sm-font-head); font-size:20px; letter-spacing:-0.005em; margin:0 0 8px; font-weight:700; } .sm-fcard p{ color:var(--sm-ink-soft); font-size:14px; margin:0; } /* ---- Pull stat — deliberately the loudest moment on the page ---- */ .sm-pull-stat-wrap{ background:var(--sm-bg); padding:64px 24px; } .sm-pull-stat{ position:relative; overflow:hidden; text-align:center; max-width:720px; margin:0 auto; padding:56px 24px 48px; background:var(--sm-coral-tint); border:1px solid var(--sm-border); border-radius:var(--sm-radius); } .sm-pull-stat::before{ content:''; position:absolute; width:340px; height:340px; top:50%; left:50%; background:radial-gradient(circle, var(--sm-coral) 0%, transparent 70%); opacity:.18; transform:translate(-50%,-50%); pointer-events:none; } .sm-pull-stat .sm-pull-icon{ position:relative; width:52px; height:52px; border-radius:50%; margin:0 auto 14px; background:var(--sm-surface); border:1px solid var(--sm-border); box-shadow:var(--sm-card-shadow); display:flex; align-items:center; justify-content:center; color:var(--sm-coral); font-size:20px; animation:smPulseRing 2.4s ease-in-out infinite; } @keyframes smPulseRing{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.1); } } @media (prefers-reduced-motion: reduce){ .sm-pull-stat .sm-pull-icon{ animation:none; } } .sm-pull-stat .sm-big-num{ position:relative; font-family:var(--sm-font-head); font-size:96px; font-weight:700; line-height:1; color:var(--sm-coral); } @media(max-width:640px){ .sm-pull-stat .sm-big-num{ font-size:56px; } .sm-pull-stat{ padding:44px 20px 36px; } } .sm-pull-stat p{ position:relative; font-size:16px; font-weight:500; color:var(--sm-ink); max-width:460px; margin:14px auto 0; } /* ---- Supplier strip + rate table ---- */ .sm-supplier-strip{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:44px; } .sm-supplier-chip{ position:relative; display:flex; align-items:center; gap:10px; padding:10px 16px; border:1px solid var(--sm-border); border-radius:999px; background:var(--sm-surface); font-size:13.5px; font-weight:600; color:var(--sm-ink-soft); transition:transform .15s ease, border-color .15s ease; text-decoration:none; } @media (hover:hover) and (pointer:fine){ .sm-supplier-chip:hover{ border-color:var(--sm-coral); color:var(--sm-ink); } } @media (hover:hover) and (pointer:fine){ html:not(.sm-tilt-ready) .sm-supplier-chip:hover{ transform:translateY(-2px); } } .sm-supplier-logo{ width:28px; height:28px; border-radius:7px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--sm-border); overflow:hidden; } .sm-supplier-logo img{ width:100%; height:100%; object-fit:contain; padding:3px; } .sm-supplier-logo .sm-fallback{ width:100%; height:100%; display:none; align-items:center; justify-content:center; font-family:var(--sm-font-head); font-weight:700; font-size:9.5px; color:#fff; } .sm-table-card{ border-radius:var(--sm-radius); padding:4px 0; } .sm-table-head{ background:none; text-align:left; padding:4px 20px 18px; font-family:var(--sm-font-head); font-weight:700; font-size:26px; letter-spacing:-0.01em; color:var(--sm-ink); } /* Row-card table: no grid lines — each row floats as its own soft rounded card, separated by space rather than a boundary. border-spacing does the row gaps. */ .sm-rate-table{ width:100%; border-collapse:separate; border-spacing:0 10px; } .sm-rate-table th{ font-size:13.5px; font-weight:700; font-variant-caps:small-caps; letter-spacing:.04em; color:var(--sm-ink-soft); text-align:left; padding:0 20px 8px; white-space:nowrap; } /* Each row always carries its own visible boundary (border + a soft resting shadow, not just background colour) so a row's start/end reads clearly at a glance — var(--sm-card-shadow) alone is "none" in light mode and wasn't enough on its own. */ .sm-rate-table td{ padding:16px 20px; font-size:14px; background:var(--sm-surface); border-top:1px solid var(--sm-border); border-bottom:1px solid var(--sm-border); box-shadow:0 1px 3px rgba(0,0,0,.04); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } html[data-theme="dark"] .sm-rate-table td{ box-shadow:0 1px 3px rgba(0,0,0,.2); } @media (hover:hover) and (pointer:fine){ .sm-rate-table tbody tr:hover td{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.1); border-color:var(--sm-coral); } } @media (hover:hover) and (pointer:fine){ html[data-theme="dark"] .sm-rate-table tbody tr:hover td{ box-shadow:0 10px 24px rgba(0,0,0,.4); } } .sm-rate-table td:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px; border-left:1px solid var(--sm-border); } .sm-rate-table td:last-child{ border-top-right-radius:12px; border-bottom-right-radius:12px; border-right:1px solid var(--sm-border); } @media (hover:hover) and (pointer:fine){ .sm-rate-table tbody tr:hover td:first-child{ border-left-color:var(--sm-coral); } } @media (hover:hover) and (pointer:fine){ .sm-rate-table tbody tr:hover td:last-child{ border-right-color:var(--sm-coral); } } .sm-rate-table .sm-supplier-cell{ font-family:var(--sm-font-head); font-weight:700; font-size:15px; display:flex; align-items:center; gap:10px; white-space:nowrap; } .sm-rate-table .sm-val{ font-family:var(--sm-font-mono); font-weight:500; } .sm-rate-table .sm-type{ color:var(--sm-ink-soft); font-size:13px; } .sm-type-pill{ display:inline-block; background:var(--sm-teal-tint); color:var(--sm-teal-soft); font-weight:600; font-size:12px; padding:5px 13px; border-radius:999px; white-space:nowrap; } html[data-theme="dark"] .sm-type-pill{ color:#8FD4DC; } .sm-table-note{ text-align:left; font-size:12.5px; color:var(--sm-ink-soft); margin-top:14px; } /* ---- Teal CTA band ---- */ .sm-test-band{ background:var(--sm-teal); border-radius:var(--sm-radius); margin:0 24px; padding:60px 40px 64px; text-align:center; color:#F3F1EC; } @media(max-width:640px){ .sm-test-band{ margin:0 12px; padding:40px 24px; } } .sm-test-band .sm-test-curve{ width:80px; height:22px; margin:0 auto 18px; display:block; } .sm-test-band .sm-eyebrow2{ font-size:16px; font-weight:700; letter-spacing:.06em; font-variant-caps:small-caps; color:#9FD1D8; margin-bottom:10px; } .sm-test-band h2{ font-family:var(--sm-font-head); font-size:clamp(26px, 3.6vw, 40px); line-height:1.15; letter-spacing:-0.01em; margin:4px 0 24px; color:#fff; font-weight:700; } /* ---- Calculator ---- */ .sm-calc-section{ background:var(--sm-surface-alt); border:1px solid var(--sm-border); border-radius:var(--sm-radius); margin:0 24px; padding:52px 44px; } @media(max-width:640px){ .sm-calc-section{ margin:0 12px; padding:32px 20px; } } .sm-calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; } @media(max-width:860px){ .sm-calc-grid{ grid-template-columns:1fr; } } .sm-field{ margin-bottom:16px; } .sm-field label{ display:block; font-size:12.5px; color:var(--sm-ink-soft); margin-bottom:6px; } .sm-field input{ width:100%; padding:11px 14px; border-radius:8px; border:1px solid var(--sm-border); background:var(--sm-surface); color:var(--sm-ink); font-family:var(--sm-font-mono); font-size:15px; } .sm-calc-card{ background:var(--sm-surface); border:1px solid var(--sm-border); border-radius:var(--sm-radius); padding:24px; box-shadow:var(--sm-card-shadow); } .sm-calc-result{ display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; font-size:14px; color:var(--sm-ink-soft); } .sm-calc-result .sm-v{ font-family:var(--sm-font-mono); font-weight:600; color:var(--sm-ink); } .sm-calc-result.sm-big{ border-top:1px solid var(--sm-border); margin-top:8px; padding-top:16px; font-size:15px; color:var(--sm-ink); } .sm-calc-result.sm-big .sm-v{ color:var(--sm-coral); font-size:21px; } /* ---- TPI vs Smile comparison — redone from the old "signpost" graphic as a real DOM component: same idea (two columns, a divider, a VS beat) but token-driven, theme-aware, and actually legible at any zoom instead of a fixed-size image. ---- */ .sm-tpi-compare{ position:relative; background:var(--sm-surface); border:1px solid var(--sm-border); border-radius:var(--sm-radius); box-shadow:var(--sm-card-shadow); padding:8px 0 4px; margin-bottom:44px; } /* VS sits as a real (auto-width) middle column instead of being absolutely positioned over the header — it now scales with the wider card instead of floating at a fixed pixel offset, and the two titles centre in their own half rather than hugging the outer edges. */ .sm-tpi-head{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:26px 36px 20px; } .sm-tpi-side{ display:flex; align-items:center; justify-content:center; gap:10px; font-family:var(--sm-font-head); font-weight:700; font-size:18px; } .sm-tpi-side i{ font-size:15px; } .sm-tpi-them{ color:var(--sm-ink-soft); } .sm-tpi-us{ color:var(--sm-coral); } .sm-tpi-vs{ width:38px; height:38px; border-radius:50%; background:var(--sm-teal); color:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--sm-font-head); font-size:11px; font-weight:700; letter-spacing:.03em; box-shadow:0 6px 16px rgba(27,74,84,.25); } /* Divider only spans the rows, not the header — the VS badge already breaks the line there, so continuing it up through the header just looked cut off. */ .sm-tpi-rows{ position:relative; padding:4px 36px 22px; } .sm-tpi-rows::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--sm-border); } .sm-tpi-row{ display:grid; grid-template-columns:1fr 1fr; gap:0; padding:15px 0; border-top:1px dashed var(--sm-border); } .sm-tpi-row:first-child{ border-top:none; } .sm-tpi-cell{ display:flex; align-items:flex-start; gap:9px; font-size:15px; line-height:1.4; } .sm-tpi-cell i{ flex-shrink:0; margin-top:2px; font-size:13px; } .sm-tpi-cell-them{ color:var(--sm-ink-soft); padding-right:28px; } .sm-tpi-cell-them i{ color:var(--sm-ink-soft); opacity:.55; } .sm-tpi-cell-us{ color:var(--sm-ink); font-weight:600; padding-left:28px; } .sm-tpi-cell-us i{ color:var(--sm-green); } @media(max-width:640px){ .sm-tpi-head{ padding:22px 16px 14px; gap:10px; } .sm-tpi-side{ font-size:14px; gap:6px; } .sm-tpi-side i{ display:none; } .sm-tpi-vs{ width:32px; height:32px; font-size:9.5px; } .sm-tpi-rows{ padding:4px 16px 16px; } .sm-tpi-cell{ font-size:12.5px; gap:6px; } .sm-tpi-cell-them{ padding-right:10px; } .sm-tpi-cell-us{ padding-left:10px; } } /* ---- 404 page — the brand smiley standing in for the middle "0", same ellipse-eyes + curved-mouth shape as the logo/supplier art, just drawn as inline SVG so it's colour-token driven instead of a fixed PNG ---- */ .sm-404{ min-height:60vh; display:flex; align-items:center; padding:96px 0; text-align:center; } @media(max-width:640px){ .sm-404{ padding:64px 0; } } .sm-404-wrap{ max-width:640px; margin:0 auto; } .sm-404-num{ display:flex; align-items:center; justify-content:center; gap:0.06em; font-family:var(--sm-font-head); font-size:clamp(72px, 16vw, 160px); font-weight:700; line-height:1; color:var(--sm-ink); margin-bottom:8px; } .sm-404-face{ width:0.62em; height:0.62em; fill:var(--sm-coral); stroke:var(--sm-coral); } .sm-404 .sm-kicker{ margin-bottom:14px; } .sm-404 h1{ font-family:var(--sm-font-head); font-size:clamp(24px, 3.2vw, 34px); font-weight:700; letter-spacing:-0.01em; line-height:1.25; margin:0 0 14px; color:var(--sm-ink); } .sm-404 p{ font-size:15px; line-height:1.65; color:var(--sm-ink-soft); max-width:460px; margin:0 auto 32px; } .sm-404-actions{ justify-content:center; margin-top:0; margin-bottom:28px; } .sm-404-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; font-size:13.5px; } .sm-404-links a{ color:var(--sm-ink-soft); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; transition:color .15s var(--sm-ease-out), border-color .15s var(--sm-ease-out); } @media (hover:hover) and (pointer:fine){ .sm-404-links a:hover{ color:var(--sm-coral); border-color:var(--sm-coral); } } /* ========================================================================= Simple content pages (FAQ, Privacy, Terms, Complaints, etc.) ========================================================================= */ /* ---- Page header — kicker + h1 + intro paragraph ---- Deliberately fixed-dark regardless of site theme (not var(--sm-bg)/var(--sm-ink)) — a consistent dark band on every page, light mode included. */ .sm-page-head{ background:#1A1E24; padding:56px 0 40px; text-align:center; font-family:var(--sm-font-body); color:#F3F1EC; } .sm-page-head h1{ font-family:var(--sm-font-head); font-size:clamp(30px, 4.4vw, 48px); line-height:1.1; letter-spacing:-0.01em; font-weight:700; margin:0 0 12px; color:#F3F1EC; } .sm-page-head p{ color:#9BA1AA; font-size:15px; max-width:560px; margin:0 auto; line-height:1.65; } /* ---- FAQ accordion ---- */ .sm-faq-wrap{ max-width:840px; margin:0 auto; padding:0 24px 64px; font-family:var(--sm-font-body); background:var(--sm-bg); } .sm-faq-group{ padding:8px 0 28px; } .sm-faq-group h2{ font-family:var(--sm-font-head); font-size:15px; font-variant-caps:small-caps; letter-spacing:.06em; color:var(--sm-ink-soft); margin:0 0 16px; font-weight:700; } .sm-faq-item{ border:1px solid var(--sm-border); border-radius:10px; margin-bottom:10px; background:var(--sm-surface); overflow:hidden; box-shadow:var(--sm-card-shadow); scroll-margin-top:100px; } .sm-faq-q{ width:100%; text-align:left; padding:17px 20px; background:none; border:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:15px; font-weight:600; color:var(--sm-ink); font-family:var(--sm-font-body); } .sm-faq-q .sm-plus{ flex-shrink:0; width:20px; height:20px; position:relative; } .sm-faq-q .sm-plus::before, .sm-faq-q .sm-plus::after{ content:""; position:absolute; background:var(--sm-ink-soft); transition:transform .2s ease; } .sm-faq-q .sm-plus::before{ width:12px; height:2px; top:9px; left:4px; } .sm-faq-q .sm-plus::after{ width:2px; height:12px; top:4px; left:9px; } .sm-faq-item.sm-open .sm-faq-q .sm-plus::after{ transform:rotate(90deg); opacity:0; } .sm-faq-item.sm-open .sm-faq-q{ color:var(--sm-coral); } .sm-faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; } .sm-faq-a-inner{ padding:0 20px 18px; font-size:14.5px; color:var(--sm-ink-soft); line-height:1.65; } .sm-faq-a-inner strong{ color:var(--sm-ink); } .sm-faq-a-inner a{ color:var(--sm-coral); font-weight:600; text-decoration:none; border-bottom:1.5px dashed var(--sm-coral); padding-bottom:1px; transition:color .15s var(--sm-ease-out), border-color .15s var(--sm-ease-out); } @media (hover:hover) and (pointer:fine){ .sm-faq-a-inner a:hover{ color:var(--sm-link-hover); border-bottom-color:var(--sm-link-hover); border-bottom-style:solid; } } /* ---- CTA strip — quiet closer at the bottom of a content page ---- */ .sm-cta-strip{ text-align:center; border-top:1px solid var(--sm-border); padding:44px 24px 8px; font-family:var(--sm-font-body); } .sm-cta-strip h3{ font-family:var(--sm-font-head); font-size:20px; margin:0 0 8px; font-weight:600; color:var(--sm-ink); } .sm-cta-strip p{ color:var(--sm-ink-soft); font-size:14px; margin:0 0 22px; } /* ---- Image panel with a floating stat chip on the corner ---- */ /* Fixed dark background (not theme-reactive) — some of these graphics have white text baked into the image itself, made to sit on a dark backdrop. A light-mode surface would make that text disappear. */ .sm-visual-panel{ position:relative; border-radius:var(--sm-radius); border:1px solid var(--sm-border); background:var(--sm-teal); box-shadow:var(--sm-card-shadow); display:flex; align-items:center; justify-content:center; padding:40px; min-height:320px; } .sm-visual-panel img{ max-width:88%; height:auto; } .sm-float-chip{ position:absolute; right:20px; bottom:-22px; z-index:2; background:var(--sm-surface); border:1px solid var(--sm-border); border-radius:14px; box-shadow:var(--sm-card-shadow); padding:14px 18px; display:flex; align-items:center; gap:12px; } .sm-float-chip .sm-bicon{ width:38px; height:38px; border-radius:9px; background:var(--sm-gold-tint); color:var(--sm-gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .sm-float-chip .sm-bicon svg{ width:19px; height:19px; } .sm-float-chip .sm-bicon i{ font-size:16px; } .sm-float-chip .sm-num-row{ display:flex; align-items:baseline; gap:2px; line-height:1; } .sm-float-chip .sm-num{ font-family:var(--sm-font-head); font-size:24px; font-weight:700; color:var(--sm-ink); } .sm-float-chip .sm-plus{ font-family:var(--sm-font-head); font-size:14px; font-weight:700; color:var(--sm-coral); } .sm-float-chip .sm-blabel{ font-size:12px; font-weight:600; letter-spacing:.04em; font-variant-caps:small-caps; color:var(--sm-ink-soft); margin-top:2px; } @media(max-width:900px){ .sm-float-chip{ right:16px; bottom:-18px; padding:11px 14px; } } /* Left-anchored variant — used on the hero receipt card, whose corner action (the uplift bars) already occupies the visual weight on the right. */ .sm-float-chip-left{ left:20px; right:auto; } @media(max-width:900px){ .sm-float-chip-left{ left:16px; } } /* ---- Supplier logo wall — grid of many logo tiles ---- */ /* flex, not grid — CSS Grid's auto-fill leaves a trailing incomplete row left-aligned with no clean way to centre just that row; flex-wrap + justify-content:center centres any leftover row automatically, whatever the item count. */ .sm-supplier-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; } .sm-supplier-tile{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; flex:1 1 200px; max-width:240px; height:170px; padding:24px; background:#fff; border:1px solid var(--sm-border); border-radius:12px; transition:transform .15s ease, box-shadow .15s ease; box-shadow:var(--sm-card-shadow); } @media (hover:hover) and (pointer:fine){ .sm-supplier-tile:hover{ box-shadow:0 12px 28px rgba(0,0,0,.14); } } @media (hover:hover) and (pointer:fine){ html:not(.sm-tilt-ready) .sm-supplier-tile:hover{ transform:translateY(-4px); } } .sm-supplier-tile img{ max-width:90%; max-height:80px; object-fit:contain; } /* Tile background is always white (logos need it), so the caption needs a fixed dark color too — the theme-reactive ink color would turn white-on-white in dark mode. */ .sm-supplier-tile span{ font-family:var(--sm-font-body); font-size:13px; font-weight:600; color:#3A3A3E; text-align:center; } /* ---- Value row — icon + short label, e.g. "why trust our suppliers" ---- */ .sm-value-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:32px; margin-top:28px; } .sm-value-item{ display:flex; flex-direction:column; align-items:center; gap:10px; max-width:150px; text-align:center; } .sm-value-item .sm-vicon{ width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:22px; } .sm-value-item span{ font-size:13px; font-weight:600; } /* ---- Forms ---- */ .sm-form-card{ background:var(--sm-surface); border:1px solid var(--sm-border); border-radius:var(--sm-radius); padding:32px; box-shadow:var(--sm-card-shadow); font-family:var(--sm-font-body); } .sm-form-card h3{ font-family:var(--sm-font-head); font-size:20px; font-weight:600; margin:0 0 6px; color:var(--sm-ink); } .sm-form-card .sm-form-sub{ color:var(--sm-ink-soft); font-size:13.5px; margin:0 0 22px; } .sm-field-group{ margin-bottom:16px; } .sm-field-group label{ display:block; font-size:12.5px; font-weight:600; color:var(--sm-ink-soft); margin-bottom:6px; } .sm-field-group input, .sm-field-group textarea{ width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--sm-border); background:var(--sm-surface-alt); color:var(--sm-ink); font-family:var(--sm-font-body); font-size:14.5px; transition:border-color .15s ease, box-shadow .15s ease; } .sm-field-group input:focus, .sm-field-group textarea:focus{ outline:none; border-color:var(--sm-coral); box-shadow:0 0 0 3px var(--sm-coral-tint); } .sm-field-group textarea{ resize:vertical; min-height:110px; } .sm-form-card .sm-btn{ width:100%; justify-content:center; border:none; cursor:pointer; } .sm-alert-success{ display:flex; align-items:center; gap:10px; background:rgba(63,168,92,.12); border:1px solid var(--sm-green); color:var(--sm-green-deep); font-size:14px; font-weight:600; padding:12px 16px; border-radius:8px; margin-bottom:20px; transition:opacity .5s ease; } html[data-theme="dark"] .sm-alert-success{ color:#8CE0A6; } /* ---- Legal / long-form document pages (Terms, Privacy, etc.) ---- */ .sm-legal{ max-width:820px; margin:0 auto; padding:0 24px 72px; font-family:var(--sm-font-body); color:var(--sm-ink); background:var(--sm-bg); } .sm-legal h2{ font-family:var(--sm-font-head); font-size:17px; font-weight:600; margin:34px 0 12px; padding-top:22px; border-top:1px solid var(--sm-border); color:var(--sm-ink); } .sm-legal h2:first-of-type{ border-top:none; padding-top:0; margin-top:0; } .sm-legal p{ font-size:14.5px; line-height:1.75; color:var(--sm-ink-soft); margin:0 0 12px; } .sm-legal ul{ margin:0 0 14px; padding-left:20px; } .sm-legal li{ font-size:14.5px; line-height:1.75; color:var(--sm-ink-soft); margin-bottom:6px; } .sm-legal a{ color:var(--sm-coral); font-weight:600; text-decoration:none; border-bottom:1.5px dashed var(--sm-coral); padding-bottom:1px; transition:color .15s var(--sm-ease-out), border-color .15s var(--sm-ease-out); } @media (hover:hover) and (pointer:fine){ .sm-legal a:hover{ color:var(--sm-link-hover); border-bottom-color:var(--sm-link-hover); border-bottom-style:solid; } } .sm-legal strong{ color:var(--sm-ink); } /* ---- Full savings calculator ---- */ .sm-calc-card-full{ background:var(--sm-surface); border:1px solid var(--sm-border); border-radius:var(--sm-radius); box-shadow:var(--sm-card-shadow); overflow:hidden; font-family:var(--sm-font-body); } .sm-calc-card-full .sm-calc-head{ background:var(--sm-coral); color:#fff; padding:26px 32px; text-align:center; } .sm-calc-card-full .sm-calc-head h2{ font-family:var(--sm-font-head); font-size:clamp(22px, 3vw, 30px); font-weight:700; letter-spacing:-0.01em; margin:0 0 4px; } .sm-calc-card-full .sm-calc-head p{ margin:0; opacity:.9; font-size:14px; } .sm-calc-card-full .sm-calc-body{ padding:32px; } .sm-result-box{ background:var(--sm-coral-tint); border-left:4px solid var(--sm-coral); border-radius:8px; padding:14px 16px; margin-bottom:16px; } .sm-result-box .sm-rb-label{ font-weight:600; font-size:13px; color:var(--sm-coral-deep); margin-bottom:4px; } .sm-result-box .sm-rb-label a{ color:var(--sm-coral-deep); text-decoration:underline; } .sm-result-box .sm-rb-value{ font-family:var(--sm-font-mono); font-size:19px; font-weight:700; color:var(--sm-ink); } .sm-result-box.sm-rb-green{ background:rgba(63,168,92,.12); border-left-color:var(--sm-green); } .sm-result-box.sm-rb-green .sm-rb-label{ color:var(--sm-green-deep); } html[data-theme="dark"] .sm-result-box.sm-rb-green .sm-rb-label{ color:#8CE0A6; } .sm-calc-select{ width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--sm-border); background:var(--sm-surface-alt); color:var(--sm-ink); font-family:var(--sm-font-body); font-size:14.5px; } .sm-fee-table tr.sm-fee-active{ background:var(--sm-coral-tint); font-weight:700; } /* ---- Compare results ---- */ .sm-compare-card{ display:grid; grid-template-columns:1.1fr 1fr 1fr 0.8fr; gap:20px; align-items:center; background:var(--sm-surface); border:1px solid var(--sm-border); border-radius:var(--sm-radius); padding:24px; margin-bottom:16px; box-shadow:var(--sm-card-shadow); } @media(max-width:860px){ .sm-compare-card{ grid-template-columns:1fr; text-align:center; } } .sm-compare-card .sm-cc-logo{ display:flex; align-items:center; justify-content:center; height:64px; } .sm-compare-card .sm-cc-logo img{ max-height:56px; max-width:140px; object-fit:contain; } .sm-compare-card .sm-cc-price{ font-size:13px; color:var(--sm-ink-soft); margin-top:8px; text-align:center; } .sm-compare-card .sm-cc-price span{ font-family:var(--sm-font-mono); font-weight:700; color:var(--sm-ink); font-size:15px; } .sm-compare-card .sm-cc-badge{ display:inline-block; background:rgba(63,168,92,.14); color:var(--sm-green-deep); font-weight:700; font-size:12.5px; padding:6px 14px; border-radius:999px; } html[data-theme="dark"] .sm-compare-card .sm-cc-badge{ color:#8CE0A6; } .sm-compare-card .sm-cc-discount{ text-align:center; font-size:13px; color:var(--sm-ink-soft); } .sm-compare-card .sm-cc-discount img{ max-width:80px; margin-top:6px; } .sm-empty-state{ text-align:center; max-width:420px; margin:0 auto; padding:36px 24px; border:1px dashed var(--sm-border); border-radius:var(--sm-radius); background:var(--sm-surface-alt); } .sm-empty-state i{ font-size:22px; color:var(--sm-ink-soft); margin-bottom:10px; display:block; } .sm-empty-state p{ color:var(--sm-ink-soft); font-size:14px; margin:0; } /* ========================================================================= Glass trial — kept last on purpose so it wins the cascade over any card's own `background` rule above (same specificity, later source order). Trial on the receipt card, feature cards and Get Started card; extend by adding the class elsewhere if it's a keeper. ========================================================================= */ .sm-glass{ position:relative; z-index:1; background:linear-gradient(155deg, rgba(255,255,255,.62), rgba(255,255,255,.28)); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); border:1px solid rgba(255,255,255,.55); box-shadow:0 12px 40px rgba(27,74,84,.14), inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="dark"] .sm-glass{ background:linear-gradient(155deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14); box-shadow:0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); } /* backdrop-filter has patchy support (older Firefox) — plain translucent card is a perfectly reasonable fallback rather than nothing */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .sm-glass{ background:var(--sm-surface); } }