/* ============================================================= TNA Global Styles — True North Atlas Requires: tokens.css loaded first in Nav/footer/badge/utilities: components.css (auto-imported below) Generated: 2026-06-12 ============================================================= */ /* Google Fonts — Fraunces (display serif) + Inter (body/UI) font-display:swap ensures text visible during load Preconnect in is mandatory for fastest first paint */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Inter:wght@400;500;600;700&display=swap'); /* Components (nav, footer, badge, utilities) */ @import url('./components.css'); /* Layer order */ @layer tokens, base, layout, components, utilities; /* ── Base Reset ────────────────────────────────────────────── */ @layer base { *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 16px; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background-color: var(--surface-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100dvh; } /* Respect reduced motion globally */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Display headings — Fraunces */ h1, h2 { font-family: var(--font-display); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-ink-900); } h3, h4, h5, h6 { font-family: var(--font-body); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--color-ink-800); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-md); } p { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-primary); } p + p { margin-top: var(--space-4); } a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; transition: color var(--duration-fast) var(--ease-out-quart); } a:hover { color: var(--text-link-hover); } a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; border-radius: var(--radius-xs); } ul, ol { list-style: none; } img, svg, video { display: block; max-width: 100%; } input, button, select, textarea { font: inherit; } button { cursor: pointer; } hr { border: none; border-top: 1px solid var(--surface-border); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.875em; } pre { overflow-x: auto; background: var(--surface-subtle); padding: var(--space-4); border-radius: var(--radius); } strong { font-weight: var(--weight-semibold); } small { font-size: var(--text-sm); } blockquote { border-left: 3px solid var(--brand-primary); padding-left: var(--space-6); font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--color-ink-700); line-height: var(--leading-snug); } ::selection { background: var(--color-blue-200); color: var(--color-blue-900); } /* Skip-to-main for a11y */ .skip-to-main { position: absolute; top: -100%; left: var(--space-4); z-index: var(--z-toast); background: var(--brand-primary); color: var(--text-inverse); padding: var(--space-3) var(--space-6); border-radius: var(--radius); font-weight: var(--weight-semibold); text-decoration: none; transition: top var(--duration-fast) var(--ease-out-expo); } .skip-to-main:focus { top: var(--space-4); } } /* end @layer base */ /* ── Layout Primitives ─────────────────────────────────────── */ @layer layout { .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(var(--space-4), 4vw, var(--space-12)); } .container--sm { max-width: var(--container-sm); } .container--md { max-width: var(--container-md); } .container--lg { max-width: var(--container-lg); } .section { padding-block: var(--space-section); } .section--sm { padding-block: var(--space-section-sm); } .section--lg { padding-block: var(--space-section-lg); } .surface-page { background-color: var(--surface-page); } .surface-subtle { background-color: var(--surface-subtle); } .surface-dark { background-color: var(--color-ink-900); color: var(--text-inverse); } .surface-blue { background-color: var(--brand-primary); color: var(--text-inverse); } .grid { display: grid; gap: var(--space-8); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .grid-auto-md { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } @media (min-width: 640px) and (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .section-header { max-width: 640px; margin-bottom: var(--space-12); } .section-header--center { max-width: 640px; margin-inline: auto; text-align: center; margin-bottom: var(--space-12); } .section-label { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--brand-primary); margin-bottom: var(--space-3); } .section-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--color-ink-900); line-height: var(--leading-tight); margin-bottom: var(--space-4); } .section-subtitle { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-secondary); } } /* end @layer layout */ /* ── Core Components ───────────────────────────────────────── */ @layer components { /* ─── Buttons ───────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-decoration: none; border: 1.5px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart), box-shadow var(--duration-fast) var(--ease-out-quart), transform var(--duration-fast) var(--ease-out-quart); white-space: nowrap; user-select: none; } .btn:focus-visible { outline: none; box-shadow: var(--shadow-blue); } .btn:active { transform: translateY(1px); } .btn-primary { background-color: var(--brand-primary); color: var(--text-inverse); border-color: var(--brand-primary); } .btn-primary:hover { background-color: var(--brand-hover); border-color: var(--brand-hover); color: var(--text-inverse); } .btn-primary:active { background-color: var(--brand-active); border-color: var(--brand-active); } .btn-secondary { background-color: transparent; color: var(--brand-primary); border-color: var(--brand-primary); } .btn-secondary:hover { background-color: var(--color-blue-50); color: var(--brand-hover); border-color: var(--brand-hover); } .btn-secondary:active { background-color: var(--color-blue-100); } .btn-ghost { background-color: transparent; color: var(--text-secondary); border-color: transparent; } .btn-ghost:hover { background-color: var(--surface-subtle); color: var(--text-primary); } .btn-ghost:active { background-color: var(--color-ink-100); } .btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); } .btn-lg { padding: var(--space-4) var(--space-10); font-size: var(--text-md); border-radius: var(--radius-md); } /* ─── Cards ─────────────────────────────────────────────── */ .card { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: var(--space-8); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-normal) var(--ease-out-quart), transform var(--duration-normal) var(--ease-out-quart), border-color var(--duration-normal) var(--ease-out-quart); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--surface-border-mid); } .card--flat { box-shadow: none; border-color: var(--surface-border); } .card--flat:hover { box-shadow: var(--shadow-sm); transform: none; } .card--dark { background: var(--color-ink-800); border-color: var(--color-ink-700); color: var(--text-inverse); } .card-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--brand-primary); margin-bottom: var(--space-3); } .card-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); color: var(--color-ink-900); margin-bottom: var(--space-3); line-height: var(--leading-snug); } .card-body { font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-relaxed); } } /* end @layer components */