/* Geometry FM — site styles. Brand hue is switched with : red is the current brand (2025 site), violet the original one. */ @font-face { font-family: "Unbounded"; src: url("fonts/unbounded-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Unbounded"; src: url("fonts/unbounded-cyrillic-wght-normal.woff2") format("woff2-variations"); font-weight: 200 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Onest"; src: url("fonts/onest-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Onest"; src: url("fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* ------------------------------------------------------------------ tokens */ :root, :root[data-brand="violet"] { --brand: #632bed; /* logo colour of the first Geometry FM */ --brand-strong: #4a17c9; --brand-soft: #e9e2ff; --paper: #f7f4ff; --ink: #1c1236; --muted: #625887; --line: #dcd3f8; --on-brand: #ffffff; --signal: #ff3d7f; /* on-air only */ } :root[data-brand="red"] { --brand: #af2b1e; /* brick red of the 2025 site */ --brand-strong: #8c2016; --brand-soft: #f6e2df; --paper: #f3f1f0; --ink: #221412; --muted: #74605c; --line: #e2d5d2; --on-brand: #ffffff; --signal: #e8452e; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]), :root[data-brand="violet"]:not([data-theme="light"]) { --brand: #8f66ff; --brand-strong: #a98aff; --brand-soft: #251852; --paper: #120b28; --ink: #f1ecff; --muted: #a59bc9; --line: #2f2358; --on-brand: #ffffff; --signal: #ff5c93; } :root[data-brand="red"]:not([data-theme="light"]) { --brand: #d9483a; --brand-strong: #ec6a5d; --brand-soft: #34150f; --paper: #160d0c; --ink: #f8eeec; --muted: #bd9892; --line: #42211c; --on-brand: #ffffff; --signal: #ff6a4d; } } /* ------------------------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 "Onest", system-ui, sans-serif; font-feature-settings: "tnum" 0; } a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.2em; } a:hover { text-decoration-color: currentColor; } :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; } button { font: inherit; color: inherit; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { width: min(1120px, 100% - 2rem); margin-inline: auto; } /* ------------------------------------------------------------------ header */ .top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; } .top__logo { display: block; width: 76px; color: var(--brand); } .top__logo svg { display: block; width: 100%; height: auto; } .top__nav { display: flex; gap: 0.25rem; align-items: center; } .chip { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.875rem; cursor: pointer; text-decoration: none; } .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ------------------------------------------------------------------ hero */ .hero { padding-block: 1rem 3rem; } .stage { position: relative; color: var(--brand); } .stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 820 / 304; } .stage__tagline { margin: 0.75rem 0 0; font: 500 clamp(1rem, 2.2vw, 1.35rem)/1.3 "Unbounded", sans-serif; letter-spacing: -0.01em; color: var(--muted); } .now { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.5rem 2.5rem; margin-top: clamp(2rem, 5vw, 3.5rem); } .now__status { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; color: var(--muted); font-size: 0.95rem; } .onair { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--muted); flex: none; } .is-online .onair { background: var(--signal); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--signal) 22%, transparent); } .now__artist { margin: 0; font: 700 clamp(2.1rem, 6vw, 4.6rem)/1.02 "Unbounded", sans-serif; letter-spacing: -0.035em; overflow-wrap: anywhere; max-width: 18ch; } .now__song { margin: 0.6rem 0 0; font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.3; max-width: 40ch; overflow-wrap: anywhere; } .now__action { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .now__server { margin: 0; color: var(--muted); font-size: 0.85rem; min-height: 1.3em; } .play { display: inline-flex; align-items: center; gap: 0.85rem; height: 4.5rem; padding: 0 2rem 0 1.4rem; border: 0; border-radius: 999px; background: var(--brand); color: var(--on-brand); font: 600 1.15rem/1 "Unbounded", sans-serif; letter-spacing: -0.01em; cursor: pointer; transition: background-color 0.15s; white-space: nowrap; } .play:hover { background: var(--brand-strong); } .play:active { transform: translateY(1px); } .play svg { width: 2.1rem; height: 2.1rem; flex: none; } .play .icon-pause, .play .icon-wait { display: none; } .play[data-state="playing"] .icon-play { display: none; } .play[data-state="playing"] .icon-pause { display: block; } .play[data-state="loading"] .icon-play { display: none; } .play[data-state="loading"] .icon-wait { display: block; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.95rem; } .quality { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; border: 0; padding: 0; margin: 0; } .quality legend { float: left; margin-right: 0.5rem; color: var(--muted); } .quality input { position: absolute; opacity: 0; pointer-events: none; } .quality label { border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.9rem; cursor: pointer; font-variant-numeric: tabular-nums; } .quality input:checked + label { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .quality input:focus-visible + label { outline: 3px solid var(--brand); outline-offset: 2px; } .quality label[hidden] { display: none; } .where { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: center; color: var(--muted); } .where strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .where select { font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.7rem; } .notice { margin: 1rem 0 0; color: var(--muted); font-size: 0.95rem; min-height: 1.5em; } /* ------------------------------------------------------------------ sections */ .lower { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem 4rem; padding-block: 3rem 4rem; border-top: 1px solid var(--line); } .lower h2 { margin: 0 0 1.25rem; font: 600 1.25rem/1.2 "Unbounded", sans-serif; letter-spacing: -0.02em; } .lower p { margin: 0 0 1rem; color: var(--muted); max-width: 46ch; } .history { list-style: none; margin: 0; padding: 0; } .history li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); } .history time { color: var(--muted); font-variant-numeric: tabular-nums; } .history .artist { font-weight: 600; } .history .empty { grid-column: 1 / -1; color: var(--muted); } .history li:has(.empty) { border: 0; } .streams { list-style: none; margin: 0; padding: 0; } .streams li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); } .streams .name { font-weight: 600; min-width: 8.5rem; font-variant-numeric: tabular-nums; } .streams .links { display: flex; gap: 0.9rem; flex-wrap: wrap; } .linklike { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.2em; } .linklike:hover { text-decoration-color: currentColor; } /* ------------------------------------------------------------------ footer */ .foot { padding-block: 2rem 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; } .foot p { margin: 0; } /* ------------------------------------------------------------------ page without the player */ .no-player [data-player] { display: none !important; } .no-player .now { grid-template-columns: 1fr; } /* ------------------------------------------------------------------ small screens */ @media (max-width: 760px) { .now { grid-template-columns: 1fr; } .now__action { align-items: stretch; text-align: center; } .play { width: 100%; justify-content: center; } .lower { grid-template-columns: 1fr; } .controls { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .play[data-state="loading"] .icon-wait { animation: none; } }