/* ============================================================ MOVIE MASTERS — Color + Type Foundations ============================================================ A 3D-clay, chunky-cute mobile cinema-builder brand. Two coordinated palettes: COOL — playful primary (blues, peach/orange, deep purple) WARM — vintage cinema (mustard, cream, slate, tomato) Variations are used "selon les événements et saisons" (per the brand book, p.4). ============================================================ */ /* -------------- WEBFONTS --------------- */ /* National Park – body / sub-titles (real Google Font; matches PDF) */ @import url('https://fonts.googleapis.com/css2?family=National+Park:wght@200..800&display=swap'); /* Fredoka – display headlines. SUBSTITUTION: the brand's display logotype is a custom 3D-clay cut of a chunky-rounded sans (Sniglet / Fredoka family). No font file was supplied, so we use Fredoka 600/700 from Google as the closest web-safe match. Logo lockups should always use the supplied PNGs. */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap'); :root { /* ================================================= COLOR — COOL palette (page 2 of the charte) ================================================= */ --mm-cool-cyan: #00a2ff; /* light blue chip */ --mm-cool-blue: #104292; /* deep blue chip */ --mm-cool-peach: #ffc18c; /* peach chip */ --mm-cool-orange: #ff6633; /* tomato/orange */ --mm-cool-violet: #4b4adb; /* electric violet */ --mm-cool-night: #332951; /* deep night */ /* ================================================= COLOR — WARM palette (page 3 of the charte) ================================================= */ --mm-warm-mustard: #edb75b; /* primary highlight */ --mm-warm-cream: #ebdfd0; /* paper / parchment */ --mm-warm-ink: #212934; /* near-black ink */ --mm-warm-tomato: #d7493c; /* red accent */ --mm-warm-slate: #335c7c; /* slate blue */ /* ================================================= COLOR — Brand "logo" anchors ================================================= */ --mm-logo-red: #e94f44; /* ticket-top red */ --mm-logo-yellow: #ffce2b; /* MASTERS yellow */ --mm-logo-royal: #1d54c4; /* MASTERS base */ --mm-logo-cream: #fdf2dc; /* MOVIE letters */ /* ================================================= SEMANTIC tokens — neutrals (warm-leaning) ================================================= */ --mm-bg: var(--mm-warm-cream); --mm-bg-alt: #f7efe2; --mm-surface: #ffffff; --mm-surface-night: #2a2447; /* night sky behind cinemas */ --mm-fg-1: var(--mm-warm-ink); --mm-fg-2: #4d5663; /* secondary copy */ --mm-fg-3: #8a8e96; /* meta / disabled */ --mm-fg-on-dark: #fdf2dc; /* ================================================= SEMANTIC tokens — actions / state ================================================= */ --mm-primary: var(--mm-cool-violet); /* purple CTA in-game */ --mm-primary-hover: #5e5dff; --mm-primary-press: #3a3aae; --mm-primary-shadow: #2c2b8c; --mm-secondary: var(--mm-warm-mustard); --mm-secondary-press: #d29c40; --mm-success: #4eba6f; --mm-warning: var(--mm-warm-mustard); --mm-danger: var(--mm-warm-tomato); --mm-info: var(--mm-cool-cyan); /* "Bientôt à l'affiche" pink poster strip */ --mm-poster-pink: #d7376a; /* ================================================= RADII / ELEVATION / BORDERS ================================================= */ --mm-r-xs: 6px; --mm-r-sm: 12px; --mm-r-md: 18px; --mm-r-lg: 28px; --mm-r-pill: 999px; /* The "claymation" double-edge: a chunky cream stroke + hard offset shadow in a deeper version of the fill. */ --mm-stroke-cream: 4px solid var(--mm-warm-cream); --mm-stroke-ink: 3px solid var(--mm-warm-ink); --mm-shadow-pop: 0 6px 0 0 var(--mm-primary-shadow); --mm-shadow-pop-warm: 0 6px 0 0 #b8862d; --mm-shadow-pop-red: 0 6px 0 0 #a23128; --mm-shadow-soft: 0 12px 28px -10px rgba(33, 41, 52, .35); --mm-shadow-card: 0 2px 0 0 rgba(33, 41, 52, .12), 0 18px 36px -18px rgba(33, 41, 52, .28); /* ================================================= SPACING (8-px base, with snug 4 + 6 for game UI) ================================================= */ --mm-s-1: 4px; --mm-s-2: 6px; --mm-s-3: 8px; --mm-s-4: 12px; --mm-s-5: 16px; --mm-s-6: 24px; --mm-s-7: 32px; --mm-s-8: 48px; --mm-s-9: 64px; --mm-s-10: 96px; /* ================================================= TYPE — families ================================================= */ --mm-font-display: 'Fredoka', 'National Park', system-ui, sans-serif; --mm-font-body: 'National Park', system-ui, -apple-system, 'Segoe UI', sans-serif; --mm-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', monospace; /* ================================================= TYPE — scale (mobile-game leaning, generous for slides) ================================================= */ --mm-fs-display: 72px; --mm-fs-h1: 48px; --mm-fs-h2: 36px; --mm-fs-h3: 28px; --mm-fs-h4: 22px; --mm-fs-body-lg: 18px; --mm-fs-body: 16px; --mm-fs-meta: 14px; --mm-fs-micro: 12px; /* Weights from PDF: 700 / 400 / 300 */ --mm-fw-light: 300; --mm-fw-regular: 400; --mm-fw-medium: 500; --mm-fw-bold: 700; /* Line heights */ --mm-lh-tight: 1.05; --mm-lh-snug: 1.2; --mm-lh-body: 1.45; --mm-lh-loose: 1.7; } /* ================================================= SEMANTIC TYPE STYLES ================================================= */ .mm-display, h1.mm-display { font-family: var(--mm-font-display); font-size: var(--mm-fs-display); font-weight: var(--mm-fw-bold); line-height: var(--mm-lh-tight); letter-spacing: -0.01em; color: var(--mm-fg-1); } .mm-h1, h1 { font-family: var(--mm-font-display); font-size: var(--mm-fs-h1); font-weight: var(--mm-fw-bold); line-height: var(--mm-lh-tight); color: var(--mm-fg-1); text-transform: uppercase; /* Titres are SET CAPS in the charte */ letter-spacing: 0.005em; } .mm-h2, h2 { font-family: var(--mm-font-body); font-size: var(--mm-fs-h2); font-weight: var(--mm-fw-bold); line-height: var(--mm-lh-snug); color: var(--mm-fg-1); } .mm-h3, h3 { font-family: var(--mm-font-body); font-size: var(--mm-fs-h3); font-weight: var(--mm-fw-medium); /* Sous-titre — National Park 400 */ line-height: var(--mm-lh-snug); color: var(--mm-fg-1); } .mm-h4, h4 { font-family: var(--mm-font-body); font-size: var(--mm-fs-h4); font-weight: var(--mm-fw-medium); line-height: var(--mm-lh-snug); color: var(--mm-fg-1); } .mm-subtitle { font-family: var(--mm-font-body); font-size: var(--mm-fs-body-lg); font-weight: var(--mm-fw-regular); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mm-warm-slate); } .mm-p, p { font-family: var(--mm-font-body); font-size: var(--mm-fs-body); font-weight: var(--mm-fw-light); /* Texte courant — National Park 300 */ line-height: var(--mm-lh-body); color: var(--mm-fg-1); } .mm-meta { font-family: var(--mm-font-body); font-size: var(--mm-fs-meta); font-weight: var(--mm-fw-regular); color: var(--mm-fg-2); } .mm-eyebrow { font-family: var(--mm-font-body); font-size: var(--mm-fs-micro); font-weight: var(--mm-fw-bold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mm-warm-tomato); } .mm-code, code { font-family: var(--mm-font-mono); font-size: 13px; background: rgba(33, 41, 52, .06); padding: 2px 6px; border-radius: var(--mm-r-xs); }