/* ════════════════════════════════════════════════════════════════ DUKAAN — shared design system Extracted from index.html so every sub-page (about, pricing, legal…) carries the identical look, motion and atmosphere as dukaan.fun. Loaded after the Tailwind CDN + Google Fonts (Unbounded / Space Mono / Inter) declared in each page's . ════════════════════════════════════════════════════════════════ */ /* ── LENIS ── */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* ── CUSTOM CURSOR ── */ body { cursor: none; } #cursor { position: fixed; pointer-events: none; z-index: 9999; mix-blend-mode: difference; } #cursor-dot { width: 8px; height: 8px; background: #3DF604; border-radius: 50%; position: absolute; transform: translate(-50%,-50%); transition: transform .15s cubic-bezier(.34,1.56,.64,1); } #cursor-ring { width: 40px; height: 40px; border: 1.5px solid rgba(61,246,4,0.4); border-radius: 50%; position: absolute; transform: translate(-50%,-50%); transition: width .4s cubic-bezier(.34,1.56,.64,1), height .4s cubic-bezier(.34,1.56,.64,1), border-color .3s ease; } body.cursor-hover #cursor-dot { transform: translate(-50%,-50%) scale(3); } body.cursor-hover #cursor-ring { width: 64px; height: 64px; border-color: #3DF604; } body.cursor-click #cursor-dot { transform: translate(-50%,-50%) scale(0.5); } @media (pointer: coarse) { body { cursor: auto; } #cursor { display: none; } } /* ── MARQUEE ── */ .scrolling-text { animation: scroll 30s linear infinite; } .scrolling-text-rev { animation: scroll 35s linear infinite reverse; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── NOISE ── */ .noise { position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 128px 128px; animation: nshift 6s steps(3) infinite; } @keyframes nshift { 0% { background-position: 0 0; } 33% { background-position: 32px -14px; } 66% { background-position: -14px 32px; } 100% { background-position: 0 0; } } /* ── GRID BG ── */ .grid-bg { background-size: 64px 64px; background-image: linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px); } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: #050505; } ::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #3DF604; } /* ── ANIMATED GRADIENT BORDER ── */ .gradient-border { position: relative; background: #0A0A0A; border-radius: 16px; overflow: hidden; } .gradient-border::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: 16px; background: linear-gradient(135deg, rgba(61,246,4,0.3), transparent 40%, transparent 60%, rgba(61,246,4,0.15)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; } .gradient-border:hover::before { opacity: 1; } /* ── GLASS CARD ── */ .glass { background: rgba(255,255,255,0.02); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.06); } /* ── GLOW CARD ── */ .glow-card { position: relative; background: #0A0A0A; border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; overflow: hidden; transition: border-color 0.5s ease, transform 0.5s cubic-bezier(.34,1.56,.64,1); } .glow-card:hover { border-color: rgba(61,246,4,0.2); transform: translateY(-4px); } .glow-card .card-glow { position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(61,246,4,0.08), transparent 70%); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; transform: translate(-50%,-50%); } .glow-card:hover .card-glow { opacity: 1; } /* ── HERO TEXT SPLIT ── */ .split-line { display: block; overflow: hidden; } .split-line-inner { display: block; transform: translateY(110%); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .split-line-inner.visible { transform: translateY(0); } /* ── FADE UP ── */ .reveal { opacity: 0; transform: translateY(50px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: 0.1s; } .reveal-d2 { transition-delay: 0.2s; } .reveal-d3 { transition-delay: 0.3s; } .reveal-d4 { transition-delay: 0.4s; } .reveal-d5 { transition-delay: 0.5s; } /* ── SCALE REVEAL ── */ .reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-scale.visible { opacity: 1; transform: scale(1); } /* ── MAGNETIC BUTTON ── */ .magnetic-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.3s cubic-bezier(.34,1.56,.64,1); } .magnetic-btn .btn-text { position: relative; z-index: 1; transition: transform 0.3s cubic-bezier(.34,1.56,.64,1); } /* ── BILLING TOGGLE ── */ .bill-tg-wrap { position: relative; } .bill-tg-wrap::before { content: ''; position: absolute; top: 6px; left: 6px; height: calc(100% - 12px); width: var(--pill-w, 96px); border-radius: 999px; background: #3DF604; box-shadow: 0 4px 14px rgba(61,246,4,0.28); transform: translateX(var(--pill-x, 0)); transition: transform .42s cubic-bezier(.22,1.36,.36,1), width .35s ease; z-index: 0; } .bill-toggle { position: relative; z-index: 1; color: #9CA3AF; cursor: pointer; background: transparent !important; transition: color .25s ease; } .bill-toggle:hover { color: #EAEAEA; } .bill-toggle.active { color: #000; } .bill-toggle.active:hover { color: #000; } /* ── GLOW PULSE ── */ @keyframes glow-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(61,246,4,0.5); } 50% { opacity: 0.7; box-shadow: 0 0 0 10px rgba(61,246,4,0); } } .glow-dot { animation: glow-pulse 2.5s ease-in-out infinite; } /* ── HERO ORBS ── */ @keyframes float-orb { 0% { transform: translate(0, 0) scale(1); opacity: 0.4; } 33% { transform: translate(-30px, 20px) scale(1.1); opacity: 0.6; } 66% { transform: translate(20px, -10px) scale(0.95); opacity: 0.5; } 100% { transform: translate(0, 0) scale(1); opacity: 0.4; } } @keyframes float-orb-2 { 0% { transform: translate(0, 0) scale(1); opacity: 0.3; } 50% { transform: translate(40px, -30px) scale(1.15); opacity: 0.5; } 100% { transform: translate(0, 0) scale(1); opacity: 0.3; } } /* ── ANIMATED GRADIENT TEXT ── */ .gradient-text { background: linear-gradient(135deg, #3DF604 0%, #7FFF00 25%, #3DF604 50%, #00FF88 75%, #3DF604 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-shift 4s ease-in-out infinite; } @keyframes gradient-shift { 0% { background-position: 0% center; } 50% { background-position: 100% center; } 100% { background-position: 0% center; } } /* ── COUNTER ── */ .counter { font-variant-numeric: tabular-nums; } /* ── BLOBS ── */ .blob { border-radius: 50%; filter: blur(80px); pointer-events: none; position: absolute; } /* ── PRICING POPULAR GLOW ── */ .pricing-glow { box-shadow: 0 0 60px -12px rgba(61,246,4,0.15), 0 0 120px -20px rgba(61,246,4,0.08); } /* ── TESTIMONIAL / FEATURE GRADIENT CARD ── */ .testimonial-card { position: relative; background: linear-gradient(135deg, rgba(17,17,17,1) 0%, rgba(10,10,10,1) 100%); border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; overflow: hidden; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .testimonial-card:hover { border-color: rgba(61,246,4,0.15); transform: translateY(-2px); } .testimonial-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(61,246,4,0.3), transparent); opacity: 0; transition: opacity 0.5s ease; } .testimonial-card:hover::before { opacity: 1; } /* ── SECTION DIVIDER ── */ .section-line { height: 1px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.06) 80%, transparent); } /* ── LOGO SPIN ── */ .logo-mark { transition: transform 0.6s cubic-bezier(.34,1.56,.64,1); } .logo-mark:hover { transform: rotate(180deg); } /* ── STAGGER CHILDREN ── */ .stagger > * { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1); } .stagger.visible > *:nth-child(1) { transition-delay: 0s; } .stagger.visible > *:nth-child(2) { transition-delay: 0.08s; } .stagger.visible > *:nth-child(3) { transition-delay: 0.16s; } .stagger.visible > *:nth-child(4) { transition-delay: 0.24s; } .stagger.visible > *:nth-child(5) { transition-delay: 0.32s; } .stagger.visible > *:nth-child(6) { transition-delay: 0.4s; } .stagger.visible > *:nth-child(7) { transition-delay: 0.48s; } .stagger.visible > *:nth-child(8) { transition-delay: 0.56s; } .stagger.visible > * { opacity: 1; transform: translateY(0); } /* ── NAV SCROLL STATE ── */ #nav.scrolled { background: rgba(5,5,5,0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,0.05); } /* ══════════════════════════════════════════════════════════════ SUB-PAGE ADDITIONS — shared building blocks for the inner pages (page hero, legal prose). Same vocabulary, just packaged for reuse. ══════════════════════════════════════════════════════════════ */ /* Page hero — the standard inner-page header band */ .page-hero { position: relative; isolation: isolate; } .page-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3em; color: rgba(61,246,4,0.7); } /* Long-form legal / prose blocks */ .prose-legal { color: #b8b8b8; line-height: 1.95; font-size: 15px; } .prose-legal h2 { font-family: 'Unbounded', sans-serif; color: #fff; text-transform: uppercase; font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: -0.01em; margin: 3rem 0 1rem; } .prose-legal h2:first-child { margin-top: 0; } .prose-legal h3 { color: #fff; font-weight: 600; font-size: 1rem; margin: 1.75rem 0 0.5rem; } .prose-legal p { margin: 0 0 1.1rem; } .prose-legal ul { margin: 0 0 1.25rem; padding-left: 0; list-style: none; } .prose-legal ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.6rem; } .prose-legal ul li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: #3DF604; } .prose-legal a { color: #3DF604; text-decoration: none; border-bottom: 1px solid rgba(61,246,4,0.3); } .prose-legal a:hover { border-bottom-color: #3DF604; } .prose-legal strong { color: #fff; font-weight: 600; } /* Reduced-motion safety for the sub-pages */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-scale, .stagger > *, .split-line-inner { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── Pricing comparison table ─────────────────────────────────────────── */ .cmp-scroll { overflow-x: auto; border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; background: rgba(255,255,255,0.015); -webkit-overflow-scrolling: touch; } .cmp-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 13.5px; } .cmp-table thead th { position: sticky; top: 0; z-index: 2; background: #0C0C0D; padding: 18px 16px 16px; text-align: center; vertical-align: top; border-bottom: 1px solid rgba(255,255,255,0.08); } .cmp-table thead th.cmp-corner { text-align: left; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; font-weight: 400; } .cmp-pn { display: block; font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 15px; color: #fff; } .cmp-pp { display: block; margin-top: 4px; font-size: 13px; color: #9ca3af; font-weight: 600; } .cmp-pp i { font-style: normal; font-size: 10px; color: #6b7280; } .cmp-pop { background: linear-gradient(180deg, rgba(61,246,4,0.10), #0C0C0D 70%) !important; } .cmp-pop .cmp-pn { color: #3DF604; } .cmp-badge { display: inline-block; margin-top: 7px; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #000; background: #3DF604; padding: 2px 8px; border-radius: 999px; } .cmp-table tbody th { text-align: left; font-weight: 400; color: #c7ccd4; padding: 13px 16px; font-size: 13px; max-width: 340px; } .cmp-table tbody td { text-align: center; padding: 13px 16px; border-top: 1px solid rgba(255,255,255,0.045); } .cmp-table tbody th { border-top: 1px solid rgba(255,255,255,0.045); } .cmp-table tbody tr:hover th, .cmp-table tbody tr:hover td { background: rgba(255,255,255,0.02); } .cmp-cat td { padding: 16px 16px 9px; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #3DF604; background: rgba(61,246,4,0.035); border-top: 1px solid rgba(61,246,4,0.12) !important; font-weight: 700; } .cmp-yes { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(61,246,4,0.12); color: #3DF604; } .cmp-no { color: #4b5563; font-size: 15px; } .cmp-val { font-family: 'Space Mono', monospace; font-weight: 700; color: #fff; font-size: 13px; } .cmp-table tbody tr td:nth-child(4) { background: rgba(61,246,4,0.03); } @media (max-width: 768px) { .cmp-table { font-size: 12.5px; } .cmp-pn { font-size: 13px; } }