/* ============================================================ AMIR RAD — DESIGN SYSTEM Built from Amir Rad Brand Identity System v1.0, August 2026. Values are taken from 05_Text/brand-tokens.css unchanged unless noted. Additions here are layout, accessibility and component work the token file does not cover. ============================================================ */ /* ---------- FONTS — self-hosted, no third-party dependency ---------- */ @font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-var.woff2") format("woff2-variations"); font-weight: 200 700; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* ---------- TOKENS ---------- */ :root { /* core palette [measured] */ --ar-paper: #FAF8F4; --ar-paper-deep: #F2EEE6; --ar-ink: #1A1917; --ar-graphite: #262626; --ar-slate: #55524A; --ar-clay: #6B675E; --ar-stone: #8A857A; --ar-line: #C9C3B7; /* decorative rules and dividers only */ --ar-line-soft: #A8A093; /* Interactive component borders need 3:1 against Paper under WCAG 1.4.11. Line is 1.65:1 — correct for a decorative hairline, insufficient for a control boundary. Stone is 3.46:1 and reads almost identically. */ --ar-line-ui: #8A857A; /* venture accents — identical OKLCH L 0.4104 / C 0.1066, hue rotated only */ --ar-accent-expert: #7A2E2E; /* Oxblood hue 23deg */ --ar-accent-education: #1C5922; /* Deep Moss hue 145deg */ --ar-accent-clinical: #0F4C81; /* Deep Navy hue 250deg */ --ar-accent-expert-on-dark: #E0B9B7; --ar-accent-education-on-dark: #B3CCB3; --ar-accent-clinical-on-dark: #AFC7E1; /* Master accent, per the kit's token file. Section pages override it with .ar-expert / .ar-clinical / .ar-education on . */ --ar-accent: var(--ar-accent-expert); --ar-accent-on-dark: var(--ar-accent-expert-on-dark); /* type families */ --ar-font-display: "Newsreader", Georgia, "Times New Roman", serif; --ar-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --ar-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* type scale */ --ar-display: clamp(2.6rem, 1.4rem + 5.2vw, 4.75rem); --ar-h1: clamp(2.25rem, 1.30rem + 4.2vw, 3.75rem); --ar-h2: clamp(1.60rem, 1.25rem + 1.6vw, 2.125rem); --ar-h3: 1.3125rem; --ar-h4: 1.1875rem; --ar-lead: 1.0625rem; --ar-body: 0.9688rem; --ar-small: 0.875rem; --ar-caption: 0.7812rem; --ar-eyebrow: 0.6875rem; --ar-label: 0.6562rem; /* space — 8px base */ --ar-3xs: 0.25rem; --ar-2xs: 0.5rem; --ar-xs: 0.75rem; --ar-sm: 1rem; --ar-md: 1.5rem; --ar-lg: 2rem; --ar-xl: 3rem; --ar-2xl: 4rem; --ar-3xl: 6rem; --ar-4xl: 8rem; /* layout */ --ar-max: 1200px; --ar-measure: 68ch; --ar-gutter: var(--ar-lg); --ar-radius: 2px; /* the maximum. never rounder. */ --ar-hairline: 1px solid var(--ar-line); --ar-ease: 160ms cubic-bezier(.4, 0, .2, 1); } /* ---------- RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; } ul[class], ol[class] { list-style: none; } img, picture, svg { max-width: 100%; display: block; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---------- BASE ---------- */ body { background: var(--ar-paper); color: var(--ar-slate); font-family: var(--ar-font-body); font-size: var(--ar-body); line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--ar-font-display); color: var(--ar-ink); } h1 { font-size: var(--ar-h1); font-weight: 300; line-height: 1.06; letter-spacing: -.015em; } h2 { font-size: var(--ar-h2); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; } h3 { font-size: var(--ar-h3); font-weight: 500; line-height: 1.25; } h4 { font-size: var(--ar-h4); font-weight: 500; line-height: 1.3; } p { max-width: var(--ar-measure); } p + p { margin-top: var(--ar-sm); } a { color: var(--ar-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { text-decoration-color: var(--ar-line-soft); } strong { font-weight: 500; color: var(--ar-ink); } /* Focus — visible, never removed. 3:1 against both Paper and Ink. */ :focus-visible { outline: 2px solid var(--ar-ink); outline-offset: 3px; border-radius: 1px; } .ar-on-dark :focus-visible { outline-color: var(--ar-paper); } /* Skip link */ .ar-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ar-ink); color: var(--ar-paper); padding: var(--ar-xs) var(--ar-sm); font-size: var(--ar-small); text-decoration: none; } .ar-skip:focus { left: var(--ar-sm); top: var(--ar-sm); } /* ---------- TYPE UTILITIES ---------- */ /* Mono labels sit in Clay, not Stone. Stone on Paper is 3.46:1 — fine at 24px+, but these run 10–11px where WCAG 2.1 requires 4.5:1. Clay is 5.31:1. */ .ar-eyebrow { font-family: var(--ar-font-mono); font-size: var(--ar-eyebrow); font-weight: 400; text-transform: uppercase; letter-spacing: .15em; line-height: 1.5; color: var(--ar-clay); margin: 0; } .ar-label { font-family: var(--ar-font-mono); font-size: var(--ar-label); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; line-height: 1.55; color: var(--ar-clay); } .ar-lead { font-size: var(--ar-lead); line-height: 1.68; } .ar-small { font-size: var(--ar-small); line-height: 1.6; } .ar-caption { font-size: var(--ar-caption); line-height: 1.45; color: var(--ar-clay); } .ar-display { font-size: var(--ar-display); font-weight: 300; line-height: 1.02; letter-spacing: -.02em; } /* ---------- LAYOUT ---------- */ .ar-wrap { max-width: var(--ar-max); margin-inline: auto; padding-inline: var(--ar-gutter); } .ar-section { padding-block: var(--ar-3xl); } .ar-section--tight { padding-block: var(--ar-2xl); } .ar-rule { border: 0; border-top: var(--ar-hairline); margin: 0; } .ar-surface-deep { background: var(--ar-paper-deep); } .ar-surface-dark { background: var(--ar-ink); color: var(--ar-line); } .ar-surface-dark h1, .ar-surface-dark h2, .ar-surface-dark h3, .ar-surface-dark h4 { color: var(--ar-paper); } .ar-surface-dark .ar-eyebrow { color: var(--ar-accent-on-dark); } .ar-surface-dark a { color: var(--ar-paper); } /* ---------- COMPONENTS ---------- */ .ar-btn { display: inline-block; padding: 14px 26px; border-radius: var(--ar-radius); border: 1px solid transparent; font-family: var(--ar-font-body); font-size: var(--ar-small); font-weight: 500; text-decoration: none; transition: background var(--ar-ease), color var(--ar-ease), border-color var(--ar-ease); } .ar-btn--primary { background: var(--ar-ink); color: var(--ar-paper); } .ar-btn--primary:hover { background: var(--ar-accent); color: var(--ar-paper); } .ar-btn--secondary { background: transparent; color: var(--ar-ink); border-color: var(--ar-line-ui); } .ar-btn--secondary:hover { border-color: var(--ar-ink); } /* Section number + heading pair */ .ar-sechead { display: flex; gap: var(--ar-md); align-items: baseline; margin-bottom: var(--ar-lg); } .ar-sechead__n { font-family: var(--ar-font-mono); font-size: var(--ar-label); letter-spacing: .15em; color: var(--ar-clay); flex: none; padding-top: .4em; } /* Definition-style credential rows, separated by hairlines rather than boxes */ .ar-rows { border-top: var(--ar-hairline); } .ar-rows > * { border-bottom: var(--ar-hairline); padding-block: var(--ar-md); display: grid; gap: var(--ar-2xs); grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } @media (max-width: 640px) { .ar-rows > * { grid-template-columns: 1fr; } } /* ---------- VENTURE ACCENTS — set on ---------- */ .ar-expert { --ar-accent: var(--ar-accent-expert); --ar-accent-on-dark: var(--ar-accent-expert-on-dark); } .ar-clinical { --ar-accent: var(--ar-accent-clinical); --ar-accent-on-dark: var(--ar-accent-clinical-on-dark); } .ar-education { --ar-accent: var(--ar-accent-education); --ar-accent-on-dark: var(--ar-accent-education-on-dark); } /* Section numbers and the current nav item pick up the accent */ .ar-sechead__n { color: var(--ar-accent); } .site-nav a[aria-current="page"] { color: var(--ar-accent); border-bottom-color: var(--ar-accent); } .crumbs li[aria-current="page"] { color: var(--ar-accent); }