/* ========================================================= MINIMAL NIGHT PALETTE (COL-001 · palette 08) · the palette "Premium, technical, and cinematic." Source: UI Vault components/colors. Shared across all MIRA pages. Included BEFORE any component CSS. Powered by [data-theme] on (set by scripts/theme.js). Tokens are named --ui-* (not after the palette) so a future palette swap only changes the values below. ========================================================= */ :root { color-scheme: light; --ui-bg: #F8FAFC; --ui-surface: #FFFFFF; --ui-soft: #CBD5E1; --ui-medium: #64748B; --ui-primary: #334155; --ui-text: #0F172A; --ui-muted: #5F6B7E; --ui-deep: #0F172A; --ui-gray-50: #F1F5F9; --ui-gray-100: #E2E8F0; --ui-glass: rgba(248, 250, 252, 0.70); --ui-glass-line: rgba(203, 213, 225, 0.55); --ui-text-rgb: 15, 23, 42; --ui-bg-rgb: 248, 250, 252; --ui-surface-rgb: 255, 255, 255; --ui-primary-rgb: 51, 65, 85; --ui-medium-rgb: 100, 116, 139; /* Inverse surfaces stay dark in BOTH themes (testimonials, login showcase). */ --ui-inverse: #0F172A; --ui-inverse-text: #F8FAFC; --ui-inverse-text-rgb: 248, 250, 252; /* The CTA block and the footer FOLLOW the theme: light by day, dark by night. */ --ui-cta: #E2E8F0; /* Silver */ --ui-cta-text: #0F172A; /* Deep */ --ui-cta-text-rgb: 15, 23, 42; --ui-footer: #F1F5F9; /* Mist, top of the gradient */ --ui-footer-deep: #E2E8F0; /* Silver, bottom and bar */ --ui-footer-deep-rgb: 226, 232, 240; --ui-footer-text: #0F172A; /* Deep */ --ui-footer-text-rgb: 15, 23, 42; --ui-footer-accent: #334155; /* Night */ --ui-footer-accent-rgb: 51, 65, 85; /* Drop shadows that must read on any surface. */ --ui-shadow-rgb: 15, 23, 42; /* Ink that sits ON a photo (testimonial video cards, blog numbers): the photo is the background, so it stays light in both themes. The glyph is the dark mark drawn on a light disc over a photo (play button). */ --ui-on-photo: #F8FAFC; --ui-on-photo-rgb: 248, 250, 252; --ui-on-photo-glyph: #0F172A; /* A printed book page (Booketeer): the page is an object, like a photo, so the paper and its ink stay the same in both themes. */ --ui-paper: #FBFAF6; --ui-paper-edge: #E4E1D6; --ui-paper-ink: #2F2E2A; --ui-paper-muted: #6F6E67; /* Star ratings: always gold, a deeper amber on light surfaces. */ --ui-rating: #D99A06; /* Success (sent / published) and the three account colours of the publishing flow. --ui-on-accent is the ink that sits on any of them. */ --ui-success: #15803D; --ui-account-1: #4F46E5; /* indigo · @avowinwinter */ --ui-account-2: #E0533F; /* coral · @authorwrites */ --ui-account-3: #0E8A7E; /* teal · @bookrecs */ --ui-on-accent: #FFFFFF; /* Progress bars across the landing: brand indigo → teal → success green, so a bar reads as "getting there" and ends on "done". Built from the tokens above, so it follows the theme. The track is a light indigo wash. */ --ui-progress: linear-gradient(90deg, var(--ui-account-1) 0%, var(--ui-account-3) 55%, var(--ui-success) 100%); --ui-progress-track: color-mix(in srgb, var(--ui-account-1) 14%, var(--ui-gray-100)); /* Social brand colours (footer "Say hello!"). Official colours; the black-and-white brands (TikTok, X, Threads) use --brand-mono, which flips to white in dark mode so the logos never vanish. */ --brand-mono: #000000; --brand-on-mono: #FFFFFF; --brand-tiktok-cyan: #25F4EE; --brand-tiktok-pink: #FE2C55; /* also the red of a liked heart */ --brand-tiktok-yellow: #FACE15; /* a saved bookmark */ --brand-instagram: #E1306C; --brand-instagram-gradient: linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%); --brand-youtube: #FF0000; --brand-tiktok-black: #000000; /* TikTok bottom bar: black in both themes */ /* Semantic states (see DESIGN-SYSTEM §3): success is taken above; danger is for errors only. The -rgb twins are for soft tints. */ --ui-success-rgb: 21, 128, 61; --ui-danger: #B42318; --ui-danger-rgb: 180, 35, 24; } :root[data-theme='dark'] { color-scheme: dark; --ui-bg: #070D16; --ui-surface: #0F172A; --ui-soft: #273449; --ui-medium: #64748B; --ui-primary: #D4DEEA; --ui-text: #F8FAFC; --ui-muted: #9DA9B9; --ui-deep: #F8FAFC; --ui-gray-50: #0C1520; --ui-gray-100: #14202E; --ui-glass: rgba(15, 23, 42, 0.70); --ui-glass-line: rgba(203, 213, 225, 0.15); --ui-text-rgb: 248, 250, 252; --ui-bg-rgb: 7, 13, 22; --ui-surface-rgb: 15, 23, 42; --ui-primary-rgb: 212, 222, 234; --ui-medium-rgb: 100, 116, 139; --ui-inverse: #14202E; --ui-cta: #0F172A; --ui-cta-text: #F8FAFC; --ui-cta-text-rgb: 248, 250, 252; --ui-footer: #14202E; --ui-footer-deep: #0C1520; --ui-footer-deep-rgb: 12, 21, 32; --ui-footer-text: #F8FAFC; --ui-footer-text-rgb: 248, 250, 252; --ui-footer-accent: #CBD5E1; --ui-footer-accent-rgb: 203, 213, 225; --ui-shadow-rgb: 0, 0, 0; --ui-rating: #FBBF24; --ui-success: #22C55E; --ui-account-1: #818CF8; --ui-account-2: #FB8A7B; --ui-account-3: #2DD4BF; --ui-on-accent: #0F172A; --brand-mono: #FFFFFF; --brand-on-mono: #000000; --ui-success-rgb: 34, 197, 94; --ui-danger: #F87171; --ui-danger-rgb: 248, 113, 113; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']):not([data-theme='dark']) { color-scheme: dark; --ui-bg: #070D16; --ui-surface: #0F172A; --ui-soft: #273449; --ui-medium: #64748B; --ui-primary: #D4DEEA; --ui-text: #F8FAFC; --ui-muted: #9DA9B9; --ui-deep: #F8FAFC; --ui-gray-50: #0C1520; --ui-gray-100: #14202E; --ui-glass: rgba(15, 23, 42, 0.70); --ui-glass-line: rgba(203, 213, 225, 0.15); --ui-text-rgb: 248, 250, 252; --ui-bg-rgb: 7, 13, 22; --ui-surface-rgb: 15, 23, 42; --ui-primary-rgb: 212, 222, 234; --ui-medium-rgb: 100, 116, 139; --ui-inverse: #14202E; --ui-cta: #0F172A; --ui-cta-text: #F8FAFC; --ui-cta-text-rgb: 248, 250, 252; --ui-footer: #14202E; --ui-footer-deep: #0C1520; --ui-footer-deep-rgb: 12, 21, 32; --ui-footer-text: #F8FAFC; --ui-footer-text-rgb: 248, 250, 252; --ui-footer-accent: #CBD5E1; --ui-footer-accent-rgb: 203, 213, 225; --ui-shadow-rgb: 0, 0, 0; --ui-rating: #FBBF24; --ui-success: #22C55E; --ui-account-1: #818CF8; --ui-account-2: #FB8A7B; --ui-account-3: #2DD4BF; --ui-on-accent: #0F172A; --brand-mono: #FFFFFF; --brand-on-mono: #000000; --ui-success-rgb: 34, 197, 94; --ui-danger: #F87171; --ui-danger-rgb: 248, 113, 113; } } /* ========================================================= TYPOGRAPHY · Commercial Impact (UI Vault fonts · combo 16) Headline: Montserrat 800 · Body: DM Sans. Shared by the site and the login, so every page and every bundled component reads from the same two tokens. ========================================================= */ :root { --font-display: "Montserrat", Arial, sans-serif; --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Printed book text (Booketeer's page). System serif, nothing to download. */ --font-book: Georgia, "Times New Roman", serif; } /* ========================================================= BRAND MARK · the MIRA wordmark (UI Vault assets/images/Icon/icon02) Painted as a CSS mask over currentColor, so it takes the colour of whatever it sits on — menu, dark panel or light card — from one file. Give it a width; the height follows the artwork's own proportion. ========================================================= */ .mira-mark { display: block; aspect-ratio: 2172 / 724; background: currentColor; -webkit-mask: url('../assets/brand/mira-wordmark.webp') no-repeat center / contain; mask: url('../assets/brand/mira-wordmark.webp') no-repeat center / contain; } /* ========================================================= BREAKPOINTS · design for ranges, not devices Custom properties can't be read inside @media, so these are the only widths any stylesheet in MIRA should use: Mobile 0–767px @media (max-width: 767.98px) Tablet 768–1023px @media (min-width: 768px) Desktop 1024–1439px @media (min-width: 1024px) Wide 1440px+ @media (min-width: 1440px) Auxiliary, only when a layout truly needs it: Small mobile <480px @media (max-width: 479.98px) Laptop <1280px @media (max-width: 1279.98px) ========================================================= */ /* ========================================================= TEXT SCALE · readable for a 30–60 audience Nothing on the site goes below 14px, and body copy starts at 17px. Sizes step up per range; change them here, not in the components. ========================================================= */ :root { --fs-label: 14px; /* eyebrows, badges, section numbers, captions */ --fs-small: 15px; /* secondary notes, meta, helper and error text */ --fs-ui: 16px; /* nav links, buttons, tabs, form labels */ --fs-body: 17px; /* paragraphs, card copy, inputs */ --fs-lead: 18px; /* intro paragraphs under big headlines */ } @media (min-width: 768px) { :root { --fs-lead: 19px; } } @media (min-width: 1024px) { :root { --fs-body: 18px; --fs-lead: 20px; } } @media (min-width: 1440px) { :root { --fs-label: 15px; --fs-small: 16px; --fs-ui: 17px; --fs-lead: 21px; } } body { font-family: var(--font-body); font-size: var(--fs-body); } /* Form controls do not inherit the page font by default (browsers drop buttons to ~13px), so they take the family and size of their context. */ button, input, textarea, select { font-family: inherit; font-size: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 800; } /* Theme switch (theme.js): no component transitions while the theme flips, and a short crossfade of the whole page where View Transitions exist. */ .is-theme-switching, .is-theme-switching *, .is-theme-switching *::before, .is-theme-switching *::after { transition: none !important; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: ease; }