/* Battle For Giostone — brand tokens * Recovered from the studio's 2022–2024 production CSS and logo master, * normalised into a named palette. Tokens marked (new) did not exist in the * original source; every other value is verbatim from shipped code. * Contrast ratios are WCAG 2.x against --bfg-void (#110929). */ :root { /* ---------- Ground ---------- */ --bfg-void: #110929; /* canonical background — from */ --bfg-abyss: #010B1F; /* deepest ground, section fades */ --bfg-slate: #1B0F23; /* panels, chrome, navigation */ --bfg-indigo-surface: #39325A; /* raised interactive surfaces — cards, dropdowns */ --bfg-indigo-edge: #2F2B4D; /* borders, dividers */ /* ---------- Accent ---------- */ --bfg-red: #920000; /* GRAPHIC ONLY — rules, fills, borders. 2.03:1, never text */ --bfg-wine: #690616; /* flat single-colour mark — favicon, X/Twitch/Medium avatars (recovered) */ --bfg-oxblood: #600412; /* era-1 nav link hover; whitepaper drop-cap plate was #600413 (recovered) */ --bfg-ember: #E0483A; /* (new) text-safe red. 4.71:1. links, alerts */ --bfg-bronze: #A07A57; /* lore and editorial accent only. 4.95:1 */ --bfg-ink-maroon: #1C040E; /* drop-cap plate, warm shadow */ /* ---------- Text ---------- */ --bfg-ivory: #FFFDF5; /* headlines, primary text. 18.8:1. never #FFF */ --bfg-mist: #B9B4C6; /* (new) body copy on dark. 9.5:1 */ --bfg-muted: #8A8598; /* (new) labels, captions, meta. 5.38:1 */ --bfg-disabled: #6A6579; /* (new) disabled control text */ /* ---------- The mark ---------- */ --bfg-gio-light: #96220F; /* logo gradient, light end — sampled from logo.png */ --bfg-gio-mid: #821513; --bfg-gio-dark: #6D0718; --bfg-gio-gradient: linear-gradient(150deg, var(--bfg-gio-light), var(--bfg-gio-mid) 55%, var(--bfg-gio-dark)); /* ---------- Hero classes (recovered unchanged) ---------- */ --bfg-class-gurluk: #447AA7; --bfg-class-gogmangog: #4CA9BA; --bfg-class-akuma: #6B2E45; --bfg-class-ranvir: #8C7560; --bfg-class-lucius: #AC7C42; --bfg-class-auri: #B55C46; /* ---------- Factions (recovered unchanged: 4px rule, fades to transparent) ---------- */ --bfg-faction-deccan: #FF0000; --bfg-faction-glacic: #0588C7; /* ---------- Rarity (reworked — originals were #808080 #00FF62 #0066FF #FF0000) ---------- */ --bfg-rarity-common: #6E6A7D; --bfg-rarity-uncommon: #52A06B; --bfg-rarity-rare: #4C86E0; --bfg-rarity-legendary: #E8A33C; /* ---------- Type ---------- */ --bfg-font-display: "Bitter", "Guardian Text Egyptian Web", Georgia, "Times New Roman", serif; --bfg-font-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif; --bfg-size-display: 68px; --bfg-lh-display: 1.02; --bfg-wt-display: 900; --bfg-size-h1: 34px; --bfg-lh-h1: 1.15; --bfg-wt-h1: 800; --bfg-size-h2: 24px; --bfg-lh-h2: 1.25; --bfg-wt-h2: 600; --bfg-size-lore: 19px; --bfg-lh-lore: 1.62; --bfg-wt-lore: 400; --bfg-size-body: 15px; --bfg-lh-body: 1.65; --bfg-wt-body: 400; --bfg-size-label: 11px; --bfg-ls-label: 0.22em; --bfg-wt-label: 600; --bfg-size-button: 12px; --bfg-ls-button: 0.13em; --bfg-wt-button: 600; /* ---------- Shape ---------- */ --bfg-radius: 8px; /* standard */ --bfg-radius-sm: 5px; --bfg-radius-chip: 3px; /* filter chips, both halves of the product */ --bfg-radius-btn: 2px; /* keyline buttons are near-square */ --bfg-radius-pill: 50px; /* ---------- Devices ---------- */ --bfg-rule-hero: 132px; /* crimson rule under the hero wordmark */ --bfg-rule-section: 96px; /* crimson rule under section heads */ --bfg-rule-weight: 3px; } /* ---------- Ready-made pieces ---------- */ .bfg-rule { width: var(--bfg-rule-section); height: var(--bfg-rule-weight); background: var(--bfg-red); } .bfg-rule--hero { width: var(--bfg-rule-hero); } .bfg-btn { display: inline-block; padding: 11px 22px; border: 1px solid var(--bfg-ivory); border-radius: var(--bfg-radius-btn); background: transparent; color: var(--bfg-ivory); font: var(--bfg-wt-button) var(--bfg-size-button)/1 var(--bfg-font-ui); letter-spacing: var(--bfg-ls-button); text-transform: uppercase; cursor: pointer; } .bfg-btn:hover { background: var(--bfg-red); border-color: var(--bfg-ember); } .bfg-btn:active { background: var(--bfg-gio-dark); border-color: var(--bfg-gio-dark); } .bfg-btn:disabled { color: var(--bfg-disabled); border-color: var(--bfg-indigo-edge); background: transparent; } .bfg-dropcap::first-letter { float: left; background: var(--bfg-ink-maroon); color: var(--bfg-bronze); font: 900 60px/0.92 var(--bfg-font-display); padding: 10px 14px 8px; margin: 4px 14px 0 0; } /* faction rules, exactly as shipped */ .bfg-faction--deccan { border-left: 4px solid; border-image: linear-gradient(var(--bfg-faction-deccan), transparent) 30; } .bfg-faction--glacic { border-right: 4px solid; border-image: linear-gradient(var(--bfg-faction-glacic), transparent) 30; } /* class wash, as shipped: 60% colour at 30% -> transparent surface at 98% */ .bfg-class { border-left: 3px solid; } .bfg-class--gurluk { border-color: var(--bfg-class-gurluk); background: linear-gradient(115deg, rgba(68,122,167,.38), rgba(57,50,90,0) 62%); } .bfg-class--gogmangog { border-color: var(--bfg-class-gogmangog); background: linear-gradient(115deg, rgba(76,169,186,.38), rgba(57,50,90,0) 62%); } .bfg-class--akuma { border-color: var(--bfg-class-akuma); background: linear-gradient(115deg, rgba(107,46,69,.55), rgba(57,50,90,0) 62%); } .bfg-class--ranvir { border-color: var(--bfg-class-ranvir); background: linear-gradient(115deg, rgba(140,117,96,.38), rgba(57,50,90,0) 62%); } .bfg-class--lucius { border-color: var(--bfg-class-lucius); background: linear-gradient(115deg, rgba(172,124,66,.38), rgba(57,50,90,0) 62%); } .bfg-class--auri { border-color: var(--bfg-class-auri); background: linear-gradient(115deg, rgba(181,92,70,.38), rgba(57,50,90,0) 62%); }