/* ============================================================ Riley Inks: Work section shared design tokens Used by every hosted piece. Piece-specific layout lives inline in each piece's index.html. ============================================================ */ :root { /* --- Color ------------------------------------------------- Accent is set to the rileyinks.com site blue so hosted pieces sit seamlessly beside the main site. --signal is the burnt-orange token from design doc 0.4, retained and available: swap --accent to --signal to restore the document's original palette in one line. */ --ink: #1A1A1A; --ink-soft: #4B4B49; --ink-mute: #67675F; /* 5.0:1 on --bg, passes AA at small sizes */ --bg: #F1F1EF; --surface: #FAFAF8; --surface-2: #FFFFFF; --line: #DEDEDA; --line-strong: #C9C9C3; --slate: #1F3A4D; --slate-soft: #4A6478; --accent: #4361EE; /* site blue: graphics, fills, strokes */ --accent-deep: #2F47C4; --accent-text: #2F47C4; /* 6.5:1 on --bg: use for any accent TEXT */ --accent-tint: rgba(67, 97, 238, 0.10); --accent-line: rgba(67, 97, 238, 0.32); --signal: #C2571A; /* design doc 0.4 alternate */ --signal-tint: rgba(194, 87, 26, 0.10); --ok: #2E7D5B; --warn: #B4531A; --danger: #A32F2F; --danger-tint: rgba(163, 47, 47, 0.08); /* --- Type -------------------------------------------------- No external font requests (build spec: no dependencies). Nunito Sans is named first so it is used when installed, matching rileyinks.com; the stack degrades to close humanist sans faces on macOS and Windows. To match the live site exactly, uncomment the font link in index.html . */ --font-sans: "Nunito Sans", "Avenir Next", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-hero: clamp(2.4rem, 5.6vw, 4.1rem); --fs-h1: clamp(1.9rem, 3.8vw, 2.9rem); --fs-h2: clamp(1.45rem, 2.6vw, 1.95rem); --fs-h3: clamp(1.08rem, 1.7vw, 1.24rem); --fs-lead: clamp(1.06rem, 1.6vw, 1.24rem); --fs-body: clamp(1rem, 1.25vw, 1.075rem); --fs-small: 0.9rem; --fs-micro: 0.76rem; --lh-tight: 1.12; --lh-snug: 1.32; --lh-body: 1.68; --measure: 68ch; /* --- Space -------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem; --s-10: 10rem; /* --- Shape --------------------------------------------------- */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05); --shadow-md: 0 6px 24px -12px rgba(26, 26, 26, 0.22); --shadow-lg: 0 18px 60px -28px rgba(26, 26, 26, 0.30); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 160ms; --dur: 320ms; --dur-slow: 720ms; --rail-w: 232px; --wrap: 1240px; } /* ============================================================ Reset and base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s-7); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.018em; color: var(--ink); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; } p { margin: 0 0 var(--s-5); max-width: var(--measure); } p:last-child { margin-bottom: 0; } strong { font-weight: 700; color: var(--ink); } a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--accent); } img, svg { max-width: 100%; } svg { display: block; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; } /* ============================================================ Focus: visible, consistent, never removed ============================================================ */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } .skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 999; padding: var(--s-3) var(--s-5); background: var(--ink); color: var(--surface); border-radius: var(--r-md); font-weight: 700; text-decoration: none; transition: top var(--dur) var(--ease); } .skip-link:focus-visible { top: var(--s-4); color: var(--surface); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================ Shared chrome: framing header and footer (design doc 0.4) ============================================================ */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 4rem); } .eyebrow { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 var(--s-4); } .chips { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); list-style: none; margin: 0; padding: 0; } .chip { display: inline-flex; align-items: baseline; gap: 0.45em; padding: 0.42em 0.9em; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-small); color: var(--ink-soft); white-space: nowrap; } .chip b { font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } .caption { font-size: var(--fs-small); color: var(--ink-mute); line-height: var(--lh-snug); max-width: 58ch; margin: var(--s-4) 0 0; } .illustrative { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warn); } .illustrative::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; } /* ============================================================ Motion: reveal on scroll. Static and visible without JS. ============================================================ */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); will-change: opacity, transform; } .js .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }