/* HGS — home.css: page-specific styles for index.html (landing) + wg/index.html. * Owned by Agent A. Builds on tokens/components from base.css — do not redefine those. */ /* Landing hero image: dark placeholder so a missing photo never looks broken */ .panel-media { background-color: var(--bg-soft); } .panel-media img { min-height: 100%; } /* Below-the-fold link cards: modern glass tiles with arrow affordance */ .card[href] { position: relative; display: block; overflow: hidden; text-decoration: none; border: 1px solid transparent; border-radius: 20px; background: linear-gradient(rgba(22, 19, 26, 0.92), rgba(22, 19, 26, 0.92)) padding-box, linear-gradient(165deg, rgba(255, 158, 77, 0.35), rgba(242, 239, 233, 0.1) 40%, rgba(200, 107, 152, 0.25)) border-box; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); transition: transform 0.22s ease, box-shadow 0.22s ease; } .card[href]::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); pointer-events: none; } .card[href]::after { content: "\2192"; position: absolute; right: 1.4rem; bottom: 1.15rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--accent); opacity: 0; transform: translateX(-8px); transition: opacity 0.22s ease, transform 0.22s ease; } .card[href] h3 { color: var(--ink); transition: color 0.2s ease; } .card[href]:hover, .card[href]:focus-visible { opacity: 1; transform: translateY(-4px); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); background: linear-gradient(rgba(26, 22, 31, 0.95), rgba(26, 22, 31, 0.95)) padding-box, linear-gradient(165deg, rgba(255, 158, 77, 0.65), rgba(242, 239, 233, 0.16) 40%, rgba(200, 107, 152, 0.45)) border-box; } .card[href]:hover h3 { color: var(--accent); } .card[href]:hover::after, .card[href]:focus-visible::after { opacity: 1; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .card[href]:hover { transform: none; } .card[href]::after { transition: none; } } /* ---------- WG page: compact opener (not full-viewport) ---------- * Note: already adds padding-top: var(--nav-h) * to
(see base.css), so this section must NOT add nav-h again — * doing so previously wasted a full nav-bar's height above the fold. */ .wg-opener { padding: 1.1rem 0 0.7rem; } .wg-opener .eyebrow { margin-bottom: 0.4rem; } .wg-opener .section-title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 0.3rem; } .wg-opener .section-sub { margin-bottom: 0; } /* ---------- People grid: quadratic poster wall ---------- */ .people-grid { list-style: none; display: grid; gap: 0.8rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 700px) { .people-grid { grid-template-columns: repeat(4, 1fr); max-width: 980px; margin-inline: auto; gap: 0.9rem; } } .person-tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-soft); } .person-tile:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .person-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.85); transition: filter 0.35s ease, transform 0.35s ease; } .person-tile:hover .person-photo, .person-tile:focus .person-photo, .person-tile:focus-within .person-photo { filter: grayscale(0); transform: scale(1.045); } /* Fun fact: real text in the DOM, revealed as a sliding/fading scrim on hover, keyboard focus, or (via :focus-within) tap on touch devices. */ .person-overlay { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; padding: 0.8rem; padding-bottom: 2.4rem; background: linear-gradient(180deg, rgba(14, 12, 16, 0.05) 0%, rgba(14, 12, 16, 0.94) 72%); opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; } .person-tile:hover .person-overlay, .person-tile:focus .person-overlay, .person-tile:focus-within .person-overlay { opacity: 1; transform: translateY(0); } .person-fact { color: rgba(242, 239, 233, 0.92); font-size: 0.8rem; line-height: 1.4; } /* Name label: always visible, pinned bottom-left, own gradient so it reads over both the plain photo and the fun-fact scrim. */ .person-name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 0.55rem 0.75rem; font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; background: linear-gradient(180deg, rgba(14, 12, 16, 0) 0%, rgba(14, 12, 16, 0.88) 85%); pointer-events: none; } /* Cheb's quiet easter egg: a small note linking to the hidden album page. */ .person-album-link { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.3rem; font: 600 0.72rem var(--font-body); letter-spacing: 0.05em; color: var(--ink); background: rgba(14, 12, 16, 0.62); border: 1px solid rgba(255, 158, 77, 0.55); border-radius: 999px; padding: 0.28rem 0.7rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .person-album-link:hover, .person-album-link:focus { background: var(--accent); border-color: var(--accent); color: var(--bg); opacity: 1; transform: translateY(-1px); text-decoration: none; } /* 8th tile: accent filler completing the 4x2 wall — brand wordmark, not a photo. */ .person-tile.fill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; text-align: center; background: linear-gradient(155deg, var(--card) 0%, var(--bg-soft) 100%); } .fill-word { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.02em; } .fill-word .end { color: var(--accent); } .fill-sub { color: var(--ink-soft); font-size: 0.75rem; letter-spacing: 0.03em; } @media (prefers-reduced-motion: reduce) { .person-photo, .person-overlay { transition: none; } } /* ---------- Group photo frame ---------- */ .group-frame { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); margin-bottom: 1.4rem; } .group-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background-color: var(--bg-soft); } .group-frame figcaption { padding: 0.9rem 1.2rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.85rem; letter-spacing: 0.02em; } /* ---------- Poster easter egg ---------- */ .poster-egg { font-size: 0.85rem; } .poster-egg summary { cursor: pointer; color: var(--ink-soft); font-weight: 500; letter-spacing: 0.02em; list-style: none; } .poster-egg summary::-webkit-details-marker { display: none; } .poster-egg summary::before { content: "+ "; color: var(--accent); } .poster-egg[open] summary::before { content: "\2013 "; } .poster-egg p { margin-top: 0.5rem; } .poster-egg a { color: var(--ink); border-bottom: 1px solid var(--line); } .poster-egg a:hover { border-color: var(--ink); } @media (max-width: 560px) { .people-grid { gap: 0.6rem; } .person-fact { font-size: 0.76rem; } } /* Group photo: compact presentation */ .group-frame-compact { margin-inline: auto; } .group-frame-compact img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 38%; } @media (max-width: 640px) { .group-frame-compact img { aspect-ratio: 16 / 9; } }