/** * Стилі форми. * * УСЕ під .bof-app і з власними значеннями — нічого не успадковуємо від теми. * Інакше Elementor або тема переб'ють шрифти й кнопки, і форма поїде. */ .bof-app{ --bof-ink:#14201b; --bof-ink2:#4a5852; --bof-ink3:#7d8a84; --bof-card:#fff; --bof-line:#dcdcd4; --bof-line2:#ecece6; --bof-loden:#35594a; --bof-loden-bg:#e8efe9; --bof-honig:#b8860f; --bof-honig-bg:#fbf2dc; --bof-gf:#6b3f6e; --bof-warn:#a63a24; --bof-warn-bg:#fbeae5; --bof-r:4px; /* Місце під шапку й підвал сайту — ЗОВНІ картки, тому margin. Значення підставляє PHP з налаштувань; 0 = немає відступу. */ max-width:640px; margin:var(--bof-space-top,0) auto var(--bof-space-bottom,0); background:var(--bof-card); border:1px solid var(--bof-line); border-radius:var(--bof-r); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; font-size:16px; line-height:1.45; color:var(--bof-ink); box-sizing:border-box; } .bof-app *,.bof-app *::before,.bof-app *::after{box-sizing:border-box} .bof-app h3,.bof-app h4{margin:0;font-weight:600;color:var(--bof-ink);letter-spacing:-.01em} .bof-app button{font:inherit;color:inherit;cursor:pointer;border-radius:var(--bof-r)} .bof-app :focus-visible{outline:2px solid var(--bof-loden);outline-offset:2px} .bof-app [hidden]{display:none!important} .bof-loading,.bof-empty{padding:26px 20px;color:var(--bof-ink3);text-align:center;margin:0} .bof-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important} .bof-k{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--bof-ink3);margin-bottom:4px} .bof-pad{padding:0 20px} .bof-link{background:none;border:0;padding:0;text-decoration:underline;color:var(--bof-loden);font-size:13.5px} /* --- поля --- */ .bof-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:18px 20px;border-bottom:1px solid var(--bof-line2)} .bof-fields .bof-wide{grid-column:1/-1} .bof-fields .bof-hint{display:block;margin-top:4px;font-size:12px;line-height:1.35;color:var(--bof-ink3)} .bof-app input[type=text],.bof-app input[type=email],.bof-app input[type=time],.bof-app select,.bof-app textarea{ width:100%;padding:10px 11px;border:1px solid var(--bof-line);border-radius:var(--bof-r); background:#fff;font:inherit;font-size:16px;color:var(--bof-ink);margin:0; } .bof-app textarea{min-height:60px;resize:vertical;font-size:15px} .bof-pills{display:flex;gap:8px} /* Подвійний клас — див. «Броня від стилів теми» в кінці файла. Порядок правил тут значущий: наведення стоїть перед натиснутим, бо вага в них однакова й вирішує саме порядок. */ .bof-app.bof-app .bof-pills button{flex:1;background:#fff;border:1px solid var(--bof-line);padding:10px;font-size:14.5px;color:var(--bof-ink2)} .bof-app.bof-app .bof-pills button:hover, .bof-app.bof-app .bof-pills button:focus{background:var(--bof-loden-bg);border-color:var(--bof-loden);color:var(--bof-loden)} .bof-app.bof-app .bof-pills button[aria-pressed="true"]{background:var(--bof-ink);border-color:var(--bof-ink);color:#fff} .bof-app.bof-app .bof-pills button[data-menu="gf"][aria-pressed="true"]{background:var(--bof-gf);border-color:var(--bof-gf);color:#fff} /* --- смужка днів --- */ .bof-daysbar{position:sticky;top:0;z-index:5;background:var(--bof-card);border-bottom:1px solid var(--bof-line);padding:12px 0 0} .bof-days{display:flex;gap:8px;overflow-x:auto;padding:8px 20px 12px;-webkit-overflow-scrolling:touch} /* Увесь блок днів іде з подвійним класом. Раніше він був однокласовим і його перефарбовувала тема: невибрана неділя виходила малиновою, бо власного тла в неї немає, а тема фарбує будь-яку кнопку на сторінці. Вибрана субота лишалась зеленою тільки тому, що `[aria-pressed]` випадково важив більше. Варіанти не затираються, бо піднято весь блок разом, зі збереженим порядком: основа → наведення → натиснуте → вимкнене → після дедлайну. */ .bof-app.bof-app .bof-day{flex:0 0 auto;min-width:70px;border:1px solid var(--bof-line);background:#fff; padding:9px 11px 8px;text-align:center;position:relative;color:var(--bof-ink)} .bof-app.bof-app .bof-day .wd{display:block;font-size:12px;color:var(--bof-ink2)} .bof-app.bof-app .bof-day .dm{display:block;font-size:17px;font-weight:600;line-height:1.25; font-variant-numeric:tabular-nums;color:var(--bof-ink)} .bof-app.bof-app .bof-day:hover, .bof-app.bof-app .bof-day:focus{background:var(--bof-loden-bg);border-color:var(--bof-loden)} .bof-app.bof-app .bof-day[aria-pressed="true"]{background:var(--bof-loden);border-color:var(--bof-loden)} .bof-app.bof-app .bof-day[aria-pressed="true"]:hover{background:var(--bof-loden);border-color:var(--bof-loden)} .bof-app.bof-app .bof-day[aria-pressed="true"] .wd, .bof-app.bof-app .bof-day[aria-pressed="true"] .dm{color:#fff} .bof-app.bof-app .bof-day.sun .wd{color:var(--bof-warn)} .bof-app.bof-app .bof-day[aria-pressed="true"].sun .wd{color:#f6d9d2} .bof-app.bof-app .bof-day.has::after{content:attr(data-n);position:absolute;top:-6px;right:-6px;min-width:19px;height:19px; background:var(--bof-honig);color:#fff;border-radius:10px;font-size:11.5px;line-height:19px;font-weight:600;border:2px solid var(--bof-card)} /* Вимкнений день не має реагувати на курсор — інакше «недоступне» виглядає натискабельним. Тому те саме тло повторене і в наведенні. */ .bof-app.bof-app .bof-day[disabled], .bof-app.bof-app .bof-day[disabled]:hover{opacity:.42;cursor:not-allowed;border-color:var(--bof-line); background:repeating-linear-gradient(135deg,#fff,#fff 5px,#f0f0ea 5px,#f0f0ea 6px)} /* День після дедлайну у власниці: натиснути можна, але видно, що це заднім числом. Гостю такий день просто вимкнений, тому мітки тут не буде. */ .bof-app.bof-app .bof-day.late{border-color:var(--bof-warn);border-style:dashed} .bof-app.bof-app .bof-day.late .dm{color:var(--bof-warn)} .bof-app.bof-app .bof-day[aria-pressed="true"].late{border-style:solid} .bof-app.bof-app .bof-day[aria-pressed="true"].late .dm{color:#fff} /* --- банери --- */ /* Відступ згори був нульовий, і банер злипався зі смугою днів — на бойовому це читалось як частина смуги, а не як окреме попередження. */ .bof-banner{margin:12px 20px;padding:11px 13px;font-size:13.5px;border-radius:0 var(--bof-r) var(--bof-r) 0} .bof-banner b{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:2px} .bof-banner.warn{background:var(--bof-warn-bg);border-left:2px solid var(--bof-warn)} .bof-banner.warn b{color:var(--bof-warn)} .bof-banner.info{background:var(--bof-honig-bg);border-left:2px solid var(--bof-honig)} .bof-banner.info b{color:#7a5b0a} .bof-copybar{display:flex;gap:8px;flex-wrap:wrap;padding:0 20px 14px} .bof-copybar:empty{padding:0} .bof-app.bof-app .bof-copybar button{background:#fff;border:1px solid var(--bof-line);padding:8px 13px;font-size:13.5px;color:var(--bof-ink2)} .bof-app.bof-app .bof-copybar button:hover, .bof-app.bof-app .bof-copybar button:focus{background:var(--bof-loden-bg);border-color:var(--bof-loden);color:var(--bof-loden)} /* --- каталог --- */ .bof-cat{padding:0 20px} .bof-cat h4{font-size:15px;padding:18px 0 7px;border-bottom:1.5px solid var(--bof-ink);margin-bottom:2px} .bof-item{display:flex;align-items:center;gap:13px;padding:10px 0;border-bottom:1px solid var(--bof-line2)} .bof-item .info{flex:1;min-width:0} .bof-item .nm{font-size:15.5px;line-height:1.25} .bof-item .mt{font-size:12.5px;color:var(--bof-ink3);margin-top:1px;font-variant-numeric:tabular-nums} .bof-item.on .nm{font-weight:600} .bof-item .hof{color:var(--bof-honig)} .bof-alg{display:inline-flex;gap:3px;margin-left:7px;vertical-align:1px} .bof-alg span{width:18px;height:18px;border:1px solid var(--bof-ink3);border-radius:50%;font-size:9.5px; line-height:16px;text-align:center;color:var(--bof-ink2);font-weight:500;cursor:help} .bof-alg span.unk{border-style:dashed;border-color:var(--bof-honig);color:var(--bof-honig)} .bof-step{display:flex;align-items:center;gap:2px;flex:0 0 auto} /* Тема фарбувала «+» і «−» своїм кольором: вага `.bof-step button` дорівнює вазі «кита» Elementor, а його файл підключається пізніше. */ .bof-app.bof-app .bof-step button{width:38px;height:38px;border:1px solid var(--bof-line);background:#fff;font-size:19px;line-height:1; color:var(--bof-ink2);display:flex;align-items:center;justify-content:center;padding:0} .bof-app.bof-app .bof-step button:hover, .bof-app.bof-app .bof-step button:focus{background:var(--bof-loden-bg);border-color:var(--bof-loden);color:var(--bof-loden)} .bof-app.bof-app .bof-step button[disabled], .bof-app.bof-app .bof-step button[disabled]:hover{opacity:.3;cursor:not-allowed;background:#fff; border-color:var(--bof-line);color:var(--bof-ink2)} .bof-step .v{width:38px;height:38px;border-top:1px solid var(--bof-line);border-bottom:1px solid var(--bof-line); display:flex;align-items:center;justify-content:center;font-size:16px;font-variant-numeric:tabular-nums} .bof-step .v.on{background:var(--bof-loden);color:#fff;border-color:var(--bof-loden);font-weight:600} /* --- підсумок --- */ .bof-sum{margin:26px 20px 0;border-top:1.5px solid var(--bof-ink);padding-top:16px} .bof-sum h3{font-size:19px} .bof-lead{font-size:13px;color:var(--bof-ink3);margin:3px 0 14px} .bof-block{border:1px solid var(--bof-line);border-radius:var(--bof-r);margin-bottom:10px;overflow:hidden} .bof-block.gf{border-color:var(--bof-gf)} .bof-block .gfstrip{background:var(--bof-gf);color:#fff;padding:4px 14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600} .bof-block header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fafaf7;border-bottom:1px solid var(--bof-line2)} .bof-block header .d{flex:1;font-weight:600;font-size:15.5px} .bof-block header .t{font-size:14px;color:var(--bof-ink2);font-variant-numeric:tabular-nums} .bof-block ul{list-style:none;margin:0;padding:10px 14px} .bof-block li{display:flex;gap:11px;font-size:14.5px;padding:2px 0} .bof-block li .q{font-weight:600;min-width:24px;font-variant-numeric:tabular-nums} .bof-block li .pr{margin-left:auto;color:var(--bof-ink3);font-size:13px;font-variant-numeric:tabular-nums} .bof-block .dsum{padding:8px 14px;border-top:1px solid var(--bof-line2);text-align:right;font-size:14px;background:#fafaf7;font-variant-numeric:tabular-nums} .bof-total{display:flex;align-items:baseline;padding:14px 2px 0;border-top:1.5px solid var(--bof-ink);margin-top:6px} .bof-total b{margin-left:auto;font-size:23px;font-variant-numeric:tabular-nums} .bof-submit{padding:18px 20px 24px} .bof-btn{width:100%;background:var(--bof-loden);color:#fff;border:1px solid var(--bof-loden);padding:14px;font-size:16px;font-weight:500} .bof-btn[disabled]{opacity:.4;cursor:not-allowed} .bof-deadline{text-align:center;font-size:12.5px;color:var(--bof-ink3);margin:11px 0 0;line-height:1.5} .bof-done{padding:50px 24px} .bof-done .ok{width:46px;height:46px;border-radius:50%;background:var(--bof-loden);color:#fff; display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:18px} .bof-done h3{font-size:23px;margin-bottom:16px} /* Вихід із екрана подяки. Сторінка гостя зазвичай без меню сайту, тож це єдиний шлях далі, окрім кнопки «назад» у браузері. */ /* Сама кнопка — у розділі броні: тема перебивала і її. */ .bof-back{margin-top:26px;text-align:center} /* Вхід для дому. Навмисно тихий: гість його бачить, але воно не сперечається за увагу з кнопкою замовлення. Стоїть ЗОВНІ картки — усередині його стер би перший же перемальовок форми. Значення тут написані числами, а не змінними: змінні оголошені на `.bof-app`, а це її сусід, не нащадок — усередині нього вони б не підхопились. Подвійний клас з тієї ж причини, що й скрізь: посилання на сторінці тема фарбує своїм кольором, а вага одинарного класу цього не переживає. */ .bof-house{max-width:640px;margin:10px auto 0;text-align:center;font-size:12.5px;line-height:1.4} .bof-house.bof-house a{ color:#7d8a84;text-decoration:none;border-bottom:1px solid #dcdcd4; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; background:none;padding:0; } .bof-house.bof-house a:hover, .bof-house.bof-house a:focus{color:#35594a;border-bottom-color:#35594a;background:none} /* --- усередині адмінки --- */ .bof-app--staff{max-width:760px;margin:16px 0} @media (max-width:520px){ .bof-fields{grid-template-columns:1fr} .bof-app{border-left:0;border-right:0;border-radius:0} } @media (prefers-reduced-motion:reduce){.bof-app *{transition:none!important;animation:none!important}} /* На вужчих екранах шапка сайту нижча, тому й відступ менший — три чверті від заданого. Окремого поля для планшета не заводимо: одне число, один сенс. */ @media (max-width:900px){ .bof-app{margin-top:calc(var(--bof-space-top,0) * .75); margin-bottom:calc(var(--bof-space-bottom,0) * .75)} } /* ── Броня від стилів теми ─────────────────────────────────────────────── Elementor фарбує всі