:root {
--bg: #030303;
--fg: #fafafa;
--muted: #a3a3a3;
--border: #1e1e1e;
/* Primary Brand Color - Update this hex to match your logo */
--accent: #FF5F1F;
--panel: rgba(20, 20, 20, 0.4);
}
body {
font-family: "Sarpanch", ui-sans-serif, system-ui, -apple-system, sans-serif;
background-color: var(--bg);
color: var(--fg);
overflow-x: hidden;
margin: 0;
padding: 0;
overscroll-behavior: none;
line-height: 1.6;
transition: background-color 0.8s ease, color 0.8s ease;
}
/* Hero ONLY Font */
.font-display {
font-family: "Orbitron", sans-serif;
letter-spacing: -0.02em;
}
/* Core Resets */
::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; }
/* Typography Mask Reveal Utility */
.line-wrapper {
display: block;
overflow: hidden;
line-height: 1.06;
height: 1.32em;
clip-path: inset(0 0 0 0);
padding: 0;
margin: 0;
}
.line-content {
display: block;
will-change: transform;
}
.will-change-transform {
will-change: transform, opacity, filter;
}
.bg-noise {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.015;
pointer-events: none;
}
/* Nav active state */
.nav-link.is-active {
color: var(--accent);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: var(--accent);
transform: scaleX(0);
transition: transform 0.3s ease;
transform-origin: right;
}
.nav-link:hover::after,
.nav-link.is-active::after {
transform: scaleX(1);
transform-origin: left;
}
/*
* ==========================================
* CLEARER GLASS SLAB
* ==========================================
*/
.section-slab {
max-width: 1320px;
margin: 0 auto;
position: relative;
}
.section-slab::before {
content: "";
position: absolute;
inset: -18px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 46%), rgba(8, 10, 14, 0.16);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 18px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
border-radius: 10px;
pointer-events: none;
z-index: 0;
transition: background 0.8s ease;
}
.section-slab::after {
content: "";
position: absolute;
inset: -18px;
/* Updated radial gradient to match brand color (rgba of FF5F1F) */
background: radial-gradient(900px 320px at 50% 0%, rgba(255, 95, 31, 0.08) 0%, rgba(0, 0, 0, 0.00) 62%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.12) 100%);
opacity: 0.16;
border-radius: 10px;
pointer-events: none;
z-index: 0;
}
@media (max-width: 768px) {
.section-slab::before, .section-slab::after {
inset: 0;
}
}
.section-inner {
position: relative;
z-index: 1;
padding: 88px 28px;
}
@media (min-width: 768px) {
.section-inner {
padding: 120px 52px;
}
}
/*
* ==========================================
* PHASE 2 GRID & SCANLINE
* ==========================================
*/
#phase-2-grid {
opacity: 0.035;
background:
repeating-linear-gradient(
to right,
rgba(255,255,255,0.18) 0px,
rgba(255,255,255,0.18) 1px,
rgba(255,255,255,0.00) 1px,
rgba(255,255,255,0.00) calc(100%/12)
),
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.10) 0px,
rgba(255,255,255,0.10) 1px,
rgba(255,255,255,0.00) 1px,
rgba(255,255,255,0.00) 56px
);
mix-blend-mode: screen;
}
#phase-2-scanline {
top: -10%;
/* Updated scanline to match brand color (rgba of FF5F1F) */
background: rgba(255, 95, 31, 0.55);
opacity: 0.0;
filter: blur(0.2px);
}