/* =========================================================================== Donut Market v2 — Complete Design System ALL CSS lives in this file (SellAuth standard). Contains: - Brand tokens (colors, fonts) - 4-layer background system (aurora, dots, voxels) - Components: cards, buttons, chips, badges - dm-* utility classes (HOW IT WORKS, FAQ, Footer v2) - Navbar polish overrides - SellAuth-specific fallbacks for Tailwind classes - !important overrides for old theme conflicts =========================================================================== */ :root { --bg: #0a0b14; --surface: #101220; --elevated: #181b2c; --line: rgba(255,255,255,0.07); --line-strong: rgba(255,255,255,0.14); --muted: rgba(255,255,255,0.64); --subtle: rgba(255,255,255,0.46); --faint: rgba(255,255,255,0.30); --accent: #5b8cff; --accent-from: #3b82f6; --accent-to: #8b5cf6; --emerald: #10b981; --amber: #fbbf24; --red: #ef4444; --violet: #a855f7; --cyan: #22d3ee; /* DM-prefixed aliases for v2 components that use these explicitly */ --dm-bg: var(--bg); --dm-surface: var(--surface); --dm-elevated: var(--elevated); --dm-line: var(--line); --dm-line-strong: var(--line-strong); --dm-muted: var(--muted); --dm-subtle: var(--subtle); --dm-faint: var(--faint); --dm-accent: var(--accent); --dm-accent-from: var(--accent-from); --dm-accent-to: var(--accent-to); --dm-emerald: var(--emerald); --dm-amber: var(--amber); --dm-red: var(--red); --dm-violet: var(--violet); --dm-cyan: var(--cyan); } * { box-sizing: border-box; } /* CRITICAL: force-override built.css's hardcoded Tomorrow + Chivo Mono fonts. built.css was Tailwind-compiled with the old theme defaults baked into the html root. Without these !important overrides, every element fell back to Tomorrow. */ /* Metric-matched fallback fonts: the system fallback is scaled (size-adjust + ascent/descent overrides) to occupy the SAME box as the real webfont, so when Inter / JetBrains Mono swap in there is ZERO reflow — kills the font-swap CLS while still showing the real font once it loads. Must sit right after the primary family in every stack below. */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'); ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; size-adjust: 107.06%; } @font-face { font-family: 'JetBrains Mono Fallback'; src: local('Courier New'), local('Courier'); ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; size-adjust: 100%; } html, :host { background: var(--bg); color: #fff; font-family: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important; } body { /* !important: built.css puts a bg-* class on which beats this element selector — an opaque body bg paints OVER the fixed z:-1..-3 background layers (aurora/dots/voxels), hiding them entirely. */ background: transparent !important; color: #fff; font-family: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01'; overflow-x: hidden; } /* Override built.css's Chivo Mono default for code-family elements */ code, kbd, pre, samp, .font-mono, .donut-title, h1, h2, h3, h4, h5, h6 { font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace !important; } /* But generic body paragraphs should still be Inter, not mono */ body, p, span, div, a, li, button, input, textarea, select, label { font-family: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, sans-serif; } /* h1-h6 explicitly mono for headings */ h1, h2, h3, h4, h5, h6 { font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace !important; } /* ============================================================ BACKGROUND LAYERS — 4-layer GPU-friendly system z=-4 video iframe (homepage only, hero-confined) z=-3 aurora corner blobs (drifting) z=-2 constellation dot field (static) z=-1 floating Minecraft voxels (drifting) ============================================================ */ /* Video iframe — confined to hero area on homepage. absolute (NOT fixed): it must scroll away with the hero instead of staying pinned behind every section. !important beats the master.njk inline rule that sets it fixed. */ .video-background { position: absolute !important; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -4; pointer-events: none; overflow: hidden; } /* tall dissolve at the video's bottom edge — melts into the page background so there's no visible seam where the hero hands off to the next section */ .video-background::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 48%; background: linear-gradient(180deg, transparent 0%, rgba(10, 11, 20, 0.45) 45%, rgba(10, 11, 20, 0.85) 75%, #0a0b14 97%); z-index: 2; pointer-events: none; } .video-background iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.15); width: max(100vw, 177.78vh); height: max(100vh, 56.25vw); border: 0; opacity: 0; transition: opacity 1.2s ease, filter 1.2s ease; filter: blur(8px) brightness(0.55) saturate(1.15) contrast(1.05); } .video-background.loaded iframe { opacity: 1; } .video-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 40%, transparent 0%, rgba(10,11,20,0.4) 70%, rgba(10,11,20,0.85) 100%), radial-gradient(ellipse 80% 60% at 30% 20%, rgba(59,130,246,0.18), transparent 60%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(139,92,246,0.15), transparent 60%), linear-gradient(180deg, transparent 0%, rgba(10,11,20,0.35) 60%, var(--bg) 100%); backdrop-filter: blur(2px) saturate(1.1); -webkit-backdrop-filter: blur(2px) saturate(1.1); } @media (max-width: 768px) { .video-background { display: none; } } @media (max-width: 1024px) { .video-background iframe { filter: brightness(0.55); } } /* Aurora — corners only, leaves center clean */ .dm-bg-aurora, .bg-aurora { position: fixed; inset: 0; /* was -10% — extended past the viewport and caused an 8px mobile horizontal scroll */ z-index: -3; pointer-events: none; background: radial-gradient(ellipse 600px 450px at 0% 0%, rgba(91,140,255,0.22) 0%, transparent 60%), radial-gradient(ellipse 700px 500px at 100% 5%, rgba(139,92,246,0.20) 0%, transparent 65%), radial-gradient(ellipse 500px 400px at 0% 100%, rgba(236,72,153,0.12) 0%, transparent 60%), radial-gradient(ellipse 500px 400px at 100% 100%, rgba(16,185,129,0.10) 0%, transparent 60%); transform: translate3d(0, 0, 0); will-change: transform; animation: aurora-drift 40s ease-in-out infinite alternate; } @keyframes aurora-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-2%, 1%, 0) scale(1.03); } } /* Constellation dot field */ .dm-bg-grid, .bg-grid-layer { position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: radial-gradient(circle 1px at 50% 50%, rgba(255,255,255,0.12) 0, rgba(255,255,255,0.12) 1px, transparent 1.5px); background-size: 32px 32px; mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 20%, transparent 92%); -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 20%, transparent 92%); } .dm-bg-grid::after, .bg-grid-layer::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle 1.5px at 50% 50%, rgba(91,140,255,0.55) 0, rgba(91,140,255,0.3) 1.5px, transparent 4px); background-size: 192px 192px; background-position: 32px 32px; pointer-events: none; } .dm-bg-grid::before, .bg-grid-layer::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle 2px at 50% 50%, rgba(139,92,246,0.5) 0, rgba(139,92,246,0.25) 2px, transparent 5px); background-size: 288px 288px; background-position: 144px 96px; pointer-events: none; } /* Floating voxels */ .dm-bg-voxels, .bg-voxels { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .dm-bg-voxels .v, .bg-voxels .v { position: absolute; width: 28px; height: 28px; box-shadow: inset -4px -4px 0 rgba(0,0,0,0.30), inset 4px 4px 0 rgba(255,255,255,0.20), 0 8px 24px rgba(0,0,0,0.4); transform: translate3d(0, 0, 0); will-change: transform; } .dm-bg-voxels .v1, .bg-voxels .v1 { top: 14%; left: 7%; background: linear-gradient(135deg, rgba(91,140,255,0.7), rgba(91,140,255,0.4)); animation: vox-drift-1 40s ease-in-out infinite alternate; } .dm-bg-voxels .v2, .bg-voxels .v2 { top: 72%; right: 9%; width: 22px; height: 22px; background: linear-gradient(135deg, rgba(251,191,36,0.7), rgba(245,158,11,0.5)); animation: vox-drift-2 52s ease-in-out infinite alternate; } .dm-bg-voxels .v3, .bg-voxels .v3 { top: 46%; right: 26%; width: 18px; height: 18px; background: linear-gradient(135deg, rgba(16,185,129,0.7), rgba(52,211,153,0.5)); animation: vox-drift-3 38s ease-in-out infinite alternate; } .dm-bg-voxels .v4, .bg-voxels .v4 { top: 28%; left: 78%; width: 16px; height: 16px; background: linear-gradient(135deg, rgba(236,72,153,0.6), rgba(168,85,247,0.4)); animation: vox-drift-4 46s ease-in-out infinite alternate; } .dm-bg-voxels .v5, .bg-voxels .v5 { top: 84%; left: 38%; width: 14px; height: 14px; background: linear-gradient(135deg, rgba(139,92,246,0.6), rgba(91,140,255,0.4)); animation: vox-drift-5 60s ease-in-out infinite alternate; } @keyframes vox-drift-1 { to { transform: translate3d(40px, -30px, 0) rotate(15deg); } } @keyframes vox-drift-2 { to { transform: translate3d(-50px, -40px, 0) rotate(-20deg); } } @keyframes vox-drift-3 { to { transform: translate3d(30px, 50px, 0) rotate(10deg); } } @keyframes vox-drift-4 { to { transform: translate3d(-40px, 60px, 0) rotate(-12deg); } } @keyframes vox-drift-5 { to { transform: translate3d(60px, -40px, 0) rotate(22deg); } } @media (max-width: 768px) { .dm-bg-voxels, .bg-voxels { display: none; } .dm-bg-aurora, .bg-aurora { animation: none; } } /* ============================================================ LAYOUT ============================================================ */ /* Sticky navbar must paint above all scrolling content (badges, carousel arrows, etc. used z>=10 and tied/beat the header's z-10, floating over it while scrolling). Intentional overlays stay higher: story HUD 40, mobile buy bar 70, coupon modal 80. */ header.sticky.top-0 { z-index: 30 !important; } /* ============================================================ PAGE ENTRANCE — staggered component cascade on load. html.dm-will-enter (added by JS pre-paint) hides the pieces; html.dm-enter fades them in: navbar slides down, sections rise one after another. Classes are removed once done, so nothing lingers. JS-off = classes never added = everything visible. ============================================================ */ /* 0.001 not 0: opacity-0 elements are EXCLUDED from LCP measurement, which would push the metric later — 0.001 looks identical but counts. */ html.dm-will-enter header.sticky.top-0 { opacity: 0.001; transform: translateY(-14px); } html.dm-will-enter #main-content > .component, html.dm-will-enter footer.dm-footer { opacity: 0.001; transform: translateY(18px); } html.dm-enter header.sticky.top-0, html.dm-enter #main-content > .component, html.dm-enter footer.dm-footer { opacity: 1; transform: translateY(0); transition: opacity .55s ease, transform .6s cubic-bezier(.22, 1, .36, 1); } /* the cascade: navbar first, then each section in order */ html.dm-enter header.sticky.top-0 { transition-delay: 0s; } html.dm-enter #main-content > .component:nth-child(1) { transition-delay: .10s; } html.dm-enter #main-content > .component:nth-child(2) { transition-delay: .20s; } html.dm-enter #main-content > .component:nth-child(3) { transition-delay: .30s; } html.dm-enter #main-content > .component:nth-child(4) { transition-delay: .38s; } html.dm-enter #main-content > .component:nth-child(n+5), html.dm-enter footer.dm-footer { transition-delay: .45s; } @media (prefers-reduced-motion: reduce) { html.dm-will-enter header.sticky.top-0, html.dm-will-enter #main-content > .component, html.dm-will-enter footer.dm-footer { opacity: 1; transform: none; } } .container { max-width: 1280px; margin-inline: auto; padding: 0 16px; } @media (min-width: 1024px) { .container { padding: 0 32px; } } .dm-container { max-width: 1280px; margin: 0 auto; padding: 0 16px; } /* ============================================================ HOMEPAGE SECTION RHYTHM The content components each used a different bottom margin (mb-16 / lg:mb-24 / lg:mb-32 → 0, 96, 128px) plus, for HOW IT WORKS, a 60px internal top pad. That produced wildly uneven gaps (0, 96, 128, 156). Normalize to ONE consistent gap for every section inside

. ============================================================ */ /* Below-the-fold sections: skip their layout/paint work until the user scrolls near them (big Style & Layout saving on load). Feedbacks is EXCLUDED — its carousel JS measures widths at load and would read 0. `auto Npx` placeholder keeps the scrollbar stable before first render. */ #main-content > .component[data-component-id^="features"], #main-content > .component[data-component-id^="faq"], #main-content > .component[data-component-id^="socials"], #main-content > .component[data-component-id^="video-gallery"] { content-visibility: auto; contain-intrinsic-size: auto 800px; } /* margin-BOTTOM on every section (robust: some components emit a trailing