/* * SpotCopy — modern SaaS design system * * Inter sans-serif everywhere. Restrained palette: near-white background, * ink text, single blue accent for links, ink for primary CTAs. Rounded * corners 8/12px. No animation costumes, no drop caps, no liquid shimmer. * * Tokens come first; component classes use them so the visual language * stays consistent across home, marketing, app, and admin without each * template re-rolling Tailwind utility chains. */ /* ------------------------------------------------------------------------- Tokens ------------------------------------------------------------------------- */ /* ────────────────────────────────────────────────────────────────────── THEME TOKENS Dark is the DEFAULT theme — its values live in :root, so even if the theme-init JS never runs, the page renders dark (the intended default). Light is an explicit opt-in via html[data-theme="light"], set by the toggle and persisted in localStorage. The theme attribute is written in an inline script before first paint, so there's no flash. Everything downstream (buttons, cards, bands, the Tailwind utility overrides) reads these tokens — so flipping a theme is just swapping values here, not touching templates. ────────────────────────────────────────────────────────────────────── */ :root { /* Surfaces — near-black page, slightly-raised cards. */ --bg: #0d0f13; --bg-subtle: #14171d; --bg-muted: #1b1f27; --surface: #16191f; --surface-hover: #1c2128; --header-bg: rgba(13, 15, 19, 0.82); /* translucent sticky header/nav */ /* Section bands (dark): subtle elevated panels rather than tints. */ --band-blue: #101a28; --band-warm: #161a22; /* was #1f1a12 (warm brown) — cooled to neutral so the landing illustration band reads as a clean elevated surface, not "muddy brown". */ --band-cool: #14171d; --band-dark: #1a1e26; /* the "feature/CTA" band — raised panel */ --band-dark-soft: #20252e; --band-dark-fg: #f1f5f9; /* text inside a --dark band (white in both themes) */ /* Borders */ --border: #262b34; --border-strong: #353c47; --border-focus: #4b5563; /* Text — near-white down to muted greys. */ --text: #e8ebf0; --text-muted: #aab2c0; --text-subtle: #8b94a3; --text-faint: #69707d; /* Strong/primary element colour. In dark this is light (inverted pill): primary buttons become a near-white surface with dark text. */ --ink: #eef1f6; --ink-hover: #ffffff; --btn-fg: #0d0f13; /* text on the primary button */ /* Accents tuned brighter for contrast on dark. */ --accent: #60a5fa; /* links */ --accent-hover: #93c5fd; --accent-soft: #16243a; --emerald: #34d399; /* unlocked / success / checks */ --emerald-hover: #6ee7b7; --emerald-soft: #0e2a22; --amber: #fbbf24; /* review stars only — bright yellow, not brown */ --amber-soft: #1c1a14; /* dark tint for amber icon chip — cooled toward black */ --violet: #a78bfa; /* secondary accent */ --violet-soft: #221a36; --success: #34d399; --warning: #fbbf24; --danger: #f87171; --danger-soft: #2a1518; /* Gold — premium accent layer added in Phase X. Distinct from amber/yellow (used for stars, warnings) — this is metallic gold for frames, dividers, and "premium" trim. Pairs with the glossy black SC monogram logo. */ --gold: #d4af37; /* classic gold for borders + small text accents */ --gold-bright: #e6c454; /* sheen / hover state */ --gold-deep: #a8861b; /* deepened gold for inner shadow / pressed */ --gold-soft: #1a1608; /* very dark gold-tinted near-black for bg washes */ /* Category pairs — saturated icon colour + a dark soft tint behind it. */ --cat-local: #60a5fa; --cat-local-soft: #16243a; --cat-review: #fbbf24; --cat-review-soft: #2a2113; --cat-seo: #a78bfa; --cat-seo-soft: #221a36; --cat-social: #f472b6; --cat-social-soft: #2e1622; --cat-email: #22d3ee; --cat-email-soft: #0c2630; --cat-faq: #818cf8; --cat-faq-soft: #1a1d36; --cat-ad: #f87171; --cat-ad-soft: #2a1518; /* Radii (theme-independent) */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; /* Shadows — heavier/darker so they read on a dark page. */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.55); /* Type (theme-independent) */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', 'Consolas', monospace; } html[data-theme="light"] { --bg: #fbfaf7; --bg-subtle: #f5f4ef; --bg-muted: #efeee9; --surface: #ffffff; --surface-hover: #fafaf7; --header-bg: rgba(255, 255, 255, 0.85); --band-blue: #eef4fe; --band-warm: #faf3e8; --band-cool: #eef2f7; --band-dark: #0f172a; --band-dark-soft: #1e293b; --band-dark-fg: #ffffff; --border: #e5e7eb; --border-strong: #d1d5db; --border-focus: #94a3b8; --text: #0f172a; --text-muted: #475569; --text-subtle: #64748b; --text-faint: #94a3b8; --ink: #0f172a; --ink-hover: #1e293b; --btn-fg: #ffffff; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: #eff6ff; --emerald: #059669; --emerald-hover: #047857; --emerald-soft: #ecfdf5; --amber: #d97706; --amber-soft: #fffbeb; --violet: #7c3aed; --violet-soft: #f5f3ff; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --danger-soft: #fef2f2; /* Gold (light mode) — paired tones for cream/white surfaces. The frame border colour stays the same metallic gold; the soft wash gets a cream tint so a 'gold-framed' card reads as warm-luxury, not brown. */ --gold: #c4a236; --gold-bright: #d4af37; --gold-deep: #8a7220; --gold-soft: #fbf6e3; --cat-local: #2563eb; --cat-local-soft: #eff6ff; --cat-review: #d97706; --cat-review-soft: #fffbeb; --cat-seo: #7c3aed; --cat-seo-soft: #f5f3ff; --cat-social: #db2777; --cat-social-soft: #fdf2f8; --cat-email: #0891b2; --cat-email-soft: #ecfeff; --cat-faq: #4f46e5; --cat-faq-soft: #eef2ff; --cat-ad: #dc2626; --cat-ad-soft: #fef2f2; --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04); } /* Smooth the flip (but not on first paint — only once the user toggles). */ html.theme-ready body, html.theme-ready .glass-card, html.theme-ready .btn-primary, html.theme-ready .btn-secondary, html.theme-ready input, html.theme-ready textarea, html.theme-ready select { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* ------------------------------------------------------------------------- Base + reset polish ------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: var(--font-sans); font-feature-settings: 'cv02', 'cv03', 'cv11'; background-color: var(--bg); color: var(--text); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); /* Soft corner radials so the page bg isn't a flat colour. Both gradients sit behind everything (no flicker, no layout cost — they paint in the body's background layer). */ background-image: radial-gradient(ellipse 60rem 36rem at 0% 0%, rgba(37, 99, 235, 0.06), transparent 70%), radial-gradient(ellipse 60rem 36rem at 100% 12%, rgba(217, 119, 6, 0.05), transparent 70%); background-attachment: fixed; background-repeat: no-repeat; } * { box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.015em; color: var(--text); line-height: 1.15; } h1 { font-size: clamp(1.875rem, 3.2vw, 2.5rem); letter-spacing: -0.025em; font-weight: 700; } h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); letter-spacing: -0.02em; } h3 { font-size: 1.25rem; } h4 { font-size: 1.05rem; } p { margin: 0; } ul, ol { margin: 0; padding: 0; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } a.no-underline:hover { text-decoration: none; } ::selection { background: rgba(37, 99, 235, 0.16); color: var(--ink); } /* ------------------------------------------------------------------------- Tailwind colour overrides — fold the legacy "text-slate-400" / "bg-slate-900" utility salting across templates into our token palette, without having to touch every template. ------------------------------------------------------------------------- */ .text-slate-100 { color: var(--text) !important; } .text-slate-200 { color: var(--text) !important; } .text-slate-300 { color: var(--text) !important; } .text-slate-400 { color: var(--text-muted) !important; } .text-slate-500 { color: var(--text-subtle) !important; } .text-slate-600 { color: var(--text-subtle) !important; } .text-slate-700 { color: var(--text-faint) !important; } .text-emerald-300, .text-emerald-400, .text-emerald-500 { color: var(--ink) !important; } .text-violet-300, .text-violet-400 { color: var(--ink) !important; } .text-amber-200, .text-amber-300, .text-amber-400 { color: var(--warning) !important; } .text-red-300, .text-red-400 { color: var(--danger) !important; } .bg-slate-800, .bg-slate-900, .bg-slate-900\/40, .bg-slate-900\/50, .bg-slate-900\/80, .bg-slate-900\/95, .bg-slate-950, .bg-slate-950\/50, .bg-neutral-950 { background-color: var(--bg-subtle) !important; } .bg-emerald-500\/5, .bg-emerald-500\/10 { background-color: var(--emerald-soft) !important; } .bg-emerald-500 { background-color: var(--ink) !important; color: var(--btn-fg) !important; } .bg-amber-500\/10 { background-color: var(--amber-soft) !important; } .bg-red-500\/10 { background-color: var(--danger-soft) !important; } .bg-violet-500\/5, .bg-violet-500\/10 { background-color: var(--accent-soft) !important; } .border-slate-600, .border-slate-700, .border-slate-800 { border-color: var(--border) !important; } .border-emerald-500\/30, .border-emerald-500\/40, .border-emerald-500\/50, .border-emerald-500 { border-color: var(--ink) !important; } .border-violet-500\/20, .border-violet-500\/30, .border-violet-500\/40 { border-color: var(--border-strong) !important; } .border-amber-500\/40 { border-color: #fcd34d !important; } .border-red-500\/40 { border-color: #fca5a5 !important; } .ring-emerald-500\/30, .ring-emerald-500\/40 { --tw-ring-color: var(--ink) !important; } .ring-violet-500\/15, .ring-violet-500\/20 { --tw-ring-color: var(--border-strong) !important; } /* ------------------------------------------------------------------------- Header / nav ------------------------------------------------------------------------- */ .liquid-glass-header { background: var(--header-bg); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); box-shadow: none; } .nav-link { position: relative; color: var(--text-muted) !important; font-weight: 500; font-size: 0.9375rem; transition: color 0.15s; padding: 0.375rem 0; } .nav-link:hover { color: var(--ink) !important; } .nav-link::after { display: none !important; } .mega-menu { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg) !important; border-radius: var(--r-lg) !important; padding: 0.5rem !important; } .mega-menu a { color: var(--text) !important; font-size: 0.9375rem; border-radius: var(--r-sm); padding: 0.5rem 0.75rem !important; } .mega-menu a:hover { background: var(--bg-muted) !important; } /* ------------------------------------------------------------------------- Buttons ------------------------------------------------------------------------- */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0; line-height: 1; text-transform: none !important; padding: 0.75rem 1.125rem; /* WCAG 2.5.5 — interactive controls must hit 44x44 minimum on touch. Padding alone landed ~36px; min-height enforces the floor without making the desktop button noticeably taller. */ min-height: 44px; border-radius: var(--r-md) !important; border: 1px solid transparent; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.05s; text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--ink) !important; color: var(--btn-fg) !important; border-color: var(--ink) !important; box-shadow: var(--shadow-xs); } .btn-primary:hover { background: var(--ink-hover) !important; color: var(--btn-fg) !important; transform: none !important; } .btn-primary:active { transform: translateY(0) !important; } .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.18); } .btn-secondary { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important; box-shadow: var(--shadow-xs); } .btn-secondary:hover { background: var(--bg-muted) !important; border-color: var(--border-strong) !important; color: var(--text) !important; transform: none !important; } .btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08); } /* Neutralise liquid-shimmer + glow leftovers — keep classes for compat but strip the costume effects. */ .btn-liquid::before, .btn-liquid::after, .btn-glow::before { display: none !important; content: none !important; animation: none !important; } .btn-liquid { color: var(--btn-fg) !important; background: var(--ink) !important; border: 1px solid var(--ink) !important; isolation: auto; overflow: visible; } /* ------------------------------------------------------------------------- Forms ------------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], input:not([type]), select, textarea, .glass-field__input, .auth-input { width: 100%; min-height: 44px; padding: 0.625rem 0.875rem !important; font-family: var(--font-sans); font-size: 1rem; color: var(--text) !important; background: var(--surface) !important; border: 1px solid var(--border-strong) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-xs); transition: border-color 0.15s, box-shadow 0.15s; outline: none; } input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="number"]:hover, select:hover, textarea:hover { border-color: var(--border-focus) !important; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, select:focus, textarea:focus, .glass-field__input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16) !important; outline: none; } input::placeholder, textarea::placeholder { color: var(--text-faint) !important; } textarea { min-height: 120px; resize: vertical; } .glass-field { display: block; } .glass-field__label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text); margin-bottom: 0.375rem; } .glass-field__hint { margin-top: 0.375rem; font-size: 0.8125rem; color: var(--text-subtle); } .glass-field__textarea { min-height: 7.5rem; resize: vertical; } /* ------------------------------------------------------------------------- Cards / surfaces ------------------------------------------------------------------------- */ .glass-card, .liquid-glass, .bento-card, .pricing-card, .dashboard-stat { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-xl) !important; box-shadow: var(--shadow-sm) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .card-lift { transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .card-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) !important; border-color: var(--border-strong) !important; } .bento-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); background: var(--bg-muted); font-size: 1.25rem; line-height: 1; } .pricing-card { display: flex; flex-direction: column; padding: 1.5rem !important; position: relative; } /* Pack monogram — a small ink square with a serif first letter of the pack name. Replaces the prior emoji-on-pricing-card pattern (🎁/🚀/⭐/🏢) that read as gamified and clashed with the "templates not magic" voice. The monogram echoes the SC favicon mark, so the pricing grid feels like one family with the masthead logo. */ .pack-monogram { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1.5px solid var(--ink); background: var(--bg); color: var(--ink); font-family: 'Inter', serif; font-weight: 700; font-size: 1rem; border-radius: var(--r-md); line-height: 1; letter-spacing: 0; } .pricing-card--popular .pack-monogram { background: var(--ink); color: var(--btn-fg); } /* Popular card — the visual centre of gravity for the pricing grid. Ink border + subtle ring + slight lift so the eye lands here first; the filled CTA inside takes care of the action affordance. */ .pricing-card--popular { border-color: var(--ink) !important; border-width: 1.5px !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05) !important; position: relative; } /* Popular badge — pill, sits on the card border cleanly */ .pricing-card .absolute.-top-3 { background: var(--ink) !important; color: var(--btn-fg) !important; border-radius: 9999px !important; padding: 0.25rem 0.75rem !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.02em; } /* In-card CTAs get the full primary treatment — paying plans deserve visible action affordance, not a quiet outlined link. */ .pricing-card .btn-primary, .pricing-card .btn-secondary { width: 100%; } /* ------------------------------------------------------------------------- Hero / sections ------------------------------------------------------------------------- */ .mesh-hero { position: relative; isolation: auto; } .mesh-hero::before { display: none !important; content: none !important; } .gradient-hero, .page-shell { background: transparent !important; background-image: none !important; } .page-shell { padding: 0 !important; } .section-gap { margin-top: 4rem; } @media (min-width: 768px) { .section-gap { margin-top: 5.5rem; } } .section-nav { position: sticky; top: 4rem; z-index: 30; background: var(--header-bg) !important; backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--border) !important; margin: 0 0 2rem !important; padding: 0 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; } .section-nav ul { display: flex; gap: 0.25rem; white-space: nowrap; max-width: 72rem; margin: 0 auto; } .section-nav__link { display: inline-flex; align-items: center; padding: 0.75rem 0.875rem; font-size: 0.875rem; color: var(--text-muted) !important; font-weight: 500; min-height: 44px; } .section-nav__link:hover { color: var(--ink) !important; background: var(--bg-muted); border-radius: var(--r-sm); } .section-nav__link.is-active { color: var(--ink) !important; font-weight: 600; } .newspaper-kicker { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } .newspaper-rule { border: none; border-top: 1px solid var(--border); padding: 0; margin: 2rem 0; } .newspaper-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 1024px) { .newspaper-grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; } .newspaper-col-4 { grid-column: span 1; } .newspaper-col-6 { grid-column: span 1; } .newspaper-col-8 { grid-column: span 1; } .newspaper-col-12 { grid-column: 1 / -1; } } /* Hero bento (home right column) */ .hero-bento { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; } .hero-bento .bento-span-2 { grid-column: span 2; } /* ------------------------------------------------------------------------- Stats strip ------------------------------------------------------------------------- */ .stat-glow { position: static; } .stat-glow::before { display: none !important; content: none !important; } .stat-pop { animation: none; transform: none; } /* ------------------------------------------------------------------------- Output terminal (generator result) ------------------------------------------------------------------------- */ .output-terminal { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 1rem 1.25rem; overflow: hidden; box-shadow: var(--shadow-sm); } .output-terminal--active::after, .output-terminal__dot--live, .scramble-progress { display: none !important; } .output-terminal__bar { padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .output-terminal__dot { display: none; } .output-terminal__body { margin-top: 1rem; min-height: 12rem; max-height: min(70dvh, 32rem); overflow: auto; white-space: pre-wrap; font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.65; color: var(--text); background: var(--bg-subtle); border-radius: var(--r-md); padding: 1rem; border: 1px solid var(--border); } .glass-chip { display: inline-flex; align-items: center; padding: 0.4rem 0.75rem; border-radius: var(--r-md); font-size: 0.8125rem; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .glass-chip:hover:not(:disabled) { background: var(--bg-muted); border-color: var(--text-faint); } .glass-chip:disabled { opacity: 0.5; cursor: not-allowed; } /* ------------------------------------------------------------------------- Generator page chrome ------------------------------------------------------------------------- */ .generator-page__head { border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; } .generator-credits { background: var(--surface); border: 1px solid var(--border) !important; color: var(--text); border-radius: 9999px; box-shadow: var(--shadow-xs); } .generator-form__actions { display: flex; flex-direction: column; gap: 0.75rem; } @media (min-width: 640px) { .generator-form__actions { flex-direction: row; align-items: center; } } .generator-loading { display: none; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-muted); } .htmx-request .generator-loading, .htmx-request.generator-loading { display: inline-flex; } .htmx-request .generator-submit__label { opacity: 0.55; } .generator-loading__spinner { width: 1rem; height: 1rem; border: 2px solid var(--border-strong); border-top-color: var(--ink); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .generator-result:has(.output-terminal) .output-placeholder { display: none; } .generator-result { min-height: 280px; } @media (min-width: 1024px) { .generator-output-col { position: sticky; top: 5.5rem; align-self: start; } } .output-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; background: var(--bg-subtle); border: 1px dashed var(--border-strong); border-radius: var(--r-xl); color: var(--text-subtle); } .output-placeholder__icon { font-size: 2rem; opacity: 0.6; animation: none; } /* ------------------------------------------------------------------------- Account / dashboard / checkout misc ------------------------------------------------------------------------- */ .dashboard-stat { padding: 1.25rem; } .checkout-card { padding: 1.5rem; } .checkout-cta { width: 100%; min-height: 48px; } .checkout-step { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; padding: 1rem !important; } .checkout-step__num { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 0.875rem; } /* ------------------------------------------------------------------------- FAQ accordion ------------------------------------------------------------------------- */ .faq-item { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; } .faq-item[open] { border-color: var(--border-strong) !important; } .faq-item summary { cursor: pointer; list-style: none; padding: 1rem 1.25rem; font-weight: 500; color: var(--text); font-family: var(--font-sans); } .faq-item summary::-webkit-details-marker { display: none; } .faq-chevron { color: var(--text-faint) !important; } /* ------------------------------------------------------------------------- Cookie banner + scroll-top ------------------------------------------------------------------------- */ #cookie-banner { background: var(--surface) !important; border-top: 1px solid var(--border) !important; backdrop-filter: none; color: var(--text); } .cookie-banner-safe { padding-bottom: max(1rem, env(safe-area-inset-bottom)); padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } .scroll-top-btn { position: fixed; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 50; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); } /* ------------------------------------------------------------------------- Mobile nav ------------------------------------------------------------------------- */ .mobile-nav-toggle { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); } .mobile-nav-toggle:hover { background: var(--bg-muted); } .hamburger { display: block; width: 1.125rem; height: 2px; background: currentColor; position: relative; transition: background 0.2s; } .hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform 0.2s, top 0.2s; } .hamburger::before { top: -6px; } .hamburger::after { top: 6px; } .mobile-nav-toggle[aria-expanded='true'] .hamburger { background: transparent; } .mobile-nav-toggle[aria-expanded='true'] .hamburger::before { top: 0; transform: rotate(45deg); } .mobile-nav-toggle[aria-expanded='true'] .hamburger::after { top: 0; transform: rotate(-45deg); } #mobile-nav-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(15, 23, 42, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; } #mobile-nav-backdrop.is-open { opacity: 1; visibility: visible; } #mobile-nav { position: fixed; top: 0; right: 0; z-index: 50; height: 100dvh; width: min(100%, 22rem); padding: max(1rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom)); background: var(--surface); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform 0.25s ease; overflow-y: auto; } #mobile-nav.is-open { transform: translateX(0); } .mobile-nav-link { display: block; min-height: 48px; padding: 0.75rem 0.75rem; border-radius: var(--r-md); font-size: 1rem; color: var(--text); font-weight: 500; } .mobile-nav-link:hover, .mobile-nav-link:focus-visible { background: var(--bg-muted); color: var(--ink); } .mobile-nav-cta { display: block; min-height: 48px; margin-top: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--r-md); text-align: center; font-weight: 600; background: var(--ink); color: var(--btn-fg) !important; } body.mobile-nav-open { overflow: hidden; touch-action: none; } @media (min-width: 768px) { .mobile-nav-toggle, #mobile-nav, #mobile-nav-backdrop { display: none !important; } } /* ------------------------------------------------------------------------- Locale hint banner ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- Section bands — break up the long page by alternating background tints. ------------------------------------------------------------------------- */ /* Each band extends to the viewport edge via negative inline margins, then pads its content back to the natural section gutter. Works because the parent .max-w-6xl already caps content width — the band itself just paints the surrounding rectangle. Five flavours: warm cream, cool grey, pale blue, dark ink, dark-soft. The dark ones include text-colour resets so child copy reads correctly. */ .section-band { position: relative; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 4rem; margin-bottom: 0; padding-left: max(1rem, calc(50vw - 36rem)); padding-right: max(1rem, calc(50vw - 36rem)); padding-top: 4rem; padding-bottom: 4rem; } @media (min-width: 768px) { .section-band { margin-top: 5.5rem; padding-top: 5.5rem; padding-bottom: 5.5rem; } } .section-band--warm { background: var(--band-warm); } .section-band--cool { background: var(--band-cool); } .section-band--blue { background: var(--band-blue); } .section-band--dark { background: var(--band-dark); color: #ffffff; } .section-band--dark h1, .section-band--dark h2, .section-band--dark h3, .section-band--dark h4 { color: #ffffff; } .section-band--dark p, .section-band--dark li { color: rgba(255, 255, 255, 0.82); } .section-band--dark .text-slate-400, .section-band--dark .text-slate-500, .section-band--dark .text-slate-600, .section-band--dark .text-slate-700 { color: rgba(255, 255, 255, 0.72) !important; } .section-band--dark .btn-secondary { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; } .section-band--dark .btn-secondary:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.3) !important; } .section-band--dark .btn-primary { background: #ffffff !important; color: #0f172a !important; border-color: #ffffff !important; } .section-band--dark .btn-primary:hover { background: rgba(255, 255, 255, 0.92) !important; color: #0f172a !important; } .section-band--dark a:not(.btn-primary):not(.btn-secondary) { color: rgba(255, 255, 255, 0.92); } .section-band--dark a:not(.btn-primary):not(.btn-secondary):hover { color: #ffffff; } /* When the band is the first thing inside
, reset top margin so it doesn't double up with the page's natural top padding. */ .section-band:first-child { margin-top: 0; } /* ------------------------------------------------------------------------- Big landing illustration (partials/illustration_landing.html) ------------------------------------------------------------------------- */ /* A single hero-scale SVG below the fold: tilted phone + 4 floating ecosystem cards (Google G, 5-star rating, search snippet, review bubble). Whole stage tilts up to ±4° with mouse position; each satellite card floats on a unique keyframe so the parallax reads as depth and not as a single moving block. Reduced-motion kills the keyframes; the static layout is composed correctly on its own. */ .landing-illustration { position: relative; margin: 0; width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; perspective: 1500px; } .landing-illustration__stage { position: relative; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); transform-style: preserve-3d; } .landing-illustration svg { width: 100%; height: auto; display: block; /* Drop-shadow on the whole stage so the floating cards visually lift off the surrounding page section — kept light so it doesn't compete with the per-card filters baked into the SVG. */ filter: drop-shadow(0 18px 36px rgba(15, 23, 42, 0.06)); } /* ─── Gold-frame utility — Phase X ─────────────────────────────────────────── Thin metallic-gold border that wraps any image, illustration, or card. The "imagery" part of the brand pass — gold as an actual frame, not a colour swatch on text. Both themes get the same metallic gold border; the inner shadow + outer glow are dialled per-theme so it reads as a real frame in dark mode and a tasteful trim in light mode. Use:
…image…
…
Variants: .gold-frame--tight smaller padding (good for small thumbnails) .gold-frame--glow adds a soft gold halo behind the frame (hero only) ────────────────────────────────────────────────────────────────────────── */ .gold-frame { position: relative; display: inline-block; padding: 0.5rem; border: 1px solid var(--gold); border-radius: var(--r-lg); background: transparent; /* Subtle gradient on the border itself — gives the metallic "two-sided bevel" feel without a second wrapper. The two stops below mimic the gold being lit from upper-left. */ background-image: linear-gradient(135deg, rgba(230, 196, 84, 0.10) 0%, transparent 40%, rgba(168, 134, 27, 0.08) 100%); box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.15), 0 1px 0 rgba(255, 255, 255, 0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .gold-frame > * { display: block; border-radius: calc(var(--r-lg) - 4px); } .gold-frame img, .gold-frame svg, .gold-frame figure { max-width: 100%; height: auto; } .gold-frame--tight { padding: 0.25rem; border-radius: var(--r-md); } .gold-frame--tight > * { border-radius: calc(var(--r-md) - 2px); } .gold-frame--glow::before { content: ''; position: absolute; inset: -10%; background: radial-gradient(circle at center, rgba(212, 175, 55, 0.18), transparent 60%); filter: blur(28px); z-index: -1; pointer-events: none; } /* Light mode keeps the gold but softens the inner shadow so it doesn't muddy a cream/white surface. */ html[data-theme="light"] .gold-frame { box-shadow: inset 0 0 0 1px rgba(196, 162, 54, 0.18), 0 2px 6px rgba(138, 114, 32, 0.10); } html[data-theme="light"] .gold-frame--glow::before { background: radial-gradient(circle at center, rgba(196, 162, 54, 0.14), transparent 60%); } .gold-frame:hover { border-color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(230, 196, 84, 0.30), 0 4px 14px rgba(212, 175, 55, 0.15); } /* Gold divider — thin metallic line, useful between sections or as an underline accent on headlines. */ .gold-divider { height: 1px; width: 4rem; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 1rem 0; border: 0; } /* Inline gold text accent — keep sparse, premium touch. */ .text-gold { color: var(--gold); } .text-gold-bright { color: var(--gold-bright); } /* Per-satellite float — staggered durations + offsets so the four cards read as independent objects in space. The phone itself doesn't float; only the satellites do. */ .landing-illustration .il-float { will-change: transform; } .landing-illustration .il-float--a { animation: il-bob-a 7.5s ease-in-out infinite; transform-box: fill-box; } .landing-illustration .il-float--b { animation: il-bob-b 9.5s ease-in-out infinite; transform-box: fill-box; } .landing-illustration .il-float--c { animation: il-bob-c 8.5s ease-in-out infinite; transform-box: fill-box; } .landing-illustration .il-float--d { animation: il-bob-d 11s ease-in-out infinite; transform-box: fill-box; } @keyframes il-bob-a { 0%, 100% { transform: translate(56px, 90px); } 50% { transform: translate(56px, 76px); } } @keyframes il-bob-b { 0%, 100% { transform: translate(440px, 70px); } 50% { transform: translate(440px, 60px); } } @keyframes il-bob-c { 0%, 100% { transform: translate(20px, 320px); } 50% { transform: translate(20px, 332px); } } @keyframes il-bob-d { 0%, 100% { transform: translate(420px, 310px); } 50% { transform: translate(420px, 296px); } } @media (prefers-reduced-motion: reduce) { .landing-illustration .il-float { animation: none; } .landing-illustration__stage { transform: none; } } /* On smaller screens the perspective tilt is reduced and the satellite animations slow — phone-screen detail stays readable, motion stays calm next to the body copy on the same page. */ @media (max-width: 767px) { .landing-illustration { perspective: 1800px; } .landing-illustration .il-float--a { animation-duration: 10s; } .landing-illustration .il-float--b { animation-duration: 12s; } .landing-illustration .il-float--c { animation-duration: 11s; } .landing-illustration .il-float--d { animation-duration: 14s; } } /* ------------------------------------------------------------------------- Hero 3D scene ------------------------------------------------------------------------- */ /* Three "example output" cards floating in 3D space. Each card shows a real snippet of what one of the generators produces — so the 3D moment doubles as a tiny product demo. Cards bob gently on staggered keyframes, the whole scene tilts up to ±6° with mouse position (Alpine handles the mousemove → CSS variable handoff). prefers-reduced-motion kills all of it cleanly. */ .hero-3d-scene { position: relative; perspective: 1400px; perspective-origin: 50% 50%; min-height: 26rem; width: 100%; isolation: isolate; /* Soft radial glow behind the stack — depth without a heavy background. */ } .hero-3d-scene::before { content: ''; position: absolute; inset: -8%; background: radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 55%), radial-gradient(circle at 75% 65%, var(--gold-soft), transparent 50%), radial-gradient(circle at 50% 80%, var(--violet-soft), transparent 55%); filter: blur(36px); opacity: 0.85; z-index: -1; pointer-events: none; } .hero-3d-stage { position: relative; width: 100%; height: 26rem; transform-style: preserve-3d; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .floating-card { position: absolute; width: min(20rem, 84%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 1rem 1.125rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.06); font-size: 0.875rem; line-height: 1.5; color: var(--text); transform-style: preserve-3d; } .floating-card__label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); margin-bottom: 0.5rem; } .floating-card__label .icon { flex-shrink: 0; } .floating-card__body { color: var(--text); font-size: 0.875rem; line-height: 1.5; } .floating-card__meta { margin-top: 0.625rem; font-size: 0.6875rem; color: var(--text-faint); display: flex; align-items: center; gap: 0.35rem; } .floating-card__meta::before { content: ''; width: 6px; height: 6px; border-radius: 9999px; background: var(--emerald); } /* Three cards, each pinned to a corner of the stage with a slightly different depth, rotation, and float phase so the stack reads as real depth and not just three pasted rectangles. */ .floating-card--1 { top: 4%; left: 0; z-index: 3; animation: float-card-1 9s ease-in-out infinite; } .floating-card--2 { top: 30%; left: 38%; z-index: 2; animation: float-card-2 11s ease-in-out infinite; } .floating-card--3 { top: 58%; left: 8%; z-index: 1; animation: float-card-3 13s ease-in-out infinite; } @keyframes float-card-1 { 0%, 100% { transform: translate3d(0, 0, 60px) rotateY(-8deg) rotateX(2deg); } 50% { transform: translate3d(0, -14px, 60px) rotateY(-8deg) rotateX(2deg); } } @keyframes float-card-2 { 0%, 100% { transform: translate3d(0, 0, 10px) rotateY(-3deg) rotateX(-1deg); } 50% { transform: translate3d(0, -10px, 10px) rotateY(-3deg) rotateX(-1deg); } } @keyframes float-card-3 { 0%, 100% { transform: translate3d(0, 0, -30px) rotateY(5deg) rotateX(2deg); } 50% { transform: translate3d(0, -8px, -30px) rotateY(5deg) rotateX(2deg); } } /* On hover the whole scene tilts; the keyframes above keep playing. */ .hero-3d-scene[data-tilt='true'] .hero-3d-stage { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); } @media (prefers-reduced-motion: reduce) { .floating-card { animation: none !important; } .hero-3d-stage { transform: none !important; } .hero-3d-scene::before { opacity: 0.4; } } /* On small screens the 3D scene shrinks and rotation calms down so it doesn't fight with the hero copy on a phone. */ @media (max-width: 767px) { .hero-3d-scene { min-height: 22rem; } .hero-3d-stage { height: 22rem; } .floating-card { font-size: 0.8125rem; padding: 0.875rem 1rem; } .floating-card--1 { top: 6%; left: 4%; } .floating-card--2 { top: 34%; left: 26%; } .floating-card--3 { top: 62%; left: 10%; } } /* ------------------------------------------------------------------------- Card tilt-on-hover (subtle, brand-safe) ------------------------------------------------------------------------- */ /* Add `data-tilt` to any card; CSS does the rest. The card lifts a touch and the icon inside (if any) sticks out an extra few pixels in Z, so it reads as depth and not just translateY. */ [data-tilt] { transform-style: preserve-3d; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1); } [data-tilt]:hover { transform: translateY(-3px) rotateX(2deg) rotateY(-2deg); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10), 0 6px 12px rgba(15, 23, 42, 0.06); } [data-tilt]:hover .icon-chip, [data-tilt]:hover .pack-monogram { transform: translateZ(12px); } .icon-chip, .pack-monogram { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { [data-tilt]:hover { transform: none; } [data-tilt]:hover .icon-chip, [data-tilt]:hover .pack-monogram { transform: none; } } /* ------------------------------------------------------------------------- Inline icon utility ------------------------------------------------------------------------- */ .icon { display: inline-block; flex-shrink: 0; vertical-align: -2px; stroke: currentColor; color: inherit; } /* Coloured icon chip — a square tinted with the category soft colour, the icon itself in the saturated category colour. Used on dashboard tiles and home bento cards in place of the prior emoji-in-grey-square. */ .icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); background: var(--bg-muted); color: var(--ink); flex-shrink: 0; } .icon-chip--local { background: var(--cat-local-soft); color: var(--cat-local); } .icon-chip--review { background: var(--cat-review-soft); color: var(--cat-review); } .icon-chip--seo { background: var(--cat-seo-soft); color: var(--cat-seo); } .icon-chip--social { background: var(--cat-social-soft); color: var(--cat-social); } .icon-chip--email { background: var(--cat-email-soft); color: var(--cat-email); } .icon-chip--faq { background: var(--cat-faq-soft); color: var(--cat-faq); } .icon-chip--ad { background: var(--cat-ad-soft); color: var(--cat-ad); } .icon-chip--emerald { background: var(--emerald-soft); color: var(--emerald); } .icon-chip--amber { background: var(--amber-soft); color: var(--amber); } .icon-chip--violet { background: var(--violet-soft); color: var(--violet); } .icon-chip--accent { background: var(--accent-soft); color: var(--accent); } /* ------------------------------------------------------------------------- Mobile bottom navigation ------------------------------------------------------------------------- */ .mobile-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.04); padding-bottom: env(safe-area-inset-bottom); /* Hidden on md+ via the mobile-only utility chain in the template plus the redundant guard below in case Tailwind classes are stripped from cache. */ } .mobile-bottom-nav ul { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; max-width: 32rem; margin-left: auto; margin-right: auto; } .mobile-bottom-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; min-height: 56px; padding: 0.5rem 0.25rem; text-decoration: none; color: var(--text-muted); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em; position: relative; transition: color 0.12s ease, background 0.12s ease; } .mobile-bottom-nav__item:hover { color: var(--ink); } .mobile-bottom-nav__item:active { background: var(--bg-muted); } .mobile-bottom-nav__item.is-active { color: var(--ink); font-weight: 600; } /* Tiny pill under the icon of the active tab — visual cue without taking up vertical room. */ .mobile-bottom-nav__item.is-active::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 28px; height: 4px; border-radius: 999px; background: var(--ink); } .mobile-bottom-nav__icon { display: inline-flex; } .mobile-bottom-nav__label { white-space: nowrap; } /* Push page content above the fixed bar so the footer + last content row isn't covered. Applies only when the bar is in the DOM (mobile breakpoint). */ @media (max-width: 767px) { body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } /* Also nudge the floating scroll-top button so it doesn't sit on top of the bottom nav. */ .scroll-top-btn { bottom: calc(64px + env(safe-area-inset-bottom) + 0.5rem); } } @media (min-width: 768px) { .mobile-bottom-nav { display: none !important; } } /* ------------------------------------------------------------------------- Click-to-open desktop dropdowns ------------------------------------------------------------------------- */ /* The prior hover-to-open dropdown was bad on touch (no hover) and on desktop too — the gap between trigger and menu kept dropping users out of the menu hit area. Templates now use Alpine @click instead of @mouseenter; this CSS gives the menu a tight, generous hit zone and removes the gap. */ .nav-link[aria-expanded] { cursor: pointer; } .nav-link[aria-expanded="true"] { color: var(--ink) !important; } .mega-menu { /* Eliminate the dead gap between trigger and menu. */ top: calc(100% - 1px) !important; /* Slight visible boundary so it doesn't look pasted. */ border-radius: var(--r-lg) !important; box-shadow: var(--shadow-lg) !important; } .mega-menu::before { /* Invisible hover-bridge from trigger to menu — lets the cursor cross the 1px gap without the menu closing on mouseleave (which Alpine handles via @click.outside, but this also helps keyboard focus). */ content: ''; position: absolute; inset: -8px 0 auto 0; height: 8px; background: transparent; } .mega-menu a { /* Larger hit target — Apple HIG / Material both say 44px minimum. */ min-height: 40px !important; display: flex !important; align-items: center; gap: 0.5rem; } .locale-hint { background: var(--bg-subtle); color: var(--text); border-bottom: 1px solid var(--border); font-family: var(--font-sans); font-size: 0.875rem; } .locale-hint a { color: var(--accent); font-weight: 500; } /* ------------------------------------------------------------------------- Reveal motion — keep subtle, remove blur/3D ------------------------------------------------------------------------- */ html.js-motion [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; transition-delay: var(--reveal-delay, 0ms); } html.js-motion [data-reveal].is-visible { opacity: 1; transform: translateY(0); } html.no-js [data-reveal], [data-reveal].is-visible { opacity: 1; transform: none; } .anim-hero-in { opacity: 1; transform: none; animation: none; } .anim-header { opacity: 1; transform: none; animation: none; } @media (prefers-reduced-motion: reduce) { html.js-motion [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ------------------------------------------------------------------------- Hide the costume layers — particles, fx canvas, paper-sheet ------------------------------------------------------------------------- */ #particle-layer, #fx-canvas, .float-particle, .paper-scrap { display: none !important; } .paper-sheet { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; animation: none !important; transform: none !important; } /* ------------------------------------------------------------------------- Footer ------------------------------------------------------------------------- */ footer { background: var(--bg-subtle) !important; border-top: 1px solid var(--border) !important; color: var(--text-muted); } footer a { color: var(--text-muted); } footer a:hover { color: var(--ink); } /* ------------------------------------------------------------------------- Utilities ------------------------------------------------------------------------- */ .text-gradient { background: none !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; font-family: var(--font-sans) !important; letter-spacing: -0.025em !important; text-transform: none !important; animation: none !important; } .skip-link { position: absolute; left: -9999px; top: auto; z-index: 100; padding: 0.75rem 1rem; background: var(--ink); color: var(--btn-fg); font-weight: 600; border-radius: var(--r-md); } .skip-link:focus { left: 1rem; top: 1rem; } /* Numbered step badge — used in the "Wie startest du?" how-it-works grid. Inverted pill (ink fill, btn-fg text) so it pops in both themes — was bg-slate-900/text-white which collapsed to "dark on dark" in dark mode. */ .step-badge { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: var(--ink); color: var(--btn-fg); font-weight: 700; font-size: 1.125rem; line-height: 1; } /* ------------------------------------------------------------------------- Theme toggle (sun in dark mode → click for light; moon in light → dark) ------------------------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); } .theme-toggle .ic-sun { display: inline-flex; } .theme-toggle .ic-moon { display: none; } html[data-theme="light"] .theme-toggle .ic-sun { display: none; } html[data-theme="light"] .theme-toggle .ic-moon { display: inline-flex; } /* Full-width row variant used inside the mobile drawer. */ .theme-toggle--row { width: 100%; height: auto; gap: 0.5rem; padding: 0.625rem 0.75rem; justify-content: flex-start; font-size: 0.9375rem; font-weight: 500; color: var(--text); } .theme-toggle--row .theme-toggle__label-dark { display: none; } .theme-toggle--row .theme-toggle__label-light { display: inline; } html[data-theme="light"] .theme-toggle--row .theme-toggle__label-dark { display: inline; } html[data-theme="light"] .theme-toggle--row .theme-toggle__label-light { display: none; } .htmx-indicator { opacity: 0; transition: opacity 0.15s ease-in; } .htmx-request .htmx-indicator { opacity: 1; } .htmx-request.htmx-indicator { opacity: 1; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 767px) { .hero-cta-row { flex-direction: column; align-items: stretch; } .hero-cta-row .btn-primary, .hero-cta-row .btn-secondary { width: 100%; min-height: 48px; } #cookie-banner .mx-auto { flex-direction: column; align-items: stretch; } #cookie-banner button, #cookie-banner a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } .auth-input { min-height: 44px; } input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }