/* ========================================================= About V2 — preview-only, Home-V2-visual-language About page. Loaded ONLY by templates/main/about_v2.html (served at /about-v2/), alongside static/css/home_v2.css (unmodified, loaded first in that template's for the shared tokens/ reset/nav/footer/preview-flag classes — see home_v2.css for --v2-navy, --v2-orange, --v2-muted, --v2-border, --v2-container, --v2-gutter, --v2-section-padding). Every selector below is prefixed .about-v2-*, so this file cannot affect Home V2 or any other page even if it were ever accidentally linked from one. home_v2.css/home_v2.html are not modified by this file or by adding it. ========================================================= */ /* ---------- 1. Hero (text-only, no portrait) ---------- */ .about-v2-hero { padding-top: 64px; padding-bottom: 56px; } .about-v2-hero-inner { max-width: 850px; } .about-v2-hero-heading { font-family: "Playfair Display", serif; font-weight: 700; font-size: 34px; line-height: 1.2; letter-spacing: -0.01em; color: var(--v2-navy); margin: 16px 0 24px; } .about-v2-hero-text { font-size: 18px; line-height: 1.7; color: var(--v2-muted); max-width: 800px; margin: 0; } @media (min-width: 900px) { .about-v2-hero { padding-top: 88px; padding-bottom: 72px; } .about-v2-hero-heading { font-size: 44px; } } /* ---------- Shared section rhythm ---------- */ .about-v2-section { padding-block: 48px; } .about-v2-section-label, .about-v2-eyebrow-small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--v2-orange); margin-bottom: 18px; } .about-v2-body-text { font-size: 17px; line-height: 1.75; color: var(--v2-ink); max-width: 800px; margin: 0; } /* ---------- 2. How I Approach Problems + Practical Example — one accent ---------- */ .about-v2-accent-block { border-left: 3px solid var(--v2-orange); padding-left: 28px; } .about-v2-accent-block > * + * { margin-top: 20px; } /* ---------- Principles — real Principle.objects.all(), no limit ---------- */ .about-v2-principles { padding-block: 48px; } .about-v2-principles-heading { font-family: "Playfair Display", serif; font-weight: 700; font-size: 30px; color: var(--v2-navy); margin: 0 0 28px; } .about-v2-principles-list { display: flex; flex-direction: column; } .about-v2-principle-row { border-left: 2px solid var(--v2-orange); padding: 18px 0 18px 24px; } .about-v2-principle-row + .about-v2-principle-row { margin-top: 4px; } .about-v2-principle-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: 18px; color: var(--v2-navy); margin: 0 0 6px; } .about-v2-principle-description { font-size: 15px; line-height: 1.6; color: var(--v2-muted); max-width: 800px; margin: 0; } @media (min-width: 900px) { .about-v2-principles-heading { font-size: 36px; } } /* ---------- 4. Core principle — small editorial closing statement ---------- */ .about-v2-pullquote-section { padding-block: 32px; border-top: 1px solid var(--v2-border); } .about-v2-pullquote { font-family: "Playfair Display", serif; font-weight: 600; font-style: italic; font-size: 18px; line-height: 1.6; color: var(--v2-navy); max-width: 800px; margin: 0; } @media (min-width: 900px) { .about-v2-pullquote { font-size: 20px; } } /* ---------- 7. Final CTA ---------- */ .about-v2-final-cta { padding-block: 40px; border-top: 1px solid var(--v2-border); } .about-v2-final-cta-inner { text-align: center; } .about-v2-final-cta-heading { font-family: "Playfair Display", serif; font-weight: 700; font-size: 32px; color: var(--v2-navy); margin: 0 0 20px; } .about-v2-final-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; } a.about-v2-cta-btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--v2-navy); color: #ffffff; font-size: 14px; font-weight: 600; padding: 14px 26px; border-radius: 9999px; transition: background 0.15s ease, transform 0.15s ease; } .about-v2-cta-btn-primary svg { width: 16px; height: 16px; color: var(--v2-orange); } a.about-v2-cta-btn-primary:hover { background: #142038; transform: translateY(-1px); } a.about-v2-cta-btn-text { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--v2-navy); border-bottom: 1px solid var(--v2-border-strong); padding-bottom: 2px; transition: color 0.15s ease, border-color 0.15s ease; } .about-v2-cta-btn-text svg { width: 14px; height: 14px; } a.about-v2-cta-btn-text:hover { color: var(--v2-orange); border-color: var(--v2-orange); } @media (min-width: 900px) { .about-v2-final-cta-heading { font-size: 40px; } }