/* learn.css — shared stylesheet for AFG learn/ articles Design system: Playfair Display (headings) + Inter (body) Warm parchment palette — canonical AFG design tokens Version: 20260607 (design-coherence pass) */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── GOOGLE FONTS are loaded per-article in the ; ensure fallbacks ── */ :root { /* ── Light surfaces ── */ --warm-parchment: #f5f0e8; --warm-cream: #ede7d9; --warm-tan: #d4c9b0; --warm-mid: #b09f85; /* ── Dark surfaces ── */ --dark-walnut: #1c1712; --dark-warm: #2b241c; --dark-card: #332b20; /* ── Text on light ── */ --ink-primary: #1a1410; --ink-secondary: #4a3e31; --ink-tertiary: #7a6a57; /* ── Text on dark ── */ --onDark-primary: #f0ead8; --onDark-secondary: rgba(240,234,216,0.72); --onDark-tertiary: rgba(240,234,216,0.44); /* ── Accent ── */ --accent: #c4a44a; --accent-dim: rgba(196,164,74,0.10); --accent-border: rgba(196,164,74,0.28); /* ── Borders on light ── */ --border-light: rgba(26,20,16,0.10); --border-mid: rgba(26,20,16,0.18); /* ── Easing ── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ── Durations ── */ --dur-fast: 120ms; --dur-normal: 200ms; /* ── Spacing ── */ --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ── Radii ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; /* ── Layout ── */ --max-article: 720px; --max: 1200px; --page-x: clamp(20px, 5vw, 48px); /* ── BACKWARD-COMPAT ALIASES used in article bodies ── */ /* These map old token names to the warm palette so existing markup doesn't break */ --bg: var(--warm-parchment); --bg-soft: var(--warm-cream); --bg-deep: var(--dark-walnut); --surface: var(--warm-cream); --surface2: var(--dark-warm); --surface3: var(--dark-card); --border: var(--border-light); --text: var(--ink-primary); --text-dim: var(--ink-secondary); --text-faint: var(--ink-tertiary); --gold: var(--accent); --gold-dim: var(--accent-dim); --gold-border: var(--accent-border); --accent-dark: #a8893a; --ink: var(--ink-primary); --ink-soft: var(--ink-secondary); --ink-2: var(--ink-secondary); --line: var(--border-light); --line-strong: var(--border-mid); --radius: var(--radius-sm); --radius-lg: var(--radius-lg); } html { scroll-behavior: smooth; overflow-x: hidden; } body { background: var(--warm-parchment); color: var(--ink-primary); font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.70; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* ── FONT CLASSES ── */ /* .clash used in article markup: map to Playfair Display */ .clash { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; letter-spacing: -0.01em; } /* ── SKIP LINK ── */ .skip-link { position: absolute; top: -50px; left: var(--page-x); background: var(--accent); color: var(--dark-walnut); font-size: 14px; font-weight: 700; padding: 8px 16px; border-radius: var(--radius-sm); z-index: 9999; text-decoration: none; transition: top var(--dur-fast) var(--ease-out); } .skip-link:focus { top: 8px; } /* ── NAV (.site-nav — new article nav structure) ── */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 72px; background: var(--warm-parchment); border-bottom: 1px solid var(--border-light); transition: box-shadow var(--dur-normal) var(--ease-out); } .site-nav.is-scrolled { box-shadow: 0 2px 16px rgba(26,20,16,0.08); } .nav-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--page-x); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .nav-logo { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-primary); text-decoration: none; white-space: nowrap; flex-shrink: 0; } .nav-roles { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; min-width: 0; } .nav-roles::-webkit-scrollbar { display: none; } .nav-roles a { font-family: Inter, ui-sans-serif, sans-serif; font-size: clamp(13px, 1.05vw, 14px); font-weight: 500; color: var(--ink-secondary); text-decoration: none; padding: 6px 8px; border-radius: var(--radius-sm); white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); } .nav-roles a:hover { color: var(--ink-primary); } .nav-roles a.is-active { color: var(--accent); } .nav-end { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; } .nav-end a { font-size: 14px; font-weight: 500; color: var(--ink-secondary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); white-space: nowrap; } .nav-end a:hover { color: var(--ink-primary); } .btn-nav { background: var(--ink-primary); color: var(--warm-parchment); padding: 9px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; transition: background var(--dur-fast) var(--ease-out); white-space: nowrap; } .btn-nav:hover { background: var(--dark-warm); color: var(--warm-parchment); } /* ── ARTICLE BODY ── */ .article-wrap { max-width: var(--max-article); margin: 0 auto; padding: 112px var(--page-x) 96px; } .eyebrow { font-family: Inter, ui-sans-serif, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .eyebrow::before { content: ''; display: block; width: 18px; height: 2px; background: var(--accent); flex-shrink: 0; } h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(28px, 5vw, 44px); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink-primary); margin-bottom: 12px; } .article-deck { font-size: clamp(16px, 2vw, 19px); color: var(--ink-secondary); line-height: 1.55; margin-bottom: 10px; font-weight: 400; } .article-meta { font-size: 13px; color: var(--ink-tertiary); margin-bottom: 28px; } .article-meta a { color: var(--ink-secondary); text-decoration: underline; } .byline { padding: 14px 0; margin-bottom: 36px; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); } .byline p { font-size: 15px; margin: 0; color: var(--ink-secondary); } .byline a { color: var(--ink-primary); text-decoration: underline; text-decoration-color: var(--border-mid); } /* ── BODY TYPOGRAPHY ── */ p { margin-bottom: 20px; color: var(--ink-secondary); } p strong { color: var(--ink-primary); font-weight: 600; } p em { font-style: italic; } p a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-border); } p a:hover { border-color: var(--accent); } h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(20px, 3.5vw, 26px); color: var(--ink-primary); margin: 44px 0 16px; letter-spacing: -0.01em; line-height: 1.18; } h3 { font-family: Inter, ui-sans-serif, sans-serif; font-weight: 700; font-size: clamp(16px, 2.5vw, 19px); color: var(--ink-primary); margin: 32px 0 12px; letter-spacing: -0.01em; } hr { border: none; border-top: 1px solid var(--border-light); margin: 36px 0; } pre { background: var(--dark-walnut); border: 1px solid rgba(196,164,74,0.20); border-radius: var(--radius-md); padding: 18px 20px; overflow-x: auto; margin-bottom: 20px; } code { font-size: 13.5px; color: var(--accent); font-family: 'Courier New', ui-monospace, monospace; } ol, ul { padding-left: 22px; margin-bottom: 20px; color: var(--ink-secondary); } li { margin-bottom: 8px; line-height: 1.65; } li strong { color: var(--ink-primary); } /* ── CTA BLOCKS ── */ .cta-free { background: var(--warm-cream); border: 1px solid var(--border-mid); border-radius: var(--radius-md); padding: 24px; margin: 36px 0 14px; } .cta-label { font-family: Inter, ui-sans-serif, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-tertiary); margin-bottom: 8px; } .cta-free .cta-title { font-size: 16px; font-weight: 700; color: var(--ink-primary); margin-bottom: 4px; } .cta-free .cta-desc { font-size: 15px; color: var(--ink-secondary); margin: 0; } .cta-free a { color: var(--ink-primary); text-decoration: none; } .cta-paid { background: var(--dark-walnut); border: 1px solid var(--accent-border); border-radius: var(--radius-md); padding: 24px; margin: 0 0 32px; } .cta-paid .cta-label { color: var(--accent); } .cta-paid .cta-title { font-size: 16px; font-weight: 700; color: var(--onDark-primary); margin-bottom: 4px; } .cta-price { color: var(--onDark-secondary); font-weight: 400; } .cta-paid .cta-desc { font-size: 15px; color: var(--onDark-secondary); margin: 0; } .cta-paid a { color: var(--onDark-primary); text-decoration: none; } /* .cta-segment — alternate CTA style used in some articles */ .cta-segment { background: var(--warm-cream); border: 1px solid var(--accent-border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: 24px; margin: 36px 0 14px; } .cta-segment .cta-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .cta-segment h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 700; color: var(--ink-primary); margin: 0 0 8px; } .cta-segment p { font-size: 15px; color: var(--ink-secondary); margin-bottom: 16px; } /* ── GATEWAY BAND ── */ .gateway-band { background: var(--dark-walnut); border: 1px solid var(--accent-border); border-radius: var(--radius-lg); padding: 32px; margin: 44px 0 12px; text-align: center; } .gateway-tagline { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(18px, 3vw, 24px); color: var(--onDark-primary); margin-bottom: 12px; } .gateway-band p { font-size: 15px; color: var(--onDark-secondary); max-width: 520px; margin: 0 auto 20px; line-height: 1.65; } .btn-gateway { display: inline-block; background: var(--ink-primary); color: var(--warm-parchment); font-family: Inter, ui-sans-serif, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: -0.005em; padding: 12px 26px; border-radius: var(--radius-sm); text-decoration: none; margin: 0 6px 8px; transition: background var(--dur-fast) var(--ease-out); } .btn-gateway:hover { background: var(--dark-warm); } .btn-gateway-alt { display: inline-block; background: transparent; color: var(--onDark-secondary); border: 1px solid var(--accent-border); font-family: Inter, ui-sans-serif, sans-serif; font-weight: 500; font-size: 14px; padding: 11px 22px; border-radius: var(--radius-sm); text-decoration: none; margin: 0 6px 8px; } .btn-gateway-alt:hover { color: var(--onDark-primary); } /* ── BTN-CTA (used by .cta-segment in some articles) ── */ .btn-cta { display: inline-block; background: var(--ink-primary); color: var(--warm-parchment); font-family: Inter, ui-sans-serif, sans-serif; font-weight: 600; font-size: 14px; padding: 11px 22px; border-radius: var(--radius-sm); text-decoration: none; transition: background var(--dur-fast) var(--ease-out); } .btn-cta:hover { background: var(--dark-warm); } /* ── RELATED ── */ .related-label { font-size: 14px; font-weight: 700; color: var(--ink-secondary); margin: 28px 0 8px; } .related-list { list-style: none; padding: 0; margin: 0 0 28px; } .related-list li { margin-bottom: 7px; } .related-list a { font-size: 14px; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-border); } .related-list a:hover { border-color: var(--accent); } /* ── FOOTER (.site-footer — new article footer structure) ── */ .site-footer { background: var(--dark-walnut); border-top: 1px solid rgba(196,164,74,0.14); padding: 56px var(--page-x) 32px; margin-top: 80px; } .footer-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } .footer-logo { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 16px; color: var(--onDark-primary); margin-bottom: 12px; text-decoration: none; display: block; } .footer-brand p { font-size: 13px; color: var(--onDark-secondary); max-width: 240px; line-height: 1.65; margin-bottom: 0; } .footer-col { display: flex; flex-direction: column; } .footer-col h4 { font-family: Inter, ui-sans-serif, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--onDark-tertiary); margin-bottom: 14px; } .footer-col a { display: block; font-size: 13px; color: var(--onDark-secondary); text-decoration: none; margin-bottom: 8px; transition: color var(--dur-fast) var(--ease-out); } .footer-col a:hover { color: var(--onDark-primary); } .footer-bottom { max-width: var(--max); margin: 32px auto 0; padding-top: 20px; border-top: 1px solid rgba(240,234,216,0.08); display: flex; align-items: center; gap: 24px; font-size: 12px; color: var(--onDark-tertiary); } .footer-bottom p { color: var(--onDark-tertiary); margin: 0; } .footer-bottom a { color: var(--onDark-tertiary); text-decoration: none; } .footer-bottom a:hover { color: var(--onDark-secondary); } /* ── RESPONSIVE ── */ @media (max-width: 960px) { .nav-roles { display: none; } .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 768px) { .nav-inner { padding: 0 20px; } .nav-hide { display: none; } .article-wrap { padding: 96px 20px 72px; } .gateway-band { padding: 24px 20px; } .site-footer { padding: 40px 20px 24px; } .footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (max-width: 640px) { h1 { font-size: clamp(24px, 7.5vw, 34px); overflow-wrap: break-word; word-break: normal; hyphens: auto; max-width: 100%; } h2 { overflow-wrap: break-word; word-break: normal; hyphens: auto; max-width: 100%; } h3 { overflow-wrap: break-word; word-break: normal; hyphens: auto; max-width: 100%; } .gateway-tagline { overflow-wrap: break-word; word-break: normal; hyphens: auto; max-width: 100%; } .article-wrap { padding-left: 18px; padding-right: 18px; } } @media (max-width: 480px) { h1 { font-size: clamp(22px, 7vw, 28px); } h2 { font-size: clamp(18px, 5.5vw, 22px); } .article-wrap { padding-left: 16px; padding-right: 16px; } .footer-inner { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; } } /* ──────────────────────────────────────────────────────────────────────────── BACKWARD-COMPAT ALIASES — articles using old Gary's-version class names. These map old class names to the warm canonical system. ──────────────────────────────────────────────────────────────────────────── */ /* .page — outer wrapper div */ .page { display: block; } /* .site-header — old fixed nav bar (Bucket-A articles) */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 72px; background: var(--warm-parchment); border-bottom: 1px solid var(--border-light); } /* .nav — inner flex layout in old nav bar */ .site-header .nav { max-width: var(--max); margin: 0 auto; padding: 0 var(--page-x); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } /* .brand — logo link in old nav */ .brand { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--ink-primary); text-decoration: none; white-space: nowrap; flex-shrink: 0; } /* .brand-mark icon — not used in warm system; hide gracefully */ .brand-mark { display: none; } /* .nav-links — desktop link list in old nav */ .nav-links { display: flex; align-items: center; gap: 20px; } .nav-links a { font-size: 13.5px; font-weight: 500; color: var(--ink-secondary); text-decoration: none; } .nav-links a:hover { color: var(--ink-primary); } /* .nav-cta — CTA button in old nav */ .nav-cta { background: var(--ink-primary); color: var(--warm-parchment); font-family: Inter, ui-sans-serif, sans-serif; font-weight: 600; font-size: 13.5px; padding: 8px 16px; border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; } .nav-cta:hover { background: var(--dark-warm); } /* .nav-hamburger — mobile toggle */ .nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 4px; color: var(--ink-primary); } .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--ink-primary); margin: 4px 0; border-radius: 2px; } /* .wrap / .wrap.narrow */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--page-x); } .wrap.narrow { max-width: var(--max-article); padding: 100px 24px 80px; } /* .article-byline */ .article-byline { display: flex; align-items: center; gap: 12px; } /* .small-note */ .small-note { font-size: 13px; color: var(--ink-tertiary); margin-bottom: 0; } /* .footer — old footer used in some articles */ .footer { background: var(--dark-walnut); border-top: 1px solid rgba(196,164,74,0.14); padding: 48px var(--page-x) 32px; margin-top: 80px; } .footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } .footer h4 { font-family: Inter, ui-sans-serif, sans-serif; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--onDark-tertiary); margin-bottom: 12px; } .footer a { display: block; font-size: 13px; color: var(--onDark-secondary); text-decoration: none; margin-bottom: 6px; } .footer a:hover { color: var(--onDark-primary); } .footer ul { list-style: none; padding: 0; margin: 0; } .footer p { font-size: 13px; color: var(--onDark-secondary); max-width: 260px; margin-bottom: 0; } @media (max-width: 768px) { .site-header .nav { padding: 0 20px; } .nav-links { display: none; } .nav-hamburger { display: block; } .wrap { padding: 0 20px; } .wrap.narrow { padding: 84px 20px 64px; } .footer { padding: 40px 20px 24px; } .footer .wrap { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (max-width: 480px) { .wrap.narrow { padding-left: 16px; padding-right: 16px; } .wrap { padding-left: 16px; padding-right: 16px; } .footer .wrap { grid-template-columns: 1fr; } }