/* ============================================================
MSHRM 2.0 — Website Design System
colors_and_type.css
Premium digital growth company. Black hero, light body,
hot-pink action. Cinematic desktop / vertical-product mobile.
============================================================ */
/* ---- Fonts (Google Fonts CDN) ----------------------------------
Display : Big Shoulders Display (bold condensed, all-caps headlines)
Body : Geist (clean, highly readable sans)
Mono : Geist Mono (eyebrows, labels, sequences, technical)
Accent : Newsreader (italic) (readable luxury serif emphasis word)
Import in HTML :
------------------------------------------------------------------ */
/* Pull the real @font-face rules for all four families into the CSS
closure (same source as the HTML ). This makes the stylesheet
self-sufficient and lets the design-system compiler see a concrete
@font-face for Big Shoulders Display, Geist, Geist Mono & Newsreader.
When the user uploads local font files, these can be replaced with
local @font-face src declarations. */
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700;800;900&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@1,6..72,400;1,6..72,500&display=swap");
:root {
/* ---------- BRAND COLOR ---------- */
/* Primary action — hot pink. The single most important colour.
Buttons, FREE CONSULTATION CTAs, proof numbers, ticker accents,
selected states, menu CTA highlights, important action moments. */
--pink-500: #FF005E; /* primary */
--pink-600: #DB0050; /* hover / pressed (darker) */
--pink-400: #FF3D81; /* lighter, on-dark hover lift */
--pink-100: #FFE0EC; /* pink tint surface on light */
/* Supporting accents — used as meaning, never decoration.
One accent per context; never more than one accent in a section. */
--ai-500: #8335C1; /* AI, future systems, product intelligence */
--ai-100: #EFE4FA;
--craft-500:#FF6600; /* brand, creative, craft (the mushroom glow) */
--craft-100:#FFE9D6;
--data-500: #008490; /* precision, data, UX, systems (the rim light) */
--data-100: #D6F0F1;
/* ---------- INK (dark surfaces) ---------- */
--ink-900: #0A0B0D; /* hero / header / menu / footer base — true near-black */
--ink-850: #0F1115; /* dark section base */
--ink-800: #15171C; /* raised dark surface / card on black */
--ink-700: #1E2127; /* dark card / input on black */
--ink-600: #2A2E36; /* hairline / border on black */
--ink-500: #3A3F49; /* stronger border on black */
/* ---------- PAPER (light surfaces) ---------- */
--paper: #FFFFFF; /* primary light section */
--paper-2: #F6F5F3; /* warm off-white alternating section */
--paper-3: #ECEAE6; /* sunken light surface */
--line-100: #ECEAE6; /* hairline on light */
--line-200: #DBD8D2; /* border on light */
--line-300: #C4C0B8; /* stronger border / divider */
/* ---------- TEXT ---------- */
--fg-on-dark: #FFFFFF; /* primary text on ink */
--fg-on-dark-2: #B7BCC6; /* secondary text on ink */
--fg-on-dark-3: #767C88; /* tertiary / captions on ink */
--fg-on-light: #0A0B0D; /* primary text on paper */
--fg-on-light-2: #4A4E57; /* secondary text on paper */
--fg-on-light-3: #888D96; /* tertiary / captions on paper */
/* ---------- TYPE FAMILIES ---------- */
--font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
--font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
--font-accent: "Newsreader", Georgia, "Times New Roman", serif; /* italic only */
/* ---------- TYPE SCALE (desktop / fluid) ----------
Display uses tight leading + condensed weight 800.
Body uses 400–500, generous leading for readability. */
--t-display-xl: clamp(3.5rem, 8vw, 8.5rem); /* hero headline */
--t-display-l: clamp(2.75rem, 5.5vw, 5rem); /* section opener */
--t-display-m: clamp(2rem, 3.6vw, 3.25rem); /* sub-section */
--t-h1: clamp(2rem, 3.2vw, 3rem);
--t-h2: clamp(1.6rem, 2.4vw, 2.25rem);
--t-h3: 1.5rem;
--t-body-lg: 1.25rem; /* lead paragraph */
--t-body: 1.0625rem; /* base body — never below this on desktop */
--t-body-sm: 0.9375rem;
--t-label: 0.75rem; /* mono eyebrow / label (uppercase, tracked) */
--t-proof: clamp(3rem, 7vw, 6.5rem); /* count-up proof numbers */
/* ---------- TRACKING ---------- */
--track-label: 0.18em; /* wide-tracked uppercase mono labels — signature */
--track-display: -0.01em;
/* ---------- SPACING (8px base, premium rhythm) ---------- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
--sp-9: 96px; --sp-10: 128px; --sp-11: 160px; --sp-12: 200px;
/* Section vertical padding — controlled, expansive. */
--section-y-desktop: 160px;
/* Mobile section padding in rem so it scales with the fluid mobile root
(16px@390 → 19.692px@480). Desktop root is fixed 16px, so 2.75rem = 44px
there — identical to before. */
--section-y-mobile: 2.75rem;
/* Page gutters — distinct per experience. */
--gutter-desktop: 64px;
--gutter-mobile: 20px;
--maxw: 1320px;
/* ---------- RADII ---------- */
/* Radii in rem so mobile card/media radii scale with the fluid mobile root.
Desktop root is fixed 16px → these equal 4/8/14/22px there (unchanged). */
--r-xs: 0.25rem;
--r-sm: 0.5rem;
--r-md: 0.875rem; /* default card */
--r-lg: 1.375rem; /* large media / mobile cards */
--r-pill: 999px;/* buttons, chips, ticker */
/* ---------- SHADOWS / ELEVATION ----------
Light sections: soft, low, neutral — never heavy.
Pink action shadow used ONLY on primary CTA to make it lift. */
--shadow-sm: 0 1px 2px rgba(10,11,13,.06), 0 1px 1px rgba(10,11,13,.04);
--shadow-md: 0 8px 24px -8px rgba(10,11,13,.14);
--shadow-lg: 0 28px 64px -24px rgba(10,11,13,.28);
--shadow-pink: 0 10px 30px -8px rgba(255,0,94,.45);
--shadow-darklift: 0 24px 60px -20px rgba(0,0,0,.7);
/* ---------- MOTION ----------
Purposeful only. One signature ease. No bounce on content. */
--ease: cubic-bezier(.22,.61,.36,1); /* standard ease-out */
--ease-inout: cubic-bezier(.65,.05,.36,1);
--dur-fast: 160ms;
--dur: 280ms;
--dur-slow: 560ms;
--ticker-speed: 38s; /* capability ticker loop */
}
/* ============================================================
FLUID MOBILE ROOT
The approved mobile design is authored at exactly 390px and is correct
there. Above 390px the device is wider but the rem-based composition did
not grow, so it read ~9% too small. Scale the ROOT font-size with viewport
width across the mobile band so every rem (typography AND the px→rem-
converted spatial geometry) grows uniformly with the device:
390px → 16px (×1.000) 430px → 17.641px (×1.103) 480px → 19.692px (×1.231)
4.1025641026vw = 16 / 390 * 100. Floor 16px keeps ≤390 at the approved
basis (no shrink, natural reflow); ceil 19.6923076923px (= 480/390×16)
freezes the scale at the 480px shell cap so it never enlarges indefinitely.
Scoped to the mobile experience via the exact JS breakpoint (max-width
1199.98px = MOBILE_MQ). Desktop (≥1200px) keeps the browser-default 16px
root, so all desktop rem values and the px→rem-converted tokens render at
their original pixel sizes — desktop is unchanged. */
@media (max-width: 1199.98px) {
:root { font-size: clamp(16px, 4.1025641026vw, 19.6923076923px); }
}
/* ============================================================
SEMANTIC ELEMENT STYLES
Apply via classes; map onto real tags in production.
============================================================ */
/* Eyebrow / kicker — the signature wide-tracked mono label. */
.ds-eyebrow {
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* Display headlines — condensed, tight, commanding. */
.ds-display-xl { font-family: var(--font-display); font-weight: 800; font-size: var(--t-display-xl);
line-height: .92; letter-spacing: var(--track-display); text-transform: uppercase; }
.ds-display-l { font-family: var(--font-display); font-weight: 800; font-size: var(--t-display-l);
line-height: .94; letter-spacing: var(--track-display); text-transform: uppercase; }
.ds-display-m { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-m);
line-height: .98; text-transform: uppercase; }
.ds-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h1); line-height: 1; text-transform: uppercase; }
.ds-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h2); line-height: 1.02; text-transform: uppercase; }
.ds-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.01em; }
/* Body — clean sans, comfortable measure & leading. */
.ds-lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body-lg);
line-height: 1.55; max-width: 60ch; }
.ds-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body);
line-height: 1.65; max-width: 68ch; }
.ds-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body-sm); line-height: 1.6; }
/* Proof number — heavy display, optional gradient ink. */
.ds-proof { font-family: var(--font-display); font-weight: 900; font-size: var(--t-proof);
line-height: .85; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* The readable luxury italic accent — short emphasis words ONLY.
Newsreader italic reads cleanly even at small sizes on mobile. */
.ds-accent { font-family: var(--font-accent); font-style: italic; font-weight: 500;
color: var(--pink-500); text-transform: none; letter-spacing: 0; }
/* ============================================================
PRIMARY CTA BUTTON — hot pink, the action moment.
============================================================ */
.ds-btn {
display: inline-flex; align-items: center; gap: 0.625rem;
font-family: var(--font-mono); font-weight: 600; font-size: 0.8125rem;
letter-spacing: var(--track-label); text-transform: uppercase;
padding: 1.125rem 1.75rem; border-radius: var(--r-pill);
border: 0; cursor: pointer; text-decoration: none;
transition: transform var(--dur-fast) var(--ease),
background var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
min-height: 2.75rem; /* mobile hit target floor (44px@desktop root) */
}
.ds-btn--primary { background: var(--pink-500); color: #fff; box-shadow: var(--shadow-pink); }
.ds-btn--primary:hover { background: var(--pink-600); transform: translateY(-2px); }
.ds-btn--primary:active { transform: translateY(0) scale(.985); }
/* Secondary — outline, adapts to surface. */
.ds-btn--ghost-dark { background: transparent; color: #fff; border: 1px solid var(--ink-500); }
.ds-btn--ghost-dark:hover { border-color: #fff; }
.ds-btn--ghost-light { background: transparent; color: var(--fg-on-light); border: 1px solid var(--line-300); }
.ds-btn--ghost-light:hover { border-color: var(--fg-on-light); }
/* ============================================================
SURFACE / SECTION HELPERS
============================================================ */
.ds-on-dark { background: var(--ink-900); color: var(--fg-on-dark); }
.ds-on-light { background: var(--paper); color: var(--fg-on-light); }
.ds-on-paper2{ background: var(--paper-2); color: var(--fg-on-light); }
/* Card on light — soft, low shadow, hairline, generous radius. */
.ds-card {
background: var(--paper); border: 1px solid var(--line-100);
border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
/* Card on dark — raised ink, subtle border, no glow unless action. */
.ds-card-dark {
background: var(--ink-800); border: 1px solid var(--ink-600);
border-radius: var(--r-md);
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}