/* * Power Level Collective branding for the RapidMX web client. * Source of truth: https://powerlevel.gg/style-guide/ * * Import this file as the deployment's stylesheet (Admin > Branding), alongside header.html and footer.html. * Everything here works by re-pointing the web client's own `--rr-*` design tokens, so no component needs to * know about it; the only other rules are the `.plc-*` classes used by header.html / footer.html. * * Role mapping (RapidMX's tokens are named for their own roles, not the brand's): * --rr-color-accent* -> the brand's Gold (call-to-action buttons, hover accents, selection, focus rings) * --rr-color-primary* -> the brand's Blue (links, active navigation, structural chrome) * * Theme: dark by default, as the brand specifies. The light palette applies when the visitor's OS asks for a * light scheme, or when is set; forces dark either way. * * NOTE: this file is unlayered, so it beats Tailwind's `@layer utilities` regardless of specificity. Keep every * rule below scoped to a class or a token rather than a bare element selector, or it will silently override * utilities such as `text-sm` or `font-mono` across the whole app. */ /* Inter is the body typeface. The app's own layouts already link it, but the public booking pages do not. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"); /* ------------------------------------------------------------------------------------------------------------- * Fonts - Blender Pro (headings, labels, navigation, buttons). Never used for long-form text. * Served by powerlevel.gg, which sends `access-control-allow-origin: *`, so they load from any origin. * ----------------------------------------------------------------------------------------------------------- */ @font-face { font-family: "Blender Pro"; src: url("https://powerlevel.gg/fonts/Blender-Pro-Book.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Blender Pro"; src: url("https://powerlevel.gg/fonts/Blender-Pro-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Blender Pro"; src: url("https://powerlevel.gg/fonts/Blender-Pro-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Blender Pro"; src: url("https://powerlevel.gg/fonts/Blender-Pro-Heavy.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------------------------------------------------- * Design tokens * * Every selector is `html:root...` (specificity 0,2,1) so it out-ranks the app's own `:root:not(...)` / * `:root[data-theme]` blocks (0,2,0) whichever order the stylesheets load in. * ----------------------------------------------------------------------------------------------------------- */ /* Dark - the default. */ html:root:not([data-theme="light"]) { color-scheme: dark; --rr-color-bg: #0a0d13; --rr-color-surface: #141824; --rr-color-surface-alt: #1b2130; --rr-color-border: #2b3244; --rr-color-text: #eef1f7; --rr-color-text-muted: #9aa3b7; --rr-color-text-on-primary: #061426; /* Blue - links, active navigation, structural chrome. */ --rr-color-primary: #3d93ff; --rr-color-primary-dark: #2d8aff; --rr-color-primary-darker: #0d79f2; --rr-color-primary-darkest: #0a5fc0; --rr-color-primary-light: #6fb0ff; --rr-color-primary-lighter: #9cc9ff; --rr-color-primary-lightest: #cfe4ff; /* Gold - call-to-action buttons and hover accents. */ --rr-color-accent: #f2af0d; --rr-color-accent-dark: #c98a0a; --rr-color-accent-soft: #f6ca5f; --rr-color-accent-pale: #fce9ba; --rr-color-text-on-accent: #1a1206; --rr-color-danger: #f2554d; --rr-color-danger-bg: #3a1517; --rr-color-success: #33c48a; --rr-color-warning: #f2af0d; --rr-color-warning-contrast: #1a1206; --rr-shadow-lw: 0 1px 2px 0 rgba(0, 0, 0, 0.35); --rr-shadow-md: 0 8px 40px rgba(0, 0, 0, 0.6); /* Aliases used by header.html / footer.html. `-text` variants are the shade that stays legible as text. */ --plc-gold: #f2af0d; --plc-gold-text: #f2af0d; --plc-blue: #0d79f2; } /* Light - when the OS asks for it, unless the page pins dark. */ @media (prefers-color-scheme: light) { html:root:not([data-theme="dark"]) { color-scheme: light; --rr-color-bg: #f7f5ee; --rr-color-surface: #ffffff; --rr-color-surface-alt: #f0ece0; --rr-color-border: #ddd8c9; --rr-color-text: #15181f; --rr-color-text-muted: #575f70; --rr-color-text-on-primary: #ffffff; --rr-color-primary: #0c62cc; --rr-color-primary-dark: #0a52ab; --rr-color-primary-darker: #084287; --rr-color-primary-darkest: #06336a; --rr-color-primary-light: #2f7fe0; --rr-color-primary-lighter: #6aa8f0; --rr-color-primary-lightest: #b9d5f7; --rr-color-accent: #a3690a; --rr-color-accent-dark: #7a4e08; --rr-color-accent-soft: #c98a1d; --rr-color-accent-pale: #fbe9c2; --rr-color-text-on-accent: #000000; --rr-color-danger: #c9372c; --rr-color-danger-bg: #fdeceb; --rr-color-success: #128a5e; --rr-color-warning: #f2af0d; --rr-color-warning-contrast: #1a1206; --rr-shadow-lw: 0 1px 2px 0 rgba(20, 20, 15, 0.12); --rr-shadow-md: 0 5px 40px rgba(20, 20, 15, 0.14); --plc-gold: #a3690a; --plc-gold-text: #7a4e08; --plc-blue: #0d79f2; } } /* Light - pinned by the page. Same values as above; a media query cannot be shared with a plain selector. */ html:root[data-theme="light"] { color-scheme: light; --rr-color-bg: #f7f5ee; --rr-color-surface: #ffffff; --rr-color-surface-alt: #f0ece0; --rr-color-border: #ddd8c9; --rr-color-text: #15181f; --rr-color-text-muted: #575f70; --rr-color-text-on-primary: #ffffff; --rr-color-primary: #0c62cc; --rr-color-primary-dark: #0a52ab; --rr-color-primary-darker: #084287; --rr-color-primary-darkest: #06336a; --rr-color-primary-light: #2f7fe0; --rr-color-primary-lighter: #6aa8f0; --rr-color-primary-lightest: #b9d5f7; --rr-color-accent: #a3690a; --rr-color-accent-dark: #7a4e08; --rr-color-accent-soft: #c98a1d; --rr-color-accent-pale: #fbe9c2; --rr-color-text-on-accent: #000000; --rr-color-danger: #c9372c; --rr-color-danger-bg: #fdeceb; --rr-color-success: #128a5e; --rr-color-warning: #f2af0d; --rr-color-warning-contrast: #1a1206; --rr-shadow-lw: 0 1px 2px 0 rgba(20, 20, 15, 0.12); --rr-shadow-md: 0 5px 40px rgba(20, 20, 15, 0.14); --plc-gold: #a3690a; --plc-gold-text: #7a4e08; --plc-blue: #0d79f2; } /* Theme-independent tokens. Panels are never rounded in this brand (pills, chips and avatars still are). */ html:root { --rr-radius-sm: 0; --rr-radius-md: 0; --rr-radius-lg: 0; --rr-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --rr-font-display: "Blender Pro", "Arial Narrow", "Segoe UI", sans-serif; } /* ------------------------------------------------------------------------------------------------------------- * Small brand touches * ----------------------------------------------------------------------------------------------------------- */ ::selection { background: var(--rr-color-accent); color: var(--rr-color-text-on-accent); } /* Focus rings are gold. Only the colour is set, so controls that draw their own ring or hide the outline are * unaffected. */ :focus-visible { outline-color: var(--rr-color-accent); } /* The compose button and a few others hard-code `text-white` on `bg-primary`. White on the dark theme's light * blue is 3.1:1; the token flips to a dark ink there and stays white in the light theme. */ .bg-primary.text-white { color: var(--rr-color-text-on-primary); } /* Light theme only: the gold call-to-action button darkens towards the text-safe brown on hover, where dark ink * drops to 2.8:1. Flip to white there (>= 4.6:1 across the whole gradient). Keyed to Tailwind's `to-accent` * gradient class from react-shared's Button; if that class ever changes this simply stops applying. */ @media (prefers-color-scheme: light) { html:root:not([data-theme="dark"]) .to-accent:hover:not(:disabled) { color: #ffffff; } } html:root[data-theme="light"] .to-accent:hover:not(:disabled) { color: #ffffff; } /* ------------------------------------------------------------------------------------------------------------- * Header (header.html) * ----------------------------------------------------------------------------------------------------------- */ .plc-header { position: relative; background: var(--rr-color-bg); border-bottom: 1px solid var(--rr-color-border); } /* The wordmark's underline bar: a long gold run ending in a short blue one. */ .plc-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--plc-gold) 0, var(--plc-gold) 72%, var(--plc-blue) 72%, var(--plc-blue) 100%); } .plc-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 3.5rem; padding: 0.5rem 1.5rem; } .plc-header__brand { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; } .plc-header__brand img { display: block; height: 2.25rem; width: auto; max-width: none; } .plc-header__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.25rem 1.75rem; } .plc-header__nav a { font-family: var(--rr-font-display); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--rr-color-text-muted); transition: color 0.15s ease; } .plc-header__nav a:hover, .plc-header__nav a:focus-visible { color: var(--plc-gold-text); } @media (max-width: 640px) { .plc-header__inner { padding: 0.5rem 1rem; } .plc-header__nav { display: none; } } /* ------------------------------------------------------------------------------------------------------------- * Footer (footer.html) * ----------------------------------------------------------------------------------------------------------- */ .plc-footer { background: var(--rr-color-bg); border-top: 1px solid var(--rr-color-border); color: var(--rr-color-text-muted); font-family: var(--rr-font-family); font-size: 0.75rem; line-height: 1.5; } .plc-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding: 0.75rem 1.5rem; } .plc-footer__legal, .plc-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; } .plc-footer a { color: inherit; text-decoration: none; transition: color 0.15s ease; } .plc-footer a:hover, .plc-footer a:focus-visible { color: var(--plc-gold-text); text-decoration: underline; } /* An envelope, drawn as a mask so it takes the link's colour. (An in the HTML would be stripped.) */ .plc-footer__mail::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.4em; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat; } /* Below `md` the app pins a 3.5rem tab bar to the bottom of the viewport; leave room so it never covers this. */ @media (max-width: 767px) { .plc-footer { padding-bottom: 3.5rem; } .plc-footer__inner { padding: 0.75rem 1rem; } } @media (prefers-reduced-motion: reduce) { .plc-header__nav a, .plc-footer a { transition: none; } }