/* Theme Name: Marquee Festive Theme URI: https://alateka.com/ Author: Alateka Corporation Author URI: https://alateka.com/ Description: The festive Christmas look for the Marquee light show plugin: garlands, bows, a night-sky scene and glowing show cards for your status, Now Playing, weather, Kids’ Corner and more. Needs the free Marquee plugin (it holds all the show features and settings). Version: 2.18.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: ridgeroad Tags: one-column, custom-logo, custom-menu, featured-images, holiday, dark */ /* ---------- Bundled fonts (SIL Open Font License, see assets/fonts) ---------- */ @font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/cinzel-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/marcellus-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Playball"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/playball-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Great Vibes"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/great-vibes-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/nunito-sans-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/nunito-sans-latin-600-normal.woff2) format("woff2"); } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/nunito-sans-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/nunito-sans-latin-800-normal.woff2) format("woff2"); } /* ---------- Tokens ---------- */ :root { --rr-scene: url(assets/img/scene-v275.webp); --gold: #f7c95a; --gold-2: #d79a2a; --gold-line: rgba(247, 201, 90, .75); --cream: #fff4dc; --text: #f4efe4; --muted: #cfc6b4; --red-1: #7a1016; --red-2: #3b0609; --green-1: #135a30; --green-2: #062512; --blue-1: #12295a; --blue-2: #071531; --night: rgba(9, 18, 42, .88); --radius: 16px; --wrap: 1720px; --side: clamp(16px, 8.2vw, 220px); --f-head: "Marcellus", "Cinzel", Georgia, "Times New Roman", serif; --f-caps: "Cinzel", Georgia, serif; --f-script: "Playball", "Great Vibes", "Brush Script MT", cursive; --f-body: "Nunito Sans", "Segoe UI", Roboto, Arial, sans-serif; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 20px; } body.rr { margin: 0; min-height: 100vh; color: var(--text); background: #08122b; font: 16px/1.5 var(--f-body); overflow-x: hidden; position: relative; } body.rr::before { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--rr-bg, var(--rr-scene)) center top / cover no-repeat, #08122b; } body.rr::after { /* gentle vignette to keep text readable */ content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 35%, transparent 30%, rgba(3, 7, 20, .55) 100%); pointer-events: none; } img { max-width: 100%; height: auto; } [hidden] { display: none !important; } a { color: var(--gold); } a:hover { color: #ffe39a; } h1, h2, h3 { font-family: var(--f-head); font-weight: 400; line-height: 1.15; margin: 0; -webkit-text-stroke: .045em currentColor; paint-order: stroke fill; letter-spacing: .01em; } p { margin: 0 0 .8em; } p:last-child { margin-bottom: 0; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important; } .skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; z-index: 1000; top: 8px; left: 8px; padding: 10px 16px; background: #fff; color: #000; } .rr-icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; } /* ---------- Frame: garlands, bows, snow ---------- */ .rr-frame { position: absolute; inset: 0 0 auto 0; height: 100%; pointer-events: none; z-index: 5; } .rr-garland { position: absolute; background-repeat: repeat-x; filter: drop-shadow(0 0 10px rgba(255, 190, 80, .35)); } .rr-garland--top { top: -26px; left: 0; right: 0; height: 110px; background-image: url(assets/img/garland-v137.webp); background-size: auto 110px; } /* Side garland frame (from the mockup), fixed to the window edges */ .rr-side { position: fixed; top: 0; bottom: 0; z-index: 1; width: calc(140 / 1672 * 100vw); min-width: 70px; pointer-events: none; background: url(assets/img/frame-left-v137.webp) left top / 100% 100% no-repeat; filter: drop-shadow(0 0 12px rgba(255, 190, 80, .25)); } .rr-side--left { left: 0; } .rr-side--right { right: 0; background-image: url(assets/img/frame-right-v137.webp); transform: scaleX(-1); } .rr-bow { position: absolute; top: -10px; width: clamp(96px, 13vw, 190px); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); } .rr-bow--left { left: clamp(4px, 3vw, 54px); } .rr-bow--right { right: clamp(4px, 3vw, 54px); } .rr-snowfall { position: fixed; inset: 0; opacity: .7; background-image: radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(2px 2px at 140px 90px, #fff 50%, transparent 51%), radial-gradient(3px 3px at 80px 160px, rgba(255,255,255,.9) 50%, transparent 51%), radial-gradient(2px 2px at 210px 220px, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 260px 40px, #fff 50%, transparent 51%); background-size: 300px 260px; animation: rr-snow 22s linear infinite; } @keyframes rr-snow { to { background-position: 60px 520px; } } /* ---------- Header ---------- */ .rr-header { position: relative; z-index: 6; padding: 14px var(--side) 0; text-align: center; } .rr-nav { display: flex; justify-content: center; } .rr-menu { list-style: none; margin: 0; padding: 4px 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; background: linear-gradient(180deg, #7f1018, #4a070c); border: 2px solid var(--gold-line); border-top: 0; border-radius: 0 0 18px 18px; box-shadow: 0 6px 22px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 220, 140, .3); margin-top: -14px; padding-top: 16px; } .rr-menu a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 10px; color: var(--cream); text-decoration: none; font-weight: 700; font-size: 16px; letter-spacing: .01em; transition: background .2s, color .2s; } .rr-menu a .rr-icon { color: var(--gold); width: 24px; height: 24px; } .rr-menu a .rr-icon--heart { fill: var(--gold); } .rr-menu a:hover, .rr-menu a.is-active, .rr-menu .current-menu-item > a { background: rgba(255, 210, 120, .14); color: #fff; } .rr-hero { padding: 18px 0 8px; } .rr-logo-h { margin: 0; font: inherit; line-height: 0; } .rr-logo { display: inline-block; line-height: 0; } /* inner pages: the logo isn't inside the page heading there, so give it the same spacing as on the home page (the line under it then sits the same on every page) */ .rr-hero > .rr-logo { display: table; margin-left: auto; margin-right: auto; } .rr-logo img { width: min(400px, 80vw); filter: drop-shadow(0 0 22px rgba(255, 170, 60, .3)) drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); } .rr-subtitle { margin: -6px 0 0; font-family: var(--f-body); font-weight: 800; font-size: clamp(12px, 1.2vw, 15px); letter-spacing: .06em; text-transform: uppercase; color: #fbe9bf; text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, .9); } .rr-tagline { margin: 0; font-family: var(--f-script); font-weight: 400; font-size: clamp(38px, 6vw, 70px); line-height: 1.15; background: linear-gradient(180deg, #fff6c8 15%, #ffd45c 50%, #e3a52c 85%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 1px #3a2200) drop-shadow(0 2px 2px rgba(0, 0, 0, .95)) drop-shadow(0 0 10px rgba(0, 0, 0, .7)); } .rr-intro { max-width: 760px; margin: 0 auto; font-size: clamp(15px, 1.4vw, 18px); font-weight: 600; color: #fff; text-shadow: 0 1px 6px #000, 0 0 2px #000; } @media (min-width: 861px) { .rr-header { background: none; padding-bottom: 26px; } .rr-header::before { /* forest + garland art covers the whole header; only its bottom edge fades */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: none; filter: brightness(1.18) saturate(1.08); -webkit-mask-image: linear-gradient(to bottom, #000 93%, transparent 100%); mask-image: linear-gradient(to bottom, #000 93%, transparent 100%); } .rr-frame .rr-garland--top, .rr-frame .rr-bow { display: none; } .rr-menu { margin-top: -14px; } .rr-logo img { width: clamp(250px, 21vw, 420px); } .rr-hero { padding-top: calc(6 / 1672 * 100vw); } .rr-tagline { font-size: clamp(36px, 3.4vw, 64px); margin: 0; } .rr-intro { max-width: none; font-size: clamp(14px, 1.15vw, 19px); } .rr-subtitle { margin: 0 auto; display: table; } .rr-hero__text { position: relative; display: block; width: fit-content; margin: 0 auto; padding: 4px 0 0; } .rr-intro { text-shadow: 0 1px 3px #000, 0 0 10px #000, 0 0 18px rgba(0, 0, 0, .8); } .rr-subtitle { text-shadow: 0 1px 3px #000, 0 0 10px #000, 0 0 16px rgba(0, 0, 0, .9); } .rr-header { padding-bottom: 0; } } /* Desktop: ONE fixed picture (garland frame + forest) fills the window. The menu, logo and tagline sit on it and never move; only the boxes scroll, inside the area below the tagline. Turned on by main.js (it measures the header height). */ body.rr-scene::before { background: var(--rr-bg, var(--rr-scene)) center top / cover no-repeat, #0e1a3e; } /* Windows taller than the picture's shape: stretch slightly instead of cutting off the side garlands */ @media (max-aspect-ratio: 8/5) { body.rr-scene::before { background-size: 100% 100%; } } body.rr-scene::after, body.rr-scene .rr-side, body.rr-scene .rr-frame .rr-garland--top, body.rr-scene .rr-frame .rr-bow { display: none; } body.rr-scene .rr-header::before { display: none; } body.rr-scene .rr-header { position: fixed; top: 0; left: 0; right: 0; z-index: 6; padding-bottom: 0; } body.rr-scene { overflow: hidden; height: 100vh; } body.rr-scene .rr-scroll { position: fixed; left: 0; right: 0; bottom: 0; top: var(--rr-head-h, 460px); z-index: 4; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(247, 201, 90, .6) transparent; } body.rr-scene .rr-main { padding-top: 22px; } body.rr-scene .rr-scroll::-webkit-scrollbar { width: 8px; } body.rr-scene .rr-scroll::-webkit-scrollbar-thumb { background: rgba(247, 201, 90, .55); border-radius: 8px; } /* ---------- Layout ---------- */ .rr-main { position: relative; z-index: 4; max-width: calc(var(--wrap) + 2 * var(--side)); margin: 0 auto; padding: 22px var(--side) 40px; } .rr-grid { display: grid; gap: 22px; } .rr-grid > * { min-width: 0; } /* a long song name or link can't push a box past the edge of the page */ .rr-grid--main { grid-template-columns: 1fr 1.05fr; margin-top: 30px; } .rr-grid--tips { grid-template-columns: repeat(4, 1fr); } .rr-grid--support { grid-template-columns: 1.1fr 1fr; margin-top: 30px; } .rr-stack > * + * { margin-top: 26px; } /* ---------- Panels ---------- */ .rr-panel { position: relative; border-radius: var(--radius); padding: 26px 24px 22px; border: 2px solid var(--gold-line); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 186, 72, .22), 0 14px 34px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 230, 160, .14), inset 0 0 40px rgba(0, 0, 0, .35); } .rr-panel::before { /* snow cap */ content: ""; position: absolute; left: 10px; right: 10px; top: -11px; height: 20px; pointer-events: none; background: radial-gradient(circle at 16px 13px, #fff 11px, transparent 12px) 0 0 / 46px 20px repeat-x, radial-gradient(circle at 36px 15px, #eef4ff 9px, transparent 10px) 0 0 / 46px 20px repeat-x, linear-gradient(#fff, #fff) 0 12px / 100% 8px no-repeat; border-radius: 12px 12px 6px 6px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); } .rr-panel--red { background: radial-gradient(ellipse at 30% 0%, rgba(255, 90, 70, .18), transparent 60%), linear-gradient(160deg, var(--red-1), var(--red-2)); } .rr-panel--green { background: radial-gradient(ellipse at 50% 0%, rgba(120, 255, 150, .12), transparent 60%), linear-gradient(160deg, var(--green-1), var(--green-2)); } .rr-panel--blue { background: radial-gradient(ellipse at 20% 0%, rgba(120, 170, 255, .16), transparent 60%), linear-gradient(160deg, var(--blue-1), var(--blue-2)); } .rr-panel--night { background: var(--night); backdrop-filter: blur(3px); } .rr-h { display: flex; align-items: center; gap: 12px; font-size: clamp(22px, 2.2vw, 30px); color: var(--cream); text-shadow: 0 2px 4px rgba(0, 0, 0, .6); } .rr-h__tree .rr-icon { width: 30px; height: 30px; color: #3fd16a; fill: #1b8f3e; } .rr-h__heart .rr-icon { width: 34px; height: 34px; color: #ff5a5a; fill: #e0142a; filter: drop-shadow(0 0 8px rgba(255, 40, 60, .7)); } .rr-gold { color: var(--gold); } .rr-muted { color: var(--muted); } /* Garland lights along the top of the main panels, like the mockup */ .rr-show::after, .rr-weather::after, .rr-donate::after, .rr-social::after { content: ""; position: absolute; left: 14px; right: 14px; top: -6px; height: 30px; pointer-events: none; background: url(assets/img/garland-v137.webp) center / auto 30px repeat-x; opacity: .9; } .rr-show, .rr-weather, .rr-donate, .rr-social { padding-top: 32px; } /* ---------- Status banner ---------- */ .rr-banner[hidden] { display: none !important; } .rr-banner { display: flex; align-items: center; gap: 22px; padding: 22px 34px; margin-top: 12px; } .rr-banner::after { /* garland lip along the top */ content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 52px; pointer-events: none; background: url(assets/img/garland-v137.webp) center / auto 52px repeat-x; opacity: .95; } .rr-banner__icon .rr-icon { width: 64px; height: 64px; color: var(--gold); stroke-width: 1.4; filter: drop-shadow(0 0 8px rgba(255, 200, 90, .5)); } .rr-banner__flake .rr-icon { width: 38px; height: 38px; color: #f1e7c8; opacity: .85; stroke-width: 1.2; } .rr-banner__flake--r { margin-left: auto; } .rr-banner__copy { flex: 1; } .rr-banner__title { font-size: clamp(22px, 2.4vw, 30px); color: var(--cream); } .rr-banner__text { margin-top: 4px; font-size: 16px; color: #e8f1e6; } .rr-banner--canceled { background: radial-gradient(ellipse at 50% 0%, rgba(255, 120, 100, .2), transparent 60%), linear-gradient(160deg, #8d1218, #3a0508); } .rr-banner--canceled .rr-banner__title { color: #fff; } .rr-banner--off { background: linear-gradient(160deg, var(--blue-1), var(--blue-2)); } /* ---------- Tonight's show ---------- */ .rr-show { display: flex; flex-direction: column; gap: 14px; } .rr-show__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .rr-show__row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; } .rr-tile { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 12px; background: linear-gradient(180deg, rgba(20, 0, 2, .55), rgba(40, 3, 6, .4)); border: 1px solid rgba(247, 201, 90, .4); box-shadow: inset 0 0 18px rgba(0, 0, 0, .45); } .rr-tile__icon .rr-icon { width: 46px; height: 46px; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(255, 200, 90, .45)); } .rr-tile__label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f0dcc0; } .rr-radio { display: block; font-size: clamp(30px, 2.7vw, 46px); font-weight: 800; line-height: 1.05; color: var(--gold); white-space: nowrap; text-shadow: 0 0 14px rgba(255, 190, 60, .55), 0 2px 2px rgba(0, 0, 0, .6); } .rr-hours { display: block; font-size: 16px; color: var(--gold); white-space: nowrap; } .rr-hours b { color: var(--cream); font-weight: 600; } .rr-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 10px; font-weight: 800; font-size: 15px; color: #fff; white-space: nowrap; background: linear-gradient(180deg, #1d7a3a, #0e4d22); border: 1px solid rgba(160, 255, 170, .45); box-shadow: 0 0 14px rgba(40, 220, 90, .35); } .rr-badge i { width: 13px; height: 13px; border-radius: 50%; background: #39ff6a; box-shadow: 0 0 10px #39ff6a, 0 0 2px #fff inset; } .rr-badge--running i { animation: rr-pulse 1.6s ease-in-out infinite; } .rr-badge--upcoming { background: linear-gradient(180deg, #8a5a10, #5a3806); border-color: rgba(255, 210, 120, .5); box-shadow: 0 0 14px rgba(255, 180, 40, .3); } .rr-badge--upcoming i { background: #ffc23d; box-shadow: 0 0 10px #ffc23d; } .rr-badge--ended, .rr-badge--offseason { background: linear-gradient(180deg, #2a3656, #18223b); border-color: rgba(180, 200, 255, .35); box-shadow: none; } .rr-badge--ended i, .rr-badge--offseason i { background: #9aa7c7; box-shadow: none; } .rr-badge--canceled { background: linear-gradient(180deg, #b0141e, #6e070d); border-color: rgba(255, 160, 160, .5); box-shadow: 0 0 14px rgba(255, 40, 40, .35); } .rr-badge--canceled i { background: #ff4b4b; box-shadow: 0 0 10px #ff4b4b; } @keyframes rr-pulse { 50% { opacity: .35; transform: scale(.8); } } .rr-np { position: relative; overflow: hidden; min-height: 108px; padding-bottom: 34px; } .rr-np__note .rr-icon { width: 48px; height: 48px; color: #ffcf7a; filter: drop-shadow(0 0 8px rgba(255, 120, 80, .6)); } .rr-np__copy { position: relative; z-index: 1; min-width: 0; } .rr-np__title { display: block; font-size: clamp(18px, 1.8vw, 22px); font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; } .rr-np__next { display: block; font-size: 14px; color: #f0dcc0; } .rr-eq { position: absolute; left: 90px; right: 18px; bottom: 10px; height: 34px; display: flex; align-items: flex-end; gap: 4px; } .rr-eq i { flex: 1; height: 15%; border-radius: 2px 2px 0 0; background: #ffb22c; box-shadow: 0 0 6px currentColor; transition: height .4s; } .rr-eq i:nth-child(4n+1) { background: #ff3d3d; color: #ff3d3d; } .rr-eq i:nth-child(4n+2) { background: #ffb22c; color: #ffb22c; } .rr-eq i:nth-child(4n+3) { background: #34d058; color: #34d058; } .rr-eq i:nth-child(4n) { background: #ffd84a; color: #ffd84a; } .rr-np.is-playing .rr-eq i { animation: rr-eq 1s ease-in-out infinite alternate; } .rr-np.is-playing .rr-eq i:nth-child(3n) { animation-duration: .7s; } .rr-np.is-playing .rr-eq i:nth-child(3n+1) { animation-duration: .9s; animation-delay: -.3s; } .rr-np.is-playing .rr-eq i:nth-child(5n) { animation-duration: 1.2s; animation-delay: -.5s; } .rr-np.is-playing .rr-eq i:nth-child(7n) { animation-duration: .55s; animation-delay: -.2s; } @keyframes rr-eq { 0% { height: 12%; } 50% { height: 70%; } 100% { height: 35%; } } .rr-show__note { margin: 0; font-size: 14px; color: #f0dcc0; text-align: center; } /* ---------- Weather ---------- */ .rr-weather { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; } .rr-weather__city { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: clamp(19px, 1.7vw, 24px); color: #fff; } .rr-weather__city .rr-icon { width: 30px; height: 30px; color: #cfe2ff; stroke-width: 1.3; } .rr-weather__city small { font-family: var(--f-body); font-size: 16px; font-weight: 600; color: #c9d5f0; } .rr-now { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; margin-top: 10px; } .rr-now__temp { line-height: 1; } .rr-temp { font-size: clamp(54px, 5vw, 72px); font-weight: 800; color: #fff; letter-spacing: -.02em; } .rr-now__temp sup { font-size: 28px; font-weight: 700; vertical-align: 1.2em; margin-left: 2px; } .rr-now__label { display: block; margin-top: 6px; font-size: 18px; color: #e4ecff; white-space: nowrap; } .rr-now__icon { width: 96px; height: 96px; filter: drop-shadow(0 0 10px rgba(255, 220, 140, .35)); } .rr-stats { margin: 0; padding-left: 14px; border-left: 1px solid rgba(160, 190, 255, .3); display: grid; grid-template-columns: auto auto; gap: 4px 16px; font-size: 14px; } .rr-stats dt { color: #dbe4fa; } .rr-stats dd { margin: 0; text-align: right; font-weight: 800; color: #fff; white-space: nowrap; } .rr-hourly { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid rgba(150, 180, 255, .3); border-radius: 12px; overflow: hidden; background: rgba(0, 8, 30, .35); } .rr-hourly li { display: flex; flex-direction: column; align-items: center; padding: 10px 4px 10px; gap: 2px; } .rr-hourly li + li { border-left: 1px solid rgba(150, 180, 255, .2); } .rr-hourly__t { font-size: 14px; font-weight: 700; color: #dbe4fa; } .rr-hourly .rr-wx { width: 44px; height: 44px; } .rr-hourly__v { font-size: 20px; font-weight: 800; color: #fff; } .rr-hourly__p { font-size: 12px; color: #9fd0ff; } .rr-weather__side { display: flex; flex-direction: column; gap: 10px; } .rr-radar { position: relative; display: block; flex: 1; min-height: 170px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(150, 180, 255, .45); background: #0a1a3a; line-height: 0; } .rr-radar img { width: 100%; height: 100%; object-fit: cover; } .rr-radar.is-off img { display: none; } .rr-radar--map iframe { width: 100%; height: 100%; min-height: 170px; border: 0; } .rr-radar--map .rr-radar__tag { pointer-events: none; } .rr-radar__tag { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font: 700 12px/1.4 var(--f-body); color: #fff; background: rgba(5, 12, 30, .75); } .rr-radar__tag .rr-icon { width: 14px; height: 14px; color: #6fe38a; } .rr-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: #dbe4fa; text-decoration: none; } .rr-link .rr-icon { width: 14px; height: 14px; } /* ---------- Buttons ---------- */ .rr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font: 800 15px/1.2 var(--f-body); color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .25); transition: transform .15s, filter .15s; } .rr-btn:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.12); } .rr-btn .rr-icon { width: 16px; height: 16px; } .rr-btn--blue { background: linear-gradient(180deg, #1d4ea8, #12347a); border-color: rgba(150, 190, 255, .55); } .rr-btn--red { background: linear-gradient(180deg, #ff2b3d, #c70d1e); box-shadow: 0 0 14px rgba(255, 40, 60, .4); } .rr-btn--fb { background: linear-gradient(180deg, #2f7bf5, #1659d6); } .rr-btn--tt { background: linear-gradient(180deg, #ff4f8b, #e0245e); } .rr-btn--ig { background: linear-gradient(180deg, #f7774a, #d62976 55%, #962fbf); } .rr-btn--yt { background: linear-gradient(180deg, #ff3b3b, #cc0000); } .rr-btn--fb .rr-icon, .rr-btn--tt .rr-icon, .rr-btn--ig .rr-icon, .rr-btn--yt .rr-icon { width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: #fff; color: #1659d6; } .rr-btn--tt .rr-icon { color: #111; } .rr-btn--ig .rr-icon { color: #d62976; } .rr-btn--yt .rr-icon { color: #e00; } /* ---------- Before you visit ---------- */ .rr-visit { margin-top: 40px; } .rr-ribbon { display: flex; align-items: center; justify-content: center; gap: 0; margin: 0 0 22px; text-align: center; } .rr-ribbon::before, .rr-ribbon::after { content: none; } /* no garland beside section titles: it looked odd scrolling over the page picture */ .rr-ribbon span { position: relative; padding: 8px 40px; font-size: clamp(22px, 2.4vw, 30px); color: var(--gold); background: linear-gradient(180deg, #8a1219, #4d070c); border: 2px solid var(--gold-line); border-radius: 8px; box-shadow: 0 0 18px rgba(255, 180, 60, .3), 0 6px 14px rgba(0, 0, 0, .5); text-shadow: 0 0 10px rgba(255, 190, 70, .45), 0 2px 2px #000; } .rr-tip { text-align: center; padding: 26px 20px 22px; } .rr-tip__icon .rr-icon { width: 46px; height: 46px; color: var(--gold); stroke-width: 1.6; filter: drop-shadow(0 0 8px rgba(255, 200, 90, .55)); } .rr-tip__icon--car .rr-icon { color: #ff4a4a; fill: rgba(220, 20, 30, .65); filter: drop-shadow(0 0 8px rgba(255, 60, 60, .6)); } .rr-tip__icon--bulb .rr-icon { color: #ffe066; fill: rgba(255, 220, 90, .55); } .rr-tip__icon--heart .rr-icon { color: #ff5a5a; fill: #e0142a; } .rr-tip h3 { margin: 6px 0 8px; font-size: 21px; color: var(--gold); } .rr-tip p { font-size: 15.5px; color: #eef4ea; } /* ---------- Support ---------- */ .rr-donate { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; } .rr-donate__art, .rr-kids-teaser__art { display: none; } /* pictures for the Christmas Village and North Pole looks */ .rr-donate p { margin: 10px 0 14px; font-size: 15px; color: #f6e2d8; } .rr-qr { position: relative; width: 150px; height: 150px; padding: 8px; background: #fff; border-radius: 12px; box-shadow: 0 0 18px rgba(255, 255, 255, .25); } .rr-qr img, .rr-qr__gen, .rr-qr__gen svg { display: block; width: 100% !important; height: 100% !important; } .rr-qr__badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font: 800 22px/1 var(--f-body); color: #fff; background: #00c244; border: 3px solid #fff; } .rr-social { display: flex; flex-direction: column; justify-content: center; gap: 12px; } .rr-social__row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .rr-social__row p { flex: 1 1 220px; margin: 0; font-size: 15px; color: #e3e9f8; } .rr-social__btns { display: flex; gap: 12px; flex-wrap: wrap; } .rr-social__btns .rr-btn { padding: 12px 20px; font-size: 16px; } /* ---------- Content pages ---------- */ .rr-content { max-width: 920px; margin: 26px auto 0; padding: 34px clamp(20px, 4vw, 44px); } .rr-content__title { font-size: clamp(26px, 3vw, 38px); color: var(--gold); margin-bottom: 14px; } .rr-content__title a { color: inherit; text-decoration: none; } .rr-content__img { margin: 0 0 18px; } .rr-content__img img, .rr-card__img img { border-radius: 10px; } .rr-meta { color: var(--muted); font-size: 14px; } .entry-content { font-size: 17px; line-height: 1.7; } .entry-content h2, .entry-content h3 { color: var(--gold); margin: 1.2em 0 .5em; } .entry-content blockquote { margin: 1em 0; padding: .4em 1em; border-left: 3px solid var(--gold); background: rgba(255, 255, 255, .05); } .entry-content input, .entry-content textarea, .comment-form input:not([type=submit]):not([type=checkbox]), .comment-form textarea { width: 100%; max-width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(247, 201, 90, .5); background: rgba(0, 0, 0, .35); color: #fff; font: inherit; } .comment-form input[type=submit], .wp-block-button__link { padding: 10px 20px; border: 0; border-radius: 10px; font: 800 15px var(--f-body); color: #fff; cursor: pointer; background: linear-gradient(180deg, #ff2b3d, #c70d1e); text-decoration: none; } .rr-404 { text-align: center; } .rr-pager .nav-links, .rr-postnav .nav-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .rr-pager { max-width: 920px; margin: 20px auto 0; } .alignleft { float: left; margin: 0 1.5em 1em 0; } .alignright { float: right; margin: 0 0 1em 1.5em; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption, .gallery-caption, .wp-element-caption { font-size: 14px; color: var(--muted); } .sticky, .bypostauthor { } /* ---------- Footer ---------- */ .rr-footer { position: relative; z-index: 4; padding: 24px var(--side) 40px; text-align: center; font-size: 14px; color: #d7cfbd; text-shadow: 0 1px 4px #000; } .rr-footer__links { display: flex; justify-content: center; gap: 14px; margin-top: 6px; } .rr-footer__links a { color: var(--cream); } .rr-footer__links .rr-icon { width: 22px; height: 22px; } /* ---------- Guestbook ---------- */ .rr-guestbook { margin-top: 30px; } .rr-guestbook + .rr-grid--support { margin-top: 30px; } .rr-gb-intro { max-width: 720px; margin: -6px auto 18px; text-align: center; text-shadow: 0 1px 3px #000, 0 0 10px #000, 0 0 18px rgba(0, 0, 0, .9); } .rr-gb-intro p { font-weight: 600; } .rr-footer { text-shadow: 0 1px 3px #000, 0 0 10px #000, 0 0 16px rgba(0, 0, 0, .9); font-weight: 600; } .rr-gb-intro p { font-size: 15.5px; color: #f3ead8; } .rr-gb-eyebrow { font: 800 11.5px/1.4 var(--f-body) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--gold) !important; margin-bottom: 4px !important; } .rr-grid--gb { grid-template-columns: 1.35fr 1fr; align-items: start; } .rr-gb-messages, .rr-gb-form { padding-top: 24px; } .rr-gb-messages .rr-h, .rr-gb-form .rr-h { font-size: clamp(19px, 1.4vw, 25px); margin-bottom: 12px; } .rr-h__star .rr-icon { width: 26px; height: 26px; color: var(--gold); fill: rgba(247, 201, 90, .35); } .rr-h__mail .rr-icon { width: 26px; height: 26px; color: var(--gold); } .rr-gb-messages img { display: block; width: 100%; height: auto; min-height: 120px; border-radius: 10px; border: 1px solid rgba(150, 180, 255, .3); background: #0b1a3a; } .rr-gb-messages .rr-link { display: flex; margin-top: 10px; font-size: 14px; color: var(--gold); } .rr-gb-form form { display: flex; flex-direction: column; gap: 8px; } .rr-gb-form label { font: 700 13px var(--f-body); color: #ffe4a5; } .rr-gb-form input:not([type=hidden]), .rr-gb-form textarea { width: 100%; padding: 11px 13px; border-radius: 9px; border: 1px solid rgba(247, 201, 90, .55); background: rgba(0, 20, 12, .55); color: #fff; font: 16px/1.4 var(--f-body); } .rr-gb-form input:focus, .rr-gb-form textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; } .rr-gb-form textarea { resize: vertical; min-height: 110px; } .rr-gb-form button { align-self: center; margin-top: 6px; padding: 12px 28px; font-size: 16px; cursor: pointer; } .rr-gb-honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 860px) { .rr-grid--gb { grid-template-columns: 1fr; } } /* ---------- Compact desktop sizing (matches the mockup's proportions) ---------- */ @media (min-width: 1181px) { .rr-logo img { width: clamp(260px, 20vw, 440px); } .rr-tagline { font-size: clamp(36px, 2.6vw, 56px); } .rr-intro { font-size: clamp(14px, .95vw, 18px); } .rr-menu a { font-size: 15px; padding: 5px 12px; } .rr-menu a .rr-icon { width: 21px; height: 21px; } .rr-main { padding-top: 14px; } .rr-grid { gap: 18px; } .rr-grid--main { margin-top: 22px; } .rr-grid--support { margin-top: 22px; } .rr-visit { margin-top: 28px; } .rr-panel { padding: 18px 18px 16px; } .rr-show, .rr-weather, .rr-donate, .rr-social { padding-top: 24px; } .rr-h { font-size: clamp(20px, 1.55vw, 28px); } .rr-banner { padding: 14px 30px; gap: 20px; } .rr-banner__title { font-size: clamp(20px, 1.65vw, 30px); } .rr-banner__text { font-size: 15px; margin-top: 2px; } .rr-banner__icon .rr-icon { width: 52px; height: 52px; } .rr-banner__flake .rr-icon { width: 32px; height: 32px; } .rr-show { gap: 10px; } .rr-show__row { gap: 10px; } .rr-tile { padding: 10px 14px; gap: 14px; } .rr-tile__icon .rr-icon { width: 40px; height: 40px; } .rr-tile__label { font-size: 11.5px; } .rr-radio { font-size: clamp(28px, 2.2vw, 42px); } .rr-hours { font-size: 15px; } .rr-badge { padding: 6px 14px; font-size: 14px; } .rr-np { min-height: 0; padding-bottom: 32px; } .rr-np__note .rr-icon { width: 40px; height: 40px; } .rr-np__title { font-size: clamp(16px, 1.2vw, 21px); } .rr-eq { height: 26px; bottom: 8px; left: 80px; } .rr-show__note { font-size: 13px; } .rr-weather { gap: 14px; } .rr-weather__city { font-size: clamp(18px, 1.4vw, 24px); } .rr-weather__city .rr-icon { width: 26px; height: 26px; } .rr-now { margin-top: 4px; } .rr-temp { font-size: clamp(46px, 3.6vw, 66px); } .rr-now__temp sup { font-size: 24px; } .rr-now__label { font-size: 16px; margin-top: 2px; } .rr-now__icon { width: 78px; height: 78px; } .rr-stats { font-size: 13.5px; gap: 2px 14px; } .rr-hourly { margin-top: 10px; } .rr-hourly li { padding: 6px 4px; gap: 0; } .rr-hourly__t { font-size: 13px; } .rr-hourly .rr-wx { width: 36px; height: 36px; } .rr-hourly__v { font-size: 18px; } .rr-radar { min-height: 140px; } .rr-btn { padding: 8px 16px; font-size: 14px; } .rr-ribbon { margin-bottom: 16px; } .rr-ribbon span { padding: 5px 34px; font-size: clamp(20px, 1.6vw, 28px); } .rr-tip { padding: 18px 16px 14px; } .rr-tip__icon .rr-icon { width: 38px; height: 38px; } .rr-tip h3 { font-size: clamp(17px, 1.25vw, 22px); margin: 2px 0 4px; } .rr-tip p { font-size: 14.5px; line-height: 1.4; } .rr-donate p, .rr-social__row p { font-size: 14px; margin: 6px 0 10px; } .rr-qr { width: 124px; height: 124px; padding: 6px; } .rr-social__btns .rr-btn { padding: 10px 18px; font-size: 15px; } } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { .rr-grid--main { grid-template-columns: 1fr; } .rr-grid--tips { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .rr-grid--support { grid-template-columns: 1fr; } .rr-weather { grid-template-columns: 1fr; } .rr-radar { min-height: 0; aspect-ratio: 600 / 420; flex: none; } } @media (max-width: 860px) { body.rr::before { background: var(--rr-bg, var(--rr-scene)) center top / cover no-repeat, #0e1a3e; } body.rr::after { display: none; } .rr-frame .rr-garland--top, .rr-frame .rr-bow { display: none; } .rr-header { background: none; } .rr-side { display: none; } } @media (max-width: 640px) { :root { --side: 22px; } .rr-header { padding-top: 14px; } .rr-menu { margin-top: 0; padding: 6px; border-top: 2px solid var(--gold-line); border-radius: 14px; gap: 2px; display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .rr-menu a { font-size: 14px; padding: 6px 8px; justify-content: center; } .rr-menu li:last-child:nth-child(odd) { grid-column: 1 / -1; } .rr-menu a .rr-icon { width: 20px; height: 20px; } .rr-panel { padding: 22px 16px 18px; } .rr-banner { padding: 20px 16px; gap: 12px; } .rr-banner__icon .rr-icon { width: 44px; height: 44px; } .rr-banner__flake { display: none; } .rr-banner__text { font-size: 15px; } .rr-show__row { grid-template-columns: 1fr; } .rr-tile { padding: 14px; gap: 12px; } .rr-tile__icon .rr-icon { width: 38px; height: 38px; } .rr-np { padding-bottom: 50px; } .rr-eq { left: 18px; bottom: 12px; } .rr-now { grid-template-columns: auto auto; } .rr-now__icon { width: 76px; height: 76px; justify-self: end; } .rr-stats { grid-column: 1 / -1; padding: 10px 0 0; border-left: 0; border-top: 1px solid rgba(160, 190, 255, .3); grid-template-columns: auto auto auto auto; gap: 4px 10px; } .rr-hourly .rr-wx { width: 34px; height: 34px; } .rr-hourly__t { font-size: 12px; } .rr-hourly__v { font-size: 17px; } .rr-grid--tips { grid-template-columns: 1fr; } .rr-ribbon span { padding: 6px 18px; } .rr-donate { grid-template-columns: 1fr; justify-items: center; text-align: center; } .rr-donate .rr-h { justify-content: center; } .rr-social__btns { width: 100%; } .rr-social__btns .rr-btn { flex: 1; } } @media (max-width: 400px) { .rr-stats { grid-template-columns: auto auto; } } @media (prefers-reduced-motion: reduce) { .rr-snowfall, .rr-badge i, .rr-np.is-playing .rr-eq i { animation: none !important; } .rr-np.is-playing .rr-eq i:nth-child(odd) { height: 55%; } .rr-np.is-playing .rr-eq i:nth-child(even) { height: 30%; } html { scroll-behavior: auto; } } /* ===================================================================== Mockup colors + glow (measured from the mockup image) ===================================================================== */ :root { --mk-red-bg: #4a0101; --mk-red-tile: #1f0101; --mk-green-bg: #03360e; --mk-green-card: #00220f; --mk-blue-bg: #001636; --mk-blue-tile: #01213d; --mk-gold: #fde866; --mk-cream: #fbf290; --mk-label: #bcdeee; --mk-text: #eae6cb; } /* Panels: deep saturated fills, glowing light-string edges */ .rr-panel--red { background: radial-gradient(ellipse at 50% 0%, rgba(160, 10, 10, .45), transparent 65%), linear-gradient(180deg, #5a0303, #3a0101); border: 2px solid rgba(255, 120, 90, .55); box-shadow: 0 0 0 2px rgba(120, 0, 0, .9), 0 0 16px 3px rgba(255, 40, 30, .55), 0 0 40px rgba(255, 60, 30, .3), inset 0 0 26px rgba(255, 40, 20, .25); } .rr-panel--green { background: radial-gradient(ellipse at 50% 0%, rgba(30, 160, 60, .35), transparent 65%), linear-gradient(180deg, #054a15, #022a0b); border: 2px solid rgba(240, 200, 90, .7); box-shadow: 0 0 0 2px rgba(0, 40, 10, .9), 0 0 16px 3px rgba(60, 255, 100, .35), 0 0 36px rgba(255, 200, 80, .25), inset 0 0 24px rgba(80, 255, 120, .15); } .rr-panel--blue { background: radial-gradient(ellipse at 30% 0%, rgba(40, 110, 220, .35), transparent 65%), linear-gradient(180deg, #02214d, #00122e); border: 2px solid rgba(120, 180, 255, .6); box-shadow: 0 0 0 2px rgba(0, 10, 40, .9), 0 0 16px 3px rgba(70, 150, 255, .45), 0 0 38px rgba(255, 70, 40, .22), inset 0 0 24px rgba(60, 140, 255, .2); } .rr-banner--ok { background: radial-gradient(ellipse at 50% 0%, rgba(40, 180, 70, .35), transparent 65%), linear-gradient(180deg, #06501a, #03300c); } .rr-banner--off { background: radial-gradient(ellipse at 50% 0%, rgba(40, 110, 220, .35), transparent 65%), linear-gradient(180deg, #02214d, #00122e); } .rr-banner__title { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .35), 0 2px 3px #000; } /* Headings: cream-gold with a warm glow */ .rr-h, .rr-tip h3, .rr-weather__city { color: var(--mk-cream); text-shadow: 0 0 10px rgba(255, 210, 80, .55), 0 2px 3px rgba(0, 0, 0, .8); } .rr-weather__city { color: #fff; text-shadow: 0 0 8px rgba(160, 200, 255, .5), 0 2px 3px #000; } .rr-tip h3 { color: #fae46d; } .rr-ribbon span { color: #f9ec9b; background: linear-gradient(180deg, #7a0606, #4a0101); box-shadow: 0 0 0 2px rgba(80, 0, 0, .9), 0 0 16px rgba(255, 50, 30, .55), 0 0 30px rgba(255, 190, 70, .3); } /* Tiles inside panels */ .rr-tile { background: linear-gradient(180deg, #250202, #170101); border: 1px solid rgba(255, 70, 50, .45); box-shadow: 0 0 10px rgba(255, 30, 20, .35), inset 0 0 14px rgba(0, 0, 0, .55); } .rr-tile__label { color: var(--mk-label); letter-spacing: .04em; } .rr-radio { background: linear-gradient(180deg, #fff3a0 10%, #fde866 45%, #ff9a1f 95%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 8px rgba(255, 150, 30, .75)) drop-shadow(0 1px 1px #000); text-shadow: none; } .rr-hours { color: var(--mk-text); } .rr-hours b { color: var(--mk-text); font-weight: 700; } .rr-tile__icon .rr-icon { color: #ffc93c; filter: drop-shadow(0 0 8px rgba(255, 190, 40, .8)); } .rr-np__note .rr-icon { color: #ffd0b0; filter: drop-shadow(0 0 6px #ff3b30) drop-shadow(0 0 14px #ff2020); stroke-width: 2.2; } /* Equalizer: bright green -> yellow -> red bars with glow, like the mockup */ .rr-eq { height: 40px; gap: 5px; } .rr-eq i { border-radius: 1px 1px 0 0; box-shadow: 0 0 8px currentColor; } .rr-eq i:nth-child(n) { background: linear-gradient(0deg, #1ed84a, #66ff6e); color: #2bff5a; } .rr-eq i:nth-child(n+10) { background: linear-gradient(0deg, #ff9d00, #ffe34a); color: #ffc21a; } .rr-eq i:nth-child(n+19) { background: linear-gradient(0deg, #ff6a00, #ffb000); color: #ff8a00; } .rr-eq i:nth-child(3n+2) { background: linear-gradient(0deg, #e50b14, #ff4a3a); color: #ff2a2a; } .rr-np:not(.is-playing) .rr-eq i { height: 22%; opacity: .75; } .rr-np:not(.is-playing) .rr-eq i:nth-child(odd) { height: 34%; } /* Status badge glow */ .rr-badge--running { background: linear-gradient(180deg, #12802f, #06501a); box-shadow: 0 0 14px rgba(40, 255, 100, .6); } .rr-badge--running i { background: #7dff9a; box-shadow: 0 0 10px #3cff6a, 0 0 18px #3cff6a; } /* Weather */ .rr-hourly { background: var(--mk-blue-tile); border-color: rgba(120, 180, 255, .35); } .rr-stats dt { color: #dadee6; } .rr-temp { text-shadow: 0 0 14px rgba(255, 255, 255, .35); } /* Visitor tip cards */ .rr-tip p { color: #cfd3d3; } .rr-tip__icon .rr-icon { filter: drop-shadow(0 0 8px rgba(255, 200, 60, .8)); } .rr-tip__icon--car .rr-icon { color: #ff3b3b; fill: #e0141e; filter: drop-shadow(0 0 8px rgba(255, 40, 40, .8)); } .rr-tip__icon--bulb .rr-icon { color: #ffe066; fill: #ffd84a; filter: drop-shadow(0 0 10px rgba(255, 220, 60, .9)); } .rr-tip__icon--home .rr-icon, .rr-tip__icon--camera .rr-icon { color: #ffc93c; } /* Buttons glow */ .rr-btn--red { background: linear-gradient(180deg, #ff2a3a, #d00c1c); box-shadow: 0 0 14px rgba(255, 30, 50, .65); } .rr-btn--fb { box-shadow: 0 0 12px rgba(40, 120, 255, .6); } .rr-btn--tt { box-shadow: 0 0 12px rgba(255, 40, 120, .6); } .rr-btn--ig { box-shadow: 0 0 12px rgba(214, 41, 118, .6); } .rr-btn--yt { box-shadow: 0 0 12px rgba(230, 0, 0, .6); } .rr-btn--blue { background: linear-gradient(180deg, #0f3f8f, #082a66); box-shadow: 0 0 12px rgba(70, 150, 255, .5); } /* Font for panel headings (bold serif like the mockup) */ @font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/libre-baskerville-latin-700-normal.woff2) format("woff2"); } .rr-h, .rr-tip h3, .rr-banner__title, .rr-ribbon span, .rr-weather__city, .rr-content__title { font-family: "Libre Baskerville", Georgia, serif; font-weight: 700; -webkit-text-stroke: 0; letter-spacing: 0; } /* String of colored bulbs around every panel */ .rr-panel { border-width: 7px; border-color: transparent; background-clip: padding-box; } .rr-panel > .rr-bulbs { display: none; } .rr-panel { --bulbs-h: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2288%22%20height%3D%2212%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%226%22%20r%3D%223.2%22%20fill%3D%22%23ff3b30%22/%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%226%22%20r%3D%225.5%22%20fill%3D%22%23ff3b30%22%20opacity%3D%22.35%22/%3E%3Ccircle%20cx%3D%2233%22%20cy%3D%226%22%20r%3D%223.2%22%20fill%3D%22%23ffd23c%22/%3E%3Ccircle%20cx%3D%2233%22%20cy%3D%226%22%20r%3D%225.5%22%20fill%3D%22%23ffd23c%22%20opacity%3D%22.35%22/%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%226%22%20r%3D%223.2%22%20fill%3D%22%233cff6a%22/%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%226%22%20r%3D%225.5%22%20fill%3D%22%233cff6a%22%20opacity%3D%22.35%22/%3E%3Ccircle%20cx%3D%2277%22%20cy%3D%226%22%20r%3D%223.2%22%20fill%3D%22%234aa8ff%22/%3E%3Ccircle%20cx%3D%2277%22%20cy%3D%226%22%20r%3D%225.5%22%20fill%3D%22%234aa8ff%22%20opacity%3D%22.35%22/%3E%3C/svg%3E"); --bulbs-v: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2288%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2211%22%20r%3D%223.2%22%20fill%3D%22%23ff3b30%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2211%22%20r%3D%225.5%22%20fill%3D%22%23ff3b30%22%20opacity%3D%22.35%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2233%22%20r%3D%223.2%22%20fill%3D%22%23ffd23c%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2233%22%20r%3D%225.5%22%20fill%3D%22%23ffd23c%22%20opacity%3D%22.35%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2255%22%20r%3D%223.2%22%20fill%3D%22%233cff6a%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2255%22%20r%3D%225.5%22%20fill%3D%22%233cff6a%22%20opacity%3D%22.35%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2277%22%20r%3D%223.2%22%20fill%3D%22%234aa8ff%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2277%22%20r%3D%225.5%22%20fill%3D%22%234aa8ff%22%20opacity%3D%22.35%22/%3E%3C/svg%3E"); } .rr-panel--red, .rr-panel--green, .rr-panel--blue { background-origin: padding-box, padding-box, border-box, border-box, border-box, border-box; } .rr-panel--red { background: radial-gradient(ellipse at 50% 0%, rgba(160, 10, 10, .45), transparent 65%) padding-box, linear-gradient(180deg, #5a0303, #3a0101) padding-box, var(--bulbs-h) 0 0 / 88px 7px repeat-x border-box, var(--bulbs-h) 0 100% / 88px 7px repeat-x border-box, var(--bulbs-v) 0 0 / 7px 88px repeat-y border-box, var(--bulbs-v) 100% 0 / 7px 88px repeat-y border-box, linear-gradient(#5c0505, #5c0505) border-box; } .rr-panel--green { background: radial-gradient(ellipse at 50% 0%, rgba(30, 160, 60, .35), transparent 65%) padding-box, linear-gradient(180deg, #054a15, #022a0b) padding-box, var(--bulbs-h) 0 0 / 88px 7px repeat-x border-box, var(--bulbs-h) 0 100% / 88px 7px repeat-x border-box, var(--bulbs-v) 0 0 / 7px 88px repeat-y border-box, var(--bulbs-v) 100% 0 / 7px 88px repeat-y border-box, linear-gradient(#0d3a12, #0d3a12) border-box; } .rr-panel--blue, .rr-panel--night { background: radial-gradient(ellipse at 30% 0%, rgba(40, 110, 220, .35), transparent 65%) padding-box, linear-gradient(180deg, #02214d, #00122e) padding-box, var(--bulbs-h) 0 0 / 88px 7px repeat-x border-box, var(--bulbs-h) 0 100% / 88px 7px repeat-x border-box, var(--bulbs-v) 0 0 / 7px 88px repeat-y border-box, var(--bulbs-v) 100% 0 / 7px 88px repeat-y border-box, linear-gradient(#0a1d44, #0a1d44) border-box; } .rr-banner--ok { background: radial-gradient(ellipse at 50% 0%, rgba(40, 180, 70, .35), transparent 65%) padding-box, linear-gradient(180deg, #06501a, #03300c) padding-box, var(--bulbs-h) 0 0 / 88px 7px repeat-x border-box, var(--bulbs-h) 0 100% / 88px 7px repeat-x border-box, var(--bulbs-v) 0 0 / 7px 88px repeat-y border-box, var(--bulbs-v) 100% 0 / 7px 88px repeat-y border-box, linear-gradient(#0d3a12, #0d3a12) border-box; } .rr-banner--canceled { background: linear-gradient(180deg, #8d1218, #3a0508) padding-box, var(--bulbs-h) 0 0 / 88px 7px repeat-x border-box, var(--bulbs-h) 0 100% / 88px 7px repeat-x border-box, var(--bulbs-v) 0 0 / 7px 88px repeat-y border-box, var(--bulbs-v) 100% 0 / 7px 88px repeat-y border-box, linear-gradient(#5c0505, #5c0505) border-box; } .rr-banner--off { background: radial-gradient(ellipse at 50% 0%, rgba(40, 110, 220, .35), transparent 65%) padding-box, linear-gradient(180deg, #02214d, #00122e) padding-box, var(--bulbs-h) 0 0 / 88px 7px repeat-x border-box, var(--bulbs-h) 0 100% / 88px 7px repeat-x border-box, var(--bulbs-v) 0 0 / 7px 88px repeat-y border-box, var(--bulbs-v) 100% 0 / 7px 88px repeat-y border-box, linear-gradient(#0a1d44, #0a1d44) border-box; } /* Equalizer: taller, wave-shaped like the mockup */ .rr-eq { height: 46px; } .rr-np:not(.is-playing) .rr-eq i { opacity: .9; } .rr-np:not(.is-playing) .rr-eq i:nth-child(1) { height: 10%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(2) { height: 14%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(3) { height: 18%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(4) { height: 22%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(5) { height: 26%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(6) { height: 30%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(7) { height: 34%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(8) { height: 40%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(9) { height: 46%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(10) { height: 52%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(11) { height: 58%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(12) { height: 62%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(13) { height: 58%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(14) { height: 52%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(15) { height: 48%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(16) { height: 54%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(17) { height: 62%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(18) { height: 70%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(19) { height: 78%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(20) { height: 84%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(21) { height: 88%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(22) { height: 84%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(23) { height: 76%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(24) { height: 66%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(25) { height: 54%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(26) { height: 40%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(27) { height: 28%; } .rr-np:not(.is-playing) .rr-eq i:nth-child(28) { height: 18%; } .rr-np { padding-bottom: 58px; } .rr-eq { bottom: 10px; } .rr-panel--night { border: 7px solid transparent; backdrop-filter: none; box-shadow: 0 0 0 2px rgba(0, 10, 40, .9), 0 0 16px 3px rgba(70, 150, 255, .45), 0 0 38px rgba(255, 70, 40, .22), inset 0 0 24px rgba(60, 140, 255, .2); } /* Full-color icons: sizes and glow (no line-icon tinting) */ .rr-cicon { overflow: visible; } .rr-menu a .rr-cicon { width: 24px; height: 24px; filter: drop-shadow(0 0 4px rgba(255, 200, 60, .55)); } .rr-tile__icon .rr-cicon { width: 52px; height: 52px; filter: drop-shadow(0 0 7px rgba(255, 190, 40, .7)); } .rr-np__note .rr-cicon { width: 52px; height: 52px; filter: drop-shadow(0 0 5px rgba(255, 50, 40, .9)) drop-shadow(0 0 12px rgba(255, 30, 20, .7)); } .rr-tip__icon .rr-cicon { width: 46px; height: 46px; filter: drop-shadow(0 0 7px rgba(255, 200, 60, .65)); } .rr-tip__icon--car .rr-cicon, .rr-h__heart .rr-cicon { filter: drop-shadow(0 0 7px rgba(255, 40, 40, .75)); } .rr-tip__icon--bulb .rr-cicon { filter: drop-shadow(0 0 10px rgba(255, 230, 80, .95)); } .rr-h__tree .rr-cicon, .rr-h__heart .rr-cicon, .rr-h__star .rr-cicon, .rr-h__mail .rr-cicon { width: 34px; height: 34px; } .rr-banner__icon .rr-cicon { width: 64px; height: 64px; filter: drop-shadow(0 0 8px rgba(255, 210, 90, .6)); } /* Crisper text: lighter glows on small text */ .rr-hours, .rr-tile__label, .rr-tip p, .rr-stats, .rr-banner__text { text-shadow: 0 1px 1px rgba(0, 0, 0, .7); } .rr-h, .rr-tip h3 { text-shadow: 0 0 6px rgba(255, 210, 80, .45), 0 1px 2px rgba(0, 0, 0, .9); } .rr-hourly .rr-wx { width: 46px; height: 46px; filter: drop-shadow(0 0 6px rgba(255, 210, 80, .55)); } .rr-now__icon { filter: drop-shadow(0 0 10px rgba(255, 210, 80, .55)); } .rr-h .rr-h__tree .rr-cicon, .rr-h .rr-h__heart .rr-cicon, .rr-h .rr-h__star .rr-cicon, .rr-h .rr-h__mail .rr-cicon { width: 38px; height: 38px; } .rr-gb-empty { margin: 6px 0 0; padding: 22px 12px; text-align: center; font-size: 16px; color: #e8eefc; border: 1px dashed rgba(150, 180, 255, .4); border-radius: 10px; } /* Guestbook: both boxes the same height; messages area fills its box */ .rr-grid--gb { align-items: stretch; } .rr-gb-messages { display: flex; flex-direction: column; } .rr-gb-messages img { flex: 1 1 auto; object-fit: contain; object-position: top center; } .rr-gb-messages .rr-gb-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } .rr-gb-messages .rr-gb-empty[hidden] { display: none; } .rr-gb-messages .rr-link { margin-top: auto; padding-top: 10px; } .rr-banner--off .rr-bi-cloud, .rr-banner:not(.rr-banner--off) .rr-bi-star { display: none; } /* Support row: equal boxes; Stay Connected has text, buttons and a hashtag line */ .rr-grid--support { grid-template-columns: 1fr 1fr; align-items: stretch; } .rr-social { justify-content: flex-start; gap: 14px; } .rr-social__text { margin: 0; font-size: 15px; color: #e3e9f8; } .rr-social__btns { display: flex; gap: 12px; flex-wrap: wrap; } .rr-btn--gold { background: linear-gradient(180deg, #ffd45c, #e3a52c); color: #3a1a00; border-color: rgba(255, 240, 180, .7); box-shadow: 0 0 12px rgba(255, 200, 60, .55); cursor: pointer; font-family: inherit; } .rr-btn--gold:hover { color: #3a1a00; } .rr-btn--gold .rr-cicon { width: 22px; height: 22px; } .rr-social__tag { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(0, 10, 35, .45); border: 1px dashed rgba(247, 201, 90, .45); font-size: 15px; color: #e3e9f8; } .rr-social__tag .rr-cicon { width: 28px; height: 28px; flex: none; } .rr-social__tag strong { color: #fde866; } @media (max-width: 860px) { .rr-grid--support { grid-template-columns: 1fr; } } /* Wider logo artwork (1.9): keep it about as tall as before. Square or tall logos are kept to about half as tall as they are wide (same shape, just smaller), so they don't push the page down; wide logos never reach that and keep their size. */ .rr-logo img { --rr-logo-w: min(470px, 86vw); width: var(--rr-logo-w); height: auto; max-height: calc(var(--rr-logo-w) * .55); object-fit: contain; } @media (min-width: 861px) { .rr-logo img { --rr-logo-w: clamp(300px, 24vw, 520px); } } /* ---------- Watch Live (YouTube) ---------- */ .rr-live { margin-top: 30px; } .rr-live__panel { max-width: 1100px; margin: 0 auto; padding-top: 30px; } .rr-live__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid rgba(255, 90, 70, .5); box-shadow: 0 0 18px rgba(255, 40, 30, .4); } .rr-live__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .rr-live__poster { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; color: #fff; font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(rgba(3, 8, 24, .35), rgba(3, 8, 24, .55)), var(--rr-scene) center 62% / cover; } .rr-live__poster:hover .rr-live__play svg { transform: scale(1.08); } .rr-live__play svg { width: 92px; height: 92px; filter: drop-shadow(0 0 16px rgba(255, 30, 30, .8)); transition: transform .2s; } .rr-live__cta { font-weight: 800; font-size: 18px; text-shadow: 0 2px 4px #000; } .rr-live__badge { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 8px; background: #e5121e; font: 800 13px/1 var(--f-body); letter-spacing: .08em; box-shadow: 0 0 12px rgba(255, 30, 30, .6); } .rr-live__badge i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: rr-pulse 1.4s ease-in-out infinite; } .rr-live__text { margin: 14px 0 0; text-align: center; font-size: 16px; color: #f6e2d8; } .rr-live__text small { display: block; margin-top: 4px; font-size: 13px; color: #e0c4b8; } /* ---------- Countdown ---------- */ .rr-count { margin: 22px auto 0; max-width: 900px; text-align: center; } .rr-count__label { margin: 0 0 10px; font: 700 clamp(20px, 1.7vw, 28px)/1.2 "Libre Baskerville", Georgia, serif; color: #fbf290; text-shadow: 0 0 10px rgba(255, 210, 80, .55), 0 2px 3px #000; } .rr-count__tiles { display: flex; justify-content: center; gap: 14px; } .rr-count__tile { min-width: 104px; padding: 12px 10px 10px; border-radius: 14px; background: linear-gradient(180deg, #5a0303, #2e0101); border: 2px solid rgba(255, 120, 90, .55); box-shadow: 0 0 14px rgba(255, 40, 30, .5), inset 0 0 14px rgba(0, 0, 0, .5); } .rr-count__tile b { display: block; font: 800 clamp(34px, 3vw, 52px)/1 var(--f-body); background: linear-gradient(180deg, #fff3a0 10%, #fde866 45%, #ff9a1f 95%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px rgba(255, 150, 30, .6)); font-variant-numeric: tabular-nums; } .rr-count__tile span { display: block; margin-top: 4px; font: 700 12px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #bcdeee; } .rr-count.is-live .rr-count__tiles { display: none; } .rr-count.is-live .rr-count__label { font-size: clamp(22px, 2vw, 32px); animation: rr-glow 1.6s ease-in-out infinite alternate; } @keyframes rr-glow { to { text-shadow: 0 0 22px rgba(255, 220, 90, .95), 0 2px 3px #000; } } .rr-count__xmas { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 6px 16px; border-radius: 30px; background: rgba(0, 10, 35, .6); border: 1px solid rgba(247, 201, 90, .5); font: 700 15px var(--f-body); color: #fde866; } .rr-count__xmas .rr-cicon { width: 24px; height: 24px; } @media (max-width: 640px) { .rr-count__tiles { gap: 8px; } .rr-count__tile { min-width: 0; flex: 1; padding: 10px 4px 8px; } .rr-count__tile span { font-size: 10px; } } /* ---------- Directions ---------- */ .rr-dir { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } .rr-dir .rr-cicon { width: 22px; height: 22px; } .rr-dir__note { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #f0dcc0; } /* ---------- Playlist ---------- */ .rr-playlist { margin-top: 30px; } .rr-playlist__panel { padding-top: 30px; } .rr-pl { list-style: none; margin: 0; padding: 0; columns: 3 260px; column-gap: 18px; } .rr-pl__item { break-inside: avoid; display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 9px 12px; border-radius: 10px; background: rgba(0, 30, 10, .55); border: 1px solid rgba(247, 201, 90, .25); font-size: 15px; color: #eef4ea; } .rr-pl__num { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(247, 201, 90, .18); color: #fde866; font: 800 13px var(--f-body); } .rr-pl__name { flex: 1; min-width: 0; } .rr-pl__art { flex: none; width: 34px; height: 34px; border-radius: 6px; object-fit: cover; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); } .rr-pl__item.is-now .rr-pl__art { box-shadow: 0 0 0 2px #fde866, 0 0 12px rgba(253, 232, 102, .6); } .rr-pl__eq, .rr-pl__tag { display: none; } .rr-pl__item.is-now { background: linear-gradient(180deg, #7a0606, #4a0101); border-color: rgba(255, 210, 120, .8); box-shadow: 0 0 14px rgba(255, 60, 40, .55); color: #fff; font-weight: 800; } .rr-pl__item.is-now .rr-pl__num { background: #fde866; color: #4a0101; } .rr-pl__item.is-now .rr-pl__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; } .rr-pl__eq i { width: 3px; height: 30%; border-radius: 1px; background: #3cff6a; animation: rr-eq .8s ease-in-out infinite alternate; } .rr-pl__eq i:nth-child(2) { background: #ffd23c; animation-duration: .6s; } .rr-pl__eq i:nth-child(3) { background: #ff3b30; animation-duration: .9s; } .rr-pl__eq i:nth-child(4) { background: #ffd23c; animation-duration: .7s; } .rr-pl__item.is-now .rr-pl__tag { display: inline; font: 800 10px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #fde866; white-space: nowrap; } .rr-pl__recent { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; font-size: 14px; color: #e3e9f8; text-align: center; } .rr-pl__recent .rr-cicon { width: 22px; height: 22px; flex: none; } .rr-pl__recent b { color: #fde866; } /* ---------- Behind the Lights (stats) ---------- */ .rr-stats-sec { margin-top: 30px; } .rr-stats-sec__text { margin: -6px auto 18px; text-align: center; font-size: 15.5px; color: #f3ead8; text-shadow: 0 1px 3px #000, 0 0 10px #000; } .rr-statgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .rr-statgrid > .rr-stat { flex: 0 1 calc((100% - 80px) / 6); min-width: 0; } /* fewer tiles stay centered */ .rr-stat { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 10px 16px; border-radius: 16px; background: radial-gradient(ellipse at 50% 0%, rgba(40, 110, 220, .35), transparent 70%), linear-gradient(180deg, #02214d, #00122e); border: 2px solid rgba(247, 201, 90, .6); box-shadow: 0 0 16px rgba(70, 150, 255, .35), inset 0 0 18px rgba(0, 0, 0, .4); } .rr-stat:nth-child(even) { background: radial-gradient(ellipse at 50% 0%, rgba(160, 10, 10, .45), transparent 70%), linear-gradient(180deg, #5a0303, #2e0101); box-shadow: 0 0 16px rgba(255, 40, 30, .4), inset 0 0 18px rgba(0, 0, 0, .4); } .rr-stat__icon .rr-cicon { width: 46px; height: 46px; filter: drop-shadow(0 0 8px rgba(255, 200, 60, .65)); } .rr-stat__num { margin-top: 8px; font: 800 clamp(26px, 2.2vw, 40px)/1 var(--f-body); background: linear-gradient(180deg, #fff3a0 10%, #fde866 45%, #ff9a1f 95%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px rgba(255, 150, 30, .6)); font-variant-numeric: tabular-nums; white-space: nowrap; } .rr-stat__label { margin-top: 6px; font: 700 13px/1.3 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: #bcdeee; } @media (max-width: 1180px) { .rr-statgrid > .rr-stat { flex-basis: calc((100% - 32px) / 3); } } @media (max-width: 640px) { .rr-statgrid { gap: 10px; } .rr-statgrid > .rr-stat { flex-basis: calc((100% - 10px) / 2); } } /* ---------- Kids' Corner ---------- */ .rr-kids { margin-top: 30px; } .rr-grid--kids { grid-template-columns: 1fr 0.8fr 1.2fr; align-items: stretch; } .rr-kid { display: flex; flex-direction: column; gap: 12px; padding-top: 26px; } .rr-kid .rr-h { font-size: clamp(19px, 1.4vw, 25px); } .rr-kid__text { margin: 0; font-size: 15px; color: #eef4ea; } .rr-kid__fine { margin: auto 0 0; font-size: 12px; color: #bfd6c3; } .rr-elf__form { display: flex; gap: 10px; } .rr-elf__form input { flex: 1; min-width: 0; padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(247, 201, 90, .6); background: rgba(0, 20, 12, .55); color: #fff; font: 16px var(--f-body); } .rr-elf__form .rr-btn { cursor: pointer; white-space: nowrap; } .rr-elf__result { margin: 0; padding: 14px; border-radius: 12px; text-align: center; background: rgba(0, 20, 12, .55); border: 1px dashed rgba(247, 201, 90, .6); } .rr-elf__result span { display: block; font-size: 14px; color: #cfe6d3; } .rr-elf__result strong { display: block; margin-top: 4px; font: 400 clamp(28px, 2.4vw, 40px)/1.15 var(--f-script); background: linear-gradient(180deg, #fff6c8 15%, #ffd45c 50%, #e3a52c 85%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .9)); } .rr-elf__result.pop { animation: rr-pop .45s ease-out; } @keyframes rr-pop { 0% { transform: scale(.7); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } } .rr-color { align-items: center; text-align: center; } .rr-color__thumb { display: block; width: 100%; max-width: 210px; padding: 8px; border-radius: 10px; background: #fff; box-shadow: 0 0 16px rgba(255, 255, 255, .25); transform: rotate(-2deg); transition: transform .2s; } .rr-color__thumb:hover { transform: rotate(0) scale(1.03); } .rr-color__thumb img { display: block; width: 100%; height: auto; } .rr-color .rr-btn .rr-cicon { width: 20px; height: 20px; } .rr-quiz__progress { margin: 0; font: 800 12px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #bcdeee; } .rr-quiz__q { margin: 0; font: 700 18px/1.35 var(--f-body); color: #fff; min-height: 2.7em; } .rr-quiz__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .rr-quiz__opts .rr-btn { grid-column: 1 / -1; justify-self: center; cursor: pointer; } .rr-quiz__opt { padding: 12px 10px; border-radius: 10px; border: 1px solid rgba(150, 190, 255, .55); background: rgba(0, 20, 60, .6); color: #fff; font: 700 15px var(--f-body); cursor: pointer; transition: background .15s, transform .15s; } .rr-quiz__opt:hover:not(:disabled) { background: rgba(40, 90, 180, .7); transform: translateY(-1px); } .rr-quiz__opt.is-right { background: linear-gradient(180deg, #12802f, #06501a); border-color: #7dff9a; box-shadow: 0 0 12px rgba(60, 255, 110, .6); } .rr-quiz__opt.is-wrong { background: linear-gradient(180deg, #b0141e, #6e070d); border-color: #ff8a8a; } .rr-quiz__opt:disabled { cursor: default; } .rr-quiz__msg { margin: 0; min-height: 1.4em; text-align: center; font-weight: 800; color: #fde866; } @media (max-width: 1180px) { .rr-grid--kids { grid-template-columns: 1fr 1fr; } .rr-quiz { grid-column: 1 / -1; } } @media (max-width: 640px) { .rr-grid--kids { grid-template-columns: 1fr; } .rr-quiz__opts { grid-template-columns: 1fr; } } /* ---------- Guestbook messages (WordPress) ---------- */ .rr-gbl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 430px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(247, 201, 90, .6) transparent; } .rr-gbl__item { padding: 12px 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(90, 3, 3, .85), rgba(46, 1, 1, .85)); border: 1px solid rgba(255, 120, 90, .45); box-shadow: inset 0 0 12px rgba(0, 0, 0, .4); } .rr-gbl__item:nth-child(even) { background: rgba(2, 33, 77, .85); border-color: rgba(120, 180, 255, .4); } .rr-gbl__msg { margin: 0; font-size: 16px; line-height: 1.45; color: #fff6e6; } .rr-gbl__meta { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0 0; font-size: 13px; color: #cfd6e8; } .rr-gbl__meta b { color: #fde866; } .rr-gbl__more { margin: 10px auto 0; background: none; border: 0; cursor: pointer; font: 700 14px var(--f-body); } .rr-gb-note { margin: 0 0 10px; padding: 12px 14px; border-radius: 10px; font-weight: 700; font-size: 15px; } .rr-gb-note--ok { background: rgba(18, 128, 47, .8); border: 1px solid #7dff9a; color: #fff; } .rr-gb-note--err { background: rgba(176, 20, 30, .85); border: 1px solid #ff8a8a; color: #fff; } .rr-gb-fine { margin: 2px 0 0; text-align: center; font-size: 12px; color: #bfd6c3; } /* ---------- Falling snow ---------- */ .rr-snow { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 7; pointer-events: none; } .rr-snowfall { display: none; } /* ---------- Kids' Corner teaser (home) + page ---------- */ .rr-kids-teaser { display: flex; align-items: center; gap: 16px; margin: 30px auto 0; max-width: 1100px; padding: 14px 22px; border-radius: 16px; text-decoration: none; color: #fff; background: linear-gradient(90deg, #5a0303, #7a0606 40%, #054a15); border: 2px solid rgba(247, 201, 90, .7); box-shadow: 0 0 16px rgba(255, 60, 40, .45), 0 0 30px rgba(60, 255, 110, .2); transition: transform .15s, box-shadow .15s; } .rr-kids-teaser:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 0 22px rgba(255, 200, 60, .6); } .rr-kids-teaser__icon .rr-cicon { width: 46px; height: 46px; filter: drop-shadow(0 0 8px rgba(255, 200, 60, .7)); animation: rr-wiggle 2.4s ease-in-out infinite; } @keyframes rr-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-10deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } } .rr-kids-teaser__text { flex: 1; font-size: 16px; color: #f6eedb; } .rr-kids-teaser__text b { display: block; font: 700 clamp(20px, 1.6vw, 26px) "Libre Baskerville", Georgia, serif; color: #fbf290; text-shadow: 0 0 8px rgba(255, 210, 80, .5); } .rr-kids-teaser__go { flex: none; padding: 10px 18px; border-radius: 10px; font: 800 15px var(--f-body); color: #3a1a00; background: linear-gradient(180deg, #ffd45c, #e3a52c); box-shadow: 0 0 12px rgba(255, 200, 60, .55); } @media (max-width: 640px) { .rr-kids-teaser { flex-wrap: wrap; padding: 14px 16px; } .rr-kids-teaser__go { width: 100%; text-align: center; } } .rr-kids__intro { margin: -6px auto 20px; text-align: center; font-size: 16px; color: #f3ead8; text-shadow: 0 1px 3px #000, 0 0 10px #000; } .rr-kids__back { margin: 26px 0 0; text-align: center; } /* WordPress turns emoji into images; keep them text-sized even if its own style is stripped by a cache/optimizer */ img.emoji, img.wp-smiley { display: inline !important; width: 1em !important; height: 1em !important; max-width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; border: 0 !important; box-shadow: none !important; background: none !important; padding: 0 !important; } /* Thank-you note: a gift icon instead of an emoji */ .rr-gb-note--ok { display: flex; align-items: center; gap: 10px; } .rr-gb-note--ok .rr-cicon { width: 28px; height: 28px; flex: none; } /* Coloring page is landscape (1.9 → 2.2.3) */ .rr-color__thumb { max-width: 320px; } /* ---------- Christmas Light Lab (2.3.0) ---------- */ .rr-lab, .rr-contest, .rr-wall { margin-top: 44px; } .rr-lab__panel { padding: 24px 22px 18px; } .rr-lab__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 14px; } .rr-lab__modes { display: inline-flex; padding: 4px; border-radius: 14px; background: rgba(0, 10, 30, .65); border: 1px solid rgba(150, 190, 255, .4); } .rr-lab__modes button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 10px; background: none; color: #cfe0ff; font: 800 15px var(--f-body); cursor: pointer; } .rr-lab__modes button .rr-cicon { width: 22px; height: 22px; } .rr-lab__modes button[aria-pressed="true"] { background: linear-gradient(180deg, #ffd45c, #e3a52c); color: #3a1a00; box-shadow: 0 0 12px rgba(255, 200, 60, .55); } .rr-lab__song { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #fde866; } .rr-lab__song select, .rr-lab__save input, .rr-contest__form input[type=text], .rr-contest__form input[type=email], .rr-contest__form select { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(247, 201, 90, .6); background: rgba(0, 12, 30, .7); color: #fff; font: 16px var(--f-body); } .rr-lab__play { margin-left: auto; min-width: 128px; padding: 12px 22px; font-size: 17px; cursor: pointer; } .rr-lab__play b { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; } .rr-lab.is-playing .rr-lab__play b { width: 13px; height: 14px; border: 0; background: #fff; border-radius: 2px; } .rr-lab__stage { position: relative; border-radius: 12px; overflow: hidden; background: #050a1a; border: 2px solid rgba(247, 201, 90, .55); box-shadow: 0 0 24px rgba(80, 140, 255, .25); } .rr-lab__stage:fullscreen { display: flex; align-items: center; border: 0; border-radius: 0; } .rr-lab__canvas { display: block; width: 100%; height: auto; aspect-ratio: 1970 / 572; cursor: pointer; } .rr-lab__time { position: absolute; left: 12px; top: 10px; font: 800 13px var(--f-body); color: rgba(255, 255, 255, .7); letter-spacing: .04em; } .rr-lab__full { position: absolute; right: 8px; top: 6px; width: 38px; height: 38px; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 20px; cursor: pointer; } .rr-lab__loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-weight: 800; color: #fde866; } .rr-lab.is-ready .rr-lab__loading { display: none; } .rr-lab__turn { display: none; margin: 8px 0 0; text-align: center; font-size: 13px; color: #cfe0ff; } .rr-lab__watching { display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 200, 60, .15); border: 1px dashed rgba(255, 210, 90, .8); font-weight: 700; } .rr-lab__watching strong { color: #fde866; } .rr-lab__watching .rr-btn { cursor: pointer; padding: 7px 14px; } .rr-lab.is-watching .rr-lab__watching { display: flex; } .rr-lab.is-watching .rr-lab__elves, .rr-lab.is-watching .rr-lab__save, .rr-lab.is-watching .rr-lab__modes, .rr-lab.is-watching .rr-lab__junior { display: none !important; } .rr-lab__elves, .rr-lab__junior { margin-top: 16px; } .rr-lab[data-mode="elves"] .rr-lab__junior, .rr-lab[data-mode="junior"] .rr-lab__elves { display: none; } .rr-lab__elves { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; } .rr-lab__step { padding: 14px 16px; border-radius: 14px; background: rgba(0, 10, 30, .55); border: 1px solid rgba(150, 190, 255, .3); } .rr-lab__step h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 20px "Libre Baskerville", Georgia, serif; color: #fbf290; } .rr-lab__step h3 span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, #ff2a3a, #d00c1c); color: #fff; font: 800 16px var(--f-body); box-shadow: 0 0 10px rgba(255, 40, 60, .6); } .rr-lab__hint { margin: 0 0 10px; font-size: 14px; color: #cfe0ff; } .rr-lab__zones { display: flex; flex-wrap: wrap; gap: 6px; } .rr-lab__zone { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 7px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .07); color: #fff; font: 700 13px var(--f-body); cursor: pointer; } .rr-lab__zone i { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 8px rgba(255, 255, 255, .4); } .rr-lab__zone.is-on { background: rgba(255, 210, 90, .25); border-color: #ffd45c; box-shadow: 0 0 10px rgba(255, 200, 60, .5); } .rr-lab__zname { margin: 12px 0 6px; font-size: 15px; color: #fde866; } .rr-lab__swatches { display: flex; flex-wrap: wrap; gap: 8px; } .rr-lab__sw { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .3); cursor: pointer; box-shadow: 0 0 10px rgba(255, 255, 255, .15); transition: transform .12s; } .rr-lab__sw:hover:not(:disabled) { transform: scale(1.1); } .rr-lab__sw.is-on { border-color: #fff; transform: scale(1.12); box-shadow: 0 0 0 3px #e3a52c, 0 0 14px rgba(255, 255, 255, .6); } .rr-lab__sw:disabled { opacity: .4; cursor: default; } .rr-lab__swatches--sm .rr-lab__sw { width: 32px; height: 32px; } .rr-lab__styles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .rr-lab__style { padding: 14px 12px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .2); background: linear-gradient(180deg, rgba(40, 70, 140, .7), rgba(10, 25, 60, .8)); color: #fff; text-align: left; cursor: pointer; transition: transform .12s; } .rr-lab__style:hover { transform: translateY(-2px); } .rr-lab__style strong { display: block; font: 800 16px var(--f-body); color: #fde866; } .rr-lab__style span { display: block; margin-top: 3px; font-size: 13px; color: #d8e4ff; } .rr-lab__style.is-on { border-color: #ffd45c; box-shadow: 0 0 14px rgba(255, 200, 60, .55); } .rr-lab__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 10px; } .rr-lab__effects { display: flex; flex-wrap: wrap; gap: 6px; } .rr-lab__fx { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 7px 8px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .07); color: #fff; font: 700 12px var(--f-body); cursor: pointer; } .rr-lab__fx b { font-size: 18px; line-height: 1; } .rr-lab__fx.is-on { background: linear-gradient(180deg, #ffd45c, #e3a52c); color: #3a1a00; border-color: #fff3c0; } .rr-lab__gridwrap { overflow-x: auto; border-radius: 10px; border: 1px solid rgba(150, 190, 255, .35); background: rgba(0, 8, 24, .7); scrollbar-color: rgba(247, 201, 90, .6) transparent; } .rr-lab__grid { display: inline-block; min-width: 100%; padding: 6px 6px 8px 0; } .rr-lab__row { display: flex; gap: 3px; margin-bottom: 3px; } .rr-lab__lbl { position: sticky; left: 0; z-index: 2; flex: none; width: 118px; padding: 0 8px; border: 0; border-radius: 0 8px 8px 0; background: #0b1836; color: #fff; font: 700 12px var(--f-body); text-align: left; cursor: pointer; display: flex; align-items: center; box-shadow: 4px 0 8px rgba(0, 0, 0, .5); } .rr-lab__row--head .rr-lab__lbl { cursor: default; color: #9fb4e0; } .rr-lab__bar, .rr-lab__cell { flex: none; width: 34px; height: 30px; border-radius: 6px; } .rr-lab__bar { border: 0; background: none; color: #9fb4e0; font: 800 11px var(--f-body); cursor: pointer; } .rr-lab__bar.is-sel { color: #3a1a00; background: #ffd45c; } .rr-lab__cell { display: grid; place-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); color: #fff; font-size: 15px; font-weight: 800; text-shadow: 0 0 2px #000, 0 0 3px #000, 0 1px 3px #000; cursor: pointer; user-select: none; touch-action: manipulation; } .rr-lab__cell:nth-child(4n+2) { border-left-color: rgba(255, 210, 90, .35); } .rr-lab__cell.has { border-color: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); } .rr-lab__cell:hover { outline: 2px solid #fff; outline-offset: -2px; } .rr-lab__cell.is-now, .rr-lab__bar.is-now { box-shadow: 0 0 0 2px #fff, 0 0 12px #fff; } .rr-lab__gridbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .rr-lab__gridbtns .rr-btn, .rr-lab__save .rr-btn { cursor: pointer; font-family: inherit; } .rr-btn--ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); } .rr-lab__save { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 16px; } .rr-lab__save label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; font-weight: 800; font-size: 13px; color: #fde866; } .rr-lab .rr-kid__fine { margin-top: 10px; text-align: center; color: #b8c8ea; } @media (max-width: 900px) { .rr-lab__elves { grid-template-columns: 1fr; } .rr-lab__turn { display: block; } } @media (max-width: 640px) { .rr-lab__panel { padding: 20px 12px 14px; } .rr-lab__play { margin-left: 0; flex: 1; } .rr-lab__modes { width: 100%; } .rr-lab__song { width: 100%; } .rr-lab__song select { flex: 1; min-width: 0; } .rr-lab__modes button { flex: 1; justify-content: center; padding: 9px 8px; font-size: 14px; } .rr-lab__styles { grid-template-columns: 1fr; } .rr-lab__lbl { width: 92px; font-size: 11px; } } /* ---------- Light Show Contest + Show Wall ---------- */ .rr-grid--contest { grid-template-columns: 1fr 1fr; align-items: start; } .rr-contest__info p, .rr-contest__form p { font-size: 15px; } .rr-contest__prizes { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; } .rr-contest__prizes li { padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(247, 201, 90, .55); } .rr-contest__prizes strong { display: block; font: 700 18px "Libre Baskerville", Georgia, serif; color: #fbf290; } .rr-contest__prizes span { display: block; font-weight: 800; font-size: 17px; } .rr-contest__prizes em { display: block; font-size: 13px; color: #f0cfcf; } .rr-contest__dead { font-weight: 800; color: #fde866; } .rr-rules { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, .3); } .rr-rules summary { cursor: pointer; font-weight: 800; color: #fde866; } .rr-rules ol { margin: 10px 0 4px; padding-left: 20px; font-size: 14px; line-height: 1.5; color: #f6e6e6; } .rr-rules li + li { margin-top: 6px; } .rr-contest__preview { margin: 4px 0 12px; text-align: center; } .rr-contest__preview img { display: block; width: 100%; height: auto; border-radius: 10px; border: 2px solid rgba(247, 201, 90, .6); } .rr-contest__form .rr-contest__preview p { margin: 6px 0 0; font-weight: 800; color: #fde866; } .rr-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; } .rr-field label { font-weight: 800; font-size: 14px; color: #e4f6e6; } .rr-check { margin: 0 0 14px; font-size: 14px; line-height: 1.45; } .rr-check input { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; accent-color: #e3a52c; } .rr-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .rr-contest__form .rr-btn { cursor: pointer; font-family: inherit; width: 100%; padding: 13px; font-size: 17px; } .rr-contest__msg { min-height: 1.3em; margin: 10px 0 0; text-align: center; font-weight: 800; color: #fde866; } .rr-contest__done { text-align: center; } .rr-contest__done .rr-contest__big { margin: 6px 0; font: 400 clamp(30px, 3vw, 44px)/1.1 var(--f-script); color: #fde866; text-shadow: 0 0 12px rgba(255, 210, 80, .6); } .rr-contest__done .rr-contest__code { display: inline-block; margin: 6px 0; padding: 10px 22px; border-radius: 12px; background: #fff; color: #7a0606; font: 800 30px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; box-shadow: 0 0 18px rgba(255, 255, 255, .5); } .rr-panel--gold { background: linear-gradient(180deg, #6b4a06, #3a2602); border: 3px solid #ffd45c; box-shadow: 0 0 24px rgba(255, 200, 60, .55); } .rr-contest__winners { margin-bottom: 26px; text-align: center; } .rr-contest__winners ul { list-style: none; margin: 8px 0; padding: 0; font-size: 18px; } .rr-contest__winners strong { color: #fde866; } .rr-wall__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; } .rr-wall__card { position: relative; margin: 0; padding: 10px; border-radius: 14px; background: linear-gradient(180deg, rgba(2, 33, 77, .92), rgba(0, 18, 46, .92)); border: 2px solid rgba(150, 190, 255, .45); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); } .rr-wall__card.is-winner { border-color: #ffd45c; box-shadow: 0 0 20px rgba(255, 200, 60, .55); } .rr-wall__watch { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; } .rr-wall__watch img { display: block; width: 100%; height: auto; transition: transform .2s; } .rr-wall__watch:hover img { transform: scale(1.04); } .rr-wall__play { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; display: grid; place-items: center; border-radius: 50%; background: rgba(208, 12, 28, .9); color: #fff; font-size: 20px; box-shadow: 0 0 14px rgba(255, 40, 60, .7); } .rr-wall__card figcaption { padding: 10px 52px 2px 4px; } .rr-wall__card figcaption strong { display: block; font-size: 16px; color: #fde866; } .rr-wall__card figcaption span { display: block; font-size: 14px; color: #d8e4ff; } .rr-wall__badge { display: inline-block; margin: 6px 4px 0 0; padding: 3px 9px; border-radius: 999px; background: #ffd45c; color: #3a1a00; font: 800 11px var(--f-body); font-style: normal; text-transform: uppercase; letter-spacing: .05em; } .rr-wall__heart { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; align-items: center; padding: 4px 8px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font: 800 13px var(--f-body); cursor: pointer; } .rr-wall__heart b { font-size: 24px; line-height: 1; color: rgba(255, 255, 255, .55); transition: color .15s; } .rr-wall__heart.is-on b { color: #ff3b5c; text-shadow: 0 0 10px rgba(255, 60, 90, .8); } .rr-wall__heart.is-pop b { animation: rr-pop .45s ease-out; } .rr-wall__heart:disabled { cursor: default; } @media (max-width: 860px) { .rr-grid--contest { grid-template-columns: 1fr; } } /* ---------- Kids' Corner tabs (2.3.1) ---------- */ .rr-ktabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; max-width: 1180px; margin: 0 auto 26px; scroll-margin-top: 120px; } .rr-ktab { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: #fff; background: linear-gradient(180deg, rgba(10, 30, 70, .92), rgba(2, 14, 38, .92)); border: 2px solid rgba(150, 190, 255, .35); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); transition: transform .15s, border-color .15s, box-shadow .15s; } .rr-ktab:hover { color: #fff; transform: translateY(-2px); border-color: rgba(255, 212, 92, .7); } .rr-ktab__icon .rr-cicon { width: 38px; height: 38px; filter: drop-shadow(0 0 6px rgba(255, 210, 90, .5)); } .rr-ktab__txt b { display: block; font: 700 17px/1.2 "Libre Baskerville", Georgia, serif; color: #fbf290; } .rr-ktab__txt small { display: block; margin-top: 2px; font-size: 13px; color: #cfdcf5; } .rr-ktab.is-on { background: linear-gradient(180deg, #7a0606, #3a0101); border-color: #ffd45c; box-shadow: 0 0 18px rgba(255, 200, 60, .55), 0 8px 20px rgba(0, 0, 0, .45); } .rr-kpane { max-width: 1180px; margin: 0 auto; } .rr-kpane[hidden] { display: none !important; } .rr-kids .rr-lab, .rr-kids .rr-contest { margin-top: 10px; } .rr-kbox { max-width: 760px; margin: 14px auto 0; } .rr-kbox.rr-color { max-width: 980px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .rr-kbox .rr-h { justify-content: center; } .rr-color__big { display: block; width: 100%; max-width: 820px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 22px rgba(255, 255, 255, .25); } .rr-color__big img { display: block; width: 100%; height: auto; } .rr-kbox.rr-quiz .rr-quiz__opts { max-width: 560px; margin: 0 auto; width: 100%; } .rr-kids__intro { margin-bottom: 16px; } @media (max-width: 640px) { .rr-ktabs { grid-template-columns: 1fr 1fr; gap: 8px; } .rr-ktab { flex-direction: column; text-align: center; gap: 6px; padding: 10px 8px; } .rr-ktab__icon .rr-cicon { width: 32px; height: 32px; } .rr-ktab__txt b { font-size: 15px; } .rr-ktab__txt small { display: none; } } /* Lab: picked prop, one/all toggle, videos, custom color */ .rr-lab__picked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 12px; } .rr-lab__picked strong { font-size: 18px; color: #fde866; } .rr-lab__scope { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .2); } .rr-lab__scope[hidden] { display: none; } .rr-lab__scope button { padding: 6px 12px; border: 0; border-radius: 9px; background: none; color: #d8e4ff; font: 700 13px var(--f-body); cursor: pointer; } .rr-lab__scope button[aria-pressed="true"] { background: #ffd45c; color: #3a1a00; } .rr-lab__groups { margin-top: 14px; } .rr-lab__groups summary { cursor: pointer; font-weight: 800; font-size: 14px; color: #fde866; margin-bottom: 8px; } .rr-lab__sw--mine { position: relative; } .rr-lab__sw--plus { position: relative; display: grid; place-items: center; background: conic-gradient(#ff2b2b, #ffc21a, #1fff5a, #2f7dff, #b44dff, #ff2b2b); overflow: hidden; } .rr-lab__sw--plus span { display: grid; place-items: center; width: 60%; height: 60%; border-radius: 50%; background: #0b1836; color: #fff; font: 800 18px/1 var(--f-body); pointer-events: none; } .rr-lab__sw--plus input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; } .rr-lab__vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } .rr-lab__vids[hidden] { display: none; } .rr-lab__vid { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff; font: 700 13px var(--f-body); text-align: left; cursor: pointer; } .rr-lab__vid i { flex: none; width: 26px; height: 34px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); } .rr-lab__vid.is-on { border-color: #ffd45c; background: rgba(255, 210, 90, .18); box-shadow: 0 0 10px rgba(255, 200, 60, .45); } .rr-lab__vids--sm { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); flex: 1; } .rr-lab__vids--sm .rr-lab__vid i { width: 18px; height: 24px; } .rr-lab__tools--vid { align-items: flex-start; } .rr-lab__toolname { flex: none; padding-top: 8px; font-weight: 800; font-size: 13px; color: #fde866; } .rr-lab__row--vid .rr-lab__lbl { color: #9fe0ff; } @media (max-width: 640px) { .rr-ktab:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* Contest form: 3 clear steps (2.3.3) */ .rr-step { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font: 700 18px "Libre Baskerville", Georgia, serif; color: #fbf290; } .rr-step:first-child { margin-top: 4px; } .rr-step span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(180deg, #ff2a3a, #d00c1c); color: #fff; font: 800 15px var(--f-body); box-shadow: 0 0 10px rgba(255, 40, 60, .6); } .rr-entry { padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px dashed rgba(247, 201, 90, .6); } .rr-entry__card { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: center; } .rr-entry__card[hidden] { display: none; } .rr-entry__card img { display: block; width: 100%; height: auto; border-radius: 8px; border: 2px solid rgba(247, 201, 90, .6); } .rr-entry__info { display: flex; flex-direction: column; gap: 3px; } .rr-entry__info strong { font-size: 17px; color: #fde866; } .rr-entry__info span { font-size: 14px; } .rr-entry__info em { font-size: 12px; color: #bfe6c6; } .rr-contest__form .rr-entry__info .rr-btn { width: auto; margin-top: 6px; padding: 8px 14px; font-size: 14px; align-self: flex-start; } .rr-entry__empty { margin: 0 0 4px; font-weight: 700; color: #fde866; } .rr-entry__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .rr-contest__form .rr-entry__btns .rr-btn { width: auto; padding: 9px 14px; font-size: 14px; } .rr-entry__attach { position: relative; cursor: pointer; } .rr-entry__attach input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .rr-entry__tip { margin: 10px 0 0; font-size: 12px !important; color: #cfe6d3; } .rr-lab__enter { cursor: pointer; } @media (max-width: 640px) { .rr-entry__card { grid-template-columns: 1fr; } } /* 2.3.4: contest first, equal boxes, how-to steps, parent email */ .rr-grid--contest { align-items: stretch; } .rr-grid--contest > .rr-panel { display: flex; flex-direction: column; } .rr-contest__info .rr-rules { margin-top: auto; } .rr-contest__info .rr-contest__dead { margin-bottom: 14px; } .rr-step--plain { margin: 6px 0 8px; } .rr-howto { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; } .rr-howto li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); font-size: 14px; line-height: 1.4; } .rr-howto li span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg, #ffd45c, #e3a52c); color: #3a1a00; font: 800 14px var(--f-body); } .rr-howto li b { display: block; color: #fde866; font-size: 15px; } .rr-contest__go { align-self: flex-start; margin-bottom: 16px; cursor: pointer; } .rr-contest__prizes { margin-top: 0; } .rr-lab__how { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: none; } .rr-lab__how li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 210, 90, .12); border: 1px solid rgba(255, 210, 90, .45); font: 700 14px/1.3 var(--f-body); color: #fff6dc; } .rr-lab__how li span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg, #ff2a3a, #d00c1c); color: #fff; font: 800 14px var(--f-body); box-shadow: 0 0 8px rgba(255, 40, 60, .6); } @media (max-width: 900px) { .rr-lab__how { grid-template-columns: 1fr 1fr; } } .rr-field__note { display: block; margin-top: 2px; font-size: 12px; color: #cfe6d3; } /* ---------- Favorite song voting (2.4.0) ---------- */ .rr-vote, .rr-seq { margin-top: 44px; } .rr-ff { display: flex; align-items: center; gap: 14px; max-width: 1180px; margin: 0 auto 22px; padding: 14px 20px; border-radius: 16px; background: linear-gradient(90deg, rgba(90, 3, 3, .92), rgba(60, 40, 2, .92)); border: 2px solid rgba(255, 212, 92, .7); box-shadow: 0 0 18px rgba(255, 200, 60, .35); } .rr-ff.is-today { background: linear-gradient(90deg, #8a6000, #c88a00 50%, #8a6000); border-color: #fff3b0; box-shadow: 0 0 26px rgba(255, 210, 80, .75); } .rr-ff__icon .rr-cicon { width: 44px; height: 44px; filter: drop-shadow(0 0 8px rgba(255, 220, 90, .8)); } .rr-ff.is-today .rr-ff__icon .rr-cicon { animation: rr-wiggle 2.4s ease-in-out infinite; } .rr-ff__body b { display: block; font: 700 clamp(18px, 1.5vw, 22px) "Libre Baskerville", Georgia, serif; color: #fbf290; } .rr-ff__body span { display: block; margin-top: 2px; font-size: 15px; color: #fff3df; } .rr-ff__body strong { color: #fff; } .rr-grid--vote { grid-template-columns: 1.35fr 1fr; align-items: stretch; } .rr-grid--vote > .rr-panel { display: flex; flex-direction: column; } .rr-vlist { list-style: none; margin: 4px 0 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(247, 201, 90, .6) transparent; } .rr-vlist__item { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .08); } .rr-vlist__num { flex: none; width: 24px; font: 800 13px var(--f-body); color: #f0bdbd; text-align: right; } .rr-vlist__name { flex: 1; min-width: 0; } .rr-vlist__art { flex: none; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); } .rr-vlist__name b { display: block; font-size: 15px; font-weight: 700; color: #fff; } .rr-vlist__name b, .rr-vlist__name small { overflow-wrap: anywhere; } .rr-vlist__name small { display: block; font-size: 12px; color: #f0caca; } .rr-vlist__new { flex: none; padding: 2px 7px; border-radius: 999px; background: #1fd15a; color: #002a0c; font: 800 10px var(--f-body); font-style: normal; text-transform: uppercase; letter-spacing: .05em; } .rr-vlist__now { display: none; flex: none; padding: 2px 8px; border-radius: 999px; background: #ffd45c; color: #3a1a00; font: 800 10px var(--f-body); text-transform: uppercase; letter-spacing: .05em; } .rr-vlist__item.is-now { border-color: #ffd45c; box-shadow: 0 0 12px rgba(255, 210, 90, .45); } .rr-vlist__item.is-now .rr-vlist__now { display: inline-block; } .rr-vlist__item.is-mine { background: rgba(255, 60, 90, .2); border-color: rgba(255, 110, 140, .8); } .rr-vlist__vote { flex: none; display: inline-flex; align-items: center; gap: 6px; min-width: 64px; justify-content: center; padding: 7px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; font: 800 14px var(--f-body); cursor: pointer; transition: transform .12s; } .rr-vlist__vote:hover { transform: scale(1.06); } .rr-vlist__vote b { font-size: 18px; line-height: 1; color: rgba(255, 255, 255, .6); } .rr-vlist__item.is-mine .rr-vlist__vote { background: linear-gradient(180deg, #ff3b5c, #c4102e); border-color: #ffb0c0; } .rr-vlist__item.is-mine .rr-vlist__vote b { color: #fff; } .rr-vlist__vote.is-pop b { animation: rr-pop .45s ease-out; } .rr-lbtabs { display: inline-flex; align-self: flex-start; padding: 3px; margin: 2px 0 12px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .2); } .rr-lbtabs button { padding: 7px 14px; border: 0; border-radius: 9px; background: none; color: #d8e4ff; font: 700 14px var(--f-body); cursor: pointer; } .rr-lbtabs button[aria-pressed="true"] { background: #ffd45c; color: #3a1a00; } .rr-lb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .rr-lb li { display: flex; align-items: center; gap: 10px; } .rr-lb__rank { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .12); font: 800 14px var(--f-body); } .rr-lb li:first-child .rr-lb__rank { background: linear-gradient(180deg, #ffd45c, #e3a52c); color: #3a1a00; box-shadow: 0 0 10px rgba(255, 210, 90, .7); } .rr-lb__main { flex: 1; min-width: 0; } .rr-lb__name { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-lb__bar { display: block; height: 10px; margin-top: 4px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; } .rr-lb__bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #1fd15a, #ffd45c, #ff3b5c); transition: width .6s ease; } .rr-lb li.is-mine .rr-lb__name { color: #ff9db0; } .rr-lb__n { flex: none; min-width: 34px; text-align: right; font: 800 16px var(--f-body); color: #fde866; } .rr-lb__empty { margin: 6px 0; color: #cfe0ff; } .rr-lb__total { margin: 14px 0 0; font-size: 13px; color: #b8c8ea; } .rr-lb__mine { margin: auto 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 60, 90, .16); border: 1px solid rgba(255, 110, 140, .5); font-size: 14px; } .rr-lb__total + .rr-lb__mine { margin-top: 14px; } .rr-lb__msg { min-height: 1.3em; margin: 8px 0 0; font-weight: 800; color: #fde866; } @media (max-width: 900px) { .rr-grid--vote { grid-template-columns: 1fr; } .rr-vlist { max-height: 420px; } } /* ---------- Sequence videos ---------- */ .rr-seq__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; max-width: 1180px; margin: 0 auto; } .rr-seq__card { display: flex; flex-direction: column; padding: 0; border-radius: 14px; overflow: hidden; text-align: left; cursor: pointer; color: #fff; background: linear-gradient(180deg, rgba(2, 33, 77, .95), rgba(0, 16, 42, .95)); border: 2px solid rgba(150, 190, 255, .4); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); transition: transform .15s, border-color .15s, box-shadow .15s; } .rr-seq__card:hover { transform: translateY(-3px); border-color: #ffd45c; box-shadow: 0 0 18px rgba(255, 200, 60, .45), 0 10px 24px rgba(0, 0, 0, .5); } .rr-seq__media { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; } .rr-seq__media img, .rr-seq__media video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .rr-seq__play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; padding-left: 4px; border-radius: 50%; background: rgba(208, 12, 28, .92); font-size: 22px; box-shadow: 0 0 16px rgba(255, 40, 60, .7); transition: transform .15s; } .rr-seq__card:hover .rr-seq__play { transform: scale(1.1); } .rr-seq__new { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: #1fd15a; color: #002a0c; font: 800 11px var(--f-body); font-style: normal; text-transform: uppercase; letter-spacing: .05em; } .rr-seq__info { display: block; padding: 10px 14px 12px; } .rr-seq__info b { display: block; font: 700 17px "Libre Baskerville", Georgia, serif; color: #fbf290; } .rr-seq__info small { display: block; margin-top: 2px; font-size: 13px; color: #cfdcf5; } .rr-vmodal { width: min(1100px, 94vw); padding: 0; border: 0; background: transparent; } .rr-vmodal::backdrop { background: rgba(0, 0, 0, .85); } .rr-vmodal__box { position: relative; padding: 10px; border-radius: 14px; background: #050a1a; border: 2px solid #ffd45c; box-shadow: 0 0 30px rgba(255, 200, 60, .4); } .rr-vmodal video { display: block; width: 100%; max-height: 78vh; border-radius: 8px; background: #000; } .rr-vmodal__yt { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; border-radius: 8px; overflow: hidden; background: #000; } .rr-vmodal__yt[hidden] { display: none; } .rr-vmodal__yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .rr-vmodal__title { margin: 8px 4px 2px; font: 700 18px "Libre Baskerville", Georgia, serif; color: #fbf290; } .rr-vmodal__x { position: absolute; right: -12px; top: -14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #ffd45c; background: #7a0606; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } /* Kids' show pop-up player */ .rr-showmodal { width: min(1200px, 96vw); } .rr-showmodal__head { margin: 2px 40px 10px 4px; font-size: 15px; color: #cfdcf5; } .rr-showmodal__head strong { font: 700 20px "Libre Baskerville", Georgia, serif; color: #fbf290; margin-right: 6px; } .rr-showmodal .rr-lab__stage { border-radius: 10px; } .rr-showmodal__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; } .rr-showmodal__btns .rr-btn { cursor: pointer; min-width: 130px; font-family: inherit; } .rr-lab.is-watching .rr-lab__how { display: none; } .rr-lab__stage.is-ready .rr-lab__loading { display: none; } .rr-showmodal .rr-vmodal__x { right: 8px; top: 6px; width: 34px; height: 34px; font-size: 22px; } .rr-showmodal .rr-lab__full { display: none; } .rr-vmodal__x { right: 8px; top: 6px; width: 34px; height: 34px; font-size: 22px; } .rr-vmodal__box { padding-top: 46px; } /* Home: compact "explore" row (Songs & Sequences + Kids' Corner) */ .rr-explore { max-width: 1100px; margin: 30px auto 0; display: grid; gap: 14px; } .rr-explore .rr-kids-teaser { margin: 0; max-width: none; } .rr-explore--two { grid-template-columns: 1fr 1fr; } .rr-explore--two .rr-kids-teaser { flex-wrap: wrap; padding: 14px 18px; } .rr-explore--two .rr-kids-teaser__text { flex: 1 1 200px; font-size: 15px; } .rr-kids-teaser--songs { background: linear-gradient(90deg, #02214d, #0a3a8a 45%, #3a0a5a); border-color: rgba(150, 190, 255, .7); box-shadow: 0 0 16px rgba(80, 140, 255, .45), 0 0 30px rgba(180, 80, 255, .2); } @media (max-width: 860px) { .rr-explore--two { grid-template-columns: 1fr; } } .rr-songs-page .rr-seq, .rr-songs-page .rr-vote { margin-top: 26px; } .rr-songs-page > .rr-seq:first-of-type, .rr-songs-page > .rr-vote:first-of-type { margin-top: 0; } /* Short menu (Home, Songs, Kids' Corner): one row on phones too */ @media (max-width: 860px) { .rr-menu { display: flex !important; flex-wrap: nowrap; justify-content: center; gap: 4px; grid-template-columns: none !important; } .rr-menu li { flex: 1 1 0; min-width: 0; } .rr-menu a { justify-content: center; padding: 8px 6px; white-space: nowrap; } } @media (max-width: 400px) { .rr-menu a { font-size: 14px; gap: 5px; } .rr-menu a .rr-cicon { width: 20px; height: 20px; } } @media (max-width: 560px) { .rr-menu a { flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 13px; } .rr-menu a .rr-cicon { width: 22px; height: 22px; } } /* Your Name in Lights (2.5.0) */ .rr-names { max-width: 680px; } .rr-names .rr-field input { padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(247, 201, 90, .6); background: rgba(0, 12, 30, .7); color: #fff; font: 800 20px var(--f-body); letter-spacing: .04em; } /* no text-transform: on iPhones it stops a picked suggestion from replacing the word */ .rr-names__greet { margin: 4px 0 14px; padding: 0; border: 0; display: grid; gap: 8px; } .rr-names__greet legend { margin-bottom: 6px; font-weight: 800; font-size: 14px; color: #e4f0ff; } .rr-names__greet label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(150, 190, 255, .3); cursor: pointer; font-weight: 800; letter-spacing: .03em; } .rr-names__greet input { width: 18px; height: 18px; accent-color: #ffd45c; } .rr-names__greet label:has(input:checked) { border-color: #ffd45c; background: rgba(255, 210, 90, .15); } .rr-names__themes { margin: 4px 0 14px; padding: 0; border: 0; } .rr-names__themes legend { margin-bottom: 6px; font-weight: 800; font-size: 14px; color: #e4f0ff; } .rr-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; } .rr-theme { cursor: pointer; display: block; } .rr-theme input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rr-theme__card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px 10px; border-radius: 12px; text-align: center; background: linear-gradient(160deg, hsl(var(--h) 70% 35% / .55), rgba(0, 0, 0, .35)); border: 2px solid rgba(150, 190, 255, .3); transition: transform .12s, border-color .12s; } .rr-theme__card b { font-size: 13px; line-height: 1.15; } .rr-theme__pic { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; object-fit: cover; display: grid; place-items: center; font-size: 28px; background: hsl(var(--h) 70% 45% / .35); } .rr-theme input:checked + .rr-theme__card { border-color: #ffd45c; background: linear-gradient(160deg, hsl(var(--h) 75% 40% / .75), rgba(255, 210, 90, .18)); transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(255, 212, 92, .25); } .rr-theme input:focus-visible + .rr-theme__card { outline: 2px solid #ffd45c; outline-offset: 2px; } /* Pick your show: one wide card per show, with an animated (or uploaded) picture of the house */ .rr-themes { grid-template-columns: 1fr; gap: 10px; } .rr-theme__card { position: relative; padding: 0; gap: 0; overflow: hidden; text-align: left; align-items: stretch; } .rr-theme__pic { width: 100%; aspect-ratio: 32 / 9; border-radius: 0; font-size: 0; display: block; background: #04060d; } .rr-theme__card b { padding: 8px 12px 9px; font-size: 16px; display: flex; align-items: center; gap: 8px; } .rr-theme__card b::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); box-sizing: border-box; } .rr-theme input:checked + .rr-theme__card b::before { border: 5px solid #ffd45c; background: #2a1600; } .rr-theme input:checked + .rr-theme__card { transform: none; } @media (min-width: 700px) { .rr-themes { grid-template-columns: 1fr 1fr; } } .rr-names__form .rr-btn { width: 100%; padding: 13px; font-size: 17px; cursor: pointer; font-family: inherit; } .rr-names__done { text-align: center; } .rr-names__preview { display: inline-block; margin: 8px 0; padding: 14px 22px; border-radius: 12px; background: #000; border: 2px solid #ffd45c; color: #ffd45c; font: 800 clamp(20px, 3.4vw, 30px)/1.2 var(--f-body); letter-spacing: .06em; text-shadow: 0 0 10px rgba(255, 210, 90, .8); } .rr-names__place { font-weight: 800; color: #9fe0ff; font-size: 17px; } .rr-names__done .rr-btn { cursor: pointer; } .rr-names__closed { padding: 14px; border-radius: 12px; background: rgba(0, 0, 0, .3); text-align: center; color: #e4f0ff; } /* ========================================================================= * 2.6.0: painted snow on every panel, new Kids' Corner, new Light Lab * ====================================================================== */ @font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/fredoka-latin-500-normal.woff2) format("woff2"); } @font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/fredoka-latin-600-normal.woff2) format("woff2"); } @font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/fredoka-latin-700-normal.woff2) format("woff2"); } :root { --f-kid: "Fredoka", "Nunito Sans", "Segoe UI", Arial, sans-serif; } /* Snow cap: a painted snow drift with icicles. The ends stay fixed; the middle repeats to fit any width. */ .rr-panel { padding-top: 40px; } .rr-panel::before { left: -8px; right: -8px; top: -26px; height: 64px; border-radius: 0; background: none; border-style: solid; border-width: 0 38px 0 46px; border-image: url(assets/img/snowcap.webp) 0 98 0 120 fill / 0 38px 0 46px round; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); } /* Snow on top of the home cards, the Fan Favorite box and the contest prize box too, like every other box */ .rr-kids-teaser, .rr-ff, .rr-kc__prize { position: relative; padding-top: 34px; } .rr-kids-teaser::before, .rr-ff::before, .rr-kc__prize::before { content: ""; position: absolute; left: -8px; right: -8px; top: -26px; height: 64px; pointer-events: none; border-style: solid; border-width: 0 38px 0 46px; border-image: url(assets/img/snowcap.webp) 0 98 0 120 fill / 0 38px 0 46px round; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); } .rr-ff { margin-top: 30px; } .rr-explore--two .rr-kids-teaser { padding: 34px 18px 16px; } .rr-explore { gap: 34px 22px; } /* room for the snow on each card */ /* ---------- Kids' Corner: doors ---------- */ .rr-kc { margin-top: 30px; display: grid; gap: 26px; } .rr-kc__home, .rr-kc__act { display: grid; gap: 22px; } .rr-kc__home[hidden], .rr-kc__act[hidden], .rr-kc__pane[hidden] { display: none !important; } .rr-kc__ask { margin: -6px 0 0; text-align: center; font: 600 clamp(24px, 3.4vw, 34px)/1.2 var(--f-kid); color: #fff6dc; text-shadow: 0 2px 8px #000; } .rr-kc__doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1180px; width: 100%; margin: 0 auto; } .rr-kc__doors.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; } .rr-kc__doors.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; } .rr-kc__doors.is-one { grid-template-columns: minmax(0, 1fr); max-width: 300px; } .rr-kc__none { text-align: center; font-weight: 700; color: #fff6dc; } .rr-kc__door { position: relative; display: block; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 28px rgba(0, 0, 0, .55); transition: transform .18s, box-shadow .18s; } .rr-kc__door img { display: block; width: 100%; height: auto; aspect-ratio: 490 / 685; object-fit: cover; } .rr-kc__door:hover, .rr-kc__door:focus-visible { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 0 26px rgba(255, 210, 90, .55), 0 18px 34px rgba(0, 0, 0, .6); } .rr-kc__door:nth-child(even):hover { transform: translateY(-5px) rotate(.6deg); } .rr-kc__sign { position: absolute; left: 56%; top: 14.2%; width: 41%; padding: 6px 4px; text-align: center; transform: rotate(8deg); font: 700 clamp(10px, 1.1vw, 15px)/1.1 var(--f-kid); color: #3a1d00; text-transform: uppercase; background: linear-gradient(180deg, #ffe7a3, #e9b94d 60%, #c98d25); border: 2px solid #8a5a12; border-radius: 6px; box-shadow: 0 3px 6px rgba(0, 0, 0, .5); } .rr-kc__sign[hidden] { display: none; } /* Kids' Corner doors on sites in another language: the words sit on the picture as page text */ .rr-kc__door { container-type: inline-size; } .rr-kc__words { position: absolute; left: 11%; right: 11%; top: 45%; height: 33%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; text-align: center; pointer-events: none; } .rr-kc__words b { font: 700 11.5cqw/1 var(--f-kid, "Fredoka", sans-serif); color: #fff; text-wrap: balance; text-shadow: 0 0 1px #3a1d00, 0 2px 0 #3a1d00, 0 -1px 0 #3a1d00, 2px 0 0 #3a1d00, -2px 0 0 #3a1d00, 0 4px 6px rgba(0, 0, 0, .6); hyphens: auto; } .rr-kc__words small { font: 600 5.4cqw/1.25 var(--f-kid, "Fredoka", sans-serif); color: #fff; text-wrap: balance; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); } .rr-kc__words--games { top: 50%; height: 25%; } .rr-kc__words b.is-long { font-size: 9.6cqw; } .rr-kc__words b.is-longer { font-size: 8.4cqw; } .rr-kc__go { position: absolute; left: 28.6%; width: 43.3%; top: 80%; height: 10.2%; display: flex; align-items: center; justify-content: center; font: 700 7.4cqw/1 var(--f-kid, "Fredoka", sans-serif); color: #3a1d00; white-space: nowrap; pointer-events: none; } .rr-kc__sign--show { left: 52%; top: 12%; width: 45%; } /* ---------- Kids' Corner: one activity ---------- */ .rr-kc__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; } .rr-kc__back { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 12px; border-radius: 999px; border: 2px solid rgba(247, 201, 90, .75); background: rgba(0, 0, 0, .55); color: #fff4dc; font: 600 18px var(--f-kid); cursor: pointer; } .rr-kc__back:hover { background: rgba(0, 0, 0, .75); } .rr-kc__back svg { width: 28px; height: 28px; } .rr-kc__top h2 { display: flex; align-items: center; gap: 12px; margin: 0; font: 700 clamp(26px, 3.6vw, 38px)/1.15 var(--f-kid); -webkit-text-stroke: 0; color: #fff4dc; text-shadow: 0 2px 6px #000; } .rr-kc__top h2 .rr-cicon { width: 46px; height: 46px; flex: none; } .rr-kc__top h2 em { font-style: normal; color: #ffd45c; text-shadow: 0 0 12px rgba(255, 190, 70, .55), 0 2px 2px #000; } .rr-kc__h { margin: 0 0 10px; font: 600 clamp(22px, 2.6vw, 28px)/1.2 var(--f-kid); -webkit-text-stroke: 0; color: #fff4dc; } .rr-kc__note { margin: 0 0 14px; color: #e6edf8; } .rr-kc__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .25); font: 600 19px/1.2 var(--f-kid); color: #fff; text-decoration: none; cursor: pointer; } .rr-kc__btn .rr-cicon { width: 22px; height: 22px; } .rr-kc__btn--gold { color: #3a1d00; background: linear-gradient(180deg, #fff0b0, #f2c24e 55%, #d89a28); border-color: #9a6512; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 4px 10px rgba(0, 0, 0, .45); } .rr-kc__btn--red { background: linear-gradient(180deg, #ff2b3d, #c70d1e); box-shadow: 0 0 14px rgba(255, 40, 60, .4); } .rr-kc__btn--ghost { background: rgba(255, 255, 255, .08); font-size: 16px; padding: 9px 16px; } .rr-kc__btn:hover { color: #fff; filter: brightness(1.1); } .rr-kc__btn--gold:hover { color: #3a1d00; } .rr-kc__prize { display: grid; gap: 14px; padding: 34px 18px 16px; position: relative; border-radius: 16px; border: 2px solid #ffd45c; background: radial-gradient(ellipse at 15% 0%, rgba(255, 210, 100, .25), transparent 60%), linear-gradient(160deg, rgba(130, 76, 0, .95), rgba(60, 28, 0, .95)); box-shadow: 0 0 22px rgba(255, 190, 60, .4); } .rr-kc__prize-head { display: flex; align-items: center; gap: 14px; } .rr-kc__prize-head .rr-cicon { width: 58px; height: 58px; flex: none; filter: drop-shadow(0 0 10px rgba(255, 200, 80, .6)); } .rr-kc__prize-head b { display: block; font: 700 clamp(26px, 3.4vw, 34px)/1.1 var(--f-kid); color: #ffd45c; text-shadow: 0 0 12px rgba(255, 190, 70, .5), 0 2px 2px #000; } .rr-kc__prize-head span { font-size: 16px; color: #fff4dc; } .rr-kc__prizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .rr-kc__prizes li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(247, 201, 90, .45); } .rr-kc__prizes small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ffd45c; } .rr-kc__prizes strong { font: 600 21px/1.2 var(--f-kid); color: #fff; } .rr-kc__prizes span { font-size: 14px; color: #e3d6bd; } .rr-kc__prize .rr-rules { margin: 0; } .rr-kc__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .rr-kc__steps--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rr-kc__steps a { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 10px; border-radius: 14px; border: 2px solid rgba(150, 190, 255, .35); background: rgba(5, 16, 40, .88); color: #f4f6ff; font: 600 18px var(--f-kid); text-decoration: none; } .rr-kc__steps a:hover { color: #fff; border-color: rgba(255, 212, 92, .7); } .rr-kc__steps i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; font-style: normal; font: 700 18px var(--f-kid); color: #2a1600; background: #ffd45c; } .rr-kc__steps a.is-on { border-color: #ffd45c; background: linear-gradient(180deg, #7a0606, #3a0101); box-shadow: 0 0 18px rgba(255, 200, 60, .45); } .rr-kc__grownup { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .08); font: 600 18px var(--f-kid); color: #fff4dc; } .rr-kc__grownup .rr-cicon { width: 34px; height: 34px; flex: none; } .rr-kc__fields { display: grid; grid-template-columns: 1.3fr .6fr 1.4fr; gap: 0 14px; margin-top: 14px; } .rr-kc__fields input, .rr-kc__fields select { padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(247, 201, 90, .6); background: rgba(0, 12, 30, .7); color: #fff; font: 16px var(--f-body); width: 100%; } .rr-kc__enter .rr-entry__info { display: grid; gap: 6px; justify-items: start; } .rr-kc__enter .rr-entry__info strong { font: 600 20px var(--f-kid); color: #fde866; } .rr-kc__color { display: grid; gap: 16px; justify-items: center; text-align: center; } .rr-kc__picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 760px; width: 100%; margin: 0 auto; } .rr-kc__pick { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; text-align: left; } .rr-kc__pick .rr-cicon { width: 50px; height: 50px; flex: none; } .rr-kc__pick b { display: block; font: 600 22px var(--f-kid); color: #fff4dc; } .rr-kc__pick small { color: #cfd6e8; font-size: 14px; } .rr-kc__pick[aria-pressed="true"] { border-color: #ffd45c; background: rgba(120, 70, 0, .55); box-shadow: 0 0 14px rgba(255, 200, 60, .35); } .rr-kc .rr-kbox { max-width: 760px; width: 100%; margin: 0 auto; } .rr-kc .rr-kbox[hidden] { display: none; } .rr-kc .rr-names { max-width: 760px; width: 100%; margin: 0 auto; } /* Kids' pictures on the name form */ .rr-names__pic { margin: 14px 0 6px; padding: 12px 14px; border: 1px dashed rgba(247, 201, 90, .55); border-radius: 12px; } .rr-names__pic legend { padding: 0 6px; font-weight: 800; color: #fbe9bf; } .rr-names__pic-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .rr-names__pic-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .rr-names__pic-img { width: 112px; height: 112px; border-radius: 12px; border: 2px solid #ffd45c; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); background: #000; } .rr-names__pic-img[hidden] { display: none; } .rr-names__pic-btns { display: flex; flex-direction: column; gap: 8px; } .rr-names__pic-btns .rr-btn { cursor: pointer; } .rr-names__pic-file:focus-visible + .rr-names__pic-row .rr-btn--gold { outline: 3px solid #fff; outline-offset: 2px; } .rr-names__pic-kind { display: flex; gap: 18px; margin: 10px 0 0; font-weight: 700; } .rr-names__pic-ok { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 212, 92, .12); font-weight: 700; line-height: 1.35; } .rr-names__pic-ok input { width: 22px; height: 22px; flex: none; margin-top: 1px; } .rr-names__pic-btns { flex-direction: row; flex-wrap: wrap; } .rr-names__pic-file:focus-visible + .rr-names__pic-btns .rr-btn--gold { outline: 3px solid #fff; outline-offset: 2px; } .rr-pic { display: grid; gap: 14px; margin-top: 12px; } .rr-pic[hidden] { display: none; } .rr-pic__frame { display: grid; gap: 8px; justify-items: center; } .rr-pic__help { margin: 0; font-weight: 700; text-align: center; } .rr-pic__stage { width: min(100%, 300px); aspect-ratio: 1; border-radius: 14px; border: 2px solid #ffd45c; background: #000; touch-action: none; cursor: grab; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); } .rr-pic__stage:active { cursor: grabbing; } .rr-pic__zoom { display: flex; align-items: center; gap: 10px; width: min(100%, 300px); font-weight: 700; } .rr-pic__zoom input { flex: 1; accent-color: #ffd45c; } .rr-pic__styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; } .rr-pic__style { position: relative; cursor: pointer; } .rr-pic__style input { position: absolute; opacity: 0; pointer-events: none; } .rr-pic__style span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .3); font-weight: 800; font-size: 14px; line-height: 1.2; text-align: center; } .rr-pic__style i { font-style: normal; font-size: 26px; line-height: 1.1; } .rr-pic__style input:checked + span { border-color: #ffd45c; background: rgba(255, 212, 92, .2); box-shadow: 0 0 12px rgba(255, 212, 92, .45); } .rr-pic__style input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; } .rr-pic__result { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: flex-start; } .rr-pic__result figure { position: relative; margin: 0; display: grid; gap: 6px; justify-items: center; font-weight: 700; font-size: 13px; } .rr-pic__out canvas { width: 160px; height: 160px; border-radius: 12px; border: 2px solid #ffd45c; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); background: #000; } .rr-pic__out.is-busy canvas { opacity: .45; } .rr-pic__wait { position: absolute; top: 62px; left: 0; right: 0; text-align: center; font-weight: 800; text-shadow: 0 1px 3px #000; } .rr-pic__wait[hidden] { display: none; } .rr-pic__screen[hidden] { display: none; } .rr-pic__screen canvas { width: auto; height: 160px; max-width: 260px; image-rendering: pixelated; border: 6px solid #222; border-radius: 6px; background: #000; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); } .rr-names__pic-ok[hidden], .rr-names__pic-kind[hidden] { display: none; } /* ---------- Light Lab v3 ---------- */ .rr-ll { display: grid; gap: 14px; margin: 0; } .rr-ll__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .rr-ll__bar label { font: 600 18px var(--f-kid); color: #fff4dc; } .rr-ll__bar select { flex: 1 1 200px; max-width: 360px; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(150, 190, 255, .4); background: #0b1838; color: #fff; font: 600 17px var(--f-kid); } .rr-ll__time { color: #b9c6e6; font-variant-numeric: tabular-nums; } .rr-ll__play { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 9px 20px 9px 10px; border-radius: 999px; border: 0; cursor: pointer; font: 600 19px var(--f-kid); color: #fff; background: linear-gradient(180deg, #4ee07f, #15913f); box-shadow: 0 0 16px rgba(34, 197, 94, .5), inset 0 -3px 0 rgba(0, 0, 0, .2); } .rr-ll__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .22); } .rr-ll__ico svg, .rr-ll__btn svg { width: 20px; height: 20px; fill: #fff; } .rr-ll__play[aria-pressed="true"] { background: linear-gradient(180deg, #ff6b78, #c3121f); box-shadow: 0 0 16px rgba(239, 43, 61, .5); } .rr-ll__stage { position: relative; border-radius: 16px; overflow: hidden; background: #050a1a; border: 2px solid rgba(247, 201, 90, .55); box-shadow: 0 0 24px rgba(80, 140, 255, .25); } .rr-ll__stage:fullscreen { display: flex; align-items: center; border: 0; border-radius: 0; } .rr-ll__stage:fullscreen .rr-ll__scroll { width: 100%; } .rr-ll__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } .rr-ll__scroll canvas { display: block; width: 100%; min-width: 720px; aspect-ratio: 1672 / 468; cursor: pointer; touch-action: pan-x; } .rr-ll__loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 600 18px var(--f-kid); color: #fde866; } .rr-ll.is-ready .rr-ll__loading { display: none; } .rr-ll__hint { position: absolute; left: 12px; bottom: 10px; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font: 500 15px var(--f-kid); pointer-events: none; } .rr-ll__picked { position: absolute; left: 12px; top: 10px; margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(255, 212, 92, .94); color: #2a1600; font: 600 16px var(--f-kid); pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .45); } .rr-ll__hint[hidden], .rr-ll__picked[hidden] { display: none; } .rr-ll__full { position: absolute; right: 10px; top: 8px; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; font-size: 20px; } .rr-ll__wiz { display: grid; gap: 14px; padding: 14px; border-radius: 16px; background: rgba(5, 14, 36, .7); border: 1px solid rgba(150, 190, 255, .28); } .rr-ll__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .rr-ll__steps button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 2px solid rgba(120, 170, 255, .28); background: rgba(18, 36, 80, .96); cursor: pointer; text-align: left; font: 600 17px/1.15 var(--f-kid); color: #b9c6e6; } .rr-ll__steps i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-style: normal; font-size: 18px; color: #2a1600; background: #7c88a8; } .rr-ll__steps small { display: block; font: 500 13px var(--f-kid); color: #b9c6e6; } .rr-ll__steps button[aria-current="step"] { border-color: #ffd45c; color: #fff; background: linear-gradient(180deg, #6e0710, #3a0208); box-shadow: 0 0 16px rgba(255, 212, 92, .45); } .rr-ll__steps button[aria-current="step"] i { background: #ffd45c; } .rr-ll__steps button.is-done i { background: #22c55e; color: #fff; } .rr-ll__steps button.is-done small { color: #9ff5bd; } .rr-ll__guide { display: flex; align-items: flex-end; gap: 12px; } .rr-ll__guide img { flex: none; width: 72px; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); } .rr-ll__say { position: relative; flex: 1; margin: 0 0 12px; padding: 12px 16px; border-radius: 18px; background: #fff; color: #1b1f3a; font: 600 clamp(18px, 2.2vw, 22px)/1.25 var(--f-kid); } .rr-ll__say::before { content: ""; position: absolute; left: -12px; bottom: 14px; border: 8px solid transparent; border-right: 12px solid #fff; border-left: 0; } .rr-ll__opts { display: grid; gap: 10px; } .rr-ll__opts[hidden], .rr-ll__done[hidden] { display: none; } .rr-ll__opts--props { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .rr-ll__opts--styles { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } .rr-ll__opts--colors { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .rr-ll__tile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 2px solid rgba(120, 170, 255, .28); background: rgba(18, 36, 80, .96); color: #f4f6ff; cursor: pointer; text-align: left; font: 600 17px/1.15 var(--f-kid); transition: transform .12s; } .rr-ll__tile:hover { transform: translateY(-2px); border-color: rgba(255, 212, 92, .6); } .rr-ll__tile[aria-pressed="true"] { border-color: #ffd45c; box-shadow: 0 0 14px rgba(255, 212, 92, .5); } .rr-ll__th { flex: none; width: 54px; height: 54px; border-radius: 10px; background-color: #000; background-repeat: no-repeat; border: 1px solid rgba(255, 255, 255, .15); } .rr-ll__tile.is-all .rr-ll__th { display: grid; place-items: center; background: linear-gradient(135deg, #ff2b2b, #ffd45c, #22c55e, #2f7dff); font-size: 26px; color: #fff; } .rr-ll__tile--style { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 12px 6px; } .rr-ll__tile--style canvas { width: 66px; height: 44px; } .rr-ll__tile--style small { font: 500 12px var(--f-kid); color: #b9c6e6; } .rr-ll__tile--color { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 4px; text-align: center; font-size: 15px; } .rr-ll__ball { width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 -5px 8px rgba(0, 0, 0, .25), 0 0 14px var(--glow, transparent); } .rr-ll__done { display: flex; flex-wrap: wrap; gap: 12px; } .rr-ll__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 20px; border-radius: 14px; border: 0; cursor: pointer; text-decoration: none; font: 600 18px var(--f-kid); color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22), 0 6px 14px rgba(0, 0, 0, .4); } .rr-ll__btn .rr-cicon { width: 22px; height: 22px; } .rr-ll__btn:hover { color: #fff; filter: brightness(1.1); } .rr-ll__btn--go { background: linear-gradient(180deg, #4ee07f, #15913f); } .rr-ll__btn--again { background: linear-gradient(180deg, #ffd96b, #e3a52c); color: #3a1d00; } .rr-ll__btn--again:hover { color: #3a1d00; } .rr-ll__btn--save { background: linear-gradient(180deg, #4b8dff, #1f5fd6); } .rr-ll__btn--send { background: linear-gradient(180deg, #ff4d5c, #c3121f); } .rr-ll__btn--ghost { background: rgba(255, 255, 255, .08); box-shadow: none; border: 2px solid rgba(120, 170, 255, .28); } .rr-ll__bk { border-radius: 16px; background: rgba(5, 14, 36, .7); border: 1px solid rgba(150, 190, 255, .28); } .rr-ll__bk summary { cursor: pointer; padding: 12px 16px; font: 600 18px var(--f-kid); color: #fff4dc; list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rr-ll__bk summary::-webkit-details-marker { display: none; } .rr-ll__bk summary::before { content: "+"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 212, 92, .16); color: #ffd45c; font-size: 20px; } .rr-ll__bk[open] summary::before { content: "\2212"; } .rr-ll__bk summary small { font: 500 14px var(--f-kid); color: #b9c6e6; } .rr-ll__bk-in { padding: 0 16px 16px; display: grid; gap: 10px; } .rr-ll__bk-in p { margin: 0; color: #b9c6e6; font-size: 14px; } .rr-ll__parts, .rr-ll__row { display: grid; grid-template-columns: 110px repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center; } .rr-ll__part { padding: 6px 4px; border-radius: 10px; border: 2px solid rgba(120, 170, 255, .28); background: rgba(18, 36, 80, .96); color: #fff; cursor: pointer; font: 600 15px var(--f-kid); } .rr-ll__part small { display: block; font: 400 11px var(--f-body); color: #b9c6e6; font-variant-numeric: tabular-nums; } .rr-ll__part[aria-pressed="true"] { border-color: #ffd45c; box-shadow: 0 0 12px rgba(255, 212, 92, .4); } .rr-ll__part.is-now { border-color: #fff; } .rr-ll__whole { padding: 6px 4px; border-radius: 10px; border: 2px solid rgba(120, 170, 255, .28); background: transparent; cursor: pointer; font: 500 13px/1.1 var(--f-kid); color: #b9c6e6; } .rr-ll__whole[aria-pressed="true"] { border-color: #ffd45c; color: #fff; } .rr-ll__rows { position: relative; display: grid; gap: 4px; } .rr-ll__rn { display: flex; align-items: center; gap: 6px; font: 500 13px var(--f-kid); color: #b9c6e6; white-space: nowrap; overflow: hidden; } .rr-ll__rt { flex: none; width: 22px; height: 15px; border-radius: 4px; background-color: #000; background-repeat: no-repeat; } .rr-ll__seg { height: 16px; border-radius: 8px; border: 0; padding: 0; cursor: pointer; background: #1a2546; } .rr-ll__seg.is-sel { outline: 2px solid #fff; outline-offset: 1px; } .rr-ll__seg.is-off { background: repeating-linear-gradient(135deg, #1a2546 0 6px, #141d38 6px 12px) !important; } .rr-ll__headwrap { position: absolute; top: 0; bottom: 0; left: 116px; right: 0; pointer-events: none; } .rr-ll__head { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px #fff; border-radius: 2px; left: 0; } .rr-ll__head[hidden] { display: none; } .rr-ll__acts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; } .rr-ll__name { display: grid; gap: 4px; flex: 1 1 200px; max-width: 320px; font: 600 15px var(--f-kid); color: #fff4dc; } .rr-ll__name input { padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(247, 201, 90, .6); background: rgba(0, 12, 30, .7); color: #fff; font: 16px var(--f-body); } .rr-ll__toast { flex-basis: 100%; min-height: 1.4em; margin: 0; font: 500 16px var(--f-kid); color: #ffd45c; } .rr-ll__watching { display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 200, 60, .15); border: 1px dashed rgba(255, 210, 90, .8); font-weight: 700; } .rr-ll__watching strong { color: #fde866; } .rr-ll__watching .rr-btn { cursor: pointer; padding: 7px 14px; } .rr-ll.is-watching .rr-ll__watching { display: flex; } .rr-ll.is-watching .rr-ll__wiz, .rr-ll.is-watching .rr-ll__bk, .rr-ll.is-watching .rr-ll__acts, .rr-ll.is-watching .rr-ll__hint, .rr-ll.is-watching .rr-ll__picked { display: none !important; } .rr-showmodal .rr-ll__stage { border-radius: 10px; } .rr-showmodal .rr-ll__scroll canvas { min-width: 0; } @media (max-width: 900px) { .rr-kc__doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .rr-kc__doors.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rr-kc__fields { grid-template-columns: 1fr 1fr; } .rr-kc__fields .rr-field:first-child { grid-column: 1 / -1; } } @media (max-width: 640px) { .rr-panel { padding-top: 36px; } .rr-kc__doors.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rr-kc__sign { font-size: 10px; padding: 3px 2px; } .rr-kc__steps a { flex-direction: column; gap: 4px; font-size: 15px; padding: 10px 4px; text-align: center; } .rr-kc__prizes, .rr-kc__picker, .rr-kc__fields { grid-template-columns: 1fr; } .rr-kc__fields .rr-field:first-child { grid-column: auto; } .rr-ll__steps button { flex-direction: column; text-align: center; gap: 4px; padding: 8px 4px; font-size: 14px; } .rr-ll__steps small { display: none; } .rr-ll__opts--props { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rr-ll__opts--styles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rr-ll__opts--colors { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rr-ll__th { width: 42px; height: 42px; } .rr-ll__guide img { width: 56px; } .rr-ll__play { margin-left: 0; } .rr-ll__parts, .rr-ll__row { grid-template-columns: 70px repeat(3, minmax(0, 1fr)); } .rr-ll__rn span:last-child { display: none; } .rr-ll__headwrap { left: 76px; } } @media (prefers-reduced-motion: reduce) { .rr-kc__door, .rr-ll__tile { transition: none; } } /* ========================================================================= * 2.7.0: the website as an app (install card, alerts, install steps, name buzz) * ====================================================================== */ .rr-app { max-width: 760px; margin: 52px auto 0; } .rr-app__install { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px 16px; align-items: center; } .rr-app__icon { width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 16px rgba(0, 0, 0, .55); } .rr-app__h { font-family: var(--f-head); font-size: clamp(22px, 2.4vw, 28px); color: var(--gold); -webkit-text-stroke: 0; margin: 0 0 4px; } .rr-app__text p, .rr-app__alerts > p { margin: 0; color: #e9e2d2; font-size: 15px; line-height: 1.45; } .rr-app__btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .rr-app__btns .rr-btn { cursor: pointer; font-family: inherit; } .rr-app__btns .rr-btn--red { flex: 1 1 auto; } .rr-app__alerts > p[data-rr-app-intro] { margin-bottom: 10px; } .rr-app__opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-weight: 700; line-height: 1.3; } .rr-app__opt small { display: block; font-weight: 400; color: #b9c1d6; font-size: 13px; } .rr-app__sw { position: relative; width: 50px; height: 30px; border-radius: 20px; border: 0; padding: 0; background: rgba(255, 255, 255, .22); cursor: pointer; transition: background .15s; } .rr-app__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .15s; } .rr-app__sw[aria-checked="true"] { background: #2fb34a; } .rr-app__sw[aria-checked="true"]::after { transform: translateX(20px); } .rr-app__sw:focus-visible, .rr-app__off:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .rr-app__msg { min-height: 0; margin: 8px 0 0 !important; font-weight: 700; color: #9fe0ff !important; } .rr-app__msg:empty { display: none; } .rr-app__off { background: none; border: 0; padding: 10px 4px; color: #ffb3b3; font: 700 14px var(--f-body); text-decoration: underline; cursor: pointer; } .rr-footer__app { margin: 0 0 4px; } .rr-footer__app a { color: var(--gold); font-weight: 800; } /* install steps */ .rr-appsheet { position: fixed; inset: 0; z-index: 1000; display: grid; align-items: end; justify-items: center; } .rr-appsheet[hidden] { display: none; } .rr-appsheet__back { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); } .rr-appsheet__box { position: relative; width: min(520px, 100%); max-height: 90vh; overflow: auto; padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; border: 2px solid var(--gold-line); border-bottom: 0; background: linear-gradient(170deg, var(--blue-1), var(--blue-2)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .6); display: grid; gap: 12px; text-align: center; outline: none; } .rr-appsheet__box h2 { font-size: 24px; color: var(--gold); -webkit-text-stroke: 0; } .rr-appsheet__box > p { margin: -6px 0 2px; color: #e2dbca; font-size: 14px; } .rr-appsheet__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: rrs; text-align: left; } .rr-appsheet__steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr) 42px; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); font-size: 15px; line-height: 1.35; } .rr-appsheet__steps li::before { counter-increment: rrs; content: counter(rrs); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #3b1a02; font-weight: 800; } .rr-appsheet__ic { width: 40px; height: 40px; border-radius: 10px; background: #fff; color: #0a84ff; display: grid; place-items: center; font: 700 13px -apple-system, "Segoe UI", sans-serif; } .rr-appsheet__ic svg { width: 24px; height: 24px; } .rr-appsheet .rr-btn { cursor: pointer; font-family: inherit; } html.rr-sheet-open { overflow: hidden; } @media (min-width: 700px) { .rr-appsheet { align-items: center; } .rr-appsheet__box { border-radius: 22px; border-bottom: 2px solid var(--gold-line); padding-bottom: 22px; } } /* name buzz */ .rr-names__buzz { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px 12px; align-items: center; margin: 14px auto; max-width: 460px; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(247, 201, 90, .45); text-align: left; font: 600 15px/1.35 var(--f-kid); } .rr-names__buzz[hidden] { display: none; } .rr-names__bell { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--gold); color: #3b1a02; } .rr-names__bell svg { width: 25px; height: 25px; } .rr-names__buzz .rr-btn { grid-column: 1 / -1; justify-content: center; font-family: var(--f-kid); font-size: 17px; } .rr-names__buzz.is-done { border-color: rgba(120, 255, 150, .6); background: rgba(47, 179, 74, .18); } @media (prefers-reduced-motion: reduce) { .rr-app__sw, .rr-app__sw::after { transition: none; } } @media (max-width: 560px) { .rr-app { margin-top: 44px; } .rr-app__install { grid-template-columns: 60px minmax(0, 1fr); } .rr-app__icon { width: 60px; height: 60px; border-radius: 14px; } } /* 2.7.2: coloring pages gallery */ .rr-kc__cgrid { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .rr-kc__cgrid > li { flex: 0 1 calc((100% - 48px) / 4); min-width: 0; } @media (max-width: 1000px) { .rr-kc__cgrid > li { flex-basis: calc((100% - 16px) / 2); } } @media (max-width: 480px) { .rr-kc__cgrid { gap: 10px; } .rr-kc__cgrid > li { flex-basis: calc((100% - 10px) / 2); } .rr-kc__cpage { padding: 7px 7px 10px; gap: 6px; } .rr-kc__cname { font-size: 15px; } .rr-kc__cprint { padding: 6px 14px; font-size: 15px; } } .rr-kc__cpage { display: grid; grid-template-rows: auto 1fr auto; align-items: center; text-align: center; gap: 8px; height: 100%; padding: 10px 10px 12px; border-radius: 16px; background: rgba(0, 20, 8, .35); border: 2px solid rgba(247, 201, 90, .45); color: #fff; text-decoration: none; transition: transform .15s, border-color .15s; } .rr-kc__cpage:hover, .rr-kc__cpage:focus-visible { transform: translateY(-3px); border-color: var(--gold); color: #fff; } .rr-kc__cpage:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .rr-kc__cpic { display: block; aspect-ratio: 4 / 3; padding: 6px; border-radius: 10px; background: #fff; overflow: hidden; } .rr-kc__cpic img { display: block; width: 100%; height: 100%; object-fit: contain; } .rr-kc__cname { font: 600 18px/1.2 var(--f-kid); text-shadow: 0 1px 3px #000; } .rr-kc__cprint { justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 8px 22px; border-radius: 999px; font: 600 17px/1.2 var(--f-kid); color: #3a1d00; background: linear-gradient(180deg, #fff0b0, #f2c24e 55%, #d89a28); border: 2px solid #9a6512; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 8px rgba(0, 0, 0, .4); } .rr-kc__cprint .rr-cicon { width: 20px; height: 20px; } @media (prefers-reduced-motion: reduce) { .rr-kc__cpage { transition: none; } } /* 2.7.5: smaller background picture on phones */ @media (max-width: 820px) { :root { --rr-scene: url(assets/img/scene-v275-m.webp); } } /* 2.7.7: long video lists on phones */ .rr-seq__more { display: none; margin: 18px 0 0; text-align: center; } .rr-seq__more .rr-btn { cursor: pointer; font-family: inherit; } @media (max-width: 700px) { .rr-seq.is-short .rr-seq__card:nth-child(n+5) { display: none; } .rr-seq.is-short .rr-seq__more { display: block; } } /* 2.8.1: text logo (Marquee, no logo uploaded) */ .rr-logo__text { display: inline-block; max-width: min(760px, 90vw); padding: 10px 0 4px; font: 400 clamp(44px, 7vw, 92px)/1.05 var(--f-script); color: var(--gold); line-height: 1.05; text-shadow: 0 0 18px rgba(255, 190, 80, .55), 0 3px 10px rgba(0, 0, 0, .8); text-wrap: balance; } /* Home page: Kids' Show Wall */ .rr-homewall { margin: 30px auto 0; max-width: 1100px; } .rr-homewall__box { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: center; } .rr-homewall__intro { color: #eaf1ff; } .rr-homewall__icon .rr-cicon { width: 44px; height: 44px; } .rr-homewall__intro h3 { margin: 6px 0 8px; font-size: 24px; color: #fde866; } .rr-homewall__intro p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.5; } .rr-homewall__prize { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(255, 212, 92, .12); border: 1px solid rgba(255, 212, 92, .4); font-size: 14.5px; } .rr-homewall__prize .rr-cicon { width: 26px; height: 26px; flex: none; } .rr-homewall__btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0 !important; } .rr-homewall__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .rr-homewall__grid[data-count="1"] { grid-template-columns: 1fr; } .rr-homewall__card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 8px 8px 10px; border-radius: 14px; text-decoration: none; color: #fff; background: rgba(0, 12, 34, .55); border: 2px solid rgba(150, 190, 255, .45); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); transition: transform .15s; } .rr-homewall__card:hover { transform: translateY(-2px); color: #fff; } .rr-homewall__card.is-winner { border-color: #ffd45c; box-shadow: 0 0 20px rgba(255, 200, 60, .55); } .rr-homewall__pic { position: relative; display: block; border-radius: 10px; overflow: hidden; background: #000; } .rr-homewall__pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .2s; } .rr-homewall__card:hover .rr-homewall__pic img { transform: scale(1.04); } .rr-homewall__meta { display: block; padding: 8px 48px 0 4px; } .rr-homewall__title { display: block; font-size: 15px; color: #fde866; } .rr-homewall__by { display: block; font-size: 13.5px; color: #d8e4ff; } .rr-homewall__grid[data-count="1"] .rr-homewall__title { font-size: 18px; } .rr-homewall__hearts { position: absolute; right: 12px; bottom: 12px; font: 800 14px var(--f-body, inherit); color: #fff; } .rr-homewall__hearts b { color: #ff3b5c; font-size: 20px; } @media (max-width: 820px) { .rr-homewall__box { grid-template-columns: 1fr; } .rr-homewall__intro { text-align: center; } .rr-homewall__prize, .rr-homewall__btns { justify-content: center; } } /* Kids' Corner: the Show Wall under the activities */ .rr-kc__wallbox { margin-top: 10px; } .rr-kc__wallbox .rr-wall { margin-top: 0; } .rr-kc__wallbox .rr-wall .rr-kc__h { margin-top: 0; } .rr-wall__first { margin: 10px 0 0; text-align: center; } .rr-kc__wall-link { margin: -6px 0 0; text-align: center; } .rr-kc__wall-link a { color: #fde866; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; } .rr-kc__wallbox .rr-wall__grid { grid-template-columns: repeat(auto-fit, minmax(230px, 280px)); justify-content: center; } .rr-kc__wallbox .rr-wall .rr-kc__h, .rr-kc__wallbox .rr-wall .rr-kc__note { text-align: center; } /* Tonight's Show: Pick the next song (Remote Falcon) */ .rr-rfpick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 0; } .rr-rfpick[hidden] { display: none; } .rr-rfpick .rr-btn .rr-cicon { width: 22px; height: 22px; } .rr-rfpick__note { font-size: 14px; color: #f3ead8; } .rr-rfpick.is-preview { padding: 8px 10px; border: 2px dashed rgba(255, 212, 92, .6); border-radius: 12px; } .rr-rfpick__preview { flex-basis: 100%; font-size: 12.5px; font-style: normal; color: #ffd45c; } /* Tonight's Show: Listen on Your Phone (PulseMesh or similar), with an optional QR code on computers */ .rr-listen { display: flex; align-items: center; gap: 10px 16px; } .rr-listen__main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; flex: 1 1 auto; min-width: 0; } .rr-listen .rr-btn .rr-cicon { width: 22px; height: 22px; } .rr-listen__note { font-size: 14px; color: #f3ead8; } .rr-listen__qr { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; } .rr-listen__code { width: 84px; height: 84px; padding: 5px; background: #fff; border-radius: 8px; } .rr-listen__qr span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #f0dcc0; white-space: nowrap; } @media (max-width: 860px), (hover: none) and (pointer: coarse) { .rr-listen__qr { display: none; } } /* Pick the Next Song (Remote Falcon) pop-up */ .rr-rf { width: min(560px, 94vw); } .rr-rf__box { padding: 18px 16px 14px; color: #fff; max-height: 86vh; overflow-y: auto; } .rr-rf__h { display: flex; align-items: center; gap: 8px; margin: 0 30px 8px 0; font-size: 22px; color: #fde866; } .rr-rf__h .rr-cicon { width: 28px; height: 28px; } .rr-rf__head p { margin: 0 0 4px; font-size: 14.5px; color: #e6ecff; } .rr-rf__how { opacity: .85; font-size: 13.5px !important; } .rr-rf__msg { min-height: 1.2em; margin: 8px 0; font-weight: 700; font-size: 14.5px; } .rr-rf__msg.is-ok { color: #6ee7a0; } .rr-rf__msg.is-bad { color: #ff8a8a; } .rr-rf__msg.is-warn { color: #ffd45c; } .rr-rf__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rr-rf__song { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid rgba(150, 190, 255, .35); border-radius: 10px; background: rgba(2, 33, 77, .7); color: #fff; font: inherit; text-align: left; cursor: pointer; } .rr-rf__song:hover { border-color: #ffd45c; } .rr-rf__song.is-busy { opacity: .6; } .rr-rf__song img, .rr-rf__note { flex: none; width: 44px; height: 44px; border-radius: 6px; object-fit: cover; } .rr-rf__note { display: grid; place-items: center; background: rgba(255, 255, 255, .08); font-size: 22px; color: #ffd45c; } .rr-rf__t { flex: 1; min-width: 0; } .rr-rf__t b { display: block; font-size: 15px; overflow-wrap: anywhere; } .rr-rf__t small { display: block; font-size: 12.5px; color: #c9d6f5; } .rr-rf__votes { flex: none; font-size: 12.5px; color: #ffd45c; } .rr-rf__go { flex: none; padding: 5px 12px; border-radius: 999px; background: linear-gradient(180deg, #ff2b3d, #c70d1e); font-weight: 800; font-size: 13px; } .rr-rf__empty { opacity: .8; } /* ---------- Every box looks the same, in all three looks: colored bulbs round the edge, the garland along the top and snow on top (the home cards, the Fan Favorite box and the contest prize box used to have a thin gold edge and no garland) ---------- */ .rr-kids-teaser, .rr-ff, .rr-kc__prize { --bulbs-h: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2288%22%20height%3D%2212%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%226%22%20r%3D%223.2%22%20fill%3D%22%23ff3b30%22/%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%226%22%20r%3D%225.5%22%20fill%3D%22%23ff3b30%22%20opacity%3D%22.35%22/%3E%3Ccircle%20cx%3D%2233%22%20cy%3D%226%22%20r%3D%223.2%22%20fill%3D%22%23ffd23c%22/%3E%3Ccircle%20cx%3D%2233%22%20cy%3D%226%22%20r%3D%225.5%22%20fill%3D%22%23ffd23c%22%20opacity%3D%22.35%22/%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%226%22%20r%3D%223.2%22%20fill%3D%22%233cff6a%22/%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%226%22%20r%3D%225.5%22%20fill%3D%22%233cff6a%22%20opacity%3D%22.35%22/%3E%3Ccircle%20cx%3D%2277%22%20cy%3D%226%22%20r%3D%223.2%22%20fill%3D%22%234aa8ff%22/%3E%3Ccircle%20cx%3D%2277%22%20cy%3D%226%22%20r%3D%225.5%22%20fill%3D%22%234aa8ff%22%20opacity%3D%22.35%22/%3E%3C/svg%3E"); --bulbs-v: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2288%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2211%22%20r%3D%223.2%22%20fill%3D%22%23ff3b30%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2211%22%20r%3D%225.5%22%20fill%3D%22%23ff3b30%22%20opacity%3D%22.35%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2233%22%20r%3D%223.2%22%20fill%3D%22%23ffd23c%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2233%22%20r%3D%225.5%22%20fill%3D%22%23ffd23c%22%20opacity%3D%22.35%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2255%22%20r%3D%223.2%22%20fill%3D%22%233cff6a%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2255%22%20r%3D%225.5%22%20fill%3D%22%233cff6a%22%20opacity%3D%22.35%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2277%22%20r%3D%223.2%22%20fill%3D%22%234aa8ff%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2277%22%20r%3D%225.5%22%20fill%3D%22%234aa8ff%22%20opacity%3D%22.35%22/%3E%3C/svg%3E"); } .rr-kids-teaser, .rr-ff, .rr-kc__prize { border: 7px solid transparent; border-radius: var(--radius); background-clip: padding-box; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 186, 72, .22), 0 14px 34px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 230, 160, .14), inset 0 0 40px rgba(0, 0, 0, .35); background: radial-gradient(ellipse at 50% 0%, rgba(160, 10, 10, .45), transparent 65%) padding-box, linear-gradient(180deg, #5a0303, #3a0101) padding-box, var(--bulbs-h) 0 0 / 88px 7px repeat-x border-box, var(--bulbs-h) 0 100% / 88px 7px repeat-x border-box, var(--bulbs-v) 0 0 / 7px 88px repeat-y border-box, var(--bulbs-v) 100% 0 / 7px 88px repeat-y border-box, linear-gradient(#5c0505, #5c0505) border-box; } .rr-kids-teaser--songs { background: radial-gradient(ellipse at 30% 0%, rgba(40, 110, 220, .35), transparent 65%) padding-box, linear-gradient(180deg, #02214d, #00122e) padding-box, var(--bulbs-h) 0 0 / 88px 7px repeat-x border-box, var(--bulbs-h) 0 100% / 88px 7px repeat-x border-box, var(--bulbs-v) 0 0 / 7px 88px repeat-y border-box, var(--bulbs-v) 100% 0 / 7px 88px repeat-y border-box, linear-gradient(#0a1d44, #0a1d44) border-box; } .rr-ff.is-today { background: linear-gradient(90deg, #8a6000, #c88a00 50%, #8a6000) padding-box, var(--bulbs-h) 0 0 / 88px 7px repeat-x border-box, var(--bulbs-h) 0 100% / 88px 7px repeat-x border-box, var(--bulbs-v) 0 0 / 7px 88px repeat-y border-box, var(--bulbs-v) 100% 0 / 7px 88px repeat-y border-box, linear-gradient(#5c3a00, #5c3a00) border-box; } .rr-kids-teaser:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 26px rgba(255, 200, 60, .5), 0 14px 34px rgba(0, 0, 0, .55); } .rr-panel:not(.rr-banner)::after, .rr-kids-teaser::after, .rr-ff::after, .rr-kc__prize::after { content: ""; position: absolute; left: 14px; right: 14px; top: -6px; height: 30px; pointer-events: none; display: block; background: url(assets/img/garland-v137.webp) center / auto 30px repeat-x; opacity: .9; } /* No garland strand across the top of the boxes: it covered the snow. Each box keeps its colored-bulb edge and the snow on top. */ .rr-panel::after, .rr-kids-teaser::after, .rr-ff::after, .rr-kc__prize::after, .rr-banner::after { content: none !important; display: none !important; } /* ---------- Even spacing between boxes, on every page and screen size ---------- Each box leaves room above it for its snow (26px), and every gap between boxes, or between a section title and its box, is the same 12px of clear space. */ .rr-panel, .rr-kids-teaser, .rr-ff, .rr-kc__prize { margin-top: 26px; } .rr-grid, .rr-explore, .rr-statgrid { row-gap: 12px; } .rr-explore, #support, .rr-grid--support { margin-top: 12px; } .rr-explore .rr-kids-teaser { margin-top: 26px; } .rr-ff { margin-bottom: 0; } .rr-ribbon { margin-bottom: 12px; } .rr-ff { margin-bottom: 12px; } .rr-content + .rr-content { margin-top: 38px; } /* every section title sits the same distance below the box above it */ .rr-visit, .rr-stats-sec, .rr-guestbook { margin-top: 28px; } .rr-gb-intro { margin-top: 0; margin-bottom: 12px; } .rr-stats-sec__text { margin-top: 0; margin-bottom: 12px; } .rr-kc, .rr-kc__home, .rr-kc__act { gap: 12px; } /* ---------- Box colors (Customize → Look → Box colors): Classic's mix, or every box in one color. Only the colors change; the snow, bulbs, spacing and layout are the same. The status banner keeps its own colors (on, canceled, off season), since they tell visitors something. ---------- */ body.rr-boxes--red .rr-panel--red, body.rr-boxes--red .rr-panel--green, body.rr-boxes--red .rr-panel--blue, body.rr-boxes--red .rr-panel--night, body.rr-boxes--red .rr-kids-teaser, body.rr-boxes--red .rr-kids-teaser--songs, body.rr-boxes--red .rr-ff:not(.is-today), body.rr-boxes--red .rr-kc__prize { background: radial-gradient(ellipse at 50% 0%, rgba(160, 10, 10, .45), transparent 65%) padding-box, linear-gradient(180deg, #5a0303, #3a0101) padding-box, var(--bulbs-h) 0 0 / 88px 7px repeat-x border-box, var(--bulbs-h) 0 100% / 88px 7px repeat-x border-box, var(--bulbs-v) 0 0 / 7px 88px repeat-y border-box, var(--bulbs-v) 100% 0 / 7px 88px repeat-y border-box, linear-gradient(#5c0505, #5c0505) border-box; } body.rr-boxes--red .rr-stat, body.rr-boxes--red .rr-stat:nth-child(even) { background: radial-gradient(ellipse at 50% 0%, rgba(160, 10, 10, .45), transparent 70%), linear-gradient(180deg, #5a0303, #2e0101); box-shadow: 0 0 16px rgba(255, 40, 30, .4), inset 0 0 18px rgba(0, 0, 0, .4); } body.rr-boxes--green .rr-panel--red, body.rr-boxes--green .rr-panel--green, body.rr-boxes--green .rr-panel--blue, body.rr-boxes--green .rr-panel--night, body.rr-boxes--green .rr-kids-teaser, body.rr-boxes--green .rr-kids-teaser--songs, body.rr-boxes--green .rr-ff:not(.is-today), body.rr-boxes--green .rr-kc__prize { background: radial-gradient(ellipse at 50% 0%, rgba(30, 160, 60, .35), transparent 65%) padding-box, linear-gradient(180deg, #054a15, #022a0b) padding-box, var(--bulbs-h) 0 0 / 88px 7px repeat-x border-box, var(--bulbs-h) 0 100% / 88px 7px repeat-x border-box, var(--bulbs-v) 0 0 / 7px 88px repeat-y border-box, var(--bulbs-v) 100% 0 / 7px 88px repeat-y border-box, linear-gradient(#0d3a12, #0d3a12) border-box; } body.rr-boxes--green .rr-stat, body.rr-boxes--green .rr-stat:nth-child(even) { background: radial-gradient(ellipse at 50% 0%, rgba(30, 160, 60, .35), transparent 70%), linear-gradient(180deg, #054a15, #022a0b); box-shadow: 0 0 16px rgba(40, 220, 90, .35), inset 0 0 18px rgba(0, 0, 0, .4); } body.rr-boxes--blue .rr-panel--red, body.rr-boxes--blue .rr-panel--green, body.rr-boxes--blue .rr-panel--blue, body.rr-boxes--blue .rr-panel--night, body.rr-boxes--blue .rr-kids-teaser, body.rr-boxes--blue .rr-kids-teaser--songs, body.rr-boxes--blue .rr-ff:not(.is-today), body.rr-boxes--blue .rr-kc__prize { background: radial-gradient(ellipse at 30% 0%, rgba(40, 110, 220, .35), transparent 65%) padding-box, linear-gradient(180deg, #02214d, #00122e) padding-box, var(--bulbs-h) 0 0 / 88px 7px repeat-x border-box, var(--bulbs-h) 0 100% / 88px 7px repeat-x border-box, var(--bulbs-v) 0 0 / 7px 88px repeat-y border-box, var(--bulbs-v) 100% 0 / 7px 88px repeat-y border-box, linear-gradient(#0a1d44, #0a1d44) border-box; } body.rr-boxes--blue .rr-stat, body.rr-boxes--blue .rr-stat:nth-child(even) { background: radial-gradient(ellipse at 50% 0%, rgba(40, 110, 220, .35), transparent 70%), linear-gradient(180deg, #02214d, #00122e); box-shadow: 0 0 16px rgba(70, 150, 255, .35), inset 0 0 18px rgba(0, 0, 0, .4); }