/* ========================================================= Work V2 — preview-only, style-only redesign of the Work index in the approved Home V2 / About V2 visual language. Loaded ONLY by templates/main/work_v2.html (served at /work-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 .work-v2-*, so this file cannot affect Home V2, About V2, or any other page even if it were ever accidentally linked from one. home_v2.css/home_v2.html and about_v2.css/about_v2.html are not modified by this file or by adding it. ========================================================= */ /* ---------- Hero (text-only) ---------- */ .work-v2-hero { padding-top: 64px; padding-bottom: 40px; } .work-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 20px; } .work-v2-hero-text { font-size: 17px; line-height: 1.65; color: var(--v2-muted); max-width: 750px; margin: 0; } @media (min-width: 900px) { .work-v2-hero { padding-top: 88px; padding-bottom: 48px; } .work-v2-hero-heading { font-size: 44px; } } /* ---------- Project list — editorial rows, no cards ---------- */ .work-v2-projects { padding-bottom: 64px; } .work-v2-project-list { display: flex; flex-direction: column; border-top: 1px solid var(--v2-border); } .work-v2-project-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding-block: 24px; border-bottom: 1px solid var(--v2-border); } .work-v2-project-year { font-family: "Playfair Display", serif; font-weight: 700; font-size: 18px; color: var(--v2-orange); } .work-v2-project-body { display: flex; flex-direction: column; gap: 6px; max-width: 800px; } .work-v2-project-category { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-muted); } .work-v2-project-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--v2-navy); } .work-v2-project-summary { font-size: 15px; line-height: 1.6; color: var(--v2-muted); } .work-v2-project-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--v2-orange); margin-top: 4px; transition: gap 0.15s ease; } .work-v2-project-row:hover .work-v2-project-cta { gap: 8px; } .work-v2-empty { padding-block: 32px; font-size: 14px; color: var(--v2-muted); } @media (min-width: 700px) { .work-v2-project-row { grid-template-columns: 110px 1fr; align-items: start; padding-block: 32px; gap: 24px; } .work-v2-project-year { font-size: 20px; padding-top: 2px; } } @media (min-width: 900px) { .work-v2-project-row { grid-template-columns: 140px 1fr; } .work-v2-project-title { font-size: 24px; } } /* ---------- Category filter row (client-side, .work-v2-* only) ---------- Active-state color/shape borrows directly from the approved "Read the Journey" CTA (.home-v2-journey-btn in home_v2.css: navy background, white text, rounded — not a pill as large as that CTA, since these are compact navigation controls, not a primary action). */ .work-v2-filters-section { margin-top: 28px; margin-bottom: 40px; } .work-v2-filter-row { display: flex; align-items: center; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .work-v2-filter-row::-webkit-scrollbar { display: none; } .work-v2-filter-btn { appearance: none; background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 6px 14px; margin: 0; flex: 0 0 auto; white-space: nowrap; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--v2-navy); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .work-v2-filter-btn:hover { color: var(--v2-orange); border-color: var(--v2-border); background: rgba(27, 42, 74, 0.04); } .work-v2-filter-btn:focus-visible { outline: none; border-color: var(--v2-orange); box-shadow: 0 0 0 2px rgba(232, 103, 44, 0.25); } .work-v2-filter-btn.is-active { background: var(--v2-navy); border-color: var(--v2-navy); color: #ffffff; } .work-v2-filter-btn.is-active:hover { background: #142038; border-color: #142038; color: #ffffff; } .work-v2-project-row[hidden] { display: none; }