/* ============================================================================ MIXXI RISING — Broadcast Overlay Brand System Canonical colours & devices from the official Show Branding book (Dynamite). ========================================================================== */ :root { /* --- Brand core (canonical hexes, p.30) --- */ --red: #fe0927; --pink: #f91979; --navy: #162d4a; --black: #000000; --white: #ffffff; /* --- Parent-Mixxi monogram accents (MIXXI BRAND Artifacts / 02–03) --- */ --mixxi-orange: #ff4d00; --mixxi-blue: #4221f0; /* --- Rising EMPHASIS accent: acid yellow (Save-the-Date date, episode cards) --- The show's confirmed warm accent for leader / rising / key emphasis. */ --yellow: #faf909; --yellow-soft: #fff27a; --yellow-fill: linear-gradient(180deg, #fff27a 0%, #faf909 55%, #d9d800 100%); /* --- Reference-design accents (leaderboard v2) --- */ --teal: #3fe0cf; /* episode number */ --silver: #dfe6ee; /* #2 podium / metallic title */ --bronze: #f2a45f; /* #3 podium */ /* --- Champagne gold (earned accent: #1 / winner / reveal) --- */ --gold: #e9c88a; --gold-hi: #f7e6bd; --gold-lo: #b8894a; --gold-fill: linear-gradient(180deg, #f7e6bd 0%, #e9c88a 44%, #c69a52 78%, #b8894a 100%); /* --- Background gradient system (deck p.31 "Background Gradient Guide") --- The ONLY two backgrounds the brand defines. All backgrounds use these. */ /* Dark Blue → Black, sampled from the deck's 9:16 background-gradient swatch. Radial glow at top-centre; navy #16294a → near-black. Primary backdrop. */ --bg-dark: radial-gradient(142% 108% at 50% -2%, #16294a 0%, #142841 9%, #12233b 22%, #0e1d30 36%, #0b1423 52%, #060d17 70%, #030509 86%, #000 100%); --stage-radial: var(--bg-dark); /* alias kept for existing references */ /* Red → Pink, LINEAR — the 9:16 hot swatch (pink top → red foot). */ --bg-hot: linear-gradient(180deg, #f91979 0%, #fb1355 30%, #fe0e3f 62%, #fe0927 100%); /* --- Motion gradient: the same red↔pink as an ACCENT fill (pills, bars, chevrons, reveal edges); diagonal per the logo/motion usage (p.17/p.60) --- */ --motion-grad: linear-gradient(118deg, #fe0927 0%, #ff1560 46%, #f91979 100%); --motion-grad-soft: linear-gradient(118deg, rgba(254,9,39,.92), rgba(249,25,121,.92)); /* --- Functional --- */ --rise: #4fe08a; /* rank-up chevron — green (upward movement) */ --rise-hi: #8fefb0; --fall: #ff5a6a; /* rank-down chevron */ --panel: rgba(9, 14, 24, .82); --panel-2: rgba(13, 20, 34, .74); --panel-line: rgba(255, 255, 255, .10); --ink-1: #ffffff; --ink-2: rgba(255, 255, 255, .74); /* secondary text — handles, labels (≥4.5:1 on panel/gradient) */ --ink-3: rgba(255, 255, 255, .5); /* tertiary — large/secondary only */ /* --- Motion --- */ --ease-expo: cubic-bezier(.16, 1, .3, 1); --ease-quint: cubic-bezier(.22, 1, .36, 1); --dur-flip: 640ms; --dur-count: 720ms; /* --- z-index scale (semantic) --- */ --z-watermark: 0; --z-panel: 10; --z-rows: 20; --z-row-moving: 30; --z-leader-fx: 40; --z-chrome: 50; --z-reveal: 80; --z-burst: 90; /* --- Frame --- */ --frame-w: 1080px; --frame-h: 1920px; --safe: 54px; /* action-safe inset (~5%) */ /* Type system: MIXXI RISING (the show) display face = Acumin Pro Variable (Adobe Fonts, 06. Mixxi Rising/FONT). Adobe Fonts can't be self-hosted — add the client's Adobe web-project embed to the HTML to enable it; until then it falls back to Barlow Condensed. IBM Plex Sans = UI / data / tabular numerals. Degular (@font-face above) is the PARENT-Mixxi brand font, kept for parent moments. */ --font-display: "acumin-variable", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; } /* ------------------------------------------- Degular (brand font, web-licensed) */ @font-face { font-family:"Degular"; font-weight:300; font-style:normal; font-display:swap; src:url("../fonts/degular/Degular-Light.woff2") format("woff2"); } @font-face { font-family:"Degular"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/degular/Degular-Regular.woff2") format("woff2"); } @font-face { font-family:"Degular"; font-weight:500; font-style:normal; font-display:swap; src:url("../fonts/degular/Degular-Medium.woff2") format("woff2"); } @font-face { font-family:"Degular"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/degular/Degular-Semibold.woff2") format("woff2"); } @font-face { font-family:"Degular"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/degular/Degular-Bold.woff2") format("woff2"); } @font-face { font-family:"Degular"; font-weight:900; font-style:normal; font-display:swap; src:url("../fonts/degular/Degular-Black.woff2") format("woff2"); } @font-face { font-family:"Degular"; font-weight:400; font-style:italic; font-display:swap; src:url("../fonts/degular/Degular-Italic.woff2") format("woff2"); } @font-face { font-family:"Degular"; font-weight:500; font-style:italic; font-display:swap; src:url("../fonts/degular/Degular-MediumItalic.woff2") format("woff2"); } @font-face { font-family:"Degular"; font-weight:700; font-style:italic; font-display:swap; src:url("../fonts/degular/Degular-BoldItalic.woff2") format("woff2"); } @font-face { font-family:"Degular"; font-weight:900; font-style:italic; font-display:swap; src:url("../fonts/degular/Degular-BlackItalic.woff2") format("woff2"); } /* ------------------------------------------------------------------ reset */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-ui); color: var(--ink-1); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: transparent; } img { display: block; max-width: 100%; } button { font: inherit; color: inherit; } /* ---------------------------------------------------- stage scaling frame */ /* A fixed 1080×1920 canvas, uniformly scaled to fit the viewport. In a 1080×1920 OBS/vMix browser source the scale resolves to 1. */ .mx-viewport { position: fixed; inset: 0; overflow: hidden; background: #04070d; /* dark letterbox behind the 9:16 stage (invisible in a 9:16 source) */ } .mx-stage { position: absolute; top: 50%; left: 50%; width: var(--frame-w); height: var(--frame-h); transform: translate(-50%, -50%) scale(var(--mx-scale, 1)); transform-origin: center center; } /* The graphic renders on the official 9:16 gradient by default (see overlay.css). ?transparent (html.mx-transparent) keys it over live video for OBS. */ html.mx-transparent .mx-viewport, html.mx-transparent .mx-stage { background: transparent; } /* --------------------------------------------------------------- devices */ /* Rising double-chevron (the "rising" mark) */ .mx-chevrons { display: inline-flex; flex-direction: column; gap: .06em; line-height: 0; } .mx-chevrons svg { width: 1em; height: auto; display: block; } /* Repeating-word watermark (RISING / TOP 10 …) */ .mx-wordwall { position: absolute; inset: -8% -14%; z-index: var(--z-watermark); display: grid; grid-auto-rows: 1fr; gap: 0; transform: rotate(-4deg) scale(1.08); opacity: .05; pointer-events: none; overflow: hidden; user-select: none; } .mx-wordwall span { font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase; white-space: nowrap; letter-spacing: .02em; color: #fff; line-height: .96; } /* Glossy 3D chevron frame edge (reveal) */ .mx-gloss-chevron { position: absolute; top: 0; bottom: 0; width: 46%; background: linear-gradient(100deg, rgba(255,255,255,.28), rgba(255,255,255,0) 26%), var(--motion-grad); box-shadow: inset 0 0 60px rgba(0,0,0,.55), 0 0 120px rgba(249,25,121,.35); } /* Emphasis text (peaks only: #1 / winner / reveal) — Rising acid yellow, solid. */ .mx-gold { color: var(--yellow); text-shadow: 0 2px 18px rgba(250, 249, 9, .3); } /* Logo lockup */ .mx-logo { height: auto; width: auto; display: block; } /* --------------------------------------------------------------- shared kf */ @keyframes mx-sheen { 0% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } } @keyframes mx-gold-drift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes mx-pulse-rise { 0% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(255,210,74,0)); } 40% { transform: translateY(-.18em) scale(1.18); filter: drop-shadow(0 0 10px rgba(255,210,74,.9)); } 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(255,210,74,0)); } } @keyframes mx-nudge-fall { 0% { transform: translateY(0); } 45% { transform: translateY(.16em); } 100% { transform: translateY(0); } } @keyframes mx-row-sweep { 0% { opacity: 0; transform: translateX(-30%); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateX(120%); } } @keyframes mx-pop-in { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes mx-fade-out { to { opacity: 0; transform: translateX(46px) scale(.94); } } @keyframes mx-stage-breathe { 0%, 100% { background-position: 50% 6%; } 50% { background-position: 52% 10%; } } /* ----------------------------------------------------- reduced motion path */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }