/* ============================================================================ Mindrops Digital Design System v2.4 — design tokens (single source of truth) ---------------------------------------------------------------------------- Edit values HERE to restyle the site. Nothing else should hold a raw color, type size, spacing, radius, shadow, z-index or motion value. Load order: this file BEFORE every other stylesheet. - Site pages: manager.php, before css/mindrops-2026.css. - Ad landing pages (/lp/): includes/landing/head.php inlines this file, then lp/assets/css/lp-critical.css, ahead of the deferred lp/assets/css/lp.css. - Blog: via mr_head (same as site pages). Layers 1. Spec tokens — names and values exactly as in the v2.4 spec 2. Spec aliases — the second naming set from spec section 6 3. Scale tokens — type / space / radius / shadow / motion / z-index 4. Site vocabulary — the short names the existing CSS already uses (--bg, --i, --m ...), re-pointed at layers 1-3 ========================================================================== */ :root{ /* ---- 1. SPEC TOKENS (v2.4 sections 2-4) -------------------------------- */ /* Palette: black, white and greys (~97%) + cobalt (2-3%, actions only). Chosen in the theme lab ("Mono + cobalt, sharp"). Light sections (.mr-light) swap these values at the bottom of this file. */ /* Neutrals */ --surface-root:#000000; --surface-dim:#050505; --surface-container-low:#0B0B0B; --surface-container-mid:#141414; --surface-container-high:#1F1F1F; --stroke-subtle:#242424; /* solid hairlines read crisper than translucent white */ --stroke-highlight:#3D3D3D; --text-primary:#FFFFFF; --text-secondary:#B3B3B3; --text-muted:#7A7A7A; /* Cobalt: primary actions, focus, the one coloured moment per view */ --primary-cobalt:#2563EB; --primary-cobalt-hover:#1D4ED8; --primary-cobalt-subtle:rgba(37,99,235,.10); --primary-cobalt-glow:rgba(37,99,235,0); /* no glow: sharp edges */ /* Former cyan/azure accent slots, now neutral (white / light grey) */ --telemetry-cyan:#FFFFFF; --telemetry-azure:#E5E5E5; --telemetry-glow:rgba(255,255,255,0); --telemetry-subtle:rgba(255,255,255,.06); /* Illustration saturation (0 = greyscale art) and film-grain strength */ --art-saturation:0; --grain-opacity:0; /* Typefaces */ --font-editorial:'Newsreader',Georgia,serif; --font-sans:'IBM Plex Sans',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; /* Radii */ --radius-btn:4px; /* sharp: buttons and inputs */ /* Secondary (outline) buttons: a light 1px line mixed from the local text colour, so it suits dark and light sections alike — quiet at rest, brighter with a faint fill on hover/focus. (Sub-pixel hairlines aren't used: Chrome rounds them back up to 1px, so only Safari would differ.) */ --btn-line:20%; --btn-line-hover:64%; --btn-fill-hover:6%; --btn-border:1px; --radius-card:6px; /* bento cards, content modules */ --radius-shell:10px; /* floating shell, dialogs */ --radius-pill:9999px; --radius-sm:3px; --radius-md:6px; --radius-xs:2px; /* Spacing (8pt grid) */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-20:80px; --section-pad:clamp(64px,8vw,80px); /* spec: page section spacing 64-80px */ } /* Layers 2-4 are derived from layer 1. They are declared on .mr-light too, so a light section recomputes them from its own palette (custom properties resolve var() where they are declared, not where they are used). */ :root,.mr-light,.mr-skin .mr-main:not(:has(.mr-light))>section:is(.mr-section,.mr-section--tight):nth-of-type(even),.mr-skin main>section.os-section:nth-of-type(even){ /* ---- 2. SPEC ALIASES (section 6 names) --------------------------------- */ --bg-root:var(--surface-root); --bg-dim:var(--surface-dim); --surface-low:var(--surface-container-low); --surface-mid:var(--surface-container-mid); --surface-high:var(--surface-container-high); --border-subtle:var(--stroke-subtle); --border-highlight:var(--stroke-highlight); --text-title:var(--text-primary); --text-body:var(--text-secondary); --color-primary:var(--primary-cobalt); --color-primary-hover:var(--primary-cobalt-hover); --color-primary-subtle:var(--primary-cobalt-subtle); --color-telemetry:var(--telemetry-cyan); --color-telemetry-azure:var(--telemetry-azure); --color-telemetry-subtle:var(--telemetry-subtle); --radius-btn-lg:var(--radius-md); /* ---- 3. SCALE TOKENS --------------------------------------------------- */ /* Type ramp (static) */ --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:15px; --fs-lg:16px; --fs-xl:18px; --fs-2xl:20px; --fs-3xl:24px; --fs-4xl:32px; --fs-5xl:40px; /* Button labels: one size and weight for every button on site pages and /lp/ (compact = header CTA, cookie banner); never smaller than the surrounding body copy */ --fs-btn:16px; --fs-btn-sm:15px; --fw-btn:600; /* Type styles (spec 3.2) */ --fs-display:clamp(48px,6vw,64px); --lh-display:1.05; --ls-display:-.03em; --fs-h1:clamp(32px,4vw,40px); --lh-h1:1.15; --ls-h1:-.02em; --fs-h2:clamp(20px,2.4vw,24px); --lh-h2:1.25; --ls-h2:-.01em; --fs-h3:clamp(16px,1.6vw,18px); --lh-h3:1.3; --ls-h3:0; --fs-body-lg:18px; --fs-body:16px; --lh-body:1.6; --fs-caption:14px; --lh-caption:1.4; --fs-code:13px; --lh-code:1.4; /* Elevation */ --shadow-sm:0 8px 24px color-mix(in srgb,var(--black) 40%,transparent); --shadow-md:0 18px 44px color-mix(in srgb,var(--black) 45%,transparent); --shadow-lg:0 30px 80px color-mix(in srgb,var(--black) 70%,transparent); --shadow-cta:0 0 20px var(--primary-cobalt-glow); --shadow-cta-hover:0 0 28px color-mix(in srgb,var(--primary-cobalt) 40%,transparent); --shadow-focus-ring:0 0 0 3px color-mix(in srgb,var(--text-primary) 20%,transparent); /* Motion */ --ease:cubic-bezier(.22,1,.36,1); --dur-fast:.2s; --dur-base:.3s; --dur-slow:.4s; /* Layout and layering */ --nav-h:74px; --maxw:1180px; --z-nav:1000; --z-banner:1190; --z-modal:1200; --z-grain:9999; /* ---- 4. SITE VOCABULARY (used by css/mindrops-2026.css) ---------------- */ --bg:var(--surface-root); --bg-2:var(--surface-dim); --surface:var(--surface-container-low); --surface-2:var(--surface-container-mid); --surface-3:var(--surface-container-high); --border:var(--stroke-subtle); --border-soft:color-mix(in srgb,var(--text-primary) 4%,transparent); --text:var(--text-primary); --text-2:var(--text-secondary); --text-3:var(--text-muted); --text-4:var(--text-muted); /* Cobalt is reserved for primary action buttons (--grad, --primary-cobalt*). Every other "accent" (outline buttons, focus, hover states, rules, art) is neutral. */ --ac:var(--text-primary); --ac-2:var(--telemetry-azure); /* link hover */ --ac-soft:color-mix(in srgb,var(--text-primary) 8%,transparent); --ac-border:var(--text-primary); /* outline buttons, focus, input focus */ --ac-glow:transparent; --on-primary:#FFFFFF; /* text on cobalt */ --grad:var(--primary-cobalt); /* primary button fill: the only blue on the site */ /* Brand palette slots (previously indigo / magenta / amber), now neutral */ --i:var(--text-secondary); --m:var(--telemetry-cyan); --a:var(--telemetry-azure); --violet:var(--text-muted); --i-glow:transparent; --m-glow:var(--telemetry-glow); --grad-brand:linear-gradient(110deg,var(--text-primary) 0%,var(--text-muted) 100%); /* Cards and stat tiles: hairline at rest, lighter hairline on hover */ --card-border:var(--stroke-subtle); --card-border-hover:var(--text-secondary); --card-spotlight:color-mix(in srgb,var(--text-primary) 6%,transparent); /* Illustration hues. Hero, card and AI art are drawn in HSL with per-page hues (--h, --hero-h, set in page data in the old 232-338 violet/magenta range). Each is remapped as: center + (hue - origin) * spread, which lands the art in the spec's cyan-to-cobalt band (about 190-230). Change these three values to re-tint all illustration art at once. */ --art-hue-center:212; --art-hue-origin:280; --art-hue-spread:.3; /* Photographic hero art (ad landing pages) is tinted into the same band: a color-blend layer of --photo-tint at --photo-tint-strength. */ --photo-tint:var(--primary-cobalt); --photo-tint-strength:.55; /* Status */ --success:#22C55E; --warning:#FFC83D; --danger:#EF4444; /* Third-party brand colors (intentionally off-palette) */ --brand-linkedin:#0A66C2; --brand-facebook:#1877F2; --brand-instagram:#E4405F; --brand-whatsapp:#25D366; /* Absolutes and light "paper" surfaces */ --black:#000000; --white:#FFFFFF; --paper:#F8F8F8; --paper-2:#EDEDED; /* Typography and shape under the names the site CSS already uses */ --display:var(--font-sans); --body:var(--font-sans); --mono:var(--font-mono); --r:var(--radius-card); --r-lg:var(--radius-shell); --r-pill:var(--radius-pill); --r-sm:var(--radius-sm); --r-xs:var(--radius-xs); } /* ---- LIGHT SECTIONS ------------------------------------------------------ Add .mr-light to a section to flip it to white with black text. Same cobalt, radii, type and spacing as the dark sections; only the palette changes. Use one light stretch per page (reading/proof content); keep hero, CTA bands and footer dark. The full-bleed background lives in css/mindrops-2026.css. On homepage-style pages (.mr-skin) without hand-placed light sections, every second content section flips automatically. */ .mr-light,.mr-skin .mr-main:not(:has(.mr-light))>section:is(.mr-section,.mr-section--tight):nth-of-type(even),.mr-skin main>section.os-section:nth-of-type(even){ --surface-root:#FFFFFF; --surface-dim:#F7F7F7; --surface-container-low:#F7F7F7; --surface-container-mid:#EFEFEF; --surface-container-high:#E5E5E5; --stroke-subtle:#E3E3E3; --stroke-highlight:#C9C9C9; --text-primary:#0A0A0A; --text-secondary:#404040; --text-muted:#6B6B6B; --telemetry-cyan:#0A0A0A; --telemetry-azure:#404040; --telemetry-glow:rgba(0,0,0,0); --telemetry-subtle:rgba(0,0,0,.05); --shadow-sm:0 6px 18px rgba(0,0,0,.06); --shadow-md:0 14px 36px rgba(0,0,0,.08); --shadow-lg:0 24px 60px rgba(0,0,0,.10); }