/* ============================================================ RENTIE — brand foundation for the marketing site. Single source of truth for the palette + type. Loaded first in so page-level styles can still override. Palette is taken directly from the 2026-07 brand guide + element set: coral, blue, ink, neutrals. No lime. ============================================================ */ /* ---- Aktiv Grotesk (self-hosted, licensed — Dalton Maag). Latin + Cyrillic; Armenian (hy) falls back to Noto Sans Armenian via the stack. ---- */ @font-face { font-family: 'Aktiv Grotesk'; src: url('/fonts/AktivGrotesk-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Aktiv Grotesk'; src: url('/fonts/AktivGrotesk-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Aktiv Grotesk'; src: url('/fonts/AktivGrotesk-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Aktiv Grotesk'; src: url('/fonts/AktivGrotesk-XBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } :root { /* Coral — the brand primary / action color */ --coral: #F5875E; /* mascot + illustration coral */ --coral-deep: #F47952; /* monogram / lockup coral (deeper) */ --coral-strong: #E76A3E; /* darkened for white-text buttons (contrast) */ --coral-tint: #FDE7DD; /* soft coral wash for fills */ /* Blue — the brand secondary / accent */ --blue: #699ACC; --blue-deep: #3F6FA3; /* readable blue for text/icons */ --blue-tint: #E4ECF7; /* Ink — dark chrome + text (warm near-blacks from the guide) */ --ink: #282828; --ink-deep: #181518; /* the brand-guide page background */ --ink-line: #010101; /* Neutrals */ --grey: #404040; --grey-mid: #6E6E6A; --grey-soft: #8A8D85; --surface: #F7F7F5; --surface-low: #EFEFEC; --surface-2: #ECECEC; --white: #FFFFFF; --outline: #E0E0DA; --outline-strong: #C9C9C2; /* Semantic (guide has no green/red — harmonized additions) */ --success: #2E7D5B; --warning: #C77A12; --error: #C5372C; /* Aliases matching the existing landing token names, so every var(--primary)/var(--surface)/var(--header) usage picks up the brand. */ --primary: var(--coral); --primary-container: var(--coral-deep); --on-surface: var(--ink); --on-surface-variant: var(--grey); --header: var(--ink); --radius-card: 16px; --radius-button: 14px; --radius-input: 12px; --font-sans: 'Aktiv Grotesk', 'Noto Sans Armenian', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* Base type — reinforced globally so no page can slip back to a fallback font. */ body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Material Symbols — filled by default (matches the app). */ .material-symbols-outlined { font-variation-settings: 'FILL' 1; }