/* ============================================================ app.css - база та компоненти нового UI гравця (D-UI-01, Фаза 1) Кодування файлу: Windows-1251. Mobile-first. Активується ЛИШЕ за $design_system=1 (підключає ui_head.php). Всі кольори - через var(--...) з tokens.css. ============================================================ */ /* ---------- Шрифт (правильний регістр шляхів - lowercase) ---------- */ @font-face{ font-family:"GothamPro"; src:url("../fonts/gothampro/gothamproregular/gothamproregular.woff") format("woff"), url("../fonts/gothampro/gothamproregular/gothamproregular.ttf") format("truetype"); font-style:normal;font-weight:400;font-display:swap; } @font-face{ font-family:"GothamPro"; src:url("../fonts/gothampro/gothamprobold/gothamprobold.woff") format("woff"), url("../fonts/gothampro/gothamprobold/gothamprobold.ttf") format("truetype"); font-style:normal;font-weight:700;font-display:swap; } /* ---------- База ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body.ds{ margin:0;min-height:100vh; background:var(--bg);color:var(--text); font:16px/1.55 var(--font); -webkit-font-smoothing:antialiased; } /* Тематичний фон: патерн/картинка живе на , скрим ($bg_overlay=1) - напівпрозорий фон */ html.ds-bg{background-color:var(--bg);background-attachment:fixed} html.ds-bg body.ds{background:transparent} html.ds-bg body.ds.ds-scrim{background:var(--scrim)} html.ds-bg.pat-space{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150' fill='none' stroke='%238892a0' stroke-opacity='.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='34' cy='40' r='12'/%3E%3Cellipse cx='34' cy='40' rx='20' ry='7' transform='rotate(-20 34 40)'/%3E%3Cpath d='M104 18c6 5 8 15 5 23l-3 5h-4l-3-5c-3-8-1-18 5-23z'/%3E%3Ccircle cx='106' cy='30' r='3'/%3E%3Cpath d='M100 41l-5 6 4-1'/%3E%3Cpath d='M112 41l5 6-4-1'/%3E%3Cpath d='M104 46l2 7 2-7'/%3E%3Cpath d='M58 104l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3Cpath d='M120 96v10M115 101h10'/%3E%3C/svg%3E")} html.ds-bg.pat-spy{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150' fill='none' stroke='%238892a0' stroke-opacity='.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='36' cy='40' r='12'/%3E%3Cpath d='M45 49l10 10'/%3E%3Cpath d='M92 44c0-9 7-16 16-16s16 7 16 16'/%3E%3Cpath d='M83 44h50'/%3E%3Cpath d='M58 116a13 13 0 0 1 26 0M64 116a8 8 0 0 1 15 0M69 116a3.5 3.5 0 0 1 7 0'/%3E%3Ccircle cx='116' cy='104' r='5'/%3E%3Cpath d='M120 108l9 9M125 113l3-3M128 116l3-3'/%3E%3C/svg%3E")} html.ds-bg.pat-travel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150' fill='none' stroke='%238892a0' stroke-opacity='.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 14l3 12 6 24h-4l-3-11h-6l-3 11h-4l6-24z'/%3E%3Cpath d='M31 30h8M28 40h14'/%3E%3Cpath d='M92 50l16-26 16 26z'/%3E%3Cpath d='M100 50h16'/%3E%3Cpath d='M40 128l14-20 9 11 7-9 14 18z'/%3E%3Cpath d='M50 114l4 4 4-4'/%3E%3Ccircle cx='118' cy='112' r='9'/%3E%3Cpath d='M118 105l3 7-3 7-3-7z'/%3E%3C/svg%3E")} .ds img{max-width:100%} .ds a{color:var(--brand-strong);text-decoration:none} .ds a:hover{text-decoration:underline} [data-theme="dark"] .ds a{color:var(--brand)} /* Фокус із клавіатури - видимий на всьому */ .ds :focus{outline:none} .ds :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px} /* ---------- Шапка ---------- */ .ds .topbar{ display:flex;align-items:center;gap:10px; padding:14px 18px;background:var(--surface); border-bottom:1px solid var(--border); } .ds .logo{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0} .ds .logo-mark{ width:32px;height:32px;border-radius:9px;flex:none; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:var(--brand-ink); display:flex;align-items:center;justify-content:center; font-weight:700;font-size:16px; } .ds img.logo-img{height:34px;width:auto;max-width:170px;display:block;flex:none} .ds .logo-name{ font-weight:700;font-size:15px;color:var(--text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* ---------- Прогрес + таймер ---------- */ .ds .progress{ padding:11px 18px;background:var(--surface); border-bottom:1px solid var(--border); } .ds .pbar{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden} .ds .pbar i{display:block;height:100%;background:var(--brand);border-radius:999px;transition:width var(--transition)} .ds .pmeta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px} .ds .plabel{font-size:12.5px;color:var(--text-muted);font-weight:500} .ds .timer{ display:inline-flex;align-items:center;gap:5px;flex:none; font-size:12.5px;font-weight:600;color:var(--text-muted); background:var(--surface-2);padding:4px 9px;border-radius:999px; } .ds .timer svg{width:13px;height:13px} /* ---------- Контейнер сторінки ---------- */ .ds main.page{display:block;padding:16px;max-width:1000px;margin:0 auto} /* прогрес живе всередині контейнера - робимо його карткою-смужкою */ .ds main .progress{border:1px solid var(--border);border-radius:var(--radius);padding:11px 14px;margin:0 0 14px} .ds .layout{display:flex;flex-direction:column;gap:15px} .ds .ds-team{font-size:13px;color:var(--text-muted);margin:0 0 10px} .ds .ds-team b{color:var(--text);font-weight:700} /* ---------- Картки ---------- */ .ds .card{ background:var(--surface);border:1px solid var(--border); border-radius:14px;padding:16px;box-shadow:var(--shadow); } .ds .task-title{font-size:17px;font-weight:700;margin:0 0 6px} .ds .task-text{font-size:15.5px;line-height:1.6;margin:0} .ds .task-text img{max-width:100%;height:auto;border-radius:var(--radius)} .ds .task-text b{color:var(--brand-strong)} [data-theme="dark"] .ds .task-text b{color:var(--brand)} /* ---------- Банер на старті (тільки скруглені кути; без патерна) ---------- */ .ds .banner-img{ display:block;width:100%;height:auto; border-radius:var(--radius-lg); border:1px solid var(--border); } /* ---------- Старт: hero, "Як грати" ---------- */ .ds .hero{ max-width:640px;margin:0 auto;width:100%; display:flex;flex-direction:column;gap:14px; text-align:center;align-items:center; } .ds .hero .card{width:100%} .ds .how{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .ds .mini{ display:inline-flex;align-items:center;gap:7px; font-size:12.5px;font-weight:500;color:var(--text); background:var(--surface);border:1px solid var(--border); border-radius:999px;padding:6px 13px 6px 6px; } .ds .mini b{ width:20px;height:20px;border-radius:50%;flex:none; background:var(--brand);color:var(--brand-ink); font-size:11.5px;font-weight:700; display:inline-flex;align-items:center;justify-content:center; } .ds .muted-note{font-size:12.5px;color:var(--text-muted);margin:0} .ds .startcard{width:100%;text-align:center} .ds .startcard h3{font-size:16px;font-weight:700;margin:0 0 6px;color:var(--text-muted)} .ds .startcard .date_time{font-size:26px;font-weight:700;margin:0 0 4px} .ds .startcard .cdown{font-size:14px;color:var(--text-muted)} /* ---------- Ввід коду ---------- */ .ds .clab{display:block;font-size:12.5px;font-weight:600;color:var(--text-muted);margin:0 0 8px} .ds .cinput{ display:block;width:100%;min-height:var(--tap);height:48px; border:1.5px solid var(--border);background:var(--bg);color:var(--text); border-radius:var(--radius);padding:0 14px;margin:0 0 9px; font:inherit;font-size:17px; } .ds .cinput:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .ds .found{font-size:12.5px;color:var(--text-muted);margin:8px 0} .ds .found-wrap{margin:10px 0 0;font-size:14px;line-height:1.7} .ds .found-wrap .clab{margin-bottom:4px} /* ---------- Кнопки ---------- */ .ds .btn{ min-height:var(--tap);height:48px;border:none;border-radius:var(--radius); font:inherit;font-size:15.5px;font-weight:700;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:0 18px; transition:transform .06s,filter var(--transition); } .ds .btn:active{transform:scale(.98)} .ds .btn-primary{background:var(--brand);color:var(--brand-ink);width:100%} .ds .btn-primary:hover{filter:brightness(.95)} .ds .btn-ghost{ background:transparent;color:var(--brand-strong); border:1.5px solid var(--brand);width:auto; } [data-theme="dark"] .ds .btn-ghost{color:var(--brand)} .ds .cta-wide{width:100%;max-width:300px;margin:0 auto;display:flex} /* прилипла панель головної дії на мобільному */ .ds .actionbar{position:sticky;bottom:0;z-index:5;padding:10px 0;background:linear-gradient(to top,var(--bg) 82%,transparent)} .ds .actionbar .sec{margin-top:9px;text-align:center} /* ---------- Миттєвий фідбек коду (іконка + текст, не лише колір) ---------- */ .ds .fb{ display:flex;align-items:flex-start;gap:10px; padding:13px 14px;border-radius:var(--radius); font-size:14.5px;font-weight:600;margin:10px 0; animation:ds-pop .25s ease; } .ds .fb svg{width:22px;height:22px;flex:none;margin-top:1px} .ds .fb.ok{background:var(--success-bg);color:var(--success)} .ds .fb.err{background:var(--danger-bg);color:var(--danger)} .ds .fb.info{background:var(--info-bg);color:var(--info)} .ds .fb .fbx{font-weight:400} @keyframes ds-pop{from{transform:scale(.94);opacity:.4}to{transform:scale(1);opacity:1}} /* ---------- Підказки (стиль --warning, бренд не застосовується) ---------- */ .ds .hints{display:flex;flex-direction:column;gap:9px;margin:4px 0} .ds .hints-title{ font-size:12.5px;font-weight:700;color:var(--text-muted); text-transform:uppercase;letter-spacing:.03em; } .ds .hint{ display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px; background:var(--warning-bg);border:1px solid var(--warning-border); border-radius:var(--radius);padding:11px 13px; } .ds .hint .hi{font-size:14px;font-weight:700;color:var(--warning)} .ds .hint .meta{font-size:12.5px;color:var(--text-muted)} .ds .hint .pen{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--danger)} .ds .hint .btn{height:36px;min-height:36px;font-size:13px;padding:0 14px;flex:none;width:auto} /* текст взятої підказки - під завданням */ .ds .hintbox{ background:var(--warning-bg);border:1px solid var(--warning-border); border-radius:var(--radius);padding:12px 14px;margin:12px 0 0; } .ds .hintbox-t{font-size:13px;font-weight:700;color:var(--warning);margin:0 0 6px} .ds .hintbox-t .pen{color:var(--danger);font-weight:700} .ds .hintbox .task-text{font-size:14.5px} /* відкрита відповідь (HELP03) - інформаційний стиль */ .ds .hintbox.ans{background:var(--info-bg);border-color:var(--border)} .ds .hintbox.ans .hintbox-t{color:var(--info)} /* ---------- Фініш ---------- */ .ds .finlay{display:flex;flex-direction:column;gap:15px;max-width:640px;margin:0 auto;width:100%} .ds .finishcard{ display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px; background:var(--surface);border:1px solid var(--border); border-radius:16px;padding:28px 22px;box-shadow:var(--shadow); order:-1; } .ds .medal{ width:84px;height:84px;border-radius:50%; background:var(--brand-soft-bg);color:var(--brand); display:flex;align-items:center;justify-content:center; } .ds .medal svg{width:44px;height:44px} .ds .finishcard h2{font-size:24px;margin:0;font-weight:700} .ds .finishcard .lead{font-size:14px;color:var(--text-muted);margin:0} .ds .result{display:flex;gap:11px;width:100%;margin-top:2px} .ds .rcard{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:13px 10px} .ds .rlbl{display:block;font-size:12px;color:var(--text-muted);margin-bottom:4px} .ds .rval{display:block;font-size:20px;font-weight:700} .ds .rsub{display:block;font-size:11.5px;color:var(--text-muted);margin-top:3px} /* ---------- Лінійки завдань, посилання-блоки ---------- */ .ds .ds-lines{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0} .ds .ds-lines a{ display:inline-flex;align-items:center;min-height:36px; background:var(--surface);border:1px solid var(--border); border-radius:999px;padding:5px 14px;font-size:13.5px; } .ds .ds-lines b a{border-color:var(--brand);color:var(--brand-strong)} .ds .links{display:flex;flex-direction:column;gap:8px;margin:16px 0 0;text-align:center} /* ---------- Легасі-розмітка всередині нового UI ---------- Текст завдань/повідомлень движка містить старі теги й класи (font color, span.dr, blockquote.drb, .pt, .lvl, .hc). Мапимо їх на семантичні токени, щоб контент лишався читабельним. */ .ds font[color="red"], .ds font[color="Red"]{color:var(--danger)} .ds font[color="yellow"], .ds font[color="Yellow"]{color:var(--warning)} .ds font[color="green"], .ds font[color="#4F4"]{color:var(--success)} .ds span[style*="color:#4F4"], .ds b span[style*="4F4"]{color:var(--success)!important} .ds .codecard span.dr{color:var(--success);font-weight:700} .ds .taskblock span.dr, .ds .hintbox span.dr{color:var(--warning);font-weight:700} .ds span.drw{font-weight:700} .ds .pt{color:var(--success);font-weight:700} .ds .lvl{font-weight:700;color:var(--text-muted)} .ds .hc{display:block;background:var(--info-bg);color:var(--info);border-radius:var(--radius);padding:10px 12px;margin:8px 0} .ds p.t, .ds .g{color:var(--text-muted);font-size:13px} .ds blockquote.drb{ background:var(--surface-2);border:1px solid var(--border); border-left:3px solid var(--warning);border-radius:8px; padding:10px 12px;margin:10px 0; } .ds h1,.ds h2,.ds h3,.ds h4{font-weight:700;line-height:1.25;margin:0 0 10px} .ds h1{font-size:22px}.ds h2{font-size:19px}.ds h3{font-size:17px}.ds h4{font-size:15px} .ds .ar{ background:var(--warning-bg);color:var(--warning); border:1px solid var(--warning-border);border-radius:var(--radius); padding:12px 14px;font-size:15px; } .ds .error{ background:var(--danger-bg);color:var(--danger); border-radius:var(--radius);padding:12px 14px;margin:10px 0; font-size:14.5px;font-weight:600; } .ds hr{border:none;border-top:1px solid var(--border);margin:12px 0} .ds input[type=text]{font:inherit} .ds input[type=submit]{-webkit-appearance:none;appearance:none} /* ---------- Адаптив: планшет / десктоп ---------- */ @media (min-width:700px){ .ds main.page{padding:24px 28px} .ds .topbar{padding:14px 28px} .ds .progress{padding:11px 28px} .ds .task-title{font-size:20px} .ds .result{gap:14px} } @media (min-width:960px){ /* завдання зліва, картка коду справа (та сама сторінка) */ .ds .layout.lay-task{ display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start; } .ds .lay-task .taskblock{grid-column:1;grid-row:1} .ds .lay-task .hints{grid-column:1;grid-row:2;margin:0} .ds .lay-task .sidecol{grid-column:2;grid-row:1 / span 2;position:sticky;top:16px} .ds .lay-task .ds-lines{grid-column:1 / -1} .ds .actionbar{position:static;padding:10px 0 0;background:none} } /* ---------- Доступність: вимкнення анімацій ---------- */ @media (prefers-reduced-motion: reduce){ .ds *,.ds *::before,.ds *::after{animation:none!important;transition:none!important} }