/* ============================================================ OctaveSync — vibrant alt-rock theme. Palette and mood take their cue from 1990s Irish alternative rock: deep cranberry crimson against a plum-black ink, with blush and amber lifting it, and soft dreamy gradients behind the hero and player. It is an inspired-by palette only — no third-party marks or artwork are used. Bootstrap 5.3 is themed by overriding its per-component variables rather than fighting it with !important. ============================================================ */ :root { --os-ink: #1a0810; /* plum-black */ --os-ink-soft: #4a333e; --os-muted: #7d6873; --os-cranberry: #c2124a; /* the brand accent */ --os-deep: #8a0b35; /* darker cranberry for hovers */ --os-blush: #ff5c8a; /* highlight */ --os-amber: #ffb74d; /* secondary accent — prices, warnings */ --os-wash: #fff0f4; /* pale surface tint */ --os-line: #f0dce3; /* hairline rules */ --os-paper: #fffbfc; /* page background */ --os-surface: #ffffff; /* cards / panels */ --os-surface-2: #fbf3f6; /* wells */ --os-footer-bg: var(--os-ink); --os-wave-idle: #e3ccd5; /* unplayed waveform bars (read by player.js) */ --os-wave-live: #c2124a; /* played waveform bars */ /* Logo mark fills. The black bars need a variable rather than a literal: the mark also sits on the dark footer and in night mode, where true black would vanish. --os-logo-red never changes. */ --os-logo-ink: #1a0810; --os-logo-red: #c2124a; --os-font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --os-font-disp: 'Outfit', 'Inter', 'Segoe UI', system-ui, sans-serif; --os-radius: 10px; --bs-body-bg: var(--os-paper); --bs-body-color: var(--os-ink); --bs-body-font-family: var(--os-font-sans); --bs-border-color: var(--os-line); --bs-border-radius: var(--os-radius); --bs-link-color-rgb: 194, 18, 74; --bs-link-hover-color-rgb: 138, 11, 53; --bs-emphasis-color-rgb: 26, 8, 16; } /* ---- Night mode: the light/dark roles reversed, cranberry kept ---- Activated by data-os-theme="night" on (an admin Site setting); data-bs-theme="dark" flips Bootstrap's own form/dropdown/table palette. */ html[data-os-theme="night"] { --os-ink: #fbeef3; /* text is now light */ --os-ink-soft: #d8bfcb; --os-muted: #9b8290; --os-cranberry: #ff3d6e; --os-deep: #ff7098; --os-blush: #ff8fb0; --os-amber: #ffc978; --os-wash: #24101a; --os-line: #3a1e2a; --os-paper: #140610; --os-surface: #1d0d16; --os-surface-2: #26121c; --os-footer-bg: #0d040a; --os-wave-idle: #4a2b38; --os-wave-live: #ff3d6e; --os-logo-ink: #fbeef3; /* the "black" bars go light on a dark page */ --os-logo-red: #ff3d6e; --bs-link-color-rgb: 255, 61, 110; --bs-link-hover-color-rgb: 255, 143, 176; } html[data-os-theme="night"] .os-credit-badge.low { background: #3a2410; border-color: #8a5f22; color: #ffd79a; } html[data-os-theme="night"] .os-navbar .dropdown-menu { box-shadow: 0 8px 28px rgba(0, 0, 0, .6); } /* ---- base ---- */ body { font-family: var(--os-font-sans); background: var(--os-paper); color: var(--os-ink); /* Room for the sticky player so the last row is never trapped behind it. */ --os-player-gutter: 0px; } body.has-player { padding-bottom: 82px; } /* Sticky footer: the content area stretches so the footer never floats up on short pages (contact, auth) — it sits at the bottom of the window or below. */ body { display: flex; flex-direction: column; min-height: 100vh; } body > main { flex: 1 0 auto; } /* top-navbar mode */ body > .os-shell { flex: 1 0 auto; } /* left-navigation mode */ h1, h2, h3, .os-display { font-family: var(--os-font-disp); font-weight: 700; letter-spacing: -.015em; } h4, h5, h6 { font-family: var(--os-font-disp); font-weight: 600; } a { text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } .text-muted { color: var(--os-muted) !important; } ::selection { background: var(--os-blush); color: #fff; } /* ---- buttons ---- */ .btn { font-weight: 600; } .btn-primary { --bs-btn-bg: var(--os-cranberry); --bs-btn-border-color: var(--os-cranberry); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--os-deep); --bs-btn-hover-border-color: var(--os-deep); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--os-deep); --bs-btn-active-border-color: var(--os-deep); --bs-btn-active-color: #fff; } .btn-outline-primary { --bs-btn-color: var(--os-cranberry); --bs-btn-border-color: var(--os-cranberry); --bs-btn-hover-bg: var(--os-cranberry); --bs-btn-hover-border-color: var(--os-cranberry); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--os-deep); --bs-btn-active-border-color: var(--os-deep); --bs-btn-active-color: #fff; } .btn-success { --bs-btn-bg: #1f8a5b; --bs-btn-border-color: #1f8a5b; --bs-btn-hover-bg: #166b46; --bs-btn-hover-border-color: #166b46; } .btn-dark { --bs-btn-bg: var(--os-ink); --bs-btn-border-color: var(--os-ink); } .form-control:focus, .form-select:focus, .btn:focus-visible { border-color: var(--os-blush); box-shadow: 0 0 0 .2rem rgba(194, 18, 74, .18); } .form-check-input:checked { background-color: var(--os-cranberry); border-color: var(--os-cranberry); } /* ---- navbar (top mode) ---- */ .os-navbar { background: var(--os-paper); border-bottom: 1px solid var(--os-line); } .os-navbar .navbar-brand { display: flex; align-items: center; gap: .6rem; } .os-brand-mark { color: var(--os-cranberry); } .os-brand-word { font-family: var(--os-font-disp); font-size: 1.3rem; font-weight: 800; color: var(--os-ink); letter-spacing: -.02em; } .os-brand-word .os-brand-accent { color: var(--os-cranberry); } .os-navbar .nav-link { color: var(--os-ink-soft); font-weight: 500; } .os-navbar .nav-link:hover, .os-navbar .nav-link.active { color: var(--os-cranberry); } .os-navbar .dropdown-menu { border: 1px solid var(--os-line); box-shadow: 0 10px 30px rgba(26, 8, 16, .10); } .dropdown-item.active, .dropdown-item:active { background-color: var(--os-cranberry); } /* ---- left navigation (left mode) ---- */ .os-shell { display: flex; } .os-sidenav { width: 240px; flex: 0 0 240px; border-right: 1px solid var(--os-line); background: var(--os-wash); padding: 1.5rem 1rem; } .os-sidenav .nav-link { color: var(--os-ink-soft); padding: .45rem .75rem; font-weight: 500; border-left: 2px solid transparent; border-radius: 0 var(--os-radius) var(--os-radius) 0; } .os-sidenav .nav-link:hover { color: var(--os-cranberry); text-decoration: none; } .os-sidenav .nav-link.active { color: var(--os-cranberry); border-left-color: var(--os-cranberry); background: var(--os-surface); } .os-sidenav .os-side-heading { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--os-muted); margin: 1.25rem .75rem .35rem; } .os-main { flex: 1 1 auto; min-width: 0; } @media (max-width: 767.98px) { .os-shell { display: block; } .os-sidenav { width: auto; border-right: 0; border-bottom: 1px solid var(--os-line); } } /* ---- hero ---- */ /* The hero photograph (a mixing console) sits under the brand's own cranberry and amber washes, then a plum-black scrim dark enough to keep every piece of text on it well past AA contrast. Because the backdrop is always dark, the hero's own colours are fixed here rather than taken from the theme — it looks the same in day and night mode. Credit lives on /pages/attribution.php. */ .os-hero { position: relative; padding: 5rem 0 3.5rem; border-bottom: 1px solid var(--os-line); background-image: radial-gradient(900px 420px at 12% -10%, rgba(194, 18, 74, .45), transparent 60%), radial-gradient(760px 380px at 88% 0%, rgba(255, 183, 77, .22), transparent 62%), linear-gradient(180deg, rgba(26, 8, 16, .82) 0%, rgba(26, 8, 16, .74) 45%, rgba(26, 8, 16, .93) 100%), url('../img/hero-console.jpg'); background-size: auto, auto, auto, cover; background-position: center, center, center, center 60%; background-repeat: no-repeat; color: #fff; } .os-hero h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.08; color: #fff; } .os-hero .os-hero-mark { color: #ff5c8a; opacity: .95; } .os-hero-lead { font-size: 1.06rem; color: rgba(255, 255, 255, .88); max-width: 62ch; } /* Chips, stats and links inherit the dark backdrop, not the page theme. */ .os-hero .os-chip { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .92); backdrop-filter: blur(2px); } .os-hero .os-chip:hover { background: var(--os-cranberry); border-color: var(--os-blush); color: #fff; } .os-hero .os-stats { border-color: rgba(255, 255, 255, .22); } .os-hero .os-stat-num { color: #ff85a8; } .os-hero .os-stat-label { color: rgba(255, 255, 255, .72); } .os-hero a { color: rgba(255, 255, 255, .9); text-decoration-color: rgba(255, 255, 255, .45); } .os-hero a:hover { color: #ff85a8; } .os-hero .form-control { border-color: rgba(255, 255, 255, .4); } /* Discreet photo credit, bottom-right of the hero. */ .os-hero-credit { position: absolute; right: .85rem; bottom: .55rem; font-size: .68rem; letter-spacing: .02em; } .os-hero-credit a { color: rgba(255, 255, 255, .55); text-decoration: none; } .os-hero-credit a:hover { color: rgba(255, 255, 255, .95); text-decoration: underline; } @media (max-width: 575.98px) { .os-hero { padding: 3.25rem 0 3rem; } .os-hero-credit { position: static; display: block; text-align: center; margin-top: 1.25rem; } } /* ============================================================ Browse list — one row per track, equally spaced down the page. Row height and waveform height come from the admin-defined size preset the viewer picked (--os-row-h / --os-wave-h). ============================================================ */ .os-list { display: flex; flex-direction: column; gap: 8px; } .os-row { position: relative; display: flex; align-items: center; gap: 14px; min-height: var(--os-row-h, 84px); padding: 8px 52px 8px 12px; /* right padding clears the + button */ background: var(--os-surface); border: 1px solid var(--os-line); border-radius: var(--os-radius); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .os-row:hover { border-color: var(--os-blush); box-shadow: 0 3px 14px rgba(194, 18, 74, .08); } .os-row.is-current { border-color: var(--os-cranberry); background: var(--os-wash); } /* Play button */ .os-play { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--os-cranberry); background: var(--os-cranberry); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .12s ease, background .15s ease; } .os-play:hover { background: var(--os-deep); border-color: var(--os-deep); transform: scale(1.06); } .os-play-icon { display: block; width: 0; height: 0; border-left: 12px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; } .os-row.is-playing .os-play-icon, .os-player.is-playing .os-play-icon { /* Pause: two bars, drawn from the same element with a border trick. */ width: 12px; height: 15px; margin-left: 0; border: 0; background: currentColor; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); } .os-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .os-row-title { font-family: var(--os-font-disp); font-weight: 600; font-size: .98rem; color: var(--os-ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .os-row-title:hover { color: var(--os-cranberry); text-decoration: none; } /* Waveform */ .os-wave { position: relative; height: var(--os-wave-h, 48px); cursor: pointer; overflow: hidden; } .os-wave-canvas { display: block; width: 100%; height: 100%; } /* Pills — author full name, upload date, permanent audio ID */ .os-pills { display: flex; flex-wrap: wrap; gap: 4px; } .os-pill { font-size: .7rem; line-height: 1; padding: .3rem .5rem; background: var(--os-wash); color: var(--os-ink-soft); border: 1px solid var(--os-line); border-radius: 999px; white-space: nowrap; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; } .os-pill.os-pill-id { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .02em; color: var(--os-cranberry); background: transparent; border-color: var(--os-cranberry); } .os-pill.os-pill-price { background: var(--os-cranberry); border-color: var(--os-cranberry); color: #fff; } /* Right-hand facts column */ .os-row-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; min-width: 118px; } .os-meta-time { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .9rem; font-weight: 600; color: var(--os-ink); } .os-meta-facts { font-size: .7rem; color: var(--os-muted); text-transform: uppercase; letter-spacing: .06em; } .os-meta-price { font-size: .8rem; font-weight: 700; color: var(--os-cranberry); } @media (max-width: 575.98px) { .os-row-meta { display: none; } .os-pill { max-width: 14ch; } } /* Basket + button */ .os-basket-add { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; line-height: 1; border-radius: 50%; border: 1px solid var(--os-line); background: var(--os-surface); color: var(--os-muted); font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: all .15s ease; } .os-row:hover .os-basket-add { border-color: var(--os-cranberry); color: var(--os-cranberry); } .os-basket-add:hover { background: var(--os-cranberry); border-color: var(--os-cranberry); color: #fff; } .os-basket-add.in-basket { background: var(--os-cranberry); border-color: var(--os-cranberry); color: #fff; } /* ---- sticky player bar ---- */ .os-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1085; display: none; align-items: center; gap: 14px; padding: 12px 18px; background: var(--os-ink); color: #fff; border-top: 2px solid var(--os-cranberry); box-shadow: 0 -6px 26px rgba(26, 8, 16, .28); } .os-player.is-open { display: flex; } .os-player-toggle { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--os-cranberry); color: #fff; display: grid; place-items: center; cursor: pointer; } .os-player-toggle:hover { background: var(--os-blush); } .os-player-info { flex: 0 1 260px; min-width: 0; display: flex; flex-direction: column; } .os-player-title { color: #fff; font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .os-player-title:hover { color: var(--os-blush); } .os-player-sub { font-size: .74rem; color: #c8a9b6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .os-player-time { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; color: #c8a9b6; } .os-player-seek { flex: 1 1 auto; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); cursor: pointer; } .os-player-seek-fill { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--os-cranberry), var(--os-blush)); } .os-player-note { flex: 0 0 auto; font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--os-amber); border: 1px solid rgba(255, 183, 77, .5); padding: .2rem .45rem; border-radius: 999px; } .os-player-close { flex: 0 0 auto; background: none; border: 0; color: #c8a9b6; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 .25rem; } .os-player-close:hover { color: #fff; } @media (max-width: 767.98px) { .os-player-note, .os-player-time { display: none; } .os-player-info { flex-basis: 150px; } } /* ---- navbar basket badge ---- */ .os-basket-badge { position: absolute; top: 2px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--os-cranberry); color: #fff; font-size: .66rem; font-weight: 700; line-height: 17px; text-align: center; } .os-sidenav .os-basket-badge { position: static; display: inline-block; margin-left: .35rem; } /* ---- Browse: two-pane app view (desktop) ---- The page body is locked (no main scrollbar); the filter sidebar and the results pane are fixed-height siblings that each scroll independently. */ @media (min-width: 992px) { .os-browse-container { padding-bottom: 0 !important; } .os-browse-row { height: calc(100vh - 96px); } #osSidebarCol, #osGalleryCol { height: 100%; min-height: 0; } #osGalleryCol { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding-right: 10px; scrollbar-width: thin; scrollbar-color: var(--os-cranberry) transparent; } #osGalleryCol::-webkit-scrollbar { width: 6px; } #osGalleryCol::-webkit-scrollbar-track { background: transparent; } #osGalleryCol::-webkit-scrollbar-thumb { background: var(--os-line); border-radius: 3px; } #osGalleryCol:hover::-webkit-scrollbar-thumb { background: var(--os-cranberry); } } .os-pane-footer { margin-top: auto; padding: 1.25rem 0 1rem; border-top: 1px solid var(--os-line); justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .78rem; color: var(--os-muted); } .os-pane-footer a { color: var(--os-muted); } /* ---- filter sidebar ---- .os-side-sticky fills the sidebar pane; the search box / Apply / Clear header never moves, and only .os-filter-rail (the groups) scrolls. */ .os-side-sticky { height: 100%; max-height: 100%; display: flex; flex-direction: column; } .os-filter-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .os-filter-rail { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--os-cranberry) transparent; } .os-filter-rail::-webkit-scrollbar { width: 6px; } .os-filter-rail::-webkit-scrollbar-track { background: transparent; } .os-filter-rail::-webkit-scrollbar-thumb { background: var(--os-line); border-radius: 3px; } .os-filter-rail:hover::-webkit-scrollbar-thumb { background: var(--os-cranberry); } /* Inside the rail, filter groups open fully — ONE scrollbar for the whole sidebar instead of nested scrolling boxes. */ .os-filter-rail .os-filters .os-filter-body { max-height: none; overflow-y: visible; } @media (max-width: 991.98px) { .os-side-sticky { height: auto; max-height: none; display: block; } .os-filter-rail { overflow: visible; } .os-filter-rail .os-filters .os-filter-body { max-height: 260px; overflow-y: auto; } } .os-filters { border: 1px solid var(--os-line); background: var(--os-surface); border-radius: var(--os-radius); overflow: hidden; } .os-filters .os-filter-head { padding: .65rem .9rem; border-bottom: 1px solid var(--os-line); background: var(--os-wash); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--os-ink); } .os-filters .os-filter-body { padding: .7rem .9rem; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; } .os-filters .form-check { margin-bottom: .15rem; } .os-filters .form-check-label { font-size: .87rem; } /* Quick chip row (duration presets, formats) */ .os-chips { display: flex; flex-wrap: wrap; gap: 5px; } .os-chip { font-size: .74rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--os-line); background: var(--os-surface); color: var(--os-ink-soft); cursor: pointer; user-select: none; } .os-chip:hover { border-color: var(--os-cranberry); color: var(--os-cranberry); } .os-chip input { position: absolute; opacity: 0; pointer-events: none; } .os-chip:has(input:checked) { background: var(--os-cranberry); border-color: var(--os-cranberry); color: #fff; } /* ---- attribution page ---- */ .os-attrib-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; margin-bottom: .75rem; background: var(--os-surface-2); border: 1px solid var(--os-line); border-radius: var(--os-radius); } .os-attrib-thumb { width: 120px; height: 80px; object-fit: cover; flex-shrink: 0; border-radius: 6px; border: 1px solid var(--os-line); } @media (max-width: 575.98px) { .os-attrib-item { flex-direction: column; } .os-attrib-thumb { width: 100%; height: 140px; } } /* ---- cards / paper ---- */ .os-paper { background: var(--os-surface); border: 1px solid var(--os-line); border-radius: var(--os-radius); padding: 2rem; } .os-section-title { border-bottom: 1px solid var(--os-line); padding-bottom: .6rem; } .os-rule { border-top: 1px solid var(--os-line); } /* ---- track detail ---- */ .os-track-hero { background: radial-gradient(700px 300px at 20% 0%, rgba(255, 92, 138, .22), transparent 65%), linear-gradient(180deg, var(--os-wash), var(--os-paper)); border: 1px solid var(--os-line); border-radius: var(--os-radius); padding: 1.75rem; } .os-track-hero .os-wave { height: 110px; } .os-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; } .os-spec { border: 1px solid var(--os-line); border-radius: var(--os-radius); padding: .7rem .85rem; background: var(--os-surface); } .os-spec-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--os-muted); } .os-spec-value { font-weight: 700; font-family: var(--os-font-disp); } /* ---- footer ---- */ .os-footer { background: var(--os-footer-bg); color: #e5cdd7; margin-top: 4rem; border-top: 3px solid var(--os-cranberry); } .os-footer a { color: #fbeef3; } /* The footer is dark in both themes, so the mark's black bars have to invert here or they vanish into it. */ .os-footer { --os-logo-ink: #fbeef3; --os-logo-red: #ff5c8a; } /* ---- forms & auth ---- */ .os-auth { max-width: 460px; margin: 3rem auto; } .os-key-box { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; background: var(--os-wash); border: 1px dashed var(--os-cranberry); border-radius: var(--os-radius); padding: 1rem; letter-spacing: .12em; user-select: all; word-break: break-all; } /* ---- library stats strip ---- */ .os-stats { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .35rem 2rem; padding: .85rem 1rem; margin: 0 auto; border-top: 1px solid var(--os-line); border-bottom: 1px solid var(--os-line); } .os-stat-num { font-family: var(--os-font-disp); font-size: 1.3rem; font-weight: 800; color: var(--os-cranberry); } .os-stat-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--os-muted); } /* ---- admin-authored rich text (About page sections, legal pages) ---- Gives whatever HTML an admin writes sane rhythm without them having to add utility classes to every element. */ .os-richtext > :last-child { margin-bottom: 0; } .os-richtext h2, .os-richtext h3 { margin-top: 1.75rem; margin-bottom: .6rem; } .os-richtext h2:first-child, .os-richtext h3:first-child { margin-top: 0; } .os-richtext p, .os-richtext ul, .os-richtext ol { margin-bottom: 1rem; } .os-richtext ul, .os-richtext ol { padding-left: 1.35rem; } .os-richtext li { margin-bottom: .3rem; } .os-richtext img { max-width: 100%; height: auto; border-radius: var(--os-radius); } .os-richtext blockquote { margin: 1.25rem 0; padding: .35rem 0 .35rem 1rem; border-left: 3px solid var(--os-cranberry); color: var(--os-ink-soft); } .os-richtext table { width: 100%; margin-bottom: 1rem; } .os-richtext th, .os-richtext td { padding: .45rem .6rem; border-bottom: 1px solid var(--os-line); } .os-richtext hr { border-top: 1px solid var(--os-line); opacity: 1; } /* ---- About Me photograph ---- */ .os-about-photo { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; border: 3px solid var(--os-wash); box-shadow: 0 0 0 1px var(--os-line); } /* ---- live results refresh ---- */ #os-results { transition: opacity .15s ease; } #os-results.os-loading { opacity: .45; pointer-events: none; } /* ---- author A–Z strip ---- */ .os-az { display: flex; flex-wrap: wrap; gap: 3px; } .os-az-letter { display: inline-block; min-width: 21px; padding: 1px 4px; border-radius: 5px; font-size: .72rem; text-align: center; line-height: 1.45; border: 1px solid var(--os-line); color: var(--os-muted); background: transparent; text-decoration: none; user-select: none; } .os-az-letter:hover { background: var(--os-wash); text-decoration: none; color: var(--os-cranberry); } .os-az-letter.active { background: var(--os-cranberry); border-color: var(--os-cranberry); color: #fff; font-weight: 700; } .os-az-letter.active:hover { background: var(--os-deep); color: #fff; } .os-az-letter.disabled { color: var(--os-muted); opacity: .4; pointer-events: none; } /* ---- credit badge ---- */ .os-credit-badge { background: var(--os-wash); border: 1px solid var(--os-cranberry); border-radius: 999px; color: var(--os-cranberry); font-weight: 700; padding: .28rem .7rem; font-size: .8rem; } .os-credit-badge.low { background: #fff5e6; border-color: var(--os-amber); color: #9a5b00; } /* ---- admin ---- */ .os-admin-side { background: var(--os-ink); min-height: 100vh; } .os-admin-side .nav-link { color: #d3b9c6; padding: .5rem .9rem; border-radius: 0 6px 6px 0; } .os-admin-side .nav-link:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .05); } .os-admin-side .nav-link.active { color: #fff; background: rgba(194, 18, 74, .32); border-left: 2px solid var(--os-cranberry); } .os-admin-brand { color: #fff; font-family: var(--os-font-disp); font-weight: 800; letter-spacing: -.02em; } /* The admin sidebar is dark in both themes — invert the mark there too. */ .os-admin-side { --os-logo-ink: #fbeef3; --os-logo-red: #ff5c8a; } /* ---- admin edit panel ---- The CRUD screens put the add/edit form in a right-hand column beside a list that can run to hundreds of rows. Sticking it to the top means it is still on screen wherever you scrolled to before clicking Edit, and the highlight makes it obvious that the panel switched from "add" to "edit". */ @media (min-width: 992px) { .os-edit-panel { position: sticky; top: 1rem; } } .os-edit-panel.is-editing { border-color: var(--os-cranberry); box-shadow: 0 0 0 3px rgba(194, 18, 74, .16); } .os-edit-panel.is-editing > h2 { color: var(--os-cranberry); } /* Land on the panel, not with it jammed against the viewport edge. */ #os-edit-panel { scroll-margin-top: 1rem; } /* ---- tables ---- */ .table { --bs-table-border-color: var(--os-line); } .table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--os-muted); border-bottom-width: 1px; } /* ---- cookie notice strip ---- */ .os-cookie-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.25rem; padding: .55rem 1rem; background: var(--os-ink); color: #fbeef3; font-size: .82rem; border-bottom: 2px solid var(--os-cranberry); } .os-cookie-strip a { color: var(--os-blush); } .os-cookie-ok { background: var(--os-cranberry); border: 1px solid var(--os-cranberry); border-radius: 999px; color: #fff; font-weight: 700; white-space: nowrap; } .os-cookie-ok:hover { background: var(--os-blush); border-color: var(--os-blush); color: #fff; } html[data-os-theme="night"] .os-cookie-strip { background: #0a0207; } /* ---- environment switch (admin) ---- */ .os-env-active { border-color: var(--os-cranberry) !important; background: var(--os-wash) !important; box-shadow: 0 0 0 3px rgba(194, 18, 74, .16); } label.os-env-active-label { color: var(--os-cranberry); font-weight: 700; } /* ---- toasts ---- */ .os-toast-region { position: fixed; top: 1rem; right: 1rem; z-index: 1080; } /* ---- reduced motion ---- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }