/* =========================================================================== Refined Rides - design tokens (SINGLE SOURCE OF TRUTH FOR COLOURS) --------------------------------------------------------------------------- v0.7 - re-skinned to the Refined Rides Design System: a LIGHT-premium look with navy "ink" bands (hero / CTA / footer) and copper as the single accent. Palette comes from Willem's logo (navy / medium blue / copper-orange). Components never read raw hex - only the --rr-* ROLE tokens below - so the whole site + the /design-system/ page re-skin from this one file. =========================================================================== */ :root { /* --- Brand palette (from the logo + design system) ----------------- */ --rr-navy: #0C1E2E; /* navy-900 - primary ink, dark bands */ --rr-navy-deep: #07131D; /* navy-950 - deepest (footer) */ --rr-navy-soft: #112839; /* navy-800 - lifted navy on dark */ --rr-blue: #1F5A8C; /* medium blue - secondary accent / links-on-dark */ --rr-blue-soft: #E3EFF7; /* blue tint on light */ --rr-orange: #B85020; /* copper-600 - the logo accent (CTAs) */ --rr-orange-hover: #C7602B;/* copper-500 */ --rr-orange-press: #9A4019;/* copper-700 */ --rr-orange-light: #D6824F;/* copper-400 - accent on dark */ --rr-orange-soft: #FBEEE5; /* copper-100 - soft wash on light */ --rr-white: #FFFFFF; --rr-paper: #F6F8FA; /* light page canvas */ --rr-mist: #EDF1F5; /* alt light surface */ --rr-cloud: #E0E6EC; /* light hairline */ --rr-silver: #C5CED6; /* strong border / disabled */ --rr-steel: #8C99A6; /* faint text on light */ --rr-slate: #56646F; /* secondary text on light */ --rr-graphite: #33414C; /* body text on light */ /* Back-compat aliases (older rules referenced these) */ --rr-light: var(--rr-paper); --rr-light-tint: var(--rr-mist); /* --- Roles (LIGHT-premium) - components read these ----------------- */ --rr-base: var(--rr-paper); /* page background */ --rr-surface: var(--rr-white); /* raised/alternating sections + cards */ --rr-surface-2: var(--rr-white);/* form fields */ --rr-contrast: var(--rr-navy); /* primary text (navy ink) */ --rr-muted: var(--rr-slate); /* secondary text */ --rr-faint: var(--rr-steel); /* tertiary text / captions */ --rr-accent: var(--rr-orange); /* links, CTAs, highlights */ --rr-accent-hover: var(--rr-orange-hover); --rr-border: var(--rr-cloud); /* hairline on light */ --rr-border-strong: var(--rr-silver); /* Dark "ink" bands (hero / CTA / footer) ----------------------------- */ --rr-ink: var(--rr-navy); /* navy band background */ --rr-ink-deep: var(--rr-navy-deep); --rr-footer: var(--rr-navy-deep); --rr-on-dark: #FFFFFF; /* text on navy */ --rr-on-dark-muted: rgba(255,255,255,0.72); --rr-on-dark-faint: rgba(255,255,255,0.52); --rr-border-on-dark: rgba(255,255,255,0.12); --rr-border-on-dark-strong: rgba(255,255,255,0.22); --rr-accent-on-dark: var(--rr-orange-light); /* copper reads brighter on navy */ /* Alpha helpers */ --rr-accent-wash: rgba(184, 80, 32, 0.10); /* copper @ 10% */ --rr-overlay: rgba(12, 30, 46, 0.80); /* navy hero overlay */ --rr-focus: 0 0 0 3px rgba(199, 96, 43, 0.45); /* --- Typography ----------------------------------------------------- */ --rr-font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --rr-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --rr-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* --- Radius (restrained, engineered - never bubbly) ----------------- */ --rr-radius-sm: 8px; --rr-radius-control: 10px; /* buttons, inputs */ --rr-radius-card: 16px; /* cards / package tiles */ --rr-radius-pill: 999px; /* --- Elevation (navy-tinted, low-spread - never pure black) --------- */ --rr-shadow-sm: 0 2px 8px rgba(12, 30, 46, 0.08); --rr-shadow-md: 0 10px 28px -10px rgba(12, 30, 46, 0.18); --rr-shadow-lg: 0 26px 52px -18px rgba(12, 30, 46, 0.24); --rr-shadow-xl: 0 40px 80px -28px rgba(12, 30, 46, 0.30); /* --- Signature "paint sheen" for navy bands ------------------------- */ --rr-sheen: radial-gradient(120% 80% at 78% 8%, rgba(143,186,221,0.16) 0%, rgba(143,186,221,0) 45%), radial-gradient(90% 60% at 12% 100%, rgba(184,80,32,0.14) 0%, rgba(184,80,32,0) 55%); } /* --------------------------------------------------------------------------- Re-point WordPress core preset colours + Blocksy's theme variables at the brand role tokens, so this file stays the only place site colours live. !important so these win over WP's inline global styles + Blocksy defaults. --------------------------------------------------------------------------- */ :root { --wp--preset--color--base: var(--rr-base) !important; --wp--preset--color--surface: var(--rr-surface) !important; --wp--preset--color--contrast: var(--rr-contrast) !important; --wp--preset--color--muted: var(--rr-muted) !important; --wp--preset--color--accent: var(--rr-accent) !important; --wp--preset--color--blue: var(--rr-blue) !important; --wp--preset--color--ink: var(--rr-ink) !important; --wp--preset--color--ink-deep: var(--rr-ink-deep) !important; /* Blocksy palette / link / button colours -> brand */ --theme-palette-color-1: var(--rr-accent) !important; --theme-palette-color-2: var(--rr-accent-hover) !important; --theme-palette-color-3: var(--rr-contrast) !important; --theme-palette-color-4: var(--rr-muted) !important; --theme-palette-color-5: var(--rr-surface) !important; --theme-palette-color-6: var(--rr-mist) !important; --theme-palette-color-7: var(--rr-border) !important; --theme-palette-color-8: var(--rr-base) !important; --theme-link-initial-color: var(--rr-accent) !important; --theme-link-hover-color: var(--rr-accent-hover) !important; --theme-button-background-initial-color: var(--rr-accent) !important; --theme-button-background-hover-color: var(--rr-accent-hover) !important; --theme-text-color: var(--rr-contrast) !important; --theme-headings-color: var(--rr-contrast) !important; --theme-font-family: var(--rr-font-body) !important; --theme-headings-font-family: var(--rr-font-display) !important; }