/* ===================================================================== Ratrod Studio — Colors & Type --------------------------------------------------------------------- Drop into any HTML file as . Brand fonts are loaded locally from /fonts via @font-face below. The "Special Elite" stamp font and "Cascadia Mono" code font are also bundled locally in /fonts (Fontsource builds, SIL Open Font License). ===================================================================== */ /* --------------------------------------------------------------------- BRAND FONT FACES (uploaded by the studio — do not substitute) - "Block BE" is the chunky display sans used for headlines and the RATROD wordmark. We expose Regular at weight 400 and Condensed at weight 700 so a single family works for both display + brand. - "Helvetica Neue LT Std" is the full body/UI family. Pulled in with weight + style + stretch axes so descendants inherit correctly. --------------------------------------------------------------------- */ @font-face { font-family: "Block BE"; src: url("fonts/BlockBEReg.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Block BE"; src: url("fonts/BlockBECon.woff2") format("woff2"); font-weight: 700; font-style: normal; font-stretch: condensed; font-display: swap; } @font-face { font-family: "Block BE Condensed"; src: url("fonts/BlockBECon.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Helvetica Neue LT Std — Roman / regular */ @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-Roman.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-It.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-UltLt.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-UltLtIt.woff2") format("woff2"); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-Th.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-ThIt.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-Lt.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-LtIt.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-Md.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-MdIt.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-Bd.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-BdIt.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-Hv.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-HvIt.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-Blk.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("fonts/HelveticaNeueLTStd-BlkIt.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; } /* Helvetica Neue LT Std Condensed — used for eyebrows + tracked nav */ @font-face { font-family: "Helvetica Neue LT Std Cn"; src: url("fonts/HelveticaNeueLTStd-Cn.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std Cn"; src: url("fonts/HelveticaNeueLTStd-CnO.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std Cn"; src: url("fonts/HelveticaNeueLTStd-LtCn.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std Cn"; src: url("fonts/HelveticaNeueLTStd-MdCn.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std Cn"; src: url("fonts/HelveticaNeueLTStd-BdCn.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std Cn"; src: url("fonts/HelveticaNeueLTStd-BdCnO.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std Cn"; src: url("fonts/HelveticaNeueLTStd-HvCn.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std Cn"; src: url("fonts/HelveticaNeueLTStd-BlkCn.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } /* Special Elite — distressed typewriter face for the rotated .rr-stamp tagline. Bundled locally (Fontsource, SIL OFL). */ @font-face { font-family: "Special Elite"; src: url("fonts/SpecialElite-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Cascadia Mono — monospace for .rr-code. Bundled locally (Fontsource, SIL OFL). */ @font-face { font-family: "Cascadia Mono"; src: url("fonts/CascadiaMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Cascadia Mono"; src: url("fonts/CascadiaMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---------- Brand color ramp ---------- */ /* Hot, oxidized, racing-stripe red. The single saturated color in the system. */ --rr-red-900: #4a0407; /* deep oxblood, heavy shadow on red surfaces */ --rr-red-800: #6e0a10; /* gradient stop / hover-darkened red */ --rr-red-700: #9b0f17; /* secondary fill, pressed state */ --rr-red-600: #c8131c; /* PRIMARY brand red — buttons, stripes, badges */ --rr-red-500: #e02029; /* hover red */ --rr-red-400: #f04148; /* link / focus accent */ --rr-red-300: #f57078; /* light red on dark, rarely used */ /* ---------- Neutrals (deep automotive black → asphalt grey) ---------- */ --rr-ink-1000: #000000; /* true black, used for footer rule, deep bezels */ --rr-ink-950: #0a0a0c; /* page bg behind everything */ --rr-ink-900: #111114; /* primary surface — most pages sit on this */ --rr-ink-850: #17171b; /* card/section surface lift 1 */ --rr-ink-800: #1d1d22; /* card surface lift 2, header bg */ --rr-ink-700: #2a2a30; /* hairline borders, disabled buttons */ --rr-ink-600: #3b3b42; /* divider on dark, muted icon */ --rr-ink-500: #5a5a63; /* tertiary text */ --rr-ink-400: #7e7e87; /* metadata, captions */ --rr-ink-300: #a4a4ac; /* secondary body */ --rr-ink-200: #cccccf; /* secondary heading on dark */ --rr-ink-100: #e8e8ea; /* primary body text (NOT pure white) */ --rr-ink-0: #ffffff; /* pure white — display headlines, logo */ /* ---------- Semantic surfaces ---------- */ --rr-bg: var(--rr-ink-950); --rr-bg-section: var(--rr-ink-900); --rr-bg-card: var(--rr-ink-850); --rr-bg-card-hover: var(--rr-ink-800); --rr-bg-header: var(--rr-ink-800); --rr-bg-rail: var(--rr-red-600); /* the red sidebar block */ /* The signature horizontal red "racing stripe" band — a pure red bar fading to dark at the edges. Use as a hero/section divider background. */ --rr-stripe: linear-gradient( 90deg, var(--rr-ink-900) 0%, var(--rr-red-900) 18%, var(--rr-red-700) 50%, var(--rr-red-900) 82%, var(--rr-ink-900) 100% ); /* Subtler vertical fade used inside hero panels so red doesn't dominate */ --rr-stripe-soft: linear-gradient( 180deg, rgba(200, 19, 28, 0) 0%, rgba(200, 19, 28, 0.65) 35%, rgba(200, 19, 28, 0.65) 65%, rgba(200, 19, 28, 0) 100% ); /* @kind color */ /* ---------- Semantic text ---------- */ --rr-fg: var(--rr-ink-100); /* primary text */ --rr-fg-strong: var(--rr-ink-0); /* headlines, big numerals */ --rr-fg-muted: var(--rr-ink-300); /* paragraph copy */ --rr-fg-subtle: var(--rr-ink-400); /* meta */ --rr-fg-on-red: var(--rr-ink-0); /* text on red surfaces */ --rr-fg-link: var(--rr-red-500); --rr-fg-link-hover: var(--rr-red-400); /* ---------- Semantic accents ---------- */ --rr-accent: var(--rr-red-600); --rr-accent-hover: var(--rr-red-500); --rr-accent-press: var(--rr-red-700); --rr-success: #4faa55; /* category-tag green, rarely used */ --rr-warning: #f4a821; --rr-danger: var(--rr-red-600); /* ---------- Borders, hairlines, focus ---------- */ --rr-border: var(--rr-ink-700); --rr-border-strong: var(--rr-ink-600); --rr-border-on-red: rgba(255,255,255,0.18); --rr-focus-ring: 0 0 0 2px var(--rr-ink-950), 0 0 0 4px var(--rr-red-500); /* ---------- Shadows ---------- */ /* The brand is FLAT with hard edges — shadows are minimal & moody, never glowy. */ --rr-shadow-sm: 0 1px 0 rgba(0,0,0,0.6); --rr-shadow-md: 0 12px 28px -10px rgba(0,0,0,0.7); --rr-shadow-lg: 0 24px 48px -12px rgba(0,0,0,0.85); --rr-shadow-card: 0 8px 22px -8px rgba(0,0,0,0.6); --rr-shadow-red-glow: 0 6px 24px -6px rgba(200,19,28,0.55); /* CTA buttons only */ --rr-shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.04); /* ---------- Radii ---------- */ /* Mostly square / lightly rounded. The look is industrial, not friendly. */ --rr-radius-none: 0; --rr-radius-sm: 2px; --rr-radius-md: 4px; /* default for buttons, inputs, badges */ --rr-radius-lg: 8px; /* cards, modal */ --rr-radius-xl: 16px; /* game-tile thumbnails, contact map block */ --rr-radius-pill: 999px; /* ---------- Spacing scale ---------- */ --rr-space-0: 0; --rr-space-1: 4px; --rr-space-2: 8px; --rr-space-3: 12px; --rr-space-4: 16px; --rr-space-5: 24px; --rr-space-6: 32px; --rr-space-7: 48px; --rr-space-8: 64px; --rr-space-9: 96px; --rr-space-10: 128px; /* ---------- Layout ---------- */ --rr-container: 1200px; --rr-sidebar: 76px; /* the fixed red logo rail */ --rr-stripe-h: 360px; /* signature red band height in heroes */ /* ======================================================================= TYPE (real brand fonts — supplied by the studio) ----------------------------------------------------------------------- Brand / logo: Block BE — the chunky semi-rounded display sans used in the RATROD wordmark. **Reserved for the wordmark.** Do not use it for body or general headlines. Display headlines: Helvetica Neue LT Std at heavy weights (Black 900 or Heavy 800), tight tracking, often italic for action copy. Eyebrow / nav: Helvetica Neue LT Std Condensed Bold — tracked all-caps for nav links and eyebrows. Body: Helvetica Neue LT Std — full weight range available (100–900, roman & italic). Stamp: Special Elite — typewriter look that gets transformed/skewed to mimic the "NOT YOUR ORDINARY JUNK" spray-stencil stamp. (Google Fonts; the studio did not supply a stamp font.) Mono: ui-monospace fallback stack. ===================================================================== */ --rr-font-display: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --rr-font-brand: "Block BE", "Helvetica Neue LT Std", "Arial Black", sans-serif; --rr-font-eyebrow: "Helvetica Neue LT Std Cn", "Helvetica Neue LT Std", "Arial Narrow", "Impact", sans-serif; --rr-font-body: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --rr-font-stamp: "Special Elite", "Courier New", monospace; --rr-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* ---------- Type scale (1.25 ratio anchored at 16px) ---------- */ --rr-fs-xs: 12px; --rr-fs-sm: 14px; --rr-fs-base: 16px; --rr-fs-md: 18px; --rr-fs-lg: 22px; --rr-fs-xl: 28px; --rr-fs-2xl: 36px; --rr-fs-3xl: 48px; --rr-fs-4xl: 64px; --rr-fs-5xl: 88px; --rr-lh-tight: 1.05; /* @kind font */ --rr-lh-snug: 1.2; /* @kind font */ --rr-lh-base: 1.55; /* @kind font */ --rr-lh-loose: 1.75; /* @kind font */ /* Tracking */ --rr-tracking-tight: -0.01em; --rr-tracking-base: 0; --rr-tracking-wide: 0.06em; --rr-tracking-eyebrow: 0.32em; /* tiny tracked all-caps eyebrows */ } /* ======================================================================= SEMANTIC ELEMENT STYLES Use these classes — or copy the rules into your own selectors. ===================================================================== */ .rr-body, body.rr { margin: 0; background: var(--rr-bg); color: var(--rr-fg); font-family: var(--rr-font-body); font-size: var(--rr-fs-base); line-height: var(--rr-lh-base); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis: none; /* never fake-bold an .otf */ font-feature-settings: "kern" 1, "liga" 1; } /* Large display text — leave the browser's native renderer alone. No translateZ/backface tricks (those force GPU compositing and *cause* the "stepped" diagonals on W / M / N). No geometricPrecision (it disables hinting). Just clean antialiasing. */ h1, h2, h3, .rr-h1, .rr-h2, .rr-h3 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis: none; } /* DISPLAY HEADLINES — set in Helvetica Neue at heavy weights. Tight leading, near-zero negative tracking, often uppercase for action copy. Block BE is reserved for the RATROD logo — do NOT use it here. */ .rr-h1, h1.rr { font-family: var(--rr-font-display); font-size: var(--rr-fs-4xl); line-height: var(--rr-lh-tight); letter-spacing: var(--rr-tracking-tight); color: var(--rr-fg-strong); margin: 0; font-weight: 900; } .rr-h2, h2.rr { font-family: var(--rr-font-display); font-size: var(--rr-fs-3xl); line-height: var(--rr-lh-tight); color: var(--rr-fg-strong); margin: 0; font-weight: 800; } .rr-h3, h3.rr { font-family: var(--rr-font-display); font-size: var(--rr-fs-2xl); line-height: var(--rr-lh-snug); color: var(--rr-fg-strong); margin: 0; font-weight: 700; } /* WORDMARK — the only place Block BE may appear. Use for the RatRod wordmark in headers, logos, and brand lockups. */ .rr-wordmark { font-family: var(--rr-font-brand); font-weight: 700; letter-spacing: -0.01em; line-height: 1; text-transform: none; } .rr-h4, h4.rr { font-family: var(--rr-font-body); font-weight: 700; font-size: var(--rr-fs-lg); line-height: var(--rr-lh-snug); color: var(--rr-fg-strong); margin: 0; } /* EYEBROW — the "RATROD STUDIO" / "SHOWROOM" tiny line above headlines. Helvetica Neue LT Std Condensed Bold, tracked wide. */ .rr-eyebrow { font-family: var(--rr-font-eyebrow); font-weight: 700; font-size: var(--rr-fs-xs); letter-spacing: var(--rr-tracking-eyebrow); text-transform: uppercase; color: var(--rr-ink-200); display: inline-block; } .rr-eyebrow--red { color: var(--rr-red-500); } /* BODY paragraphs */ .rr-p, p.rr { font-family: var(--rr-font-body); font-size: var(--rr-fs-base); line-height: var(--rr-lh-loose); color: var(--rr-fg-muted); margin: 0 0 var(--rr-space-4); text-wrap: pretty; } .rr-lead { font-size: var(--rr-fs-md); color: var(--rr-fg); line-height: var(--rr-lh-loose); } .rr-meta { font-family: var(--rr-font-eyebrow); text-transform: uppercase; letter-spacing: var(--rr-tracking-wide); font-size: var(--rr-fs-xs); color: var(--rr-fg-subtle); } /* CATEGORY TAG — the "SPORTS" / "RACING" eyebrow above each game card */ .rr-tag { font-family: var(--rr-font-eyebrow); font-weight: 600; font-size: 11px; letter-spacing: var(--rr-tracking-eyebrow); text-transform: uppercase; color: var(--rr-ink-200); } /* LINKS */ .rr-a, a.rr { color: var(--rr-fg-link); text-decoration: none; border-bottom: 1px solid transparent; transition: color 120ms ease, border-color 120ms ease; } .rr-a:hover, a.rr:hover { color: var(--rr-fg-link-hover); border-bottom-color: currentColor; } /* STAMP — distressed spray-stencil text like "NOT YOUR ORDINARY JUNK". Use sparingly, ALWAYS rotated/skewed, never as body copy. */ .rr-stamp { font-family: var(--rr-font-stamp); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rr-red-500); display: inline-block; transform: rotate(-4deg) skewX(-6deg); text-shadow: 0 1px 0 rgba(0,0,0,0.4); } /* CODE / MONO */ .rr-code, code.rr { font-family: var(--rr-font-mono); font-size: 0.9em; background: var(--rr-ink-800); color: var(--rr-ink-100); padding: 2px 6px; border-radius: var(--rr-radius-sm); border: 1px solid var(--rr-border); } /* HORIZONTAL RULE — never a thin grey line; always the red stripe motif. */ .rr-hr { border: 0; height: 4px; background: var(--rr-red-600); margin: var(--rr-space-7) 0; } /* Small responsive tweak for headline rhythm on phones */ @media (max-width: 640px) { :root { --rr-fs-4xl: 44px; --rr-fs-3xl: 34px; --rr-fs-2xl: 28px; } }