/* * Static Shift Radio — Main CSS * Loaded asynchronously (non-render-blocking) after critical.css * is inlined in . Contains all below-the-fold component styles. * Note: Google Fonts are loaded via wp_head() in functions.php — no @import needed. */ /* ============================================= MAIN CONTENT AREA ============================================= */ .site-main { min-height: 60vh; padding: var(--spacing-xl) 0; } .content-area { display: grid; grid-template-columns: 1fr 320px; gap: var(--spacing-xl); align-items: start; } @media (max-width: 960px) { .content-area { grid-template-columns: 1fr; } } /* ============================================= POSTS & ARCHIVE ============================================= */ .posts-header { margin-bottom: var(--spacing-xl); border-left: 4px solid var(--clr-accent); padding-left: var(--spacing-md); } .posts-header__label { font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.3em; color: var(--clr-accent); text-transform: uppercase; margin-bottom: var(--spacing-xs); } .posts-header__title { font-size: var(--fs-2xl); color: var(--clr-white); } .posts-grid { display: grid; gap: var(--spacing-lg); } /* ============================================= POST CARD ============================================= */ .post-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-top: 3px solid transparent; transition: border-color var(--transition), transform var(--transition); overflow: hidden; /* Scope layout/style recalculations to the card */ contain: layout style; } .post-card:hover { border-top-color: var(--clr-accent); transform: translateY(-2px); } .post-card__thumb { position: relative; overflow: hidden; aspect-ratio: 16/7; background: var(--clr-surface2); } .post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); will-change: transform; } .post-card:hover .post-card__thumb img { transform: scale(1.03); } .post-card__thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient( 45deg, var(--clr-surface2), var(--clr-surface2) 10px, var(--clr-surface) 10px, var(--clr-surface) 20px ); color: var(--clr-border); font-size: var(--fs-3xl); } .post-card__body { padding: var(--spacing-lg); } .post-card__meta { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-sm); font-size: var(--fs-xs); font-family: var(--ff-mono); letter-spacing: 0.1em; color: var(--clr-muted); text-transform: uppercase; } .post-card__event-date { display: inline-flex; align-items: center; gap: var(--spacing-xs); background: var(--clr-accent); color: var(--clr-white); padding: 2px 8px; font-size: var(--fs-xs); font-family: var(--ff-mono); letter-spacing: 0.1em; border-radius: var(--radius-sm); } .post-card__event-date svg { width: 12px; height: 12px; flex-shrink: 0; } .post-card__category a { color: var(--clr-accent2); } .post-card__title { font-size: var(--fs-xl); color: var(--clr-white); margin-bottom: var(--spacing-sm); line-height: 1.05; } .post-card__title a { transition: color var(--transition); } .post-card__title a:hover { color: var(--clr-accent); } .post-card__excerpt { color: var(--clr-muted); font-size: var(--fs-sm); line-height: 1.7; margin-bottom: var(--spacing-md); } .post-card__footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--clr-border); padding-top: var(--spacing-md); } .post-card__author { font-size: var(--fs-xs); color: var(--clr-muted); } .read-more { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-family: var(--ff-display); font-size: var(--fs-sm); letter-spacing: 0.1em; color: var(--clr-accent); text-transform: uppercase; transition: gap var(--transition); } .read-more:hover { gap: var(--spacing-sm); } .read-more svg { width: 14px; height: 14px; transition: transform var(--transition); } .read-more:hover svg { transform: translateX(3px); } /* ============================================= SINGLE POST ============================================= */ .single-post__hero { position: relative; margin-bottom: var(--spacing-xl); } .single-post__featured-img { width: 100%; max-height: 480px; object-fit: cover; } .single-post__header { background: var(--clr-surface); border: 1px solid var(--clr-border); border-top: 4px solid var(--clr-accent); padding: var(--spacing-xl); margin-bottom: var(--spacing-xl); } .single-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md); font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--clr-muted); text-transform: uppercase; } .single-post__event-badge { display: inline-flex; align-items: center; gap: var(--spacing-xs); background: var(--clr-accent); color: var(--clr-white); padding: 4px 12px; font-family: var(--ff-mono); font-size: var(--fs-sm); letter-spacing: 0.1em; border-radius: var(--radius-sm); } .single-post__title { font-size: clamp(2rem, 5vw, 4rem); color: var(--clr-white); margin-bottom: var(--spacing-md); } .single-post__content { background: var(--clr-surface); border: 1px solid var(--clr-border); padding: var(--spacing-xl); margin-bottom: var(--spacing-xl); } /* WordPress content styles */ .single-post__content h2, .single-post__content h3, .single-post__content h4 { color: var(--clr-white); margin: var(--spacing-xl) 0 var(--spacing-md); } .single-post__content h2 { font-size: var(--fs-2xl); } .single-post__content h3 { font-size: var(--fs-xl); } .single-post__content a { color: var(--clr-accent); text-decoration: underline; text-underline-offset: 3px; } .single-post__content ul, .single-post__content ol { list-style: initial; padding-left: var(--spacing-lg); margin-bottom: var(--spacing-md); } .single-post__content blockquote { border-left: 4px solid var(--clr-accent); padding-left: var(--spacing-lg); margin: var(--spacing-lg) 0; color: var(--clr-muted); font-style: italic; font-size: var(--fs-md); } .single-post__content img { max-width: 100%; height: auto; margin: var(--spacing-lg) auto; border: 1px solid var(--clr-border); } .single-post__content pre { background: #000; border: 1px solid var(--clr-border); padding: var(--spacing-md); overflow-x: auto; font-family: var(--ff-mono); font-size: var(--fs-sm); margin-bottom: var(--spacing-md); } /* Post navigation */ .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); margin-bottom: var(--spacing-xl); } .post-nav__item { background: var(--clr-surface); border: 1px solid var(--clr-border); padding: var(--spacing-md); transition: border-color var(--transition); } .post-nav__item:hover { border-color: var(--clr-accent); } .post-nav__label { font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.2em; color: var(--clr-muted); text-transform: uppercase; margin-bottom: var(--spacing-xs); } .post-nav__title { font-family: var(--ff-display); font-size: var(--fs-md); color: var(--clr-white); line-height: 1.2; } .post-nav__item--next { text-align: right; } /* ============================================= EVENTS PAGE ============================================= */ .events-list { display: grid; gap: var(--spacing-lg); } /* ============================================= SIDEBAR ============================================= */ .sidebar { position: sticky; top: calc(56px + var(--spacing-lg)); } .widget { background: var(--clr-surface); border: 1px solid var(--clr-border); margin-bottom: var(--spacing-lg); overflow: hidden; } .widget__title { font-family: var(--ff-display); font-size: var(--fs-md); color: var(--clr-white); letter-spacing: 0.1em; text-transform: uppercase; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 2px solid var(--clr-accent); background: var(--clr-surface2); } .widget__body { padding: var(--spacing-md) var(--spacing-lg); } /* Recent posts widget */ .widget-post-item { display: flex; gap: var(--spacing-md); padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--clr-border); } .widget-post-item:last-child { border-bottom: none; } .widget-post-item__thumb { width: 60px; height: 60px; flex-shrink: 0; overflow: hidden; background: var(--clr-surface2); } .widget-post-item__thumb img { width: 100%; height: 100%; object-fit: cover; } .widget-post-item__title { font-family: var(--ff-display); font-size: var(--fs-sm); color: var(--clr-white); line-height: 1.2; margin-bottom: 2px; } .widget-post-item__title a:hover { color: var(--clr-accent); } .widget-post-item__date { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--clr-muted); letter-spacing: 0.05em; } /* Widget event list */ .widget-event-list { padding: var(--spacing-sm) 0; } .widget-event-item { display: flex; gap: var(--spacing-md); align-items: center; padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--clr-border); } .widget-event-item:last-child { border-bottom: none; } .widget-event-item__date { width: 42px; flex-shrink: 0; text-align: center; background: var(--clr-accent); color: var(--clr-white); padding: 4px 0; font-family: var(--ff-display); font-size: var(--fs-lg); line-height: 1; } .widget-event-item__date span { display: block; font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; } .widget-event-item__title { font-family: var(--ff-display); font-size: var(--fs-sm); color: var(--clr-white); line-height: 1.2; } .widget-event-item__title a:hover { color: var(--clr-accent); } /* Search widget */ .widget-search { display: flex; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); overflow: hidden; } .widget-search input { flex: 1; background: var(--clr-bg); border: none; padding: var(--spacing-sm) var(--spacing-md); color: var(--clr-text); font-family: var(--ff-body); font-size: var(--fs-sm); outline: none; } .widget-search button { background: var(--clr-accent); color: var(--clr-white); padding: var(--spacing-sm) var(--spacing-md); font-family: var(--ff-display); letter-spacing: 0.05em; text-transform: uppercase; font-size: var(--fs-sm); transition: background var(--transition); } .widget-search button:hover { background: var(--clr-accent2); } /* ============================================= PAGINATION ============================================= */ .pagination { display: flex; align-items: center; justify-content: center; gap: var(--spacing-xs); margin-top: var(--spacing-xl); } .pagination a, .pagination span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--clr-border); font-family: var(--ff-display); font-size: var(--fs-md); color: var(--clr-muted); transition: all var(--transition); } .pagination a:hover { border-color: var(--clr-accent); color: var(--clr-accent); } .pagination .current { background: var(--clr-accent); color: var(--clr-white); border-color: var(--clr-accent); } /* ============================================= FOOTER ============================================= */ .site-footer { background: var(--clr-surface); border-top: 3px solid var(--clr-accent); padding: var(--spacing-xl) 0 var(--spacing-lg); margin-top: var(--spacing-2xl); /* Skip paint for off-screen footer until needed */ content-visibility: auto; contain-intrinsic-size: 0 400px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } } .footer-brand__logo { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .footer-brand__logo img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--clr-accent); } .footer-brand__name { font-family: var(--ff-display); font-size: var(--fs-xl); color: var(--clr-white); } .footer-brand__tagline { color: var(--clr-muted); font-style: italic; margin-bottom: var(--spacing-md); } .footer-social { display: flex; gap: var(--spacing-sm); } .footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--clr-border); color: var(--clr-muted); font-size: var(--fs-md); transition: all var(--transition); border-radius: var(--radius-sm); } .footer-social a:hover { background: var(--clr-accent); border-color: var(--clr-accent); color: var(--clr-white); } .footer-widget__title { font-family: var(--ff-display); font-size: var(--fs-lg); color: var(--clr-white); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--clr-accent); } .footer-widget ul li { padding: var(--spacing-xs) 0; border-bottom: 1px solid var(--clr-border); } .footer-widget ul li a { color: var(--clr-muted); font-size: var(--fs-sm); transition: color var(--transition); } .footer-widget ul li a:hover { color: var(--clr-accent); } .footer-bottom { border-top: 1px solid var(--clr-border); padding-top: var(--spacing-lg); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-md); font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--clr-muted); text-transform: uppercase; } .footer-bottom__signal { display: flex; align-items: center; gap: var(--spacing-xs); } .signal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clr-accent); animation: pulse 2s ease infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ============================================= PAGE TEMPLATES ============================================= */ .page-header { background: var(--clr-surface); border-bottom: 3px solid var(--clr-accent); padding: var(--spacing-xl) 0; margin-bottom: var(--spacing-xl); } .page-header__title { font-size: clamp(2rem, 5vw, 4rem); color: var(--clr-white); } .page-header__breadcrumb { font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.2em; color: var(--clr-muted); text-transform: uppercase; margin-bottom: var(--spacing-sm); } .page-header__breadcrumb a { color: var(--clr-accent); } .page-header__breadcrumb a:hover { text-decoration: underline; } /* ============================================= 404 PAGE ============================================= */ .error-404 { text-align: center; padding: var(--spacing-2xl) 0; } .error-404__code { font-size: 10rem; line-height: 1; color: var(--clr-accent); opacity: 0.2; font-family: var(--ff-display); } .error-404__title { font-size: var(--fs-2xl); color: var(--clr-white); margin-bottom: var(--spacing-md); } .error-404__text { color: var(--clr-muted); margin-bottom: var(--spacing-xl); } /* ============================================= BUTTONS ============================================= */ .btn { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 10px 24px; font-family: var(--ff-display); font-size: var(--fs-md); letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--radius-sm); transition: all var(--transition); cursor: pointer; } .btn--primary { background: var(--clr-accent); color: var(--clr-white); border: 2px solid var(--clr-accent); } .btn--primary:hover { background: transparent; color: var(--clr-accent); } .btn--outline { background: transparent; color: var(--clr-accent); border: 2px solid var(--clr-accent); } .btn--outline:hover { background: var(--clr-accent); color: var(--clr-white); } /* ============================================= COMMENTS ============================================= */ .comments-section { background: var(--clr-surface); border: 1px solid var(--clr-border); padding: var(--spacing-xl); margin-bottom: var(--spacing-xl); content-visibility: auto; contain-intrinsic-size: 0 300px; } .comments-title { font-size: var(--fs-xl); color: var(--clr-white); margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--clr-accent); } .comment { display: grid; grid-template-columns: 50px 1fr; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--clr-border); } .comment:last-child { border-bottom: none; } .comment__avatar img { border-radius: 50%; border: 2px solid var(--clr-border); } .comment__meta { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--clr-muted); letter-spacing: 0.1em; margin-bottom: var(--spacing-xs); } .comment__author { font-family: var(--ff-display); font-size: var(--fs-md); color: var(--clr-white); text-transform: uppercase; margin-right: var(--spacing-sm); } .comment-form .form-group { margin-bottom: var(--spacing-md); } .comment-form label { display: block; font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--clr-muted); margin-bottom: var(--spacing-xs); } .comment-form input, .comment-form textarea { width: 100%; background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); padding: var(--spacing-sm) var(--spacing-md); color: var(--clr-text); font-family: var(--ff-body); font-size: var(--fs-base); outline: none; transition: border-color var(--transition); } .comment-form input:focus, .comment-form textarea:focus { border-color: var(--clr-accent); } .comment-form textarea { min-height: 120px; resize: vertical; } /* ============================================= RESPONSIVE (non-critical breakpoints) ============================================= */ @media (max-width: 600px) { .post-card__body { padding: var(--spacing-md); } .single-post__header, .single-post__content { padding: var(--spacing-md); } .post-nav { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } } /* ============================================= EPISODE CARDS (archive + shortcode) ============================================= */ .episode-list { display: grid; gap: var(--spacing-xl); } .episode-card { display: grid; grid-template-columns: 160px 1fr; gap: var(--spacing-lg); background: var(--clr-surface); border: 1px solid var(--clr-border); border-left: 4px solid var(--clr-accent); padding: var(--spacing-lg); transition: border-color var(--transition), transform var(--transition); contain: layout style; } .episode-card:hover { transform: translateX(3px); } @media (max-width: 600px) { .episode-card { grid-template-columns: 1fr; } } .episode-card__thumb { width: 160px; height: 160px; overflow: hidden; flex-shrink: 0; background: var(--clr-surface2); } .episode-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); will-change: transform; } .episode-card:hover .episode-card__thumb img { transform: scale(1.04); } .episode-card__eyebrow { display: flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-xs); } .episode-card__season, .episode-card__number { font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--clr-accent); background: rgba(232,35,42,0.1); padding: 2px 8px; border-radius: var(--radius-sm); } .episode-card__title { font-size: var(--fs-xl); color: var(--clr-white); line-height: 1.1; margin-bottom: var(--spacing-xs); } .episode-card__title a:hover { color: var(--clr-accent); } .episode-card__excerpt { color: var(--clr-muted); font-size: var(--fs-sm); line-height: 1.6; margin-bottom: var(--spacing-sm); } .episode-card__meta { display: flex; align-items: center; gap: var(--spacing-md); font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--clr-muted); margin-bottom: var(--spacing-md); } .episode-card__duration { display: flex; align-items: center; gap: 4px; } /* ============================================= EPISODE MINI PLAYER (archive + shortcode) ============================================= */ .episode-mini-player { margin-bottom: var(--spacing-md); } .episode-mini-player__audio { width: 100%; height: 36px; border-radius: var(--radius-sm); accent-color: var(--clr-accent); } /* ============================================= SINGLE EPISODE ============================================= */ .single-episode__hero { margin-bottom: var(--spacing-xl); } .single-episode__featured-img { width: 100%; max-height: 480px; object-fit: cover; } .single-episode__header { background: var(--clr-surface); border: 1px solid var(--clr-border); border-top: 4px solid var(--clr-accent); padding: var(--spacing-xl); margin-bottom: var(--spacing-xl); } .single-episode__eyebrow { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); } .episode-tag { font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--clr-accent); background: rgba(232,35,42,0.1); border: 1px solid rgba(232,35,42,0.3); padding: 3px 10px; border-radius: var(--radius-sm); } .episode-tag--explicit { color: var(--clr-muted); background: rgba(136,136,128,0.1); border-color: rgba(136,136,128,0.3); } .single-episode__title { font-size: clamp(2rem, 5vw, 4rem); color: var(--clr-white); margin-bottom: var(--spacing-md); line-height: 1.05; } .single-episode__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-md); font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--clr-muted); text-transform: uppercase; } .single-episode__meta span { display: flex; align-items: center; gap: 4px; } /* ============================================= FULL EPISODE PLAYER (single-episode.php) ============================================= */ .single-episode__player { margin-bottom: var(--spacing-xl); } .episode-player { background: var(--clr-surface2); border: 1px solid var(--clr-border); border-left: 4px solid var(--clr-accent); padding: var(--spacing-lg); } .episode-player__label { display: flex; align-items: center; gap: var(--spacing-xs); font-family: var(--ff-display); font-size: var(--fs-md); letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-accent); margin-bottom: var(--spacing-md); } .episode-player__audio { width: 100%; height: 48px; border-radius: var(--radius-sm); accent-color: var(--clr-accent); margin-bottom: var(--spacing-md); } .episode-player__actions { display: flex; gap: var(--spacing-md); flex-wrap: wrap; } .single-episode__content { background: var(--clr-surface); border: 1px solid var(--clr-border); padding: var(--spacing-xl); margin-bottom: var(--spacing-xl); } /* ============================================= PODCAST SUBSCRIBE BADGE ============================================= */ .podcast-badge { display: inline-flex; align-items: center; gap: var(--spacing-xs); background: var(--clr-accent); color: var(--clr-white); font-family: var(--ff-display); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-sm); transition: background var(--transition); margin-top: var(--spacing-sm); text-decoration: none; } .podcast-badge:hover { background: var(--clr-accent2); } /* ============================================= SONG REQUEST FORM ============================================= */ .request-form-wrap { background: var(--clr-surface); border: 1px solid var(--clr-border); border-top: 4px solid var(--clr-accent); padding: var(--spacing-xl); margin: var(--spacing-lg) 0; } .request-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); } .form-group--full { grid-column: 1 / -1; } @media (max-width: 600px) { .request-form__grid { grid-template-columns: 1fr; } } .request-form label { display: block; font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--clr-muted); margin-bottom: var(--spacing-xs); } .request-form input[type="text"], .request-form textarea { width: 100%; background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); padding: var(--spacing-sm) var(--spacing-md); color: var(--clr-text); font-family: var(--ff-body); font-size: var(--fs-base); outline: none; transition: border-color var(--transition); } .request-form input[type="text"]:focus, .request-form textarea:focus { border-color: var(--clr-accent); } .request-form textarea { min-height: 90px; resize: vertical; } .request-notice { padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-sm); font-family: var(--ff-display); font-size: var(--fs-md); letter-spacing: 0.05em; margin-bottom: var(--spacing-lg); } .request-notice--success { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.4); color: #86efac; } .request-notice--error { background: rgba(232, 35, 42, 0.1); border: 1px solid rgba(232, 35, 42, 0.4); color: var(--clr-accent); } /* ============================================= BUTTON SIZE VARIANT ============================================= */ .btn--sm { padding: 6px 14px; font-size: var(--fs-sm); } /* ============================================= ENHANCED 404 PAGE ============================================= */ .error-404 { padding: var(--spacing-xl) 0 var(--spacing-2xl); text-align: center; } .error-404__code { font-size: clamp(6rem, 20vw, 12rem); line-height: 1; color: var(--clr-accent); opacity: 0.12; font-family: var(--ff-display); letter-spacing: 0.05em; margin-bottom: calc(var(--spacing-xl) * -1.5); pointer-events: none; user-select: none; } .error-404__content { position: relative; z-index: 1; max-width: 560px; margin: 0 auto var(--spacing-xl); } .error-404__title { font-size: clamp(2rem, 5vw, 3.5rem); color: var(--clr-white); margin-bottom: var(--spacing-md); } .error-404__text { color: var(--clr-muted); font-size: var(--fs-md); margin-bottom: var(--spacing-xl); } .error-404__actions { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--spacing-xl); } .error-404__search { max-width: 440px; margin: 0 auto; } .error-404__search-label { font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--clr-muted); margin-bottom: var(--spacing-sm); } /* Now-playing prompt box */ .error-404__player-prompt { max-width: 640px; margin: var(--spacing-xl) auto; } .error-404__player-inner { display: flex; align-items: center; gap: var(--spacing-lg); background: var(--clr-surface); border: 1px solid var(--clr-border); border-left: 4px solid var(--clr-accent); padding: var(--spacing-lg); text-align: left; } .error-404__player-icon { color: var(--clr-accent); flex-shrink: 0; } .error-404__player-text { flex: 1; display: flex; flex-direction: column; gap: 4px; } .error-404__player-text strong { font-family: var(--ff-display); font-size: var(--fs-md); color: var(--clr-white); letter-spacing: 0.05em; text-transform: uppercase; } .error-404__player-text span { font-size: var(--fs-sm); color: var(--clr-muted); } .error-404__signal { width: 10px; height: 10px; border-radius: 50%; background: var(--clr-accent); animation: pulse 2s ease infinite; flex-shrink: 0; } /* Recent posts on 404 */ .error-404__recent { margin-top: var(--spacing-xl); text-align: left; } .error-404__recent-title { font-size: var(--fs-lg); color: var(--clr-white); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--clr-accent); } .error-404__recent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); } @media (max-width: 680px) { .error-404__recent-grid { grid-template-columns: 1fr; } } .error-404__recent-item { display: flex; flex-direction: column; background: var(--clr-surface); border: 1px solid var(--clr-border); transition: border-color var(--transition), transform var(--transition); text-decoration: none; overflow: hidden; } .error-404__recent-item:hover { border-color: var(--clr-accent); transform: translateY(-2px); } .error-404__recent-thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--clr-surface2); } .error-404__recent-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .error-404__recent-item:hover .error-404__recent-thumb img { transform: scale(1.04); } .error-404__recent-body { padding: var(--spacing-md); display: flex; flex-direction: column; gap: 4px; } .error-404__recent-date { font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--clr-muted); text-transform: uppercase; } .error-404__recent-post-title { font-family: var(--ff-display); font-size: var(--fs-md); color: var(--clr-white); line-height: 1.2; letter-spacing: 0.03em; } /* ============================================= SEARCH RESULTS PAGE ============================================= */ .search-filters { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin-bottom: var(--spacing-lg); } .search-filter-tab { display: inline-block; padding: 6px 16px; font-family: var(--ff-display); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-muted); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); transition: all var(--transition); text-decoration: none; } .search-filter-tab:hover { color: var(--clr-text); border-color: var(--clr-text); } .search-filter-tab.is-active { background: var(--clr-accent); border-color: var(--clr-accent); color: var(--clr-white); } .search-result-count { font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--clr-muted); margin-bottom: var(--spacing-lg); } /* Search result cards */ .search-result { display: grid; grid-template-columns: 100px 1fr; gap: var(--spacing-md); background: var(--clr-surface); border: 1px solid var(--clr-border); padding: var(--spacing-md); transition: border-color var(--transition); margin-bottom: 1px; contain: layout style; } .search-result:hover { border-color: var(--clr-accent); } .search-result--page { grid-template-columns: 1fr; } .search-result__thumb { width: 100px; height: 100px; overflow: hidden; background: var(--clr-surface2); flex-shrink: 0; } .search-result__thumb img { width: 100%; height: 100%; object-fit: cover; } .search-result__type { display: inline-flex; align-items: center; gap: 4px; font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--clr-accent); margin-bottom: 4px; } .search-result__title { font-size: var(--fs-lg); color: var(--clr-white); line-height: 1.15; margin-bottom: var(--spacing-xs); } .search-result__title a { color: var(--clr-white); } .search-result__title a:hover { color: var(--clr-accent); } .search-result__excerpt { font-size: var(--fs-sm); color: var(--clr-muted); line-height: 1.6; margin-bottom: var(--spacing-xs); } .search-result__meta { display: flex; gap: var(--spacing-md); font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--clr-muted); letter-spacing: 0.08em; } .search-result__link { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--clr-muted); word-break: break-all; } /* No results state */ .search-no-results { text-align: center; padding: var(--spacing-2xl) 0; } .search-no-results__icon { color: var(--clr-border); margin-bottom: var(--spacing-lg); } .search-no-results h2 { font-size: var(--fs-2xl); color: var(--clr-white); margin-bottom: var(--spacing-md); } .search-no-results p { color: var(--clr-muted); margin-bottom: var(--spacing-xl); } .search-no-results__suggestions { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; margin-top: var(--spacing-lg); } .search-empty { padding: var(--spacing-xl) 0; text-align: center; color: var(--clr-muted); } /* ============================================= SOCIAL SHARE BUTTONS ============================================= */ .share-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-xs); padding: var(--spacing-md) 0; border-top: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border); margin: var(--spacing-lg) 0; } .share-buttons__label { display: flex; align-items: center; gap: 6px; font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--clr-muted); margin-right: var(--spacing-xs); flex-shrink: 0; } .share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-family: var(--ff-display); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--radius-sm); border: 1px solid var(--clr-border); color: var(--clr-muted); background: transparent; cursor: pointer; transition: all var(--transition); text-decoration: none; white-space: nowrap; } .share-btn:hover { color: var(--clr-white); border-color: var(--clr-text); background: rgba(255,255,255,0.05); } .share-btn--facebook:hover { color: #fff; border-color: #1877f2; background: #1877f2; } .share-btn--x:hover { color: #fff; border-color: #000; background: #000; } .share-btn--linkedin:hover { color: #fff; border-color: #0a66c2; background: #0a66c2; } .share-btn--copy:hover { color: var(--clr-accent); border-color: var(--clr-accent); } .share-btn--native { border-color: var(--clr-accent); color: var(--clr-accent); } .share-btn--native:hover { background: var(--clr-accent); color: #fff; } /* ============================================= RELATED CONTENT ============================================= */ .related-content { margin: var(--spacing-xl) 0; content-visibility: auto; contain-intrinsic-size: 0 320px; } .related-content__title { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--fs-xl); color: var(--clr-white); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--clr-accent); } .related-content__title svg { color: var(--clr-accent); flex-shrink: 0; } .related-content__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); } @media (max-width: 720px) { .related-content__grid { grid-template-columns: 1fr; } } @media (min-width: 721px) and (max-width: 960px) { .related-content__grid { grid-template-columns: repeat(2, 1fr); } } .related-card { display: flex; flex-direction: column; background: var(--clr-surface); border: 1px solid var(--clr-border); border-top: 3px solid transparent; overflow: hidden; text-decoration: none; transition: border-color var(--transition), transform var(--transition); contain: layout style; } .related-card:hover { border-top-color: var(--clr-accent); transform: translateY(-2px); } .related-card__thumb { aspect-ratio: 16/7; overflow: hidden; background: var(--clr-surface2); flex-shrink: 0; } .related-card--episode .related-card__thumb { aspect-ratio: 1; max-height: 160px; } .related-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); will-change: transform; } .related-card:hover .related-card__thumb img { transform: scale(1.04); } .related-card__thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); color: var(--clr-border); } .related-card__body { padding: var(--spacing-md); display: flex; flex-direction: column; gap: 4px; flex: 1; } .related-card__cat { font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--clr-accent); } .related-card__title { font-family: var(--ff-display); font-size: var(--fs-md); color: var(--clr-white); line-height: 1.2; letter-spacing: 0.02em; } .related-card__date { display: flex; align-items: center; gap: 4px; font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--clr-muted); letter-spacing: 0.05em; margin-top: auto; padding-top: 4px; }