/* ============================================================
Handled — Polish Layer
Additive styles that elevate pages toward Linear/Vercel tier.
Opt-in via className. No existing class names touched.
============================================================ */
:root {
--hd-accent: #c3ff3a;
--hd-accent-2: #d9ff78;
--hd-accent-dim: rgba(195, 255, 58, 0.12);
--hd-ink: #0a0a0a;
}
html {
font-feature-settings: "ss01", "cv01", "cv09", "cv11";
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Global grain texture — fixed overlay, never blocks interaction */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: soft-light;
opacity: 0.3;
}
h1, h2, h3, .display {
text-wrap: balance;
letter-spacing: -0.024em;
}
h1, .display { letter-spacing: -0.032em; }
/* ---- Display headline scale (opt-in) ---- */
.display-xl {
font-size: clamp(48px, 9vw, 128px);
line-height: 0.94;
letter-spacing: -0.042em;
font-weight: 800;
}
.display-lg {
font-size: clamp(36px, 6.2vw, 80px);
line-height: 1.0;
letter-spacing: -0.032em;
font-weight: 800;
}
/* ---- Gradient text (opt-in) ---- */
.text-gradient-accent {
background: linear-gradient(135deg, #d9ff78 0%, #c3ff3a 55%, #9ede1f 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.text-gradient-soft {
background: linear-gradient(180deg, #ffffff 0%, #8a8a8a 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ---- Luxury accent CTA (opt-in) ---- */
.btn-accent-lux {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 28px;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.005em;
color: var(--hd-ink);
background: linear-gradient(180deg, #d9ff78 0%, #c3ff3a 100%);
border: 1px solid rgba(255,255,255,0.14);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.45),
0 10px 30px rgba(195,255,58,0.22),
0 0 0 0 rgba(195,255,58,0.5);
transition: transform .25s cubic-bezier(.2,.8,.2,1),
box-shadow .4s ease;
cursor: pointer;
overflow: hidden;
text-decoration: none;
}
.btn-accent-lux::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform .8s ease;
pointer-events: none;
}
.btn-accent-lux:hover {
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.55),
0 16px 44px rgba(195,255,58,0.38),
0 0 0 4px rgba(195,255,58,0.12);
}
.btn-accent-lux:hover::before { transform: translateX(120%); }
.btn-accent-lux:active { transform: translateY(0); }
.btn-ghost-lux {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 26px;
border-radius: 999px;
font-size: 15px;
font-weight: 600;
color: #fff;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
transition: background .25s ease, border-color .25s ease, transform .25s ease;
cursor: pointer;
text-decoration: none;
}
.btn-ghost-lux:hover {
background: rgba(255,255,255,0.07);
border-color: rgba(255,255,255,0.24);
transform: translateY(-1px);
}
/* ---- Glass card (opt-in) ---- */
.glass-card {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-radius: 20px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 12px 40px rgba(0,0,0,0.35);
transition: transform .35s cubic-bezier(.2,.8,.2,1),
border-color .35s ease,
box-shadow .35s ease;
}
.glass-card:hover {
transform: translateY(-3px);
border-color: rgba(195, 255, 58, 0.3);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.1),
0 18px 60px rgba(195,255,58,0.1);
}
/* ---- Eyebrow label (opt-in) ---- */
.eyebrow-lux {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
font-family: 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--hd-accent);
}
.eyebrow-lux::before {
content: "";
width: 24px;
height: 1px;
background: currentColor;
opacity: .5;
}
/* ---- Ambient spotlight (opt-in) ---- */
.hero-spotlight {
position: relative;
isolation: isolate;
}
.hero-spotlight::before {
content: "";
position: absolute;
inset: -20% -10% auto -10%;
height: 80%;
background:
radial-gradient(ellipse at 25% 20%, rgba(195,255,58,0.14), transparent 55%),
radial-gradient(ellipse at 80% 40%, rgba(120,170,255,0.10), transparent 60%);
filter: blur(50px);
pointer-events: none;
z-index: -1;
}
/* ---- Noise overlay (opt-in) ---- */
.noise-overlay {
position: relative;
}
.noise-overlay::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: .4;
pointer-events: none;
}
/* ---- Section rhythm ---- */
.section-y {
padding-block: clamp(72px, 10vw, 140px);
}
/* ---- Scroll reveal polish (extends existing .reveal) ---- */
[data-reveal] {
opacity: 0;
transform: translateY(22px);
transition: opacity .7s cubic-bezier(.2,.8,.2,1),
transform .7s cubic-bezier(.2,.8,.2,1);
will-change: opacity, transform;
}
[data-reveal].is-revealed {
opacity: 1;
transform: translateY(0);
}
[data-reveal-delay="1"].is-revealed { transition-delay: .08s; }
[data-reveal-delay="2"].is-revealed { transition-delay: .16s; }
[data-reveal-delay="3"].is-revealed { transition-delay: .24s; }
[data-reveal-delay="4"].is-revealed { transition-delay: .32s; }
[data-reveal-delay="5"].is-revealed { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
[data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
.btn-accent-lux::before { display: none; }
}