/* ===================================================================== MediaMarktSaturn Design Tokens --------------------------------------------------------------------- Authoritative palette + type scale + spacing for the MMS brand system. Drop this stylesheet into any HTML file via: then style with the CSS variables below or use the .mms-* utility classes at the bottom. ===================================================================== */ /* ---------- Web fonts ---------- */ @font-face { font-family: "MM Headline Pro"; src: url("fonts/MMHeadlineProWebTT-Regular.ttf") format("truetype"), url("fonts/MMHeadlinePro-Regular.otf") format("opentype"); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("fonts/NotoSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("fonts/NotoSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("fonts/NotoSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ============ BRAND COLORS ============ */ /* MediaMarkt — Primary brand */ --mm-red: #DF0000; /* RGB 223 0 0 — primary action, headlines, brand surfaces */ --mm-red-hover: #B80000; /* hover/active darker red */ --mm-red-tint: #FFEAEA; /* subtle red wash backgrounds */ /* Saturn — sister retail brand */ --saturn-black: #000000; --saturn-orange: #F39200; /* the orange ringed-planet swirl */ /* BetterWay — sustainability sub-brand */ --betterway-green: #008B6E; --betterway-green-tint: #E0F1ED; /* ============ NEUTRAL SCALE (G1–G5) ============ */ /* Source: PowerPoint Master 2024 theme accents */ --black: #000000; /* dk1 */ --slate-900: #282523; /* G1 — accent2, headlines on light, body text */ --slate-700: #4A4745; /* G2 — accent3, secondary text */ --slate-500: #928E8C; /* G3 — accent4, captions, dividers on light */ --slate-300: #CECBCA; /* G4 — accent5, hairline borders */ --slate-100: #F4F4F4; /* G5 — accent6, page wash, card surfaces */ --white: #FFFFFF; /* ============ SEMANTIC SURFACES ============ */ --bg-page: var(--white); --bg-subtle: var(--slate-100); --bg-inverse: var(--black); --bg-brand: var(--mm-red); --fg-default: var(--slate-900); --fg-muted: var(--slate-700); --fg-subtle: var(--slate-500); --fg-on-brand: var(--white); --fg-on-inverse: var(--white); --fg-link: var(--mm-red); --border-subtle: var(--slate-300); --border-default: var(--slate-500); --border-strong: var(--slate-900); /* ============ TYPE ============ */ --font-display: "MM Headline Pro", "Helvetica Neue Condensed", Impact, sans-serif; --font-body: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Display sizes — italic + bold by default; use .mms-display utility */ --fs-display-xxl: clamp(64px, 9vw, 144px); /* hero headlines */ --fs-display-xl: clamp(48px, 6vw, 96px); /* section openers */ --fs-display-lg: clamp(36px, 4.5vw, 72px);/* slide titles */ --fs-display-md: clamp(28px, 3.5vw, 48px); --fs-display-sm: 24px; /* Body sizes */ --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --lh-tight: 0.92; --lh-display: 1.02; --lh-snug: 1.25; --lh-body: 1.5; /* ============ SPACING (8pt base) ============ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ============ RADII ============ */ /* MMS is geometric / parallelogram-driven — keep radii small */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* ============ ELEVATION ============ */ --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04); --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); --shadow-lg: 0 12px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06); /* ============ MOTION ============ */ --ease-out: cubic-bezier(.2,.8,.2,1); --ease-in-out: cubic-bezier(.4,0,.2,1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; /* ============ SIGNATURE SHAPE ============ */ /* The MMS logo's parallelogram skew. Use on hero blocks, banners. */ --skew-mms: -12deg; } /* ===================================================================== BASE TYPOGRAPHY ===================================================================== */ .mms-typography, .mms-typography * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Display headlines — italic by default, the signature MMS look */ .mms-display { font-family: var(--font-display); font-weight: 700; font-style: italic; line-height: var(--lh-display); letter-spacing: -0.01em; text-wrap: balance; } .mms-display--upright { font-style: normal; } .mms-display--caps { text-transform: uppercase; letter-spacing: 0.005em; } .mms-h1 { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: -0.01em; } .mms-h2 { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: var(--fs-display-lg); line-height: var(--lh-display); letter-spacing: -0.005em; } .mms-h3 { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: var(--fs-display-md); line-height: var(--lh-snug); } .mms-h4 { font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: var(--lh-snug); } .mms-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-default); } .mms-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg-default); } .mms-body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--fg-muted); } .mms-caption { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-caption); line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); } .mms-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-body-sm); line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mm-red); }