/* ============================================================================ FIRST-IMPRESSION LAYER (loaded LAST so it wins) Self-contained, reversible polish pass over the ported SellAuth theme. Remove the to first-impression.css in layout.tsx to fully revert. ============================================================================ */ /* ---- 1. Typography: drop generic Inter for a premium geometric sans -------- */ /* Headings stay JetBrains Mono (techy/instant-bot feel) — only body changes. */ body, p, span, div, a, li, button, input, textarea, select, label, .muted, .subtle, .chip, .badge, .btn-primary, .btn-secondary { font-family: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important; letter-spacing: -0.006em; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Safety: guarantee a deep base color behind the fixed gradient layers ------- */ html { background: #07080f; } /* ---- 2. Film-grain texture overlay ---------------------------------------- */ .dm-grain { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.045; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- 3. Aurora: a touch more presence so depth reads on first paint -------- */ .bg-aurora, .dm-bg-aurora { animation-duration: 32s; filter: saturate(1.15); } /* ---- 4. Buttons: deeper, branded glow + crisper press --------------------- */ .btn-primary { box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 10px 30px -10px rgba(91,140,255,0.65), 0 2px 8px -2px rgba(139,92,246,0.5); transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, filter .2s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 20px 44px -12px rgba(91,140,255,0.8), 0 6px 18px -4px rgba(139,92,246,0.7); } /* ---- 5. Hero product showcase: richer elevation & subtle float ------------- */ .showcase-front { filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55)) drop-shadow(0 0 40px rgba(91,140,255,0.25)); } /* float the INNER card — .showcase-front itself is centered via transform: translate(-50%,-50%); animating its transform would un-center it */ .showcase-front > div { animation: dm-float 6s ease-in-out infinite; } @keyframes dm-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ---- 6. Staged hero entrance --------------------------------------------- */ .hero-copy > * { animation: dm-rise .7s cubic-bezier(.2,.8,.2,1) backwards; } .hero-copy > *:nth-child(1) { animation-delay: .05s; } .hero-copy > *:nth-child(2) { animation-delay: .13s; } .hero-copy > *:nth-child(3) { animation-delay: .21s; } .hero-copy > *:nth-child(4) { animation-delay: .29s; } .hero-copy > *:nth-child(5) { animation-delay: .37s; } .hero-copy > *:nth-child(6) { animation-delay: .45s; } /* (showcase-container entrance removed — backwards-fill left it stuck at opacity:0, hiding the absolutely-positioned product cards; the inner card float is enough) */ @keyframes dm-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* ---- 7. Gradient text: animated sheen for the headline accent ------------- */ .donut-title .gradient-text, .gradient-text { background-size: 220% auto; animation: dm-sheen 6s linear infinite; } @keyframes dm-sheen { to { background-position: 220% center; } } /* ---- 8. Inputs / focus / selection polish --------------------------------- */ ::selection { background: rgba(91,140,255,0.32); color: #fff; } a, button { transition: color .18s ease, opacity .18s ease, transform .18s ease; } :focus-visible { outline: 2px solid rgba(91,140,255,0.8); outline-offset: 3px; border-radius: 6px; } /* ---- 9. Section rhythm: a hair more breathing room above the fold ---------- */ #hero { position: relative; } /* ---- 10. Global section scroll-reveal (driven by RevealOnScroll.tsx) ------- */ /* the .dm-reveal class is added by JS, so if JS fails nothing is hidden */ .dm-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); } .dm-reveal.dm-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .dm-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---- Respect reduced-motion ----------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .hero-copy > *, .hero-showcase, .showcase-front > div, .bg-aurora, .dm-bg-aurora, .bg-voxels .v, .gradient-text { animation: none !important; } .hero-copy > *, .hero-showcase { opacity: 1 !important; transform: none !important; } } /* ---- Store product card (matches the homepage card + premium hover) ---- */ .dm-pcard { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .dm-pcard:hover { border-color: rgba(91,140,255,0.42) !important; transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,0.38); } .dm-pcard-img { transition: transform .5s ease; } .dm-pcard:hover .dm-pcard-img { transform: scale(1.06); } .dm-buy-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; border-radius: 11px; font-size: 13.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #5b8cff, #8b5cf6); box-shadow: 0 4px 14px rgba(91,140,255,0.28); transition: filter .15s ease, box-shadow .15s ease; } .dm-pcard:hover .dm-buy-btn { filter: brightness(1.08); box-shadow: 0 6px 20px rgba(91,140,255,0.42); } /* ---- Blog article body (rendered markdown) ---- */ .blog-prose { color: rgba(255,255,255,0.84); font-size: 16px; line-height: 1.75; } .blog-prose > *:first-child { margin-top: 0; } .blog-prose h2 { font-size: 24px; font-weight: 800; color: #fff; margin: 34px 0 12px; letter-spacing: -0.01em; } .blog-prose h3 { font-size: 19px; font-weight: 700; color: #fff; margin: 26px 0 10px; } .blog-prose p { margin: 0 0 18px; } .blog-prose ul, .blog-prose ol { margin: 0 0 18px; padding-left: 22px; } .blog-prose li { margin: 0 0 8px; } .blog-prose li::marker { color: #5b8cff; } .blog-prose a { color: #8aacff; text-decoration: underline; text-underline-offset: 2px; } .blog-prose a:hover { color: #a7bcff; } .blog-prose strong { color: #fff; font-weight: 700; } .blog-prose blockquote { margin: 22px 0; padding: 12px 18px; border-left: 3px solid #5b8cff; background: rgba(91,140,255,0.07); border-radius: 0 10px 10px 0; color: rgba(255,255,255,0.78); } .blog-prose blockquote p { margin: 0; } .blog-prose code { background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 5px; font-size: 0.9em; } .blog-prose hr { border: none; border-top: 1px solid var(--line); margin: 30px 0; }