/* index.html */
/* ==================================================================
Playtime Zone global stylesheet
1) Palette tokens 2) Base typography 3) Snap-panel scaffold
4) Site header + dot rail 5) Reusable panel helpers
================================================================== */
/* --- 1) Palette tokens: light theme is the default ----------------- */
:root {
--site-bg: #F1F8FD;
--site-surface: #F6FBFF;
--site-text: #121C23;
--site-muted: #4C575F;
--site-border: #CAD0D5;
--site-primary: #AC5297;
--site-on-primary: #FFFFFF;
--site-secondary: #F6E1EF;
--site-on-secondary: #000000;
--site-accent: #8868A6;
--site-on-accent: #FFFFFF;
--site-success: #22C55E;
--site-warning: #F59E0B;
--site-error: #EF4444;
--site-info: #3B82F6;
/* Readable foreground roles for links, small text and icons */
--site-primary-text: #AB5196;
--site-secondary-text: #7E6B78;
--site-accent-text: #8464A2;
--site-indicator: #AB5196;
/* Tonal depth roles used for selected moments and tonal panels */
--site-tonal-bg: #FFEEF9;
--site-tonal-surface: #F3D3E9;
--site-tonal-panel: #DFA0CE;
--site-on-tonal-panel: #000000;
--site-category-0: #F6DEEF;
--site-category-1: #EAC4DE;
--site-on-category-0: #000000;
--site-on-category-1: #000000;
--site-tonal-text: #121C23;
--site-tonal-primary-text: #973F84;
--site-tonal-indicator: #AB5196;
/* Compatibility aliases so both naming styles resolve */
--color-bg: var(--site-bg);
--color-surface: var(--site-surface);
--color-text: var(--site-text);
--color-muted: var(--site-muted);
--color-border: var(--site-border);
--color-primary: var(--site-primary);
--color-on-primary: var(--site-on-primary);
--color-secondary: var(--site-secondary);
--color-on-secondary: var(--site-on-secondary);
--color-accent: var(--site-accent);
--color-on-accent: var(--site-on-accent);
--color-primary-text: var(--site-primary-text);
--color-secondary-text: var(--site-secondary-text);
--color-accent-text: var(--site-accent-text);
--color-indicator: var(--site-indicator);
--color-tonal-bg: var(--site-tonal-bg);
--color-tonal-surface: var(--site-tonal-surface);
--color-tonal-panel: var(--site-tonal-panel);
--color-tonal-text: var(--site-tonal-text);
--color-success: var(--site-success);
--color-warning: var(--site-warning);
--color-error: var(--site-error);
--color-info: var(--site-info);
/* Full-bleed panels sit over dark artwork, so they always use the
dark-side text roles regardless of the visitor colour scheme. */
--panel-text: #E1F1FF;
--panel-muted: #A3B4C1;
--panel-accent: #D685C1;
--panel-tint: #12070F;
}
/* --- Dark variant driven by the visitor OS preference ------------- */
@media (prefers-color-scheme: dark) {
:root {
--site-bg: #10161B;
--site-surface: #1B2227;
--site-text: #E1F1FF;
--site-muted: #A3B4C1;
--site-border: #343B40;
--site-primary: #D685C1;
--site-on-primary: #000000;
--site-secondary: #3B2635;
--site-on-secondary: #FFFFFF;
--site-accent: #B594D6;
--site-on-accent: #000000;
--site-primary-text: #D685C1;
--site-secondary-text: #9A8092;
--site-accent-text: #B594D6;
--site-indicator: #D685C1;
--site-tonal-bg: #12070F;
--site-tonal-surface: #2E1729;
--site-tonal-panel: #612C55;
--site-on-tonal-panel: #FFFFFF;
--site-category-0: #32202D;
--site-category-1: #4A2C42;
--site-on-category-0: #FFFFFF;
--site-on-category-1: #FFFFFF;
--site-tonal-text: #E1F1FF;
--site-tonal-primary-text: #D685C1;
--site-tonal-indicator: #D685C1;
}
}
/* --- 2) Base typography ------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html.snap {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
body {
margin: 0;
background-color: var(--site-bg);
color: var(--site-text);
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-weight: 300;
line-height: 1.65;
}
h1,
h2,
h3,
h4 {
font-family: 'Lora', Georgia, 'Times New Roman', serif;
font-weight: 700;
letter-spacing: -0.01em;
}
h1 {
font-size: clamp(3rem, 9vw, 8rem);
line-height: 0.95;
}
h2 {
font-size: clamp(2.5rem, 6vw, 5.5rem);
line-height: 1;
}
.lede {
font-size: clamp(1.15rem, 1.8vw, 1.5rem);
font-weight: 300;
max-width: 38ch;
color: var(--panel-muted);
}
a {
color: var(--site-primary-text);
}
:focus-visible {
outline: 2px solid var(--site-indicator);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
html.snap {
scroll-behavior: auto;
}
}
/* --- 3) Snap-panel scaffold --------------------------------------- */
.panel {
min-height: 100vh;
min-height: 100svh;
height: auto;
scroll-snap-align: start;
position: relative;
display: grid;
align-items: center;
overflow: visible;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
isolation: isolate;
color: var(--panel-text);
}
/* Tonal scrim keeps text legible over every full-bleed background */
.panel::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16, 22, 27, 0.76) 0%, rgba(18, 7, 15, 0.88) 100%);
z-index: -1;
}
.inner {
width: min(1200px, 100%);
margin: 0 auto;
padding: clamp(4rem, 10vh, 8rem) clamp(1.25rem, 5vw, 4rem);
}
/* Distinct full-bleed backgrounds per panel. Page bodies may layer a
game-art image on top by adding background-image in an inline style. */
.bg-1 {
background-image: radial-gradient(circle at 18% 22%, hsl(310 55% 42% / 0.55) 0%, transparent 55%), radial-gradient(circle at 82% 78%, hsl(268 48% 40% / 0.5) 0%, transparent 60%), linear-gradient(150deg, #10161B 0%, #1B2227 45%, #12070F 100%);
}
.bg-2 {
background-image: radial-gradient(circle at 78% 18%, hsl(286 45% 40% / 0.5) 0%, transparent 58%), linear-gradient(120deg, #12070F 0%, #1B2227 60%, #10161B 100%);
}
.bg-3 {
background-image: radial-gradient(circle at 22% 72%, hsl(322 42% 46% / 0.45) 0%, transparent 60%), linear-gradient(200deg, #10161B 0%, #2E1729 55%, #12070F 100%);
}
.bg-4 {
background-image: radial-gradient(circle at 50% 12%, hsl(310 48% 44% / 0.4) 0%, transparent 62%), linear-gradient(160deg, #612C55 0%, #2E1729 48%, #10161B 100%);
}
.bg-5 {
background-image: radial-gradient(circle at 72% 68%, hsl(268 44% 42% / 0.5) 0%, transparent 60%), linear-gradient(140deg, #12070F 0%, #32202D 40%, #10161B 100%);
}
/* --- 4) Site header and fixed dot rail ---------------------------- */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 1035;
}
.site-navbar {
background: linear-gradient(180deg, rgba(16, 22, 27, 0.94) 0%, rgba(16, 22, 27, 0.66) 100%);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(214, 133, 193, 0.28);
}
.site-nav-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
max-width: 1400px;
margin: 0 auto;
padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
position: relative;
}
.brand-lockup {
display: flex;
align-items: center;
gap: 0.7rem;
text-decoration: none;
}
.brand-icon {
font-size: 1.9rem;
color: var(--panel-accent);
}
.brand-name {
display: block;
font-family: 'Lora', Georgia, serif;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.1;
color: var(--panel-text);
}
.brand-tagline {
display: block;
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--panel-muted);
}
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.5rem;
background: transparent;
border: 1px solid rgba(214, 133, 193, 0.45);
border-radius: 8px;
color: var(--panel-text);
line-height: 1;
}
.nav-toggle:hover {
border-color: var(--panel-accent);
color: var(--panel-accent);
}
.nav-menu {
display: none;
}
.nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 1.5rem;
}
.top-nav-link {
color: var(--panel-muted);
text-decoration: none;
font-size: 0.8rem;
font-weight: 400;
letter-spacing: 0.07em;
text-transform: uppercase;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.top-nav-link:hover,
.top-nav-link:focus-visible {
color: var(--panel-text);
border-bottom-color: var(--panel-accent);
}
/* Mobile: the menu drops below the bar and is revealed by the toggle */
@media (max-width: 991.98px) {
.nav-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 1rem clamp(1rem, 5vw, 2rem) 1.5rem;
background: rgba(16, 22, 27, 0.97);
border-bottom: 1px solid var(--site-border);
backdrop-filter: blur(16px);
}
.nav-menu.is-open {
display: flex;
}
.nav-list {
flex-direction: column;
align-items: flex-start;
gap: 0.9rem;
width: 100%;
margin-bottom: 1.25rem;
}
.top-nav-link {
font-size: 0.85rem;
}
}
/* Desktop: menu is always visible and the toggle disappears */
@media (min-width: 992px) {
.nav-menu {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-toggle {
display: none;
}
}
.rail {
position: fixed;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
display: grid;
gap: 0.75rem;
z-index: 1040;
}
.dot {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid currentColor;
color: var(--panel-text);
opacity: 0.6;
transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.dot:hover,
.dot:focus-visible {
opacity: 1;
border-color: var(--panel-accent);
transform: scale(1.15);
}
/* On small or short screens snapping relaxes and the rail is removed */
@media (max-width: 768px), (max-height: 640px) {
html.snap {
scroll-snap-type: y proximity;
}
.rail {
display: none;
}
}
/* --- 5) Reusable panel helpers ------------------------------------ */
.cta {
display: inline-block;
padding: 0.85rem 2rem;
background: transparent;
border: 1px solid var(--panel-accent);
border-radius: 8px;
color: var(--panel-text);
font-family: 'Poppins', sans-serif;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.cta:hover,
.cta:focus-visible {
border-color: var(--panel-accent);
background-color: rgba(214, 133, 193, 0.14);
color: var(--panel-text);
}
.cta-header {
font-size: 0.72rem;
padding: 0.6rem 1.35rem;
}
.scroll-cue {
position: absolute;
bottom: 2rem;
left: clamp(1.25rem, 5vw, 4rem);
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--panel-muted);
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
}
.scroll-cue:hover {
color: var(--panel-text);
}
/* Two-column content grid: one featured visual plus a supporting list */
.two-col {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
align-items: center;
}
@media (max-width: 991.98px) {
.two-col {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.feature-media {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border: 1px solid var(--site-border);
border-radius: 8px;
display: block;
}
/* Thin-bordered selector list rows: no shadow, border shifts on hover */
.feature-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background-color: rgba(27, 34, 39, 0.5);
transition: border-color 0.25s ease;
}
.feature-item:hover {
border-color: var(--panel-accent);
}
.feature-name {
color: var(--panel-text);
font-size: 1rem;
font-weight: 400;
}
.feature-tag {
color: var(--panel-muted);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
}
.stat-row {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-top: 2rem;
}
.stat-number {
display: block;
font-family: 'Lora', Georgia, serif;
font-weight: 700;
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1;
color: var(--panel-accent);
}
.stat-label {
display: block;
margin-top: 0.4rem;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--panel-muted);
}
.pull-quote {
font-family: 'Lora', Georgia, serif;
font-weight: 700;
font-size: clamp(1.75rem, 4vw, 3.5rem);
line-height: 1.15;
color: var(--panel-text);
max-width: 26ch;
margin: 0;
}
.quote-author {
margin-top: 1.5rem;
font-size: 0.9rem;
color: var(--panel-text);
}
.quote-handle {
display: block;
color: var(--panel-muted);
font-size: 0.78rem;
letter-spacing: 0.1em;
}
/* Glass icon tile: only used over busy or coloured backdrops */
.glass-tile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 14px;
}
.glass-tile .material-symbols-outlined {
font-size: 1.6rem;
color: var(--panel-text);
}
.panel-card {
background-color: rgba(27, 34, 39, 0.55);
border: 1px solid var(--site-border);
border-radius: 8px;
backdrop-filter: blur(8px);
transition: border-color 0.25s ease;
}
.panel-card:hover {
border-color: var(--panel-accent);
}
.panel-note {
color: var(--panel-muted);
font-size: 0.9rem;
}
/* Signup field used in the closing CTA panels */
.signup-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
max-width: 520px;
}
.signup-input {
flex: 1 1 240px;
min-height: 48px;
padding: 0.75rem 1rem;
background: rgba(16, 22, 27, 0.6);
border: 1px solid var(--site-border);
border-radius: 8px;
color: var(--panel-text);
font-family: 'Poppins', sans-serif;
font-size: 0.95rem;
}
.signup-input::placeholder {
color: var(--panel-muted);
}
.signup-input:focus {
border-color: var(--site-indicator);
outline: none;
}
/* index.html */
:root {
--bs-primary: var(--site-primary, #AC5297);
--bs-primary-rgb: 172, 82, 151;
--bs-on-primary: var(--site-on-primary, #FFFFFF);
--bs-primary-hover-bg: color-mix(in oklch, var(--bs-primary) 85%, black);
--bs-primary-active-bg: color-mix(in oklch, var(--bs-primary) 75%, black);
--bs-secondary: var(--site-secondary, #F6E1EF);
--bs-secondary-rgb: 246, 225, 239;
--bs-on-secondary: var(--site-on-secondary, #000000);
--bs-secondary-hover-bg: color-mix(in oklch, var(--bs-secondary) 85%, white);
--bs-secondary-active-bg: color-mix(in oklch, var(--bs-secondary) 75%, white);
--bs-success: var(--site-success, #22C55E);
--bs-success-rgb: 34, 197, 94;
--bs-on-success: #000000;
--bs-success-hover-bg: color-mix(in oklch, var(--bs-success) 85%, white);
--bs-success-active-bg: color-mix(in oklch, var(--bs-success) 75%, white);
--bs-info: var(--site-info, #3B82F6);
--bs-info-rgb: 59, 130, 246;
--bs-on-info: #000000;
--bs-info-hover-bg: color-mix(in oklch, var(--bs-info) 85%, white);
--bs-info-active-bg: color-mix(in oklch, var(--bs-info) 75%, white);
--bs-warning: var(--site-warning, #F59E0B);
--bs-warning-rgb: 245, 158, 11;
--bs-on-warning: #000000;
--bs-warning-hover-bg: color-mix(in oklch, var(--bs-warning) 85%, white);
--bs-warning-active-bg: color-mix(in oklch, var(--bs-warning) 75%, white);
--bs-danger: var(--site-error, #EF4444);
--bs-danger-rgb: 239, 68, 68;
--bs-on-danger: #000000;
--bs-danger-hover-bg: color-mix(in oklch, var(--bs-danger) 85%, white);
--bs-danger-active-bg: color-mix(in oklch, var(--bs-danger) 75%, white);
--bs-body-bg: var(--site-bg, #F1F8FD);
--bs-body-bg-rgb: 241, 248, 253;
--bs-body-color: var(--site-text, #121C23);
--bs-body-color-rgb: 18, 28, 35;
--bs-emphasis-color: var(--site-text, #121C23);
--bs-emphasis-color-rgb: 18, 28, 35;
--bs-secondary-color: var(--site-muted, #4C575F);
--bs-secondary-color-rgb: 76, 87, 95;
--bs-tertiary-color: var(--site-muted, #4C575F);
--bs-tertiary-color-rgb: 76, 87, 95;
--bs-secondary-bg: var(--site-surface, #F6FBFF);
--bs-secondary-bg-rgb: 246, 251, 255;
--bs-tertiary-bg: var(--site-surface, #F6FBFF);
--bs-tertiary-bg-rgb: 246, 251, 255;
--bs-border-color: var(--site-border, #CAD0D5);
--bs-link-color-rgb: 171, 81, 150;
--bs-link-hover-color: #AB5196;
--bs-link-hover-color-rgb: 171, 81, 150;
--site-primary-text: #AB5196;
--color-primary-text: #AB5196;
--bs-primary-text: #AB5196;
--site-secondary-text: #7E6B78;
--color-secondary-text: #7E6B78;
--bs-secondary-text: #7E6B78;
--site-accent-text: #8464A2;
--color-accent-text: #8464A2;
--bs-accent-text: #8464A2;
--site-indicator: #AB5196;
--color-indicator: #AB5196;
--bs-indicator: #AB5196;
--bs-link-color: var(--bs-primary-text, var(--bs-primary));
--bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
--bs-primary-text-emphasis: color-mix(in oklch, var(--bs-primary) 60%, var(--bs-body-color));
--bs-primary-bg-subtle: color-mix(in oklch, var(--bs-primary) 15%, var(--bs-body-bg));
--bs-primary-border-subtle: color-mix(in oklch, var(--bs-primary) 40%, var(--bs-body-bg));
--bs-secondary-text-emphasis: color-mix(in oklch, var(--bs-secondary) 60%, var(--bs-body-color));
--bs-secondary-bg-subtle: color-mix(in oklch, var(--bs-secondary) 15%, var(--bs-body-bg));
--bs-secondary-border-subtle: color-mix(in oklch, var(--bs-secondary) 40%, var(--bs-body-bg));
}
@media (prefers-color-scheme: dark) {
:root {
--bs-primary: var(--site-primary, #D685C1);
--bs-primary-rgb: 214, 133, 193;
--bs-on-primary: var(--site-on-primary, #000000);
--bs-primary-hover-bg: color-mix(in oklch, var(--bs-primary) 85%, white);
--bs-primary-active-bg: color-mix(in oklch, var(--bs-primary) 75%, white);
--bs-secondary: var(--site-secondary, #3B2635);
--bs-secondary-rgb: 59, 38, 53;
--bs-on-secondary: var(--site-on-secondary, #FFFFFF);
--bs-secondary-hover-bg: color-mix(in oklch, var(--bs-secondary) 85%, black);
--bs-secondary-active-bg: color-mix(in oklch, var(--bs-secondary) 75%, black);
--bs-success: var(--site-success, #22C55E);
--bs-success-rgb: 34, 197, 94;
--bs-on-success: #000000;
--bs-success-hover-bg: color-mix(in oklch, var(--bs-success) 85%, white);
--bs-success-active-bg: color-mix(in oklch, var(--bs-success) 75%, white);
--bs-info: var(--site-info, #3B82F6);
--bs-info-rgb: 59, 130, 246;
--bs-on-info: #000000;
--bs-info-hover-bg: color-mix(in oklch, var(--bs-info) 85%, white);
--bs-info-active-bg: color-mix(in oklch, var(--bs-info) 75%, white);
--bs-warning: var(--site-warning, #F59E0B);
--bs-warning-rgb: 245, 158, 11;
--bs-on-warning: #000000;
--bs-warning-hover-bg: color-mix(in oklch, var(--bs-warning) 85%, white);
--bs-warning-active-bg: color-mix(in oklch, var(--bs-warning) 75%, white);
--bs-danger: var(--site-error, #EF4444);
--bs-danger-rgb: 239, 68, 68;
--bs-on-danger: #000000;
--bs-danger-hover-bg: color-mix(in oklch, var(--bs-danger) 85%, white);
--bs-danger-active-bg: color-mix(in oklch, var(--bs-danger) 75%, white);
--bs-body-bg: var(--site-bg, #10161B);
--bs-body-bg-rgb: 16, 22, 27;
--bs-body-color: var(--site-text, #E1F1FF);
--bs-body-color-rgb: 225, 241, 255;
--bs-emphasis-color: var(--site-text, #E1F1FF);
--bs-emphasis-color-rgb: 225, 241, 255;
--bs-secondary-color: var(--site-muted, #A3B4C1);
--bs-secondary-color-rgb: 163, 180, 193;
--bs-tertiary-color: var(--site-muted, #A3B4C1);
--bs-tertiary-color-rgb: 163, 180, 193;
--bs-secondary-bg: var(--site-surface, #1B2227);
--bs-secondary-bg-rgb: 27, 34, 39;
--bs-tertiary-bg: var(--site-surface, #1B2227);
--bs-tertiary-bg-rgb: 27, 34, 39;
--bs-border-color: var(--site-border, #343B40);
--bs-link-color-rgb: 214, 133, 193;
--bs-link-hover-color: #D685C1;
--bs-link-hover-color-rgb: 214, 133, 193;
--site-primary-text: #D685C1;
--color-primary-text: #D685C1;
--bs-primary-text: #D685C1;
--site-secondary-text: #9A8092;
--color-secondary-text: #9A8092;
--bs-secondary-text: #9A8092;
--site-accent-text: #B594D6;
--color-accent-text: #B594D6;
--bs-accent-text: #B594D6;
--site-indicator: #D685C1;
--color-indicator: #D685C1;
--bs-indicator: #D685C1;
}
}
.btn-primary { --bs-btn-color: var(--bs-on-primary); --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-on-primary); --bs-btn-hover-bg: var(--bs-primary-hover-bg); --bs-btn-hover-border-color: var(--bs-primary-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-on-primary); --bs-btn-active-bg: var(--bs-primary-active-bg); --bs-btn-active-border-color: var(--bs-primary-active-bg); --bs-btn-disabled-color: var(--bs-on-primary); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); }
.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-on-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-on-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); }
.text-bg-primary { color: var(--bs-on-primary) !important; background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-primary { color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-primary:hover, .link-primary:focus { color: color-mix(in oklch, var(--bs-primary) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-secondary { --bs-btn-color: var(--bs-on-secondary); --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--bs-on-secondary); --bs-btn-hover-bg: var(--bs-secondary-hover-bg); --bs-btn-hover-border-color: var(--bs-secondary-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-active-color: var(--bs-on-secondary); --bs-btn-active-bg: var(--bs-secondary-active-bg); --bs-btn-active-border-color: var(--bs-secondary-active-bg); --bs-btn-disabled-color: var(--bs-on-secondary); --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); }
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--bs-on-secondary); --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-active-color: var(--bs-on-secondary); --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); --bs-btn-disabled-color: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); }
.text-bg-secondary { color: var(--bs-on-secondary) !important; background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-secondary { color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-secondary:hover, .link-secondary:focus { color: color-mix(in oklch, var(--bs-secondary) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-success { --bs-btn-color: var(--bs-on-success); --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-color: var(--bs-on-success); --bs-btn-hover-bg: var(--bs-success-hover-bg); --bs-btn-hover-border-color: var(--bs-success-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); --bs-btn-active-color: var(--bs-on-success); --bs-btn-active-bg: var(--bs-success-active-bg); --bs-btn-active-border-color: var(--bs-success-active-bg); --bs-btn-disabled-color: var(--bs-on-success); --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); }
.btn-outline-success { --bs-btn-color: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-color: var(--bs-on-success); --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); --bs-btn-active-color: var(--bs-on-success); --bs-btn-active-bg: var(--bs-success); --bs-btn-active-border-color: var(--bs-success); --bs-btn-disabled-color: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); }
.text-bg-success { color: var(--bs-on-success) !important; background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-success { color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-success:hover, .link-success:focus { color: color-mix(in oklch, var(--bs-success) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-info { --bs-btn-color: var(--bs-on-info); --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-color: var(--bs-on-info); --bs-btn-hover-bg: var(--bs-info-hover-bg); --bs-btn-hover-border-color: var(--bs-info-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); --bs-btn-active-color: var(--bs-on-info); --bs-btn-active-bg: var(--bs-info-active-bg); --bs-btn-active-border-color: var(--bs-info-active-bg); --bs-btn-disabled-color: var(--bs-on-info); --bs-btn-disabled-bg: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); }
.btn-outline-info { --bs-btn-color: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-color: var(--bs-on-info); --bs-btn-hover-bg: var(--bs-info); --bs-btn-hover-border-color: var(--bs-info); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); --bs-btn-active-color: var(--bs-on-info); --bs-btn-active-bg: var(--bs-info); --bs-btn-active-border-color: var(--bs-info); --bs-btn-disabled-color: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); }
.text-bg-info { color: var(--bs-on-info) !important; background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-info { color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-info:hover, .link-info:focus { color: color-mix(in oklch, var(--bs-info) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-warning { --bs-btn-color: var(--bs-on-warning); --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-color: var(--bs-on-warning); --bs-btn-hover-bg: var(--bs-warning-hover-bg); --bs-btn-hover-border-color: var(--bs-warning-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb); --bs-btn-active-color: var(--bs-on-warning); --bs-btn-active-bg: var(--bs-warning-active-bg); --bs-btn-active-border-color: var(--bs-warning-active-bg); --bs-btn-disabled-color: var(--bs-on-warning); --bs-btn-disabled-bg: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); }
.btn-outline-warning { --bs-btn-color: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-color: var(--bs-on-warning); --bs-btn-hover-bg: var(--bs-warning); --bs-btn-hover-border-color: var(--bs-warning); --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb); --bs-btn-active-color: var(--bs-on-warning); --bs-btn-active-bg: var(--bs-warning); --bs-btn-active-border-color: var(--bs-warning); --bs-btn-disabled-color: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); }
.text-bg-warning { color: var(--bs-on-warning) !important; background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-warning { color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-warning:hover, .link-warning:focus { color: color-mix(in oklch, var(--bs-warning) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-danger { --bs-btn-color: var(--bs-on-danger); --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: var(--bs-on-danger); --bs-btn-hover-bg: var(--bs-danger-hover-bg); --bs-btn-hover-border-color: var(--bs-danger-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-active-color: var(--bs-on-danger); --bs-btn-active-bg: var(--bs-danger-active-bg); --bs-btn-active-border-color: var(--bs-danger-active-bg); --bs-btn-disabled-color: var(--bs-on-danger); --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); }
.btn-outline-danger { --bs-btn-color: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: var(--bs-on-danger); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-active-color: var(--bs-on-danger); --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); --bs-btn-disabled-color: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); }
.text-bg-danger { color: var(--bs-on-danger) !important; background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-danger { color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-danger:hover, .link-danger:focus { color: color-mix(in oklch, var(--bs-danger) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: color-mix(in oklch, var(--bs-primary) 50%, var(--bs-body-bg)); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); }
.nav-pills { --bs-nav-pills-link-active-color: var(--bs-on-primary); --bs-nav-pills-link-active-bg: var(--bs-primary); }
.pagination { --bs-pagination-active-color: var(--bs-on-primary); --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); }
.progress, .progress-stacked { --bs-progress-bar-color: var(--bs-on-primary); --bs-progress-bar-bg: var(--bs-primary); }
.list-group { --bs-list-group-active-color: var(--bs-on-primary); --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-color: var(--bs-on-primary); --bs-dropdown-link-active-bg: var(--bs-primary); }
.text-primary, .link-primary, .link-primary:hover, .link-primary:focus { color: var(--bs-primary-text) !important; text-decoration-color: currentcolor !important; }
.btn-outline-primary { --bs-btn-color: var(--bs-primary-text); --bs-btn-border-color: var(--bs-primary-text); }
.text-secondary, .link-secondary, .link-secondary:hover, .link-secondary:focus { color: var(--bs-secondary-text) !important; text-decoration-color: currentcolor !important; }
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary-text); --bs-btn-border-color: var(--bs-secondary-text); }
:where(a,button,input,textarea,select,[tabindex]):focus-visible { outline: 2px solid var(--bs-indicator); outline-offset: 2px; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--bs-indicator); }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { border-color: var(--bs-indicator); }
/* index.html */
/* Home panels keep the shared dark, tonal identity while giving each moment its own layout. */
.home-panel {
min-height: 100svh;
height: auto;
}
.home-panel .inner {
width: min(1200px, 100%);
padding: clamp(4.5rem, 8vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
}
.home-hero-content {
max-width: 850px;
padding-top: clamp(2rem, 7vh, 5rem);
}
.home-hero-title {
max-width: 12ch;
margin: 0 0 1.25rem;
}
.home-lede {
max-width: 38ch;
margin: 0 0 1.75rem;
color: var(--panel-muted);
font-size: clamp(1.15rem, 1.8vw, 1.5rem);
font-weight: 300;
}
.home-hero-photo,
.home-about-photo {
position: absolute;
z-index: -2;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.home-games-panel {
background:
radial-gradient(ellipse at 78% 16%, rgba(172, 82, 151, 0.24), transparent 48%),
linear-gradient(135deg, #10161B 0%, #1B2227 58%, #12070F 100%);
}
.home-games-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
align-items: center;
}
.home-feature-visual {
position: relative;
}
.home-feature-image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border: 1px solid var(--site-border);
border-radius: 8px;
}
.home-feature-caption {
position: absolute;
right: 1rem;
bottom: 1rem;
left: 1rem;
padding: 0.85rem 1rem;
border: 1px solid rgba(202, 208, 213, 0.55);
border-radius: 8px;
background: rgba(16, 22, 27, 0.82);
color: var(--panel-text);
backdrop-filter: blur(8px);
}
.home-feature-caption strong {
display: block;
font-family: 'Lora', Georgia, serif;
font-size: 1.1rem;
}
.home-feature-caption span {
color: var(--panel-muted);
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.home-games-copy h2,
.home-about-copy h2,
.home-community-copy h2 {
margin: 0 0 1rem;
}
.home-games-intro {
margin: 0 0 1.25rem;
color: var(--panel-muted);
font-size: 0.98rem;
}
.home-games-intro a {
color: var(--panel-accent);
text-decoration-color: rgba(214, 133, 193, 0.55);
text-underline-offset: 0.2em;
}
.home-game-list {
display: grid;
gap: 0.65rem;
margin: 0;
padding: 0;
list-style: none;
}
.home-game-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-width: 0;
padding: 0.85rem 1rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background: rgba(27, 34, 39, 0.55);
color: var(--panel-text);
transition: border-color 0.2s ease;
}
.home-game-row:hover {
border-color: var(--panel-accent);
}
.home-game-name {
overflow: hidden;
font-size: 0.95rem;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-game-genre {
flex: 0 0 auto;
color: var(--panel-muted);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
.home-about-panel {
background: linear-gradient(135deg, #10161B 0%, #2E1729 54%, #12070F 100%);
}
.home-about-copy {
max-width: 780px;
}
.home-about-copy p {
max-width: 68ch;
margin: 0;
color: var(--panel-muted);
font-size: 1rem;
line-height: 1.85;
}
.home-stats {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-top: 2rem;
}
.home-stat {
min-width: 135px;
}
.home-stat-number {
display: block;
color: var(--panel-accent);
font-family: 'Lora', Georgia, serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
line-height: 1;
}
.home-stat-label {
display: block;
margin-top: 0.45rem;
color: var(--panel-muted);
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.home-community-note {
margin-top: 1.5rem !important;
color: var(--panel-text) !important;
}
.home-quote-panel {
background:
radial-gradient(ellipse at 50% 0%, rgba(214, 133, 193, 0.2), transparent 55%),
linear-gradient(160deg, #612C55 0%, #2E1729 52%, #10161B 100%);
}
.home-quote-wrap {
width: min(950px, 100%);
margin: 0 auto;
}
.home-quote-kicker {
margin: 0 0 1.25rem;
color: var(--panel-muted);
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.home-quote {
max-width: 26ch;
margin: 0;
color: var(--panel-text);
font-family: 'Lora', Georgia, serif;
font-size: clamp(1.75rem, 4vw, 3.5rem);
font-weight: 700;
line-height: 1.15;
}
.home-quote-author {
margin: 1.5rem 0 0;
color: var(--panel-text);
font-size: 0.95rem;
}
.home-quote-handle {
display: block;
margin-top: 0.2rem;
color: var(--panel-muted);
font-size: 0.78rem;
letter-spacing: 0.1em;
}
.home-join-panel {
background:
radial-gradient(ellipse at 80% 70%, rgba(136, 104, 166, 0.28), transparent 52%),
linear-gradient(140deg, #12070F 0%, #32202D 46%, #10161B 100%);
}
.home-join-inner {
display: flex;
min-height: 100svh;
flex-direction: column;
}
.home-community-copy {
max-width: 760px;
margin: auto 0;
}
.home-community-copy p {
margin: 0;
color: var(--panel-muted);
font-size: 1.05rem;
}
.home-join-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.25rem;
margin-top: 1.5rem;
}
.home-profile-link {
display: inline-block;
padding: 0.85rem 1.5rem;
border: 1px solid var(--panel-accent);
border-radius: 8px;
color: var(--panel-text);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
text-decoration: none;
text-transform: uppercase;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.home-profile-link:hover {
border-color: var(--panel-accent);
background: rgba(214, 133, 193, 0.14);
color: var(--panel-text);
}
.home-signup-form {
display: flex;
flex: 1 1 360px;
flex-wrap: wrap;
gap: 0.65rem;
max-width: 520px;
}
.home-signup-input {
flex: 1 1 220px;
min-height: 48px;
padding: 0.7rem 0.9rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background: rgba(16, 22, 27, 0.72);
color: var(--panel-text);
font: inherit;
}
.home-signup-input::placeholder {
color: var(--panel-muted);
}
.home-signup-input:focus {
border-color: var(--site-indicator);
outline: 2px solid var(--site-indicator);
outline-offset: 2px;
}
.home-signup-button {
min-height: 48px;
padding: 0.7rem 1.1rem;
border: 1px solid var(--panel-accent);
border-radius: 8px;
background: transparent;
color: var(--panel-text);
font: inherit;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: background-color 0.2s ease;
}
.home-signup-button:hover {
background: rgba(214, 133, 193, 0.14);
}
.home-panel-footer {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
margin-top: auto;
padding-top: 2.5rem;
}
.home-footer-group h3 {
margin: 0 0 0.6rem;
color: var(--panel-text);
font-family: 'Poppins', system-ui, sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.home-footer-group a {
display: block;
width: fit-content;
margin: 0.3rem 0;
color: var(--panel-muted);
font-size: 0.78rem;
text-decoration: none;
}
.home-footer-group a:hover {
color: var(--panel-accent);
}
.home-legal {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.75rem 1.5rem;
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid rgba(202, 208, 213, 0.3);
color: var(--panel-muted);
font-size: 0.7rem;
}
.home-legal-links {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1rem;
}
.home-legal a {
color: var(--panel-muted);
text-decoration: none;
}
.home-legal a:hover {
color: var(--panel-accent);
}
.home-scroll-cue {
position: absolute;
bottom: 2rem;
left: clamp(1.25rem, 5vw, 4rem);
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--panel-muted);
font-size: 0.72rem;
letter-spacing: 0.2em;
text-decoration: none;
text-transform: uppercase;
}
.home-scroll-cue:hover {
color: var(--panel-text);
}
@media (max-width: 991.98px) {
.home-games-grid {
grid-template-columns: 1fr;
gap: 1.75rem;
}
.home-games-copy {
max-width: 720px;
}
}
@media (max-width: 768px) {
.home-panel .inner {
padding-top: 5rem;
padding-bottom: 5rem;
}
.home-hero-content {
padding-top: 1rem;
padding-bottom: 2rem;
}
.home-scroll-cue {
bottom: 1.25rem;
}
.home-panel-footer {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-join-inner {
min-height: 100svh;
}
}
@media (max-width: 480px) {
.home-join-actions,
.home-signup-form {
align-items: stretch;
flex-direction: column;
}
.home-profile-link,
.home-signup-button,
.home-signup-input {
width: 100%;
}
.home-panel-footer {
grid-template-columns: 1fr;
}
.home-legal {
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
.home-game-row,
.home-profile-link,
.home-signup-button {
transition: none;
}
}
/* index.html */
/* Footer-scoped styles. The footer continues the dark tonal surface of
the final page panel so the last screen reads as one unit. */
.site-footer {
background-image: radial-gradient(circle at 78% 22%, hsl(268 44% 42% / 0.35) 0%, transparent 60%), linear-gradient(160deg, #12070F 0%, #1B2227 55%, #10161B 100%);
color: #E1F1FF;
border-top: 1px solid rgba(214, 133, 193, 0.28);
padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 1.5rem;
font-weight: 300;
}
.footer-wrap {
max-width: 1200px;
margin: 0 auto;
}
.footer-brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: #E1F1FF;
text-decoration: none;
}
.footer-brand-icon {
font-size: 1.8rem;
color: #D685C1;
}
.footer-brand-name {
font-family: 'Lora', Georgia, serif;
font-size: 1.15rem;
font-weight: 600;
}
.footer-blurb {
max-width: 34ch;
margin: 0.75rem 0 0;
color: #A3B4C1;
font-size: 0.9rem;
}
.footer-heading {
margin: 0 0 1rem;
font-family: 'Lora', Georgia, serif;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #D685C1;
}
.footer-list {
display: grid;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.9rem;
}
.footer-list a {
color: #A3B4C1;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-list a:hover,
.footer-list a:focus-visible {
color: #E1F1FF;
border-bottom-color: #D685C1;
}
.footer-icon {
margin-right: 0.45rem;
font-size: 1.05rem;
vertical-align: -3px;
color: #B594D6;
}
.footer-social {
display: flex;
gap: 0.6rem;
margin-top: 1rem;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid #343B40;
border-radius: 8px;
color: #A3B4C1;
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
border-color: #D685C1;
color: #E1F1FF;
}
.footer-legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 2.25rem;
padding-top: 1.25rem;
border-top: 1px solid #343B40;
}
.footer-copy {
margin: 0;
color: #A3B4C1;
font-size: 0.8rem;
}
.footer-legal-links {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.8rem;
}
.footer-legal-links a {
color: #A3B4C1;
text-decoration: none;
}
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
color: #E1F1FF;
}
/* Cookie consent banner: neutral dark surface, fixed to the viewport */
.cookie-banner {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1080;
padding: 0.9rem 0;
background: #1B2227;
border-top: 1px solid #343B40;
color: #E1F1FF;
}
.cookie-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 5vw, 4rem);
}
.cookie-text {
max-width: 70ch;
font-size: 0.85rem;
color: #A3B4C1;
}
.cookie-btn {
background: transparent;
border: 1px solid #D685C1;
border-radius: 8px;
color: #D685C1;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.cookie-btn:hover,
.cookie-btn:focus-visible {
background: #D685C1;
border-color: #D685C1;
color: #000000;
}
/* game-library.html */
/* ==================================================================
Playtime Zone global stylesheet
1) Palette tokens 2) Base typography 3) Snap-panel scaffold
4) Site header + dot rail 5) Reusable panel helpers
================================================================== */
/* --- 1) Palette tokens: light theme is the default ----------------- */
:root {
--site-bg: #F1F8FD;
--site-surface: #F6FBFF;
--site-text: #121C23;
--site-muted: #4C575F;
--site-border: #CAD0D5;
--site-primary: #AC5297;
--site-on-primary: #FFFFFF;
--site-secondary: #F6E1EF;
--site-on-secondary: #000000;
--site-accent: #8868A6;
--site-on-accent: #FFFFFF;
--site-success: #22C55E;
--site-warning: #F59E0B;
--site-error: #EF4444;
--site-info: #3B82F6;
/* Readable foreground roles for links, small text and icons */
--site-primary-text: #AB5196;
--site-secondary-text: #7E6B78;
--site-accent-text: #8464A2;
--site-indicator: #AB5196;
/* Tonal depth roles used for selected moments and tonal panels */
--site-tonal-bg: #FFEEF9;
--site-tonal-surface: #F3D3E9;
--site-tonal-panel: #DFA0CE;
--site-on-tonal-panel: #000000;
--site-category-0: #F6DEEF;
--site-category-1: #EAC4DE;
--site-on-category-0: #000000;
--site-on-category-1: #000000;
--site-tonal-text: #121C23;
--site-tonal-primary-text: #973F84;
--site-tonal-indicator: #AB5196;
/* Compatibility aliases so both naming styles resolve */
--color-bg: var(--site-bg);
--color-surface: var(--site-surface);
--color-text: var(--site-text);
--color-muted: var(--site-muted);
--color-border: var(--site-border);
--color-primary: var(--site-primary);
--color-on-primary: var(--site-on-primary);
--color-secondary: var(--site-secondary);
--color-on-secondary: var(--site-on-secondary);
--color-accent: var(--site-accent);
--color-on-accent: var(--site-on-accent);
--color-primary-text: var(--site-primary-text);
--color-secondary-text: var(--site-secondary-text);
--color-accent-text: var(--site-accent-text);
--color-indicator: var(--site-indicator);
--color-tonal-bg: var(--site-tonal-bg);
--color-tonal-surface: var(--site-tonal-surface);
--color-tonal-panel: var(--site-tonal-panel);
--color-tonal-text: var(--site-tonal-text);
--color-success: var(--site-success);
--color-warning: var(--site-warning);
--color-error: var(--site-error);
--color-info: var(--site-info);
/* Full-bleed panels sit over dark artwork, so they always use the
dark-side text roles regardless of the visitor colour scheme. */
--panel-text: #E1F1FF;
--panel-muted: #A3B4C1;
--panel-accent: #D685C1;
--panel-tint: #12070F;
}
/* --- Dark variant driven by the visitor OS preference ------------- */
@media (prefers-color-scheme: dark) {
:root {
--site-bg: #10161B;
--site-surface: #1B2227;
--site-text: #E1F1FF;
--site-muted: #A3B4C1;
--site-border: #343B40;
--site-primary: #D685C1;
--site-on-primary: #000000;
--site-secondary: #3B2635;
--site-on-secondary: #FFFFFF;
--site-accent: #B594D6;
--site-on-accent: #000000;
--site-primary-text: #D685C1;
--site-secondary-text: #9A8092;
--site-accent-text: #B594D6;
--site-indicator: #D685C1;
--site-tonal-bg: #12070F;
--site-tonal-surface: #2E1729;
--site-tonal-panel: #612C55;
--site-on-tonal-panel: #FFFFFF;
--site-category-0: #32202D;
--site-category-1: #4A2C42;
--site-on-category-0: #FFFFFF;
--site-on-category-1: #FFFFFF;
--site-tonal-text: #E1F1FF;
--site-tonal-primary-text: #D685C1;
--site-tonal-indicator: #D685C1;
}
}
/* --- 2) Base typography ------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html.snap {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
body {
margin: 0;
background-color: var(--site-bg);
color: var(--site-text);
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-weight: 300;
line-height: 1.65;
}
h1,
h2,
h3,
h4 {
font-family: 'Lora', Georgia, 'Times New Roman', serif;
font-weight: 700;
letter-spacing: -0.01em;
}
h1 {
font-size: clamp(3rem, 9vw, 8rem);
line-height: 0.95;
}
h2 {
font-size: clamp(2.5rem, 6vw, 5.5rem);
line-height: 1;
}
.lede {
font-size: clamp(1.15rem, 1.8vw, 1.5rem);
font-weight: 300;
max-width: 38ch;
color: var(--panel-muted);
}
a {
color: var(--site-primary-text);
}
:focus-visible {
outline: 2px solid var(--site-indicator);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
html.snap {
scroll-behavior: auto;
}
}
/* --- 3) Snap-panel scaffold --------------------------------------- */
.panel {
min-height: 100vh;
min-height: 100svh;
height: auto;
scroll-snap-align: start;
position: relative;
display: grid;
align-items: center;
overflow: visible;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
isolation: isolate;
color: var(--panel-text);
}
/* Tonal scrim keeps text legible over every full-bleed background */
.panel::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16, 22, 27, 0.76) 0%, rgba(18, 7, 15, 0.88) 100%);
z-index: -1;
}
.inner {
width: min(1200px, 100%);
margin: 0 auto;
padding: clamp(4rem, 10vh, 8rem) clamp(1.25rem, 5vw, 4rem);
}
/* Distinct full-bleed backgrounds per panel. Page bodies may layer a
game-art image on top by adding background-image in an inline style. */
.bg-1 {
background-image: radial-gradient(circle at 18% 22%, hsl(310 55% 42% / 0.55) 0%, transparent 55%), radial-gradient(circle at 82% 78%, hsl(268 48% 40% / 0.5) 0%, transparent 60%), linear-gradient(150deg, #10161B 0%, #1B2227 45%, #12070F 100%);
}
.bg-2 {
background-image: radial-gradient(circle at 78% 18%, hsl(286 45% 40% / 0.5) 0%, transparent 58%), linear-gradient(120deg, #12070F 0%, #1B2227 60%, #10161B 100%);
}
.bg-3 {
background-image: radial-gradient(circle at 22% 72%, hsl(322 42% 46% / 0.45) 0%, transparent 60%), linear-gradient(200deg, #10161B 0%, #2E1729 55%, #12070F 100%);
}
.bg-4 {
background-image: radial-gradient(circle at 50% 12%, hsl(310 48% 44% / 0.4) 0%, transparent 62%), linear-gradient(160deg, #612C55 0%, #2E1729 48%, #10161B 100%);
}
.bg-5 {
background-image: radial-gradient(circle at 72% 68%, hsl(268 44% 42% / 0.5) 0%, transparent 60%), linear-gradient(140deg, #12070F 0%, #32202D 40%, #10161B 100%);
}
/* --- 4) Site header and fixed dot rail ---------------------------- */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 1035;
}
.site-navbar {
background: linear-gradient(180deg, rgba(16, 22, 27, 0.94) 0%, rgba(16, 22, 27, 0.66) 100%);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(214, 133, 193, 0.28);
}
.site-nav-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
max-width: 1400px;
margin: 0 auto;
padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
position: relative;
}
.brand-lockup {
display: flex;
align-items: center;
gap: 0.7rem;
text-decoration: none;
}
.brand-icon {
font-size: 1.9rem;
color: var(--panel-accent);
}
.brand-name {
display: block;
font-family: 'Lora', Georgia, serif;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.1;
color: var(--panel-text);
}
.brand-tagline {
display: block;
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--panel-muted);
}
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.5rem;
background: transparent;
border: 1px solid rgba(214, 133, 193, 0.45);
border-radius: 8px;
color: var(--panel-text);
line-height: 1;
}
.nav-toggle:hover {
border-color: var(--panel-accent);
color: var(--panel-accent);
}
.nav-menu {
display: none;
}
.nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 1.5rem;
}
.top-nav-link {
color: var(--panel-muted);
text-decoration: none;
font-size: 0.8rem;
font-weight: 400;
letter-spacing: 0.07em;
text-transform: uppercase;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.top-nav-link:hover,
.top-nav-link:focus-visible {
color: var(--panel-text);
border-bottom-color: var(--panel-accent);
}
/* Mobile: the menu drops below the bar and is revealed by the toggle */
@media (max-width: 991.98px) {
.nav-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 1rem clamp(1rem, 5vw, 2rem) 1.5rem;
background: rgba(16, 22, 27, 0.97);
border-bottom: 1px solid var(--site-border);
backdrop-filter: blur(16px);
}
.nav-menu.is-open {
display: flex;
}
.nav-list {
flex-direction: column;
align-items: flex-start;
gap: 0.9rem;
width: 100%;
margin-bottom: 1.25rem;
}
.top-nav-link {
font-size: 0.85rem;
}
}
/* Desktop: menu is always visible and the toggle disappears */
@media (min-width: 992px) {
.nav-menu {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-toggle {
display: none;
}
}
.rail {
position: fixed;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
display: grid;
gap: 0.75rem;
z-index: 1040;
}
.dot {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid currentColor;
color: var(--panel-text);
opacity: 0.6;
transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.dot:hover,
.dot:focus-visible {
opacity: 1;
border-color: var(--panel-accent);
transform: scale(1.15);
}
/* On small or short screens snapping relaxes and the rail is removed */
@media (max-width: 768px), (max-height: 640px) {
html.snap {
scroll-snap-type: y proximity;
}
.rail {
display: none;
}
}
/* --- 5) Reusable panel helpers ------------------------------------ */
.cta {
display: inline-block;
padding: 0.85rem 2rem;
background: transparent;
border: 1px solid var(--panel-accent);
border-radius: 8px;
color: var(--panel-text);
font-family: 'Poppins', sans-serif;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.cta:hover,
.cta:focus-visible {
border-color: var(--panel-accent);
background-color: rgba(214, 133, 193, 0.14);
color: var(--panel-text);
}
.cta-header {
font-size: 0.72rem;
padding: 0.6rem 1.35rem;
}
.scroll-cue {
position: absolute;
bottom: 2rem;
left: clamp(1.25rem, 5vw, 4rem);
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--panel-muted);
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
}
.scroll-cue:hover {
color: var(--panel-text);
}
/* Two-column content grid: one featured visual plus a supporting list */
.two-col {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
align-items: center;
}
@media (max-width: 991.98px) {
.two-col {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.feature-media {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border: 1px solid var(--site-border);
border-radius: 8px;
display: block;
}
/* Thin-bordered selector list rows: no shadow, border shifts on hover */
.feature-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background-color: rgba(27, 34, 39, 0.5);
transition: border-color 0.25s ease;
}
.feature-item:hover {
border-color: var(--panel-accent);
}
.feature-name {
color: var(--panel-text);
font-size: 1rem;
font-weight: 400;
}
.feature-tag {
color: var(--panel-muted);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
}
.stat-row {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-top: 2rem;
}
.stat-number {
display: block;
font-family: 'Lora', Georgia, serif;
font-weight: 700;
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1;
color: var(--panel-accent);
}
.stat-label {
display: block;
margin-top: 0.4rem;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--panel-muted);
}
.pull-quote {
font-family: 'Lora', Georgia, serif;
font-weight: 700;
font-size: clamp(1.75rem, 4vw, 3.5rem);
line-height: 1.15;
color: var(--panel-text);
max-width: 26ch;
margin: 0;
}
.quote-author {
margin-top: 1.5rem;
font-size: 0.9rem;
color: var(--panel-text);
}
.quote-handle {
display: block;
color: var(--panel-muted);
font-size: 0.78rem;
letter-spacing: 0.1em;
}
/* Glass icon tile: only used over busy or coloured backdrops */
.glass-tile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 14px;
}
.glass-tile .material-symbols-outlined {
font-size: 1.6rem;
color: var(--panel-text);
}
.panel-card {
background-color: rgba(27, 34, 39, 0.55);
border: 1px solid var(--site-border);
border-radius: 8px;
backdrop-filter: blur(8px);
transition: border-color 0.25s ease;
}
.panel-card:hover {
border-color: var(--panel-accent);
}
.panel-note {
color: var(--panel-muted);
font-size: 0.9rem;
}
/* Signup field used in the closing CTA panels */
.signup-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
max-width: 520px;
}
.signup-input {
flex: 1 1 240px;
min-height: 48px;
padding: 0.75rem 1rem;
background: rgba(16, 22, 27, 0.6);
border: 1px solid var(--site-border);
border-radius: 8px;
color: var(--panel-text);
font-family: 'Poppins', sans-serif;
font-size: 0.95rem;
}
.signup-input::placeholder {
color: var(--panel-muted);
}
.signup-input:focus {
border-color: var(--site-indicator);
outline: none;
}
/* game-library.html */
:root {
--bs-primary: var(--site-primary, #AC5297);
--bs-primary-rgb: 172, 82, 151;
--bs-on-primary: var(--site-on-primary, #FFFFFF);
--bs-primary-hover-bg: color-mix(in oklch, var(--bs-primary) 85%, black);
--bs-primary-active-bg: color-mix(in oklch, var(--bs-primary) 75%, black);
--bs-secondary: var(--site-secondary, #F6E1EF);
--bs-secondary-rgb: 246, 225, 239;
--bs-on-secondary: var(--site-on-secondary, #000000);
--bs-secondary-hover-bg: color-mix(in oklch, var(--bs-secondary) 85%, white);
--bs-secondary-active-bg: color-mix(in oklch, var(--bs-secondary) 75%, white);
--bs-success: var(--site-success, #22C55E);
--bs-success-rgb: 34, 197, 94;
--bs-on-success: #000000;
--bs-success-hover-bg: color-mix(in oklch, var(--bs-success) 85%, white);
--bs-success-active-bg: color-mix(in oklch, var(--bs-success) 75%, white);
--bs-info: var(--site-info, #3B82F6);
--bs-info-rgb: 59, 130, 246;
--bs-on-info: #000000;
--bs-info-hover-bg: color-mix(in oklch, var(--bs-info) 85%, white);
--bs-info-active-bg: color-mix(in oklch, var(--bs-info) 75%, white);
--bs-warning: var(--site-warning, #F59E0B);
--bs-warning-rgb: 245, 158, 11;
--bs-on-warning: #000000;
--bs-warning-hover-bg: color-mix(in oklch, var(--bs-warning) 85%, white);
--bs-warning-active-bg: color-mix(in oklch, var(--bs-warning) 75%, white);
--bs-danger: var(--site-error, #EF4444);
--bs-danger-rgb: 239, 68, 68;
--bs-on-danger: #000000;
--bs-danger-hover-bg: color-mix(in oklch, var(--bs-danger) 85%, white);
--bs-danger-active-bg: color-mix(in oklch, var(--bs-danger) 75%, white);
--bs-body-bg: var(--site-bg, #F1F8FD);
--bs-body-bg-rgb: 241, 248, 253;
--bs-body-color: var(--site-text, #121C23);
--bs-body-color-rgb: 18, 28, 35;
--bs-emphasis-color: var(--site-text, #121C23);
--bs-emphasis-color-rgb: 18, 28, 35;
--bs-secondary-color: var(--site-muted, #4C575F);
--bs-secondary-color-rgb: 76, 87, 95;
--bs-tertiary-color: var(--site-muted, #4C575F);
--bs-tertiary-color-rgb: 76, 87, 95;
--bs-secondary-bg: var(--site-surface, #F6FBFF);
--bs-secondary-bg-rgb: 246, 251, 255;
--bs-tertiary-bg: var(--site-surface, #F6FBFF);
--bs-tertiary-bg-rgb: 246, 251, 255;
--bs-border-color: var(--site-border, #CAD0D5);
--bs-link-color-rgb: 171, 81, 150;
--bs-link-hover-color: #AB5196;
--bs-link-hover-color-rgb: 171, 81, 150;
--site-primary-text: #AB5196;
--color-primary-text: #AB5196;
--bs-primary-text: #AB5196;
--site-secondary-text: #7E6B78;
--color-secondary-text: #7E6B78;
--bs-secondary-text: #7E6B78;
--site-accent-text: #8464A2;
--color-accent-text: #8464A2;
--bs-accent-text: #8464A2;
--site-indicator: #AB5196;
--color-indicator: #AB5196;
--bs-indicator: #AB5196;
--bs-link-color: var(--bs-primary-text, var(--bs-primary));
--bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
--bs-primary-text-emphasis: color-mix(in oklch, var(--bs-primary) 60%, var(--bs-body-color));
--bs-primary-bg-subtle: color-mix(in oklch, var(--bs-primary) 15%, var(--bs-body-bg));
--bs-primary-border-subtle: color-mix(in oklch, var(--bs-primary) 40%, var(--bs-body-bg));
--bs-secondary-text-emphasis: color-mix(in oklch, var(--bs-secondary) 60%, var(--bs-body-color));
--bs-secondary-bg-subtle: color-mix(in oklch, var(--bs-secondary) 15%, var(--bs-body-bg));
--bs-secondary-border-subtle: color-mix(in oklch, var(--bs-secondary) 40%, var(--bs-body-bg));
}
@media (prefers-color-scheme: dark) {
:root {
--bs-primary: var(--site-primary, #D685C1);
--bs-primary-rgb: 214, 133, 193;
--bs-on-primary: var(--site-on-primary, #000000);
--bs-primary-hover-bg: color-mix(in oklch, var(--bs-primary) 85%, white);
--bs-primary-active-bg: color-mix(in oklch, var(--bs-primary) 75%, white);
--bs-secondary: var(--site-secondary, #3B2635);
--bs-secondary-rgb: 59, 38, 53;
--bs-on-secondary: var(--site-on-secondary, #FFFFFF);
--bs-secondary-hover-bg: color-mix(in oklch, var(--bs-secondary) 85%, black);
--bs-secondary-active-bg: color-mix(in oklch, var(--bs-secondary) 75%, black);
--bs-success: var(--site-success, #22C55E);
--bs-success-rgb: 34, 197, 94;
--bs-on-success: #000000;
--bs-success-hover-bg: color-mix(in oklch, var(--bs-success) 85%, white);
--bs-success-active-bg: color-mix(in oklch, var(--bs-success) 75%, white);
--bs-info: var(--site-info, #3B82F6);
--bs-info-rgb: 59, 130, 246;
--bs-on-info: #000000;
--bs-info-hover-bg: color-mix(in oklch, var(--bs-info) 85%, white);
--bs-info-active-bg: color-mix(in oklch, var(--bs-info) 75%, white);
--bs-warning: var(--site-warning, #F59E0B);
--bs-warning-rgb: 245, 158, 11;
--bs-on-warning: #000000;
--bs-warning-hover-bg: color-mix(in oklch, var(--bs-warning) 85%, white);
--bs-warning-active-bg: color-mix(in oklch, var(--bs-warning) 75%, white);
--bs-danger: var(--site-error, #EF4444);
--bs-danger-rgb: 239, 68, 68;
--bs-on-danger: #000000;
--bs-danger-hover-bg: color-mix(in oklch, var(--bs-danger) 85%, white);
--bs-danger-active-bg: color-mix(in oklch, var(--bs-danger) 75%, white);
--bs-body-bg: var(--site-bg, #10161B);
--bs-body-bg-rgb: 16, 22, 27;
--bs-body-color: var(--site-text, #E1F1FF);
--bs-body-color-rgb: 225, 241, 255;
--bs-emphasis-color: var(--site-text, #E1F1FF);
--bs-emphasis-color-rgb: 225, 241, 255;
--bs-secondary-color: var(--site-muted, #A3B4C1);
--bs-secondary-color-rgb: 163, 180, 193;
--bs-tertiary-color: var(--site-muted, #A3B4C1);
--bs-tertiary-color-rgb: 163, 180, 193;
--bs-secondary-bg: var(--site-surface, #1B2227);
--bs-secondary-bg-rgb: 27, 34, 39;
--bs-tertiary-bg: var(--site-surface, #1B2227);
--bs-tertiary-bg-rgb: 27, 34, 39;
--bs-border-color: var(--site-border, #343B40);
--bs-link-color-rgb: 214, 133, 193;
--bs-link-hover-color: #D685C1;
--bs-link-hover-color-rgb: 214, 133, 193;
--site-primary-text: #D685C1;
--color-primary-text: #D685C1;
--bs-primary-text: #D685C1;
--site-secondary-text: #9A8092;
--color-secondary-text: #9A8092;
--bs-secondary-text: #9A8092;
--site-accent-text: #B594D6;
--color-accent-text: #B594D6;
--bs-accent-text: #B594D6;
--site-indicator: #D685C1;
--color-indicator: #D685C1;
--bs-indicator: #D685C1;
}
}
.btn-primary { --bs-btn-color: var(--bs-on-primary); --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-on-primary); --bs-btn-hover-bg: var(--bs-primary-hover-bg); --bs-btn-hover-border-color: var(--bs-primary-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-on-primary); --bs-btn-active-bg: var(--bs-primary-active-bg); --bs-btn-active-border-color: var(--bs-primary-active-bg); --bs-btn-disabled-color: var(--bs-on-primary); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); }
.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-on-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-on-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); }
.text-bg-primary { color: var(--bs-on-primary) !important; background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-primary { color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-primary:hover, .link-primary:focus { color: color-mix(in oklch, var(--bs-primary) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-secondary { --bs-btn-color: var(--bs-on-secondary); --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--bs-on-secondary); --bs-btn-hover-bg: var(--bs-secondary-hover-bg); --bs-btn-hover-border-color: var(--bs-secondary-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-active-color: var(--bs-on-secondary); --bs-btn-active-bg: var(--bs-secondary-active-bg); --bs-btn-active-border-color: var(--bs-secondary-active-bg); --bs-btn-disabled-color: var(--bs-on-secondary); --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); }
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--bs-on-secondary); --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-active-color: var(--bs-on-secondary); --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); --bs-btn-disabled-color: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); }
.text-bg-secondary { color: var(--bs-on-secondary) !important; background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-secondary { color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-secondary:hover, .link-secondary:focus { color: color-mix(in oklch, var(--bs-secondary) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-success { --bs-btn-color: var(--bs-on-success); --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-color: var(--bs-on-success); --bs-btn-hover-bg: var(--bs-success-hover-bg); --bs-btn-hover-border-color: var(--bs-success-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); --bs-btn-active-color: var(--bs-on-success); --bs-btn-active-bg: var(--bs-success-active-bg); --bs-btn-active-border-color: var(--bs-success-active-bg); --bs-btn-disabled-color: var(--bs-on-success); --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); }
.btn-outline-success { --bs-btn-color: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-color: var(--bs-on-success); --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); --bs-btn-active-color: var(--bs-on-success); --bs-btn-active-bg: var(--bs-success); --bs-btn-active-border-color: var(--bs-success); --bs-btn-disabled-color: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); }
.text-bg-success { color: var(--bs-on-success) !important; background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-success { color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-success:hover, .link-success:focus { color: color-mix(in oklch, var(--bs-success) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-info { --bs-btn-color: var(--bs-on-info); --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-color: var(--bs-on-info); --bs-btn-hover-bg: var(--bs-info-hover-bg); --bs-btn-hover-border-color: var(--bs-info-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); --bs-btn-active-color: var(--bs-on-info); --bs-btn-active-bg: var(--bs-info-active-bg); --bs-btn-active-border-color: var(--bs-info-active-bg); --bs-btn-disabled-color: var(--bs-on-info); --bs-btn-disabled-bg: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); }
.btn-outline-info { --bs-btn-color: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-color: var(--bs-on-info); --bs-btn-hover-bg: var(--bs-info); --bs-btn-hover-border-color: var(--bs-info); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); --bs-btn-active-color: var(--bs-on-info); --bs-btn-active-bg: var(--bs-info); --bs-btn-active-border-color: var(--bs-info); --bs-btn-disabled-color: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); }
.text-bg-info { color: var(--bs-on-info) !important; background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-info { color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-info:hover, .link-info:focus { color: color-mix(in oklch, var(--bs-info) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-warning { --bs-btn-color: var(--bs-on-warning); --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-color: var(--bs-on-warning); --bs-btn-hover-bg: var(--bs-warning-hover-bg); --bs-btn-hover-border-color: var(--bs-warning-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb); --bs-btn-active-color: var(--bs-on-warning); --bs-btn-active-bg: var(--bs-warning-active-bg); --bs-btn-active-border-color: var(--bs-warning-active-bg); --bs-btn-disabled-color: var(--bs-on-warning); --bs-btn-disabled-bg: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); }
.btn-outline-warning { --bs-btn-color: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-color: var(--bs-on-warning); --bs-btn-hover-bg: var(--bs-warning); --bs-btn-hover-border-color: var(--bs-warning); --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb); --bs-btn-active-color: var(--bs-on-warning); --bs-btn-active-bg: var(--bs-warning); --bs-btn-active-border-color: var(--bs-warning); --bs-btn-disabled-color: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); }
.text-bg-warning { color: var(--bs-on-warning) !important; background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-warning { color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-warning:hover, .link-warning:focus { color: color-mix(in oklch, var(--bs-warning) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-danger { --bs-btn-color: var(--bs-on-danger); --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: var(--bs-on-danger); --bs-btn-hover-bg: var(--bs-danger-hover-bg); --bs-btn-hover-border-color: var(--bs-danger-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-active-color: var(--bs-on-danger); --bs-btn-active-bg: var(--bs-danger-active-bg); --bs-btn-active-border-color: var(--bs-danger-active-bg); --bs-btn-disabled-color: var(--bs-on-danger); --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); }
.btn-outline-danger { --bs-btn-color: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: var(--bs-on-danger); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-active-color: var(--bs-on-danger); --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); --bs-btn-disabled-color: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); }
.text-bg-danger { color: var(--bs-on-danger) !important; background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-danger { color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-danger:hover, .link-danger:focus { color: color-mix(in oklch, var(--bs-danger) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: color-mix(in oklch, var(--bs-primary) 50%, var(--bs-body-bg)); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); }
.nav-pills { --bs-nav-pills-link-active-color: var(--bs-on-primary); --bs-nav-pills-link-active-bg: var(--bs-primary); }
.pagination { --bs-pagination-active-color: var(--bs-on-primary); --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); }
.progress, .progress-stacked { --bs-progress-bar-color: var(--bs-on-primary); --bs-progress-bar-bg: var(--bs-primary); }
.list-group { --bs-list-group-active-color: var(--bs-on-primary); --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-color: var(--bs-on-primary); --bs-dropdown-link-active-bg: var(--bs-primary); }
.text-primary, .link-primary, .link-primary:hover, .link-primary:focus { color: var(--bs-primary-text) !important; text-decoration-color: currentcolor !important; }
.btn-outline-primary { --bs-btn-color: var(--bs-primary-text); --bs-btn-border-color: var(--bs-primary-text); }
.text-secondary, .link-secondary, .link-secondary:hover, .link-secondary:focus { color: var(--bs-secondary-text) !important; text-decoration-color: currentcolor !important; }
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary-text); --bs-btn-border-color: var(--bs-secondary-text); }
:where(a,button,input,textarea,select,[tabindex]):focus-visible { outline: 2px solid var(--bs-indicator); outline-offset: 2px; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--bs-indicator); }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { border-color: var(--bs-indicator); }
/* game-library.html */
.library-panel {
min-height: 100svh;
height: auto;
overflow: visible;
color: var(--panel-text);
}
.library-panel::before {
background: linear-gradient(180deg, rgba(16, 22, 27, 0.72), rgba(18, 7, 15, 0.9));
}
.library-panel .inner {
width: min(1200px, 100%);
padding-top: clamp(6rem, 11vh, 8rem);
padding-bottom: clamp(4rem, 8vh, 6rem);
}
.library-panel h1 {
max-width: 9ch;
margin-bottom: 1.25rem;
font-size: clamp(3rem, 9vw, 8rem);
line-height: 0.95;
font-weight: 700;
}
.library-panel h2 {
margin-bottom: 1rem;
font-size: clamp(2.5rem, 6vw, 5.5rem);
line-height: 1;
font-weight: 700;
}
.library-lede {
max-width: 38ch;
margin-bottom: 1.5rem;
color: var(--panel-muted);
font-size: clamp(1.15rem, 1.8vw, 1.5rem);
font-weight: 300;
}
.library-hero-image,
.library-feature-image {
position: absolute;
z-index: -2;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.library-hero-copy {
max-width: 760px;
}
.library-kicker {
display: inline-block;
margin-bottom: 1rem;
color: var(--panel-accent);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.library-scroll-cue {
position: absolute;
bottom: 2rem;
left: clamp(1.25rem, 5vw, 4rem);
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--panel-muted);
font-size: 0.75rem;
letter-spacing: 0.18em;
text-decoration: none;
text-transform: uppercase;
}
.library-scroll-cue:hover {
color: var(--panel-text);
}
.library-collection-layout,
.library-feature-layout {
display: grid;
grid-template-columns: 1.4fr 1fr;
align-items: center;
gap: 3rem;
}
.library-media-frame {
position: relative;
overflow: hidden;
border: 1px solid var(--site-border);
border-radius: 8px;
aspect-ratio: 4 / 3;
}
.library-media-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.library-media-caption {
position: absolute;
right: 0.85rem;
bottom: 0.85rem;
left: 0.85rem;
padding: 0.65rem 0.8rem;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 8px;
background: rgba(16, 22, 27, 0.82);
color: var(--panel-text);
font-size: 0.8rem;
letter-spacing: 0.04em;
}
.library-collection-list,
.library-title-list {
display: grid;
gap: 0.55rem;
margin: 1.25rem 0 0;
padding: 0;
list-style: none;
}
.library-collection-row,
.library-title-row {
display: flex;
min-height: 48px;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.65rem 0.85rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background: rgba(27, 34, 39, 0.55);
color: var(--panel-text);
transition: border-color 0.2s ease;
}
.library-collection-row:hover,
.library-title-row:hover {
border-color: var(--panel-accent);
}
.library-collection-name,
.library-title-name {
font-size: 0.94rem;
font-weight: 400;
}
.library-row-meta {
display: inline-flex;
align-items: center;
gap: 0.7rem;
color: var(--panel-muted);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.library-genre-tag {
color: var(--panel-accent);
}
.library-note {
margin: 1rem 0 0;
color: var(--panel-muted);
font-size: 0.82rem;
}
.library-feature-layout {
grid-template-columns: 1.1fr 1fr;
}
.library-feature-copy {
margin: 0;
color: var(--panel-muted);
font-size: 0.98rem;
}
.library-title-row {
align-items: flex-start;
flex-direction: column;
justify-content: center;
gap: 0.15rem;
min-height: 66px;
}
.library-community-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 1.25rem;
color: var(--panel-accent);
font-size: 0.86rem;
text-decoration: none;
}
.library-community-link:hover {
color: var(--panel-text);
}
.library-editorial {
max-width: 860px;
margin: 0 auto;
text-align: center;
}
.library-editorial-quote {
max-width: 24ch;
margin: 0 auto 1.15rem;
color: var(--panel-text);
font-family: 'Lora', Georgia, serif;
font-size: clamp(1.75rem, 4vw, 3.5rem);
font-weight: 700;
line-height: 1.15;
}
.library-editorial-note {
max-width: 54ch;
margin: 0 auto;
color: var(--panel-muted);
font-size: 1rem;
}
.library-stat-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2.5rem;
margin-top: 2rem;
}
.library-stat {
min-width: 120px;
}
.library-stat-number {
display: block;
color: var(--panel-accent);
font-family: 'Lora', Georgia, serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
line-height: 1;
}
.library-stat-label {
display: block;
margin-top: 0.45rem;
color: var(--panel-muted);
font-size: 0.72rem;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.library-cta-panel {
display: flex;
min-height: 100svh;
flex-direction: column;
align-items: stretch;
}
.library-cta-panel .inner {
display: flex;
width: min(1200px, 100%);
flex: 1;
flex-direction: column;
justify-content: center;
}
.library-cta-copy {
max-width: 680px;
}
.library-cta-copy p {
max-width: 42ch;
margin-bottom: 1.5rem;
color: var(--panel-muted);
font-size: 1.05rem;
}
.library-panel .cta {
border-color: var(--panel-accent);
color: var(--panel-text);
}
.library-panel .cta:hover,
.library-panel .cta:focus-visible {
background: rgba(214, 133, 193, 0.14);
color: var(--panel-text);
}
.library-resource-nav {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin-top: auto;
padding-top: 2.5rem;
}
.library-resource-nav a {
color: var(--panel-muted);
font-size: 0.76rem;
text-decoration: none;
}
.library-resource-nav a:hover {
color: var(--panel-text);
}
.library-legal {
margin: 1rem 0 0;
padding-top: 0.8rem;
border-top: 1px solid var(--site-border);
color: var(--panel-muted);
font-size: 0.7rem;
}
@media (max-width: 991.98px) {
.library-collection-layout,
.library-feature-layout {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.library-collection-list {
margin-top: 0;
}
}
@media (max-width: 768px) {
.library-panel .inner {
padding-top: 6rem;
padding-bottom: 5rem;
}
.library-collection-row {
width: 100%;
}
.library-resource-nav {
flex-direction: column;
gap: 0.7rem;
align-items: center;
}
.library-legal {
text-align: center;
}
.library-scroll-cue {
display: none;
}
}
/* game-library.html */
/* Footer-scoped styles. The footer continues the dark tonal surface of
the final page panel so the last screen reads as one unit. */
.site-footer {
background-image: radial-gradient(circle at 78% 22%, hsl(268 44% 42% / 0.35) 0%, transparent 60%), linear-gradient(160deg, #12070F 0%, #1B2227 55%, #10161B 100%);
color: #E1F1FF;
border-top: 1px solid rgba(214, 133, 193, 0.28);
padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 1.5rem;
font-weight: 300;
}
.footer-wrap {
max-width: 1200px;
margin: 0 auto;
}
.footer-brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: #E1F1FF;
text-decoration: none;
}
.footer-brand-icon {
font-size: 1.8rem;
color: #D685C1;
}
.footer-brand-name {
font-family: 'Lora', Georgia, serif;
font-size: 1.15rem;
font-weight: 600;
}
.footer-blurb {
max-width: 34ch;
margin: 0.75rem 0 0;
color: #A3B4C1;
font-size: 0.9rem;
}
.footer-heading {
margin: 0 0 1rem;
font-family: 'Lora', Georgia, serif;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #D685C1;
}
.footer-list {
display: grid;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.9rem;
}
.footer-list a {
color: #A3B4C1;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-list a:hover,
.footer-list a:focus-visible {
color: #E1F1FF;
border-bottom-color: #D685C1;
}
.footer-icon {
margin-right: 0.45rem;
font-size: 1.05rem;
vertical-align: -3px;
color: #B594D6;
}
.footer-social {
display: flex;
gap: 0.6rem;
margin-top: 1rem;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid #343B40;
border-radius: 8px;
color: #A3B4C1;
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
border-color: #D685C1;
color: #E1F1FF;
}
.footer-legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 2.25rem;
padding-top: 1.25rem;
border-top: 1px solid #343B40;
}
.footer-copy {
margin: 0;
color: #A3B4C1;
font-size: 0.8rem;
}
.footer-legal-links {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.8rem;
}
.footer-legal-links a {
color: #A3B4C1;
text-decoration: none;
}
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
color: #E1F1FF;
}
/* Cookie consent banner: neutral dark surface, fixed to the viewport */
.cookie-banner {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1080;
padding: 0.9rem 0;
background: #1B2227;
border-top: 1px solid #343B40;
color: #E1F1FF;
}
.cookie-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 5vw, 4rem);
}
.cookie-text {
max-width: 70ch;
font-size: 0.85rem;
color: #A3B4C1;
}
.cookie-btn {
background: transparent;
border: 1px solid #D685C1;
border-radius: 8px;
color: #D685C1;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.cookie-btn:hover,
.cookie-btn:focus-visible {
background: #D685C1;
border-color: #D685C1;
color: #000000;
}
/* community-hub.html */
/* ==================================================================
Playtime Zone global stylesheet
1) Palette tokens 2) Base typography 3) Snap-panel scaffold
4) Site header + dot rail 5) Reusable panel helpers
================================================================== */
/* --- 1) Palette tokens: light theme is the default ----------------- */
:root {
--site-bg: #F1F8FD;
--site-surface: #F6FBFF;
--site-text: #121C23;
--site-muted: #4C575F;
--site-border: #CAD0D5;
--site-primary: #AC5297;
--site-on-primary: #FFFFFF;
--site-secondary: #F6E1EF;
--site-on-secondary: #000000;
--site-accent: #8868A6;
--site-on-accent: #FFFFFF;
--site-success: #22C55E;
--site-warning: #F59E0B;
--site-error: #EF4444;
--site-info: #3B82F6;
/* Readable foreground roles for links, small text and icons */
--site-primary-text: #AB5196;
--site-secondary-text: #7E6B78;
--site-accent-text: #8464A2;
--site-indicator: #AB5196;
/* Tonal depth roles used for selected moments and tonal panels */
--site-tonal-bg: #FFEEF9;
--site-tonal-surface: #F3D3E9;
--site-tonal-panel: #DFA0CE;
--site-on-tonal-panel: #000000;
--site-category-0: #F6DEEF;
--site-category-1: #EAC4DE;
--site-on-category-0: #000000;
--site-on-category-1: #000000;
--site-tonal-text: #121C23;
--site-tonal-primary-text: #973F84;
--site-tonal-indicator: #AB5196;
/* Compatibility aliases so both naming styles resolve */
--color-bg: var(--site-bg);
--color-surface: var(--site-surface);
--color-text: var(--site-text);
--color-muted: var(--site-muted);
--color-border: var(--site-border);
--color-primary: var(--site-primary);
--color-on-primary: var(--site-on-primary);
--color-secondary: var(--site-secondary);
--color-on-secondary: var(--site-on-secondary);
--color-accent: var(--site-accent);
--color-on-accent: var(--site-on-accent);
--color-primary-text: var(--site-primary-text);
--color-secondary-text: var(--site-secondary-text);
--color-accent-text: var(--site-accent-text);
--color-indicator: var(--site-indicator);
--color-tonal-bg: var(--site-tonal-bg);
--color-tonal-surface: var(--site-tonal-surface);
--color-tonal-panel: var(--site-tonal-panel);
--color-tonal-text: var(--site-tonal-text);
--color-success: var(--site-success);
--color-warning: var(--site-warning);
--color-error: var(--site-error);
--color-info: var(--site-info);
/* Full-bleed panels sit over dark artwork, so they always use the
dark-side text roles regardless of the visitor colour scheme. */
--panel-text: #E1F1FF;
--panel-muted: #A3B4C1;
--panel-accent: #D685C1;
--panel-tint: #12070F;
}
/* --- Dark variant driven by the visitor OS preference ------------- */
@media (prefers-color-scheme: dark) {
:root {
--site-bg: #10161B;
--site-surface: #1B2227;
--site-text: #E1F1FF;
--site-muted: #A3B4C1;
--site-border: #343B40;
--site-primary: #D685C1;
--site-on-primary: #000000;
--site-secondary: #3B2635;
--site-on-secondary: #FFFFFF;
--site-accent: #B594D6;
--site-on-accent: #000000;
--site-primary-text: #D685C1;
--site-secondary-text: #9A8092;
--site-accent-text: #B594D6;
--site-indicator: #D685C1;
--site-tonal-bg: #12070F;
--site-tonal-surface: #2E1729;
--site-tonal-panel: #612C55;
--site-on-tonal-panel: #FFFFFF;
--site-category-0: #32202D;
--site-category-1: #4A2C42;
--site-on-category-0: #FFFFFF;
--site-on-category-1: #FFFFFF;
--site-tonal-text: #E1F1FF;
--site-tonal-primary-text: #D685C1;
--site-tonal-indicator: #D685C1;
}
}
/* --- 2) Base typography ------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html.snap {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
body {
margin: 0;
background-color: var(--site-bg);
color: var(--site-text);
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-weight: 300;
line-height: 1.65;
}
h1,
h2,
h3,
h4 {
font-family: 'Lora', Georgia, 'Times New Roman', serif;
font-weight: 700;
letter-spacing: -0.01em;
}
h1 {
font-size: clamp(3rem, 9vw, 8rem);
line-height: 0.95;
}
h2 {
font-size: clamp(2.5rem, 6vw, 5.5rem);
line-height: 1;
}
.lede {
font-size: clamp(1.15rem, 1.8vw, 1.5rem);
font-weight: 300;
max-width: 38ch;
color: var(--panel-muted);
}
a {
color: var(--site-primary-text);
}
:focus-visible {
outline: 2px solid var(--site-indicator);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
html.snap {
scroll-behavior: auto;
}
}
/* --- 3) Snap-panel scaffold --------------------------------------- */
.panel {
min-height: 100vh;
min-height: 100svh;
height: auto;
scroll-snap-align: start;
position: relative;
display: grid;
align-items: center;
overflow: visible;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
isolation: isolate;
color: var(--panel-text);
}
/* Tonal scrim keeps text legible over every full-bleed background */
.panel::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16, 22, 27, 0.76) 0%, rgba(18, 7, 15, 0.88) 100%);
z-index: -1;
}
.inner {
width: min(1200px, 100%);
margin: 0 auto;
padding: clamp(4rem, 10vh, 8rem) clamp(1.25rem, 5vw, 4rem);
}
/* Distinct full-bleed backgrounds per panel. Page bodies may layer a
game-art image on top by adding background-image in an inline style. */
.bg-1 {
background-image: radial-gradient(circle at 18% 22%, hsl(310 55% 42% / 0.55) 0%, transparent 55%), radial-gradient(circle at 82% 78%, hsl(268 48% 40% / 0.5) 0%, transparent 60%), linear-gradient(150deg, #10161B 0%, #1B2227 45%, #12070F 100%);
}
.bg-2 {
background-image: radial-gradient(circle at 78% 18%, hsl(286 45% 40% / 0.5) 0%, transparent 58%), linear-gradient(120deg, #12070F 0%, #1B2227 60%, #10161B 100%);
}
.bg-3 {
background-image: radial-gradient(circle at 22% 72%, hsl(322 42% 46% / 0.45) 0%, transparent 60%), linear-gradient(200deg, #10161B 0%, #2E1729 55%, #12070F 100%);
}
.bg-4 {
background-image: radial-gradient(circle at 50% 12%, hsl(310 48% 44% / 0.4) 0%, transparent 62%), linear-gradient(160deg, #612C55 0%, #2E1729 48%, #10161B 100%);
}
.bg-5 {
background-image: radial-gradient(circle at 72% 68%, hsl(268 44% 42% / 0.5) 0%, transparent 60%), linear-gradient(140deg, #12070F 0%, #32202D 40%, #10161B 100%);
}
/* --- 4) Site header and fixed dot rail ---------------------------- */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 1035;
}
.site-navbar {
background: linear-gradient(180deg, rgba(16, 22, 27, 0.94) 0%, rgba(16, 22, 27, 0.66) 100%);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(214, 133, 193, 0.28);
}
.site-nav-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
max-width: 1400px;
margin: 0 auto;
padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
position: relative;
}
.brand-lockup {
display: flex;
align-items: center;
gap: 0.7rem;
text-decoration: none;
}
.brand-icon {
font-size: 1.9rem;
color: var(--panel-accent);
}
.brand-name {
display: block;
font-family: 'Lora', Georgia, serif;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.1;
color: var(--panel-text);
}
.brand-tagline {
display: block;
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--panel-muted);
}
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.5rem;
background: transparent;
border: 1px solid rgba(214, 133, 193, 0.45);
border-radius: 8px;
color: var(--panel-text);
line-height: 1;
}
.nav-toggle:hover {
border-color: var(--panel-accent);
color: var(--panel-accent);
}
.nav-menu {
display: none;
}
.nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 1.5rem;
}
.top-nav-link {
color: var(--panel-muted);
text-decoration: none;
font-size: 0.8rem;
font-weight: 400;
letter-spacing: 0.07em;
text-transform: uppercase;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.top-nav-link:hover,
.top-nav-link:focus-visible {
color: var(--panel-text);
border-bottom-color: var(--panel-accent);
}
/* Mobile: the menu drops below the bar and is revealed by the toggle */
@media (max-width: 991.98px) {
.nav-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 1rem clamp(1rem, 5vw, 2rem) 1.5rem;
background: rgba(16, 22, 27, 0.97);
border-bottom: 1px solid var(--site-border);
backdrop-filter: blur(16px);
}
.nav-menu.is-open {
display: flex;
}
.nav-list {
flex-direction: column;
align-items: flex-start;
gap: 0.9rem;
width: 100%;
margin-bottom: 1.25rem;
}
.top-nav-link {
font-size: 0.85rem;
}
}
/* Desktop: menu is always visible and the toggle disappears */
@media (min-width: 992px) {
.nav-menu {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-toggle {
display: none;
}
}
.rail {
position: fixed;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
display: grid;
gap: 0.75rem;
z-index: 1040;
}
.dot {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid currentColor;
color: var(--panel-text);
opacity: 0.6;
transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.dot:hover,
.dot:focus-visible {
opacity: 1;
border-color: var(--panel-accent);
transform: scale(1.15);
}
/* On small or short screens snapping relaxes and the rail is removed */
@media (max-width: 768px), (max-height: 640px) {
html.snap {
scroll-snap-type: y proximity;
}
.rail {
display: none;
}
}
/* --- 5) Reusable panel helpers ------------------------------------ */
.cta {
display: inline-block;
padding: 0.85rem 2rem;
background: transparent;
border: 1px solid var(--panel-accent);
border-radius: 8px;
color: var(--panel-text);
font-family: 'Poppins', sans-serif;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.cta:hover,
.cta:focus-visible {
border-color: var(--panel-accent);
background-color: rgba(214, 133, 193, 0.14);
color: var(--panel-text);
}
.cta-header {
font-size: 0.72rem;
padding: 0.6rem 1.35rem;
}
.scroll-cue {
position: absolute;
bottom: 2rem;
left: clamp(1.25rem, 5vw, 4rem);
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--panel-muted);
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
}
.scroll-cue:hover {
color: var(--panel-text);
}
/* Two-column content grid: one featured visual plus a supporting list */
.two-col {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
align-items: center;
}
@media (max-width: 991.98px) {
.two-col {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.feature-media {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border: 1px solid var(--site-border);
border-radius: 8px;
display: block;
}
/* Thin-bordered selector list rows: no shadow, border shifts on hover */
.feature-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background-color: rgba(27, 34, 39, 0.5);
transition: border-color 0.25s ease;
}
.feature-item:hover {
border-color: var(--panel-accent);
}
.feature-name {
color: var(--panel-text);
font-size: 1rem;
font-weight: 400;
}
.feature-tag {
color: var(--panel-muted);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
}
.stat-row {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-top: 2rem;
}
.stat-number {
display: block;
font-family: 'Lora', Georgia, serif;
font-weight: 700;
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1;
color: var(--panel-accent);
}
.stat-label {
display: block;
margin-top: 0.4rem;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--panel-muted);
}
.pull-quote {
font-family: 'Lora', Georgia, serif;
font-weight: 700;
font-size: clamp(1.75rem, 4vw, 3.5rem);
line-height: 1.15;
color: var(--panel-text);
max-width: 26ch;
margin: 0;
}
.quote-author {
margin-top: 1.5rem;
font-size: 0.9rem;
color: var(--panel-text);
}
.quote-handle {
display: block;
color: var(--panel-muted);
font-size: 0.78rem;
letter-spacing: 0.1em;
}
/* Glass icon tile: only used over busy or coloured backdrops */
.glass-tile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 14px;
}
.glass-tile .material-symbols-outlined {
font-size: 1.6rem;
color: var(--panel-text);
}
.panel-card {
background-color: rgba(27, 34, 39, 0.55);
border: 1px solid var(--site-border);
border-radius: 8px;
backdrop-filter: blur(8px);
transition: border-color 0.25s ease;
}
.panel-card:hover {
border-color: var(--panel-accent);
}
.panel-note {
color: var(--panel-muted);
font-size: 0.9rem;
}
/* Signup field used in the closing CTA panels */
.signup-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
max-width: 520px;
}
.signup-input {
flex: 1 1 240px;
min-height: 48px;
padding: 0.75rem 1rem;
background: rgba(16, 22, 27, 0.6);
border: 1px solid var(--site-border);
border-radius: 8px;
color: var(--panel-text);
font-family: 'Poppins', sans-serif;
font-size: 0.95rem;
}
.signup-input::placeholder {
color: var(--panel-muted);
}
.signup-input:focus {
border-color: var(--site-indicator);
outline: none;
}
/* community-hub.html */
:root {
--bs-primary: var(--site-primary, #AC5297);
--bs-primary-rgb: 172, 82, 151;
--bs-on-primary: var(--site-on-primary, #FFFFFF);
--bs-primary-hover-bg: color-mix(in oklch, var(--bs-primary) 85%, black);
--bs-primary-active-bg: color-mix(in oklch, var(--bs-primary) 75%, black);
--bs-secondary: var(--site-secondary, #F6E1EF);
--bs-secondary-rgb: 246, 225, 239;
--bs-on-secondary: var(--site-on-secondary, #000000);
--bs-secondary-hover-bg: color-mix(in oklch, var(--bs-secondary) 85%, white);
--bs-secondary-active-bg: color-mix(in oklch, var(--bs-secondary) 75%, white);
--bs-success: var(--site-success, #22C55E);
--bs-success-rgb: 34, 197, 94;
--bs-on-success: #000000;
--bs-success-hover-bg: color-mix(in oklch, var(--bs-success) 85%, white);
--bs-success-active-bg: color-mix(in oklch, var(--bs-success) 75%, white);
--bs-info: var(--site-info, #3B82F6);
--bs-info-rgb: 59, 130, 246;
--bs-on-info: #000000;
--bs-info-hover-bg: color-mix(in oklch, var(--bs-info) 85%, white);
--bs-info-active-bg: color-mix(in oklch, var(--bs-info) 75%, white);
--bs-warning: var(--site-warning, #F59E0B);
--bs-warning-rgb: 245, 158, 11;
--bs-on-warning: #000000;
--bs-warning-hover-bg: color-mix(in oklch, var(--bs-warning) 85%, white);
--bs-warning-active-bg: color-mix(in oklch, var(--bs-warning) 75%, white);
--bs-danger: var(--site-error, #EF4444);
--bs-danger-rgb: 239, 68, 68;
--bs-on-danger: #000000;
--bs-danger-hover-bg: color-mix(in oklch, var(--bs-danger) 85%, white);
--bs-danger-active-bg: color-mix(in oklch, var(--bs-danger) 75%, white);
--bs-body-bg: var(--site-bg, #F1F8FD);
--bs-body-bg-rgb: 241, 248, 253;
--bs-body-color: var(--site-text, #121C23);
--bs-body-color-rgb: 18, 28, 35;
--bs-emphasis-color: var(--site-text, #121C23);
--bs-emphasis-color-rgb: 18, 28, 35;
--bs-secondary-color: var(--site-muted, #4C575F);
--bs-secondary-color-rgb: 76, 87, 95;
--bs-tertiary-color: var(--site-muted, #4C575F);
--bs-tertiary-color-rgb: 76, 87, 95;
--bs-secondary-bg: var(--site-surface, #F6FBFF);
--bs-secondary-bg-rgb: 246, 251, 255;
--bs-tertiary-bg: var(--site-surface, #F6FBFF);
--bs-tertiary-bg-rgb: 246, 251, 255;
--bs-border-color: var(--site-border, #CAD0D5);
--bs-link-color-rgb: 171, 81, 150;
--bs-link-hover-color: #AB5196;
--bs-link-hover-color-rgb: 171, 81, 150;
--site-primary-text: #AB5196;
--color-primary-text: #AB5196;
--bs-primary-text: #AB5196;
--site-secondary-text: #7E6B78;
--color-secondary-text: #7E6B78;
--bs-secondary-text: #7E6B78;
--site-accent-text: #8464A2;
--color-accent-text: #8464A2;
--bs-accent-text: #8464A2;
--site-indicator: #AB5196;
--color-indicator: #AB5196;
--bs-indicator: #AB5196;
--bs-link-color: var(--bs-primary-text, var(--bs-primary));
--bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
--bs-primary-text-emphasis: color-mix(in oklch, var(--bs-primary) 60%, var(--bs-body-color));
--bs-primary-bg-subtle: color-mix(in oklch, var(--bs-primary) 15%, var(--bs-body-bg));
--bs-primary-border-subtle: color-mix(in oklch, var(--bs-primary) 40%, var(--bs-body-bg));
--bs-secondary-text-emphasis: color-mix(in oklch, var(--bs-secondary) 60%, var(--bs-body-color));
--bs-secondary-bg-subtle: color-mix(in oklch, var(--bs-secondary) 15%, var(--bs-body-bg));
--bs-secondary-border-subtle: color-mix(in oklch, var(--bs-secondary) 40%, var(--bs-body-bg));
}
@media (prefers-color-scheme: dark) {
:root {
--bs-primary: var(--site-primary, #D685C1);
--bs-primary-rgb: 214, 133, 193;
--bs-on-primary: var(--site-on-primary, #000000);
--bs-primary-hover-bg: color-mix(in oklch, var(--bs-primary) 85%, white);
--bs-primary-active-bg: color-mix(in oklch, var(--bs-primary) 75%, white);
--bs-secondary: var(--site-secondary, #3B2635);
--bs-secondary-rgb: 59, 38, 53;
--bs-on-secondary: var(--site-on-secondary, #FFFFFF);
--bs-secondary-hover-bg: color-mix(in oklch, var(--bs-secondary) 85%, black);
--bs-secondary-active-bg: color-mix(in oklch, var(--bs-secondary) 75%, black);
--bs-success: var(--site-success, #22C55E);
--bs-success-rgb: 34, 197, 94;
--bs-on-success: #000000;
--bs-success-hover-bg: color-mix(in oklch, var(--bs-success) 85%, white);
--bs-success-active-bg: color-mix(in oklch, var(--bs-success) 75%, white);
--bs-info: var(--site-info, #3B82F6);
--bs-info-rgb: 59, 130, 246;
--bs-on-info: #000000;
--bs-info-hover-bg: color-mix(in oklch, var(--bs-info) 85%, white);
--bs-info-active-bg: color-mix(in oklch, var(--bs-info) 75%, white);
--bs-warning: var(--site-warning, #F59E0B);
--bs-warning-rgb: 245, 158, 11;
--bs-on-warning: #000000;
--bs-warning-hover-bg: color-mix(in oklch, var(--bs-warning) 85%, white);
--bs-warning-active-bg: color-mix(in oklch, var(--bs-warning) 75%, white);
--bs-danger: var(--site-error, #EF4444);
--bs-danger-rgb: 239, 68, 68;
--bs-on-danger: #000000;
--bs-danger-hover-bg: color-mix(in oklch, var(--bs-danger) 85%, white);
--bs-danger-active-bg: color-mix(in oklch, var(--bs-danger) 75%, white);
--bs-body-bg: var(--site-bg, #10161B);
--bs-body-bg-rgb: 16, 22, 27;
--bs-body-color: var(--site-text, #E1F1FF);
--bs-body-color-rgb: 225, 241, 255;
--bs-emphasis-color: var(--site-text, #E1F1FF);
--bs-emphasis-color-rgb: 225, 241, 255;
--bs-secondary-color: var(--site-muted, #A3B4C1);
--bs-secondary-color-rgb: 163, 180, 193;
--bs-tertiary-color: var(--site-muted, #A3B4C1);
--bs-tertiary-color-rgb: 163, 180, 193;
--bs-secondary-bg: var(--site-surface, #1B2227);
--bs-secondary-bg-rgb: 27, 34, 39;
--bs-tertiary-bg: var(--site-surface, #1B2227);
--bs-tertiary-bg-rgb: 27, 34, 39;
--bs-border-color: var(--site-border, #343B40);
--bs-link-color-rgb: 214, 133, 193;
--bs-link-hover-color: #D685C1;
--bs-link-hover-color-rgb: 214, 133, 193;
--site-primary-text: #D685C1;
--color-primary-text: #D685C1;
--bs-primary-text: #D685C1;
--site-secondary-text: #9A8092;
--color-secondary-text: #9A8092;
--bs-secondary-text: #9A8092;
--site-accent-text: #B594D6;
--color-accent-text: #B594D6;
--bs-accent-text: #B594D6;
--site-indicator: #D685C1;
--color-indicator: #D685C1;
--bs-indicator: #D685C1;
}
}
.btn-primary { --bs-btn-color: var(--bs-on-primary); --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-on-primary); --bs-btn-hover-bg: var(--bs-primary-hover-bg); --bs-btn-hover-border-color: var(--bs-primary-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-on-primary); --bs-btn-active-bg: var(--bs-primary-active-bg); --bs-btn-active-border-color: var(--bs-primary-active-bg); --bs-btn-disabled-color: var(--bs-on-primary); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); }
.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-on-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-on-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); }
.text-bg-primary { color: var(--bs-on-primary) !important; background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-primary { color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-primary:hover, .link-primary:focus { color: color-mix(in oklch, var(--bs-primary) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-secondary { --bs-btn-color: var(--bs-on-secondary); --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--bs-on-secondary); --bs-btn-hover-bg: var(--bs-secondary-hover-bg); --bs-btn-hover-border-color: var(--bs-secondary-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-active-color: var(--bs-on-secondary); --bs-btn-active-bg: var(--bs-secondary-active-bg); --bs-btn-active-border-color: var(--bs-secondary-active-bg); --bs-btn-disabled-color: var(--bs-on-secondary); --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); }
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--bs-on-secondary); --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-active-color: var(--bs-on-secondary); --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); --bs-btn-disabled-color: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); }
.text-bg-secondary { color: var(--bs-on-secondary) !important; background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-secondary { color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-secondary:hover, .link-secondary:focus { color: color-mix(in oklch, var(--bs-secondary) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-success { --bs-btn-color: var(--bs-on-success); --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-color: var(--bs-on-success); --bs-btn-hover-bg: var(--bs-success-hover-bg); --bs-btn-hover-border-color: var(--bs-success-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); --bs-btn-active-color: var(--bs-on-success); --bs-btn-active-bg: var(--bs-success-active-bg); --bs-btn-active-border-color: var(--bs-success-active-bg); --bs-btn-disabled-color: var(--bs-on-success); --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); }
.btn-outline-success { --bs-btn-color: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-color: var(--bs-on-success); --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); --bs-btn-active-color: var(--bs-on-success); --bs-btn-active-bg: var(--bs-success); --bs-btn-active-border-color: var(--bs-success); --bs-btn-disabled-color: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); }
.text-bg-success { color: var(--bs-on-success) !important; background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-success { color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-success:hover, .link-success:focus { color: color-mix(in oklch, var(--bs-success) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-info { --bs-btn-color: var(--bs-on-info); --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-color: var(--bs-on-info); --bs-btn-hover-bg: var(--bs-info-hover-bg); --bs-btn-hover-border-color: var(--bs-info-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); --bs-btn-active-color: var(--bs-on-info); --bs-btn-active-bg: var(--bs-info-active-bg); --bs-btn-active-border-color: var(--bs-info-active-bg); --bs-btn-disabled-color: var(--bs-on-info); --bs-btn-disabled-bg: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); }
.btn-outline-info { --bs-btn-color: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-color: var(--bs-on-info); --bs-btn-hover-bg: var(--bs-info); --bs-btn-hover-border-color: var(--bs-info); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); --bs-btn-active-color: var(--bs-on-info); --bs-btn-active-bg: var(--bs-info); --bs-btn-active-border-color: var(--bs-info); --bs-btn-disabled-color: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); }
.text-bg-info { color: var(--bs-on-info) !important; background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-info { color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-info:hover, .link-info:focus { color: color-mix(in oklch, var(--bs-info) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-warning { --bs-btn-color: var(--bs-on-warning); --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-color: var(--bs-on-warning); --bs-btn-hover-bg: var(--bs-warning-hover-bg); --bs-btn-hover-border-color: var(--bs-warning-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb); --bs-btn-active-color: var(--bs-on-warning); --bs-btn-active-bg: var(--bs-warning-active-bg); --bs-btn-active-border-color: var(--bs-warning-active-bg); --bs-btn-disabled-color: var(--bs-on-warning); --bs-btn-disabled-bg: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); }
.btn-outline-warning { --bs-btn-color: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-color: var(--bs-on-warning); --bs-btn-hover-bg: var(--bs-warning); --bs-btn-hover-border-color: var(--bs-warning); --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb); --bs-btn-active-color: var(--bs-on-warning); --bs-btn-active-bg: var(--bs-warning); --bs-btn-active-border-color: var(--bs-warning); --bs-btn-disabled-color: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); }
.text-bg-warning { color: var(--bs-on-warning) !important; background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-warning { color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-warning:hover, .link-warning:focus { color: color-mix(in oklch, var(--bs-warning) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-danger { --bs-btn-color: var(--bs-on-danger); --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: var(--bs-on-danger); --bs-btn-hover-bg: var(--bs-danger-hover-bg); --bs-btn-hover-border-color: var(--bs-danger-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-active-color: var(--bs-on-danger); --bs-btn-active-bg: var(--bs-danger-active-bg); --bs-btn-active-border-color: var(--bs-danger-active-bg); --bs-btn-disabled-color: var(--bs-on-danger); --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); }
.btn-outline-danger { --bs-btn-color: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: var(--bs-on-danger); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-active-color: var(--bs-on-danger); --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); --bs-btn-disabled-color: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); }
.text-bg-danger { color: var(--bs-on-danger) !important; background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-danger { color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-danger:hover, .link-danger:focus { color: color-mix(in oklch, var(--bs-danger) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: color-mix(in oklch, var(--bs-primary) 50%, var(--bs-body-bg)); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); }
.nav-pills { --bs-nav-pills-link-active-color: var(--bs-on-primary); --bs-nav-pills-link-active-bg: var(--bs-primary); }
.pagination { --bs-pagination-active-color: var(--bs-on-primary); --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); }
.progress, .progress-stacked { --bs-progress-bar-color: var(--bs-on-primary); --bs-progress-bar-bg: var(--bs-primary); }
.list-group { --bs-list-group-active-color: var(--bs-on-primary); --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-color: var(--bs-on-primary); --bs-dropdown-link-active-bg: var(--bs-primary); }
.text-primary, .link-primary, .link-primary:hover, .link-primary:focus { color: var(--bs-primary-text) !important; text-decoration-color: currentcolor !important; }
.btn-outline-primary { --bs-btn-color: var(--bs-primary-text); --bs-btn-border-color: var(--bs-primary-text); }
.text-secondary, .link-secondary, .link-secondary:hover, .link-secondary:focus { color: var(--bs-secondary-text) !important; text-decoration-color: currentcolor !important; }
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary-text); --bs-btn-border-color: var(--bs-secondary-text); }
:where(a,button,input,textarea,select,[tabindex]):focus-visible { outline: 2px solid var(--bs-indicator); outline-offset: 2px; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--bs-indicator); }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { border-color: var(--bs-indicator); }
/* community-hub.html */
.community-page .panel {
min-height: 100svh;
height: auto;
}
.community-page .community-hero,
.community-page .community-calendar {
position: relative;
}
.community-page .community-art {
position: absolute;
z-index: -2;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.community-page .community-hero::before,
.community-page .community-calendar::before {
z-index: -1;
background: linear-gradient(90deg, rgba(16, 22, 27, 0.92), rgba(18, 7, 15, 0.78) 56%, rgba(18, 7, 15, 0.58));
}
.community-page .hero-copy {
max-width: 780px;
padding-top: clamp(5rem, 12vh, 9rem);
padding-bottom: clamp(5rem, 12vh, 9rem);
}
.community-page .eyebrow {
margin-bottom: 1rem;
color: var(--panel-accent);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.community-page .hero-copy h1 {
max-width: 11ch;
margin-bottom: 1.5rem;
color: var(--panel-text);
font-weight: 700;
}
.community-page .lede {
margin-bottom: 2rem;
}
.community-page .community-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
align-items: center;
}
.community-page .section-heading {
margin-bottom: 0.8rem;
color: var(--panel-text);
font-weight: 700;
}
.community-page .section-intro {
max-width: 48ch;
color: var(--panel-muted);
margin-bottom: 1.5rem;
}
.community-page .guild-spotlight {
position: relative;
border: 1px solid var(--site-border);
border-radius: 8px;
overflow: hidden;
background: rgba(27, 34, 39, 0.55);
color: var(--panel-text);
}
.community-page .guild-spotlight img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.community-page .guild-caption {
padding: 1.15rem 1.25rem 1.25rem;
color: var(--panel-text);
}
.community-page .guild-caption h3 {
margin: 0 0 0.45rem;
font-size: 1.3rem;
font-weight: 700;
}
.community-page .guild-caption p {
margin: 0;
color: var(--panel-muted);
font-size: 0.9rem;
}
.community-page .guild-list {
display: grid;
gap: 0.65rem;
margin: 1.25rem 0 0;
padding: 0;
list-style: none;
}
.community-page .guild-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 0.9rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background: rgba(27, 34, 39, 0.5);
color: var(--panel-text);
transition: border-color 0.2s ease;
}
.community-page .guild-row:hover,
.community-page .thread-row:hover {
border-color: var(--panel-accent);
}
.community-page .guild-name {
display: block;
font-size: 0.94rem;
font-weight: 400;
white-space: nowrap;
}
.community-page .guild-genre,
.community-page .guild-members {
color: var(--panel-muted);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.community-page .join-note {
margin: 1rem 0 0;
color: var(--panel-muted);
font-size: 0.82rem;
}
.community-page .calendar-layout {
max-width: 1000px;
}
.community-page .rhythm-list {
display: grid;
gap: 0.65rem;
margin: 1.6rem 0 2rem;
padding: 0;
list-style: none;
}
.community-page .rhythm-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0.7rem 0;
border-bottom: 1px solid rgba(202, 208, 213, 0.42);
color: var(--panel-text);
}
.community-page .rhythm-day {
min-width: 8rem;
color: var(--panel-accent);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.community-page .rhythm-detail {
flex: 1;
font-size: 0.95rem;
}
.community-page .stat-row {
gap: 2rem 3rem;
}
.community-page .calendar-note {
margin: 1.5rem 0 0;
color: var(--panel-muted);
font-size: 0.86rem;
}
.community-page .forum-layout {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 3rem;
align-items: center;
}
.community-page .forum-quote {
max-width: 25ch;
margin: 0;
color: var(--panel-text);
font-family: 'Lora', Georgia, serif;
font-size: clamp(1.75rem, 4vw, 3.5rem);
font-weight: 700;
line-height: 1.15;
}
.community-page .quote-credit {
margin: 1.25rem 0 0;
color: var(--panel-text);
font-size: 0.9rem;
}
.community-page .quote-role {
display: block;
color: var(--panel-muted);
font-size: 0.76rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.community-page .thread-list {
display: grid;
gap: 0.65rem;
margin: 0;
padding: 0;
list-style: none;
}
.community-page .thread-row {
padding: 0.8rem 0.95rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background: rgba(27, 34, 39, 0.45);
color: var(--panel-text);
transition: border-color 0.2s ease;
}
.community-page .thread-row a {
display: block;
overflow: hidden;
color: var(--panel-text);
font-size: 0.92rem;
line-height: 1.45;
text-decoration: none;
}
.community-page .thread-tag {
display: block;
margin-top: 0.25rem;
color: var(--panel-accent);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.community-page .channel-row {
display: flex;
flex-wrap: wrap;
gap: 0.65rem 1.25rem;
margin-top: 1.6rem;
color: var(--panel-muted);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.community-page .channel-row span {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.community-page .channel-row .material-symbols-outlined {
color: var(--panel-accent);
font-size: 1.05rem;
}
.community-page .join-panel .inner {
display: flex;
min-height: 100svh;
flex-direction: column;
justify-content: center;
padding-top: clamp(5rem, 9vh, 7rem);
padding-bottom: 2rem;
}
.community-page .join-copy {
max-width: 760px;
}
.community-page .join-copy h2 {
max-width: 12ch;
margin-bottom: 0.9rem;
color: var(--panel-text);
font-weight: 700;
}
.community-page .join-copy > p {
color: var(--panel-muted);
font-size: 1.05rem;
}
.community-page .handle-form {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
max-width: 620px;
margin-top: 1.4rem;
}
.community-page .handle-input {
flex: 1 1 230px;
min-height: 48px;
padding: 0.7rem 0.95rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background: rgba(16, 22, 27, 0.6);
color: var(--panel-text);
font: inherit;
}
.community-page .handle-input::placeholder {
color: var(--panel-muted);
}
.community-page .handle-input:focus {
border-color: var(--site-indicator);
outline: 2px solid var(--site-indicator);
outline-offset: 2px;
}
.community-page .join-cta {
margin-top: 1rem;
}
.community-page .community-footer {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 1.5rem;
margin-top: auto;
padding-top: 3rem;
color: var(--panel-muted);
font-size: 0.76rem;
}
.community-page .footer-label {
margin-bottom: 0.45rem;
color: var(--panel-text);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.community-page .footer-links {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 1rem;
}
.community-page .footer-links a {
color: var(--panel-muted);
text-decoration: none;
}
.community-page .footer-links a:hover {
color: var(--panel-text);
}
.community-page .legal-copy {
margin: 0;
}
@media (max-width: 991.98px) {
.community-page .community-grid,
.community-page .forum-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
.community-page .community-grid {
align-items: start;
}
.community-page .guild-spotlight img {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 768px) {
.community-page .hero-copy {
padding-top: 6rem;
padding-bottom: 5rem;
}
.community-page .guild-row {
gap: 0.4rem;
padding: 0.7rem;
}
.community-page .guild-name {
font-size: 0.8rem;
}
.community-page .guild-genre,
.community-page .guild-members {
font-size: 0.62rem;
}
.community-page .thread-row a {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.community-page .community-footer {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding-top: 2.25rem;
}
.community-page .legal-column {
grid-column: 1 / -1;
}
}
@media (max-width: 480px) {
.community-page .community-footer {
grid-template-columns: 1fr;
}
.community-page .legal-column {
grid-column: auto;
}
.community-page .rhythm-day {
min-width: 6.5rem;
font-size: 0.68rem;
}
.community-page .rhythm-detail {
font-size: 0.86rem;
}
.community-page .handle-form .cta {
width: 100%;
text-align: center;
}
}
/* community-hub.html */
/* Footer-scoped styles. The footer continues the dark tonal surface of
the final page panel so the last screen reads as one unit. */
.site-footer {
background-image: radial-gradient(circle at 78% 22%, hsl(268 44% 42% / 0.35) 0%, transparent 60%), linear-gradient(160deg, #12070F 0%, #1B2227 55%, #10161B 100%);
color: #E1F1FF;
border-top: 1px solid rgba(214, 133, 193, 0.28);
padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 1.5rem;
font-weight: 300;
}
.footer-wrap {
max-width: 1200px;
margin: 0 auto;
}
.footer-brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: #E1F1FF;
text-decoration: none;
}
.footer-brand-icon {
font-size: 1.8rem;
color: #D685C1;
}
.footer-brand-name {
font-family: 'Lora', Georgia, serif;
font-size: 1.15rem;
font-weight: 600;
}
.footer-blurb {
max-width: 34ch;
margin: 0.75rem 0 0;
color: #A3B4C1;
font-size: 0.9rem;
}
.footer-heading {
margin: 0 0 1rem;
font-family: 'Lora', Georgia, serif;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #D685C1;
}
.footer-list {
display: grid;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.9rem;
}
.footer-list a {
color: #A3B4C1;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-list a:hover,
.footer-list a:focus-visible {
color: #E1F1FF;
border-bottom-color: #D685C1;
}
.footer-icon {
margin-right: 0.45rem;
font-size: 1.05rem;
vertical-align: -3px;
color: #B594D6;
}
.footer-social {
display: flex;
gap: 0.6rem;
margin-top: 1rem;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid #343B40;
border-radius: 8px;
color: #A3B4C1;
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
border-color: #D685C1;
color: #E1F1FF;
}
.footer-legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 2.25rem;
padding-top: 1.25rem;
border-top: 1px solid #343B40;
}
.footer-copy {
margin: 0;
color: #A3B4C1;
font-size: 0.8rem;
}
.footer-legal-links {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.8rem;
}
.footer-legal-links a {
color: #A3B4C1;
text-decoration: none;
}
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
color: #E1F1FF;
}
/* Cookie consent banner: neutral dark surface, fixed to the viewport */
.cookie-banner {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1080;
padding: 0.9rem 0;
background: #1B2227;
border-top: 1px solid #343B40;
color: #E1F1FF;
}
.cookie-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 5vw, 4rem);
}
.cookie-text {
max-width: 70ch;
font-size: 0.85rem;
color: #A3B4C1;
}
.cookie-btn {
background: transparent;
border: 1px solid #D685C1;
border-radius: 8px;
color: #D685C1;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.cookie-btn:hover,
.cookie-btn:focus-visible {
background: #D685C1;
border-color: #D685C1;
color: #000000;
}
/* privacy-policy.html */
/* ==================================================================
Playtime Zone global stylesheet
1) Palette tokens 2) Base typography 3) Snap-panel scaffold
4) Site header + dot rail 5) Reusable panel helpers
================================================================== */
/* --- 1) Palette tokens: light theme is the default ----------------- */
:root {
--site-bg: #F1F8FD;
--site-surface: #F6FBFF;
--site-text: #121C23;
--site-muted: #4C575F;
--site-border: #CAD0D5;
--site-primary: #AC5297;
--site-on-primary: #FFFFFF;
--site-secondary: #F6E1EF;
--site-on-secondary: #000000;
--site-accent: #8868A6;
--site-on-accent: #FFFFFF;
--site-success: #22C55E;
--site-warning: #F59E0B;
--site-error: #EF4444;
--site-info: #3B82F6;
/* Readable foreground roles for links, small text and icons */
--site-primary-text: #AB5196;
--site-secondary-text: #7E6B78;
--site-accent-text: #8464A2;
--site-indicator: #AB5196;
/* Tonal depth roles used for selected moments and tonal panels */
--site-tonal-bg: #FFEEF9;
--site-tonal-surface: #F3D3E9;
--site-tonal-panel: #DFA0CE;
--site-on-tonal-panel: #000000;
--site-category-0: #F6DEEF;
--site-category-1: #EAC4DE;
--site-on-category-0: #000000;
--site-on-category-1: #000000;
--site-tonal-text: #121C23;
--site-tonal-primary-text: #973F84;
--site-tonal-indicator: #AB5196;
/* Compatibility aliases so both naming styles resolve */
--color-bg: var(--site-bg);
--color-surface: var(--site-surface);
--color-text: var(--site-text);
--color-muted: var(--site-muted);
--color-border: var(--site-border);
--color-primary: var(--site-primary);
--color-on-primary: var(--site-on-primary);
--color-secondary: var(--site-secondary);
--color-on-secondary: var(--site-on-secondary);
--color-accent: var(--site-accent);
--color-on-accent: var(--site-on-accent);
--color-primary-text: var(--site-primary-text);
--color-secondary-text: var(--site-secondary-text);
--color-accent-text: var(--site-accent-text);
--color-indicator: var(--site-indicator);
--color-tonal-bg: var(--site-tonal-bg);
--color-tonal-surface: var(--site-tonal-surface);
--color-tonal-panel: var(--site-tonal-panel);
--color-tonal-text: var(--site-tonal-text);
--color-success: var(--site-success);
--color-warning: var(--site-warning);
--color-error: var(--site-error);
--color-info: var(--site-info);
/* Full-bleed panels sit over dark artwork, so they always use the
dark-side text roles regardless of the visitor colour scheme. */
--panel-text: #E1F1FF;
--panel-muted: #A3B4C1;
--panel-accent: #D685C1;
--panel-tint: #12070F;
}
/* --- Dark variant driven by the visitor OS preference ------------- */
@media (prefers-color-scheme: dark) {
:root {
--site-bg: #10161B;
--site-surface: #1B2227;
--site-text: #E1F1FF;
--site-muted: #A3B4C1;
--site-border: #343B40;
--site-primary: #D685C1;
--site-on-primary: #000000;
--site-secondary: #3B2635;
--site-on-secondary: #FFFFFF;
--site-accent: #B594D6;
--site-on-accent: #000000;
--site-primary-text: #D685C1;
--site-secondary-text: #9A8092;
--site-accent-text: #B594D6;
--site-indicator: #D685C1;
--site-tonal-bg: #12070F;
--site-tonal-surface: #2E1729;
--site-tonal-panel: #612C55;
--site-on-tonal-panel: #FFFFFF;
--site-category-0: #32202D;
--site-category-1: #4A2C42;
--site-on-category-0: #FFFFFF;
--site-on-category-1: #FFFFFF;
--site-tonal-text: #E1F1FF;
--site-tonal-primary-text: #D685C1;
--site-tonal-indicator: #D685C1;
}
}
/* --- 2) Base typography ------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html.snap {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
body {
margin: 0;
background-color: var(--site-bg);
color: var(--site-text);
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-weight: 300;
line-height: 1.65;
}
h1,
h2,
h3,
h4 {
font-family: 'Lora', Georgia, 'Times New Roman', serif;
font-weight: 700;
letter-spacing: -0.01em;
}
h1 {
font-size: clamp(3rem, 9vw, 8rem);
line-height: 0.95;
}
h2 {
font-size: clamp(2.5rem, 6vw, 5.5rem);
line-height: 1;
}
.lede {
font-size: clamp(1.15rem, 1.8vw, 1.5rem);
font-weight: 300;
max-width: 38ch;
color: var(--panel-muted);
}
a {
color: var(--site-primary-text);
}
:focus-visible {
outline: 2px solid var(--site-indicator);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
html.snap {
scroll-behavior: auto;
}
}
/* --- 3) Snap-panel scaffold --------------------------------------- */
.panel {
min-height: 100vh;
min-height: 100svh;
height: auto;
scroll-snap-align: start;
position: relative;
display: grid;
align-items: center;
overflow: visible;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
isolation: isolate;
color: var(--panel-text);
}
/* Tonal scrim keeps text legible over every full-bleed background */
.panel::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16, 22, 27, 0.76) 0%, rgba(18, 7, 15, 0.88) 100%);
z-index: -1;
}
.inner {
width: min(1200px, 100%);
margin: 0 auto;
padding: clamp(4rem, 10vh, 8rem) clamp(1.25rem, 5vw, 4rem);
}
/* Distinct full-bleed backgrounds per panel. Page bodies may layer a
game-art image on top by adding background-image in an inline style. */
.bg-1 {
background-image: radial-gradient(circle at 18% 22%, hsl(310 55% 42% / 0.55) 0%, transparent 55%), radial-gradient(circle at 82% 78%, hsl(268 48% 40% / 0.5) 0%, transparent 60%), linear-gradient(150deg, #10161B 0%, #1B2227 45%, #12070F 100%);
}
.bg-2 {
background-image: radial-gradient(circle at 78% 18%, hsl(286 45% 40% / 0.5) 0%, transparent 58%), linear-gradient(120deg, #12070F 0%, #1B2227 60%, #10161B 100%);
}
.bg-3 {
background-image: radial-gradient(circle at 22% 72%, hsl(322 42% 46% / 0.45) 0%, transparent 60%), linear-gradient(200deg, #10161B 0%, #2E1729 55%, #12070F 100%);
}
.bg-4 {
background-image: radial-gradient(circle at 50% 12%, hsl(310 48% 44% / 0.4) 0%, transparent 62%), linear-gradient(160deg, #612C55 0%, #2E1729 48%, #10161B 100%);
}
.bg-5 {
background-image: radial-gradient(circle at 72% 68%, hsl(268 44% 42% / 0.5) 0%, transparent 60%), linear-gradient(140deg, #12070F 0%, #32202D 40%, #10161B 100%);
}
/* --- 4) Site header and fixed dot rail ---------------------------- */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 1035;
}
.site-navbar {
background: linear-gradient(180deg, rgba(16, 22, 27, 0.94) 0%, rgba(16, 22, 27, 0.66) 100%);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(214, 133, 193, 0.28);
}
.site-nav-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
max-width: 1400px;
margin: 0 auto;
padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
position: relative;
}
.brand-lockup {
display: flex;
align-items: center;
gap: 0.7rem;
text-decoration: none;
}
.brand-icon {
font-size: 1.9rem;
color: var(--panel-accent);
}
.brand-name {
display: block;
font-family: 'Lora', Georgia, serif;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.1;
color: var(--panel-text);
}
.brand-tagline {
display: block;
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--panel-muted);
}
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.5rem;
background: transparent;
border: 1px solid rgba(214, 133, 193, 0.45);
border-radius: 8px;
color: var(--panel-text);
line-height: 1;
}
.nav-toggle:hover {
border-color: var(--panel-accent);
color: var(--panel-accent);
}
.nav-menu {
display: none;
}
.nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 1.5rem;
}
.top-nav-link {
color: var(--panel-muted);
text-decoration: none;
font-size: 0.8rem;
font-weight: 400;
letter-spacing: 0.07em;
text-transform: uppercase;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.top-nav-link:hover,
.top-nav-link:focus-visible {
color: var(--panel-text);
border-bottom-color: var(--panel-accent);
}
/* Mobile: the menu drops below the bar and is revealed by the toggle */
@media (max-width: 991.98px) {
.nav-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 1rem clamp(1rem, 5vw, 2rem) 1.5rem;
background: rgba(16, 22, 27, 0.97);
border-bottom: 1px solid var(--site-border);
backdrop-filter: blur(16px);
}
.nav-menu.is-open {
display: flex;
}
.nav-list {
flex-direction: column;
align-items: flex-start;
gap: 0.9rem;
width: 100%;
margin-bottom: 1.25rem;
}
.top-nav-link {
font-size: 0.85rem;
}
}
/* Desktop: menu is always visible and the toggle disappears */
@media (min-width: 992px) {
.nav-menu {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-toggle {
display: none;
}
}
.rail {
position: fixed;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
display: grid;
gap: 0.75rem;
z-index: 1040;
}
.dot {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid currentColor;
color: var(--panel-text);
opacity: 0.6;
transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.dot:hover,
.dot:focus-visible {
opacity: 1;
border-color: var(--panel-accent);
transform: scale(1.15);
}
/* On small or short screens snapping relaxes and the rail is removed */
@media (max-width: 768px), (max-height: 640px) {
html.snap {
scroll-snap-type: y proximity;
}
.rail {
display: none;
}
}
/* --- 5) Reusable panel helpers ------------------------------------ */
.cta {
display: inline-block;
padding: 0.85rem 2rem;
background: transparent;
border: 1px solid var(--panel-accent);
border-radius: 8px;
color: var(--panel-text);
font-family: 'Poppins', sans-serif;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.cta:hover,
.cta:focus-visible {
border-color: var(--panel-accent);
background-color: rgba(214, 133, 193, 0.14);
color: var(--panel-text);
}
.cta-header {
font-size: 0.72rem;
padding: 0.6rem 1.35rem;
}
.scroll-cue {
position: absolute;
bottom: 2rem;
left: clamp(1.25rem, 5vw, 4rem);
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--panel-muted);
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
}
.scroll-cue:hover {
color: var(--panel-text);
}
/* Two-column content grid: one featured visual plus a supporting list */
.two-col {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
align-items: center;
}
@media (max-width: 991.98px) {
.two-col {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.feature-media {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border: 1px solid var(--site-border);
border-radius: 8px;
display: block;
}
/* Thin-bordered selector list rows: no shadow, border shifts on hover */
.feature-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background-color: rgba(27, 34, 39, 0.5);
transition: border-color 0.25s ease;
}
.feature-item:hover {
border-color: var(--panel-accent);
}
.feature-name {
color: var(--panel-text);
font-size: 1rem;
font-weight: 400;
}
.feature-tag {
color: var(--panel-muted);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
}
.stat-row {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-top: 2rem;
}
.stat-number {
display: block;
font-family: 'Lora', Georgia, serif;
font-weight: 700;
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1;
color: var(--panel-accent);
}
.stat-label {
display: block;
margin-top: 0.4rem;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--panel-muted);
}
.pull-quote {
font-family: 'Lora', Georgia, serif;
font-weight: 700;
font-size: clamp(1.75rem, 4vw, 3.5rem);
line-height: 1.15;
color: var(--panel-text);
max-width: 26ch;
margin: 0;
}
.quote-author {
margin-top: 1.5rem;
font-size: 0.9rem;
color: var(--panel-text);
}
.quote-handle {
display: block;
color: var(--panel-muted);
font-size: 0.78rem;
letter-spacing: 0.1em;
}
/* Glass icon tile: only used over busy or coloured backdrops */
.glass-tile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 14px;
}
.glass-tile .material-symbols-outlined {
font-size: 1.6rem;
color: var(--panel-text);
}
.panel-card {
background-color: rgba(27, 34, 39, 0.55);
border: 1px solid var(--site-border);
border-radius: 8px;
backdrop-filter: blur(8px);
transition: border-color 0.25s ease;
}
.panel-card:hover {
border-color: var(--panel-accent);
}
.panel-note {
color: var(--panel-muted);
font-size: 0.9rem;
}
/* Signup field used in the closing CTA panels */
.signup-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
max-width: 520px;
}
.signup-input {
flex: 1 1 240px;
min-height: 48px;
padding: 0.75rem 1rem;
background: rgba(16, 22, 27, 0.6);
border: 1px solid var(--site-border);
border-radius: 8px;
color: var(--panel-text);
font-family: 'Poppins', sans-serif;
font-size: 0.95rem;
}
.signup-input::placeholder {
color: var(--panel-muted);
}
.signup-input:focus {
border-color: var(--site-indicator);
outline: none;
}
/* privacy-policy.html */
:root {
--bs-primary: var(--site-primary, #AC5297);
--bs-primary-rgb: 172, 82, 151;
--bs-on-primary: var(--site-on-primary, #FFFFFF);
--bs-primary-hover-bg: color-mix(in oklch, var(--bs-primary) 85%, black);
--bs-primary-active-bg: color-mix(in oklch, var(--bs-primary) 75%, black);
--bs-secondary: var(--site-secondary, #F6E1EF);
--bs-secondary-rgb: 246, 225, 239;
--bs-on-secondary: var(--site-on-secondary, #000000);
--bs-secondary-hover-bg: color-mix(in oklch, var(--bs-secondary) 85%, white);
--bs-secondary-active-bg: color-mix(in oklch, var(--bs-secondary) 75%, white);
--bs-success: var(--site-success, #22C55E);
--bs-success-rgb: 34, 197, 94;
--bs-on-success: #000000;
--bs-success-hover-bg: color-mix(in oklch, var(--bs-success) 85%, white);
--bs-success-active-bg: color-mix(in oklch, var(--bs-success) 75%, white);
--bs-info: var(--site-info, #3B82F6);
--bs-info-rgb: 59, 130, 246;
--bs-on-info: #000000;
--bs-info-hover-bg: color-mix(in oklch, var(--bs-info) 85%, white);
--bs-info-active-bg: color-mix(in oklch, var(--bs-info) 75%, white);
--bs-warning: var(--site-warning, #F59E0B);
--bs-warning-rgb: 245, 158, 11;
--bs-on-warning: #000000;
--bs-warning-hover-bg: color-mix(in oklch, var(--bs-warning) 85%, white);
--bs-warning-active-bg: color-mix(in oklch, var(--bs-warning) 75%, white);
--bs-danger: var(--site-error, #EF4444);
--bs-danger-rgb: 239, 68, 68;
--bs-on-danger: #000000;
--bs-danger-hover-bg: color-mix(in oklch, var(--bs-danger) 85%, white);
--bs-danger-active-bg: color-mix(in oklch, var(--bs-danger) 75%, white);
--bs-body-bg: var(--site-bg, #F1F8FD);
--bs-body-bg-rgb: 241, 248, 253;
--bs-body-color: var(--site-text, #121C23);
--bs-body-color-rgb: 18, 28, 35;
--bs-emphasis-color: var(--site-text, #121C23);
--bs-emphasis-color-rgb: 18, 28, 35;
--bs-secondary-color: var(--site-muted, #4C575F);
--bs-secondary-color-rgb: 76, 87, 95;
--bs-tertiary-color: var(--site-muted, #4C575F);
--bs-tertiary-color-rgb: 76, 87, 95;
--bs-secondary-bg: var(--site-surface, #F6FBFF);
--bs-secondary-bg-rgb: 246, 251, 255;
--bs-tertiary-bg: var(--site-surface, #F6FBFF);
--bs-tertiary-bg-rgb: 246, 251, 255;
--bs-border-color: var(--site-border, #CAD0D5);
--bs-link-color-rgb: 171, 81, 150;
--bs-link-hover-color: #AB5196;
--bs-link-hover-color-rgb: 171, 81, 150;
--site-primary-text: #AB5196;
--color-primary-text: #AB5196;
--bs-primary-text: #AB5196;
--site-secondary-text: #7E6B78;
--color-secondary-text: #7E6B78;
--bs-secondary-text: #7E6B78;
--site-accent-text: #8464A2;
--color-accent-text: #8464A2;
--bs-accent-text: #8464A2;
--site-indicator: #AB5196;
--color-indicator: #AB5196;
--bs-indicator: #AB5196;
--bs-link-color: var(--bs-primary-text, var(--bs-primary));
--bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
--bs-primary-text-emphasis: color-mix(in oklch, var(--bs-primary) 60%, var(--bs-body-color));
--bs-primary-bg-subtle: color-mix(in oklch, var(--bs-primary) 15%, var(--bs-body-bg));
--bs-primary-border-subtle: color-mix(in oklch, var(--bs-primary) 40%, var(--bs-body-bg));
--bs-secondary-text-emphasis: color-mix(in oklch, var(--bs-secondary) 60%, var(--bs-body-color));
--bs-secondary-bg-subtle: color-mix(in oklch, var(--bs-secondary) 15%, var(--bs-body-bg));
--bs-secondary-border-subtle: color-mix(in oklch, var(--bs-secondary) 40%, var(--bs-body-bg));
}
@media (prefers-color-scheme: dark) {
:root {
--bs-primary: var(--site-primary, #D685C1);
--bs-primary-rgb: 214, 133, 193;
--bs-on-primary: var(--site-on-primary, #000000);
--bs-primary-hover-bg: color-mix(in oklch, var(--bs-primary) 85%, white);
--bs-primary-active-bg: color-mix(in oklch, var(--bs-primary) 75%, white);
--bs-secondary: var(--site-secondary, #3B2635);
--bs-secondary-rgb: 59, 38, 53;
--bs-on-secondary: var(--site-on-secondary, #FFFFFF);
--bs-secondary-hover-bg: color-mix(in oklch, var(--bs-secondary) 85%, black);
--bs-secondary-active-bg: color-mix(in oklch, var(--bs-secondary) 75%, black);
--bs-success: var(--site-success, #22C55E);
--bs-success-rgb: 34, 197, 94;
--bs-on-success: #000000;
--bs-success-hover-bg: color-mix(in oklch, var(--bs-success) 85%, white);
--bs-success-active-bg: color-mix(in oklch, var(--bs-success) 75%, white);
--bs-info: var(--site-info, #3B82F6);
--bs-info-rgb: 59, 130, 246;
--bs-on-info: #000000;
--bs-info-hover-bg: color-mix(in oklch, var(--bs-info) 85%, white);
--bs-info-active-bg: color-mix(in oklch, var(--bs-info) 75%, white);
--bs-warning: var(--site-warning, #F59E0B);
--bs-warning-rgb: 245, 158, 11;
--bs-on-warning: #000000;
--bs-warning-hover-bg: color-mix(in oklch, var(--bs-warning) 85%, white);
--bs-warning-active-bg: color-mix(in oklch, var(--bs-warning) 75%, white);
--bs-danger: var(--site-error, #EF4444);
--bs-danger-rgb: 239, 68, 68;
--bs-on-danger: #000000;
--bs-danger-hover-bg: color-mix(in oklch, var(--bs-danger) 85%, white);
--bs-danger-active-bg: color-mix(in oklch, var(--bs-danger) 75%, white);
--bs-body-bg: var(--site-bg, #10161B);
--bs-body-bg-rgb: 16, 22, 27;
--bs-body-color: var(--site-text, #E1F1FF);
--bs-body-color-rgb: 225, 241, 255;
--bs-emphasis-color: var(--site-text, #E1F1FF);
--bs-emphasis-color-rgb: 225, 241, 255;
--bs-secondary-color: var(--site-muted, #A3B4C1);
--bs-secondary-color-rgb: 163, 180, 193;
--bs-tertiary-color: var(--site-muted, #A3B4C1);
--bs-tertiary-color-rgb: 163, 180, 193;
--bs-secondary-bg: var(--site-surface, #1B2227);
--bs-secondary-bg-rgb: 27, 34, 39;
--bs-tertiary-bg: var(--site-surface, #1B2227);
--bs-tertiary-bg-rgb: 27, 34, 39;
--bs-border-color: var(--site-border, #343B40);
--bs-link-color-rgb: 214, 133, 193;
--bs-link-hover-color: #D685C1;
--bs-link-hover-color-rgb: 214, 133, 193;
--site-primary-text: #D685C1;
--color-primary-text: #D685C1;
--bs-primary-text: #D685C1;
--site-secondary-text: #9A8092;
--color-secondary-text: #9A8092;
--bs-secondary-text: #9A8092;
--site-accent-text: #B594D6;
--color-accent-text: #B594D6;
--bs-accent-text: #B594D6;
--site-indicator: #D685C1;
--color-indicator: #D685C1;
--bs-indicator: #D685C1;
}
}
.btn-primary { --bs-btn-color: var(--bs-on-primary); --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-on-primary); --bs-btn-hover-bg: var(--bs-primary-hover-bg); --bs-btn-hover-border-color: var(--bs-primary-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-on-primary); --bs-btn-active-bg: var(--bs-primary-active-bg); --bs-btn-active-border-color: var(--bs-primary-active-bg); --bs-btn-disabled-color: var(--bs-on-primary); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); }
.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-on-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-on-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); }
.text-bg-primary { color: var(--bs-on-primary) !important; background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-primary { color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-primary:hover, .link-primary:focus { color: color-mix(in oklch, var(--bs-primary) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-secondary { --bs-btn-color: var(--bs-on-secondary); --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--bs-on-secondary); --bs-btn-hover-bg: var(--bs-secondary-hover-bg); --bs-btn-hover-border-color: var(--bs-secondary-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-active-color: var(--bs-on-secondary); --bs-btn-active-bg: var(--bs-secondary-active-bg); --bs-btn-active-border-color: var(--bs-secondary-active-bg); --bs-btn-disabled-color: var(--bs-on-secondary); --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); }
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--bs-on-secondary); --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-active-color: var(--bs-on-secondary); --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); --bs-btn-disabled-color: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); }
.text-bg-secondary { color: var(--bs-on-secondary) !important; background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-secondary { color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-secondary:hover, .link-secondary:focus { color: color-mix(in oklch, var(--bs-secondary) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-success { --bs-btn-color: var(--bs-on-success); --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-color: var(--bs-on-success); --bs-btn-hover-bg: var(--bs-success-hover-bg); --bs-btn-hover-border-color: var(--bs-success-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); --bs-btn-active-color: var(--bs-on-success); --bs-btn-active-bg: var(--bs-success-active-bg); --bs-btn-active-border-color: var(--bs-success-active-bg); --bs-btn-disabled-color: var(--bs-on-success); --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); }
.btn-outline-success { --bs-btn-color: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-color: var(--bs-on-success); --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); --bs-btn-active-color: var(--bs-on-success); --bs-btn-active-bg: var(--bs-success); --bs-btn-active-border-color: var(--bs-success); --bs-btn-disabled-color: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); }
.text-bg-success { color: var(--bs-on-success) !important; background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-success { color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-success:hover, .link-success:focus { color: color-mix(in oklch, var(--bs-success) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-info { --bs-btn-color: var(--bs-on-info); --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-color: var(--bs-on-info); --bs-btn-hover-bg: var(--bs-info-hover-bg); --bs-btn-hover-border-color: var(--bs-info-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); --bs-btn-active-color: var(--bs-on-info); --bs-btn-active-bg: var(--bs-info-active-bg); --bs-btn-active-border-color: var(--bs-info-active-bg); --bs-btn-disabled-color: var(--bs-on-info); --bs-btn-disabled-bg: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); }
.btn-outline-info { --bs-btn-color: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-color: var(--bs-on-info); --bs-btn-hover-bg: var(--bs-info); --bs-btn-hover-border-color: var(--bs-info); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); --bs-btn-active-color: var(--bs-on-info); --bs-btn-active-bg: var(--bs-info); --bs-btn-active-border-color: var(--bs-info); --bs-btn-disabled-color: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); }
.text-bg-info { color: var(--bs-on-info) !important; background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-info { color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-info:hover, .link-info:focus { color: color-mix(in oklch, var(--bs-info) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-warning { --bs-btn-color: var(--bs-on-warning); --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-color: var(--bs-on-warning); --bs-btn-hover-bg: var(--bs-warning-hover-bg); --bs-btn-hover-border-color: var(--bs-warning-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb); --bs-btn-active-color: var(--bs-on-warning); --bs-btn-active-bg: var(--bs-warning-active-bg); --bs-btn-active-border-color: var(--bs-warning-active-bg); --bs-btn-disabled-color: var(--bs-on-warning); --bs-btn-disabled-bg: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); }
.btn-outline-warning { --bs-btn-color: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-color: var(--bs-on-warning); --bs-btn-hover-bg: var(--bs-warning); --bs-btn-hover-border-color: var(--bs-warning); --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb); --bs-btn-active-color: var(--bs-on-warning); --bs-btn-active-bg: var(--bs-warning); --bs-btn-active-border-color: var(--bs-warning); --bs-btn-disabled-color: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); }
.text-bg-warning { color: var(--bs-on-warning) !important; background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-warning { color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-warning:hover, .link-warning:focus { color: color-mix(in oklch, var(--bs-warning) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-danger { --bs-btn-color: var(--bs-on-danger); --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: var(--bs-on-danger); --bs-btn-hover-bg: var(--bs-danger-hover-bg); --bs-btn-hover-border-color: var(--bs-danger-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-active-color: var(--bs-on-danger); --bs-btn-active-bg: var(--bs-danger-active-bg); --bs-btn-active-border-color: var(--bs-danger-active-bg); --bs-btn-disabled-color: var(--bs-on-danger); --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); }
.btn-outline-danger { --bs-btn-color: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: var(--bs-on-danger); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-active-color: var(--bs-on-danger); --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); --bs-btn-disabled-color: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); }
.text-bg-danger { color: var(--bs-on-danger) !important; background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-danger { color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-danger:hover, .link-danger:focus { color: color-mix(in oklch, var(--bs-danger) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: color-mix(in oklch, var(--bs-primary) 50%, var(--bs-body-bg)); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); }
.nav-pills { --bs-nav-pills-link-active-color: var(--bs-on-primary); --bs-nav-pills-link-active-bg: var(--bs-primary); }
.pagination { --bs-pagination-active-color: var(--bs-on-primary); --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); }
.progress, .progress-stacked { --bs-progress-bar-color: var(--bs-on-primary); --bs-progress-bar-bg: var(--bs-primary); }
.list-group { --bs-list-group-active-color: var(--bs-on-primary); --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-color: var(--bs-on-primary); --bs-dropdown-link-active-bg: var(--bs-primary); }
.text-primary, .link-primary, .link-primary:hover, .link-primary:focus { color: var(--bs-primary-text) !important; text-decoration-color: currentcolor !important; }
.btn-outline-primary { --bs-btn-color: var(--bs-primary-text); --bs-btn-border-color: var(--bs-primary-text); }
.text-secondary, .link-secondary, .link-secondary:hover, .link-secondary:focus { color: var(--bs-secondary-text) !important; text-decoration-color: currentcolor !important; }
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary-text); --bs-btn-border-color: var(--bs-secondary-text); }
:where(a,button,input,textarea,select,[tabindex]):focus-visible { outline: 2px solid var(--bs-indicator); outline-offset: 2px; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--bs-indicator); }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { border-color: var(--bs-indicator); }
/* privacy-policy.html */
.privacy-panel {
min-height: 100svh;
height: auto;
scroll-snap-align: start;
position: relative;
display: grid;
align-items: center;
overflow: visible;
isolation: isolate;
color: var(--panel-text);
}
.privacy-inner {
width: min(1200px, 100%);
margin: 0 auto;
padding: clamp(6rem, 10vh, 8rem) clamp(1.25rem, 5vw, 4rem);
}
.privacy-panel h1 {
max-width: 9ch;
margin: 0 0 1.5rem;
font-size: clamp(3rem, 9vw, 8rem);
line-height: 0.95;
font-weight: 700;
color: var(--panel-text);
}
.privacy-panel h2 {
margin: 0 0 1.25rem;
font-size: clamp(2.5rem, 6vw, 5.5rem);
line-height: 1;
font-weight: 700;
color: var(--panel-text);
}
.privacy-panel h3 {
margin: 0 0 0.65rem;
font-size: 1.2rem;
font-weight: 700;
color: var(--panel-text);
}
.privacy-panel p,
.privacy-panel li {
color: var(--panel-muted);
font-weight: 300;
}
.privacy-lede {
max-width: 39rem;
margin: 0 0 1.75rem;
font-size: clamp(1.15rem, 1.8vw, 1.5rem);
line-height: 1.6;
}
.privacy-panel .privacy-cta {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.8rem 1.35rem;
border: 1px solid var(--panel-accent);
border-radius: 8px;
color: var(--panel-text);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.1em;
text-decoration: none;
text-transform: uppercase;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.privacy-panel .privacy-cta:hover,
.privacy-panel .privacy-cta:focus-visible {
border-color: var(--panel-accent);
background: rgba(214, 133, 193, 0.14);
color: var(--panel-text);
}
.privacy-scroll-cue {
position: absolute;
bottom: 2rem;
left: clamp(1.25rem, 5vw, 4rem);
color: var(--panel-muted);
font-size: 0.75rem;
letter-spacing: 0.18em;
text-decoration: none;
text-transform: uppercase;
}
.privacy-scroll-cue:hover {
color: var(--panel-text);
}
.privacy-hero-art {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
}
.privacy-columns {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
align-items: start;
gap: clamp(2rem, 5vw, 4rem);
}
.privacy-copy {
max-width: 68ch;
}
.privacy-copy p:last-child {
margin-bottom: 0;
}
.privacy-list {
margin: 1rem 0 0;
padding-left: 1.25rem;
}
.privacy-list li {
padding: 0.25rem 0;
}
.privacy-note {
padding: 1.35rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background: rgba(27, 34, 39, 0.55);
color: var(--panel-text);
transition: border-color 0.2s ease;
}
.privacy-note:hover {
border-color: var(--panel-accent);
}
.privacy-note p {
margin: 0;
}
.privacy-rights-list {
display: grid;
gap: 0;
margin-top: 1.75rem;
border-top: 1px solid var(--site-border);
}
.privacy-right {
padding: 1rem 0;
border-bottom: 1px solid var(--site-border);
}
.privacy-right p {
margin: 0;
max-width: 68ch;
}
.privacy-contact-row {
display: flex;
align-items: center;
gap: 1rem;
max-width: 38rem;
margin-top: 1.5rem;
padding: 1rem 1.15rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background: rgba(27, 34, 39, 0.55);
color: var(--panel-text);
text-decoration: none;
transition: border-color 0.2s ease;
}
.privacy-contact-row:hover {
border-color: var(--panel-accent);
color: var(--panel-text);
}
.privacy-contact-row .material-symbols-outlined {
flex: 0 0 auto;
color: var(--panel-accent);
font-size: 1.5rem;
}
.privacy-contact-row strong {
display: block;
color: var(--panel-text);
font-weight: 600;
}
.privacy-contact-row span:last-child {
color: var(--panel-muted);
overflow-wrap: anywhere;
}
.privacy-small {
max-width: 65ch;
margin-top: 1.25rem;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.privacy-columns {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.privacy-inner {
padding-top: 6rem;
padding-bottom: 5rem;
}
}
@media (max-width: 768px), (max-height: 640px) {
.privacy-panel {
scroll-snap-align: start;
}
}
@media (prefers-reduced-motion: reduce) {
.privacy-panel .privacy-cta,
.privacy-note,
.privacy-contact-row {
transition: none;
}
}
/* privacy-policy.html */
/* Footer-scoped styles. The footer continues the dark tonal surface of
the final page panel so the last screen reads as one unit. */
.site-footer {
background-image: radial-gradient(circle at 78% 22%, hsl(268 44% 42% / 0.35) 0%, transparent 60%), linear-gradient(160deg, #12070F 0%, #1B2227 55%, #10161B 100%);
color: #E1F1FF;
border-top: 1px solid rgba(214, 133, 193, 0.28);
padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 1.5rem;
font-weight: 300;
}
.footer-wrap {
max-width: 1200px;
margin: 0 auto;
}
.footer-brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: #E1F1FF;
text-decoration: none;
}
.footer-brand-icon {
font-size: 1.8rem;
color: #D685C1;
}
.footer-brand-name {
font-family: 'Lora', Georgia, serif;
font-size: 1.15rem;
font-weight: 600;
}
.footer-blurb {
max-width: 34ch;
margin: 0.75rem 0 0;
color: #A3B4C1;
font-size: 0.9rem;
}
.footer-heading {
margin: 0 0 1rem;
font-family: 'Lora', Georgia, serif;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #D685C1;
}
.footer-list {
display: grid;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.9rem;
}
.footer-list a {
color: #A3B4C1;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-list a:hover,
.footer-list a:focus-visible {
color: #E1F1FF;
border-bottom-color: #D685C1;
}
.footer-icon {
margin-right: 0.45rem;
font-size: 1.05rem;
vertical-align: -3px;
color: #B594D6;
}
.footer-social {
display: flex;
gap: 0.6rem;
margin-top: 1rem;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid #343B40;
border-radius: 8px;
color: #A3B4C1;
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
border-color: #D685C1;
color: #E1F1FF;
}
.footer-legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 2.25rem;
padding-top: 1.25rem;
border-top: 1px solid #343B40;
}
.footer-copy {
margin: 0;
color: #A3B4C1;
font-size: 0.8rem;
}
.footer-legal-links {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.8rem;
}
.footer-legal-links a {
color: #A3B4C1;
text-decoration: none;
}
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
color: #E1F1FF;
}
/* Cookie consent banner: neutral dark surface, fixed to the viewport */
.cookie-banner {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1080;
padding: 0.9rem 0;
background: #1B2227;
border-top: 1px solid #343B40;
color: #E1F1FF;
}
.cookie-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 5vw, 4rem);
}
.cookie-text {
max-width: 70ch;
font-size: 0.85rem;
color: #A3B4C1;
}
.cookie-btn {
background: transparent;
border: 1px solid #D685C1;
border-radius: 8px;
color: #D685C1;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.cookie-btn:hover,
.cookie-btn:focus-visible {
background: #D685C1;
border-color: #D685C1;
color: #000000;
}
/* terms-and-conditions.html */
/* ==================================================================
Playtime Zone global stylesheet
1) Palette tokens 2) Base typography 3) Snap-panel scaffold
4) Site header + dot rail 5) Reusable panel helpers
================================================================== */
/* --- 1) Palette tokens: light theme is the default ----------------- */
:root {
--site-bg: #F1F8FD;
--site-surface: #F6FBFF;
--site-text: #121C23;
--site-muted: #4C575F;
--site-border: #CAD0D5;
--site-primary: #AC5297;
--site-on-primary: #FFFFFF;
--site-secondary: #F6E1EF;
--site-on-secondary: #000000;
--site-accent: #8868A6;
--site-on-accent: #FFFFFF;
--site-success: #22C55E;
--site-warning: #F59E0B;
--site-error: #EF4444;
--site-info: #3B82F6;
/* Readable foreground roles for links, small text and icons */
--site-primary-text: #AB5196;
--site-secondary-text: #7E6B78;
--site-accent-text: #8464A2;
--site-indicator: #AB5196;
/* Tonal depth roles used for selected moments and tonal panels */
--site-tonal-bg: #FFEEF9;
--site-tonal-surface: #F3D3E9;
--site-tonal-panel: #DFA0CE;
--site-on-tonal-panel: #000000;
--site-category-0: #F6DEEF;
--site-category-1: #EAC4DE;
--site-on-category-0: #000000;
--site-on-category-1: #000000;
--site-tonal-text: #121C23;
--site-tonal-primary-text: #973F84;
--site-tonal-indicator: #AB5196;
/* Compatibility aliases so both naming styles resolve */
--color-bg: var(--site-bg);
--color-surface: var(--site-surface);
--color-text: var(--site-text);
--color-muted: var(--site-muted);
--color-border: var(--site-border);
--color-primary: var(--site-primary);
--color-on-primary: var(--site-on-primary);
--color-secondary: var(--site-secondary);
--color-on-secondary: var(--site-on-secondary);
--color-accent: var(--site-accent);
--color-on-accent: var(--site-on-accent);
--color-primary-text: var(--site-primary-text);
--color-secondary-text: var(--site-secondary-text);
--color-accent-text: var(--site-accent-text);
--color-indicator: var(--site-indicator);
--color-tonal-bg: var(--site-tonal-bg);
--color-tonal-surface: var(--site-tonal-surface);
--color-tonal-panel: var(--site-tonal-panel);
--color-tonal-text: var(--site-tonal-text);
--color-success: var(--site-success);
--color-warning: var(--site-warning);
--color-error: var(--site-error);
--color-info: var(--site-info);
/* Full-bleed panels sit over dark artwork, so they always use the
dark-side text roles regardless of the visitor colour scheme. */
--panel-text: #E1F1FF;
--panel-muted: #A3B4C1;
--panel-accent: #D685C1;
--panel-tint: #12070F;
}
/* --- Dark variant driven by the visitor OS preference ------------- */
@media (prefers-color-scheme: dark) {
:root {
--site-bg: #10161B;
--site-surface: #1B2227;
--site-text: #E1F1FF;
--site-muted: #A3B4C1;
--site-border: #343B40;
--site-primary: #D685C1;
--site-on-primary: #000000;
--site-secondary: #3B2635;
--site-on-secondary: #FFFFFF;
--site-accent: #B594D6;
--site-on-accent: #000000;
--site-primary-text: #D685C1;
--site-secondary-text: #9A8092;
--site-accent-text: #B594D6;
--site-indicator: #D685C1;
--site-tonal-bg: #12070F;
--site-tonal-surface: #2E1729;
--site-tonal-panel: #612C55;
--site-on-tonal-panel: #FFFFFF;
--site-category-0: #32202D;
--site-category-1: #4A2C42;
--site-on-category-0: #FFFFFF;
--site-on-category-1: #FFFFFF;
--site-tonal-text: #E1F1FF;
--site-tonal-primary-text: #D685C1;
--site-tonal-indicator: #D685C1;
}
}
/* --- 2) Base typography ------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html.snap {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
body {
margin: 0;
background-color: var(--site-bg);
color: var(--site-text);
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-weight: 300;
line-height: 1.65;
}
h1,
h2,
h3,
h4 {
font-family: 'Lora', Georgia, 'Times New Roman', serif;
font-weight: 700;
letter-spacing: -0.01em;
}
h1 {
font-size: clamp(3rem, 9vw, 8rem);
line-height: 0.95;
}
h2 {
font-size: clamp(2.5rem, 6vw, 5.5rem);
line-height: 1;
}
.lede {
font-size: clamp(1.15rem, 1.8vw, 1.5rem);
font-weight: 300;
max-width: 38ch;
color: var(--panel-muted);
}
a {
color: var(--site-primary-text);
}
:focus-visible {
outline: 2px solid var(--site-indicator);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
html.snap {
scroll-behavior: auto;
}
}
/* --- 3) Snap-panel scaffold --------------------------------------- */
.panel {
min-height: 100vh;
min-height: 100svh;
height: auto;
scroll-snap-align: start;
position: relative;
display: grid;
align-items: center;
overflow: visible;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
isolation: isolate;
color: var(--panel-text);
}
/* Tonal scrim keeps text legible over every full-bleed background */
.panel::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16, 22, 27, 0.76) 0%, rgba(18, 7, 15, 0.88) 100%);
z-index: -1;
}
.inner {
width: min(1200px, 100%);
margin: 0 auto;
padding: clamp(4rem, 10vh, 8rem) clamp(1.25rem, 5vw, 4rem);
}
/* Distinct full-bleed backgrounds per panel. Page bodies may layer a
game-art image on top by adding background-image in an inline style. */
.bg-1 {
background-image: radial-gradient(circle at 18% 22%, hsl(310 55% 42% / 0.55) 0%, transparent 55%), radial-gradient(circle at 82% 78%, hsl(268 48% 40% / 0.5) 0%, transparent 60%), linear-gradient(150deg, #10161B 0%, #1B2227 45%, #12070F 100%);
}
.bg-2 {
background-image: radial-gradient(circle at 78% 18%, hsl(286 45% 40% / 0.5) 0%, transparent 58%), linear-gradient(120deg, #12070F 0%, #1B2227 60%, #10161B 100%);
}
.bg-3 {
background-image: radial-gradient(circle at 22% 72%, hsl(322 42% 46% / 0.45) 0%, transparent 60%), linear-gradient(200deg, #10161B 0%, #2E1729 55%, #12070F 100%);
}
.bg-4 {
background-image: radial-gradient(circle at 50% 12%, hsl(310 48% 44% / 0.4) 0%, transparent 62%), linear-gradient(160deg, #612C55 0%, #2E1729 48%, #10161B 100%);
}
.bg-5 {
background-image: radial-gradient(circle at 72% 68%, hsl(268 44% 42% / 0.5) 0%, transparent 60%), linear-gradient(140deg, #12070F 0%, #32202D 40%, #10161B 100%);
}
/* --- 4) Site header and fixed dot rail ---------------------------- */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 1035;
}
.site-navbar {
background: linear-gradient(180deg, rgba(16, 22, 27, 0.94) 0%, rgba(16, 22, 27, 0.66) 100%);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(214, 133, 193, 0.28);
}
.site-nav-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
max-width: 1400px;
margin: 0 auto;
padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
position: relative;
}
.brand-lockup {
display: flex;
align-items: center;
gap: 0.7rem;
text-decoration: none;
}
.brand-icon {
font-size: 1.9rem;
color: var(--panel-accent);
}
.brand-name {
display: block;
font-family: 'Lora', Georgia, serif;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.1;
color: var(--panel-text);
}
.brand-tagline {
display: block;
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--panel-muted);
}
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.5rem;
background: transparent;
border: 1px solid rgba(214, 133, 193, 0.45);
border-radius: 8px;
color: var(--panel-text);
line-height: 1;
}
.nav-toggle:hover {
border-color: var(--panel-accent);
color: var(--panel-accent);
}
.nav-menu {
display: none;
}
.nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 1.5rem;
}
.top-nav-link {
color: var(--panel-muted);
text-decoration: none;
font-size: 0.8rem;
font-weight: 400;
letter-spacing: 0.07em;
text-transform: uppercase;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.top-nav-link:hover,
.top-nav-link:focus-visible {
color: var(--panel-text);
border-bottom-color: var(--panel-accent);
}
/* Mobile: the menu drops below the bar and is revealed by the toggle */
@media (max-width: 991.98px) {
.nav-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 1rem clamp(1rem, 5vw, 2rem) 1.5rem;
background: rgba(16, 22, 27, 0.97);
border-bottom: 1px solid var(--site-border);
backdrop-filter: blur(16px);
}
.nav-menu.is-open {
display: flex;
}
.nav-list {
flex-direction: column;
align-items: flex-start;
gap: 0.9rem;
width: 100%;
margin-bottom: 1.25rem;
}
.top-nav-link {
font-size: 0.85rem;
}
}
/* Desktop: menu is always visible and the toggle disappears */
@media (min-width: 992px) {
.nav-menu {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-toggle {
display: none;
}
}
.rail {
position: fixed;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
display: grid;
gap: 0.75rem;
z-index: 1040;
}
.dot {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid currentColor;
color: var(--panel-text);
opacity: 0.6;
transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.dot:hover,
.dot:focus-visible {
opacity: 1;
border-color: var(--panel-accent);
transform: scale(1.15);
}
/* On small or short screens snapping relaxes and the rail is removed */
@media (max-width: 768px), (max-height: 640px) {
html.snap {
scroll-snap-type: y proximity;
}
.rail {
display: none;
}
}
/* --- 5) Reusable panel helpers ------------------------------------ */
.cta {
display: inline-block;
padding: 0.85rem 2rem;
background: transparent;
border: 1px solid var(--panel-accent);
border-radius: 8px;
color: var(--panel-text);
font-family: 'Poppins', sans-serif;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.cta:hover,
.cta:focus-visible {
border-color: var(--panel-accent);
background-color: rgba(214, 133, 193, 0.14);
color: var(--panel-text);
}
.cta-header {
font-size: 0.72rem;
padding: 0.6rem 1.35rem;
}
.scroll-cue {
position: absolute;
bottom: 2rem;
left: clamp(1.25rem, 5vw, 4rem);
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--panel-muted);
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
}
.scroll-cue:hover {
color: var(--panel-text);
}
/* Two-column content grid: one featured visual plus a supporting list */
.two-col {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
align-items: center;
}
@media (max-width: 991.98px) {
.two-col {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.feature-media {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border: 1px solid var(--site-border);
border-radius: 8px;
display: block;
}
/* Thin-bordered selector list rows: no shadow, border shifts on hover */
.feature-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background-color: rgba(27, 34, 39, 0.5);
transition: border-color 0.25s ease;
}
.feature-item:hover {
border-color: var(--panel-accent);
}
.feature-name {
color: var(--panel-text);
font-size: 1rem;
font-weight: 400;
}
.feature-tag {
color: var(--panel-muted);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
}
.stat-row {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-top: 2rem;
}
.stat-number {
display: block;
font-family: 'Lora', Georgia, serif;
font-weight: 700;
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1;
color: var(--panel-accent);
}
.stat-label {
display: block;
margin-top: 0.4rem;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--panel-muted);
}
.pull-quote {
font-family: 'Lora', Georgia, serif;
font-weight: 700;
font-size: clamp(1.75rem, 4vw, 3.5rem);
line-height: 1.15;
color: var(--panel-text);
max-width: 26ch;
margin: 0;
}
.quote-author {
margin-top: 1.5rem;
font-size: 0.9rem;
color: var(--panel-text);
}
.quote-handle {
display: block;
color: var(--panel-muted);
font-size: 0.78rem;
letter-spacing: 0.1em;
}
/* Glass icon tile: only used over busy or coloured backdrops */
.glass-tile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 14px;
}
.glass-tile .material-symbols-outlined {
font-size: 1.6rem;
color: var(--panel-text);
}
.panel-card {
background-color: rgba(27, 34, 39, 0.55);
border: 1px solid var(--site-border);
border-radius: 8px;
backdrop-filter: blur(8px);
transition: border-color 0.25s ease;
}
.panel-card:hover {
border-color: var(--panel-accent);
}
.panel-note {
color: var(--panel-muted);
font-size: 0.9rem;
}
/* Signup field used in the closing CTA panels */
.signup-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
max-width: 520px;
}
.signup-input {
flex: 1 1 240px;
min-height: 48px;
padding: 0.75rem 1rem;
background: rgba(16, 22, 27, 0.6);
border: 1px solid var(--site-border);
border-radius: 8px;
color: var(--panel-text);
font-family: 'Poppins', sans-serif;
font-size: 0.95rem;
}
.signup-input::placeholder {
color: var(--panel-muted);
}
.signup-input:focus {
border-color: var(--site-indicator);
outline: none;
}
/* terms-and-conditions.html */
:root {
--bs-primary: var(--site-primary, #AC5297);
--bs-primary-rgb: 172, 82, 151;
--bs-on-primary: var(--site-on-primary, #FFFFFF);
--bs-primary-hover-bg: color-mix(in oklch, var(--bs-primary) 85%, black);
--bs-primary-active-bg: color-mix(in oklch, var(--bs-primary) 75%, black);
--bs-secondary: var(--site-secondary, #F6E1EF);
--bs-secondary-rgb: 246, 225, 239;
--bs-on-secondary: var(--site-on-secondary, #000000);
--bs-secondary-hover-bg: color-mix(in oklch, var(--bs-secondary) 85%, white);
--bs-secondary-active-bg: color-mix(in oklch, var(--bs-secondary) 75%, white);
--bs-success: var(--site-success, #22C55E);
--bs-success-rgb: 34, 197, 94;
--bs-on-success: #000000;
--bs-success-hover-bg: color-mix(in oklch, var(--bs-success) 85%, white);
--bs-success-active-bg: color-mix(in oklch, var(--bs-success) 75%, white);
--bs-info: var(--site-info, #3B82F6);
--bs-info-rgb: 59, 130, 246;
--bs-on-info: #000000;
--bs-info-hover-bg: color-mix(in oklch, var(--bs-info) 85%, white);
--bs-info-active-bg: color-mix(in oklch, var(--bs-info) 75%, white);
--bs-warning: var(--site-warning, #F59E0B);
--bs-warning-rgb: 245, 158, 11;
--bs-on-warning: #000000;
--bs-warning-hover-bg: color-mix(in oklch, var(--bs-warning) 85%, white);
--bs-warning-active-bg: color-mix(in oklch, var(--bs-warning) 75%, white);
--bs-danger: var(--site-error, #EF4444);
--bs-danger-rgb: 239, 68, 68;
--bs-on-danger: #000000;
--bs-danger-hover-bg: color-mix(in oklch, var(--bs-danger) 85%, white);
--bs-danger-active-bg: color-mix(in oklch, var(--bs-danger) 75%, white);
--bs-body-bg: var(--site-bg, #F1F8FD);
--bs-body-bg-rgb: 241, 248, 253;
--bs-body-color: var(--site-text, #121C23);
--bs-body-color-rgb: 18, 28, 35;
--bs-emphasis-color: var(--site-text, #121C23);
--bs-emphasis-color-rgb: 18, 28, 35;
--bs-secondary-color: var(--site-muted, #4C575F);
--bs-secondary-color-rgb: 76, 87, 95;
--bs-tertiary-color: var(--site-muted, #4C575F);
--bs-tertiary-color-rgb: 76, 87, 95;
--bs-secondary-bg: var(--site-surface, #F6FBFF);
--bs-secondary-bg-rgb: 246, 251, 255;
--bs-tertiary-bg: var(--site-surface, #F6FBFF);
--bs-tertiary-bg-rgb: 246, 251, 255;
--bs-border-color: var(--site-border, #CAD0D5);
--bs-link-color-rgb: 171, 81, 150;
--bs-link-hover-color: #AB5196;
--bs-link-hover-color-rgb: 171, 81, 150;
--site-primary-text: #AB5196;
--color-primary-text: #AB5196;
--bs-primary-text: #AB5196;
--site-secondary-text: #7E6B78;
--color-secondary-text: #7E6B78;
--bs-secondary-text: #7E6B78;
--site-accent-text: #8464A2;
--color-accent-text: #8464A2;
--bs-accent-text: #8464A2;
--site-indicator: #AB5196;
--color-indicator: #AB5196;
--bs-indicator: #AB5196;
--bs-link-color: var(--bs-primary-text, var(--bs-primary));
--bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
--bs-primary-text-emphasis: color-mix(in oklch, var(--bs-primary) 60%, var(--bs-body-color));
--bs-primary-bg-subtle: color-mix(in oklch, var(--bs-primary) 15%, var(--bs-body-bg));
--bs-primary-border-subtle: color-mix(in oklch, var(--bs-primary) 40%, var(--bs-body-bg));
--bs-secondary-text-emphasis: color-mix(in oklch, var(--bs-secondary) 60%, var(--bs-body-color));
--bs-secondary-bg-subtle: color-mix(in oklch, var(--bs-secondary) 15%, var(--bs-body-bg));
--bs-secondary-border-subtle: color-mix(in oklch, var(--bs-secondary) 40%, var(--bs-body-bg));
}
@media (prefers-color-scheme: dark) {
:root {
--bs-primary: var(--site-primary, #D685C1);
--bs-primary-rgb: 214, 133, 193;
--bs-on-primary: var(--site-on-primary, #000000);
--bs-primary-hover-bg: color-mix(in oklch, var(--bs-primary) 85%, white);
--bs-primary-active-bg: color-mix(in oklch, var(--bs-primary) 75%, white);
--bs-secondary: var(--site-secondary, #3B2635);
--bs-secondary-rgb: 59, 38, 53;
--bs-on-secondary: var(--site-on-secondary, #FFFFFF);
--bs-secondary-hover-bg: color-mix(in oklch, var(--bs-secondary) 85%, black);
--bs-secondary-active-bg: color-mix(in oklch, var(--bs-secondary) 75%, black);
--bs-success: var(--site-success, #22C55E);
--bs-success-rgb: 34, 197, 94;
--bs-on-success: #000000;
--bs-success-hover-bg: color-mix(in oklch, var(--bs-success) 85%, white);
--bs-success-active-bg: color-mix(in oklch, var(--bs-success) 75%, white);
--bs-info: var(--site-info, #3B82F6);
--bs-info-rgb: 59, 130, 246;
--bs-on-info: #000000;
--bs-info-hover-bg: color-mix(in oklch, var(--bs-info) 85%, white);
--bs-info-active-bg: color-mix(in oklch, var(--bs-info) 75%, white);
--bs-warning: var(--site-warning, #F59E0B);
--bs-warning-rgb: 245, 158, 11;
--bs-on-warning: #000000;
--bs-warning-hover-bg: color-mix(in oklch, var(--bs-warning) 85%, white);
--bs-warning-active-bg: color-mix(in oklch, var(--bs-warning) 75%, white);
--bs-danger: var(--site-error, #EF4444);
--bs-danger-rgb: 239, 68, 68;
--bs-on-danger: #000000;
--bs-danger-hover-bg: color-mix(in oklch, var(--bs-danger) 85%, white);
--bs-danger-active-bg: color-mix(in oklch, var(--bs-danger) 75%, white);
--bs-body-bg: var(--site-bg, #10161B);
--bs-body-bg-rgb: 16, 22, 27;
--bs-body-color: var(--site-text, #E1F1FF);
--bs-body-color-rgb: 225, 241, 255;
--bs-emphasis-color: var(--site-text, #E1F1FF);
--bs-emphasis-color-rgb: 225, 241, 255;
--bs-secondary-color: var(--site-muted, #A3B4C1);
--bs-secondary-color-rgb: 163, 180, 193;
--bs-tertiary-color: var(--site-muted, #A3B4C1);
--bs-tertiary-color-rgb: 163, 180, 193;
--bs-secondary-bg: var(--site-surface, #1B2227);
--bs-secondary-bg-rgb: 27, 34, 39;
--bs-tertiary-bg: var(--site-surface, #1B2227);
--bs-tertiary-bg-rgb: 27, 34, 39;
--bs-border-color: var(--site-border, #343B40);
--bs-link-color-rgb: 214, 133, 193;
--bs-link-hover-color: #D685C1;
--bs-link-hover-color-rgb: 214, 133, 193;
--site-primary-text: #D685C1;
--color-primary-text: #D685C1;
--bs-primary-text: #D685C1;
--site-secondary-text: #9A8092;
--color-secondary-text: #9A8092;
--bs-secondary-text: #9A8092;
--site-accent-text: #B594D6;
--color-accent-text: #B594D6;
--bs-accent-text: #B594D6;
--site-indicator: #D685C1;
--color-indicator: #D685C1;
--bs-indicator: #D685C1;
}
}
.btn-primary { --bs-btn-color: var(--bs-on-primary); --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-on-primary); --bs-btn-hover-bg: var(--bs-primary-hover-bg); --bs-btn-hover-border-color: var(--bs-primary-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-on-primary); --bs-btn-active-bg: var(--bs-primary-active-bg); --bs-btn-active-border-color: var(--bs-primary-active-bg); --bs-btn-disabled-color: var(--bs-on-primary); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); }
.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-on-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-on-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); }
.text-bg-primary { color: var(--bs-on-primary) !important; background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-primary { color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-primary:hover, .link-primary:focus { color: color-mix(in oklch, var(--bs-primary) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-secondary { --bs-btn-color: var(--bs-on-secondary); --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--bs-on-secondary); --bs-btn-hover-bg: var(--bs-secondary-hover-bg); --bs-btn-hover-border-color: var(--bs-secondary-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-active-color: var(--bs-on-secondary); --bs-btn-active-bg: var(--bs-secondary-active-bg); --bs-btn-active-border-color: var(--bs-secondary-active-bg); --bs-btn-disabled-color: var(--bs-on-secondary); --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); }
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--bs-on-secondary); --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-active-color: var(--bs-on-secondary); --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); --bs-btn-disabled-color: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); }
.text-bg-secondary { color: var(--bs-on-secondary) !important; background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-secondary { color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-secondary:hover, .link-secondary:focus { color: color-mix(in oklch, var(--bs-secondary) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-success { --bs-btn-color: var(--bs-on-success); --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-color: var(--bs-on-success); --bs-btn-hover-bg: var(--bs-success-hover-bg); --bs-btn-hover-border-color: var(--bs-success-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); --bs-btn-active-color: var(--bs-on-success); --bs-btn-active-bg: var(--bs-success-active-bg); --bs-btn-active-border-color: var(--bs-success-active-bg); --bs-btn-disabled-color: var(--bs-on-success); --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); }
.btn-outline-success { --bs-btn-color: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-color: var(--bs-on-success); --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); --bs-btn-active-color: var(--bs-on-success); --bs-btn-active-bg: var(--bs-success); --bs-btn-active-border-color: var(--bs-success); --bs-btn-disabled-color: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); }
.text-bg-success { color: var(--bs-on-success) !important; background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-success { color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-success:hover, .link-success:focus { color: color-mix(in oklch, var(--bs-success) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-info { --bs-btn-color: var(--bs-on-info); --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-color: var(--bs-on-info); --bs-btn-hover-bg: var(--bs-info-hover-bg); --bs-btn-hover-border-color: var(--bs-info-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); --bs-btn-active-color: var(--bs-on-info); --bs-btn-active-bg: var(--bs-info-active-bg); --bs-btn-active-border-color: var(--bs-info-active-bg); --bs-btn-disabled-color: var(--bs-on-info); --bs-btn-disabled-bg: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); }
.btn-outline-info { --bs-btn-color: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-color: var(--bs-on-info); --bs-btn-hover-bg: var(--bs-info); --bs-btn-hover-border-color: var(--bs-info); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); --bs-btn-active-color: var(--bs-on-info); --bs-btn-active-bg: var(--bs-info); --bs-btn-active-border-color: var(--bs-info); --bs-btn-disabled-color: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); }
.text-bg-info { color: var(--bs-on-info) !important; background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-info { color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-info:hover, .link-info:focus { color: color-mix(in oklch, var(--bs-info) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-warning { --bs-btn-color: var(--bs-on-warning); --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-color: var(--bs-on-warning); --bs-btn-hover-bg: var(--bs-warning-hover-bg); --bs-btn-hover-border-color: var(--bs-warning-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb); --bs-btn-active-color: var(--bs-on-warning); --bs-btn-active-bg: var(--bs-warning-active-bg); --bs-btn-active-border-color: var(--bs-warning-active-bg); --bs-btn-disabled-color: var(--bs-on-warning); --bs-btn-disabled-bg: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); }
.btn-outline-warning { --bs-btn-color: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-color: var(--bs-on-warning); --bs-btn-hover-bg: var(--bs-warning); --bs-btn-hover-border-color: var(--bs-warning); --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb); --bs-btn-active-color: var(--bs-on-warning); --bs-btn-active-bg: var(--bs-warning); --bs-btn-active-border-color: var(--bs-warning); --bs-btn-disabled-color: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); }
.text-bg-warning { color: var(--bs-on-warning) !important; background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-warning { color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-warning:hover, .link-warning:focus { color: color-mix(in oklch, var(--bs-warning) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.btn-danger { --bs-btn-color: var(--bs-on-danger); --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: var(--bs-on-danger); --bs-btn-hover-bg: var(--bs-danger-hover-bg); --bs-btn-hover-border-color: var(--bs-danger-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-active-color: var(--bs-on-danger); --bs-btn-active-bg: var(--bs-danger-active-bg); --bs-btn-active-border-color: var(--bs-danger-active-bg); --bs-btn-disabled-color: var(--bs-on-danger); --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); }
.btn-outline-danger { --bs-btn-color: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: var(--bs-on-danger); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-active-color: var(--bs-on-danger); --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); --bs-btn-disabled-color: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); }
.text-bg-danger { color: var(--bs-on-danger) !important; background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-danger { color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-danger:hover, .link-danger:focus { color: color-mix(in oklch, var(--bs-danger) 75%, var(--bs-body-color)) !important; text-decoration-color: currentcolor !important; }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: color-mix(in oklch, var(--bs-primary) 50%, var(--bs-body-bg)); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); }
.nav-pills { --bs-nav-pills-link-active-color: var(--bs-on-primary); --bs-nav-pills-link-active-bg: var(--bs-primary); }
.pagination { --bs-pagination-active-color: var(--bs-on-primary); --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); }
.progress, .progress-stacked { --bs-progress-bar-color: var(--bs-on-primary); --bs-progress-bar-bg: var(--bs-primary); }
.list-group { --bs-list-group-active-color: var(--bs-on-primary); --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-color: var(--bs-on-primary); --bs-dropdown-link-active-bg: var(--bs-primary); }
.text-primary, .link-primary, .link-primary:hover, .link-primary:focus { color: var(--bs-primary-text) !important; text-decoration-color: currentcolor !important; }
.btn-outline-primary { --bs-btn-color: var(--bs-primary-text); --bs-btn-border-color: var(--bs-primary-text); }
.text-secondary, .link-secondary, .link-secondary:hover, .link-secondary:focus { color: var(--bs-secondary-text) !important; text-decoration-color: currentcolor !important; }
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary-text); --bs-btn-border-color: var(--bs-secondary-text); }
:where(a,button,input,textarea,select,[tabindex]):focus-visible { outline: 2px solid var(--bs-indicator); outline-offset: 2px; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--bs-indicator); }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { border-color: var(--bs-indicator); }
/* terms-and-conditions.html */
.legal-panel .inner {
width: min(1120px, 100%);
padding-top: clamp(5.5rem, 10vh, 7rem);
padding-bottom: clamp(4rem, 8vh, 6rem);
}
.legal-panel h1,
.legal-panel h2 {
color: var(--panel-text);
font-weight: 700;
margin-bottom: 1.25rem;
}
.legal-panel h1 {
max-width: 9ch;
}
.legal-panel h2 {
max-width: 16ch;
}
.legal-copy {
max-width: 76ch;
color: var(--panel-muted);
font-size: 1rem;
line-height: 1.85;
}
.legal-copy p {
margin: 0 0 1rem;
}
.legal-copy strong {
color: var(--panel-text);
font-weight: 600;
}
.legal-kicker {
color: var(--panel-accent);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.2em;
margin-bottom: 1rem;
text-transform: uppercase;
}
.legal-hero {
position: relative;
isolation: isolate;
}
.legal-hero::before {
background: linear-gradient(90deg, rgba(16, 22, 27, 0.91) 0%, rgba(18, 7, 15, 0.76) 58%, rgba(18, 7, 15, 0.68) 100%);
}
.legal-hero-image {
position: absolute;
z-index: -2;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.legal-hero .inner {
position: relative;
z-index: 1;
}
.legal-outline-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0.7rem 1.35rem;
border: 1px solid var(--panel-accent);
border-radius: 8px;
color: var(--panel-text);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
text-decoration: none;
text-transform: uppercase;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.legal-outline-link:hover,
.legal-outline-link:focus-visible {
background-color: rgba(214, 133, 193, 0.14);
border-color: var(--panel-accent);
color: var(--panel-text);
}
.legal-list {
border-top: 1px solid var(--site-border);
list-style: none;
margin: 1.5rem 0 0;
max-width: 740px;
padding: 0;
}
.legal-list li {
border-bottom: 1px solid var(--site-border);
color: var(--panel-muted);
line-height: 1.8;
padding: 1rem 0;
}
.legal-list strong {
color: var(--panel-text);
display: block;
font-weight: 600;
margin-bottom: 0.2rem;
}
.legal-columns {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
gap: clamp(2rem, 6vw, 5rem);
align-items: start;
}
.contact-panel {
background: var(--color-tonal-panel);
border: 1px solid var(--site-border);
border-radius: 8px;
color: var(--color-on-tonal-panel);
padding: clamp(1.25rem, 3vw, 2rem);
}
.contact-panel h3 {
color: var(--color-on-tonal-panel);
font-size: 1.35rem;
font-weight: 700;
margin: 0 0 1rem;
}
.contact-row {
align-items: flex-start;
border-top: 1px solid var(--site-border);
display: flex;
gap: 0.85rem;
line-height: 1.6;
padding: 0.85rem 0;
}
.contact-row .material-symbols-outlined {
color: var(--color-on-tonal-panel);
flex: 0 0 auto;
font-size: 1.25rem;
margin-top: 0.1rem;
}
.contact-row a {
color: var(--color-on-tonal-panel);
overflow-wrap: anywhere;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.closing-inner {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100svh;
}
.legal-footer {
align-items: center;
border-top: 1px solid var(--site-border);
color: var(--panel-muted);
display: flex;
flex-wrap: wrap;
font-size: 0.78rem;
gap: 0.75rem 1.5rem;
justify-content: space-between;
margin-top: auto;
padding-top: 1.25rem;
}
.legal-footer a {
color: var(--panel-text);
text-decoration-color: var(--panel-accent);
text-underline-offset: 3px;
}
.legal-footer-links {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
@media (max-width: 767.98px) {
.legal-panel .inner {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.legal-columns {
grid-template-columns: 1fr;
}
.closing-inner {
min-height: 100svh;
}
.legal-footer {
align-items: flex-start;
flex-direction: column;
}
}
/* terms-and-conditions.html */
/* Footer-scoped styles. The footer continues the dark tonal surface of
the final page panel so the last screen reads as one unit. */
.site-footer {
background-image: radial-gradient(circle at 78% 22%, hsl(268 44% 42% / 0.35) 0%, transparent 60%), linear-gradient(160deg, #12070F 0%, #1B2227 55%, #10161B 100%);
color: #E1F1FF;
border-top: 1px solid rgba(214, 133, 193, 0.28);
padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 1.5rem;
font-weight: 300;
}
.footer-wrap {
max-width: 1200px;
margin: 0 auto;
}
.footer-brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: #E1F1FF;
text-decoration: none;
}
.footer-brand-icon {
font-size: 1.8rem;
color: #D685C1;
}
.footer-brand-name {
font-family: 'Lora', Georgia, serif;
font-size: 1.15rem;
font-weight: 600;
}
.footer-blurb {
max-width: 34ch;
margin: 0.75rem 0 0;
color: #A3B4C1;
font-size: 0.9rem;
}
.footer-heading {
margin: 0 0 1rem;
font-family: 'Lora', Georgia, serif;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #D685C1;
}
.footer-list {
display: grid;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.9rem;
}
.footer-list a {
color: #A3B4C1;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-list a:hover,
.footer-list a:focus-visible {
color: #E1F1FF;
border-bottom-color: #D685C1;
}
.footer-icon {
margin-right: 0.45rem;
font-size: 1.05rem;
vertical-align: -3px;
color: #B594D6;
}
.footer-social {
display: flex;
gap: 0.6rem;
margin-top: 1rem;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid #343B40;
border-radius: 8px;
color: #A3B4C1;
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
border-color: #D685C1;
color: #E1F1FF;
}
.footer-legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 2.25rem;
padding-top: 1.25rem;
border-top: 1px solid #343B40;
}
.footer-copy {
margin: 0;
color: #A3B4C1;
font-size: 0.8rem;
}
.footer-legal-links {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.8rem;
}
.footer-legal-links a {
color: #A3B4C1;
text-decoration: none;
}
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
color: #E1F1FF;
}
/* Cookie consent banner: neutral dark surface, fixed to the viewport */
.cookie-banner {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1080;
padding: 0.9rem 0;
background: #1B2227;
border-top: 1px solid #343B40;
color: #E1F1FF;
}
.cookie-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 5vw, 4rem);
}
.cookie-text {
max-width: 70ch;
font-size: 0.85rem;
color: #A3B4C1;
}
.cookie-btn {
background: transparent;
border: 1px solid #D685C1;
border-radius: 8px;
color: #D685C1;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.cookie-btn:hover,
.cookie-btn:focus-visible {
background: #D685C1;
border-color: #D685C1;
color: #000000;
}
html.snap { scroll-snap-type: none !important; }
html.snap * { scroll-snap-align: none !important; }