/* ================================================================
RENFECHT — Core Stylesheet
Design tokens, base styles, typography, layout primitives.
Theme is controlled via [data-palette] and [data-mode] on .
Ornament density via [data-ornate] on .
================================================================ */
/* ---------- Palettes ---------- */
/* DEFAULT — Poster: brand colors lifted from the existing tournament poster */
:root,
[data-palette="poster"] {
--paper: #fcc5a4; /* poster background */
--paper-deep: #f5b186;
--paper-edge: #e08e58;
--ink: #2a1408;
--ink-soft: #4a2418;
--ink-mute: #8a5840;
--rule: #c4865a;
--accent: #950606; /* poster bold text */
--accent-deep: #6a0404;
--accent-soft: #c43232;
--gold: #b8782a;
--gold-deep: #7a4f18;
}
[data-palette="parchment"] {
--paper: #f1e7d2;
--paper-deep: #e6d8b9;
--paper-edge: #d6c393;
--ink: #1d150e;
--ink-soft: #3a2c1f;
--ink-mute: #6b5a45;
--rule: #b59f76;
--accent: #8a1c1c;
--accent-deep: #5e1010;
--accent-soft: #c9603d;
--gold: #a07a2b;
--gold-deep: #6b4f15;
}
[data-palette="steel"] {
--paper: #e8e3dc;
--paper-deep: #d2cbc1;
--paper-edge: #aaa193;
--ink: #1a1c1f;
--ink-soft: #2c3036;
--ink-mute: #5d6168;
--rule: #8a8e95;
--accent: #7a0d12;
--accent-deep: #4c0a0c;
--accent-soft: #b04a3b;
--gold: #6b6b6b;
--gold-deep: #3e3e3e;
}
[data-palette="forest"] {
--paper: #ece4cf;
--paper-deep: #d8cdb0;
--paper-edge: #b8a87f;
--ink: #0f1d14;
--ink-soft: #1d3422;
--ink-mute: #4a5f4e;
--rule: #87764e;
--accent: #1f4a2c;
--accent-deep: #102b18;
--accent-soft: #4a7a4a;
--gold: #a07a2b;
--gold-deep: #6b4f15;
}
[data-palette="midnight"] {
--paper: #f2e9d0;
--paper-deep: #e5d8b0;
--paper-edge: #b89e6a;
--ink: #100d09;
--ink-soft: #2a221a;
--ink-mute: #5e503a;
--rule: #a07a2b;
--accent: #c4451c;
--accent-deep: #8a2f10;
--accent-soft: #e07a3a;
--gold: #c69a3a;
--gold-deep: #8a6a1a;
}
/* ---------- Dark mode (overlays on top of palette) ---------- */
[data-mode="dark"] {
--paper: #15110b;
--paper-deep: #1d1812;
--paper-edge: #2c241a;
--ink: #f0e3c5;
--ink-soft: #d8c89d;
--ink-mute: #8a7a55;
--rule: #4a3f29;
}
[data-mode="dark"][data-palette="poster"] { --accent: #d8403a; --accent-deep: #950606; --accent-soft: #f08060; --gold: #d2a060; }
[data-mode="dark"][data-palette="parchment"] { --accent: #d2452a; --accent-deep: #8a2a18; --accent-soft: #e07a3a; --gold: #c69a3a; }
[data-mode="dark"][data-palette="steel"] { --accent: #d2452a; --accent-deep: #8a2a18; --gold: #9aa0a8; }
[data-mode="dark"][data-palette="forest"] { --accent: #4a9a5a; --accent-deep: #2d6a3a; --accent-soft: #7ac08a; }
[data-mode="dark"][data-palette="midnight"] { --accent: #e07a3a; --accent-deep: #b04a18; --gold: #d2a83a; }
/* ---------- Type tokens ---------- */
:root {
--font-display: "Cinzel", "Trajan Pro", serif;
--font-logotype: "Deutsch Gothic", "UnifrakturCook", "UnifrakturMaguntia", serif;
--font-body: "Cormorant Garamond", "EB Garamond", Georgia, serif;
--font-blackletter: "UnifrakturMaguntia", "UnifrakturCook", serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--scale-1: 0.75rem;
--scale-2: 0.875rem;
--scale-3: 1rem;
--scale-4: 1.125rem;
--scale-5: 1.375rem;
--scale-6: 1.75rem;
--scale-7: 2.25rem;
--scale-8: 3rem;
--scale-9: 4.25rem;
--scale-10: 6rem;
--scale-11: 8.5rem;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4.5rem;
--space-9: 6.5rem;
--space-10: 9rem;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
--maxw: 1240px;
--maxw-text: 68ch;
}
[data-display-font="blackletter"] { --font-display: "UnifrakturCook", "UnifrakturMaguntia", "Cinzel", serif; }
[data-display-font="fell"] { --font-display: "IM Fell English SC", "Cinzel", serif; }
[data-display-font="cinzel"] { --font-display: "Cinzel", serif; }
[data-display-font="deutsch"] { --font-display: "Deutsch Gothic", "UnifrakturCook", "Cinzel", serif; }
/* Accessibility mode: readable type, less visual noise, and fewer ornaments. */
[data-a11y="on"] {
--font-display: "Cinzel", serif !important;
--font-logotype: "Cinzel", serif !important;
--font-blackletter: "Cinzel", serif !important;
}
[data-a11y="on"] body { font-size: 19px; line-height: 1.65; }
[data-a11y="on"] .logotype { letter-spacing: 0.06em; font-weight: 600; text-transform: uppercase; font-size: 0.85em; }
[data-a11y="on"] .dropcap::first-letter { all: revert; }
[data-a11y="on"] body::before { display: none; } /* drop paper texture for cleaner read */
[data-a11y="on"] h1, [data-a11y="on"] h2, [data-a11y="on"] h3 { letter-spacing: 0.03em; }
[data-a11y="on"] .flourish { display: none !important; }
[data-a11y="on"] .frame::before,
[data-a11y="on"] .frame::after,
[data-a11y="on"] .frame > .corner { display: none; }
[data-a11y="on"] .divider::before,
[data-a11y="on"] .divider::after { background: var(--rule); }
/* ---------- Ornament density ---------- */
/* Plain mode: hide all decorative flourishes — pure typographic system. */
[data-ornate="plain"] .flourish { display: none !important; }
[data-ornate="plain"] .dropcap::first-letter {
font-family: var(--font-body);
font-size: 1em;
float: none;
line-height: inherit;
padding: 0;
color: inherit;
font-weight: inherit;
}
[data-ornate="plain"] .divider::before,
[data-ornate="plain"] .divider::after { background: var(--rule); }
[data-ornate="plain"] body::before { opacity: 0.18; } /* lighter paper texture */
[data-ornate="plain"] .frame::before,
[data-ornate="plain"] .frame::after,
[data-ornate="plain"] .frame > .corner { display: none; }
[data-ornate="plain"] .site-header { background: var(--paper); }
/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: 18px;
line-height: 1.55;
font-feature-settings: "kern", "liga", "onum";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
position: relative;
overflow-x: hidden;
}
/* Parchment texture overlay — subtle. Disabled in dark mode. */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
opacity: 0.55;
}
[data-mode="dark"] body::before { mix-blend-mode: screen; opacity: 0.22; }
/* Vignette around edges of the paper */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2;
background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.18) 100%);
}
[data-mode="dark"] body::after { background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%); }
main, header, footer, section, nav { position: relative; z-index: 3; }
/* ---------- Typography ---------- */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: 0.04em;
margin: 0;
text-wrap: balance;
color: var(--ink);
}
h1 { font-size: var(--scale-9); line-height: 0.95; letter-spacing: 0.06em; }
h2 { font-size: var(--scale-7); line-height: 1.05; }
h3 { font-size: var(--scale-5); line-height: 1.15; letter-spacing: 0.08em; text-transform: uppercase; }
h4 { font-size: var(--scale-4); line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; }
p { margin: 0 0 1em; text-wrap: pretty; }
p.lede { font-size: var(--scale-5); line-height: 1.35; font-style: italic; color: var(--ink-soft); }
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); transition: color .15s, border-color .15s, background .15s; }
a:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
.eyebrow {
font-family: var(--font-mono);
font-size: var(--scale-1);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
}
.blackletter { font-family: var(--font-blackletter); letter-spacing: 0; }
.logotype { font-family: var(--font-logotype); letter-spacing: 0.02em; font-weight: 400; }
.smallcaps { font-variant-caps: all-small-caps; letter-spacing: 0.12em; }
.italic { font-style: italic; }
.mono { font-family: var(--font-mono); }
/* Drop cap — first letter of a paragraph */
.dropcap::first-letter {
font-family: var(--font-blackletter);
font-size: 4.2em;
float: left;
line-height: 0.85;
padding: 0.05em 0.08em 0 0;
color: var(--accent);
font-weight: 400;
}
/* ---------- Layout primitives ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }
.wrap-text { max-width: var(--maxw-text); }
.section { padding-block: clamp(56px, 9vw, 120px); }
.section-tight { padding-block: clamp(40px, 6vw, 80px); }
.grid { display: grid; gap: var(--space-5); }
.flex { display: flex; }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
/* ---------- Rules & dividers ---------- */
.rule {
height: 1px;
background: var(--rule);
border: 0;
margin: var(--space-6) 0;
}
.rule-double {
height: 6px;
border: 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
margin: var(--space-6) 0;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--scale-2);
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 14px 28px;
background: var(--ink);
color: var(--paper);
border: 1px solid var(--ink);
border-radius: 0;
cursor: pointer;
position: relative;
transition: transform .12s ease, background .15s, color .15s, box-shadow .15s;
text-decoration: none;
}
.btn:hover { transform: translateY(-1px); background: var(--accent); border-color: var(--accent); color: var(--paper); box-shadow: 0 6px 0 -2px var(--ink); border-bottom: 1px solid var(--accent); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--ink); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
/* ---------- Ornamental frame (used on cards, hero, etc.) ---------- */
.frame {
position: relative;
padding: var(--space-6);
background: color-mix(in oklab, var(--paper) 92%, var(--paper-deep));
border: 1px solid var(--rule);
}
.frame--ornate { padding: var(--space-7); }
.frame::before, .frame::after,
.frame > .corner {
content: "";
position: absolute;
width: 36px;
height: 36px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
}
.frame::before { top: 4px; left: 4px; }
.frame::after { top: 4px; right: 4px; transform: scaleX(-1); }
.frame > .corner.bl { bottom: 4px; left: 4px; transform: scaleY(-1); }
.frame > .corner.br { bottom: 4px; right: 4px; transform: scale(-1, -1); }
/* ---------- Cards ---------- */
.card {
position: relative;
padding: var(--space-6);
background: color-mix(in oklab, var(--paper) 95%, var(--paper-deep));
border: 1px solid var(--rule);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 0 -3px var(--ink);
border-color: var(--ink);
}
/* ---------- Forms ---------- */
.field { display: block; margin-bottom: var(--space-5); }
.field-label {
display: block;
font-family: var(--font-mono);
font-size: var(--scale-1);
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 8px;
}
.field-hint { font-size: var(--scale-2); color: var(--ink-mute); margin-top: 6px; font-style: italic; }
.input, .select, .textarea {
width: 100%;
font-family: var(--font-body);
font-size: var(--scale-4);
color: var(--ink);
background: color-mix(in oklab, var(--paper) 80%, white 20%);
border: 1px solid var(--rule);
border-bottom: 2px solid var(--ink);
padding: 12px 14px;
border-radius: 0;
outline: none;
transition: border-color .15s, background .15s;
}
[data-mode="dark"] .input,
[data-mode="dark"] .select,
[data-mode="dark"] .textarea { background: color-mix(in oklab, var(--paper) 80%, black 20%); }
.input:focus, .select:focus, .textarea:focus {
border-color: var(--accent);
border-bottom-color: var(--accent);
background: color-mix(in oklab, var(--paper) 70%, white 30%);
}
.textarea { min-height: 110px; resize: vertical; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 8px 0; }
.check input { margin-top: 5px; accent-color: var(--accent); }
.check span { line-height: 1.4; }
/* Image placeholder (striped, monospace label) */
.placeholder {
position: relative;
background:
repeating-linear-gradient(135deg,
color-mix(in oklab, var(--paper-deep) 88%, var(--ink) 12%) 0 10px,
color-mix(in oklab, var(--paper-deep) 80%, var(--ink) 20%) 10px 11px);
color: var(--ink-soft);
border: 1px solid var(--rule);
display: grid;
place-items: center;
text-align: center;
padding: var(--space-4);
}
.placeholder .ph-label {
font-family: var(--font-mono);
font-size: var(--scale-1);
letter-spacing: 0.22em;
text-transform: uppercase;
background: var(--paper);
padding: 4px 10px;
border: 1px solid var(--rule);
}
/* ---------- Header / nav ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in oklab, var(--paper) 88%, transparent);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--rule);
}
.site-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 12px clamp(20px, 4vw, 56px);
max-width: var(--maxw);
margin-inline: auto;
}
.brand-link {
display: flex;
align-items: center;
gap: 12px;
border: 0;
color: var(--ink);
}
.brand-link:hover { color: var(--accent); }
.brand-link .brand-mark { width: 36px; height: 42px; display: inline-flex; align-items: center; justify-content: center; }
.brand-link .brand-mark img { width: 36px; height: 42px; display: block; }
.brand-link .brand-word {
font-family: var(--font-logotype);
letter-spacing: 0.02em;
font-weight: 400;
font-size: 1.45rem;
color: var(--accent);
line-height: 1;
white-space: nowrap;
}
.nav { display: flex; gap: clamp(6px, 1.2vw, 22px); align-items: center; flex-wrap: nowrap; }
.nav a.btn { color: var(--paper); }
.nav a.btn-ghost { color: var(--ink); }
.nav a.btn:hover { color: var(--paper); }
.nav a {
font-family: var(--font-display);
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 6px 2px;
border: 0;
position: relative;
white-space: nowrap;
}
@media (max-width: 1080px) {
.nav .nav-secondary { display: none; }
}
@media (max-width: 720px) {
.nav a:not(.btn) { display: none; }
}
.btn { white-space: nowrap; }
.header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.icon-toggle {
min-width: 44px;
height: 36px;
padding: 0 8px;
border: 1px solid var(--rule);
background: color-mix(in oklab, var(--paper) 90%, var(--paper-deep));
color: var(--ink);
cursor: pointer;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.icon-toggle:hover,
.icon-toggle[aria-pressed="true"] {
border-color: var(--accent);
color: var(--paper);
background: var(--accent);
}
@media (max-width: 940px) {
.site-header-inner { gap: 12px; }
.brand-link .brand-word { display: none; }
}
@media (max-width: 720px) {
.icon-toggle { min-width: 40px; height: 34px; font-size: 0.58rem; padding-inline: 6px; }
}
.nav a:hover { color: var(--accent); }
.nav a.active { color: var(--accent); }
.nav a.active::after {
content: "";
position: absolute;
left: 50%; bottom: -2px;
width: 18px; height: 6px;
transform: translateX(-50%);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
}
/* ---------- Footer ---------- */
.site-footer {
border-top: 6px double var(--rule);
margin-top: var(--space-9);
padding-block: var(--space-7) var(--space-6);
background: color-mix(in oklab, var(--paper) 92%, var(--ink) 8%);
}
.footer-inner {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--space-6);
align-items: start;
}
@media (max-width: 880px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
.footer-inner h4 { font-size: var(--scale-2); margin-bottom: var(--space-3); }
.footer-inner a { color: var(--ink-soft); border: 0; display: block; padding: 2px 0; }
.footer-inner a:hover { color: var(--accent); }
/* ---------- Decorative bits ---------- */
.divider {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
color: var(--rule);
margin: var(--space-7) 0;
}
.divider::before, .divider::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, var(--rule), transparent);
}
.divider svg { width: 44px; height: 22px; color: var(--accent); }
/* Page-header banner */
.page-banner {
padding: clamp(80px, 12vw, 140px) 0 clamp(40px, 6vw, 64px);
text-align: center;
position: relative;
border-bottom: 1px solid var(--rule);
}
.page-banner h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.page-banner .eyebrow { display: block; margin-bottom: 1.4rem; }
/* Subtle reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.text-accent { color: var(--accent); }
.text-mute { color: var(--ink-mute); }
.pill {
display: inline-block;
font-family: var(--font-mono);
font-size: var(--scale-1);
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 4px 10px;
border: 1px solid var(--rule);
color: var(--ink-soft);
background: color-mix(in oklab, var(--paper) 92%, var(--paper-deep));
}
.pill-accent { color: var(--paper); background: var(--accent); border-color: var(--accent); }
/* No-scroll lock for any modal */
body.modal-open { overflow: hidden; }
/* ---------- Print niceties ---------- */
@media print {
body::before, body::after { display: none; }
.site-header, .site-footer, .tweaks-fab { display: none; }
}