/* * MMP design-system tokens. * * SOURCE OF RECORD: artifacts/design_handoff_homepage_enhancements/design-system/ * Concatenated from tokens/{colors,typography,surfaces,layout,animations}.css * in the order styles.css imports them. Edit the design system, then re-copy -- * do not hand-edit this file. * * TWO deliberate changes on the way in: * * 1. tokens/fonts.css is NOT included. It declares @font-face for Bebas Neue, * Manrope and Cormorant against ../assets/typeface/, which is where they sit * in the design system and not where they sit here. Shipped as-is those * three families resolve to 404s and every heading falls back to a serif -- * which is exactly what happened. The site already self-hosts all three * through the theme, so the faces are there; only the paths were wrong. * * 2. The five palette entries reference the ACSS roles rather than restating * their OKLCH, per DECISIONS: --mmp-* derives from ACSS and never redefines * it, so a dashboard palette change flows through instead of being * contradicted. --mmp-accent points at --mmp-violet because a legacy Etch * sheet declares :root { --accent: #4fa3e0 } over the compiled value. * * Everything else is verbatim, including the accent tints' double * declarations: the rgba line is the fallback for engines without * color-mix(), the color-mix line wins everywhere else, and it is what makes * a per-speaker accent override the whole tint ladder from one token. Never * replace a color-mix value with a literal. */ /* MMP Speaker Bureau — color tokens. OKLCH values are the computed conversions of the approved hex palette and are the values to ship (ACSS 4.x is OKLCH-native). Hex in comments is the design-file original, kept only for cross-referencing the handoff. */ :root { /* ── Palette ─────────────────────────────────────────────── */ --mmp-primary: var(--primary); /* #4fa3e0 blue */ --mmp-secondary: var(--secondary); /* #a78bfa violet */ --mmp-accent: var(--mmp-violet); /* #7c6af5 CTA end */ --mmp-tertiary: var(--tertiary, oklch(0.848 0.067 239.2)); /* #a5d4f5 ice */ --mmp-base: var(--base); /* #121a36 navy */ /* ── Text ────────────────────────────────────────────────── */ --mmp-text: #f0f4ff; /* headings, buttons */ --mmp-text-muted: rgba(240, 244, 255, 0.72); /* subheadline */ --mmp-text-body: rgba(230, 240, 255, 0.88); /* bio + tooltip body */ --mmp-text-soft: rgba(200, 220, 255, 0.60); /* personal note, meta */ --mmp-text-ice: rgba(165, 212, 245, 0.70); /* labels, cites, eyebrow */ --mmp-text-ice-solid: #a5d4f5; /* pill text, watch links */ --mmp-text-quote: #d6eaff; /* pull-quote body */ --mmp-text-quote-inline: #c5deff; /* inline philosophy quote*/ --mmp-text-menu: #dfe8ff; /* topic menu item rest */ --mmp-text-footer: rgba(200, 220, 255, 0.40); --mmp-text-credential: rgba(210, 228, 255, 0.82); /* ── Glass fills, by depth (see readme → Glass depths) ───── */ --mmp-glass-card: rgba(255, 255, 255, 0.07); /* depth 1 — cards */ --mmp-glass-control: rgba(255, 255, 255, 0.10); /* depth 1 — controls */ --mmp-glass-hover: rgba(255, 255, 255, 0.18); --mmp-glass-header: rgba(10, 18, 40, 0.45); /* fixed header bar */ --mmp-glass-tooltip: rgba(20, 28, 58, 0.60); /* depth 2 — over photo */ --mmp-glass-bubble: rgba(16, 23, 48, 0.94); /* depth 3 — over text */ --mmp-glass-modal: rgba(18, 26, 54, 0.78); /* depth 4 — modal */ --mmp-scrim: rgba(5, 10, 25, 0.65); /* modal backdrop */ /* Form fields sit inside a glass card and have to read as recessed rather than as another pane of the same glass. rgba(10,14,26,0.45) from 1c. */ --mmp-field-bg: color-mix(in oklab, var(--mmp-navy-ink, oklch(0.15 0.02 265)) 45%, transparent); /* ── Borders ─────────────────────────────────────────────── */ --mmp-border: rgba(255, 255, 255, 0.22); --mmp-border-strong: rgba(255, 255, 255, 0.38); --mmp-border-hairline: rgba(255, 255, 255, 0.10); /* menu row divider */ --mmp-border-media: rgba(255, 255, 255, 0.18); /* video frame */ /* ── Accent tints — DERIVED, never hand-authored ────────── Every tint is a percentage of --mmp-primary, so a per-speaker accent needs exactly one token overridden and the whole tint ladder follows. Each token is declared twice: the rgba line is the default-blue fallback for engines without color-mix(); the color-mix line wins everywhere else. Never replace a color-mix value with a literal. */ --mmp-accent-soft: rgba(79, 163, 224, 0.18); --mmp-accent-soft: color-mix(in srgb, var(--mmp-primary) 18%, transparent); --mmp-accent-soft-hover: rgba(79, 163, 224, 0.32); --mmp-accent-soft-hover: color-mix(in srgb, var(--mmp-primary) 32%, transparent); --mmp-accent-border: rgba(79, 163, 224, 0.35); --mmp-accent-border: color-mix(in srgb, var(--mmp-primary) 35%, transparent); --mmp-accent-border-hover: rgba(79, 163, 224, 0.65); --mmp-accent-border-hover: color-mix(in srgb, var(--mmp-primary) 65%, transparent); --mmp-accent-glow: rgba(79, 163, 224, 0.30); --mmp-accent-glow: color-mix(in srgb, var(--mmp-primary) 30%, transparent); --mmp-accent-wash: rgba(79, 163, 224, 0.08); /* quote block bg */ --mmp-accent-wash: color-mix(in srgb, var(--mmp-primary) 8%, transparent); --mmp-accent-wash-border: rgba(79, 163, 224, 0.25); --mmp-accent-wash-border: color-mix(in srgb, var(--mmp-primary) 25%, transparent); --mmp-accent-scrim: rgba(10, 14, 26, 0.55); /* under pills */ /* Glow steps for the accent-colored shadows in surfaces.css. */ --mmp-glow-10: rgba(79, 163, 224, 0.10); --mmp-glow-10: color-mix(in srgb, var(--mmp-primary) 10%, transparent); --mmp-glow-35: rgba(79, 163, 224, 0.35); --mmp-glow-35: color-mix(in srgb, var(--mmp-primary) 35%, transparent); --mmp-glow-45: rgba(79, 163, 224, 0.45); --mmp-glow-45: color-mix(in srgb, var(--mmp-primary) 45%, transparent); --mmp-glow-60: rgba(79, 163, 224, 0.60); --mmp-glow-60: color-mix(in srgb, var(--mmp-primary) 60%, transparent); /* ── Gradients ─────────────────────────────────────────────── Gradient stops stay literal: they are the approved values and the CTA ramp is frozen (readme → Open questions — the contrast fix is a label color, not a palette change). When per-speaker accents ship, these become the second token a speaker theme overrides. */ --mmp-gradient-cta: linear-gradient(135deg, #4fa3e0, #7c6af5); /* @kind other */ --mmp-gradient-cta-glass: linear-gradient(135deg, rgba(79,163,224,0.55), rgba(167,139,250,0.45)); /* @kind other */ --mmp-gradient-cta-glass-hover: linear-gradient(135deg, rgba(79,163,224,0.75), rgba(167,139,250,0.65)); /* @kind other */ --mmp-gradient-frame: linear-gradient(135deg, #4fa3e0, #a78bfa); /* @kind other */ --mmp-gradient-heading: linear-gradient(135deg, #fff 30%, #a5c8f0 100%); /* @kind other */ --mmp-gradient-wordmark: linear-gradient(135deg, #ffffff 0%, #a5c8f0 40%, #c4a8f5 75%, #ffffff 100%); /* @kind other */ --mmp-overlay-page: linear-gradient(160deg, rgba(5,10,25,0.85) 0%, rgba(10,20,50,0.75) 40%, rgba(5,10,25,0.82) 100%); /* @kind other */ } /* Three typefaces, each with one job. Bebas Neue is never used for running text; Cormorant Garamond is italic-only and never used for UI. */ :root { --mmp-font-display: 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif; --mmp-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif; --mmp-font-quote: 'Cormorant Garamond', 'Times New Roman', serif; /* Display (Bebas Neue, uppercase by design of the face) */ --mmp-wordmark-size: 1.95rem; /* phone: 1.3rem */ --mmp-wordmark-tracking: 0.08em; /* @kind font */ --mmp-modal-title-size: 2rem; /* event modal: 1.8rem */ --mmp-modal-title-tracking: 0.04em; /* @kind font */ --mmp-menu-item-size: 1.12rem; --mmp-menu-item-tracking: 0.045em; /* @kind font */ /* Body (Manrope) */ --mmp-headline-size: clamp(1.7rem, 3.5vw, 2.8rem); --mmp-headline-weight: 700; /* @kind font */ --mmp-headline-lh: 1.18; /* @kind font */ --mmp-headline-tracking: -0.02em; /* @kind font */ --mmp-subheadline-size: clamp(0.95rem, 1.8vw, 1.15rem); --mmp-lead-size: 1.18rem; /* first bio paragraph, weight 600 */ --mmp-lead-lh: 1.85; /* @kind font */ --mmp-body-size: 0.95rem; --mmp-body-lh: 1.72; /* @kind font */ --mmp-tooltip-size: 0.85rem; --mmp-tooltip-lh: 1.6; /* @kind font */ --mmp-ui-size: 0.8rem; /* button labels */ --mmp-pill-size: 0.78rem; --mmp-tag-size: 0.68rem; --mmp-meta-size: 0.88rem; --mmp-footer-size: 0.78rem; /* Eyebrow / label */ --mmp-label-size: 0.72rem; --mmp-label-tracking: 0.22em; /* @kind font */ /* SPEAKING TOPICS */ --mmp-cite-size: 0.82rem; --mmp-cite-tracking: 0.06em; /* @kind font */ --mmp-eyebrow-size: 0.68rem; /* event bubble subtitle */ --mmp-eyebrow-tracking: 0.12em; /* @kind font */ /* Quote (Cormorant Garamond italic) */ --mmp-quote-size: clamp(1.08rem, 2vw, 1.45rem); --mmp-quote-inline-size: 1.08rem; --mmp-quote-lh: 1.5; /* @kind font */ --mmp-measure: 70ch; /* @kind font */ /* every prose block is capped here */ } /* Glass recipes. A glass surface is always three things at once: a translucent fill, a 1px light border, and a backdrop blur. Drop any one of them and the surface reads as flat paint over a photo. */ :root { /* Blur, per depth */ --mmp-blur-glass: blur(18px); /* @kind other */ /* cards, controls, header */ --mmp-blur-tooltip: blur(18px) saturate(1.4); /* @kind other */ /* tooltips + bubbles */ --mmp-blur-modal: blur(24px) saturate(1.4); /* @kind other */ /* modal panel */ --mmp-blur-scrim: blur(10px); /* @kind other */ /* modal backdrop */ /* Shadows */ --mmp-shadow-card: 0 4px 32px rgba(0, 0, 0, 0.18); --mmp-shadow-control: 0 2px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18); --mmp-shadow-tooltip: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16); --mmp-shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14); /* Accent-colored glows read from the derived glow steps in colors.css, so they follow a per-speaker accent with no edits here. */ --mmp-shadow-cta: 0 4px 24px var(--mmp-glow-45); --mmp-shadow-cta-hover: 0 8px 36px var(--mmp-glow-60); --mmp-shadow-frame: 0 0 40px var(--mmp-accent-glow), 0 8px 32px rgba(0, 0, 0, 0.45); --mmp-shadow-media: 0 8px 32px rgba(0, 0, 0, 0.40); --mmp-shadow-quote: 0 4px 32px var(--mmp-glow-10); --mmp-shadow-pill-hover: 0 0 16px var(--mmp-accent-glow); --mmp-shadow-icon-hover: 0 0 18px var(--mmp-glow-35); } /* Radii, rhythm, motion. Values are lifted verbatim from the approved designs — do not snap them to a 4px grid. */ :root { /* Radii */ --mmp-radius-pill: 980px; --mmp-radius-card: 20px; --mmp-radius-tooltip: 18px; --mmp-radius-modal: 24px; --mmp-radius-media: 16px; --mmp-radius-frame: 16px; /* headshot outer (gradient border) */ --mmp-radius-frame-inner: 13px; /* the image inside it */ /* Layout */ --mmp-page-max: 1100px; --mmp-header-height: 58px; --mmp-sidebar-width: 240px; /* desktop grid: 240px 1fr */ --mmp-grid-gap: 48px; /* tablet 36px, phone 28px */ --mmp-main-pad: 90px 40px 60px; /* tablet 84px 28px 52px, phone 78px 16px 44px */ --mmp-card-pad: 28px 32px; /* phone 20px 18px */ --mmp-tooltip-pad: 16px 18px; --mmp-modal-pad: 28px 32px 32px; --mmp-sticky-top: 80px; /* Widths of floating surfaces */ --mmp-tooltip-width: 280px; /* topic tooltip, opens right */ --mmp-bubble-width: 300px; /* event bubble, opens below */ --mmp-modal-width: 720px; /* topic modal; event modal 620px */ /* Breakpoints (informational — media queries can't read vars) */ --mmp-bp-phone: 700px; --mmp-bp-tablet: 1024px; --mmp-bp-header-socials: 860px; /* below this the header socials hide */ /* Motion */ --mmp-transition: all 0.22s ease; /* @kind other */ /* buttons, pills */ --mmp-transition-menu: all 0.2s ease; /* @kind other */ --mmp-transition-expand: max-width 0.28s ease, opacity 0.2s ease, padding 0.28s ease; /* @kind other */ --mmp-fade-in: 0.18s ease; /* @kind other */ /* tooltip / bubble appear */ --mmp-modal-in: 0.25s ease; /* @kind other */ --mmp-hover-grace: 180ms; /* @kind other */ /* tooltip leave timeout */ --mmp-lift: translateY(-2px); /* @kind other */ /* CTA + footer icon hover */ --mmp-lift-sm: translateY(-1px); /* @kind other */ /* small glass buttons */ } /* Two keyframes, both from the approved designs. Referenced by GlassTooltip and VideoModal. */ @keyframes mmpFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mmpModalIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }