/* ============================================================ CastVision Teaser — i5LED Vanilla CSS. Mobile-first. No build step. Palette: near-black base, full-spectrum LED gradients as light. ============================================================ */ :root { /* Base surfaces */ --ink: #050507; /* page background (near black) */ --ink-2: #0b0b10; /* raised charcoal */ --ink-3: #131320; /* card surface */ --line: rgba(255,255,255,.08); /* Text */ --text: #f3f4f8; --text-dim: #a7a9b8; --text-faint: #6c6e80; /* LED spectrum accents */ --cyan: #00e5ff; --violet: #a855f7; --pink: #ff5d8f; --amber: #ffd166; --green: #34d399; /* Signature gradient (the "screen light") */ --spectrum: linear-gradient(115deg, #00e5ff 0%, #6f8bff 28%, #a855f7 55%, #ff5d8f 78%, #ffd166 100%); --maxw: 1180px; --radius: 18px; --ease: cubic-bezier(.16,.84,.30,1); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Helvetica Neue", sans-serif; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); background: var(--ink); color: var(--text); line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, p { margin: 0; } img, svg { display: block; max-width: 100%; } a { color: inherit; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Accessible focus ring everywhere */ :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; } /* ============================================================ IGNITION OVERLAY — black-to-lit reveal on load ============================================================ */ .ignition { position: fixed; inset: 0; z-index: 9999; background: #000; pointer-events: none; } .ignition::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--spectrum); filter: blur(8px); opacity: 0; } /* JS adds .ignite to on load */ body.ignite .ignition { animation: ignite-fade 1.5s var(--ease) forwards; } body.ignite .ignition::after { animation: ignite-burst 1.4s var(--ease) forwards; } @keyframes ignite-burst { 0% { opacity: 0; width: 8px; height: 8px; } 35% { opacity: 1; } 100% { opacity: 0; width: 220vmax; height: 220vmax; filter: blur(60px); } } @keyframes ignite-fade { 0% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } /* ============================================================ AMBIENT CANVAS — light bloom + drifting particles ============================================================ */ .ambient { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; } /* ============================================================ REVEAL ON SCROLL (power-on) ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 96px 0 64px; overflow: hidden; isolation: isolate; } /* Animated "LED wall" gradient surface */ .hero__surface { position: absolute; inset: -20%; z-index: -2; background: radial-gradient(60% 50% at 20% 30%, rgba(0,229,255,.55), transparent 60%), radial-gradient(55% 45% at 80% 25%, rgba(168,85,247,.55), transparent 60%), radial-gradient(60% 55% at 65% 80%, rgba(255,93,143,.45), transparent 60%), radial-gradient(50% 50% at 30% 75%, rgba(255,209,102,.30), transparent 60%); filter: blur(40px) saturate(140%); background-size: 200% 200%; animation: meshflow 22s ease-in-out infinite alternate; } @keyframes meshflow { 0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 100%; } 100% { background-position: 30% 40%, 70% 30%, 40% 60%, 30% 60%; } } /* Dark vignette so text stays readable over the glow */ .hero__vignette { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(5,5,7,.55) 70%, rgba(5,5,7,.92) 100%), linear-gradient(180deg, rgba(5,5,7,.35), rgba(5,5,7,.7)); } .hero__inner { max-width: 880px; padding: 0 24px; } .kicker { font-size: clamp(.7rem, .65rem + .4vw, .85rem); letter-spacing: .32em; font-weight: 600; color: var(--text-dim); margin-bottom: 22px; text-transform: uppercase; } .hero__headline { font-size: clamp(2.6rem, 1.4rem + 7vw, 6.4rem); line-height: .98; font-weight: 800; letter-spacing: -.02em; margin-bottom: 22px; } .glow-text { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% auto; animation: hue-pan 8s linear infinite; filter: drop-shadow(0 0 24px rgba(168,85,247,.35)); } @keyframes hue-pan { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } .hero__subhead { font-size: clamp(1.02rem, .95rem + .5vw, 1.3rem); color: var(--text-dim); max-width: 620px; margin: 0 auto 36px; } /* ---------- Signup form (shared) ---------- */ .signup { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 540px; margin: 0 auto; position: relative; } .signup__input { flex: 1 1 240px; min-width: 0; padding: 16px 20px; font-size: 1rem; color: var(--text); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(8px); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s; } .signup__input::placeholder { color: var(--text-faint); } .signup__input:focus { outline: none; border-color: rgba(0,229,255,.7); box-shadow: 0 0 0 3px rgba(0,229,255,.18), 0 0 30px rgba(0,229,255,.25); background: rgba(255,255,255,.07); } .signup__input[aria-invalid="true"] { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,93,143,.2); } .btn { flex: 0 0 auto; padding: 16px 28px; font-size: 1rem; font-weight: 700; letter-spacing: .01em; color: #07070b; background: var(--spectrum); background-size: 200% auto; border: 0; border-radius: 999px; cursor: pointer; transition: transform .2s var(--ease), box-shadow .3s var(--ease), background-position .6s var(--ease); white-space: nowrap; } .btn--glow { box-shadow: 0 8px 30px rgba(168,85,247,.35); } .btn--glow:hover { transform: translateY(-2px); background-position: 100% center; box-shadow: 0 12px 44px rgba(0,229,255,.45); } .btn--glow:active { transform: translateY(0); } .btn--bright { box-shadow: 0 0 50px rgba(168,85,247,.55), 0 8px 30px rgba(0,229,255,.4); } .signup__msg { flex-basis: 100%; min-height: 1.2em; margin-top: 6px; font-size: .92rem; color: var(--text-dim); text-align: center; transition: color .3s; } .signup__msg.is-error { color: var(--pink); } .signup__msg.is-success { color: var(--cyan); font-weight: 600; } /* Success light-burst behind a form */ .signup.is-success::before { content: ""; position: absolute; left: 50%; top: 30%; width: 8px; height: 8px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--spectrum); filter: blur(10px); animation: form-burst 1.1s var(--ease) forwards; pointer-events: none; z-index: -1; } @keyframes form-burst { 0% { opacity: .9; width: 8px; height: 8px; } 100% { opacity: 0; width: 480px; height: 480px; filter: blur(50px); } } /* Scroll cue */ .scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.25); border-radius: 14px; } .scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--cyan); animation: scroll-bob 1.8s var(--ease) infinite; } @keyframes scroll-bob { 0%, 100% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translateY(12px); } } /* ============================================================ GENERIC SECTION ============================================================ */ .section { position: relative; z-index: 1; padding: clamp(72px, 9vw, 140px) 0; } .section__title { font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; text-align: center; } .section__lede { max-width: 640px; margin: 20px auto 0; text-align: center; color: var(--text-dim); font-size: clamp(1rem, .95rem + .5vw, 1.25rem); } /* ---------- Pillars ---------- */ .pillars { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 24px; } .pillar { text-align: center; padding: 40px 26px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden; } .pillar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(0,229,255,.12), transparent 70%); opacity: 0; transition: opacity .4s var(--ease); } .pillar:hover::before { opacity: 1; } .pillar__icon { display: inline-flex; margin-bottom: 18px; filter: drop-shadow(0 0 14px rgba(0,229,255,.35)); } .pillar__name { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; } .pillar__copy { color: var(--text-dim); } /* ---------- Lineup cards ---------- */ .lineup { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 24px; } .card { position: relative; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: var(--ink-2); min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; } .card:hover, .card:focus-visible { transform: translateY(-6px); border-color: rgba(0,229,255,.4); box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(168,85,247,.18); } /* Blurred abstract "LED content" per card */ .card__art { position: absolute; inset: 0; z-index: 0; filter: blur(22px) saturate(150%); transform: scale(1.25); transition: filter .55s var(--ease), transform .55s var(--ease); background-size: 180% 180%; animation: meshflow 26s ease-in-out infinite alternate; } /* Hover/focus lifts the blur to bait curiosity */ .card:hover .card__art, .card:focus-visible .card__art { filter: blur(6px) saturate(160%); transform: scale(1.1); } .card__art--smd { background: radial-gradient(50% 50% at 30% 35%, var(--cyan), transparent 60%), radial-gradient(50% 50% at 75% 60%, var(--violet), transparent 60%), #0a0a12; } .card__art--cob { background: radial-gradient(50% 50% at 70% 30%, var(--violet), transparent 60%), radial-gradient(60% 60% at 30% 70%, #3a3aff, transparent 60%), #060608; } .card__art--fold { background: radial-gradient(50% 50% at 50% 30%, var(--green), transparent 60%), radial-gradient(50% 50% at 65% 75%, var(--cyan), transparent 60%), #07120f; } .card__art--outdoor { background: radial-gradient(50% 50% at 35% 30%, var(--amber), transparent 60%), radial-gradient(55% 55% at 75% 65%, var(--pink), transparent 60%), #120a06; } /* readability scrim over art */ .card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,5,7,.1) 30%, rgba(5,5,7,.88) 100%); } .card__body { position: relative; z-index: 2; padding: 26px; } .card__tag { display: inline-block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--cyan); padding: 5px 12px; border: 1px solid rgba(0,229,255,.35); border-radius: 999px; margin-bottom: 14px; background: rgba(0,229,255,.06); } .card__name { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; } .card__hook { color: var(--text-dim); } .card__lock { position: absolute; top: 18px; right: 18px; z-index: 2; color: rgba(255,255,255,.55); transition: color .4s, transform .4s var(--ease); } .card:hover .card__lock, .card:focus-visible .card__lock { color: var(--cyan); transform: scale(1.1) rotate(-6deg); } /* ============================================================ THE WOW MOMENT ============================================================ */ .wow { position: relative; z-index: 1; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 100px 24px; overflow: hidden; } .wow__parallax { position: absolute; inset: -25%; z-index: -1; background: radial-gradient(45% 45% at 50% 40%, rgba(168,85,247,.4), transparent 65%), radial-gradient(60% 60% at 30% 70%, rgba(0,229,255,.25), transparent 65%), radial-gradient(50% 50% at 75% 65%, rgba(255,93,143,.22), transparent 65%); filter: blur(60px) saturate(140%); will-change: transform; } /* Edge-on thinness visual */ .wow__edge { position: relative; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 48px; perspective: 900px; } .wow__edge-face { width: min(70vw, 420px); height: 6px; border-radius: 4px; background: var(--spectrum); box-shadow: 0 0 40px rgba(0,229,255,.6), 0 0 80px rgba(168,85,247,.4); transform: rotateX(62deg); } .wow__edge-side { position: absolute; width: min(70vw, 420px); height: 14px; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0)); transform: rotateX(62deg) translateY(7px); } .wow__edge-label { position: absolute; right: calc(50% - min(35vw, 210px) - 8px); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } .wow__inner { max-width: 1000px; } .wow__headline { font-size: clamp(2rem, 1rem + 6vw, 5rem); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; margin-bottom: 30px; } .wow__spec { font-size: clamp(.72rem, .65rem + .5vw, .95rem); letter-spacing: .26em; text-transform: uppercase; color: var(--text-dim); font-variant-numeric: tabular-nums; } /* ============================================================ CTA ============================================================ */ .cta { position: relative; z-index: 1; padding: clamp(90px, 12vw, 180px) 0; text-align: center; overflow: hidden; } .cta__bloom { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); width: min(900px, 120vw); height: 600px; z-index: -1; background: radial-gradient(circle, rgba(168,85,247,.35), rgba(0,229,255,.12) 45%, transparent 70%); filter: blur(40px); animation: bloom-pulse 6s ease-in-out infinite; } @keyframes bloom-pulse { 0%, 100% { opacity: .7; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } } .cta__title { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; } .cta__sub { color: var(--text-dim); max-width: 560px; margin: 0 auto 36px; font-size: clamp(1rem,.95rem + .4vw,1.2rem); } .cta__reassure { margin-top: 20px; color: var(--text-faint); font-size: .92rem; } /* ============================================================ FOOTER ============================================================ */ .footer { position: relative; z-index: 1; padding: 56px 0 48px; border-top: 1px solid var(--line); background: #030304; } .footer__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .wordmark { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; } .wordmark__led { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; } .footer__line { color: var(--text-dim); font-size: .95rem; } .footer__links a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; } .footer__links a:hover { color: var(--cyan); border-color: var(--cyan); } .footer__copy { color: var(--text-faint); font-size: .85rem; } /* ============================================================ RESPONSIVE ============================================================ */ @media (min-width: 720px) { .pillars { grid-template-columns: repeat(3, 1fr); } .lineup { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .lineup { grid-template-columns: repeat(4, 1fr); } .footer__inner { flex-direction: row; justify-content: space-between; text-align: left; } } /* ============================================================ REDUCED MOTION — static, calm fallback ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } .ignition { display: none; } .ambient { display: none; } .scroll-cue { display: none; } /* Cards show a gentle, never-fully-hidden state */ .card__art { filter: blur(14px) saturate(140%); transform: scale(1.1); } }