/* ============================================================================
BRAND COLORS - CSS Custom Properties for Brand-Specific Styling
============================================================================
This file defines color variables for all brands used across the site.
Use with modifier classes (e.g., .brand-dell) to apply brand-specific colors
to generic components.
Usage:
Components then use var(--brand-color) which resolves to the brand's color.
============================================================================ */
:root {
/* ========================================================================
SLYD BRAND COLORS — Track 2: aliased to --slyd-* tokens.
(This file's :root block is a near-duplicate of brand-colors.css's.
Both live in load order; the later one wins. Aliased here so the
cascade resolves to tokens regardless of which file loads last.)
======================================================================== */
--brand-slyd-cyan: var(--slyd-info);
--brand-slyd-cyan-dark: var(--slyd-info);
--brand-slyd-cyan-rgb: var(--slyd-info-rgb);
--brand-slyd-gold: var(--slyd-accent-gold);
--brand-slyd-gold-dark: var(--slyd-accent-gold-dark);
--brand-slyd-gold-rgb: var(--slyd-accent-gold-rgb);
--brand-slyd-purple: var(--slyd-accent-purple);
--brand-slyd-purple-dark: var(--slyd-accent-purple-dark);
--brand-slyd-purple-rgb: var(--slyd-accent-purple-rgb);
--brand-slyd-green: var(--slyd-success);
--brand-slyd-green-dark: var(--slyd-success-dark);
--brand-slyd-green-rgb: var(--slyd-success-rgb);
/* ========================================================================
OEM BRAND COLORS (extracted from existing page CSS)
======================================================================== */
/* Dell - Blue */
--brand-dell: #007db8;
--brand-dell-dark: #0078d4;
--brand-dell-rgb: 0, 125, 184;
/* HPE - Green */
--brand-hpe: #01a982;
--brand-hpe-dark: #007d64;
--brand-hpe-rgb: 1, 169, 130;
/* Lenovo - Red */
--brand-lenovo: #e2001a;
--brand-lenovo-dark: #a30015;
--brand-lenovo-rgb: 226, 0, 26;
/* Supermicro - Green */
--brand-supermicro: #00ae42;
--brand-supermicro-dark: #00c853;
--brand-supermicro-rgb: 0, 174, 66;
/* Gigabyte - Orange */
--brand-gigabyte: #f47920;
--brand-gigabyte-dark: #d66a1a;
--brand-gigabyte-light: #ff8c3a;
--brand-gigabyte-rgb: 244, 121, 32;
/* ========================================================================
GPU BRAND COLORS (extracted from existing page CSS)
======================================================================== */
/* NVIDIA - Green */
--brand-nvidia: #76b900;
--brand-nvidia-dark: #8acc00;
--brand-nvidia-rgb: 118, 185, 0;
/* AMD Instinct - Silver/Professional (design choice for MI300X) */
--brand-amd-instinct: #9ca3af;
--brand-amd-instinct-dark: #6b7280;
--brand-amd-instinct-light: #d4d4d4;
--brand-amd-instinct-rgb: 156, 163, 175;
/* AMD Traditional Red (if needed elsewhere) */
--brand-amd: #ed1c24;
--brand-amd-dark: #c41e3a;
--brand-amd-rgb: 237, 28, 36;
/* ========================================================================
ARCHITECTURE COLORS (for product lines)
======================================================================== */
--brand-hopper: #06b6d4;
--brand-hopper-rgb: 6, 182, 212;
--brand-blackwell: #8b5cf6;
--brand-blackwell-rgb: 139, 92, 246;
--brand-rubin: #ec4899;
--brand-rubin-rgb: 236, 72, 153;
}
/* ============================================================================
BRAND MODIFIER CLASSES
============================================================================
Apply these classes to a parent container to set --brand-color variables
that child components will use.
============================================================================ */
/* SLYD Brands */
.brand-slyd-cyan,
.brand-cyan {
--brand-color: var(--brand-slyd-cyan);
--brand-color-dark: var(--brand-slyd-cyan-dark);
--brand-color-rgb: var(--brand-slyd-cyan-rgb);
}
.brand-slyd-gold,
.brand-gold {
--brand-color: var(--brand-slyd-gold);
--brand-color-dark: var(--brand-slyd-gold-dark);
--brand-color-rgb: var(--brand-slyd-gold-rgb);
}
.brand-slyd-purple,
.brand-purple {
--brand-color: var(--brand-slyd-purple);
--brand-color-dark: var(--brand-slyd-purple-dark);
--brand-color-rgb: var(--brand-slyd-purple-rgb);
}
.brand-slyd-green,
.brand-green {
--brand-color: var(--brand-slyd-green);
--brand-color-dark: var(--brand-slyd-green-dark);
--brand-color-rgb: var(--brand-slyd-green-rgb);
}
/* OEM Brands */
.brand-dell {
--brand-color: var(--brand-dell);
--brand-color-dark: var(--brand-dell-dark);
--brand-color-rgb: var(--brand-dell-rgb);
}
.brand-hpe {
--brand-color: var(--brand-hpe);
--brand-color-dark: var(--brand-hpe-dark);
--brand-color-rgb: var(--brand-hpe-rgb);
}
.brand-lenovo {
--brand-color: var(--brand-lenovo);
--brand-color-dark: var(--brand-lenovo-dark);
--brand-color-rgb: var(--brand-lenovo-rgb);
}
.brand-supermicro {
--brand-color: var(--brand-supermicro);
--brand-color-dark: var(--brand-supermicro-dark);
--brand-color-rgb: var(--brand-supermicro-rgb);
}
.brand-gigabyte {
--brand-color: var(--brand-gigabyte);
--brand-color-dark: var(--brand-gigabyte-dark);
--brand-color-rgb: var(--brand-gigabyte-rgb);
}
/* GPU Brands */
.brand-nvidia {
--brand-color: var(--brand-nvidia);
--brand-color-dark: var(--brand-nvidia-dark);
--brand-color-rgb: var(--brand-nvidia-rgb);
}
.brand-amd-instinct {
--brand-color: var(--brand-amd-instinct);
--brand-color-dark: var(--brand-amd-instinct-dark);
--brand-color-rgb: var(--brand-amd-instinct-rgb);
}
.brand-amd {
--brand-color: var(--brand-amd);
--brand-color-dark: var(--brand-amd-dark);
--brand-color-rgb: var(--brand-amd-rgb);
}
/* Architecture/Product Line Brands */
.brand-hopper {
--brand-color: var(--brand-hopper);
--brand-color-dark: var(--brand-slyd-cyan-dark);
--brand-color-rgb: var(--brand-hopper-rgb);
}
.brand-blackwell {
--brand-color: var(--brand-blackwell);
--brand-color-dark: var(--brand-slyd-purple-dark);
--brand-color-rgb: var(--brand-blackwell-rgb);
}
.brand-rubin {
--brand-color: var(--brand-rubin);
--brand-color-dark: #db2777;
--brand-color-rgb: var(--brand-rubin-rgb);
}
/* ============================================================================
DEFAULT BRAND (SLYD Cyan)
============================================================================
When no brand modifier is applied, components default to SLYD cyan.
============================================================================ */
:root {
--brand-color: var(--brand-slyd-cyan);
--brand-color-dark: var(--brand-slyd-cyan-dark);
--brand-color-rgb: var(--brand-slyd-cyan-rgb);
}
/* ============================================================================
ANIMATIONS - Shared Keyframe Animations
============================================================================
Consolidates commonly duplicated animations from page CSS files.
These were found duplicated in 10+ files across the codebase.
============================================================================ */
/* ============================================================================
PULSE ANIMATIONS
============================================================================ */
/* Pulse Dot - Used in hero tags, status indicators */
@keyframes pulse-dot {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(0.8);
}
}
/* Pulse Ring - Expanding ring effect */
@keyframes pulse-ring {
0% {
transform: scale(0.8);
opacity: 1;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
/* Pulse Glow - Subtle glow pulse */
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 20px rgba(var(--brand-color-rgb, 6, 182, 212), 0.3);
}
50% {
box-shadow: 0 0 40px rgba(var(--brand-color-rgb, 6, 182, 212), 0.5);
}
}
/* ============================================================================
FADE ANIMATIONS
============================================================================ */
/* Fade In */
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Fade Out */
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* Fade In Up */
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Fade In Down */
@keyframes fade-in-down {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Fade In Left */
@keyframes fade-in-left {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Fade In Right */
@keyframes fade-in-right {
from {
opacity: 0;
transform: translateX(60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ============================================================================
SLIDE ANIMATIONS
============================================================================ */
/* Slide Up */
@keyframes slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/* Slide Down */
@keyframes slide-down {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
/* Slide In */
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/* ============================================================================
SCALE ANIMATIONS
============================================================================ */
/* Scale In */
@keyframes scale-in {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Scale Out */
@keyframes scale-out {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.9);
}
}
/* Pop In - Bouncy scale */
@keyframes pop-in {
0% {
opacity: 0;
transform: scale(0.8);
}
70% {
transform: scale(1.05);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* ============================================================================
SPIN ANIMATIONS
============================================================================ */
/* Spin */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Spin Slow */
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ============================================================================
SHIMMER / LOADING ANIMATIONS
============================================================================ */
/* Shimmer - Skeleton loading effect */
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/* Progress - Indeterminate loading bar */
@keyframes progress {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* ============================================================================
BOUNCE ANIMATIONS
============================================================================ */
/* Bounce */
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* Bounce Subtle */
@keyframes bounce-subtle {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
/* ============================================================================
ATTENTION ANIMATIONS
============================================================================ */
/* Shake */
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-5px);
}
20%, 40%, 60%, 80% {
transform: translateX(5px);
}
}
/* Wiggle */
@keyframes wiggle {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(-5deg);
}
75% {
transform: rotate(5deg);
}
}
/* ============================================================================
UTILITY CLASSES
============================================================================ */
/* Animation delay utilities */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
/* Animation duration utilities */
.duration-fast { animation-duration: 150ms; }
.duration-normal { animation-duration: 300ms; }
.duration-slow { animation-duration: 500ms; }
.duration-slower { animation-duration: 1000ms; }
/* Animation classes */
.animate-pulse-dot {
animation: pulse-dot 2s ease-in-out infinite;
}
.animate-fade-in {
animation: fade-in 0.3s ease-out forwards;
}
.animate-fade-in-up {
animation: fade-in-up 0.4s ease-out forwards;
}
.animate-fade-in-right {
opacity: 0;
animation: fade-in-right 1.8s ease-out 0.2s forwards;
}
.animate-scale-in {
animation: scale-in 0.3s ease-out forwards;
}
.animate-spin {
animation: spin 1s linear infinite;
}
.animate-spin-slow {
animation: spin-slow 3s linear infinite;
}
.animate-shimmer {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0) 100%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
.animate-bounce {
animation: bounce 1s ease-in-out infinite;
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================================================
GENERIC HERO - Reusable Split-Layout Hero Section
============================================================================
Use with brand modifier classes from brand-colors.css to apply brand colors.
Usage:
Category
Title Gradient
Description
...
...
...
============================================================================ */
/* ============================================================================
HERO SECTION - MAIN CONTAINER
============================================================================ */
.page-hero {
position: relative;
z-index: 1;
min-height: 60vh;
padding: 100px 0 80px;
display: flex;
align-items: center;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 80% 50% at 20% 40%, rgba(var(--brand-color-rgb), 0.15), transparent),
radial-gradient(ellipse 60% 40% at 80% 60%, rgba(var(--brand-color-rgb), 0.08), transparent);
pointer-events: none;
}
/* ============================================================================
HERO CONTAINER - SPLIT LAYOUT GRID
============================================================================ */
.page-hero-container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative;
}
/* ============================================================================
HERO CONTENT - LEFT SIDE
============================================================================ */
.page-hero-content {
position: relative;
}
/* Hero Tag/Badge */
.page-hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-color);
padding: 10px 16px;
background: rgba(var(--brand-color-rgb), 0.08);
border: 1px solid rgba(var(--brand-color-rgb), 0.3);
border-radius: 4px;
margin-bottom: 28px;
}
/* Animated dot before tag */
.page-hero-tag::before {
content: '';
width: 6px;
height: 6px;
background: var(--brand-color);
border-radius: 50%;
animation: pulse-dot 2s ease-in-out infinite;
}
/* Tag without animated dot */
.page-hero-tag.no-dot::before {
display: none;
}
/* Hero Headline */
.page-hero-headline {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(2.75rem, 4.5vw, 4rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--slyd-text-primary);
margin: 0 0 24px 0;
}
.page-hero-headline .accent {
background: linear-gradient(135deg, var(--brand-color) 0%, var(--brand-color-dark) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Accent variant: brand to cyan gradient */
.page-hero-headline .accent-cyan {
background: linear-gradient(135deg, var(--brand-color) 0%, #06b6d4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Hero Subheadline */
.page-hero-subhead {
font-size: 1.25rem;
line-height: 1.7;
color: var(--slyd-text-tertiary);
margin: 0 0 32px 0;
max-width: 540px;
}
/* ============================================================================
HERO PROPS - FEATURE LIST
============================================================================ */
.page-hero-props {
display: flex;
flex-wrap: wrap;
gap: 20px 32px;
margin-bottom: 40px;
}
.page-hero-prop {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9375rem;
color: var(--slyd-text-tertiary);
}
.page-hero-prop :deep(svg),
.page-hero-prop :global(.icon) {
width: 18px;
height: 18px;
color: var(--brand-color);
}
/* ============================================================================
HERO ACTIONS - CTA BUTTONS
============================================================================ */
.page-hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
/* ============================================================================
HERO PREVIEW - RIGHT SIDE
============================================================================ */
.page-hero-preview {
position: relative;
}
/* Grid decoration element */
.page-hero-grid-deco {
position: absolute;
top: -40px;
right: -40px;
width: 200px;
height: 200px;
background-image:
linear-gradient(rgba(var(--brand-color-rgb), 0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--brand-color-rgb), 0.15) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.5;
transform: rotate(15deg);
pointer-events: none;
}
/* ============================================================================
HERO PREVIEW CARD - COMMON STYLES
============================================================================ */
.page-hero-card {
position: relative;
background: var(--slyd-bg-elevated);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.page-hero-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: var(--slyd-bg-elevated);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.page-hero-card-title {
display: flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.8125rem;
font-weight: 500;
color: #64748b;
}
.page-hero-card-title :deep(svg),
.page-hero-card-title :global(.icon) {
width: 16px;
height: 16px;
color: var(--brand-color);
}
.page-hero-card-badge {
font-family: 'JetBrains Mono', monospace;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--brand-color);
background: rgba(var(--brand-color-rgb), 0.1);
padding: 5px 10px;
border-radius: 20px;
}
.page-hero-card-body {
padding: 24px 20px;
}
.page-hero-card-footer {
padding: 16px 20px;
background: var(--slyd-bg-elevated);
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
/* ============================================================================
SHOWCASE CARD - OEM STYLE HERO CARD
============================================================================ */
.showcase-card {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(20px);
border: 1px solid rgba(var(--brand-color-rgb), 0.3);
border-radius: 16px;
padding: 0;
width: 100%;
max-width: 420px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(var(--brand-color-rgb), 0.2);
}
.showcase-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
background: rgba(var(--brand-color-rgb), 0.1);
border-bottom: 1px solid rgba(var(--brand-color-rgb), 0.2);
}
.showcase-badge {
padding: 4px 12px;
background: linear-gradient(135deg, var(--brand-color), var(--brand-color-dark));
color: white;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 4px;
}
.showcase-type {
font-size: 0.875rem;
color: rgba(248, 250, 252, 0.6);
}
.showcase-content {
padding: 32px 24px;
text-align: center;
}
.showcase-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, rgba(var(--brand-color-rgb), 0.2), rgba(var(--brand-color-rgb), 0.1));
border: 1px solid rgba(var(--brand-color-rgb), 0.3);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.showcase-icon :deep(svg),
.showcase-icon :global(.icon) {
width: 40px;
height: 40px;
color: var(--brand-color);
}
.showcase-icon .showcase-logo {
max-width: 56px;
max-height: 56px;
width: auto;
height: auto;
object-fit: contain;
}
.showcase-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--slyd-text-primary);
margin-bottom: 8px;
}
.showcase-subtitle {
font-size: 0.875rem;
color: rgba(248, 250, 252, 0.6);
margin-bottom: 20px;
}
.showcase-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.showcase-stat {
text-align: center;
}
.showcase-stat-value {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.25rem;
font-weight: 700;
color: var(--brand-color);
}
.showcase-stat-label {
font-size: 0.75rem;
color: rgba(248, 250, 252, 0.5);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ============================================================================
RESPONSIVE - 1200px
============================================================================ */
@media (max-width: 1200px) {
.page-hero-container {
gap: 48px;
}
}
/* ============================================================================
RESPONSIVE - 1024px (Tablet)
============================================================================ */
@media (max-width: 1024px) {
.page-hero-container {
grid-template-columns: 1fr;
text-align: center;
}
.page-hero-content {
max-width: 600px;
margin: 0 auto;
}
.page-hero-subhead {
margin-left: auto;
margin-right: auto;
}
.page-hero-props {
justify-content: center;
}
.page-hero-actions {
justify-content: center;
}
.page-hero-preview {
display: none;
}
/* Show preview on tablet if explicitly enabled */
.page-hero-preview.show-tablet {
display: block;
max-width: 400px;
margin: 0 auto;
}
.page-hero-grid-deco {
display: none;
}
.showcase-card {
margin: 0 auto;
}
}
/* ============================================================================
RESPONSIVE - 768px (Mobile)
============================================================================ */
@media (max-width: 768px) {
.page-hero {
min-height: auto;
padding: 120px 0 60px;
}
.page-hero-container {
padding: 0 24px;
}
.page-hero-headline {
font-size: clamp(2rem, 8vw, 2.75rem);
}
.page-hero-subhead {
font-size: 1.125rem;
}
.page-hero-props {
gap: 12px 24px;
}
.page-hero-prop {
font-size: 0.875rem;
}
.showcase-card {
max-width: 100%;
}
.showcase-content {
padding: 24px 20px;
}
}
/* ============================================================================
RESPONSIVE - 480px (Small Mobile)
============================================================================ */
@media (max-width: 480px) {
.page-hero {
padding: 100px 0 40px;
}
.page-hero-container {
padding: 0 16px;
}
.page-hero-tag {
font-size: 0.6875rem;
padding: 8px 12px;
}
.page-hero-headline {
font-size: 1.75rem;
margin-bottom: 16px;
}
.page-hero-subhead {
font-size: 1rem;
margin-bottom: 24px;
}
.page-hero-props {
flex-direction: column;
gap: 12px;
margin-bottom: 32px;
}
.page-hero-actions {
flex-direction: column;
}
.page-hero-actions > * {
width: 100%;
justify-content: center;
}
}
/* ============================================================================
HERO VARIANTS
============================================================================ */
/* Taller hero for homepage/landing pages */
.page-hero--tall {
min-height: 95vh;
}
/* Shorter hero for subpages */
.page-hero--short {
min-height: 70vh;
padding: 120px 0 80px;
}
/* Centered hero (no split layout) */
.page-hero--centered .page-hero-container {
grid-template-columns: 1fr;
text-align: center;
max-width: 900px;
}
.page-hero--centered .page-hero-content {
max-width: 700px;
margin: 0 auto;
}
.page-hero--centered .page-hero-subhead {
margin-left: auto;
margin-right: auto;
}
.page-hero--centered .page-hero-props {
justify-content: center;
}
.page-hero--centered .page-hero-actions {
justify-content: center;
}
/* ============================================================================
GENERIC BUTTONS - Brand-Aware Button System
============================================================================
Use with brand modifier classes from brand-colors.css to apply brand colors.
Usage:
Or use the global SLYD buttons (gold/outline) anywhere:
Gold CTA
Outline
============================================================================ */
/* ============================================================================
BRAND-AWARE BUTTONS
These use --brand-color from parent brand modifier class
============================================================================ */
.btn-brand-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
background: linear-gradient(135deg, var(--brand-color), var(--brand-color-dark));
color: white;
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 1rem;
line-height: 1;
border: none;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-brand-primary:active {
transform: translateY(0);
}
.btn-brand-primary :deep(svg),
.btn-brand-primary :global(.icon) {
width: 18px;
height: 18px;
}
.btn-brand-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
background: transparent;
color: var(--brand-color);
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 1rem;
line-height: 1;
border: 1px solid rgba(var(--brand-color-rgb), 0.4);
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-brand-secondary :deep(svg),
.btn-brand-secondary :global(.icon) {
width: 18px;
height: 18px;
}
/* ============================================================================
SLYD GLOBAL BUTTONS
Use anywhere without brand modifier class
============================================================================ */
/* Gold CTA Button - Primary action */
.btn-gold {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
background: linear-gradient(135deg, #f59e0b, #d97706);
color: var(--slyd-bg-body);
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 1rem;
line-height: 1;
border: none;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-gold:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.btn-gold:active {
transform: translateY(0);
}
.btn-gold :deep(svg),
.btn-gold :global(.icon) {
width: 18px;
height: 18px;
}
/* Outline Button - Secondary action */
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
background: rgba(255, 255, 255, 0.05);
color: var(--slyd-text-primary);
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 1rem;
line-height: 1;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
}
.btn-outline :deep(svg),
.btn-outline :global(.icon) {
width: 18px;
height: 18px;
}
/* Cyan Outline - Branded secondary */
.btn-outline-cyan {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
background: transparent;
color: #06b6d4;
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 1rem;
line-height: 1;
border: 1px solid rgba(6, 182, 212, 0.4);
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-outline-cyan :deep(svg),
.btn-outline-cyan :global(.icon) {
width: 18px;
height: 18px;
}
/* ============================================================================
BUTTON SIZES
============================================================================ */
/* Small */
.btn-sm {
padding: 10px 20px;
font-size: 0.875rem;
gap: 8px;
}
.btn-sm :deep(svg),
.btn-sm :global(.icon) {
width: 16px;
height: 16px;
}
/* Large */
.btn-lg {
padding: 20px 40px;
font-size: 1.125rem;
gap: 12px;
}
.btn-lg :deep(svg),
.btn-lg :global(.icon) {
width: 20px;
height: 20px;
}
/* ============================================================================
BUTTON MODIFIERS
============================================================================ */
/* Full width */
.btn-full {
width: 100%;
}
/* Icon only (square button) */
.btn-icon {
padding: 14px;
gap: 0;
}
.btn-icon.btn-sm {
padding: 10px;
}
.btn-icon.btn-lg {
padding: 18px;
}
/* Disabled state */
.btn-brand-primary:disabled,
.btn-brand-secondary:disabled,
.btn-gold:disabled,
.btn-outline:disabled,
.btn-outline-cyan:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* ============================================================================
RESPONSIVE
============================================================================ */
@media (max-width: 768px) {
.btn-brand-primary,
.btn-brand-secondary,
.btn-gold,
.btn-outline,
.btn-outline-cyan {
padding: 14px 24px;
font-size: 0.9375rem;
}
.btn-lg {
padding: 16px 32px;
font-size: 1rem;
}
}
@media (max-width: 480px) {
.btn-brand-primary,
.btn-brand-secondary,
.btn-gold,
.btn-outline,
.btn-outline-cyan {
padding: 12px 20px;
font-size: 0.875rem;
}
}
/* ============================================================================
GENERIC SECTIONS - Reusable Page Section Patterns
============================================================================
Standard section layouts used across all pages.
Usage:
============================================================================ */
/* ============================================================================
CONTAINER
============================================================================ */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 48px;
}
/* ============================================================================
PAGE SECTION - BASE
============================================================================ */
.page-section {
position: relative;
z-index: 1;
padding: 120px 0;
}
/* Alternating background */
.page-section--alt {
background: var(--slyd-bg-elevated);
}
/* Lighter alternate background */
.page-section--alt-light {
background: #0f172a;
}
/* ============================================================================
SECTION HEADER
============================================================================ */
.page-section-header {
text-align: center;
max-width: 800px;
margin: 0 auto 64px;
}
/* Left-aligned header variant */
.page-section-header--left {
text-align: left;
margin-left: 0;
margin-right: auto;
}
/* Section Tag */
.page-section-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brand-color, #06b6d4);
margin-bottom: 16px;
}
/* Tag with dot indicator */
.page-section-tag::before {
content: '';
width: 6px;
height: 6px;
background: var(--brand-color, #06b6d4);
border-radius: 50%;
}
/* Tag without dot */
.page-section-tag.no-dot::before {
display: none;
}
/* Section Title */
.page-section-title {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(2rem, 3.5vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
color: var(--slyd-text-primary);
margin: 0 0 20px 0;
}
/* Title with accent */
.page-section-title .accent {
background: linear-gradient(135deg, var(--brand-color, #06b6d4) 0%, var(--brand-color-dark, #0891b2) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Section Description */
.page-section-desc {
font-size: 1.125rem;
line-height: 1.7;
color: var(--slyd-text-tertiary);
max-width: 600px;
margin: 0 auto;
}
.page-section-header--left .page-section-desc {
margin-left: 0;
margin-right: auto;
}
/* ============================================================================
COMMON GRID PATTERNS
============================================================================ */
/* 2 Column Grid */
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
/* 3 Column Grid */
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* 4 Column Grid */
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
/* Auto-fit Grid (responsive) */
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
/* ============================================================================
SPLIT LAYOUTS
============================================================================ */
/* Two-column split (50/50) */
.split-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
/* Asymmetric split (content/visual) */
.split-layout--content-first {
grid-template-columns: 1.2fr 1fr;
}
.split-layout--visual-first {
grid-template-columns: 1fr 1.2fr;
}
/* ============================================================================
CTA SECTION
============================================================================ */
.page-cta {
position: relative;
z-index: 1;
padding: 100px 0;
text-align: center;
}
.page-cta::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 50% 50%, rgba(var(--brand-color-rgb, 6, 182, 212), 0.08) 0%, transparent 70%);
pointer-events: none;
}
.page-cta-content {
position: relative;
max-width: 700px;
margin: 0 auto;
}
.page-cta-title {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
color: var(--slyd-text-primary);
margin: 0 0 20px 0;
}
.page-cta-desc {
font-size: 1.125rem;
line-height: 1.7;
color: var(--slyd-text-tertiary);
margin: 0 0 32px 0;
}
.page-cta-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================================================
RESPONSIVE - 1200px
============================================================================ */
@media (max-width: 1200px) {
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================================================
RESPONSIVE - 1024px (Tablet)
============================================================================ */
@media (max-width: 1024px) {
.split-layout,
.split-layout--content-first,
.split-layout--visual-first {
grid-template-columns: 1fr;
gap: 48px;
}
.grid-3 {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================================================
RESPONSIVE - 768px (Mobile)
============================================================================ */
@media (max-width: 768px) {
.container {
padding: 0 24px;
}
.page-section {
padding: 80px 0;
}
.page-section-header {
margin-bottom: 48px;
}
.page-section-title {
font-size: clamp(1.75rem, 6vw, 2.25rem);
}
.page-section-desc {
font-size: 1rem;
}
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
}
.grid-auto {
grid-template-columns: 1fr;
}
.page-cta {
padding: 80px 0;
}
.page-cta-actions {
flex-direction: column;
align-items: center;
}
.page-cta-actions > * {
width: 100%;
max-width: 300px;
}
}
/* ============================================================================
RESPONSIVE - 480px (Small Mobile)
============================================================================ */
@media (max-width: 480px) {
.container {
padding: 0 16px;
}
.page-section {
padding: 60px 0;
}
.page-section-header {
margin-bottom: 40px;
}
.page-section-tag {
font-size: 0.6875rem;
}
.page-cta {
padding: 60px 0;
}
}
/* ============================================================================
SECTION SPACING MODIFIERS
============================================================================ */
/* Compact section */
.page-section--compact {
padding: 80px 0;
}
/* Extra padding section */
.page-section--spacious {
padding: 160px 0;
}
/* No top padding (after hero) */
.page-section--no-top {
padding-top: 0;
}
/* No bottom padding */
.page-section--no-bottom {
padding-bottom: 0;
}
/* ===========================================
HERO GRID FIELD
The masked grid + corner glow first built for the /broker hero.
Put `hero-grid-field` on a hero to get it — one copy of
the treatment, no per-page duplication.
Both layers sit at z-index -1: they paint over the section's own
background but under its content, so a consumer needs no stacking
fix of its own. A page that already defines its own hero ::before
glow keeps it — scoped page CSS outranks this, and only the grid
::after lands.
`isolation: isolate` is load-bearing. Without a stacking context on
the section itself, the z-index: -1 layers escape to the nearest one
and paint behind whatever opaque background an ancestor carries —
which is exactly what the v3 page wrappers (.v3hs, .v3hw …) do, so
the grid rendered as nothing at all. It costs nothing here: the
overflow: hidden above already keeps hero content from escaping.
=========================================== */
.hero-grid-field {
position: relative;
isolation: isolate;
overflow: hidden;
}
.hero-grid-field::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(900px 520px at 75% 0%,
var(--primary-glow, var(--slyd-primary-glow)), transparent 65%);
}
.hero-grid-field::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
/* --slyd-grid-line isn't in DesignTokens.css yet, hence the literal
fallback — same chain the v3 pages already use locally. */
background-image:
linear-gradient(to right, var(--grid-line, var(--slyd-grid-line, hsla(0, 0%, 100%, 0.04))) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-line, var(--slyd-grid-line, hsla(0, 0%, 100%, 0.04))) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 800px 520px at 60% 20%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 800px 520px at 60% 20%, #000 30%, transparent 75%);
}
/* ===========================================
HERO HEADLINE SLIDE-UP REVEAL
Applied by hero-reveal.js — must be global
because JS-created elements don't get
Blazor scoped-CSS attributes.
FAIL-OPEN CONTRACT (shared with SCROLL REVEAL below)
Nothing on the page is hidden by CSS alone. The hidden start state only
applies once carries .js-reveal-ready, which the reveal scripts
add as their first statement. Until then — no JS, JS blocked, a script
that failed to load, or a synthetic trace that never ran it — every
target paints at full opacity. The audit that motivated this measured
an 18.7s Speed Index against a 2.6s LCP: the hero sat at opacity 0
waiting for a deferred script behind blazor.web.js.
The hidden state is also scoped to (prefers-reduced-motion: no-preference)
so a reduced-motion visitor never enters it, whatever the scripts do.
=========================================== */
@media (prefers-reduced-motion: no-preference) {
/* Hide hero content only once JS is confirmed running, and only until
hero-reveal.js has handed each element its animation. The :not()
guards make the rule stop matching the moment the script annotates
an element, so the hidden state and the animation swap in the same
frame with nothing left behind at opacity 0. */
html.js-reveal-ready .hero-headline:not(.hero-revealed),
html.js-reveal-ready .hero-content > :not(.hero-headline):not(.hero-fade-up),
html.js-reveal-ready [data-hero-reveal] > :not(.hero-fade-up):not(.hero-revealed) {
opacity: 0;
/* Belt and braces: if the class was set but the script died before
annotating (an exception mid-wrap, say), a delayed zero-length
animation lifts the element back to opacity 1 without JS. The
delay is longer than the full hero stagger so it never fires on a
healthy load. Animations override inline styles, but the script
also writes opacity: 1 inline, so the two agree when both apply. */
animation: hero-reveal-failsafe 1ms linear 3s forwards;
}
}
@keyframes hero-reveal-failsafe {
to { opacity: 1; }
}
/* Respect reduced motion — hero-reveal.js reveals directly without
animating, and the hidden state above never applies. Also strip the
motion from the animation classes in case they were added anyway. */
@media (prefers-reduced-motion: reduce) {
.hero-headline,
.hero-content > :not(.hero-headline),
[data-hero-reveal] > * {
opacity: 1;
}
.hero-line-inner,
.hero-fade-up {
animation: none;
opacity: 1;
transform: none;
}
}
/* ===========================================
SCROLL REVEAL
Fade-up animation triggered by IntersectionObserver.
Add class="scroll-reveal" to any element.
Use data-delay="0.15" for stagger on siblings.
Applied by scroll-reveal.js — must be global.
Same fail-open contract as the hero above: the hidden start state needs
html.js-reveal-ready AND motion preference, and it stops matching as
soon as .revealed lands. A manually authored class="scroll-reveal" in
markup is therefore visible until the script runs, and the script
reveals anything already on screen synchronously so it never blinks.
=========================================== */
.scroll-reveal {
transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: no-preference) {
html.js-reveal-ready .scroll-reveal:not(.revealed) {
opacity: 0;
transform: translateY(24px);
}
}
/* `none`, not translateY(0): a transform of any value keeps a stacking
context alive on the element, which would trap the z-index: -1
decoration layers some sections paint. Interpolates the same. */
.scroll-reveal.revealed {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.scroll-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
.hero-line {
display: block;
overflow: hidden;
padding-bottom: 0.1em;
margin-top: -0.1em;
}
.hero-line-inner {
display: block;
opacity: 0;
transform: translateY(100%);
animation: hero-line-reveal 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes hero-line-reveal {
0% {
opacity: 0;
transform: translateY(100%);
}
30% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.hero-fade-up {
opacity: 0;
transform: translateY(16px);
animation: hero-fade-up 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes hero-fade-up {
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================================
PINNED REVEAL — Scroll-driven image overlay
============================================================================ */
.pinned-reveal {
position: relative;
height: 300vh;
}
.pinned-reveal-sticky {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.pinned-reveal-frame {
position: relative;
width: 100%;
max-width: 1000px;
aspect-ratio: 16 / 11;
border-radius: 16px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.06),
0 25px 80px rgba(0, 0, 0, 0.5),
0 0 60px rgba(6, 182, 212, 0.08);
}
.pinned-reveal-chrome {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 36px;
background: #1e293b;
display: flex;
align-items: center;
padding-left: 14px;
gap: 7px;
z-index: 3;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pinned-reveal-chrome-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: block;
}
.pinned-reveal-chrome-dot:nth-child(1) { background: #ef4444; }
.pinned-reveal-chrome-dot:nth-child(2) { background: #f59e0b; }
.pinned-reveal-chrome-dot:nth-child(3) { background: #22c55e; }
.pinned-reveal-base,
.pinned-reveal-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
padding-top: 36px;
}
.pinned-reveal-base {
z-index: 1;
}
.pinned-reveal-overlay {
z-index: 2;
transform: translateY(-100%);
will-change: transform;
}
/* Responsive */
@media (max-width: 1024px) {
.pinned-reveal { height: 260vh; }
.pinned-reveal-frame { max-width: 90%; }
}
@media (max-width: 768px) {
.pinned-reveal { height: 220vh; }
.pinned-reveal-frame { max-width: 95%; }
.pinned-reveal-chrome { height: 28px; padding-left: 10px; gap: 6px; }
.pinned-reveal-chrome-dot { width: 8px; height: 8px; }
.pinned-reveal-base,
.pinned-reveal-overlay { padding-top: 28px; }
}
@media (max-width: 480px) {
.pinned-reveal { height: 200vh; }
.pinned-reveal-frame { max-width: 100%; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.pinned-reveal { height: auto; }
.pinned-reveal-sticky { position: relative; height: auto; min-height: 50vh; }
.pinned-reveal-overlay { transform: translateY(0) !important; }
.pinned-reveal-base { display: none; }
}
/* ===========================================
GLASS SURFACE — new design system component, review
-------------------------------------------
Translucent card material. Put `glass-surface` on any card-like element;
it supplies background, border and rim only, so the consumer keeps its
own padding, radius and layout. The rim follows whatever border-radius
the consumer sets, because it is drawn with inset shadows.
Pair it with `glass-field` on the SECTION behind. That is not optional
decoration — backdrop-filter blurs whatever is behind it, and this site's
body is near-flat near-black, so blur alone returns near-flat near-black
and the glass reads as nothing at all. The field supplies the luminance
the material bends. See Need.razor.css, which records the same failure
from the other direction ("glass tokens wash out on bg-body + particles")
— that happens when the FILL is light; here the fill stays dark and the
light sits behind.
Deliberately neutral white, never a coloured wash: the brand direction
rules out "generic AI purple gradients", and warm accents go muddy behind
a dark translucent fill.
No hover state here by design (Design.md 3.2) — most consumers are static
cards. Interactive consumers add their own.
=========================================== */
.glass-surface {
background:
var(--slyd-card-bg-frosted-glass),
color-mix(in oklab, var(--slyd-bg-body) 55%, transparent);
border: 1px solid color-mix(in oklab, var(--slyd-text-primary) 16%, transparent);
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
box-shadow:
/* specular rim, brightest along the top edge where light would catch */
inset 0 1px 0 color-mix(in oklab, var(--slyd-text-primary) 22%, transparent),
inset 0 0 0 1px color-mix(in oklab, var(--slyd-text-primary) 5%, transparent),
0 12px 32px -16px hsl(229 84% 2% / .9);
}
/* Older Firefox / some embedded webviews: degrade to the solid surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass-surface {
background: var(--slyd-bg-card);
border-color: var(--slyd-border);
}
}
/* ===========================================
GRID SWEEP FIELD
===========================================
A dark surface with a line grid that a diagonal band of light travels
across, revealing the lines as it passes and letting them fade behind it.
Attach to any section that wants the treatment:
Composes with .glass-field, which uses ::before for its bloom while this
uses ::after, so a section can carry both. Source order puts the grid above
the bloom, so the lines catch the light rather than being buried by it.
`isolation: isolate` is required for the same reason it is on .glass-field:
without a stacking context the z-index:-1 layer escapes and paints behind
the page wrapper's opaque background, rendering as nothing.
Tunable per consumer, so a section can dial the effect down rather than
fork it:
--grid-sweep-bg surface colour (default: theme body)
--grid-sweep-line grid line colour (default: theme-tinted)
--grid-sweep-cell cell size (default clamp(32px, 2.2vw, 56px))
--grid-sweep-angle sweep direction (default 115deg)
--grid-sweep-duration one pass at 1440px wide (default 10s — see below)
--grid-sweep-amplitude how far the wave pushes (default: 0.44 × cell, JS only)
--grid-sweep-band width of the disturbance (default clamp(190px, 13vw, 420px), JS only)
The lengths are clamp() rather than fixed pixels on purpose: absolute
numbers do not describe the same effect on a laptop and a 5K display. At a
fixed 32px cell a wide screen shows ~100 columns and the mesh reads as
noise; at a fixed 190px band the disturbance is a thin ribbon crossing a
large empty field. Scaling both with the viewport keeps the effect the same
fraction of the screen at any width.
--grid-sweep-duration is one pass *at 1440px wide*, not one pass full stop.
grid-sweep.js scales it by how much further the wave actually has to
travel, which holds velocity constant; a fixed duration over a longer
diagonal just makes the wave move faster on bigger monitors. The no-JS
fallback below cannot do that — its mask animation is a percentage sweep,
so it is already width-relative and takes the authored duration as-is.
grid-sweep.js upgrades this to a canvas that displaces the lines as the
band passes, rather than only revealing them. The CSS below is the no-JS
fallback and is hidden once the canvas is live.
Motion note: Design.md 6 restricts motion to interaction and bans floating
decorative elements. This is a deliberate, owner-approved exception for
section backgrounds; it is not licence for ambient motion elsewhere. It
holds still under prefers-reduced-motion rather than disappearing, so the
texture survives without the movement.
=========================================== */
.grid-sweep-field {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--grid-sweep-bg, var(--slyd-bg-body));
}
/* Glass surfaces inside the field composite against the field colour rather
than the page colour. Without this they keep their page-level tint and
float above the section instead of sitting in it — the same fill reads as
flush on one background and raised on another.
The fill is also thinned and the blur softened so the wave carries through
the glass. The canvas already sits behind these surfaces and backdrop-filter
already samples it; at the stock 24px blur and a heavier fill the grid was
smeared past recognition. Lower blur keeps the lines legible through the
card, lower fill lets enough light through to see them move.
--grid-sweep-glass fill opacity (lower = more wave through, less contrast
behind text; default 48%) */
.grid-sweep-field .glass-surface {
background:
var(--slyd-card-bg-frosted-glass),
color-mix(in oklab, var(--grid-sweep-bg, var(--slyd-bg-body)) var(--grid-sweep-glass, 48%), transparent);
-webkit-backdrop-filter: blur(11px) saturate(180%);
backdrop-filter: blur(11px) saturate(180%);
}
.grid-sweep-field {
/* Carries a trace of the active accent so the grid reads as part of the
theme rather than a neutral overlay dropped on top of it. */
/* Two-stage mix on purpose. Mixing an opaque accent straight into a
translucent white averages the alpha upward — 28% of something opaque
against 11% white lands near 36% and the grid shouts. So: tint first
(accent toward white, giving the hue), then set the alpha (against
transparent). Stays theme-aware without the brightness surprise. */
--grid-sweep-line-default:
color-mix(in oklab, color-mix(in oklab, var(--slyd-primary) 55%, #fff) 13%, transparent);
}
.grid-sweep-field::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
linear-gradient(to right, var(--grid-sweep-line, var(--grid-sweep-line-default)) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-sweep-line, var(--grid-sweep-line-default)) 1px, transparent 1px);
background-size:
var(--grid-sweep-cell, clamp(32px, 2.2vw, 56px))
var(--grid-sweep-cell, clamp(32px, 2.2vw, 56px));
-webkit-mask-image: linear-gradient(var(--grid-sweep-angle, 115deg), transparent 30%, #000 46%, #000 54%, transparent 70%);
mask-image: linear-gradient(var(--grid-sweep-angle, 115deg), transparent 30%, #000 46%, #000 54%, transparent 70%);
-webkit-mask-size: 260% 260%;
mask-size: 260% 260%;
animation: grid-sweep var(--grid-sweep-duration, 10s) linear infinite;
}
/* The canvas replaces the CSS grid entirely once it is running, so the two
never stack. */
.grid-sweep-field.grid-sweep-live::after { display: none; }
.grid-sweep-field > .grid-sweep-canvas {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
display: block;
}
@keyframes grid-sweep {
from { -webkit-mask-position: 130% -30%; mask-position: 130% -30%; }
to { -webkit-mask-position: -30% 130%; mask-position: -30% 130%; }
}
@media (prefers-reduced-motion: reduce) {
.grid-sweep-field::after {
animation: none;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
}
}
/* The light the glass bends. `isolation: isolate` is load-bearing for the
same reason it is on hero-grid-field: without a stacking context the
z-index:-1 layer escapes and paints behind the page wrapper's opaque
background, rendering as nothing. */
.glass-field {
position: relative;
isolation: isolate;
}
.glass-field::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(760px 420px at 22% 38%, color-mix(in oklab, var(--slyd-text-primary) 13%, transparent), transparent 68%),
radial-gradient(720px 400px at 82% 62%, color-mix(in oklab, var(--slyd-text-primary) 10%, transparent), transparent 66%);
opacity: .6;
}