, so page rules can never reach shared chrome. Keep that shape when you add sections; several page classes (.hero, .stats, .band) intentionally mean different things on different pages. ============================================================= */ /* ===== Design tokens ================================================ */ /* Arch Fellow design tokens — values are exact per the design handoff README. Do not eyeball these from the wireframes; the wireframes are scaled down. */ :root { /* ---- Arch Fellow palette ---- */ --af-ink: #252935; /* primary text, dark surfaces, nav, footer CTAs */ --af-ink-deep: #1C1F29; /* legal strip */ --af-ink-mid: #3D4152; /* body copy on light coloured fields */ --af-gold: #FCB017; /* brand field, primary action */ --af-lavender: #C8C5E2; /* secondary brand field */ --af-cream: #FDF8ED; /* tertiary field, list backgrounds */ --af-cream-warm: #F2EFE3; /* alternate warm field */ --af-grey-text: #5C5F70; /* eyebrows, secondary text */ --af-grey-mid: #8B8FA3; /* placeholder, disabled */ --af-hairline-cream: #E0DCCF; --af-hairline-white: #DBD6C8; --af-white: #FFFFFF; /* Hover is a darkening step only — never lighter, never a hue shift. */ --af-gold-hover: #F0AF00; /* ---- McDonald's core, for co-branded surfaces only ---- */ --mcd-yellow: #FFBC0D; --mcd-red: #DB0007; --mcd-gray-11: #2D2D2D; --mcd-gray-1: #F7F7F7; --mcd-warm-tan: #B69A81; /* ---- Type ---- */ /* Speedee is licensed McDonald's brand type and is NOT in the handoff bundle. Source it via the client's McDonald's brand channel and drop the @font-face into fonts.css. The stack below degrades until then. */ --af-font: 'Speedee', system-ui, -apple-system, 'Segoe UI', sans-serif; --af-font-condensed: 'Speedee Condensed', var(--af-font); --af-display: 700 clamp(2.5rem, 4.5vw, 3.5rem)/1.0 var(--af-font); /* 48–56px */ --af-h1: 700 2.5rem/1.05 var(--af-font); /* 40px */ --af-h2: 700 1.75rem/1.1 var(--af-font); /* 28px */ --af-h3: 700 1.125rem/1.2 var(--af-font); /* 18px */ --af-body: 300 1rem/1.5 var(--af-font); /* 16px */ --af-body-sm: 300 0.875rem/1.5 var(--af-font); /* 14px */ --af-eyebrow: 700 0.6875rem/1.2 var(--af-font); /* 11px */ --af-legal: 300 0.75rem/1.4 var(--af-font); /* 12px */ --af-track-display: -0.02em; --af-track-h2: -0.01em; --af-track-eyebrow: 0.2em; /* ---- Space: 4px base grid ---- */ --af-s1: 4px; --af-s2: 8px; --af-s3: 12px; --af-s4: 16px; --af-s5: 24px; --af-s6: 32px; --af-s7: 40px; --af-s8: 64px; --af-section-y: 64px; /* desktop vertical rhythm */ --af-container: 1280px; --af-measure: 720px; /* reading measure */ --af-gutter: 16px; /* mobile */ /* ---- Radius ---- */ --af-r-card: 12px; --af-r-input: 8px; --af-r-image: 8px; --af-r-sheet: 16px; --af-r-pill: 999px; /* actions are fully round — brand signature */ /* ---- Elevation ---- */ --af-shadow-card: 0 1px 2px rgba(37, 41, 53, .10); --af-shadow-lift: 0 6px 16px rgba(37, 41, 53, .16); --af-focus-ring: 0 0 0 3px rgba(45, 45, 45, .25); /* ---- Motion ---- */ --af-ease: cubic-bezier(.2, 0, 0, 1); --af-t-control: 140ms; --af-t-surface: 220ms; --af-t-page: 360ms; /* ---- Photography grade ---- */ --af-photo-grade: saturate(1.1) contrast(1.035); --af-touch-min: 44px; /* minimum touch target, no exceptions */ /* ---- Brand lockup ---- One variable drives the whole lockup. The handoff's lockup is not three equal heights: the Arch Fellow mark is tallest (44px), the hairline divider 28px (~64%) and the Golden Arches 25px (~57%). Those ratios are held below, so changing --af-lockup rescales the lockup correctly. */ /* Header height. Anything that has to sit clear of the sticky header (e.g. the About owner card) should offset from this, not a literal. */ --af-header-h: 100px; --af-header-h-compact: 84px; --af-lockup: 64px; /* Arch Fellow mark height, header */ --af-lockup-compact: 48px; /* compact header (job + store + contact) */ --af-lockup-footer: 56px; } @media (min-width: 768px) { :root { --af-gutter: 24px; } } @media (min-width: 1024px) { :root { --af-gutter: 40px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ===== Base, layout primitives, components ========================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: var(--af-body); color: var(--af-ink); background: var(--af-white); } h1, h2, h3, h4, p, figure, blockquote { margin: 0; } /*