/* =================================================================
Caryon — Award-winning design system (dark cinematic)
Inspired by linear.app · vercel.com · stripe.com · raycast.com
================================================================= */
:root {
/* Core palette */
--bg: #0a0a0f;
--bg-2: #0f0f17;
--surface: #14141d;
--surface-2: #1c1c28;
--border: rgba(255,255,255,0.08);
--border-2: rgba(255,255,255,0.14);
--text: #f4f4f5;
--text-2: #a1a1aa;
--text-3: #71717a;
/* Accents */
--purple: #a855f7;
--violet: #8b5cf6;
--blue: #3b82f6;
--pink: #ec4899;
--cyan: #06b6d4;
--amber: #f59e0b;
--green: #10b981;
/* Gradients */
--grad-main: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 50%, #ec4899 100%);
--grad-purple: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
--grad-pink: linear-gradient(135deg, #ec4899 0%, #f59e0b 100%);
--grad-cyan: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
--grad-green: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
/* Glass */
--glass: rgba(255,255,255,0.04);
--glass-strong: rgba(255,255,255,0.08);
--glass-nav: rgba(10,10,15,0.65);
/* Shadow */
--shadow-glow-purple: 0 0 80px rgba(168,85,247,0.35);
--shadow-glow-blue: 0 0 80px rgba(59,130,246,0.30);
--shadow-card: 0 10px 40px -10px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.05) inset;
--shadow-lift: 0 24px 60px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08) inset;
/* Easing */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
}
/* ===== Light theme overrides — applied when =====
Accent colors (purple/blue/pink/etc.) intentionally stay vibrant in both
themes — they pop on light backgrounds too. We only flip neutrals. */
:root[data-theme="light"] {
--bg: #f7f7fb;
--bg-2: #ffffff;
--surface: #ffffff;
--surface-2: #f1f1f6;
--border: rgba(15,15,30,0.10);
--border-2: rgba(15,15,30,0.18);
--text: #18181b;
--text-2: #52525b;
--text-3: #71717a;
--glass: rgba(15,15,30,0.04);
--glass-strong: rgba(15,15,30,0.07);
--glass-nav: rgba(255,255,255,0.78);
--shadow-glow-purple: 0 0 80px rgba(168,85,247,0.18);
--shadow-glow-blue: 0 0 80px rgba(59,130,246,0.15);
--shadow-card: 0 10px 40px -12px rgba(15,15,30,0.18), 0 0 0 1px rgba(15,15,30,0.04) inset;
--shadow-lift: 0 24px 60px -16px rgba(15,15,30,0.25), 0 0 0 1px rgba(15,15,30,0.06) inset;
}
/* Small contrast tweaks that don't translate via variables alone */
:root[data-theme="light"] .glass-nav { border-bottom: 1px solid rgba(15,15,30,0.07); }
:root[data-theme="light"] .nav-btn-ghost { color: var(--text-2); }
:root[data-theme="light"] .nav-btn-ghost:hover { background: rgba(15,15,30,0.05); color: var(--text); }
:root[data-theme="light"] .lang-btn,
:root[data-theme="light"] .theme-btn { border-color: rgba(15,15,30,0.12); color: var(--text-2); }
:root[data-theme="light"] .lang-btn:hover,
:root[data-theme="light"] .theme-btn:hover { background: rgba(15,15,30,0.05); color: var(--text); border-color: rgba(15,15,30,0.20); }
:root[data-theme="light"] .lang-menu { background: rgba(255,255,255,0.95); border-color: rgba(15,15,30,0.10); box-shadow: 0 20px 40px -10px rgba(15,15,30,0.20); }
:root[data-theme="light"] .lang-item { color: var(--text-2); }
:root[data-theme="light"] .lang-item:hover { background: rgba(15,15,30,0.05); color: var(--text); }
:root[data-theme="light"] .lang-item.active { color: var(--purple); background: rgba(168,85,247,0.08); }
/* --- Page-wide aurora background: replace dark mesh with a light tinted one --- */
:root[data-theme="light"] .aurora-bg {
background:
radial-gradient(ellipse 80% 60% at 20% 10%, rgba(168,85,247,0.10) 0%, transparent 60%),
radial-gradient(ellipse 70% 50% at 80% 30%, rgba(59,130,246,0.08) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 50% 90%, rgba(236,72,153,0.07) 0%, transparent 60%),
linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
}
:root[data-theme="light"] .aurora-bg::before {
background-image: radial-gradient(circle, rgba(15,15,30,0.08) 1px, transparent 1px);
}
/* --- Scrolled nav (was rgba(10,10,15,0.85)) --- */
:root[data-theme="light"] .glass-nav.scrolled {
background: rgba(255,255,255,0.92);
box-shadow: 0 8px 32px rgba(15,15,30,0.10);
}
/* --- Mobile menu sheet (was rgba(10,10,15,0.95)) --- */
:root[data-theme="light"] .mobile-menu { background: rgba(255,255,255,0.96); }
:root[data-theme="light"] .mobile-menu a { color: var(--text); }
:root[data-theme="light"] .mobile-menu a:hover { background: rgba(15,15,30,0.05); }
/* --- Hero heading: gradient text was white-to-light-gray; flip to dark-to-mid-gray --- */
:root[data-theme="light"] .hero h1 {
background: linear-gradient(180deg, #0a0a14 0%, #18181b 40%, #52525b 100%);
-webkit-background-clip: text;
background-clip: text;
}
/* --- Buttons that hardcoded `background: white` (made sense on dark bg, invisible in light) --- */
:root[data-theme="light"] .btn-cta-primary,
:root[data-theme="light"] .btn-primary-large {
background: #0a0a14;
color: #ffffff;
}
:root[data-theme="light"] .btn-cta-primary:hover,
:root[data-theme="light"] .btn-primary-large:hover {
background: #18181b;
}
/* --- Code / mock CV preview card uses rgba(255,255,255,0.06) which vanishes on light --- */
:root[data-theme="light"] .mock-window { background: var(--surface); box-shadow: var(--shadow-card); }
:root[data-theme="light"] .mock-window-header { background: var(--surface-2); }
/* --- Section dividers / generic glass blocks --- */
:root[data-theme="light"] .glass-block,
:root[data-theme="light"] [class*="reveal"] [style*="rgba(255,255,255,0.04)"],
:root[data-theme="light"] [class*="reveal"] [style*="rgba(255,255,255,0.06)"] {
background: rgba(15,15,30,0.04) !important;
}
/* --- Bento card surfaces / generic dark-only borders --- */
:root[data-theme="light"] [style*="rgba(255,255,255,0.08)"] { border-color: rgba(15,15,30,0.10) !important; }
/* --- MudBlazor: override its internal palette variables so its own CSS reads light values --- */
:root[data-theme="light"] {
--mud-palette-background: #f7f7fb;
--mud-palette-background-gray: #f1f1f6;
--mud-palette-surface: #ffffff;
--mud-palette-text-primary: #18181b;
--mud-palette-text-secondary: #52525b;
--mud-palette-text-disabled: rgba(15,15,30,0.38);
--mud-palette-action-default: #52525b;
--mud-palette-action-disabled: rgba(15,15,30,0.26);
--mud-palette-lines-default: rgba(15,15,30,0.10);
--mud-palette-lines-inputs: rgba(15,15,30,0.18);
--mud-palette-divider: rgba(15,15,30,0.10);
--mud-palette-table-lines: rgba(15,15,30,0.08);
--mud-palette-table-striped: rgba(15,15,30,0.025);
--mud-palette-table-hover: rgba(15,15,30,0.04);
--mud-palette-drawer-background: #ffffff;
--mud-palette-drawer-text: #18181b;
--mud-palette-appbar-background: #ffffff;
--mud-palette-appbar-text: #18181b;
--mud-palette-overlay-light: rgba(255,255,255,0.85);
}
/* Belt-and-braces: force text inside common Mud surfaces to follow the theme */
:root[data-theme="light"] .mud-paper,
:root[data-theme="light"] .mud-table,
:root[data-theme="light"] .mud-table-cell,
:root[data-theme="light"] .mud-table-cell .mud-typography,
:root[data-theme="light"] .mud-table-head .mud-table-cell,
:root[data-theme="light"] .mud-list-item-text,
:root[data-theme="light"] .mud-input-slot input,
:root[data-theme="light"] .mud-input-slot textarea,
:root[data-theme="light"] .mud-select-input input,
:root[data-theme="light"] .mud-chip { color: var(--text) !important; }
:root[data-theme="light"] .mud-table-head .mud-table-cell { color: var(--text-2) !important; }
:root[data-theme="light"] .mud-input-label,
:root[data-theme="light"] .mud-typography-caption,
:root[data-theme="light"] .mud-typography-subtitle1,
:root[data-theme="light"] .mud-typography-subtitle2 { color: var(--text-2) !important; }
:root[data-theme="light"] .mud-alert-filled-info { color: #1e40af; background: rgba(59,130,246,0.10); }
:root[data-theme="light"] .mud-alert-filled-success { color: #166534; background: rgba(34,197,94,0.10); }
:root[data-theme="light"] .mud-alert-filled-warning { color: #92400e; background: rgba(245,158,11,0.12); }
:root[data-theme="light"] .mud-alert-filled-error { color: #991b1b; background: rgba(239,68,68,0.10); }
:root[data-theme="light"] .mud-table-row:hover { background: rgba(15,15,30,0.03) !important; }
:root[data-theme="light"] .mud-chip { background: rgba(15,15,30,0.06) !important; }
:root[data-theme="light"] .mud-icon-button { color: var(--text-2); }
:root[data-theme="light"] .mud-icon-button:hover { background: rgba(15,15,30,0.06); color: var(--text); }
:root[data-theme="light"] .mud-menu-item { color: var(--text); }
:root[data-theme="light"] .mud-menu-item:hover { background: rgba(15,15,30,0.05); }
:root[data-theme="light"] .mud-popover { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border); }
/* --- Footer + any background:#0a0a... hardcoded slabs --- */
:root[data-theme="light"] [style*="background:#0a"],
:root[data-theme="light"] [style*="background: #0a"],
:root[data-theme="light"] [style*="background:#11"],
:root[data-theme="light"] [style*="background: #11"] {
background: var(--surface) !important;
color: var(--text) !important;
}
/* Smooth theme transition (only after first paint to avoid initial flash) */
html.theme-ready, html.theme-ready * {
transition: background-color .25s ease, color .2s ease, border-color .2s ease;
}
* { scroll-behavior: smooth; box-sizing: border-box; }
html, body {
background: var(--bg);
color: var(--text);
font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
margin: 0;
overflow-x: hidden;
}
/* ============================================================
CUSTOM CURSOR (desktop only)
Positioned via left/top + negative margin centring.
Avoids `transform` so JS doesn't fight CSS.
============================================================ */
@media (hover: hover) and (pointer: fine) {
.cursor-dot, .cursor-ring {
position: fixed;
left: 0; top: 0;
pointer-events: none;
z-index: 9999;
border-radius: 50%;
mix-blend-mode: difference;
opacity: 0;
will-change: left, top;
}
.cursor-dot {
width: 8px; height: 8px;
background: white;
margin: -4px 0 0 -4px;
transition: opacity .25s ease;
}
.cursor-ring {
width: 36px; height: 36px;
border: 1.5px solid rgba(255,255,255,0.7);
margin: -18px 0 0 -18px;
transition: opacity .25s ease,
width .25s var(--ease-out),
height .25s var(--ease-out),
margin .25s var(--ease-out),
background .25s ease,
border-color .25s ease;
}
.cursor-ring.hover {
width: 64px; height: 64px;
margin: -32px 0 0 -32px;
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.5);
}
/* hide native cursor only when JS confirms cursor is active */
body.has-cursor, body.has-cursor * { cursor: none !important; }
body.has-cursor input, body.has-cursor textarea, body.has-cursor [contenteditable] { cursor: text !important; }
}
@media (hover: none), (pointer: coarse) {
.cursor-dot, .cursor-ring { display: none !important; }
}
/* ============================================================
ANIMATED SVG GRID OVERLAY
============================================================ */
.grid-overlay {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 20%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 20%, transparent 80%);
animation: gridBreath 12s ease-in-out infinite;
}
@keyframes gridBreath {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.02); }
}
/* ============================================================
GRAIN texture overlay (filmic)
============================================================ */
.grain {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.04;
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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
}
/* ============================================================
MOUSE SPOTLIGHT (radial follower)
============================================================ */
.spotlight {
position: fixed;
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, rgba(168,85,247,0.05) 30%, transparent 70%);
pointer-events: none;
z-index: 2;
transform: translate(-50%, -50%);
transition: opacity .3s ease;
opacity: 0;
will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
body:hover .spotlight { opacity: 1; }
}
/* ============================================================
PAGE BACKGROUND — Aurora mesh
============================================================ */
.aurora-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 80% 60% at 20% 10%, rgba(168,85,247,0.18) 0%, transparent 60%),
radial-gradient(ellipse 70% 50% at 80% 30%, rgba(59,130,246,0.15) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 50% 90%, rgba(236,72,153,0.13) 0%, transparent 60%),
radial-gradient(ellipse 100% 70% at 50% 50%, rgba(10,10,15,1) 0%, rgba(10,10,15,0.85) 60%, var(--bg) 100%);
}
/* Subtle dot grid */
.aurora-bg::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
}
main.page-content { position: relative; z-index: 1; }
/* ============================================================
GLASS TOP NAV
============================================================ */
.glass-nav {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
width: calc(100% - 32px);
max-width: 1240px;
background: var(--glass-nav);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid var(--border);
border-radius: 999px;
padding: 10px 16px 10px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
transition: top .3s var(--ease-out), background .3s ease;
}
.glass-nav.scrolled {
background: rgba(10,10,15,0.85);
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.nav-logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--text);
font-weight: 700;
font-size: 1.05rem;
}
.nav-logo-dot {
width: 28px; height: 28px;
border-radius: 8px;
background: var(--grad-main);
background-size: 200% 200%;
animation: gradFlow 6s linear infinite;
box-shadow: 0 0 20px rgba(168,85,247,0.4);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
font-weight: 800;
}
.nav-links {
display: flex;
gap: 4px;
align-items: center;
}
.nav-links a {
color: var(--text-2);
text-decoration: none;
font-size: 0.92rem;
font-weight: 500;
padding: 8px 14px;
border-radius: 999px;
transition: color .2s ease, background .2s ease;
}
.nav-links a:hover { color: var(--text); background: var(--glass); }
.nav-links a.active { color: var(--text); background: var(--glass-strong); }
.nav-cta { display: flex; gap: 8px; align-items: center; }
.nav-btn {
padding: 8px 18px;
border-radius: 999px;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
border: none;
cursor: pointer;
transition: all .2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.nav-btn-ghost { color: var(--text-2); background: transparent; }
.nav-btn-ghost:hover { color: var(--text); background: var(--glass); }
.nav-btn-primary {
color: var(--bg);
background: var(--text);
}
.nav-btn-primary:hover {
color: var(--bg);
background: white;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(255,255,255,0.15);
}
.nav-hamburger {
display: none;
background: transparent;
border: 1px solid var(--border);
color: var(--text);
width: 40px; height: 40px;
border-radius: 12px;
cursor: pointer;
align-items: center;
justify-content: center;
}
/* Mobile menu overlay */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 99;
background: rgba(10,10,15,0.95);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
opacity: 0;
pointer-events: none;
transition: opacity .35s var(--ease-out);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
padding: 24px;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
color: var(--text);
text-decoration: none;
font-size: 1.75rem;
font-weight: 600;
padding: 12px 24px;
border-radius: 12px;
transition: background .2s;
opacity: 0;
transform: translateY(20px);
transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), background .2s;
}
.mobile-menu.open a {
opacity: 1;
transform: translateY(0);
}
.mobile-menu.open a:nth-child(1) { transition-delay: .05s; }
.mobile-menu.open a:nth-child(2) { transition-delay: .1s; }
.mobile-menu.open a:nth-child(3) { transition-delay: .15s; }
.mobile-menu.open a:nth-child(4) { transition-delay: .2s; }
.mobile-menu.open a:nth-child(5) { transition-delay: .25s; }
.mobile-menu.open a:nth-child(6) { transition-delay: .3s; }
.mobile-menu.open a:nth-child(7) { transition-delay: .35s; }
.mobile-menu.open a:nth-child(8) { transition-delay: .4s; }
.mobile-menu a:hover { background: var(--glass); }
@media (max-width: 880px) {
.nav-links { display: none; }
.nav-cta .nav-btn-ghost { display: none; }
.nav-hamburger { display: inline-flex; }
}
@media (max-width: 480px) {
.glass-nav { padding: 8px 8px 8px 18px; }
.nav-logo span { font-size: .95rem; }
}
/* ============================================================
PAGE LAYOUT
============================================================ */
.page-shell {
max-width: 1240px;
margin: 0 auto;
padding: 100px 24px 80px;
}
@media (max-width: 600px) {
.page-shell { padding: 90px 16px 60px; }
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
padding: 60px 0 80px;
text-align: center;
}
.hero-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px 6px 8px;
border-radius: 999px;
background: var(--glass);
border: 1px solid var(--border);
color: var(--text-2);
font-size: 0.82rem;
font-weight: 500;
backdrop-filter: blur(8px);
margin-bottom: 32px;
}
.hero-pill-badge {
background: var(--grad-main);
color: white;
padding: 2px 10px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.hero h1 {
font-size: clamp(2.75rem, 8vw, 6.5rem);
font-weight: 800;
line-height: 0.98;
letter-spacing: -0.045em;
margin: 0 0 24px;
background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #a1a1aa 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero h1 .grad {
background: var(--grad-main);
background-size: 200% 200%;
animation: gradFlow 6s linear infinite;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-style: italic;
font-weight: 600;
}
.hero p {
font-size: clamp(1rem, 2vw, 1.25rem);
color: var(--text-2);
max-width: 640px;
margin: 0 auto 40px;
line-height: 1.6;
}
.hero-cta {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 24px;
}
.hero-meta {
color: var(--text-3);
font-size: 0.85rem;
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
@keyframes gradFlow {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 24px;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: all .25s var(--ease-out);
white-space: nowrap;
}
.btn-primary {
background: var(--text);
color: var(--bg);
box-shadow: 0 4px 16px rgba(255,255,255,0.1), 0 1px 0 rgba(0,0,0,0.2) inset;
}
.btn-primary:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(255,255,255,0.18);
}
.btn-secondary {
background: var(--glass);
color: var(--text);
border-color: var(--border);
backdrop-filter: blur(8px);
}
.btn-secondary:hover {
background: var(--glass-strong);
border-color: var(--border-2);
transform: translateY(-2px);
}
.btn-gradient {
background: var(--grad-main);
background-size: 200% 200%;
color: white;
animation: gradFlow 6s linear infinite;
box-shadow: 0 8px 24px rgba(168,85,247,0.35);
}
.btn-gradient:hover {
transform: translateY(-2px);
box-shadow: 0 12px 36px rgba(168,85,247,0.5);
}
.btn-arrow { transition: transform .25s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }
/* ============================================================
GLASS CARD
============================================================ */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 24px;
padding: 32px;
transition: border-color .3s ease, transform .4s var(--ease-out), box-shadow .4s ease;
position: relative;
overflow: hidden;
}
.card:hover {
border-color: var(--border-2);
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
}
.card-glass {
position: relative;
background:
radial-gradient(ellipse 80% 100% at 50% 0%, rgba(168,85,247,0.08), transparent 70%),
var(--glass);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border-radius: 32px;
padding: 40px 32px;
/* Gradient ring (no harsh border) + ambient floor glow */
box-shadow:
0 0 0 1px var(--border) inset,
0 30px 80px -40px rgba(168,85,247,0.5),
0 60px 120px -50px rgba(59,130,246,0.35);
}
.card-glass::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(168,85,247,0.4), transparent 40%, transparent 60%, rgba(59,130,246,0.35));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0.55;
}
:root[data-theme="light"] .card-glass {
background:
radial-gradient(ellipse 80% 100% at 50% 0%, rgba(168,85,247,0.06), transparent 70%),
rgba(255,255,255,0.7);
box-shadow:
0 0 0 1px rgba(15,15,30,0.06) inset,
0 30px 80px -40px rgba(168,85,247,0.30),
0 60px 120px -60px rgba(59,130,246,0.20);
}
/* glow ring on hover */
.card-glow {
position: relative;
}
.card-glow::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--grad-main);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .3s ease;
}
.card-glow:hover::before { opacity: 1; }
/* ============================================================
BENTO GRID (Apple-style asymmetric)
============================================================ */
.bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(220px, auto);
gap: 20px;
margin: 32px 0;
}
.bento-item { grid-column: span 2; }
.bento-item-wide { grid-column: span 3; }
.bento-item-xl { grid-column: span 4; }
.bento-item-full { grid-column: span 6; }
.bento-item-tall { grid-row: span 2; }
@media (max-width: 900px) {
.bento { grid-template-columns: repeat(2, 1fr); }
.bento-item, .bento-item-wide, .bento-item-xl, .bento-item-full { grid-column: span 2; }
.bento-item-tall { grid-row: auto; }
}
@media (max-width: 520px) {
.bento { grid-template-columns: 1fr; }
.bento-item, .bento-item-wide, .bento-item-xl, .bento-item-full { grid-column: span 1; }
}
.bento-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 24px;
padding: 28px;
position: relative;
overflow: hidden;
transition: transform .5s var(--ease-out), border-color .3s ease, background .3s ease;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: default;
}
.bento-card:hover {
transform: translateY(-4px);
border-color: var(--border-2);
background: var(--surface-2);
}
.bento-card-icon {
width: 48px; height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.bg-grad-purple { background: var(--grad-purple); }
.bg-grad-pink { background: var(--grad-pink); }
.bg-grad-cyan { background: var(--grad-cyan); }
.bg-grad-green { background: var(--grad-green); }
.bento-card h3 {
font-size: 1.35rem;
font-weight: 600;
color: var(--text);
margin: 0 0 8px;
letter-spacing: -0.01em;
}
.bento-card p {
color: var(--text-2);
line-height: 1.55;
font-size: 0.95rem;
margin: 0;
}
/* Decorative glow inside bento */
.bento-card::after {
content: "";
position: absolute;
bottom: -60px;
right: -60px;
width: 200px; height: 200px;
border-radius: 50%;
opacity: 0;
transition: opacity .5s ease;
pointer-events: none;
}
.bento-card-glow-purple::after { background: radial-gradient(circle, rgba(168,85,247,0.5), transparent 70%); }
.bento-card-glow-pink::after { background: radial-gradient(circle, rgba(236,72,153,0.5), transparent 70%); }
.bento-card-glow-cyan::after { background: radial-gradient(circle, rgba(6,182,212,0.5), transparent 70%); }
.bento-card-glow-green::after { background: radial-gradient(circle, rgba(16,185,129,0.5), transparent 70%); }
.bento-card:hover::after { opacity: 0.6; }
/* ============================================================
SECTION TITLES
============================================================ */
.section { padding: 80px 0; }
.section-eyebrow {
text-align: center;
color: var(--purple);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 16px;
}
.section-title {
text-align: center;
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--text);
margin: 0 0 16px;
max-width: 720px;
margin-inline: auto;
}
.section-sub {
text-align: center;
font-size: 1.05rem;
color: var(--text-2);
max-width: 600px;
margin: 0 auto 48px;
line-height: 1.6;
}
/* ============================================================
STATS
============================================================ */
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 700px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
.stat {
text-align: center;
padding: 24px 16px;
border-left: 1px solid var(--border);
}
.stat:first-child { border-left: none; }
@media (max-width: 700px) { .stat { border-left: none; border-top: 1px solid var(--border); padding: 24px; }
.stat:first-child, .stat:nth-child(2) { border-top: none; } }
.stat-value {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
background: var(--grad-main);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gradFlow 8s linear infinite;
}
.stat-label {
color: var(--text-3);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 4px;
}
/* ============================================================
TIMELINE — process steps
============================================================ */
.steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 48px;
}
@media (max-width: 800px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
.step {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 28px 24px;
position: relative;
transition: transform .4s var(--ease-out), border-color .3s ease;
}
.step:hover {
transform: translateY(-4px);
border-color: var(--border-2);
}
.step-number {
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
background: var(--grad-main);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: 0.4;
margin-bottom: 16px;
}
.step h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
margin: 0 0 8px;
}
.step p {
color: var(--text-2);
font-size: 0.92rem;
line-height: 1.55;
margin: 0;
}
/* ============================================================
PRICING (dark glass)
============================================================ */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 32px;
}
@media (max-width: 880px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.pricing-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 24px;
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 18px;
transition: transform .5s var(--ease-out), border-color .3s ease, box-shadow .4s ease;
position: relative;
overflow: hidden;
}
.pricing-card:hover {
transform: translateY(-6px);
border-color: var(--border-2);
box-shadow: 0 30px 60px -15px rgba(0,0,0,0.7);
}
.pricing-card.featured {
border-color: rgba(168,85,247,0.5);
background: linear-gradient(180deg, rgba(168,85,247,0.06) 0%, var(--surface) 100%);
}
.pricing-card.featured::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--grad-main);
}
.pricing-badge {
position: absolute;
top: 20px; right: 20px;
background: var(--grad-main);
color: white;
padding: 4px 12px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pricing-tier {
font-size: 0.9rem;
color: var(--text-2);
font-weight: 500;
}
.pricing-price {
display: flex;
align-items: baseline;
gap: 8px;
}
.pricing-price .amount {
font-size: 3.5rem;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--text);
line-height: 1;
}
.pricing-price .per { color: var(--text-3); font-size: 0.95rem; }
.pricing-tagline { color: var(--text-2); font-size: 0.95rem; margin-bottom: 8px; }
.pricing-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.pricing-features li {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--text-2);
font-size: 0.92rem;
line-height: 1.5;
}
.pricing-features li::before {
content: "";
flex-shrink: 0;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--grad-main);
margin-top: 1px;
background-image: var(--grad-main), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6 10.5L3.5 8l-1 1L6 12.5l8-8-1-1z'/%3E%3C/svg%3E");
background-blend-mode: normal;
background-size: cover;
}
.pricing-action {
margin-top: auto;
padding-top: 16px;
}
/* ============================================================
RECRUITER SECTION (cinematic)
============================================================ */
.recruiter-block {
background: linear-gradient(135deg, rgba(168,85,247,0.08) 0%, rgba(59,130,246,0.06) 100%);
border: 1px solid var(--border);
border-radius: 32px;
padding: 60px;
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
@media (max-width: 880px) { .recruiter-block { grid-template-columns: 1fr; padding: 40px 28px; } }
.candidate-mock {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 20px;
box-shadow: var(--shadow-card);
}
.candidate-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-radius: 10px;
background: var(--surface-2);
margin-top: 8px;
}
.candidate-row:first-child { margin-top: 0; }
.candidate-name { color: var(--text); font-weight: 500; font-size: 0.92rem; }
.candidate-score {
font-weight: 700;
font-family: 'JetBrains Mono', monospace;
font-size: 0.92rem;
}
.score-good { color: var(--green); }
.score-mid { color: var(--amber); }
/* ============================================================
MARQUEE
============================================================ */
.marquee {
overflow: hidden;
padding: 24px 0;
mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee-inner {
display: flex;
gap: 64px;
animation: marquee 30s linear infinite;
white-space: nowrap;
width: fit-content;
}
.marquee-inner span {
color: var(--text-3);
font-weight: 600;
font-size: 1.1rem;
letter-spacing: 0.08em;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ============================================================
SCROLL REVEAL
============================================================ */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-up { transform: translateY(30px); }
.reveal-scale { transform: scale(.92); }
.reveal.in-view.reveal-scale { transform: scale(1); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .40s; }
.reveal-delay-6 { transition-delay: .48s; }
/* ============================================================
PAGE ORBS — reusable ambient background layer for ANY page.
Drop
right after the page header to add soft drifting gradient blobs.
============================================================ */
.page-orbs {
/* Fixed to the VIEWPORT (not the constrained page-shell) so the
gradient blobs bleed edge-to-edge instead of clipping to a
rectangle and creating a visible "box" outline behind the hero. */
position: fixed;
inset: 0 0 auto 0;
height: 720px;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.page-orbs span {
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: 0.45;
animation: orbFloat 22s ease-in-out infinite;
}
.page-orbs span:nth-child(1) { width: 360px; height: 360px; top: -100px; left: -80px;
background: radial-gradient(circle, rgba(168,85,247,0.5), transparent 70%); }
.page-orbs span:nth-child(2) { width: 460px; height: 460px; top: 60px; right: -120px;
background: radial-gradient(circle, rgba(59,130,246,0.4), transparent 70%);
animation-delay: -8s; }
.page-orbs span:nth-child(3) { width: 280px; height: 280px; top: 240px; left: 38%;
background: radial-gradient(circle, rgba(236,72,153,0.35), transparent 70%);
animation-delay: -14s; }
:root[data-theme="light"] .page-orbs span { opacity: 0.32; }
/* ============================================================
SECTION WAVE — soft SVG-like wave divider between sections.
Use as
============================================================ */
.section-wave {
position: relative;
height: 80px;
margin: 0 -16px;
pointer-events: none;
overflow: hidden;
}
.section-wave::before, .section-wave::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 80%; height: 1px;
transform: translate(-50%, -50%);
background: linear-gradient(90deg, transparent 0%, rgba(168,85,247,0.4) 50%, transparent 100%);
}
.section-wave::after {
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(168,85,247,0.15), transparent 70%);
filter: blur(20px);
}
/* ============================================================
JOB CARD GLOW — gradient halo on hover
============================================================ */
.job-card, [class*="job-listing"], .mud-paper.job-row {
position: relative;
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.job-card::before, [class*="job-listing"]::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(168,85,247,0.6), rgba(59,130,246,0.6));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .25s ease;
pointer-events: none;
}
.job-card:hover, [class*="job-listing"]:hover {
transform: translateY(-4px);
box-shadow: 0 30px 60px -20px rgba(168,85,247,0.30);
}
.job-card:hover::before, [class*="job-listing"]:hover::before { opacity: 1; }
/* ============================================================
FEATURED PRICING CARD — outer glow halo only (no inside bleed)
We do NOT use a ::after pseudo-element with negative z-index because
.pricing-card has overflow:hidden, which clips the pseudo INSIDE the
card and bleeds the gradient across the content. Instead we use a
stack of box-shadows for the same "this one stands out" feel, plus
a stronger gradient border via the existing ::before.
============================================================ */
.pricing-card.featured {
box-shadow:
0 0 0 1px rgba(168,85,247,0.55) inset,
0 30px 80px -30px rgba(168,85,247,0.45),
0 60px 120px -50px rgba(59,130,246,0.30);
}
.pricing-card.featured:hover {
box-shadow:
0 0 0 1px rgba(168,85,247,0.65) inset,
0 36px 90px -28px rgba(168,85,247,0.55),
0 70px 140px -50px rgba(59,130,246,0.40),
0 30px 60px -15px rgba(0,0,0,0.7);
}
/* Slightly thicker animated top accent (the existing ::before keeps the
colorful gradient bar at the top of the card). */
.pricing-card.featured::before {
height: 2px;
background-size: 200% 200%;
animation: gradFlow 6s linear infinite;
}
/* ============================================================
HERO ORBS — handled by .page-orbs (positioned at the top of the
page, OUTSIDE the constrained-width .hero so the soft gradients
bleed full-bleed across the viewport instead of clipping to a
rectangle and creating a visible "box" outline).
The orbFloat keyframe is reused by .page-orbs span (above).
============================================================ */
@keyframes orbFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -30px) scale(1.10); }
66% { transform: translate(-30px, 40px) scale(0.95); }
}
.hero-content, .hero > .reveal { position: relative; z-index: 1; }
/* ============================================================
MARQUEE STRIP — endlessly scrolling feature keywords
Borderless on purpose so it FEELS like a flowing river of words,
not a horizontal box. Top + bottom edges fade out via gradients.
============================================================ */
.marquee-strip {
position: relative;
margin: 32px 0 24px;
padding: 18px 0;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
/* Soft gradient "halo" behind the marquee — no hard edges */
.marquee-strip::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 100% at 50% 50%, rgba(168,85,247,0.07), transparent 70%),
radial-gradient(ellipse 30% 100% at 10% 50%, rgba(59,130,246,0.05), transparent 70%),
radial-gradient(ellipse 30% 100% at 90% 50%, rgba(236,72,153,0.05), transparent 70%);
pointer-events: none;
z-index: 0;
}
.marquee-track { position: relative; z-index: 1; }
:root[data-theme="light"] .marquee-strip::before {
background:
radial-gradient(ellipse 60% 100% at 50% 50%, rgba(168,85,247,0.05), transparent 70%),
radial-gradient(ellipse 30% 100% at 10% 50%, rgba(59,130,246,0.04), transparent 70%),
radial-gradient(ellipse 30% 100% at 90% 50%, rgba(236,72,153,0.04), transparent 70%);
}
.marquee-track {
display: inline-flex;
align-items: center;
gap: 40px;
white-space: nowrap;
animation: marqueeSlide 40s linear infinite;
will-change: transform;
}
.marquee-item {
display: inline-flex; align-items: center; gap: 10px;
color: var(--text-2);
font-size: 0.92rem; font-weight: 600;
letter-spacing: 0.01em;
}
.marquee-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--grad-main);
box-shadow: 0 0 12px rgba(168,85,247,0.5);
flex-shrink: 0;
}
@keyframes marqueeSlide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
/* ============================================================
PREMIUM BUTTON SHEEN — moving shine across primary CTAs
============================================================ */
.btn-primary, .btn-cta-primary, .acct-btn-primary {
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn-primary::after, .btn-cta-primary::after, .acct-btn-primary::after {
content: "";
position: absolute;
top: 0; left: -120%;
width: 80%; height: 100%;
background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.45) 50%, transparent 75%);
transform: skewX(-20deg);
transition: left .9s var(--ease-out);
pointer-events: none;
z-index: 1;
}
.btn-primary:hover::after, .btn-cta-primary:hover::after, .acct-btn-primary:hover::after {
left: 120%;
}
.btn-primary > *, .btn-cta-primary > *, .acct-btn-primary > * { position: relative; z-index: 2; }
/* ============================================================
MOCKUP BAR FILL — animate to 87% when scrolled into view
============================================================ */
.reveal.in-view .mockup-bar-fill {
animation: barFill 1.6s var(--ease-out) both;
}
@keyframes barFill {
0% { width: 0%; opacity: 0.4; }
100% { width: 87%; opacity: 1; }
}
/* ============================================================
SCORE NUMBER — soft neon halo
============================================================ */
.mockup-score {
position: relative;
text-shadow:
0 0 24px rgba(168,85,247,0.45),
0 0 60px rgba(59,130,246,0.20);
}
:root[data-theme="light"] .mockup-score {
text-shadow:
0 0 18px rgba(168,85,247,0.30),
0 0 40px rgba(59,130,246,0.15);
}
/* ============================================================
TILT — smoother transform for the mockup
============================================================ */
.tilt {
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
transform-style: preserve-3d;
will-change: transform;
}
.tilt:hover { box-shadow: var(--shadow-lift); }
/* Pulse dot */
.pulse-dot {
width: 8px; height: 8px;
background: var(--green);
border-radius: 50%;
display: inline-block;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
70% { box-shadow: 0 0 0 12px rgba(16,185,129,0); }
100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
/* ============================================================
CTA STRIP
============================================================ */
.cta-block {
text-align: center;
padding: 80px 32px;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(168,85,247,0.25), transparent 70%),
radial-gradient(ellipse 80% 60% at 50% 100%, rgba(59,130,246,0.2), transparent 70%),
var(--surface);
border: 1px solid var(--border);
border-radius: 32px;
position: relative;
overflow: hidden;
}
.cta-block h2 {
font-size: clamp(1.8rem, 4.5vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--text);
margin: 0 0 16px;
}
.cta-block p {
color: var(--text-2);
max-width: 540px;
margin: 0 auto 32px;
font-size: 1.05rem;
line-height: 1.6;
}
/* ============================================================
FOOTER
============================================================ */
.footer {
border-top: 1px solid var(--border);
margin-top: 80px;
padding: 40px 24px;
text-align: center;
color: var(--text-3);
font-size: 0.88rem;
}
/* ============================================================
MUDBLAZOR DARK OVERRIDES
(so dashboard/CV/admin pages match)
============================================================ */
.mud-paper {
background: var(--surface) !important;
color: var(--text) !important;
border: 1px solid var(--border);
border-radius: 16px !important;
}
.mud-card {
background: var(--surface) !important;
color: var(--text) !important;
border: 1px solid var(--border);
border-radius: 20px !important;
}
.mud-typography { color: inherit; }
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { color: var(--text); }
.mud-typography-body1, .mud-typography-body2 { color: var(--text); }
.mud-typography-subtitle1, .mud-typography-subtitle2,
.mud-typography-caption { color: var(--text-2); }
.mud-input-control .mud-input-outlined-border { border-color: var(--border-2) !important; }
.mud-input-control .mud-input-label,
.mud-input-control input,
.mud-input-control textarea { color: var(--text) !important; }
.mud-table { background: var(--surface) !important; color: var(--text) !important; }
.mud-table-cell { color: var(--text); border-color: var(--border); }
.mud-table-head .mud-table-cell { color: var(--text-2); font-weight: 600; }
.mud-table-row:hover { background: var(--surface-2) !important; }
.mud-divider { background-color: var(--border) !important; }
.mud-chip { background: var(--glass-strong) !important; color: var(--text) !important; }
.mud-alert { border: 1px solid var(--border); }
.mud-progress-circular-svg circle { stroke: var(--purple); }
.mud-button-filled.mud-button-filled-primary { background: var(--grad-main); }
.mud-nav-link.active-hover { background: var(--glass) !important; }
.mud-list-item:hover { background: var(--glass) !important; }
/* hide MudAppBar / Drawer globally since we use top nav */
.mud-appbar, .mud-drawer { display: none !important; }
.mud-main-content { padding: 0 !important; }
.mud-layout { background: transparent !important; }
/* ============================================================
AUTH PAGES (custom)
============================================================ */
.auth-shell {
min-height: 100vh;
background: var(--bg);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.auth-aurora {
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(ellipse 60% 50% at 20% 30%, rgba(168,85,247,0.25), transparent 60%),
radial-gradient(ellipse 50% 40% at 80% 70%, rgba(59,130,246,0.2), transparent 60%);
}
/* ============================================================
UTILITIES
============================================================ */
.text-grad { background: var(--grad-main); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-center { text-align: center; }
.muted { color: var(--text-2); }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.mb-6 { margin-bottom: 48px; }
/* Magnetic effect helper (JS adds inline transform) */
.magnetic { transition: transform .15s linear; will-change: transform; }
/* ============================================================
HERO LAYOUT WITH PRODUCT MOCKUP
============================================================ */
.hero-split {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 60px;
align-items: center;
padding: 60px 0 80px;
}
.hero-split .hero-content { text-align: left; }
.hero-split .hero-content h1 { text-align: left; margin-left: 0; }
.hero-split .hero-content p { margin-left: 0; margin-right: auto; }
.hero-split .hero-cta { justify-content: flex-start; }
.hero-split .hero-meta { justify-content: flex-start; }
.hero-split .hero-pill { margin-bottom: 24px; }
@media (max-width: 980px) {
.hero-split { grid-template-columns: 1fr; gap: 40px; padding-top: 30px; }
.hero-split .hero-content { text-align: center; }
.hero-split .hero-content h1 { text-align: center; }
.hero-split .hero-cta { justify-content: center; }
.hero-split .hero-meta { justify-content: center; }
}
/* Animated product mockup card (CV → AI analysis preview) */
.mockup {
position: relative;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
border: 1px solid var(--border-2);
border-radius: 20px;
padding: 20px;
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 60px rgba(168,85,247,0.15);
animation: floatY 6s ease-in-out infinite;
transform-style: preserve-3d;
}
.mockup::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: var(--grad-main);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.4;
pointer-events: none;
}
@keyframes floatY {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
.mockup-window {
display: flex; align-items: center; gap: 6px;
padding: 10px 4px 14px;
border-bottom: 1px solid var(--border);
margin-bottom: 14px;
}
.mockup-dot { width:10px; height:10px; border-radius:50%; }
.mockup-dot.r { background:#ff5f57; }
.mockup-dot.y { background:#febc2e; }
.mockup-dot.g { background:#28c840; }
.mockup-title {
margin-left: 12px;
color: var(--text-3);
font-size: 0.78rem;
font-family: 'JetBrains Mono', monospace;
}
.mockup-score-row {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.mockup-label { color: var(--text-2); font-size: 0.82rem; }
.mockup-score {
font-size: 2.6rem;
font-weight: 700;
letter-spacing: -0.02em;
background: var(--grad-main);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
}
.mockup-score-good { color: var(--green); }
.mockup-bar {
height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden;
margin-bottom: 16px;
}
.mockup-bar-fill {
height: 100%;
background: var(--grad-main);
border-radius: 99px;
width: 0;
animation: fillBar 2.4s cubic-bezier(0.16,1,0.3,1) .5s forwards;
}
@keyframes fillBar { to { width: 87%; } }
.mockup-skill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.78rem;
margin: 0 4px 6px 0;
background: rgba(16,185,129,0.12);
color: #34d399;
border: 1px solid rgba(16,185,129,0.25);
opacity: 0;
animation: pop .4s var(--ease-out) forwards;
}
.mockup-skill.missing {
background: rgba(239,68,68,0.1);
color: #f87171;
border-color: rgba(239,68,68,0.25);
}
.mockup-skill:nth-child(1){ animation-delay: 1.0s; }
.mockup-skill:nth-child(2){ animation-delay: 1.15s; }
.mockup-skill:nth-child(3){ animation-delay: 1.3s; }
.mockup-skill:nth-child(4){ animation-delay: 1.45s; }
.mockup-skill:nth-child(5){ animation-delay: 1.6s; }
.mockup-skill:nth-child(6){ animation-delay: 1.75s; }
@keyframes pop {
0% { opacity:0; transform: scale(.8) translateY(8px); }
100% { opacity:1; transform: scale(1) translateY(0); }
}
.mockup-section {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.mockup-section-label {
color: var(--text-3);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 10px;
}
/* Typing cursor caret */
.caret {
display: inline-block;
width: 3px;
height: 1em;
background: var(--purple);
margin-left: 4px;
vertical-align: text-bottom;
animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
/* ============================================================
CONIC ROTATING BORDER (glow halo)
============================================================ */
.conic-border {
position: relative;
border-radius: 24px;
background: var(--surface);
isolation: isolate;
}
.conic-border::before {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
background: conic-gradient(from 0deg,
transparent 0deg, transparent 90deg,
rgba(168,85,247,0.8) 120deg,
rgba(59,130,246,0.8) 180deg,
rgba(236,72,153,0.8) 240deg,
transparent 270deg, transparent 360deg);
animation: spin 8s linear infinite;
z-index: -1;
filter: blur(8px);
opacity: 0.6;
}
.conic-border::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--surface);
z-index: -1;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ============================================================
COMPARISON TABLE (us vs others)
============================================================ */
.compare-table {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 24px;
overflow: hidden;
margin-top: 32px;
}
.compare-table table {
width: 100%;
border-collapse: collapse;
}
.compare-table th, .compare-table td {
padding: 18px 24px;
text-align: left;
border-bottom: 1px solid var(--border);
color: var(--text);
font-size: 0.95rem;
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table thead th {
color: var(--text-2);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
background: var(--surface-2);
}
.compare-table thead th.us {
background: linear-gradient(180deg, rgba(168,85,247,0.15), rgba(168,85,247,0.05));
color: var(--text);
position: relative;
}
.compare-table thead th.us::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--grad-main);
}
.compare-table .feat { color: var(--text-2); font-size: 0.9rem; }
.compare-table .check {
color: var(--green);
font-weight: 700;
text-align: center;
font-size: 1.2rem;
}
.compare-table .cross {
color: rgba(239,68,68,0.7);
text-align: center;
font-size: 1.2rem;
}
.compare-table .partial {
color: var(--amber);
text-align: center;
font-size: 1rem;
}
.compare-table .col-us {
background: rgba(168,85,247,0.04);
}
@media (max-width: 720px) {
.compare-table th, .compare-table td { padding: 12px 14px; font-size: .85rem; }
}
/* ============================================================
CODE BLOCK / TERMINAL
============================================================ */
.terminal {
background: #0a0a12;
border: 1px solid var(--border-2);
border-radius: 16px;
font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
font-size: 0.88rem;
line-height: 1.65;
overflow: hidden;
box-shadow: 0 20px 60px -20px rgba(0,0,0,0.8);
}
.terminal-head {
display: flex; align-items: center; gap: 6px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: rgba(255,255,255,0.02);
}
.terminal-head .dot { width: 11px; height: 11px; border-radius: 50%; }
.terminal-head .title { margin-left: 12px; color: var(--text-3); font-size: 0.78rem; }
.terminal-body { padding: 20px 22px; color: var(--text); }
.tk-c { color: #71717a; } /* comment */
.tk-k { color: #f472b6; } /* keyword */
.tk-s { color: #fbbf24; } /* string */
.tk-n { color: #a78bfa; } /* name */
.tk-p { color: #34d399; } /* punctuation/positive */
.terminal-body .line { display: block; }
.terminal-body .prompt { color: var(--purple); margin-right: 8px; }
/* ============================================================
PRIVACY / TRUST CALLOUT
============================================================ */
.trust-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
@media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-list {
list-style: none;
padding: 0;
margin: 24px 0 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.trust-list li {
display: flex;
gap: 14px;
color: var(--text-2);
line-height: 1.55;
font-size: 0.95rem;
}
.trust-list .icon {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 10px;
background: var(--surface-2);
border: 1px solid var(--border-2);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
color: var(--purple);
}
.trust-list strong { color: var(--text); font-weight: 500; display: block; }
/* ============================================================
TESTIMONIALS (kept class in case used elsewhere)
============================================================ */
.testimonials {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 32px;
}
@media (max-width: 900px) { .testimonials { grid-template-columns: 1fr; } }
.testimonial {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 28px;
transition: transform .4s var(--ease-out), border-color .3s ease;
position: relative;
}
.testimonial:hover {
transform: translateY(-4px);
border-color: var(--border-2);
}
.testimonial-stars { color: #fbbf24; font-size: 0.9rem; margin-bottom: 12px; letter-spacing: 2px; }
.testimonial-quote {
color: var(--text);
line-height: 1.65;
font-size: 1rem;
margin: 0 0 20px;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--grad-main);
display: flex; align-items: center; justify-content: center;
color: white;
font-weight: 700;
font-size: 0.95rem;
}
.testimonial-name { color: var(--text); font-weight: 500; font-size: 0.92rem; }
.testimonial-role { color: var(--text-3); font-size: 0.82rem; }
/* ============================================================
FAQ ACCORDION
============================================================ */
.faq {
max-width: 760px;
margin: 32px auto 0;
}
.faq-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
margin-bottom: 12px;
overflow: hidden;
transition: border-color .3s ease;
}
.faq-item[open] { border-color: var(--border-2); }
.faq-item summary {
padding: 22px 24px;
cursor: pointer;
list-style: none;
color: var(--text);
font-weight: 500;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
color: var(--purple);
font-size: 1.5rem;
font-weight: 300;
transition: transform .3s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { background: var(--glass); }
.faq-item-content {
padding: 0 24px 22px;
color: var(--text-2);
line-height: 1.65;
font-size: 0.95rem;
}
/* ============================================================
COMPARISON (before / after)
============================================================ */
.compare {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 24px;
align-items: stretch;
margin-top: 40px;
}
@media (max-width: 800px) { .compare { grid-template-columns: 1fr; }
.compare-arrow { transform: rotate(90deg); margin: 0 auto; } }
.compare-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 28px;
position: relative;
overflow: hidden;
}
.compare-card.bad { border-color: rgba(239,68,68,0.25); }
.compare-card.good { border-color: rgba(16,185,129,0.25); background: linear-gradient(180deg, rgba(16,185,129,0.06) 0%, var(--surface) 100%); }
.compare-label {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
margin-bottom: 12px;
}
.compare-card.bad .compare-label { color: #f87171; }
.compare-card.good .compare-label { color: #34d399; }
.compare-line {
font-family: 'JetBrains Mono', monospace;
color: var(--text-2);
font-size: 0.85rem;
line-height: 1.7;
margin: 0;
}
.compare-line.strike { text-decoration: line-through; opacity: 0.5; }
.compare-line.bold { color: var(--text); }
.compare-arrow {
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--purple);
}
/* ============================================================
FOOTER (enhanced)
============================================================ */
.footer-grid {
max-width: 1240px;
margin: 0 auto;
padding: 60px 24px 30px;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 40px;
border-top: 1px solid var(--border);
margin-top: 80px;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; } }
.footer-brand .nav-logo { color: var(--text); margin-bottom: 16px; }
.footer-brand p { color: var(--text-3); font-size: 0.9rem; line-height: 1.6; max-width: 320px; }
.footer-col h5 {
color: var(--text);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 16px;
}
.footer-col a {
display: block;
color: var(--text-3);
text-decoration: none;
font-size: 0.92rem;
padding: 4px 0;
transition: color .15s ease;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
max-width: 1240px;
margin: 0 auto;
padding: 20px 24px 40px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text-3);
font-size: 0.85rem;
flex-wrap: wrap;
gap: 12px;
}
.footer-bottom .legal { display: flex; gap: 20px; }
.footer-bottom .legal a { color: var(--text-3); text-decoration: none; }
.footer-bottom .legal a:hover { color: var(--text); }