ff0abee349
- Removed the cosmos turtle (CSS rules + auto-load probe + JS hook). Reduced-motion turtle branch removed too. - ?template=editorial|swiss|cosmos URL param now wins over the value in data/links.json (and the cached localStorage fallback). Wired in both the pre-paint boot script and main() so deep links work without flashing the wrong template. - New hidden easter egg: type the letters w-a-r-p anywhere on the page (no input focused) and the page reloads on the next template in the cycle editorial -> swiss -> cosmos -> editorial. The URL is updated with the new ?template= param so the override survives refresh and is shareable. A small "↯ <name>" toast pops up after the reload via sessionStorage handoff, fades after ~2.5s, respects prefers-reduced-motion. - README documents both the URL param and the warp keyword.
758 lines
24 KiB
CSS
758 lines
24 KiB
CSS
/* dlstack — Singularity template
|
|
WebGL nebula + procedural starfield + chromatic-glow hero.
|
|
Scoped to :root[data-template="cosmos"] so it's inert otherwise.
|
|
*/
|
|
|
|
@property --cosmos-hue {
|
|
syntax: "<angle>";
|
|
inherits: false;
|
|
initial-value: 0deg;
|
|
}
|
|
|
|
:root[data-template="cosmos"] {
|
|
--paper: #050211;
|
|
--paper-2: #0E0826;
|
|
--ink: #ECF1FF;
|
|
--ink-2: #C2CDF0;
|
|
--muted: #8693C2;
|
|
--rule: rgba(180, 200, 255, 0.16);
|
|
--accent: #7AF7FF;
|
|
--accent-2: #FF4ECD;
|
|
--accent-3: #B07AFF;
|
|
--on-accent: #050211;
|
|
--display: "Orbitron", "Geist", system-ui, sans-serif;
|
|
--body: "Geist", system-ui, sans-serif;
|
|
--mono: "Geist Mono", ui-monospace, Menlo, monospace;
|
|
--radius: 14px;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* always dark — ignore data-theme on cosmos */
|
|
:root[data-template="cosmos"][data-theme="light"],
|
|
:root[data-template="cosmos"][data-theme="dark"],
|
|
:root[data-template="cosmos"][data-theme="auto"] {
|
|
--paper: #050211;
|
|
--paper-2: #0E0826;
|
|
--ink: #ECF1FF;
|
|
--ink-2: #C2CDF0;
|
|
--muted: #8693C2;
|
|
}
|
|
|
|
/* remove editorial paper grain */
|
|
:root[data-template="cosmos"] body::before { display: none; }
|
|
|
|
/* shader canvas — fixed behind everything */
|
|
:root[data-template="cosmos"] .cosmos-bg {
|
|
position: fixed; inset: 0;
|
|
z-index: 0;
|
|
width: 100vw; height: 100vh;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
animation: cosmos-fade-in 1800ms 200ms cubic-bezier(0.16, 1, 0.30, 1) forwards;
|
|
}
|
|
@keyframes cosmos-fade-in { to { opacity: 1; } }
|
|
|
|
/* cursor aurora — soft cyan/magenta halo that lags behind the pointer */
|
|
:root[data-template="cosmos"] .cosmos-halo {
|
|
position: fixed; top: 0; left: 0;
|
|
width: 600px; height: 600px;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
background:
|
|
radial-gradient(circle at 50% 50%,
|
|
rgba(122, 247, 255, 0.20) 0%,
|
|
rgba(176, 122, 255, 0.14) 18%,
|
|
rgba(255, 78, 205, 0.10) 38%,
|
|
transparent 65%);
|
|
mix-blend-mode: screen;
|
|
filter: blur(8px);
|
|
opacity: 0;
|
|
transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
will-change: transform, opacity;
|
|
}
|
|
:root[data-template="cosmos"].cosmos-cursor .cosmos-halo { opacity: 1; }
|
|
|
|
/* periodic comets — three streaks crossing the page */
|
|
:root[data-template="cosmos"] .cosmos-comet {
|
|
position: fixed; top: 0; left: 0;
|
|
width: clamp(120px, 12vw, 200px);
|
|
height: 2px;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
rgba(255,255,255,0.85) 60%,
|
|
var(--accent) 85%,
|
|
transparent 100%);
|
|
filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 18px var(--accent-3));
|
|
opacity: 0;
|
|
transform-origin: right center;
|
|
}
|
|
:root[data-template="cosmos"] .cosmos-comet--1 { animation: cosmos-comet-a 14s 4s ease-in infinite; }
|
|
:root[data-template="cosmos"] .cosmos-comet--2 { animation: cosmos-comet-b 22s 11s ease-in infinite; }
|
|
:root[data-template="cosmos"] .cosmos-comet--3 { animation: cosmos-comet-c 19s 19s ease-in infinite; }
|
|
@keyframes cosmos-comet-a {
|
|
0% { transform: translate(-20vw, 12vh) rotate(28deg) scaleX(0.4); opacity: 0; }
|
|
4% { opacity: 1; }
|
|
18% { transform: translate(110vw, 70vh) rotate(28deg) scaleX(1); opacity: 0; }
|
|
100% { opacity: 0; }
|
|
}
|
|
@keyframes cosmos-comet-b {
|
|
0% { transform: translate(115vw, 8vh) rotate(158deg) scaleX(0.4); opacity: 0; }
|
|
5% { opacity: 1; }
|
|
22% { transform: translate(-20vw, 65vh) rotate(158deg) scaleX(1); opacity: 0; }
|
|
100% { opacity: 0; }
|
|
}
|
|
@keyframes cosmos-comet-c {
|
|
0% { transform: translate(-20vw, 50vh) rotate(45deg) scaleX(0.4); opacity: 0; }
|
|
3% { opacity: 1; }
|
|
16% { transform: translate(110vw, -10vh) rotate(45deg) scaleX(1); opacity: 0; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
/* card 3D tilt + cursor-tracking holographic shimmer */
|
|
:root[data-template="cosmos"] .card { transform-style: preserve-3d; perspective: 1000px; }
|
|
:root[data-template="cosmos"] .card:hover {
|
|
transform:
|
|
translateY(-4px)
|
|
rotateX(calc(var(--ty, 0) * -6deg))
|
|
rotateY(calc(var(--tx, 0) * 6deg));
|
|
}
|
|
:root[data-template="cosmos"] .card .card__shimmer {
|
|
position: absolute; inset: 0;
|
|
pointer-events: none;
|
|
border-radius: inherit;
|
|
background: radial-gradient(circle 220px at var(--sx, 50%) var(--sy, 50%),
|
|
rgba(122, 247, 255, 0.20),
|
|
rgba(176, 122, 255, 0.10) 35%,
|
|
transparent 70%);
|
|
opacity: 0;
|
|
mix-blend-mode: screen;
|
|
transition: opacity 350ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
z-index: 0;
|
|
}
|
|
:root[data-template="cosmos"] .card:hover .card__shimmer { opacity: 1; }
|
|
:root[data-template="cosmos"] .card > * { position: relative; z-index: 1; }
|
|
|
|
/* hero parallax — name shifts counter to cursor, orb drifts with it */
|
|
:root[data-template="cosmos"] .hero__name {
|
|
transform:
|
|
translate3d(calc(var(--cm-x, 0) * -10px), calc(var(--cm-y, 0) * -6px), 0);
|
|
transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
will-change: transform;
|
|
}
|
|
:root[data-template="cosmos"] .hero__asterism {
|
|
/* override the base drift to include parallax */
|
|
animation: cosmos-orb-rise 1400ms 300ms cubic-bezier(0.16, 1, 0.30, 1) both;
|
|
transform: translate3d(calc(var(--cm-x, 0) * 16px), calc(var(--cm-y, 0) * 10px), 0);
|
|
transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
:root[data-template="cosmos"] .hero__tagline {
|
|
transform: translate3d(calc(var(--cm-x, 0) * -4px), calc(var(--cm-y, 0) * -2px), 0);
|
|
transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
|
|
/* CSS-only static fallback nebula when WebGL is unavailable */
|
|
:root[data-template="cosmos"].cosmos-static body {
|
|
background:
|
|
radial-gradient(ellipse at 20% 30%, rgba(176, 122, 255, 0.35), transparent 55%),
|
|
radial-gradient(ellipse at 80% 70%, rgba(255, 78, 205, 0.28), transparent 50%),
|
|
radial-gradient(ellipse at 50% 100%, rgba(122, 247, 255, 0.22), transparent 55%),
|
|
var(--paper);
|
|
}
|
|
:root[data-template="cosmos"].cosmos-static body::after {
|
|
content: ""; position: fixed; inset: 0; pointer-events: none;
|
|
background-image:
|
|
radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 100%),
|
|
radial-gradient(1px 1px at 78% 33%, #fff 50%, transparent 100%),
|
|
radial-gradient(1.5px 1.5px at 44% 78%, #fff 50%, transparent 100%),
|
|
radial-gradient(1px 1px at 24% 88%, #fff 50%, transparent 100%),
|
|
radial-gradient(1px 1px at 64% 14%, #fff 50%, transparent 100%),
|
|
radial-gradient(1px 1px at 90% 90%, #fff 50%, transparent 100%);
|
|
opacity: 0.55;
|
|
}
|
|
|
|
:root[data-template="cosmos"] body {
|
|
background: var(--paper);
|
|
}
|
|
:root[data-template="cosmos"] .shell { z-index: 1; }
|
|
|
|
/* ───── marker bar ───── */
|
|
:root[data-template="cosmos"] .marker {
|
|
border-bottom: 1px solid var(--rule);
|
|
font-family: var(--display);
|
|
font-weight: 500;
|
|
letter-spacing: 0.22em;
|
|
color: var(--ink-2);
|
|
}
|
|
:root[data-template="cosmos"] .marker__brand { color: var(--accent); gap: 0.55rem; }
|
|
:root[data-template="cosmos"] .marker__brand .star {
|
|
width: 10px; height: 10px;
|
|
background: var(--accent);
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
font-size: 0; transform: none;
|
|
box-shadow:
|
|
0 0 8px var(--accent),
|
|
0 0 18px color-mix(in oklch, var(--accent) 80%, transparent),
|
|
0 0 32px color-mix(in oklch, var(--accent-2) 60%, transparent);
|
|
animation: cosmos-pulse 2.4s ease-in-out infinite;
|
|
}
|
|
@keyframes cosmos-pulse {
|
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
50% { transform: scale(1.3); opacity: 0.75; }
|
|
}
|
|
:root[data-template="cosmos"] .marker__year {
|
|
color: var(--accent-2);
|
|
text-shadow: 0 0 12px color-mix(in oklch, var(--accent-2) 60%, transparent);
|
|
}
|
|
:root[data-template="cosmos"] .theme {
|
|
border-radius: 999px;
|
|
border-color: var(--rule);
|
|
font-family: var(--display);
|
|
font-weight: 500;
|
|
letter-spacing: 0.18em;
|
|
color: var(--ink-2);
|
|
background: rgba(20, 14, 50, 0.4);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
:root[data-template="cosmos"] .theme:hover {
|
|
background: rgba(122, 247, 255, 0.12);
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
box-shadow: 0 0 18px color-mix(in oklch, var(--accent) 40%, transparent);
|
|
}
|
|
|
|
/* ───── hero ───── */
|
|
:root[data-template="cosmos"] .hero { position: relative; }
|
|
:root[data-template="cosmos"] .hero__name {
|
|
font-family: var(--display);
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-variation-settings: normal;
|
|
letter-spacing: -0.03em;
|
|
line-height: 0.92;
|
|
color: var(--ink);
|
|
position: relative;
|
|
}
|
|
:root[data-template="cosmos"] .hero__name .hero__name-first {
|
|
font-family: var(--display);
|
|
font-weight: 500;
|
|
letter-spacing: -0.01em;
|
|
color: var(--ink);
|
|
text-shadow:
|
|
0 0 24px rgba(122, 247, 255, 0.45),
|
|
0 0 60px rgba(176, 122, 255, 0.30);
|
|
}
|
|
:root[data-template="cosmos"] .hero__name em {
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
font-variation-settings: normal;
|
|
color: var(--accent-2);
|
|
text-shadow:
|
|
0 0 24px rgba(255, 78, 205, 0.55),
|
|
0 0 50px rgba(255, 78, 205, 0.35),
|
|
0 0 90px rgba(176, 122, 255, 0.30);
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
:root[data-template="cosmos"] .hero__name em::before,
|
|
:root[data-template="cosmos"] .hero__name em::after {
|
|
content: attr(data-text);
|
|
position: absolute; left: 0; top: 0;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
mix-blend-mode: screen;
|
|
}
|
|
:root[data-template="cosmos"] .hero__name em::before {
|
|
color: var(--accent);
|
|
transform: translate(-3px, 0);
|
|
}
|
|
:root[data-template="cosmos"] .hero__name em::after {
|
|
color: var(--accent-2);
|
|
transform: translate(3px, 0);
|
|
}
|
|
:root[data-template="cosmos"] .hero__name:hover em::before,
|
|
:root[data-template="cosmos"] .hero__name:hover em::after {
|
|
opacity: 0.7;
|
|
animation: cosmos-rgb-shift 1.2s steps(8) infinite;
|
|
}
|
|
@keyframes cosmos-rgb-shift {
|
|
0% { transform: translate(-3px, 0); }
|
|
25% { transform: translate(-2px, 1px); }
|
|
50% { transform: translate(-4px, -1px); }
|
|
75% { transform: translate(-2px, 0); }
|
|
100% { transform: translate(-3px, 0); }
|
|
}
|
|
:root[data-template="cosmos"] .hero__name:hover em::after {
|
|
animation-name: cosmos-rgb-shift-2;
|
|
}
|
|
@keyframes cosmos-rgb-shift-2 {
|
|
0% { transform: translate(3px, 0); }
|
|
25% { transform: translate(4px, -1px); }
|
|
50% { transform: translate(2px, 1px); }
|
|
75% { transform: translate(4px, 0); }
|
|
100% { transform: translate(3px, 0); }
|
|
}
|
|
|
|
/* asterism becomes a glowing orb */
|
|
:root[data-template="cosmos"] .hero__asterism {
|
|
font-size: 0; color: transparent;
|
|
width: clamp(4rem, 8vw, 6.5rem);
|
|
height: clamp(4rem, 8vw, 6.5rem);
|
|
background: radial-gradient(circle at 35% 35%,
|
|
#fff 0%,
|
|
var(--accent) 25%,
|
|
var(--accent-3) 55%,
|
|
transparent 80%);
|
|
border-radius: 50%;
|
|
transform: none;
|
|
filter: blur(0.5px);
|
|
box-shadow:
|
|
0 0 40px var(--accent),
|
|
0 0 80px var(--accent-3),
|
|
0 0 120px color-mix(in oklch, var(--accent-2) 60%, transparent);
|
|
animation:
|
|
cosmos-orb-rise 1400ms 300ms cubic-bezier(0.16, 1, 0.30, 1) both,
|
|
cosmos-orb-drift 9s ease-in-out 1700ms infinite;
|
|
}
|
|
@keyframes cosmos-orb-rise {
|
|
from { opacity: 0; transform: scale(0.2) translateY(-20px); }
|
|
to { opacity: 0.95; transform: scale(1) translateY(0); }
|
|
}
|
|
@keyframes cosmos-orb-drift {
|
|
0%, 100% { transform: translate(0, 0); }
|
|
33% { transform: translate(-8px, 6px); }
|
|
66% { transform: translate(6px, -4px); }
|
|
}
|
|
|
|
:root[data-template="cosmos"] .hero__tagline {
|
|
font-family: var(--display);
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-variation-settings: normal;
|
|
letter-spacing: 0.04em;
|
|
color: var(--ink-2);
|
|
text-transform: uppercase;
|
|
font-size: clamp(1rem, 0.8rem + 0.9vw, 1.4rem);
|
|
max-width: 36ch;
|
|
}
|
|
:root[data-template="cosmos"] .hero__tagline span {
|
|
color: var(--accent);
|
|
text-shadow: 0 0 16px color-mix(in oklch, var(--accent) 70%, transparent);
|
|
padding: 0 0.25em;
|
|
}
|
|
:root[data-template="cosmos"] .hero__bio {
|
|
color: var(--ink-2);
|
|
font-family: var(--body);
|
|
}
|
|
|
|
/* ───── social ───── */
|
|
:root[data-template="cosmos"] .social a {
|
|
border-radius: 999px;
|
|
border-color: var(--rule);
|
|
font-family: var(--display);
|
|
font-weight: 500;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
font-size: var(--fs-mini);
|
|
padding: 10px 16px;
|
|
color: var(--ink-2);
|
|
background: rgba(20, 14, 50, 0.4);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
:root[data-template="cosmos"] .social a:hover {
|
|
background: rgba(122, 247, 255, 0.08);
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
transform: translateY(-2px);
|
|
box-shadow:
|
|
0 0 22px color-mix(in oklch, var(--accent) 35%, transparent),
|
|
0 8px 22px -10px color-mix(in oklch, var(--accent) 50%, transparent);
|
|
}
|
|
|
|
/* ───── sections ───── */
|
|
:root[data-template="cosmos"] .section__head {
|
|
border-bottom: 1px solid var(--rule);
|
|
position: relative;
|
|
}
|
|
:root[data-template="cosmos"] .section__head::after {
|
|
content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
|
|
height: 1px;
|
|
background: linear-gradient(90deg,
|
|
var(--accent) 0%,
|
|
var(--accent-3) 40%,
|
|
var(--accent-2) 70%,
|
|
transparent 100%);
|
|
box-shadow: 0 0 12px var(--accent-3);
|
|
transform-origin: left;
|
|
animation: cosmos-line-in 1400ms cubic-bezier(0.16, 1, 0.30, 1) both;
|
|
}
|
|
@keyframes cosmos-line-in {
|
|
from { transform: scaleX(0); opacity: 0; }
|
|
to { transform: scaleX(1); opacity: 1; }
|
|
}
|
|
:root[data-template="cosmos"] .section__numwrap small {
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-family: var(--display);
|
|
font-variation-settings: normal;
|
|
letter-spacing: 0.22em;
|
|
font-size: var(--fs-sm);
|
|
text-shadow: 0 0 12px color-mix(in oklch, var(--accent) 60%, transparent);
|
|
}
|
|
:root[data-template="cosmos"] .section__num {
|
|
font-family: var(--display);
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
font-variation-settings: normal;
|
|
color: var(--ink);
|
|
letter-spacing: -0.04em;
|
|
background: linear-gradient(180deg, var(--ink) 0%, var(--accent) 60%, var(--accent-3) 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
filter: drop-shadow(0 0 18px rgba(122, 247, 255, 0.4));
|
|
}
|
|
:root[data-template="cosmos"] .section__title {
|
|
font-family: var(--display);
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-variation-settings: normal;
|
|
letter-spacing: -0.01em;
|
|
color: var(--ink);
|
|
}
|
|
:root[data-template="cosmos"] .section__kicker {
|
|
font-family: var(--display);
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-variation-settings: normal;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
font-size: var(--fs-mini);
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* ───── cards — holographic ───── */
|
|
:root[data-template="cosmos"] .card {
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--rule);
|
|
background: linear-gradient(135deg, rgba(30, 22, 64, 0.55), rgba(14, 8, 38, 0.55));
|
|
backdrop-filter: blur(14px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(14px) saturate(140%);
|
|
color: var(--ink);
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
}
|
|
:root[data-template="cosmos"] .card::before {
|
|
content: ""; position: absolute; inset: -1px;
|
|
border-radius: inherit;
|
|
padding: 1px;
|
|
background: conic-gradient(from var(--cosmos-hue, 0deg),
|
|
var(--accent), var(--accent-2), var(--accent-3), var(--accent));
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
opacity: 0;
|
|
transition: opacity 350ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
:root[data-template="cosmos"] .card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: transparent;
|
|
box-shadow:
|
|
0 0 0 1px rgba(255,255,255,0.04),
|
|
0 18px 44px -18px rgba(122, 247, 255, 0.35),
|
|
0 6px 20px -8px rgba(255, 78, 205, 0.30);
|
|
}
|
|
:root[data-template="cosmos"] .card:hover::before {
|
|
opacity: 1;
|
|
animation: cosmos-hue-rot 6s linear infinite;
|
|
}
|
|
@keyframes cosmos-hue-rot {
|
|
to { --cosmos-hue: 360deg; }
|
|
}
|
|
:root[data-template="cosmos"] .card::after {
|
|
color: var(--accent);
|
|
font-family: var(--display);
|
|
font-weight: 700;
|
|
text-shadow: 0 0 8px color-mix(in oklch, var(--accent) 70%, transparent);
|
|
}
|
|
|
|
:root[data-template="cosmos"] .card__title {
|
|
font-family: var(--display);
|
|
font-weight: 600;
|
|
letter-spacing: -0.005em;
|
|
color: var(--ink);
|
|
}
|
|
:root[data-template="cosmos"] .card__desc {
|
|
font-family: var(--body);
|
|
color: var(--ink-2);
|
|
}
|
|
:root[data-template="cosmos"] .card__host {
|
|
font-family: var(--display);
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
letter-spacing: 0.14em;
|
|
color: var(--accent);
|
|
text-shadow: 0 0 8px color-mix(in oklch, var(--accent) 50%, transparent);
|
|
}
|
|
:root[data-template="cosmos"] .card__date {
|
|
font-family: var(--display);
|
|
font-weight: 500;
|
|
letter-spacing: 0.10em;
|
|
color: var(--muted);
|
|
}
|
|
:root[data-template="cosmos"] .card__meta .card__date::before { color: var(--accent-2); }
|
|
|
|
/* link favicon */
|
|
:root[data-template="cosmos"] .card--link .favicon {
|
|
border-radius: 10px;
|
|
border-color: var(--rule);
|
|
background: rgba(255,255,255,0.04);
|
|
}
|
|
|
|
/* project card */
|
|
:root[data-template="cosmos"] .card--project .card__title {
|
|
font-family: var(--display);
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
font-size: var(--fs-lg);
|
|
line-height: 1.05;
|
|
background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* featured — accent glow card */
|
|
:root[data-template="cosmos"] .card--featured {
|
|
background:
|
|
radial-gradient(circle at 100% 0%, rgba(255, 78, 205, 0.45), transparent 60%),
|
|
radial-gradient(circle at 0% 100%, rgba(122, 247, 255, 0.4), transparent 65%),
|
|
linear-gradient(135deg, rgba(176, 122, 255, 0.45), rgba(14, 8, 38, 0.8));
|
|
border-color: rgba(255,255,255,0.12);
|
|
color: #fff;
|
|
}
|
|
:root[data-template="cosmos"] .card--featured::before { opacity: 0.55; animation: cosmos-hue-rot 6s linear infinite; }
|
|
:root[data-template="cosmos"] .card--featured:hover::before { opacity: 1; }
|
|
:root[data-template="cosmos"] .card--featured .card__title {
|
|
-webkit-text-fill-color: #fff;
|
|
background: none;
|
|
color: #fff;
|
|
text-shadow:
|
|
0 0 24px rgba(122, 247, 255, 0.55),
|
|
0 0 50px rgba(255, 78, 205, 0.45);
|
|
font-weight: 700;
|
|
font-size: clamp(1.85rem, 1.30rem + 1.6vw, 2.6rem);
|
|
letter-spacing: -0.025em;
|
|
line-height: 1;
|
|
}
|
|
:root[data-template="cosmos"] .card--featured .card__desc { color: rgba(255,255,255,0.85); }
|
|
:root[data-template="cosmos"] .card--featured::after { color: #fff; }
|
|
|
|
/* tags */
|
|
:root[data-template="cosmos"] .tag {
|
|
border-radius: 999px;
|
|
border-color: rgba(180, 200, 255, 0.22);
|
|
background: rgba(122, 247, 255, 0.08);
|
|
color: var(--accent);
|
|
font-family: var(--display);
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.10em;
|
|
}
|
|
:root[data-template="cosmos"] .card:hover .tag {
|
|
border-color: var(--accent);
|
|
background: rgba(122, 247, 255, 0.16);
|
|
}
|
|
:root[data-template="cosmos"] .card--featured .tag {
|
|
background: rgba(255,255,255,0.14);
|
|
border-color: rgba(255,255,255,0.30);
|
|
color: #fff;
|
|
}
|
|
|
|
/* youtube */
|
|
:root[data-template="cosmos"] .card--youtube { border-color: var(--rule); }
|
|
:root[data-template="cosmos"] .yt__play {
|
|
background: rgba(5, 2, 17, 0.5);
|
|
border: 1.5px solid var(--accent);
|
|
box-shadow:
|
|
0 0 18px color-mix(in oklch, var(--accent) 50%, transparent),
|
|
inset 0 0 12px color-mix(in oklch, var(--accent) 30%, transparent);
|
|
}
|
|
:root[data-template="cosmos"] .yt__play svg { fill: var(--accent); }
|
|
:root[data-template="cosmos"] .yt:hover .yt__play {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
box-shadow:
|
|
0 0 30px var(--accent),
|
|
0 0 60px var(--accent-3);
|
|
}
|
|
:root[data-template="cosmos"] .yt:hover .yt__play svg { fill: var(--paper); }
|
|
:root[data-template="cosmos"] .yt__title {
|
|
font-family: var(--display);
|
|
font-weight: 500;
|
|
letter-spacing: 0;
|
|
text-shadow: 0 0 12px rgba(122, 247, 255, 0.5);
|
|
}
|
|
|
|
/* portfolio */
|
|
:root[data-template="cosmos"] .card--portfolio { border-color: var(--rule); }
|
|
:root[data-template="cosmos"] .portfolio__caption {
|
|
border-top: 1px solid var(--rule);
|
|
background: rgba(14, 8, 38, 0.55);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
:root[data-template="cosmos"] .portfolio__caption .card__title {
|
|
font-family: var(--display);
|
|
font-weight: 700;
|
|
letter-spacing: -0.005em;
|
|
background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
:root[data-template="cosmos"] .card--portfolio:hover .portfolio__caption .card__title {
|
|
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* clients */
|
|
:root[data-template="cosmos"] .client__logo {
|
|
border-radius: 14px;
|
|
border-color: var(--rule);
|
|
background: rgba(255,255,255,0.03);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
:root[data-template="cosmos"] .card--client:hover .client__logo {
|
|
border-color: var(--accent);
|
|
background: rgba(122, 247, 255, 0.08);
|
|
box-shadow:
|
|
0 0 24px color-mix(in oklch, var(--accent) 30%, transparent),
|
|
0 8px 22px -10px color-mix(in oklch, var(--accent) 40%, transparent);
|
|
}
|
|
:root[data-template="cosmos"] .client__logo[data-fallback] {
|
|
font-family: var(--display);
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
text-shadow: 0 0 14px color-mix(in oklch, var(--accent) 60%, transparent);
|
|
}
|
|
:root[data-template="cosmos"] .client__title {
|
|
font-family: var(--display);
|
|
font-weight: 500;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
font-size: var(--fs-mini);
|
|
color: var(--ink-2);
|
|
}
|
|
:root[data-template="cosmos"] .card--client:hover .client__title { color: var(--accent); }
|
|
|
|
/* footer */
|
|
:root[data-template="cosmos"] .foot {
|
|
border-top: 1px solid var(--rule);
|
|
color: var(--muted);
|
|
font-family: var(--display);
|
|
letter-spacing: 0.2em;
|
|
}
|
|
:root[data-template="cosmos"] .foot__mark {
|
|
font-family: var(--display);
|
|
font-weight: 900;
|
|
color: var(--accent);
|
|
text-shadow: 0 0 16px color-mix(in oklch, var(--accent) 60%, transparent);
|
|
}
|
|
|
|
/* ───── testimonial / carousel ───── */
|
|
:root[data-template="cosmos"] .card--testimonial {
|
|
background: transparent;
|
|
backdrop-filter: none;
|
|
-webkit-backdrop-filter: none;
|
|
}
|
|
:root[data-template="cosmos"] .testimonial__mark {
|
|
color: var(--accent);
|
|
text-shadow:
|
|
0 0 18px color-mix(in oklch, var(--accent) 70%, transparent),
|
|
0 0 40px color-mix(in oklch, var(--accent-3) 50%, transparent);
|
|
}
|
|
:root[data-template="cosmos"] .testimonial__quote {
|
|
font-family: var(--body);
|
|
font-weight: 400;
|
|
font-variation-settings: normal;
|
|
color: var(--ink);
|
|
}
|
|
:root[data-template="cosmos"] .testimonial__by { border-top-color: var(--rule); }
|
|
:root[data-template="cosmos"] .testimonial__name {
|
|
font-family: var(--display);
|
|
color: var(--ink);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
:root[data-template="cosmos"] .testimonial__meta {
|
|
font-family: var(--display);
|
|
letter-spacing: 0.10em;
|
|
color: var(--accent);
|
|
}
|
|
:root[data-template="cosmos"] .testimonial__avatar {
|
|
border-color: var(--rule);
|
|
background: rgba(255,255,255,0.04);
|
|
}
|
|
:root[data-template="cosmos"] .carousel__nav {
|
|
background: rgba(20, 14, 50, 0.5);
|
|
backdrop-filter: blur(8px);
|
|
border-color: var(--rule);
|
|
color: var(--ink-2);
|
|
font-family: var(--display);
|
|
}
|
|
:root[data-template="cosmos"] .carousel__nav:hover {
|
|
background: rgba(122, 247, 255, 0.12);
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
box-shadow: 0 0 18px color-mix(in oklch, var(--accent) 40%, transparent);
|
|
}
|
|
:root[data-template="cosmos"] .carousel__dot { background: var(--rule); }
|
|
:root[data-template="cosmos"] .carousel__dot.is-active {
|
|
background: var(--accent);
|
|
box-shadow: 0 0 10px var(--accent);
|
|
}
|
|
|
|
/* selection */
|
|
:root[data-template="cosmos"] ::selection {
|
|
background: var(--accent);
|
|
color: var(--paper);
|
|
}
|
|
:root[data-template="cosmos"] :focus-visible { outline-color: var(--accent); }
|
|
|
|
/* reduced motion — strip glows + animations */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:root[data-template="cosmos"] .marker__brand .star,
|
|
:root[data-template="cosmos"] .hero__asterism,
|
|
:root[data-template="cosmos"] .section__head::after,
|
|
:root[data-template="cosmos"] .card::before,
|
|
:root[data-template="cosmos"] .cosmos-comet {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
:root[data-template="cosmos"] .cosmos-bg,
|
|
:root[data-template="cosmos"] .cosmos-halo,
|
|
:root[data-template="cosmos"] .cosmos-comet { display: none; }
|
|
:root[data-template="cosmos"] .hero__name,
|
|
:root[data-template="cosmos"] .hero__tagline,
|
|
:root[data-template="cosmos"] .hero__asterism { transform: none !important; }
|
|
:root[data-template="cosmos"].cosmos-static body {
|
|
background:
|
|
radial-gradient(ellipse at 30% 20%, rgba(176, 122, 255, 0.25), transparent 60%),
|
|
radial-gradient(ellipse at 70% 80%, rgba(122, 247, 255, 0.18), transparent 60%),
|
|
var(--paper);
|
|
}
|
|
}
|