/* ============================================================ time-to-level.css — стилі калькулятора строків до рівня. Розмітка: new/partials/time-to-level.php Винесено з інлайнового блоку 27.07.2026: тег стилів у невалідний за HTML, і Nu давав на /ukr/rivni/ та /skilky-chasu-vyvchyty-angliysku/ помилку «Element style not allowed as child of element div» плюс три хибні помилки CSS (@container і container-type Nu ще не знає; зовнішній файл він не перевіряє). Партіал підключає цей файл сам через на тому самому місці, де стояв інлайн: позиція в каскаді не змінюється, а host-сторінки правити не треба. Такий link у валідний: rel=stylesheet це body-ok ключове слово, перевірено на самому Nu. ?v= підіймати вручну при кожній зміні: склейки combined*.php його не збирають. ============================================================ */ .ttl{margin:0 auto} /* Підпис-місток під карткою на сторінках-вбудовуваннях: 24px до картки, 48px після блока. ПОТРОЄНИЙ клас (0,3,1) без !important: легасі `body.home-v2 .main-section-article p{margin:0 0 16px}` і `body.static-page .service-list-col2 p` мають (0,2,2) — подвоєння (0,2,1) НЕ вистачало (живий замір 11.07: margin-top падав у 0). lr лишаються auto (легасі ставить auto !important — збіг) */ p.ttl-note.ttl-note.ttl-note{max-width:760px;margin:24px auto var(--bl-space-48,48px);text-align:center;font-size:16px;line-height:1.45;color:#5C6B78;font-weight:500} p.ttl-note.ttl-note.ttl-note a{color:#2F6075;font-weight:600} .ttl__card{max-width:760px;margin:0 auto;background:#fff;border:1px solid rgba(20,35,60,.08);border-radius:var(--bl-radius-bento,24px);box-shadow:var(--bl-shadow-bento,0 18px 44px rgba(31,68,90,.12),0 2px 8px rgba(31,68,90,.05));overflow:hidden;container-type:inline-size;container-name:ttl} .ttl__head{padding:28px 28px 4px;text-align:center} .ttl__eyebrow{display:inline-block;font-size:13px;font-weight:700;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:#12758C;background:#E7F2F5;border:1px solid rgba(18,117,140,.18);border-radius:999px;padding:6px 12px;margin:0 0 12px} .ttl__title{font-size:24px;font-weight:800;line-height:1.2;color:#1E2A3A;margin:0} .ttl__sub{font-size:18px;font-weight:500;line-height:1.45;color:#5C6B78;margin:8px 0 0} .ttl__body{padding:20px 28px 28px} /* Жива шкала «Шлях до мети»: лінійка + перетягувані фішки «Ви» та «Мета» */ /* --ttl-axis — вертикальна вісь шкали (центр смуги: top 40px + половина висоти 8px) */ .ttl__rail{--ttl-axis:44px;position:relative;height:88px;margin:4px 4px 0;cursor:pointer;touch-action:pan-y} .ttl__track{position:absolute;left:0;right:0;top:40px;height:8px;border-radius:999px;background:#E7EEF2} .ttl__fill{position:absolute;top:40px;height:8px;border-radius:999px;background:linear-gradient(105deg,#12758C 0%,var(--bl-blue,#2F6075) 45%,var(--bl-violet,#6C5CE7) 100%);box-shadow:0 4px 14px rgba(47,96,117,.32);transition:left .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)} .ttl__node{position:absolute;top:var(--ttl-axis);width:14px;height:14px;border-radius:50%;background:#CBDAE1;border:3px solid #fff;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(31,68,90,.25);transition:background .25s,border-color .25s} .ttl__node.is-in{background:#fff;border-color:#12758C} .ttl__you,.ttl__flag{position:absolute;top:var(--ttl-axis);transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid #fff;z-index:2;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:left .35s cubic-bezier(.4,0,.2,1)} .ttl__you{background:var(--bl-blue,#2F6075);color:#fff;font-size:12px;font-weight:600;line-height:1;letter-spacing:-.02em;box-shadow:0 6px 16px rgba(47,96,117,.4)} .ttl__flag{background:var(--bl-violet,#6C5CE7);box-shadow:0 6px 16px rgba(108,92,231,.45)} .ttl__flag svg{width:15px;height:15px;stroke:#fff;fill:none} .ttl__you::after,.ttl__flag::after{content:'';position:absolute;inset:-8px;border-radius:50%} .ttl__you:focus-visible,.ttl__flag:focus-visible{outline:3px solid #12758C;outline-offset:3px} .ttl__you.is-hold,.ttl__flag.is-hold{cursor:grabbing;transform:translate(-50%,-50%) scale(1.14)} .ttl__rail.is-drag .ttl__you,.ttl__rail.is-drag .ttl__flag,.ttl__rail.is-drag .ttl__fill,.ttl__rail.is-drag .ttl__you-tag,.ttl__rail.is-drag .ttl__flag-tag{transition:none} .ttl__you-tag,.ttl__flag-tag{position:absolute;top:0;transform:translateX(-50%);font-size:12px;font-weight:700;line-height:1.2;letter-spacing:.05em;text-transform:uppercase;color:#fff;border-radius:999px;padding:4px 12px;white-space:nowrap;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:left .35s cubic-bezier(.4,0,.2,1)} .ttl__you-tag{background:var(--bl-blue,#2F6075)} .ttl__flag-tag{background:var(--bl-violet,#6C5CE7)} .ttl__lvls{position:absolute;left:0;right:0;top:64px;height:20px} .ttl__lvl{position:absolute;transform:translateX(-50%);font-size:14px;font-weight:600;line-height:1.2;color:#5C6B78;transition:color .25s} .ttl__lvl.is-cur{color:var(--bl-blue,#2F6075)} .ttl__lvl.is-goal{color:var(--bl-violet,#6C5CE7)} .ttl__hint{font-size:15px;font-weight:500;line-height:1.4;color:#5C6B78;text-align:center;margin:12px 0 0} .ttl__group{margin:24px 0 0} .ttl__label{display:block;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:.01em;color:#42505E;margin:0 0 8px} .ttl__chips{display:grid;grid-template-columns:repeat(6,1fr);gap:8px} .ttl__chips[data-ttl-pace]{grid-template-columns:repeat(3,1fr)} .ttl__chip{appearance:none;font-family:inherit;font-size:18px;font-weight:600;color:#2B3446;background:#F3F6F8;border:1.5px solid #DCE6EA;border-radius:14px;padding:8px 4px;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;cursor:pointer;line-height:1.1;transition:background .15s,border-color .15s,color .15s} .ttl__chip small{display:block;font-size:12px;font-weight:600;line-height:1.2;color:#5C6B78;white-space:nowrap} .ttl__chip:hover:not([disabled]){border-color:#12758C} .ttl__chip:focus-visible{outline:2px solid #12758C;outline-offset:2px} .ttl__chip[aria-pressed="true"]{background:linear-gradient(105deg,#12758C 0%,var(--bl-blue,#2F6075) 45%,var(--bl-violet,#6C5CE7) 100%);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(47,96,117,.28)} .ttl__chip[aria-pressed="true"] small{color:#fff} .ttl__chip[disabled]{opacity:.4;cursor:not-allowed} .ttl__result{margin:24px 0 0;background:var(--grad-cta-zone,linear-gradient(120deg,#234A5C 0%,#2F6075 44%,#4A3FB0 100%));border-radius:var(--bl-radius-bento-sm,20px);padding:24px;color:#fff;text-align:center} .ttl__reslead{font-size:15px;font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:#CFE0E8;margin:0} .ttl__months{font-size:clamp(30px,6vw,40px);font-weight:800;line-height:1.1;letter-spacing:-.01em;color:#fff;margin:8px 0 4px} .ttl__ctx{font-size:18px;font-weight:500;line-height:1.4;color:#E3EEF3;margin:0} .ttl__fmt{display:flex;align-items:center;gap:12px;justify-content:center;text-align:left;margin:16px auto 0;max-width:420px;background:rgba(8,18,35,.20);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:12px 16px} .ttl__fmt svg{flex:0 0 auto;width:26px;height:26px;stroke:#fff} .ttl__fmt-lead{font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:#C7DAE3;margin:0} .ttl__fmt-name{font-size:18px;font-weight:700;line-height:1.25;color:#fff;margin:1px 0 0} .ttl__fmt-desc{font-size:14px;font-weight:500;line-height:1.3;color:#D6E4EB;margin:1px 0 0} .ttl__cta{display:inline-block;margin:20px 0 0;background:#fff;color:#1E2A3A;font-weight:700;font-size:18px;text-decoration:none;padding:16px 28px;border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.18);transition:transform .12s,filter .15s} .ttl__cta:hover{filter:brightness(.97);transform:translateY(-1px)} .ttl__note{font-size:15px;font-weight:500;line-height:1.5;color:#5C6B78;margin:16px 0 0;text-align:center} .ttl__unsure{font-size:15px;font-weight:500;line-height:1.4;color:#5C6B78;margin:8px 0 0;text-align:center} .ttl__unsure a{color:#2F6075;font-weight:600} @media(max-width:560px){.ttl__head{padding:24px 20px 4px}.ttl__body{padding:16px 20px 24px}.ttl__result{padding:20px 16px}.ttl__group{margin:20px 0 0}.ttl__chips{grid-template-columns:repeat(3,1fr)}.ttl__rail{margin:4px 0 0}.ttl__you-tag,.ttl__flag-tag{padding:4px 8px;letter-spacing:.02em}.ttl__lvl{font-size:13px}} /* Вузька картка: теги «Ви тут» і «Мета» не вміщаються поруч, лишаємо самі фішки й стискаємо лінійку */ @media(max-width:768px){.ttl__you-tag,.ttl__flag-tag{display:none}.ttl__rail{--ttl-axis:20px;height:64px}.ttl__track,.ttl__fill{top:16px}.ttl__lvls{top:40px}} @container ttl (max-width:640px){.ttl__you-tag,.ttl__flag-tag{display:none}.ttl__rail{--ttl-axis:20px;height:64px}.ttl__track,.ttl__fill{top:16px}.ttl__lvls{top:40px}} @media(prefers-reduced-motion:reduce){.ttl__fill,.ttl__you,.ttl__flag,.ttl__you-tag,.ttl__flag-tag{transition:none}}