/* ============================================================
Rogue BJJ — brand tokens
From the Rogue BJJ Style Guide. Change things here, not in
page CSS: every page reads these variables.
============================================================ */
:root {
/* ---- Colour ---- */
--rogue-white: #ffffff;
--rogue-cream: #fde9cb;
--rogue-caramel: #daac76;
--rogue-mustard: #c88641;
--rogue-earth: #56463c;
--rogue-chocolate: #3a3024;
--rogue-black: #000000;
/* Semantic roles — prefer these in page CSS over the raw colours */
--bg: var(--rogue-cream);
--bg-alt: var(--rogue-white);
--surface-dark: var(--rogue-chocolate);
--ink: var(--rogue-chocolate); /* body on light 10.87:1 */
--ink-muted: var(--rogue-earth); /* secondary text 7.57:1 */
--ink-inverse: var(--rogue-cream); /* text on dark 10.87:1 */
--accent: var(--rogue-mustard); /* see contrast note below */
--accent-soft: var(--rogue-caramel);
/* ---- Type ----
League Spartan — titles and headings
Work Sans — subtitles, body copy, UI
Both are Google Fonts under the SIL Open Font License: free for
commercial use, cleared for web embedding, and self-hostable.
Cy Grotesk was removed because it is a commercial licence that
does not cover web use. */
--font-heading: "League Spartan", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
--font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
--weight-title: 900; /* League Spartan Black — page titles */
--weight-heading: 700; /* League Spartan Bold — headings */
--weight-strong: 600; /* Work Sans Semibold — buttons, UI */
--weight-body: 400; /* Work Sans Regular — body copy */
}
/* ---- Element defaults ---- */
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-weight: var(--weight-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.title {
font-family: var(--font-heading);
font-weight: var(--weight-title);
letter-spacing: -0.02em;
line-height: 1.06;
}
h1, h2, .heading {
font-family: var(--font-heading);
font-weight: var(--weight-heading);
letter-spacing: -0.01em;
line-height: 1.15;
}
/* Subtitle, subheading and section header all sit in Work Sans, which
keeps the type system to two families and one clear rule: League
Spartan shouts, Work Sans speaks. */
.subtitle, .subheading, .section-header {
font-family: var(--font-body);
font-weight: var(--weight-strong);
}
.subtitle { font-size: 1.15rem; color: var(--ink-muted); font-weight: var(--weight-body); }
.btn {
font-family: var(--font-body);
font-weight: var(--weight-strong);
background: var(--accent);
color: var(--rogue-black); /* 6.94:1 — the safe pairing on mustard */
border: 0;
border-radius: 6px;
padding: 0.7em 1.4em;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
/* ============================================================
FONT LOADING
Currently loaded from Google's CDN via a in each page's
. See index.html for the exact tag.
TO SELF-HOST (faster, no third-party request, no visitor IP sent
to Google) — about five minutes:
1. Go to fonts.google.com, search each family, and download:
League Spartan — weights 700 and 900
Work Sans — weights 400 and 600
Or use fontsource.org, which serves .woff2 directly.
2. Put the .woff2 files in css/fonts/
3. Delete the Google from index.html
4. Uncomment the @font-face block below
@font-face {
font-family: "League Spartan";
src: url("fonts/league-spartan-700.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: "League Spartan";
src: url("fonts/league-spartan-900.woff2") format("woff2");
font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Work Sans";
src: url("fonts/work-sans-400.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Work Sans";
src: url("fonts/work-sans-600.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
}
============================================================ */
/* ============================================================
CONTRAST — measured against WCAG AA (4.5:1 for body text)
SAFE for body text
Chocolate on Cream .............. 10.87:1
Chocolate on White .............. 12.90:1
Cream on Chocolate .............. 10.87:1
Earth on White ................... 8.99:1
Earth on Cream ................... 7.57:1
Black on Mustard ................. 6.94:1
Chocolate on Caramel ............. 6.23:1
LARGE TEXT ONLY (24px+, or 19px+ bold)
Earth on Caramel ................. 4.34:1
Mustard on Chocolate ............. 4.26:1
Mustard on White ................. 3.02:1
DO NOT USE for text
Mustard on Cream ................. 2.55:1 <- fails
Caramel on White ................. 2.07:1 <- fails
Mustard is the brand accent but a weak text colour on light grounds.
Use it for buttons, rules, icons and large display type, with
Chocolate or Black as the text sitting on top of it.
============================================================ */