/* Theme Name: ALPHA Sports Theme Theme URI: https://thealphasports.com Description: Dark-mode child theme for The ALPHA Podcast / ALPHA Sports Media. Built on GeneratePress. Author: ALPHA Sports Media Author URI: https://thealphasports.com Template: generatepress Version: 1.0.1 License: GNU General Public License v2 or later Text Domain: alpha-theme */ /* ============================================ ALPHA Sports Media — Brand CSS Dark-mode-first, bold sports media aesthetic ============================================ */ /* === CSS CUSTOM PROPERTIES === */ :root { --alpha-red: #D42027; --alpha-red-hover: #B01B21; --alpha-near-black: #0D0D0D; --alpha-white: #FFFFFF; --alpha-dark-surface: #1A1A1A; --alpha-text-on-dark: #E8E8E8; --alpha-border-subtle: #2A2A2A; --alpha-text-muted: #999999; --alpha-card-shadow: 0 4px 20px rgba(0,0,0,0.3); /* Typography — Phase 2 item 6 Display: Bebas Neue (condensed, athletic, geometric — echoes the ALPHA wordmark). Body: Sora (geometric sans, variable 400-700, readable at long form). Numeric/stat display uses same Bebas Neue for consistency. */ --font-heading: 'Bebas Neue', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif; --font-body: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-display: var(--font-heading); /* Typographic scale Named by role, not by HTML tag. Use --size-display for hero-sized statement type; --size-body is the 17px base for long-form reading. */ --size-display: clamp(56px, 10vw, 140px); --size-headline: clamp(40px, 6vw, 72px); --size-title: clamp(28px, 4.5vw, 48px); --size-subtitle: clamp(22px, 3vw, 32px); --size-h4: clamp(18px, 2.5vw, 22px); --size-body: 17px; --size-small: 14px; --size-caption: 13px; } /* === GLOBAL RESET & DARK BACKGROUND === */ html { background-color: var(--alpha-near-black) !important; scroll-behavior: smooth; } /* Clip horizontal overflow at the document root. Prevents full-bleed sections using width:100vw from triggering a 17px horizontal scrollbar (which, because ::-webkit-scrollbar-thumb is red, rendered as a mysterious red bar across the bottom of the Who Are We page). */ html, body { overflow-x: clip; } body { background-color: var(--alpha-near-black) !important; color: var(--alpha-text-on-dark) !important; font-family: var(--font-body) !important; font-size: var(--size-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Bebas Neue ships a single weight. Disable synth-bold globally so any font-weight: 600/700 on a heading just uses the real 400 glyph rather than a browser-thickened fake. Sora is variable so real weights still render correctly. */ font-synthesis: none; } /* Force dark on all WordPress/GP wrappers */ #page, #content, .site, .site-content, .inside-article, .entry-content, main, article, section, .generate-columns-container, .wp-block-group, .wp-block-cover, .gb-container { background-color: var(--alpha-near-black) !important; color: var(--alpha-text-on-dark); } /* === TYPOGRAPHY === Bebas Neue is a single-weight display face — weight is essentially irrelevant on it. Letter-spacing and size do the work. H4 drops back to the body font (Sora 600) because small heads in Bebas read thin. */ h1, h2, h3, .entry-title, .page-title, .site-title { font-family: var(--font-heading) !important; font-weight: 400; color: var(--alpha-white) !important; line-height: 1.05; letter-spacing: 0.02em; } h4, h5, h6 { font-family: var(--font-body) !important; font-weight: 600; color: var(--alpha-white) !important; line-height: 1.25; } h1, h2 { text-transform: uppercase; letter-spacing: 0.03em; } h1 { font-size: var(--size-headline); } h2 { font-size: var(--size-title); } h3 { font-size: var(--size-subtitle); letter-spacing: 0.01em; } h4 { font-size: var(--size-h4); text-transform: uppercase; letter-spacing: 0.08em; } /* Utility: apply Bebas Neue display face anywhere (stats, episode numbers) */ .alpha-display { font-family: var(--font-display) !important; font-weight: 400; line-height: 0.95; letter-spacing: 0.02em; } /* Catch-all: legacy post_content still has inline font-family:Montserrat or font-family:Inter from the old theme. Remap them to the new system so we don't need to touch every DB row. If/when post_content is cleaned up in the editor, these rules become no-ops. */ [style*="Montserrat"] { font-family: var(--font-heading) !important; } [style*="'Inter'"], [style*="Inter,"] { font-family: var(--font-body) !important; } p, li, span, div, td, th, label, blockquote { color: var(--alpha-text-on-dark); } /* === LINKS === */ a { color: var(--alpha-red); text-decoration: none; transition: color 0.2s ease; } a:hover, a:focus { color: var(--alpha-red-hover); text-decoration: underline; } /* === BUTTONS === */ .alpha-btn, .alpha-btn-primary, .wp-block-button__link, button[type="submit"], input[type="submit"], .woocommerce a.button, .woocommerce button.button, .woocommerce a.button.alt, .woocommerce button.button.alt { display: inline-block; background-color: var(--alpha-red) !important; color: var(--alpha-white) !important; font-family: var(--font-heading) !important; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; padding: 14px 32px; border: 2px solid var(--alpha-red) !important; border-radius: 6px; cursor: pointer; transition: all 0.25s ease; text-decoration: none !important; min-height: 44px; /* Touch target */ line-height: 1.4; } .alpha-btn:hover, .alpha-btn-primary:hover, .wp-block-button__link:hover, button[type="submit"]:hover, input[type="submit"]:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background-color: var(--alpha-red-hover) !important; border-color: var(--alpha-red-hover) !important; color: var(--alpha-white) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(212, 32, 39, 0.3); } /* Ghost / outline button */ .alpha-btn-ghost { background: transparent !important; color: var(--alpha-white) !important; border: 2px solid var(--alpha-white) !important; } .alpha-btn-ghost:hover { background: var(--alpha-white) !important; color: var(--alpha-near-black) !important; } /* Secondary / subtle button */ .alpha-btn-secondary { background: var(--alpha-dark-surface) !important; color: var(--alpha-white) !important; border: 2px solid var(--alpha-border-subtle) !important; } .alpha-btn-secondary:hover { border-color: var(--alpha-red) !important; color: var(--alpha-red) !important; } /* === CARDS === */ .alpha-card { background: var(--alpha-dark-surface); border: 1px solid var(--alpha-border-subtle); border-radius: 12px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .alpha-card:hover { transform: scale(1.02); box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 20px rgba(212, 32, 39, 0.1); border-color: rgba(212, 32, 39, 0.3); } .alpha-card img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; } .alpha-card-body { padding: 20px 24px; } .alpha-card-title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--alpha-white); margin-bottom: 8px; } .alpha-card-meta { font-size: 13px; color: var(--alpha-text-muted); margin-bottom: 12px; } .alpha-card-excerpt { font-size: 15px; color: var(--alpha-text-on-dark); line-height: 1.6; } /* === HEADER / NAV === */ .site-header, #masthead, .main-navigation, .main-navigation ul, nav.main-navigation, .navigation-search, #site-navigation { background-color: var(--alpha-near-black) !important; border-bottom: none !important; } .main-navigation a, .main-navigation .menu-item > a, .menu-toggle { color: var(--alpha-white) !important; font-family: var(--font-heading) !important; font-weight: 600 !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 1px !important; transition: color 0.2s ease; } .main-navigation a:hover, .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { color: var(--alpha-red) !important; } /* Dropdown menus */ .main-navigation ul ul, .main-navigation .sub-menu { background-color: var(--alpha-dark-surface) !important; border: 1px solid var(--alpha-border-subtle) !important; border-radius: 8px; box-shadow: var(--alpha-card-shadow); } .main-navigation ul ul a { color: var(--alpha-text-on-dark) !important; font-size: 12px !important; } .main-navigation ul ul a:hover { color: var(--alpha-red) !important; background: rgba(212, 32, 39, 0.1) !important; } /* Site title / logo */ .site-title a, .site-branding a { color: var(--alpha-white) !important; } /* === HEADER SIZE CAP (Phase 3 item 16) === Cap header height at 80px desktop / 64px mobile. Logo + SPORTS MEDIA sublockup (single image asset) shrinks proportionally. */ .site-header { max-height: 80px; } .site-header .inside-header { padding-top: 10px !important; padding-bottom: 10px !important; } @media (max-width: 768px) { .site-header { max-height: 64px; } .site-header .inside-header { padding-top: 6px !important; padding-bottom: 6px !important; } } /* Custom logo sizing — fits inside the 80/64px header cap */ .custom-logo, .header-image.is-logo-image, .site-branding img, .site-logo img, img.header-image, img.is-logo-image { max-height: 60px !important; width: auto !important; max-width: 260px !important; height: auto !important; object-fit: contain !important; } @media (max-width: 768px) { .custom-logo, .header-image.is-logo-image, .site-branding img, .site-logo img, img.header-image, img.is-logo-image { max-height: 48px !important; max-width: 200px !important; } } /* Hide site title text next to logo */ .site-title, .site-branding .main-title, .site-branding .site-title { display: none !important; } /* === MOBILE NAV === */ @media (max-width: 768px) { .menu-toggle, .menu-toggle:hover, .menu-toggle:focus { color: var(--alpha-white) !important; background: transparent !important; } .main-navigation.toggled .main-nav > ul, .main-navigation .main-nav > ul, .sidebar-nav-mobile .main-nav > ul { background-color: var(--alpha-near-black) !important; } .main-navigation.toggled a, .main-navigation .main-nav a { padding: 14px 20px !important; min-height: 48px; display: flex; align-items: center; } } /* === FOOTER === */ .site-footer, #colophon, footer, .footer-widgets, .site-info, .inside-site-info { background-color: var(--alpha-near-black) !important; color: var(--alpha-text-muted) !important; border-top: none !important; } .site-footer a, .site-info a { color: var(--alpha-red) !important; } .site-footer a:hover, .site-info a:hover { color: var(--alpha-white) !important; } /* === FORMS (dark inputs) === */ input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], textarea, select { background-color: var(--alpha-dark-surface) !important; color: var(--alpha-text-on-dark) !important; border: 1px solid var(--alpha-border-subtle) !important; border-radius: 6px; padding: 12px 16px; font-family: var(--font-body); transition: border-color 0.2s ease; } input:focus, textarea:focus, select:focus { border-color: var(--alpha-red) !important; outline: none; box-shadow: 0 0 0 3px rgba(212, 32, 39, 0.15); } ::placeholder { color: var(--alpha-text-muted) !important; } /* === WOOCOMMERCE DARK === */ .woocommerce-page, .woocommerce, .woocommerce table, .woocommerce td, .woocommerce th, .woocommerce .product, .woocommerce .products, .woocommerce-cart, .woocommerce-checkout, .woocommerce ul.products li.product { background-color: var(--alpha-near-black) !important; color: var(--alpha-text-on-dark) !important; } .woocommerce ul.products li.product { background: var(--alpha-dark-surface) !important; border: 1px solid var(--alpha-border-subtle); border-radius: 12px; overflow: hidden; padding: 0 !important; transition: transform 0.25s ease, box-shadow 0.25s ease; } .woocommerce ul.products li.product:hover { transform: scale(1.02); box-shadow: 0 8px 30px rgba(0,0,0,0.4); } .woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--alpha-white) !important; font-family: var(--font-heading) !important; } .woocommerce ul.products li.product .price { color: var(--alpha-red) !important; } /* === STORE / WOOCOMMERCE LAYOUT — CLEAN RESET === */ /* Force every parent container to full width on the Store page */ .woocommerce-page.post-type-archive-product .site.grid-container.container { width: 100% !important; max-width: 100% !important; } .woocommerce-page.post-type-archive-product .site-content { display: block !important; width: 100% !important; max-width: 100% !important; } .woocommerce-page.post-type-archive-product .content-area, .woocommerce-page.post-type-archive-product .site-main, .woocommerce-page.post-type-archive-product .woocommerce-archive-wrapper, .woocommerce-page.post-type-archive-product .inside-article, .woocommerce-page.post-type-archive-product .entry-content { display: block !important; width: 100% !important; max-width: 100% !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* Hide default WooCommerce page title (we use hero) */ .woocommerce-products-header { display: none !important; } /* === Store hero (Phase 3 item 12) === Brand moment between nav and product grid. No lifestyle photography yet (flagged as follow-up); uses the stadium plate as atmospheric bg + darkening overlay. */ .alpha-store-hero { position: relative; width: 100%; min-height: 38vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 72px 24px; overflow: hidden; background-image: linear-gradient(180deg, rgba(13,13,13,0.55), rgba(13,13,13,0.9)), url('/wp-content/uploads/2026/03/hero-bg.png'); background-size: cover; background-position: center 70%; margin-bottom: 32px; } .alpha-store-hero-inner { max-width: 800px; position: relative; z-index: 2; } .alpha-store-hero-eyebrow { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--alpha-red); margin-bottom: 16px; } .alpha-store-hero-title { font-family: var(--font-heading) !important; font-size: clamp(44px, 7vw, 96px) !important; line-height: 0.92 !important; letter-spacing: 0.02em !important; text-transform: uppercase; color: var(--alpha-white) !important; margin: 0 0 20px !important; } .alpha-store-hero-sub { font-family: var(--font-body); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5; color: var(--alpha-text-on-dark); max-width: 560px; margin: 0 auto; } /* Kill WooCommerce clearfix pseudo-elements that break grid */ .woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; content: none !important; } /* Product grid — centered, 3-col, normal L-R flow */ .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 2rem !important; max-width: 1200px !important; margin: 2rem auto !important; padding: 0 2rem !important; box-sizing: border-box !important; list-style: none !important; float: none !important; } @media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 640px) { .woocommerce ul.products { grid-template-columns: 1fr !important; } } /* Product cards — fill grid cell, no fixed widths */ .woocommerce ul.products li.product { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; float: none !important; padding: 0 !important; background: var(--alpha-dark-surface) !important; border: 1px solid var(--alpha-border-subtle) !important; border-radius: 12px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; transition: transform 0.25s ease, box-shadow 0.25s ease; } .woocommerce ul.products li.product:hover { transform: scale(1.02); box-shadow: 0 8px 30px rgba(0,0,0,0.4); } /* Product images */ .woocommerce ul.products li.product a img, .woocommerce ul.products li.product img { width: 100% !important; height: auto !important; max-width: none !important; display: block !important; margin: 0 !important; border-radius: 0 !important; } /* Product title */ .woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--alpha-white) !important; font-family: var(--font-heading) !important; font-size: 16px !important; font-weight: 700 !important; padding: 16px 20px 8px !important; writing-mode: horizontal-tb !important; word-break: normal !important; overflow-wrap: normal !important; } /* Product price */ .woocommerce ul.products li.product .price { color: var(--alpha-red) !important; font-size: 18px !important; font-weight: 700 !important; padding: 0 20px 16px !important; writing-mode: horizontal-tb !important; } /* Add to Cart button — full width, horizontal text */ .woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.add_to_cart_button, .woocommerce ul.products li.product a.button { display: block !important; width: calc(100% - 40px) !important; margin: auto 20px 20px !important; padding: 12px 24px !important; text-align: center !important; writing-mode: horizontal-tb !important; word-break: normal !important; } /* Product link — no underline */ .woocommerce ul.products li.product .woocommerce-loop-product__link { text-decoration: none !important; } /* WooCommerce notices/messages dark */ .woocommerce-message, .woocommerce-info, .woocommerce-error { background: var(--alpha-dark-surface) !important; color: var(--alpha-text-on-dark) !important; border-top-color: var(--alpha-red) !important; } .woocommerce-message a, .woocommerce-info a { color: var(--alpha-red) !important; } /* Cart/checkout — fix alignwide offset */ .woocommerce-cart .wp-block-woocommerce-cart.alignwide, .woocommerce-checkout .wp-block-woocommerce-checkout.alignwide { margin-left: auto !important; margin-right: auto !important; max-width: 1200px !important; } @media (max-width: 768px) { html, body { overflow-x: hidden; } .woocommerce-cart *, .woocommerce-checkout * { max-width: 100vw !important; box-sizing: border-box !important; } .woocommerce-cart .wp-block-woocommerce-cart.alignwide, .woocommerce-checkout .wp-block-woocommerce-checkout.alignwide { margin-left: 0 !important; margin-right: 0 !important; padding: 0 1rem !important; width: 100% !important; max-width: 100vw !important; } .woocommerce-cart .wc-block-cart-items, .woocommerce-cart .wc-block-cart-item, .woocommerce-cart .wp-block-woocommerce-cart-line-items-block { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .woocommerce-cart .wc-block-cart__totals-title { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value, .woocommerce-cart .wc-block-components-totals-coupon a, .woocommerce-cart .wc-block-components-totals-coupon span { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } } /* Cart and checkout dark */ .woocommerce-cart .cart-collaterals, .woocommerce-cart table, .woocommerce-checkout .woocommerce-checkout-review-order-table { background: var(--alpha-dark-surface) !important; color: var(--alpha-text-on-dark) !important; } .woocommerce table.shop_table { background: var(--alpha-dark-surface) !important; border-color: var(--alpha-border-subtle) !important; border-radius: 12px; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--alpha-border-subtle) !important; color: var(--alpha-text-on-dark) !important; } /* Product single page */ .single-product .summary { color: var(--alpha-text-on-dark) !important; } .single-product .product_title { color: var(--alpha-white) !important; font-family: var(--font-heading) !important; } .single-product .price { color: var(--alpha-red) !important; font-size: 24px !important; } .woocommerce-product-details__short-description, .woocommerce-Tabs-panel { color: var(--alpha-text-on-dark) !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--alpha-dark-surface) !important; border-color: var(--alpha-border-subtle) !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--alpha-text-on-dark) !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--alpha-near-black) !important; } .woocommerce div.product .woocommerce-tabs .panel { background: var(--alpha-near-black) !important; color: var(--alpha-text-on-dark) !important; } /* === BLOG CARDS GRID === */ .alpha-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 1024px) { .alpha-blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .alpha-blog-grid { grid-template-columns: 1fr; } } /* === EPISODE EMBED CONTAINERS === */ .alpha-embed-container { background: var(--alpha-dark-surface); border: 1px solid var(--alpha-border-subtle); border-radius: 12px; overflow: hidden; margin-bottom: 24px; } .alpha-embed-container .embed-label { padding: 16px 20px; font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--alpha-white); border-bottom: 1px solid var(--alpha-border-subtle); } .alpha-embed-responsive { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; } .alpha-embed-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* === COMING SOON CARDS === */ .alpha-coming-soon { background: var(--alpha-dark-surface); border: 2px dashed var(--alpha-border-subtle); border-radius: 12px; display: flex; align-items: center; justify-content: center; min-height: 280px; text-align: center; transition: border-color 0.3s ease; } .alpha-coming-soon:hover { border-color: var(--alpha-red); } .alpha-coming-soon-text { font-family: var(--font-heading); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: var(--alpha-text-muted); } .alpha-coming-soon-sub { font-size: 13px; color: var(--alpha-text-muted); margin-top: 8px; } /* === BRANDED PAGE PLAYER === */ .alpha-page-player { background: var(--alpha-dark-surface); border: 1px solid var(--alpha-border-subtle); border-radius: 16px; overflow: hidden; } .alpha-pp-header { display: flex; align-items: center; gap: 16px; padding: 24px; border-bottom: 1px solid var(--alpha-border-subtle); } .alpha-pp-logo { height: 48px; width: auto; object-fit: contain; } .alpha-pp-title { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--alpha-white); text-transform: uppercase; letter-spacing: 1px; } /* Episode list */ .alpha-pp-list { max-height: 500px; overflow-y: auto; } .alpha-pp-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 24px; cursor: pointer; transition: background 0.15s; border-bottom: 1px solid rgba(42,42,42,0.5); } .alpha-pp-item:last-child { border-bottom: none; } .alpha-pp-item:hover { background: rgba(255,255,255,0.03); } /* Active episode — strong visual distinction */ .alpha-pp-item.active { background: rgba(212, 32, 39, 0.12); border-left: 3px solid var(--alpha-red); padding-left: 21px; } .alpha-pp-item-play { width: 36px; height: 36px; min-width: 36px; margin-top: 2px; border-radius: 50%; background: var(--alpha-border-subtle); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--alpha-white); transition: background 0.2s; } .alpha-pp-item:hover .alpha-pp-item-play, .alpha-pp-item.active .alpha-pp-item-play { background: var(--alpha-red); } .alpha-pp-item-info { flex: 1; min-width: 0; } .alpha-pp-item-title { font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: var(--alpha-white); margin-bottom: 4px; } .alpha-pp-item.active .alpha-pp-item-title { font-weight: 700; } .alpha-pp-item-meta { font-size: 12px; color: var(--alpha-text-muted); } /* Inline seek bar on active episode */ .alpha-pp-seek-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(212, 32, 39, 0.2); } .alpha-pp-time { font-size: 12px; color: #ccc; min-width: 36px; font-variant-numeric: tabular-nums; } .alpha-pp-time:last-child { text-align: right; } .alpha-pp-seek { -webkit-appearance: none; appearance: none; flex: 1; height: 6px; background: rgba(212, 32, 39, 0.2); border-radius: 3px; outline: none; cursor: pointer; margin: 0; } .alpha-pp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--alpha-red); cursor: pointer; border: none; margin-top: -4px; } .alpha-pp-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--alpha-red); cursor: pointer; border: none; } .alpha-pp-seek::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; } .alpha-pp-seek::-moz-range-track { height: 6px; background: rgba(212, 32, 39, 0.2); border-radius: 3px; } /* Scrollbar inside player */ .alpha-pp-list::-webkit-scrollbar { width: 6px; } .alpha-pp-list::-webkit-scrollbar-track { background: transparent; } .alpha-pp-list::-webkit-scrollbar-thumb { background: var(--alpha-border-subtle); border-radius: 3px; } /* === Platform buttons (Phase 3 item 17) === Episodes page "Also available on" row. Previously rendered as 4 solid red rectangles — destroyed per-platform brand recognition. Now styled as monochrome white-outline chips matching the footer platform strip. */ .alpha-btn.alpha-platform-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; padding: 12px 24px !important; font-family: var(--font-heading) !important; font-size: 14px !important; letter-spacing: 0.08em !important; text-transform: uppercase; background: transparent !important; background-color: transparent !important; border: 1px solid var(--alpha-border-subtle) !important; color: var(--alpha-white) !important; border-radius: 999px !important; min-height: auto; flex: 0 1 auto; white-space: nowrap; transition: border-color 0.2s, background 0.2s, color 0.2s; } .alpha-btn.alpha-platform-btn:hover { border-color: var(--alpha-red) !important; background: rgba(212, 32, 39, 0.08) !important; color: var(--alpha-white) !important; transform: none; box-shadow: none; } .alpha-btn.alpha-platform-btn svg { width: 18px !important; height: 18px !important; margin-right: 0 !important; flex-shrink: 0; } @media (max-width: 640px) { .alpha-platform-btns { flex-direction: column !important; } .alpha-btn.alpha-platform-btn { flex: none; width: 100%; } } /* Video grid responsive */ @media (max-width: 768px) { .alpha-embed-container + .alpha-embed-container, .alpha-coming-soon + .alpha-coming-soon, .alpha-embed-container + .alpha-coming-soon { /* handled by parent grid */ } div[style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; } } /* === HERO CTA BUTTONS — WORDMARK-ALIGNED (redesign follow-up to item 15) === The hero buttons get a distinctive treatment that echoes the ALPHA wordmark's double-stroke outlined geometry. Scoped to .alpha-hero-buttons only — WooCommerce / WPForms / block buttons keep the site-wide .alpha-btn styles untouched. Signature details: - 0-radius corners (matches the wordmark's angular terminations) - 1px outer stroke (not the old chunky 2px) - 1px inner frame inset 5px — double-stroke echoes the wordmark - Bebas Neue at 17px with 0.22em tracking (stadium signage gravitas) - Hover: inner frame contracts 5px→7px + button lifts 3px (a "tightening" micro-motion) - Primary = red fill + white inner frame (badge/stamp aesthetic) - Ghost = transparent + hairline white stroke with a muted inner frame */ .alpha-hero-buttons { gap: 20px !important; } .alpha-hero-buttons .alpha-btn { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 0; min-height: 62px !important; min-width: 220px; padding: 0 34px !important; font-family: var(--font-heading) !important; font-weight: 400 !important; font-size: 17px !important; letter-spacing: 0.22em !important; text-transform: uppercase; text-decoration: none !important; border-width: 1px !important; border-style: solid !important; border-radius: 0 !important; line-height: 1; cursor: pointer; transition: transform 0.32s cubic-bezier(.2,.7,.3,1), background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.28s ease; isolation: isolate; overflow: visible; text-indent: 0.22em; /* visual optical balance — first letter gets same tracking as rest */ } /* Double-stroke inner frame — the wordmark-consistent signature */ .alpha-hero-buttons .alpha-btn::before { content: ''; position: absolute; inset: 5px; border: 1px solid currentColor; opacity: 0.28; pointer-events: none; transition: inset 0.32s cubic-bezier(.2,.7,.3,1), opacity 0.28s ease, border-color 0.25s ease; } /* Corner tick marks — tiny architectural accents at top-left + bottom-right, only visible on hover. A whisper of field-marking chalk. */ .alpha-hero-buttons .alpha-btn::after { content: ''; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px; border-top: 1px solid var(--alpha-red); border-left: 1px solid var(--alpha-red); opacity: 0; transition: opacity 0.25s ease, transform 0.32s cubic-bezier(.2,.7,.3,1); pointer-events: none; } .alpha-hero-buttons .alpha-btn:hover::after { opacity: 1; transform: translate(-3px, -3px); } /* === PRIMARY — red fill with a white inset badge frame === */ .alpha-hero-buttons .alpha-btn-primary { background: var(--alpha-red) !important; border-color: var(--alpha-red) !important; color: var(--alpha-white) !important; box-shadow: 0 4px 18px rgba(212, 32, 39, 0.22); } .alpha-hero-buttons .alpha-btn-primary::before { border-color: var(--alpha-white); opacity: 0.6; } .alpha-hero-buttons .alpha-btn-primary:hover { background: var(--alpha-red-hover) !important; border-color: var(--alpha-red-hover) !important; color: var(--alpha-white) !important; transform: translateY(-3px) !important; box-shadow: 0 12px 32px rgba(212, 32, 39, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12); } /* === GHOST — transparent with hairline white stroke === */ .alpha-hero-buttons .alpha-btn-ghost { background: transparent !important; border-color: rgba(255, 255, 255, 0.85) !important; color: var(--alpha-white) !important; } .alpha-hero-buttons .alpha-btn-ghost::before { border-color: var(--alpha-white); opacity: 0.18; } .alpha-hero-buttons .alpha-btn-ghost:hover { background: transparent !important; border-color: var(--alpha-red) !important; color: var(--alpha-red) !important; transform: translateY(-3px) !important; box-shadow: none; } /* Inner frame tightens on hover (the "grip" motion) */ .alpha-hero-buttons .alpha-btn:hover::before { inset: 7px; opacity: 0.75; } /* Focus-visible — accessibility ring */ .alpha-hero-buttons .alpha-btn:focus-visible { outline: 2px solid var(--alpha-red); outline-offset: 4px; } /* Mobile — stack full-width, drop min-width constraint */ @media (max-width: 640px) { .alpha-hero-buttons { gap: 14px !important; } .alpha-hero-buttons .alpha-btn { min-width: 0; width: 100%; max-width: 320px; min-height: 58px !important; padding: 0 24px !important; } } /* === HERO SECTION === Phase 2 item 8 — Parallax layered composition. The .alpha-hero's inline style on the page still carries the stadium image, but we null it out and route the bg through a ::before pseudo so we can independently transform it. ::after adds a faint particle-dust texture. Both layers scroll-animate via CSS animation-timeline: view() where supported; prefers-reduced-motion disables the animation. */ .alpha-hero { position: relative; min-height: 85vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 20px; overflow: hidden; /* clip parallax translation */ background: transparent !important; /* nullify inline bg:url(...) */ background-image: none !important; isolation: isolate; /* so z-index of ::after lives in hero's stacking context */ } /* Stadium plate — back layer. Slightly oversized so parallax translation doesn't expose edges. */ .alpha-hero::before { content: ''; position: absolute; inset: -8% -5%; z-index: 0; background-image: url('/wp-content/uploads/2026/03/hero-bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; will-change: transform; } /* Particle/dust layer — mid layer, screen-blend for stadium-lights feel. */ .alpha-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; background-repeat: repeat; opacity: 0.28; mix-blend-mode: screen; pointer-events: none; will-change: transform, opacity; } /* Hero content sits on top of both layers */ .alpha-hero-content { position: relative; z-index: 3; } .alpha-hero-overlay { z-index: 2; } /* Scroll-driven parallax (Chrome 115+, Safari 17.4+, Firefox 126+). Degrades gracefully — unsupported browsers see a static hero, which is fine. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { @keyframes alphaParallaxBack { from { transform: translate3d(0, -4%, 0) scale(1.05); } to { transform: translate3d(0, -14%, 0) scale(1.08); } } @keyframes alphaParallaxDust { from { transform: translate3d(0, 6%, 0); opacity: 0.32; } to { transform: translate3d(0, -28%, 0); opacity: 0.06; } } .alpha-hero::before { animation: alphaParallaxBack linear both; animation-timeline: view(); } .alpha-hero::after { animation: alphaParallaxDust linear both; animation-timeline: view(); } } } .alpha-hero img { max-width: 90vw; object-fit: contain; } @media (max-height: 800px) { .alpha-hero img { height: 250px !important; } .alpha-hero { padding: 60px 20px; } } @media (max-height: 600px) { .alpha-hero img { height: 180px !important; } .alpha-hero { padding: 40px 20px; min-height: auto; } } .alpha-hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(13,13,13,0.7) 0%, rgba(13,13,13,0.9) 100%); z-index: 1; } .alpha-hero-content { position: relative; z-index: 2; max-width: 800px; } .alpha-hero h1 { font-size: clamp(36px, 6vw, 64px); font-weight: 900; margin-bottom: 16px; } .alpha-hero .tagline { font-family: var(--font-heading); font-size: clamp(16px, 2.5vw, 24px); color: var(--alpha-red); text-transform: uppercase; letter-spacing: 4px; font-weight: 600; margin-top: 0 !important; margin-bottom: 20px; } /* Restore normal spacing for description and buttons */ .alpha-hero p:not(:first-child):not(.tagline) { margin: 0 auto 36px auto !important; font-size: clamp(16px, 2vw, 20px) !important; line-height: 1.7 !important; } /* Collapse the wpautop

wrapper around the hero image only */ .alpha-hero-content > p:first-child, .alpha-hero-content > p:has(img) { margin: 0 !important; padding: 0 !important; line-height: 0 !important; font-size: 0 !important; } .alpha-hero p { font-size: clamp(16px, 2vw, 20px); color: var(--alpha-text-on-dark); max-width: 600px; margin: 0 auto 36px auto; line-height: 1.7; } .alpha-hero-buttons { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } @media (max-width: 640px) { .alpha-hero-buttons { flex-direction: column; align-items: center; } .alpha-hero-buttons a { width: 100%; max-width: 280px; text-align: center; } } /* === PAGE-LOAD CHOREOGRAPHY (Phase 3 item 15) === One disciplined sequence on home: kicker fades in → wordmark slides up → description fades → CTAs stagger. CSS only. Respect reduced motion. */ @media (prefers-reduced-motion: no-preference) { .alpha-home .alpha-hero-content > .tagline, .alpha-home .alpha-hero-content > img, .alpha-home .alpha-hero-content > p:not(.tagline), .alpha-home .alpha-hero-content > .alpha-hero-buttons > a { opacity: 0; will-change: opacity, transform; } .alpha-home .alpha-hero-content > .tagline { animation: alphaKickerIn 600ms cubic-bezier(.2,.7,.3,1) 100ms forwards; } .alpha-home .alpha-hero-content > img { animation: alphaWordmarkIn 900ms cubic-bezier(.2,.7,.3,1) 300ms forwards; } .alpha-home .alpha-hero-content > p:not(.tagline) { animation: alphaFadeUp 600ms cubic-bezier(.2,.7,.3,1) 900ms forwards; } /* CTAs stagger: each 120ms after the previous. Uses nth-of-type (not nth-child) because wpautop inserts
between the anchors — nth-child would count the
s and shift our indices. */ .alpha-home .alpha-hero-content > .alpha-hero-buttons > a:nth-of-type(1) { animation: alphaFadeUp 500ms cubic-bezier(.2,.7,.3,1) 1200ms forwards; } .alpha-home .alpha-hero-content > .alpha-hero-buttons > a:nth-of-type(2) { animation: alphaFadeUp 500ms cubic-bezier(.2,.7,.3,1) 1320ms forwards; } .alpha-home .alpha-hero-content > .alpha-hero-buttons > a:nth-of-type(3) { animation: alphaFadeUp 500ms cubic-bezier(.2,.7,.3,1) 1440ms forwards; } } @keyframes alphaKickerIn { from { opacity: 0; transform: translateY(-4px); letter-spacing: 0.6em; } to { opacity: 1; transform: translateY(0); letter-spacing: 4px; } } @keyframes alphaWordmarkIn { from { opacity: 0; transform: translateY(40px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes alphaFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* === SECTION UTILITY CLASSES === */ .alpha-section { padding: 80px 20px; max-width: 1200px; margin: 0 auto; } .alpha-section-dark { background: var(--alpha-dark-surface); } .alpha-section-title { text-align: center; margin-bottom: 48px; } .alpha-section-title .overline { font-family: var(--font-heading); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--alpha-text-muted); margin-bottom: 12px; display: block; } /* === SOCIAL ICONS === */ .alpha-social-icons { display: flex; align-items: center; gap: 16px; } .alpha-social-icons a { color: var(--alpha-text-muted); font-size: 20px; transition: color 0.2s ease, transform 0.2s ease; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; } .alpha-social-icons a:hover { color: var(--alpha-red); transform: scale(1.1); text-decoration: none; } /* === SCROLLBAR (WebKit) === */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--alpha-near-black); } ::-webkit-scrollbar-thumb { background: var(--alpha-red); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--alpha-red-hover); } /* === TEXTURE & ATMOSPHERE (Phase 3 item 14) === Picked two of the four options per the spec's "restraint" instruction: 1. Film-grain overlay — sitewide, ~3% opacity SVG fractal-noise, fixed to viewport so it moves with content. Gives every surface a subtle photographic tooth without any per-section effort. mix-blend-mode overlay blends with both dark and light regions. 2. Chalk-line dividers — utility class .alpha-chalk-divider renders a dashed off-white gradient evoking sideline / yardage chalk. Not blanket-applied; used intentionally at section seams where editorial rhythm calls for a break (e.g. between hero and About on home). Why these two (vs the other options): - Film grain + chalk dividers operate at different scales (continuous ambient vs discrete punctuation) so they complement rather than compete. Jersey-numerals pattern + stadium-lights bokeh both pull in the same "large atmospheric image" direction and would have fought each other. */ body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; } @media (prefers-reduced-motion: reduce) { /* Motion isn't the issue with noise but hi-DPI can strain — reduce further */ body::after { opacity: 0.02; } } /* Chalk-line divider utility — sideline / yardage reference */ .alpha-chalk-divider { border: 0; height: 2px; max-width: 1100px; margin: 60px auto; background-image: repeating-linear-gradient( 90deg, transparent 0, transparent 10px, rgba(255, 255, 255, 0.55) 10px, rgba(255, 255, 255, 0.55) 26px ); mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); opacity: 0.35; } .alpha-chalk-divider::before, .alpha-chalk-divider::after { content: none; } /* === HIDE DEFAULT PAGE TITLES (we use custom hero titles) === */ .entry-title, .page-title { display: none !important; } .entry-header { display: none !important; } /* === GP OVERRIDES — full width, no sidebar === */ .site-content { padding: 0 !important; } .content-area { width: 100% !important; max-width: 100% !important; } .inside-article { padding: 0 !important; margin: 0 !important; } .article-holder { max-width: 100% !important; } body:not(.single-post) .entry-content { max-width: 100% !important; margin: 0 !important; } .ast-container, .container { max-width: 100% !important; } /* === IMAGE RESET === */ img { border: none !important; outline: none !important; } /* === TABLES === */ table, table td, table th { background-color: var(--alpha-dark-surface) !important; color: var(--alpha-text-on-dark) !important; border-color: var(--alpha-border-subtle) !important; } /* === ACCESSIBILITY === */ :focus-visible { outline: 2px solid var(--alpha-red); outline-offset: 2px; } /* Screen-reader-only utility — removes element from visual flow but keeps it in the a11y tree. Used for semantic headings that duplicate adjacent visual content (e.g. homepage hero logo ). */ .alpha-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* === FLOATING CART BUTTON (all devices) === */ .alpha-floating-cart { position: fixed; bottom: 24px; right: 24px; z-index: 999; width: 56px; height: 56px; border-radius: 50%; background: var(--alpha-red); color: var(--alpha-white) !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(212, 32, 39, 0.4); text-decoration: none !important; transition: background 0.2s, transform 0.2s, opacity 0.3s; } .alpha-floating-cart:hover { background: var(--alpha-red-hover); transform: translateY(-2px); } .alpha-floating-cart.alpha-cart-hidden { opacity: 0; pointer-events: none; } .alpha-cart-badge { position: absolute; top: 2px; right: 2px; background: var(--alpha-white); color: var(--alpha-red); font-family: var(--font-heading); font-size: 10px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--alpha-red); pointer-events: none; } /* Continue Shopping button spacing above cross-sells */ .woocommerce-cart .wp-block-buttons { margin-bottom: 2rem !important; } /* Hide floating cart on transactional pages */ .woocommerce-cart .alpha-floating-cart, .woocommerce-checkout .alpha-floating-cart, .woocommerce-order-received .alpha-floating-cart { display: none !important; } /* === HEADER SOCIAL ICONS === */ .alpha-header-social { display: flex; align-items: center; gap: 8px; margin-left: 16px; padding: 0 12px; } .alpha-header-social a { color: var(--alpha-text-muted) !important; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; transition: color 0.2s ease; text-decoration: none !important; } .alpha-header-social a:hover { color: var(--alpha-red) !important; } @media (max-width: 768px) { .alpha-header-social { display: none; } } /* === CUSTOM FOOTER (Phase 2 item 11 rebuild) === */ .alpha-footer-content { background: var(--alpha-near-black); border-top: 1px solid var(--alpha-border-subtle); padding: 80px 20px 16px; } /* === ROW 1 — Newsletter signup === */ .alpha-footer-signup { max-width: 1200px; margin: 0 auto 72px; padding: 48px clamp(24px, 4vw, 56px); background: linear-gradient(135deg, rgba(212, 32, 39, 0.08), rgba(212, 32, 39, 0.02)); border: 1px solid rgba(212, 32, 39, 0.25); border-radius: 16px; } .alpha-footer-signup-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 900px) { .alpha-footer-signup-inner { grid-template-columns: 1fr; gap: 24px; } .alpha-footer-signup { padding: 32px 24px; margin-bottom: 48px; } } .alpha-footer-signup-eyebrow { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--alpha-red); margin-bottom: 12px; } .alpha-footer-signup-title { font-family: var(--font-heading) !important; font-size: clamp(28px, 3.5vw, 48px) !important; color: var(--alpha-white) !important; margin: 0 !important; line-height: 0.95; letter-spacing: 0.015em; text-transform: uppercase; } /* MC4WP form internals — style the inputs we created in the migration */ .alpha-footer-signup-form .mc4wp-form, .alpha-footer-signup-form form { margin: 0; } .alpha-signup-fields { display: flex; gap: 8px; flex-wrap: wrap; } .alpha-signup-fields input[type="email"] { flex: 1; min-width: 220px; background: var(--alpha-near-black) !important; border: 1px solid var(--alpha-border-subtle) !important; color: var(--alpha-text-on-dark) !important; padding: 14px 18px !important; font-size: 16px !important; border-radius: 8px !important; } .alpha-signup-fields input[type="email"]:focus { border-color: var(--alpha-red) !important; outline: none; box-shadow: 0 0 0 3px rgba(212, 32, 39, 0.18); } .alpha-signup-fields input[type="submit"], .alpha-signup-submit { background: var(--alpha-red) !important; color: var(--alpha-white) !important; border: none !important; padding: 14px 28px !important; font-family: var(--font-heading) !important; font-size: 15px !important; text-transform: uppercase; letter-spacing: 0.12em; border-radius: 8px !important; cursor: pointer; transition: background 0.2s; } .alpha-signup-fields input[type="submit"]:hover, .alpha-signup-submit:hover { background: var(--alpha-red-hover) !important; } .alpha-signup-note { margin: 12px 0 0 !important; font-size: 12px !important; color: var(--alpha-text-muted) !important; } .alpha-footer-signup-stub { color: var(--alpha-text-muted); font-size: 13px; } /* === ROW 2 — Latest episode card + platform strip === */ .alpha-footer-listen { max-width: 1200px; margin: 0 auto 56px; display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: 40px; align-items: center; } @media (max-width: 900px) { .alpha-footer-listen { grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; } } .alpha-footer-latest { display: flex; align-items: center; gap: 16px; padding: 14px; background: var(--alpha-dark-surface); border: 1px solid var(--alpha-border-subtle); border-radius: 12px; text-decoration: none !important; transition: border-color 0.2s, transform 0.2s; } .alpha-footer-latest:hover { border-color: var(--alpha-red) !important; transform: translateY(-2px); } .alpha-footer-latest-cover { width: 142px; aspect-ratio: 16 / 9; flex-shrink: 0; overflow: hidden; border-radius: 8px; background: var(--alpha-near-black); } .alpha-footer-latest-cover img { width: 100%; height: 100%; object-fit: contain; display: block; } .alpha-footer-latest-meta { flex: 1; min-width: 0; } .alpha-footer-latest-eyebrow { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--alpha-red); margin-bottom: 6px; } .alpha-footer-latest-title { display: block; font-family: var(--font-heading); font-size: 18px; line-height: 1.1; color: var(--alpha-white); text-transform: uppercase; letter-spacing: 0.02em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .alpha-footer-latest-play { width: 36px; height: 36px; flex-shrink: 0; background: var(--alpha-red); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--alpha-white); } .alpha-footer-platforms { display: flex; flex-direction: column; gap: 14px; } .alpha-footer-platforms-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--alpha-text-muted); } .alpha-footer-platform-strip { display: flex; flex-wrap: wrap; gap: 10px; } .alpha-platform-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: transparent; border: 1px solid var(--alpha-border-subtle); color: var(--alpha-white) !important; font-family: var(--font-heading); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; text-decoration: none !important; transition: border-color 0.2s, background 0.2s, color 0.2s; } .alpha-platform-chip:hover { border-color: var(--alpha-red) !important; background: rgba(212, 32, 39, 0.08); color: var(--alpha-white) !important; } .alpha-platform-chip-icon svg { width: 18px; height: 18px; display: block; } /* === ROW 3 — Start Here === */ .alpha-footer-start-here { max-width: 1200px; margin: 0 auto 56px; text-align: center; } .alpha-footer-start-here-link { display: inline-flex; align-items: baseline; gap: 12px; padding: 14px 32px; border-top: 1px solid var(--alpha-border-subtle); border-bottom: 1px solid var(--alpha-border-subtle); text-decoration: none !important; transition: border-color 0.2s; } .alpha-footer-start-here-link:hover { border-color: var(--alpha-red); } .alpha-footer-start-here-label { font-family: var(--font-body); font-size: 13px; color: var(--alpha-text-muted); text-transform: uppercase; letter-spacing: 0.14em; } .alpha-footer-start-here-cta { font-family: var(--font-heading); font-size: clamp(18px, 2vw, 22px); color: var(--alpha-white) !important; text-transform: uppercase; letter-spacing: 0.06em; } .alpha-footer-start-here-link:hover .alpha-footer-start-here-cta { color: var(--alpha-red) !important; } .alpha-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: start; } .alpha-footer-brand { text-align: left; } .alpha-footer-links { text-align: center; } .alpha-footer-links ul { display: inline-block; text-align: left; } .alpha-footer-social { display: flex; flex-direction: column; align-items: center; justify-content: center; } .alpha-footer-social .alpha-social-icons { justify-content: center; } .alpha-footer-email { margin-top: 12px; font-size: 13px; } .alpha-footer-email a { color: var(--alpha-text-muted) !important; text-decoration: none; } .alpha-footer-email a:hover { color: var(--alpha-red) !important; } @media (max-width: 768px) { .alpha-footer-inner { grid-template-columns: 1fr; text-align: center; } .alpha-footer-brand, .alpha-footer-links, .alpha-footer-social { text-align: center; } .alpha-footer-links ul { display: block; text-align: center; } .alpha-footer-social .alpha-social-icons { justify-content: center; } } .alpha-footer-logo { max-width: 200px; height: auto; margin-bottom: 12px; } .alpha-footer-tagline { font-family: var(--font-heading); font-size: 16px; color: var(--alpha-red); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; } .alpha-footer-col h4 { font-family: var(--font-heading) !important; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--alpha-white) !important; margin-bottom: 16px; } .alpha-footer-links ul { list-style: none; padding: 0; margin: 0; column-count: 2; column-gap: 24px; } .alpha-footer-links ul li { margin-bottom: 8px; break-inside: avoid; } .alpha-footer-links ul li a { color: var(--alpha-text-muted) !important; font-size: 14px; transition: color 0.2s; } .alpha-footer-links ul li a:hover { color: var(--alpha-red) !important; text-decoration: none; } .alpha-footer-social .alpha-social-icons a { color: var(--alpha-text-muted); } .alpha-footer-social .alpha-social-icons a:hover { color: var(--alpha-red); } /* Hide GP default copyright text only, keep the container visible */ .inside-site-info > .copyright-bar { display: none !important; } /* Force the footer content container to be a block so copyright sits below the grid */ .alpha-footer-content { display: block !important; } /* Custom copyright — full width, centered, bottom of footer */ .alpha-footer-copyright { text-align: center; color: #888; font-size: 12px; padding: 12px 20px 24px; white-space: nowrap; width: 100%; margin-top: 0; clear: both; } /* Make sure GP site-info doesn't use grid/flex that captures our footer */ .inside-site-info { display: block !important; background: var(--alpha-near-black) !important; padding: 0 !important; border: none !important; } /* === FLOATING LISTEN NOW BUTTON === */ .alpha-listen-btn { position: fixed; bottom: 24px; left: 24px; z-index: 999; transition: opacity 0.3s ease; background: var(--alpha-red); color: var(--alpha-white); font-family: var(--font-heading); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; padding: 12px 20px; border-radius: 50px; cursor: pointer; display: flex; align-items: center; box-shadow: 0 4px 16px rgba(212, 32, 39, 0.4); transition: background 0.2s, transform 0.2s; user-select: none; } .alpha-listen-btn:hover { background: var(--alpha-red-hover); transform: translateY(-2px); } /* Hide WooCommerce success/info notices — cart badge is enough */ .woocommerce-message, .woocommerce-info:not(.woocommerce-error), .wc-block-components-notice-banner.is-success, .wc-block-components-notice-banner.is-info, .wc-block-store-notices .is-success, .wc-block-store-notices .is-info { display: none !important; } /* Keep error notices visible */ .woocommerce-error, .wc-block-components-notice-banner.is-error { display: block !important; } /* Player is now visible on all pages including WooCommerce/Store */ /* Hide on mobile until scrolled past hero */ @media (max-width: 768px) { .alpha-listen-btn.alpha-hero-visible { opacity: 0 !important; pointer-events: none !important; } } /* Pulse animation */ @keyframes alphaPulse { 0%, 100% { box-shadow: 0 4px 16px rgba(212, 32, 39, 0.4); } 50% { box-shadow: 0 4px 24px rgba(212, 32, 39, 0.7), 0 0 40px rgba(212, 32, 39, 0.3); } } .alpha-pulse { animation: alphaPulse 1s ease-in-out 2; } /* === AUDIO PLAYER BAR === */ .alpha-player-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000; background: var(--alpha-dark-surface); border-top: 2px solid var(--alpha-red); box-shadow: 0 -4px 20px rgba(0,0,0,0.5); max-height: 64px; overflow: hidden; transition: max-height 0.3s ease; } .alpha-player-bar.alpha-player-expanded { max-height: 60vh; overflow-y: auto; } @media (max-width: 640px) { .alpha-player-bar.alpha-player-expanded { max-height: 75vh; } .alpha-np-volume { display: none !important; } } .alpha-player-inner { max-width: 600px; margin: 0 auto; padding: 16px 20px; display: flex; flex-direction: column; } .alpha-player-title { font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--alpha-white); } .alpha-player-close { background: none; border: none; color: var(--alpha-text-muted); font-size: 24px; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color 0.2s; } .alpha-player-close:hover { color: var(--alpha-white); } /* Episode list */ .alpha-episode-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .alpha-episode-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; cursor: pointer; transition: background 0.15s; } .alpha-episode-item:hover { background: rgba(255,255,255,0.05); } .alpha-episode-item.active { background: rgba(212, 32, 39, 0.15); border-left: 3px solid var(--alpha-red); } .alpha-ep-play { width: 32px; height: 32px; border-radius: 50%; background: var(--alpha-border-subtle); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--alpha-white); transition: background 0.2s; } .alpha-episode-item:hover .alpha-ep-play, .alpha-episode-item.active .alpha-ep-play { background: var(--alpha-red); } .alpha-ep-info { flex: 1; min-width: 0; } .alpha-ep-title { font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--alpha-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .alpha-ep-meta { font-size: 12px; color: var(--alpha-text-muted); margin-top: 2px; } /* Now-playing bar at bottom of list */ .alpha-now-playing { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--alpha-border-subtle); margin-top: 4px; } .alpha-now-playing .alpha-player-play { background: var(--alpha-red); border: none; color: var(--alpha-white); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .alpha-now-playing .alpha-player-play:hover { background: var(--alpha-red-hover); } .alpha-np-info { flex: 1; min-width: 0; } .alpha-np-title { font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--alpha-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-bottom: 4px; } .alpha-now-playing .alpha-player-progress { height: 4px; background: var(--alpha-border-subtle); border-radius: 2px; overflow: hidden; } .alpha-now-playing .alpha-player-progress-fill { height: 100%; background: var(--alpha-red); width: 0%; transition: width 0.3s linear; border-radius: 2px; } .alpha-np-volume { width: 70px; accent-color: var(--alpha-red); flex-shrink: 0; } /* === MINI PLAYER BAR (collapsed after selecting episode) === */ .alpha-mini-player { display: flex; align-items: center; gap: 12px; padding: 0 20px; height: 64px; max-width: 1200px; margin: 0 auto; } @media (max-width: 640px) { .alpha-mini-player { height: 56px; gap: 10px; padding: 0 14px; } .alpha-mini-time { display: none; } } .alpha-mini-play { background: var(--alpha-red); border: none; color: var(--alpha-white); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; } .alpha-mini-play:focus, .alpha-mini-play:focus-visible, .alpha-mini-play:active { background: var(--alpha-red); outline: none; } .alpha-mini-play:hover, .alpha-mini-play:focus:hover { background: var(--alpha-red-hover); } .alpha-mini-info { flex: 1; min-width: 0; cursor: pointer; } .alpha-mini-title { font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--alpha-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-bottom: 6px; } .alpha-mini-title { cursor: pointer; } .alpha-mini-title:hover { color: var(--alpha-red) !important; } .alpha-mini-seek-row { display: flex; align-items: center; gap: 8px; width: 100%; } .alpha-mini-time { font-family: var(--font-body); font-size: 11px; color: var(--alpha-text-muted); flex-shrink: 0; min-width: 32px; } .alpha-mini-time:last-child { text-align: right; } /* Seek bar — styled range input */ .alpha-mini-seek { -webkit-appearance: none; appearance: none; flex: 1; height: 12px; background: var(--alpha-border-subtle); border-radius: 6px; outline: none; cursor: pointer; margin: 0; padding: 8px 0; box-sizing: content-box; } .alpha-mini-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--alpha-red); cursor: pointer; border: none; box-shadow: 0 0 4px rgba(0,0,0,0.3); transition: transform 0.15s; } .alpha-mini-seek::-webkit-slider-thumb:hover { transform: scale(1.3); } .alpha-mini-seek::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--alpha-red); cursor: pointer; border: none; } .alpha-mini-seek::-webkit-slider-runnable-track { height: 12px; border-radius: 3px; } .alpha-mini-seek::-moz-range-track { height: 12px; background: var(--alpha-border-subtle); border-radius: 3px; } @media (max-width: 640px) { .alpha-mini-time { font-size: 10px; min-width: 28px; } } /* === MOBILE NAV TAKEOVER (Phase 3 item 18) === GeneratePress's default toggled state was a slide-down menu. Replacing with a full-bleed black overlay + giant Bebas Neue links. Hamburger reveals the overlay; clicking it again closes. ESC closes via JS. Body scroll-lock via .alpha-nav-locked class (iOS-safe position:fixed technique, preserves scroll position). */ .menu-toggle, .menu-toggle:hover, .menu-toggle:focus, button.menu-toggle, button.menu-toggle:hover { background: transparent !important; color: var(--alpha-white) !important; border: none !important; padding: 10px !important; } /* When the nav is toggled open, the hamburger becomes a high-z-index X */ .main-navigation.toggled .menu-toggle { position: fixed !important; top: 12px; right: 12px; z-index: 100001; font-size: 24px !important; } @media (max-width: 768px) { /* Open state: full-bleed overlay */ .main-navigation.toggled { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; z-index: 100000 !important; background: #000 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: stretch !important; overflow-y: auto !important; padding: 80px 24px 40px !important; } /* Menu becomes a vertical stack of big Bebas Neue links */ .main-navigation.toggled .main-nav { width: 100%; } .main-navigation.toggled .main-nav > ul { display: flex !important; flex-direction: column !important; gap: 8px !important; background: transparent !important; padding: 0 !important; margin: 0 !important; list-style: none; text-align: center; } .main-navigation.toggled .main-nav > ul > li { width: 100%; border: none !important; } .main-navigation.toggled .main-nav > ul > li > a, .main-navigation.toggled .menu-item > a { font-family: var(--font-heading) !important; font-size: clamp(34px, 9vw, 56px) !important; font-weight: 400 !important; letter-spacing: 0.04em !important; text-transform: uppercase; color: var(--alpha-white) !important; background: transparent !important; padding: 14px 0 !important; min-height: 64px; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; transition: color 0.18s ease, transform 0.18s ease; } .main-navigation.toggled .main-nav > ul > li > a:hover, .main-navigation.toggled .main-nav > ul > li > a:focus-visible, .main-navigation.toggled .current-menu-item > a { color: var(--alpha-red) !important; transform: translateX(4px); } /* Sub-menus expand inline (tap chevron on parent) */ .main-navigation.toggled .sub-menu { background: transparent !important; box-shadow: none !important; padding: 0 !important; border: none !important; } .main-navigation.toggled .sub-menu > li > a { font-size: 18px !important; color: var(--alpha-text-muted) !important; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--font-body) !important; } /* Entrance animation: items stagger from opacity 0 + slight Y */ @media (prefers-reduced-motion: no-preference) { .main-navigation.toggled .main-nav > ul > li { opacity: 0; animation: alphaNavItemIn 320ms cubic-bezier(.2,.7,.3,1) forwards; } .main-navigation.toggled .main-nav > ul > li:nth-child(1) { animation-delay: 60ms; } .main-navigation.toggled .main-nav > ul > li:nth-child(2) { animation-delay: 120ms; } .main-navigation.toggled .main-nav > ul > li:nth-child(3) { animation-delay: 180ms; } .main-navigation.toggled .main-nav > ul > li:nth-child(4) { animation-delay: 240ms; } .main-navigation.toggled .main-nav > ul > li:nth-child(5) { animation-delay: 300ms; } .main-navigation.toggled .main-nav > ul > li:nth-child(6) { animation-delay: 360ms; } .main-navigation.toggled .main-nav > ul > li:nth-child(7) { animation-delay: 420ms; } .main-navigation.toggled .main-nav > ul > li:nth-child(n+8) { animation-delay: 480ms; } } } @keyframes alphaNavItemIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Body scroll-lock while overlay open — iOS safe (position:fixed) */ body.alpha-nav-locked { position: fixed; width: 100%; overflow: hidden; } /* === WPFORMS DARK STYLING === */ .wpforms-container { background: transparent !important; } .wpforms-form .wpforms-field-label { color: var(--alpha-white) !important; font-family: var(--font-heading) !important; font-size: 13px !important; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .wpforms-form input[type="text"], .wpforms-form input[type="email"], .wpforms-form input[type="tel"], .wpforms-form input[type="url"], .wpforms-form select, .wpforms-form textarea { background: var(--alpha-near-black) !important; color: var(--alpha-text-on-dark) !important; border: 1px solid var(--alpha-border-subtle) !important; border-radius: 8px !important; padding: 14px 16px !important; font-size: 15px !important; font-family: var(--font-body) !important; } .wpforms-form select { height: 50px !important; line-height: 1.4 !important; } .wpforms-form input:focus, .wpforms-form select:focus, .wpforms-form textarea:focus { border-color: var(--alpha-red) !important; box-shadow: 0 0 0 3px rgba(212, 32, 39, 0.15) !important; outline: none; } .wpforms-form .wpforms-field-sublabel { color: var(--alpha-text-muted) !important; } .wpforms-form button[type="submit"], .wpforms-form .wpforms-submit { background: var(--alpha-red) !important; color: var(--alpha-white) !important; font-family: var(--font-heading) !important; font-weight: 700 !important; font-size: 14px !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; padding: 14px 40px !important; border: none !important; border-radius: 6px !important; cursor: pointer; width: 100%; } .wpforms-form button[type="submit"]:hover { background: var(--alpha-red-hover) !important; } /* Mailchimp checkbox styling in WPForms */ .wpforms-field-mailchimp label, .wpforms-field-mailchimp .wpforms-field-label-inline, .wpforms-field-mailchimp li, .wpforms-field-mailchimp { color: var(--alpha-text-on-dark) !important; font-size: 14px !important; } .wpforms-field-mailchimp input[type="checkbox"] { accent-color: var(--alpha-red); } .wpforms-confirmation-container-full, .wpforms-confirmation-container-full p, .wpforms-confirmation-container, .wpforms-confirmation-container p, div[data-clear-completed] p, #wpforms-confirmation-90, #wpforms-confirmation-90 p { background: var(--alpha-dark-surface) !important; color: var(--alpha-white) !important; border: 1px solid var(--alpha-red) !important; border-radius: 8px !important; padding: 20px !important; } /* === ALPHA ACROSTIC — EDITORIAL SYSTEM (Phase 2 item 9) === Hero-sized letter + manifesto per entry, alternating left/right at desktop, stacked centered on mobile. Replaces the old flat .alpha-acronym-grid. Full-bleed: breaks out of its parent container to span the viewport width. */ .alpha-acrostic { /* Full-bleed out of any constrained parent. */ position: relative; width: 100vw; max-width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 32px 0; display: flex; flex-direction: column; } .alpha-acrostic-card { display: grid; grid-template-columns: 1fr 1.4fr; grid-template-rows: auto; gap: 48px; align-items: center; padding: 56px clamp(24px, 6vw, 96px); border-top: 1px solid var(--alpha-border-subtle); max-width: 1400px; width: 100%; margin: 0 auto; } .alpha-acrostic-card:first-child { border-top: none; } /* Explicit grid placement — prevents auto-flow quirks that stack both children into column 1 when an ancestor's child-selector interferes. */ .alpha-acrostic-card .alpha-acrostic-letter { grid-column: 1; grid-row: 1; } .alpha-acrostic-card .alpha-acrostic-meaning { grid-column: 2; grid-row: 1; } /* Right-aligned variant: swap which column gets which child */ .alpha-acrostic-card.alpha-acrostic-right { grid-template-columns: 1.4fr 1fr; } .alpha-acrostic-card.alpha-acrostic-right .alpha-acrostic-letter { grid-column: 2; grid-row: 1; text-align: left; } .alpha-acrostic-card.alpha-acrostic-right .alpha-acrostic-meaning { grid-column: 1; grid-row: 1; text-align: right; align-items: flex-end; } /* Hero-sized letter — this is the whole point of the redesign. Bebas Neue's extended ascender handles this size beautifully. */ .alpha-acrostic-letter { font-family: var(--font-heading); font-size: clamp(140px, 22vw, 320px); line-height: 0.82; color: var(--alpha-white); text-align: right; letter-spacing: -0.02em; display: block; user-select: none; } .alpha-acrostic-meaning { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .alpha-acrostic-bar { display: block; width: 56px; height: 4px; background: var(--alpha-red); } .alpha-acrostic-word { font-family: var(--font-heading) !important; font-size: clamp(36px, 5.5vw, 72px) !important; color: var(--alpha-white) !important; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 !important; line-height: 0.95 !important; } .alpha-acrostic-def { font-family: var(--font-body) !important; font-size: clamp(17px, 1.6vw, 20px) !important; font-weight: 400 !important; color: var(--alpha-text-on-dark) !important; line-height: 1.5 !important; margin: 0 !important; max-width: 48ch; } /* Mobile: always stacked, letter above word above manifesto, centered */ @media (max-width: 768px) { .alpha-acrostic-card, .alpha-acrostic-card.alpha-acrostic-right { grid-template-columns: 1fr; text-align: center; gap: 16px; padding: 40px 20px; } .alpha-acrostic-card .alpha-acrostic-letter, .alpha-acrostic-card.alpha-acrostic-right .alpha-acrostic-letter { grid-column: 1; grid-row: 1; text-align: center; font-size: clamp(100px, 32vw, 200px); } .alpha-acrostic-card .alpha-acrostic-meaning, .alpha-acrostic-card.alpha-acrostic-right .alpha-acrostic-meaning { grid-column: 1; grid-row: 2; align-items: center; text-align: center; } } /* (scroll-triggered entrance animation intentionally omitted here — the static composition is strong on its own. A coordinated page-load motion sequence is deferred to Phase 3 item 15, where it can be choreographed alongside hero/CTAs.) */ /* === CTA BUTTON STACK (centered, equal width) === */ .alpha-cta-stack { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 40px; } .alpha-cta-stack .alpha-btn { min-width: 200px; text-align: center; } @media (max-width: 640px) { .alpha-cta-stack { flex-direction: column; align-items: center; } .alpha-cta-stack .alpha-btn { width: 100%; max-width: 300px; min-width: 0; } } /* === DONATION CARDS RESPONSIVE === */ @media (max-width: 900px) { #alpha-donation-cards { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 500px) { #alpha-donation-cards { grid-template-columns: 1fr !important; } } .alpha-donate-card { transition: border-color 0.3s, transform 0.3s; display: flex; flex-direction: column; align-items: center; } .alpha-donate-card .donate-price { padding: 8px 0; margin-bottom: 4px; line-height: 1.2; box-sizing: border-box; } .alpha-donate-card .donate-btn, .alpha-donate-card button[type="submit"] { margin-top: auto; width: 100%; display: block; text-align: center; font-family: var(--font-heading) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 1px; padding: 12px 10px !important; border-radius: 6px; box-sizing: border-box; white-space: nowrap; line-height: 1.4 !important; } .alpha-donate-card form { display: contents; } .alpha-donate-card p:empty { display: none; margin: 0; padding: 0; } .alpha-donate-card:hover { transform: translateY(-4px); border-color: #D42027 !important; } /* Sticky header */ .site-header { position: sticky; top: 0; z-index: 1000; } /* === BLOG ARCHIVE — EDITORIAL LAYOUT (Phase 2 item 10) === First post = full-bleed featured card with hero-sized episode number. Rest = denser 3-up grid below. Collapses gracefully on mobile. */ .blog .site-main, .archive .site-main { max-width: 1280px; margin: 0 auto; padding: 48px 20px 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 1024px) { .blog .site-main, .archive .site-main { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .blog .site-main, .archive .site-main { grid-template-columns: 1fr; } } /* --- Featured card (first post) --- */ .blog article:first-of-type, .archive article:first-of-type { grid-column: 1 / -1; background: var(--alpha-dark-surface) !important; border: 1px solid var(--alpha-border-subtle); border-radius: 16px; overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease; display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; min-height: 420px; } .blog article:first-of-type:hover, .archive article:first-of-type:hover { border-color: rgba(212, 32, 39, 0.5); box-shadow: 0 20px 48px rgba(0,0,0,0.5), 0 0 40px rgba(212, 32, 39, 0.08); } @media (max-width: 900px) { .blog article:first-of-type, .archive article:first-of-type { grid-template-columns: 1fr; min-height: auto; } } .blog article:first-of-type .inside-article, .archive article:first-of-type .inside-article { display: contents; /* let children participate in the article's grid */ } /* Image: left column (desktop). Locked to 16:9 so the full image is visible. */ .blog article:first-of-type .post-image, .archive article:first-of-type .post-image { grid-column: 1; grid-row: 1 / -1; align-self: start; aspect-ratio: 16 / 9; } @media (max-width: 900px) { .blog article:first-of-type .post-image, .archive article:first-of-type .post-image { grid-column: 1; grid-row: 1; } } .blog article:first-of-type .post-image img, .archive article:first-of-type .post-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Meta column: right column (desktop) */ .blog article:first-of-type .entry-header, .archive article:first-of-type .entry-header { grid-column: 2; grid-row: 1; padding: 48px 48px 0 !important; } .blog article:first-of-type .entry-summary, .archive article:first-of-type .entry-summary { grid-column: 2; grid-row: 2; padding: 8px 48px 32px !important; flex: 0 !important; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; } .blog article:first-of-type .entry-meta:last-child, .archive article:first-of-type .entry-meta:last-child { grid-column: 2; grid-row: 3; padding: 0 48px 40px !important; } @media (max-width: 900px) { .blog article:first-of-type .entry-header, .blog article:first-of-type .entry-summary, .blog article:first-of-type .entry-meta:last-child, .archive article:first-of-type .entry-header, .archive article:first-of-type .entry-summary, .archive article:first-of-type .entry-meta:last-child { grid-column: 1; padding-left: 28px !important; padding-right: 28px !important; } } /* Featured card eyebrow: "FEATURED" label */ .blog article:first-of-type .entry-header::before, .archive article:first-of-type .entry-header::before { content: 'FEATURED EPISODE'; display: block; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; color: var(--alpha-red); margin-bottom: 20px; } /* Featured card title — hero-sized */ .blog article:first-of-type .entry-title, .archive article:first-of-type .entry-title { font-family: var(--font-heading) !important; font-size: clamp(36px, 4.5vw, 64px) !important; line-height: 0.95 !important; letter-spacing: 0.015em !important; text-transform: uppercase; margin: 0 0 20px !important; } /* --- Archive cards (2nd+ post) --- */ .blog article:not(:first-of-type), .archive article:not(:first-of-type) { display: flex; flex-direction: column; } /* Title-prefix accents — split out of post_title by the_title filter. .alpha-ep-number → red "EP N" before an Episode title .alpha-title-accent → red "Spring Ball" (or other named accent) before a title Both get the same visual treatment: small red prefix inline with name by default, big display block stacked above name on the featured card. */ .alpha-ep-number, .alpha-title-accent { display: inline-block; font-family: var(--font-heading); font-size: 1em; color: var(--alpha-red); margin-right: 0.4em; letter-spacing: 0.04em; } .alpha-ep-name { display: inline; } /* On the featured card, stack the prefix above the title */ .blog article:first-of-type .alpha-ep-number, .blog article:first-of-type .alpha-title-accent, .archive article:first-of-type .alpha-ep-number, .archive article:first-of-type .alpha-title-accent { display: block; line-height: 0.82; letter-spacing: -0.01em; margin: 0 0 8px 0; } .blog article:first-of-type .alpha-ep-number, .archive article:first-of-type .alpha-ep-number { font-size: clamp(72px, 9vw, 144px); letter-spacing: -0.02em; } .blog article:first-of-type .alpha-title-accent, .archive article:first-of-type .alpha-title-accent { font-size: clamp(54px, 7vw, 108px); /* 2-word accent sizes a touch smaller */ } .blog article:first-of-type .alpha-ep-name, .archive article:first-of-type .alpha-ep-name { display: block; font-size: clamp(24px, 3vw, 40px); line-height: 1.05; color: var(--alpha-white); letter-spacing: 0.01em; } /* Full-width elements inside the grid (pagination, etc) */ .blog .site-main > nav, .blog .site-main > .page-header, .archive .site-main > nav, .archive .site-main > .page-header { grid-column: 1 / -1; } /* Blog post cards */ .blog article, .archive article { background: var(--alpha-dark-surface) !important; border: 1px solid var(--alpha-border-subtle); border-radius: 12px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; display: flex; flex-direction: column; } .blog article:hover, .archive article:hover { transform: scale(1.02); box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 20px rgba(212, 32, 39, 0.1); border-color: rgba(212, 32, 39, 0.3); } .blog article .post-image, .archive article .post-image, .blog article .featured-image, .archive article .featured-image { width: 100%; aspect-ratio: 16/9; overflow: hidden; } .blog article .post-image img, .archive article .post-image img, .blog article .featured-image img, .archive article .featured-image img, .blog article img.attachment-post-image, .archive article img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog article .inside-article, .archive article .inside-article { background: var(--alpha-dark-surface) !important; padding: 0 !important; display: flex; flex-direction: column; flex: 1; } .blog article .entry-summary, .archive article .entry-summary { padding: 20px 24px; flex: 1; } .blog article .entry-header, .archive article .entry-header { display: block !important; padding: 20px 24px 0; } .blog article .entry-title, .archive article .entry-title { display: block !important; font-family: var(--font-heading) !important; font-size: 18px !important; font-weight: 700; color: var(--alpha-white) !important; line-height: 1.3; } .blog article .entry-title a, .archive article .entry-title a { color: var(--alpha-white) !important; text-decoration: none; } .blog article .entry-title a:hover, .archive article .entry-title a:hover { color: var(--alpha-red) !important; } .blog article .entry-meta, .archive article .entry-meta { padding: 0 24px 8px; font-size: 13px; color: var(--alpha-text-muted) !important; } .blog article .entry-meta a { color: var(--alpha-text-muted) !important; } .blog article .entry-meta a:hover { color: var(--alpha-red) !important; } /* Single blog post */ .single-post .inside-article { background: var(--alpha-near-black) !important; max-width: 100%; padding: 0 !important; } .single-post .entry-header { display: block !important; text-align: center; padding: 60px 20px 20px; max-width: 800px; margin: 0 auto; } .single-post .entry-title { display: block !important; font-size: clamp(28px, 4vw, 42px) !important; color: var(--alpha-white) !important; } .single-post .entry-meta { color: var(--alpha-text-muted) !important; text-align: center; padding-bottom: 20px; } .single-post .featured-image { max-width: 800px; margin: 0 auto 32px; border-radius: 12px; overflow: hidden; } .single-post .featured-image img { width: 100%; height: auto; } .single-post .entry-content { max-width: 800px !important; margin: 0 auto !important; } /* Center the entry-meta footer that contains post nav */ .single-post .entry-meta { max-width: 800px; margin-left: auto !important; margin-right: auto !important; display: block; } /* Post navigation — previous left | divider | next right, centered */ .post-navigation { background: var(--alpha-near-black) !important; width: 100%; padding: 32px 20px 40px; border-top: 1px solid var(--alpha-border-subtle); display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: start; } /* Hide GP's SVG arrows */ .post-navigation .gp-icon { display: none; } /* Previous post — left column */ .post-navigation > .nav-label:first-of-type, .post-navigation > .nav-previous { grid-column: 1; text-align: left; padding-right: 24px; } /* Center divider */ .post-navigation::after { content: ""; grid-column: 2; grid-row: 1 / 3; width: 1px; background: var(--alpha-border-subtle); align-self: stretch; } /* Next post — right column */ .post-navigation > .nav-label:last-of-type, .post-navigation > .nav-next { grid-column: 3; text-align: right; padding-left: 24px; } /* Label styling */ .post-navigation > .nav-label { font-family: var(--font-heading); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--alpha-text-muted); font-weight: 600; margin-bottom: 8px; } .post-navigation > .nav-label:first-of-type { grid-row: 1; } .post-navigation > .nav-label:last-of-type { grid-row: 1; } .post-navigation > .nav-previous { grid-row: 2; } .post-navigation > .nav-next { grid-row: 2; } /* Link styling */ .post-navigation a { color: var(--alpha-text-on-dark) !important; text-decoration: none; font-family: var(--font-heading); font-size: 15px; font-weight: 600; transition: color 0.2s; } .post-navigation a:hover { color: var(--alpha-red) !important; } .post-navigation .nav-previous .prev a::before { content: "← "; color: var(--alpha-red); } .post-navigation .nav-next .next a::after { content: " →"; color: var(--alpha-red); } @media (max-width: 640px) { .post-navigation { grid-template-columns: 1fr; gap: 24px; text-align: center; } .post-navigation > .nav-label:first-of-type, .post-navigation > .nav-previous, .post-navigation > .nav-label:last-of-type, .post-navigation > .nav-next { grid-column: 1; text-align: center; padding: 0; } .post-navigation > .nav-label:first-of-type { grid-row: 1; } .post-navigation > .nav-previous { grid-row: 2; } .post-navigation > .nav-label:last-of-type { grid-row: 3; } .post-navigation > .nav-next { grid-row: 4; } .post-navigation::after { display: none; } } /* Pagination (blog archive) */ .paging-navigation a, .paging-navigation span { color: var(--alpha-red) !important; } .paging-navigation a:hover { color: var(--alpha-white) !important; } /* === SPA NAVIGATION TRANSITIONS === */ .alpha-nav-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--alpha-red), #ff4444); z-index: 999999; transition: width 0.4s ease, opacity 0.3s ease; pointer-events: none; } #content { transition: opacity 0.12s ease; } /* Body padding when mini player bar is visible */ body.alpha-player-visible { padding-bottom: 64px; } @media (max-width: 640px) { body.alpha-player-visible { padding-bottom: 56px; } } /* === COLLAPSIBLE PLAYER BAR — Phase 1 item 4 === Click the chevron (▾) in the mini player to collapse to a 24px strip. State persisted in localStorage key "alphaPlayerCollapsed". When collapsed, the whole strip is the expand affordance. */ .alpha-player-bar.alpha-player-collapsed { max-height: 24px; } .alpha-player-bar.alpha-player-collapsed .alpha-mini-player { height: 24px; padding: 0; justify-content: center; } /* Hide everything in the mini player EXCEPT the collapse chevron */ .alpha-player-bar.alpha-player-collapsed .alpha-mini-player > *:not(.alpha-mini-collapse) { display: none !important; } /* The chevron fills the strip so clicking anywhere re-expands */ .alpha-player-bar.alpha-player-collapsed .alpha-mini-collapse { width: 100%; height: 24px; padding: 0; } /* Rotate chevron 180° in collapsed state (▾ → ▴) */ .alpha-player-bar.alpha-player-collapsed .alpha-mini-collapse svg { transform: rotate(180deg); } /* Shrink body padding to match the 24px strip when collapsed */ body.alpha-player-visible.alpha-player-collapsed { padding-bottom: 24px; } @media (max-width: 640px) { body.alpha-player-visible.alpha-player-collapsed { padding-bottom: 24px; } } /* Collapse button default styling (expanded state) */ .alpha-mini-collapse { background: transparent; border: none; color: var(--alpha-text-muted); padding: 4px 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color 0.2s ease; width: 36px; height: 36px; } .alpha-mini-collapse:hover, .alpha-mini-collapse:focus-visible { color: var(--alpha-white); outline: none; } .alpha-mini-collapse svg { width: 16px; height: 16px; transition: transform 0.25s ease; }