/* ============================================================ R-EqualsMe — colors_and_type.css Premium dark creative studio · Accent #FF4FAD · Grey #95989A Design with memory. Built from meaning. ============================================================ */ /* Fonts are loaded via Google Fonts — see fonts/README.md for details. If embedding locally, replace the @import below with @font-face rules pointing at files in /fonts. */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&family=Space+Mono:wght@400;700&display=swap'); /* ── RAW TOKENS ─────────────────────────────────────────── */ :root { /* Brand */ --rem-pink: #FF4FAD; /* secondary brand color / main CTA */ --rem-cyan: #77C0F6; /* accent support color */ --rem-pink-hover: #FF72BD; --rem-pink-dim: rgba(255, 79, 173, 0.15); --rem-pink-glow: rgba(255, 79, 173, 0.35); --rem-grey: #95989A; /* brand neutral (cool support) */ /* Dark scale — deep, moody, matte */ --rem-ink-000: #050505; /* base canvas */ --rem-ink-050: #0A0A0A; /* section alt */ --rem-ink-100: #0F0F0F; /* card */ --rem-ink-150: #141414; /* card hover */ --rem-ink-200: #1A1A1A; /* raised */ --rem-ink-300: #242424; /* stroke strong */ /* Foreground */ --rem-white: #F0F0F0; /* primary text */ --rem-neutral: #888888; /* secondary text */ --rem-dim: #4A4A4A; /* tertiary / meta */ --rem-faint: #2E2E2E; /* dividers */ /* Borders */ --rem-border: rgba(255, 255, 255, 0.06); --rem-border-strong: rgba(255, 255, 255, 0.12); --rem-border-accent: rgba(255, 79, 173, 0.22); /* Type families */ --font-display: 'Bebas Neue', 'Impact', 'Oswald', sans-serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace; /* Type scale */ --fs-mono-xs: 0.62rem; /* 10px — tiny labels */ --fs-mono-sm: 0.68rem; /* 11px — section labels */ --fs-body-xs: 0.75rem; /* 12px — meta / copyright */ --fs-body-sm: 0.85rem; /* 14px */ --fs-body: 1rem; /* 16px — body */ --fs-body-lg: 1.1rem; /* 18px — emphasis body */ --fs-display-sm: 1.6rem; /* 26px — card titles */ --fs-display-md: 2.2rem; /* 35px — sub headlines */ --fs-display-lg: clamp(2.4rem, 4.5vw, 3.8rem); /* section headlines */ --fs-display-xl: clamp(3.8rem, 7vw, 6.5rem); /* hero */ --fs-display-2xl: clamp(3.5rem, 8vw, 7rem); /* page hero */ /* Spacing (8pt-ish grid) */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ --space-8: 3rem; /* 48 */ --space-9: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ --space-11: 7rem; /* 112 — section vertical */ /* Radii */ --radius-sm: 6px; /* inputs, tight chips */ --radius-md: 12px; /* cards */ --radius-lg: 20px; /* panels */ --radius-pill: 50px; /* buttons, tags */ /* Shadows / glows — restrained; accent glow is the only colored shadow */ --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 12px 40px rgba(0, 0, 0, 0.35); --shadow-raise: 0 8px 36px rgba(0, 0, 0, 0.5); --shadow-accent: 0 8px 36px var(--rem-pink-glow); /* Motion */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emph: cubic-bezier(0.2, 0.7, 0, 1); --dur-fast: 0.18s; --dur-std: 0.3s; --dur-slow: 0.6s; /* Layout */ --container-max: 1240px; --container-pad: clamp(1.25rem, 5vw, 3.5rem); --header-h: 72px; /* ── SEMANTIC TOKENS ─────────────────────────────────── */ --bg: var(--rem-ink-000); --bg-alt: var(--rem-ink-050); --bg-card: var(--rem-ink-100); --bg-card-hover: var(--rem-ink-150); --bg-raised: var(--rem-ink-200); --fg: var(--rem-white); --fg-secondary: var(--rem-neutral); --fg-tertiary: var(--rem-dim); --fg-accent: var(--rem-pink); --stroke: var(--rem-border); --stroke-strong: var(--rem-border-strong); --stroke-accent: var(--rem-border-accent); --accent: var(--rem-pink); --accent-hover: var(--rem-pink-hover); --accent-tint: var(--rem-pink-dim); --accent-glow: var(--rem-pink-glow); } /* ── BASE ELEMENT STYLES ──────────────────────────────── */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; } /* ── SEMANTIC TEXT CLASSES ────────────────────────────── */ .t-eyebrow, .t-label { font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } .t-meta { font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-tertiary); } .t-h1, h1 { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: 0.96; letter-spacing: 0.01em; text-transform: uppercase; color: var(--fg); font-weight: 400; } .t-h2, h2 { font-family: var(--font-display); font-size: var(--fs-display-lg); line-height: 1.0; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg); font-weight: 400; } .t-h3, h3 { font-family: var(--font-display); font-size: var(--fs-display-md); line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg); font-weight: 400; } .t-h4, h4 { font-family: var(--font-display); font-size: var(--fs-display-sm); line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg); font-weight: 400; } .t-body, p { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.75; color: var(--fg-secondary); } .t-body-sm { font-size: var(--fs-body-sm); line-height: 1.7; color: var(--fg-secondary); } .t-accent { color: var(--accent); } .t-outline { -webkit-text-stroke: 1px var(--fg); color: transparent; } /* italic body (DM Sans italic 300) — used sparingly for emphasis phrases */ em, .t-em { font-style: italic; font-weight: 300; color: var(--fg); }