/* ========================================================================
GateKeepr — design tokens
A dark editorial aesthetic with a purple accent.
Serif display (Fraunces) paired with a clean sans (Public Sans).
Light / dark is controlled by a `data-theme` attribute on .
Default is dark; adding data-theme="light" swaps the token values.
======================================================================== */
:root,
:root[data-theme="dark"] {
--bg: #0e0d13;
--bg-alt: #15131c;
--bg-card: #1c1927;
--ink: #ece8f5;
--ink-dim: #9c95b3;
--ink-faint: #6b6580;
--accent: #a78bfa; /* bright readable purple */
--accent-bright: #c4b5fd; /* hover/active */
--accent-soft: #8b5cf6; /* slightly deeper for buttons on light bg */
--rule: #28243a;
--rule-bright: #3b3554;
--btn-primary-ink: #0e0d13; /* text color on filled purple button */
--shadow-accent: rgba(167, 139, 250, 0.4);
--grain-blend: overlay;
--grain-opacity: 0.04;
/* Approximate height of the sticky top nav. Used to position the
mobile drawer just below the nav so the brand stays visible. */
--nav-height: 4.25rem;
}
:root[data-theme="light"] {
--bg: #faf8ff;
--bg-alt: #f3eefd;
--bg-card: #ffffff;
--ink: #1a1524;
--ink-dim: #544d6b;
--ink-faint: #8a839c;
--accent: #6d28d9; /* deeper purple for light bg readability */
--accent-bright: #5b21b6; /* hover */
--accent-soft: #7c3aed;
--rule: #e4dcf5;
--rule-bright: #c9bae6;
--btn-primary-ink: #ffffff;
--shadow-accent: rgba(109, 40, 217, 0.25);
--grain-blend: multiply;
--grain-opacity: 0.035;
}
:root {
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "Public Sans", -apple-system, "Segoe UI", sans-serif;
--max: 1200px;
--gutter: clamp(1.25rem, 4vw, 3rem);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--ink);
line-height: 1.6;
font-size: 17px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
width: 100%;
}
/* Decorative subtle grain overlay */
.grain {
position: fixed;
inset: 0;
z-index: 1000;
pointer-events: none;
opacity: var(--grain-opacity);
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: var(--grain-blend);
}
/* ========================================================================
Links & inline
======================================================================== */
a {
color: var(--accent);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--accent-bright);
}
code, pre {
font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
font-size: 0.92em;
}
code {
background: var(--bg-card);
padding: 0.15em 0.45em;
border-radius: 3px;
color: var(--accent);
border: 1px solid var(--rule);
word-break: break-word;
overflow-wrap: break-word;
}
pre {
background: var(--bg-card);
border: 1px solid var(--rule);
border-left: 3px solid var(--accent);
padding: 1rem 1.25rem;
border-radius: 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 1rem 0;
line-height: 1.5;
font-size: 0.88rem;
max-width: 100%;
}
pre code {
background: none;
border: none;
padding: 0;
color: var(--ink);
white-space: pre;
word-break: normal;
}
em {
font-style: italic;
color: var(--accent);
}
/* ========================================================================
Nav
======================================================================== */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem var(--gutter);
background: color-mix(in srgb, var(--bg) 85%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--rule);
gap: 1rem;
}
.nav__brand {
display: flex;
align-items: center;
gap: 0.6rem;
color: var(--ink);
font-family: var(--font-display);
font-weight: 500;
font-size: 1.15rem;
font-variation-settings: "SOFT" 50, "WONK" 0;
flex-shrink: 0;
}
.nav__mark {
width: 1.75rem;
height: 1.75rem;
display: inline-block;
flex-shrink: 0;
object-fit: contain;
}
.nav__links {
display: flex;
gap: 2rem;
font-size: 0.92rem;
letter-spacing: 0.02em;
align-items: center;
}
.nav__links a {
color: var(--ink-dim);
font-weight: 500;
white-space: nowrap;
}
.nav__links a:hover {
color: var(--ink);
}
/* Hamburger button — hidden on desktop, visible on mobile */
.nav__burger {
display: none;
background: transparent;
border: 0;
padding: 0.5rem;
cursor: pointer;
width: 40px;
height: 40px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
z-index: 101;
}
.nav__burger span {
display: block;
width: 22px;
height: 2px;
background: var(--ink);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.2s ease;
transform-origin: center;
}
/* When menu is open, morph hamburger into an X */
.nav__burger[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.nav__burger[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Backdrop behind the slide-in panel */
.nav__backdrop {
display: none;
position: fixed;
inset: 0;
background: color-mix(in srgb, var(--bg) 70%, transparent);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 99;
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
.nav__backdrop--open {
opacity: 1;
pointer-events: auto;
}
/* Mobile: hide inline links, show burger, drawer slides in from right */
@media (max-width: 720px) {
.nav {
padding: 1rem var(--gutter);
/* Drop backdrop-filter on mobile because it creates a containing
block for fixed-position descendants — which would trap the
drawer inside the nav strip instead of letting it slide in
across the screen. Solid background looks fine here; the drawer
covers most of the nav when open anyway. */
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--bg);
}
.nav__brand {
font-size: 1rem;
}
.nav__mark {
width: 1.5rem;
height: 1.5rem;
}
.nav__burger {
display: flex;
}
.nav__backdrop {
display: block;
}
.nav__links {
position: fixed;
top: var(--nav-height, 4.25rem);
right: 0;
bottom: 0;
width: min(280px, 80vw);
background: var(--bg-alt);
border-left: 1px solid var(--rule);
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0;
padding: 1.75rem 2rem 2rem;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 100;
font-size: 1.05rem;
overflow-y: auto;
overscroll-behavior: contain;
}
.nav__links--open {
transform: translateX(0);
}
.nav__links a {
display: block;
width: 100%;
padding: 1rem 0;
border-bottom: 1px solid var(--rule);
font-size: 1rem;
}
.nav__links a:last-of-type {
/* keep border under last link */
}
/* Theme toggle repositioned inside the drawer */
.nav__links .theme-toggle {
margin-top: 1.5rem;
align-self: flex-start;
}
/* Backdrop only dims the area below the nav so the brand stays
interactive (and visible) at the top while the menu is open. */
.nav__backdrop {
top: var(--nav-height, 4.25rem);
}
}
/* Theme toggle button */
.theme-toggle {
background: transparent;
border: 1px solid var(--rule-bright);
border-radius: 50%;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--ink-dim);
transition: all 0.25s ease;
font-family: inherit;
font-size: 0.9rem;
line-height: 1;
padding: 0;
flex-shrink: 0;
}
.theme-toggle:hover {
color: var(--accent);
border-color: var(--accent);
transform: rotate(15deg);
}
.theme-toggle__sun,
.theme-toggle__moon {
display: none;
}
:root[data-theme="dark"] .theme-toggle__sun {
display: inline;
}
:root[data-theme="light"] .theme-toggle__moon {
display: inline;
}
@media (max-width: 420px) {
.theme-toggle {
width: 32px;
height: 32px;
}
}
/* ========================================================================
Hero
======================================================================== */
.hero {
position: relative;
padding: clamp(4rem, 12vw, 9rem) var(--gutter) clamp(6rem, 14vw, 11rem);
max-width: var(--max);
margin: 0 auto;
overflow: hidden;
}
.hero__eyebrow {
font-size: 0.78rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 1rem;
animation: fade-up 0.8s ease both;
}
.hero__eyebrow::before {
content: "";
width: 2.5rem;
height: 1px;
background: var(--accent);
opacity: 0.6;
}
.hero__title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2.75rem, 8vw, 6.5rem);
line-height: 0.98;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 2rem;
font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
animation: fade-up 1s 0.1s ease both;
max-width: 20ch;
}
.hero__title em {
font-style: italic;
font-weight: 300;
color: var(--accent);
font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.hero__lede {
font-size: clamp(1.05rem, 1.8vw, 1.25rem);
line-height: 1.55;
color: var(--ink-dim);
max-width: 34rem;
margin-bottom: 3rem;
animation: fade-up 1s 0.25s ease both;
}
.hero__cta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
animation: fade-up 1s 0.4s ease both;
}
@media (max-width: 520px) {
.hero__cta {
flex-direction: column;
align-items: stretch;
}
.hero__cta .btn {
justify-content: center;
}
}
.hero__pillars {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
height: 140px;
opacity: 0.25;
pointer-events: none;
}
.pillar {
width: 3px;
background: linear-gradient(to top, var(--accent) 0%, transparent 100%);
border-radius: 2px;
animation: pillar-rise 1.4s ease both;
}
.pillar:nth-child(1) { height: 60%; animation-delay: 0.2s; }
.pillar:nth-child(2) { height: 85%; animation-delay: 0.35s; }
.pillar:nth-child(3) { height: 100%; animation-delay: 0.5s; }
.pillar:nth-child(4) { height: 85%; animation-delay: 0.65s; }
.pillar:nth-child(5) { height: 60%; animation-delay: 0.8s; }
@keyframes pillar-rise {
from { transform: scaleY(0); transform-origin: bottom; }
to { transform: scaleY(1); transform-origin: bottom; }
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(1.5rem); }
to { opacity: 1; transform: translateY(0); }
}
/* ========================================================================
Buttons
======================================================================== */
.btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.85rem 1.5rem;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.01em;
border-radius: 2px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn--primary {
background: var(--accent);
color: var(--btn-primary-ink);
border-color: var(--accent);
}
.btn--primary:hover {
background: var(--accent-bright);
border-color: var(--accent-bright);
color: var(--btn-primary-ink);
transform: translateY(-1px);
box-shadow: 0 8px 24px -8px var(--shadow-accent);
}
.btn--ghost {
background: transparent;
color: var(--ink);
border-color: var(--rule-bright);
}
.btn--ghost:hover {
background: var(--bg-card);
border-color: var(--accent);
color: var(--accent);
}
.btn--large {
padding: 1.1rem 2rem;
font-size: 1rem;
}
.btn__arrow {
display: inline-block;
transition: transform 0.25s ease;
}
.btn:hover .btn__arrow {
transform: translateX(4px);
}
/* ========================================================================
Sections
======================================================================== */
.section {
padding: clamp(4rem, 10vw, 8rem) var(--gutter);
max-width: var(--max);
margin: 0 auto;
position: relative;
}
.section--dark {
background: var(--bg-alt);
max-width: none;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.section--dark > * {
max-width: var(--max);
margin-left: auto;
margin-right: auto;
}
.section__label {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 1rem;
}
.section__label::before {
content: "";
width: 2rem;
height: 1px;
background: var(--accent);
opacity: 0.6;
}
.section__title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--ink);
margin-bottom: 3rem;
max-width: 22ch;
font-variation-settings: "SOFT" 40, "opsz" 100;
}
.section__title--wide {
max-width: 30ch;
}
/* ========================================================================
About
======================================================================== */
.about {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 6vw, 5rem);
align-items: start;
}
@media (max-width: 768px) {
.about {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.about__body {
display: flex;
flex-direction: column;
gap: 1.25rem;
color: var(--ink-dim);
font-size: 1.05rem;
line-height: 1.7;
}
.about__body code {
color: var(--accent);
}
/* ========================================================================
Features
======================================================================== */
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
}
.feature {
background: var(--bg-alt);
padding: clamp(1.75rem, 3vw, 2.5rem);
transition: background 0.3s ease;
}
.feature:hover {
background: var(--bg-card);
}
.feature__num {
font-family: var(--font-display);
font-style: italic;
font-size: 1.8rem;
color: var(--accent);
margin-bottom: 1rem;
font-variation-settings: "SOFT" 100, "WONK" 1;
}
.feature__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.35rem;
line-height: 1.25;
color: var(--ink);
margin-bottom: 0.75rem;
letter-spacing: -0.01em;
}
.feature p {
color: var(--ink-dim);
font-size: 0.98rem;
line-height: 1.6;
}
/* ========================================================================
CTA
======================================================================== */
.cta {
padding: clamp(5rem, 12vw, 10rem) var(--gutter);
max-width: var(--max);
margin: 0 auto;
text-align: center;
}
.cta__title {
font-family: var(--font-display);
font-weight: 300;
font-style: italic;
font-size: clamp(2.5rem, 6vw, 4.5rem);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 1.5rem;
font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
}
.cta__lede {
font-size: 1.1rem;
color: var(--ink-dim);
max-width: 32rem;
margin: 0 auto 3rem;
line-height: 1.6;
}
.cta__actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 520px) {
.cta__actions {
flex-direction: column;
align-items: stretch;
}
.cta__actions .btn {
justify-content: center;
}
}
/* ========================================================================
Footer
======================================================================== */
.footer {
padding: 2.5rem var(--gutter);
border-top: 1px solid var(--rule);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
color: var(--ink-faint);
font-size: 0.88rem;
max-width: var(--max);
margin: 0 auto;
}
.footer__mark {
font-family: var(--font-display);
font-weight: 500;
color: var(--ink-dim);
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.footer__mark-img {
width: 1.4rem;
height: 1.4rem;
object-fit: contain;
}
/* Brand block: groups the logo+name, tagline, and domain together so
they stay visually associated. On desktop they sit inline; on mobile
they keep grouping while the action links drop below. */
.footer__brand {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.5rem;
}
.footer__tagline,
.footer__domain {
color: var(--ink-faint);
}
.footer__meta {
display: flex;
gap: 2rem;
letter-spacing: 0.02em;
align-items: center;
}
.footer__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--ink-dim);
transition: color 0.2s ease;
}
.footer__link:hover {
color: var(--accent);
}
.footer__icon {
width: 1em;
height: 1em;
display: inline-block;
}
@media (max-width: 640px) {
.footer {
/* Stack brand block on top, action links underneath, so the brand
has the full width to lay out across and the links don't get
squeezed into whatever space is left. */
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
}
.footer__brand {
/* Brand items (logo+name, tagline, domain) wrap among themselves on
narrow widths. Tighter gap so two often fit per line. */
gap: 0.4rem 1rem;
}
.footer__meta {
/* Action links lay out in a single tight row at narrow widths and
wrap if there are more than fit. */
gap: 0.75rem 1.25rem;
flex-wrap: wrap;
justify-content: flex-start;
}
}
/* ========================================================================
Setup page
======================================================================== */
.setup-page {
max-width: 780px;
margin: 0 auto;
padding: clamp(3rem, 8vw, 6rem) var(--gutter);
}
.setup-back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--ink-dim);
font-size: 0.88rem;
margin-bottom: 3rem;
letter-spacing: 0.02em;
}
.setup-back:hover {
color: var(--accent);
}
.setup-page h1 {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2.25rem, 5vw, 3.5rem);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 1.5rem;
font-variation-settings: "SOFT" 40, "opsz" 144;
}
.setup-page h1 em {
font-style: italic;
color: var(--accent);
font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.setup-page .setup-lede {
font-size: 1.15rem;
color: var(--ink-dim);
line-height: 1.6;
margin-bottom: 3rem;
}
.setup-page h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.85rem;
line-height: 1.2;
color: var(--ink);
margin-top: 3.5rem;
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--rule);
letter-spacing: -0.01em;
}
.setup-page h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.35rem;
line-height: 1.3;
color: var(--ink);
margin-top: 2.5rem;
margin-bottom: 1rem;
letter-spacing: -0.005em;
}
.setup-page p {
margin: 1rem 0;
color: var(--ink-dim);
line-height: 1.7;
}
.setup-page strong {
color: var(--ink);
font-weight: 600;
}
.setup-page ul, .setup-page ol {
margin: 1rem 0 1.5rem;
padding-left: 1.5rem;
color: var(--ink-dim);
line-height: 1.7;
}
.setup-page li {
margin-bottom: 0.5rem;
}
.setup-page li::marker {
color: var(--accent);
}
.setup-page table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0 2rem;
font-size: 0.95rem;
border: 1px solid var(--rule);
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) {
.setup-page table {
display: table;
overflow-x: visible;
}
}
.setup-page th, .setup-page td {
text-align: left;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--rule);
vertical-align: top;
}
.setup-page th {
background: var(--bg-alt);
color: var(--accent);
font-weight: 600;
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-bottom: 1px solid var(--rule-bright);
}
.setup-page td {
color: var(--ink-dim);
}
.setup-page tr:last-child td {
border-bottom: none;
}
.setup-page hr {
border: none;
border-top: 1px solid var(--rule);
margin: 3rem 0;
}
.setup-page .callout {
margin: 1.5rem 0;
padding: 1rem 1.25rem;
background: var(--bg-alt);
border-left: 3px solid var(--accent);
border-radius: 2px;
font-size: 0.95rem;
color: var(--ink-dim);
}
.setup-page .callout strong {
color: var(--accent);
}
/* Warning variant: amber accent instead of violet, used for must-read
gotchas like "this command needs admin to function". */
.setup-page .callout--warn {
border-left-color: #d97706;
background: color-mix(in srgb, #d97706 6%, var(--bg-alt));
}
.setup-page .callout--warn strong {
color: #d97706;
}
.setup-page .toc {
background: var(--bg-alt);
border: 1px solid var(--rule);
padding: 1.5rem 2rem;
border-radius: 2px;
margin: 2rem 0 3rem;
}
.setup-page .toc-title {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1rem;
font-weight: 600;
}
.setup-page .toc ol {
margin: 0;
padding-left: 1.25rem;
font-size: 0.95rem;
}
.setup-page .toc li {
margin-bottom: 0.35rem;
}
.setup-page .toc a {
color: var(--ink-dim);
}
.setup-page .toc a:hover {
color: var(--accent);
}
/* ========================================================================
Live status — hero strip on homepage + dedicated status page
Status dots use a tri-state: is-online (green), is-offline (red),
is-unknown (dim). The dot itself is just a small circle; the glow
uses a box-shadow so it sits naturally next to body text.
======================================================================== */
/* Hero stats strip (homepage) ------------------------------------------- */
.hero__stats {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 0.85rem;
margin: -1.25rem 0 2.25rem;
font-size: 0.92rem;
color: var(--ink-faint);
letter-spacing: 0.01em;
animation: fade-up 1s 0.32s ease both;
}
.hero__stat {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--ink-faint);
text-decoration: none;
transition: color 0.18s ease;
}
a.hero__stat:hover {
color: var(--ink-dim);
}
.hero__stat-num {
font-family: var(--font-display);
font-weight: 500;
font-style: italic;
color: var(--accent);
font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 24;
font-size: 1.05em;
letter-spacing: -0.01em;
}
.hero__stat-sep {
color: var(--ink-faint);
opacity: 0.55;
user-select: none;
}
/* Status indicator dot — used on hero strip and footer */
.hero__stat-dot,
.footer__status-dot {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--ink-faint);
flex-shrink: 0;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.hero__stat-dot.is-online,
.footer__status-dot.is-online {
background: #5ed29a;
box-shadow: 0 0 0 0.18rem rgba(94, 210, 154, 0.16);
}
.hero__stat-dot.is-offline,
.footer__status-dot.is-offline {
background: #e57b7b;
box-shadow: 0 0 0 0.18rem rgba(229, 123, 123, 0.18);
}
.hero__stat-dot.is-unknown {
background: var(--ink-faint);
box-shadow: none;
}
/* Pulsing breath on the online dot (subtle — just enough to feel alive) */
@keyframes status-pulse {
0%, 100% { box-shadow: 0 0 0 0.18rem rgba(94, 210, 154, 0.16); }
50% { box-shadow: 0 0 0 0.28rem rgba(94, 210, 154, 0.06); }
}
.hero__stat-dot.is-online,
.footer__status-dot.is-online {
animation: status-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.hero__stat-dot.is-online,
.footer__status-dot.is-online {
animation: none;
}
}
/* Footer status link — small dot next to "Status" text */
.footer__link .footer__status-dot {
width: 0.42rem;
height: 0.42rem;
margin-right: 0.05rem;
}
/* Dedicated status page ------------------------------------------------- */
.status {
max-width: 64rem;
margin: 0 auto;
padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(4rem, 9vw, 7rem);
}
.status__head {
margin-bottom: clamp(3rem, 7vw, 5rem);
}
.status__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-size: 0.78rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--ink-dim);
margin-bottom: 1.5rem;
}
.status__dot {
display: inline-block;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background: var(--ink-faint);
flex-shrink: 0;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.status__dot.is-online {
background: #5ed29a;
box-shadow: 0 0 0 0.32rem rgba(94, 210, 154, 0.14);
animation: status-pulse-big 2.4s ease-in-out infinite;
}
.status__dot.is-offline {
background: #e57b7b;
box-shadow: 0 0 0 0.32rem rgba(229, 123, 123, 0.18);
}
.status__dot.is-unknown {
background: var(--ink-faint);
}
@keyframes status-pulse-big {
0%, 100% { box-shadow: 0 0 0 0.32rem rgba(94, 210, 154, 0.14); }
50% { box-shadow: 0 0 0 0.5rem rgba(94, 210, 154, 0.04); }
}
@media (prefers-reduced-motion: reduce) {
.status__dot.is-online {
animation: none;
}
}
.status__title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2.5rem, 7vw, 4.75rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 1.5rem;
font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
max-width: 18ch;
}
.status__title em {
font-style: italic;
font-weight: 300;
color: var(--accent);
font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.status__sub {
font-size: clamp(1rem, 1.6vw, 1.15rem);
line-height: 1.55;
color: var(--ink-dim);
max-width: 38rem;
}
.status__sub code {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.92em;
background: var(--bg-card);
border: 1px solid var(--rule);
padding: 0.08em 0.4em;
border-radius: 4px;
color: var(--accent);
}
/* Stats grid */
.status__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: 1.25rem;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.stat-card {
border: 1px solid var(--rule);
background: var(--bg-card);
padding: 1.75rem 1.5rem 1.5rem;
border-radius: 4px;
position: relative;
overflow: hidden;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.stat-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 2rem;
height: 1px;
background: var(--accent);
opacity: 0.5;
}
.stat-card:hover {
border-color: var(--rule-bright);
transform: translateY(-2px);
}
.stat-card__num {
font-family: var(--font-display);
font-weight: 300;
font-style: italic;
color: var(--accent);
font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
font-size: clamp(2.25rem, 5vw, 3rem);
line-height: 1.05;
letter-spacing: -0.02em;
margin-bottom: 0.6rem;
}
.stat-card__label {
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* Footer line under the grid */
.status__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 0.85rem;
font-size: 0.85rem;
color: var(--ink-faint);
border-top: 1px solid var(--rule);
padding-top: 1.25rem;
}
.status__foot time {
color: var(--ink-dim);
font-variant-numeric: tabular-nums;
}
.status__foot-sep {
opacity: 0.5;
}
/* ========================================================================
Status page — visual upgrades
Ambient glow, decorative torii, refresh pill, "About this page" block.
======================================================================== */
.status {
position: relative;
isolation: isolate; /* contain absolute children to this stacking context */
}
/* Soft radial glow at the top — sets the mood without overwhelming */
.status__ambient {
position: absolute;
top: -8rem;
left: 50%;
transform: translateX(-50%);
width: min(80rem, 120%);
height: 30rem;
pointer-events: none;
z-index: -1;
background: radial-gradient(
ellipse at center,
color-mix(in srgb, var(--accent) 22%, transparent) 0%,
color-mix(in srgb, var(--accent) 8%, transparent) 35%,
transparent 70%
);
opacity: 0.65;
transition: opacity 0.6s ease, filter 0.6s ease;
}
.status--offline .status__ambient {
background: radial-gradient(
ellipse at center,
rgba(229, 123, 123, 0.18) 0%,
rgba(229, 123, 123, 0.05) 35%,
transparent 70%
);
opacity: 0.55;
}
/* Decorative torii silhouette behind the headline */
.status__torii {
position: absolute;
top: 1rem;
right: -2rem;
width: clamp(14rem, 28vw, 22rem);
height: auto;
color: var(--accent);
opacity: 0.07;
pointer-events: none;
z-index: -1;
transition: opacity 0.5s ease, transform 0.8s ease;
}
.status--online .status__torii {
opacity: 0.09;
animation: torii-breath 6s ease-in-out infinite;
}
.status--offline .status__torii {
opacity: 0.04;
filter: grayscale(0.7);
}
@keyframes torii-breath {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
.status--online .status__torii { animation: none; }
}
@media (max-width: 720px) {
.status__torii {
right: -4rem;
width: 16rem;
opacity: 0.05;
}
}
/* Eyebrow row gets a refresh pill on the right */
.status__eyebrow {
flex-wrap: wrap;
}
.status__refresh-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-left: auto;
padding: 0.3rem 0.7rem 0.3rem 0.55rem;
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: 999px;
transition: border-color 0.3s ease, color 0.3s ease;
}
.status--online .status__refresh-pill {
border-color: color-mix(in srgb, var(--accent) 35%, var(--rule));
color: var(--ink-dim);
}
.status__refresh-spinner {
display: inline-block;
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
border: 1.5px solid var(--ink-faint);
border-top-color: var(--accent);
animation: spin 1.4s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.status__refresh-spinner { animation: none; }
}
@media (max-width: 480px) {
.status__refresh-pill {
margin-left: 0;
margin-top: 0.2rem;
}
}
/* Stat card: corner ornament and refined hover */
.stat-card {
/* override the basic ::before from earlier so we can use the corner div instead */
}
.stat-card::before { display: none; }
.stat-card__corner {
position: absolute;
top: 0;
left: 0;
width: 1.75rem;
height: 1.75rem;
pointer-events: none;
}
.stat-card__corner::before,
.stat-card__corner::after {
content: "";
position: absolute;
background: var(--accent);
opacity: 0.65;
transition: opacity 0.25s ease, width 0.3s ease, height 0.3s ease;
}
/* Top edge — a short horizontal bar */
.stat-card__corner::before {
top: 0;
left: 0;
height: 1px;
width: 1.5rem;
}
/* Left edge — a short vertical bar */
.stat-card__corner::after {
top: 0;
left: 0;
width: 1px;
height: 1.5rem;
}
.stat-card:hover .stat-card__corner::before { width: 2.25rem; opacity: 1; }
.stat-card:hover .stat-card__corner::after { height: 2.25rem; opacity: 1; }
/* Numeric stat cards keep the big italic display look.
The uptime card uses a smaller font since "3d 7h 22m" needs more room. */
.stat-card__num--text {
font-size: clamp(1.6rem, 3.5vw, 2.25rem);
font-style: italic;
font-variant-numeric: tabular-nums;
}
/* Stagger fade-in on the stat cards */
.stat-card {
opacity: 0;
animation: fade-up 0.7s ease forwards;
}
.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.15s; }
.stat-card:nth-child(3) { animation-delay: 0.25s; }
.stat-card:nth-child(4) { animation-delay: 0.35s; }
/* "About this page" detail block at the bottom */
.status__details {
margin-top: clamp(2.5rem, 5vw, 4rem);
max-width: 42rem;
}
.status__details-rule {
height: 1px;
width: 3rem;
background: var(--accent);
opacity: 0.55;
margin-bottom: 1.5rem;
}
.status__details-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.1rem;
letter-spacing: 0.01em;
color: var(--ink);
margin-bottom: 0.85rem;
}
.status__details-body {
font-size: 0.95rem;
line-height: 1.65;
color: var(--ink-dim);
margin-bottom: 1.25rem;
}
.status__details-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.85rem;
font-size: 0.82rem;
color: var(--ink-faint);
font-variant-numeric: tabular-nums;
}
.status__details-meta time {
color: var(--ink-dim);
}
.status__details-sep {
opacity: 0.5;
}
/* Active nav link (the page you're on) */
.nav__link--current {
color: var(--accent);
}
.nav__link--current::after {
content: "";
display: block;
width: 1.25rem;
height: 1px;
background: var(--accent);
margin-top: 2px;
opacity: 0.7;
}
@media (max-width: 720px) {
.nav__link--current::after { display: none; }
}
/* ========================================================================
Changelog page — release notes with timeline-style markers
======================================================================== */
.changelog {
max-width: 56rem;
margin: 0 auto;
padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(4rem, 9vw, 7rem);
}
.changelog__head {
margin-bottom: clamp(3rem, 7vw, 5rem);
}
.changelog__eyebrow {
font-size: 0.78rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.changelog__eyebrow::before {
content: "";
width: 2.5rem;
height: 1px;
background: var(--accent);
opacity: 0.6;
}
.changelog__title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2.5rem, 7vw, 4.75rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 1.5rem;
font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
max-width: 18ch;
}
.changelog__title em {
font-style: italic;
font-weight: 300;
color: var(--accent);
font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.changelog__sub {
font-size: clamp(1rem, 1.6vw, 1.15rem);
line-height: 1.6;
color: var(--ink-dim);
max-width: 42rem;
}
.changelog__sub a {
color: var(--accent);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
text-underline-offset: 0.15em;
transition: text-decoration-color 0.2s ease;
}
.changelog__sub a:hover {
text-decoration-color: var(--accent);
}
/* The vertical-timeline container ------------------------------------- */
.releases {
position: relative;
/* hairline that runs the height of all releases, behind the markers */
padding-left: 2.5rem;
}
.releases::before {
content: "";
position: absolute;
top: 0.75rem;
bottom: 2rem;
left: 0.6rem;
width: 1px;
background: linear-gradient(
to bottom,
var(--rule),
var(--rule-bright) 12%,
var(--rule-bright) 88%,
var(--rule)
);
opacity: 0.7;
}
@media (max-width: 600px) {
.releases {
padding-left: 1.75rem;
}
.releases::before {
left: 0.35rem;
}
}
/* Each release ------------------------------------------------------- */
.release {
position: relative;
margin-bottom: clamp(2.75rem, 6vw, 4.25rem);
}
.release:last-child {
margin-bottom: 0;
}
/* The dot on the timeline */
.release__marker {
position: absolute;
top: 1rem;
left: -2.1rem;
width: 0.85rem;
height: 0.85rem;
border-radius: 50%;
background: var(--accent);
box-shadow:
0 0 0 4px var(--bg),
0 0 0 5px color-mix(in srgb, var(--accent) 50%, transparent);
}
@media (max-width: 600px) {
.release__marker {
left: -1.45rem;
width: 0.7rem;
height: 0.7rem;
}
}
/* The first release gets a gentle pulse to draw the eye */
.release:first-child .release__marker {
animation: release-pulse 3s ease-in-out infinite;
}
@keyframes release-pulse {
0%, 100% {
box-shadow:
0 0 0 4px var(--bg),
0 0 0 5px color-mix(in srgb, var(--accent) 50%, transparent),
0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent);
}
50% {
box-shadow:
0 0 0 4px var(--bg),
0 0 0 5px color-mix(in srgb, var(--accent) 50%, transparent),
0 0 0 12px color-mix(in srgb, var(--accent) 12%, transparent);
}
}
@media (prefers-reduced-motion: reduce) {
.release:first-child .release__marker { animation: none; }
}
/* Release header */
.release__head {
margin-bottom: 1.5rem;
}
.release__version-row {
display: flex;
align-items: baseline;
gap: 0.85rem;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
.release__version {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
color: var(--accent);
font-size: clamp(1.65rem, 3.5vw, 2.25rem);
line-height: 1;
letter-spacing: -0.01em;
font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.release__pill {
display: inline-block;
padding: 0.18rem 0.55rem;
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
border-radius: 999px;
position: relative;
top: -0.15em;
}
.release__date {
display: inline-block;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 0.35rem;
}
.release__theme {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.05rem, 2vw, 1.25rem);
letter-spacing: -0.005em;
color: var(--ink);
font-variation-settings: "opsz" 36;
}
/* Release body — categorized lists */
.release__body {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.release__group-title {
font-size: 0.7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 0.7rem;
display: flex;
align-items: center;
gap: 0.65rem;
}
.release__group-title::before {
content: "";
width: 0.65rem;
height: 1px;
background: var(--ink-faint);
opacity: 0.5;
}
.release__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.release__list li {
position: relative;
padding-left: 1.25rem;
font-size: 0.96rem;
line-height: 1.55;
color: var(--ink-dim);
}
.release__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.65em;
width: 0.45rem;
height: 1px;
background: var(--accent);
opacity: 0.65;
}
.release__list code {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.88em;
background: var(--bg-card);
border: 1px solid var(--rule);
padding: 0.05em 0.35em;
border-radius: 3px;
color: var(--accent);
white-space: nowrap;
}
/* Footer note under the releases */
.changelog__foot {
margin-top: clamp(3rem, 6vw, 4.5rem);
padding-top: 0;
max-width: 42rem;
}
.changelog__foot-rule {
height: 1px;
width: 3rem;
background: var(--accent);
opacity: 0.55;
margin-bottom: 1.5rem;
}
.changelog__foot p {
font-size: 0.92rem;
line-height: 1.65;
color: var(--ink-faint);
}
.changelog__foot a {
color: var(--accent);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
text-underline-offset: 0.15em;
transition: text-decoration-color 0.2s ease;
}
.changelog__foot a:hover {
text-decoration-color: var(--accent);
}
/* ========================================================================
Dashboard — login + server picker
Same editorial vocabulary: violet accent, serif italic for emphasis,
restrained spacing. Designed to live at /dashboard.
======================================================================== */
.dashboard {
max-width: 56rem;
margin: 0 auto;
padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(4rem, 9vw, 7rem);
position: relative;
}
.dashboard__head {
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.dashboard__eyebrow {
font-size: 0.78rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.dashboard__eyebrow::before {
content: "";
width: 2.5rem;
height: 1px;
background: var(--accent);
opacity: 0.6;
}
.dashboard__title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2.5rem, 7vw, 4.75rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 1.5rem;
font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
max-width: 18ch;
}
.dashboard__title em {
font-style: italic;
font-weight: 300;
color: var(--accent);
font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.dashboard__sub {
font-size: clamp(1rem, 1.6vw, 1.15rem);
line-height: 1.6;
color: var(--ink-dim);
max-width: 42rem;
margin-bottom: 2.25rem;
}
.dashboard__sub code {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.88em;
background: var(--bg-card);
border: 1px solid var(--rule);
padding: 0.05em 0.4em;
border-radius: 4px;
color: var(--accent);
}
.dashboard__small {
font-size: 0.85rem;
line-height: 1.55;
color: var(--ink-faint);
margin-top: 1.5rem;
max-width: 38rem;
}
.dashboard__small--muted {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--rule);
}
.dashboard__small code {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.9em;
color: var(--accent);
}
.dashboard__foot {
margin-top: clamp(3rem, 5vw, 4rem);
padding-top: 1.25rem;
border-top: 1px solid var(--rule);
}
.dashboard__logout {
font-size: 0.82rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
text-decoration: none;
transition: color 0.2s ease;
}
.dashboard__logout:hover {
color: var(--accent);
}
/* Login variant: extra room around the CTA */
.dashboard--login .btn--primary {
margin-bottom: 0.5rem;
}
/* Guild picker list -------------------------------------------------- */
.guild-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
gap: 1rem;
}
.guild-card {
display: flex;
align-items: center;
gap: 1.1rem;
padding: 1.1rem 1.25rem;
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: 6px;
cursor: pointer;
transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
position: relative;
overflow: hidden;
}
.guild-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1.5rem;
height: 1px;
background: var(--accent);
opacity: 0;
transition: opacity 0.25s ease, width 0.3s ease;
}
.guild-card:hover {
border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
transform: translateY(-1px);
}
.guild-card:hover::before {
opacity: 0.7;
width: 2.25rem;
}
.guild-card__icon {
width: 3rem;
height: 3rem;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
background: var(--bg-alt);
border: 1px solid var(--rule);
display: flex;
align-items: center;
justify-content: center;
}
.guild-card__icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.guild-card__icon-fallback {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: 1.4rem;
color: var(--accent);
font-variation-settings: "opsz" 36;
}
.guild-card__body {
flex: 1;
min-width: 0;
}
.guild-card__name {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.05rem;
letter-spacing: -0.005em;
color: var(--ink);
margin-bottom: 0.2rem;
font-variation-settings: "opsz" 24;
/* Truncate long names */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.guild-card__role {
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-faint);
margin: 0;
}
.guild-card__cta {
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-dim);
display: inline-flex;
align-items: center;
gap: 0.45rem;
flex-shrink: 0;
transition: color 0.2s ease, transform 0.2s ease;
}
.guild-card:hover .guild-card__cta {
color: var(--accent);
}
.guild-card__arrow {
display: inline-block;
transition: transform 0.25s ease;
}
.guild-card:hover .guild-card__arrow {
transform: translateX(3px);
}
@media (max-width: 480px) {
.guild-card {
padding: 0.95rem 1rem;
gap: 0.85rem;
}
.guild-card__icon {
width: 2.5rem;
height: 2.5rem;
}
.guild-card__cta {
/* Hide the CTA text on tiny screens; keep just the arrow */
gap: 0;
font-size: 0;
}
.guild-card__arrow {
font-size: 1rem;
color: var(--ink-faint);
}
.guild-card:hover .guild-card__arrow {
color: var(--accent);
}
}
/* ========================================================================
Dashboard — additional refinements (login title, notes, notice tag)
======================================================================== */
/* Soft ambient glow at the top of the dashboard pages */
.dashboard__ambient {
position: absolute;
top: -8rem;
left: 50%;
transform: translateX(-50%);
width: min(72rem, 120%);
height: 28rem;
pointer-events: none;
z-index: -1;
background: radial-gradient(
ellipse at center,
color-mix(in srgb, var(--accent) 18%, transparent) 0%,
color-mix(in srgb, var(--accent) 6%, transparent) 35%,
transparent 70%
);
opacity: 0.5;
}
.dashboard {
position: relative;
isolation: isolate;
}
/* Login title is a touch smaller than the homepage hero — feels more like
"front door" than "marketing splash" */
.dashboard__title--login {
font-size: clamp(2.25rem, 6vw, 4rem);
}
/* Wrap the login button so it's auto-width (not stretched) on every viewport */
.dashboard__cta-row {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-bottom: 2rem;
}
.dashboard__cta-row .btn {
/* Override hero__cta full-width-on-mobile behavior */
width: auto;
flex: 0 0 auto;
}
/* Quiet block of notes below the CTA */
.dashboard__notes {
max-width: 36rem;
border-top: 1px solid var(--rule);
padding-top: 1.5rem;
}
.dashboard__notes p {
font-size: 0.88rem;
line-height: 1.6;
color: var(--ink-dim);
margin-bottom: 0.65rem;
}
.dashboard__notes p:last-child {
margin-bottom: 0;
}
.dashboard__notes-quiet {
font-size: 0.82rem !important;
color: var(--ink-faint) !important;
}
.dashboard__notes code {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.88em;
background: var(--bg-card);
border: 1px solid var(--rule);
padding: 0.05em 0.4em;
border-radius: 4px;
color: var(--accent);
}
/* "Coming soon" notice block on the home page */
.dashboard__notice {
margin-top: 2rem;
padding: 1rem 1.15rem;
background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--rule));
border-radius: 6px;
font-size: 0.88rem;
line-height: 1.55;
color: var(--ink-dim);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.55rem 0.7rem;
}
.dashboard__notice-tag {
display: inline-block;
padding: 0.15rem 0.55rem;
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
border-radius: 999px;
flex-shrink: 0;
}
.dashboard__notice code {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.88em;
background: var(--bg);
border: 1px solid var(--rule);
padding: 0.05em 0.4em;
border-radius: 4px;
color: var(--accent);
white-space: nowrap;
}
/* ========================================================================
Settings page — form for per-server config
======================================================================== */
.settings {
max-width: 50rem;
margin: 0 auto;
padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(4rem, 9vw, 7rem);
}
.settings__back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
text-decoration: none;
margin-bottom: 2rem;
transition: color 0.2s ease, transform 0.2s ease;
}
.settings__back:hover {
color: var(--accent);
transform: translateX(-2px);
}
.settings__head {
margin-bottom: clamp(2rem, 5vw, 3rem);
}
.settings__title-row {
display: flex;
align-items: center;
gap: 1.1rem;
}
.settings__icon {
flex-shrink: 0;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
overflow: hidden;
background: var(--bg-alt);
border: 1px solid var(--rule);
display: flex;
align-items: center;
justify-content: center;
}
.settings__icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.settings__icon-fallback {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: 1.6rem;
color: var(--accent);
font-variation-settings: "opsz" 36;
}
.settings__eyebrow {
font-size: 0.7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 0.3rem;
}
.settings__title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.5rem, 4vw, 2rem);
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.1;
font-variation-settings: "opsz" 36;
/* Truncate runaway names */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
/* Flash messages ----------------------------------------------------- */
.flashes {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 2rem;
}
.flash {
padding: 0.85rem 1rem;
border-radius: 6px;
font-size: 0.92rem;
line-height: 1.5;
border: 1px solid var(--rule);
background: var(--bg-card);
color: var(--ink-dim);
}
.flash--success {
border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
color: var(--ink);
}
.flash--warning {
border-color: color-mix(in srgb, #d97706 45%, var(--rule));
background: color-mix(in srgb, #d97706 6%, var(--bg-card));
}
.flash--error {
border-color: color-mix(in srgb, #dc2626 45%, var(--rule));
background: color-mix(in srgb, #dc2626 6%, var(--bg-card));
}
/* Form sections ------------------------------------------------------ */
.settings__form {
display: flex;
flex-direction: column;
gap: clamp(2rem, 4vw, 3rem);
}
.form-section {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
border-bottom: 1px solid var(--rule);
}
.form-section:last-of-type {
border-bottom: none;
padding-bottom: 0;
}
.form-section__head {
margin-bottom: 0.5rem;
}
.form-section__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.15rem;
letter-spacing: -0.005em;
color: var(--ink);
margin-bottom: 0.4rem;
font-variation-settings: "opsz" 36;
}
.form-section__desc {
font-size: 0.9rem;
line-height: 1.55;
color: var(--ink-faint);
max-width: 38rem;
}
/* Field: label + input + help text ----------------------------------- */
.field {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.field-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
gap: 1.25rem;
}
.field__label {
display: flex;
align-items: baseline;
gap: 0.6rem;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--ink);
}
.field__required {
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
font-weight: 500;
}
.field__optional {
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
font-weight: 500;
}
.field__help {
font-size: 0.82rem;
line-height: 1.5;
color: var(--ink-faint);
}
.field__help code {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.88em;
background: var(--bg-card);
border: 1px solid var(--rule);
padding: 0 0.3em;
border-radius: 3px;
color: var(--accent);
}
.field__input,
.field__select {
width: 100%;
padding: 0.7rem 0.85rem;
font-size: 1rem; /* >=16px so iOS doesn't auto-zoom on focus */
font-family: inherit;
color: var(--ink);
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: 5px;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
appearance: none;
-webkit-appearance: none;
}
.field__input:focus,
.field__select:focus {
outline: none;
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field__input:hover:not(:focus),
.field__select:hover:not(:focus) {
border-color: var(--rule-bright);
}
/* Custom select chevron */
.field__select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.85rem center;
padding-right: 2.25rem;
}
/* Number input — strip browser spinners for a cleaner look */
.field__input[type="number"] {
-moz-appearance: textfield;
}
.field__input[type="number"]::-webkit-outer-spin-button,
.field__input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Patreon role multi-checkbox grid ----------------------------------- */
.role-checkboxes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
gap: 0.5rem;
border: 1px solid var(--rule);
border-radius: 5px;
background: var(--bg-card);
padding: 0.6rem;
margin: 0;
max-height: 16rem;
overflow-y: auto;
}
.role-check {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.4rem 0.55rem;
border-radius: 4px;
cursor: pointer;
transition: background 0.12s ease;
font-size: 0.92rem;
color: var(--ink-dim);
}
.role-check:hover {
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.role-check input[type="checkbox"] {
flex-shrink: 0;
appearance: none;
-webkit-appearance: none;
width: 1rem;
height: 1rem;
border: 1.5px solid var(--rule-bright);
border-radius: 3px;
background: var(--bg);
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
display: grid;
place-items: center;
}
.role-check input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
}
.role-check input[type="checkbox"]:checked::after {
content: "";
width: 0.55rem;
height: 0.55rem;
background: var(--bg);
clip-path: polygon(14% 44%, 0 64%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.role-check__swatch {
flex-shrink: 0;
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
background: var(--role-color, var(--ink-faint));
border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.role-check__name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--ink);
}
/* Toggle switch ------------------------------------------------------ */
.toggle {
display: inline-flex;
align-items: center;
gap: 0.85rem;
cursor: pointer;
user-select: none;
}
.toggle input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.toggle__visual {
flex-shrink: 0;
width: 2.5rem;
height: 1.4rem;
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: 999px;
position: relative;
transition: background 0.18s ease, border-color 0.18s ease;
}
.toggle__visual::after {
content: "";
position: absolute;
top: 0.15rem;
left: 0.15rem;
width: 1rem;
height: 1rem;
background: var(--ink-faint);
border-radius: 50%;
transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), background 0.22s ease;
}
.toggle input:checked + .toggle__visual {
background: color-mix(in srgb, var(--accent) 25%, var(--bg-card));
border-color: var(--accent);
}
.toggle input:checked + .toggle__visual::after {
transform: translateX(1.1rem);
background: var(--accent);
}
.toggle input:focus-visible + .toggle__visual {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.toggle__label {
font-size: 0.95rem;
color: var(--ink);
line-height: 1.4;
}
/* Save bar ----------------------------------------------------------- */
.save-bar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
padding-top: 1.5rem;
border-top: 1px solid var(--rule);
margin-top: 1rem;
}
.save-bar__cancel {
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-faint);
text-decoration: none;
transition: color 0.2s ease;
}
.save-bar__cancel:hover {
color: var(--ink);
}
@media (max-width: 480px) {
.save-bar {
flex-direction: column-reverse;
align-items: stretch;
}
.save-bar .btn {
justify-content: center;
}
.save-bar__cancel {
text-align: center;
padding: 0.5rem;
}
}
/* Make the whole guild card clickable via its inner wrapper */
.guild-card__link {
display: contents;
color: inherit;
text-decoration: none;
}
/* Visually-hidden utility (used for fieldset legend) */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* Inline link inside the dashboard notice banner */
.dashboard__notice-link {
color: var(--accent);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
text-underline-offset: 0.15em;
transition: text-decoration-color 0.2s ease;
}
.dashboard__notice-link:hover {
text-decoration-color: var(--accent);
}
/* ========================================================================
v1.2 doc-update odds and ends
======================================================================== */
/* Inline accent links inside About paragraph */
.about__link {
color: var(--accent);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
text-underline-offset: 0.15em;
transition: text-decoration-color 0.2s ease;
}
.about__link:hover {
text-decoration-color: var(--accent);
}
/* Inline link inside a feature card body */
.feature__link {
color: var(--accent);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent);
text-underline-offset: 0.15em;
transition: text-decoration-color 0.2s ease;
}
.feature__link:hover {
text-decoration-color: var(--accent);
}
/* "Fast track" callout box on the setup page */
.setup-callout {
margin: 1.5rem 0 2.5rem;
padding: 1.1rem 1.25rem;
background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--rule));
border-radius: 6px;
}
.setup-callout__tag {
display: inline-block;
padding: 0.18rem 0.55rem;
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
border-radius: 999px;
margin-bottom: 0.6rem;
}
.setup-callout p {
font-size: 0.92rem;
line-height: 1.6;
color: var(--ink-dim);
margin: 0;
}
.setup-callout a {
color: var(--accent);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
text-underline-offset: 0.15em;
transition: text-decoration-color 0.2s ease;
}
.setup-callout a:hover {
text-decoration-color: var(--accent);
}
/* -----------------------------------------------------------------------
Back-to-top button
--------------------------------------------------------------------- */
/* Fixed-position circular button bottom-right. Hidden by default; the
.is-visible class is toggled by a scroll listener once the user has
scrolled past ~400px. Subtle resting state; picks up the violet accent
on hover/focus. Sits above page content but below the mobile nav
drawer (drawer is z-index 100 region). */
.back-to-top {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
width: 2.75rem;
height: 2.75rem;
display: grid;
place-items: center;
padding: 0;
border-radius: 50%;
border: 1px solid var(--rule);
background: var(--bg-alt);
color: var(--ink-dim);
cursor: pointer;
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition:
opacity 0.25s ease,
transform 0.25s ease,
background 0.15s ease,
color 0.15s ease,
border-color 0.15s ease;
z-index: 50;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.back-to-top.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.back-to-top:hover,
.back-to-top:focus-visible {
background: var(--accent);
color: #fff;
border-color: var(--accent);
outline: none;
}
.back-to-top:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.back-to-top svg {
width: 1rem;
height: 1rem;
}
@media (max-width: 480px) {
.back-to-top {
right: 1rem;
bottom: 1rem;
width: 2.5rem;
height: 2.5rem;
}
}
/* Respect reduced-motion preference: skip the entrance animation */
@media (prefers-reduced-motion: reduce) {
.back-to-top {
transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
transform: none;
}
}