/* ========================================================= Project Detail V2 — preview-only, style-only redesign of the Project Detail article in the approved Home V2 / About V2 / Work V2 visual language. Loaded ONLY by templates/main/project_detail_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 .project-detail-v2-*, so this file cannot affect Home V2, About V2, Work V2, or any other page even if it were ever accidentally linked from one. home_v2.css/html, about_v2.css/html, and work_v2.css/html are not modified by this file or by adding it. The three functional classes shared with the (unmodified) old work_detail article — work-code-block, work-code-copy, and the data-work-copy-code / data-work-code attributes — are kept only so static/js/work.js keeps working unchanged on this page too; they carry no styling here. ========================================================= */ .project-detail-v2-container { padding-top: 40px; padding-bottom: 64px; } .project-detail-v2-back { display: inline-block; font-size: 13px; font-weight: 600; color: var(--v2-muted); margin-bottom: 28px; transition: color 0.15s ease; } .project-detail-v2-back:hover { color: var(--v2-orange); } /* ---------- Hero / metadata ---------- */ .project-detail-v2-hero { max-width: 850px; } .project-detail-v2-meta-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 14px; } .project-detail-v2-category { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-orange); } .project-detail-v2-period { font-size: 13px; color: var(--v2-muted); } .project-detail-v2-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; color: var(--v2-navy); margin: 0 0 14px; } .project-detail-v2-subtitle { font-size: 17px; line-height: 1.6; color: var(--v2-muted); margin: 0 0 24px; } @media (min-width: 900px) { .project-detail-v2-title { font-size: 42px; } } .project-detail-v2-facts { display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 20px; padding-top: 20px; border-top: 1px solid var(--v2-border); } .project-detail-v2-fact { display: flex; flex-direction: column; gap: 4px; } .project-detail-v2-fact dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v2-muted); margin: 0; } .project-detail-v2-fact dd { font-size: 14px; font-weight: 600; color: var(--v2-navy); margin: 0; } .project-detail-v2-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .project-detail-v2-tech-tag { font-size: 12px; font-weight: 600; color: var(--v2-muted); border: 1px solid var(--v2-border); border-radius: 6px; padding: 4px 10px; } .project-detail-v2-meta-links { display: flex; flex-wrap: wrap; gap: 20px; } .project-detail-v2-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--v2-orange); } .project-detail-v2-link:hover { text-decoration: underline; } .project-detail-v2-link-arrow { font-size: 12px; } /* ---------- Hero figure ---------- */ .project-detail-v2-hero-figure { max-width: 1150px; margin: 32px auto 0; } .project-detail-v2-hero-image { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--v2-border); } /* ---------- Section rhythm ---------- */ .project-detail-v2-body { margin-top: 48px; } .project-detail-v2-section { margin-bottom: 48px; } .project-detail-v2-section-heading { font-family: "Playfair Display", serif; font-weight: 700; font-size: 24px; color: var(--v2-navy); margin: 0 0 18px; max-width: 800px; } .project-detail-v2-empty { font-size: 14px; color: var(--v2-muted); } /* ---------- Prose (Text sections) ---------- */ .project-detail-v2-prose { max-width: 800px; font-size: 16px; line-height: 1.75; color: var(--v2-ink); } .project-detail-v2-prose p { margin: 0 0 18px; } .project-detail-v2-prose p:last-child { margin-bottom: 0; } .project-detail-v2-prose .quote-block { margin: 24px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--v2-orange); font-family: "Playfair Display", serif; font-style: italic; font-size: 18px; color: var(--v2-navy); } /* ---------- Callout / Result (legacy) ---------- */ .project-detail-v2-callout, .project-detail-v2-result { max-width: 800px; border-left: 3px solid var(--v2-orange); padding: 4px 0 4px 24px; font-size: 16px; line-height: 1.7; color: var(--v2-ink); } .project-detail-v2-callout p, .project-detail-v2-result p { margin: 0 0 14px; } .project-detail-v2-callout p:last-child, .project-detail-v2-result p:last-child { margin-bottom: 0; } /* ---------- Quote sections ---------- */ .project-detail-v2-pullquote { max-width: 800px; margin: 0; padding: 6px 0 6px 24px; border-left: 3px solid var(--v2-orange); font-family: "Playfair Display", serif; font-style: italic; font-weight: 600; font-size: 22px; line-height: 1.5; color: var(--v2-navy); } .project-detail-v2-pullquote p { margin: 0 0 12px; } .project-detail-v2-quote-attribution { display: block; margin-top: 12px; font-family: "Inter", sans-serif; font-style: normal; font-weight: 600; font-size: 13px; color: var(--v2-muted); } /* ---------- Metrics ---------- */ .project-detail-v2-metrics { display: flex; flex-wrap: wrap; gap: 16px; max-width: 1150px; } .project-detail-v2-metric { flex: 1 1 160px; background: #ffffff; border: 1px solid var(--v2-border); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 6px; } .project-detail-v2-metric-value { font-family: "Playfair Display", serif; font-weight: 700; font-size: 28px; color: var(--v2-orange); line-height: 1.1; } .project-detail-v2-metric-label { font-size: 13px; color: var(--v2-muted); } /* ---------- Figures (Image / Architecture / Video) ---------- */ .project-detail-v2-figure { margin: 0 auto; } .project-detail-v2-figure--normal { max-width: 800px; } .project-detail-v2-figure--wide { max-width: 1150px; } .project-detail-v2-figure--full { max-width: 100%; } .project-detail-v2-figure-image { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--v2-border); } .project-detail-v2-figure-caption { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--v2-muted); } .project-detail-v2-figure-label { font-weight: 700; color: var(--v2-navy); } .project-detail-v2-figure-source { font-size: 12px; opacity: 0.85; } /* ---------- Video ---------- */ .project-detail-v2-video { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--v2-border); background: #000000; } .project-detail-v2-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; border: 1px solid var(--v2-border); } .project-detail-v2-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------- Gallery ---------- */ .project-detail-v2-gallery { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 auto; } .project-detail-v2-gallery--normal { max-width: 800px; } .project-detail-v2-gallery--wide { max-width: 1150px; } .project-detail-v2-gallery--full { max-width: 100%; } .project-detail-v2-gallery-image { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--v2-border); } @media (min-width: 700px) { .project-detail-v2-gallery { grid-template-columns: repeat(2, 1fr); } } /* ---------- Code ---------- */ .project-detail-v2-code { max-width: 1150px; margin: 0 auto; background: var(--v2-navy); border-radius: 10px; overflow: hidden; } .project-detail-v2-code-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .project-detail-v2-code-label { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.7); } .project-detail-v2-code-copy { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; padding: 4px 10px; cursor: pointer; transition: background 0.15s ease; } .project-detail-v2-code-copy:hover { background: rgba(255, 255, 255, 0.16); } .project-detail-v2-code-pre { margin: 0; padding: 16px; overflow-x: auto; } .project-detail-v2-code-pre code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 13px; line-height: 1.6; color: #e9edf5; white-space: pre; } .project-detail-v2-code-caption { max-width: 1150px; margin: 10px auto 0; font-size: 13px; color: var(--v2-muted); } /* ---------- Resources ---------- */ .project-detail-v2-resources { max-width: 800px; margin-top: 48px; } .project-detail-v2-resources-heading { font-family: "Playfair Display", serif; font-weight: 700; font-size: 22px; color: var(--v2-navy); margin: 0 0 16px; } .project-detail-v2-resources-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } /* ---------- Prev / Next nav ---------- */ .project-detail-v2-article-nav { display: flex; flex-direction: column; gap: 20px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--v2-border); } .project-detail-v2-nav-link { display: flex; flex-direction: column; gap: 4px; } .project-detail-v2-nav-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v2-muted); } .project-detail-v2-nav-title { font-family: "Playfair Display", serif; font-weight: 600; font-size: 16px; color: var(--v2-navy); transition: color 0.15s ease; } .project-detail-v2-nav-link:hover .project-detail-v2-nav-title { color: var(--v2-orange); } @media (min-width: 700px) { .project-detail-v2-article-nav { flex-direction: row; justify-content: space-between; } .project-detail-v2-nav-next { align-items: flex-end; text-align: right; } }