/* ============================================================
RÖPLABDA — Vintage Beach Volleyball Design System
Drop-in stylesheet. Everything is namespaced under `rl-`
(classes) and `--rl-` (custom properties) so it can be
layered onto an existing site without clobbering its styles.
Fonts required (add to ):
============================================================ */
:root{
/* ---- color tokens ---- */
--rl-sand-0:#cdb78f; /* page background */
--rl-sand-1:#f3ead7; /* paper / surface */
--rl-sand-2:#e7d9bb; /* box fill */
--rl-sand-3:#d3c096; /* deep sand, dividers */
--rl-red:#ad3a2e; /* vintage red — accent */
--rl-red-bright:#c44732;
--rl-maroon:#4f211b; /* dark text / strokes */
--rl-maroon-2:#7c3a2e; /* muted */
--rl-ink-soft:#6f4034; /* body copy */
/* ---- type ---- */
--rl-font-display:"Oswald",system-ui,sans-serif;
--rl-font-body:"Barlow",system-ui,sans-serif;
/* ---- spacing scale (px) ---- */
--rl-space-1:6px;
--rl-space-2:10px;
--rl-space-3:14px;
--rl-space-4:20px;
--rl-space-5:28px;
--rl-space-6:40px;
--rl-space-7:60px;
/* ---- borders / effects ---- */
--rl-line:1px solid rgba(79,33,27,.18);
--rl-rule-red:2px solid var(--rl-red);
--rl-shadow-sheet:0 26px 60px -24px rgba(56,24,16,.55), 0 4px 14px rgba(56,24,16,.18);
--rl-shadow-card:0 10px 26px -16px rgba(56,24,16,.5);
/* paper grain — apply as background-image on surfaces */
--rl-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
/* warm radial page background */
--rl-bg:radial-gradient(140% 90% at 50% -10%, #d9c59c 0%, var(--rl-sand-0) 55%, #c2ac82 100%);
}
/* ============================================================
THEME SCOPE
Add class `rl-theme` to (or any wrapper) to opt the
subtree into the vintage palette + body font. This keeps the
system from leaking into parts of the site you don't restyle.
============================================================ */
.rl-theme{
background:var(--rl-bg) fixed;
font-family:var(--rl-font-body);
color:var(--rl-maroon);
-webkit-font-smoothing:antialiased;
}
/* ---------- SURFACES ---------- */
/* paper sheet with grain + double vintage frame */
.rl-paper{
position:relative;
background:var(--rl-sand-1);
background-image:var(--rl-grain);
box-shadow:var(--rl-shadow-sheet);
padding:var(--rl-space-6);
}
.rl-paper--framed::before{
content:"";position:absolute;inset:16px;
border:1.5px solid var(--rl-maroon);opacity:.32;pointer-events:none;
}
.rl-paper--framed::after{
content:"";position:absolute;inset:22px;
border:1px solid var(--rl-maroon);opacity:.16;pointer-events:none;
}
/* lighter card surface */
.rl-card{
position:relative;
background:var(--rl-sand-1);
background-image:var(--rl-grain);
border:1.6px solid var(--rl-maroon);
box-shadow:var(--rl-shadow-card);
}
/* ---------- TYPOGRAPHY ---------- */
.rl-kicker{
font-family:var(--rl-font-display);font-weight:600;font-size:14px;
letter-spacing:.42em;text-transform:uppercase;color:var(--rl-red);
display:flex;align-items:center;gap:12px;
}
.rl-kicker::before{content:"";width:30px;height:2px;background:var(--rl-red);display:inline-block;}
.rl-title{
font-family:var(--rl-font-display);font-weight:700;font-size:64px;
line-height:.92;letter-spacing:-.5px;color:var(--rl-maroon);text-transform:uppercase;
}
.rl-title--lg{font-size:80px;letter-spacing:-1px;line-height:.9;}
.rl-title--sm{font-size:48px;}
.rl-display-2{
font-family:var(--rl-font-display);font-weight:600;font-size:30px;
text-transform:uppercase;color:var(--rl-maroon);line-height:1;
}
.rl-sub{
font-family:var(--rl-font-body);font-weight:500;font-size:18px;
color:var(--rl-ink-soft);line-height:1.5;letter-spacing:.02em;
}
.rl-sub b{color:var(--rl-red);font-weight:600;}
.rl-body{
font-family:var(--rl-font-body);font-weight:400;font-size:17px;
line-height:1.5;color:var(--rl-ink-soft);text-wrap:pretty;
}
.rl-body b{color:var(--rl-maroon);font-weight:600;}
.rl-note-text{
font-family:var(--rl-font-body);font-style:italic;font-weight:500;
font-size:14px;color:var(--rl-ink-soft);
}
/* ---------- HEADER (kicker + title + red rule) ---------- */
.rl-header{
position:relative;
padding-bottom:18px;
border-bottom:var(--rl-rule-red);
}
.rl-header::after{
content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
background:var(--rl-maroon);opacity:.25;
}
.rl-header .rl-kicker{margin-bottom:10px;}
.rl-header .rl-sub{margin-top:11px;}
/* standalone red rule divider */
.rl-rule{height:2px;background:var(--rl-red);position:relative;}
.rl-rule::after{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--rl-maroon);opacity:.25;}
/* ---------- STAMP ---------- */
.rl-stamp{
display:inline-block;text-align:center;
border:1.6px solid var(--rl-red);padding:12px 20px 9px;
transform:rotate(-3deg);
}
.rl-stamp__big{font-family:var(--rl-font-display);font-weight:700;font-size:34px;line-height:1;color:var(--rl-red);}
.rl-stamp__small{font-family:var(--rl-font-display);font-weight:600;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--rl-maroon);margin-top:6px;}
/* ---------- SECTION HEADINGS ---------- */
/* numbered section heading */
.rl-section-head{display:flex;align-items:center;gap:12px;}
.rl-section-head__no{
flex:0 0 auto;width:31px;height:31px;border:1.5px solid var(--rl-red);
font-family:var(--rl-font-display);font-weight:600;font-size:15px;color:var(--rl-red);
display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;
}
.rl-section-head h2,.rl-section-head .rl-h2{
font-family:var(--rl-font-display);font-weight:600;font-size:24px;
text-transform:uppercase;letter-spacing:.02em;color:var(--rl-maroon);line-height:1;margin:0;
}
/* subsection heading with trailing rule */
.rl-subhead{display:flex;align-items:center;gap:9px;}
.rl-subhead h3,.rl-subhead .rl-h3{
font-family:var(--rl-font-display);font-weight:600;font-size:17px;
text-transform:uppercase;letter-spacing:.13em;color:var(--rl-red);line-height:1;margin:0;
}
.rl-subhead::after{content:"";flex:1;height:1px;background:var(--rl-sand-3);}
/* ---------- LISTS (diamond bullets + nested rings) ---------- */
.rl-list{list-style:none;margin:0;padding:0;}
.rl-list li{
position:relative;padding-left:20px;
font-family:var(--rl-font-body);font-weight:400;font-size:17px;line-height:1.5;
color:var(--rl-ink-soft);margin-bottom:10px;text-wrap:pretty;
}
.rl-list li:last-child{margin-bottom:0;}
.rl-list li::before{
content:"";position:absolute;left:1px;top:9px;width:7px;height:7px;
background:var(--rl-red);transform:rotate(45deg);
}
.rl-list li b{color:var(--rl-maroon);font-weight:600;}
/* nested list — hollow rings, muted */
.rl-list ul{list-style:none;margin:6px 0 2px;padding:0;}
.rl-list ul li{padding-left:18px;font-size:16px;color:var(--rl-maroon-2);margin-bottom:7px;}
.rl-list ul li::before{
background:none;border:1.4px solid var(--rl-maroon-2);
width:6px;height:6px;top:8px;transform:none;border-radius:50%;
}
/* ---------- NOTE / CALLOUT ---------- */
.rl-note{
border-left:3px solid var(--rl-red);padding:4px 0 4px 14px;
font-family:var(--rl-font-body);font-size:15px;line-height:1.5;color:var(--rl-ink-soft);
}
/* ---------- BADGE / SEED / PLACE ---------- */
.rl-seed{
display:inline-flex;align-items:center;justify-content:center;
width:22px;height:22px;border-radius:50%;border:1.4px solid var(--rl-maroon-2);
font-family:var(--rl-font-display);font-weight:600;font-size:13px;color:var(--rl-maroon-2);
}
.rl-place{display:inline-flex;align-items:baseline;gap:9px;}
.rl-place__num{font-family:var(--rl-font-display);font-weight:700;font-size:42px;line-height:1;color:var(--rl-red);}
.rl-place__suf{font-family:var(--rl-font-display);font-weight:500;font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--rl-maroon);}
/* ---------- BUTTONS (derived from the system) ---------- */
.rl-btn{
display:inline-flex;align-items:center;gap:10px;cursor:pointer;
font-family:var(--rl-font-display);font-weight:600;font-size:14px;
letter-spacing:.14em;text-transform:uppercase;
padding:12px 22px;border:1.6px solid var(--rl-red);
background:var(--rl-red);color:var(--rl-sand-1);
transition:background .16s, transform .16s;
}
.rl-btn:hover{background:var(--rl-red-bright);}
.rl-btn:active{transform:translateY(1px);}
.rl-btn--ghost{background:transparent;color:var(--rl-red);}
.rl-btn--ghost:hover{background:rgba(173,58,46,.08);}
.rl-btn--ink{border-color:var(--rl-maroon);background:var(--rl-maroon);color:var(--rl-sand-1);}
.rl-btn--ink:hover{background:var(--rl-maroon-2);}
/* ---------- FOOTER ---------- */
.rl-footer{
position:relative;display:flex;align-items:center;justify-content:space-between;
padding-top:14px;border-top:1px solid var(--rl-maroon);
}
.rl-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rl-maroon);opacity:.25;}
.rl-footer__left{font-family:var(--rl-font-display);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--rl-maroon-2);}
.rl-footer__right{font-family:var(--rl-font-body);font-style:italic;font-weight:500;font-size:13px;color:var(--rl-ink-soft);}
/* ---------- LEGEND (won / lost rules) ---------- */
.rl-legend{display:flex;gap:24px;}
.rl-legend__item{display:flex;align-items:center;gap:8px;font-family:var(--rl-font-display);font-weight:500;font-size:14px;letter-spacing:.12em;text-transform:uppercase;}
.rl-legend__sw{width:30px;border-top-width:3px;border-top-style:solid;}
.rl-legend__item--win{color:var(--rl-red);}
.rl-legend__item--win .rl-legend__sw{border-color:var(--rl-red);}
.rl-legend__item--lose{color:var(--rl-maroon-2);}
.rl-legend__item--lose .rl-legend__sw{border-color:var(--rl-maroon-2);border-top-style:dashed;}
/* ---------- LINKS ---------- */
.rl-theme a{color:var(--rl-red);text-decoration:none;border-bottom:1px solid rgba(173,58,46,.4);transition:border-color .16s,color .16s;}
.rl-theme a:hover{color:var(--rl-red-bright);border-color:var(--rl-red-bright);}
/* ---------- PRINT (matches source sheets) ---------- */
@media print{
.rl-theme{background:var(--rl-sand-1)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
}