/* ============================================================ TopmusicUA — Apple-minimal theme with Ukrainian flag accents Design tokens, light + dark (auto via prefers-color-scheme, manual override via ). System fonts only. ============================================================ */ :root{ /* Brand — Ukrainian flag */ --ua-blue:#0057b7; --ua-blue-600:#0a4fa0; --ua-yellow:#ffd700; /* Surfaces & text (light) */ --bg:#fbfbfd; --surface:#ffffff; --surface-2:#f5f5f7; --text:#1d1d1f; --text-2:#6e6e73; --line:rgba(0,0,0,.08); --accent:var(--ua-blue); --accent-contrast:#ffffff; --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06); --shadow-sm:0 1px 2px rgba(0,0,0,.05); --glass:rgba(255,255,255,.72); /* Scale */ --r:14px; /* radius */ --r-lg:22px; --maxw:1000px; --pad:clamp(16px,4vw,28px); --gap:clamp(10px,2vw,16px); --ease:cubic-bezier(.22,.61,.36,1); --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display", "Segoe UI",Roboto,Helvetica,Arial,sans-serif; } @media (prefers-color-scheme:dark){ :root{ --bg:#000000; --surface:#1c1c1e; --surface-2:#2c2c2e; --text:#f5f5f7; --text-2:#a1a1a6; --line:rgba(255,255,255,.12); --accent:#4d9fff; /* brighter blue for dark contrast */ --ua-yellow:#ffd60a; --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.5); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --glass:rgba(28,28,30,.66); } } /* Manual override wins over the media query */ :root[data-theme="light"]{ --bg:#fbfbfd;--surface:#fff;--surface-2:#f5f5f7;--text:#1d1d1f;--text-2:#6e6e73; --line:rgba(0,0,0,.08);--accent:var(--ua-blue);--ua-yellow:#ffd700; --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);--glass:rgba(255,255,255,.72); } :root[data-theme="dark"]{ --bg:#000;--surface:#1c1c1e;--surface-2:#2c2c2e;--text:#f5f5f7;--text-2:#a1a1a6; --line:rgba(255,255,255,.12);--accent:#4d9fff;--ua-yellow:#ffd60a; --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.5);--glass:rgba(28,28,30,.66); } /* ------------------------------ base ------------------------------ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--font);font-size:16px;line-height:1.55; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:none} h1,h2,h3,h4,h5,h6{margin:0;font-weight:650;letter-spacing:-.02em;line-height:1.15} button{font-family:inherit} .clr{clear:both} ::selection{background:var(--ua-yellow);color:#1d1d1f} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} .bodywrap{max-width:var(--maxw);margin:0 auto;padding:0} /* ------------------------------ header ------------------------------ */ .headcontainer{position:sticky;top:0;z-index:50; background:var(--glass);backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line)} .searchcontainer{max-width:var(--maxw);margin:0 auto;padding:10px var(--pad); display:flex;align-items:center;gap:var(--gap)} .logo{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto} .logo .logotype{font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--text)} .logo .flag{width:22px;height:15px;border-radius:3px;overflow:hidden;flex:0 0 auto; background:linear-gradient(var(--ua-blue) 0 50%,var(--ua-yellow) 50% 100%);box-shadow:var(--shadow-sm)} .q{margin-left:auto} .search{position:relative;width:min(46vw,300px)} .search .input{width:100%;border:1px solid var(--line);background:var(--surface-2); color:var(--text);font-size:15px;border-radius:980px;padding:9px 38px 9px 16px;outline:none; transition:box-shadow .2s var(--ease),background .2s} .search .input::placeholder{color:var(--text-2)} .search .input:focus{background:var(--surface);box-shadow:0 0 0 3px rgba(0,87,183,.18)} .search .submit{position:absolute;right:4px;top:50%;transform:translateY(-50%); width:30px;height:30px;padding:15px;border:0;border-radius:50%;cursor:pointer; background:var(--accent) no-repeat center/16px;opacity:.95; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E")} .search .submit:hover{opacity:1} input[type=search]{-webkit-appearance:none;appearance:none} /* theme toggle */ .theme-toggle{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line); background:var(--surface-2);color:var(--text);cursor:pointer;display:grid;place-items:center; transition:background .2s,transform .15s var(--ease)} .theme-toggle:hover{transform:scale(1.06)} .theme-toggle svg{width:18px;height:18px} .theme-toggle .moon{display:none} @media (prefers-color-scheme:dark){.theme-toggle .sun{display:none}.theme-toggle .moon{display:block}} :root[data-theme="dark"] .theme-toggle .sun{display:none} :root[data-theme="dark"] .theme-toggle .moon{display:block} :root[data-theme="light"] .theme-toggle .sun{display:block} :root[data-theme="light"] .theme-toggle .moon{display:none} /* ------------------------------ layout ------------------------------ */ .content{max-width:var(--maxw);margin:0 auto;padding:0} .maincontainer{padding:var(--pad)} main{display:block} .adshead{margin:18px var(--pad);min-height:0;text-align:center} .maincontainer .adshead{margin:18px 0} /* hero titles */ .content h1.main{font-size:clamp(26px,5vw,40px);font-weight:700;letter-spacing:-.03em; text-align:center;color:var(--text);margin:15px 0 25px;border:0} .covers{display:block;margin:18px auto;width:min(280px,70vw);height:auto;aspect-ratio:1; border-radius:50%;box-shadow:var(--shadow);object-fit:cover} .artist-desc{max-width:680px;margin:6px auto 4px;text-align:center;color:var(--text-2);font-size:16px} .content h2.menus{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--text-2);text-align:center;margin:34px 0 16px;border:0} /* ------------------------ track list (cards) ------------------------ */ ul.play{list-style:none;margin:0;padding:0;display:grid;gap:10px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} ul.play li{margin:0} ul.play li a{display:flex;align-items:center;gap:12px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:13px 16px;color:var(--text);font-size:15px;font-weight:500;line-height:1.35; box-shadow:var(--shadow-sm);transition:transform .18s var(--ease),box-shadow .18s,border-color .18s; overflow:hidden} ul.play li a::before{content:"";flex:0 0 auto;width:34px;height:34px;border-radius:50%; background:var(--accent) no-repeat center/18px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); transition:transform .18s var(--ease)} ul.play li a:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:transparent} ul.play li a:hover::before{transform:scale(1.08)} ul.play li a span{margin-left:auto;color:var(--text-2);font-size:13px} /* "more / pagination" row */ ul.play li.more{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center; align-items:center;gap:10px;margin:18px 0;background:none;border:0;box-shadow:none;padding:0} ul.play li.more a{flex:0 0 auto;display:inline-flex;width:auto;padding:9px 20px;border-radius:980px; background:var(--ua-yellow);color:#1d1d1f;font-weight:600;border:0} ul.play li.more a::before{content:none} ul.play li.more a:hover{transform:translateY(-1px);filter:brightness(.97)} ul.play li.more span{margin:0;padding:7px 16px;border-radius:980px;background:var(--surface-2); color:var(--text-2);font-size:14px} /* ------------------------ full track page ------------------------ */ .music{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow);padding:clamp(18px,4vw,32px);margin:0 0 16px;color:var(--text)} .music a{color:var(--accent)} .track-top{display:grid;grid-template-columns:200px 1fr;gap:clamp(18px,3vw,28px); align-items:start;margin:0 0 6px} .cover{width:200px;height:200px;border-radius:18px;overflow:hidden; background:linear-gradient(135deg,var(--ua-blue),#0a3d80);position:relative;box-shadow:var(--shadow)} .cover::after{content:"";position:absolute;inset:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd700' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9' opacity='.6'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='%23ffd700'/%3E%3C/svg%3E") no-repeat center/52%} .track{min-width:0} .track h1{font-size:clamp(22px,4vw,30px);margin:0 0 16px;color:var(--text)} .track h1{border:0} /* spec table */ table.info{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:15px;display:table} table.info th,table.info td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line); vertical-align:top} table.info th{color:var(--text-2);font-weight:500;width:42%;white-space:nowrap} table.info td{color:var(--text);font-weight:500} table.info tr:last-child th,table.info tr:last-child td{border-bottom:0} /* download (in attachment) */ .load{margin:14px 0 0} .load a{color:var(--text)} .load span.dl a{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:980px; background:var(--ua-yellow);color:#1d1d1f;font-weight:600;font-size:15px;box-shadow:var(--shadow-sm); transition:transform .15s var(--ease),filter .15s} .load span.dl a:hover{transform:translateY(-1px);filter:brightness(.97)} .load span.dl a::before{content:"";width:18px;height:18px; background:no-repeat center/contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4M5 21h14'/%3E%3C/svg%3E")} /* FAQ accordion (kept from original, restyled) */ .track-faq{max-width:100%;margin:26px 0 0;color:var(--text)} .track-faq h2{font-size:20px;margin:0 0 12px} .track-faq details{border:1px solid var(--line);border-radius:var(--r);padding:14px 18px; margin-bottom:8px;background:var(--surface-2);transition:background .2s} .track-faq summary{font-weight:600;cursor:pointer;list-style:none;color:var(--text); display:flex;justify-content:space-between;gap:12px;align-items:center} .track-faq summary::-webkit-details-marker{display:none} .track-faq summary::after{content:"+";font-weight:600;color:var(--text-2);font-size:20px; transition:transform .2s var(--ease)} .track-faq details[open] summary::after{content:"−"} .track-faq p{margin:.7rem 0 0;color:var(--text-2)} /* ------------------------ category pills + goto ------------------------ */ .cat{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:26px var(--pad);padding:0} .cat a{display:inline-flex;align-items:center;padding:8px 16px;border-radius:980px; background:var(--surface-2);color:var(--text);font-size:14px;font-weight:600; border:1px solid var(--line);transition:background .18s,transform .15s var(--ease)} .cat a::before{content:"#";color:var(--accent);margin-right:4px;font-weight:700} .cat a:hover{transform:translateY(-1px);background:var(--surface)} .goto{display:flex;justify-content:center;align-items:center;gap:10px;margin:30px var(--pad) 8px} .home a{display:inline-flex;align-items:center;padding:9px 18px;border-radius:980px; background:var(--accent);color:#fff;font-weight:600;font-size:15px} .home a b{font-weight:700} .top a{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%; border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:16px} .top a:hover,.home a:hover{filter:brightness(.97)} /* ------------------------ footer ------------------------ */ .footcontainer{border-top:1px solid var(--line);margin-top:30px;padding:24px var(--pad); color:var(--text-2);font-size:13px;text-align:center} .footcontainer a{color:var(--text-2)} .footcontainer a:hover{color:var(--text)} /* ------------------------ errors / system ------------------------ */ .berrors{background:rgba(255,215,0,.14);border:1px solid var(--ua-yellow);color:var(--text); border-radius:var(--r);margin:0 0 18px;padding:14px 18px} .berrors a{color:var(--accent);text-decoration:underline} .content p.err{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r); color:var(--text-2);padding:12px 16px;margin:8px 0} /* ------------------------ generic forms / DLE blocks ------------------------ */ input[type=text],input[type=password],input[type=email],input[type=search], textarea,select,.f_input,.f_textarea,.wide{ font-family:inherit;font-size:15px;color:var(--text);background:var(--surface); border:1px solid var(--line);border-radius:10px;padding:10px 14px;outline:none;max-width:100%; transition:box-shadow .2s,border-color .2s} textarea,.f_textarea{width:100%;line-height:1.5} input:focus,textarea:focus,select:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,87,183,.16)} button,.fbutton,.btn,.btn-big,.knopka,input[type=submit]{ font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;border:0;border-radius:980px; padding:10px 22px;background:var(--accent);color:#fff; transition:transform .15s var(--ease),filter .15s} button:hover,.fbutton:hover,.btn:hover,.knopka:hover,input[type=submit]:hover{ transform:translateY(-1px);filter:brightness(.97)} .btn-border{background:var(--surface-2);color:var(--text);border:1px solid var(--line)} .pheading,.heading,.title.h1{font-size:22px;font-weight:650;margin:6px 0 14px;color:var(--text)} .baseform,.basecont,.box,.story,.block,.addform,.addcm{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-sm);padding:clamp(16px,3vw,24px);margin:0 0 16px} .tableform{width:100%;border-collapse:collapse} .tableform td{padding:8px 6px;vertical-align:top} .tableform td.lab{color:var(--text-2);white-space:nowrap;width:32%} .impot{color:#ff3b30} .ui-form{list-style:none;margin:0;padding:0;display:grid;gap:12px} .ui-form .combo{display:grid;gap:12px;grid-template-columns:1fr 1fr} .fieldsubmit,.form_submit{margin-top:14px} /* comments */ .addcm{padding:18px} .allc{border:1px solid var(--line);border-radius:var(--r);background:var(--surface); padding:14px 18px;margin:0 0 12px;box-shadow:var(--shadow-sm)} .comname{display:flex;align-items:center;gap:10px;font-weight:600;margin:0 0 6px;color:var(--text)} .comname img{width:36px;height:36px;border-radius:50%;object-fit:cover} .comname small{color:var(--text-2);font-weight:400} p.title{font-weight:650;font-size:18px;margin:18px 0 10px;color:var(--text)} /* pagination (DLE {pages}) */ .pagenav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center; margin:22px 0} .pages span,.pages a,.navigation a,.navigation span{display:inline-grid;place-items:center; min-width:38px;height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--line); background:var(--surface);color:var(--text);font-weight:600} .pages span:not(.nav_ext){background:var(--accent);color:#fff;border-color:transparent} .prevpg,.nextpg{font-weight:600} /* userinfo / avatars */ .avatar img{border-radius:50%;width:96px;height:96px;object-fit:cover} .online{color:#34c759}.offline{color:var(--text-2)} .grey{color:var(--text-2)} /* ------------------------ login profile block ------------------------ */ .profile.block{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .profile-picture img{width:48px;height:48px;border-radius:50%;object-fit:cover} .user-name{font-size:17px} /* ------------------------ responsive ------------------------ */ @media (max-width:720px){ .track-top{grid-template-columns:1fr;justify-items:center;text-align:center} .track-top .track{text-align:left;width:100%} .track h1{text-align:center;} .cover{width:140px;height:140px;margin:0 auto} table.info th{width:46%} .ui-form .combo{grid-template-columns:1fr} .search{width:42vw} .logo .logotype{font-size:17px} } @media (max-width:420px){ .searchcontainer{gap:8px;padding:8px 14px} ul.play{grid-template-columns:1fr} } /* ------------------------ motion / a11y ------------------------ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} } /* ============================================================ SIGNATURE: Apple-Music-style audio player (vanilla, no deps) Blue→yellow progress fill = Ukrainian flag. ============================================================ */ .player{display:flex;align-items:center;gap:14px;flex-wrap:wrap; background:var(--glass);backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px); border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow);padding:14px 16px;margin:16px 0} .player__audio{display:none} .player__art{flex:0 0 auto;width:52px;height:52px;border-radius:14px;display:grid;place-items:center; background:linear-gradient(135deg,var(--ua-blue),#0a3d80);box-shadow:var(--shadow-sm);overflow:hidden} .player__art svg{width:26px;height:26px} .player.is-playing .player__art{animation:ua-spin 6s linear infinite} @keyframes ua-spin{to{transform:rotate(360deg)}} .player__body{flex:1 1 230px;min-width:0;display:flex;flex-direction:column;gap:9px} .player__title{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .player__controls{display:flex;align-items:center;gap:10px} .player__btn{flex:0 0 auto;display:grid;place-items:center;border:0;background:none;cursor:pointer; color:var(--text);width:34px;height:34px;border-radius:50%;padding:0; transition:transform .15s var(--ease),background .15s} .player__btn:hover{background:var(--surface-2);transform:scale(1.05)} .player__btn svg{width:20px;height:20px} .player__play{width:44px;height:44px;background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)} .player__play:hover{background:var(--accent);transform:scale(1.06);filter:brightness(1.03)} .player__play svg{width:22px;height:22px} .player__pause-icon{display:none} .player.is-playing .player__play-icon{display:none} .player.is-playing .player__pause-icon{display:block} .player__time{font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums; white-space:nowrap;margin-left:2px} .player--single .player__prev,.player--single .player__next{display:none} /* volume — collapses on small screens */ .player__vol-wrap{display:flex;align-items:center;gap:6px;margin-left:auto} .player__vol{width:84px} @media (max-width:560px){.player__vol{width:60px}} @media (max-width:430px){.player__time{margin-left:auto}.player__vol-wrap{display:none}} /* range inputs: seek + volume, styled to look custom */ .player__range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:980px; background:var(--surface-2);cursor:pointer;outline:none;margin:0; /* --pct updated from JS for the blue→yellow fill */ background-image:linear-gradient(90deg,var(--ua-blue),var(--ua-yellow)); background-repeat:no-repeat;background-size:var(--pct,0%) 100%} .player__vol{height:5px;background-image:linear-gradient(90deg,var(--accent),var(--accent))} .player__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none; width:15px;height:15px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.15); box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .12s var(--ease)} .player__range:active::-webkit-slider-thumb{transform:scale(1.25)} .player__range::-moz-range-thumb{width:15px;height:15px;border:1px solid rgba(0,0,0,.15); border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3)} .player__seek-wrap{display:flex;align-items:center;gap:0} .player__dl{flex:0 0 auto} @media (max-width:560px){.player__dl{width:100%;text-align:center} .player__dl .dl-inner{justify-content:center;width:100%}} .player__dl .dl-inner{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:980px; background:var(--ua-yellow);color:#1d1d1f;font-weight:600;font-size:14px; transition:transform .15s var(--ease),filter .15s} .player__dl:hover .dl-inner{transform:translateY(-1px);filter:brightness(.97)} .player__dl .dl-inner::before{content:"";width:16px;height:16px;background:no-repeat center/contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4M5 21h14'/%3E%3C/svg%3E")} /* download link moved into the player by JS */ .player .load{margin:0;flex:0 0 auto} @media (max-width:560px){.player .load{width:100%;text-align:center}}