/* ============================================================ Direction themes + accent palettes Toggled via and [data-accent="..."] ============================================================ */ /* ---- ACCENT palettes ------------------------------------- */ [data-accent="rojo"]{ --accent:var(--red); --accent-600:var(--red-600); --accent-700:var(--red-700); --accent-2:var(--blue); --accent-2-700:var(--blue-700); } [data-accent="azul"]{ --accent:var(--blue); --accent-600:var(--blue-600); --accent-700:var(--blue-700); --accent-2:var(--red); --accent-2-700:var(--red-700); } /* duo handled by base (red primary, blue secondary) but flips section--ink stats */ [data-accent="duo"]{ --accent:var(--red); --accent-600:var(--red-600); --accent-700:var(--red-700); --accent-2:var(--blue); --accent-2-700:var(--blue-700); } /* =========================================================== DIRECTION 1 — SPORT (default) energetic, condensed, italic =========================================================== */ [data-theme="sport"]{ --head-font:"Saira Condensed","Arial Narrow",sans-serif; --body-font:"Barlow",system-ui,sans-serif; --head-weight:800; --head-style:italic; --head-spacing:-0.005em; --head-transform:uppercase; --radius:6px; --radius-lg:10px; --btn-skew:-7deg; } [data-theme="sport"] .hero__band{ opacity:1; background: linear-gradient(115deg, transparent 60%, color-mix(in oklab,var(--accent) 8%, transparent) 60%), linear-gradient(115deg, transparent 68%, color-mix(in oklab,var(--accent-2) 7%, transparent) 68%); } [data-theme="sport"] .hero::before{ content:"";position:absolute;top:120px;right:-60px;width:380px;height:380px;z-index:-1; background:radial-gradient(circle, color-mix(in oklab,var(--accent) 16%, transparent), transparent 70%); pointer-events:none;filter:blur(10px); } /* =========================================================== DIRECTION 2 — CLASSIC traditional club, slab serif, badges =========================================================== */ [data-theme="classic"]{ --head-font:"Zilla Slab",Georgia,serif; --body-font:"Barlow",system-ui,sans-serif; --head-weight:700; --head-style:normal; --head-spacing:0; --head-transform:none; --radius:3px; --radius-lg:5px; --btn-skew:0deg; --section-pad:116px; } [data-theme="classic"] .eyebrow{font-family:var(--stencil);} [data-theme="classic"] h1, [data-theme="classic"] h2{letter-spacing:-0.01em;} [data-theme="classic"] .btn{letter-spacing:.08em;border-radius:var(--radius);} [data-theme="classic"] .hero__tag, [data-theme="classic"] .hero__stat b, [data-theme="classic"] .route__meta b, [data-theme="classic"] .event__date b, [data-theme="classic"] .statband b{font-style:normal;} /* classic: framed hero media with double rule + centered crest feel */ [data-theme="classic"] .hero__frame{box-shadow:var(--shadow-md);outline:1px solid var(--line);outline-offset:8px;} [data-theme="classic"] .nav__name b{letter-spacing:0;} [data-theme="classic"] .section-head{margin-left:auto;margin-right:auto;text-align:center;} [data-theme="classic"] .section-head .eyebrow{justify-content:center;} [data-theme="classic"] .section-head .lead{margin-left:auto;margin-right:auto;} [data-theme="classic"] .routes__bar{justify-content:center;} /* serif ornamental rule under section titles */ [data-theme="classic"] .section-head h2::after{ content:"";display:block;width:64px;height:3px;background:var(--accent);margin:22px auto 0; } /* =========================================================== DIRECTION 3 — MODERN clean, airy, plain sans, big radius =========================================================== */ [data-theme="modern"]{ --head-font:"Archivo",system-ui,sans-serif; --body-font:"Barlow",system-ui,sans-serif; --head-weight:800; --head-style:normal; --head-spacing:-0.03em; --head-transform:none; --radius:14px; --radius-lg:22px; --btn-skew:0deg; --section-pad:128px; } [data-theme="modern"] .btn{border-radius:999px;letter-spacing:.02em;text-transform:none;font-weight:700;} [data-theme="modern"] .eyebrow{font-family:var(--body-font);font-weight:700;letter-spacing:.14em;} [data-theme="modern"] .nav__links a, [data-theme="modern"] .nav__name b, [data-theme="modern"] .chip, [data-theme="modern"] .route__type, [data-theme="modern"] .route__diff, [data-theme="modern"] .post__date, [data-theme="modern"] .post__more, [data-theme="modern"] .field label{text-transform:none;} [data-theme="modern"] .hero__tag, [data-theme="modern"] .hero__stat b, [data-theme="modern"] .route__meta b, [data-theme="modern"] .event__date b, [data-theme="modern"] .statband b{font-style:normal;} [data-theme="modern"] .hero__tag{text-transform:none;border-radius:999px;} [data-theme="modern"] .nav__badge{border-radius:16px;} [data-theme="modern"] :root,[data-theme="modern"]{--shadow-md:0 10px 34px rgba(20,20,30,.08);--shadow-lg:0 30px 70px rgba(20,20,30,.12);} [data-theme="modern"] .route, [data-theme="modern"] .post, [data-theme="modern"] .event, [data-theme="modern"] .value{border-color:transparent;box-shadow:var(--shadow-md);}