/* ============================================================ MAKALI MEDIA — Colors & Type Dark-themed brand system. Pure black backgrounds, multi-colour gradient as the hero element, bold Gotham typography. ============================================================ */ /* --- Fonts ---------------------------------------------------- */ @font-face { font-family: "Gotham"; src: url("fonts/Gotham-Thin.otf") format("opentype"); font-weight: 100; font-style: normal; } @font-face { font-family: "Gotham"; src: url("fonts/Gotham-ThinItalic.otf") format("opentype"); font-weight: 100; font-style: italic; } @font-face { font-family: "Gotham"; src: url("fonts/Gotham-ExtraLight.otf") format("opentype"); font-weight: 200; font-style: normal; } @font-face { font-family: "Gotham"; src: url("fonts/Gotham-ExtraLightItalic.otf") format("opentype"); font-weight: 200; font-style: italic; } @font-face { font-family: "Gotham"; src: url("fonts/Gotham-Light.otf") format("opentype"); font-weight: 300; font-style: normal; } @font-face { font-family: "Gotham"; src: url("fonts/Gotham-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; } @font-face { font-family: "Gotham"; src: url("fonts/Gotham-Book.otf") format("opentype"); font-weight: 400; font-style: normal; } @font-face { font-family: "Gotham"; src: url("fonts/Gotham-BookItalic.otf") format("opentype"); font-weight: 400; font-style: italic; } @font-face { font-family: "Gotham"; src: url("fonts/Gotham-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; } @font-face { font-family: "Gotham"; src: url("fonts/Gotham-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; } @font-face { font-family: "Gotham"; src: url("fonts/Gotham-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; } @font-face { font-family: "Gotham"; src: url("fonts/Gotham-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; } @font-face { font-family: "Gotham"; src: url("fonts/Gotham-Black.otf") format("opentype"); font-weight: 900; font-style: normal; } @font-face { font-family: "Gotham"; src: url("fonts/Gotham-BlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic; } @font-face { font-family: "Gotham"; src: url("fonts/Gotham-Ultra.otf") format("opentype"); font-weight: 950; font-style: normal; } @font-face { font-family: "Gotham"; src: url("fonts/Gotham-UltraItalic.otf") format("opentype"); font-weight: 950; font-style: italic; } :root { /* --- Core neutrals (the dark stack) --------------------- */ --mk-black: #000000; /* the brand background — pure */ --mk-card: #111111; /* card on black, low elevation */ --mk-card-hi: #1A1A1A; /* card on black, raised */ --mk-line: #222222; /* hairline divider */ --mk-line-strong: #2E2E2E; /* divider on raised card */ --mk-mute: #6B6B6B; /* disabled / least-emphasis */ --mk-text-2: #A8A8A8; /* secondary text */ --mk-text-1: #FFFFFF; /* primary text */ /* --- Brand spectrum (left → right of the gradient) ----- */ --mk-acqua: #00E7FF; --mk-blue-crayola: #2E79FF; --mk-han-purple: #4E34FE; --mk-electric-indigo: #7600FF; --mk-steel-pink: #CE3EBA; --mk-raspberry: #EF1166; --mk-orange: #FF7F00; /* --- The hero gradient -------------------------------- */ /* horizontal flow, used on wordmark, accent lines, active states */ --mk-gradient: linear-gradient( 90deg, #00E7FF 0%, #2E79FF 17%, #4E34FE 33%, #7600FF 50%, #CE3EBA 67%, #EF1166 83%, #FF7F00 100% ); /* Diagonal variant (used on cards, banners, ambient washes) */ --mk-gradient-diag: linear-gradient( 115deg, #00E7FF 0%, #2E79FF 17%, #4E34FE 33%, #7600FF 50%, #CE3EBA 67%, #EF1166 83%, #FF7F00 100% ); /* Radial — for glows / spotlights behind subjects */ --mk-gradient-radial: radial-gradient( 120% 80% at 30% 40%, #7600FF 0%, #4E34FE 28%, #2E79FF 55%, #000000 90% ); /* --- Semantic surface tokens -------------------------- */ --bg: var(--mk-black); --bg-card: var(--mk-card); --bg-card-raised: var(--mk-card-hi); --fg-1: var(--mk-text-1); --fg-2: var(--mk-text-2); --fg-mute: var(--mk-mute); --border-hairline: var(--mk-line); --border-strong: var(--mk-line-strong); --accent: var(--mk-electric-indigo); /* solo-accent fallback */ --accent-2: var(--mk-raspberry); --focus-ring: 0 0 0 1.5px #fff; /* Apply to buttons via `outline: 1.5px solid #fff; outline-offset: 3px;` for the thin-white-offset focus treatment that matches the brand's button states. */ /* --- Status — positive/negative convention. Brand has no green; positive states use Acqua, negative use Raspberry. */ --status-info: var(--mk-acqua); --status-positive: var(--mk-acqua); --status-success: var(--mk-acqua); /* alias of --status-positive */ --status-warn: var(--mk-orange); --status-negative: var(--mk-raspberry); --status-danger: var(--mk-raspberry); /* alias of --status-negative */ /* --- Typography scale --------------------------------- */ --font-display: "Gotham", "Montserrat", system-ui, sans-serif; --font-body: "Gotham", "Montserrat", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-display-2xl: clamp(64px, 9vw, 144px); --fs-display-xl: clamp(48px, 6.5vw, 96px); --fs-display-lg: clamp(40px, 5vw, 72px); --fs-h1: clamp(34px, 3.5vw, 56px); --fs-h2: clamp(28px, 2.6vw, 40px); --fs-h3: clamp(22px, 1.9vw, 28px); --fs-h4: 18px; --fs-eyebrow: 12px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --lh-tight: 0.92; --lh-snug: 1.05; --lh-normal: 1.4; --lh-loose: 1.6; --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-eyebrow: 0.18em; /* --- Spacing & radii ---------------------------------- */ --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; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-pill: 999px; /* --- Elevation (used sparingly — black eats shadows) -- */ --shadow-1: 0 1px 2px rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.4); --shadow-2: 0 10px 30px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.5); /* Brand glow — a controlled rectangular halo hugging the card edge. The 2px spread keeps the shape rectangular; 24px blur softens it. Visible, but it doesn't bleed across the background. */ --glow-indigo: 0 0 24px 2px rgba(118, 0, 255, 0.38); --glow-pink: 0 0 24px 2px rgba(206, 62, 186, 0.36); --glow-acqua: 0 0 24px 2px rgba(0, 231, 255, 0.32); --glow-spectrum: 0 0 0 1px rgba(255,255,255,.05), 0 0 24px 1px rgba(118,0,255,.28), 0 0 36px 0 rgba(239,17,102,.18); /* --- Motion ------------------------------------------- */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in: cubic-bezier(.55, 0, .68, 0); --ease-inout: cubic-bezier(.65, 0, .35, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; } /* ============================================================ SEMANTIC ELEMENT STYLES Drop a `` to this file on any document and base text styles match the Makali system out of the box. ============================================================ */ html, body { background: var(--bg); color: var(--fg-1); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 900; /* Gotham Black — the default for headings */ color: var(--fg-1); letter-spacing: var(--tracking-display); line-height: var(--lh-tight); text-transform: uppercase; margin: 0 0 .4em; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); } h4 { font-size: var(--fs-h4); letter-spacing: 0.04em; } p { margin: 0 0 1em; color: var(--fg-2); line-height: var(--lh-loose); } strong, b { color: var(--fg-1); font-weight: 700; } a { color: var(--fg-1); text-decoration: none; border-bottom: 1px solid var(--mk-electric-indigo); transition: opacity var(--dur-fast) var(--ease-out); } a:hover { opacity: .8; } small { font-size: var(--fs-caption); color: var(--fg-2); } code, pre { font-family: var(--font-mono); font-size: 0.92em; } code { background: var(--bg-card); padding: .15em .4em; border-radius: 6px; color: var(--mk-acqua); } hr { border: 0; height: 1px; background: var(--border-hairline); margin: var(--space-6) 0; } /* ============================================================ UTILITY CLASSES — gradient text, eyebrows, etc. ============================================================ */ .mk-gradient-text { background: var(--mk-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .mk-gradient-bg { background: var(--mk-gradient); } .mk-gradient-bg-diag { background: var(--mk-gradient-diag); } /* Gradient border, achieved with a 1-2px gradient ring around a dark card */ .mk-gradient-border { position: relative; background: var(--bg-card); border-radius: var(--radius-lg); isolation: isolate; } .mk-gradient-border::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--mk-gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } .mk-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-2); } .mk-display-2xl { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-display-2xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); text-transform: uppercase; } .mk-display-xl { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); text-transform: uppercase; } .mk-display-lg { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-display-lg); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); text-transform: uppercase; } /* The 1px gradient hairline used as section dividers / accent lines */ .mk-accent-line { display: block; height: 2px; background: var(--mk-gradient); border-radius: 999px; }