/* ═══════════════════════════════════════════════════════════════ DoubleDown AI — LEGACY PAGE THEME LAYER (test site). Shared by every ported legacy page: the Get Started wizard, instant-demo, demos, the blog and the 41 city pages. Their markup, ids, classes and scripts are untouched. Only the look changes, and only from here. Loaded LAST in so it wins over the page's own 14 style blocks; every rule is prefixed with `body.th-lg` so it also beats the 5 style blocks that sit in . NO GOLD. Three tones: void, mint, paper. ═══════════════════════════════════════════════════════════════ */ body.th-lg{ /* re-point the legacy tokens — this alone retints most of the page */ --dd-au:#4FD8A6; --dd-au2:#10B981; --u-au:#4FD8A6; --u-au2:#66E9B9; --dd-g:#4FD8A6; --dd-g2:#10B981; --u-g:#4FD8A6; --u-g2:#66E9B9; --dd-bg-0:#000; --dd-bg-1:#050807; --dd-bg-2:#0A0E0C; --dd-ink:#fff; --u-ink:#fff; background:var(--void); color:#fff; font-family:'Switzer',ui-sans-serif,system-ui,-apple-system,sans-serif; /* clip, not hidden — `hidden` would make body a scroll container and kill the sticky outro scene at the foot of the page */ overflow-x:clip !important; } /* the page forces Syne with !important on h1..h4 AND on inline style attributes, so the override has to carry !important too — specificity alone loses to it */ body.th-lg h1,body.th-lg h2,body.th-lg h3,body.th-lg h4,body.th-lg h5, body.th-lg .sec-h,body.th-lg .hero-h1,body.th-lg .gradient-text,body.th-lg .acc{ font-family:'Satoshi',ui-sans-serif,system-ui,sans-serif !important; font-weight:900 !important;letter-spacing:-.045em !important;line-height:1.04 !important; } /* .gradient-text and .acc are the page's gold shimmer (#d4af37 mid-stop). Re-point both to the mint ramp — the animation keyframes stay, only the ink changes. */ body.th-lg .gradient-text, body.th-lg .acc, body.th-lg .dd-success-title .acc{ background:linear-gradient(120deg,#34F5AD 0%,#4FD8A6 50%,#10B981 100%) !important; background-size:200% auto !important; -webkit-background-clip:text !important;background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; } /* ══════════ 1 · GOLD ERADICATION ══════════ 163 inline gold values live in the markup, so these need !important and attribute matching — CSS cannot outrank a style attribute otherwise. */ body.th-lg .text-dd-gold,body.th-lg .dd-gold{color:var(--mint) !important} body.th-lg .border-dd-gold{border-color:rgba(79,216,166,.42) !important} /* attribute match, not exact class — Tailwind opacity variants like `from-dd-gold/10` never match a plain `.from-dd-gold` selector */ body.th-lg [class*="from-dd-gold"]{--tw-gradient-from:rgba(79,216,166,.12) !important} body.th-lg [class*="to-dd-gold"]{--tw-gradient-to:rgba(16,185,129,.12) !important} body.th-lg [class*="via-dd-gold"]{--tw-gradient-via:rgba(79,216,166,.12) !important} body.th-lg [style*="212,175,55"], body.th-lg [style*="212, 175, 55"], body.th-lg [style*="#d4af37"], body.th-lg [style*="#D4AF37"], body.th-lg [style*="#b8860b"]{ --gold-killed:1; border-color:rgba(79,216,166,.34) !important; } body.th-lg [style*="color:#d4af37"], body.th-lg [style*="color:#D4AF37"], body.th-lg [style*="color: #d4af37"]{color:var(--mint) !important} body.th-lg [style*="background:rgba(212,175,55"], body.th-lg [style*="background: rgba(212,175,55"], body.th-lg [style*="background:rgba(212, 175, 55"]{background:rgba(52,245,173,.08) !important} /* anything the retint could not reach: JS-injected particles, Tailwind arbitrary-opacity gold utilities, and badges painted from a runtime palette */ body.th-lg .dd-particle{background:var(--mint) !important} body.th-lg [class*="bg-dd-gold"]{background:rgba(79,216,166,.16) !important} body.th-lg [class*="text-dd-gold"]{color:var(--mint) !important} body.th-lg [class*="border-dd-gold"]{border-color:rgba(79,216,166,.4) !important} body.th-lg .ddFC-badge{background:rgba(52,245,173,.08) !important;color:var(--mint) !important;border-color:rgba(52,245,173,.24) !important} body.th-lg .apbc-dot{background:var(--mint) !important} /* painted at runtime by the shared widget + instant-demo scripts, which are live-shared and must not be retinted at source. CSS !important outranks the inline styles those scripts write. */ body.th-lg .ddp-av,body.th-lg .ddha{border-color:rgba(52,245,173,.34) !important} body.th-lg .wiz-sw,body.th-lg .preview-online-dot{background:var(--mint) !important} body.th-lg .preview-online-text{color:var(--mint) !important} body.th-lg .pv-bot-bubble{background:rgba(52,245,173,.18) !important} /* legacy green → the new mint family */ body.th-lg .text-dd-green{color:var(--mint) !important} body.th-lg .bg-dd-green{background:var(--mint) !important;color:#00170E !important} body.th-lg .border-dd-green{border-color:rgba(79,216,166,.4) !important} body.th-lg .bg-dd-dark{background:var(--void) !important} body.th-lg .bg-dd-gray{background:var(--ink-2) !important} /* ══════════ 2 · SURFACES — double bezel, never a flat box ══════════ */ body.th-lg .product-card, body.th-lg .step-card, body.th-lg .plan-card, body.th-lg .pricing-card, body.th-lg .price-card, body.th-lg .pr-card, body.th-lg .q-option, body.th-lg .q-multi-option, body.th-lg .ap-card-opt{ background:linear-gradient(165deg,#0B100E,#050706 62%) !important; border:1px solid var(--line) !important; border-radius:20px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.07) !important; transition:border-color .5s var(--e-soft),transform .5s var(--e-soft),background .5s var(--e-soft) !important; } body.th-lg .product-card:hover, body.th-lg .step-card:hover, body.th-lg .plan-card:hover, body.th-lg .q-option:hover, body.th-lg .q-multi-option:hover, body.th-lg .ap-card-opt:hover{ border-color:rgba(52,245,173,.36) !important; transform:translateY(-3px); } body.th-lg .product-card.selected, body.th-lg .plan-card.selected, body.th-lg .q-option.selected, body.th-lg .q-multi-option.selected, body.th-lg .ap-card-opt.selected, body.th-lg .product-card.active, body.th-lg .plan-card.active{ border-color:var(--mint) !important; background:linear-gradient(165deg,rgba(52,245,173,.14),rgba(16,185,129,.03) 62%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 50px -34px rgba(52,245,173,.8) !important; } /* ══════════ 3 · WIZARD CHROME ══════════ */ body.th-lg .progress-bar{ height:2px !important;border-radius:99px !important; background:rgba(255,255,255,.07) !important;overflow:hidden; } body.th-lg .progress-fill{ background:linear-gradient(90deg,var(--emerald),var(--mint),var(--glow)) !important; border-radius:99px !important;transition:width .7s var(--e-soft) !important; } body.th-lg .step-dot{ border-radius:999px !important; background:rgba(255,255,255,.08) !important; border:1px solid var(--line) !important; color:rgba(255,255,255,.5) !important; font-family:'Switzer';font-weight:600; transition:all .5s var(--e-soft) !important; } body.th-lg .step-dot.active{ background:var(--mint) !important;border-color:transparent !important;color:#00170E !important; box-shadow:0 0 0 4px rgba(52,245,173,.14) !important; } body.th-lg .step-dot.done{ background:rgba(52,245,173,.18) !important;color:var(--mint) !important;border-color:rgba(52,245,173,.3) !important; } /* inputs */ body.th-lg .form-input,body.th-lg .form-select, body.th-lg input[type=text],body.th-lg input[type=email],body.th-lg input[type=tel], body.th-lg input[type=url],body.th-lg input[type=number],body.th-lg textarea,body.th-lg select{ background:rgba(255,255,255,.035) !important; border:1px solid var(--line-2) !important; border-radius:14px !important; color:#fff !important; font-family:'Switzer' !important; transition:border-color .4s var(--e-soft),background .4s var(--e-soft) !important; } body.th-lg .form-input:focus,body.th-lg .form-select:focus, body.th-lg input:focus,body.th-lg textarea:focus,body.th-lg select:focus{ border-color:var(--mint) !important; background:rgba(255,255,255,.06) !important; outline:none !important;box-shadow:0 0 0 4px rgba(52,245,173,.1) !important; } body.th-lg ::placeholder{color:rgba(255,255,255,.3) !important} body.th-lg select option{background:#0A0E0C;color:#fff} body.th-lg label{font-family:'Switzer';letter-spacing:-.01em} /* buttons — the wizard's own .btn / .nav-btn / .tab-btn / .accept-btn */ body.th-lg .btn,body.th-lg .nav-btn,body.th-lg .accept-btn{ border-radius:999px !important; font-family:'Switzer' !important;font-weight:600 !important;letter-spacing:-.012em !important; transition:transform .5s var(--e-soft),background .45s var(--e-soft),border-color .45s var(--e-soft) !important; } body.th-lg .btn:active,body.th-lg .nav-btn:active{transform:scale(.978)} body.th-lg .btn-primary,body.th-lg .nav-btn.primary,body.th-lg .accept-btn, body.th-lg button[class*="bg-dd-green"], body.th-lg .btn[style*="linear-gradient"]{ background:var(--mint) !important;color:#00170E !important; border:0 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 34px -20px #000 !important; } body.th-lg .btn-primary:hover,body.th-lg .accept-btn:hover{background:var(--mint-hi) !important} body.th-lg .btn-secondary,body.th-lg .nav-btn.secondary{ background:transparent !important;border:1px solid var(--line-2) !important;color:rgba(255,255,255,.9) !important; } body.th-lg .btn-secondary:hover{border-color:rgba(52,245,173,.5) !important;color:#fff !important} body.th-lg .tab-btn{border-radius:999px !important;font-family:'Switzer' !important} body.th-lg .tab-btn.active{background:var(--mint) !important;color:#00170E !important} /* rounded corners everywhere the legacy used hard boxes */ body.th-lg .rounded-lg{border-radius:16px !important} body.th-lg .rounded-xl{border-radius:20px !important} body.th-lg .rounded-2xl{border-radius:24px !important} /* the wizard's own loader, restyled to the site loader */ body.th-lg #loader{background:var(--void) !important} body.th-lg .dd-l-bar,body.th-lg .dd-l-fill{background:var(--mint) !important} body.th-lg .dd-l-mark{filter:hue-rotate(0deg)} /* the live chatbot preview keeps its own identity — do not fight it */ body.th-lg #previewWidget,body.th-lg #previewOuter,body.th-lg .ap-browser-chrome{filter:none} /* ═══════════════════════════════════════════════════════════════ 3b · GET STARTED — the wizard, properly dressed Duval: "you can do a lot better job with the get started page." Zero logic changes: every id, class and all 30 CSP scripts are untouched. What changes is the room the wizard sits in — the hero, the rail, the surfaces, the type and the buttons, all on the site's own vocabulary. `!important` is used only where the markup carries an inline style, which is most of this page; specificity alone cannot win against style="". ═══════════════════════════════════════════════════════════════ */ /* ── the hero band ── */ body.th-lg .gs-hero{position:relative;overflow:hidden;text-align:center; margin:0 auto clamp(2.4rem,5vw,4rem);padding:clamp(2rem,5vh,4rem) 0 0;max-width:900px} body.th-lg .gs-hero__fx{position:absolute;inset:-40% -20% 0;pointer-events:none;opacity:.75} body.th-lg .gs-hero__in{position:relative;z-index:2} body.th-lg .gs-hero .crumb{justify-content:center;margin-bottom:1.6rem} body.th-lg .gs-hero .eyebrow{margin-bottom:1.1rem} body.th-lg .gs-hero__h{ font-family:'Satoshi',ui-sans-serif,sans-serif !important;font-weight:900 !important; font-size:clamp(2.3rem,5.6vw,4.6rem) !important;line-height:.94 !important; letter-spacing:-.05em !important;color:#fff;margin:0} body.th-lg .gs-hero__p{margin:1.4rem auto 0;max-width:56ch; font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.6;color:rgba(255,255,255,.5)} body.th-lg .gs-hero__pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.8rem} /* ── the progress rail: numerals on a mint line, not dots in a broken flex row ── */ body.th-lg nav[aria-label="Signup progress"]{ max-width:820px;margin:0 auto clamp(2rem,4vw,3rem); padding:clamp(1rem,1.8vw,1.4rem) clamp(1.1rem,2vw,1.6rem); border:1px solid var(--line);border-radius:20px; background:linear-gradient(168deg,rgba(255,255,255,.045),rgba(255,255,255,.01))} body.th-lg #stepIndicators{ display:flex !important;align-items:center;justify-content:space-between;gap:4px; padding-bottom:0 !important;margin-bottom:14px !important} body.th-lg .step-dot{ width:26px !important;height:26px !important;flex:none; display:grid !important;place-items:center; font-size:.68rem !important;font-weight:700 !important;letter-spacing:-.02em} body.th-lg .progress-bar{height:2px !important} body.th-lg #stepLabel{ margin-top:12px !important;font-size:.7rem !important;font-weight:700 !important; letter-spacing:.18em !important;text-transform:uppercase;color:rgba(255,255,255,.42) !important} /* ── step cards become the site's double bezel ── */ body.th-lg .step-card{ position:relative; padding:clamp(1.5rem,3vw,2.6rem) !important; border:1px solid var(--line) !important;border-radius:calc(var(--rad) + 4px) !important; background:linear-gradient(168deg,#0A0F0D,#040706 64%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 40px 90px -60px #000 !important} /* a mint hairline across the top edge — the AE "active panel" cue */ body.th-lg .step-card::before{ content:"";position:absolute;left:clamp(1.5rem,3vw,2.6rem);right:clamp(1.5rem,3vw,2.6rem);top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(52,245,173,.55),transparent)} body.th-lg .step-card h2,body.th-lg .step-card h3{letter-spacing:-.045em !important} /* ── the welcome step's four inline process cards ── They carry no class, only style="", so they are matched on that. */ body.th-lg #step0 div[style*="border-radius:14px"]{ background:rgba(255,255,255,.028) !important; border:1px solid var(--line) !important;border-radius:18px !important; padding:1.1rem 1.25rem !important; transition:border-color .5s var(--e-soft),background .5s var(--e-soft)} body.th-lg #step0 div[style*="border-radius:14px"]:hover{ border-color:rgba(52,245,173,.34) !important;background:rgba(52,245,173,.045) !important} body.th-lg #step0 div[style*="border-radius:50%"]{ background:transparent !important;border:0 !important; font-family:'Cabinet',sans-serif !important;font-weight:900 !important; font-size:1.5rem !important;color:var(--mint) !important; width:34px !important;height:34px !important} /* ── product + plan cards on the site's tier language ── */ body.th-lg .product-card{padding:1.15rem 1.3rem !important;border-radius:18px !important} body.th-lg .product-card::after,body.th-lg .plan-card::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:0; background:linear-gradient(90deg,var(--glow),var(--mint-lo));transition:width .7s var(--e-soft)} body.th-lg .product-card,body.th-lg .plan-card{position:relative;overflow:hidden} body.th-lg .product-card:hover::after,body.th-lg .plan-card:hover::after, body.th-lg .product-card.selected::after,body.th-lg .plan-card.selected::after{width:100%} body.th-lg .plan-card{padding:clamp(1.3rem,2.1vw,1.9rem) !important;border-radius:22px !important} body.th-lg .plan-card .price,body.th-lg .plan-card [class*="text-3xl"],body.th-lg .plan-card [class*="text-4xl"]{ font-family:'Satoshi',sans-serif !important;font-weight:900 !important;letter-spacing:-.055em !important} /* ── inputs ── */ body.th-lg .form-input,body.th-lg .ft-input{ border-width:1px !important;border-radius:14px !important; padding:.85rem 1rem !important;font-size:.98rem !important} body.th-lg .ft-label,body.th-lg label.block{ font-size:.7rem !important;font-weight:700 !important;letter-spacing:.14em !important; text-transform:uppercase;color:rgba(255,255,255,.4) !important} /* ── buttons: the site's pill, and the shimmer replaced by a real hover ── */ body.th-lg .shimmer-btn{ background:var(--mint) !important;background-size:auto !important;animation:none !important; color:#00170E !important;border-radius:999px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 36px -22px #000 !important; transition:background .45s var(--e-soft),transform .5s var(--e-soft) !important} body.th-lg .shimmer-btn:hover{background:var(--mint-hi) !important;transform:translateY(-1px)} body.th-lg .btn,body.th-lg .nav-btn,body.th-lg .accept-btn,body.th-lg .shimmer-btn{ letter-spacing:-.012em !important} /* ── OTP block ── */ body.th-lg #otpBlock{ padding:1.2rem 1.3rem !important;border-radius:20px !important; border:1px solid rgba(52,245,173,.22) !important; background:linear-gradient(160deg,rgba(52,245,173,.07),rgba(4,7,6,.5) 70%) !important} body.th-lg #otpCodeInput{ font-family:'Cabinet',sans-serif !important;font-weight:900 !important; font-size:1.6rem !important;letter-spacing:.42em !important;text-align:center} /* ── the live preview gets real browser chrome ── */ body.th-lg #previewOuter,body.th-lg .ap-browser-chrome{ border-radius:20px !important;border:1px solid var(--line) !important; box-shadow:0 50px 100px -60px #000 !important} /* ── completion overlay ── */ body.th-lg #completionOverlay{backdrop-filter:blur(22px) !important;background:rgba(2,5,4,.86) !important} body.th-lg #overlayContent{ border:1px solid rgba(52,245,173,.26) !important;border-radius:26px !important; background:linear-gradient(168deg,rgba(52,245,173,.09),rgba(4,7,6,.96) 62%) !important} /* ── the "being built" banner: its inline gradient is beaten here ── */ body.th-lg #wizardHeader{ background:linear-gradient(168deg,rgba(52,245,173,.1),rgba(4,7,6,.7) 70%) !important; border:1px solid rgba(52,245,173,.26) !important;border-radius:26px !important; padding:clamp(2rem,4vw,3rem) clamp(1.4rem,3vw,2.2rem) !important} body.th-lg #wizardHeader h2{ font-family:'Satoshi',sans-serif !important;font-weight:900 !important; font-size:clamp(1.7rem,3.2vw,2.6rem) !important;letter-spacing:-.05em !important; color:#fff !important} /* ── free-trial block ── */ body.th-lg #freeTrialEntry,body.th-lg #stepFT,body.th-lg #stepFTDone{border-radius:22px !important} body.th-lg #ftLogo,body.th-lg #ftLogoName{border-radius:16px !important} /* ── template gallery ── */ body.th-lg #ws-template-gallery-block{ border:1px solid var(--line) !important;border-radius:22px !important; background:linear-gradient(168deg,rgba(255,255,255,.03),rgba(255,255,255,.008)) !important} body.th-lg #ws-gallery-tab-industry,body.th-lg #ws-gallery-tab-custom{border-radius:999px !important} /* ══════════ 4 · PAGE FURNITURE ══════════ */ body.th-lg main{padding-top:clamp(96px,13vh,140px) !important} body.th-lg .max-w-4xl{max-width:1080px !important} body.th-lg hr,body.th-lg .border-t,body.th-lg .border-b{border-color:var(--line) !important} body.th-lg .text-gray-400,body.th-lg .text-gray-300{color:rgba(255,255,255,.5) !important} body.th-lg .text-gray-500{color:rgba(255,255,255,.38) !important} /* the legacy nav/footer markup is replaced by the site shell — make sure any leftover legacy chrome cannot paint over it */ body.th-lg #gs-mob-nav,body.th-lg #mobile-menu{display:none !important} /* the step-dot labels overflow their 56px flex row, so the "Step N of 10" line collides with them (the live page has this too) — give the row real room */ /* the wrapper is a flex row, so the dots, the progress bar and the "Step N of 10" line sit SIDE BY SIDE and collide (the live page does this too). Stack them. */ body.th-lg nav[aria-label="Signup progress"]{display:block !important} body.th-lg #stepIndicators{padding-bottom:34px !important;margin-bottom:10px !important} body.th-lg #progressBar{width:100% !important} body.th-lg #stepLabel{display:block !important;width:100% !important;text-align:center !important;margin-top:18px !important} /* the TEST MODE badge sits above everything the wizard can raise, and hard-left so it never covers the step labels or the chat widget */ body.th-lg .testbar{z-index:9999;left:16px;translate:none;bottom:18px} @media(max-width:640px){body.th-lg .testbar{font-size:.6rem;height:28px;padding:0 .7rem}} /* ══════════════════════════════════════════════════════════════════════════════ MOBILE — the two ported legacy pages (instant-demo, demos), 2026-07-29 These carry the LIVE site's stylesheet underneath, so everything here is scoped to body.th-lg and written to beat it. Only chrome is touched: the widget preview's own type stays small on purpose — it is a scale model of the real widget, and enlarging it would misrepresent what the customer is buying. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width:640px){ /* 12px floor on real UI labels */ body.th-lg .dtag,body.th-lg .wiz-stepnum,body.th-lg .ap-section-label, body.th-lg .wiz-hint,body.th-lg .ap-card-label,body.th-lg .pcap-h, body.th-lg .ptype,body.th-lg .chip-label{font-size:.76rem!important;letter-spacing:.06em} body.th-lg h3{font-size:.95rem} /* tap targets */ body.th-lg .hbar a.brand{display:inline-flex;align-items:center;min-height:44px} body.th-lg #previewGreetX{width:32px!important;height:32px!important;display:grid!important;place-items:center} body.th-lg .ap-card,body.th-lg .wiz-opt,body.th-lg .demo-tab{min-height:44px} /* iOS zooms the page on focus for anything under 16px and never zooms back */ body.th-lg input,body.th-lg select,body.th-lg textarea{font-size:16px!important} /* The appearance picker is five auto-width columns in an UNCLASSED div, so there is no class to target — :has() is the only handle on it. Five 62px cells plus gaps came to 320px inside a 278px panel. Three columns fit with room to spare. Browsers without :has() keep the old behaviour; the panel clips rather than scrolls the page, so nothing breaks for them. */ body.th-lg .wiz-field div:has(> .ap-card-opt), body.th-lg .ap-grid,body.th-lg .ap-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important} body.th-lg .ap-card-opt{min-width:0!important} /* horizontal card rails keep momentum scrolling and stop mid-card */ body.th-lg .demo-rail,body.th-lg .bot-rail{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch} body.th-lg .demo-rail>*,body.th-lg .bot-rail>*{scroll-snap-align:center} /* A grid item defaults to min-width:auto, so its min-CONTENT width becomes the track floor. Something inside the instant-demo preview measures 354px, which forced a 354px track into a 320px box and scrolled a 360px Android sideways by 18px. min-width:0 lets the track obey the container; max-width:100% stops the culprit from simply overflowing instead of being squeezed. */ body.th-lg .demo-grid{grid-template-columns:1fr!important} body.th-lg .demo-grid>*{min-width:0!important;max-width:100%!important} body.th-lg .demo-preview>*,body.th-lg .demo-controls>*{max-width:100%} body.th-lg .demo-preview iframe,body.th-lg .demo-preview img{width:100%!important} }