/* ============================================================ CAMPIXL — theme + base + nav + hero + marquee 3 live aesthetic directions via [data-dir] on ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ---------- DIRECTION: NOCTURNE (default, dark) ---------- */ :root, [data-dir="nocturne"] { --bg: #09090f; --bg2: #0f0f18; --surface: rgba(255,255,255,0.035); --surface2: rgba(255,255,255,0.06); --solid: #14141f; --border: rgba(255,255,255,0.09); --border2: rgba(255,255,255,0.16); --text: #f3f1f8; --text2: #b7b3c6; --muted: #807c90; --accent: #ff5d8f; --accent2: #8b5cff; --accent3: #4dd6ff; --on-accent: #0a0a0f; --grad: linear-gradient(115deg, #8b5cff 0%, #ff5d8f 52%, #ff9a5d 100%); --grad-soft: radial-gradient(60% 60% at 50% 40%, rgba(139,92,255,0.5), transparent 70%); --glow: 0 0 60px rgba(139,92,255,0.35); --shadow: 0 20px 60px rgba(0,0,0,0.5); --card-blur: blur(14px); } /* ---------- DIRECTION: BLOOM (light editorial) ---------- */ [data-dir="bloom"] { --bg: #f6f3ed; --bg2: #efeae1; --surface: rgba(255,255,255,0.7); --surface2: #ffffff; --solid: #ffffff; --border: rgba(26,21,16,0.10); --border2: rgba(26,21,16,0.20); --text: #18130f; --text2: #443d35; --muted: #8c8276; --accent: #df3f78; --accent2: #6b4dff; --accent3: #138a68; --on-accent: #fff; --grad: linear-gradient(115deg, #df3f78 0%, #df3f78 100%); --grad-soft: radial-gradient(60% 60% at 50% 40%, rgba(223,63,120,0.16), transparent 70%); --glow: 0 18px 50px rgba(223,63,120,0.18); --shadow: 0 24px 60px rgba(60,40,30,0.14); --card-blur: blur(0px); } /* ---------- DIRECTION: VAPOR (cyber pastel dark) ---------- */ [data-dir="vapor"] { --bg: #0a0915; --bg2: #120f24; --surface: rgba(255,255,255,0.045); --surface2: rgba(255,255,255,0.08); --solid: #161228; --border: rgba(255,255,255,0.10); --border2: rgba(255,255,255,0.18); --text: #f0eefb; --text2: #c4c0e4; --muted: #837fa6; --accent: #b18cff; --accent2: #6ee7c8; --accent3: #ffb38a; --on-accent: #0a0915; --grad: linear-gradient(115deg, #6ee7c8 0%, #b18cff 52%, #ffb38a 100%); --grad-soft: radial-gradient(60% 60% at 50% 40%, rgba(110,231,200,0.4), transparent 70%); --glow: 0 0 60px rgba(177,140,255,0.4); --shadow: 0 20px 60px rgba(0,0,0,0.55); --card-blur: blur(14px); } :root { --ff-display: 'Space Grotesk', sans-serif; --ff-body: 'Inter', sans-serif; --ff-serif: 'Inter', sans-serif; --ff-mono: 'Inter', sans-serif; --r: 22px; --r-sm: 13px; --maxw: 1240px; } /* ---------- BASE ---------- */ html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--ff-body); font-weight: 400; font-size: 16px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background .6s ease, color .6s ease; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: var(--on-accent); } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 6px; } .mono { font-family: var(--ff-mono); } /* animated grain/aurora field behind everything */ .field { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; background: var(--bg); transition: background .6s ease; } .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; transition: opacity .6s ease; } [data-dir="bloom"] .blob { mix-blend-mode: multiply; opacity: .35; filter: blur(80px); } .blob.b1 { width: 46vw; height: 46vw; left: -8vw; top: -6vw; background: var(--accent2); animation: drift1 26s ease-in-out infinite; } .blob.b2 { width: 40vw; height: 40vw; right: -6vw; top: 18vh; background: var(--accent); animation: drift2 30s ease-in-out infinite; } .blob.b3 { width: 34vw; height: 34vw; left: 30vw; bottom: -10vw; background: var(--accent3); animation: drift3 34s ease-in-out infinite; opacity: .4; } @keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(14vw,10vh) scale(1.15)} } @keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-12vw,6vh) scale(1.1)} } @keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(8vw,-8vh) scale(1.2)} } .grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- CUSTOM CURSOR ---------- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; translate: -50% -50%; } .cursor-dot { width: 7px; height: 7px; background: #fff; } .cursor-ring { width: 34px; height: 34px; border: 1px solid #fff; transition: width .25s, height .25s, background .25s; } .cursor-ring.hot { width: 56px; height: 56px; background: rgba(255,255,255,0.12); } @media (hover: none) { .cursor-dot, .cursor-ring { display: none; } } /* ---------- NAV ---------- */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 2.4rem; transition: background .4s, backdrop-filter .4s, border-color .4s, padding .4s; border-bottom: 1px solid transparent; } nav.scrolled { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--border); padding-top: .8rem; padding-bottom: .8rem; } .logo { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: .1rem; } .logo b { font-weight: 700; } .logo .gx { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .logo .star { color: var(--accent2); font-size: .85em; margin-left: .25rem; animation: spin 8s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .nav-center { display: flex; gap: 2rem; } .nav-center a { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); position: relative; padding: .2rem 0; transition: color .25s; } .nav-center a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--accent); transition: right .3s cubic-bezier(.2,1,.3,1); } .nav-center a:hover { color: var(--text); } .nav-center a:hover::after { right: 0; } .nav-right { display: flex; align-items: center; gap: .8rem; } /* direction switcher */ .dir-switch { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 100px; background: var(--surface); } .dir-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border2); cursor: pointer; padding: 0; position: relative; transition: transform .2s; } .dir-dot:hover { transform: scale(1.12); } .dir-dot[data-d="nocturne"] { background: linear-gradient(135deg,#8b5cff,#ff5d8f); } .dir-dot[data-d="bloom"] { background: linear-gradient(135deg,#df3f78,#ff7a45); } .dir-dot[data-d="vapor"] { background: linear-gradient(135deg,#6ee7c8,#b18cff); } .dir-dot.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--text); } .cta { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; background: var(--text); color: var(--bg); border: none; cursor: pointer; padding: .62rem 1.2rem; border-radius: 100px; white-space: nowrap; transition: transform .25s, background .3s, color .3s; } .cta:hover { background: var(--accent); color: var(--on-accent); } /* ---------- SHARED SECTION BITS ---------- */ .section { max-width: var(--maxw); margin: 0 auto; padding: 7rem 2.4rem; position: relative; } .eyebrow { font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.2rem; } .eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--accent); display: inline-block; } .h-xl { font-family: var(--ff-display); font-weight: 500; letter-spacing: -.03em; line-height: .98; font-size: clamp(2.6rem, 6vw, 5rem); } .h-xl .ser { font-family: var(--ff-serif); font-weight: 400; font-style: italic; letter-spacing: 0; } .h-xl .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .lede { color: var(--text2); font-size: 1.05rem; line-height: 1.75; max-width: 520px; } /* word/char reveal */ .split .ln { display: block; overflow: hidden; } .split .wd { display: inline-block; } .split .wd > span { display: inline-block; transform: translateY(110%) rotate(4deg); opacity: 0; } /* Resting state once revealed is VISIBLE; the animation only adds the rise. No fill-mode/backwards-fill, so words stay visible even if animation is throttled. */ .split.go .wd > span { opacity: 1; transform: none; animation: wordUp .8s cubic-bezier(.2,1,.25,1); animation-delay: var(--d, 0s); } @keyframes wordUp { from { transform: translateY(110%) rotate(4deg); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .split .wd > span { transform: none; opacity: 1; animation: none; } .rv { opacity: 1; transform: none; } } /* generic reveal */ .rv { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } .rv.in { opacity: 1; transform: none; } .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s} .magnetic { will-change: transform; } /* ---------- HERO ---------- */ .hero { min-height: 100vh; max-width: var(--maxw); margin: 0 auto; padding: 9rem 2.4rem 4rem; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 3rem; position: relative; } .hero-eyebrow { font-family: var(--ff-mono); font-size: .8rem; letter-spacing: .08em; color: var(--text2); display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; border: 1px solid var(--border); border-radius: 100px; padding: .45rem 1rem; background: var(--surface); backdrop-filter: var(--card-blur); } .hero-eyebrow .live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent3); box-shadow: 0 0 0 0 var(--accent3); animation: ping 2s ease-out infinite; } @keyframes ping { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent3) 70%,transparent)} 70%,100%{box-shadow:0 0 0 9px transparent} } .hero h1 { font-family: var(--ff-display); font-weight: 500; letter-spacing: -.035em; line-height: .92; font-size: clamp(3rem, 8vw, 7rem); margin-bottom: 1.8rem; } .hero h1 .ser { font-family: var(--ff-serif); font-weight: 400; font-style: italic; letter-spacing: 0; } .hero h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-desc { color: var(--text2); font-size: 1.08rem; line-height: 1.75; max-width: 460px; margin-bottom: 2.4rem; } .hero-desc b { color: var(--text); font-weight: 500; } .hero-btns { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; } .btn { font-family: var(--ff-mono); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; padding: .95rem 1.7rem; border-radius: 100px; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; transition: transform .3s cubic-bezier(.2,1,.3,1), box-shadow .3s, background .3s, color .3s, border-color .3s; } .btn-fill { background: var(--grad); color: #fff; border: none; box-shadow: var(--glow); } .btn-fill:hover { box-shadow: 0 0 80px color-mix(in srgb, var(--accent) 55%, transparent); } .btn-line { background: var(--surface); color: var(--text); border: 1px solid var(--border2); backdrop-filter: var(--card-blur); } .btn-line:hover { border-color: var(--text); } /* hero portrait */ .portrait-wrap { position: relative; } .portrait-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; } .portrait { position: relative; aspect-ratio: 4/5; border-radius: 26px; overflow: hidden; border: 1px solid var(--border2); background: var(--surface); backdrop-filter: var(--card-blur); box-shadow: var(--shadow); } .portrait .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, transparent 0 13px, color-mix(in srgb,var(--text) 6%, transparent) 13px 14px), var(--grad-soft); } .portrait .ph .mono { color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; border: 1px dashed var(--border2); padding: .5rem .85rem; border-radius: 8px; background: color-mix(in srgb,var(--bg) 50%, transparent); } .portrait .big-c { position: absolute; font-family: var(--ff-serif); font-style: italic; font-size: 22rem; line-height: 1; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; opacity: .22; right: -2rem; bottom: -4rem; } .float-card { position: absolute; background: color-mix(in srgb, var(--solid) 86%, transparent); backdrop-filter: blur(18px); border: 1px solid var(--border2); border-radius: 16px; padding: .9rem 1.1rem; box-shadow: var(--shadow); } .fc-stat { right: -1.6rem; bottom: 2.2rem; } .fc-stat .n { font-family: var(--ff-display); font-weight: 700; font-size: 2rem; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .fc-stat .l { font-family: var(--ff-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 3px; } .fc-live { left: -1.4rem; top: 2rem; display: flex; align-items: center; gap: .55rem; font-family: var(--ff-mono); font-size: .72rem; color: var(--text2); } .fc-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent3); animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} } /* ---------- MARQUEE ---------- */ .marquee { position: relative; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1.4rem 0; overflow: hidden; background: var(--surface); } .marquee-track { display: flex; gap: 2.6rem; width: max-content; animation: scroll-x 30s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track .item { font-family: var(--ff-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -.01em; color: var(--text); display: inline-flex; align-items: center; gap: 2.6rem; white-space: nowrap; } .marquee-track .item .ser { font-family: var(--ff-serif); font-style: italic; font-weight: 400; color: var(--accent); } .marquee-track .sep { color: var(--accent2); } @keyframes scroll-x { to { transform: translateX(-50%); } } @media (max-width: 920px) { nav { padding: .9rem 1.2rem; } .nav-center { display: none; } .hero { grid-template-columns: 1fr; padding: 8rem 1.3rem 3rem; gap: 2.5rem; } .portrait-wrap { max-width: 360px; } .section { padding: 4.5rem 1.3rem; } .float-card { scale: .9; } }