/* oppcost shared site styles */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap'); :root { --navy: #3A5885; /* French Blue (text) — brand refresh Aug 2026 */ --navy-soft: #4A6FA5; /* French Blue (fill) */ --cream: #FBFAF7; /* Warm Paper */ --white: #ffffff; --hunter: #8FA878; --hunter-bg: #e9efe9; --gold: #b8904f; --gold-bg: #f6ecd9; --carolina: #3A5885; --carolina-bg: #e9edf3; --accent: #8FA878; /* Sage Green — primary brand accent, replaces gold for chrome/UI */ --accent-bg: #EEF2E9; /* light sage tint */ --ink-muted: #000000; /* body copy — brand refresh Aug 2026: all body text is black */ --line: #e5ddcc; --serif: 'Cormorant Garamond', Georgia, serif; /* titles / subtitles */ --sans: 'Playfair Display', Georgia, serif; /* body copy */ --nav-bg: rgba(255,255,255,0.94); } /* ---------- dark mode ---------- */ /* Light by default for every visitor, regardless of system/browser preference. Dark mode only applies when someone explicitly turns it on via the toggle (assets/theme-toggle.js), which stamps data-theme="dark" on and remembers the choice in localStorage for next visit. */ :root[data-theme="dark"] { --navy: #93B4EA; --navy-soft: #B7CDF2; --cream: #14181f; --white: #1e242e; --ink-muted: #E9E7E2; --line: #333b48; --nav-bg: rgba(20,24,31,0.9); --accent-bg: #1b2420; } /* logo mark: the light version has an opaque white background, which shows as a visible box against a dark nav/footer, so a transparent-background twin swaps in for dark mode. */ .logo-dark { display: none; } :root[data-theme="dark"] .logo-light { display: none; } :root[data-theme="dark"] .logo-dark { display: inline-block; } /* article table header: --hunter-bg is a light sage tint that was never redefined for dark mode, so it stayed a bright off-white box sitting on the dark page (visible on every article's data table, e.g. the Roth IRA milestone table). Swap in the same dark tint already used for the accent color elsewhere, since --hunter and --accent are the same green. */ :root[data-theme="dark"] .article-body table th { background: var(--accent-bg); } /* .callout: same bug, same fix. --gold-bg/--hunter-bg/--carolina-bg are all light tints never redefined for dark mode, so a callout box stayed a bright cream/sage/blue box with near-invisible light-on-light text on top of it. Reuse the same dark tint as the table-header fix above. */ :root[data-theme="dark"] .callout, :root[data-theme="dark"] .callout.hunter, :root[data-theme="dark"] .callout.carolina { background: var(--accent-bg); } /* ---------- page preloader: supply & demand graph splash ---------- */ .oc-preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 9999; background: var(--cream); display: flex; align-items: center; justify-content: center; flex-direction: column; transition: opacity 0.5s ease; } .oc-preloader.oc-hidden { opacity: 0; pointer-events: none; } .oc-preloader .oc-wordmark { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--navy); margin-top: 10px; letter-spacing: 0.5px; } .oc-chart .oc-axis { stroke: var(--navy); stroke-width: 1.5; } .oc-chart .oc-demand, .oc-chart .oc-supply { fill: none; stroke-width: 3; stroke-linecap: round; } .oc-chart .oc-demand { stroke: var(--gold); } .oc-chart .oc-supply { stroke: var(--hunter); } .oc-chart .oc-eq-dot { fill: var(--navy); opacity: 0; } .oc-chart .oc-eq-lines { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; } .oc-chart text { font-family: var(--sans); } .oc-chart .oc-axis-label { font-size: 10px; fill: #777; } .oc-chart .oc-curve-label { font-size: 11px; font-weight: 600; opacity: 0; } .oc-chart .oc-curve-label.oc-demand-label { fill: var(--gold); } .oc-chart .oc-curve-label.oc-supply-label { fill: var(--hunter); } .oc-chart .oc-eq-label { font-size: 10px; fill: var(--navy); opacity: 0; font-style: italic; } @keyframes ocDrawLine { to { stroke-dashoffset: 0; } } @keyframes ocFadeIn { to { opacity: 1; } } @keyframes ocPopIn { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } } .oc-chart.oc-anim .oc-demand { stroke-dasharray: 260; stroke-dashoffset: 260; animation: ocDrawLine 1s ease forwards; } .oc-chart.oc-anim .oc-supply { stroke-dasharray: 260; stroke-dashoffset: 260; animation: ocDrawLine 1s ease forwards 0.15s; } .oc-chart.oc-anim .oc-curve-label { animation: ocFadeIn 0.4s ease forwards 0.9s; } .oc-chart.oc-anim .oc-eq-lines { animation: ocFadeIn 0.3s ease forwards 1.05s; } .oc-chart.oc-anim .oc-eq-dot { transform-box: fill-box; transform-origin: center; animation: ocPopIn 0.5s ease forwards 1.1s; } .oc-chart.oc-anim .oc-eq-label { animation: ocFadeIn 0.4s ease forwards 1.35s; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--white); color: var(--ink-muted); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { color: var(--navy); } .pillar-title-invest { color: var(--hunter); } .pillar-title-mindset { color: var(--gold); } .pillar-title-debt { color: var(--navy); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; } /* ---------- nav ---------- */ .site-nav { position: sticky; top: 0; z-index: 20; background: var(--nav-bg, rgba(255,255,255,0.94)); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); } .site-nav .wrap { position: relative; display: grid; grid-template-columns: minmax(124px, 1fr) auto minmax(124px, 1fr); align-items: center; padding-top: 16px; padding-bottom: 16px; } .brand { display: flex; align-items: center; gap: 12px; z-index: 1; grid-column: 1; justify-self: start; } .brand img { height: 112px; width: auto; flex-shrink: 0; } .brand span { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: 0.01em; color: var(--navy); } .nav-spacer-mirror { grid-column: 3; justify-self: end; visibility: hidden; pointer-events: none; } .nav-links { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 30px; font-size: 19px; font-weight: 500; white-space: nowrap; } .nav-links a.nav-item { position: relative; padding: 6px 0; color: var(--navy); transition: color .15s ease; } .nav-links a.nav-item:hover, .nav-links a.nav-item:focus, .nav-links a.nav-item:active { color: var(--accent); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1.4px solid var(--line); background: var(--white); color: var(--navy); cursor: pointer; padding: 0; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-sun { display: none; } .theme-toggle.is-dark .icon-moon { display: none; } .theme-toggle.is-dark .icon-sun { display: block; } .nav-links a.nav-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .2s ease; } .nav-links a.nav-item:hover::after { transform: scaleX(1); } .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 12px 24px; border-radius: 2px; border: 1.4px solid transparent; cursor: pointer; transition: all .18s ease; } .btn-primary { background: #3A5885; color: #ffffff; } .btn-primary:hover { background: #4A6FA5; } .btn-outline { border-color: var(--accent); color: var(--navy); background: transparent; } .btn-outline:hover { background: var(--accent-bg); } .btn-small { padding: 14px 26px; font-size: 17px; } /* ---------- hero ---------- */ .hero { text-align: center; padding: 92px 0 76px; background: radial-gradient(ellipse at top, var(--cream) 0%, var(--white) 62%); } .hero .mark { height: 92px; margin: 0 auto 30px; } .hero .wordmark { height: 70px; width: auto; margin: 0 auto 30px; display: block; } .kicker { font-family: var(--sans); font-weight: 600; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; } .hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 5vw, 54px); line-height: 1.15; margin: 0 0 20px; color: var(--navy); } .hero p.lede { font-size: 18px; color: var(--ink-muted); max-width: 560px; margin: 0 auto 36px; } .hero .actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ---------- photo media ---------- */ .media { position: relative; overflow: hidden; background: var(--cream); } .media img { width: 100%; height: 100%; object-fit: cover; display: block; } .media::after { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .16; pointer-events: none; } .media.hunter::after, .media.invest::after { background: var(--hunter); } .media.gold::after, .media.mindset::after { background: var(--gold); } .media.carolina::after, .media.debt::after { background: var(--carolina); } .pillar-media { height: 190px; } .post-media { height: 190px; margin-bottom: 18px; border-radius: 2px; } .hero-media { max-width: 860px; margin: 50px auto 0; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 34px 60px -32px rgba(58,88,133,0.32); } .hero-carousel { position: relative; width: 100%; height: 380px; } .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s ease; } .hero-slide.is-active { opacity: 1; } .article-cover { max-width: 820px; margin: 0 auto 44px; border-radius: 2px; overflow: hidden; border: 1px solid var(--line); } .article-cover img { width: 100%; height: 380px; object-fit: cover; display: block; } /* ---------- pillars ---------- */ .section { padding: 84px 0; } .section.cream { background: var(--cream); } .section-head { text-align: center; max-width: 620px; margin: 0 auto 52px; } .section-head h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 34px); margin: 0 0 12px; } .section-head p { color: var(--ink-muted); margin: 0; font-size: 16px; } .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .pillar-card { background: var(--white); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } .pillar-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(58,88,133,0.35); } .pillar-bar { height: 6px; } .pillar-bar.hunter { background: var(--hunter); } .pillar-bar.gold { background: var(--gold); } .pillar-bar.carolina { background: var(--carolina); } .pillar-body { padding: 30px 26px 32px; } .pillar-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 2px; margin-bottom: 16px; } .pillar-tag.hunter { background: var(--hunter-bg); color: var(--hunter); } .pillar-tag.gold { background: var(--gold-bg); color: #8a6a30; } .pillar-tag.carolina { background: var(--carolina-bg); color: var(--carolina); } .pillar-body h3 { font-family: var(--serif); font-size: 21px; margin: 0 0 10px; } .pillar-body p { color: var(--ink-muted); font-size: 14.5px; margin: 0 0 18px; } .pillar-body a.more { font-size: 13.5px; font-weight: 600; color: var(--navy); border-bottom: 1.4px solid var(--accent); padding-bottom: 2px; } /* ---------- post cards ---------- */ .posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .post-card { display: block; border-top: 3px solid var(--line); padding-top: 22px; } .post-card.hunter, .post-card.invest { border-top-color: var(--hunter); } .post-card.gold, .post-card.mindset { border-top-color: var(--gold); } .post-card.carolina, .post-card.debt { border-top-color: var(--carolina); } .post-meta { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 12px; } .post-meta .tag.hunter, .post-meta .tag.invest { color: var(--hunter); } .post-meta .tag.gold, .post-meta .tag.mindset { color: #96762f; } .post-meta .tag.carolina, .post-meta .tag.debt { color: var(--carolina); } .post-card h3 { font-family: var(--serif); font-size: 20px; line-height: 1.32; margin: 0 0 10px; } .post-card p.excerpt { font-size: 14.5px; color: var(--ink-muted); margin: 0 0 14px; } .post-card .readmore { font-size: 13px; font-weight: 600; color: var(--navy); } /* ---------- featured badge ---------- Solid pill on the card thumbnail (sits on top of a photo, so it stays readable regardless of theme) plus a matching inline tag for the article page itself, next to the pillar/date/read-time line. */ .featured-badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; background: var(--gold); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 2px; box-shadow: 0 2px 10px rgba(0,0,0,0.28); } .featured-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--gold-bg); color: #8a6a30; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; } /* ---------- blog index filters ---------- */ .filters { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; } .filter-btn { font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 999px; border: 1.4px solid var(--line); background: var(--white); color: var(--ink-muted); cursor: pointer; } .filter-btn.active, .filter-btn:hover { border-color: var(--navy); color: var(--navy); } /* ---------- follow (cards + IG / Pinterest carousels) ---------- */ .follow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 580px; margin: 0 auto; } .follow-widget { max-width: 680px; margin: 0 auto 28px; } .follow-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ---------- social photo grid (replaces embedded feed widget) ---------- */ .social-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; max-width: 900px; margin: 0 auto 28px; } .social-grid a { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; } .social-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .social-grid a:hover img { transform: scale(1.06); } .social-grid-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(58, 88, 133, 0.55); color: #ffffff; opacity: 0; transition: opacity 0.2s ease; } .social-grid-overlay svg { width: 26px; height: 26px; } .social-grid a:hover .social-grid-overlay { opacity: 1; } @media (max-width: 760px) { .social-grid { grid-template-columns: repeat(3, 1fr); } } .follow-card { text-align: center; padding: 34px 20px; border: 1px solid var(--line); border-radius: 3px; background: var(--white); } .follow-card svg { width: 30px; height: 30px; margin: 0 auto 16px; } .follow-card h4 { font-family: var(--serif); font-size: 17px; margin: 0 0 6px; } .follow-card p { font-size: 13.5px; color: var(--ink-muted); margin: 0 0 16px; min-height: 66px; display: flex; align-items: center; justify-content: center; } .follow-card .social-carousel { margin: 0 auto 16px; } .social-carousel { position: relative; aspect-ratio: 4 / 5; max-width: 220px; margin: 0 auto; border: 1px solid var(--line); border-radius: 4px; background: var(--white); overflow: hidden; } .social-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; } .social-slide.is-active { opacity: 1; } .social-slide-link { display: block; width: 100%; height: 100%; } .social-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .social-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 30px 24px; background: var(--accent-bg); } .social-empty svg { width: 26px; height: 26px; color: var(--accent); } .social-empty p { font-size: 13px; color: var(--ink-muted); margin: 0; max-width: 220px; } /* ---------- newsletter ---------- */ .newsletter { background: #3A5885; color: #FBFAF7; padding: 76px 0; text-align: center; } .newsletter h2 { font-family: var(--serif); font-weight: 600; color: #FBFAF7; font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; } .newsletter p { color: #FBFAF7; max-width: 480px; margin: 0 auto 30px; font-size: 15.5px; } .newsletter-form { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; max-width: 440px; margin: 0 auto; } .newsletter-form input { flex: 1; min-width: 220px; padding: 13px 16px; border-radius: 2px; border: 1px solid #3a4864; background: #1f2d47; color: #FBFAF7; font-family: var(--sans); font-size: 14.5px; } .newsletter-form input::placeholder { color: #8f9ab3; } .newsletter-form button { background: var(--accent); color: #FBFAF7; border: none; border-radius: 2px; padding: 13px 26px; font-family: var(--sans); font-size: 14.5px; font-weight: 700; cursor: pointer; } .newsletter-form button:hover { background: #7c9568; } .newsletter-form input:disabled { opacity: 0.6; } .newsletter-thanks-link { display: block; margin: 16px auto 0; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: #FBFAF7; border-bottom: 1.4px solid var(--accent); padding-bottom: 2px; width: fit-content; } .newsletter-thanks-link:hover { color: var(--accent); } .newsletter-modal .newsletter-thanks-link { color: var(--navy); border-color: var(--accent); } .newsletter-modal .newsletter-thanks-link:hover { color: var(--accent); } .newsletter .fine { margin-top: 16px; font-size: 12.5px; color: #8f9ab3; } /* ---------- newsletter popup modal ---------- */ .newsletter-modal-overlay { position: fixed; inset: 0; background: rgba(28, 38, 58, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .newsletter-modal-overlay.is-open { opacity: 1; pointer-events: auto; } .newsletter-modal { position: relative; background: var(--cream); border-radius: 6px; max-width: 440px; width: 100%; padding: 46px 36px 40px; text-align: center; box-shadow: 0 34px 70px -24px rgba(20,28,44,0.45); } .newsletter-modal h2 { font-family: var(--serif); font-weight: 600; color: var(--navy); font-size: clamp(22px, 3vw, 28px); margin: 0 0 12px; } .newsletter-modal p { color: var(--ink-muted); font-size: 14.5px; margin: 0 0 26px; } .newsletter-modal .newsletter-form { justify-content: center; } .newsletter-modal .newsletter-form input { background: var(--white); border: 1px solid var(--line); color: var(--ink-muted); } .newsletter-modal .newsletter-form input::placeholder { color: #8a8577; } .newsletter-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--navy); font-family: var(--sans); } .newsletter-modal-close:hover { color: var(--accent); } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--line); padding: 40px 0; } .site-footer .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .site-footer .brand span { font-size: 16px; } .footer-links { display: flex; gap: 22px; font-size: 13.5px; color: var(--ink-muted); } .footer-links a:hover { color: var(--navy); } .footer-social { display: flex; gap: 16px; } .footer-social svg { width: 18px; height: 18px; color: var(--navy-soft); } .footer-social a:hover svg { color: var(--accent); } .copyright { font-size: 12px; color: var(--ink-muted); width: 100%; text-align: center; margin-top: 24px; } /* ---------- article ---------- */ .article-head { text-align: center; padding: 64px 0 40px; max-width: 720px; margin: 0 auto; } .article-head .post-meta { justify-content: center; display: flex; gap: 8px; align-items: center; } .article-head h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.2; margin: 16px 0 14px; } .article-sub { color: var(--navy); font-size: 17px; } .article-sub.pillar-title-invest { color: var(--hunter); } .article-sub.pillar-title-mindset { color: var(--gold); } .article-sub.pillar-title-debt { color: var(--navy); } /* subheads (h3) inside the body reuse the same pillar-title-* classes as the h1/subtitle so a Mindset (gold) post's section headers read gold instead of the default navy every h3 gets site-wide. */ .article-body h3.pillar-title-invest { color: var(--hunter); } .article-body h3.pillar-title-mindset { color: var(--gold); } .article-body h3.pillar-title-debt { color: var(--navy); } .article-body { max-width: 680px; margin: 0 auto; padding: 0 0 60px; font-size: 17px; line-height: 1.75; } .article-body p { margin: 0 0 22px; } .article-body h3 { font-family: var(--serif); font-size: 22px; margin: 36px 0 14px; } .article-body ul { margin: 0 0 22px; padding-left: 22px; } .article-body ul li { margin: 0 0 12px; } .article-body ul li:last-child { margin-bottom: 0; } .callout { border-left: 3px solid var(--gold); background: var(--gold-bg); padding: 20px 24px; border-radius: 2px; margin: 30px 0; font-size: 15.5px; } .callout.hunter { border-color: var(--hunter); background: var(--hunter-bg); } .callout.carolina { border-color: var(--carolina); background: var(--carolina-bg); } .callout strong { display: block; margin-bottom: 6px; font-family: var(--serif); font-size: 16px; } blockquote { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--navy-soft); border-left: 3px solid var(--line); margin: 34px 0; padding: 4px 0 4px 24px; } .article-body .table-wrap { overflow-x: auto; margin: 0 0 26px; } .article-body table { width: 100%; border-collapse: collapse; font-size: 15px; white-space: nowrap; } .article-body table th, .article-body table td { padding: 10px 16px; border-bottom: 1px solid var(--line); text-align: right; } .article-body table th:first-child, .article-body table td:first-child { text-align: left; } .article-body table th { font-family: var(--serif); font-weight: 600; color: var(--navy); background: var(--hunter-bg); } .article-body table tr:last-child td { border-bottom: none; } .disclaimer { font-size: 12.5px; color: var(--ink-muted); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 40px; } .disclaimer-inline { font-size: 12.5px; font-style: italic; color: var(--ink-muted); margin: -10px 0 22px; } .back-link { display: inline-block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-muted); } .back-link:hover { color: var(--navy); } /* ---------- pull quotes ---------- */ .article-body p.pull-quote { font-family: var(--serif); font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; line-height: 1.4; color: var(--navy); border-left: 3px solid var(--accent); padding: 4px 0 4px 22px; margin: 34px 0; } /* ---------- post footer: share bar + author byline ---------- */ .post-footer { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 44px 0 40px; padding: 28px 0; } .share-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } .share-label { font-family: var(--sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); opacity: 0.6; } .share-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--navy); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .share-btn:hover { background: #3A5885; color: #ffffff; border-color: #3A5885; } .share-btn svg { width: 16px; height: 16px; } .share-copy { font-family: var(--sans); font-size: 12px; font-weight: 700; width: auto; padding: 0 14px; border-radius: 18px; } .author-byline { display: flex; align-items: center; gap: 16px; } .author-byline img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .byline-name { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--navy); margin: 0 0 2px; } .byline-sub { font-size: 13.5px; color: var(--ink-muted); opacity: 0.75; margin: 0; } .byline-sub a { color: var(--navy); font-weight: 600; } /* ---------- 404 page ---------- */ .error-page { max-width: 640px; margin: 0 auto; padding: 110px 24px 100px; text-align: center; } .error-page .error-code { font-family: var(--serif); font-size: clamp(64px, 12vw, 96px); font-weight: 700; color: var(--navy); line-height: 1; margin: 0 0 10px; } .error-page h1 { font-family: var(--serif); font-size: clamp(24px, 4vw, 32px); color: var(--navy); margin: 0 0 18px; } .error-page p.error-lede { font-size: 16.5px; color: var(--ink-muted); line-height: 1.6; margin: 0 0 34px; } .error-page .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 46px; } .error-page .error-pillars { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 32px; } .error-page .error-pillars a { font-family: var(--sans); font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 20px; border: 1px solid var(--line); color: var(--navy); } .error-page .error-pillars a:hover { border-color: var(--navy); background: var(--accent-bg); } /* ---------- compound interest calculator ---------- */ .calc-widget { border: 1px solid var(--line); border-radius: 8px; padding: 30px 30px 34px; margin: 30px 0 40px; background: var(--cream); } .calc-widget h4 { font-family: var(--serif); font-size: 20px; color: var(--navy); margin: 0 0 4px; } .calc-widget .calc-sub { font-size: 13.5px; color: var(--ink-muted); opacity: 0.75; margin: 0 0 22px; } .calc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 22px; margin-bottom: 26px; } .calc-field { display: flex; flex-direction: column; gap: 6px; } .calc-field label { font-family: var(--sans); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); opacity: 0.7; } .calc-field input { font-family: var(--sans); font-size: 16px; color: var(--navy); border: 1.4px solid var(--line); border-radius: 6px; padding: 9px 12px; background: var(--white); } .calc-field input:focus { outline: none; border-color: var(--accent); } .calc-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid var(--line); padding-top: 22px; } .calc-result { text-align: center; } .calc-result-label { display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); opacity: 0.65; margin-bottom: 6px; } .calc-result-value { display: block; font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--navy); } .calc-result-value.calc-final { color: var(--accent); font-size: 26px; } @media (max-width: 560px) { .calc-grid { grid-template-columns: 1fr; } .calc-results { grid-template-columns: 1fr; gap: 14px; } } /* ---------- inline data chart (reusable widget for any post) ---------- Built on top of .calc-widget's card look. Two series get their own literal colors (rather than pillar colors) since they represent two people, not a topic category - series A reuses the site's navy, series B uses a sage that's distinct enough from --hunter/--accent to read as its own line when both sit on the same chart. */ .chart-widget .calc-sub { margin-bottom: 20px; } .chart-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; } .chart-stat { text-align: center; display: flex; flex-direction: column; gap: 4px; } .chart-stat .stat-label { font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); opacity: 0.65; } .chart-stat .stat-value { font-family: var(--serif); font-size: clamp(20px, 3vw, 24px); font-weight: 700; color: var(--ink-muted); } .chart-stat .stat-value.stat-a { color: var(--navy); } .chart-stat .stat-value.stat-b { color: #6F8F58; } .chart-stat .stat-note { font-size: 12px; color: var(--ink-muted); opacity: 0.6; } .chart-legend { display: flex; gap: 18px; margin: 0 0 14px; font-size: 12.5px; color: var(--ink-muted); opacity: 0.8; flex-wrap: wrap; } .chart-legend span { display: inline-flex; align-items: center; gap: 6px; } .chart-dot { width: 12px; height: 3px; border-radius: 2px; display: inline-block; background: var(--navy); } .chart-dot.b { background: #6F8F58; } .chart-svg-wrap { position: relative; width: 100%; overflow-x: auto; margin-bottom: 24px; } .data-chart-svg { width: 100%; height: auto; min-width: 480px; display: block; } .data-chart-svg .gridline { stroke: var(--line); stroke-width: 1; } .data-chart-svg .axis-label { fill: var(--ink-muted); opacity: 0.6; font-size: 11px; font-family: var(--sans); } .data-chart-svg .line-a { fill: none; stroke: var(--navy); stroke-width: 2.5; } .data-chart-svg .line-b { fill: none; stroke: #6F8F58; stroke-width: 2.5; } .data-chart-svg .area-a { fill: rgba(58,88,133,0.10); } .data-chart-svg .area-b { fill: rgba(111,143,88,0.14); } .data-chart-svg .end-label { font-size: 12px; font-weight: 700; font-family: var(--sans); } .data-chart-svg .end-label.a { fill: var(--navy); } .data-chart-svg .end-label.b { fill: #6F8F58; } .data-chart-svg .hover-line { stroke: var(--ink-muted); opacity: 0; stroke-width: 1; stroke-dasharray: 3,3; } .data-chart-svg .hover-dot { opacity: 0; } .data-chart-svg .hover-dot circle { r: 4.5; stroke: var(--white); stroke-width: 2; } .data-chart-svg .hover-dot.a circle { fill: var(--navy); } .data-chart-svg .hover-dot.b circle { fill: #6F8F58; } .data-chart-svg .capture { fill: transparent; cursor: crosshair; } .data-chart-tooltip { position: absolute; pointer-events: none; background: #22283a; color: #fff; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; opacity: 0; transform: translate(-50%, -110%); transition: opacity 0.06s ease; white-space: nowrap; z-index: 5; } .data-chart-tooltip .tip-age { font-weight: 700; margin-bottom: 2px; display: block; } .data-chart-tooltip .tip-row { display: flex; justify-content: space-between; gap: 14px; } .data-chart-tooltip .tip-row .tip-key { display: flex; align-items: center; gap: 6px; } .data-chart-tooltip .tip-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } @media (max-width: 560px) { .chart-stats { grid-template-columns: 1fr; } } /* ---------- leak audit widget (interactive coffee-vs-leaks calculator) ---------- Built on .calc-widget's card look, same as the chart widget above. Coffee reuses the site's navy (its own literal --blue/--blue-fill matched the site's --navy/--navy-soft exactly), leaks reuse the same sage used for series B in the Roth IRA chart, so the two embedded widgets read as one consistent "second series" color across posts. */ .leak-group { margin-bottom: 22px; } .leak-group-label { font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--navy); margin: 0 0 4px; } .leak-group-hint { display: block; font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--ink-muted); opacity: 0.7; margin-top: 2px; } .leak-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; } .leak-row:first-of-type { border-top: none; padding-top: 4px; } .leak-row-label { flex: 1; min-width: 180px; } .leak-row-label .leak-name { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink-muted); } .leak-row-label .leak-hint { display: block; font-size: 12.5px; color: var(--ink-muted); opacity: 0.65; margin-top: 2px; } .leak-field { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .leak-field .leak-prefix { color: var(--ink-muted); opacity: 0.55; font-size: 14px; } .leak-field .leak-unit { color: var(--ink-muted); opacity: 0.7; font-size: 12.5px; white-space: nowrap; } .leak-field input[type="number"] { width: 72px; font: inherit; font-variant-numeric: tabular-nums; font-size: 15px; padding: 7px 8px; border: 1.4px solid var(--line); border-radius: 6px; background: var(--white); color: var(--navy); text-align: right; } .leak-field input[type="number"]:focus { outline: none; border-color: var(--accent); } .leak-switch { position: relative; width: 40px; height: 24px; flex-shrink: 0; border-radius: 999px; background: var(--line); border: none; cursor: pointer; padding: 0; transition: background 0.15s ease; } .leak-switch[aria-checked="true"] { background: #6F8F58; } .leak-switch .leak-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.15s ease; } .leak-switch[aria-checked="true"] .leak-knob { transform: translateX(16px); } .leak-switch:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } .leak-toggle-row.is-off .leak-row-label { opacity: 0.45; } .leak-toggle-row.is-off .leak-field { opacity: 0.45; } .leak-results { border-top: 1px solid var(--line); padding-top: 22px; } .leak-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; } .leak-tile { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 16px; } .leak-tile-label { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .leak-tile.coffee .leak-tile-label { color: var(--navy); } .leak-tile.leaks .leak-tile-label { color: #6F8F58; } .leak-swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } .leak-swatch.coffee { background: var(--navy-soft); } .leak-swatch.leaks { background: #6F8F58; } .leak-tile-value { display: block; font-family: var(--serif); font-weight: 700; font-size: 28px; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink-muted); } .leak-tile-sub { display: block; color: var(--ink-muted); opacity: 0.65; font-size: 12px; margin-top: 6px; } .leak-bars { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; } .leak-bar-row { display: flex; align-items: center; gap: 12px; } .leak-bar-name { width: 60px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--ink-muted); } .leak-bar-track { flex: 1; height: 26px; background: var(--white); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; position: relative; display: block; } .leak-bar-fill { height: 100%; border-radius: 6px 2px 2px 6px; transition: width 0.25s ease; min-width: 3px; display: block; } .leak-bar-fill.coffee { background: var(--navy-soft); } .leak-bar-fill.leaks { background: #6F8F58; } .leak-bar-amount { width: 78px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14.5px; color: var(--ink-muted); } .leak-verdict { border-radius: 8px; padding: 16px 18px; font-size: 14.5px; line-height: 1.55; background: rgba(111,143,88,0.14); border: 1px solid var(--line); color: var(--ink-muted); } .leak-verdict strong { font-weight: 700; } .leak-verdict.coffee-wins { background: rgba(58,88,133,0.10); } @media (max-width: 480px) { .leak-row { flex-wrap: wrap; } .leak-field { margin-left: auto; } .leak-tiles { grid-template-columns: 1fr; } } /* ---------- BNPL stacking widget (Sept 11 "stack check" calculator) ---------- */ .bnpl-widget .calc-sub { margin-bottom: 20px; } .bnpl-plans { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .bnpl-plan-row { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 12px 16px; } .bnpl-plan-row .bnpl-label { font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--ink-muted); opacity: 0.7; min-width: 52px; } .bnpl-plan-row input[type="range"] { flex: 1; accent-color: var(--accent); } .bnpl-plan-row .bnpl-amt { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--navy); min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; } .bnpl-plan-row .bnpl-remove { background: none; border: none; color: var(--ink-muted); opacity: 0.45; font-size: 18px; cursor: pointer; padding: 2px 4px; line-height: 1; } .bnpl-plan-row .bnpl-remove:hover { opacity: 1; color: #a45c4f; } .bnpl-add-btn { display: block; width: 100%; background: var(--accent-bg); border: none; border-radius: 8px; padding: 11px; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--ink-muted); cursor: pointer; margin-bottom: 24px; } .bnpl-add-btn:hover { opacity: 0.85; } .bnpl-add-btn:disabled { opacity: 0.4; cursor: not-allowed; } .bnpl-total-box { border-top: 1px solid var(--line); padding-top: 20px; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .bnpl-total-label { font-size: 13.5px; color: var(--ink-muted); opacity: 0.75; } .bnpl-total-amt { font-family: var(--serif); font-weight: 700; font-size: 28px; color: var(--navy); } @media (max-width: 480px) { .bnpl-plan-row { flex-wrap: wrap; } .bnpl-plan-row .bnpl-label { min-width: 100%; } } /* ---------- quiz widget (index-funds-vs-stock-picking: "which type of investor are you" quiz — auto-advances on click, no right/wrong answers, tallies a lean toward index-investing vs. stock-picking) ---------- */ .quiz-widget .calc-sub { margin-bottom: 18px; } .quiz-progress { font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); opacity: 0.6; text-align: center; margin-bottom: 16px; } .quiz-card { background: var(--white); border: 1.4px solid var(--line); border-radius: 10px; padding: 22px 24px; } .quiz-prompt { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--navy); line-height: 1.4; margin: 0 0 16px; } .quiz-options { display: flex; flex-direction: column; gap: 8px; } .quiz-opt-btn { text-align: left; background: var(--cream); border: 1.4px solid var(--line); border-radius: 8px; padding: 12px 14px; font-family: var(--sans); font-size: 14px; color: var(--ink-muted); cursor: pointer; } .quiz-opt-btn:hover { border-color: var(--accent); background: var(--accent-bg); } .quiz-result { display: none; background: var(--white); border: 1.4px solid var(--line); border-radius: 10px; padding: 32px 26px; text-align: center; } .quiz-result-badge { display: inline-block; padding: 6px 18px; border-radius: 20px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; } .quiz-result-badge.is-index { background: rgba(143,168,120,0.22); color: var(--navy); } .quiz-result-badge.is-picker { background: rgba(164,92,79,0.16); color: var(--navy); } .quiz-result-title { font-family: var(--serif); font-weight: 700; font-size: 24px; color: var(--navy); margin: 0 0 14px; } .quiz-split-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin-bottom: 8px; } .quiz-split-fill.is-index { background: var(--accent); } .quiz-split-fill.is-picker { background: #a45c4f; } .quiz-split-labels { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 11.5px; color: var(--ink-muted); opacity: 0.65; margin-bottom: 20px; } .quiz-result-text { font-size: 14px; color: var(--ink-muted); opacity: 0.85; line-height: 1.6; text-align: left; margin: 0 0 20px; } .quiz-retry-btn { background: var(--accent-bg); border: none; border-radius: 8px; padding: 10px 22px; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--ink-muted); cursor: pointer; } .quiz-retry-btn:hover { opacity: 0.85; } /* ---------- avalanche vs. snowball payoff-order widget (Sept 18) ---------- Editable debt table plus an extra-payment slider, feeding two result cards that just re-sort the same list two different ways. Reuses the navy/sage "series A vs. series B" split already established by the chart widget and leak-audit widget elsewhere on the site - navy for the math-optimal method, sage for the behavior-first method. */ .avalanche-widget .calc-sub { margin-bottom: 20px; } .debts-table { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .debt-row { display: flex; align-items: center; gap: 12px; background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 10px 14px; flex-wrap: wrap; } .debt-row .debt-name { flex: 1 1 120px; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--navy); } .debt-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 90px; } .debt-field label { font-family: var(--sans); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); opacity: 0.6; } .debt-field input { font: inherit; font-variant-numeric: tabular-nums; font-size: 14px; padding: 6px 8px; border: 1.4px solid var(--line); border-radius: 6px; background: var(--cream); color: var(--navy); } .debt-field input:focus { outline: none; border-color: var(--accent); } .extra-row { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 24px; flex-wrap: wrap; } .extra-row label { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink-muted); opacity: 0.75; white-space: nowrap; } .extra-row input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--accent); } .extra-row .extra-val { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--navy); min-width: 64px; text-align: right; } .avalanche-results { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .method-card { border-radius: 8px; padding: 18px 16px; border: 1px solid var(--line); } .method-card.is-avalanche { background: rgba(58,88,133,0.08); } .method-card.is-snowball { background: rgba(111,143,88,0.14); } .method-card h4 { font-family: var(--serif); font-size: 16px; margin: 0 0 4px; text-align: center; } .method-card.is-avalanche h4 { color: var(--navy); } .method-card.is-snowball h4 { color: #6F8F58; } .method-card .method-rule { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--ink-muted); opacity: 0.6; margin: 0 0 14px; } .method-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .method-order li { font-size: 13px; color: var(--ink-muted); background: var(--white); border-radius: 6px; padding: 8px 10px; display: flex; justify-content: space-between; gap: 8px; } .method-order li .mo-name { font-weight: 700; color: var(--navy); } .method-order li .mo-detail { opacity: 0.75; white-space: nowrap; } @media (max-width: 560px) { .avalanche-results { grid-template-columns: 1fr; } .debt-row { flex-direction: column; align-items: stretch; } .debt-field { flex: 1 1 auto; } } /* ---------- sally vs. charlie investing race widget (Sept 21) ---------- Editable start-age/monthly-amount controls for two racers, an animated bar race up to age 65, then a results readout. Reuses the same navy/sage "series A vs. series B" split as the avalanche widget above - navy for the more time-efficient racer (Sally, started earlier), sage for the racer who caught up with more money but less efficiently (Charlie). */ .race-widget .calc-sub { margin-bottom: 20px; } .race-controls { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; } .race-control-card { flex: 1 1 160px; background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 14px 16px; } .race-control-card .race-name { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--navy); margin: 0 0 10px; } .race-control-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .race-control-row:last-child { margin-bottom: 0; } .race-control-row label { font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); opacity: 0.65; min-width: 66px; } .race-control-row input { flex: 1; font-family: var(--sans); font-size: 14px; color: var(--navy); border: 1.4px solid var(--line); border-radius: 6px; padding: 6px 9px; background: var(--cream); } .race-control-row input:focus { outline: none; border-color: var(--accent); } .race-track { background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 20px 18px; margin-bottom: 20px; } .race-lane { margin-bottom: 16px; } .race-lane:last-of-type { margin-bottom: 12px; } .race-lane-label { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 5px; } .race-lane-label span:last-child { font-family: var(--serif); font-variant-numeric: tabular-nums; } .race-bar-bg { background: var(--accent-bg); border-radius: 20px; height: 20px; overflow: hidden; } .race-bar-fill { height: 100%; width: 0%; border-radius: 20px; transition: width 0.15s linear; } .race-bar-fill.is-sally { background: var(--navy); } .race-bar-fill.is-charlie { background: #6F8F58; } .race-year-marker { font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); opacity: 0.6; text-align: center; margin-top: 4px; } .race-btn { display: block; width: 100%; font-family: var(--sans); background: var(--navy); color: var(--white); border: none; border-radius: 6px; padding: 13px; font-size: 14.5px; font-weight: 700; cursor: pointer; margin-bottom: 20px; transition: opacity .15s ease; } .race-btn:hover { opacity: 0.88; } .race-btn:disabled { opacity: 0.5; cursor: default; } .race-results { display: none; } .race-results.is-shown { display: block; } .race-result-row { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } .race-result-card { flex: 1 1 160px; border-radius: 8px; padding: 16px 14px; text-align: center; } .race-result-card.is-sally { background: rgba(58,88,133,0.08); } .race-result-card.is-charlie { background: rgba(111,143,88,0.14); } .race-r-label { font-family: var(--sans); font-size: 11px; color: var(--ink-muted); opacity: 0.7; margin: 0 0 4px; } .race-r-val { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--navy); margin: 0 0 6px; } .race-r-sub { font-family: var(--sans); font-size: 11.5px; color: var(--ink-muted); opacity: 0.75; } .race-verdict { background: var(--accent-bg); border-radius: 8px; padding: 16px 18px; font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; text-align: left; } .race-verdict strong { color: var(--navy); } @media (max-width: 560px) { .race-result-row { flex-direction: column; } } /* ---------- scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-1 { transition-delay: 0.08s; } .reveal-2 { transition-delay: 0.16s; } .reveal-3 { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .reveal { transition: none; opacity: 1; transform: none; } } .scheduled-notice { max-width: 560px; margin: 0 auto 80px; text-align: center; padding: 40px 30px; border: 1px dashed var(--line); border-radius: 3px; color: var(--ink-muted); font-size: 15.5px; } .scheduled-notice strong { display: block; color: var(--navy); font-family: var(--serif); font-size: 19px; margin-bottom: 10px; } .scheduled-notice a { font-weight: 600; color: var(--navy); border-bottom: 1.4px solid var(--accent); } .related { max-width: 680px; margin: 0 auto; padding-bottom: 70px; } .related h4 { font-family: var(--serif); font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin-bottom: 20px; } .related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* ---------- nav dropdown (Three Pillars) ---------- */ .nav-dropdown { position: relative; } .nav-dropdown-btn { position: relative; padding: 6px 0; background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 19px; font-weight: 500; color: var(--navy); transition: color .15s ease; } .nav-dropdown-btn:hover, .nav-dropdown-btn:focus, .nav-dropdown:hover .nav-dropdown-btn, .nav-dropdown:focus-within .nav-dropdown-btn { color: var(--accent); } .nav-dropdown-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .2s ease; } .nav-dropdown-btn:hover::after, .nav-dropdown:hover .nav-dropdown-btn::after, .nav-dropdown:focus-within .nav-dropdown-btn::after { transform: scaleX(1); } .nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--white); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 14px 30px -18px rgba(58,88,133,0.35); padding: 8px; min-width: 230px; display: none; z-index: 30; margin-top: 16px; text-align: left; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: block; } .nav-dropdown-menu a { display: block; padding: 9px 12px; font-size: 13.5px; font-weight: 500; color: var(--navy); border-radius: 3px; } .nav-dropdown-menu a:hover { background: var(--accent-bg); } /* ---------- blog toolbar (filters + sort) ---------- */ .blog-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 48px; } .blog-toolbar .filters { margin-bottom: 0; } .toolbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .search-input { font-family: var(--sans); font-size: 13px; color: var(--navy); border: 1.4px solid var(--line); border-radius: 999px; padding: 9px 16px; background: var(--white); min-width: 180px; } .search-input::placeholder { color: var(--ink-muted); opacity: 0.55; } .search-input:focus { outline: none; border-color: var(--accent); } .sort-select { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--navy); border: 1.4px solid var(--line); border-radius: 999px; padding: 9px 32px 9px 16px; background: var(--white) url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%233A5885%22 stroke-width=%222%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E') no-repeat right 10px center / 14px; appearance: none; cursor: pointer; } .sort-select:hover { border-color: var(--accent); } /* ---------- about page ---------- */ .about-head { text-align: center; padding: 64px 0 8px; max-width: 680px; margin: 0 auto; } .about-head .kicker { margin-bottom: 14px; } .about-portrait { width: 176px; height: 176px; border-radius: 50%; object-fit: cover; margin: 22px auto 0; display: block; border: 3px solid #ffffff; box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(58, 88, 133, 0.15); } /* ---------- research & books ---------- */ .rb-section { margin-bottom: 80px; } .rb-section:last-child { margin-bottom: 0; } .rb-section-head { text-align: center; max-width: 620px; margin: 0 auto 40px; } .book-of-week { display: flex; gap: 28px; align-items: flex-start; background: var(--accent-bg); border: 1px solid var(--line); border-radius: 6px; padding: 30px 32px; margin-bottom: 34px; } .book-of-week .bow-cover { width: 130px; flex-shrink: 0; border-radius: 4px; box-shadow: 0 10px 24px -12px rgba(0,0,0,0.35); } .book-of-week .bow-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: block; } .book-of-week h4 { font-family: var(--serif); font-size: 21px; margin: 0 0 6px; } .book-of-week .bow-author { font-size: 13.5px; color: var(--ink-muted); margin: 0 0 12px; } .book-of-week p.bow-desc { font-size: 14.5px; color: var(--ink-muted); margin: 0 0 12px; max-width: 560px; } .rb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .rb-card { border: 1px solid var(--line); border-radius: 4px; padding: 22px 24px; background: var(--white); } .rb-card .rb-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; } .rb-card h4 { font-family: var(--serif); font-size: 17px; margin: 0 0 6px; } .rb-card p { font-size: 13.5px; color: var(--ink-muted); margin: 0 0 14px; } .rb-card a.rb-link { font-size: 13px; font-weight: 600; color: var(--navy); border-bottom: 1.4px solid var(--accent); padding-bottom: 1px; } .rb-empty { text-align: center; padding: 40px 20px; border: 1px dashed var(--line); border-radius: 4px; color: var(--ink-muted); font-size: 13.5px; } /* ---------- pillar page (evergreen article, no schedule gate) ---------- */ .article-body p.citation { font-size: 12.5px; color: var(--ink-muted); font-style: italic; margin: -10px 0 26px; } .article-body p.citation-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--ink-muted); margin: 30px 0 8px; } .article-body ul.citation-list { list-style: none; padding-left: 0; margin: 0 0 26px; font-size: 12.5px; color: var(--ink-muted); } .article-body ul.citation-list li { margin: 0 0 6px; } .article-body ul.citation-list a { text-decoration: underline; } .pillar-cta { text-align: center; margin-top: 50px; padding-top: 34px; border-top: 1px solid var(--line); } .pillar-cta a { font-size: 13.5px; font-weight: 600; color: var(--navy); border-bottom: 1.4px solid var(--accent); padding-bottom: 2px; } /* ---------- mobile / tablet nav (monogram opens a dropdown) ---------- */ @media (max-width: 1024px) { .site-nav .wrap { display: flex; justify-content: flex-start; } .nav-spacer-mirror { display: none; } .brand { cursor: pointer; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; grid-column: unset; justify-self: unset; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 18px 34px -20px rgba(58,88,133,0.35); padding: 18px 28px 22px; z-index: 25; } .nav-links.mobile-open { display: flex; } .nav-links a.nav-item, .nav-links .nav-dropdown-btn { padding: 10px 0; width: 100%; text-align: left; } .nav-links .btn.js-newsletter-trigger { margin-top: 10px; } .nav-links .theme-toggle { margin-top: 10px; } .nav-dropdown { width: 100%; } .nav-dropdown-menu { display: none; position: static; transform: none; box-shadow: none; border: none; margin: 0 0 4px 14px; padding: 0; min-width: 0; } .nav-dropdown-menu.mobile-open { display: block; } .nav-dropdown-menu a { padding: 8px 0; } article { padding: 0 40px; } } @media (max-width: 760px) { .pillars-grid, .posts-grid { grid-template-columns: 1fr; } .follow-grid { grid-template-columns: 1fr; max-width: 260px; } .related-grid { grid-template-columns: 1fr; } article { padding: 0 24px; } .site-footer .wrap { flex-direction: column; text-align: center; } .rb-grid { grid-template-columns: 1fr; } .book-of-week { flex-direction: column; align-items: center; text-align: center; } .book-of-week .bow-cover { width: 150px; } .book-of-week p.bow-desc { max-width: none; } .blog-toolbar { flex-direction: column; align-items: stretch; } }