/* plyraudio.com — hand-written CSS. Every color/font/shape decision comes from CSS custom properties emitted per theme by build.mjs from /themes/*.json. The active theme is set via data-theme on (whole site) or on any element (scoped preview, e.g. gallery cards). */ /* ---------- self-hosted fonts ---------- */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/newsreader-var.woff2') format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('/fonts/newsreader-var-italic.woff2') format('woff2'); } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/spacemono-400.woff2') format('woff2'); } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/spacemono-700.woff2') format('woff2'); } @font-face { font-family: 'Sacramento'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sacramento-400.woff2') format('woff2'); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--on-bg-solid); font-family: var(--f-body); font-size: 17px; line-height: 1.6; min-height: 100vh; transition: background .35s ease, color .35s ease; } img, svg { display: block; max-width: 100%; } a { color: inherit; } :focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--accent-solid); color: var(--on-accent-solid); } .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; } /* ---------- type ---------- */ h1, h2, h3 { font-family: var(--f-display); color: var(--on-bg-solid); line-height: 1.12; font-weight: 650; letter-spacing: -0.015em; } .eyebrow { font-family: var(--f-label); font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-solid); } .lede { color: var(--muted-solid); font-size: 1.15rem; max-width: 34em; } .wordmark { display: inline-flex; text-decoration: none; } /* logo.png is black-on-transparent; its alpha is used as a mask so the mark always renders in the current theme's text color */ .logo { display: inline-block; width: 96px; height: 64px; background: var(--on-bg-solid); -webkit-mask: url('/logo.png') no-repeat center / contain; mask: url('/logo.png') no-repeat center / contain; transition: background .35s ease; } .logo--small { width: 78px; height: 52px; } /* ---------- header / footer ---------- */ .site-header { padding: 22px 0; } .site-header .container { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .site-header nav { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; } .nav-link { font-family: var(--f-label); font-size: .92rem; text-decoration: none; color: var(--muted-solid); } .nav-link:hover { color: var(--on-bg-solid); } .nav-link[aria-current="page"] { color: var(--on-bg-solid); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--accent-solid); text-decoration-thickness: 2px; } .site-footer { margin-top: 96px; border-top: 1px solid var(--line-solid); padding: 40px 0 56px; } .site-footer .container { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; } .site-footer .fine { color: var(--faint-solid); font-size: .85rem; font-family: var(--f-label); } .site-footer nav { display: flex; gap: 18px; margin-left: auto; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: .55em; padding: .72em 1.35em; border-radius: var(--radius); border: var(--bw-min1) solid var(--line-solid); font-family: var(--f-label); font-size: .95rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .35s ease; } .btn-accent { background: var(--accent); color: var(--on-accent-solid); border-color: transparent; box-shadow: var(--shadow); } .btn-accent:hover { transform: translateY(-1px); } .btn-accent:active { transform: translateY(0); } .btn-quiet { background: var(--surface); color: var(--on-bg-solid); } .btn-quiet:hover { background: var(--surface-alt); } /* Google Play badge placeholder (swap for the official asset before launch) */ .play-badge { display: inline-flex; align-items: center; gap: 12px; background: #000; color: #fff; border: 1px solid #4a4a4a; border-radius: 9px; padding: 9px 18px 9px 14px; text-decoration: none; line-height: 1.15; } .play-badge svg { width: 26px; height: 28px; flex: none; } .play-badge .pb-top { display: block; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; } .play-badge .pb-bottom { display: block; font-size: 1.15rem; font-weight: 600; font-family: system-ui, sans-serif; } /* ---------- hero ---------- */ .hero { padding: 56px 0 32px; } .hero .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .hero h1 { font-size: clamp(2.5rem, 5.4vw, 3.9rem); margin: 18px 0 20px; } .hero .lede { margin-bottom: 32px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* ---------- sections ---------- */ .section { padding: 72px 0 0; } .section-head { max-width: 38em; margin-bottom: 36px; } .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 12px 0 10px; } .section-head p { color: var(--muted-solid); } /* features */ .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .feature { background: var(--surface); border: var(--bw) solid var(--line-solid); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; transition: background .35s ease; } .feature h3 { font-size: 1.18rem; margin: 14px 0 8px; } .feature p { color: var(--muted-solid); font-size: .98rem; } .feature .glyph { width: 40px; height: 40px; border-radius: calc(var(--radius) * .66); background: var(--surface-alt); display: grid; place-items: center; color: var(--accent-solid); } /* screenshots */ .shots { display: grid; grid-template-columns: repeat(3, minmax(0, 230px)); gap: 24px; } .shot { aspect-ratio: 9 / 18; width: 100%; border: 1.5px dashed var(--faint-solid); border-radius: 28px; display: grid; place-items: center; text-align: center; padding: 20px; } .shot .what { font-family: var(--f-display); color: var(--on-bg-solid); font-size: 1.05rem; } .shot .hint { font-family: var(--f-label); color: var(--faint-solid); font-size: .75rem; margin-top: 8px; } /* ---------- theme gallery ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; } .theme-card { display: block; text-decoration: none; background: var(--surface); border: var(--bw) solid var(--line-solid); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform .18s ease; } .theme-card:hover { transform: translateY(-3px); } .theme-card .preview { padding: 0; } .theme-card .caption { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; } .theme-card .t-name { font-family: var(--f-display); font-weight: 650; color: var(--on-bg-solid); } .theme-card .t-author { color: var(--faint-solid); font-size: .85rem; font-family: var(--f-label); } .theme-card .t-mode { margin-left: auto; font-family: var(--f-label); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-solid); border: 1px solid var(--line-solid); border-radius: 999px; padding: .2em .8em; } /* landing theme strip reuses gallery cards */ .theme-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; } /* ---------- theme detail page ---------- */ .theme-hero { padding: 40px 0 0; } .theme-hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .theme-hero h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); margin: 14px 0 6px; } .theme-hero .byline { color: var(--muted-solid); font-family: var(--f-label); margin-bottom: 28px; } .theme-hero .actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 28px 0 10px; } .theme-hero .fallback { color: var(--faint-solid); font-size: .88rem; margin: 18px 0 10px; } .swatch-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .swatch-row .sw { display: grid; gap: 6px; justify-items: center; font-family: var(--f-label); font-size: .68rem; color: var(--faint-solid); } .swatch-row .sw i { width: 44px; height: 44px; border-radius: calc(var(--radius) * .66); border: 1px solid var(--line-solid); } .spec-list { margin-top: 30px; border-top: 1px solid var(--line-solid); } .spec-list div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--line-solid); font-size: .92rem; } .spec-list dt { color: var(--faint-solid); font-family: var(--f-label); } .spec-list dd { color: var(--on-bg-solid); text-align: right; } .back-link { font-family: var(--f-label); font-size: .9rem; color: var(--muted-solid); text-decoration: none; } .back-link:hover { color: var(--on-bg-solid); } /* ---------- the player mock (rendered 1:1 from theme tokens) ---------- */ .mock { background: var(--bg); padding: calc(1.4em * var(--sx)); font-size: 15px; transition: background .35s ease; } .mock--hero { font-size: 16px; border-radius: 28px; border: 1px solid var(--line-solid); box-shadow: var(--shadow); } .mock--card { font-size: 11.5px; } .mock-top { display: flex; align-items: baseline; gap: .6em; margin-bottom: calc(1.1em * var(--sx)); } .mock-brand { font-family: var(--f-brand); font-size: 1.7em; color: var(--on-bg-solid); line-height: 1; } .mock-screen { margin-left: auto; font-family: var(--f-label); font-size: .68em; letter-spacing: .14em; text-transform: uppercase; color: var(--faint-solid); } .mock-card-inner { background: var(--surface); border-radius: var(--radius); border: var(--bw) solid var(--line-solid); box-shadow: var(--shadow); padding: calc(1.15em * var(--sx)); transition: background .35s ease; } .mock-now { display: flex; align-items: center; gap: calc(.9em * var(--sx)); margin-bottom: calc(1em * var(--sx)); } .mock-cover { width: 3.6em; height: 3.6em; flex: none; border-radius: calc(var(--radius) * .6); background: var(--cover); display: grid; place-items: center; color: var(--on-bg-solid); } .mock-cover svg { width: 1.3em; height: 1.3em; opacity: .55; } .mock-meta { min-width: 0; } .mock-title { font-family: var(--f-display); font-weight: 650; color: var(--on-bg-solid); font-size: 1.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mock-artist { font-family: var(--f-body); color: var(--muted-solid); font-size: .85em; } .mock-fav { margin-left: auto; flex: none; } .mock-fav svg { width: 1.15em; height: 1.15em; } .mock-progress { position: relative; height: .34em; border-radius: 999px; background: var(--line); overflow: hidden; } .mock-progress .buf { position: absolute; inset: 0; width: 72%; background: var(--buf); } .mock-progress .dl { position: absolute; inset: 0; width: 46%; background: var(--dl); } .mock-times { display: flex; justify-content: space-between; font-family: var(--f-label); font-size: .66em; color: var(--faint-solid); margin: .5em 0 0; } .mock-controls { display: flex; align-items: center; justify-content: center; gap: calc(1.6em * var(--sx)); margin-top: calc(.9em * var(--sx)); } .mock-controls .skip { color: var(--on-bg-solid); } .mock-controls .skip svg { width: 1.15em; height: 1.15em; } .mock-play { width: 2.7em; height: 2.7em; border-radius: 50%; background: var(--accent); color: var(--on-accent-solid); display: grid; place-items: center; box-shadow: var(--shadow); } .mock-play svg { width: 1.1em; height: 1.1em; margin-left: .12em; } .mock-rows { display: grid; gap: calc(.45em * var(--sx)); margin-top: calc(1em * var(--sx)); } .mock-row { display: flex; align-items: center; gap: calc(.8em * var(--sx)); background: var(--surface-alt); border-radius: calc(var(--radius) * .75); padding: calc(.6em * var(--sx)) calc(.75em * var(--sx)); transition: background .35s ease; } .mock-row .r-cover { width: 2em; height: 2em; flex: none; border-radius: calc(var(--radius) * .45); background: var(--cover); } .mock-row .r-title { font-family: var(--f-body); color: var(--on-bg-solid); font-size: .85em; line-height: 1.25; } .mock-row .r-artist { font-family: var(--f-body); color: var(--faint-solid); font-size: .72em; line-height: 1.25; } .mock-row .r-src { margin-left: auto; width: .5em; height: .5em; border-radius: 50%; flex: none; } .mock-row .r-src.local { background: var(--local-solid); } .mock-row .r-src.remote { background: var(--remote-solid); } .mock-row .r-fav { flex: none; } .mock-row .r-fav svg { width: .95em; height: .95em; } .heart-on { fill: var(--favorite-solid); stroke: none; } .heart-off { fill: none; stroke: var(--faint-solid); stroke-width: 1.8; } /* ---------- responsive ---------- */ @media (max-width: 900px) { .hero .container, .theme-hero .container { grid-template-columns: 1fr; gap: 40px; } .feature-grid { grid-template-columns: 1fr; } .shots { grid-template-columns: 1fr; max-width: 240px; margin: 0 auto; } .site-header nav { gap: 12px; } .site-header .nav-play { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .theme-card:hover, .btn-accent:hover { transform: none; } } /* Generated per-theme variable blocks are appended below by build.mjs */ :root, [data-theme="dark"] { --bg: #121212; --bg-solid: #121212; --surface: #1E1E1E; --surface-solid: #1E1E1E; --surface-alt: #262626; --surface-alt-solid: #262626; --on-bg: #ECECEC; --on-bg-solid: #ECECEC; --muted: #B3B3B3; --muted-solid: #B3B3B3; --faint: #7A7A7A; --faint-solid: #7A7A7A; --line: #2E2E2E; --line-solid: #2E2E2E; --accent: #CFBCF5; --accent-solid: #CFBCF5; --on-accent: #1A1030; --on-accent-solid: #1A1030; --accent-alt: #9BE03A; --accent-alt-solid: #9BE03A; --favorite: #E57373; --favorite-solid: #E57373; --local: #B3B3B3; --local-solid: #B3B3B3; --remote: #B3B3B3; --remote-solid: #B3B3B3; --dl: #CFBCF5; --dl-solid: #CFBCF5; --buf: #81C784; --buf-solid: #81C784; --cover: #333333; --cover-solid: #333333; --radius: 12px; --bw: 0px; --bw-min1: 1px; --shadow: none; --f-display: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-label: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-brand: 'Sacramento', 'Segoe Script', cursive; --sx: 1; color-scheme: dark; } [data-theme="paper"] { --bg: #F5EFE3; --bg-solid: #F5EFE3; --surface: #FFFDF8; --surface-solid: #FFFDF8; --surface-alt: #EFE7D7; --surface-alt-solid: #EFE7D7; --on-bg: #1A1712; --on-bg-solid: #1A1712; --muted: #5C554A; --muted-solid: #5C554A; --faint: #A89F8D; --faint-solid: #A89F8D; --line: #1A1712; --line-solid: #1A1712; --accent: #E0492C; --accent-solid: #E0492C; --on-accent: #F5EFE3; --on-accent-solid: #F5EFE3; --accent-alt: #5E6B3A; --accent-alt-solid: #5E6B3A; --favorite: #E0492C; --favorite-solid: #E0492C; --local: #5E6B3A; --local-solid: #5E6B3A; --remote: #5C554A; --remote-solid: #5C554A; --dl: #E0492C; --dl-solid: #E0492C; --buf: #5E6B3A; --buf-solid: #5E6B3A; --cover: #E0492C; --cover-solid: #E0492C; --radius: 12px; --bw: 2px; --bw-min1: 2px; --shadow: 4px 4px 0 0 #1A1712; --f-display: 'Newsreader', Georgia, serif; --f-body: 'Newsreader', Georgia, serif; --f-label: 'Space Mono', ui-monospace, 'SF Mono', monospace; --f-brand: 'Sacramento', 'Segoe Script', cursive; --sx: 1; color-scheme: light; }