/* ═══════════════════════════════════════════════════════════════ Theme switcher — "Change Our Whole Look" Each theme is a sales demo: it swaps the design tokens AND restructures the page (different alignment, different blocks appearing and disappearing), so it reads as a genuinely different site, not a recolour. Mechanics: - carries the active theme (persisted in localStorage by js/site.js). - Theme-only blocks live in the HTML with class .tb and data-tb=""; they are display:none until their theme is active. ═══════════════════════════════════════════════════════════════ */ /* Theme-only blocks: hidden unless their theme is on. Display is set ONLY in these scoped rules — block styles below must never set display, or they'd win by source order and leak into every theme. */ .tb { display: none !important; } [data-theme="corporate"] .tb[data-tb="corporate"], [data-theme="warm"] .tb[data-tb="warm"], [data-theme="retro"] .tb[data-tb="retro"], [data-theme="pirate"] .tb[data-tb="pirate"], [data-theme="confetti"] .tb[data-tb="confetti"] { display: block !important; } [data-theme="corporate"] .tb.tb-cred, [data-theme="modern"] .tb.tb-ticks { display: flex !important; } /* ── Corporate & Professional ───────────────────────────────── */ [data-theme="corporate"] { --pink: #0B3D91; --pitaya: #08306F; --green: #B08D57; --ink: #1F2430; --cream: #F7F7F4; --surface:#FFFFFF; --radius: 4px; --radius-lg: 6px; --display: "Source Serif 4", Georgia, serif; --shadow-sm: 0 1px 2px rgba(0,0,0,.07); --shadow-md: 0 2px 8px rgba(0,0,0,.09); --shadow-lg: 0 8px 24px rgba(0,0,0,.14); } [data-theme="corporate"] .bg__glow, [data-theme="corporate"] .bg__seeds { display: none; } [data-theme="corporate"] h1, [data-theme="corporate"] h2, [data-theme="corporate"] h3 { letter-spacing: 0; } [data-theme="corporate"] .btn { border-radius: 4px; } [data-theme="corporate"] .price__deal, [data-theme="corporate"] .eyebrow { border-radius: 3px; } /* the hero drops its playful centering and lines up left, like a firm's site */ [data-theme="corporate"] .hero { text-align: left; justify-items: start; } [data-theme="corporate"] .hero__brandline { justify-content: flex-start; } [data-theme="corporate"] .hero__sub { margin-inline: 0; } [data-theme="corporate"] .lead { margin-inline: 0; } [data-theme="corporate"] .hero__eyebrow { display: none; } [data-theme="corporate"] .rotator__word { background: none; color: var(--pink); } /* ── Warm & Approachable ────────────────────────────────────── */ [data-theme="warm"] { --pink: #E8792A; --pitaya: #D06315; --green: #7FB069; --ink: #4A3728; --cream: #FFF6EC; --surface:#FFFFFF; --radius: 22px; --radius-lg: 30px; --display: "Quicksand", var(--body); --shadow-sm: 0 2px 6px rgba(232,121,42,.10); --shadow-md: 0 8px 24px rgba(232,121,42,.16); --shadow-lg: 0 18px 44px rgba(232,121,42,.22); } [data-theme="warm"] h1, [data-theme="warm"] h2, [data-theme="warm"] h3 { letter-spacing: 0; } [data-theme="warm"] .bg__seeds { display: none; } [data-theme="warm"] .field, [data-theme="warm"] .btn { border-radius: 999px; } [data-theme="warm"] .field__input { padding-left: 50px; } /* ── Clean Modern Tech ──────────────────────────────────────── */ [data-theme="modern"] { --pink: #2563EB; --pitaya: #1D4FD7; --green: #111111; --ink: #111111; --cream: #FFFFFF; --surface:#F5F5F7; --radius: 10px; --radius-lg: 14px; --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 12px 30px rgba(0,0,0,.10); } [data-theme="modern"] .bg__glow, [data-theme="modern"] .bg__seeds { display: none; } [data-theme="modern"] .field { border-width: 1px; } [data-theme="modern"] .picked__tick { background: #dcfce7; stroke: #16a34a; } [data-theme="modern"] .btn--primary { box-shadow: none; background: var(--pink); } /* ── Dark Mode Sleek ────────────────────────────────────────── */ [data-theme="dark"] { --ink: #F2F0FA; --cream: #0B0B12; --surface:#14141F; --ink-70: rgba(242,240,250,.72); --ink-55: rgba(242,240,250,.55); --ink-12: rgba(242,240,250,.16); --ink-08: rgba(242,240,250,.10); --shadow-sm: 0 0 0 rgba(0,0,0,0); --shadow-md: 0 0 40px rgba(255,46,126,.18); --shadow-lg: 0 0 60px rgba(255,46,126,.28); color-scheme: dark; } [data-theme="dark"] .bg__seeds { opacity: .25; } [data-theme="dark"] .bg__glow--pink { opacity: .3; } [data-theme="dark"] .bg__glow--green { opacity: .18; } [data-theme="dark"] .field__input::placeholder { color: rgba(242,240,250,.4); } [data-theme="dark"] .suggest__item:hover, [data-theme="dark"] .suggest__item.is-active { background: rgba(255,46,126,.14); } [data-theme="dark"] .price { background: linear-gradient(165deg, rgba(255,46,126,.08), var(--surface) 55%); } [data-theme="dark"] .confirm { background: rgba(47,191,113,.12); } /* ── Retro 90s Web ──────────────────────────────────────────── */ [data-theme="retro"] { --pink: #FF00FF; --pitaya: #CC00CC; --green: #00CC00; --ink: #000080; --cream: #C6E2FF; --surface:#FFFFFF; --radius: 0px; --radius-lg: 0px; --display: "Press Start 2P", monospace; --body-override: "Courier New", monospace; --shadow-sm: 3px 3px 0 #000; --shadow-md: 4px 4px 0 #000; --shadow-lg: 6px 6px 0 #000; } [data-theme="retro"] body { font-family: "Courier New", monospace; background-image: repeating-linear-gradient(45deg, #B3D4F5 0 12px, var(--cream) 12px 24px); } [data-theme="retro"] .bg__glow, [data-theme="retro"] .bg__seeds { display: none; } [data-theme="retro"] .field, [data-theme="retro"] .picked, [data-theme="retro"] .price, [data-theme="retro"] .card, [data-theme="retro"] .suggest { border: 3px solid #000; } [data-theme="retro"] .btn { border: 3px solid #000; } [data-theme="retro"] .hero__title { font-size: clamp(1.1rem, 4.6vw, 2rem); line-height: 1.45; } [data-theme="retro"] .hero__brandline { font-size: clamp(1rem, 4vw, 1.7rem); } [data-theme="retro"] .rotator__word { background: none; color: var(--pink); text-shadow: 2px 2px 0 #000; } [data-theme="retro"] .hero__title em { background: none; color: var(--pink); } [data-theme="retro"] h2, [data-theme="retro"] h3 { line-height: 1.4; } [data-theme="retro"] .price__now { background: none; color: var(--pink); -webkit-text-fill-color: currentColor; } /* ── Pirate Adventure ───────────────────────────────────────── */ [data-theme="pirate"] { --pink: #8B0000; --pitaya: #6E0000; --green: #C89B3C; --ink: #2B1B0E; --cream: #EDE0C8; --surface:#F5EBD6; --radius: 2px; --radius-lg: 2px; --display: "Pirata One", serif; --shadow-sm: 2px 2px 0 rgba(43,27,14,.3); --shadow-md: 3px 3px 0 rgba(43,27,14,.35); --shadow-lg: 5px 5px 0 rgba(43,27,14,.4); } [data-theme="pirate"] body { font-family: Georgia, "Times New Roman", serif; } [data-theme="pirate"] .bg__glow { display: none; } [data-theme="pirate"] .hero__title { letter-spacing: .02em; font-weight: 400; } [data-theme="pirate"] .field, [data-theme="pirate"] .picked, [data-theme="pirate"] .card { border: 2px solid var(--green); } [data-theme="pirate"] .rotator__word, [data-theme="pirate"] .hero__title em { background: none; color: var(--pink); } /* ── Confetti Carnival ──────────────────────────────────────── */ [data-theme="confetti"] { --pink: #FF3EA5; --pitaya: #E01B8B; --green: #7CFF6B; --ink: #1D0F2A; --cream: #FFF6FB; --surface:#FFFFFF; --radius: 26px; --radius-lg: 34px; --display: "Fredoka", var(--body); --shadow-sm: 0 4px 0 rgba(29,15,42,.14); --shadow-md: 0 8px 0 rgba(29,15,42,.16); --shadow-lg: 0 12px 0 rgba(29,15,42,.18); } [data-theme="confetti"] h1, [data-theme="confetti"] h2, [data-theme="confetti"] h3 { letter-spacing: 0; } [data-theme="confetti"] body { background-image: radial-gradient(circle at 15% 20%, rgba(255,62,165,.14), transparent 40%), radial-gradient(circle at 85% 30%, rgba(0,229,255,.14), transparent 40%), radial-gradient(circle at 50% 90%, rgba(124,255,107,.16), transparent 40%); } [data-theme="confetti"] .btn--primary { box-shadow: 0 6px 0 rgba(29,15,42,.3); } [data-theme="confetti"] .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(29,15,42,.3); } /* ═══════════ Theme-specific blocks ═══════════ */ /* corporate: a sober credentials strip appears under the hero */ .tb-cred { flex-wrap: wrap; gap: 10px 34px; padding: 16px 0; border-top: 1px solid var(--ink-12); border-bottom: 1px solid var(--ink-12); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-55); } /* warm: a friendly aside */ .tb-note { padding: 16px 20px; border-radius: 18px; background: rgba(244,201,93,.25); font-size: .95rem; color: var(--ink); } /* modern: a terse feature tick row */ .tb-ticks { flex-wrap: wrap; gap: 8px 22px; font-size: .88rem; color: var(--ink-55); } .tb-ticks span::before { content: "✓ "; color: var(--pink); font-weight: 700; } /* retro: marquee banner + hit counter */ .tb-marquee { overflow: hidden; white-space: nowrap; border: 3px solid #000; background: #FFFF00; color: #000080; font-family: "Press Start 2P", monospace; font-size: .68rem; padding: 9px 0; } .tb-marquee span { display: inline-block; padding-left: 100%; animation: tb-scroll 14s linear infinite; } @keyframes tb-scroll { to { transform: translateX(-100%); } } .tb-counter { font-family: "Press Start 2P", monospace; font-size: .68rem; background: #000; color: #0f0; padding: 10px 14px; width: fit-content; letter-spacing: 2px; } /* pirate: a parchment proclamation ribbon */ .tb-ribbon { text-align: center; font-family: "Pirata One", serif; font-size: 1.25rem; color: var(--pink); padding: 10px 16px; border-block: 2px solid var(--green); background: rgba(200,155,60,.12); } /* confetti: falling pieces (populated by js/site.js) */ .tb-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; } .tb-confetti i { position: absolute; top: -10%; width: 10px; height: 16px; opacity: .85; animation: tb-fall linear infinite; } @keyframes tb-fall { to { transform: translateY(115vh) rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .tb-marquee span, .tb-confetti i { animation: none; } } /* ═══════════ The widget itself ═══════════ */ .themer { position: fixed; bottom: 22px; right: 22px; z-index: 60; font-family: var(--body); transition: opacity .2s ease; } /* step aside while the search suggestions are open — never cover a result */ .suggest-open .themer { opacity: 0; pointer-events: none; } .themer__btn { display: flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 15px 22px; background: var(--ink); color: #fff; font-weight: 700; font-size: .92rem; cursor: pointer; box-shadow: 0 12px 30px rgba(29,15,42,.35); transition: transform .18s var(--ease); } [data-theme="dark"] .themer__btn { background: var(--pink); } .themer__btn:hover { transform: scale(1.04); } .themer__btn .sw { display: flex; } .themer__btn .sw i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; margin-left: -5px; display: block; } .themer__panel { position: absolute; bottom: 66px; right: 0; width: min(320px, calc(100vw - 32px)); background: var(--surface); border: 1.5px solid var(--ink-12); border-radius: var(--radius-lg); padding: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.3); } .themer__panel[hidden] { display: none; } .themer__panel h5 { margin: 0 0 2px; font-family: var(--body); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-55); } .themer__name { font-family: var(--display); font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; } .themer__range { width: 100%; accent-color: var(--pink); margin-bottom: 6px; } .themer__labels { display: flex; justify-content: space-between; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-55); } .themer__hint { margin-top: 12px; font-size: .78rem; color: var(--ink-55); line-height: 1.5; } @media (max-width: 600px) { .themer { bottom: 14px; right: 14px; } .themer__btn { padding: 12px 17px; font-size: .85rem; } .themer__btn .label-full { display: none; } } @media (min-width: 601px) { .themer__btn .label-short { display: none; } }