/** Theme Name: Astra Child Theme SUN Author: Brainstorm Force Author URI: http://wpastra.com/about/ Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme! Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: astra-child-theme-sun Template: astra */ /* ========================================================== GLOBAL: base scroll + background - allow vertical scroll - prevent horizontal scroll ========================================================== */ html, body{ min-height: 100%; width: 100%; max-width: 100%; overscroll-behavior-x: none; } html{ overflow-x: hidden; } @supports (overflow: clip){ html{ overflow-x: clip; } } body{ background: linear-gradient(180deg, #0D5EA7 0%, #12233d 34%, #12233d 100%); overflow-x: hidden; /* prevent sideways scrollbar */ overflow-y: auto; /* allow vertical scroll */ } /* Make sure Astra containers stay above blobs */ #page, .site, #content, .site-content, #masthead{ position: relative; z-index: 0; } .site-header, #masthead, #masthead .site-primary-header-wrap, #masthead .ast-builder-grid-row-container, #masthead .ast-builder-grid-row, #masthead .main-header-menu, #masthead .main-navigation { overflow: visible; } .site-header, #masthead, #masthead .site-primary-header-wrap, #masthead .ast-builder-grid-row-container, #masthead .ast-builder-grid-row { z-index: 1000; } #masthead .sub-menu, #masthead .astra-full-megamenu-wrapper { z-index: 1001; } /* ========================================================== SHORTCODE WRAPPER HELPERS ========================================================== */ .rs-shortcode-background{ display: block; width: 100%; position: relative; isolation: isolate; } .rs-shortcode-background.rs-full-bleed{ --rs-wave-height: 42px; --rs-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,82C52,58,104,54,156,66C207,78,259,108,311,102C362,95,414,52,466,46C517,40,569,72,621,86C672,100,724,96,776,78C827,60,879,28,931,34C982,40,1034,84,1086,94C1137,104,1174,88,1200,74L1200,120L0,120Z' fill='%23fff'/%3E%3C/svg%3E"); width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background-image: none; border: 0; box-shadow: none; overflow: visible; } /* Variant: tighter "radio wave" look */ .rs-shortcode-background.rs-full-bleed.rs-wave-radio{ --rs-wave-height: 34px; --rs-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,90C60,76,120,76,180,90C232,102,286,108,340,96C394,84,446,56,500,62C554,68,606,108,660,106C714,104,766,64,820,58C874,52,926,82,980,92C1034,102,1086,94,1140,84C1166,79,1186,77,1200,78L1200,120L0,120Z' fill='%23fff'/%3E%3C/svg%3E"); } /* Smooth top wave (ocean default, radio optional) */ .rs-shortcode-background.rs-full-bleed::before{ content: ""; position: absolute; left: 0; right: 0; top: calc((-1 * var(--rs-wave-height)) + 1px); height: calc(var(--rs-wave-height) + 4px); /* stronger overlap avoids seam */ pointer-events: none; z-index: 2; background-color: inherit; background-image: none; -webkit-mask-image: var(--rs-wave-mask); -webkit-mask-repeat: no-repeat; -webkit-mask-position: top center; -webkit-mask-size: 100% 100%; mask-image: var(--rs-wave-mask); mask-repeat: no-repeat; mask-position: top center; mask-size: 100% 100%; transform: translateZ(0); filter: none; backface-visibility: hidden; } /* Matching smooth bottom wave */ .rs-shortcode-background.rs-full-bleed::after{ content: ""; position: absolute; left: 0; right: 0; bottom: calc((-1 * var(--rs-wave-height)) + 1px); height: calc(var(--rs-wave-height) + 4px); /* stronger overlap avoids seam */ pointer-events: none; z-index: 2; background-color: inherit; background-image: none; -webkit-mask-image: var(--rs-wave-mask); -webkit-mask-repeat: no-repeat; -webkit-mask-position: top center; -webkit-mask-size: 100% 100%; mask-image: var(--rs-wave-mask); mask-repeat: no-repeat; mask-position: top center; mask-size: 100% 100%; transform: scaleY(-1); transform-origin: center center; filter: none; backface-visibility: hidden; } .rs-shortcode-background.rs-full-bleed > *{ position: relative; z-index: 1; } /* Smoother wave profile on smaller screens */ @media (max-width: 980px){ .rs-shortcode-background.rs-full-bleed{ --rs-wave-height: 34px; --rs-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,84C150,54,300,54,450,84C600,114,750,114,900,84C1020,60,1110,60,1200,78L1200,120L0,120Z' fill='%23fff'/%3E%3C/svg%3E"); } .rs-shortcode-background.rs-full-bleed.rs-wave-radio{ --rs-wave-height: 28px; --rs-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,90C120,72,240,72,360,90C500,108,620,108,760,90C900,72,1020,72,1200,88L1200,120L0,120Z' fill='%23fff'/%3E%3C/svg%3E"); } } @media (max-width: 640px){ .rs-shortcode-background.rs-full-bleed{ --rs-wave-height: 28px; } .rs-shortcode-background.rs-full-bleed.rs-wave-radio{ --rs-wave-height: 24px; } } /* Full-bleed background, but keep inner content centered/not full width */ .rs-shortcode-background.rs-full-bleed > *{ width: 100%; max-width: min(960px, calc(100vw - 32px)); margin-left: auto; margin-right: auto; } /* ========================================================== SHORTCODE MENU: button row ========================================================== */ .rs-shortcode-menu .rs-shortcode-menu__list, .rs-shortcode-menu .menu{ display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .rs-shortcode-menu .menu-item{ margin: 0; padding: 0; } .rs-shortcode-menu .menu-item > a{ display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.1); color: #ffffff; font-weight: 700; line-height: 1; text-decoration: none; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; } .rs-shortcode-menu .menu-item > a:hover{ background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.6); transform: translateY(-1px); } .rs-shortcode-menu .menu-item > a:focus-visible{ outline: 2px solid #ffffff; outline-offset: 2px; } .rs-shortcode-menu .menu-item.current-menu-item > a, .rs-shortcode-menu .menu-item.current_page_item > a, .rs-shortcode-menu .menu-item.current-menu-ancestor > a, .rs-shortcode-menu .menu-item.current-page-ancestor > a{ background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.34); color: #ffffff; } /* Participation CTA buttons sit on white panels, so use a solid fill instead of the glass treatment intended for dark backgrounds. */ .rs-participation-cards__actions .rs-shortcode-menu__list{ gap: 12px; } .rs-participation-cards__actions .menu-item > a{ border-color: #0D5EA7; background: #0D5EA7; color: #ffffff; box-shadow: 0 10px 22px rgba(13, 94, 167, .18); } .rs-participation-cards__actions .menu-item > a:hover{ background: #0a4d89; border-color: #0a4d89; } .rs-participation-cards__actions .menu-item > a:focus-visible{ outline-color: #0D5EA7; } .rs-participation-cards__actions .menu-item.current-menu-item > a, .rs-participation-cards__actions .menu-item.current_page_item > a, .rs-participation-cards__actions .menu-item.current-menu-ancestor > a, .rs-participation-cards__actions .menu-item.current-page-ancestor > a{ background: #0a4d89; border-color: #0a4d89; color: #ffffff; } .rs-participation-cards{ display: grid; gap: clamp(16px, 2vw, 24px); } .rs-participation-cards .rs-participation-cards__rail{ grid-template-columns: minmax(0, 1fr); gap: 14px; } .rs-participation-cards .rs-show-card-live .rs-live-showcard__link{ grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: "media body"; align-items: stretch; min-height: 144px; border-radius: 18px; background: #f5f7fb; } .rs-participation-cards .rs-show-card-live .rs-live-showcard__media{ grid-area: media; min-height: 100%; } .rs-participation-cards .rs-show-card-live .rs-live-showcard__placeholder{ min-height: 100%; } .rs-participation-cards .rs-show-card-live .rs-live-showcard__body{ grid-area: body; padding: 14px 18px 14px 16px; justify-content: center; } .rs-participation-cards .rs-show-card-live .rs-live-showcard__actions{ display: none; } .rs-participation-cards .rs-show-card-live .rs-live-showcard__meta-label{ color: #2f64ad; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .rs-participation-cards .rs-show-card-live .rs-live-showcard__title{ margin-top: 6px; font-size: clamp(20px, 2vw, 28px); line-height: 1.1; } .rs-participation-cards .rs-show-card-live .rs-live-showcard__excerpt{ margin-top: 8px; max-width: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .rs-participation-cards .rs-show-card-live .rs-live-showcard__cta{ display: inline-flex; align-items: center; justify-content: center; min-height: 42px; min-width: 118px; padding: 8px 14px; border-radius: 999px; background: #0D5EA7; color: #ffffff; text-decoration: none; } .rs-participation-cards .rs-show-card-live .rs-live-showcard__cta:hover{ background: #0a4d89; color: #ffffff; } @media (max-width: 640px){ .rs-shortcode-menu .menu-item > a{ min-height: 38px; padding: 9px 14px; font-size: 0.95rem; } .rs-participation-cards{ gap: 14px; } .rs-participation-cards .rs-participation-cards__rail{ gap: 10px; } .rs-participation-cards .rs-show-card-live .rs-live-showcard__link{ grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: 1fr; grid-template-areas: "media body"; min-height: 110px; } .rs-participation-cards .rs-show-card-live .rs-live-showcard__body{ padding: 10px; } .rs-participation-cards .rs-show-card-live .rs-live-showcard__actions{ display: none; } .rs-participation-cards .rs-show-card-live .rs-live-showcard__title{ font-size: clamp(16px, 4.1vw, 20px); } .rs-participation-cards .rs-show-card-live .rs-live-showcard__excerpt{ display: none; } .rs-participation-cards .rs-show-card-live .rs-live-showcard__cta{ min-width: 0; min-height: 36px; padding: 6px 12px; font-size: 12px; } } /* ========================================================== FULL-SCREEN ANIMATED BLOB BACKGROUND (site-wide) - 3 blobs behind all content - transform-only animation ========================================================== */ /* Base fixed background layer behind everything */ body::before{ content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, #0D5EA7 0%, #12233d 34%, #12233d 100%); z-index: -2; } /* Blob A (top-left) */ html::before{ content: ""; position: fixed; width: clamp(520px, 42vw, 980px); height: clamp(520px, 42vw, 980px); left: calc(20vw - (clamp(520px, 42vw, 980px) / 2)); top: calc(30vh - (clamp(520px, 42vw, 980px) / 2)); background: rgba(96, 165, 250, 0.34); border: 1px solid rgba(255,255,255,0.20); border-radius: 50%; z-index: -1; pointer-events: none; will-change: transform; animation: rsBlobA 39.6s linear infinite; animation-delay: -8s; } /* Blob B (bottom-left) */ html::after{ content: ""; position: fixed; width: clamp(440px, 34vw, 860px); height: clamp(440px, 34vw, 860px); left: calc(25vw - (clamp(440px, 34vw, 860px) / 2)); top: calc(78vh - (clamp(440px, 34vw, 860px) / 2)); background: rgba(34, 211, 238, 0.28); border: 1px solid rgba(20,53,102,0.18); border-radius: 50%; z-index: -1; pointer-events: none; will-change: transform; animation: rsBlobB 43.2s linear infinite; animation-delay: -18s; } /* Blob C (right/mid-high) Keep this on the persistent page shell so AJAX navigation does not depend on body-class rewrites to keep it painted. */ #page::after{ content: ""; position: fixed; width: clamp(500px, 40vw, 940px); height: clamp(500px, 40vw, 940px); left: calc(82vw - (clamp(500px, 40vw, 940px) / 2)); top: calc(42vh - (clamp(500px, 40vw, 940px) / 2)); background: rgba(147, 197, 253, 0.3); border: 1px solid rgba(255,223,92,0.22); border-radius: 50%; z-index: -1; pointer-events: none; will-change: transform; animation: rsBlobC 46.8s linear infinite; animation-delay: -28s; } #page::before{ --rs-blob-diameter: clamp(500px, 40vw, 940px); --rs-blob-font-size: clamp(20px, calc(var(--rs-blob-diameter) * 0.05), 38px); --rs-blob-padding-inline: clamp(112px, calc(var(--rs-blob-diameter) * 0.24), 168px); --rs-blob-padding-block: clamp(124px, calc(var(--rs-blob-diameter) * 0.27), 190px); content: none; position: fixed; width: var(--rs-blob-diameter); height: var(--rs-blob-diameter); left: calc(82vw - (var(--rs-blob-diameter) / 2)); top: calc(42vh - (var(--rs-blob-diameter) / 2)); z-index: -1; display: grid; place-items: center; padding: var(--rs-blob-padding-block) var(--rs-blob-padding-inline); box-sizing: border-box; color: rgba(255,255,255,.74); font-size: var(--rs-blob-font-size); font-family: "Shrikhand", serif; font-weight: 400; line-height: 1.08; letter-spacing: .01em; text-align: center; text-wrap: balance; white-space: pre-line; transform-origin: 50% 50%; transform-style: preserve-3d; text-shadow: 0 1px 0 rgba(255,255,255,.10), 0 2px 6px rgba(9, 20, 40, .22), 0 10px 22px rgba(11, 24, 46, .18); pointer-events: none; will-change: transform; animation: rsBlobCText 46.8s linear infinite; animation-delay: -28s; } /* ========================================================== SINGLE OHJELMA + SEARCH PANELS ========================================================== */ .single.ast-separate-container #primary, .single.ast-separate-container #secondary { margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 1em !important; padding-bottom: 1em !important; } .single-ohjelma.ast-separate-container .site-main > article, .single-jakso.ast-separate-container .site-main > article, .single-ohjelma.ast-separate-container .sidebar-main, .single-jakso.ast-separate-container .sidebar-main, .page.ast-separate-container .sidebar-main, .search.ast-separate-container .site-main > article, .search.ast-separate-container .sidebar-main, .search.ast-separate-container article.ast-article-post, .search.ast-separate-container article.ast-article-post .ast-post-format-, .search.ast-separate-container article.ast-article-post .ast-article-inner { border-radius: 10px; } .single-ohjelma.ast-separate-container #secondary .widget, .single-jakso.ast-separate-container #secondary .widget, .page.ast-separate-container #secondary .widget, .search.ast-separate-container #secondary .widget { border-radius: 10px; } .single-ohjelma.ast-separate-container .site-main > article, .single-jakso.ast-separate-container .site-main > article, .single-ohjelma.ast-separate-container .sidebar-main, .single-jakso.ast-separate-container .sidebar-main, .page.ast-separate-container .sidebar-main, .search.ast-separate-container .site-main > article, .search.ast-separate-container .sidebar-main, .search.ast-separate-container article.ast-article-post, .search.ast-separate-container article.ast-article-post .ast-post-format-, .search.ast-separate-container article.ast-article-post .ast-article-inner { overflow: hidden; } /* Top20 vote tooltips need to escape the article box on single show pages. */ .single-ohjelma.ast-separate-container .site-main > article, .single-jakso.ast-separate-container .site-main > article { overflow: visible; } #secondary li { margin-bottom: 0.375em; } /* Per-widget sidebar utilities for bypassing Astra boxed widget styling. */ #secondary .widget { --rs-widget-pad-offset: 20px; --rs-widget-ad-radius: 10px; border-radius: 10px; } .ast-separate-container.ast-two-container #secondary .widget { padding: 10px; } #secondary .widget.no-pad, #secondary .widget.rs-no-pad { padding: 0 !important; } #secondary .widget:has(> .no-pad), #secondary .widget:has(> .rs-no-pad), #secondary .widget:has(.textwidget > .no-pad), #secondary .widget:has(.textwidget > .rs-no-pad), #secondary .widget:has(.widget-content > .no-pad), #secondary .widget:has(.widget-content > .rs-no-pad) { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; } #secondary .widget > .no-pad, #secondary .widget > .rs-no-pad, #secondary .widget .textwidget > .no-pad, #secondary .widget .textwidget > .rs-no-pad, #secondary .widget .widget-content > .no-pad, #secondary .widget .widget-content > .rs-no-pad { display: block; padding: 0 !important; width: 100%; max-width: none; margin: 0; line-height: 0; border-radius: var(--rs-widget-ad-radius); overflow: hidden; clip-path: inset(0 round var(--rs-widget-ad-radius)); } #secondary .widget > .no-pad img, #secondary .widget > .rs-no-pad img, #secondary .widget .textwidget > .no-pad img, #secondary .widget .textwidget > .rs-no-pad img, #secondary .widget .widget-content > .no-pad img, #secondary .widget .widget-content > .rs-no-pad img { display: block; width: 100%; height: auto; border-radius: inherit; } div.omamainos-product-xl { display: block; width: 100%; line-height: 0; border-radius: 10px !important; overflow: hidden !important; clip-path: inset(0 round 10px); } div.omamainos-product-xl > *, div.omamainos-product-xl a, div.omamainos-product-xl picture, div.omamainos-product-xl img { display: block; width: 100%; max-width: 100%; border-radius: 10px !important; } div.omamainos-product-xl img { margin: 0 auto; } #secondary .widget > .no-pad > *, #secondary .widget > .rs-no-pad > *, #secondary .widget .textwidget > .no-pad > *, #secondary .widget .textwidget > .rs-no-pad > *, #secondary .widget .widget-content > .no-pad > *, #secondary .widget .widget-content > .rs-no-pad > * { border-radius: inherit; overflow: hidden; } #secondary .widget .om-spacer-xl, #secondary .widget .no-pad .om-spacer-xl, #secondary .widget .rs-no-pad .om-spacer-xl { height: 0 !important; margin: 0 !important; padding: 0 !important; display: none !important; } #secondary .widget.no-bg, #secondary .widget.rs-no-bg { background: transparent !important; border: 0 !important; box-shadow: none !important; } #secondary .widget.no-box, #secondary .widget.rs-no-box { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Keep page content unboxed even when sidebar uses boxed/separate styling. */ .page.ast-separate-container .site-main > article, .page.ast-separate-container .ast-article-single { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* Participation landing pages should keep the same boxed panels as the ohjelma views even though regular pages stay unboxed. */ .page.rs-participation-landing.ast-separate-container, .page.rs-boxed-panel-page.ast-separate-container{ --rs-participation-panel-bg: #ffffff; --rs-participation-panel-border: 1px solid rgba(190, 200, 216, .72); --rs-participation-panel-shadow: 0 14px 32px rgba(10, 23, 44, .10), 0 4px 10px rgba(10, 23, 44, .06); } .page.rs-participation-landing.ast-separate-container .site-main > article, .page.rs-boxed-panel-page.ast-separate-container .site-main > article, .page.rs-participation-landing.ast-separate-container .ast-article-single, .page.rs-boxed-panel-page.ast-separate-container .ast-article-single{ background: var(--rs-participation-panel-bg) !important; border: var(--rs-participation-panel-border) !important; box-shadow: var(--rs-participation-panel-shadow) !important; border-radius: 10px; } .page.rs-participation-landing.ast-separate-container .sidebar-main, .page.rs-boxed-panel-page.ast-separate-container .sidebar-main{ background: transparent !important; border: 0 !important; box-shadow: none !important; } .page.rs-participation-landing.ast-separate-container .site-main > article, .page.rs-boxed-panel-page.ast-separate-container .site-main > article, .page.rs-participation-landing.ast-separate-container .ast-article-single, .page.rs-boxed-panel-page.ast-separate-container .ast-article-single{ padding: clamp(18px, 2.2vw, 28px) !important; } .page.rs-participation-landing.ast-separate-container #secondary .widget:not(.no-bg):not(.rs-no-bg):not(.no-box):not(.rs-no-box):not(:has(> .no-pad)):not(:has(> .rs-no-pad)):not(:has(.textwidget > .no-pad)):not(:has(.textwidget > .rs-no-pad)):not(:has(.widget-content > .no-pad)):not(:has(.widget-content > .rs-no-pad)), .page.rs-boxed-panel-page.ast-separate-container #secondary .widget:not(.no-bg):not(.rs-no-bg):not(.no-box):not(.rs-no-box):not(:has(> .no-pad)):not(:has(> .rs-no-pad)):not(:has(.textwidget > .no-pad)):not(:has(.textwidget > .rs-no-pad)):not(:has(.widget-content > .no-pad)):not(:has(.widget-content > .rs-no-pad)){ background: var(--rs-participation-panel-bg); border: var(--rs-participation-panel-border); box-shadow: 0 10px 26px rgba(10, 23, 44, .08), 0 3px 8px rgba(10, 23, 44, .05); } .single-ohjelma .entry-header { display: none; } .single-jakso.site .site-content #primary .ast-article-single, .single-jakso.ast-separate-container .site-content #primary .ast-article-single, .single-jakso.ast-separate-container .site-main > article { padding: 15px !important; } .single-jakso .entry-header { display: none; } .rs-jakso-single { margin: 0 0 28px; } .rs-jakso-single__header { margin: 0 0 18px; } .rs-jakso-single__show { display: inline-block; margin: 0 0 10px; font-size: .9rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5f7392; } a.rs-jakso-single__show:hover, a.rs-jakso-single__show:focus-visible { color: #0f2440; } .rs-jakso-single__title { margin: 0; font-family: "Shrikhand", cursive; font-size: clamp(1.4rem, 2.5vw, 2.3rem); line-height: 1.02; color: #0f2440; } .rs-jakso-single__meta { margin: 10px 0 0; font-size: .95rem; color: #5f7392; } .rs-jaksot--single { margin: 0 0 22px; } .rs-jaksot__list--single { grid-template-columns: minmax(0, 1fr); } .single-jakso .rs-jakso-card__link { height: auto; min-height: 0; } .single-jakso .rs-jakso-card__body { padding: 12px; } .single-jakso .rs-jakso-card__title { font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.2; } .single-jakso .rs-jakso-card__meta { font-size: .88rem; } .single-jakso .rs-jakso-card__progress-meta { font-size: .8rem; } .rs-jakso-single__content { font-size: 1rem; line-height: 1.7; color: #36506f; } .rs-jakso-single__content > :first-child { margin-top: 0; } .rs-jakso-single__content > :last-child { margin-bottom: 0; } .rs-ohjelma-hero { margin: 0 0 28px; } .rs-ohjelma-hero__row { display: block; } .rs-ohjelma-hero__row.is-no-image { display: block; } .rs-ohjelma-hero__body { min-width: 0; display: block; } .rs-ohjelma-hero__row.is-no-image .rs-ohjelma-hero__body { display: block; } .rs-ohjelma-hero__title { grid-area: title; } .rs-ohjelma-hero__media { float: right; width: min(42%, 320px); margin: 0 0 16px 24px; align-self: start; } .rs-ohjelma-hero__image { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; box-shadow: 0 20px 48px rgba(10, 34, 68, 0.18); } .rs-ohjelma-hero__title { margin: 0; font-family: "Shrikhand", cursive; font-size: clamp(1.4rem, 2.5vw, 2.3rem); line-height: 1.02; color: #0f2440; } .rs-ohjelma-hero__content { grid-area: content; margin: 16px 0 0; max-width: none; font-size: 1rem; line-height: 1.7; color: #36506f; } .rs-ohjelma-hero__content > :first-child { margin-top: 0; } .rs-ohjelma-hero__content > :last-child { margin-bottom: 0; } .rs-ohjelma-hero__content p, .rs-ohjelma-hero__content ul, .rs-ohjelma-hero__content ol { margin: 0 0 1em; } .rs-ohjelma-hero__content h2, .rs-ohjelma-hero__content h3, .rs-ohjelma-hero__content h4 { margin: 1.1em 0 0.45em; color: #18304f; } .rs-like-wrap--hero { display: flex; justify-content: flex-start; align-items: center; align-self: start; width: fit-content; margin: 18px auto 0 0; gap: 8px; } .rs-ohjelma-hero__body::after { content: ""; display: block; clear: both; } @media (max-width: 820px) { .rs-ohjelma-hero__media { width: min(42%, 220px); margin: 0 0 12px 14px; } .rs-ohjelma-hero__image { aspect-ratio: 1 / 1; } .rs-like-wrap--hero { margin-top: 14px; } } @media (max-width: 560px) { .rs-ohjelma-hero__media { width: min(44%, 170px); margin-left: 12px; margin-bottom: 10px; } } /* Scale blobs down on smaller screens */ @media (max-width: 980px){ html::before{ width: clamp(340px, 36vw, 620px); height: clamp(340px, 36vw, 620px); left: calc(18vw - (clamp(340px, 36vw, 620px) / 2)); top: calc(24vh - (clamp(340px, 36vw, 620px) / 2)); } html::after{ width: clamp(300px, 30vw, 520px); height: clamp(300px, 30vw, 520px); left: calc(22vw - (clamp(300px, 30vw, 520px) / 2)); top: calc(78vh - (clamp(300px, 30vw, 520px) / 2)); } #page::after{ width: clamp(320px, 34vw, 580px); height: clamp(320px, 34vw, 580px); left: calc(84vw - (clamp(320px, 34vw, 580px) / 2)); top: calc(40vh - (clamp(320px, 34vw, 580px) / 2)); } #page::before{ --rs-blob-diameter: clamp(320px, 34vw, 580px); --rs-blob-font-size: clamp(16px, calc(var(--rs-blob-diameter) * 0.048), 28px); --rs-blob-padding-inline: clamp(80px, calc(var(--rs-blob-diameter) * 0.25), 128px); --rs-blob-padding-block: clamp(92px, calc(var(--rs-blob-diameter) * 0.29), 148px); left: calc(84vw - (var(--rs-blob-diameter) / 2)); top: calc(40vh - (var(--rs-blob-diameter) / 2)); } } @media (max-width: 640px){ html::before{ width: clamp(230px, 48vw, 360px); height: clamp(230px, 48vw, 360px); left: calc(16vw - (clamp(230px, 48vw, 360px) / 2)); top: calc(18vh - (clamp(230px, 48vw, 360px) / 2)); } html::after{ width: clamp(200px, 42vw, 320px); height: clamp(200px, 42vw, 320px); left: calc(20vw - (clamp(200px, 42vw, 320px) / 2)); top: calc(76vh - (clamp(200px, 42vw, 320px) / 2)); } #page::after{ width: clamp(220px, 45vw, 340px); height: clamp(220px, 45vw, 340px); left: calc(86vw - (clamp(220px, 45vw, 340px) / 2)); top: calc(36vh - (clamp(220px, 45vw, 340px) / 2)); } #page::before{ --rs-blob-diameter: clamp(220px, 45vw, 340px); --rs-blob-font-size: clamp(11px, calc(var(--rs-blob-diameter) * 0.05), 18px); --rs-blob-padding-inline: clamp(52px, calc(var(--rs-blob-diameter) * 0.25), 86px); --rs-blob-padding-block: clamp(62px, calc(var(--rs-blob-diameter) * 0.3), 108px); left: calc(86vw - (var(--rs-blob-diameter) / 2)); top: calc(36vh - (var(--rs-blob-diameter) / 2)); } } /* Animations: transform-only motion */ @keyframes rsBlobA{ 0% { transform: translate(0px, 0px); } 25% { transform: translate(110px, 38px); } 50% { transform: translate(34px, 92px); } 75% { transform: translate(-96px, -22px); } 100% { transform: translate(0px, 0px); } } @keyframes rsBlobB{ 0% { transform: translate(0px, 0px); } 25% { transform: translate(-124px, 28px); } 50% { transform: translate(-42px, -88px); } 75% { transform: translate(112px, 46px); } 100% { transform: translate(0px, 0px); } } @keyframes rsBlobC{ 0% { transform: perspective(1400px) translate(0px, 0px) rotateX(7deg) rotateY(-16deg); } 25% { transform: perspective(1400px) translate(-148px, -32px) rotateX(2deg) rotateY(12deg); } 50% { transform: perspective(1400px) translate(64px, 104px) rotateX(-8deg) rotateY(18deg); } 75% { transform: perspective(1400px) translate(122px, -76px) rotateX(5deg) rotateY(-10deg); } 100% { transform: perspective(1400px) translate(0px, 0px) rotateX(7deg) rotateY(-16deg); } } @keyframes rsBlobCText{ 0% { transform: perspective(1500px) translate3d(44px, -14px, 0) rotateX(8deg) rotateY(-20deg) rotate(-4deg) scaleX(.92) scaleY(.95); } 25% { transform: perspective(1500px) translate3d(-56px, -34px, 0) rotateX(3deg) rotateY(14deg) rotate(-2deg) scaleX(.98) scaleY(.98); } 50% { transform: perspective(1500px) translate3d(-6px, 44px, 0) rotateX(-7deg) rotateY(1deg) rotate(1deg) scaleX(1.02) scaleY(1.01); } 75% { transform: perspective(1500px) translate3d(54px, 18px, 0) rotateX(5deg) rotateY(-15deg) rotate(3deg) scaleX(.96) scaleY(.98); } 100% { transform: perspective(1500px) translate3d(44px, -14px, 0) rotateX(8deg) rotateY(-20deg) rotate(-4deg) scaleX(.92) scaleY(.95); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ html::before, html::after, #page::after, #page::before{ animation: none !important; transform: none !important; } } /* ========================================================== RADIO SUN LAYOUT V3 - cover + history side-by-side - history ALWAYS same height as cover - no wrapper around list required ========================================================== */ .rs-layout-v3{ color: #e8f1ff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .rs-layout-v3 *{ box-sizing: border-box; } /* TOP ROW */ .rs-top{ display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 400px) minmax(0, 400px); gap: 28px; align-items: end; justify-content: center; width: 100%; } .rs-top > *{ min-width: 0; } /* LEFT INTRO COLUMN */ .rs-intro{ display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 400px; justify-self: center; align-self: end; text-align: left; } .rs-intro__title{ margin: 0; font-size: clamp(34px, 3.8vw, 48px); line-height: 1.02; font-weight: 400; letter-spacing: .02em; color: #f2f7ff; font-family: "Shrikhand", serif; } .rs-intro__subtitle{ margin: 8px 0 0; font-size: clamp(16px, 1.5vw, 22px); line-height: 1.1; font-weight: 400; letter-spacing: .01em; color: #eaf3ff; font-family: "Shrikhand", serif; } .rs-intro__desc{ margin: 14px 0 0; max-width: 30ch; font-size: 16px; line-height: 1.45; color: rgba(228, 239, 255, .84); } .rs-intro__play{ margin-top: 18px; margin-left: 0 !important; margin-right: auto !important; margin-inline-start: 0 !important; margin-inline-end: auto !important; align-self: flex-start !important; justify-self: start !important; width: fit-content !important; max-width: 100%; min-height: 54px; appearance: none; padding: 12px 0; border-radius: 999px; border: 0; background: transparent !important; color: #eaf3ff; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: .02em; text-align: center; cursor: pointer; box-shadow: none; transition: transform .14s ease, color .14s ease, background .14s ease, box-shadow .14s ease; } .rs-intro__play:hover{ box-shadow: none !important; transform: scale(1.04); } .rs-intro__play:active, .rs-intro__play:focus, .rs-intro__play:focus-visible{ background: transparent !important; } .rs-intro__play:focus-visible{ outline: none; } .rs-intro__play-icon{ order: 2; width: 28px; height: 28px; position: relative; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; } .rs-intro__play-icon::before{ content: "\f04b"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: currentColor; transform: translateX(1px); } .rs-intro__play.is-playing .rs-intro__play-icon::before{ content: "\f04c"; transform: translateX(0); } .rs-intro__play-label{ display: inline-flex; align-items: center; min-width: 0; font-size: 18px; line-height: 1; font-weight: 700; letter-spacing: .02em; color: #eef5ff; white-space: nowrap; text-align: left; } .rs-intro__play-label-line{ display: inline; } /* COVER (square) */ .rs-cover{ width: 100%; max-width: 400px; height: auto; aspect-ratio: 1 / 1; align-self: center; justify-self: center; border-radius: 10px; overflow: hidden; position: relative; border: 0; background: rgba(255,255,255,.04); box-shadow: 0 18px 55px rgba(0,0,0,.35), 0 6px 18px rgba(6,18,35,.22); } .rs-cover img{ width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; aspect-ratio: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* subtle overlay */ .rs-cover::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 420px at 15% 10%, rgba(255,255,255,.12), transparent 45%), linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.25)); opacity: .55; } /* HISTORY COLUMN (fills full height of row) */ .rs-history{ width: 100%; max-width: 400px; justify-self: center; height: 400px; /* fallback: match cover height before JS sync */ max-height: 400px; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 0; overflow: hidden; } .rs-history-title{ font-size: clamp(11px, 1.2vw, 15px); font-weight: 700; letter-spacing: .01em; margin: 0 0 6px 0; color: #e7f1ff; position: static; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; } /* the scroller is the thing that fills the remaining height */ .rs-history-scroll{ --rs-history-fade-size: 52px; flex: 0 0 auto; height: auto; min-height: 0; /* IMPORTANT for flex scroll areas */ overflow-y: auto; padding-right: 10px; padding-top: 0; position: relative; -webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 calc(100% - var(--rs-history-fade-size)), transparent 100% ); mask-image: linear-gradient( to bottom, #000 0%, #000 calc(100% - var(--rs-history-fade-size)), transparent 100% ); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* scrollbar polish */ .rs-history-scroll::-webkit-scrollbar{ width: 10px; } .rs-history-scroll::-webkit-scrollbar-track{ background: transparent; } .rs-history-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.16); border-radius: 999px; border: 2px solid rgba(0,0,0,.18); } .rs-history-list{ list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 0; } /* each row */ .rs-history-item{ display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: center; padding: 6px 0; border-radius: 8px; transition: transform .15s ease, background .15s ease, border-color .15s ease; } .rs-history-item:hover{ transform: translateY(-1px); background: rgba(255,255,255,.05); } /* thumbnail wrapper (rounded) */ .rs-history-art, .rs-history-item__art{ width: 60px; height: 60px; border-radius: 5px; overflow: hidden; position: relative; border: 0; background: rgba(255,255,255,.05); box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 2px 6px rgba(6,18,35,.18); } .rs-history-art img, .rs-history-item__art img{ width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; border-radius: 5px !important; /* match wrapper */ backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Empty art placeholder (if you add .is-empty) */ .rs-history-art.is-empty::after, .rs-history-item__art.is-empty::after{ content: "♪"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; color: rgba(255,255,255,.55); } /* text safety */ .rs-history-meta, .rs-history-item__meta{ min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; } .rs-history-track, .rs-history-item__track{ font-size: clamp(15px, 1.35vw, 18px); font-weight: 500; letter-spacing: .02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-history-artist, .rs-history-item__artist, .rs-history-time, .rs-history-item__time, .rs-history-sub, .rs-history-item__sub{ font-size: clamp(11px, 1vw, 13px); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-history-artist, .rs-history-item__artist{ opacity: .76; } .rs-history-time, .rs-history-item__time{ opacity: .58; } .rs-history-empty{ padding: 8px 0; font-size: 14px; color: rgba(232, 241, 255, .78); list-style: none; } .rs-feed-list{ --rs-feed-fade-size: 42px; --rs-feed-scroll-height: min(420px, 70vh); width: 100%; max-width: 100%; } .rs-feed-list--history{ padding: 0px; } .rs-feed-list--history .rs-feed-list__title{ margin: 0 0 8px; } .rs-feed-list--history .rs-feed-list__featured{ margin: 0 0 6px; } .rs-feed-list--history .rs-feed-list__list{ padding-right: 6px !important; } .rs-feed-list--upcoming{ padding: 0px; } .rs-feed-list--upcoming .rs-feed-list__title{ margin: 0 0 8px; } .rs-feed-list--upcoming .rs-feed-list__featured{ margin: 0 0 6px; } .rs-feed-list--upcoming .rs-feed-list__list{ padding-right: 6px !important; } .rs-feed-list--all-shows{ min-height: 0; height: auto; } .rs-feed-list--all-shows .rs-feed-list__list{ min-height: 0; height: auto; max-height: var(--rs-all-shows-max-height, min(70vh, 720px)); overflow-y: auto; overflow-x: hidden; align-content: start; grid-auto-rows: max-content; } .rs-feed-list--all-shows .rs-feed-list__filter{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .rs-feed-list--all-shows .rs-feed-list__filter-btn{ appearance: none; border: 1px solid #c5d0e1; border-radius: 999px; background: #ffffff; color: #43546f; font-size: 12px; font-weight: 700; line-height: 1; padding: 8px 12px; cursor: pointer; transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease; } .rs-feed-list--all-shows .rs-feed-list__filter-btn:hover{ transform: translateY(-1px); border-color: #9fb0c8; } .rs-feed-list--all-shows .rs-feed-list__filter-btn.is-active{ background: #2f64ad; border-color: #2f64ad; color: #ffffff; } .rs-feed-list__title{ margin: 0 0 4px; font-size: clamp(11px, 1.2vw, 15px); font-weight: 700; letter-spacing: .01em; line-height: 1.25; color: #7a8da9; } .rs-feed-list__featured{ margin: 0 0 4px; } .rs-feed-list__featured[hidden]{ display: none !important; } .rs-feed-list__list{ list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 0; max-height: var(--rs-feed-scroll-height); overflow-y: auto; padding-right: 8px !important; -webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 calc(100% - var(--rs-feed-fade-size)), transparent 100% ); mask-image: linear-gradient( to bottom, #000 0%, #000 calc(100% - var(--rs-feed-fade-size)), transparent 100% ); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .rs-feed-list__list::-webkit-scrollbar{ width: 10px; } .rs-feed-list__list::-webkit-scrollbar-track{ background: transparent; } .rs-feed-list__list::-webkit-scrollbar-thumb{ background: rgba(78, 97, 129, .28); border-radius: 999px; border: 2px solid rgba(255,255,255,.92); } .rs-feed-list .rs-history-empty{ padding: 8px 0; font-size: 13px; color: #6f8099; } .rs-feed-list .rs-history-item, .rs-feed-list .rs-upcoming-item{ gap: 8px; padding: 1px 0; } .rs-feed-list .rs-history-art, .rs-feed-list .rs-history-item__art{ width: 48px; height: 48px; border-radius: 4px; box-shadow: 0 6px 14px rgba(0,0,0,.18), 0 2px 5px rgba(6,18,35,.14); } .rs-feed-list .rs-history-art img, .rs-feed-list .rs-history-item__art img{ border-radius: 4px !important; } .rs-feed-list .rs-history-track, .rs-feed-list .rs-history-item__track{ font-size: clamp(13px, 1vw, 15px); line-height: 1.08; letter-spacing: .01em; color: #43546f; } .rs-feed-list .rs-history-artist, .rs-feed-list .rs-history-item__artist, .rs-feed-list .rs-history-time, .rs-feed-list .rs-history-item__time, .rs-feed-list .rs-history-sub, .rs-feed-list .rs-history-item__sub{ font-size: clamp(10px, .82vw, 11px); line-height: 1.2; } .rs-feed-list .rs-history-artist, .rs-feed-list .rs-history-item__artist, .rs-feed-list .rs-history-sub, .rs-feed-list .rs-history-item__sub{ color: #6c7c95; opacity: 1; } .rs-feed-list .rs-history-time, .rs-feed-list .rs-history-item__time{ color: #8b97aa; opacity: 1; } .rs-feed-list .rs-history-item--current{ grid-template-columns: 62px 1fr; gap: 10px; padding: 2px 0 3px; margin-bottom: 3px; } .rs-feed-list .rs-upcoming-item--current{ text-decoration: none; color: inherit; } .rs-feed-list .rs-upcoming-item--current:hover{ background: rgba(19, 32, 60, .03); text-decoration: none; } .rs-feed-list .rs-history-item--current .rs-history-art, .rs-feed-list .rs-history-item--current .rs-history-item__art{ width: 62px; height: 62px; border-radius: 5px; } .rs-feed-list .rs-history-item--current .rs-history-art img, .rs-feed-list .rs-history-item--current .rs-history-item__art img{ border-radius: 5px !important; } .rs-history-current-label{ margin-bottom: 3px; font-size: 10px; font-weight: 800; letter-spacing: .08em; line-height: 1; text-transform: uppercase; color: #2f64ad; } .rs-feed-list .rs-history-item--current .rs-history-track, .rs-feed-list .rs-history-item--current .rs-history-item__track{ font-size: clamp(15px, 1.15vw, 18px); font-weight: 700; line-height: 1.04; color: #223552; } .rs-feed-list .rs-history-item--current .rs-history-sub, .rs-feed-list .rs-history-item--current .rs-history-item__sub{ margin-top: 3px; font-size: clamp(11px, .9vw, 12px); color: #5f7392; } .rs-upcoming-list__item{ list-style: none; margin: 0; padding: 0; } .rs-upcoming-item{ display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center; padding: 4px 0; border-radius: 8px; color: inherit; text-decoration: none; transition: transform .15s ease, background .15s ease, border-color .15s ease; } .rs-upcoming-item:hover{ transform: translateY(-1px); background: rgba(19, 32, 60, .05); text-decoration: none; } .rs-upcoming-item:focus-visible{ outline: 2px solid #9fc4ff; outline-offset: 2px; } .rs-schedule-card__actions{ display: flex; justify-content: center; align-items: center; align-self: stretch; padding: 0 8px 0 0; } /* BOTTOM ROW */ .rs-bottom{ display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 400px) minmax(0, 400px); gap: 28px; margin-top: 8px; align-items: start; justify-content: center; } .rs-nowtext{ grid-column: 2; text-align: center; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; justify-self: center; } /* NOW PLAYING TEXT */ .rs-now-label{ display: none; } .rs-now-title{ display: block; width: 100%; max-width: 100%; font-size: 16px; font-weight: 300; letter-spacing: .04em; text-transform: uppercase; line-height: 1.06; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #eef5ff; } .rs-now-artist{ display: block; width: 100%; max-width: 100%; margin-top: -4px; font-size: 14px; font-weight: 300; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #dbe9ff; } .rs-now-status{ margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.70); } /* SHOW */ .rs-show{ padding-top: 6px; min-width: 0; } .rs-show h3{ margin: 0 0 10px 0; font-size: 18px; font-weight: 800; letter-spacing: .02em; color: rgba(255,255,255,.90); } .rs-show__title{ font-size: 22px; font-weight: 700; line-height: 1.15; } .rs-show__time{ margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.70); } .rs-show__desc{ margin-top: 10px; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.74); } /* ========================================================== MOBILE: keep cover + history side-by-side (NOT stacked) - cover stays square via aspect-ratio - history scroll area still matches cover height ========================================================== */ @media (max-width: 980px){ .rs-top{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; } .rs-intro{ grid-column: 1 / -1; max-width: none; } .rs-intro__title{ font-size: clamp(26px, 7.8vw, 38px); } .rs-intro__subtitle{ margin-top: 6px; font-size: clamp(14px, 3.6vw, 19px); } .rs-intro__desc{ margin-top: 10px; max-width: none; font-size: 14px; line-height: 1.4; } .rs-intro__play{ margin-top: 12px; width: fit-content !important; min-height: 46px; padding: 10px 0; font-size: 15px; } .rs-intro__play-icon{ width: 24px; height: 24px; flex-basis: 24px; font-size: 22px; } .rs-intro__play-icon::before{ transform: translateX(1px); } .rs-intro__play-label{ font-size: 15px; } .rs-cover{ width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 10px; } .rs-history-title{ font-size: 12px; } .rs-history{ height: auto; max-height: none; justify-content: flex-start; overflow: visible; } .rs-history-scroll{ flex: 1 1 auto; --rs-history-fade-size: 38px; padding-right: 6px; } .rs-history-item{ grid-template-columns: 40px 1fr; gap: 8px; padding: 4px 0; } .rs-history-art, .rs-history-item__art{ width: 40px; height: 40px; border-radius: 4px; } .rs-history-art img, .rs-history-item__art img{ border-radius: 4px !important; } .rs-history-track, .rs-history-item__track{ font-size: 11px; line-height: 1.05; } .rs-history-artist, .rs-history-item__artist, .rs-history-time, .rs-history-item__time, .rs-history-sub, .rs-history-item__sub{ font-size: 9px; line-height: 1.1; } .rs-history-artist, .rs-history-item__artist, .rs-history-sub, .rs-history-item__sub{ opacity: .75; } .rs-history-time, .rs-history-item__time{ opacity: .6; } .rs-feed-list__title{ font-size: 12px; } .rs-feed-list--history{ padding: 10px 10px 8px; } .rs-feed-list--upcoming{ padding: 10px 10px 8px; } .rs-feed-list{ --rs-feed-fade-size: 34px; --rs-feed-scroll-height: min(360px, 62vh); } .rs-feed-list__featured{ margin-bottom: 4px; } .rs-feed-list .rs-history-item, .rs-feed-list .rs-upcoming-item{ gap: 7px; padding: 1px 0; } .rs-feed-list .rs-history-art, .rs-feed-list .rs-history-item__art{ width: 42px; height: 42px; border-radius: 4px; } .rs-feed-list .rs-history-art img, .rs-feed-list .rs-history-item__art img{ border-radius: 4px !important; } .rs-feed-list .rs-history-track, .rs-feed-list .rs-history-item__track{ font-size: 12px; } .rs-feed-list .rs-history-artist, .rs-feed-list .rs-history-item__artist, .rs-feed-list .rs-history-time, .rs-feed-list .rs-history-item__time, .rs-feed-list .rs-history-sub, .rs-feed-list .rs-history-item__sub{ font-size: 10px; } .rs-feed-list .rs-history-item--current{ grid-template-columns: 54px 1fr; gap: 8px; padding: 2px 0 3px; } .rs-feed-list .rs-history-item--current .rs-history-art, .rs-feed-list .rs-history-item--current .rs-history-item__art{ width: 54px; height: 54px; border-radius: 5px; } .rs-feed-list .rs-history-item--current .rs-history-art img, .rs-feed-list .rs-history-item--current .rs-history-item__art img{ border-radius: 5px !important; } .rs-feed-list .rs-history-item--current .rs-history-track, .rs-feed-list .rs-history-item--current .rs-history-item__track{ font-size: 14px; } .rs-feed-list .rs-history-item--current .rs-history-sub, .rs-feed-list .rs-history-item--current .rs-history-item__sub{ font-size: 11px; } .rs-upcoming-item{ grid-template-columns: 44px 1fr; gap: 8px; padding: 4px 0; } .rs-bottom{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 6px; } .rs-nowtext{ grid-column: 1; max-width: none; } .rs-now-title{ font-size: 13px; letter-spacing: .03em; } .rs-now-artist{ font-size: 11px; letter-spacing: .04em; margin-top: -3px; } } @media (max-width: 640px){ .rs-now-title{ font-size: 11px; letter-spacing: .02em; } .rs-now-artist{ font-size: 9px; letter-spacing: .03em; margin-top: -2px; } } @media (max-width: 420px){ .rs-now-title{ font-size: 10px; letter-spacing: .015em; } .rs-now-artist{ font-size: 8px; letter-spacing: .02em; } } /* Very small phones: keep side-by-side but bias space to list */ @media (max-width: 420px){ .rs-top{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .rs-intro__title{ font-size: clamp(22px, 8vw, 30px); } .rs-intro__subtitle{ font-size: clamp(13px, 4.1vw, 17px); } .rs-intro__play{ width: fit-content !important; min-height: 42px; padding: 9px 0; } .rs-history-title{ font-size: 11px; } .rs-feed-list__title{ font-size: 11px; } .rs-feed-list--history{ padding: 8px 8px 6px; } .rs-feed-list--upcoming{ padding: 8px 8px 6px; } .rs-feed-list{ --rs-feed-fade-size: 28px; --rs-feed-scroll-height: min(320px, 56vh); } .rs-feed-list__featured{ margin-bottom: 3px; } .rs-history-scroll{ --rs-history-fade-size: 30px; padding-right: 4px; } .rs-history-item{ grid-template-columns: 36px 1fr; gap: 7px; padding: 3px 0; } .rs-history-track, .rs-history-item__track{ font-size: 10px; line-height: 1.02; } .rs-history-artist, .rs-history-item__artist, .rs-history-time, .rs-history-item__time, .rs-history-sub, .rs-history-item__sub{ font-size: 8px; line-height: 1.05; } .rs-history-art, .rs-history-item__art{ width: 36px; height: 36px; } .rs-history-art img, .rs-history-item__art img{ border-radius: 5px !important; } .rs-upcoming-item{ grid-template-columns: 40px 1fr; } .rs-feed-list .rs-history-art, .rs-feed-list .rs-history-item__art{ width: 40px; height: 40px; border-radius: 4px; } .rs-feed-list .rs-history-art img, .rs-feed-list .rs-history-item__art img{ border-radius: 4px !important; } .rs-feed-list .rs-history-track, .rs-feed-list .rs-history-item__track{ font-size: 12px; } .rs-feed-list .rs-history-artist, .rs-feed-list .rs-history-item__artist, .rs-feed-list .rs-history-time, .rs-feed-list .rs-history-item__time, .rs-feed-list .rs-history-sub, .rs-feed-list .rs-history-item__sub{ font-size: 10px; } .rs-feed-list .rs-history-item--current{ grid-template-columns: 48px 1fr; gap: 8px; padding: 2px 0 3px; } .rs-feed-list .rs-history-item--current .rs-history-art, .rs-feed-list .rs-history-item--current .rs-history-item__art{ width: 48px; height: 48px; border-radius: 5px; } .rs-feed-list .rs-history-item--current .rs-history-art img, .rs-feed-list .rs-history-item--current .rs-history-item__art img{ border-radius: 5px !important; } .rs-feed-list .rs-history-item--current .rs-history-track, .rs-feed-list .rs-history-item--current .rs-history-item__track{ font-size: 13px; } .rs-feed-list .rs-history-item--current .rs-history-sub, .rs-feed-list .rs-history-item--current .rs-history-item__sub{ font-size: 10px; } } /* ========================================================== [radiosun_show_cards] - Square card grid ========================================================== */ .rs-showgrid-stack{ display: grid; gap: clamp(12px, 1.5vw, 22px); } .rs-showgrid-stack__recommended{ --rs-reco-card-height: 560px; display: grid; gap: clamp(10px, 1.2vw, 18px); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; } .rs-showgrid-stack__title{ margin: 0; color: #13203c; font-size: clamp(18px, 1.9vw, 28px); line-height: 1.08; font-weight: 700; } .rs-showgrid-stack__recommended > .rs-showgrid-stack__title, .rs-showgrid-stack__recommended > .rs-showgrid-stack__footer{ grid-column: 1 / -1; } .rs-showgrid-stack__footer{ display: flex; justify-content: center; margin-top: clamp(4px, 0.8vw, 10px); } .rs-showgrid-stack__more{ display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 10px; background: #2f64ad; color: #ffffff !important; font-size: 14px; font-weight: 800; letter-spacing: .01em; text-decoration: none !important; box-shadow: 0 10px 22px rgba(34, 75, 132, .18); transition: transform .14s ease, box-shadow .14s ease, background .14s ease; } .rs-showgrid-stack__more:hover{ transform: translateY(-1px); background: #285692; box-shadow: 0 14px 28px rgba(34, 75, 132, .24); } .rs-live-showcard{ width: 100%; } .rs-live-showcard__link{ display: grid; grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); gap: 0; text-decoration: none; color: inherit; border-radius: 16px; overflow: hidden; background: #f3f5f9; box-shadow: 0 18px 40px rgba(0,0,0,.12); border: 1px solid rgba(180,194,217,.55); } .rs-live-showcard__link, .rs-live-showcard__link:hover, .rs-live-showcard__link:focus, .rs-live-showcard__link:active, .rs-live-showcard__link *{ text-decoration: none !important; } .rs-live-showcard__media{ position: relative; min-height: 100%; background: #111; } .rs-live-showcard__media img{ width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } .rs-live-showcard__placeholder{ width: 100%; height: 100%; min-height: 220px; display: grid; place-items: center; font-size: clamp(36px, 4vw, 56px); font-weight: 800; letter-spacing: .06em; color: rgba(255,255,255,.88); background: radial-gradient(500px 350px at 20% 15%, rgba(255,255,255,.14), transparent 45%), linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.22)); } .rs-live-showcard__body{ padding: clamp(18px, 2vw, 28px); display: flex; flex-direction: column; justify-content: center; min-width: 0; color: #13203c; } .rs-live-showcard__eyebrow{ display: inline-flex; align-self: flex-start; padding: 4px 9px; border-radius: 4px; background: #d82c2c; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } /* [radiosun_show_card_live]: hide regular category/eyebrow badge */ .rs-live-showcard__eyebrow{ display: none !important; } .rs-live-showcard--recommended .rs-live-showcard__eyebrow{ background: #2f64ad; } .rs-live-showcard--recommended{ max-width: none; } .rs-live-showcard--recommended .rs-live-showcard__link{ grid-template-columns: 1fr; border-radius: 14px; height: var(--rs-reco-card-height); min-height: var(--rs-reco-card-height); } .rs-live-showcard--recommended .rs-live-showcard__media{ aspect-ratio: 1 / 1; } .rs-live-showcard--recommended .rs-live-showcard__media img{ height: 100%; } .rs-live-showcard--recommended .rs-live-showcard__placeholder{ min-height: 0; aspect-ratio: 1 / 1; } .rs-live-showcard--recommended .rs-live-showcard__body{ padding: clamp(14px, 1.5vw, 20px); justify-content: flex-start; overflow: hidden; } .rs-live-showcard--recommended .rs-live-showcard__title{ margin-top: 10px; font-size: clamp(18px, 1.6vw, 20px); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .rs-live-showcard--recommended .rs-live-showcard__excerpt{ margin-top: 10px; font-size: clamp(12px, .9vw, 14px); max-width: 52ch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .rs-live-showcard--recommended .rs-live-showcard__cta{ margin-top: 14px; font-size: 13px; } .rs-live-showcard__title{ margin: 12px 0 0; color: #13203c; font-size: clamp(24px, 2.5vw, 40px); line-height: 1.05; font-weight: 700; } .rs-live-showcard__time{ margin-top: 8px; color: #35527a; font-size: clamp(14px, 1.1vw, 18px); font-weight: 700; } .rs-live-showcard__studio{ margin-top: 5px; color: #46607f; font-size: clamp(12px, .95vw, 15px); font-weight: 600; opacity: .9; } .rs-live-showcard__excerpt{ margin-top: 12px; color: rgba(19,32,60,.82); font-size: clamp(13px, 1vw, 16px); line-height: 1.45; max-width: 58ch; } .rs-live-showcard__cta{ margin-top: 16px; display: inline; align-self: flex-start; padding: 0; border-radius: 0; background: transparent; color: #2f64ad; font-size: 14px; font-weight: 800; letter-spacing: .01em; box-shadow: none; text-decoration: underline; } .rs-live-showcard__corner-label{ position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 10px; border-radius: 6px; background: #d82c2c; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 8px 16px rgba(0,0,0,.24); } .rs-showgrid{ --rs-show-gap: clamp(10px, 1.2vw, 18px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rs-show-gap); } /* Brick variant for [radiosun_show_cards]: always alternating row counts. Desktop: 4 / 5 / 4 / 5 ... */ .rs-showgrid--brick{ display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--rs-show-gap); overflow: visible; } .rs-showgrid--brick .rs-showgrid__row{ display: contents; } .rs-showgrid--brick .rs-showcard{ width: auto; grid-column: span 2; margin-top: 0 !important; } /* Desktop cycle: 4 centered, then 5 full (4/5/4/5...) */ .rs-showgrid--brick .rs-showcard:nth-child(9n + 1){ grid-column: 2 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(9n + 2){ grid-column: 4 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(9n + 3){ grid-column: 6 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(9n + 4){ grid-column: 8 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(9n + 5){ grid-column: 1 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(9n + 6){ grid-column: 3 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(9n + 7){ grid-column: 5 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(9n + 8){ grid-column: 7 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(9n + 9){ grid-column: 9 / span 2; } .rs-showgrid--empty{ padding: 16px; border-radius: 14px; border: 1px dashed rgba(0,0,0,.15); background: rgba(0,0,0,.03); } .rs-showcard{ display: block; text-decoration: none; color: inherit; } .rs-showcard__media{ position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: clamp(9px, 1.2vw, 14px); overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); box-shadow: 0 12px 32px rgba(0,0,0,.18); transform: translateZ(0); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .rs-showcard__media img{ width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } .rs-showcard__placeholder{ width: 100%; height: 100%; display: grid; place-items: center; font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; letter-spacing: .06em; color: rgba(255,255,255,.85); background: radial-gradient(500px 350px at 20% 15%, rgba(255,255,255,.14), transparent 45%), linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.22)); } .rs-showcard__shine{ position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 420px at 15% 10%, rgba(255,255,255,.14), transparent 45%), linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22)); opacity: .55; } .rs-showcard__title{ position: absolute; top: clamp(7px, 1vw, 10px); left: clamp(7px, 1vw, 10px); right: clamp(7px, 1vw, 10px); z-index: 2; pointer-events: none; font-size: clamp(13px, 1.1vw, 16px); font-weight: 700; line-height: 1.2; letter-spacing: .01em; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-showcard:hover .rs-showcard__media{ transform: translateY(-2px); box-shadow: 0 20px 60px rgba(0,0,0,.24); border-color: rgba(255,255,255,.20); } @media (max-width: 1360px){ .rs-showgrid:not(.rs-showgrid--brick){ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 980px){ .rs-showgrid-stack__recommended{ --rs-reco-card-height: auto; grid-template-columns: 1fr; gap: 10px; } .rs-live-showcard__link{ grid-template-columns: minmax(170px, 42%) minmax(0, 1fr); border-radius: 12px; } .rs-live-showcard__media{ aspect-ratio: auto; } .rs-live-showcard__placeholder{ min-height: 170px; } .rs-live-showcard__body{ padding: 14px; } .rs-live-showcard__title{ margin-top: 10px; font-size: clamp(20px, 4.2vw, 30px); } .rs-live-showcard__excerpt{ margin-top: 10px; font-size: 13px; } .rs-live-showcard__cta{ margin-top: 14px; padding: 0; font-size: 13px; } .rs-showgrid:not(.rs-showgrid--brick){ grid-template-columns: repeat(2, minmax(0, 1fr)); } .rs-showgrid--brick{ grid-template-columns: repeat(8, minmax(0, 1fr)); } .rs-live-showcard--recommended{ max-width: none; } .rs-live-showcard--recommended .rs-live-showcard__link{ grid-template-columns: 120px minmax(0, 1fr); height: auto; min-height: 170px; } .rs-live-showcard--recommended .rs-live-showcard__media{ aspect-ratio: auto; } .rs-live-showcard--recommended .rs-live-showcard__placeholder{ aspect-ratio: auto; min-height: 120px; } .rs-live-showcard--recommended .rs-live-showcard__title{ margin-top: 0; -webkit-line-clamp: 2; line-clamp: 2; font-size: clamp(16px, 3vw, 20px); } .rs-live-showcard--recommended .rs-live-showcard__body{ padding: 10px 12px; } .rs-live-showcard--recommended .rs-live-showcard__excerpt{ margin-top: 6px; -webkit-line-clamp: 3; line-clamp: 3; } /* Tablet cycle: 3 centered, then 4 full (3/4/3/4...) */ .rs-showgrid--brick .rs-showcard:nth-child(7n + 1){ grid-column: 2 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(7n + 2){ grid-column: 4 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(7n + 3){ grid-column: 6 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(7n + 4){ grid-column: 1 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(7n + 5){ grid-column: 3 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(7n + 6){ grid-column: 5 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(7n + 7){ grid-column: 7 / span 2; } } @media (max-width: 640px){ .rs-showgrid-stack__recommended{ --rs-reco-card-height: auto; grid-template-columns: 1fr; } .rs-live-showcard__link{ grid-template-columns: 140px minmax(0, 1fr); border-radius: 12px; } .rs-live-showcard__media{ aspect-ratio: auto; } .rs-live-showcard__placeholder{ min-height: 140px; } .rs-live-showcard--recommended{ max-width: none; } .rs-live-showcard--recommended .rs-live-showcard__link{ grid-template-columns: 96px minmax(0, 1fr); height: auto; min-height: 150px; } .rs-live-showcard--recommended .rs-live-showcard__media{ aspect-ratio: auto; } .rs-live-showcard--recommended .rs-live-showcard__placeholder{ aspect-ratio: auto; min-height: 96px; } .rs-live-showcard__title{ font-size: clamp(18px, 5vw, 24px); } .rs-live-showcard--recommended .rs-live-showcard__title{ margin-top: 0; -webkit-line-clamp: 2; line-clamp: 2; font-size: clamp(15px, 3.8vw, 18px); } .rs-live-showcard--recommended .rs-live-showcard__body{ padding: 8px 10px; } .rs-live-showcard--recommended .rs-live-showcard__excerpt{ margin-top: 4px; -webkit-line-clamp: 3; line-clamp: 3; } .rs-showgrid--brick{ grid-template-columns: repeat(6, minmax(0, 1fr)); --rs-show-gap: 8px; } /* Mobile cycle: 2 centered, then 3 full (2/3/2/3...) */ .rs-showgrid--brick .rs-showcard:nth-child(5n + 1){ grid-column: 2 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(5n + 2){ grid-column: 4 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(5n + 3){ grid-column: 1 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(5n + 4){ grid-column: 3 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(5n + 5){ grid-column: 5 / span 2; } } @media (max-width: 460px){ .rs-showgrid:not(.rs-showgrid--brick){ grid-template-columns: repeat(2, minmax(0, 1fr)); --rs-show-gap: 6px; } .rs-showgrid--brick{ grid-template-columns: repeat(6, minmax(0, 1fr)); --rs-show-gap: 6px; } .rs-showgrid--brick .rs-showcard:nth-child(5n + 1){ grid-column: 2 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(5n + 2){ grid-column: 4 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(5n + 3){ grid-column: 1 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(5n + 4){ grid-column: 3 / span 2; } .rs-showgrid--brick .rs-showcard:nth-child(5n + 5){ grid-column: 5 / span 2; } } /* ========================================================== [radiosun_show_card_live] - Live + upcoming rail ========================================================== */ .rs-show-card-live{ width: 100%; } .rs-show-card-live__rail{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 24px); align-items: stretch; } .rs-show-card-live .rs-live-showcard{ min-width: 0; } .rs-show-card-live .rs-live-showcard__link{ display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; height: 100%; min-height: 100%; border-radius: 18px; overflow: hidden; background: #f5f7fb; } .rs-show-card-live .rs-live-showcard__media{ aspect-ratio: 1 / 1; min-height: 0; } .rs-show-card-live .rs-live-showcard__placeholder{ min-height: 0; aspect-ratio: 1 / 1; } .rs-show-card-live .rs-live-showcard__body{ justify-content: flex-start; padding: 16px 16px 10px; } .rs-show-card-live .rs-live-showcard__meta-label{ color: #2f64ad; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .rs-show-card-live .rs-live-showcard__title{ margin-top: 8px; font-size: clamp(18px, 1.55vw, 24px); line-height: 1.12; } .rs-show-card-live .rs-live-showcard__time{ margin-top: 10px; font-size: 14px; } .rs-show-card-live .rs-live-showcard__studio{ font-size: 13px; } .rs-show-card-live .rs-live-showcard__excerpt{ margin-top: 10px; font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .rs-show-card-live .rs-live-showcard__actions{ padding: 0 16px 16px; } .rs-show-card-live .rs-live-showcard__cta{ display: inline-flex; align-items: center; font-size: 13px; font-weight: 800; text-decoration: none; } .rs-show-card-live .rs-live-showcard--live .rs-live-showcard__link{ background: linear-gradient(180deg, #f4f8ff 0%, #eef4ff 100%); border-color: rgba(47,100,173,.24); } .rs-show-card-live .rs-live-showcard--live .rs-live-showcard__corner-label{ background: #d82c2c; } .rs-show-card-live .rs-live-showcard--upcoming .rs-live-showcard__corner-label{ background: #2f64ad; } .rs-show-card-live .rs-live-showcard__corner-label{ top: 0; left: 0; min-height: 0; padding: 8px 12px; border-radius: 18px 0 12px 0; box-shadow: none; } .rs-show-card-live__rail--single{ grid-template-columns: minmax(0, 1fr); } .rs-live-jaksot-layout{ display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.3fr); gap: clamp(18px, 2vw, 32px); align-items: start; } .rs-live-jaksot-layout__live, .rs-live-jaksot-layout__jaksot{ min-width: 0; } .rs-live-jaksot-layout .rs-show-card-live .rs-live-showcard__link{ min-height: 100%; } .rs-live-jaksot-layout .rs-jaksot{ margin: 0; } .rs-live-jaksot-layout__live .rs-show-card-live__rail--single{ gap: 0; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__link{ grid-template-columns: 1fr; grid-template-rows: minmax(220px, 260px) 1fr auto; grid-template-areas: "media" "body" "actions"; min-height: 460px; box-shadow: 0 14px 28px rgba(10, 23, 44, .20), 0 4px 10px rgba(10, 23, 44, .12); transition: box-shadow .18s ease, transform .18s ease; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__media{ grid-area: media; aspect-ratio: auto; min-height: 220px; height: 100%; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__body{ grid-area: body; padding: 16px 18px 8px; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__actions{ grid-area: actions; padding: 0 18px 18px; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__corner-label{ position: static; top: auto; left: auto; align-self: flex-start; margin-bottom: 10px; padding: 7px 11px; border-radius: 999px; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__title{ margin-top: 0; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__excerpt{ margin-top: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } .rs-live-jaksot-layout__live .rs-jaksot__title{ margin-bottom: 8px; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__title{ font-size: min(16px, clamp(11px, .95vw, 16px)); line-height: 1em; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .rs-live-jaksot-layout__jaksot .rs-jakso-card{ --rs-jakso-rail-reserve-gap: 0px; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__link{ grid-template-columns: 30% minmax(0, 1fr); height: auto; min-height: 0; align-items: center; box-shadow: 0 0 0 1px rgba(187, 201, 224, .78), 0 12px 24px rgba(12, 27, 52, .16), 0 3px 8px rgba(12, 27, 52, .10); transition: box-shadow .18s ease, transform .18s ease; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__body{ height: 100%; padding: 5px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 5px; align-self: center; min-height: 0; overflow: hidden; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__media{ align-self: center; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__content{ min-height: 0; overflow: hidden; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__meta{ margin-top: 1px; font-size: 8px; width: 100%; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__progress{ margin-top: 3px; width: 100%; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__progress-bar{ height: 5px; width: 100%; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__progress-meta{ margin-top: 1px; font-size: 7px; width: 100%; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__title, .rs-live-jaksot-layout__jaksot .rs-jakso-card__meta{ width: 100%; } @media (max-width: 980px){ .rs-live-jaksot-layout{ grid-template-columns: 1fr; overflow: visible; } .rs-live-jaksot-layout__live, .rs-live-jaksot-layout__jaksot, .rs-live-jaksot-layout__live .rs-show-card-live, .rs-live-jaksot-layout__jaksot .rs-jaksot{ overflow: visible; } .rs-show-card-live__rail{ padding: 6px 8px 10px 4px; margin: -6px -8px -10px -4px; } .rs-live-jaksot-layout__jaksot .rs-jaksot__list{ padding: 6px 8px 10px 4px; margin: -6px -8px -10px -4px; } .rs-live-jaksot-layout__live .rs-show-card-live__rail, .rs-live-jaksot-layout__live .rs-show-card-live__rail--single, .rs-live-jaksot-layout__jaksot .rs-jaksot__list{ max-height: none; overflow: visible; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__link{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "body media" "actions media"; min-height: 212px; box-shadow: 0 12px 24px rgba(10, 23, 44, .18), 0 3px 8px rgba(10, 23, 44, .11); } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__media{ aspect-ratio: auto; min-height: 100%; height: 100%; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__body{ padding: 14px 14px 6px; justify-content: center; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__actions{ justify-content: flex-start; padding: 0 12px 12px; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__corner-label{ margin-bottom: 8px; padding: 6px 10px; font-size: 10px; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__excerpt{ margin-top: 7px; -webkit-line-clamp: 3; line-clamp: 3; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__cta{ width: auto; min-width: 0; min-height: 34px; padding: 7px 12px; border-radius: 999px; white-space: nowrap; line-height: 1; } .rs-live-jaksot-layout__jaksot .rs-jaksot__title{ margin-bottom: 6px; font-size: clamp(18px, 5vw, 26px); } .rs-live-jaksot-layout__jaksot .rs-jaksot__list{ gap: 8px; } .rs-live-jaksot-layout__jaksot .rs-jakso-card{ --rs-jakso-rail-reserve-gap: 0px; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__link{ grid-template-columns: 30% minmax(0, 1fr); height: auto; min-height: 0; align-items: stretch; box-shadow: 0 0 0 1px rgba(187, 201, 224, .74), 0 10px 20px rgba(12, 27, 52, .14), 0 3px 7px rgba(12, 27, 52, .09); } .rs-live-jaksot-layout__jaksot .rs-jakso-card__body{ padding: 5px; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__title{ font-size: clamp(11px, 2.6vw, 13px); line-height: 1.12; font-weight: 700; -webkit-line-clamp: 2; line-clamp: 2; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__meta{ margin-top: 1px; font-size: 8px; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__progress{ margin-top: 3px; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__progress-meta{ margin-top: 1px; font-size: 7px; } .rs-show-card-live__rail{ display: grid; grid-template-columns: 1fr; gap: 12px; max-height: min(560px, 78vh); overflow-y: auto; overflow-x: hidden; padding-right: 6px; } .rs-show-card-live .rs-live-showcard{ scroll-snap-align: none; } .rs-show-card-live .rs-live-showcard__link{ grid-template-columns: 104px minmax(0, 1fr) auto; grid-template-rows: 1fr; align-items: center; min-height: 120px; } .rs-show-card-live .rs-live-showcard__media{ aspect-ratio: auto; min-height: 100%; height: 100%; } .rs-show-card-live .rs-live-showcard__placeholder{ aspect-ratio: auto; min-height: 100%; } .rs-show-card-live .rs-live-showcard__body{ padding: 10px 8px 10px 10px; justify-content: center; } .rs-show-card-live .rs-live-showcard__title{ margin-top: 4px; font-size: clamp(16px, 3.8vw, 20px); line-height: 1.08; } .rs-show-card-live .rs-live-showcard__time{ margin-top: 5px; font-size: 13px; } .rs-show-card-live .rs-live-showcard__studio{ margin-top: 2px; font-size: 12px; line-height: 1.15; } .rs-show-card-live .rs-live-showcard__excerpt{ display: none; } .rs-show-card-live .rs-live-showcard__actions{ display: flex; align-items: center; justify-content: center; padding: 10px 8px; } .rs-show-card-live .rs-live-showcard__cta{ min-height: 42px; width: 76px; padding: 6px 8px; border-radius: 18px; background: #2f64ad; color: #fff; text-decoration: none; white-space: normal; text-align: center; justify-content: center; line-height: 1.05; } } @media (max-width: 640px){ .rs-show-card-live__rail{ max-height: min(520px, 74vh); gap: 10px; padding: 5px 7px 9px 3px; margin: -5px -7px -9px -3px; } .rs-live-jaksot-layout{ gap: 16px; } .rs-live-jaksot-layout__live .rs-show-card-live__rail, .rs-live-jaksot-layout__live .rs-show-card-live__rail--single, .rs-live-jaksot-layout__jaksot .rs-jaksot__list{ padding: 0; margin: 0; overflow: visible; max-height: none; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__link{ min-height: 188px; box-shadow: 0 10px 20px rgba(10, 23, 44, .17), 0 3px 7px rgba(10, 23, 44, .10); } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__body{ padding: 12px 12px 5px; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__actions{ padding: 0 9px 9px; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__title{ font-size: clamp(15px, 3.9vw, 18px); line-height: 1.08; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__time{ margin-top: 3px; font-size: 11px; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__studio{ margin-top: 2px; font-size: 10px; line-height: 1.15; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__corner-label{ margin-bottom: 7px; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__excerpt{ margin-top: 6px; font-size: 12px; -webkit-line-clamp: 2; line-clamp: 2; } .rs-live-jaksot-layout__live .rs-show-card-live .rs-live-showcard__cta{ min-height: 30px; padding: 6px 10px; font-size: 10px; } .rs-show-card-live .rs-live-showcard__link{ grid-template-columns: 88px minmax(0, 1fr) auto; min-height: 108px; } .rs-show-card-live .rs-live-showcard__body{ padding: 8px 7px 8px 8px; } .rs-show-card-live .rs-live-showcard__meta-label{ font-size: 11px; line-height: 1; } .rs-show-card-live .rs-live-showcard__title{ font-size: 16px; } .rs-show-card-live .rs-live-showcard__time{ margin-top: 4px; font-size: 12px; } .rs-show-card-live .rs-live-showcard__studio{ margin-top: 2px; font-size: 11px; } .rs-show-card-live .rs-live-showcard__cta{ min-height: 38px; width: 70px; padding: 5px 6px; font-size: 12px; } .rs-show-card-live .rs-live-showcard__corner-label{ padding: 7px 10px; font-size: 10px; border-radius: 18px 0 10px 0; } .rs-live-jaksot-layout__jaksot .rs-jakso-card{ --rs-jakso-rail-reserve-gap: 0px; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__link{ grid-template-columns: 30% minmax(0, 1fr); height: auto; min-height: 0; align-items: stretch; box-shadow: 0 0 0 1px rgba(187, 201, 224, .7), 0 9px 18px rgba(12, 27, 52, .13), 0 2px 6px rgba(12, 27, 52, .08); } .rs-live-jaksot-layout__jaksot .rs-jakso-card__body{ padding: 5px; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__title{ font-size: clamp(10px, 3vw, 12px); line-height: 1.1; -webkit-line-clamp: 2; line-clamp: 2; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__meta{ margin-top: 1px; font-size: 8px; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__progress{ margin-top: 3px; } .rs-live-jaksot-layout__jaksot .rs-jakso-card__progress-meta{ margin-top: 1px; font-size: 7px; } } /* ========================================================== [radiosun_schedule] - Weekly schedule tabs + cards ========================================================== */ .rs-schedule{ max-width: 860px; margin: 0 auto; padding: 12px; border-radius: 20px; border: 1px solid rgba(197, 210, 233, .55); background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(242,246,252,.96) 100%); box-shadow: 0 30px 70px rgba(8, 28, 60, .18), inset 0 1px 0 rgba(255,255,255,.75); backdrop-filter: blur(18px); } .rs-schedule__title{ margin: 0 0 10px; font-size: clamp(26px, 2.8vw, 38px); line-height: 1; font-weight: 800; letter-spacing: -.03em; color: #10213f; } .rs-schedule__tabs{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; padding: 0; border: 0; border-radius: 0; margin-bottom: 8px; background: transparent; box-shadow: none; } .rs-schedule__tab{ width: 100%; min-width: 0; aspect-ratio: 1 / 1; border: 0; border-radius: 10px; background: rgba(255,255,255,.82); color: #5a6d8d; font-size: clamp(16px, 1.35vw, 21px); font-weight: 700; line-height: 1; padding: 6px; cursor: pointer; box-shadow: 0 10px 24px rgba(18, 39, 75, .12), inset 0 1px 0 rgba(255,255,255,.72); transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; display: grid; place-items: center; } .rs-schedule__tab.is-active{ background: linear-gradient(180deg, #426fba 0%, #2e5eab 100%); color: #fff; box-shadow: 0 12px 28px rgba(47, 96, 173, .32); } .rs-schedule__tab:hover{ background: linear-gradient(180deg, #426fba 0%, #2e5eab 100%); color: #ffffff; } .rs-schedule__tab:focus-visible{ outline: 2px solid rgba(47, 96, 173, .45); outline-offset: 2px; } .rs-schedule__panel{ display: none; gap: 6px; grid-auto-rows: 1fr; } .rs-schedule__panel.is-active{ display: grid; } .rs-schedule__empty{ font-size: 15px; color: #607390; border: 1px dashed rgba(163, 180, 206, .9); border-radius: 14px; padding: 14px 12px; background: rgba(255,255,255,.72); } .rs-schedule-card{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; height: 100%; align-items: stretch; padding: 0; border: 1px solid rgba(207, 217, 233, .95); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.82); box-shadow: 0 12px 28px rgba(18, 39, 75, .12), inset 0 1px 0 rgba(255,255,255,.72); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; position: relative; } .rs-schedule-card.has-actions{ grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .rs-schedule-card:hover{ transform: translateY(-2px); border-color: rgba(169, 187, 214, .95); box-shadow: 0 16px 32px rgba(18, 39, 75, .14), inset 0 1px 0 rgba(255,255,255,.8); } .rs-schedule-card__link{ min-width: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; align-items: stretch; color: inherit; text-decoration: none !important; } .rs-schedule-card__link:hover, .rs-schedule-card__link:focus, .rs-schedule-card__link:active, .rs-schedule-card__link *{ color: inherit; text-decoration: none !important; } .rs-schedule-card__link:focus-visible{ outline: none; box-shadow: inset 0 0 0 2px rgba(47, 96, 173, .45); } .rs-schedule-card__media{ display: block; width: 100%; height: 100%; min-height: 72px; align-self: stretch; background: linear-gradient(160deg, #2e63ad 0%, #14345f 100%); overflow: hidden; position: relative; } .rs-schedule-card__media img{ width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .28s ease; } .rs-schedule-card:hover .rs-schedule-card__media img{ transform: scale(1.03); } .rs-schedule-card__placeholder{ width: 100%; height: 100%; display: grid; place-items: center; font-size: 24px; font-weight: 800; color: #fff; background: linear-gradient(160deg, #2e63ad 0%, #14345f 100%); } .rs-schedule-card__body{ padding: 7px 0 7px 0; min-width: 0; align-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; position: relative; } .rs-schedule-card__content{ min-width: 0; display: grid; align-content: center; grid-template-rows: auto auto minmax(1.15em, auto); } .rs-schedule-card__live{ position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 3px; width: fit-content; padding: 2px 5px 3px; border-radius: 0 0 8px 0; background: #dc2626; color: #ffffff; font-size: 6px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 0; box-shadow: none; z-index: 2; } .rs-schedule-card__live::before{ content: ""; width: 3px; height: 3px; border-radius: 50%; background: #ffffff; box-shadow: none; } .rs-schedule-card__title{ margin: 0; color: #122445; font-size: 18px; line-height: 1em; font-weight: 700; letter-spacing: -.02em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .rs-schedule-card__time{ margin-top: 3px; color: #28456f; font-size: 16px; line-height: 1.02; font-weight: 700; letter-spacing: -.02em; } .rs-schedule-card__studio{ margin-top: 2px; color: #677b97; font-size: clamp(11px, .82vw, 13px); line-height: 1.15; font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .rs-schedule-card__studio.is-empty{ visibility: hidden; } @media (max-width: 980px){ .rs-schedule{ max-width: 100%; border-radius: 18px; padding: 10px; } .rs-schedule__title{ font-size: clamp(24px, 5vw, 30px); margin-bottom: 9px; } .rs-schedule__tabs{ margin-bottom: 8px; } .rs-schedule__tab{ font-size: clamp(14px, 3.4vw, 18px); min-width: 0; padding: 5px; } .rs-schedule-card{ border-radius: 10px; } .rs-schedule-card.has-actions{ gap: 7px; } .rs-schedule-card__link{ grid-template-columns: 72px minmax(0, 1fr); gap: 7px; } .rs-schedule-card__media{ height: 100%; min-height: 62px; } .rs-schedule-card__body{ padding: 6px 0 6px 0; } .rs-schedule-card__live{ font-size: 6px; padding: 2px 5px 3px; } .rs-schedule-card__actions{ padding-right: 7px; } .rs-schedule-card__title{ font-size: clamp(15px, 1.9vw, 18px); } .rs-schedule-card__time{ margin-top: 2px; font-size: clamp(13px, 1.6vw, 16px); } } @media (max-width: 640px){ .rs-schedule{ padding: 9px; border-radius: 16px; } .rs-schedule__title{ font-size: clamp(22px, 7vw, 28px); } .rs-schedule__tabs{ gap: 3px; padding: 0; border-radius: 0; } .rs-schedule__tab{ font-size: clamp(13px, 3.8vw, 16px); min-width: 0; padding: 4px; border-radius: 9px; } .rs-schedule__panel{ gap: 6px; } .rs-schedule-card{ align-items: stretch; border-radius: 10px; } .rs-schedule-card.has-actions{ gap: 6px; } .rs-schedule-card__link{ grid-template-columns: 60px minmax(0, 1fr); gap: 6px; } .rs-schedule-card__media{ height: 100%; min-height: 54px; } .rs-schedule-card__body{ padding: 6px 0 6px 0; } .rs-schedule-card__title{ font-size: 12px; } .rs-schedule-card__time{ font-size: 11px; } .rs-schedule-card__studio{ font-size: 9px; } .rs-schedule-card__live{ font-size: 5px; padding: 2px 4px 2px; } .rs-schedule-card__actions{ padding-right: 7px; } } /* ========================================================== Bottom Player (fixed full-width) ========================================================== */ body{ padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)); } .rs-bottom-player{ --rs-ios-viewport-offset: 0px; --rs-bottom-player-art-size: 68px; --rs-bottom-player-art-radius: 4px; box-sizing: border-box; position: fixed !important; left: 0 !important; right: 0 !important; bottom: var(--rs-ios-viewport-offset, 0px) !important; width: 100%; max-width: 100%; z-index: 2147483000 !important; border-top: 1px solid rgba(255,255,255,.22); background: #0D5EA7 !important; background-color: #0D5EA7 !important; background-image: none !important; overflow: hidden; isolation: isolate !important; -webkit-transform: translate3d(0,0,0) !important; transform: translate3d(0,0,0) !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .rs-bottom-player::before{ content: ""; position: absolute; inset: 0; background: #0D5EA7 !important; background-color: #0D5EA7 !important; background-image: none !important; pointer-events: none; z-index: 0; } .rs-bottom-player__inner{ box-sizing: border-box; position: relative; z-index: 1; width: 100%; max-width: 100%; min-height: 94px; padding: 3px 20px calc(3px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; background: #0D5EA7 !important; background-color: #0D5EA7 !important; background-image: none !important; } .rs-bottom-player__left{ justify-self: start; min-width: 0; overflow: hidden; } .rs-bottom-player__show{ display: flex; align-items: center; gap: 14px; min-width: 0; overflow: hidden; } .rs-bottom-player__show-art-wrap{ width: var(--rs-bottom-player-art-size); height: var(--rs-bottom-player-art-size); min-width: var(--rs-bottom-player-art-size); min-height: var(--rs-bottom-player-art-size); border-radius: var(--rs-bottom-player-art-radius); overflow: hidden; background: rgba(255,255,255,.12); border: 0; box-shadow: 0 10px 22px rgba(0,0,0,.24), 0 2px 8px rgba(6,18,35,.18); flex: 0 0 var(--rs-bottom-player-art-size); } .rs-bottom-player__show-meta{ display: block; flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; } .rs-bottom-player__show-art{ width: 100%; height: 100%; object-fit: cover; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .rs-bottom-player__show-title{ display: block; width: 100%; font-size: 20px; line-height: 1.2; font-weight: 700; color: #f4f8ff; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-bottom-player__show-studio{ display: block; width: 100%; margin-top: 2px; font-size: 15px; line-height: 1.2; color: #d8e8ff; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-bottom-player__center{ justify-self: center; align-self: center; display: flex; align-items: center; justify-content: center; gap: 12px; } .rs-bottom-player__nav{ width: 44px; height: 44px; border: 0; padding: 0; border-radius: 999px; background: rgba(255,255,255,.14); box-shadow: 0 8px 18px rgba(6,18,35,.20); color: #f4f8ff; display: grid; place-items: center; cursor: pointer; transition: transform .14s ease, background .14s ease, opacity .14s ease; } .rs-bottom-player__nav[hidden]{ display: none !important; } .rs-bottom-player__nav:hover{ transform: translateY(-1px); background: rgba(255,255,255,.22); } .rs-bottom-player__nav:disabled{ opacity: .35; cursor: not-allowed; transform: none; } .rs-bottom-player__nav::before{ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 16px; line-height: 1; } .rs-bottom-player__nav--prev::before{ content: "\f053"; } .rs-bottom-player__nav--next::before{ content: "\f054"; } .rs-bottom-player__right{ justify-self: end; min-width: 0; max-width: min(52vw, 860px); display: flex; align-items: center; gap: 14px; } .rs-bottom-player__song-meta{ display: block; flex: 1 1 auto; min-width: 0; max-width: 100%; text-align: right; overflow: hidden; } .rs-bottom-player__song-title{ display: block; width: 100%; font-size: 20px; line-height: 1.2; font-weight: 700; color: #f4f8ff; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-bottom-player__song-artist{ display: block; width: 100%; margin-top: 2px; font-size: 15px; line-height: 1.2; color: #d8e8ff; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-bottom-player__progress{ width: min(280px, 100%); margin-top: 7px; margin-left: auto; } .rs-bottom-player__progress[hidden]{ display: none !important; } .rs-bottom-player__progress-bar{ height: 6px; border-radius: 999px; overflow: hidden; background: rgba(216, 232, 255, .24); } .rs-bottom-player__progress-fill{ display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f4f8ff 0%, #bcd7ff 100%); transition: width .16s linear; } .rs-bottom-player__progress-meta{ margin-top: 4px; display: flex; justify-content: space-between; gap: 12px; font-size: 10px; font-weight: 700; color: #d8e8ff; } .rs-bottom-player__song-art-wrap{ width: var(--rs-bottom-player-art-size); height: var(--rs-bottom-player-art-size); min-width: var(--rs-bottom-player-art-size); min-height: var(--rs-bottom-player-art-size); border-radius: var(--rs-bottom-player-art-radius); overflow: hidden; background: rgba(255,255,255,.12); border: 0; box-shadow: 0 10px 22px rgba(0,0,0,.24), 0 2px 8px rgba(6,18,35,.18); flex: 0 0 var(--rs-bottom-player-art-size); } .rs-bottom-player__song-art{ width: 100%; height: 100%; object-fit: cover; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .rs-bottom-player__toggle{ width: 88px; height: 88px; border: 0; background: transparent; box-shadow: none; color: #f4f8ff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .14s ease, color .14s ease, opacity .14s ease; } .rs-bottom-player__toggle:hover{ transform: translateY(-1px); color: #ffffff; } .rs-bottom-player__toggle:disabled{ opacity: .45; cursor: not-allowed; } .rs-bottom-player__icon-play{ display: block; line-height: 1; } .rs-bottom-player__icon-play::before{ content: "\f144"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 72px; line-height: 1; display: block; } .rs-bottom-player__icon-pause{ display: none; line-height: 1; } .rs-bottom-player__icon-pause::before{ content: "\f28b"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 72px; line-height: 1; display: block; } .rs-bottom-player__toggle.is-playing .rs-bottom-player__icon-play{ display: none; } .rs-bottom-player__toggle.is-playing .rs-bottom-player__icon-pause{ display: block; } @media (max-width: 820px){ .rs-bottom-player, .rs-bottom-player__inner{ background: #0D5EA7 !important; background-color: #0D5EA7 !important; background-image: none !important; } .rs-bottom-player{ --rs-bottom-player-art-size: 42px; --rs-bottom-player-art-radius: 3px; } body{ padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } .rs-bottom-player__inner{ min-height: 72px; padding: 2px 9px calc(2px + env(safe-area-inset-bottom, 0px)); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; } .rs-bottom-player__left, .rs-bottom-player__right{ width: 100%; max-width: 100%; overflow: hidden; } .rs-bottom-player__show{ gap: 6px; } .rs-bottom-player__center{ gap: 6px; } .rs-bottom-player__nav{ width: 32px; height: 32px; } .rs-bottom-player__nav::before{ font-size: 12px; } .rs-bottom-player__show-title, .rs-bottom-player__song-title{ font-size: 14px; line-height: 1.15; } .rs-bottom-player__show-studio, .rs-bottom-player__song-artist{ font-size: 10px; line-height: 1.15; } .rs-bottom-player__progress{ width: min(180px, 100%); margin-top: 5px; } .rs-bottom-player__progress-bar{ height: 5px; } .rs-bottom-player__progress-meta{ margin-top: 2px; font-size: 9px; } .rs-bottom-player__right{ gap: 6px; max-width: 100%; } .rs-bottom-player__toggle{ width: 56px; height: 56px; } .rs-bottom-player__icon-play::before, .rs-bottom-player__icon-pause::before{ font-size: 48px; } } /* Extra guard for iOS fixed-layer repaint during scroll */ @supports (-webkit-touch-callout: none){ body{ padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)); } .rs-bottom-player{ position: fixed !important; left: 0 !important; right: 0 !important; bottom: var(--rs-ios-viewport-offset, 0px) !important; width: 100%; z-index: 2147483000 !important; -webkit-transform: translate3d(0,0,0) !important; transform: translate3d(0,0,0) !important; backface-visibility: hidden; isolation: isolate; } .rs-bottom-player, .rs-bottom-player__inner{ background: #0D5EA7 !important; background-color: #0D5EA7 !important; background-image: none !important; } } @supports (-webkit-touch-callout: none) and (max-width: 820px){ body{ padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } } @supports (-webkit-touch-callout: none) and (max-width: 640px){ body{ padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } } @supports (-webkit-touch-callout: none) and (max-width: 480px){ body{ padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 640px){ body{ padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } .rs-bottom-player{ --rs-bottom-player-art-size: 34px; --rs-bottom-player-art-radius: 3px; } .rs-bottom-player__inner{ min-height: 66px; padding: 1px 7px calc(1px + env(safe-area-inset-bottom, 0px)); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; } .rs-bottom-player__show{ gap: 6px; } .rs-bottom-player__center{ gap: 5px; } .rs-bottom-player__nav{ width: 28px; height: 28px; } .rs-bottom-player__nav::before{ font-size: 10px; } .rs-bottom-player__show-title, .rs-bottom-player__song-title{ font-size: 12px; } .rs-bottom-player__show-studio, .rs-bottom-player__song-artist{ margin-top: 1px; font-size: 9px; } .rs-bottom-player__progress{ width: min(130px, 100%); margin-top: 4px; } .rs-bottom-player__right{ gap: 5px; max-width: 100%; } .rs-bottom-player__toggle{ width: 46px; height: 46px; } .rs-bottom-player__icon-play::before, .rs-bottom-player__icon-pause::before{ font-size: 38px; } } @media (max-width: 480px){ body{ padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); } .rs-bottom-player{ --rs-bottom-player-art-size: 30px; --rs-bottom-player-art-radius: 2px; } .rs-bottom-player__inner{ min-height: 62px; padding: 1px 5px calc(1px + env(safe-area-inset-bottom, 0px)); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 5px; } .rs-bottom-player__nav{ width: 24px; height: 24px; } .rs-bottom-player__nav::before{ font-size: 9px; } .rs-bottom-player__show-title, .rs-bottom-player__song-title{ font-size: 10px; } .rs-bottom-player__show-studio, .rs-bottom-player__song-artist{ font-size: 8px; } .rs-bottom-player__progress{ width: min(104px, 100%); } .rs-bottom-player__progress-meta{ font-size: 7px; } .rs-bottom-player__right{ gap: 4px; max-width: 100%; } .rs-bottom-player__toggle{ width: 40px; height: 40px; } .rs-bottom-player__icon-play::before, .rs-bottom-player__icon-pause::before{ font-size: 32px; } } /* ========================================================== Popup Form Button + Collapsible Panel ========================================================== */ .rs-popup-form{ display: flex; flex-direction: column; align-items: center; width: min(680px, 100%); max-width: 100%; margin: 0 auto 12px; vertical-align: top; } .rs-popup-form-group{ display: grid; grid-template-columns: repeat(auto-fit, minmax(188px, max-content)); justify-content: center; align-items: flex-start; width: min(680px, 100%); max-width: 100%; gap: 16px; margin: 0 auto; } .rs-popup-form-mount--now-playing{ width: 100%; margin-top: 14px; display: flex; justify-content: center; } .rs-popup-form-group--now-playing{ width: min(680px, calc(100vw - 32px)); max-width: 100%; justify-content: center; margin: 0 auto; } .rs-popup-form-group > *{ min-width: 0; margin: 0; } .rs-popup-form-group > .rs-popup-form{ width: auto; } .rs-popup-form-group > .rs-popup-form.is-open{ width: min(680px, 100%); grid-column: 1 / -1; } .rs-popup-form-group .rs-popup-form{ margin: 0 0 12px; } .rs-popup-form__trigger{ width: auto; max-width: 100%; min-height: 60px; padding: 6px 14px; border: 1px solid rgba(210, 227, 255, .34); border-radius: 16px; background: var(--rs-popup-form-bg, rgba(14, 34, 61, .34)); color: #eef5ff; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-align: center; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 24px rgba(12, 31, 56, .12); transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease; } .rs-popup-form.is-open .rs-popup-form__trigger{ background: var(--rs-popup-form-bg-hover, rgba(22, 49, 85, .56)); border-color: rgba(210, 227, 255, .42); } .rs-popup-form__trigger:hover{ transform: translateY(-1px); background: var(--rs-popup-form-bg-hover, rgba(22, 49, 85, .56)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 10px 24px rgba(12, 31, 56, .12); border-color: rgba(210, 227, 255, .42); } .rs-popup-form__trigger:focus-visible, .rs-popup-form__close:focus-visible{ outline: 2px solid #9fc4ff; outline-offset: 2px; } .rs-popup-form__trigger-icon{ width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; color: #eef5ff; font-size: 24px; line-height: 1; } .rs-popup-form__trigger-icon .fa-paper-plane{ font-size: 22px; transform: translateY(-1px) rotate(-12deg); } .rs-popup-form__trigger-text{ display: inline-flex; flex-direction: row; align-items: center; justify-content: center; min-width: 0; font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: .02em; color: #eef5ff; white-space: nowrap; text-align: center; } .rs-popup-form__trigger-text-line{ display: inline; } .rs-popup-form__panel{ width: min(680px, calc(100vw - 32px)); max-width: 100%; max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: max-height .24s ease, opacity .18s ease, transform .18s ease, margin-top .18s ease; } .rs-popup-form.is-open .rs-popup-form__panel{ max-height: 5000px; margin-top: 12px; overflow: visible; opacity: 1; transform: none; pointer-events: auto; } .rs-popup-form__dialog{ position: relative; z-index: 1; width: 100%; max-height: none; overflow: visible; border-radius: 18px; background: #f4f7fb; color: #14233f; box-shadow: 0 30px 80px rgba(7, 15, 28, .34); } .rs-popup-form__head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; position: static; background: transparent; } .rs-popup-form__title{ margin: 0; font-size: clamp(22px, 2vw, 32px); line-height: 1.08; color: #13203c; } .rs-popup-form__close{ width: 40px; height: 40px; flex: 0 0 auto; border: 0; border-radius: 999px; background: rgba(19, 32, 60, .08); color: #13203c; cursor: pointer; position: relative; } .rs-popup-form__close::before, .rs-popup-form__close::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 999px; background: currentColor; } .rs-popup-form__close::before{ transform: translate(-50%, -50%) rotate(45deg); } .rs-popup-form__close::after{ transform: translate(-50%, -50%) rotate(-45deg); } .rs-popup-form__body{ padding: 16px 20px 22px; } .rs-popup-form__empty{ margin: 0; font-size: 14px; color: #516786; } .rs-popup-form__body .forminator-ui.forminator-custom-form{ margin: 0; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-response-message{ margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(194, 52, 52, .24); background: rgba(194, 52, 52, .08); color: #8f2020; font-size: 14px; font-weight: 600; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-response-message:empty, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-response-message[hidden], .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-response-message[aria-hidden="true"], .forminator-ui .forminator-response-message:empty, .forminator-ui .forminator-response-message[hidden], .forminator-ui .forminator-response-message[aria-hidden="true"]{ display: none !important; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-row{ margin: 0 0 14px; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-row-last{ margin-bottom: 0; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-col{ padding: 0; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-field{ position: relative; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-label{ display: block; margin: 0 0 8px; color: #18304f; font-size: 14px; line-height: 1.3; font-weight: 800; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-required{ color: #c23434; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-field:has(> .forminator-input[aria-required="true"]):not(:has(> .forminator-label))::after, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-field:has(> .forminator-input[data-required="1"]):not(:has(> .forminator-label))::after, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-field:has(> .forminator-textarea[aria-required="true"]):not(:has(> .forminator-label))::after, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-field:has(> .forminator-textarea[data-required="1"]):not(:has(> .forminator-label))::after, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-field:has(> select[aria-required="true"]):not(:has(> .forminator-label))::after, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-field:has(> select[data-required="1"]):not(:has(> .forminator-label))::after{ content: "*"; position: absolute; top: 14px; right: 16px; color: #c23434; font-size: 18px; line-height: 1; font-weight: 900; pointer-events: none; z-index: 1; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-field:has(> .forminator-input[aria-required="true"]):not(:has(> .forminator-label)) > .forminator-input, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-field:has(> .forminator-input[data-required="1"]):not(:has(> .forminator-label)) > .forminator-input, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-field:has(> .forminator-textarea[aria-required="true"]):not(:has(> .forminator-label)) > .forminator-textarea, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-field:has(> .forminator-textarea[data-required="1"]):not(:has(> .forminator-label)) > .forminator-textarea, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-field:has(> select[aria-required="true"]):not(:has(> .forminator-label)) > select, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-field:has(> select[data-required="1"]):not(:has(> .forminator-label)) > select{ padding-right: 42px; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-input, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-textarea{ width: 100%; appearance: none; border: 1px solid rgba(167, 185, 212, .92); border-radius: 16px; background: #ffffff; color: #152845; padding: 15px 16px; font-size: 15px; line-height: 1.4; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-input::placeholder, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-textarea::placeholder{ color: #6f85a4; opacity: 1; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-input:focus, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-textarea:focus{ outline: none; border-color: #4c7fcb; box-shadow: 0 0 0 4px rgba(76, 127, 203, .16); } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-description{ display: block; margin: 0 0 6px; color: #6880a0; font-size: 12px; font-weight: 700; text-align: right; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-field-consent .forminator-checkbox__wrapper{ display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid rgba(182, 197, 222, .82); border-radius: 16px; background: rgba(255,255,255,.76); cursor: pointer; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-checkbox{ position: relative; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-checkbox input{ position: absolute; inset: 0; width: 22px; height: 22px; margin: 0; opacity: 0; pointer-events: auto; cursor: pointer; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-checkbox-box{ width: 22px; height: 22px; border-radius: 7px; border: 1px solid rgba(126, 150, 184, .95); background: #ffffff; position: relative; transition: border-color .14s ease, background .14s ease, box-shadow .14s ease; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-checkbox input:checked + .forminator-checkbox-box{ border-color: #2f64ad; background: #2f64ad; box-shadow: 0 0 0 3px rgba(47, 100, 173, .12); } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-checkbox input:checked + .forminator-checkbox-box::after{ content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate(45deg); } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-checkbox__label, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-checkbox__label p{ margin: 0; color: #2b4466; font-size: 14px; line-height: 1.45; cursor: pointer; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-checkbox__label a{ color: #2f64ad; font-weight: 700; text-decoration: underline; cursor: pointer; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit{ min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #2f64ad 0%, #224b84 100%); color: #ffffff; font-size: 15px; font-weight: 800; letter-spacing: .01em; cursor: pointer; box-shadow: 0 14px 28px rgba(34, 75, 132, .24); transition: transform .14s ease, box-shadow .14s ease, background .14s ease; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit:hover{ transform: translateY(-1px); box-shadow: 0 18px 32px rgba(34, 75, 132, .28); background: linear-gradient(180deg, #3973c3 0%, #285692 100%); } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit:focus-visible{ outline: 2px solid #9fc4ff; outline-offset: 2px; } .rs-popup-form__body .forminator-edit-module{ display: none; } @media (max-width: 640px){ .rs-popup-form{ width: 100%; max-width: 100%; margin: 0 0 12px; } .rs-popup-form-group{ width: 100%; gap: 12px; grid-template-columns: 1fr; } .rs-popup-form__trigger{ width: 100%; } .rs-popup-form-mount--now-playing{ margin-top: 12px; padding-inline: 12px; } .rs-popup-form-group--now-playing{ width: 100%; max-width: 100%; grid-template-columns: 1fr; justify-content: center; align-items: stretch; } .rs-popup-form-group > .rs-popup-form, .rs-popup-form-group > .rs-popup-form.is-open, .rs-popup-form-group--now-playing > .rs-popup-form{ width: 100%; margin: 0 !important; grid-column: auto; } .rs-popup-form__trigger{ min-height: 50px; padding: 5px 8px; gap: 6px; border-radius: 12px; } .rs-popup-form{ flex: 1 1 0; } .rs-popup-form__trigger-icon{ width: 20px; height: 20px; flex: 0 0 20px; font-size: 18px; } .rs-popup-form__trigger-icon .fa-paper-plane{ font-size: 17px; } .rs-popup-form__trigger-text{ font-size: 12px; line-height: 0.98; } .rs-popup-form__dialog{ width: 100%; border-radius: 16px 16px 10px 10px; } .rs-popup-form.is-open .rs-popup-form__panel{ margin-top: 10px; } .rs-popup-form__head{ padding: 14px 16px 10px; box-shadow: 0 1px 0 rgba(19, 32, 60, .08); position: sticky; top: 0; z-index: 2; background: #f4f7fb; } .rs-popup-form__body{ padding: 14px 16px 18px; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-input, .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-textarea{ padding: 14px 14px; font-size: 14px; } .rs-popup-form__body .forminator-ui.forminator-custom-form .forminator-field-consent .forminator-checkbox__wrapper{ padding: 12px 14px; gap: 10px; } } @media (max-width: 480px){ .rs-popup-form{ width: 100%; } .rs-popup-form-group{ gap: 10px; } .rs-popup-form-mount--now-playing{ padding-inline: 8px; } .rs-popup-form{ flex: 1 1 0; } .rs-popup-form-group--now-playing > .rs-popup-form{ width: 100%; margin: 0 !important; } .rs-popup-form__trigger{ min-height: 46px; padding: 4px 7px; gap: 5px; border-radius: 11px; } .rs-popup-form__trigger-icon{ width: 18px; height: 18px; flex-basis: 18px; font-size: 16px; } .rs-popup-form__trigger-icon .fa-paper-plane{ font-size: 15px; } .rs-popup-form__trigger-text{ font-size: 11px; line-height: 0.95; } .rs-popup-form.is-open .rs-popup-form__panel{ margin-top: 8px; } .rs-popup-form__dialog{ border-radius: 18px 18px 10px 10px; } .rs-popup-form__head{ padding: 12px 14px 10px; } .rs-popup-form__close{ width: 44px; height: 44px; } } /* ========================================================== [radiosun_jaksot] - Episode list ========================================================== */ .rs-jaksot{ max-width: 860px; margin: 18px auto 0; padding: 0; border: 0; background: transparent; box-shadow: none; } .rs-jaksot__title{ margin: 0 0 10px; font-size: clamp(22px, 2vw, 34px); line-height: 1.05; font-weight: 800; color: #1b2a44; } .rs-jaksot__list{ display: grid; gap: 9px; } .rs-jaksot__pagination{ margin: 14px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; } .rs-jaksot__pagination-item{ display: inline-flex; } .rs-jaksot__pagination .page-numbers, .rs-jaksot__pagination-item .page-numbers{ min-width: 40px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(177, 191, 212, .78); background: #ffffff; color: #1f3a63; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none !important; box-shadow: 0 0 0 1px rgba(201, 212, 230, .56), 0 5px 12px rgba(20, 39, 73, .08); transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .rs-jaksot__pagination a.page-numbers:hover, .rs-jaksot__pagination a.page-numbers:focus-visible{ background: #f5f9ff; border-color: rgba(128, 157, 199, .8); color: #17345a; text-decoration: none; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(176, 199, 230, .7), 0 8px 16px rgba(20, 39, 73, .12); } .rs-jaksot__pagination .page-numbers.dots{ min-width: auto; padding: 0 6px; border-color: transparent; background: transparent; box-shadow: none; color: #5f7392; } .rs-jaksot__pagination .page-numbers.current{ background: #2f64ad; border-color: #2f64ad; color: #ffffff; box-shadow: 0 8px 16px rgba(47, 100, 173, .2); } .rs-jaksot--empty{ max-width: 860px; margin: 18px auto 0; padding: 18px; border-radius: 18px; background: rgba(240, 244, 250, .92); color: #1b2a44; } .rs-jakso-card{ --rs-jakso-card-height: 92px; --rs-jakso-rail-size: 36px; --rs-jakso-rail-offset: 12px; --rs-jakso-rail-reserve-gap: 0px; margin: 0; } .rs-jakso-card__link{ display: flex; gap: 0; align-items: stretch; position: relative; height: auto; min-height: 0; padding: 0; text-decoration: none; color: inherit; border-radius: 10px; overflow: hidden; background: #ffffff; background-image: none; border: 1px solid rgba(177, 191, 212, .78); box-shadow: 0 0 0 1px rgba(201, 212, 230, .72), 0 10px 26px rgba(20, 39, 73, .10), 0 3px 8px rgba(20, 39, 73, .06); -webkit-tap-highlight-color: transparent; } .rs-jakso-card__link--playable{ appearance: none; width: 100%; border: 0; background: #ffffff; background-image: none; font: inherit; text-align: left; cursor: pointer; } .rs-jakso-card__link, .rs-jakso-card__link:hover, .rs-jakso-card__link:focus, .rs-jakso-card__link:active, .rs-jakso-card__link[aria-pressed="true"], .rs-jakso-card.is-playing .rs-jakso-card__link{ background: #ffffff !important; background-image: none !important; } .rs-jakso-card__link:hover{ text-decoration: none; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(194, 208, 229, .82), 0 14px 32px rgba(20, 39, 73, .13), 0 4px 10px rgba(20, 39, 73, .08); } .rs-jakso-card__link--playable:focus-visible{ outline: 2px solid #2f64ad; outline-offset: 3px; } .rs-jakso-card__link[aria-pressed="true"], .rs-jakso-card.is-playing .rs-jakso-card__link{ background: #ffffff; box-shadow: 0 0 0 1px rgba(194, 208, 229, .82), 0 14px 32px rgba(20, 39, 73, .13), 0 4px 10px rgba(20, 39, 73, .08); } .rs-jakso-card__link[aria-pressed="true"] .rs-jakso-card__cta, .rs-jakso-card.is-playing .rs-jakso-card__cta{ color: #1f4f91; } .rs-jakso-card__media{ position: relative; align-self: stretch; flex: 0 0 var(--rs-jakso-media-size, var(--rs-jakso-card-height)); width: var(--rs-jakso-media-size, var(--rs-jakso-card-height)); aspect-ratio: 1 / 1; min-height: 0; height: auto; background: linear-gradient(160deg, #3f75c5 0%, #244d97 100%); overflow: hidden; } .rs-jakso-card__link--playable .rs-jakso-card__media::before{ content: ""; position: absolute; inset: 0; background: rgba(19, 32, 60, .34); pointer-events: none; z-index: 2; transition: background .16s ease; } .rs-jakso-card__link--playable .rs-jakso-card__media::after{ content: "\f04b"; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; display: grid; place-items: center; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: clamp(56px, 48%, 88px); line-height: 1; color: rgba(255, 255, 255, .42); transform: translate(-50%, -50%) translateX(1px); pointer-events: none; z-index: 3; text-shadow: 0 6px 18px rgba(8, 18, 34, .12); transition: transform .16s ease, color .16s ease; } .rs-jakso-card__link--playable:hover .rs-jakso-card__media::before{ background: rgba(19, 32, 60, .40); } .rs-jakso-card__link--playable[aria-pressed="true"] .rs-jakso-card__media::after, .rs-jakso-card.is-playing .rs-jakso-card__media::after{ content: "\f04c"; transform: translate(-50%, -50%); } .rs-jakso-card__media img{ width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 1 / 1; } .rs-jakso-card__ph{ width: 100%; height: 100%; display: grid; place-items: center; font-size: 40px; font-weight: 800; color: rgba(255,255,255,.92); } .rs-jakso-card__body{ flex: 1 1 auto; min-width: 0; width: 100%; padding: 5px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 5px; } .rs-jakso-card__content{ min-width: 0; display: flex; flex-direction: column; justify-content: center; cursor: pointer; } .rs-jakso-card__title{ margin: 0; font-size: clamp(13px, 1.05vw, 17px); line-height: 1.12; font-weight: 700; color: #182844; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .single-ohjelma .rs-jakso-card__title{ font-size: clamp(12px, .95vw, 15px); line-height: 1.2; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .single-ohjelma .rs-jakso-card__link{ align-items: stretch; } .single-ohjelma .rs-jakso-card__body{ flex: 1 1 auto; height: 100%; padding: 5px; align-self: stretch; } .single-ohjelma .rs-jakso-card__media{ align-self: stretch; } .rs-jakso-card__meta{ margin-top: 1px; font-size: 10px; font-weight: 700; color: #5b7091; } .rs-jakso-card__show{ margin-top: 1px; font-size: 9px; font-weight: 700; color: #6e82a2; } .rs-jakso-card__progress{ margin-top: 4px; cursor: pointer; } .rs-jakso-card__progress-bar{ height: 5px; border-radius: 999px; overflow: hidden; background: rgba(113, 134, 167, .24); cursor: pointer; } .rs-jakso-card__progress-fill{ display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2f64ad 0%, #5a8cd3 100%); transition: width .16s linear; } .rs-jakso-card__progress-meta{ margin-top: 2px; display: flex; justify-content: space-between; gap: 8px; font-size: 9px; font-weight: 700; color: #5f7392; } .single-ohjelma .rs-jakso-card__meta{ margin-top: 2px; font-size: 9px; width: 100%; } .single-ohjelma .rs-jakso-card__progress{ margin-top: 4px; width: 100%; } .single-ohjelma .rs-jakso-card__progress-bar{ height: 5px; width: 100%; } .single-ohjelma .rs-jakso-card__progress-meta{ margin-top: 2px; font-size: 8px; width: 100%; } .single-ohjelma .rs-jakso-card__title, .single-ohjelma .rs-jakso-card__meta{ width: 100%; } .rs-jakso-card__actions-row{ display: grid; grid-template-columns: auto; align-items: center; justify-content: end; justify-items: end; column-gap: 0; row-gap: 0; align-self: center; } .rs-jakso-card__cta{ width: 36px; height: 36px; display: grid; place-items: center; position: relative; margin: 0; padding: 0; border-radius: 999px; background: #2f64ad; box-shadow: 0 10px 18px rgba(47, 100, 173, .22); font-size: 0; color: transparent; white-space: nowrap; flex: 0 0 auto; } .rs-jakso-card__link--playable .rs-jakso-card__cta{ display: none; } .rs-jakso-card__cta::before{ content: "\f04b"; position: absolute; inset: 0; display: grid; place-items: center; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; line-height: 1; color: #ffffff; transform: translateX(1px); } .rs-jakso-card__link[aria-pressed="true"] .rs-jakso-card__cta::before, .rs-jakso-card.is-playing .rs-jakso-card__cta::before{ content: "\f04c"; transform: translateX(0); } @media (max-width: 820px){ .rs-jaksot{ padding: 0; } .rs-jaksot__title{ margin-bottom: 8px; font-size: clamp(18px, 5vw, 26px); } .rs-jaksot__list{ gap: 8px; } .rs-jaksot__pagination{ margin-top: 12px; gap: 6px; } .rs-jaksot__pagination .page-numbers{ min-width: 34px; height: 30px; padding: 0 8px; font-size: 12px; } .rs-jakso-card__link{ grid-template-columns: auto minmax(0, 1fr); height: auto; min-height: 0; border-radius: 10px; align-items: stretch; } .rs-jakso-card__body{ padding: 5px; column-gap: 5px; } .rs-jakso-card__title{ font-size: clamp(12px, 3.6vw, 14px); line-height: 1.14; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .single-ohjelma .rs-jakso-card__title{ font-size: clamp(11px, 3vw, 13px); line-height: 1.18; font-weight: 700; } .single-ohjelma .rs-jakso-card__link{ height: auto; min-height: 0; } .single-ohjelma .rs-jakso-card__body{ padding: 5px; } .rs-jakso-card__meta{ margin-top: 1px; font-size: 8px; } .rs-jakso-card__show{ margin-top: 1px; font-size: 8px; } .rs-jakso-card__progress{ margin-top: 2px; } .rs-jakso-card__progress-meta{ margin-top: 1px; font-size: 7px; } .rs-jakso-card__cta{ width: 32px; height: 32px; } .rs-jakso-card__cta::before{ font-size: 11px; } } @media (max-width: 560px){ .rs-jakso-card__link{ grid-template-columns: auto minmax(0, 1fr); min-height: 0; } .rs-jakso-card__body{ padding: 5px; column-gap: 5px; } .rs-jakso-card__title{ font-size: clamp(11px, 3.5vw, 13px); } } /* GLOBAL Forminator style */ body .forminator-ui.forminator-custom-form-1000083393.forminator-design--flat { margin: 0 !important; } .forminator-ui .forminator-form { background: #ffffff; border: 1px solid #e3e8ef; border-radius: 8px; padding: 28px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .forminator-ui .forminator-field { margin-bottom: 20px; } .forminator-ui .forminator-label, .forminator-ui label { display: block; font-size: 14px; font-weight: 600; color: #1f2937; margin-bottom: 6px; } .forminator-ui.forminator-custom-form[data-design=flat] .forminator-label, .forminator-ui.forminator-custom-form[data-design=flat] label:not(.forminator-checkbox) { cursor: default !important; display: block !important; line-height: 1.2em !important; margin: 0 0 7px !important; border: 0 !important; } .forminator-ui#forminator-module-1000083393.forminator-design--flat .forminator-label, .forminator-ui#forminator-module-1000083393.forminator-design--flat label, .forminator-ui.forminator-custom-form-1000083393.forminator-design--flat .forminator-label, .forminator-ui.forminator-custom-form-1000083393.forminator-design--flat label { color: #000000 !important; } .forminator-ui input.forminator-input, .forminator-ui textarea.forminator-textarea, .forminator-ui select { width: 100%; background: #ffffff !important; border: 1px solid #cfd7e3 !important; border-radius: 6px !important; padding: 12px 14px !important; font-size: 15px; color: #111827; box-shadow: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .forminator-ui input.forminator-input:focus, .forminator-ui textarea.forminator-textarea:focus, .forminator-ui select:focus { outline: none; border-color: #2f5daa !important; box-shadow: 0 0 0 2px rgba(47, 93, 170, 0.12) !important; } .forminator-ui textarea.forminator-textarea { max-height: 100px !important; resize: vertical; } .forminator-ui input::placeholder, .forminator-ui textarea::placeholder { color: #8b98a9; } /* Consent / checkbox areas */ .forminator-ui .forminator-checkbox__wrapper { display: flex; align-items: center; gap: 12px; border: 1px solid #d6dde8 !important; border-radius: 6px !important; background: #ffffff !important; padding: 12px 14px !important; } .forminator-ui .forminator-checkbox, .forminator-ui .forminator-consent { margin: 0; } .forminator-ui.forminator-custom-form[data-design=flat] label.forminator-checkbox, .forminator-ui.forminator-custom-form label.forminator-checkbox, .forminator-ui label.forminator-checkbox { display: inline-flex !important; align-items: center !important; justify-content: flex-start; flex-wrap: nowrap; gap: 10px; width: auto; margin: 0 !important; line-height: 1.4 !important; vertical-align: middle; } .forminator-ui.forminator-custom-form[data-design=flat] label.forminator-checkbox .forminator-checkbox-box, .forminator-ui.forminator-custom-form label.forminator-checkbox .forminator-checkbox-box, .forminator-ui label.forminator-checkbox .forminator-checkbox-box { flex: 0 0 auto; } .forminator-ui.forminator-custom-form[data-design=flat] label.forminator-checkbox .forminator-checkbox-label, .forminator-ui.forminator-custom-form label.forminator-checkbox .forminator-checkbox-label, .forminator-ui label.forminator-checkbox .forminator-checkbox-label { display: inline !important; margin: 0 !important; line-height: 1.4; } .forminator-ui input[type="checkbox"], .forminator-ui input[type="radio"] { width: 16px; height: 16px; accent-color: #2f5daa; } .forminator-ui .forminator-checkbox__label, .forminator-ui .forminator-consent__label { font-size: 14px; color: #334155; } .forminator-ui .forminator-checkbox__label p, .forminator-ui .forminator-consent__label p { margin: 0; } /* Counter text */ .forminator-ui .forminator-description { font-size: 12px; color: #7c889b; margin-bottom: 6px; text-align: right; } /* Button */ .forminator-ui .forminator-button, .forminator-ui .forminator-button-submit, .forminator-ui button.forminator-button { background: #2f5daa !important; color: #ffffff !important; border: none !important; border-radius: 6px !important; padding: 12px 24px !important; font-size: 15px; font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,0.10); transition: background 0.2s ease; } .forminator-ui .forminator-button:hover, .forminator-ui .forminator-button-submit:hover, .forminator-ui button.forminator-button:hover { background: #244b8d !important; } /* Required star */ .forminator-ui .forminator-required { color: #d33; } /* Error message */ .forminator-ui .forminator-response-message { border-radius: 6px !important; } .forminator-ui.forminator-custom-form-1000083359, .forminator-ui.forminator-custom-form-1000083359.forminator-design--flat, .forminator-ui.forminator-custom-form-1000083359.forminator-design--flat.forminator-design--flat { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================== Likes (ohjelma + jakso) ========================================================== */ .rs-like-wrap--show { margin: 20px 0 10px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; } .rs-like-button { --rs-like-bg: rgba(255, 255, 255, .92); --rs-like-border: rgba(167, 183, 210, .85); --rs-like-text: #1f3254; --rs-like-heart: #d44b63; appearance: none; border: 1px solid var(--rs-like-border); background: var(--rs-like-bg); border-radius: 999px; min-height: 36px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--rs-like-text); cursor: pointer; box-shadow: 0 8px 18px rgba(19, 36, 66, .12); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .rs-like-button:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(19, 36, 66, .16); border-color: rgba(136, 162, 198, .96); } .rs-like-button:focus-visible { outline: 2px solid #2f64ad; outline-offset: 2px; } .rs-like-button[disabled] { cursor: default; } .rs-like-button__heart { position: relative; width: 16px; height: 16px; display: inline-grid; place-items: center; } .rs-like-button__icon { position: absolute; inset: 0; font-size: 15px; line-height: 1; } .rs-like-button__icon--outline { color: #637aa0; opacity: 1; } .rs-like-button__icon--solid { color: var(--rs-like-heart); opacity: 0; transform: scale(.75); transition: opacity .14s ease, transform .14s ease; } .rs-like-button.is-liked .rs-like-button__icon--outline { opacity: 0; } .rs-like-button.is-liked .rs-like-button__icon--solid { opacity: 1; transform: scale(1); } .rs-like-button__count { line-height: 1; min-width: 1ch; } .rs-share-button { appearance: none; border: 1px solid rgba(167, 183, 210, .85); background: rgba(255, 255, 255, .92); border-radius: 999px; min-height: 36px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 7px; color: #1f3254; cursor: pointer; font-weight: 700; font-size: 13px; box-shadow: 0 8px 18px rgba(19, 36, 66, .12); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .rs-share-button:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(19, 36, 66, .16); border-color: rgba(136, 162, 198, .96); } .rs-share-button:focus-visible { outline: 2px solid #2f64ad; outline-offset: 2px; } .rs-share-button.is-copied .rs-share-button__label { opacity: .7; } .rs-share-button__icon { width: 15px; height: 15px; display: inline-grid; place-items: center; } .rs-share-button__icon i { font-size: 13px; line-height: 1; } .rs-jakso-card { position: relative; overflow: visible; } .rs-jakso-card__rail { display: flex; flex-direction: row; align-items: center; gap: 6px; } .rs-jakso-card__actions { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; width: auto; } .rs-like-button--compact, .rs-share-button--compact { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; gap: 0; justify-content: center; border-radius: 999px; } .rs-like-button--compact .rs-like-button__count, .rs-share-button--compact .rs-share-button__label { display: none; } .rs-like-button--compact .rs-like-button__heart { width: 14px; height: 14px; } .rs-like-button--compact .rs-like-button__icon { font-size: 13px; } .rs-share-button--compact .rs-share-button__icon { width: 13px; height: 13px; } .rs-share-button--compact .rs-share-button__icon i { font-size: 11px; } @media (max-width: 820px) { .rs-jakso-card { --rs-jakso-rail-size: 32px; --rs-jakso-rail-offset: 8px; --rs-jakso-rail-reserve-gap: 0px; } .rs-jakso-card__actions { gap: 5px; } .rs-like-button--compact, .rs-share-button--compact, .rs-jakso-card__cta{ width: 32px; min-width: 32px; height: 32px; min-height: 32px; } .rs-like-button--compact .rs-like-button__heart { width: 12px; height: 12px; } .rs-like-button--compact .rs-like-button__icon { font-size: 11px; } .rs-share-button--compact .rs-share-button__icon { width: 11px; height: 11px; } .rs-share-button--compact .rs-share-button__icon i { font-size: 10px; } .rs-jakso-card__cta::before{ font-size: 11px; } .rs-jakso-card__link--playable .rs-jakso-card__media::after{ font-size: clamp(44px, 46%, 68px); } } @media (max-width: 560px) { .rs-jakso-card { --rs-jakso-rail-size: 28px; --rs-jakso-rail-offset: 6px; --rs-jakso-rail-reserve-gap: 0px; } .single-ohjelma .rs-jakso-card__link{ height: auto; min-height: 0; } .single-ohjelma .rs-jakso-card__body{ padding: 8px 10px 8px 9px; } .single-ohjelma .rs-jakso-card__title{ font-size: clamp(11px, 3.4vw, 13px); line-height: 1.16; } .single-ohjelma .rs-jakso-card__meta{ margin-top: 2px; font-size: 9px; } .single-ohjelma .rs-jakso-card__progress{ margin-top: 4px; } .single-ohjelma .rs-jakso-card__progress-meta{ margin-top: 2px; font-size: 8px; } .rs-jakso-card__actions { gap: 4px; } .rs-like-button--compact, .rs-share-button--compact, .rs-jakso-card__cta{ width: 28px; min-width: 28px; height: 28px; min-height: 28px; } .rs-like-button--compact .rs-like-button__heart { width: 11px; height: 11px; } .rs-like-button--compact .rs-like-button__icon { font-size: 10px; } .rs-share-button--compact .rs-share-button__icon { width: 10px; height: 10px; } .rs-share-button--compact .rs-share-button__icon i { font-size: 9px; } .rs-jakso-card__cta::before{ font-size: 10px; } .rs-jakso-card__link--playable .rs-jakso-card__media::after{ font-size: clamp(36px, 42%, 54px); } } /* Match single show episode cards to the shortcode layout. */ .single-ohjelma .rs-jakso-card{ --rs-jakso-rail-reserve-gap: 0px; } .single-ohjelma .rs-jakso-card__link{ grid-template-columns: auto minmax(0, 1fr); height: auto; min-height: 0; align-items: stretch; box-shadow: 0 0 0 1px rgba(187, 201, 224, .78), 0 12px 24px rgba(12, 27, 52, .16), 0 3px 8px rgba(12, 27, 52, .10); transition: box-shadow .18s ease, transform .18s ease; } .single-ohjelma .rs-jakso-card__body{ height: 100%; padding: 5px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 5px; align-self: stretch; } .single-ohjelma .rs-jakso-card__media{ align-self: stretch; } .single-ohjelma .rs-jakso-card__title{ width: 100%; font-size: clamp(11px, .95vw, 13px); line-height: 1.12; font-weight: 700; } .single-ohjelma .rs-jakso-card__meta{ width: 100%; margin-top: 1px; font-size: 8px; } .single-ohjelma .rs-jakso-card__progress{ margin-top: 3px; width: 100%; } .single-ohjelma .rs-jakso-card__progress-bar{ height: 5px; width: 100%; } .single-ohjelma .rs-jakso-card__progress-meta{ margin-top: 1px; font-size: 7px; width: 100%; } @media (max-width: 980px) { .single-ohjelma .rs-jakso-card__link{ grid-template-columns: auto minmax(0, 1fr); height: auto; min-height: 0; align-items: stretch; box-shadow: 0 0 0 1px rgba(187, 201, 224, .74), 0 10px 20px rgba(12, 27, 52, .14), 0 3px 7px rgba(12, 27, 52, .09); } .single-ohjelma .rs-jakso-card__body{ padding: 5px; } .single-ohjelma .rs-jakso-card__title{ font-size: clamp(11px, 2.6vw, 13px); line-height: 1.12; } .single-ohjelma .rs-jakso-card__meta{ margin-top: 1px; font-size: 8px; } .single-ohjelma .rs-jakso-card__progress{ margin-top: 3px; } .single-ohjelma .rs-jakso-card__progress-meta{ margin-top: 1px; font-size: 7px; } } @media (max-width: 640px) { .single-ohjelma .rs-jakso-card__link{ grid-template-columns: auto minmax(0, 1fr); height: auto; min-height: 0; align-items: stretch; box-shadow: 0 0 0 1px rgba(187, 201, 224, .7), 0 9px 18px rgba(12, 27, 52, .13), 0 2px 6px rgba(12, 27, 52, .08); } .single-ohjelma .rs-jakso-card__body{ padding: 5px; } .single-ohjelma .rs-jakso-card__title{ font-size: clamp(10px, 3vw, 12px); line-height: 1.1; } .single-ohjelma .rs-jakso-card__meta{ margin-top: 1px; font-size: 8px; } .single-ohjelma .rs-jakso-card__progress{ margin-top: 3px; } .single-ohjelma .rs-jakso-card__progress-meta{ margin-top: 1px; font-size: 7px; } } .rs-hamburger { --rs-hamburger-size: 48px; --rs-hamburger-line-width: 22px; --rs-hamburger-line-height: 2px; --rs-hamburger-color: currentColor; display: inline-flex; align-items: center; justify-content: center; width: var(--rs-hamburger-size); height: var(--rs-hamburger-size); padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background-color .2s ease, color .2s ease; } .rs-hamburger:hover, .rs-hamburger:focus-visible { background: rgba(255, 255, 255, 0.12); outline: none; } .rs-hamburger__lines { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; } .rs-hamburger__line { display: block; width: var(--rs-hamburger-line-width); height: var(--rs-hamburger-line-height); border-radius: 999px; background: var(--rs-hamburger-color); transition: transform .2s ease, opacity .2s ease; transform-origin: center; } .rs-hamburger.is-active .rs-hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .rs-hamburger.is-active .rs-hamburger__line:nth-child(2) { opacity: 0; } .rs-hamburger.is-active .rs-hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .rs-flyout-menu { position: relative; display: inline-flex; margin: 0; padding: 0; line-height: 1; vertical-align: middle; align-self: center; } .rs-flyout-menu__toggle { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; min-height: 0 !important; line-height: 0; border: 0 !important; color: #ffffff; background: transparent !important; box-shadow: none !important; } .site-header .rs-flyout-menu, .ast-builder-layout-element .rs-flyout-menu, .ast-header-html-1 .rs-flyout-menu, .ast-header-html-2 .rs-flyout-menu, .ast-header-html-3 .rs-flyout-menu { display: flex; } .site-header .ast-builder-layout-element, .site-header .ast-builder-html-element, .site-header [class*="ast-header-html-"] { display: flex; align-items: center; margin: 0; padding: 0; line-height: 1; border: 0; box-shadow: none; } .site-header .ast-builder-layout-element > *, .site-header .ast-builder-html-element > *, .site-header [class*="ast-header-html-"] > * { margin-top: 0; margin-bottom: 0; } .site-header .ast-builder-layout-element p, .site-header .ast-builder-html-element p, .site-header [class*="ast-header-html-"] p { margin: 0; padding: 0; line-height: 1; border: 0; } .rs-flyout-menu__overlay[hidden] { display: none !important; } .rs-flyout-menu__overlay { position: fixed; inset: 0; z-index: 2147482990; isolation: isolate; } .rs-flyout-menu__backdrop { position: absolute; inset: 0; background: rgba(8, 18, 34, .56); backdrop-filter: blur(8px); } .rs-flyout-menu__panel { position: fixed; top: 0; right: 0; width: min(420px, 75vw); height: 100%; padding: 18px 18px 22px; display: flex; flex-direction: column; background: #ffffff; color: #13203c; box-shadow: -18px 0 42px rgba(0, 0, 0, .28); z-index: 1; transform: translateX(100%); transition: transform .22s ease; } .rs-flyout-menu.is-open .rs-flyout-menu__panel, .rs-flyout-menu__overlay.is-open .rs-flyout-menu__panel { transform: translateX(0); } .rs-flyout-menu__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .rs-flyout-menu__head--no-title { justify-content: flex-end; } .rs-flyout-menu__title { margin: 0; color: #13203c; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.08; font-weight: 700; } .rs-flyout-menu__close { width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 999px; background: rgba(19, 32, 60, .08); color: #13203c; position: relative; cursor: pointer; } .rs-flyout-menu__close::before, .rs-flyout-menu__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 999px; background: currentColor; } .rs-flyout-menu__close::before { transform: translate(-50%, -50%) rotate(45deg); } .rs-flyout-menu__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .rs-flyout-menu__close:focus-visible, .rs-flyout-menu__toggle:focus-visible, .rs-flyout-menu__nav a:focus-visible { outline: 2px solid #9fc4ff; outline-offset: 2px; } .rs-flyout-menu__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; -webkit-overflow-scrolling: touch; } .rs-flyout-menu__nav, .rs-flyout-menu__nav .menu { display: block; } .rs-flyout-menu__nav ul { list-style: none; margin: 0; padding: 0; } .rs-flyout-menu__nav li { margin: 0; padding: 0; } .rs-flyout-menu__nav li::before, .rs-flyout-menu__nav li::after, .rs-flyout-menu__nav a::before, .rs-flyout-menu__nav a::after { content: none !important; } .rs-flyout-menu__nav .ast-menu-toggle, .rs-flyout-menu__nav .dropdown-menu-toggle, .rs-flyout-menu__nav .sub-arrow, .rs-flyout-menu__nav .ast-icon.icon-arrow, .rs-flyout-menu__nav .menu-link-sub { display: none !important; } .rs-flyout-menu__nav .sub-menu { margin-top: 4px; margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(19, 32, 60, .14); } .rs-flyout-menu__nav a { display: block; padding: 9px 12px; border-radius: 10px; color: #13203c; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color .16s ease, color .16s ease, transform .16s ease; } .rs-flyout-menu__nav a:hover { background: rgba(19, 32, 60, .06); color: #13203c; transform: translateX(2px); } .rs-flyout-menu__nav .current-menu-item > a, .rs-flyout-menu__nav .current_page_item > a, .rs-flyout-menu__nav .current-menu-ancestor > a, .rs-flyout-menu__nav .current-page-ancestor > a { background: transparent; color: #13203c; } @media (max-width: 640px) { .rs-flyout-menu__panel { width: 75vw; padding: 14px 14px 18px; } .rs-flyout-menu__title { font-size: clamp(18px, 5vw, 24px); } .rs-flyout-menu__nav a { padding: 8px 10px; font-size: 14px; } } .rs-flyout-menu__toggle:hover, .rs-flyout-menu__toggle:focus-visible, .rs-flyout-menu__toggle.is-active { background: transparent !important; box-shadow: none !important; color: #ffffff; } .rs-flyout-menu__toggle .rs-hamburger__line { background: #ffffff; } /* ========================================================== [radiosun_top20_vote] - Sun suosikit top 20 ========================================================== */ .rs-top20{ max-width: 920px; margin: 24px auto 0; padding: 8px 0 0; border-radius: 0; background: transparent; border: 0; box-shadow: none; color: #13203c; position: relative; z-index: 20; overflow: visible; } .rs-top20--empty{ text-align: center; } .rs-top20 + .rs-top20{ margin-top: 24px; } .rs-top20__header{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 14px; } .rs-top20__controls{ display: flex; justify-content: flex-start; margin: 0 0 12px; } .rs-top20__history-master-toggle{ appearance: none; min-height: 38px; padding: 8px 16px; border: 1px solid rgba(135, 160, 198, .82) !important; border-radius: 999px; background: #ffffff !important; background-image: none !important; color: #234b83 !important; font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 22px rgba(19, 36, 66, .08), inset 0 1px 0 rgba(255,255,255,.88) !important; transform: none !important; transition: none !important; } .rs-top20__history-master-toggle:hover, .rs-top20__history-master-toggle:active, .rs-top20__history-master-toggle:focus, .rs-top20__history-master-toggle:focus-visible, .rs-top20__history-master-toggle.is-active, .rs-top20__history-master-toggle.is-active:hover, .rs-top20__history-master-toggle.is-active:active, .rs-top20__history-master-toggle.is-active:focus, .rs-top20__history-master-toggle.is-active:focus-visible{ border-color: rgba(135, 160, 198, .82) !important; background: #ffffff !important; background-image: none !important; color: #234b83 !important; box-shadow: 0 10px 22px rgba(19, 36, 66, .08), inset 0 1px 0 rgba(255,255,255,.88) !important; transform: none !important; outline: none !important; } .rs-top20__title{ margin: 0; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.04; color: #13203c; } .rs-top20__status{ margin: 0; font-size: 14px; font-weight: 700; color: #35527a; text-align: left; } .rs-top20__status-wrap{ display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; } .rs-top20__timer-head{ display: flex; justify-content: center; width: 100%; } .rs-top20__timer-head[hidden]{ display: none !important; } .rs-top20__timer-kicker{ width: min-content; min-width: 340px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7a8da9; text-align: left; } .rs-top20__timer{ display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 12px; width: 100%; padding: 0; background: transparent; box-shadow: none; color: #13203c; backdrop-filter: none; } .rs-top20__timer[hidden]{ display: none !important; } .rs-top20__timer-unit{ display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 76px; } .rs-top20__timer-circle{ position: relative; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(244, 248, 253, .96) 100%); border: 1px solid rgba(186, 199, 219, .92); box-shadow: 0 10px 22px rgba(19, 36, 66, .08), 0 2px 6px rgba(19, 36, 66, .04), inset 0 1px 0 rgba(255,255,255,.85); } .rs-top20__timer-label{ font-size: 10px; font-weight: 700; letter-spacing: .01em; text-transform: none; color: #7a8da9; white-space: nowrap; } .rs-top20__timer-value{ position: relative; z-index: 1; display: inline-grid; place-items: center; align-items: center; min-width: 0; font-size: 26px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: #13203c; font-variant-numeric: tabular-nums; white-space: nowrap; word-break: keep-all; } .rs-top20__list{ display: grid; gap: 8px; background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none; position: relative; z-index: 1; } .rs-top20__item{ --rs-top20-card-radius: 24px; --rs-top20-badge-cut-radius: 12px; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 0; align-items: stretch; min-height: 92px; padding: 0; border-radius: var(--rs-top20-card-radius); background: rgba(255, 255, 255, .86); border: 0; box-shadow: 0 -6px 16px rgba(19, 36, 66, .08), 0 14px 34px rgba(19, 36, 66, .12), 0 3px 10px rgba(19, 36, 66, .06); overflow: visible; backdrop-filter: blur(6px); position: relative; z-index: 1; } .rs-top20__item.is-voted{ box-shadow: 0 -8px 20px rgba(19, 36, 66, .1), 0 18px 40px rgba(19, 36, 66, .16), 0 4px 14px rgba(19, 36, 66, .08), 0 0 0 1px rgba(255,255,255,.68) inset; } .rs-top20__rank{ margin: 4px 0 0; display: block; font-size: 11px; font-weight: 600; line-height: 1.2; color: #8fa0b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-top20__art{ width: 104px; min-width: 104px; flex: 0 0 104px; height: 100%; min-height: 100%; align-self: stretch; display: flex; overflow: hidden; border-radius: var(--rs-top20-card-radius) 0 0 var(--rs-top20-card-radius); background: #eef3f8; box-shadow: 0 10px 24px rgba(19, 36, 66, .14), 0 2px 8px rgba(19, 36, 66, .08); margin: 0; } .rs-top20__art img{ width: 100%; height: 100%; display: block; flex: 1 1 auto; object-fit: cover; object-position: center; } .rs-top20__body{ min-width: 0; display: flex; flex-direction: column; justify-content: center; align-self: stretch; height: 100%; padding: 10px 14px 10px 14px; } .rs-top20__song{ margin: 0; display: block; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.15; color: #13203c; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-top20__artist{ margin: 3px 0 0; display: block; font-size: 13px; line-height: 1.2; color: #63758f; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__body{ position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rank song" "rank artist"; column-gap: 12px; row-gap: 2px; align-content: center; align-items: start; padding-top: 10px; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__rank{ grid-area: rank; align-self: center; margin: 0; display: inline-grid; align-items: center; justify-content: center; width: clamp(38px, 3vw, 48px); min-width: clamp(38px, 3vw, 48px); height: clamp(38px, 3vw, 48px); min-height: clamp(38px, 3vw, 48px); border-radius: 50%; background: linear-gradient(180deg, #2f64ad 0%, #0d5ea7 100%); box-shadow: 0 10px 20px rgba(13, 94, 167, .24), inset 0 1px 0 rgba(255,255,255,.24); font-size: clamp(18px, 1.5vw, 22px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #ffffff; font-variant-numeric: tabular-nums; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__song{ grid-area: song; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__artist{ grid-area: artist; margin-top: 0; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__history-view{ --rs-top20-history-cell-width: 28px; --rs-top20-history-row-height: 17px; grid-column: 2 / 4; grid-row: 1; align-self: stretch; min-width: 0; height: 100%; padding: 4px 6px 4px 4px; display: grid; grid-template-rows: auto minmax(0, 1fr); row-gap: 4px; position: relative; background: linear-gradient(180deg, rgba(250, 252, 255, .98) 0%, rgba(239, 245, 252, .98) 100%); border-left: 1px solid rgba(193, 205, 223, .72); border-radius: 0 10px 10px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.88), inset 0 0 0 1px rgba(222, 230, 241, .5); } [data-rs-top20][data-rs-top20-round-id] .rs-top20__history-view[hidden]{ display: none !important; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__history-heading{ margin: 0; font-size: 13px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: #17345a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__history-content{ min-width: 0; display: block; width: 100%; max-width: 100%; min-height: 0; height: 100%; overflow: hidden; scrollbar-width: thin; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__item.is-history-open .rs-top20__body, [data-rs-top20][data-rs-top20-round-id] .rs-top20__item.is-history-open .rs-top20__actions{ display: none; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-table{ display: block; width: 100%; min-width: 0; height: 100%; align-self: stretch; min-height: calc((var(--rs-top20-history-row-height) * 2) + 2px); border: 1px solid rgba(188, 201, 220, .82); border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(244, 248, 253, .96) 100%); box-shadow: 0 14px 28px rgba(19, 36, 66, .08), inset 0 1px 0 rgba(255,255,255,.9); } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-labels{ display: none; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-label{ display: none; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-label + .rs-top20__placement-label{ border-top: 0; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-scroll{ display: block; min-width: 0; height: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: thin; border-radius: 10px; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-history{ grid-auto-columns: minmax(var(--rs-top20-history-cell-width), 1fr); gap: 1px; padding: 1px; width: max(100%, max-content); min-width: 100%; min-height: 0; height: 100%; overflow: visible; border: 0; border-radius: 0; box-shadow: none; background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246, 249, 253, .96) 100%); } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-cell{ display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); align-content: stretch; align-items: stretch; justify-items: stretch; width: 100%; min-width: var(--rs-top20-history-cell-width); min-height: calc(var(--rs-top20-history-row-height) * 2); border: 1px solid rgba(221, 229, 239, .92); border-radius: 4px; background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(241, 246, 252, .96) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 2px 6px rgba(19, 36, 66, .05); } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-cell--label{ min-width: max(60px, calc(var(--rs-top20-history-cell-width) * 2)); position: sticky; left: 0; z-index: 3; background: linear-gradient(180deg, rgba(249, 251, 254, .99) 0%, rgba(236, 242, 249, .98) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 10px 0 18px rgba(19, 36, 66, .08); } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-week{ display: grid; align-self: stretch; place-items: center; height: 100%; min-height: var(--rs-top20-history-row-height); padding: 0 1px; font-size: clamp(7px, calc(var(--rs-top20-history-cell-width) * 0.2), 10px); line-height: 1; letter-spacing: .02em; color: #8fa0b8; font-weight: 600; background: rgba(238, 244, 250, .96); border-bottom: 1px solid rgba(221, 229, 239, .92); } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-cell--label .rs-top20__placement-week, [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-cell--label .rs-top20__placement-rank{ font-weight: 700; color: #607392; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-cell--label .rs-top20__placement-week{ font-size: clamp(6px, calc(var(--rs-top20-history-cell-width) * 0.19), 9px); } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-cell--label .rs-top20__placement-rank{ font-size: clamp(7px, calc(var(--rs-top20-history-cell-width) * 0.23), 10px); letter-spacing: -.01em; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-rank{ display: grid; align-self: stretch; place-items: center; height: 100%; min-height: var(--rs-top20-history-row-height); padding: 0; font-size: clamp(10px, calc(var(--rs-top20-history-cell-width) * 0.34), 15px); line-height: 1; letter-spacing: -.03em; color: #1f3557; font-weight: 700; transform: none; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__history-empty{ margin: 0; font-size: 12px; font-weight: 700; line-height: 1.45; color: #63758f; } [data-rs-top20][data-rs-top20-history-mode="master"].is-history-open .rs-top20__list{ display: none; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-history{ display: block; margin-top: 0; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-history[hidden]{ display: none !important; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-history-list{ display: grid; gap: 8px; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-row{ --rs-top20-history-cell-width: 28px; --rs-top20-history-row-height: 17px; --rs-top20-card-radius: 24px; --rs-top20-badge-cut-radius: 12px; position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0; align-items: stretch; min-height: 92px; padding: 0; border-radius: var(--rs-top20-card-radius); background: rgba(255, 255, 255, .86); border: 0; box-shadow: 0 -6px 16px rgba(19, 36, 66, .08), 0 14px 34px rgba(19, 36, 66, .12), 0 3px 10px rgba(19, 36, 66, .06); overflow: hidden; backdrop-filter: blur(6px); } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-main{ min-width: 0; display: contents; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-art{ grid-column: 1; grid-row: 1 / span 2; width: 104px; min-width: 104px; height: 100%; min-height: 100%; overflow: hidden; border-radius: var(--rs-top20-card-radius) 0 0 var(--rs-top20-card-radius); background: #eef3f8; box-shadow: 0 10px 24px rgba(19, 36, 66, .14), 0 2px 8px rgba(19, 36, 66, .08); } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-art img{ display: block; width: 100%; height: 100%; object-fit: cover; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-art.is-empty{ position: relative; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-art.is-empty::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.52), transparent 56%), linear-gradient(135deg, rgba(47, 100, 173, .16), rgba(13, 94, 167, .04)); } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-copy{ grid-column: 2; grid-row: 1; position: relative; min-width: 0; display: flex; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: baseline; align-content: baseline; padding: 4px 5px 0 5px; grid-auto-flow: row; flex-direction: row; justify-content: flex-start; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-rank{ align-self: baseline; margin: 0; display: inline-flex; align-items: baseline; justify-content: flex-start; width: auto; min-width: 0; height: auto; min-height: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 12px; font-weight: 800; line-height: 1.1; letter-spacing: 0; color: #17345a; font-variant-numeric: tabular-nums; flex: 0 0 auto; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-rank::after{ content: "."; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-text{ min-width: 0; display: flex; align-items: baseline; gap: .24em; overflow: hidden; white-space: nowrap; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-song, [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-artist{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-song{ margin: 0; flex: 0 1 auto; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-artist{ margin: 0; flex: 0 1 auto; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-artist::before{ content: "- "; color: #63758f; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__badge-wrap--master{ position: absolute; top: 0; left: 0; right: auto; border-radius: var(--rs-top20-card-radius) 0 var(--rs-top20-badge-cut-radius) 0; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__badge-wrap--master .rs-top20__badge{ border-radius: var(--rs-top20-card-radius) 0 var(--rs-top20-badge-cut-radius) 0; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-results{ grid-column: 2; grid-row: 2; min-width: 0; display: grid; align-items: stretch; width: 100%; max-width: 100%; padding: 1px 5px 5px; background: transparent; border-left: 0; border-radius: 0; box-shadow: none; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-results .rs-top20__placement-table{ height: 100%; border: 0; overflow: visible; background: transparent; box-shadow: none; padding-right: 10px; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-results .rs-top20__placement-history{ padding: 0; border: 0; background: transparent; box-shadow: none; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-results .rs-top20__placement-cell--label{ min-width: max(64px, calc(var(--rs-top20-history-cell-width) * 2)); } .rs-top20__badge-wrap{ position: absolute; top: 0; left: 0; z-index: 3; margin: 0; pointer-events: none; display: inline-flex; align-items: stretch; overflow: hidden; background: #0D5EA7; border-radius: var(--rs-top20-card-radius) 0 var(--rs-top20-badge-cut-radius) 0; } .rs-top20__badge{ display: inline-flex; align-items: center; justify-content: center; min-height: 20px; padding: 0 7px; border-radius: var(--rs-top20-card-radius) 0 var(--rs-top20-badge-cut-radius) 0; background: #0D5EA7 !important; border: 0; color: #ffffff !important; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1; box-shadow: 0 8px 18px rgba(13, 94, 167, .24); } .entry-content .rs-top20__song, .entry-content .rs-top20__artist, .entry-content .rs-top20__rank{ margin-bottom: 0; } .rs-top20__actions{ display: flex; flex-direction: row; align-items: center; justify-content: center; align-self: stretch; flex: 0 0 auto; gap: 8px; padding: 0 14px 0 0; background: transparent; border-left: 0; position: relative; overflow: visible; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__actions{ align-self: center; align-items: center; justify-content: center; padding-top: 0; } .rs-top20__vote-btn{ appearance: none; width: 34px; height: 34px; border: 0; padding: 0; border-radius: 999px; background: rgba(232, 238, 246, .95); color: #13203c; cursor: pointer; box-shadow: 0 8px 18px rgba(19, 36, 66, .12), inset 0 1px 0 rgba(255,255,255,.45); transition: transform .16s ease, background .16s ease, box-shadow .16s ease, opacity .14s ease, color .16s ease; position: relative; z-index: 1; backdrop-filter: none; } .rs-top20__vote-btn[data-rs-tooltip]{ z-index: 30; } .rs-top20__vote-btn[data-rs-vote-blocked="cooldown"]{ cursor: help; } .rs-top20__vote-btn:hover{ transform: scale(1.04); box-shadow: inherit; } .rs-top20__vote-btn:active{ transform: scale(1.04); } .rs-top20__vote-btn:disabled{ cursor: default; opacity: .72; transform: none; box-shadow: none; } .rs-top20__vote-btn.is-busy{ opacity: .86; } .rs-top20__vote-btn[data-rs-tooltip]::after{ content: attr(data-rs-tooltip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px); min-width: 180px; max-width: min(240px, 42vw); padding: 8px 10px; border-radius: 10px; background: rgba(19, 32, 60, .96); color: #ffffff; font-size: 11px; line-height: 1.3; font-weight: 700; text-align: center; box-shadow: 0 12px 28px rgba(19, 36, 66, .22); opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; z-index: 5; } .rs-top20__vote-btn[data-rs-tooltip]:hover::after, .rs-top20__vote-btn[data-rs-tooltip]:focus-visible::after{ opacity: 1; transform: translate(-50%, 0); } .rs-top20__vote-btn::before{ position: absolute; inset: 0; display: grid; place-items: center; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 15px; line-height: 1; text-shadow: none; } .rs-top20__vote-btn--up::before{ content: "\f164"; color: #ffffff; } .rs-top20__vote-btn--down::before{ content: "\f165"; color: #ffffff; transform: scaleX(-1); } .rs-top20__vote-btn--up{ margin-top: 0; background: #01823F; color: #ffffff; box-shadow: 0 10px 22px rgba(13, 94, 167, .22), inset 0 1px 0 rgba(255,255,255,.22); } .rs-top20__vote-btn--up:hover, .rs-top20__vote-btn--up:active, .rs-top20__vote-btn--up:focus{ background: #01823F; color: #ffffff; } .rs-top20__vote-btn--down{ margin-bottom: 0; background: #dc2626; color: #ffffff; box-shadow: 0 10px 22px rgba(163, 32, 32, .16), inset 0 1px 0 rgba(255,255,255,.22); } .rs-top20__vote-btn--down:hover, .rs-top20__vote-btn--down:active, .rs-top20__vote-btn--down:focus{ background: #dc2626; color: #ffffff; } .rs-top20__vote-btn--up.is-active{ background: #0D5EA7; color: #ffffff; box-shadow: 0 10px 22px rgba(13, 94, 167, .22), inset 0 1px 0 rgba(255,255,255,.22); } .rs-top20__vote-btn--up.is-active::before{ color: #ffffff; } .rs-top20__vote-btn--down.is-active{ background: #dc2626; color: #ffffff; box-shadow: 0 10px 22px rgba(163, 32, 32, .16), inset 0 1px 0 rgba(255,255,255,.22); } .rs-top20__vote-btn--down.is-active::before{ color: #ffffff; } .rs-top20__vote-btn[data-rs-vote-blocked="cooldown"], .rs-top20__vote-btn[data-rs-vote-blocked="cooldown"].is-active, .rs-top20__vote-btn:disabled, .rs-top20__vote-btn:disabled.is-active{ background: rgba(232, 238, 246, .95); color: #13203c; box-shadow: none; } .rs-top20__vote-btn[data-rs-vote-blocked="cooldown"]:hover, .rs-top20__vote-btn[data-rs-vote-blocked="cooldown"]:active, .rs-top20__vote-btn[data-rs-vote-blocked="cooldown"]:focus, .rs-top20__vote-btn[data-rs-vote-blocked="cooldown"].is-active:hover, .rs-top20__vote-btn[data-rs-vote-blocked="cooldown"].is-active:active, .rs-top20__vote-btn[data-rs-vote-blocked="cooldown"].is-active:focus, .rs-top20__vote-btn:disabled:hover, .rs-top20__vote-btn:disabled:active, .rs-top20__vote-btn:disabled:focus, .rs-top20__vote-btn:disabled.is-active:hover, .rs-top20__vote-btn:disabled.is-active:active, .rs-top20__vote-btn:disabled.is-active:focus{ background: rgba(232, 238, 246, .95); color: #13203c; box-shadow: none; } .rs-top20__vote-btn[data-rs-vote-blocked="cooldown"]::before, .rs-top20__vote-btn[data-rs-vote-blocked="cooldown"].is-active::before, .rs-top20__vote-btn:disabled::before, .rs-top20__vote-btn:disabled.is-active::before{ color: #607392; } .rs-top20--snapshot .rs-top20__item{ grid-template-columns: 104px minmax(0, 1fr); } .rs-top20__header-copy{ min-width: 0; display: grid; gap: 8px; } .rs-top20__header-meta{ display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; line-height: 1.4; color: #63758f; } .rs-top20__meta-stack{ margin-top: 6px; display: grid; gap: 3px; } .rs-top20__history, .rs-top20__results{ margin: 0; font-size: 12px; line-height: 1.35; } .rs-top20__history{ color: #63758f; } .rs-top20__placement-table{ display: block; width: 100%; } .rs-top20__placement-scroll{ display: block; width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .rs-top20__placement-labels{ display: none; } .rs-top20__placement-label{ display: none; } .rs-top20__placement-label + .rs-top20__placement-label{ border-top: 0; } .rs-top20__placement-history{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16px, 1fr); gap: 1px; align-items: stretch; width: max(100%, max-content); min-width: 100%; padding: 2px; border: 1px solid rgba(173, 187, 208, .58); border-radius: 0; background: linear-gradient(180deg, rgba(249, 251, 254, .94) 0%, rgba(236, 242, 249, .88) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 10px 22px rgba(19, 36, 66, .08); scrollbar-width: thin; scrollbar-color: rgba(103, 128, 163, .45) transparent; } .rs-top20__placement-cell{ position: relative; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); align-content: stretch; align-items: stretch; gap: 0; justify-items: stretch; width: 100%; min-width: 20px; min-height: 40px; overflow: hidden; border-radius: 0; background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(242, 246, 251, .82) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.88); } .rs-top20__placement-cell--label{ min-width: 62px; position: sticky; left: 0; z-index: 3; background: linear-gradient(180deg, rgba(249, 251, 254, .99) 0%, rgba(236, 242, 249, .98) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 8px 0 16px rgba(19, 36, 66, .08); } .rs-top20__placement-week{ width: 100%; display: grid; align-self: stretch; place-items: center; height: 100%; padding: 3px 1px 2px; font-size: 8px; font-weight: 600; line-height: 1; text-align: center; color: #7a8aa3; background: rgba(215, 225, 238, .38); border-bottom: 1px solid rgba(183, 197, 217, .42); } .rs-top20__placement-rank{ width: 100%; display: grid; align-self: stretch; place-items: center; height: 100%; padding: 0; font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: -.02em; text-align: center; color: #13203c; transform: none; } .rs-top20__placement-cell.is-current{ background: linear-gradient(180deg, rgba(233, 242, 253, .98) 0%, rgba(220, 234, 250, .92) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.94), inset 0 0 0 1px rgba(13, 94, 167, .08); } .rs-top20__placement-cell.is-current .rs-top20__placement-week{ color: #2f64ad; background: rgba(13, 94, 167, .12); border-bottom-color: rgba(13, 94, 167, .16); } .rs-top20__placement-cell.is-current .rs-top20__placement-rank{ color: #0a8f4f; } .rs-top20__placement-cell.is-first{ background: linear-gradient(180deg, rgba(255, 246, 206, .99) 0%, rgba(255, 233, 148, .94) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.94), inset 0 0 0 1px rgba(224, 177, 26, .24), inset 0 0 0 2px rgba(255, 222, 111, .34); } .rs-top20__placement-cell.is-first .rs-top20__placement-week{ color: #8b5b00; background: rgba(245, 201, 59, .18); border-bottom-color: rgba(214, 160, 17, .22); } .rs-top20__placement-cell.is-first .rs-top20__placement-rank{ position: relative; display: grid; align-self: stretch; place-items: center; height: 100%; min-height: 20px; padding: 0; line-height: 1; color: #13203c; text-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f0b90b' d='M12 1.9l2.89 5.86 6.47.94-4.68 4.57 1.1 6.45L12 16.68 6.22 19.72l1.1-6.45-4.68-4.57 6.47-.94z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 28px 28px; } .rs-top20__placement-cell.is-current.is-first{ background: linear-gradient(180deg, rgba(255, 246, 204, .99) 0%, rgba(255, 229, 133, .94) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(13, 94, 167, .1), inset 0 0 0 2px rgba(224, 177, 26, .18); } .rs-top20__placement-cell.is-current.is-first .rs-top20__placement-week, .rs-top20__placement-cell.is-current.is-first .rs-top20__placement-rank{ color: #13203c; } .rs-top20__results{ color: #13203c; font-weight: 700; } @media (max-width: 820px){ .rs-top20{ padding: 6px 0 0; border-radius: 0; } .rs-top20__header{ margin-bottom: 12px; } .rs-top20__controls{ margin-bottom: 12px; } .rs-top20__history-master-toggle{ min-height: 36px; padding: 8px 14px; font-size: 11px; } .rs-top20__status{ text-align: left; } .rs-top20__status-wrap{ align-items: stretch; } .rs-top20__timer-kicker{ min-width: 316px; } .rs-top20__timer{ gap: 12px; } .rs-top20__header-meta{ gap: 6px 10px; } .rs-top20__timer-unit{ min-width: 70px; } .rs-top20__timer-circle{ width: 70px; height: 70px; border-radius: 50%; } .rs-top20__timer-value{ font-size: 22px; } .rs-top20__item{ --rs-top20-card-radius: 20px; --rs-top20-badge-cut-radius: 10px; grid-template-columns: 88px minmax(0, 1fr) auto; min-height: 82px; border-radius: var(--rs-top20-card-radius); } .rs-top20--snapshot .rs-top20__item{ grid-template-columns: 88px minmax(0, 1fr); } .rs-top20__art{ width: 88px; min-width: 88px; flex: 0 0 88px; min-height: 100%; border-radius: var(--rs-top20-card-radius) 0 0 var(--rs-top20-card-radius); margin: 0; } .rs-top20__actions{ grid-column: auto; align-items: center; justify-content: center; gap: 6px; padding: 0 12px 0 0; } .rs-top20__body{ padding: 10px 10px 10px 12px; } .rs-top20__vote-btn{ width: 32px; height: 32px; } .rs-top20__vote-btn::before{ font-size: 13px; } .rs-top20__vote-btn[data-rs-tooltip]::after{ max-width: min(210px, 56vw); font-size: 10px; } .rs-top20__song{ font-size: 15px; } .rs-top20__artist{ font-size: 12px; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__rank{ width: clamp(34px, 4vw, 42px); min-width: clamp(34px, 4vw, 42px); height: clamp(34px, 4vw, 42px); min-height: clamp(34px, 4vw, 42px); font-size: clamp(16px, 2.4vw, 19px); } [data-rs-top20][data-rs-top20-round-id] .rs-top20__body{ column-gap: 10px; row-gap: 2px; padding-top: 8px; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__history-view{ --rs-top20-history-cell-width: 22px; --rs-top20-history-row-height: 15px; padding: 4px 6px 4px 4px; row-gap: 4px; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__history-heading{ font-size: 12px; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__history-content{ display: block; width: 100%; max-width: 100%; overflow: hidden; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-table{ width: 100%; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__actions{ align-items: center; padding-top: 0; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-cell--label{ min-width: max(48px, calc(var(--rs-top20-history-cell-width) * 2)); } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-cell--label .rs-top20__placement-week, [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-cell--label .rs-top20__placement-rank{ font-size: 6px; font-weight: 600; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-history{ grid-auto-columns: var(--rs-top20-history-cell-width); gap: 1px; padding: 1px; width: max-content; min-width: max-content; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-week{ padding: 0 1px; font-size: clamp(6px, calc(var(--rs-top20-history-cell-width) * 0.19), 8px); font-weight: 500; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-rank{ place-items: center; padding: 0; font-size: clamp(8px, calc(var(--rs-top20-history-cell-width) * 0.31), 12px); font-weight: 600; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-row{ --rs-top20-history-cell-width: 22px; --rs-top20-history-row-height: 15px; --rs-top20-card-radius: 20px; --rs-top20-badge-cut-radius: 10px; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0; min-height: 82px; border-radius: var(--rs-top20-card-radius); } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-main{ display: contents; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-art{ width: 88px; min-width: 88px; border-radius: var(--rs-top20-card-radius) 0 0 var(--rs-top20-card-radius); } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-copy{ column-gap: 6px; padding: 4px 5px 0 5px; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-rank{ width: auto; min-width: 0; height: auto; min-height: 0; border-radius: 0; background: transparent; box-shadow: none; line-height: 1.1; font-size: 11px; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-song{ font-size: 15px; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-artist{ font-size: 12px; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-results{ padding: 1px 5px 5px; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-results .rs-top20__placement-cell--label{ min-width: max(48px, calc(var(--rs-top20-history-cell-width) * 2)); } .rs-top20__badge{ font-size: 10px; border-radius: var(--rs-top20-card-radius) 0 var(--rs-top20-badge-cut-radius) 0; } } @media (max-width: 520px){ .rs-top20{ padding: 4px 0 0; margin-top: 18px; } .rs-top20__controls{ margin-bottom: 12px; } .rs-top20__history-master-toggle{ min-height: 34px; padding: 7px 12px; font-size: 10px; } .rs-top20__timer{ gap: 10px; } .rs-top20__timer-label{ font-size: 9px; } .rs-top20__timer-kicker{ min-width: 262px; font-size: 9px; } .rs-top20__timer-unit{ min-width: 58px; gap: 5px; } .rs-top20__timer-circle{ width: 58px; height: 58px; border-radius: 50%; } .rs-top20__timer-value{ font-size: 17px; letter-spacing: -.03em; } .rs-top20__item{ --rs-top20-card-radius: 18px; --rs-top20-badge-cut-radius: 9px; grid-template-columns: 78px minmax(0, 1fr) auto; min-height: 72px; border-radius: var(--rs-top20-card-radius); } .rs-top20__art{ width: 78px; min-width: 78px; flex: 0 0 78px; min-height: 100%; border-radius: var(--rs-top20-card-radius) 0 0 var(--rs-top20-card-radius); margin: 0; } .rs-top20__body{ padding: 8px 8px 8px 10px; } .rs-top20__actions{ gap: 5px; padding: 0 10px 0 0; } .rs-top20__song{ font-size: 13px; } .rs-top20__artist{ font-size: 10px; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__rank{ width: clamp(30px, 8vw, 36px); min-width: clamp(30px, 8vw, 36px); height: clamp(30px, 8vw, 36px); min-height: clamp(30px, 8vw, 36px); font-size: clamp(14px, 3.8vw, 17px); } [data-rs-top20][data-rs-top20-round-id] .rs-top20__body{ column-gap: 8px; row-gap: 1px; padding-top: 7px; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__history-view{ --rs-top20-history-cell-width: 17px; --rs-top20-history-row-height: 12px; padding: 3px 5px 3px 3px; row-gap: 3px; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__history-heading{ font-size: 10px; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__history-content{ display: block; width: 100%; max-width: 100%; overflow: hidden; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-table{ width: 100%; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__actions{ align-items: center; padding-top: 0; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-cell--label{ min-width: max(42px, calc(var(--rs-top20-history-cell-width) * 3)); } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-cell--label .rs-top20__placement-week, [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-cell--label .rs-top20__placement-rank{ font-size: 5px; font-weight: 600; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-history{ grid-auto-columns: var(--rs-top20-history-cell-width); gap: 1px; padding: 1px; width: max-content; min-width: max-content; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-history{ margin-top: 0; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-row{ --rs-top20-history-cell-width: 17px; --rs-top20-history-row-height: 12px; --rs-top20-card-radius: 18px; --rs-top20-badge-cut-radius: 9px; grid-template-columns: 78px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0; min-height: 72px; border-radius: var(--rs-top20-card-radius); } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-main{ display: contents; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-art{ width: 78px; min-width: 78px; border-radius: var(--rs-top20-card-radius) 0 0 var(--rs-top20-card-radius); } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-copy{ column-gap: 6px; padding: 1px 4px 0 4px; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-rank{ width: auto; min-width: 0; height: auto; min-height: 0; border-radius: 0; background: transparent; box-shadow: none; line-height: 1.1; font-size: 10px; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-song{ font-size: 13px; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-artist{ font-size: 10px; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-results{ padding: 0 4px 4px; } [data-rs-top20][data-rs-top20-history-mode="master"] .rs-top20__master-results .rs-top20__placement-cell--label{ min-width: max(42px, calc(var(--rs-top20-history-cell-width) * 3)); } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-week{ padding: 0 1px; font-size: clamp(5px, calc(var(--rs-top20-history-cell-width) * 0.18), 7px); font-weight: 500; } [data-rs-top20][data-rs-top20-round-id] .rs-top20__placement-rank{ place-items: center; padding: 0; font-size: clamp(7px, calc(var(--rs-top20-history-cell-width) * 0.28), 10px); font-weight: 600; } .rs-top20__badge{ font-size: 9px; border-radius: var(--rs-top20-card-radius) 0 var(--rs-top20-badge-cut-radius) 0; } .rs-top20__vote-btn{ width: 28px; height: 28px; } .rs-top20__vote-btn::before{ font-size: 12px; } .rs-top20__vote-btn[data-rs-tooltip]::after{ min-width: 150px; max-width: min(180px, 60vw); bottom: calc(100% + 8px); padding: 7px 9px; font-size: 10px; } }