/* =============================================================== OPEN_C MUSIC PLAYER — shared footer mini-player Included on every page via: The player auto-injects into on DOMContentLoaded (skipped if the TRACKS array in player.js is empty). =============================================================== */ /* Fixed bottom-of-viewport pill that follows the user as they scroll. Cream background lets the natural-color Open_C logo render correctly. */ .oc-player{ position:fixed; bottom:0; left:0; right:0; z-index:60; display:flex; align-items:center; gap:14px; padding:10px 22px; min-height:54px; background:#faf8f4; /* var(--cream) — light theme */ color:#1c1c28; /* var(--ink) — dark text */ border-top:1px solid #ddd8ce; /* var(--rule) */ box-shadow:0 -10px 30px rgba(28,28,40,0.10); font-family:'Source Sans 3','Source Sans Pro',system-ui,sans-serif; font-size:13.5px; letter-spacing:0.01em; } /* Bump body bottom padding so the fixed player never covers content. */ body.oc-player-active{padding-bottom:64px} /* Open_C lockup logo on the left — natural colors (no filter needed on cream bg). */ .oc-brand-logo{ height:32px; width:auto; display:block; margin-right:4px; } .oc-brand-divider{ width:1px; height:24px; background:rgba(28,28,40,0.14); margin-right:6px; } @media(max-width:600px){ .oc-brand-logo{display:none} .oc-brand-divider{display:none} } /* Buttons — flat icon buttons, hover darkens background. */ .oc-player button{ background:none; border:none; color:#1c1c28; cursor:pointer; padding:0; font-size:14px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background .18s ease, transform .18s ease; font-family:inherit; } .oc-player button:hover{background:rgba(28,28,40,0.08)} .oc-player button:active{transform:scale(0.94)} /* The big play/pause is filled green (brand accent) — cream icon for contrast. */ .oc-player .oc-play{ background:#1e5c4f; color:#faf8f4; width:38px; height:38px; font-size:14px; } .oc-player .oc-play:hover{background:#236d5e} /* Track title + artist (center) */ .oc-track-info{ display:flex; align-items:baseline; gap:8px; min-width:0; max-width:280px; } .oc-track-title{ font-weight:700; color:#1c1c28; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .oc-track-artist{ font-size:11.5px; color:#4a4a5c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Scrub bar — fills accent green up to the playhead. */ .oc-progress-wrap{ flex:1; display:flex; align-items:center; gap:10px; min-width:160px; } .oc-progress-bar{ flex:1; height:4px; background:rgba(28,28,40,0.14); border-radius:2px; cursor:pointer; position:relative; overflow:hidden; } .oc-progress-fill{ background:#1e5c4f; height:100%; border-radius:2px; width:0%; transition:width .15s linear; } .oc-time{ font-size:11px; font-variant-numeric:tabular-nums; color:#4a4a5c; min-width:88px; text-align:right; letter-spacing:0.02em; } /* Track list popover — opens upward from the [≡] button */ .oc-tracklist{ position:fixed; bottom:64px; right:22px; background:#faf8f4; color:#1c1c28; border:1px solid #ddd8ce; border-radius:10px; padding:8px; min-width:300px; max-height:320px; overflow-y:auto; box-shadow:0 -10px 30px rgba(28,28,40,0.18); z-index:61; } .oc-tracklist[hidden]{display:none} .oc-track-item{ padding:10px 14px; cursor:pointer; border-radius:6px; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; transition:background .15s ease; } .oc-track-item:hover{background:rgba(28,28,40,0.06)} .oc-track-item.active{ background:rgba(30,92,79,0.12); color:#1e5c4f; font-weight:700; } .oc-track-item .oc-track-item-num{ font-size:10px; opacity:0.5; font-variant-numeric:tabular-nums; letter-spacing:0.06em; min-width:22px; } .oc-track-item .oc-track-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .oc-track-item .oc-track-item-dur{ font-size:11px; font-variant-numeric:tabular-nums; opacity:0.55; } /* Volume slider (compact) */ .oc-volume-wrap{ display:flex; align-items:center; gap:6px; } .oc-volume{ width:60px; height:4px; appearance:none; -webkit-appearance:none; background:rgba(28,28,40,0.14); border-radius:2px; cursor:pointer; } .oc-volume::-webkit-slider-thumb{ -webkit-appearance:none; width:10px; height:10px; border-radius:50%; background:#1c1c28; cursor:pointer; } .oc-volume::-moz-range-thumb{ width:10px; height:10px; border-radius:50%; background:#1c1c28; cursor:pointer; border:none; } /* Mobile layout (≤600px): a two-row player. Row 1: prev / play / next / progress / time Row 2 (full-width, centered): track title + list button Buttons sized for thumbs (44px tap target). */ /* Mobile player - single compact row, no wrap. Layout: [<<] [>] [>>] [============progress============] [≡] The track title moves into the (≡) list panel where the user can see what is playing alongside the other tracks. Saves ~90px of vertical space vs. the previous two-row layout. */ @media(max-width:600px){ .oc-player{ padding:8px 10px; gap:6px; font-size:12px; flex-wrap:nowrap; min-height:54px; } .oc-prev,.oc-next,.oc-list{ min-width:36px; min-height:36px; width:36px; height:36px; font-size:16px; padding:0; flex:0 0 auto; } .oc-play{ min-width:42px; min-height:42px; width:42px; height:42px; font-size:14px; flex:0 0 auto; } .oc-progress-wrap{ flex:1 1 auto; min-width:0; gap:6px; } .oc-time{ min-width:0; font-size:10.5px; white-space:nowrap; } .oc-track-info{ display:none; } .oc-volume-wrap{ display:none; } .oc-brand-logo,.oc-brand-divider,.oc-brand{ display:none; } /* Body padding shrinks to match the slimmer player */ body.oc-player-active{ padding-bottom:54px; } /* Position the floating back-to-top above the player so they don't collide */ .back-to-top{ bottom:64px !important; } /* Track list panel: show the currently-playing title as a header */ .oc-tracklist{ bottom:54px !important; } } /* Respect reduced-motion — drop subtle transitions */ @media(prefers-reduced-motion:reduce){ .oc-player button, .oc-progress-fill, .oc-track-item{transition:none} }