292 lines
8.9 KiB
CSS
292 lines
8.9 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Oxanium:wght@200..800&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
||
@import "tailwindcss";
|
||
|
||
/* Base design tokens that generate classes like bg-primary, text-text, etc. */
|
||
@theme {
|
||
--color-bg: #0e1116; /* defaults = Theme A */
|
||
--color-text: #e1e8ee;
|
||
--color-primary: #3d8eff;
|
||
--color-secondary: #1a1f26;
|
||
--color-tertiary: #00c9a7;
|
||
--color-contrast: #9ca3af;
|
||
|
||
--font-main: "IBM Plex Sans", sans-serif;
|
||
--font-title: "Oxanium", sans-serif;
|
||
--font-name: "Quantico", sans-serif;
|
||
|
||
}
|
||
|
||
/* A–E themes: override the same tokens inside an attribute scope */
|
||
html[data-theme="a"] {
|
||
--color-bg: #0e1116;
|
||
--color-secondary: #1a1f26;
|
||
--color-text: #e1e8ee;
|
||
--color-primary: #3d8eff;
|
||
--color-tertiary: #00c9a7;
|
||
--color-contrast: #9ca3af;
|
||
}
|
||
|
||
html[data-theme="b"] {
|
||
--color-bg: #120e0e;
|
||
--color-secondary: #1c1818;
|
||
--color-text: #fefcfb;
|
||
--color-primary: #ff7043;
|
||
--color-tertiary: #ffd166;
|
||
--color-contrast: #a3948c;
|
||
}
|
||
|
||
html[data-theme="c"] {
|
||
--color-bg: #0d1318;
|
||
--color-secondary: #1b242c;
|
||
--color-text: #e8ecef;
|
||
--color-primary: #00a3c4;
|
||
--color-tertiary: #ff8a70;
|
||
--color-contrast: #9ca3af;
|
||
}
|
||
|
||
html[data-theme="d"] {
|
||
--color-bg: #0f1014;
|
||
--color-secondary: #1d1f24;
|
||
--color-text: #eaecef;
|
||
--color-primary: #7743d8;
|
||
--color-tertiary: #a97bff;
|
||
--color-contrast: #9ca3af;
|
||
}
|
||
|
||
html[data-theme="e"] {
|
||
--color-bg: #0c1114;
|
||
--color-secondary: #182127;
|
||
--color-text: #edeff1;
|
||
--color-primary: #00d2a2;
|
||
--color-tertiary: #ffca57;
|
||
--color-contrast: #9ca3af;
|
||
}
|
||
|
||
/* theme-aware hero color follows --color-primary */
|
||
:root {
|
||
--hero-core: var(--color-primary);
|
||
}
|
||
|
||
@layer utilities {
|
||
/* Mobile / default */
|
||
.bg-hero {
|
||
background:
|
||
/* Top-right radial accent, similar to desktop */ radial-gradient(
|
||
120% 100% at 80% 10%,
|
||
color-mix(in oklab, var(--color-primary) 32%, transparent) 0%,
|
||
transparent 60%
|
||
),
|
||
/* Slight linear sweep from top to bottom */
|
||
linear-gradient(
|
||
120deg,
|
||
#0a0d13 0%,
|
||
var(--color-bg) 20%,
|
||
color-mix(in oklab, var(--color-primary) 15%, var(--color-bg) 90%)
|
||
100%
|
||
);
|
||
}
|
||
|
||
/* Desktop override */
|
||
@media (min-width: 768px) {
|
||
.bg-hero {
|
||
background:
|
||
/* small, softer highlight lower than the portrait rim */ radial-gradient(
|
||
95% 70% at 50% 28%,
|
||
color-mix(in oklab, var(--hero-core) 24%, transparent 82%) 0%,
|
||
transparent 56%
|
||
),
|
||
/* gentle bottom vignette for depth */
|
||
radial-gradient(
|
||
130% 90% at 50% 120%,
|
||
rgba(0, 0, 0, 0.32) 0%,
|
||
rgba(0, 0, 0, 0) 58%
|
||
),
|
||
/* base linear sweep */
|
||
linear-gradient(
|
||
185deg,
|
||
#0b0f15 0%,
|
||
var(--color-bg) 40%,
|
||
color-mix(in oklab, var(--hero-core) 12%, var(--color-bg) 88%) 100%
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
/* Theme A – deep blue */
|
||
html[data-theme="a"] .bg-hero {
|
||
background: radial-gradient(
|
||
135% 120% at 80% 48%,
|
||
color-mix(in oklab, var(--color-primary) 50%, black 35%) 0%,
|
||
color-mix(in oklab, var(--color-primary) 70%, black 55%) 38%,
|
||
transparent 90%
|
||
),
|
||
linear-gradient(
|
||
230deg,
|
||
#080b10 0%,
|
||
color-mix(in oklab, var(--color-bg) 70%, black 30%) 46%,
|
||
#0a1324 100%
|
||
);
|
||
}
|
||
|
||
html[data-theme="b"] .bg-hero {
|
||
background: radial-gradient(
|
||
140% 110% at 76% 46%,
|
||
color-mix(in oklab, var(--color-primary) 50%, black 40%) 0%,
|
||
color-mix(in oklab, var(--color-primary) 70%, black 60%) 36%,
|
||
transparent 82%
|
||
),
|
||
linear-gradient(
|
||
230deg,
|
||
#140c0b 0%,
|
||
var(--color-bg) 20%,
|
||
color-mix(in oklab, var(--color-secondary) 6%, var(--color-bg) 94%) 100%
|
||
);
|
||
}
|
||
/* Theme C – teal/cyan */
|
||
html[data-theme="c"] .bg-hero {
|
||
background: radial-gradient(
|
||
140% 120% at 76% 48%,
|
||
color-mix(in oklab, var(--color-primary) 50%, black 42%) 0%,
|
||
color-mix(in oklab, var(--color-primary) 70%, black 60%) 36%,
|
||
transparent 82%
|
||
),
|
||
linear-gradient(
|
||
230deg,
|
||
#081016 0%,
|
||
color-mix(in oklab, var(--color-bg) 62%, black 38%) 44%,
|
||
#0a1822 100%
|
||
);
|
||
}
|
||
|
||
/* Theme D – indigo/violet */
|
||
html[data-theme="d"] .bg-hero {
|
||
background: radial-gradient(
|
||
135% 120% at 80% 48%,
|
||
color-mix(in oklab, var(--color-primary) 50%, black 40%) 0%,
|
||
color-mix(in oklab, var(--color-primary) 70%, black 62%) 36%,
|
||
transparent 82%
|
||
),
|
||
linear-gradient(
|
||
230deg,
|
||
#090a10 0%,
|
||
color-mix(in oklab, var(--color-bg) 68%, black 32%) 46%,
|
||
#111328 100%
|
||
);
|
||
}
|
||
|
||
/* Theme E – emerald */
|
||
html[data-theme="e"] .bg-hero {
|
||
background: radial-gradient(
|
||
140% 120% at 78% 48%,
|
||
color-mix(in oklab, var(--color-primary) 50%, black 42%) 0%,
|
||
color-mix(in oklab, var(--color-primary) 70%, black 62%) 34%,
|
||
transparent 82%
|
||
),
|
||
linear-gradient(
|
||
230deg,
|
||
#07100e 0%,
|
||
color-mix(in oklab, var(--color-bg) 64%, black 36%) 44%,
|
||
#0a1c1a 100%
|
||
);
|
||
}
|
||
}
|
||
@media (min-width: 768px) {
|
||
.bg-hero::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
/* left-to-right fade of darkness */
|
||
background: linear-gradient(
|
||
270deg,
|
||
rgba(0, 0, 0, 0.5) 0%,
|
||
rgba(0, 0, 0, 0.34) 16%,
|
||
rgba(0, 0, 0, 0.18) 35%,
|
||
rgba(0, 0, 0, 0) 50%
|
||
),
|
||
linear-gradient(
|
||
270deg,
|
||
rgba(0,0,0,0.6) 0%,
|
||
rgba(0,0,0,0.48) 25%,
|
||
rgba(0,0,0,0.1) 60%
|
||
);
|
||
;
|
||
z-index: 0;
|
||
}
|
||
/* keep content above the overlay */
|
||
.bg-hero > * {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
@layer utilities {
|
||
.img-glow {
|
||
background:
|
||
radial-gradient(
|
||
68% 68% at 50% 42%,
|
||
color-mix(in oklab, var(--color-primary) 100%, black 0%) 0%,
|
||
color-mix(in oklab, var(--color-primary) 70%, black 30%) 40%,
|
||
color-mix(in oklab, var(--color-primary) 45%, black 55%) 70%,
|
||
color-mix(in oklab, var(--color-primary) 20%, black 80%) 85%
|
||
),
|
||
radial-gradient(
|
||
80% 80% at 50% 50%,
|
||
rgba(0,0,0,0) 58%,
|
||
rgba(0,0,0,0.35) 78%,
|
||
rgba(0,0,0,0.55) 100%
|
||
);
|
||
box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
|
||
}
|
||
}
|
||
|
||
/* ── Keyframes ─────────────────────────────────────────── */
|
||
/* ── Keyframes (unchanged) ───────────────────────────── */
|
||
@keyframes ui-fade-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
|
||
@keyframes ui-pop-in { from{opacity:0;transform:scale(.96);filter:blur(2px)} to{opacity:1;transform:scale(1);filter:blur(0)} }
|
||
@keyframes ui-fade { from{opacity:0} to{opacity:1} }
|
||
/* Old→new gradient crossfade */
|
||
@keyframes hero-xfade-out { from { opacity: 1 } to { opacity: 0 } }
|
||
|
||
/* When html has .hero-xfade, paint the OLD gradient on ::after and fade it out */
|
||
html.hero-xfade .bg-hero {
|
||
position: relative; /* anchor overlay */
|
||
}
|
||
html.hero-xfade .bg-hero::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 2; /* above everything but below menus if needed */
|
||
pointer-events: none;
|
||
background-image: var(--hero-bg-prev, none);
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
animation: hero-xfade-out .55s ease-out forwards; /* match your new durations */
|
||
}
|
||
|
||
/* Ensure the base gradient is behind content as usual */
|
||
.bg-hero > * { position: relative; z-index: 3; }
|
||
|
||
|
||
/* Respect reduced motion (unchanged) */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
|
||
}
|
||
|
||
/* ── Helpers (longer durations) ──────────────────────── */
|
||
.anim-base { transition: transform .24s ease, opacity .24s ease, filter .24s ease, color .24s ease, background-color .24s ease, border-color .24s ease; }
|
||
.anim-fade-in{ animation: ui-fade-in .55s cubic-bezier(.22,.61,.36,1) both; } /* 550ms */
|
||
.anim-pop-in { animation: ui-pop-in .48s cubic-bezier(.22,.61,.36,1) both; } /* 480ms */
|
||
.anim-fade { animation: ui-fade .45s ease-out both; } /* 450ms */
|
||
|
||
/* Optional: slightly gentler hover/tap */
|
||
.hover-pop:hover { transform: translateY(-2px) scale(1.03); transition-duration: .24s; }
|
||
.hover-pop:active { transform: translateY(0) scale(.98); transition-duration: .14s; }
|
||
|
||
/* ── Theme fade-on-switch (keeps it simple) ──────────── */
|
||
/* When the theme changes (html[data-theme] switches), the hero softly fades in */
|
||
html[data-theme] .bg-hero { animation: ui-fade .5s ease-out both; } /* 500ms */
|
||
|