/* ========================================================================== Gable Steveson fan archive — design system Dark editorial shell, per-discipline accent. Every page sets --accent on from the discipline it is showing — Minnesota maroon for folkstyle, Olympic gold for freestyle, red for the cage — so colour shifts as you move through the career while the shell stays one system. The neutrals are pulled a few degrees warm rather than blue-grey, because maroon and gold on a cold black read as dirty rather than as warm. Inherited from the reference build in ../lana_del_rey and kept deliberately: the shell is the part worth reusing, the accents are the part worth replacing. ========================================================================== */ :root { --bg: #0b0a0c; --bg-raised: #16141a; --bg-hover: #1e1b23; --line: #2a262f; --line-soft: #1d1a22; --text: #f0ecee; --text-dim: #a79fa6; --text-mute: #756d75; --accent: #d9a441; --ink: #0b0a0c; /* text on a filled accent */ --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --radius: 10px; --maxw: 1240px; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ---------- Type ---------- */ h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; } h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.015em; } h3 { font-size: 1.15rem; } .eyebrow { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .lede { font-size: 1.05rem; color: var(--text-dim); max-width: 62ch; } .dim { color: var(--text-dim); } .mute { color: var(--text-mute); } /* ---------- Header ---------- */ .topbar { position: sticky; top: 0; z-index: 50; background: rgba(11, 10, 12, 0.86); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line-soft); } .topbar-in { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; height: 62px; display: flex; align-items: center; gap: 28px; } .brand { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; } .brand span { color: var(--accent); } .nav { display: flex; gap: 22px; margin-left: auto; align-items: center; } .nav a { font-size: 0.83rem; font-weight: 500; color: var(--text-dim); letter-spacing: 0.02em; padding: 6px 0; border-bottom: 1.5px solid transparent; transition: color .15s, border-color .15s; } .nav a:hover { color: var(--text); } .nav a.active { color: var(--text); border-bottom-color: var(--accent); } .nowplaying { display: flex; align-items: center; gap: 10px; max-width: var(--maxw); margin: 0 auto; padding: 7px 24px 9px; font-size: 0.78rem; color: var(--text-dim); border-top: 1px solid var(--line-soft); } .nowplaying[hidden] { display: none; } .np-label { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); } .np-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .np-btn, .np-sound { background: none; border: 1px solid var(--line); border-radius: 5px; color: var(--text-dim); font-size: 0.7rem; padding: 3px 9px; cursor: pointer; font-family: var(--sans); line-height: 1.4; } .np-btn:hover, .np-sound:hover { color: var(--text); border-color: var(--text-mute); } /* Amber while muted: the visitor can't hear anything and needs to know why. */ .np-sound.muted { background: #eab308; border-color: #eab308; color: var(--ink); } @media (max-width: 640px) { .np-label { display: none; } .nowplaying { padding: 6px 14px 8px; } } /* ---------- Era rail: the discography as its own navigation ---------------- One dot per studio record in its own colour, expanding to the album's name on hover. Collapsed it is a palette of the catalogue; opened it is a menu. The label is in the markup rather than a ::after content string so screen readers and search engines get the album names too. */ .rail { display: flex; gap: 5px; align-items: center; } .rail .dot { height: 26px; display: flex; align-items: center; /* max-width, not width: `width: auto` is not an animatable value, so a dot that expands by width snaps open instead of sliding. */ min-width: 26px; max-width: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--era) 26%, transparent); font-size: 0.72rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; transition: max-width .24s ease, background .15s, color .15s, border-color .15s; } .rail .dot span { padding: 0 10px; opacity: 0; transition: opacity .18s; } .rail .dot:hover, .rail .dot.active { max-width: 260px; background: var(--era); border-color: var(--era); color: var(--ink); } .rail .dot:hover span, .rail .dot.active span { opacity: 1; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 76px 0 60px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -40% 30% 40% -10%; background: radial-gradient(ellipse at center, var(--accent) 0%, transparent 68%); opacity: 0.13; pointer-events: none; } .hero-grid { position: relative; display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; } .hero h1 { margin-bottom: 18px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 8px; border: 1px solid var(--line); font-size: 0.86rem; font-weight: 600; color: var(--text); background: transparent; cursor: pointer; transition: all .15s; font-family: var(--sans); } .btn:hover { background: var(--bg-hover); border-color: var(--text-mute); } .btn-accent { background: var(--accent); border-color: var(--accent); color: var(--ink); } .btn-accent:hover { filter: brightness(1.12); background: var(--accent); } .btn-sm { padding: 7px 13px; font-size: 0.78rem; } /* ---------- Sections ---------- */ .section { padding: 62px 0; border-top: 1px solid var(--line-soft); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; } /* ---------- Album grid ---------- */ .albums { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); } .album-card { display: block; } .album-art { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--line); transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s; } .album-art img { width: 100%; height: 100%; object-fit: cover; } .album-card:hover .album-art { transform: translateY(-4px); border-color: var(--era); } .album-art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgba(0,0,0,.75)); opacity: 0; transition: opacity .22s; } .album-card:hover .album-art::after { opacity: 1; } .album-play { position: absolute; left: 12px; bottom: 12px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: var(--era); color: var(--ink); display: grid; place-items: center; font-size: 0.9rem; opacity: 0; transform: translateY(6px); transition: all .22s; } .album-card:hover .album-play { opacity: 1; transform: none; } /* The home hero cover is the page's main call to action, so its play badge is always visible rather than waiting for a hover that never happens on touch. */ .hero-art { cursor: pointer; } .hero-play { opacity: .92; transform: none; width: 54px; height: 54px; font-size: 1.1rem; } .hero-art:hover .hero-play, .hero-art:focus-visible .hero-play { opacity: 1; } .hero-art:focus-visible { outline: 2px solid var(--era); outline-offset: 3px; } .album-meta { margin-top: 12px; } .album-title { font-family: var(--serif); font-size: 1.08rem; line-height: 1.25; } .album-sub { font-size: 0.78rem; color: var(--text-mute); margin-top: 3px; } /* Always-visible actions. A hover-only play button makes a grid of covers look inert, which is exactly how this page read before. */ .album-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .act { font-size: 0.7rem; font-weight: 600; padding: 4px 10px; border-radius: 5px; border: 1px solid var(--line); color: var(--text-dim); background: transparent; cursor: pointer; font-family: var(--sans); transition: all .14s; } .act:hover { color: var(--text); border-color: var(--text-mute); } .act-play:hover { color: var(--ink); background: var(--era); border-color: var(--era); } .act-sp:hover { color: #1db954; border-color: #1db954; } .badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); color: var(--text-dim); } .badge-full { color: var(--era); border-color: color-mix(in srgb, var(--era) 45%, transparent); } .badge-partial { color: #eab308; border-color: #6b5a12; } .badge-none { color: var(--text-mute); } /* ---------- Album page ---------- */ .album-hero { padding: 54px 0 40px; position: relative; overflow: hidden; } .album-hero::before { content: ""; position: absolute; inset: -60% 0 50% 0; background: radial-gradient(ellipse at 20% 100%, var(--accent), transparent 62%); opacity: 0.16; pointer-events: none; } .album-hero-grid { position: relative; display: grid; gap: 40px; grid-template-columns: 264px minmax(0, 1fr); align-items: end; } .album-hero-art { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.55); } .facts { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 22px; } .fact-k { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); } .fact-v { font-size: 1rem; font-family: var(--serif); margin-top: 2px; } /* ---------- Tracklist ---------- */ .tracklist { border-top: 1px solid var(--line-soft); } .track { display: grid; grid-template-columns: 34px 1fr auto auto auto; gap: 14px; align-items: center; padding: 11px 12px; border-bottom: 1px solid var(--line-soft); border-radius: 7px; transition: background .12s; } .track.playable { cursor: pointer; } .track.playable:hover { background: var(--bg-hover); } .track.unplayable { opacity: 0.42; cursor: default; } /* Has no official video but is on streaming — dimmed, not disabled, and its Spotify link stays permanently visible since there's nothing else to click. */ .track.no-video { opacity: 0.8; } .track.no-video .track-links { opacity: 1; } .track-no { font-family: var(--mono); font-size: 0.78rem; color: var(--text-mute); text-align: right; } .track.playable:hover .track-no { color: var(--accent); } .track-title { font-size: 0.95rem; } .track-note { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; } .track-dur { font-family: var(--mono); font-size: 0.78rem; color: var(--text-mute); } .track-links { display: flex; gap: 6px; opacity: 0; transition: opacity .14s; } .track:hover .track-links { opacity: 1; } .lnk { font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--text-dim); } .lnk-sp:hover { color: #1db954; border-color: #1db954; } /* ---------- Tracks index (the data table) ---------- */ .filterbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; position: sticky; top: 62px; z-index: 20; background: var(--bg); padding: 16px 0; border-bottom: 1px solid var(--line-soft); } .search-input { flex: 1 1 320px; min-width: 220px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; color: var(--text); font-size: 0.92rem; font-family: var(--sans); } .search-input:focus { outline: none; border-color: var(--accent); } .count { font-size: 0.8rem; color: var(--text-mute); font-family: var(--mono); } table.data { width: 100%; border-collapse: collapse; } table.data th { text-align: left; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; white-space: nowrap; } table.data th:hover { color: var(--text); } table.data td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); font-size: 0.9rem; } table.data tr.playable { cursor: pointer; } table.data tr.playable:hover td { background: var(--bg-hover); } table.data tr.unplayable { opacity: 0.4; } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 9px; vertical-align: middle; } /* ---------- Gallery ---------- Masonry via CSS columns, so the original aspect ratios survive instead of everything being cropped to a square. Column width is deliberately modest. An earlier version asked for two 460px columns, which on a 1440px screen renders each photograph seven hundred pixels wide — that is a slideshow with a scrollbar, not a gallery, and it makes a set of 466 images feel like a set of six. Four columns is enough to see a face and few enough to see the frame. */ .gallery { columns: 4 260px; column-gap: 16px; } @media (min-width: 1800px) { .gallery { columns: 5 260px; } } @media (max-width: 900px) { .gallery { columns: 2 150px; column-gap: 12px; } } .shot { break-inside: avoid; margin-bottom: 20px; position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; background: var(--bg-raised); } /* height:auto is load-bearing. Every tile carries width/height attributes so the layout doesn't jump while images stream in, and those attributes are also a presentational hint: with the CSS setting only `width`, the browser uses the HEIGHT ATTRIBUTE as the used height and stretches the photograph to it. The worst offenders came out 60% too tall. */ .shot img { width: 100%; height: auto; display: block; /* aspect-ratio + cover crops the extremes to the clamped shape set inline; a tile already inside the bounds gets its true ratio and is not cropped. */ aspect-ratio: var(--ar, auto); object-fit: cover; object-position: center 30%; transition: transform .5s cubic-bezier(.2,.7,.3,1); } .shot:hover img { transform: scale(1.03); } .shot-cap { position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(0,0,0,.88)); font-size: 0.86rem; line-height: 1.4; opacity: 0; transition: opacity .2s; } .shot:hover .shot-cap { opacity: 1; } /* An image Wikimedia refuses to serve leaves a broken-image glyph, which looks far worse than an absent tile — so a failed load removes the tile entirely. */ .shot.broken { display: none; } /* ---------- Shared bits that outgrew one page ---------- Both of these were defined inside a single template's scoped