/* ============================================================================= * LAYER 1 of 3 — structure and base typography. * * The site loads three stylesheets in this order (see index.html ): * * 1. styles.css structure, layout, base type. Tokens: --ink --paper --warm * 2. flagship.css editorial art direction. Tokens: --void --bone --ember * 3. palette.css the shipped brand skin. Tokens: --maize --paarl * --millbrook --charade * --woodsmoke --bronze * * Each layer restyles selectors the earlier layers already defined, so * palette.css wins on anything visual. When a colour or spacing change here * appears to do nothing, a later layer is overriding it -- grep the selector * across all three files before editing. * * The --ink/--paper/--warm tokens below are still consumed by rules in * palette.css (which redefines them via var()), so they are load-bearing; * do not delete them. * * NOTE: "Barlow Condensed" in --display below is never actually loaded (only * DM Sans is fetched from Google Fonts, and PT Varsity Block comes from * assets/fonts). It is an inert fallback: either add it to the font link or * drop it from the stack. Behaviour today is unaffected either way. * ========================================================================== */ :root { --ink: #151514; --ink-2: #20201e; --paper: #e7e1d4; --warm: #c6974d; --muted: #9b968d; --line: rgba(231, 225, 212, 0.18); --display: "Barlow Condensed", Impact, sans-serif; --body: "DM Sans", Arial, sans-serif; } * { box-sizing: border-box; } /* wraps the images that ship a WebP alongside a PNG fallback. It must stay layout-transparent: .hero-art is a grid with place-items:center and .badger-logo sizes itself with width:min(82%,480px), so a wrapper box would resolve that percentage against the wrapper instead of the grid area. */ picture { display: contents; } /* display: contents promotes the picture's children into the parent's layout, which includes . .brand is a flex row with gap: 11px, so the source still counted as an item and burned one gap -- pushing the logo 11px right of the header's 36px padding edge while the nav sat flush at 36px on the other side. That asymmetry is what read as the lockup not being centred. */ picture > source { display: none; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--body); font-size: 16px; } .grain { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: 0.07; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); } .section-shell { width: min(1180px, calc(100% - 64px)); margin: auto; } .skip-link { position: fixed; left: -999px; } .skip-link:focus { left: 20px; top: 20px; z-index: 100; background: #fff; color: #000; padding: 12px; } .site-header { height: 86px; width: min(1320px, calc(100% - 64px)); margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 5; } .brand { display: inline-flex; align-items: center; color: var(--paper); gap: 11px; text-decoration: none; text-transform: uppercase; font: 700 20px/1 var(--display); letter-spacing: 0.03em; } .brand-mark { display: grid; place-items: center; border: 2px solid var(--warm); height: 31px; width: 31px; color: var(--warm); font-size: 15px; } .nav { display: flex; align-items: center; gap: 28px; } .nav a { color: #d1cbc0; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .nav a:hover, .text-link:hover { color: var(--warm); } .nav .nav-cta { color: var(--ink); background: var(--warm); padding: 11px 18px; } .menu-button { display: none; } .hero { min-height: 690px; display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 35px; align-items: center; padding: 88px 0 70px; } .eyebrow { color: var(--warm); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.17em; margin: 0 0 20px; display: flex; align-items: center; gap: 10px; } .eyebrow span { height: 2px; width: 26px; background: var(--warm); display: inline-block; } .hero h1, h2 { font: 800 clamp(60px, 7.7vw, 112px)/0.85 var(--display); letter-spacing: -0.025em; margin: 0; text-transform: uppercase; } .hero h1 em, h2 em { font-style: normal; color: var(--warm); } .hero-summary { color: #bdb7ad; line-height: 1.7; max-width: 485px; margin: 31px 0 29px; font-size: 16px; } .hero-actions { display: flex; gap: 26px; align-items: center; } .button { display: inline-flex; align-items: center; gap: 25px; padding: 16px 21px; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-decoration: none; } .button-primary { background: var(--warm); color: var(--ink); } .button span, .text-link span { font-size: 18px; line-height: 0.4; } .text-link { color: var(--paper); text-decoration: none; text-transform: uppercase; font-size: 12px; letter-spacing: 0.09em; font-weight: 700; } .listen-on { margin-top: 68px; display: flex; align-items: center; gap: 15px; color: #969187; font-weight: 600; font-size: 12px; } .listen-on span { font-size: 10px; letter-spacing: 0.11em; color: #77736d; } .listen-on a { color: #c2bcb1; text-decoration: none; } .listen-on i { height: 3px; width: 3px; background: #736f66; border-radius: 50%; } .hero-art { height: 590px; position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient( circle at 50% 40%, #4a453b 0, #272622 38%, #181817 70% ); } .hero-art:after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(198, 151, 77, 0.28); pointer-events: none; } .badger { z-index: 2; width: 96%; height: 96%; filter: drop-shadow(8px 18px 3px rgba(0, 0, 0, 0.3)); } .badge-shadow { fill: #111; } .back-ear { fill: #4c4943; } .back-ear-in { fill: #222; } .head { fill: #4a4742; } .face { stroke: #171716; stroke-width: 5; } .art-label { position: absolute; z-index: 3; bottom: 24px; left: 25px; margin: 0; font: 700 12px/1.2 var(--display); letter-spacing: 0.1em; color: #d6ccbb; } .target-ring { position: absolute; border: 1px solid rgba(198, 151, 77, 0.22); border-radius: 50%; z-index: 1; } .ring-one { height: 490px; width: 490px; } .ring-two { height: 660px; width: 660px; } .mission { padding: 145px 0 130px; } .mission-grid { display: grid; grid-template-columns: 1.24fr 0.76fr; gap: 80px; align-items: start; } .mission h2 { font-size: clamp(50px, 6vw, 88px); } .mission-copy { border-left: 1px solid var(--warm); padding-left: 25px; color: #bbb4a8; line-height: 1.72; margin-top: 8px; } .mission-copy p:first-child { margin-top: 0; } .mission-copy .text-link { display: inline-block; margin-top: 18px; } .pillars { background: #d8d0c1; color: var(--ink); padding: 100px 0; } .section-top { display: flex; justify-content: space-between; align-items: end; margin-bottom: 42px; } .section-top .eyebrow { margin: 0; } .section-top > p { margin: 0; color: #625e57; font-size: 14px; } .pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #aaa295; } .pillar-grid article { padding: 21px 25px 5px; border-right: 1px solid #aaa295; min-height: 282px; } .pillar-grid article:first-child { padding-left: 0; } .pillar-grid article:last-child { border-right: none; } .number { font: 700 13px var(--display); color: #887254; } .icon { font-size: 34px; color: #91764e; margin: 36px 0 25px; height: 35px; } .pillar-grid h3 { font: 800 31px var(--display); letter-spacing: 0.02em; margin: 0 0 12px; } .pillar-grid p { margin: 0; color: #605c55; line-height: 1.6; font-size: 14px; max-width: 220px; } .episodes { padding: 125px 0 135px; } .episodes h2 { font-size: 74px; } .button-outline { border: 1px solid #615d55; color: var(--paper); padding: 13px 17px; } .episode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; } .featured-episode { display: grid; grid-template-columns: 180px 1fr; gap: 25px; } .episode-art { height: 225px; background: #b78643; color: #171717; padding: 18px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .episode-art:after { content: "PT"; position: absolute; font: 900 150px/0.7 var(--display); opacity: 0.13; right: -9px; bottom: 0; } .episode-art span, .episode-art small { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; z-index: 1; } .episode-art strong { font: 800 37px/0.77 var(--display); margin: auto 0 4px; z-index: 1; } .episode-detail { align-self: center; } .episode-label { color: var(--warm); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .episode-detail h3, .episode-list h3 { font: 700 34px/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.01em; margin: 10px 0 16px; } .episode-detail > p:not(.episode-label) { font-size: 14px; color: #aaa49a; line-height: 1.65; } .play-link { color: var(--paper); font-size: 12px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.09em; text-decoration: none; } .episode-list { border-top: 1px solid var(--line); } .episode-list article { min-height: 106px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 38px 1fr 20px; align-items: center; gap: 15px; } .episode-list span { color: var(--warm); font: 700 17px var(--display); } .episode-list p { margin: 0; color: #979188; text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; } .episode-list h3 { font-size: 26px; margin: 6px 0 0; } .episode-list a { color: var(--warm); font-size: 23px; text-decoration: none; } .join { background: linear-gradient(108deg, #25231f 0%, #25231f 50%, #373127 100%); padding: 120px 32px; } .join-content { max-width: 690px; margin: auto; text-align: center; } .join .eyebrow { justify-content: center; } .join h2 { font-size: clamp(60px, 8vw, 106px); } .join-content > p:not(.eyebrow) { color: #b8b0a3; line-height: 1.7; margin: 27px auto; max-width: 500px; } .signup { max-width: 500px; margin: 36px auto 13px; display: flex; background: #e3ddd1; padding: 5px; } .signup input { font: 500 14px var(--body); color: var(--ink); border: 0; background: transparent; flex: 1; min-width: 0; padding: 13px; } .signup input:focus { outline: 2px solid var(--warm); } /* Email and cell sit side by side inside one cream bar, so without a rule between them they read as a single wide field. Selected by type rather than with input + input, because each field is preceded by its own sr-only label. */ .signup input[type="tel"] { border-left: 1px solid rgba(21, 21, 20, 0.16); } .signup button { font: 700 11px var(--body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--paper); border: 0; background: #1c1b19; padding: 0 18px; cursor: pointer; } .join small { color: #928b80; font-size: 11px; } .site-footer { padding: 36px 0 25px; display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 20px; align-items: center; color: #807a70; } .site-footer > p { font-size: 12px; margin: 0; } .site-footer > div { display: flex; gap: 19px; justify-content: end; } .site-footer a { color: #b2aaa0; text-decoration: none; text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; } .site-footer small { grid-column: 1/-1; border-top: 1px solid var(--line); padding-top: 19px; font-size: 10px; } .sr-only { position: absolute; width: 1px; height: 1px; clip: rect(0, 0, 0, 0); overflow: hidden; } @media (max-width: 800px) { .site-header { height: 72px; width: calc(100% - 34px); } .nav { display: none; position: absolute; /* Tracks the header's own height instead of a hardcoded offset. .site-header is sticky, so it is this element's containing block. The old 71px was tuned to a 74px header and already sat 21px inside the header between 701-800px, where the header is its full height. */ top: 100%; right: 0; width: 220px; padding: 18px; background: #292825; border: 1px solid var(--line); align-items: stretch; } .nav.open { display: flex; flex-direction: column; gap: 18px; } .menu-button { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--paper); font: 700 14px var(--display); text-transform: uppercase; letter-spacing: 0.06em; } .menu-button span, .menu-button:before, .menu-button:after { content: ""; display: block; width: 17px; height: 1px; background: var(--warm); position: absolute; right: 0; } /* Touch targets. The button box was only as tall as its 14px label (16px), while the three bars were pinned at 15/21/27px -- i.e. painted below the box, so the icon was not reliably tappable. Give the button a 44px hit area (Apple HIG minimum; WCAG 2.5.8 asks 24px) and hang the bars off its centre so they keep their 6px spacing and now sit level with the label. */ .menu-button { position: relative; min-height: 44px; padding-right: 25px; } .menu-button:before { top: calc(50% - 6px); } .menu-button span { top: 50%; } .menu-button:after { top: calc(50% + 6px); } /* Same reasoning for the small links: 10-12px type gave 12-16px hit areas. Pad the box out to 44px without touching the type size. The .nav entries matter most -- that is the open mobile menu, and its rows measured 15px. */ .nav a, .footer-nav a, .footer-privacy, .text-link { display: inline-flex; align-items: center; min-height: 44px; } .section-shell { width: calc(100% - 38px); } .hero { grid-template-columns: 1fr; padding: 66px 0 50px; gap: 42px; } .hero h1 { font-size: clamp(56px, 18vw, 86px); } .hero-art { height: 480px; } .listen-on { margin-top: 43px; flex-wrap: wrap; } .mission { padding: 90px 0; } .mission-grid, .episode-grid { grid-template-columns: 1fr; gap: 35px; } .mission-copy { margin: 0; } .pillars { padding: 70px 0; } .section-top { align-items: start; gap: 20px; flex-direction: column; } .pillar-grid { grid-template-columns: 1fr 1fr; } .pillar-grid article { padding: 20px !important; border-bottom: 1px solid #aaa295; min-height: 235px; } .pillar-grid article:nth-child(2) { border-right: none; } .episodes { padding: 85px 0; } .episodes h2 { font-size: 61px; } .featured-episode { grid-template-columns: 135px 1fr; gap: 17px; } .episode-art { height: 195px; } .episode-art strong { font-size: 30px; } .episode-detail h3 { font-size: 29px; } .episode-detail > p:not(.episode-label) { display: none; } .join { padding: 85px 20px; } .site-footer { grid-template-columns: 1fr; gap: 18px; } .site-footer > div { justify-content: start; } .site-footer small { margin-top: 12px; } .signup button { padding: 0 11px; font-size: 10px; } } @media (max-width: 430px) { .brand { font-size: 17px; } .hero-art { height: 390px; } .ring-one { height: 360px; width: 360px; } .ring-two { height: 470px; width: 470px; } .featured-episode { grid-template-columns: 1fr; } .episode-art { height: 160px; } .episode-art strong { font-size: 33px; } .episode-list h3 { font-size: 23px; } .signup { display: block; background: none; padding: 0; } .signup input { width: 100%; background: #e3ddd1; padding: 17px; margin-bottom: 8px; } /* Stacked here, so the divider between the two fields is not needed. */ .signup input[type="tel"] { border-left: 0; } .signup button { height: 50px; width: 100%; } } @font-face { font-family: "PT Varsity Block"; src: url("assets/fonts/PTVarsityBlock-Regular.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; } :root { --display: "PT Varsity Block", "Barlow Condensed", Impact, sans-serif; } /* Honey badger brand palette */ :root { --ink: #252d30; --ink-2: #30393c; --paper: #f6c99d; --warm: #b94d22; --muted: #c28a68; --line: rgba(246, 201, 157, 0.24); } .brand-mark { width: 42px; height: 42px; object-fit: cover; border: 0; border-radius: 50%; background: var(--ink); } .hero-art { isolation: isolate; background: radial-gradient( circle at 50% 42%, rgba(185, 77, 34, 0.3), transparent 56% ); } .target-ring { border-color: rgba(246, 201, 157, 0.22); } .badger-logo { position: relative; z-index: 2; display: block; width: min(88%, 455px); height: auto; margin: 0 auto; filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.38)); } .art-label { position: relative; z-index: 3; color: var(--paper); } .pillars { background: #f6c99d; } .pillar-grid article { background: transparent; } .episode-art { background: linear-gradient(145deg, #b94d22 0 48%, #252d30 48% 100%); } .join { background: #b94d22; } .join .eyebrow, .join h2 em { color: #f6c99d; } .signup button { background: #252d30; color: #f6c99d; } @media (max-width: 700px) { .brand-mark { width: 35px; height: 35px; } .badger-logo { width: min(86%, 360px); } } /* Scroll-driven motion: intentionally restrained and disabled for reduced-motion users. */ html { overflow-x: hidden; } .site-header { transition: background-color 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease; } .site-header.scrolled { background: rgba(37, 45, 48, 0.82); backdrop-filter: blur(14px); border-color: rgba(246, 201, 157, 0.36); } .hero-copy, .hero-art { will-change: transform; } .hero-copy { transform: translate3d(0, var(--hero-copy-y, 0), 0); } .hero-art { transform: translate3d(0, var(--hero-art-y, 0), 0); } .badger-logo { transform: scale(var(--logo-scale, 1)); transition: filter 0.5s ease; } .js .reveal { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); } .js .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .js .pillar-grid article.reveal:nth-child(2) { transition-delay: 0.08s; } .js .pillar-grid article.reveal:nth-child(3) { transition-delay: 0.16s; } .js .pillar-grid article.reveal:nth-child(4) { transition-delay: 0.24s; } .js .episode-list article.reveal:nth-child(2) { transition-delay: 0.08s; } .js .episode-list article.reveal:nth-child(3) { transition-delay: 0.16s; } .pillar-grid article { transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .pillar-grid article:hover { background: rgba(185, 77, 34, 0.09); transform: translateY(-7px); } .featured-episode { transition: transform 0.35s ease; } .featured-episode:hover { transform: translateY(-6px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .site-header, .hero-copy, .hero-art, .badger-logo, .hero-portrait, .pillar-grid article, .featured-episode, .js .reveal { transition: none !important; transform: none !important; animation: none !important; } } /* A slow-moving field gives the whole page depth instead of isolating motion to cards. */ .ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient( circle at calc(82% - var(--ambient-progress, 0px)) calc(16% + var(--ambient-progress, 0px)), rgba(185, 77, 34, 0.16), transparent 27% ), radial-gradient( circle at calc(11% + var(--ambient-progress, 0px)) 72%, rgba(246, 201, 157, 0.08), transparent 27% ); } .ambient-orb { position: absolute; border-radius: 50%; filter: blur(4px); mix-blend-mode: screen; will-change: transform; } .orb-one { width: 46vw; height: 46vw; top: -18vw; right: -12vw; background: radial-gradient( circle, rgba(185, 77, 34, 0.3), rgba(185, 77, 34, 0) 67% ); transform: translate3d(var(--orb-one-x, 0px), var(--orb-one-y, 0px), 0); } .orb-two { width: 42vw; height: 42vw; top: 34%; left: -19vw; background: radial-gradient( circle, rgba(246, 201, 157, 0.15), rgba(246, 201, 157, 0) 69% ); transform: translate3d(var(--orb-two-x, 0px), var(--orb-two-y, 0px), 0); } .orb-three { width: 36vw; height: 36vw; right: -16vw; bottom: -13vw; background: radial-gradient( circle, rgba(185, 77, 34, 0.19), rgba(185, 77, 34, 0) 68% ); transform: translate3d(var(--orb-three-x, 0px), var(--orb-three-y, 0px), 0); } main, .site-footer { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .ambient { display: none; } } /* Visible, continuous background motion across the dark portions of the site. */ body { background: radial-gradient( ellipse at 14% 0%, #3b474a 0%, #252d30 38%, #1d2426 100% ); background-size: 180% 180%; animation: background-flow 22s ease-in-out infinite; } .ambient { opacity: 0.95; animation: ambient-pulse 12s ease-in-out infinite; } .orb-one { animation: orb-one-drift 18s ease-in-out infinite; } .orb-two { animation: orb-two-drift 23s ease-in-out infinite; } .orb-three { animation: orb-three-drift 20s ease-in-out infinite; } @keyframes background-flow { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } } @keyframes ambient-pulse { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } } @keyframes orb-one-drift { 0%, 100% { transform: translate3d(var(--orb-one-x, 0px), var(--orb-one-y, 0px), 0) scale(1); } 50% { transform: translate3d( calc(var(--orb-one-x, 0px) + 52px), calc(var(--orb-one-y, 0px) + 38px), 0 ) scale(1.14); } } @keyframes orb-two-drift { 0%, 100% { transform: translate3d(var(--orb-two-x, 0px), var(--orb-two-y, 0px), 0) scale(1); } 50% { transform: translate3d( calc(var(--orb-two-x, 0px) - 44px), calc(var(--orb-two-y, 0px) + 32px), 0 ) scale(0.9); } } @keyframes orb-three-drift { 0%, 100% { transform: translate3d(var(--orb-three-x, 0px), var(--orb-three-y, 0px), 0) scale(1); } 50% { transform: translate3d( calc(var(--orb-three-x, 0px) + 34px), calc(var(--orb-three-y, 0px) - 44px), 0 ) scale(1.12); } } @media (prefers-reduced-motion: reduce) { body, .ambient, .orb-one, .orb-two, .orb-three { animation: none !important; } } /* Recognizable platform marks give the Listen On row a clear destination. */ .listen-on { gap: 13px; flex-wrap: wrap; align-items: center; } .listen-on > span { display: inline-flex; align-items: center; min-height: 28px; margin-right: 5px; padding: 0 10px; background: var(--warm); color: var(--ink); font: 800 12px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22); } .platform-link { display: inline-flex; align-items: center; gap: 6px; color: var(--paper); text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; transition: color 0.2s ease, transform 0.2s ease; } .platform-link img { width: 17px; height: 17px; display: block; } .platform-link:hover, .platform-link:focus-visible { color: var(--warm); transform: translateY(-2px); } .platform-link:focus-visible { outline: 2px solid var(--warm); outline-offset: 4px; } @media (max-width: 700px) { .listen-on { gap: 12px; } .listen-on > span { min-height: 26px; padding: 0 9px; font-size: 11px; } .platform-link { font-size: 10px; } .platform-link img { width: 16px; height: 16px; } } /* Home merch carousel: sample product cards route to the standalone merch page. */ .home-merch { position: relative; z-index: 1; padding: 100px 0; background: #1f292b; overflow: hidden; } .home-merch-heading { display: flex; justify-content: space-between; align-items: end; gap: 44px; margin-bottom: 42px; } .home-merch-heading h2 { margin: 0; font: 800 clamp(52px, 7vw, 92px)/0.78 var(--display); letter-spacing: -0.03em; } .home-merch-heading h2 em { color: var(--warm); font-style: normal; } .home-merch-heading > div:last-child { max-width: 365px; } .home-merch-heading > div:last-child > p { margin: 0 0 22px; color: #ded4c4; line-height: 1.6; } .home-merch-heading .button-outline { border-color: var(--paper); color: var(--paper); } /* A static grid rather than the drag-marquee this section used to be: with three products there is nothing to scroll, so the carousel (and its pointer, fling and keyboard handling) was removed. The cards keep their own styling below. */ .merch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 9px 0 16px; } /* Teaser cards sit alongside the notice: same card shell as a real product, but nothing to click, so no hover lift and no pointer cursor. */ .merch-teaser { cursor: default; } .merch-teaser:hover { transform: none; } .merch-product-name > span { min-width: 0; } .merch-flag { flex: 0 0 auto; font: 700 9px/1 var(--body); letter-spacing: 0.13em; white-space: nowrap; align-self: center; } /* Once a real photo is dropped into assets/merch/ it replaces the illustration and is sized exactly like a live product card's image. */ .merch-teaser.has-photo > img { width: 100%; height: 220px; object-fit: cover; } .merch-product { position: relative; display: flex; flex-direction: column; /* Was space-between against a 338px min-height, which let the artwork float at whatever size it happened to be. The plate below is a fixed square instead, so the card can size to its content and every card matches. */ gap: 16px; overflow: hidden; padding: 18px; color: var(--paper); text-decoration: none; border: 1px solid rgba(246, 201, 157, 0.17); transition: border-color 0.25s ease, transform 0.25s ease; } /* The product plate: one fixed square per card, holding either the CSS illustration or a real photograph. Square because that is what merch photography is normally cropped to, and because it keeps a shirt and a cap the same size on the shelf instead of one dictating the row height. */ .merch-plate { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; } /* An inset hairline, the same device the hero photograph uses. It reads as a deliberate frame, which is what stops an illustration-only card from looking like a photo that failed to load. */ .merch-plate:after { content: ""; position: absolute; inset: 12px; pointer-events: none; border: 1px solid rgba(246, 201, 157, 0.14); } .merch-plate > img { width: 100%; height: 100%; object-fit: cover; display: block; } .merch-product:hover, .merch-product:focus-visible { border-color: var(--warm); transform: translateY(-6px); outline: 0; } .merch-number { align-self: flex-start; font: 700 9px/1 var(--body); letter-spacing: 0.13em; } .merch-product-name { align-self: stretch; display: flex; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(246, 201, 157, 0.32); font: 800 20px/0.95 var(--display); letter-spacing: 0.01em; } .merch-product-name i { color: var(--warm); font-style: normal; white-space: nowrap; } /* The per-product colourways are gone. They came from an older placeholder set where each card had its own tint, and with three cards the middle one read as a pale tile between two dark ones. Every card now shares one skin -- see .merch-product in palette.css. The tee/cap/notes class names survive only to pick which CSS illustration a card draws. */ .mini-tee { position: relative; width: 162px; height: 196px; background: #222b2e; clip-path: polygon( 20% 0, 37% 9%, 63% 9%, 80% 0, 100% 14%, 82% 38%, 78% 100%, 22% 100%, 18% 38%, 0 14% ); filter: drop-shadow(11px 13px 12px rgba(0, 0, 0, 0.28)); color: var(--paper); text-align: center; font-family: var(--display); transform: rotate(-5deg); } .mini-tee:before { content: ""; position: absolute; top: 5px; left: 39%; width: 22%; height: 17px; border: 2px solid rgba(246, 201, 157, 0.45); border-radius: 0 0 50% 50%; border-top: 0; } .mini-tee b { display: block; margin-top: 75px; font: 700 9px/1 var(--body); letter-spacing: 0.15em; } .mini-tee strong { display: block; font: 800 31px/0.8 var(--display); } .mini-cap { position: relative; display: grid; place-items: center; width: 173px; height: 108px; border-radius: 95px 95px 28px 25px; background: #252d30; color: var(--warm); font: 800 35px/0.7 var(--display); transform: rotate(-11deg); filter: drop-shadow(10px 14px 12px rgba(0, 0, 0, 0.27)); } .mini-cap:after { content: ""; position: absolute; right: -68px; bottom: 2px; width: 120px; height: 29px; border-radius: 0 50% 50% 0; background: #252d30; transform: skewX(20deg); } /* Snapback: same crown, but a flat squared brim instead of the trucker's curved one, and a lighter tilt so the two headwear cards are distinguishable. */ .mini-cap--flat { transform: rotate(-4deg); } .mini-cap--flat:after { right: -74px; bottom: 6px; width: 128px; height: 22px; border-radius: 2px 5px 5px 2px; transform: skewX(6deg); } /* Three across down to 900px, then two, then one. The old flex-basis overrides went with the marquee -- grid columns size the cards now. */ @media (max-width: 900px) { .merch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .home-merch { padding: 70px 0; } .home-merch-heading { display: block; margin-bottom: 31px; } .home-merch-heading > div:last-child { margin-top: 24px; } .merch-product { min-height: 315px; } .merch-product-name { font-size: 18px; } } @media (max-width: 560px) { .merch-grid { grid-template-columns: minmax(0, 1fr); } } /* Click-to-play YouTube embeds (featured episode and playlist cards). The facade button shows only the video thumbnail; YouTube's player loads when the visitor clicks. Colours ride the remapped palette tokens. */ .video-embed { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; } .video-embed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease, opacity 0.5s ease; } .video-embed:hover > img, .video-embed:focus-visible > img { transform: scale(1.04); opacity: 0.85; } .video-embed:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; } .video-embed-play { position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.72); border: 1px solid var(--warm); border-radius: 10px; transition: background 0.3s ease; } .video-embed-play::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-42%, -50%); border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent var(--warm); } .video-embed:hover .video-embed-play, .video-embed:focus-visible .video-embed-play { background: rgba(0, 0, 0, 0.9); } .video-embed--live { cursor: default; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Inside the featured panel the embed fills the art column edge to edge. */ .featured-episode-art .video-embed { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; } @media (prefers-reduced-motion: reduce) { .video-embed > img, .video-embed-play { transition: none !important; transform: none !important; } .video-embed > img { position: absolute; } }