/* ============================================================ Maximeta — Colors & Type The brand is a hub de soluções para e-commerce. It runs on a dark, atmospheric stage: deep aubergine night lit by magenta and electric-purple glow. Type is thin, geometric, optimistic — a quiet stage for loud numbers. ============================================================ */ /* -------- Webfonts (Google Fonts substitutes — see README) ---- Display : Outfit (geometric, round, supports thin weight) Body : Outfit (same family, mid weights — keeps the page coherent and saves a font request) Mono / numerals: JetBrains Mono — used for stat labels, page numbers, and any tabular figures. The brand wordmark uses a custom rotated-glyph family that we don't ship; the logo lives as an SVG asset. */ @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ── Brand color: the night palette ─────────────────────── */ --mx-night: #0B0410; /* page floor — almost-black aubergine */ --mx-night-2: #160820; /* primary surface */ --mx-night-3: #210B30; /* card lift */ --mx-night-4: #2E1342; /* hover, divider on dark */ --mx-night-edge: #3A1A52; /* hairline on dark */ --mx-aubergine: #2A0B3F; --mx-purple-deep: #4D0F75; --mx-purple: #7A14B8; /* mid glow */ --mx-purple-bright: #B12BFF; /* lit edge of a glow */ --mx-magenta: #E40DDB; /* primary accent — the highlight word */ --mx-magenta-hot: #FF1AF0; /* hottest stop */ --mx-magenta-soft: #FF6BFF; /* hover state, glow tint */ /* Atmospheric gradients — the deck's "lighting" */ --mx-glow-radial: radial-gradient(60% 80% at 8% 0%, rgba(177, 43, 255, 0.55) 0%, rgba(177, 43, 255, 0) 60%), radial-gradient(50% 60% at 90% 50%, rgba(228, 13, 219, 0.40) 0%, rgba(228, 13, 219, 0) 60%), radial-gradient(70% 70% at 60% 110%, rgba(122, 20, 184, 0.55) 0%, rgba(122, 20, 184, 0) 65%); --mx-stage-bg: radial-gradient(120% 90% at 50% 50%, #1A0826 0%, #0B0410 75%); --mx-gradient-line: linear-gradient(90deg, transparent, var(--mx-magenta) 50%, transparent); --mx-gradient-fill: linear-gradient(135deg, #4D0F75 0%, #B12BFF 50%, #FF1AF0 100%); /* ── Neutrals on the dark stage ─────────────────────────── */ --mx-fg-1: #FFFFFF; /* primary text */ --mx-fg-2: rgba(255, 255, 255, 0.78); /* body */ --mx-fg-3: rgba(255, 255, 255, 0.55); /* muted */ --mx-fg-4: rgba(255, 255, 255, 0.32); /* metadata */ --mx-line: rgba(255, 255, 255, 0.10); /* hairline */ --mx-line-strong: rgba(255, 255, 255, 0.18); /* Glass cards — the MOTOR pillar tiles, the body slabs */ --mx-glass: rgba(255, 255, 255, 0.04); --mx-glass-2: rgba(255, 255, 255, 0.07); --mx-glass-edge: rgba(255, 255, 255, 0.14); --mx-glass-blur: blur(18px) saturate(140%); /* ── Semantic ───────────────────────────────────────────── */ --mx-success: #2EE6A3; --mx-warning: #FFB72E; --mx-danger: #FF5470; --mx-info: var(--mx-purple-bright); /* ── Foreground / background tokens ─────────────────────── */ --mx-bg: var(--mx-night); --mx-bg-elev: var(--mx-night-2); --mx-bg-card: var(--mx-glass); --mx-bg-invert: #FFFFFF; --mx-fg-on-brand: #0B0410; --mx-fg-link: var(--mx-magenta-soft); --mx-border: var(--mx-line); --mx-border-strong: var(--mx-line-strong); /* ── Type families ─────────────────────────────────────── */ --mx-font-display: "Outfit", "Helvetica Neue", system-ui, sans-serif; --mx-font-body: "Outfit", "Helvetica Neue", system-ui, sans-serif; --mx-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* ── Type scale — slide-deck generous ───────────────────── */ --mx-step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem); /* caption */ --mx-step-0: 1rem; /* body */ --mx-step-1: clamp(1.05rem, 1rem + 0.3vw, 1.15rem); --mx-step-2: clamp(1.25rem, 1.1rem + 0.6vw, 1.45rem); --mx-step-3: clamp(1.6rem, 1.35rem + 1vw, 2rem); --mx-step-4: clamp(2rem, 1.6rem + 1.7vw, 2.7rem); --mx-step-5: clamp(2.6rem, 2rem + 2.6vw, 3.7rem); --mx-step-6: clamp(3.4rem, 2.5rem + 3.8vw, 5rem); --mx-step-7: clamp(4.4rem, 3rem + 5.6vw, 6.8rem); /* ── Spacing — 4px base ─────────────────────────────────── */ --mx-s-0: 0; --mx-s-1: 4px; --mx-s-2: 8px; --mx-s-3: 12px; --mx-s-4: 16px; --mx-s-5: 20px; --mx-s-6: 24px; --mx-s-7: 32px; --mx-s-8: 40px; --mx-s-9: 56px; --mx-s-10: 72px; --mx-s-11: 96px; --mx-s-12: 128px; /* ── Radii ──────────────────────────────────────────────── */ --mx-r-0: 0; /* the wordmark is razor-sharp */ --mx-r-1: 4px; --mx-r-2: 10px; --mx-r-3: 14px; /* MOTOR pillar tiles */ --mx-r-4: 20px; /* body slab cards */ --mx-r-5: 28px; --mx-r-pill: 999px; /* CTAs */ /* ── Shadows + glows ───────────────────────────────────── */ --mx-shadow-1: 0 1px 2px rgba(0,0,0,0.4); --mx-shadow-2: 0 12px 28px rgba(0,0,0,0.45); --mx-shadow-3: 0 30px 80px rgba(0,0,0,0.55); --mx-glow-magenta: 0 0 0 1px rgba(228, 13, 219, 0.30), 0 14px 60px rgba(228, 13, 219, 0.35); --mx-glow-purple: 0 0 0 1px rgba(177, 43, 255, 0.28), 0 14px 60px rgba(177, 43, 255, 0.30); /* ── Motion ─────────────────────────────────────────────── */ --mx-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --mx-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --mx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --mx-dur-1: 120ms; --mx-dur-2: 200ms; --mx-dur-3: 320ms; --mx-dur-4: 480ms; /* ── Light-surface aliases (used by reference card specimens) ─ The brand runs on a dark stage, but a handful of design-system preview cards demo type / spacing / form chrome on white. Keep these names so those cards render; production work should reach for the dark-stage tokens above. */ --mx-surface: #FFFFFF; --mx-surface-2: #FAF7FB; --mx-surface-3: #F4EDF7; --mx-line-2: #E7E1EC; --mx-ink: #0E0011; --mx-ink-2: #2A1E33; --mx-ink-3: #5A4D63; --mx-ink-4: #8E8395; --mx-magenta-glow: var(--mx-magenta-soft); --mx-gradient: var(--mx-gradient-fill); --mx-gradient-soft: linear-gradient(135deg, #FF6BFF 0%, #B12BFF 60%, #7A14B8 100%); /* ── Slide layout ──────────────────────────────────────── */ --mx-slide-w: 1920px; --mx-slide-h: 1080px; --mx-slide-pad: 80px; /* inset for header chrome + content */ --mx-max-w: 1240px; --mx-gutter: clamp(20px, 4vw, 56px); } /* ============================================================ Defaults — drop colors_and_type.css into a page and the stage is set: dark, lit, with the brand voice. ============================================================ */ html, body { font-family: var(--mx-font-body); color: var(--mx-fg-1); background: var(--mx-bg); font-size: var(--mx-step-0); line-height: 1.55; font-weight: 300; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--mx-magenta); color: var(--mx-fg-1); } .mx-stage { background: var(--mx-stage-bg); position: relative; isolation: isolate; } .mx-stage::before { content: ""; position: absolute; inset: 0; background: var(--mx-glow-radial); pointer-events: none; z-index: -1; } /* ── Display + headings — thin, geometric, generous ──────── */ .mx-display, .mx-h1, .mx-h2, .mx-h3, .mx-h4 { font-family: var(--mx-font-display); letter-spacing: -0.02em; line-height: 1.04; font-weight: 300; text-wrap: balance; color: var(--mx-fg-1); margin: 0; } .mx-display { font-size: var(--mx-step-7); font-weight: 200; letter-spacing: -0.03em; } .mx-h1 { font-size: var(--mx-step-6); font-weight: 200; } .mx-h2 { font-size: var(--mx-step-5); font-weight: 300; line-height: 1.08; } .mx-h3 { font-size: var(--mx-step-4); font-weight: 300; line-height: 1.12; letter-spacing: -0.015em; } .mx-h4 { font-size: var(--mx-step-3); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; } .mx-h5 { font-family: var(--mx-font-body); font-size: var(--mx-step-2); font-weight: 500; line-height: 1.3; margin: 0; color: var(--mx-fg-1); } .mx-eyebrow { font-family: var(--mx-font-display); font-size: var(--mx-step--1); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mx-magenta); display: inline-block; } .mx-lead { font-size: var(--mx-step-2); line-height: 1.45; color: var(--mx-fg-2); text-wrap: pretty; font-weight: 300; } .mx-p { font-size: var(--mx-step-0); line-height: 1.6; color: var(--mx-fg-2); text-wrap: pretty; margin: 0; font-weight: 300; } .mx-p--strong { color: var(--mx-fg-1); font-weight: 400; } .mx-p--muted { color: var(--mx-fg-3); } .mx-caption { font-size: var(--mx-step--1); line-height: 1.45; color: var(--mx-fg-3); letter-spacing: 0.02em; } .mx-mono { font-family: var(--mx-font-mono); font-size: 0.9em; letter-spacing: -0.01em; } .mx-link { color: var(--mx-fg-link); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--mx-dur-2) var(--mx-ease-out); } .mx-link:hover { color: var(--mx-magenta-hot); } /* The signature accent: highlight the last word(s) of a headline */ .mx-accent { color: var(--mx-magenta); } /* Glass card — the deck's translucent slab */ .mx-glass { background: var(--mx-glass); border: 1px solid var(--mx-glass-edge); border-radius: var(--mx-r-4); backdrop-filter: var(--mx-glass-blur); -webkit-backdrop-filter: var(--mx-glass-blur); }