/* ============================================================================ * Reformed IT — Colors & Type * * Source of truth: Reformed IT Brand Guidelines v2.0 · 2026 (PDF in /uploads). * Five-colour palette, two-role logic: * "Ink + Paper" carry 90% of the work. Pink, Purple, Blue are the gradient. * * Proportion target across any layout: 60% Paper · 28% Ink · 8% Gradient · 4% Pink. * ============================================================================ */ /* ---------- Web fonts (Poppins · SIL OFL) ---------- */ /* Local files first, Google Fonts as a fallback for the broader charset. */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/Poppins-ExtraLight.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Poppins-Light.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Poppins-Regular.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Poppins-Medium.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Poppins-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Poppins-Bold.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Poppins-ExtraBold.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/Poppins-Black.woff2") format("woff2"); } /* If the woff2s above can't load (e.g. running from a different folder), the * Google Fonts stylesheet below kicks in. Drop one of the two if you don't * need both. */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"); :root { /* ============================================================ * 1. CORE PALETTE — the five * ============================================================ */ --ri-ink: #080526; /* type · backgrounds · default fg */ --ri-paper: #F5F5F7; /* default ground · negative space */ --ri-pink: #F22B69; /* accent · gradient start */ --ri-purple: #B500A1; /* gradient mid · headers */ --ri-blue: #2B29D1; /* gradient end · highlights */ /* Darker "ink" siblings — used inside hero gradient recipes. * Don't reach for them as standalone fills. */ --ri-ink-darker: #0a0626; /* hero loud base */ --ri-deep-purple:#2a0a3a; /* hero quiet glow */ --ri-deep-blue: #1a0d54; /* hero quiet glow */ /* ============================================================ * 2. SEMANTIC LAYERS — what most code should reach for * ============================================================ */ /* Surfaces */ --bg: var(--ri-paper); --bg-elevated: #FFFFFF; /* cards on paper */ --bg-inverse: var(--ri-ink); --bg-subtle: #EDEDF0; /* hovered chip, table stripe */ /* Foregrounds */ --fg: var(--ri-ink); --fg-muted: #5A5A6E; /* secondary copy on paper */ --fg-subtle: #8C8CA0; /* meta · timestamps · helpers */ --fg-inverse: var(--ri-paper); /* type on ink */ --fg-inverse-muted: #9897AE; /* secondary copy on ink */ /* Brand accent */ --accent: var(--ri-pink); --accent-strong: var(--ri-purple); --link: var(--ri-pink); /* on paper */ --link-on-ink: var(--ri-pink); /* Borders */ --border: #E2E2E8; /* hairline on paper */ --border-strong: #D0D0D8; --border-ink: #1E1B45; /* hairline on ink */ --focus-ring: var(--ri-pink); /* Status — pulled from the badge set in the guidelines */ --status-success: #1F8F5E; --status-success-bg: #E2F4EC; --status-warning: #B8761F; --status-warning-bg: #FBEFD8; --status-danger: #C0244C; --status-danger-bg: #FCE3EB; --status-info: var(--ri-blue); --status-info-bg: #E1E1FA; --status-neutral: var(--ri-ink); --status-neutral-bg: var(--ri-ink); /* ============================================================ * 3. SIGNATURE GRADIENTS * Pink → Purple → Blue, always in that order, always at 95°. * Use only at hero moments: covers, hero strips, focus rings. * Never as a default background. Never on body copy or icons. * ============================================================ */ --grad-brand: linear-gradient(95deg, var(--ri-pink) 0%, var(--ri-purple) 50%, var(--ri-blue) 100%); --grad-brand-soft: linear-gradient(95deg, rgba(242,43,105,.18) 0%, rgba(181,0,161,.18) 50%, rgba(43,41,209,.18) 100%); /* Loud hero background (covers, campaign panels). Three radial spots on * an ink base — pink top-left, purple centre, blue bottom-right. */ --bg-hero-loud: radial-gradient(55% 55% at 20% 20%, #f22c69 0%, transparent 55%), radial-gradient(70% 70% at 65% 50%, #b500a0 0%, transparent 60%), radial-gradient(60% 60% at 80% 90%, #2b29d1 0%, transparent 60%), #0a0626; /* Quiet hero (section openers, interior heroes) — same family, lower * volume, plus the 22 px brand bar pinned to the bottom of the panel * via ::after. See `.ri-hero-quiet` rule below. */ --bg-hero-quiet: radial-gradient(120% 80% at 12% 30%, #2a0a3a 0%, transparent 55%), radial-gradient(110% 90% at 90% 80%, #1a0d54 0%, transparent 55%), #080526; /* Centred hero (closing slides, book-ends, "thank you" panels). */ --bg-hero-centred: radial-gradient(60% 50% at 50% 50%, rgba(181, 0, 161, 0.35) 0%, transparent 70%), radial-gradient(50% 50% at 50% 100%, rgba(43, 41, 209, 0.35) 0%, transparent 60%), radial-gradient(50% 50% at 50% 0%, rgba(242, 44, 105, 0.25) 0%, transparent 60%), #080526; /* ============================================================ * 4. TYPE * One typeface, used with intent: Poppins (ITF · Jonny Pinhorn). * Fallbacks per brand guide: Helvetica Neue, Arial, system-ui. * ============================================================ */ --font-sans: "Poppins", "Helvetica Neue", Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Weights */ --fw-thin: 100; --fw-extralight: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* Sizes — from the guide's type hierarchy ratios; rem-based so they * cascade with the user's root font size. (root = 16px.) */ --t-display: 10.5rem; /* 168px · ExtraBold · 92% · -3.5% */ --t-headline: 6rem; /* 96px · Bold · 98% · -2.5% */ --t-section: 4.5rem; /* 72px · Bold · 104%· -2.0% */ --t-subhead: 2.5rem; /* 40px · SemiBold · 118% */ --t-h3: 1.75rem; /* 28px · SemiBold · 124% */ --t-h4: 1.25rem; /* 20px · SemiBold · 132% */ --t-body-lg: 1.375rem; /* 22px · Regular · 150% — guide body size */ --t-body: 1rem; /* 16px · Regular · 150% */ --t-small: 0.875rem; /* 14px · 150% */ --t-eyebrow: 0.875rem; /* 14px · SemiBold · 22% · upper */ --t-micro: 0.75rem; /* 12px · 150% */ /* ============================================================ * 5. SPACING — 4px base (Reformed runs cards on a 24 px grid; * 4 px is the underlying step.) * ============================================================ */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 — primary grid unit */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ --space-8: 3rem; /* 48 */ --space-9: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ --space-11: 6rem; /* 96 */ --space-12: 8rem; /*128 */ /* ============================================================ * 6. RADIUS — the corner scale. Roughly 5% of the element's * shortest side, clamped to the steps below. Pick from the * scale; never invent in-between numbers. * ============================================================ */ --radius-1: 4px; /* chip · tag · inline code */ --radius-2: 8px; /* micro card · status pip */ --radius-3: 14px; /* card · photo frame · social tile */ --radius-4: 20px; /* hero card · swatch · pattern tile */ --radius-5: 28px; /* showcase · big stat · logo holder */ --radius-full: 999px; /* button · pill badge · avatar */ /* ============================================================ * 7. ELEVATION — sparingly used; the brand prefers crisp edges * over heavy shadow. Ink-tinted, never neutral grey. * ============================================================ */ --shadow-1: 0 1px 2px rgba(8, 5, 38, 0.06), 0 1px 1px rgba(8, 5, 38, 0.04); --shadow-2: 0 4px 12px rgba(8, 5, 38, 0.06), 0 2px 4px rgba(8, 5, 38, 0.04); --shadow-3: 0 12px 28px rgba(8, 5, 38, 0.10), 0 6px 12px rgba(8, 5, 38, 0.06); --shadow-pink: 0 6px 24px rgba(242, 43, 105, 0.28); /* CTA glow */ --shadow-ink: 0 6px 24px rgba(8, 5, 38, 0.35); /* on hero panels */ /* ============================================================ * 8. MOTION — quiet, professional, no bounces. * ============================================================ */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* default */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; /* ============================================================ * 9. LAYOUT * ============================================================ */ --maxw-prose: 62ch; --maxw-content: 1200px; --maxw-wide: 1440px; --brand-bar-h: 22px; /* the signature 22 px gradient strip */ } /* ============================================================================ * BASE ELEMENT STYLES — opt in by adding `.ri` to a wrapping element, or * cascade these globally by removing the `.ri` prefix. * ============================================================================ */ .ri, .ri * { box-sizing: border-box; } .ri { font-family: var(--font-sans); font-size: var(--t-body); line-height: 1.5; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ----- Headings ----- */ .ri h1, .ri .ri-display { font-weight: var(--fw-extrabold); font-size: var(--t-display); line-height: 0.92; letter-spacing: -0.035em; margin: 0 0 var(--space-5); color: var(--fg); text-wrap: balance; } .ri h2, .ri .ri-headline { font-weight: var(--fw-bold); font-size: var(--t-headline); line-height: 0.98; letter-spacing: -0.025em; margin: 0 0 var(--space-5); text-wrap: balance; } .ri h3, .ri .ri-section { font-weight: var(--fw-bold); font-size: var(--t-section); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 var(--space-5); text-wrap: balance; } .ri h4, .ri .ri-subhead { font-weight: var(--fw-semibold); font-size: var(--t-subhead); line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 var(--space-4); } .ri h5 { font-weight: var(--fw-semibold); font-size: var(--t-h3); line-height: 1.24; margin: 0 0 var(--space-3); } .ri h6 { font-weight: var(--fw-semibold); font-size: var(--t-h4); line-height: 1.32; margin: 0 0 var(--space-3); } /* ----- Body ----- */ .ri p, .ri .ri-body { margin: 0 0 var(--space-4); line-height: 1.5; text-wrap: pretty; } .ri .ri-body-lg { font-size: var(--t-body-lg); line-height: 1.5; } .ri small, .ri .ri-small { font-size: var(--t-small); line-height: 1.5; } .ri .ri-meta { font-size: var(--t-micro); color: var(--fg-subtle); } /* The brand's most distinctive type element — a small caps-tracked label, * usually pink, that sits above headings and acts as a section index. */ .ri .ri-eyebrow { font-weight: var(--fw-semibold); font-size: var(--t-eyebrow); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ri-pink); margin: 0 0 var(--space-4); } /* ----- Links ----- */ .ri a { color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity var(--dur-fast) var(--ease-out); } .ri a:hover { opacity: 0.72; } /* ----- Code ----- */ .ri code, .ri kbd, .ri samp { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-subtle); padding: 0.1em 0.4em; border-radius: var(--radius-1); } /* ----- Selection ----- */ .ri ::selection { background: var(--ri-pink); color: #FFF; } /* ============================================================================ * The 22 px brand bar — drop on any element to add the gradient strip. * Pair with `.ri-hero-quiet` per the guidelines. * ============================================================================ */ .ri-brand-bar, .ri-hero-quiet { position: relative; } .ri-brand-bar::after, .ri-hero-quiet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--brand-bar-h); background: var(--grad-brand); } /* ============================================================================ * Hero surface presets * ============================================================================ */ .ri-hero-loud { background: var(--bg-hero-loud); color: var(--fg-inverse); } .ri-hero-quiet { background: var(--bg-hero-quiet); color: var(--fg-inverse); } .ri-hero-centred { background: var(--bg-hero-centred); color: var(--fg-inverse); } /* When the brand bar lives on an INK panel without a gradient hero behind it, * apply it as a top edge instead. */ .ri-brand-bar--top::after { top: 0; bottom: auto; } /* ============================================================================ * Focus — pink ring, never the default browser blue. * ============================================================================ */ .ri :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: inherit; }