:root { --ink: #14181f; --paper: #f7f4ee; --surface: #ffffff; --accent: #C8A24A; --muted: #6b7178; --line: #e3ddd1; --header-bg: #14181f; --header-fg: #ffffff; --header-muted: #d8d2c6; --hero-overlay: brightness(1); --body-bg: var(--paper); --body-fg: var(--ink); } /* Dark theme overrides (driven by ) */ html[data-theme="dark"] { --ink: #f3efe6; --paper: #16191f; --surface: #1f242c; --accent: #e0b62e; --muted: #9aa1ab; --line: #2c323b; --header-bg: #0d0f13; --header-fg: #f3efe6; --header-muted: #b9b3a6; --hero-overlay: brightness(1); --body-bg: #12151a; --body-fg: #e8e4da; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--body-bg); color: var(--body-fg); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.6; transition: background-color 0.2s ease, color 0.2s ease; } /* ---- Logo: pinned just BELOW the nav-bar, upper-left, floats on every page ---- */ /* Pulled OUT of the nav-bar. Its vertical position is driven by --logo-top, which JS sets to the live nav-bar height (+ a small gap) so the logo always sits just under the border, even when the nav wraps on small screens. */ :root { --logo-top: 4.2rem; /* fallback before JS runs / if JS disabled */ --logo-gap: 0.55rem; /* gap between nav bottom border and logo top */ } .site-brand.corner-brand { position: fixed; top: var(--logo-top); left: 0.9rem; z-index: 1000; display: flex; align-items: center; text-decoration: none; } .site-brand.corner-brand img { display: block; height: clamp(54px, 8vw, 88px); width: auto; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5)); } /* Non-hero portal pages (My Account, Sign up, Log in) start right under the nav, so the floating corner logo would overlap the first heading. Push that content down past the logo. Its top offset is driven by --content-pad-top, which JS sets to the logo's live bottom (+ a small gap) so it always clears the resized logo. */ .content-pad { padding-top: var(--content-pad-top, 9.5rem); } /* ---- Top nav ---- */ /* Sticky so the bar stays pinned at the top during scroll. This keeps the floating corner logo (fixed, anchored just below the nav) locked to its pre-scroll position instead of drifting over scrolled body content. */ .site-header { position: sticky; top: 0; z-index: 900; background: var(--header-bg); color: var(--header-fg); border-bottom: 3px solid var(--accent); /* Clear the fixed corner logo on the left; nav stays pinned right. Padding tracks the logo's clamp() ceiling so the nav never sits under it. */ padding-left: clamp(4.5rem, 9vw, 7.5rem); } .site-header-inner { max-width: 1100px; margin: 0 auto; padding: 0.7rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .site-brand { display: flex; align-items: center; text-decoration: none; } .site-brand img { display: block; height: 38px; width: auto; } .site-nav { display: flex; align-items: center; gap: 1.6rem; } .site-nav a { color: var(--header-muted); text-decoration: none; font-size: 0.95rem; letter-spacing: 0.04em; } .site-nav a:hover { color: var(--accent); } /* Everything in the header except the logo, pinned to the far right */ .site-nav-right { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; } .nav-signup { color: var(--header-fg); border: 1px solid var(--accent); border-radius: 2px; padding: 0.4rem 0.9rem; font-size: 0.85rem; letter-spacing: 0.05em; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; } .nav-signup:hover { background: var(--accent); color: #14181f; } .about-cta { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; } .theme-toggle { background: transparent; color: var(--header-muted); border: 1px solid var(--line); border-radius: 2px; padding: 0.35rem 0.7rem; font-size: 0.85rem; cursor: pointer; white-space: nowrap; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.2rem; } /* ---- Hero ---- */ /* The image is shown at full brightness and uses object-fit:cover so it scales to the screen geometry WITHOUT stretching or distorting. A separate gradient layer (.hero-scrim) sits behind the text for readability so the photo itself is never dimmed. */ .hero { position: relative; color: #fff; text-align: center; overflow: hidden; } .hero-img { display: block; width: 100%; height: clamp(360px, 62vh, 760px); object-fit: cover; object-position: center; filter: none; } /* Readability scrim behind the hero text (does not touch the image). */ .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(8, 10, 14, 0.45) 0%, rgba(8, 10, 14, 0.20) 45%, rgba(8, 10, 14, 0.55) 100% ); pointer-events: none; } .hero-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; padding: 0 1.2rem; z-index: 1; } .hero .kicker { margin: 0; font-size: 2.4rem; font-weight: 800; letter-spacing: 0.22em; } .hero-sub { font-size: 1.15rem; margin: 0.4rem 0 1.4rem; color: #f0e9da; } .btn { display: inline-block; margin: 0.3rem; padding: 0.7rem 1.4rem; background: var(--accent); color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: 0.05em; border-radius: 2px; } .btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.7); } /* Understated outlined pill CTA: 1px gold border, transparent fill, fills on hover. Used for secondary actions (e.g. the Privacy-page "Contact us" link). */ .btn.outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); font-weight: 600; } .btn.outline:hover { background: var(--accent); color: var(--ink); } /* ---- Intro + featured ---- */ .intro { padding: 3rem 0 1rem; font-size: 1.2rem; } .intro .wrap { max-width: 760px; } .section-title { font-size: 1.6rem; letter-spacing: 0.06em; margin: 2.5rem 0 1.2rem; border-bottom: 2px solid var(--accent); display: inline-block; padding-bottom: 0.3rem; } .featured { padding-bottom: 3rem; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 1.4rem; transition: background-color 0.2s ease, border-color 0.2s ease; } .card h3 { margin-top: 0; color: var(--body-fg); } .card p { color: var(--muted); margin-bottom: 0; } .card-icon { margin-bottom: 0.8rem; line-height: 0; } /* Hero text (works for home, about, and /portal pages via shared .hero) */ .hero-inner h1 { font-family: Georgia, serif; color: #fff; letter-spacing: 1px; margin: 0 0 10px; font-size: 46px; } .hero-inner h2 { font-family: Georgia, serif; color: #fff; letter-spacing: 1px; margin: 0 0 10px; font-size: 38px; } .hero-inner .sub { color: #f0e9da; font-size: 18px; max-width: 640px; margin: 0 auto 26px; } .hero-inner .about-title { color: #fff; font-size: 2.6rem; letter-spacing: 0.04em; margin: 0 0 0.5rem; } .hero-inner .lead { color: #f0e9da; font-size: 1.2rem; } /* ---- About ---- */ .about { padding: 2.5rem 0 4rem; } .about-head h1 { font-size: 2.2rem; letter-spacing: 0.04em; margin-bottom: 0.5rem; } .about .lead { font-size: 1.2rem; color: var(--body-fg); } .about-body { max-width: 760px; font-size: 1.05rem; } .about-body p { margin: 0 0 1.1rem; } /* ---- Footer ---- */ .site-footer { background: var(--surface); color: var(--muted); text-align: center; padding: 1.4rem; font-size: 0.85rem; border-top: 3px solid var(--accent); transition: background-color 0.2s ease, color 0.2s ease; } /* Privacy Notice link, placed on its own line below the copyright. */ .site-footer .footer-privacy { display: block; margin-top: 0.5rem; } .site-footer .footer-privacy a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .site-footer .footer-privacy a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* "Back" button on the Privacy Notice (and any static info page). */ .back-link { display: inline-block; margin-top: 2rem; padding: 0.6rem 1.2rem; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 2px; font-size: 0.9rem; letter-spacing: 0.05em; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .back-link:hover { background: var(--accent); color: var(--ink); } .privacy-body { max-width: 760px; font-size: 1.05rem; } .privacy-body h2 { font-size: 1.25rem; letter-spacing: 0.04em; margin: 1.8rem 0 0.6rem; } .privacy-body p { color: var(--body-fg); margin: 0 0 1rem; } .privacy-body a { color: var(--accent); } /* ========================================================================= /pub (creator portal) component styles — share the same theme variables as the main site so the look is coordinated page-to-page. ========================================================================= */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; margin-top: 1.2rem; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 1.4rem; transition: background-color 0.2s ease, border-color 0.2s ease; } .card h3 { margin-top: 0; color: var(--body-fg); } .card h3 a { color: var(--body-fg); text-decoration: none; } .card h3 a:hover { color: var(--accent); } .card p { color: var(--muted); margin-bottom: 0; } .muted { color: var(--muted); } .section-title { font-size: 1.6rem; letter-spacing: 0.06em; margin: 2.5rem 0 1.2rem; border-bottom: 2px solid var(--accent); display: inline-block; padding-bottom: 0.3rem; } .alert { padding: 12px 16px; border-radius: 9px; margin: 14px 0; font-size: 14px; } .alert.ok { background: rgba(95,191,122,.12); border: 1px solid rgba(95,191,122,.4); color: #2f8f4f; } .alert.err { background: rgba(217,105,74,.12); border: 1px solid rgba(217,105,74,.4); color: #b4472c; } .badge { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); } .badge.approved { color: #3fa85f; border-color: rgba(95,191,122,.4); } .badge.pending { color: var(--accent); border-color: rgba(200,162,74,.4); } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; } audio { width: 100%; margin-top: 8px; } form .field { margin: 14px 0; } form label { display: block; color: var(--muted); font-size: 14px; margin-bottom: 6px; } input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], textarea, select { width: 100%; padding: 11px 13px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--body-fg); font-size: 15px; transition: background-color 0.2s ease, color 0.2s ease; } textarea { min-height: 110px; } .embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; margin-top: 10px; } .embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.7); } .btn.ghost:hover { color: #fff; letter-spacing: 1px; } /* ---- Submission form modal ---- */ .modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1rem; } .modal[hidden] { display: none; } .modal-backdrop { position: fixed; inset: 0; background: rgba(8,10,14,0.6); backdrop-filter: blur(2px); } .modal-panel { position: relative; width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; background: var(--surface); color: var(--body-fg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,0.45); margin-top: 2.5rem; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); } .modal-head h3 { margin: 0; font-size: 1.3rem; letter-spacing: 0.04em; } .modal-close { background: none; border: none; color: var(--muted); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 0.3rem; } .modal-close:hover { color: var(--accent); } .modal-body { padding: 1.4rem; } .modal-actions { display: flex; gap: 0.8rem; margin-top: 1.4rem; flex-wrap: wrap; } .modal-actions .btn { cursor: pointer; } /* ---- Featured theme player (home page) ---- */ .featured-theme { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: 1100px; margin: 1.8rem auto 0; padding: 0.9rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; } .featured-theme-info { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; line-height: 1.3; } .featured-theme-info .featured-theme-label { margin-right: 0.25rem; } .featured-theme-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .featured-theme-info strong { font-size: 1.1rem; color: var(--body-fg); } .featured-theme audio { display: none; } .featured-theme .btn { margin-left: auto; } /* ---- Copyright mark next to catalog work title (smaller, Circle-C + year) ---- */ .copyright-mark { font-size: 0.6em; font-weight: 400; color: var(--muted); letter-spacing: 0.02em; white-space: nowrap; } /* ---- Catalog mini-player (inline, fixed bottom bar, no separate page) ---- */ .play-hint { display: inline-block; margin-left: 0.6rem; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); vertical-align: middle; } .card h3 a[data-player] { cursor: pointer; } body.mini-player-open { padding-bottom: 120px; } .mini-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--panel, #14110d); border-top: 1px solid var(--gold, #c9a24b); box-shadow: 0 -6px 24px rgba(0,0,0,.45); } .mini-player[hidden] { display: none; } .mini-player-inner { display: flex; align-items: center; gap: 1rem; max-width: 1100px; margin: 0 auto; padding: 0.75rem 1.1rem; } .mini-player-title { display: flex; flex-direction: column; min-width: 0; flex: 0 0 auto; max-width: 40%; } .mini-player-title .mp-label { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .mini-player-title strong { font-size: 1rem; color: var(--gold, #c9a24b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini-player-body { flex: 1 1 auto; min-width: 0; } .mini-player-body audio { width: 100%; display: block; } .mini-player-body .mp-embed { position: relative; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; } .mini-player-body .mp-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .mini-player-close { flex: 0 0 auto; background: transparent; border: 1px solid var(--gold, #c9a24b); color: var(--gold, #c9a24b); width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background .15s, color .15s; } .mini-player-close:hover { background: var(--gold, #c9a24b); color: #14110d; } @media (max-width: 640px) { .mini-player-title { max-width: 100%; } .mini-player-inner { flex-wrap: wrap; } } /* ---- Catalog filter bar + list table ---- */ .catalog-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin: 1.25rem 0; padding: 1rem 1.1rem; background: var(--panel, #14110d); border: 1px solid var(--line, #2a2620); border-radius: 10px; } .catalog-filters .filter-field { display: flex; flex-direction: column; gap: 0.3rem; } .catalog-filters label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } .catalog-filters input, .catalog-filters select { padding: 0.5rem 0.6rem; min-width: 180px; background: #0f0d0a; color: var(--body-fg, #e9e2d4); border: 1px solid var(--line, #2a2620); border-radius: 6px; } .catalog-filters .filter-actions { display: flex; gap: 0.75rem; align-items: center; } .catalog-filters .filter-actions .btn, .catalog-filters .filter-actions .btn-outline { padding: 0.2rem 0.2rem; font-size: 0.72rem; background: transparent; border: none; box-shadow: none; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: color .15s; } .catalog-filters .filter-actions .btn:hover, .catalog-filters .filter-actions .btn-outline:hover { color: var(--gold, #c9a24b); } .catalog-table-wrap { overflow-x: auto; } .catalog-table { width: 100%; border-collapse: collapse; } .catalog-table thead th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; padding: 0.6rem 0.8rem; border-bottom: 2px solid var(--gold, #c9a24b); white-space: nowrap; } .catalog-table tbody td { padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line, #2a2620); vertical-align: top; font-size: 0.95rem; } .catalog-table tbody tr:hover { background: rgba(201,162,75,0.06); } .catalog-table .col-title a { font-weight: 600; color: var(--gold, #c9a24b); cursor: pointer; text-decoration: none; font-size: 1.15rem; } .catalog-table .col-title a:hover { text-decoration: underline; } /* Copyright/agency/writers all share the same size (td default); title larger above. */ .catalog-table .col-copyright .copyright-mark { font-size: inherit; color: inherit; } .catalog-table .col-title .play-hint { margin-left: 0.4rem; font-size: 0.7rem; color: var(--muted); text-transform: none; letter-spacing: 0; } .catalog-table .col-agency { white-space: nowrap; } /* Artist + Publisher columns (added 2026-08-07). Same size as the other non-title columns (td default 0.95rem); allow wrapping for long names. */ .catalog-table .col-artist, .catalog-table .col-publisher { white-space: normal; } .catalog-table .muted { color: var(--muted); }