/* ========================================================= Contact V2 — preview-only, style-only redesign of the Contact page in the approved Home V2 / About V2 / Work V2 / Project Detail V2 / Experience V2 / Education V2 / Publications V2 visual language. Loaded ONLY by templates/main/contact_v2.html (served at /contact-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 .contact-v2-*, so this file cannot affect Home V2, About V2, Work V2, Project Detail V2, Experience V2, Education V2, Publications V2, or any other page even if it were ever accidentally linked from one. None of those approved templates/CSS files are modified by this file or by adding it. This mirrors contact.html's centered .contact-card content exactly (lead copy, action row, social icon row, note) — the only change from the old page is visual: no beige card panel/border, V2 typography/colors/spacing instead. ========================================================= */ /* ---------- Hero (text-only) ---------- */ .contact-v2-hero { padding-top: 64px; padding-bottom: 24px; } .contact-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 0; } @media (min-width: 900px) { .contact-v2-hero { padding-top: 88px; padding-bottom: 32px; } .contact-v2-hero-heading { font-size: 44px; } } /* ---------- Centered contact block ---------- */ .contact-v2-section { padding-bottom: 96px; } .contact-v2-block { max-width: 640px; margin-inline: auto; text-align: center; } .contact-v2-lead { font-size: 18px; line-height: 1.6; color: var(--v2-muted); max-width: 52ch; margin: 0 auto; } /* ---------- Action row ---------- */ .contact-v2-actions-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; } a.contact-v2-btn { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; padding: 13px 26px; border-radius: 9999px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } a.contact-v2-btn--primary { background: var(--v2-navy); color: #ffffff; } a.contact-v2-btn--primary:hover { background: #142038; transform: translateY(-1px); } a.contact-v2-btn--secondary { background: transparent; border: 1px solid var(--v2-border-strong); color: var(--v2-navy); } a.contact-v2-btn--secondary:hover { border-color: var(--v2-orange); color: var(--v2-orange); } /* ---------- Social icon row ---------- */ .contact-v2-social-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 36px; } a.contact-v2-social-icon { width: 44px; height: 44px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--v2-border); color: var(--v2-muted); transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } /* Generic fallback SVG (unmatched platforms only — none of the current real SocialLink rows hit this branch, see contact_v2.html). */ .contact-v2-social-icon svg { width: 20px; height: 20px; } /* Real logo assets (media/logos/*.svg) — sized to fit inside the 44px circle without cropping/distorting, aspect ratio preserved via object-fit: contain. Restrained grayscale by default; hover reveals full color plus the orange border accent. */ .contact-v2-social-icon-img { width: 22px; height: 22px; max-width: 22px; max-height: 22px; object-fit: contain; filter: grayscale(100%); opacity: 0.7; transition: filter 0.15s ease, opacity 0.15s ease; } a.contact-v2-social-icon:hover .contact-v2-social-icon-img, a.contact-v2-social-icon:focus-visible .contact-v2-social-icon-img { filter: grayscale(0%); opacity: 1; } a.contact-v2-social-icon:hover, a.contact-v2-social-icon:focus-visible { border-color: var(--v2-orange); color: var(--v2-orange); transform: translateY(-2px); } /* ---------- Note ---------- Requalified as p.contact-v2-note (class + type selector) so it ties home_v2.css's `.home-v2 p { margin: 0; }` on specificity (0,1,1) and wins via source order (this stylesheet loads after home_v2.css) — a bare `.contact-v2-note { margin-top: ... }` (0,1,0) would otherwise always lose to that reset and silently render with no top margin. */ p.contact-v2-note { margin-top: 24px; font-size: 13px; color: var(--v2-muted); }