/* ============================================================
HOLIDY SPICE, Static Site
Landsraad classical palette + Cinzel typography
============================================================ */
/* Google Fonts (Cinzel + Inter) loaded via in each page's
instead of @import here — avoids the render-blocking serialization where
styles.css has to download AND parse before the browser starts fetching
fonts. The display=swap parameter is set on the link tag instead. */
:root {
color-scheme: dark;
--void: #0d1217;
--void-soft: #1c2330;
--void-line: #5a4d28;
--sand: #c9a96e;
--sand-dim: rgba(201, 169, 110, 0.6);
--spice: #c9a96e;
--spice-bright: #d4b87a;
--ochre: #b8651f;
--pale: #cab891;
--pale-dim: rgba(202, 184, 145, 0.7);
--font-display: 'Cinzel', serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'Cinzel', serif;
--max-width: 1200px;
/* Fluid spacing, scales smoothly between phone and desktop */
--gutter: clamp(1.15rem, 4vw, 1.5rem);
--section-pad: clamp(2.75rem, 6vw, 4.5rem);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 6rem; /* keep anchored content clear of the sticky nav */
}
body {
font-family: var(--font-body);
font-weight: 400;
font-size: 1rem;
line-height: 1.65;
color: var(--pale);
background: var(--void);
min-height: 100vh;
overflow-x: hidden;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
text-rendering: optimizeLegibility;
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(201, 168, 122, 0.08) 0%, transparent 55%),
radial-gradient(ellipse at 80% 70%, rgba(184, 101, 31, 0.06) 0%, transparent 55%),
linear-gradient(180deg, var(--void) 0%, var(--void-soft) 100%);
}
body > * {
position: relative;
z-index: 1;
}
/* === Typography === */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.05;
color: var(--pale);
text-wrap: balance; /* nicer multi-line heading breaks */
}
h1 {
font-size: clamp(2.5rem, 7vw, 5.5rem);
letter-spacing: 0.08em;
font-weight: 900;
}
h2 {
font-size: clamp(1.75rem, 4vw, 3rem);
margin-bottom: 1rem;
}
h3 {
font-size: clamp(1.25rem, 2.5vw, 1.6rem);
letter-spacing: 0.06em;
color: var(--sand);
margin-bottom: 0.75rem;
}
h4 {
font-size: 1rem;
letter-spacing: 0.15em;
color: var(--sand-dim);
}
p {
margin-bottom: 1.25em;
color: var(--pale-dim);
text-wrap: pretty; /* avoid orphans/awkward last-line breaks */
}
a {
color: var(--spice);
text-decoration: none;
border-bottom: 1px solid rgba(184, 101, 31, 0.35);
transition: border-color 0.2s ease, color 0.2s ease;
}
a:hover {
color: var(--spice-bright);
border-bottom-color: var(--spice-bright);
}
code, .mono {
font-family: var(--font-mono);
font-size: 0.95em;
background: rgba(201, 168, 122, 0.08);
color: var(--sand);
padding: 0.15em 0.4em;
border: 1px solid rgba(201, 168, 122, 0.15);
}
strong {
color: var(--pale);
font-weight: 600;
}
/* === Layout === */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--gutter);
}
section {
padding: var(--section-pad) 0;
border-bottom: 1px solid var(--void-line);
scroll-margin-top: 5.5rem;
}
section:last-of-type {
border-bottom: none;
}
/* Home page: remove all section dividers for a continuous flow */
.page-home .hero,
.page-home section {
border-bottom: none;
}
/* Home page: tighter vertical rhythm between sections */
.page-home .hero {
padding-bottom: 1rem;
}
.page-home section {
padding: 0.75rem 0;
}
.page-home section:last-of-type {
padding-bottom: 3rem;
}
/* === Navigation === */
nav.site-nav {
position: sticky;
top: 0;
background: rgba(13, 18, 23, 0.82);
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
border-bottom: 1px solid rgba(201, 168, 122, 0.14);
z-index: 100;
}
.nav-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 1rem var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.nav-left {
display: flex;
align-items: center;
gap: 1.5rem;
}
.nav-home {
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--pale-dim);
border: none;
padding: 0.5em 0;
text-decoration: none;
transition: color 0.2s ease;
}
.nav-home:hover,
.nav-home.active {
color: var(--spice);
}
.nav-brand {
font-family: var(--font-display);
font-weight: 900;
font-size: 1.1rem;
letter-spacing: 0.18em;
color: var(--pale);
text-transform: uppercase;
border: none;
display: flex;
align-items: center;
}
.nav-brand:hover {
color: var(--spice);
border: none;
}
.brand-logo {
height: 56px;
width: auto;
display: block;
transition: opacity 0.2s ease;
}
.nav-brand:hover .brand-logo {
opacity: 0.7;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
flex-wrap: wrap;
justify-content: flex-end;
}
.nav-links a {
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--pale-dim);
border: none;
padding: 0.5em 0;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--spice);
}
/* === Hero === */
.hero {
padding: 6rem 0 4rem;
text-align: center;
border-bottom: 1px solid var(--void-line);
position: relative;
}
.hero-home {
background:
linear-gradient(180deg, rgba(10, 9, 8, 0.7) 0%, rgba(10, 9, 8, 0.9) 100%),
url('images/events/night-formation.jpg') center 40%/cover no-repeat;
}
.hero-join {
padding: 6rem 0 3rem;
background:
linear-gradient(180deg, rgba(10, 9, 8, 0.82) 0%, rgba(10, 9, 8, 0.95) 100%),
url('images/protection-sardaukar.png') center 30%/cover no-repeat;
}
.hero-server-info {
padding: 6rem 0 3rem;
background:
linear-gradient(180deg, rgba(10, 9, 8, 0.72) 0%, rgba(10, 9, 8, 0.92) 100%),
url('images/events/spice-eruption-cinematic.jpg') center 50%/cover no-repeat;
}
.hero-donate {
padding: 6rem 0 3rem;
background:
linear-gradient(180deg, rgba(10, 9, 8, 0.78) 0%, rgba(10, 9, 8, 0.92) 100%),
url('images/protection-prosperity.png') center 60%/cover no-repeat;
}
/* === Pricing cards === */
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin: 3rem 0;
}
.price-card {
position: relative;
padding: 2.5rem 2rem;
border: 1px solid var(--void-line);
background: rgba(26, 22, 20, 0.6);
display: flex;
flex-direction: column;
text-align: center;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.price-card:hover {
border-color: var(--sand);
transform: translateY(-2px);
}
.price-card-featured {
border-color: var(--spice);
background: rgba(184, 101, 31, 0.06);
}
.price-card-featured:hover {
border-color: var(--spice-bright);
}
.price-tag {
position: absolute;
top: -0.7rem;
left: 50%;
transform: translateX(-50%);
background: var(--spice);
color: var(--void);
padding: 0.3em 1em;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
}
.price-label {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--sand-dim);
margin-bottom: 0.75rem;
}
.price-amount {
font-family: var(--font-display);
font-size: 3.5rem;
font-weight: 900;
color: var(--pale);
letter-spacing: 0.04em;
line-height: 1;
margin-bottom: 1rem;
}
.price-description {
font-size: 0.95rem;
margin-bottom: 2rem;
flex-grow: 1;
}
.price-card .btn {
width: 100%;
text-align: center;
}
/* === Sietch cards === */
.sietch-section {
margin-top: 2.5rem;
}
.sietch-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 0.5rem;
}
.sietch-section-head h2 {
margin-bottom: 0;
}
.sietch-section-meta {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sand-dim);
}
.sietch-section > p {
margin-bottom: 1.5rem;
}
.sietch-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 1rem;
margin: 0 0 1rem;
}
.sietch-card {
position: relative;
padding: 1.5rem 1.25rem 1.25rem;
border: 1px solid var(--void-line);
background: rgba(26, 22, 20, 0.55);
transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
/* Button reset */
cursor: pointer;
width: 100%;
text-align: left;
font-family: inherit;
font-size: inherit;
color: inherit;
display: block;
font: inherit;
}
.sietch-card:focus-visible {
outline: 2px solid var(--spice);
outline-offset: 2px;
}
/* === Sietch detail modal === */
.sietch-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.sietch-modal[hidden] {
display: none;
}
.sietch-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(10, 9, 8, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.sietch-modal-content {
position: relative;
max-width: 620px;
width: 100%;
max-height: 85vh;
overflow-y: auto;
background: var(--void-soft);
border: 1px solid var(--sand);
padding: 3rem 2.5rem 2.5rem;
animation: modalIn 0.3s ease;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
@keyframes modalIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.sietch-modal-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 2.5rem;
height: 2.5rem;
background: transparent;
border: 1px solid var(--void-line);
color: var(--pale);
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
transition: all 0.2s ease;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
}
.sietch-modal-close:hover,
.sietch-modal-close:focus-visible {
border-color: var(--spice);
color: var(--spice);
outline: none;
}
.sietch-modal-type {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--spice);
margin-bottom: 0.75rem;
}
.sietch-modal-name {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(2.5rem, 6vw, 3.5rem);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pale);
line-height: 1;
margin-bottom: 1.25rem;
}
.sietch-modal-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.75rem;
}
.sietch-modal-tag {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sand);
background: rgba(201, 168, 122, 0.08);
border: 1px solid var(--sand-dim);
padding: 0.35em 0.8em;
}
.sietch-modal-tag-spice {
color: var(--spice);
background: rgba(184, 101, 31, 0.12);
border-color: var(--spice);
}
.sietch-modal-body {
color: var(--pale-dim);
line-height: 1.7;
}
.sietch-modal-body p {
margin-bottom: 1rem;
}
.sietch-modal-body p:last-child {
margin-bottom: 0;
}
.sietch-modal-footer {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--void-line);
}
body.modal-open {
overflow: hidden;
}
@media (max-width: 720px) {
.sietch-modal { padding: 0.75rem; }
.sietch-modal-content { padding: 3rem 1.5rem 1.75rem; }
}
.sietch-card:hover {
border-color: var(--sand);
background: rgba(26, 22, 20, 0.85);
transform: translateY(-2px);
}
.sietch-card-rp {
border-left: 3px solid var(--spice);
}
.sietch-card-storm-now {
border-color: var(--spice);
background: rgba(184, 101, 31, 0.08);
}
.sietch-tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--spice);
background: rgba(184, 101, 31, 0.12);
padding: 0.2em 0.55em;
border: 1px solid var(--spice);
font-weight: 500;
margin-bottom: 0.6rem;
}
.sietch-name {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.4rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pale);
margin-bottom: 0.5rem;
line-height: 1;
}
.sietch-meta {
display: flex;
align-items: baseline;
gap: 0.45rem;
}
.sietch-cap {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 800;
color: var(--sand);
line-height: 1;
}
.sietch-cap-label {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sand-dim);
}
/* === Stat banner === */
.stat-banner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0;
margin: 2.5rem 0 3rem;
border: 1px solid rgba(201, 169, 110, 0.28);
border-radius: 4px;
background:
linear-gradient(180deg, rgba(201, 169, 110, 0.05), rgba(201, 169, 110, 0) 55%),
rgba(26, 22, 20, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.stat-banner-item {
padding: 1.45rem 1rem 1.35rem;
text-align: center;
border-right: 1px solid rgba(201, 169, 110, 0.14);
transition: background 0.25s ease;
}
.stat-banner-item:hover { background: rgba(201, 169, 110, 0.05); }
.stat-banner-item:last-child { border-right: none; }
.stat-banner-num {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3vw, 2.3rem);
font-weight: 900;
color: var(--pale);
line-height: 1;
margin-bottom: 0.4rem;
text-shadow: 0 1px 6px rgba(201, 169, 110, 0.22);
}
.stat-banner-label {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sand-dim);
}
/* === Rules cards (Discord standards) === */
.standards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
margin-top: 2rem;
}
.standard-card {
padding: 1.5rem;
border: 1px solid var(--void-line);
background: rgba(26, 22, 20, 0.4);
border-top: 2px solid var(--sand);
}
.standard-card h3 {
font-size: 1rem;
letter-spacing: 0.1em;
color: var(--pale);
margin-bottom: 0.75rem;
}
.standard-card ul {
list-style: none;
padding: 0;
}
.standard-card li {
font-size: 0.9rem;
color: var(--pale-dim);
padding: 0.35rem 0 0.35rem 1.25rem;
position: relative;
}
.standard-card li::before {
content: '◦';
position: absolute;
left: 0;
color: var(--spice);
font-size: 1.2rem;
line-height: 0.9;
}
/* === Personas (home page) === */
.personas-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
margin-top: 2.5rem;
}
.persona-card {
position: relative;
padding: 2rem 1.75rem;
border: 1px solid var(--void-line);
background: rgba(26, 22, 20, 0.5);
transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.persona-card:hover {
border-color: var(--sand);
background: rgba(26, 22, 20, 0.8);
transform: translateY(-2px);
}
.persona-label {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--spice);
margin-bottom: 0.75rem;
}
.persona-title {
font-size: 1.15rem;
color: var(--pale);
letter-spacing: 0.06em;
margin-bottom: 0.75rem;
text-transform: none;
}
.persona-card p {
margin-bottom: 0;
font-size: 0.95rem;
}
/* === Section footnote (smaller inline notice) === */
.section-footnote {
display: block;
margin-top: 2.5rem;
padding: 1.25rem 1.5rem;
border-left: 2px solid var(--spice);
background: rgba(26, 22, 20, 0.4);
font-size: 0.9rem;
color: var(--pale-dim);
line-height: 1.6;
}
.section-footnote-label {
display: block;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--spice);
margin-bottom: 0.4rem;
}
.section-footnote-body {
display: block;
color: var(--pale-dim);
}
/* === Notice block === */
.notice {
padding: 2rem;
border: 1px solid var(--sand);
background: rgba(201, 168, 122, 0.06);
position: relative;
}
.notice-label {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--spice);
margin-bottom: 0.6rem;
}
.notice h3 {
color: var(--pale);
margin-bottom: 0.75rem;
font-size: 1.3rem;
letter-spacing: 0.04em;
}
.notice p {
margin: 0;
}
/* === Community page === */
.hero-community {
padding: 6rem 0 3rem;
background:
linear-gradient(180deg, rgba(10, 9, 8, 0.7) 0%, rgba(10, 9, 8, 0.92) 100%),
url('images/events/thopter-convoy-wide.jpg') center 35%/cover no-repeat;
}
.event-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
margin: 2.5rem 0;
}
.event-card {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--void-soft);
border: 1px solid var(--void-line);
margin: 0;
transition: border-color 0.25s ease;
}
.event-card:hover {
border-color: var(--sand);
}
.event-card-feature {
grid-column: 1 / -1;
aspect-ratio: 21 / 9;
}
.event-card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease, filter 0.3s ease;
filter: brightness(0.92);
}
.event-card:hover img {
transform: scale(1.04);
filter: brightness(1);
}
.event-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.25rem 1.5rem 1.25rem;
background: linear-gradient(0deg, rgba(10, 9, 8, 0.95) 0%, rgba(10, 9, 8, 0.6) 60%, transparent 100%);
pointer-events: none;
}
.event-caption-label {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--spice);
margin-bottom: 0.2rem;
}
.event-caption-title {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pale);
}
/* === Guild Spotlight === */
.guild-spotlight-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
margin: 2.5rem 0 1rem;
}
.guild-spotlight {
position: relative;
padding: 3rem 2rem 2rem;
border: 1px solid var(--sand);
background: rgba(26, 22, 20, 0.7);
text-align: center;
display: flex;
flex-direction: column;
}
.guild-spotlight .btn {
align-self: center;
margin-top: auto;
}
.guild-spotlight-tag {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
background: var(--spice);
color: var(--void);
padding: 0.4em 1em;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
}
.guild-spotlight-name {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(2rem, 5vw, 3rem);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pale);
line-height: 1;
margin-bottom: 0.5rem;
}
/* Modifier for unusually long guild names that would otherwise overflow the card */
.guild-spotlight-name.is-long {
font-size: clamp(1.5rem, 3.4vw, 2.1rem);
letter-spacing: 0.04em;
line-height: 1.05;
}
.guild-spotlight-expand {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--sand-dim);
margin-bottom: 1.5rem;
}
.guild-spotlight-motto {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--sand);
margin-bottom: 1.5rem;
letter-spacing: 0.02em;
}
.guild-spotlight-description {
max-width: 60ch;
margin: 0 auto 2rem;
}
@media (max-width: 720px) {
.guild-spotlight { padding: 2.5rem 1.5rem 1.5rem; }
}
/* === Video grid (YouTube features) === */
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin: 2.5rem 0;
}
.video-card {
display: block;
text-decoration: none;
color: inherit;
border: none;
transition: transform 0.25s ease;
}
.video-card:hover {
transform: translateY(-2px);
border: none;
}
.video-thumbnail {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--void-soft);
border: 1px solid var(--void-line);
transition: border-color 0.25s ease;
}
.video-thumbnail img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease, filter 0.3s ease;
filter: brightness(0.85);
}
.video-card:hover .video-thumbnail {
border-color: var(--sand);
}
.video-card:hover .video-thumbnail img {
transform: scale(1.04);
filter: brightness(1);
}
.video-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(201, 169, 110, 0.92);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
pointer-events: none;
}
.video-play::after {
content: '';
width: 0;
height: 0;
border-left: 20px solid var(--void);
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
margin-left: 4px;
}
.video-card:hover .video-play {
background: var(--sand);
transform: translate(-50%, -50%) scale(1.1);
}
.video-title {
margin-top: 1rem;
font-family: var(--font-display);
font-size: 1.1rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--pale);
line-height: 1.3;
transition: color 0.25s ease;
}
.video-card:hover .video-title {
color: var(--sand);
}
/* === Bases showcase === */
.bases-stack {
display: grid;
gap: 2rem;
margin: 2.5rem 0 2rem;
}
.base-showcase {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 2rem;
align-items: center;
padding: 1.75rem;
border: 1px solid var(--void-line);
background: rgba(26, 22, 20, 0.5);
transition: border-color 0.25s ease;
}
.base-showcase:hover {
border-color: var(--sand);
}
.base-showcase:nth-child(even) .base-image {
order: 2;
}
.base-image {
overflow: hidden;
background: var(--void);
border: 1px solid var(--void-line);
}
.base-image img {
display: block;
width: 100%;
height: auto;
}
.base-info h3 {
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
margin-bottom: 0.5rem;
letter-spacing: 0.04em;
}
.base-meta {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--spice);
margin-bottom: 1rem;
}
.base-info p {
margin-bottom: 0;
font-size: 0.95rem;
}
@media (max-width: 720px) {
.base-showcase {
grid-template-columns: 1fr;
padding: 1.25rem;
}
.base-showcase:nth-child(even) .base-image {
order: 0;
}
.event-caption { padding: 1rem 1rem; }
.event-caption-title { font-size: 1rem; }
}
/* === Tools page === */
.hero-tools {
padding: 6rem 0 3rem;
background:
linear-gradient(180deg, rgba(10, 9, 8, 0.82) 0%, rgba(10, 9, 8, 0.95) 100%),
url('images/protection-prosperity.png') center 40%/cover no-repeat;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
margin: 2.5rem 0;
}
.tool-card {
position: relative;
padding: 2.25rem 1.75rem 1.75rem;
border: 1px solid var(--void-line);
background: rgba(26, 22, 20, 0.55);
display: flex;
flex-direction: column;
transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.tool-card:hover {
border-color: var(--sand);
background: rgba(26, 22, 20, 0.85);
transform: translateY(-2px);
}
.tool-badge {
position: absolute;
top: 0;
right: 0;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 0.4em 0.85em;
font-weight: 500;
}
.tool-badge-house {
background: rgba(184, 101, 31, 0.2);
color: var(--spice);
border-left: 1px solid var(--spice);
border-bottom: 1px solid var(--spice);
}
.tool-badge-community {
background: rgba(201, 168, 122, 0.12);
color: var(--sand);
border-left: 1px solid var(--sand-dim);
border-bottom: 1px solid var(--sand-dim);
}
.tool-card-head {
display: flex;
align-items: center;
gap: 0.9rem;
margin-bottom: 0.55rem;
}
.tool-icon {
width: 36px;
height: 36px;
color: var(--sand);
flex-shrink: 0;
transition: color 0.25s ease, transform 0.3s ease;
}
.tool-card:hover .tool-icon {
color: var(--spice);
transform: scale(1.08);
}
.tool-card-head .tool-name {
margin-bottom: 0;
}
.tool-name {
font-family: var(--font-display);
font-weight: 900;
font-size: 1.8rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--pale);
line-height: 1;
margin-bottom: 0.45rem;
}
.tool-tagline {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sand-dim);
margin-bottom: 1rem;
}
.tool-description {
font-size: 0.95rem;
margin-bottom: 1.75rem;
flex-grow: 1;
}
.tool-card .btn {
align-self: flex-start;
}
/* === Mobile === */
@media (max-width: 720px) {
.stat-banner-item {
border-right: none;
border-bottom: 1px solid var(--void-line);
}
.stat-banner-item:last-child { border-bottom: none; }
.stat-banner-num { font-size: 1.6rem; }
.sietch-card { padding: 1.25rem 1rem 1rem; }
.sietch-name { font-size: 1.2rem; }
.tool-name { font-size: 1.5rem; }
.tool-card { padding: 2rem 1.25rem 1.5rem; }
}
.hero-eyebrow {
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--spice);
margin-bottom: 1.5rem;
}
.hero h1 {
margin-bottom: 1.5rem;
}
.hero-tagline {
font-size: clamp(1rem, 2vw, 1.25rem);
max-width: 38ch;
margin: 0 auto 2.5rem;
color: var(--sand);
font-style: italic;
font-weight: 300;
}
.hero-body {
max-width: 60ch;
margin: -1rem auto 2rem;
color: var(--pale-dim);
font-size: 1rem;
line-height: 1.7;
}
.hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* === Buttons === */
.btn {
display: inline-block;
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
padding: 1em 2em;
border: 1px solid var(--spice);
background: var(--spice);
color: var(--void);
cursor: pointer;
transition: all 0.25s ease;
text-decoration: none;
}
.btn:hover {
background: transparent;
color: var(--spice);
border-color: var(--spice);
}
.btn-secondary {
background: transparent;
color: var(--sand);
border-color: var(--sand);
}
.btn-secondary:hover {
background: var(--sand);
color: var(--void);
border-color: var(--sand);
}
/* === Hero CTA, outlined idle, gilded gradient on hover === */
.btn-hero {
font-size: clamp(1rem, 1.4vw, 1.15rem);
letter-spacing: 0.28em;
padding: 1.3em 3.2em;
background: transparent;
background-size: 200% 200%;
background-position: 0% 50%;
border: 1px solid var(--spice);
color: var(--spice);
font-weight: 700;
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow: none;
transition:
background 0.4s ease,
background-position 0.6s ease,
color 0.3s ease,
border-color 0.3s ease,
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s ease,
letter-spacing 0.3s ease;
}
/* Shine sweep, animates across when hovered */
.btn-hero::before {
content: '';
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(110deg, transparent 0%, rgba(232, 220, 196, 0.35) 50%, transparent 100%);
transition: left 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
z-index: -1;
pointer-events: none;
}
.btn-hero:hover {
background: linear-gradient(135deg, var(--spice) 0%, var(--spice-bright) 50%, var(--spice) 100%);
background-size: 200% 200%;
background-position: 100% 50%;
border-color: var(--spice-bright);
color: var(--void);
transform: translateY(-2px);
letter-spacing: 0.3em;
box-shadow:
0 10px 38px rgba(201, 169, 110, 0.5),
0 0 0 2px rgba(232, 220, 196, 0.22) inset;
}
.btn-hero:hover::before {
left: 120%;
}
/* === Grids === */
.facts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
margin: 3rem 0;
}
.fact {
padding: 2rem 1.5rem;
border: 1px solid var(--void-line);
background: rgba(26, 22, 20, 0.5);
text-align: center;
}
.fact-label {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--sand-dim);
margin-bottom: 0.75rem;
}
.fact-value {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
color: var(--pale);
letter-spacing: 0.04em;
}
/* === Feature blocks === */
.feature-list {
display: grid;
gap: 1.5rem;
margin-top: 2rem;
}
.feature {
padding: 1.5rem;
border-left: 2px solid var(--spice);
background: rgba(26, 22, 20, 0.4);
}
.feature h3 {
color: var(--pale);
font-size: 1.1rem;
letter-spacing: 0.08em;
margin-bottom: 0.5rem;
}
.feature p {
margin-bottom: 0;
font-size: 0.95rem;
}
/* === Tables === */
table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0 3rem;
}
th {
font-family: var(--font-display);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sand);
padding: 14px 18px;
text-align: left;
border-bottom: 1px solid var(--sand);
}
td {
padding: 14px 18px;
border-bottom: 1px solid rgba(201, 168, 122, 0.1);
color: var(--pale);
}
tr:hover td {
background: rgba(184, 101, 31, 0.06);
}
td .tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.2em 0.6em;
color: var(--spice);
border: 1px solid var(--spice);
}
/* === Steps === */
.steps {
counter-reset: step;
list-style: none;
display: grid;
gap: 2.5rem;
margin-top: 2.5rem;
}
.steps li {
counter-increment: step;
padding-left: 5rem;
position: relative;
min-height: 4rem;
}
.steps li::before {
content: counter(step, decimal-leading-zero);
position: absolute;
left: 0;
top: -0.5rem;
font-family: var(--font-display);
font-size: 3rem;
font-weight: 900;
color: var(--spice);
line-height: 1;
}
.steps li h3 {
margin-bottom: 0.5rem;
color: var(--pale);
}
/* === FAQ === */
.faq {
display: grid;
gap: 0.75rem;
margin-top: 2rem;
}
/* Each FAQ is a for native collapse, styled to match the site. */
.faq-item {
border: 1px solid var(--void-line);
border-left: 2px solid var(--spice);
background: rgba(26, 22, 20, 0.4);
border-radius: 4px;
overflow: hidden;
transition: border-color 0.25s ease, background 0.25s ease;
}
.faq-item[open] {
border-color: var(--sand-dim);
background: rgba(26, 22, 20, 0.6);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 1.05rem 1.4rem;
color: var(--sand);
font-size: 0.95rem;
letter-spacing: 0.04em;
font-weight: 600;
font-family: var(--font-body);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; content: ''; }
.faq-item summary:hover { color: var(--pale); }
.faq-item summary::after {
content: '+';
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 300;
color: var(--sand-dim);
line-height: 0.8;
flex-shrink: 0;
transition: color 0.2s ease, transform 0.3s ease;
}
.faq-item[open] summary::after {
content: '−';
color: var(--spice);
}
.faq-item p {
margin: 0;
padding: 0 1.4rem 1.2rem;
color: var(--pale-dim);
line-height: 1.7;
font-size: 0.93rem;
}
.faq-item p code {
font-size: 0.88em;
}
/* === Quote === */
.quote {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2rem);
font-style: italic;
color: var(--sand);
text-align: center;
max-width: 32ch;
margin: 4rem auto;
letter-spacing: 0.02em;
line-height: 1.3;
padding: 0 var(--gutter);
}
/* === Section eyebrow === */
.section-eyebrow {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--spice);
margin-bottom: 0.75rem;
}
/* === Footer === */
footer.site-footer {
position: relative;
border-top: 1px solid rgba(201, 169, 110, 0.18);
padding: 3.5rem 0 2.5rem;
text-align: center;
background:
linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.22) 100%),
var(--void);
}
/* Centered diamond ornament resting on the top border (Landsraad flourish) */
footer.site-footer::before {
content: '◆';
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
color: var(--sand);
background: var(--void);
padding: 0 0.85rem;
font-size: 0.75rem;
line-height: 1;
}
.site-footer .container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
}
.site-footer p {
font-size: 0.88rem;
color: var(--pale-dim);
margin: 0;
letter-spacing: 0.02em;
}
/* Brand line — more weight, gold */
.site-footer p:first-of-type {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 500;
color: var(--sand);
letter-spacing: 0.06em;
margin-bottom: 0.35rem;
}
.site-footer .footer-discord {
margin-top: 0.2rem;
}
.site-footer .footer-discord a {
color: var(--spice);
font-size: 0.85rem;
letter-spacing: 0.04em;
border-bottom: 1px solid rgba(201, 169, 110, 0.3);
transition: color 0.2s ease, border-color 0.2s ease;
}
.site-footer .footer-discord a:hover {
color: var(--spice-bright);
border-bottom-color: var(--spice-bright);
}
.site-footer .disclaimer {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(201, 168, 122, 0.45);
margin-top: 1.6rem;
}
/* === Info page tabs === */
.info-tabs-wrap {
border-bottom: 1px solid var(--void-line);
background: rgba(13, 18, 23, 0.5);
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.info-tabs {
display: flex;
gap: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.info-tabs::-webkit-scrollbar {
display: none;
}
.info-tab {
background: transparent;
border: none;
color: var(--sand-dim);
font-family: var(--font-display);
font-size: 0.9rem;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 1.1rem 1.5rem;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
white-space: nowrap;
font-weight: 500;
}
.info-tab:hover {
color: var(--sand);
}
.info-tab.active {
color: var(--spice);
border-bottom-color: var(--spice);
}
.info-tab-sub {
display: block;
font-family: var(--font-body);
font-size: 0.62rem;
letter-spacing: 0.04em;
text-transform: none;
color: var(--sand-dim);
margin-top: 0.3rem;
font-weight: 400;
font-style: italic;
max-width: 24ch;
line-height: 1.35;
white-space: normal;
}
.info-tab.active .info-tab-sub {
color: var(--sand);
}
.info-panel[hidden] {
display: none;
}
/* === Game server cards (Other Games tab) === */
.game-server-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.25rem;
margin: 2rem 0 1rem;
}
.game-server-card {
padding: 1.5rem 1.5rem 1.25rem;
border: 1px solid var(--void-line);
background: rgba(28, 35, 48, 0.5);
transition: border-color 0.25s ease;
}
.game-server-card:hover {
border-color: var(--sand);
}
.game-server-card-soon {
opacity: 0.55;
font-style: italic;
}
.game-server-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.3rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--pale);
margin-bottom: 0.5rem;
line-height: 1.2;
}
.game-server-meta {
font-size: 0.85rem;
color: var(--pale-dim);
line-height: 1.55;
margin-bottom: 0;
}
.game-server-meta code {
font-family: var(--font-mono);
font-size: 0.85em;
background: rgba(201, 169, 110, 0.08);
color: var(--sand);
padding: 0.05em 0.35em;
border: 1px solid rgba(201, 169, 110, 0.15);
}
.game-server-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--void-line);
}
.game-server-stat {
text-align: center;
}
.game-server-stat-num {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 700;
color: var(--sand);
line-height: 1;
margin-bottom: 0.35rem;
}
.game-server-stat-label {
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sand-dim);
}
/* === Polish (decorative + hover lift) === */
/* Gradient line under section H2s, Landsraad signature */
section h2 {
position: relative;
padding-bottom: 0.75rem;
}
section h2::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 80px;
height: 2px;
background: linear-gradient(90deg, var(--sand), transparent);
opacity: 0.75;
}
.sietch-section h2 {
padding-bottom: 0.6rem;
}
.sietch-section h2::after {
width: 60px;
}
/* Hero H1, subtle gold halo */
.hero h1 {
text-shadow: 0 2px 18px rgba(201, 169, 110, 0.2);
}
/* Hero secondary text, readability over background images */
.hero-tagline,
.hero-body,
.hero-eyebrow {
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
/* Stat numbers, subtle gold halo */
.stat-banner-num {
text-shadow: 0 1px 4px rgba(201, 169, 110, 0.18);
}
/* Display names on cards, depth shadow */
.sietch-name,
.persona-title,
.tool-name,
.guild-spotlight-name,
.price-amount,
.video-title,
.event-caption-title {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* Card hover, refined shadow lift */
.persona-card,
.tool-card,
.guild-spotlight,
.event-card,
.video-card,
.fact,
.standard-card,
.price-card {
transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.sietch-card:hover,
.persona-card:hover,
.tool-card:hover,
.guild-spotlight:hover,
.event-card:hover,
.video-card:hover,
.standard-card:hover,
.fact:hover,
.game-server-card:hover,
.price-card:hover {
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(201, 169, 110, 0.15);
}
/* Cards that didn't already have a lift/border-color hover get one for consistency. */
.standard-card,
.fact,
.guild-spotlight,
.game-server-card {
transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.standard-card:hover,
.fact:hover,
.guild-spotlight:hover,
.game-server-card:hover {
border-color: var(--sand);
transform: translateY(-2px);
}
/* Button hover, soft gold glow */
.btn:hover {
box-shadow: 0 0 20px rgba(201, 169, 110, 0.25);
}
/* === Announcement newsletters (H.T.W.S. + The Sandglass) === */
.htws-feed {
display: flex;
flex-direction: column;
gap: 1.15rem;
margin-top: 1.75rem;
}
.htws-loading {
color: var(--pale-dim);
font-style: italic;
}
.htws-card {
position: relative;
overflow: hidden;
padding: 1.6rem 1.75rem 1.7rem;
border: 1px solid rgba(201, 169, 110, 0.28);
border-radius: 6px;
background:
linear-gradient(180deg, rgba(201, 169, 110, 0.05), rgba(201, 169, 110, 0) 40%),
rgba(26, 22, 20, 0.45);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
/* Gilded left accent that fades downward */
.htws-card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg, var(--spice-bright), rgba(201, 169, 110, 0.12));
}
.htws-card:hover {
border-color: var(--sand);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(201, 169, 110, 0.12);
transform: translateY(-2px);
}
.htws-card-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.3rem, 2.2vw, 1.5rem);
letter-spacing: 0.02em;
color: var(--sand);
margin: 0 0 0.3rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.htws-card-meta {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sand-dim);
padding-bottom: 0.9rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(201, 169, 110, 0.16);
}
.htws-card-body {
margin: 0;
color: var(--pale);
line-height: 1.78;
}
.htws-card-body p { margin: 0 0 0.7rem; }
.htws-card-body p:last-child { margin-bottom: 0; }
.htws-card-body ul,
.htws-card-body ol { margin: 0 0 0.7rem 1.4rem; }
.htws-card-body li { margin: 0.25rem 0; }
.htws-card-body a { color: var(--spice-bright); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; }
.htws-card-body a:hover { color: var(--sand); }
.htws-card-body strong { color: var(--pale); font-weight: 700; }
.htws-card-body .htws-h {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.12rem;
color: var(--sand);
margin: 0.6rem 0 0.5rem;
}
/* Section break: clean gold gradient hairline */
.htws-card-body .htws-hr {
height: 1px;
border: 0;
background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.4), transparent);
margin: 1.6rem auto;
max-width: 70%;
}
.htws-card-img {
display: block;
max-width: 100%;
max-height: 460px;
border-radius: 5px;
border: 1px solid var(--sand-dim);
margin-top: 1.2rem;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
/* Pinned: featured, warmer treatment */
.htws-pinned {
border-color: rgba(201, 169, 110, 0.5);
background:
linear-gradient(180deg, rgba(201, 169, 110, 0.1), rgba(201, 169, 110, 0.02) 45%),
rgba(26, 22, 20, 0.55);
}
.htws-pinned::before { width: 4px; }
/* Tag pills */
.htws-card-tags {
display: flex;
gap: 0.5rem;
margin-bottom: 0.85rem;
}
.htws-pill {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.3em 0.75em;
border-radius: 100px;
}
.htws-pin {
background: rgba(201, 169, 110, 0.16);
color: var(--sand);
border: 1px solid var(--sand-dim);
}
.htws-new {
background: rgba(110, 201, 138, 0.14);
color: #7fd49a;
border: 1px solid rgba(110, 201, 138, 0.35);
box-shadow: 0 0 10px rgba(110, 201, 138, 0.18);
}
/* Curated body text styles (chosen in the editor) */
.htws-card-body.htws-style-serif { font-family: Georgia, 'Times New Roman', serif; }
.htws-card-body.htws-style-mono { font-family: ui-monospace, 'Courier New', monospace; font-size: 0.92rem; }
/* Subtle staggered entrance when a newsletter tab is opened.
'backwards' fill avoids a flash during the delay while leaving hover transforms intact. */
@media (prefers-reduced-motion: no-preference) {
.htws-card { animation: htwsCardIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.htws-card:nth-child(2) { animation-delay: 0.06s; }
.htws-card:nth-child(3) { animation-delay: 0.12s; }
.htws-card:nth-child(4) { animation-delay: 0.18s; }
.htws-card:nth-child(n+5) { animation-delay: 0.24s; }
}
@keyframes htwsCardIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* Brief highlight when arriving from a per-post share link */
.htws-flash { animation: htwsFlash 2.2s ease-out; }
@keyframes htwsFlash {
0%, 15% { box-shadow: 0 0 0 2px var(--spice-bright), 0 0 22px rgba(201, 169, 110, 0.5); }
100% { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0); }
}
.htws-empty {
text-align: center;
padding: 3rem 1rem;
color: var(--pale-dim);
border: 1px dashed rgba(201, 169, 110, 0.25);
border-radius: 6px;
background: rgba(26, 22, 20, 0.3);
}
.htws-empty p { margin: 0 0 0.5rem; }
.htws-empty .btn { margin-top: 1.25rem; }
/* === Voices of the Sietch — public submission form === */
.voices-submit {
margin-top: 3rem;
padding: 2rem 1.75rem;
border: 1px solid var(--sand-dim);
border-radius: 6px;
background:
linear-gradient(180deg, rgba(201, 169, 110, 0.04), rgba(201, 169, 110, 0) 45%),
rgba(26, 22, 20, 0.45);
}
.voices-submit h3 { margin-bottom: 0.4rem; }
.voices-submit > p { margin-bottom: 1.4rem; font-size: 0.92rem; color: var(--pale-dim); }
.voices-submit label {
display: block;
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pale-dim);
margin: 0.4rem 0 0.4rem;
}
.voices-submit label .opt {
text-transform: none;
letter-spacing: 0;
color: var(--sand-dim);
}
.voices-submit input[type=text],
.voices-submit textarea {
width: 100%;
background: var(--void);
color: var(--pale);
border: 1px solid var(--void-line);
border-radius: 4px;
padding: 0.7rem 0.85rem;
font: inherit;
font-size: 0.95rem;
margin-bottom: 1rem;
transition: border-color 0.2s ease;
}
.voices-submit input[type=text]:focus,
.voices-submit textarea:focus {
outline: none;
border-color: var(--sand);
}
.voices-submit textarea {
resize: vertical;
min-height: 150px;
line-height: 1.6;
font-family: inherit;
}
/* Honeypot — visually hidden, accessibility-hidden, never focusable. */
.voices-hp {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
.voices-actions {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.voices-msg { font-size: 0.9rem; color: var(--pale-dim); }
.voices-msg.ok { color: #6ec98a; }
.voices-msg.err { color: #d98a7a; }
/* ============================================================
MODERN REFINEMENTS, accessibility, motion, micro-polish
============================================================ */
/* Consistent keyboard focus ring */
:focus-visible {
outline: 2px solid var(--spice-bright);
outline-offset: 3px;
}
a:focus-visible { outline-offset: 4px; border-radius: 2px; }
/* Text selection */
::selection { background: var(--spice); color: var(--void); }
/* Themed scrollbars */
* { scrollbar-color: var(--void-line) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--void-line); border-radius: 6px; border: 2px solid var(--void); }
::-webkit-scrollbar-thumb:hover { background: var(--sand-dim); }
/* Primary nav CTA, make "Join" read as a button */
.nav-links li:last-child a {
border: 1px solid var(--sand-dim);
border-radius: 4px;
padding: 0.5em 1.15em;
color: var(--sand);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nav-links li:last-child a:hover,
.nav-links li:last-child a.active {
background: var(--spice);
border-color: var(--spice);
color: var(--void);
}
/* Anchored announcement cards clear the sticky nav */
.htws-card { scroll-margin-top: 6rem; }
/* Scroll-driven reveal, pure CSS progressive enhancement.
Browsers without animation-timeline just show content normally. */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.persona-card, .tool-card, .standard-card, .price-card,
.fact, .feature, .faq-item, .steps li {
animation: revealUp linear both;
animation-timeline: view();
animation-range: entry 0% entry 70%;
}
}
/* Hero entrance on load (staggered) */
.hero-eyebrow, .hero h1, .hero-tagline, .hero-body, .hero-actions {
animation: heroIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero h1 { animation-delay: 0.06s; }
.hero-tagline { animation-delay: 0.14s; }
.hero-body { animation-delay: 0.2s; }
.hero-actions { animation-delay: 0.26s; }
}
@keyframes revealUp {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* Respect reduced-motion preference globally */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* === Responsive === */
@media (max-width: 720px) {
section { padding: 2.75rem 0; }
.hero { padding: 4rem 0 2.5rem; }
.nav-inner { gap: 0.5rem 1rem; padding: 0.6rem var(--gutter); flex-wrap: wrap; }
.brand-logo { height: 44px; }
.nav-links { gap: 0.4rem 1.1rem; flex: 1 1 100%; justify-content: center; }
.nav-links a { font-size: 0.72rem; letter-spacing: 0.12em; padding: 0.5em 0.2em; }
.nav-links li:last-child a { padding: 0.45em 0.95em; }
.steps li { padding-left: 3.5rem; }
.steps li::before { font-size: 2rem; }
th, td { padding: 10px 12px; font-size: 0.9rem; }
}
/* Fine-tune very small screens */
@media (max-width: 420px) {
.nav-links { gap: 0.3rem 0.85rem; }
.nav-links a { font-size: 0.68rem; letter-spacing: 0.1em; }
}
/* ============================================================
AESTHETIC REFINEMENT, added 2026-06
Atmospheric grain, ornamental dividers, refined typography,
consistent motion + shadow tokens, decorative quote treatment.
============================================================ */
/* === Motion + elevation tokens (consistent feel across components) === */
:root {
--ease-emph: cubic-bezier(0.2, 0.7, 0.2, 1);
--ease-quick: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 0.18s;
--dur-base: 0.28s;
--dur-slow: 0.5s;
--shadow-card: 0 6px 18px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(201, 169, 110, 0.08);
--shadow-card-lift: 0 18px 42px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(201, 169, 110, 0.20);
--shadow-glow-warm: 0 0 30px rgba(201, 169, 110, 0.16);
/* Decorative gold rule used in section underlines + footer ornaments */
--rule-gradient: linear-gradient(90deg, var(--spice-bright) 0%, var(--sand) 35%, var(--sand-dim) 65%, transparent 100%);
}
/* === Atmospheric film grain ===
Static, fixed, low opacity. Adds a "printed page" texture without
distracting from content. Sits above body bg but below all UI. */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2;
opacity: 0.055;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* Modals + sticky nav stay above the grain (z-index already higher than 2). */
/* === Refined typography rendering === */
body {
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'tnum' 1;
}
h1, h2, h3, h4 {
font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1, 'ss01' 1;
text-rendering: geometricPrecision;
}
.mono, code, [class*="-mono"], .stat-banner-num, .sietch-cap, .game-server-stat-num {
font-variant-numeric: tabular-nums;
}
/* === Refined section H2 underline ===
Multi-stop gradient with subtle warm glow, replacing the single fade. */
section h2::after {
width: 100px;
height: 2px;
background: var(--rule-gradient);
opacity: 0.9;
box-shadow: 0 0 14px rgba(201, 169, 110, 0.18);
border-radius: 1px;
}
/* === Refined focus ring ===
Gilded ring with a soft halo, more visible AND more on-brand. */
:focus-visible {
outline: 2px solid var(--spice-bright);
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.18);
}
a:focus-visible { border-radius: 2px; }
/* === Refined card shadows (consistent across all card-like components) === */
.persona-card,
.tool-card,
.guild-spotlight,
.standard-card,
.fact,
.game-server-card,
.price-card,
.sietch-card {
box-shadow: var(--shadow-card);
}
.sietch-card:hover,
.persona-card:hover,
.tool-card:hover,
.guild-spotlight:hover,
.standard-card:hover,
.fact:hover,
.game-server-card:hover,
.price-card:hover,
.event-card:hover,
.video-card:hover {
box-shadow: var(--shadow-card-lift);
}
/* === Decorative .quote treatment ===
Curly typographic quotation marks anchor each side of the pull-quote. */
.quote {
position: relative;
padding: 2.5rem 2.75rem;
}
.quote::before,
.quote::after {
position: absolute;
font-family: var(--font-display);
color: var(--sand);
font-size: clamp(2.8rem, 5vw, 4rem);
line-height: 0.8;
opacity: 0.55;
pointer-events: none;
}
.quote::before {
content: '\201C';
top: 0;
left: 0;
}
.quote::after {
content: '\201D';
bottom: -0.2em;
right: 0;
}
@media (max-width: 720px) {
.quote { padding: 2rem 1.75rem; }
.quote::before, .quote::after { font-size: 2.4rem; }
}
/* === Drop-cap utility (opt-in via class on a ) ===
For featured lead paragraphs that deserve presence. */
.drop-cap::first-letter {
font-family: var(--font-display);
font-weight: 900;
font-size: 3.4em;
line-height: 0.92;
float: left;
margin: 0.06em 0.16em 0 0;
color: var(--spice-bright);
text-shadow: 0 2px 8px rgba(201, 169, 110, 0.22);
letter-spacing: -0.02em;
}
/* === Ornamental horizontal rule (opt-in:
) ===
Decorative section break with a centered diamond on a gold line. */
hr.ornament {
border: 0;
height: 1rem;
margin: 3rem auto;
max-width: 26rem;
background:
radial-gradient(circle, var(--sand) 3.5px, transparent 4.5px) 50% 50% / 8px 8px no-repeat,
linear-gradient(90deg, transparent 0%, var(--sand-dim) 18%, var(--sand-dim) 42%, transparent 48%, transparent 52%, var(--sand-dim) 58%, var(--sand-dim) 82%, transparent 100%) 0 50% / 100% 1px no-repeat;
opacity: 0.85;
}
/* === Refined .htws-flash highlight (smoother fade-out) === */
@keyframes htwsFlash {
0% { box-shadow: 0 0 0 2px var(--spice-bright), 0 0 28px rgba(201, 169, 110, 0.55); }
60% { box-shadow: 0 0 0 1px var(--sand-dim), 0 0 16px rgba(201, 169, 110, 0.22); }
100% { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0); }
}
/* === Refined hero h1 (a touch more breathing room above tagline) === */
.hero h1 {
letter-spacing: 0.085em;
text-shadow: 0 2px 22px rgba(201, 169, 110, 0.22), 0 0 1px rgba(13, 18, 23, 0.4);
}
/* === Refined .btn (subtle inner highlight on idle, brighter glow on hover) === */
.btn {
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
}
.btn:hover {
box-shadow: 0 4px 18px rgba(201, 169, 110, 0.28), 0 0 0 1px rgba(232, 220, 196, 0.22) inset;
}
.btn-secondary {
background-image: none;
}
.btn-secondary:hover {
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
}
/* === Refined nav (sticky shadow on scroll for depth) === */
nav.site-nav {
box-shadow: 0 1px 0 rgba(201, 169, 110, 0.06), 0 6px 18px rgba(0, 0, 0, 0.28);
}
/* === Refined info-tabs (active-tab has a subtle warm under-glow) === */
.info-tab.active {
text-shadow: 0 0 14px rgba(201, 169, 110, 0.35);
}
.info-tab {
transition: color var(--dur-fast) var(--ease-quick), border-color var(--dur-fast) var(--ease-quick), text-shadow var(--dur-fast) var(--ease-quick);
}
/* === Refined sietch-modal entrance + close button === */
.sietch-modal-content {
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(201, 169, 110, 0.22);
}
.sietch-modal-close {
transition: border-color var(--dur-fast) var(--ease-quick), color var(--dur-fast) var(--ease-quick), background var(--dur-fast) var(--ease-quick), transform var(--dur-fast) var(--ease-quick);
}
.sietch-modal-close:hover {
background: rgba(201, 169, 110, 0.08);
transform: rotate(90deg);
}
/* === Refined event captions (slightly more dramatic gradient + lift) === */
.event-caption {
background: linear-gradient(0deg, rgba(10, 9, 8, 0.96) 0%, rgba(10, 9, 8, 0.7) 55%, transparent 100%);
}
/* === Code refinements (slight inner highlight, tighter borders) === */
code, .mono {
border-radius: 3px;
background: linear-gradient(180deg, rgba(201, 168, 122, 0.12), rgba(201, 168, 122, 0.06));
border-color: rgba(201, 168, 122, 0.22);
}
/* === Selection (warm, on-brand) === */
::selection {
background: rgba(201, 169, 110, 0.45);
color: var(--pale);
text-shadow: 0 0 6px rgba(13, 18, 23, 0.6);
}
/* ============================================================
THE SIETCH PULSE, live dashboard page
============================================================ */
.hero-pulse {
padding: 6rem 0 3rem;
background:
linear-gradient(180deg, rgba(10, 9, 8, 0.78) 0%, rgba(10, 9, 8, 0.95) 100%),
url('images/protection-prosperity.png') center 50%/cover no-repeat;
}
.pulse-clock {
display: inline-flex;
align-items: center;
gap: 0.5em;
margin-left: 0.6em;
font-family: var(--font-mono);
font-size: 0.78em;
letter-spacing: 0.22em;
color: var(--sand-dim);
text-transform: uppercase;
}
.pulse-clock::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: #6ec98a;
box-shadow: 0 0 8px rgba(110, 201, 138, 0.6);
}
@media (prefers-reduced-motion: no-preference) {
.pulse-clock::before { animation: discordPulse 2.6s ease-in-out infinite; }
}
/* === Live-data card grid === */
.pulse-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
margin: 2rem 0 1rem;
}
.pulse-card {
position: relative;
padding: 1.85rem 1.75rem 1.75rem;
border: 1px solid var(--void-line);
border-top: 2px solid var(--sand);
background:
linear-gradient(180deg, rgba(201, 169, 110, 0.06), rgba(201, 169, 110, 0) 50%),
rgba(26, 22, 20, 0.55);
border-radius: 6px;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
transition: border-color var(--dur-base) var(--ease-emph), transform var(--dur-base) var(--ease-emph), box-shadow var(--dur-base) var(--ease-emph);
}
.pulse-card:hover {
border-color: var(--sand);
transform: translateY(-2px);
box-shadow: var(--shadow-card-lift);
}
.pulse-card-label {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--sand-dim);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.55em;
}
.pulse-live-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #6ec98a;
box-shadow: 0 0 8px rgba(110, 201, 138, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
.pulse-live-dot { animation: discordPulse 2.6s ease-in-out infinite; }
}
.pulse-card-number {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5.2vw, 3.8rem);
font-weight: 900;
color: var(--sand);
line-height: 1;
margin-bottom: 0.4rem;
text-shadow: 0 2px 14px rgba(201, 169, 110, 0.28);
font-variant-numeric: tabular-nums;
}
.pulse-card-storm .pulse-card-number {
font-size: clamp(1.6rem, 3.5vw, 2.6rem);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pale);
}
.pulse-card-sub {
font-size: 0.92rem;
color: var(--pale-dim);
line-height: 1.5;
margin-bottom: 0;
}
.pulse-card-foot {
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid rgba(201, 169, 110, 0.14);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sand-dim);
}
/* === Channel + server lists inside cards === */
.pulse-voice-list,
.pulse-conan-list {
list-style: none;
padding: 0;
margin: 1rem 0 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.pulse-voice-list li,
.pulse-conan-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.4rem 0.7rem;
background: rgba(13, 18, 23, 0.5);
border: 1px solid rgba(201, 169, 110, 0.12);
border-radius: 4px;
}
.pulse-voice-channel {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pale);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pulse-voice-count {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1rem;
color: var(--sand);
flex-shrink: 0;
}
/* === Live pill (e.g. on an event happening now) === */
.pulse-live-pill {
display: inline-block;
margin-left: 0.45em;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.22em;
padding: 0.18em 0.5em;
color: var(--void);
background: var(--spice-bright);
border-radius: 100px;
text-transform: uppercase;
vertical-align: 1px;
}
/* === Upcoming events strip on Pulse === */
.pulse-events {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin-top: 1.75rem;
}
.pulse-event {
display: block;
padding: 1.1rem 1.25rem;
border: 1px solid var(--void-line);
border-left: 2px solid var(--spice-bright);
background: rgba(26, 22, 20, 0.5);
border-radius: 4px;
color: inherit;
transition: border-color var(--dur-base) var(--ease-emph), transform var(--dur-base) var(--ease-emph), background var(--dur-base) var(--ease-emph);
}
.pulse-event:hover {
border-color: var(--sand);
background: rgba(26, 22, 20, 0.7);
transform: translateY(-2px);
}
.pulse-event-when {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--spice);
margin-bottom: 0.4rem;
}
.pulse-event-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.04em;
color: var(--pale);
margin-bottom: 0.4rem;
line-height: 1.2;
}
.pulse-event-meta {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sand-dim);
}
/* === Recent activity feed on Pulse === */
.pulse-recent {
display: grid;
gap: 0.65rem;
margin-top: 1.75rem;
}
.pulse-recent-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
align-items: start;
padding: 0.9rem 1.1rem;
border: 1px solid var(--void-line);
border-left: 2px solid var(--sand);
background: rgba(26, 22, 20, 0.45);
border-radius: 4px;
color: inherit;
transition: border-color var(--dur-base) var(--ease-emph), background var(--dur-base) var(--ease-emph), transform var(--dur-base) var(--ease-emph);
}
.pulse-recent-item:hover {
border-color: var(--sand);
background: rgba(26, 22, 20, 0.7);
transform: translateX(2px);
}
.pulse-recent-board {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--spice);
margin-bottom: 0.2rem;
}
.pulse-recent-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.02rem;
letter-spacing: 0.02em;
color: var(--pale);
margin: 0 0 0.25rem;
line-height: 1.25;
}
.pulse-recent-snippet {
font-size: 0.85rem;
color: var(--pale-dim);
line-height: 1.45;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.pulse-recent-meta {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sand-dim);
white-space: nowrap;
padding-top: 0.15rem;
}
@media (max-width: 720px) {
.pulse-card { padding: 1.5rem 1.25rem; }
.pulse-recent-item { grid-template-columns: 1fr; }
.pulse-recent-meta { font-size: 0.66rem; }
}
/* === 404 page hero === */
.hero-404 {
padding: 6rem 0 3rem;
background:
linear-gradient(180deg, rgba(10, 9, 8, 0.82) 0%, rgba(10, 9, 8, 0.95) 100%),
url('images/protection-sardaukar.png') center 30%/cover no-repeat;
}
/* Make standard-cards used as links feel clickable + match the hover lift */
a.standard-card {
color: inherit;
border-bottom: 1px solid var(--void-line);
border-left: 0;
transition: border-color var(--dur-base) var(--ease-emph), transform var(--dur-base) var(--ease-emph), background var(--dur-base) var(--ease-emph), box-shadow var(--dur-base) var(--ease-emph);
}
a.standard-card:hover {
background: rgba(26, 22, 20, 0.7);
transform: translateY(-2px);
border-color: var(--sand);
}
a.standard-card h3 {
margin-bottom: 0.5rem;
}
a.standard-card p {
color: var(--pale-dim);
font-size: 0.92rem;
line-height: 1.55;
}
/* === Footer Discord "online" badge (subtle live indicator) === */
.discord-status {
display: inline-flex;
align-items: center;
gap: 0.45em;
margin-left: 0.6em;
padding: 0.18em 0.7em 0.2em;
vertical-align: 1px;
background: rgba(110, 201, 138, 0.08);
border: 1px solid rgba(110, 201, 138, 0.25);
border-radius: 100px;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #82d49a;
line-height: 1;
white-space: nowrap;
cursor: default;
}
.discord-status-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #6ec98a;
box-shadow: 0 0 8px rgba(110, 201, 138, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
.discord-status-dot {
animation: discordPulse 2.6s ease-in-out infinite;
}
}
@keyframes discordPulse {
0%, 100% { opacity: 0.75; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 12px rgba(110, 201, 138, 0.7); }
}
/* === Upcoming events (Discord scheduled-events feed) === */
.events-upcoming {
display: grid;
gap: 1.15rem;
margin-top: 1.75rem;
}
.upcoming-event {
display: grid;
grid-template-columns: 180px 1fr;
gap: 1.5rem;
padding: 1.4rem 1.6rem;
border: 1px solid rgba(201, 169, 110, 0.28);
border-left: 3px solid var(--spice-bright);
border-radius: 6px;
background:
linear-gradient(180deg, rgba(201, 169, 110, 0.05), rgba(201, 169, 110, 0) 45%),
rgba(26, 22, 20, 0.45);
box-shadow: var(--shadow-card);
transition: border-color var(--dur-base) var(--ease-emph), transform var(--dur-base) var(--ease-emph), box-shadow var(--dur-base) var(--ease-emph);
}
.upcoming-event:hover {
border-color: var(--sand);
transform: translateY(-2px);
box-shadow: var(--shadow-card-lift);
}
.upcoming-event.is-live {
border-color: var(--spice);
border-left-color: var(--spice-bright);
background:
linear-gradient(180deg, rgba(184, 101, 31, 0.1), rgba(184, 101, 31, 0.02) 45%),
rgba(26, 22, 20, 0.55);
}
.upcoming-event-img {
display: block;
overflow: hidden;
border-radius: 5px;
border: 1px solid var(--sand-dim);
background: var(--void-soft);
align-self: start;
aspect-ratio: 16 / 9;
transition: transform var(--dur-base) var(--ease-emph);
}
.upcoming-event-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-emph), filter var(--dur-base) ease;
filter: brightness(0.92);
}
.upcoming-event:hover .upcoming-event-img img {
transform: scale(1.04);
filter: brightness(1.05);
}
.upcoming-event-body {
display: flex;
flex-direction: column;
min-width: 0;
}
.upcoming-event-meta {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sand);
margin-bottom: 0.55rem;
display: flex;
align-items: center;
gap: 0.8rem;
flex-wrap: wrap;
}
.upcoming-event-loc {
color: var(--sand-dim);
border-left: 1px solid rgba(201, 169, 110, 0.3);
padding-left: 0.8rem;
letter-spacing: 0.1em;
text-transform: none;
}
.upcoming-event-live {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.22em;
padding: 0.25em 0.7em;
color: var(--void);
background: var(--spice-bright);
border-radius: 100px;
font-weight: 700;
text-transform: uppercase;
box-shadow: 0 0 14px rgba(212, 184, 122, 0.5);
}
.upcoming-event-live::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--void);
animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
.upcoming-event-name {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.25rem, 2.4vw, 1.55rem);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--pale);
margin: 0 0 0.6rem;
line-height: 1.15;
}
.upcoming-event-name a {
color: inherit;
border-bottom: none;
}
.upcoming-event-name a:hover {
color: var(--sand);
}
.upcoming-event-description {
font-size: 0.93rem;
color: var(--pale-dim);
margin: 0 0 1rem;
line-height: 1.65;
white-space: pre-wrap;
overflow-wrap: break-word;
}
.upcoming-event-description strong { color: var(--pale); font-weight: 700; }
.upcoming-event-description em { color: var(--pale); }
.upcoming-event-description u { text-decoration-color: var(--sand-dim); text-underline-offset: 2px; }
.upcoming-event-description del { color: rgba(202, 184, 145, 0.5); }
.upcoming-event-description a { color: var(--spice-bright); }
.upcoming-event-description .dc-h1,
.upcoming-event-description .dc-h2,
.upcoming-event-description .dc-h3 {
display: block;
font-family: var(--font-display);
color: var(--sand);
font-weight: 600;
letter-spacing: 0.02em;
margin: 0.6rem 0 0.3rem;
line-height: 1.2;
}
.upcoming-event-description .dc-h1 { font-size: 1.15rem; }
.upcoming-event-description .dc-h2 { font-size: 1.05rem; }
.upcoming-event-description .dc-h3 { font-size: 0.98rem; }
.upcoming-event-description .dc-quote {
display: block;
padding: 0.1rem 0 0.1rem 0.8rem;
border-left: 3px solid var(--sand-dim);
color: var(--pale-dim);
margin: 0.15rem 0;
}
.upcoming-event-description code {
font-family: var(--font-mono);
font-size: 0.86em;
padding: 0.1em 0.4em;
background: rgba(201, 168, 122, 0.12);
border: 1px solid rgba(201, 168, 122, 0.2);
border-radius: 3px;
color: var(--sand);
}
.upcoming-event-description .dc-code {
font-family: var(--font-mono);
font-size: 0.86em;
padding: 0.85rem 1rem;
margin: 0.6rem 0;
background: rgba(13, 18, 23, 0.7);
border: 1px solid var(--void-line);
border-radius: 4px;
color: var(--sand);
white-space: pre;
overflow-x: auto;
line-height: 1.5;
}
.upcoming-event-description .dc-mention {
display: inline-block;
padding: 0 0.4em;
border-radius: 3px;
background: rgba(201, 169, 110, 0.16);
color: var(--spice-bright);
font-weight: 500;
font-size: 0.95em;
}
/* Spoilers: hidden until hover/focus (matches Discord's tap-to-reveal pattern) */
.upcoming-event-description .dc-spoiler {
background: var(--void-soft);
color: transparent;
border-radius: 3px;
padding: 0 3px;
cursor: pointer;
transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
user-select: none;
}
.upcoming-event-description .dc-spoiler:hover,
.upcoming-event-description .dc-spoiler:focus-visible {
color: var(--pale);
background: rgba(201, 168, 122, 0.15);
user-select: text;
outline: none;
}
.upcoming-event-foot {
display: flex;
gap: 1.25rem;
align-items: center;
flex-wrap: wrap;
margin-top: auto;
padding-top: 0.5rem;
}
.upcoming-event-count {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sand-dim);
}
.upcoming-event-rsvp {
font-family: var(--font-body);
font-size: 0.82rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--spice-bright);
font-weight: 600;
border-bottom: 1px solid rgba(212, 184, 122, 0.3);
padding-bottom: 1px;
transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.upcoming-event-rsvp:hover {
color: var(--pale);
border-bottom-color: var(--pale);
}
/* No-image variant: stack the body to use full width */
.upcoming-event:not(:has(.upcoming-event-img)) {
grid-template-columns: 1fr;
}
@media (max-width: 720px) {
.upcoming-event {
grid-template-columns: 1fr;
padding: 1.25rem 1.25rem;
}
.upcoming-event-img {
width: 100%;
}
}