/* Shared base styles for all subpages — mirrors Luminest.html base */ :root { --cream: #F7F4FB; --cream-2: #EDE6F5; --ink: #0E0816; --ink-2: #2E2440; --ink-3: #6B5F80; --amber: #7108D5; --amber-soft: #B57BE8; --magenta: #D946C9; --sage: #4B2A8C; --line: rgba(14,8,22,0.10); --line-2: rgba(14,8,22,0.06); --glass: rgba(255,253,255,0.6); color-scheme: light dark; } /* Paint the right background on immediately. The inline theme-init script in sets html.dark before stylesheets load, so the browser never paints the default white between pages — this is what kills the flash. */ html { background: #F7F4FB; transition: background-color .3s ease; } html.dark { background: #0A0612; color-scheme: dark; } html, body { color: var(--ink); margin:0; padding:0; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background: var(--cream); } /* Cross-document View Transitions API (Chrome 126+, Edge, Opera). Browsers that don't support it ignore these rules — no fallback needed. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: cubic-bezier(.2,.8,.2,1); } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0s; } } *, *::before, *::after { box-sizing: border-box; } .serif, h1, h2, h3 { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 500; letter-spacing: -0.035em; } .mono { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; } .it { font-style: normal; font-weight: 400; background: linear-gradient(120deg, #7108D5 0%, #D946C9 60%, #B57BE8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } ::selection { background: var(--amber); color: white; } .btn { display:inline-flex; align-items:center; gap:10px; padding: 14px 22px; border-radius: 999px; font-weight: 500; font-size: 15px; transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, box-shadow .25s; cursor: pointer; border: none; text-decoration: none; } .btn-primary { background: var(--ink); color: var(--cream); } .btn-primary:hover { background: var(--amber); color: white; transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(113,8,213,.55); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn-ghost:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); } .chip { display: inline-flex; align-items:center; gap:8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--ink-2); background: var(--glass); backdrop-filter: blur(10px);} .glass { background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--line); } .card-hover { transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; } .card-hover:hover { transform: translateY(-6px); } .underline-grow { background-image: linear-gradient(currentColor,currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s ease; } .underline-grow:hover { background-size: 100% 1px; } .arrow-link { display:inline-flex; align-items:center; gap:8px; } .arrow-link .arrow { transition: transform .35s cubic-bezier(.2,.8,.2,1); } .arrow-link:hover .arrow { transform: translateX(6px) rotate(-45deg); } @keyframes floaty { 0%,100%{ transform: translate(0,0) } 50% { transform: translate(0,-12px) } } @keyframes spin-slow { to { transform: rotate(360deg); } } @keyframes marquee { from { transform: translateX(0)} to { transform: translateX(-50%)} } @keyframes blink { 0%,90%,100% { opacity:1 } 95% { opacity:.2 } } .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } .reveal.on { opacity:1; transform: translateY(0); } .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .reveal-stagger.on > * { opacity:1; transform: translateY(0); } .lume { position:absolute; border-radius:50%; background: radial-gradient(circle at 35% 35%, #E5C2FF 0%, #B57BE8 30%, #7108D5 60%, #D946C9 95%); box-shadow: 0 0 80px 20px rgba(113,8,213,.35), 0 0 200px 60px rgba(217,70,201,.15); } .grid-bg { background-image: linear-gradient(to right, var(--line-2) 1px, transparent 1px), linear-gradient(to bottom, var(--line-2) 1px, transparent 1px); background-size: 80px 80px; } .halo { position: fixed; pointer-events:none; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(113,8,213,.18), rgba(217,70,201,.10) 40%, transparent 60%); transform: translate(-50%,-50%); z-index: 1; transition: opacity .4s; mix-blend-mode: multiply; opacity: 0; } .nav { position: sticky; top:0; z-index: 50; transition: backdrop-filter .3s, background .3s, border-color .3s; } .nav.scrolled { background: var(--glass); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); } .field { display:flex; flex-direction: column; gap:6px; } .field label { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; } .field input, .field textarea, .field select { background: transparent; border: none; border-bottom: 1px solid var(--line); color: var(--ink); padding: 10px 0; font: inherit; outline: none; transition: border-color .25s; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--amber); } .field textarea { resize: vertical; min-height: 80px; } .num-ticker { font-variant-numeric: tabular-nums; } .grain::before { content:""; position: fixed; inset:0; pointer-events:none; z-index: 1; opacity: .25; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > * { opacity:1 !important; transform: none !important; } } /* ===== Dark mode ===== */ body.dark { --cream: #0A0612; --cream-2: #140C20; --ink: #F2ECFA; --ink-2: #C9BCDA; --ink-3: #8E7EA8; --amber: #9B3FE8; --amber-soft: #6B1FB8; --magenta: #E366D5; --sage: #B57BE8; --line: rgba(242,236,250,0.10); --line-2: rgba(242,236,250,0.05); --glass: rgba(20,12,32,0.55); } body.dark .grain::before { mix-blend-mode: screen; opacity: .18; } body.dark .lume { box-shadow: 0 0 80px 20px rgba(155,63,232,.5), 0 0 200px 60px rgba(217,70,201,.25); } body.dark .halo { mix-blend-mode: screen; background: radial-gradient(circle, rgba(155,63,232,.22), rgba(227,102,213,.12) 40%, transparent 60%); } body.dark .it { background: linear-gradient(120deg, #C28BFF 0%, #E366D5 60%, #B57BE8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }