/* Theme Name: ICRT Theme URI: https://www.icrt.com.tw/ Description: ICRT — International Community Radio Taipei. Child theme of SmartMag, seeded from the DigiTech demo. All ICRT customisation lives here; the parent theme is never modified. Author: Cubeworks Author URI: https://www.icrt.com.tw/ Template: smart-mag Version: 0.1.0 Text Domain: icrt */ /* --------------------------------------------------------------------------- ICRT palette DigiTech ships #d71d4f as its main colour. ICRT's on-air identity is red on near-black, so we keep a red accent but shift it to the station's warmer, more saturated red and darken the neutral end. --------------------------------------------------------------------------- */ :root { --icrt-accent: #1160d4; --icrt-accent-dark: #0c47a0; --icrt-ink: #14161a; --icrt-ink-soft: #2a2e35; --icrt-paper: #ffffff; --icrt-mist: #f4f5f7; --icrt-line: #e3e5ea; /* One shared page measure. The site was boxed at 1200px, which left a third of a normal desktop empty on every page. */ --icrt-muted: #6b7280; --icrt-max: min(1720px, 94vw); /* Instruments — the live widgets: the on-air hero, the traffic map, the music-log figure. Near-black surfaces with one warm LED signal, the vernacular of radio hardware. Blue stays the site's accent; amber lights only what is live and true. See docs/design-language.md, "Instruments". */ --icrt-instrument: #121316; --icrt-instrument-raised: #1b1d22; --icrt-instrument-line: rgba(255, 255, 255, .08); --icrt-dot-off: #2b2e35; --icrt-signal: #ff7a1a; --icrt-signal-deep: #d4560c; --icrt-signal-glow: rgba(255, 122, 26, .35); } /* The LED grid every instrument is built on: 3px rounded cells at a 7px pitch, unlit. A lit cell is the same square in --icrt-signal. The mask keeps the colour in a token, which a data-URI background could not. */ .icrt-dotgrid { position: relative; isolation: isolate; background: var(--icrt-instrument); } .icrt-dotgrid::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--icrt-dot-off); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Crect x='2' y='2' width='3' height='3' rx='.6'/%3E%3C/svg%3E") 0 0 / 7px 7px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Crect x='2' y='2' width='3' height='3' rx='.6'/%3E%3C/svg%3E") 0 0 / 7px 7px; pointer-events: none; } /* --- dark theme ----------------------------------------------------------- SmartMag flips between .s-light and .s-dark. Every surface in the Cubeworks components is drawn from these tokens, so redefining them here turns the whole site over — the roster, the schedule, the show index, the events diary, the podcast list and the music log included. Anything that hardcoded a colour instead would have stayed stubbornly white, which is exactly what dark mode looked like before. */ html.s-dark { --icrt-ink: #e9edf4; --icrt-ink-soft: #a9b3c1; --icrt-muted: #8b95a5; --icrt-paper: #151a22; --icrt-mist: #1c2330; --icrt-line: #2b3440; /* The accent is lifted: #1160d4 is legible on white but muddy on near-black. */ --icrt-accent: #4d92f5; --icrt-accent-dark: #1f6fd8; } /* Room for the floating player, which is fixed over the foot of the page. */ body { padding-bottom: 5.5rem; } @media (max-width: 40rem) { body { padding-bottom: 4.5rem; } } /* --- Language switcher ---------------------------------------------------- */ .icrt-lang-switch { display: flex; align-items: center; } .icrt-lang-list { display: flex; gap: .4rem; align-items: center; } .icrt-lang-item a { display: inline-block; padding: .15rem .5rem; border: 1px solid var(--icrt-line); border-radius: 3px; font-size: .72rem; line-height: 1.7; letter-spacing: .04em; text-decoration: none; white-space: nowrap; } .icrt-lang-item.is-current a { background: var(--icrt-accent); border-color: var(--icrt-accent); color: var(--icrt-paper); } /* === Front page ============================================================ Ordered by what a listener wants: what is on now and how to hear it, fast routes to the rest, the newsroom, then the studio. ========================================================================== */ .icrt-front { --icrt-gap: clamp(1.5rem, 3vw, 2.5rem); } /* --- hero ---------------------------------------------------------------- */ .icrt-hero { /* The wash is the on-air show's own colour: front-page.php sets the deep stop of its Palette as --icrt-hero-tint inline. The default is the accent blue, for a gap in the schedule. */ --icrt-hero-tint: #1160d4; background: radial-gradient(120% 150% at 8% 0%, color-mix(in srgb, var(--icrt-hero-tint) 75%, transparent) 0%, transparent 60%), linear-gradient(140deg, #0e1522 0%, #0a0d13 100%); color: #fff; padding: clamp(2rem, 5vw, 3.25rem) 1.25rem; } .icrt-hero__inner { /* Wide on purpose. At 1200px the band was a short headline, a gap the width of a whole column, and a video — on any real desktop the middle was dead. */ max-width: min(1720px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr) minmax(24rem, 30rem); gap: 0; /* stretch, not center: the studio column runs the full height of the band. */ align-items: stretch; min-height: 24rem; } /* The section no longer pads itself — each column does, so the video can sit flush against the top and bottom edges of the band. */ .icrt-hero { padding: 0; } .icrt-hero__main, .icrt-hero__next { padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2.25rem); align-self: center; } @media (max-width: 68rem) { .icrt-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); } .icrt-hero__next { display: none; } } @media (max-width: 48rem) { .icrt-hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; } } /* --- later today --------------------------------------------------------- The question a listener asks straight after "what is on now". It used to be three sections down the page; here it fills the gap it was leaving. */ .icrt-hero__next { border-left: 1px solid rgba(255, 255, 255, 0.08); } .icrt-hero__next-title { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #9dc2f5; } .icrt-hero__next-list { list-style: none; margin: 0; padding: 0; } .icrt-hero__next-row { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .icrt-hero__next-time { flex: 0 0 auto; font-size: 0.8rem; font-weight: 700; color: #9dc2f5; font-variant-numeric: tabular-nums; } .icrt-hero__next-show { color: #e8ecf3; text-decoration: none; font-size: 0.92rem; font-weight: 600; } .icrt-hero__next-show:hover { color: #fff; text-decoration: underline; } .icrt-hero__next-all { display: inline-block; margin-top: 0.85rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: #9dc2f5; text-decoration: none; } .icrt-hero__next-all:hover { color: #fff; text-decoration: underline; } /* --- live studio panel --------------------------------------------------- Radio's problem is that there is nothing to look at. The station already streams studio video to Twitch, so the hero shows it rather than describing it, edge to edge down the right of the band. The player is muted, so it never fights the audio stream. */ .icrt-hero__side { display: flex; padding: 0; min-height: 15rem; } .icrt-hero__studio { position: relative; flex: 1; display: flex; flex-direction: column; background: #000; border-left: 1px solid rgba(255, 255, 255, 0.1); } /* Over the video rather than above it: a header bar would eat the height the player is here to use. */ .icrt-hero__studio-title { position: absolute; top: 0.7rem; left: 0.85rem; z-index: 2; display: flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.28rem 0.6rem; border-radius: 999px; background: rgba(10, 13, 19, 0.72); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #fff; pointer-events: none; } .icrt-hero__studio .cw-twitch { display: flex; flex: 1; margin: 0; } .icrt-hero__studio iframe { display: block; width: 100%; /* Beats the embed's own height attribute so it fills the band. */ height: 100%; border: 0; } /* The link is a fallback for a blocked iframe, not a caption — it must not take height from the player. */ .icrt-hero__studio .cw-twitch__fallback { display: none; } /* --- the on-air instrument ----------------------------------------------- One of the four instruments (docs/design-language.md, "Instruments"): a two-tone live badge, a slot reading, a round play control and an LED frequency readout. Amber lights only what is live and true — the dot, the bar, the digits, the lit transmitter. Blue stays for the links. */ .icrt-hero__live { display: inline-flex; align-items: stretch; margin: 0; border-radius: 6px; overflow: hidden; font-size: .8125rem; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; } .icrt-hero__live-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; background: var(--icrt-signal); } /* The one thing on the site allowed to pulse: a dark dot in the lit square, once a second, because the station genuinely is live. */ .icrt-hero__live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--icrt-instrument); animation: icrt-live-pulse 1s ease-in-out infinite; } @keyframes icrt-live-pulse { 50% { transform: scale(.5); opacity: .55; } } .icrt-hero__live-label { padding: .45rem .65rem; background: #eef1f5; color: var(--icrt-ink); } /* The studio chip keeps its own small dot. */ .icrt-hero__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--icrt-accent); box-shadow: 0 0 0 0 rgba(17, 96, 212, .8); animation: icrt-pulse 2s infinite; } @keyframes icrt-pulse { 70% { box-shadow: 0 0 0 12px rgba(17, 96, 212, 0); } 100% { box-shadow: 0 0 0 0 rgba(17, 96, 212, 0); } } @media (prefers-reduced-motion: reduce) { .icrt-hero__dot, .icrt-hero__live-dot { animation: none; } } .icrt-hero__show { margin: .9rem 0 .3rem; font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.04; letter-spacing: -.025em; color: #fff; } /* --- slot reading: the minutes left, then the bar ------------------------ */ .icrt-hero__slot { max-width: 30rem; margin: .9rem 0 0; } .icrt-hero__left { display: flex; align-items: baseline; gap: .3rem; margin: 0 0 .6rem; font-size: .875rem; color: #aeb6c2; font-variant-numeric: tabular-nums; } .icrt-hero__left-part { display: inline-flex; align-items: baseline; gap: .3rem; } .icrt-hero__left-part[hidden] { display: none !important; } .icrt-hero__figure { font-size: clamp(2rem, 3.6vw, 2.5rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: #fff; } .icrt-hero__bar { height: 4px; border-radius: 2px; background: var(--icrt-dot-off); overflow: hidden; } .icrt-hero__bar-fill { display: block; height: 100%; background: var(--icrt-signal); box-shadow: 0 0 8px var(--icrt-signal-glow); transition: width .6s ease; } .icrt-hero__ends { display: flex; justify-content: space-between; margin: .45rem 0 0; font-size: .78rem; color: #aeb6c2; font-variant-numeric: tabular-nums; } /* --- the screen: the display at the left, the disc at the right ---------- */ /* The one visually-hidden utility the theme needs; the parent ships .screen-reader-text for AMP pages only. */ .icrt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Element-qualified with explicit resets: SmartMag styles bare