/* The ZIP's default header/footer mark is white. Theme settings can still
override it through --gs-mark-color or the data-gs-mark-color selectors. */
.gs-mark { display: inline-block; width: var(--gs-mark-size); height: var(--gs-mark-size); flex: none; perspective: 200px; color: var(--gs-mark-color, #fff); }
.gs-mark svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; }
:root[data-gs-mark-color='accent'] .gs-mark { --gs-mark-color: var(--gs-accent); }
:root[data-gs-mark-color='accent-2'] .gs-mark { --gs-mark-color: var(--gs-accent-2, var(--gs-accent)); }
.gs-mark__face { fill: currentColor; }
.gs-mark__face--0 { fill-opacity: 1; } .gs-mark__face--1 { fill-opacity: .62; } .gs-mark__face--2 { fill-opacity: .34; }
:root[data-gs-mark-tone='flat'] .gs-mark__face { fill-opacity: 1; }
:root[data-gs-mark-tone='duotone'] .gs-mark__face--1 { fill: var(--gs-accent-2, var(--gs-accent)); fill-opacity: 1; }
:root[data-gs-mark-tone='duotone'] .gs-mark__face--2 { fill-opacity: 1; }
:root[data-gs-mark-tone='ghost'] .gs-mark__face--0 { fill-opacity: .5; }
:root[data-gs-mark-tone='ghost'] .gs-mark__face--1 { fill-opacity: .3; }
:root[data-gs-mark-tone='ghost'] .gs-mark__face--2 { fill-opacity: .15; }
.gs-mark__stop-a { stop-color: var(--gs-accent); } .gs-mark__stop-b { stop-color: var(--gs-accent-2, var(--gs-accent)); }
.gs-mark__tex-bg { fill: currentColor; opacity: .25; } .gs-mark__tex-fg { fill: currentColor; }
:root[data-gs-mark-fill='gradient'] .gs-mark__face { fill: var(--grad); }
:root[data-gs-mark-fill='texture'] .gs-mark__face { fill: var(--tex); }
:root[data-gs-mark-fill='outline'] .gs-mark__face, .gs-mark--hero .gs-mark__face { fill: none; stroke: currentColor; stroke-width: 4; stroke-linejoin: round; }
:root[data-gs-mark-shadow='soft'] .gs-mark svg { filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
:root[data-gs-mark-shadow='glow'] .gs-mark svg { filter: drop-shadow(0 0 8px var(--gs-accent)); }
:root[data-gs-mark-shadow='long'] .gs-mark svg { filter: drop-shadow(6px 6px 0 color-mix(in srgb, var(--gs-accent) 45%, transparent)); }
@keyframes gsLock { 0% { transform: translate(var(--dx), var(--dy)); opacity: .25 } 28% { transform: translate(0,0); opacity: 1 } 31% { transform: translate(calc(var(--dx) * -.06), calc(var(--dy) * -.06)) } 34%, 72% { transform: translate(0,0); opacity: 1 } 100% { transform: translate(var(--dx), var(--dy)); opacity: .25 } }
@keyframes gsLockIn { from { transform: translate(var(--dx), var(--dy)); opacity: 0 } to { transform: translate(0,0); opacity: 1 } }
@keyframes gsSpin { to { transform: rotate(360deg) } }
@keyframes gsMarkFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-12%) } }
@keyframes gsMarkPulse { 0%, 100% { transform: scale(1); opacity: 1 } 50% { transform: scale(.9); opacity: .6 } }
@keyframes gsMorph { 0%, 100% { transform: rotateY(0) rotate(0) } 25% { transform: rotateY(180deg) } 50% { transform: rotateY(180deg) rotate(120deg) } 75% { transform: rotateY(0) rotate(120deg) } }
@keyframes gsShimmer { 0%, 100% { stop-color: var(--gs-accent) } 50% { stop-color: var(--gs-accent-2, var(--gs-accent)) } }
@media (prefers-reduced-motion: no-preference) {
:root[data-gs-mark-anim='lock-in-once'] .gs-mark__beam { animation: gsLockIn .9s cubic-bezier(.2,1.4,.4,1) calc(.2s + var(--i) * .15s) both; }
:root[data-gs-mark-anim='lock-in-loop'] .gs-mark__beam { animation: gsLock 3.8s cubic-bezier(.7,0,.2,1) calc(var(--i) * .12s) infinite; }
:root[data-gs-mark-anim='float'] .gs-mark svg { animation: gsMarkFloat 4s ease-in-out infinite; }
:root[data-gs-mark-anim='spin'] .gs-mark:not(.gs-mark--hero) svg { animation: gsSpin 1.4s linear infinite; }
:root[data-gs-mark-anim='pulse'] .gs-mark:not(.gs-mark--hero) svg { animation: gsMarkPulse 2.2s ease-in-out infinite; }
:root[data-gs-mark-anim='transform'] .gs-mark svg { animation: gsMorph 6s cubic-bezier(.7,0,.3,1) infinite; }
:root[data-gs-mark-anim='shimmer'] .gs-mark__stop-a { animation: gsShimmer 4s linear infinite; }
}:root {
/* Typography */
--gs-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--gs-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
--gs-font-heading: var(--gs-font-display);
--gs-line-height: 1.6;
--gs-line-height-heading: 1.2;
--gs-font-size-body: 1rem;
--gs-font-size-h1: clamp(2rem, 3.6vw, 3.6rem);
--gs-font-size-h2: clamp(1.5rem, 2.5vw, 2.25rem);
--gs-font-size-h3: 1.5rem;
--gs-font-size-h4: 1.25rem;
--gs-font-size-h5: 1rem;
--gs-font-size-h6: 0.875rem;
/* Spacing scale */
--gs-space-0: 0px;
--gs-space-1: 4px;
--gs-space-2: 8px;
--gs-space-3: 12px;
--gs-space-4: 16px;
--gs-space-5: 20px;
--gs-space-6: 24px;
--gs-space-7: 32px;
--gs-space-8: 40px;
--gs-space-9: 48px;
--gs-space-10: 64px;
/* Border radius */
--gs-radius-xs: 2px;
--gs-radius-sm: 2px;
--gs-radius-md: 2px;
--gs-radius-lg: 2px;
--gs-radius-pill: 2px;
/* Color palette — copper-on-black */
--gs-color-primary: #d96a32;
--gs-color-text: #e4ecfa; /* General body text (slightly off-white for readability) */
--gs-color-bg: #050507;
--gs-color-surface: #0c1221;
--gs-color-surface-strong: #0f172a;
--gs-color-muted-surface: #111a2f;
--gs-color-border: rgba(255, 120, 54, 0.14);
--gs-color-border-strong: #2d3c52;
--gs-color-subtle: #9fb2d4;
--gs-color-faint: #7a8cae;
--gs-accent: var(--gs-copper);
--gs-accent-strong: var(--gs-copper-glow);
--gs-accent-soft: var(--gs-copper-soft);
--gs-accent-contrast: #031122;
--gs-success: #22c55e;
--gs-warning: #fbbf24;
--gs-danger: #ef4444;
--gs-info: #38bdf8;
--gs-accent-blue: #5882ff;
--gs-accent-cyan: #22d3ee;
/* Shadows */
--gs-shadow-soft: none;
--gs-shadow-hard: none;
/* Transition */
--gs-transition: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
/* Effect tokens */
--gs-effect-signal-blue-08: color-mix(in srgb, var(--gs-accent-blue) 8%, transparent);
--gs-effect-signal-blue-12: color-mix(in srgb, var(--gs-accent-blue) 12%, transparent);
--gs-effect-signal-blue-18: color-mix(in srgb, var(--gs-accent-blue) 18%, transparent);
--gs-effect-signal-blue-24: color-mix(in srgb, var(--gs-accent-blue) 24%, transparent);
--gs-effect-signal-blue-32: color-mix(in srgb, var(--gs-accent-blue) 32%, transparent);
--gs-effect-signal-blue-45: color-mix(in srgb, var(--gs-accent-blue) 45%, transparent);
--gs-effect-star-core: color-mix(in srgb, white 92%, var(--gs-accent-blue) 8%);
--gs-effect-star-glow: var(--gs-effect-signal-blue-24);
--gs-effect-sweep-core: var(--gs-effect-signal-blue-32);
--gs-effect-sweep-edge: var(--gs-effect-signal-blue-08);
/* Text */
--gs-text-primary: #fff;
--gs-text-secondary: rgba(255, 255, 255, 0.7);
/* Header */
--gs-header-bg-glass: rgba(5, 5, 7, 0.82);
--gs-header-bg-scrolled: rgba(0, 0, 0, 0.95);
--gs-header-border-subtle: rgba(255, 255, 255, 0.05);
--gs-header-border-accent: rgba(217, 106, 50, 0.15);
--gs-header-shadow-scrolled: 0 10px 40px -10px rgba(0, 0, 0, 0.8);
/* Logo */
--gs-logo-glow-soft: rgba(217, 106, 50, 0.3);
--gs-logo-glow-strong: rgba(217, 106, 50, 0.6);
/* Nav */
--gs-nav-indicator-bg: var(--gs-copper);
--gs-nav-indicator-shadow: 0 0 8px var(--gs-copper);
/* Mobile menu */
--gs-mobile-menu-bg: #000;
--gs-mobile-menu-border: rgba(255, 255, 255, 0.1);
/* Background system */
--gs-bg-primary: #050507;
--gs-bg-secondary: #0a0c12;
--gs-bg-surface: #0e121a;
--gs-bg: #050507;
--gs-surface: rgba(14, 16, 20, 0.84);
--gs-surface-strong: rgba(20, 23, 29, 0.94);
/* Accent palette */
--gs-accent-gold: #eab308;
/* Text system */
--gs-text: #f1f4f8;
--gs-text-dim: #9ca5b4;
--gs-text-muted: #9ca5b4;
/* Border system */
--gs-border: rgba(255, 120, 54, 0.14);
--gs-border-subtle: rgba(255, 255, 255, 0.06);
/* Radius overrides */
--gs-radius-lg: 2px;
--gs-radius-md: 2px;
/* Layout */
--gs-section-spacing: 6rem;
--gs-content-width: 1100px;
--gs-max-width: 1200px;
/* Copper palette */
--gs-copper: #d96a32;
--gs-copper-soft: rgba(217, 106, 50, 0.14);
--gs-copper-glow: rgba(217, 106, 50, 0.28);
--gs-copper-strong: rgba(217, 106, 50, 0.42);
/* Blue signal palette */
--gs-blue: #59a8ff;
--gs-blue-soft: rgba(89, 168, 255, 0.12);
--gs-blue-glow: rgba(89, 168, 255, 0.24);
/* Semantic */
--gs-success: #5ddb9a;
--gs-warning: #f0b35b;
--gs-danger: #f56b6b;
/* Primary alias (copper) */
--gs-primary: var(--gs-copper);
--gs-primary-soft: var(--gs-copper-soft);
--gs-primary-glow: var(--gs-copper-glow);
/* Compatibility aliases */
--gs-color-bg: var(--gs-bg-primary);
--gs-color-surface: var(--gs-bg-secondary);
--gs-color-muted-surface: var(--gs-bg-surface);
--gs-color-text: var(--gs-text-primary);
--gs-color-subtle: var(--gs-text-muted);
--gs-color-border: var(--gs-border);
--gs-accent: var(--gs-primary);
--gs-accent-strong: var(--gs-accent-gold);
/* Hero and marketing effect tokens */
--gs-hero-text-primary: #e5eefc;
--gs-hero-text-secondary: #bfccdf;
--gs-hero-mark: #f6cf7a;
--gs-hero-vignette-core: rgba(140, 176, 255, 0.16);
--gs-hero-vignette-fade-start: rgba(2, 6, 23, 0.18);
--gs-hero-vignette-fade-end: rgba(2, 6, 23, 0.78);
--gs-hero-depth-glow: rgba(90, 140, 255, 0.12);
--gs-divider-signal: rgba(90, 140, 255, 0.3);
--gs-divider-sweep: rgba(255, 107, 0, 0.15);
--gs-panel-border-subtle: rgba(255, 255, 255, 0.05);
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--gs-color-bg);
color: var(--gs-color-text);
font-family: var(--gs-font-body, 'Inter', system-ui, sans-serif);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
line-height: var(--gs-line-height);
font-size: var(--gs-font-size-body);
min-height: 100vh;
}
img { max-width: 100%; height: auto; }
a { color: var(--gs-accent); text-decoration: none; transition: color var(--gs-transition); }
a:hover { color: var(--gs-accent-strong); }
a.button-link { text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--gs-font-display, 'Space Grotesk', 'Inter', system-ui, sans-serif);
letter-spacing: -0.02em;
margin: var(--gs-space-6) 0 var(--gs-space-3);
color: var(--gs-color-text);
line-height: var(--gs-line-height-heading);
}
h1 { font-size: var(--gs-font-size-h1); }
h2 { font-size: var(--gs-font-size-h2); }
h3 { font-size: var(--gs-font-size-h3); }
h4 { font-size: var(--gs-font-size-h4); }
h5 { font-size: var(--gs-font-size-h5); }
h6 { font-size: var(--gs-font-size-h6); }
p { color: var(--gs-color-subtle); margin: 0 0 var(--gs-space-4); }
ul, ol { color: var(--gs-color-subtle); padding-left: var(--gs-space-6); }
label { display: inline-block; color: var(--gs-color-text); font-weight: 600; margin-bottom: var(--gs-space-2); }
input, select, textarea {
width: 100%;
padding: var(--gs-space-3) var(--gs-space-4);
border-radius: var(--gs-radius-sm);
border: 1px solid var(--gs-color-border);
background: var(--gs-color-surface);
color: var(--gs-color-text);
font: inherit;
transition: border-color var(--gs-transition), box-shadow var(--gs-transition), background var(--gs-transition);
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--gs-accent);
box-shadow: 0 0 0 3px var(--gs-accent-soft);
}
::selection { background: var(--gs-accent-soft); color: var(--gs-color-text); }
.skip-link {
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
background: var(--gs-accent);
color: var(--gs-accent-contrast);
font-weight: 700;
padding: var(--gs-space-3) var(--gs-space-5);
border-radius: var(--gs-radius-md);
z-index: 9999;
box-shadow: var(--gs-shadow-hard);
transition: top 0.3s cubic-bezier(.22, .61, .36, 1);
text-decoration: none;
}
.skip-link:focus {
top: var(--gs-space-4);
outline: 2px solid var(--gs-color-text);
outline-offset: 4px;
}
.section-title {
display: flex;
align-items: center;
gap: var(--gs-space-3);
margin-bottom: var(--gs-space-3);
}
.section-title span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: var(--gs-radius-pill);
background: var(--gs-accent-soft);
color: var(--gs-accent-strong);
}
/* Utilities */
.gs-row {
display: flex;
align-items: center;
gap: var(--gs-space-3);
}
.gs-row.between { justify-content: space-between; }
.gs-row.tight { gap: var(--gs-space-2); }
.gs-stack {
display: flex;
flex-direction: column;
gap: var(--gs-space-4);
}
.gs-no-margin { margin: 0; }
.gs-mt-3 { margin-top: var(--gs-space-3); }
.gs-mt-6 { margin-top: var(--gs-space-6); }
.gs-text-accent { color: var(--gs-accent); }
.gs-text-subtle { color: var(--gs-color-subtle); }
.gs-text-faint { color: var(--gs-color-faint); }
.gs-text-success { color: var(--gs-success); }
.gs-text-warning { color: var(--gs-warning); }
.gs-text-danger { color: var(--gs-danger); }
.gs-text-info { color: var(--gs-info); }
.aria-icon {
display: inline-flex;
width: 1em;
height: 1em;
background: currentColor;
-webkit-mask: var(--aria-icon) no-repeat center / contain;
mask: var(--aria-icon) no-repeat center / contain;
}
.aria-icon-orbit {
--aria-icon: url("data:image/svg+xml;utf8,");
}
.aria-icon-signal {
--aria-icon: url("data:image/svg+xml;utf8,");
}
.gs-shell {
display: flex;
min-height: 100vh;
background: linear-gradient(140deg, rgba(7, 11, 25, 0.9), rgba(7, 12, 30, 0.95));
}
.gs-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--gs-space-3) var(--gs-space-6);
--gs-header-opacity: 0;
background: rgba(2, 4, 8, var(--gs-header-opacity));
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
position: sticky;
top: 0;
z-index: 20;
isolation: isolate;
transition: background 220ms ease, box-shadow 220ms ease;
}
.gs-header::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 18px;
background: linear-gradient(180deg, rgba(12, 18, 32, calc(var(--gs-header-opacity) * 0.7)) 0%, rgba(12, 18, 32, 0) 100%);
pointer-events: none;
z-index: -1;
}
.gs-header.is-scrolled {
box-shadow: 0 12px 30px rgba(5, 12, 28, 0.35);
}
.gs-logo {
display: inline-flex;
align-items: center;
gap: var(--gs-space-3);
color: var(--gs-color-text);
font-weight: 700;
letter-spacing: var(--gs-letter-wide);
text-transform: uppercase;
}
.gs-nav-toggle {
display: none;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--gs-radius-sm);
border: 1px solid var(--gs-color-border);
background: rgba(255, 255, 255, 0.04);
color: var(--gs-color-text);
cursor: pointer;
transition: background var(--gs-transition), border-color var(--gs-transition);
}
.gs-nav-toggle:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--gs-accent); }
.gs-nav {
display: flex;
align-items: center;
gap: var(--gs-space-6);
}
.gs-nav a { color: var(--gs-color-subtle); font-weight: 500; font-size: 0.95rem; }
.gs-nav a[aria-current='page'], .gs-nav a:hover { color: var(--gs-color-text); }
.gs-nav .material-symbols-rounded { font-size: 1.1rem; }
.gs-button--with-icon {
gap: var(--gs-space-2);
}
.gs-footer {
border-top: 1px solid var(--gs-color-border);
padding: var(--gs-space-6) var(--gs-space-4);
margin-top: var(--gs-space-10);
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.gs-footer .gs-nav a { font-weight: 500; }
.gs-footer .gs-nav a[aria-current='page'] { font-weight: 700; color: var(--gs-color-text); }
.gs-footer strong { display: inline-flex; align-items: center; gap: var(--gs-space-2); }
.gs-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--gs-space-2);
padding: var(--gs-space-3) var(--gs-space-5);
border-radius: var(--gs-radius-sm);
border: 1px solid transparent;
font-weight: 700;
letter-spacing: 0.01em;
background: var(--gs-accent);
color: var(--gs-accent-contrast);
cursor: pointer;
transition: transform var(--gs-transition), box-shadow var(--gs-transition), background var(--gs-transition), color var(--gs-transition);
}
.gs-button--small { padding: var(--gs-space-2) var(--gs-space-4); font-size: 0.9rem; }
.gs-button--large { padding: var(--gs-space-4) var(--gs-space-6); font-size: 1rem; }
.gs-button:hover { transform: translateY(-2px); box-shadow: none; }
.gs-button:focus-visible { outline: 1px solid var(--gs-accent); outline-offset: 2px; box-shadow: none; }
.gs-button--secondary {
background: transparent;
color: var(--gs-color-text);
border-color: var(--gs-color-border);
}
.gs-button--secondary:hover { border-color: var(--gs-accent); color: var(--gs-accent); }
.gs-button--destructive { background: var(--gs-danger); color: #fff; }
.gs-button--ghost {
background: transparent;
color: var(--gs-color-subtle);
border-color: transparent;
font-weight: 500;
}
.gs-button--ghost:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--gs-color-text);
transform: none;
box-shadow: none;
}
.gs-card, .gs-panel {
background: var(--gs-color-surface);
border: 1px solid var(--gs-color-border);
border-radius: var(--gs-radius-md);
padding: var(--gs-space-6);
box-shadow: var(--gs-shadow-soft);
}
.gs-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent), var(--gs-color-surface); }
.gs-panel { background: var(--gs-color-muted-surface); }
.gs-grid {
display: grid;
gap: var(--gs-space-5);
}
.gs-grid.columns-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gs-grid-min-3)), 1fr)); }
.gs-grid.columns-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gs-grid-min-2)), 1fr)); }
.gs-grid.columns-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gs-grid.columns-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.gs-kpi { display: flex; flex-direction: column; gap: var(--gs-space-2); }
.gs-kpi span { color: var(--gs-color-subtle); font-size: 0.9rem; }
.gs-kpi strong { font-size: 1.8rem; }
.gs-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.gs-table th, .gs-table td { padding: var(--gs-space-3) var(--gs-space-4); border-bottom: 1px solid var(--gs-color-border); }
.gs-table th { text-align: left; color: var(--gs-color-subtle); font-weight: 600; }
.gs-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.gs-badge {
display: inline-flex;
align-items: center;
gap: var(--gs-space-2);
padding: var(--gs-space-1) var(--gs-space-3);
border-radius: var(--gs-radius-pill);
font-size: 0.85rem;
background: var(--gs-color-muted-surface);
border: 1px solid var(--gs-color-border);
color: var(--gs-color-text);
}
.gs-badge.success { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.4); color: #bbf7d0; }
.gs-badge.warning { background: rgba(251,191,36,0.14); border-color: rgba(251,191,36,0.5); color: #fde68a; }
.gs-badge.danger { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.6); color: #fecdd3; }
.gs-badge.info { background: rgba(56,189,248,0.14); border-color: rgba(56,189,248,0.5); color: #bae6fd; }
.gs-form-row { display: grid; gap: var(--gs-space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gs-helper { color: var(--gs-color-faint); font-size: 0.9rem; margin-top: var(--gs-space-2); }
.gs-nav-block { display: flex; align-items: center; gap: var(--gs-space-3); padding: var(--gs-space-3) var(--gs-space-4); border-radius: var(--gs-radius-sm); color: var(--gs-color-subtle); }
.gs-nav-block[aria-current='page'] { background: var(--gs-accent-soft); color: var(--gs-accent-strong); }
.gs-nav-block:hover { color: var(--gs-color-text); background: rgba(255,255,255,0.03); }
.gs-tabs { display: flex; flex-direction: column; gap: var(--gs-space-3); }
.gs-tabs-header { display: flex; gap: var(--gs-space-2); }
.gs-tabs-header button { background: var(--gs-color-muted-surface); color: var(--gs-color-subtle); border: 1px solid var(--gs-color-border); padding: var(--gs-space-2) var(--gs-space-4); border-radius: var(--gs-radius-pill); cursor: pointer; }
.gs-tabs-header button.active { background: var(--gs-accent-soft); color: var(--gs-accent-strong); border-color: var(--gs-accent); }
.gs-hero {
padding: calc(var(--gs-section-padding-block) + var(--gs-space-2)) var(--gs-section-padding-inline) var(--gs-section-padding-block);
display: grid;
gap: var(--gs-section-gap);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
align-items: center;
}
.gs-hero h1 { margin: 0 0 var(--gs-space-3); font-size: clamp(2.4rem, 3vw, 3.6rem); }
.gs-hero p { max-width: 640px; font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem); }
.gs-section {
padding: var(--gs-section-padding-block) var(--gs-section-padding-inline);
max-width: var(--gs-section-max-width);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--gs-section-gap);
}
.gs-hero { padding: var(--gs-space-10) var(--gs-space-4) var(--gs-space-8); display: grid; gap: var(--gs-space-6); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: center; }
.gs-hero h1 { margin: 0 0 var(--gs-space-3); font-size: clamp(2.4rem, 3vw, 3.6rem); }
.gs-hero p { max-width: 640px; font-size: 1.05rem; }
.gs-section { padding: var(--gs-space-8) var(--gs-space-4); max-width: 1200px; margin: 0 auto; }
.gs-list-grid { display: grid; gap: var(--gs-space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 900px) {
.gs-hero { grid-template-columns: 1fr; }
}
.gs-table-card { overflow: hidden; }
.gs-table-card table { margin: 0; }
.gs-pill-list { display: flex; gap: var(--gs-space-2); flex-wrap: wrap; }
.gs-banner { padding: var(--gs-space-3) var(--gs-space-4); border-radius: var(--gs-radius-sm); border: 1px solid var(--gs-color-border); background: var(--gs-color-muted-surface); color: var(--gs-color-text); }
.gs-input-group { display: flex; flex-direction: column; gap: var(--gs-space-2); }
.gs-form-actions { display: flex; gap: var(--gs-space-3); justify-content: flex-end; margin-top: var(--gs-space-4); }
.gs-modal-panel {
position: relative;
overflow: hidden;
border-radius: 2px;
border: 1px solid rgba(159, 220, 255, 0.18);
background:
radial-gradient(circle at top left, rgba(39, 125, 201, 0.22), transparent 34%),
radial-gradient(circle at 86% 4%, rgba(255, 255, 255, 0.12), transparent 26%),
linear-gradient(180deg, rgba(8, 14, 27, 0.98), rgba(5, 10, 18, 0.96));
box-shadow: none;
}
.gs-modal-panel::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(159, 220, 255, 0.08), transparent 40%);
}
.gs-access-brand {
display: flex;
align-items: center;
gap: var(--gs-space-4);
margin-bottom: var(--gs-space-4);
}
.gs-access-mark {
display: grid;
place-items: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 2px;
color: #d8f2ff;
background: linear-gradient(180deg, rgba(17, 74, 128, 0.88), rgba(7, 22, 40, 0.94));
border: 1px solid rgba(159, 220, 255, 0.25);
box-shadow: none;
}
.gs-access-mark svg {
width: 1.9rem;
height: 1.9rem;
}
.gs-modal-title {
margin: 0;
}
.gs-access-meta {
display: flex;
flex-wrap: wrap;
gap: var(--gs-space-2);
margin-bottom: var(--gs-space-4);
}
.gs-access-pill {
display: inline-flex;
align-items: center;
gap: var(--gs-space-2);
padding: var(--gs-space-1) var(--gs-space-3);
border-radius: var(--gs-radius-pill);
border: 1px solid rgba(159, 220, 255, 0.2);
background: rgba(255, 255, 255, 0.04);
color: var(--gs-color-subtle);
font-size: 0.82rem;
}
.gs-access-body {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(290px, 0.95fr);
gap: var(--gs-space-4);
align-items: start;
}
.gs-access-copy,
.gs-access-form {
position: relative;
border-radius: 22px;
border: 1px solid rgba(159, 220, 255, 0.12);
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.gs-access-copy {
padding: var(--gs-space-4);
}
.gs-access-copy h3 {
margin-top: 0;
margin-bottom: var(--gs-space-2);
}
.gs-access-copy p {
margin-bottom: var(--gs-space-3);
}
.gs-access-copy ul {
margin: 0;
padding-left: 1.15rem;
color: var(--gs-color-subtle);
}
.gs-access-copy li + li {
margin-top: var(--gs-space-2);
}
.gs-access-form {
display: flex;
flex-direction: column;
gap: var(--gs-space-2);
padding: var(--gs-space-4);
}
.gs-access-form .gs-button {
margin-top: var(--gs-space-2);
width: 100%;
}
.gs-micro {
margin-top: var(--gs-space-4);
}
@media (max-width: 720px) {
.gs-access-brand {
align-items: flex-start;
}
.gs-access-body {
grid-template-columns: 1fr;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.gs-pulse-frame {
position: relative;
}
.gs-pulse-frame::before {
content: '';
position: absolute;
inset: -4px;
border-radius: inherit;
border: 1px solid rgba(120, 190, 255, 0.35);
box-shadow: none;
opacity: 0.45;
animation: none;
pointer-events: none;
}
@keyframes gs-border-pulse {
0%, 100% {
border-width: 1px;
opacity: 0.35;
box-shadow: 0 0 10px rgba(120, 190, 255, 0.25);
}
50% {
border-width: 6px;
opacity: 0.85;
box-shadow: 0 0 28px rgba(120, 190, 255, 0.55);
}
}
@media (max-width: 900px) {
.gs-header { flex-direction: row; gap: var(--gs-space-3); align-items: center; }
.gs-nav-toggle { display: inline-flex; margin-left: auto; }
.gs-nav {
position: absolute;
top: calc(100% + var(--gs-space-2));
left: var(--gs-space-4);
right: var(--gs-space-4);
flex-direction: column;
align-items: flex-start;
gap: var(--gs-space-3);
padding: var(--gs-space-4);
background: rgba(10, 16, 32, 0.92);
border: 1px solid var(--gs-color-border);
border-radius: var(--gs-radius-md);
box-shadow: 0 20px 40px rgba(4, 10, 26, 0.4);
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity 200ms ease, transform 200ms ease;
}
.gs-header[data-menu-open='true'] .gs-nav {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.gs-shell { flex-direction: column; }
}
/* Consistent vertical rhythm */
.gs-section .gs-card + .gs-card {
margin-top: 2rem;
}
/* Improve card spacing on mobile */
@media (max-width: 768px) {
.gs-card {
padding: 1.5rem;
}
}
html,
body {
margin: 0;
padding: 0;
background: var(--gs-bg-primary);
color: var(--gs-text-primary);
font-family: Inter, system-ui, -apple-system, sans-serif;
}
body {
padding-top: 80px;
}
@media (max-width: 768px) {
body {
padding-top: 72px;
}
}
.gs-container {
max-width: var(--gs-content-width);
margin: 0 auto;
padding: 0 2rem;
}
.gs-header {
position: fixed;
top: 0;
width: 100%;
height: 80px;
background: rgba(5, 6, 10, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--gs-border-subtle);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
z-index: 1000;
}
.gs-logo img {
height: 32px;
}
.gs-nav a {
margin-left: 2rem;
text-decoration: none;
color: var(--gs-text-muted);
font-weight: 500;
transition: color 0.2s ease;
}
.gs-nav a:hover {
color: var(--gs-text-primary);
}
.gs-section {
padding: var(--gs-section-spacing) 0;
position: relative;
}
.gs-section + .gs-section {
border-top: 1px solid var(--gs-border-subtle);
}
.gs-section::before {
content: '';
position: absolute;
top: 0;
left: 10%;
width: 80%;
height: 1px;
background: linear-gradient(to right, transparent, var(--gs-accent-blue), var(--gs-accent-gold), transparent);
opacity: 0.25;
}
.gs-card {
background: var(--gs-bg-secondary);
border-radius: var(--gs-radius-lg);
padding: 2rem;
border: 1px solid var(--gs-border-subtle);
}
.gs-footer {
padding: 4rem 2rem;
text-align: center;
background: #050507;
border-top: 1px solid var(--gs-border-subtle);
color: var(--gs-text-muted);
}
h1 {
font-size: 3rem;
margin-bottom: 1.5rem;
}
h2 {
margin-bottom: 1rem;
}
p {
line-height: 1.7;
margin-bottom: 1.25rem;
}
.blueprint-bg {
background: radial-gradient(circle at 50% 40%, #0f172a 0%, #05060a 70%), url('/assets/blueprint-grid.svg');
}
@media (max-width: 768px) {
.blueprint-grid {
opacity: 0.15;
}
}
/* Admin layout utilities */
.gs-admin-grid {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
min-height: 100vh;
}
@media (max-width: 900px), (orientation: portrait), (max-aspect-ratio: 5/4) {
.gs-admin-grid {
grid-template-columns: minmax(0, 1fr);
}
.gs-admin-sidebar {
border-right: none;
border-bottom: 1px solid var(--gs-border-subtle);
}
}
.gs-admin-sidebar {
border-right: 1px solid var(--gs-border-subtle);
padding: 1.5rem;
}
.gs-admin-main {
display: flex;
flex-direction: column;
}
.gs-admin-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--gs-border-subtle);
position: sticky;
top: 0;
background: rgba(5, 6, 10, 0.9);
backdrop-filter: blur(10px);
z-index: 10;
}
.gs-admin-content {
padding: 1.5rem;
flex: 1 1 auto;
}
/* Responsive Typography */
h1 {
font-size: clamp(2.2rem, 4vw, 3.5rem);
}
h2 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
}
/* Responsive Containers */
@media (max-width: 1024px) {
.gs-container {
padding: 0 1.5rem;
}
}
@media (max-width: 768px) {
.gs-container {
padding: 0 1.25rem;
}
}
/* Responsive Grid Utility */
.gs-grid {
display: grid;
gap: 2rem;
}
.gs-grid.columns-2 {
grid-template-columns: repeat(2, 1fr);
}
.gs-grid.columns-3 {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px), (orientation: portrait), (max-aspect-ratio: 5/4) {
.gs-grid.columns-2,
.gs-grid.columns-3 {
grid-template-columns: 1fr;
}
}
/* Flex */
.gs-flex {
display: flex;
}
.gs-flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.gs-flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.gs-flex-column {
display: flex;
flex-direction: column;
}
/* Stack Utility (Vertical Rhythm Control) */
.gs-stack > * + * {
margin-top: 1.5rem;
}
.gs-stack-lg > * + * {
margin-top: 2.5rem;
}
.gs-stack-sm > * + * {
margin-top: 1rem;
}
/* Cluster (Button / Nav Alignment) */
.gs-cluster {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
/* Split Layout (Responsive Two-Column) */
.gs-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
@media (max-width: 900px), (orientation: portrait), (max-aspect-ratio: 5/4) {
.gs-split {
grid-template-columns: 1fr;
}
}
/* Centered Section Utility */
.gs-center {
text-align: center;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* Responsive Visibility Utilities */
.gs-hide-mobile {
display: block;
}
.gs-show-mobile {
display: none;
}
@media (max-width: 768px) {
.gs-hide-mobile {
display: none;
}
.gs-show-mobile {
display: block;
}
}
/* Spacing Utilities */
.gs-mt-2 { margin-top: 2rem; }
.gs-mt-4 { margin-top: 4rem; }
.gs-mb-2 { margin-bottom: 2rem; }
.gs-mb-4 { margin-bottom: 4rem; }
.gs-pt-4 { padding-top: 4rem; }
.gs-pb-4 { padding-bottom: 4rem; }
:root {
--gs-parallax-offset: 0px;
--gs-shadow-layered-soft: 0 12px 24px -16px rgba(14, 20, 30, 0.22),
0 24px 48px -32px rgba(14, 20, 30, 0.3);
--gs-shadow-layered-medium: 0 16px 32px -18px rgba(14, 20, 30, 0.26),
0 32px 64px -28px rgba(14, 20, 30, 0.36);
--gs-shadow-layered-strong: 0 18px 36px -18px rgba(14, 20, 30, 0.32),
0 40px 80px -28px rgba(14, 20, 30, 0.42);
--gs-section-lift-distance: -12px;
--gs-section-lift-shadow: var(--gs-shadow-layered-soft);
}
.gs-parallax {
transform: translate3d(0, var(--gs-parallax-offset), 0);
will-change: transform;
}
.gs-parallax--xs { --gs-parallax-offset: -8px; }
.gs-parallax--sm { --gs-parallax-offset: -16px; }
.gs-parallax--md { --gs-parallax-offset: -28px; }
.gs-parallax--lg { --gs-parallax-offset: -44px; }
.gs-shadow-layered { box-shadow: var(--gs-shadow-layered-soft); }
.gs-shadow-layered--soft { box-shadow: var(--gs-shadow-layered-soft); }
.gs-shadow-layered--medium { box-shadow: var(--gs-shadow-layered-medium); }
.gs-shadow-layered--strong { box-shadow: var(--gs-shadow-layered-strong); }
.gs-section-lift {
transform: translateY(0px);
transition: transform 500ms ease, box-shadow 500ms ease;
}
.gs-section-lift.is-lifted {
transform: translateY(var(--gs-section-lift-distance));
box-shadow: var(--gs-section-lift-shadow);
}
@media (prefers-reduced-motion: reduce) {
.gs-parallax,
.gs-section-lift {
transition: none;
transform: none;
}
}
/* ================================================================
goldshore.ai — Brand Theme Override
File: apps/gs-web/src/styles/gs-brand-theme.css
Import at END of global.css: @import './gs-brand-theme.css';
Purpose:
- Copper-on-black design system (#d96a32 on #050507)
- Space Grotesk display, Inter body
- Fix all responsive breakpoints
================================================================ */
/* ── COPPER BRAND TOKENS ── */
:root {
/* Copper palette */
--gs-copper: #d96a32;
--gs-copper-soft: rgba(217, 106, 50, 0.14);
--gs-copper-glow: rgba(217, 106, 50, 0.28);
--gs-copper-strong: rgba(217, 106, 50, 0.42);
/* Blue signal palette */
--gs-blue: #59a8ff;
--gs-blue-soft: rgba(89, 168, 255, 0.12);
--gs-blue-glow: rgba(89, 168, 255, 0.24);
/* Backgrounds */
--gs-bg: #050507;
--gs-surface: rgba(14, 16, 20, 0.84);
--gs-surface-strong: rgba(20, 23, 29, 0.94);
/* Borders */
--gs-border: rgba(255, 120, 54, 0.14);
--gs-border-subtle: rgba(255, 255, 255, 0.06);
/* Text */
--gs-text: #f1f4f8;
--gs-text-dim: #9ca5b4;
--gs-text-muted: #9ca5b4;
/* Semantic */
--gs-success: #5ddb9a;
--gs-warning: #f0b35b;
--gs-danger: #f56b6b;
/* Primary alias — copper */
--gs-primary: var(--gs-copper);
--gs-primary-soft: var(--gs-copper-soft);
--gs-primary-glow: var(--gs-copper-glow);
--gs-color-primary: var(--gs-copper);
--gs-accent: var(--gs-copper);
--gs-accent-strong: var(--gs-copper-strong);
--gs-accent-soft: var(--gs-copper-soft);
/* Typography — aligned with home page */
--gs-font-display: 'Syne', system-ui, sans-serif;
--gs-font-body: 'DM Sans', system-ui, sans-serif;
--gs-font-mono: 'DM Mono', ui-monospace, monospace;
--gs-font-heading: var(--gs-font-display);
/* Text — warm white matching home page palette */
--gs-text: #eceae4;
--gs-text-dim: #b8b4a8;
--gs-text-muted: #6e6a60;
--gs-color-text: #eceae4;
--gs-color-subtle: #b8b4a8;
--gs-color-faint: #6e6a60;
/* Surfaces — void-dark matching home page card tone */
--gs-bg: #06060a;
--gs-color-bg: #06060a;
--gs-surface: rgba(20, 20, 32, 0.82);
--gs-color-surface: rgba(20, 20, 32, 0.82);
--gs-color-muted-surface: rgba(14, 14, 22, 0.72);
--gs-border: rgba(160, 72, 32, 0.18);
--gs-border-subtle: rgba(255, 255, 255, 0.06);
--gs-color-border: rgba(255, 255, 255, 0.08);
/* Header tokens */
--gs-header-border-accent: rgba(217, 106, 50, 0.2);
--gs-nav-indicator-bg: var(--gs-copper);
--gs-nav-indicator-shadow: 0 0 8px var(--gs-copper-glow);
--gs-logo-glow-soft: rgba(217, 106, 50, 0.3);
--gs-logo-glow-strong: rgba(217, 106, 50, 0.6);
/* Layout */
--gs-max-width: 1200px;
}
/* ── BACKGROUND & BODY ── */
html { background: #06060a; }
body {
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(160,72,32,0.10) 0%, transparent 60%),
#06060a;
font-family: var(--gs-font-body);
color: var(--gs-text);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--gs-font-display);
letter-spacing: -0.03em;
}
/* Section h1 — Syne uppercase display treatment matching home page */
.gs-section > h1,
.gs-section > div > h1 {
font-size: clamp(2rem, 3.5vw, 3.2rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.02em;
line-height: 0.95;
color: #eceae4;
margin-bottom: 0.5rem;
}
/* Copper grid lines */
.gs-grid,
[class*="grid"] {
background-image:
linear-gradient(rgba(26,58,122,0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(26,58,122,0.08) 1px, transparent 1px) !important;
}
/* ── LOGO — Penrose triangle SVG via Logo.astro ── */
.gs-brand-logo {
display: block;
}
.gs-brand-logo--lockup {
width: clamp(200px, 22vw, 300px);
height: auto;
}
@media (max-width: 960px) {
.gs-brand-logo--lockup {
width: clamp(170px, 42vw, 240px);
}
}
@media (max-width: 640px) {
.gs-brand-logo--lockup {
width: clamp(150px, 52vw, 210px);
}
}
/* ── NAVIGATION ── */
.gs-header {
background: rgba(5, 5, 7, 0.82) !important;
backdrop-filter: blur(20px) !important;
border-bottom: 1px solid rgba(217, 106, 50, 0.14) !important;
}
/* Nav links */
.gs-header nav a,
.header a,
[class*="nav-link"],
[class*="gs-nav"] a {
color: #b8b4a8 !important;
font-family: 'DM Mono', ui-monospace, monospace !important;
font-size: 0.62rem !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;
transition: color 200ms !important;
}
.gs-header nav a:hover,
[class*="gs-nav"] a:hover,
[class*="gs-nav"] a[aria-current] {
color: var(--gs-copper) !important;
background: rgba(217, 106, 50, 0.09) !important;
}
/* CTA button in nav */
.header-cta,
[class*="gs-btn-primary"],
a.gs-btn-primary {
background: linear-gradient(135deg, rgba(217,106,50,0.42), rgba(217,106,50,0.22)) !important;
border-color: rgba(217,106,50,0.5) !important;
color: #f1f4f8 !important;
transition: background 200ms, border-color 200ms !important;
}
.header-cta:hover,
[class*="gs-btn-primary"]:hover {
background: linear-gradient(135deg, rgba(217,106,50,0.58), rgba(217,106,50,0.36)) !important;
border-color: rgba(217,106,50,0.7) !important;
}
/* Secondary button */
[class*="gs-btn-secondary"],
a.gs-btn-secondary {
border-color: rgba(217,106,50,0.2) !important;
color: rgba(241,244,248,0.8) !important;
}
[class*="gs-btn-secondary"]:hover {
border-color: rgba(217,106,50,0.4) !important;
background: rgba(217,106,50,0.08) !important;
}
/* ── EYEBROW & ACCENT TEXT ── */
[class*="gs-eyebrow"],
[class*="eyebrow"],
.gs-eyebrow {
color: var(--gs-copper) !important;
}
h1 strong, h2 strong { color: var(--gs-copper); }
/* ── HERO ── */
.gs-vignette {
background:
radial-gradient(circle at 25% 30%, rgba(217,106,50,0.10), transparent 55%),
radial-gradient(circle at 70% 40%, rgba(217,106,50,0.06), transparent 60%),
linear-gradient(120deg, rgba(5,5,7,0.92), rgba(5,5,7,0.70)) !important;
}
/* ── CARDS & SURFACES ── */
[class*="gs-feature-card"],
[class*="gs-panel"],
[class*="gs-card"],
.gs-card,
.gs-panel {
background: rgba(20, 20, 32, 0.82) !important;
border-color: rgba(255, 255, 255, 0.06) !important;
border-radius: 2px !important;
transition: border-color 200ms, box-shadow 200ms !important;
}
[class*="gs-feature-card"]:hover,
[class*="gs-panel"]:hover,
.gs-card:hover {
border-color: rgba(160, 72, 32, 0.28) !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
/* ── BUTTONS — sharp corners, DM Mono, copper accent ── */
.gs-button {
border-radius: 2px !important;
font-family: 'DM Mono', ui-monospace, monospace !important;
font-size: 0.72rem !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
background: rgba(160, 72, 32, 0.14) !important;
color: #eceae4 !important;
border: 1px solid rgba(160, 72, 32, 0.30) !important;
box-shadow: none !important;
}
.gs-button:hover {
background: rgba(160, 72, 32, 0.24) !important;
border-color: rgba(160, 72, 32, 0.50) !important;
transform: none !important;
box-shadow: none !important;
}
/* ── TABLE — DM Mono headers, subtle borders ── */
.gs-table th {
font-family: 'DM Mono', ui-monospace, monospace !important;
font-size: 0.62rem !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #6e6a60 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.gs-table td {
font-size: 0.875rem !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
color: #b8b4a8 !important;
}
.gs-table td strong { color: #eceae4 !important; }
.gs-table tbody tr:hover {
background: rgba(160, 72, 32, 0.05) !important;
}
/* ── BADGES ── */
.gs-badge {
font-family: 'DM Mono', ui-monospace, monospace !important;
font-size: 0.62rem !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
border-radius: 2px !important;
}
.gs-badge.info {
background: rgba(160, 72, 32, 0.12) !important;
border-color: rgba(160, 72, 32, 0.35) !important;
color: #d4906a !important;
}
.gs-badge.success {
background: rgba(74, 222, 128, 0.10) !important;
border-color: rgba(74, 222, 128, 0.30) !important;
color: #86efac !important;
}
/* ── FORM INPUTS — dark surface, copper focus ── */
input, select, textarea {
background: rgba(10, 10, 14, 0.6) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
color: #eceae4 !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
}
input:focus, select:focus, textarea:focus {
border-color: rgba(160, 72, 32, 0.50) !important;
box-shadow: 0 0 0 3px rgba(160, 72, 32, 0.12) !important;
}
label {
font-family: 'DM Mono', ui-monospace, monospace !important;
font-size: 0.68rem !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
color: #6e6a60 !important;
font-weight: 400 !important;
}
/* ── INLINE LINKS ── */
[class*="gs-inline-link"],
.gs-inline-link {
color: var(--gs-copper) !important;
}
[class*="gs-inline-link"]:hover { color: #e88a52 !important; }
/* ── METRICS / STATS ── */
[class*="gs-metric"],
[class*="metric-value"],
[class*="stat-value"] {
color: var(--gs-copper) !important;
}
/* ── FOOTER ── */
footer {
border-top-color: rgba(217,106,50,0.14) !important;
}
/* ── SELECTION ── */
::selection {
background: rgba(217,106,50,0.20) !important;
color: #f1f4f8 !important;
}
/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #050507; }
::-webkit-scrollbar-thumb { background: rgba(217,106,50,0.4); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--gs-copper); }
/* ================================================================
RESPONSIVE — Full mobile/tablet/desktop coverage
================================================================ */
/* ── MOBILE (< 640px) ── */
@media (max-width: 639px) {
/* Nav */
.gs-header nav,
[class*="desktop-nav"],
[class*="nav-links"] { display: none !important; }
[class*="menu-button"],
[class*="gs-nav-toggle"],
#menu-toggle { display: flex !important; }
/* Hero */
[class*="gs-hero"],
.gs-hero {
min-height: 80vh !important;
padding: 3rem 1.25rem !important;
}
[class*="hero-inner"],
[class*="hero-grid"],
[class*="hero__inner"] {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
h1 {
font-size: clamp(1.9rem, 7vw, 2.8rem) !important;
line-height: 1.15 !important;
}
h2 { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
/* Sections */
[class*="gs-section"],
[class*="gs-shell"] {
padding: 3rem 1.25rem !important;
}
/* Grids → single column */
[class*="md:grid-cols"],
[class*="grid-cols-2"],
[class*="grid-cols-3"],
[class*="features-grid"],
[class*="cap-grid"],
[class*="product-grid"] {
grid-template-columns: 1fr !important;
}
/* Cards full width */
[class*="gs-feature-card"],
[class*="gs-plan-card"],
[class*="gs-panel"] {
width: 100% !important;
}
/* Forms */
form .grid,
form [class*="grid-cols"],
form [class*="form-row"] {
grid-template-columns: 1fr !important;
}
/* CTA stack */
[class*="hero-actions"],
[class*="cta-group"] {
flex-direction: column !important;
gap: 0.75rem !important;
}
[class*="gs-btn"],
[class*="btn"] {
width: 100% !important;
text-align: center !important;
justify-content: center !important;
}
/* Pricing */
[class*="pricing-grid"],
[class*="plan-grid"] {
grid-template-columns: 1fr !important;
}
/* Footer */
footer [class*="grid"],
footer [class*="footer-inner"] {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
footer [class*="footer-links"] {
flex-wrap: wrap !important;
gap: 1rem !important;
}
}
/* ── TABLET (640px – 1023px) ── */
@media (min-width: 640px) and (max-width: 1023px) {
[class*="gs-section"],
[class*="gs-shell"] {
padding: 4rem 2rem !important;
}
[class*="md:grid-cols-3"],
[class*="grid-cols-3"] {
grid-template-columns: repeat(2, 1fr) !important;
}
[class*="hero-inner"],
[class*="hero-grid"] {
grid-template-columns: 1fr !important;
gap: 3rem !important;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem) !important; }
}
/* ── DESKTOP+ (>= 1024px) ── */
@media (min-width: 1024px) {
/* Ensure mobile menu is hidden */
[class*="menu-button"],
[class*="gs-nav-toggle"],
#menu-toggle { display: none !important; }
[class*="desktop-nav"],
[class*="nav-links"],
.gs-header nav { display: flex !important; }
}
/* ── MOBILE MENU PANEL ── */
[class*="menu-panel"],
[class*="mobile-menu"],
#primary-navigation {
background: #050507 !important;
border-left: none !important;
border-right: none !important;
}
[class*="menu-panel"] a,
[class*="mobile-menu"] a,
#primary-navigation a {
color: rgba(241,244,248,0.7) !important;
border-bottom: 1px solid rgba(217,106,50,0.10) !important;
padding: 1rem 0 !important;
font-size: 1rem !important;
}
[class*="menu-panel"] a:hover,
#primary-navigation a:hover { color: var(--gs-copper) !important; }
/* ── FOCUS STATES — accessibility ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 2px solid rgba(217,106,50,0.7) !important;
outline-offset: 2px !important;
}
/* ── TAP TARGETS ── */
@media (max-width: 768px) {
a, button {
min-height: 44px !important;
min-width: 44px !important;
display: inline-flex !important;
align-items: center !important;
}
/* Exception — inline text links */
p a, li a, [class*="footer"] a {
min-height: unset !important;
min-width: unset !important;
display: inline !important;
}
/* Exception — hamburger toggles: the forced inline-flex above lays the
icon's three bars side by side; stack them back into a burger. */
[class*="menu-button"], [class*="nav-toggle"], #nav-toggle, #menu-toggle {
flex-direction: column !important;
justify-content: center !important;
}
}
:root {
--gs-public-void: #06060a;
--gs-public-graphite: #0e0e14;
--gs-public-panel: #17171f;
--gs-public-oxide: #d3743e;
--gs-public-oxide-bright: #f09154;
--gs-public-teal: #499488;
--gs-public-text: #eceae4;
--gs-public-dim: #aaa69c;
}
.gs-shell-v284 {
color: var(--gs-public-text);
background: var(--gs-public-void);
}
.gs-shell-v284 .gs-page-content {
overflow-x: clip;
isolation: isolate;
}
.gs-shell-v284 .gs-page-content::before {
content: '';
position: fixed;
inset: 5rem 0 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(115deg, rgba(211, 116, 62, 0.08), transparent 30%),
linear-gradient(300deg, rgba(73, 148, 136, 0.06), transparent 28%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7.5rem);
}
.gs-shell-v284 :is(.gs-hero, .gs-section, .page-shell) {
width: min(calc(100% - 2rem), var(--gs-max-width, 1180px));
margin-inline: auto;
}
/* Keep public layouts fluid on wide displays while preserving readable gutters. */
.gs-shell-v284 .gs-section {
max-width: var(--gs-max-width, 1600px);
}
.gs-shell-v284 :is(.gs-hero, .gs-section, .page-shell, .gs-grid, .info-grid, .service-grid) > * {
min-width: 0;
}
.gs-shell-v284 .gs-flow-section {
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gs-shell-v284 .gs-flow-section__inner {
position: relative;
z-index: 1;
padding-block: clamp(3.5rem, 8vw, 7.5rem);
}
.gs-shell-v284 .gs-flow-section--hero .gs-flow-section__inner,
.gs-shell-v284 .gs-hero__inner {
min-height: min(78vh, 760px);
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
align-items: center;
gap: clamp(2rem, 6vw, 6rem);
}
.gs-shell-v284 :is(h1, h2, h3) {
text-wrap: balance;
}
.gs-shell-v284 h1 {
max-width: 14ch;
font-family: 'Syne', system-ui, sans-serif;
font-size: clamp(2.7rem, 7vw, 6.6rem);
line-height: 0.96;
letter-spacing: 0;
}
.gs-shell-v284 h2 {
font-family: 'Syne', system-ui, sans-serif;
font-size: clamp(1.8rem, 4vw, 3.8rem);
line-height: 1.05;
letter-spacing: 0;
}
.gs-shell-v284 :is(.gs-lead, .gs-text-lg, .page-intro) {
max-width: 64ch;
color: var(--gs-public-dim);
font-size: clamp(1rem, 1.6vw, 1.2rem);
line-height: 1.75;
}
.gs-shell-v284 .gs-eyebrow {
color: var(--gs-public-oxide-bright);
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.gs-shell-v284 :is(.gs-grid, .info-grid, .service-grid) {
align-items: stretch;
gap: clamp(0.8rem, 2vw, 1.35rem);
}
.gs-shell-v284 :is(.gs-card, .info-card, .service-card) {
position: relative;
overflow: hidden;
border-radius: 2px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(145deg, rgba(211, 116, 62, 0.055), transparent 42%),
rgba(18, 18, 26, 0.88);
box-shadow: none;
}
/* Platform and service-detail pages historically shipped their own blue
panels and pill CTAs. Keep those routes in the same restrained visual
system as the canonical service cards instead. The extra shell/content
specificity intentionally wins over Astro's page-scoped legacy rules. */
.gs-shell-v284 .gs-page-content :is(.feature-card, .module-card) {
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 2px;
background:
linear-gradient(145deg, rgba(211, 116, 62, 0.055), transparent 42%),
rgba(18, 18, 26, 0.88);
box-shadow: none;
}
.gs-shell-v284 .gs-page-content .module-card {
color: var(--gs-public-text);
}
.gs-shell-v284 .gs-page-content .module-card:hover {
border-color: rgba(211, 116, 62, 0.42);
background:
linear-gradient(145deg, rgba(211, 116, 62, 0.09), transparent 48%),
rgba(20, 20, 28, 0.94);
}
.gs-shell-v284 .gs-page-content .module-link {
color: var(--gs-public-oxide-bright);
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.gs-shell-v284 .gs-page-content :is(.page-cta, .platform-cta) {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 2px;
background:
linear-gradient(145deg, rgba(211, 116, 62, 0.055), transparent 42%),
rgba(18, 18, 26, 0.88);
box-shadow: none;
}
.gs-shell-v284 .gs-page-content .cta-btn {
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 2px;
background: transparent;
color: var(--gs-public-text);
box-shadow: none;
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.gs-shell-v284 .gs-page-content .cta-btn:hover {
border-color: var(--gs-public-oxide);
background: transparent;
color: var(--gs-public-oxide-bright);
}
/* Normalize legacy public controls and content containers while leaving
intentionally circular status indicators alone. */
.gs-shell-v284 :is(button, input, select, textarea, summary, .gs-button, .gs-card, .gs-panel, .info-card, .service-card, .feature-card, .module-card, .page-cta, .platform-cta, .contact-form, .contact-form__success) {
border-radius: 2px;
}
.gs-shell-v284 :is(.gs-card, .gs-panel, .info-card, .service-card, .feature-card, .module-card, .page-cta, .platform-cta, .contact-form) {
box-shadow: none;
}
.gs-shell-v284 .gs-page-content :is(article, aside, form, button, [role='button'], [class*='card'], [class*='panel']) {
box-shadow: none;
}
.gs-shell-v284 .gs-page-content :is([class*='card'], [class*='panel'], [class*='pill'], [class*='badge'], [class*='chip']) {
border-radius: 2px;
}
.gs-shell-v284 .gs-slug-page {
padding-block: clamp(3.5rem, 8vw, 7rem);
}
.gs-shell-v284 .gs-slug-page__inner {
width: min(100%, 900px);
margin-inline: auto;
}
.gs-shell-v284 .gs-slug-page__header {
margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.gs-shell-v284 .gs-slug-page__header h1,
.gs-shell-v284 .gs-slug-page--message h1 {
max-width: 18ch;
margin-top: 0.75rem;
overflow-wrap: anywhere;
}
.gs-shell-v284 .gs-slug-page--message {
min-height: 60vh;
display: grid;
align-items: center;
text-align: center;
}
.gs-shell-v284 .gs-slug-page--message :is(h1, .page-intro) {
margin-inline: auto;
}
.gs-shell-v284 .gs-slug-page__action {
display: inline-flex;
margin-top: 1.5rem;
padding: 0.85rem 1rem;
border: 1px solid rgba(240, 145, 84, 0.45);
color: var(--gs-public-oxide-bright);
text-decoration: none;
}
.gs-shell-v284 .gs-rich-content {
max-width: 100%;
color: var(--gs-public-text);
font-size: 1rem;
line-height: 1.75;
overflow-wrap: anywhere;
}
.gs-shell-v284 .gs-rich-content > :first-child {
margin-top: 0;
}
.gs-shell-v284 .gs-rich-content > :last-child {
margin-bottom: 0;
}
.gs-shell-v284 .gs-rich-content :is(p, ul, ol, blockquote, pre, table, figure) {
margin-block: 1.25rem;
}
.gs-shell-v284 .gs-rich-content :is(h2, h3, h4) {
margin-top: 2.2rem;
margin-bottom: 0.75rem;
overflow-wrap: anywhere;
}
.gs-shell-v284 .gs-rich-content a {
color: var(--gs-public-oxide-bright);
text-underline-offset: 0.2em;
}
.gs-shell-v284 .gs-rich-content img,
.gs-shell-v284 .gs-rich-content video,
.gs-shell-v284 .gs-rich-content iframe,
.gs-shell-v284 .gs-rich-content svg {
display: block;
max-width: 100%;
height: auto;
}
.gs-shell-v284 .gs-rich-content iframe {
width: 100%;
min-height: min(56vw, 32rem);
border: 0;
}
.gs-shell-v284 .gs-rich-content pre,
.gs-shell-v284 .gs-rich-content table {
max-width: 100%;
overflow-x: auto;
}
.gs-shell-v284 .gs-rich-content pre {
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.35);
}
.gs-shell-v284 .gs-rich-content code {
font-family: 'DM Mono', ui-monospace, monospace;
}
.gs-shell-v284 .gs-rich-content table {
display: block;
border-collapse: collapse;
}
.gs-shell-v284 .gs-rich-content :is(th, td) {
padding: 0.7rem 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.09);
text-align: left;
}
.gs-shell-v284 [data-depth]::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(240, 145, 84, 0.13), transparent 34%);
transition: opacity 180ms ease;
}
.gs-shell-v284 [data-depth]:hover::after {
opacity: 1;
}
.gs-motion-ready [data-reveal] {
opacity: 0;
transform: translateY(1.25rem);
transition:
opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--reveal-order, 0) * 55ms);
}
.gs-motion-ready [data-reveal][data-reveal-state='visible'] {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 900px) {
.gs-shell-v284 .gs-flow-section--hero .gs-flow-section__inner,
.gs-shell-v284 .gs-hero__inner {
min-height: auto;
grid-template-columns: 1fr;
gap: 2rem;
}
}
@media (max-width: 640px) {
.gs-shell-v284 :is(.gs-hero, .gs-section, .page-shell) {
width: min(calc(100% - 1.25rem), var(--gs-max-width, 1180px));
}
.gs-shell-v284 .gs-flow-section__inner {
padding-block: 3.25rem;
}
.gs-shell-v284 h1 {
font-size: clamp(2.35rem, 14vw, 4rem);
}
.gs-shell-v284 .gs-rich-content :is(pre, table) {
margin-inline: -0.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
.gs-motion-ready [data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
.gs-shell-v284 [data-depth]::after {
display: none;
}
}
.gs-shell-v284 {
--shell-text: var(--gs-text, #f7f7f4);
--shell-dim: var(--gs-text-dim, rgba(247, 247, 244, 0.66));
min-height: 100vh;
}
.gs-shell-v284 .skip-link,
.skip-link {
position: absolute;
left: 1rem;
top: -3rem;
z-index: 1200;
padding: 0.75rem 1rem;
background: #101827;
color: #fff;
border-radius: 2px;
border: 1px solid rgba(255,255,255,0.14);
text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.gs-shell-v284 .gs-page-content {
min-height: calc(100vh - 220px);
position: relative;
background:
linear-gradient(115deg, rgba(217, 106, 50, 0.055), transparent 24%, rgba(72, 148, 136, 0.04) 78%, transparent),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7.5rem);
}
.gs-shell-v284 .topbar {
position: sticky;
top: 0;
z-index: 1100;
padding-inline: clamp(1rem, 3vw, 2rem);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(5, 5, 7, 0.82);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
min-height: 5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.gs-shell-v284 .brand-text {
color: #fff;
font-family: 'Syne', var(--font-display, system-ui), sans-serif;
font-size: clamp(1.55rem, 3vw, 2.35rem);
font-weight: 800;
letter-spacing: -0.075em;
font-size: 1.15rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1;
text-decoration: none;
}
.gs-shell-v284 .main-nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.35rem;
flex-wrap: wrap;
}
.gs-shell-v284 .main-nav a,
.gs-shell-v284 .mobile-nav a {
text-decoration: none;
transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.gs-shell-v284 .main-nav a {
padding: 0.6rem 0.85rem;
border-radius: 999px;
color: var(--shell-dim);
padding: 0.65rem 0.8rem;
border-radius: 2px;
color: var(--shell-dim);
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.62rem;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.gs-shell-v284 .main-nav a:hover,
.gs-shell-v284 .main-nav a[aria-current='page'] {
color: var(--shell-text);
background: rgba(217, 106, 50, 0.09);
}
.gs-shell-v284 .main-nav .nav-login {
border: 1px solid rgba(255,255,255,0.14);
color: var(--gs-primary, #d96a32);
background: rgba(217, 106, 50, 0.12);
}
.gs-shell-v284 .main-nav .nav-login {
border: 1px solid rgba(255, 120, 54, 0.3);
font-weight: 500;
white-space: nowrap;
}
.gs-shell-v284 .main-nav .nav-cta,
.gs-shell-v284 .mobile-nav a:last-child {
color: var(--gs-bg, #06060a);
background: var(--gs-primary, #d96a32);
border: 1px solid var(--gs-primary, #d96a32);
box-shadow: none;
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
white-space: nowrap;
}
.gs-shell-v284 .nav-toggle {
display: none;
width: 2.7rem;
height: 2.7rem;
border-radius: 999px;
border-radius: 2px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.04);
color: var(--shell-text);
align-items: center;
justify-content: center;
gap: 0.22rem;
flex-direction: column;
}
.gs-shell-v284 .nav-toggle span {
width: 1rem;
height: 2px;
border-radius: 999px;
border-radius: 2px;
background: currentColor;
}
.gs-shell-v284 .mobile-nav {
display: none;
width: min(100%, var(--gs-max-width, 1180px));
margin: 0 auto;
padding: 0 0 1rem;
gap: 0.55rem;
}
.gs-shell-v284 .mobile-nav a {
display: block;
padding: 0.85rem 1rem;
border-radius: 16px;
background: rgba(255,255,255,0.05);
color: var(--shell-text);
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.7rem;
letter-spacing: 0.09em;
text-transform: uppercase;
}
/* Shared header/footer chrome lives in theme-chrome.css and is composed by
PublicHeader/PublicFooter. Avoid competing chrome selectors in this file. */
@media (max-width: 960px) {
.gs-shell-v284 .main-nav { display: none; }
.gs-shell-v284 .nav-toggle { display: inline-flex; }
.gs-shell-v284 .topbar[data-menu-open='true'] .main-nav { display: grid; }
}
.gs-page-content > * {
scroll-margin-top: calc(var(--gs-header-height) + 1rem);
}
.topbar {
position: sticky;
top: 0;
z-index: 100;
--gs-header-height: 72px;
padding: 1rem clamp(1rem, 3vw, 2rem);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(6, 6, 10, 0.88);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1rem, 2vw, 2rem);
}
.brand-text {
display: flex;
align-items: center;
gap: 0.8rem;
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.brand-logo {
width: 45px;
height: 45px;
object-fit: contain;
}
.brand-text-label {
font-family: 'Syne', 'DM Sans', system-ui, sans-serif;
font-weight: 800;
letter-spacing: 0.14em;
white-space: nowrap;
}
.brand-wordmark {
display: inline-flex;
align-items: baseline;
font-family: 'Syne', 'DM Sans', system-ui, sans-serif;
font-size: 1.15rem;
font-weight: 800;
letter-spacing: 0.14em;
text-decoration: none;
color: inherit;
}
.main-nav {
display: flex;
align-items: center;
gap: clamp(0.75rem, 1.5vw, 1.5rem);
flex: 1;
}
.main-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.6rem 0.85rem;
border-radius: 6px;
color: var(--gs-text-dim);
text-decoration: none;
transition: all 160ms ease;
}
.main-nav a:hover,
.main-nav a[aria-current='page'] {
color: var(--gs-text);
background: rgba(220, 120, 60, 0.12);
}
.nav-login {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.72rem 1rem;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.18);
color: var(--gs-text-dim);
font-weight: 500;
transition: all 160ms ease;
}
.nav-login:hover {
color: var(--gs-text);
border-color: rgba(220, 120, 60, 0.6);
background: rgba(220, 120, 60, 0.08);
}
.nav-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.72rem 1rem;
border-radius: 2px;
background: var(--gs-primary, #d96a32);
border: 1px solid var(--gs-primary, #d96a32);
color: var(--gs-bg, #06060a);
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.62rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.09em;
text-transform: uppercase;
text-decoration: none;
box-shadow: none;
transition: background 160ms ease, border-color 160ms ease;
}
.nav-cta:hover {
transform: none;
background: #ed8b57;
border-color: #ed8b57;
box-shadow: none;
}
.nav-toggle {
display: none;
width: 46px;
height: 46px;
place-items: center;
gap: 4px;
border-radius: 6px;
border: 1px solid var(--gs-border);
background: rgba(220, 120, 60, 0.08);
cursor: pointer;
}
.nav-toggle:hover {
background: rgba(220, 120, 60, 0.14);
border-color: rgba(220, 120, 60, 0.4);
}
.nav-toggle span {
display: block;
width: 18px;
height: 1.5px;
border-radius: 999px;
background: var(--gs-text);
transition: transform 160ms ease, opacity 160ms ease;
}
.topbar[data-menu-open='true'] .nav-toggle span:nth-child(1) {
transform: translateY(5.5px) rotate(45deg);
}
.topbar[data-menu-open='true'] .nav-toggle span:nth-child(2) {
opacity: 0;
}
.topbar[data-menu-open='true'] .nav-toggle span:nth-child(3) {
transform: translateY(-5.5px) rotate(-45deg);
}
.mobile-nav {
display: none;
}
.site-footer {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding: 3rem clamp(1rem, 3vw, 2rem);
background: rgba(6, 6, 10, 0.5);
}
.footer-main {
width: min(100%, 1440px);
margin: 0 auto 2rem;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 3rem;
align-items: start;
}
.footer-brand {
display: flex;
align-items: flex-start;
gap: 1.2rem;
}
.footer-brand-logo {
width: 60px;
height: 60px;
object-fit: contain;
flex-shrink: 0;
}
.footer-brand h2 {
margin: 0 0 0.5rem 0;
color: #fff;
font-family: 'Syne', 'DM Sans', system-ui, sans-serif;
font-weight: 800;
font-size: 1.1rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.footer-brand p {
margin: 0;
color: var(--gs-text-dim);
font-size: 0.85rem;
line-height: 1.5;
}
.footer-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.5rem 2rem;
}
.footer-column h3 {
margin: 0 0 1rem 0;
color: #fff;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.footer-column p {
margin: 0.5rem 0;
}
.footer-column a {
display: inline-flex;
align-items: center;
min-height: 44px;
min-width: 44px;
color: var(--gs-text-dim);
text-decoration: none;
font-size: 0.85rem;
transition: color 160ms ease;
}
.footer-column a:hover {
color: var(--gs-text);
}
.footer-meta-block {
display: flex;
flex-direction: column;
gap: 0.35rem;
text-align: right;
font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.65rem;
color: var(--gs-text-dim);
letter-spacing: 0.09em;
line-height: 1.2;
}
.footer-credits {
width: min(100%, 1440px);
margin: 0 auto;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
text-align: center;
}
.footer-credits small {
color: var(--gs-text-dim);
font-size: 0.75rem;
}
.footer-credits a {
color: var(--gs-text-dim);
text-decoration: none;
transition: color 160ms ease;
}
.footer-credits a:hover {
color: var(--gs-text);
}
.main-nav__tiers {
display: flex;
align-items: center;
gap: 0.15rem;
margin-left: auto;
}
.main-nav__tier {
position: relative;
}
.main-nav__tier summary {
display: inline-flex;
min-height: 44px;
align-items: center;
gap: 0.45rem;
padding: 0.6rem 0.7rem;
border-radius: 6px;
cursor: pointer;
color: var(--gs-text-dim);
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.08em;
list-style: none;
text-transform: uppercase;
transition: color 160ms ease, background 160ms ease;
}
.main-nav__tier summary::-webkit-details-marker { display: none; }
.main-nav__tier summary::after { content: '+'; color: var(--gs-primary); font-size: 0.9rem; transition: transform 160ms ease; }
.main-nav__tier[open] summary::after { transform: rotate(45deg); }
.main-nav__tier summary:hover,
.main-nav__tier[open] summary { color: var(--gs-text); background: rgba(220, 120, 60, 0.12); }
.main-nav__submenu {
position: absolute;
top: calc(100% + 0.7rem);
left: 0;
z-index: 120;
display: grid;
width: min(320px, calc(100vw - 2rem));
max-height: min(62vh, 480px);
overflow-y: auto;
padding: 0.65rem;
border: 1px solid rgba(217, 106, 50, 0.28);
border-radius: 2px;
background: rgba(10, 10, 15, 0.98);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
/* Public chrome follows the approved near-square control geometry. */
.topbar :is(a, button, summary),
.main-nav__submenu a {
border-radius: 2px;
}
.nav-cta,
.nav-cta:hover {
box-shadow: none;
}
.main-nav__submenu a {
justify-content: flex-start;
min-height: 40px;
padding: 0.55rem 0.7rem;
font-size: 0.8rem;
}
/* Canonical public footer: homepage atmosphere with compact tiered navigation. */
.gs-theme-footer {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 4rem) 1.5rem;
border-top: 1px solid rgba(217, 106, 50, 0.26);
background:
linear-gradient(135deg, rgba(160, 72, 32, 0.17), transparent 38%),
linear-gradient(315deg, rgba(72, 148, 136, 0.1), transparent 32%),
#0a0a0e;
}
.gs-theme-footer::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.52;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.gs-theme-footer__inner {
width: min(100%, 1440px);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.35fr);
gap: clamp(2rem, 6vw, 6rem);
align-items: start;
}
.gs-theme-footer__brand {
display: grid;
justify-items: start;
gap: 1.15rem;
}
.gs-theme-footer__lockup {
display: inline-flex;
align-items: center;
gap: 1rem;
color: #f5f3ec;
text-decoration: none;
}
.gs-theme-footer__logo {
width: clamp(54px, 5vw, 72px);
height: clamp(54px, 5vw, 72px);
flex: 0 0 auto;
object-fit: contain;
}
.gs-theme-footer__lockup > span {
display: grid;
align-content: center;
gap: 0.28rem;
min-height: 3.5rem;
}
.gs-theme-footer__lockup strong {
font-family: 'Syne', 'DM Sans', system-ui, sans-serif;
font-weight: 800;
font-size: clamp(1.3rem, 2.2vw, 2rem);
line-height: 1;
letter-spacing: 0.14em;
}
.gs-theme-footer__lockup small {
color: var(--gs-text-dim);
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.62rem;
line-height: 1.45;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.gs-theme-footer__brand p {
max-width: 36rem;
margin: 0;
color: var(--gs-text-dim);
line-height: 1.7;
}
.gs-theme-footer__cta {
display: inline-flex;
min-height: 44px;
align-items: center;
padding: 0.75rem 1rem;
border: 1px solid rgba(217, 106, 50, 0.48);
border-radius: 7px;
background: rgba(217, 106, 50, 0.12);
color: #f5f3ec;
font-weight: 700;
text-decoration: none;
}
.gs-theme-footer__menu {
display: grid;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.gs-theme-footer__tier {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.gs-theme-footer__tier summary {
display: flex;
min-height: 58px;
align-items: center;
justify-content: space-between;
gap: 1rem;
cursor: pointer;
color: #f5f3ec;
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.13em;
list-style: none;
text-transform: uppercase;
}
.gs-theme-footer__tier summary::-webkit-details-marker { display: none; }
.gs-theme-footer__tier summary span { color: var(--gs-primary); font-size: 1.15rem; transition: transform 160ms ease; }
.gs-theme-footer__tier[open] summary span { transform: rotate(45deg); }
.gs-theme-footer__submenu {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.2rem 1.25rem;
padding: 0 0 1rem;
}
.gs-theme-footer__submenu a {
display: inline-flex;
min-height: 42px;
align-items: center;
color: var(--gs-text-dim);
font-size: 0.84rem;
text-decoration: none;
}
.gs-theme-footer__submenu a:hover,
.gs-theme-footer__submenu a:focus-visible { color: var(--gs-primary); }
.gs-theme-footer__credits {
width: min(100%, 1440px);
margin: clamp(2rem, 4vw, 3rem) auto 0;
padding-top: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
color: var(--gs-text-dim);
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.62rem;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.gs-theme-footer__credits div { display: flex; flex-wrap: wrap; gap: 1rem; }
.gs-theme-footer__credits a { color: inherit; text-decoration: none; }
.gs-theme-footer__credits a:hover { color: var(--gs-primary); }
@media (max-width: 1023px) {
.main-nav {
display: none;
}
.nav-toggle {
display: inline-grid;
}
.topbar[data-menu-open='true'] .main-nav {
position: absolute;
inset: 100% 0 auto;
display: grid;
/* The desktop rule's justify-content: flex-end would pack the grid track to the right. */
grid-template-columns: minmax(0, 1fr);
justify-content: stretch;
justify-items: stretch;
gap: 0.5rem;
box-sizing: border-box;
width: 100%;
max-height: calc(100dvh - 4.5rem);
overflow-y: auto;
overscroll-behavior: contain;
padding: 1rem;
background: #06060a;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Full-width, centred actions so Log in / Sign up never hang off the right edge. */
.topbar[data-menu-open='true'] .main-nav .nav-login,
.topbar[data-menu-open='true'] .main-nav .nav-cta {
display: flex;
justify-content: center;
box-sizing: border-box;
width: 100%;
min-height: 3rem;
}
.footer-main {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-meta-block {
text-align: left;
}
.main-nav__tiers {
display: grid;
justify-items: stretch;
width: 100%;
margin: 0;
}
.main-nav__tier { width: 100%; }
.main-nav__tier summary {
width: 100%;
justify-content: space-between;
}
.main-nav__submenu {
position: static;
width: 100%;
max-height: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-bottom: 0.5rem;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: none;
}
.gs-theme-footer__inner { grid-template-columns: 1fr; gap: 2.25rem; }
}
@media (max-width: 720px) {
.topbar {
padding-inline: 0.8rem;
}
.footer-columns {
grid-template-columns: 1fr;
}
.footer-main {
gap: 1.5rem;
}
.gs-theme-footer__submenu { grid-template-columns: 1fr; }
.gs-theme-footer__credits { align-items: flex-start; flex-direction: column; }
.gs-theme-footer__lockup small { max-width: 16rem; }
.main-nav__submenu { grid-template-columns: 1fr; }
}
:root {
--font-sans:
'DM Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
--gs-bg: #06060a;
--gs-surface: rgba(14, 16, 20, 0.84);
--gs-surface-strong: rgba(20, 23, 29, 0.94);
--gs-border: rgba(255, 120, 54, 0.14);
--gs-border-subtle: rgba(255, 255, 255, 0.06);
--gs-primary: #d96a32;
--gs-primary-soft: rgba(217, 106, 50, 0.14);
--gs-primary-glow: rgba(217, 106, 50, 0.28);
--gs-copper: #d96a32;
--gs-copper-soft: rgba(217, 106, 50, 0.14);
--gs-copper-glow: rgba(217, 106, 50, 0.28);
--gs-copper-strong: rgba(217, 106, 50, 0.42);
--gs-text: #f1f4f8;
--gs-text-dim: #9ca5b4;
--gs-success: #5ddb9a;
--gs-warning: #f0b35b;
--gs-danger: #f56b6b;
--gs-radius: 2px;
--gs-radius-xs: 2px;
--gs-radius-sm: 2px;
--gs-radius-md: 2px;
--gs-radius-lg: 2px;
--gs-radius-pill: 2px;
--gs-shadow: none;
--gs-shadow-soft: none;
--gs-shadow-hard: none;
--gs-max-width: min(1600px, calc(100vw - 2rem));
--gs-font-display: 'Syne', 'DM Sans', system-ui, sans-serif;
--gs-font-body: 'DM Sans', 'Inter', system-ui, sans-serif;
--gs-font-wordmark: 'DM Sans', 'Inter', system-ui, sans-serif;
}
html {
background: var(--gs-bg);
scroll-behavior: smooth;
}
body {
margin: 0;
padding-top: 0;
min-height: 100vh;
background:
radial-gradient(ellipse 80% 60% at 50% -10%, rgba(217, 106, 50, 0.18) 0%, transparent 70%),
var(--gs-bg);
color: var(--gs-text, #f1f4f8);
font-family: var(--gs-font-body, 'Inter', system-ui, sans-serif);
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--gs-font-display, 'Space Grotesk', 'Inter', system-ui, sans-serif);
}
body.menu-open {
overflow: hidden;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
a {
color: inherit;
}
img {
display: block;
max-width: 100%;
}
button,
input,
select,
textarea {
font: inherit;
}
::selection {
background: rgba(217, 106, 50, 0.28);
color: var(--gs-text);
}
/* Keyboard focus: a visible ring on every interactive element. Zero specificity (:where) so a component
can restyle it, but it must replace the ring rather than remove it. */
:where(a, button, summary, input, select, textarea, [tabindex]:not([tabindex='-1'])):focus-visible {
outline: 2px solid var(--gs-primary) !important;
outline-offset: 2px;
}
/* Reduced motion: honour the OS setting for every animation and transition on public pages. The !important is
deliberate: component animations are scoped and declared later, and this must win over all of them. */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0s !important;
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
}
.nav-login[data-astro-cid-egakw7i2], .nav-cta[data-astro-cid-egakw7i2] {
cursor: pointer;
}
.auth-modal[data-astro-cid-egakw7i2] {
width: min(34rem, 100% - 2rem);
padding: clamp(1.5rem, 5vw, 2.5rem);
border: 1px solid #d3743e6b;
border-radius: 0;
background: #111019;
color: #f5f1eb;
box-shadow: 0 28px 90px #0009;
}
.auth-modal[data-astro-cid-egakw7i2]::backdrop {
background: #030307c7;
backdrop-filter: blur(8px);
}
.auth-modal[data-astro-cid-egakw7i2] h2[data-astro-cid-egakw7i2] {
margin: .65rem 0 1rem;
font-size: clamp(1.25rem, 5.2vw, 2rem);
line-height: 1.1;
text-transform: uppercase;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
text-wrap: balance;
}
.auth-modal[data-astro-cid-egakw7i2] p[data-astro-cid-egakw7i2] {
color: var(--gs-text-dim);
line-height: 1.7;
}
.auth-modal__close[data-astro-cid-egakw7i2] {
position: absolute;
top: 1rem;
right: 1rem;
border: 0;
background: none;
color: var(--gs-text-dim);
cursor: pointer;
text-transform: uppercase;
font: 600 .62rem / 1 DM Mono, monospace;
letter-spacing: .1em;
}
.auth-modal__actions[data-astro-cid-egakw7i2] {
display: grid;
gap: .75rem;
margin-top: 1.5rem;
}
.auth-modal__actions[data-astro-cid-egakw7i2] a[data-astro-cid-egakw7i2] {
display: flex;
min-height: 3rem;
align-items: center;
justify-content: center;
padding: .75rem 1rem;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font: 600 .68rem / 1.3 DM Mono, monospace;
letter-spacing: .08em;
}
.auth-modal__primary[data-astro-cid-egakw7i2] {
background: #d3743e;
color: #09080d;
}
.auth-modal__secondary[data-astro-cid-egakw7i2] {
border: 1px solid #d3743e6b;
color: #f5f1eb;
}
.auth-modal__note[data-astro-cid-egakw7i2] {
margin: 1.25rem 0 0;
font-size: .9rem;
}
.auth-modal__note[data-astro-cid-egakw7i2] button[data-astro-cid-egakw7i2] {
border: 0;
padding: 0;
background: none;
color: #d3743e;
cursor: pointer;
font: inherit;
}
.subscribe-form[data-astro-cid-egakw7i2] {
display: grid;
gap: 1rem;
margin-top: 1.5rem;
}
.subscribe-form[data-astro-cid-egakw7i2] label[data-astro-cid-egakw7i2] {
display: grid;
gap: .45rem;
color: #f5f1eb;
font: 600 .66rem / 1.4 DM Mono, monospace;
letter-spacing: .08em;
text-transform: uppercase;
}
.subscribe-form[data-astro-cid-egakw7i2] label[data-astro-cid-egakw7i2] span[data-astro-cid-egakw7i2] {
color: var(--gs-text-dim);
font-weight: 400;
}
.subscribe-form[data-astro-cid-egakw7i2] input[data-astro-cid-egakw7i2]:not([type="checkbox"]) {
min-height: 3rem;
padding: .75rem;
border: 1px solid #ffffff29;
border-radius: 0;
background: #09090e;
color: #fff;
}
.subscribe-form[data-astro-cid-egakw7i2] button[data-astro-cid-egakw7i2] {
min-height: 3rem;
border: 0;
cursor: pointer;
font: 700 .68rem / 1.2 DM Mono, monospace;
letter-spacing: .08em;
text-transform: uppercase;
}
.subscribe-consent[data-astro-cid-egakw7i2] {
align-items: start;
grid-template-columns: auto 1fr !important;
color: var(--gs-text-dim) !important;
font-family: DM Sans, sans-serif !important;
font-size: .82rem !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.subscribe-consent[data-astro-cid-egakw7i2] input[data-astro-cid-egakw7i2] {
margin-top: .2rem;
accent-color: #d3743e;
}
.auth-modal__text[data-astro-cid-egakw7i2] {
margin-top: 1rem;
padding: 0;
border: 0;
background: none;
color: #d3743e;
cursor: pointer;
}
.subscribe-status[data-astro-cid-egakw7i2] {
min-height: 1.5rem;
margin: 1rem 0 0 !important;
color: #d9a47f !important;
}
.gs-nav-toggle[data-astro-cid-fzpbxy5g] {
display: none;
align-items: center;
justify-content: center;
width: 46px;
min-height: 44px;
padding: .72rem 1rem;
border: 1px solid #ffffff2e;
border-radius: 6px;
background: none;
color: var(--gs-text-dim);
cursor: pointer;
transition: border-color .16s, background .16s, color .16s;
}
.gs-nav-toggle[data-astro-cid-fzpbxy5g]:hover, .gs-nav-toggle[data-astro-cid-fzpbxy5g]:focus-visible {
border-color: #dc783c99;
background: #dc783c14;
color: var(--gs-text);
}
.gs-nav-toggle__bar[data-astro-cid-fzpbxy5g] {
position: absolute;
width: 20px;
height: 1px;
border-radius: 1px;
background: currentColor;
transition: transform .18s, opacity .14s;
}
.gs-nav-toggle__bar[data-astro-cid-fzpbxy5g]:nth-of-type(2) {
transform: translateY(-6px);
}
.gs-nav-toggle__bar[data-astro-cid-fzpbxy5g]:nth-of-type(3) {
transform: translateY(0);
}
.gs-nav-toggle__bar[data-astro-cid-fzpbxy5g]:nth-of-type(4) {
transform: translateY(6px);
}
.gs-nav-toggle[data-astro-cid-fzpbxy5g][aria-expanded="true"] .gs-nav-toggle__bar[data-astro-cid-fzpbxy5g]:nth-of-type(2) {
transform: rotate(45deg);
}
.gs-nav-toggle[data-astro-cid-fzpbxy5g][aria-expanded="true"] .gs-nav-toggle__bar[data-astro-cid-fzpbxy5g]:nth-of-type(3) {
opacity: 0;
}
.gs-nav-toggle[data-astro-cid-fzpbxy5g][aria-expanded="true"] .gs-nav-toggle__bar[data-astro-cid-fzpbxy5g]:nth-of-type(4) {
transform: rotate(-45deg);
}
@media (width <= 900px) {
.gs-nav-toggle[data-astro-cid-fzpbxy5g] {
display: flex;
}
.gs-header[data-astro-cid-fzpbxy5g][data-menu-open="true"] .gs-nav[data-astro-cid-fzpbxy5g] {
display: flex !important;
}
.gs-header[data-astro-cid-fzpbxy5g][data-menu-open="false"] .gs-nav[data-astro-cid-fzpbxy5g] {
display: none !important;
}
}
@media (width >= 901px) {
.gs-nav-toggle[data-astro-cid-fzpbxy5g] {
display: none;
}
}
.gs-email-subscription[data-astro-cid-nns7i3if] {
max-width: 300px;
}
.gs-input[data-astro-cid-nns7i3if] {
background: rgba(var(--surface), .6);
border: 1px solid rgba(var(--border), .3);
border-radius: 2px;
color: rgb(var(--black));
font-size: .875rem;
}
.gs-input[data-astro-cid-nns7i3if]::placeholder {
color: rgba(var(--gray), .6);
}
.gs-input[data-astro-cid-nns7i3if]:focus {
outline: none;
border-color: rgba(var(--accent), .5);
box-shadow: 0 0 0 2px rgba(var(--accent), .1);
}
.gs-btn[data-astro-cid-nns7i3if] {
background: rgba(var(--accent), .2);
border: 1px solid rgba(var(--accent), .4);
border-radius: 2px;
color: rgb(var(--black));
font-weight: 600;
cursor: pointer;
transition: background .12s;
}
.gs-btn[data-astro-cid-nns7i3if]:hover {
background: rgba(var(--accent), .3);
}
.gs-btn-primary[data-astro-cid-nns7i3if] {
background: rgba(var(--accent), .3);
border-color: rgba(var(--accent), .5);
}
.gs-btn-primary[data-astro-cid-nns7i3if]:hover {
background: rgba(var(--accent), .4);
}
.mt-4[data-astro-cid-nns7i3if] {
margin-top: 1rem;
}
.mb-2[data-astro-cid-nns7i3if] {
margin-bottom: .5rem;
}
.mt-2[data-astro-cid-nns7i3if] {
margin-top: .5rem;
}
.flex[data-astro-cid-nns7i3if] {
display: flex;
}
.gap-2[data-astro-cid-nns7i3if] {
gap: .5rem;
}
.flex-1[data-astro-cid-nns7i3if] {
flex: 1;
}
.text-sm[data-astro-cid-nns7i3if] {
font-size: .875rem;
}
.text-xs[data-astro-cid-nns7i3if] {
font-size: .75rem;
}
.py-2[data-astro-cid-nns7i3if] {
padding-top: .5rem;
padding-bottom: .5rem;
}
.px-3[data-astro-cid-nns7i3if] {
padding-left: .75rem;
padding-right: .75rem;
}
.px-4[data-astro-cid-nns7i3if] {
padding-left: 1rem;
padding-right: 1rem;
}
.gs-text-dim[data-astro-cid-nns7i3if] {
color: rgba(var(--gray), .8);
}
/* Appearance palettes — applied via .
'theme' (no attribute) leaves gs-brand-theme.css / gs-gold-theme.css in charge.
Maps onto existing tokens: --gs-color-bg, --gs-color-surface, --gs-text-primary,
--gs-text-secondary, --gs-accent. Adds --gs-accent-2, --gs-on-accent, --gs-surface-2/3, --gs-text-muted.
Custom colors are opt-in via data-gs-custom-colors and use validated inline hex variables. */
/* [data-site-theme] raises specificity above the theme stylesheets' :root[data-site-theme] rules, so a palette wins regardless of load order. */
:root[data-site-theme][data-gs-palette] {
--gs-color-bg: var(--p-bg);
--gs-color-surface: var(--p-s1);
--gs-surface-2: var(--p-s2);
--gs-surface-3: var(--p-s3);
--gs-text-primary: var(--p-ink);
--gs-text-secondary: var(--p-ink2);
--gs-text: var(--p-ink);
--gs-text-dim: var(--p-ink2);
--gs-text-muted: var(--p-ink3);
--gs-accent: var(--p-accent);
--gs-accent-2: var(--p-accent2);
--gs-primary: var(--p-accent);
--gs-primary-soft: color-mix(in srgb, var(--p-accent) 14%, transparent);
--gs-primary-glow: color-mix(in srgb, var(--p-accent) 28%, transparent);
--gs-copper: var(--p-accent);
--gs-copper-soft: color-mix(in srgb, var(--p-accent) 14%, transparent);
--gs-copper-glow: color-mix(in srgb, var(--p-accent) 28%, transparent);
--gs-copper-strong: color-mix(in srgb, var(--p-accent) 42%, transparent);
--gs-bg: var(--p-bg);
--gs-surface: var(--p-s1);
--gs-surface-strong: var(--p-s2);
--gs-color-primary: var(--p-accent);
--gs-on-accent: var(--p-on);
--gs-color-border: color-mix(in srgb, var(--p-ink) 8%, transparent);
--gs-color-border-strong: color-mix(in srgb, var(--p-accent) 32%, transparent);
background: var(--p-bg);
color: var(--p-ink);
}
:root[data-gs-palette='copper-void'] { --p-bg:#06060a; --p-s1:#0a0a0e; --p-s2:#0e0e14; --p-s3:#141420; --p-ink:#eceae4; --p-ink2:#b8b4a8; --p-ink3:#9a9589; --p-accent:#d3743e; --p-accent2:#f09154; --p-on:#06060a; }
:root[data-gs-palette='gold'] { --p-bg:#07070a; --p-s1:#0d0c09; --p-s2:#12110c; --p-s3:#1a1810; --p-ink:#efeadf; --p-ink2:#bdb4a2; --p-ink3:#9c937f; --p-accent:#c9a45a; --p-accent2:#e8cf8f; --p-on:#07070a; }
:root[data-gs-palette='black'] { --p-bg:#000000; --p-s1:#0a0a0a; --p-s2:#111111; --p-s3:#1a1a1a; --p-ink:#ffffff; --p-ink2:#bdbdbd; --p-ink3:#8a8a8a; --p-accent:#ffffff; --p-accent2:#9a9a9a; --p-on:#000000; }
:root[data-gs-palette='white'] { --p-bg:#ffffff; --p-s1:#f6f6f6; --p-s2:#efefef; --p-s3:#e6e6e6; --p-ink:#0a0a0a; --p-ink2:#3a3a3a; --p-ink3:#6a6a6a; --p-accent:#0a0a0a; --p-accent2:#5a5a5a; --p-on:#ffffff; }
:root[data-gs-palette='off-white'] { --p-bg:#f4f1ea; --p-s1:#ece8df; --p-s2:#e4dfd3; --p-s3:#d9d3c5; --p-ink:#1c1a17; --p-ink2:#4a4640; --p-ink3:#716b62; --p-accent:#a4521f; --p-accent2:#d3743e; --p-on:#f4f1ea; }
:root[data-gs-palette='neon-lime'] { --p-bg:#050806; --p-s1:#0a0f0b; --p-s2:#0f1611; --p-s3:#152019; --p-ink:#e9fbe9; --p-ink2:#a9c9ae; --p-ink3:#7f9b85; --p-accent:#39ff88; --p-accent2:#c6ff3d; --p-on:#03140a; }
:root[data-gs-palette='neon-cyan'] { --p-bg:#04060a; --p-s1:#080c14; --p-s2:#0c121d; --p-s3:#121a28; --p-ink:#e6f6ff; --p-ink2:#a5c2d4; --p-ink3:#7895a8; --p-accent:#22e1ff; --p-accent2:#7a5cff; --p-on:#02131a; }
:root[data-gs-palette='neon-magenta'] { --p-bg:#08040a; --p-s1:#0f0812; --p-s2:#160c1a; --p-s3:#201226; --p-ink:#fbe9ff; --p-ink2:#cfa9d6; --p-ink3:#a37fab; --p-accent:#ff2fd0; --p-accent2:#ffe14a; --p-on:#1a0215; }
:root[data-gs-palette='pastel-peach'] { --p-bg:#fbf4ef; --p-s1:#f5ebe3; --p-s2:#efe1d6; --p-s3:#e6d4c6; --p-ink:#2a211c; --p-ink2:#5a4a40; --p-ink3:#806c60; --p-accent:#e8916b; --p-accent2:#9dc5bb; --p-on:#2a211c; }
:root[data-gs-palette='pastel-lilac'] { --p-bg:#f6f3fb; --p-s1:#eee9f7; --p-s2:#e5def2; --p-s3:#d9d0ea; --p-ink:#221d2e; --p-ink2:#4d4560; --p-ink3:#746b88; --p-accent:#9b84d6; --p-accent2:#f0b6c8; --p-on:#ffffff; }
:root[data-gs-palette='pastel-mint'] { --p-bg:#f1f8f4; --p-s1:#e6f2eb; --p-s2:#dbebe2; --p-s3:#cde2d6; --p-ink:#17251e; --p-ink2:#3f5549; --p-ink3:#667b70; --p-accent:#5fae8a; --p-accent2:#f2b880; --p-on:#ffffff; }
:root[data-gs-palette='copper-teal'] { --p-bg:#06090a; --p-s1:#0a1012; --p-s2:#0e171a; --p-s3:#142024; --p-ink:#e8eeec; --p-ink2:#a9b9b5; --p-ink3:#80928e; --p-accent:#d3743e; --p-accent2:#3fb8a8; --p-on:#06090a; }
:root[data-gs-palette='navy-amber'] { --p-bg:#070b16; --p-s1:#0b1120; --p-s2:#10182c; --p-s3:#16203a; --p-ink:#eef1f8; --p-ink2:#aeb7cc; --p-ink3:#8590a8; --p-accent:#f2a93b; --p-accent2:#5b7cfa; --p-on:#070b16; }
:root[data-gs-palette='forest-coral'] { --p-bg:#07100c; --p-s1:#0b1712; --p-s2:#101f18; --p-s3:#162a21; --p-ink:#eef5ef; --p-ink2:#adc2b3; --p-ink3:#82998a; --p-accent:#ff7a5c; --p-accent2:#7fd49a; --p-on:#07100c; }
/* Custom colors intentionally sit after preset palettes. The inline variables are
hex-only and validated before they reach this stylesheet, so custom overrides
cannot inject CSS and always win over both theme and preset aliases. */
:root[data-site-theme][data-gs-custom-colors='true'] {
--gs-color-bg: var(--gs-custom-background);
--gs-bg-primary: var(--gs-custom-background);
--gs-bg-secondary: color-mix(in srgb, var(--gs-custom-background) 90%, var(--gs-custom-ink));
--gs-bg-surface: color-mix(in srgb, var(--gs-custom-background) 82%, var(--gs-custom-ink));
--gs-bg: var(--gs-custom-background);
--gs-public-void: var(--gs-custom-background);
--gs-public-text: var(--gs-custom-ink);
--gs-public-dim: color-mix(in srgb, var(--gs-custom-ink) 68%, var(--gs-custom-background));
--shell-text: var(--gs-custom-ink);
--shell-dim: color-mix(in srgb, var(--gs-custom-ink) 68%, var(--gs-custom-background));
--gs-text-primary: var(--gs-custom-ink);
--gs-text-secondary: color-mix(in srgb, var(--gs-custom-ink) 72%, var(--gs-custom-background));
--gs-text: var(--gs-custom-ink);
--gs-text-dim: color-mix(in srgb, var(--gs-custom-ink) 72%, var(--gs-custom-background));
--gs-text-muted: color-mix(in srgb, var(--gs-custom-ink) 58%, var(--gs-custom-background));
--gs-color-text: var(--gs-custom-ink);
--gs-color-subtle: var(--gs-text-muted);
--gs-color-faint: var(--gs-text-muted);
--gs-accent: var(--gs-custom-accent);
--gs-accent-2: var(--gs-custom-accent-2);
--gs-primary: var(--gs-custom-accent);
--gs-primary-soft: color-mix(in srgb, var(--gs-custom-accent) 14%, transparent);
--gs-primary-glow: color-mix(in srgb, var(--gs-custom-accent) 28%, transparent);
--gs-copper: var(--gs-custom-accent);
--gs-copper-soft: color-mix(in srgb, var(--gs-custom-accent) 14%, transparent);
--gs-copper-glow: color-mix(in srgb, var(--gs-custom-accent) 28%, transparent);
--gs-copper-strong: color-mix(in srgb, var(--gs-custom-accent) 42%, transparent);
--gs-color-primary: var(--gs-custom-accent);
--gs-accent-strong: var(--gs-custom-accent-2);
--gs-accent-contrast: var(--gs-custom-on-accent);
--gs-on-accent: var(--gs-custom-on-accent);
--gs-surface: color-mix(in srgb, var(--gs-custom-background) 86%, var(--gs-custom-ink));
--gs-surface-strong: color-mix(in srgb, var(--gs-custom-background) 76%, var(--gs-custom-ink));
--gs-color-surface: var(--gs-surface);
--gs-color-muted-surface: var(--gs-surface-strong);
--gs-color-border: color-mix(in srgb, var(--gs-custom-accent) 24%, transparent);
--gs-border: var(--gs-color-border);
--gs-border-subtle: color-mix(in srgb, var(--gs-custom-ink) 12%, transparent);
--gs-logo-glow-soft: color-mix(in srgb, var(--gs-custom-accent) 30%, transparent);
--gs-logo-glow-strong: color-mix(in srgb, var(--gs-custom-accent) 60%, transparent);
--gs-nav-indicator-bg: var(--gs-custom-accent);
--gs-nav-indicator-shadow: 0 0 8px var(--gs-custom-accent);
background-color: var(--gs-custom-background);
color: var(--gs-custom-ink);
}
html[data-site-theme][data-gs-custom-colors='true'],
html[data-site-theme][data-gs-custom-colors='true'] body {
background: var(--gs-custom-background) !important;
color: var(--gs-custom-ink);
}
html[data-site-theme][data-gs-custom-colors='true'] ::selection {
background: color-mix(in srgb, var(--gs-custom-accent) 30%, transparent);
color: var(--gs-custom-ink);
}
html[data-site-theme][data-gs-custom-colors='true'] .gs-shell-v284 {
--shell-text: var(--gs-custom-ink);
--shell-dim: color-mix(in srgb, var(--gs-custom-ink) 68%, var(--gs-custom-background));
}
/* Public themes historically hard-code CTA foregrounds to the dark shell
background. Custom accent/background pairs need the computed contrast color
instead, especially when both selected colours are light or both are dark. */
html[data-site-theme][data-gs-custom-colors='true'] .gs-shell-v284 .topbar .nav-cta,
html[data-site-theme][data-gs-custom-colors='true'] .gs-shell-v284 .main-nav .nav-cta,
html[data-site-theme][data-gs-custom-colors='true'] body.gs-home .btn.primary {
background: var(--gs-custom-accent) !important;
border-color: var(--gs-custom-accent) !important;
color: var(--gs-accent-contrast) !important;
}
/* The legacy public cards intentionally retain dark panels when the page
background is customized, so keep their content on the corresponding light
surface foreground rather than inheriting a dark page foreground. */
html[data-site-theme][data-gs-custom-colors='true'] .gs-shell-v284 :is(.gs-card, .gs-panel, .info-card, .service-card, .feature-card, .module-card, .page-cta, .platform-cta) {
color: var(--gs-public-surface-text, #eceae4);
}
/* Shape */
:root[data-gs-shape='square'] { --gs-radius-sm: 0px; --gs-radius-md: 0px; }
:root[data-gs-shape='soft'] { --gs-radius-sm: 2px; --gs-radius-md: 4px; }
:root[data-gs-shape='rounded'] { --gs-radius-sm: 8px; --gs-radius-md: 14px; }
:root[data-gs-shape='pill'] { --gs-radius-sm: 999px; --gs-radius-md: 22px; }
/* Header — the grid layout is opt-in via .gs-header--appearance. The existing .topbar (PublicHeader)
and .gs-header (classic SiteHeader) keep their own layout; they only receive .is-scrolled below. */
:root[data-gs-header-height='compact'] { --gs-header-py: 8px; }
:root[data-gs-header-height='default'] { --gs-header-py: 16px; }
:root[data-gs-header-height='tall'] { --gs-header-py: 28px; }
:root[data-gs-header-width='contained'] { --gs-header-px: max(clamp(16px, 4vw, 64px), calc((100vw - 1440px) / 2 + 64px)); }
:root { --gs-header-px: clamp(16px, 4vw, 64px); }
.gs-header--appearance {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(12px, 1.5vw, 24px);
padding: var(--gs-header-py, 16px) var(--gs-header-px);
transition: padding 220ms ease, background 220ms ease, border-color 220ms ease;
}
.gs-header--appearance.is-scrolled { padding-block: calc(var(--gs-header-py, 16px) * .55); }
:root[data-gs-compress-header='false'] .gs-header--appearance.is-scrolled { padding-block: var(--gs-header-py, 16px); }
.gs-header__nav { display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(4px, 1vw, 14px); justify-content: flex-end; min-width: 0; }
:root[data-gs-nav-align='left'] .gs-header__nav { justify-content: flex-start; }
:root[data-gs-nav-align='spread'] .gs-header__nav { justify-content: space-evenly; }
:root[data-gs-nav-align='center'] .gs-header--appearance { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
:root[data-gs-nav-align='center'] .gs-header__nav { justify-content: center; }
.gs-header__actions { display: flex; gap: 8px; justify-self: end; }
.gs-header__menu { display: none; }
@media (max-width: 1239px) {
.gs-header__login { display: none; }
.gs-header__nav a, .gs-header__nav button { padding-inline: 8px; }
.brand-wordmark { letter-spacing: .08em; }
}
@media (max-width: 999px) {
.gs-header--appearance { grid-template-columns: auto minmax(0, 1fr) auto !important; padding-inline: 16px; }
.gs-header__nav, .gs-header__actions { display: none; }
.gs-header__menu { display: inline-flex; justify-self: end; min-height: 44px; min-width: 44px; }
.gs-header--appearance.is-menu-open .gs-header__drawer { display: grid; }
}
.gs-header__drawer { display: none; grid-column: 1 / -1; gap: 2px; padding: 12px 0 8px; border-top: 1px solid var(--gs-color-border); }
.gs-header__drawer a { display: flex; align-items: center; min-height: 48px; font-family: var(--gs-font-display); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; }
/* Wordmark */
:root[data-gs-wordmark-weight] .brand-wordmark { font-weight: var(--gs-wordmark-weight, 800); }
:root[data-gs-wordmark-style='italic'] .brand-wordmark { font-style: italic; }
/* :root raises specificity above home-theme.css's older hollow-outline .brand-shore, so the chosen effect (not that
leftover rule) decides how SHORE looks at rest: solid by default, hollow only for the 'fill' effect below. */
:root .brand-shore { color: inherit; transition: color 220ms ease, -webkit-text-stroke-color 220ms ease; -webkit-text-stroke: 1px transparent; }
:root[data-gs-shore-effect='accent'] .is-scrolled .brand-shore { color: var(--gs-accent); }
:root[data-gs-shore-effect='hollow'] .is-scrolled .brand-shore { color: transparent; -webkit-text-stroke-color: var(--gs-text-primary); }
:root[data-gs-shore-effect='fill'] .brand-shore { color: transparent; -webkit-text-stroke-color: var(--gs-text-primary); }
:root[data-gs-shore-effect='fill'] .is-scrolled .brand-shore { color: var(--gs-text-primary); -webkit-text-stroke-color: transparent; }
:root[data-gs-shore-effect='fade'] .is-scrolled .brand-shore { color: color-mix(in srgb, var(--gs-text-primary) 35%, transparent); }
/* Hero backdrop: the homepage renders the starfield canvas; the other layers belong to the ParallaxHero source. */
:root[data-gs-hero-backdrop]:not([data-gs-hero-backdrop='all']):not([data-gs-hero-backdrop='stars']) #starfield { display: none; }
#starfield { transition: transform 120ms linear; }
/* ZIP #12 is opt-in through the persisted presentation template. */
html[data-site-template='zip12'] body { background: var(--gs-bg, #06060a); }
html[data-site-template='zip12'] .gs-page-shell { min-height: 100vh; }
.zip12-header { position: sticky; top: 0; z-index: 60; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem, 3vw, 3rem); padding: 1.1rem max(1.25rem, calc((100vw - 1320px) / 2)); background: color-mix(in srgb, var(--gs-bg, #06060a) 88%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--gs-text-primary, #fff) 14%, transparent); backdrop-filter: blur(18px); transition: padding .2s ease, background .2s ease; }
.zip12-header.is-scrolled { padding-block: .72rem; background: var(--gs-bg, #06060a); }
.zip12-header__brand, .zip12-footer__brand { display: flex; align-items: center; line-height: 0; }
.zip12-header__brand img { width: clamp(156px, 17vw, 207px); height: auto; }
.zip12-header__nav { display: flex; justify-content: center; gap: clamp(.75rem, 2vw, 1.6rem); }
.zip12-header a { color: var(--gs-text-primary, #fff); text-decoration: none; }
.zip12-header__nav a, .zip12-header__login { font: 500 .68rem/1.2 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .78; }
.zip12-header__nav a:hover, .zip12-header__nav a[aria-current='page'], .zip12-header__login:hover { opacity: 1; color: var(--gs-accent, #d3743e); }
.zip12-header__actions { display: flex; align-items: center; gap: 1rem; }
.zip12-header__cta, .zip12-footer__cta { padding: .72rem 1rem; background: var(--gs-accent, #d3743e); color: var(--gs-on-accent, #06060a) !important; font: 700 .62rem/1.1 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.zip12-header__menu { display: none; border: 1px solid color-mix(in srgb, var(--gs-text-primary, #fff) 24%, transparent); padding: .65rem .8rem; background: transparent; color: var(--gs-text-primary, #fff); font: 600 .65rem/1 'DM Mono', monospace; text-transform: uppercase; }
.zip12-header__mobile { display: none; }
.zip12-footer { padding: clamp(3rem, 8vw, 7rem) max(1.25rem, calc((100vw - 1320px) / 2)) 1.5rem; background: #030307; color: #fff; }
.zip12-footer__top { display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: end; gap: 2rem; padding-bottom: 3.5rem; border-bottom: 1px solid rgba(255,255,255,.15); }
.zip12-footer__brand img { width: min(248px, 70vw); height: auto; }
.zip12-footer p { margin: 0; max-width: 22rem; color: rgba(255,255,255,.62); font: .86rem/1.6 'DM Sans', sans-serif; }
.zip12-footer__links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding: 2.5rem 0; }
.zip12-footer__links div { display: grid; align-content: start; gap: .55rem; }
.zip12-footer__links strong { margin-bottom: .35rem; color: var(--gs-accent-2, #f09154); font: 600 .62rem/1 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.zip12-footer__links a, .zip12-footer__bottom { color: rgba(255,255,255,.62); font: .75rem/1.5 'DM Sans', sans-serif; text-decoration: none; }
.zip12-footer__links a:hover, .zip12-footer__bottom a:hover { color: #fff; }
.zip12-footer__bottom { display: flex; justify-content: space-between; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); }
html[data-site-template='zip12'] .fg { padding: 0; border-color: rgba(255,255,255,.16); }
html[data-site-template='zip12'] .fg-card { min-height: 220px; padding: clamp(1.25rem, 3vw, 2.5rem); background: #0b0b10; }
html[data-site-template='zip12'] .fg-card__index { font-size: .72rem; }
html[data-site-template='zip12'] .fg-card h3 { font-size: clamp(1.3rem, 2.4vw, 2rem); }
html[data-site-template='zip12'] .zip12-hero { position: relative; }
html[data-site-template='zip12'] .zip12-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url('/assets/brand/blueprint-grid.svg') center/cover; opacity: .16; mix-blend-mode: screen; }
html[data-site-template='zip12'] .zip12-hero > * { position: relative; z-index: 1; }
html[data-site-template='zip12'] .zip12-data-row { border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
html[data-site-template='zip12'] .zip12-data-row > div { padding-block: 1.2rem; }
@media (max-width: 900px) {
.zip12-header { grid-template-columns: 1fr auto; }
.zip12-header__nav, .zip12-header__actions { display: none; }
.zip12-header__menu { display: block; }
.zip12-header[data-menu-open='true'] .zip12-header__mobile { display: grid; grid-column: 1 / -1; gap: 1rem; padding: 1.25rem 0 .5rem; border-top: 1px solid rgba(255,255,255,.14); }
.zip12-header__mobile a { font: 700 1rem/1.1 'Syne', sans-serif; text-transform: uppercase; }
.zip12-footer__top { grid-template-columns: 1fr; align-items: start; }
.zip12-footer__links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) { .zip12-footer__bottom { display: grid; gap: .5rem; } }