/* Палитра и типографика сняты с sunspark.org: бренд #7659FF, акцент #F6425F, текст #232323/#666, шрифт Rubik. Тема ВСЕГДА светлая — как на основном сайте. Авто-переключение по prefers-color-scheme убрано намеренно: у части посетителей система в тёмном режиме, и страница переставала совпадать с брендом. */ :root{ /* Основной цвет — фирменный красный (как в логотипе и на макете витрины). Фиолетовый остался только в палитре плиток дат. */ /* #dd1f28 вместо #e8232e: белый текст на нём даёт 4.88 при норме WCAG AA 4.5, прежний оттенок не дотягивал (4.46). Разница на глаз незаметна. */ --brand:#dd1f28; --brand-dark:#c4141f; --brand-soft:#fdecec; --accent:#dd1f28; --accent-soft:#fdecec; --ink:#181818; --muted:#6b6b76; --line:#eceaf2; --bg:#f5f5f8; --card:#fff; --brand-ink:#fff; /* поля на белой карточке: свой фон и более контрастная рамка, иначе input сливается с карточкой и его не видно */ --field-bg:#fbfaff; --field-line:#dcd8e6; --radius:16px; --radius-sm:10px; --shadow:0 1px 2px rgba(24,24,24,.04), 0 8px 24px rgba(24,24,24,.06); --shadow-lg:0 14px 34px rgba(24,24,24,.13); /* плитки дат — четыре цвета по кругу, как на макете */ --t1:#ef3b45; --t1s:#ffecec; --t2:#f5a623; --t2s:#fff5e3; --t3:#19b6e8; --t3s:#e6f7fd; --t4:#8b3dff; --t4s:#f2eaff; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--ink); font:16px/1.6 Rubik,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; -webkit-text-size-adjust:100%; } .wrap{max-width:860px;margin:0 auto;padding:0 16px} /* ---------- шапка ---------- */ .hdr{background:var(--card);border-bottom:1px solid var(--line)} .hdr-in{display:flex;align-items:center;justify-content:space-between;height:64px} .brand{display:inline-flex;align-items:center;min-height:44px; font-weight:700;font-size:19px;letter-spacing:.2px;text-decoration:none; background:linear-gradient(90deg,var(--accent) 0%,var(--brand) 70%); -webkit-background-clip:text;background-clip:text;color:transparent} .langs{display:flex;gap:4px} .lang{display:inline-flex;align-items:center;min-height:40px;padding:0 14px; border-radius:10px;text-decoration:none;color:var(--muted); font-size:13px;font-weight:500;transition:background .15s,color .15s} .lang:hover{background:var(--brand-soft);color:var(--brand)} .lang.on{background:var(--brand);color:var(--brand-ink)} /* ---------- типографика ---------- */ .h1{font-size:26px;line-height:1.25;margin:24px 0 6px;font-weight:700;letter-spacing:-.3px} .h2{font-size:15px;margin:0;font-weight:600;color:var(--brand); text-transform:uppercase;letter-spacing:.6px} .lead{color:var(--muted);margin:0 0 26px} /* «назад» — компактная кнопка-контур: заметна, но не спорит с главным действием */ .back{display:inline-flex;align-items:center;gap:8px;margin:22px 0 0;padding:0 16px; min-height:42px;border:1.5px solid var(--line);border-radius:12px; background:var(--card);box-shadow:var(--shadow); color:var(--ink);font-size:14px;font-weight:600;text-decoration:none; transition:border-color .15s,color .15s,box-shadow .15s} .back:hover{border-color:var(--brand);color:var(--brand-dark);box-shadow:var(--shadow-lg)} .back svg{width:16px;height:16px;flex:0 0 auto} /* иконка «шеврон» смотрит вправо: в RTL это и есть «назад», в LTR разворачиваем */ [dir=ltr] .back svg{transform:scaleX(-1)} /* ---------- кнопки ---------- */ .btn{ appearance:none;border:0;cursor:pointer;background:var(--brand);color:var(--brand-ink); font:600 15px/1 inherit;padding:0 26px;border-radius:12px;text-decoration:none; display:inline-flex;align-items:center;justify-content:center; min-height:48px;transition:background .15s,transform .1s,box-shadow .15s; } .btn:hover{background:var(--brand-dark);box-shadow:0 6px 18px rgba(118,89,255,.3)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none} .btn-lg{width:100%;min-height:50px;font-size:16px;border-radius:12px; box-shadow:0 8px 20px rgba(232,35,46,.28)} .btn-lg:hover{box-shadow:0 10px 26px rgba(232,35,46,.36)} /* ---------- формы ---------- */ .form{display:grid;gap:16px;margin-bottom:32px} .fieldset{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:18px} .fieldset-head{display:flex;align-items:center;gap:10px;margin:0 0 14px; padding-bottom:10px;border-bottom:1px solid var(--line)} .fieldset-num{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--brand-soft); color:var(--brand);font-size:13px;font-weight:700;display:grid;place-items:center} /* поля в 2–3 колонки, чтобы форма не растягивалась в километровый столбец */ .grid{display:grid;gap:12px 14px;grid-template-columns:1fr;align-items:start} @media (min-width:560px){ .grid{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .span-2{grid-column:span 2} } /* align-content:start обязателен: без него label как grid-элемент растягивается на всю высоту строки, и input вслед за ним раздувается и наезжает на соседние поля. */ .f{display:grid;gap:5px;min-width:0;align-content:start} .f>span{font-size:13px;font-weight:500;color:var(--muted); line-height:1.3;min-height:1.3em} .f input,.f select{ font:15px inherit;padding:10px 12px;border:1.5px solid var(--field-line); border-radius:var(--radius-sm); background:var(--field-bg);color:var(--ink); height:44px;min-height:44px;max-height:44px;width:100%;max-width:100%; transition:border-color .15s,box-shadow .15s; } /* дата в Safari/iOS иначе игнорирует высоту и распирает ячейку */ .f input[type=date]{-webkit-appearance:none;appearance:none} .f input::placeholder{color:#a7a3bd} .f input:hover,.f select:hover{border-color:var(--brand)} .f input:focus,.f select:focus{outline:0;border-color:var(--brand); box-shadow:0 0 0 3px rgba(118,89,255,.16)} .chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink)} .chk input{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--brand)} /* вся строка согласия — цель нажатия, поэтому даём ей высоту под палец */ .chk{padding:4px 0;min-height:34px;align-items:center} /* ссылка на юридический документ внутри текста согласия */ .lnk{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px} .lnk:hover{color:var(--brand-dark)} .err{color:var(--accent);font-size:14px;margin:0;font-weight:500} .note{color:var(--muted);font-size:13px;margin:0;line-height:1.5} .done .lead{font-size:18px;color:var(--ink)} /* ---------- модалка с юридическим документом ---------- Содержимое грузим В IFRAME: документы приходят из Google Docs со своим CSS (селекторы p/li/h1), и вставка их в нашу страницу растащила бы вёрстку. Iframe изолирует стили полностью и сохраняет форматирование как в документе. */ .lmodal{position:fixed;inset:0;z-index:50;display:flex;align-items:center; justify-content:center;padding:24px} /* ОБЯЗАТЕЛЬНО: display:flex выше перебивает браузерное [hidden]{display:none}, и окно переставало закрываться, оставаясь на экране */ .lmodal[hidden]{display:none} .lmodal-back{position:absolute;inset:0;background:rgba(24,24,24,.55)} .lmodal-box{position:relative;display:flex;flex-direction:column;overflow:hidden; width:min(780px,100%);height:min(86vh,100%); background:var(--card);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.32)} .lmodal-head{flex:0 0 auto;display:flex;align-items:center;gap:12px; padding:12px 14px;border-bottom:1px solid var(--line)} .lmodal-t{flex:1 1 auto;min-width:0;font-size:16px;font-weight:700;line-height:1.3} .lmodal-x{flex:0 0 auto;width:42px;height:42px;border:0;border-radius:12px;cursor:pointer; background:#f2f2f6;color:var(--ink);font:400 26px/1 Rubik,system-ui,Arial,sans-serif} .lmodal-x:hover{background:var(--brand-soft);color:var(--brand)} /* Прокрутка ОДНА и живёт внутри кадра. Раньше высота кадра ставилась по содержимому, а контейнер скроллил сам — но замер до загрузки шрифтов давал недобор, кадр получал собственную полосу, и на экране было две. */ .lmodal-body{flex:1 1 auto;overflow:hidden;background:#f5f5f8} .lmodal-body iframe{display:block;width:100%;height:100%;border:0} .lmodal-load{padding:28px 16px;text-align:center;color:var(--muted);font-size:14px} body.no-scroll{overflow:hidden} /* на телефоне — лист во весь экран, так удобнее читать длинный документ */ @media (max-width:620px){ .lmodal{padding:0} .lmodal-box{width:100%;height:100%;border-radius:0} } /* ---------- доступность (תקן ישראלי 5568 / WCAG 2.0 AA) ---------- */ /* Видимый фокус обязателен: без него сайтом нельзя пользоваться с клавиатуры. :focus-visible — чтобы рамка не мешала тем, кто кликает мышью. */ a:focus-visible,button:focus-visible,select:focus-visible, input:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--brand-dark);outline-offset:2px;border-radius:6px} main:focus{outline:none} /* ссылка «перейти к содержимому»: видна только при переходе табом */ .skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100; padding:12px 18px;background:var(--brand-dark);color:#fff; font-weight:600;text-decoration:none;border-radius:0 0 12px 12px} .skip:focus{inset-inline-start:16px} /* ссылка на заявление о доступности в подвале */ .ftr{color:var(--muted);font-size:13px;padding-top:10px;padding-bottom:32px; display:flex;flex-wrap:wrap;justify-content:center;align-items:center;text-align:center} .ftr a{display:inline-block;padding:8px 2px;color:var(--muted);text-decoration:underline;text-underline-offset:2px} .ftr a:hover{color:var(--brand-dark)} .ftr-sep{margin-inline:8px;opacity:.5} /* страница заявления */ .legaltext{max-width:760px;margin:0 auto 48px} .legaltext h2{font-size:19px;margin:28px 0 8px} .legaltext p,.legaltext li{color:var(--ink);line-height:1.7} .legaltext ul{margin:8px 0;padding-inline-start:22px} .legaltext .muted{color:var(--muted);font-size:14px} /* ================= панель доступности ================= Настройки временные, живут в localStorage и применяются классами на . Масштаб вешаем на шапку/контент/подвал, а НЕ на body: сама панель не должна 增 масштабироваться вместе со страницей. */ .a11y-btn{position:fixed;inset-block-end:18px;inset-inline-end:18px;z-index:60; width:52px;height:52px;border:0;border-radius:50%;cursor:pointer; background:var(--brand-dark);color:#fff;display:grid;place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.28)} .a11y-btn svg{width:28px;height:28px} .a11y-btn:hover{background:#a91018} .a11y-panel{position:fixed;inset-block-end:80px;inset-inline-end:18px;z-index:60; width:min(300px,calc(100vw - 36px));max-height:min(72vh,560px);overflow:auto; background:#fff;color:#181818;border:1px solid #d8d8e0;border-radius:16px; box-shadow:0 18px 44px rgba(0,0,0,.28);padding:12px} .a11y-panel[hidden]{display:none} .a11y-title{font-size:16px;font-weight:700;margin:4px 6px 10px} .a11y-list{display:grid;gap:6px} .a11y-item{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px; border:1px solid #e2e2ea;border-radius:10px;background:#fff;color:#181818; font:600 14px/1.3 Rubik,system-ui,Arial,sans-serif;cursor:pointer;text-align:start} .a11y-item:hover{background:#f4f4f8} .a11y-item[aria-pressed="true"]{background:#fdecec;border-color:#c4141f;color:#c4141f} .a11y-item .mark{margin-inline-start:auto;font-weight:700} .a11y-reset{background:#f4f4f8} .a11y-link{display:block;margin-top:8px;padding:11px 12px;border-radius:10px; text-align:center;background:#f4f4f8;color:#c4141f;font-weight:600;text-decoration:underline} /* --- сами режимы --- */ html.a11y-zoom-110 .hdr,html.a11y-zoom-110 main,html.a11y-zoom-110 .ftr{zoom:1.1} html.a11y-zoom-125 .hdr,html.a11y-zoom-125 main,html.a11y-zoom-125 .ftr{zoom:1.25} html.a11y-zoom-150 .hdr,html.a11y-zoom-150 main,html.a11y-zoom-150 .ftr{zoom:1.5} /* высокая контрастность: перекрашиваем через переменные — дизайн целиком на них */ html.a11y-dark{ --bg:#000; --card:#000; --ink:#fff; --muted:#f0f0f0; --line:#8a8a8a; --brand:#ffdd00; --brand-dark:#ffdd00; --brand-soft:#000; --brand-ink:#000; --field-bg:#000; --field-line:#ffdd00; --shadow:none; --shadow-lg:none; } html.a11y-dark body{background:#000} html.a11y-dark .hdr,html.a11y-dark .fieldset,html.a11y-dark .filter, html.a11y-dark .dcard,html.a11y-dark .sum,html.a11y-dark .chip, html.a11y-dark .pickhint,html.a11y-dark .seats,html.a11y-dark .card,html.a11y-dark .back{ background:#000;border-color:#ffdd00;color:#fff} html.a11y-dark .btn{background:#ffdd00;color:#000} html.a11y-dark .lang.on{background:#ffdd00;color:#000} html.a11y-dark .brand{background:none;color:#ffdd00;-webkit-text-fill-color:#ffdd00} html.a11y-dark .ddate,html.a11y-dark .chip-price,html.a11y-dark .lnk{color:#ffdd00} html.a11y-dark .dico{background:#000;border:1px solid #ffdd00;color:#ffdd00} html.a11y-gray .hdr,html.a11y-gray main,html.a11y-gray .ftr{filter:grayscale(1)} html.a11y-links main a,html.a11y-links .ftr a{text-decoration:underline!important} html.a11y-font body,html.a11y-font .a11y-panel{font-family:Arial,"Segoe UI",Tahoma,sans-serif!important} html.a11y-noanim *{transition:none!important;animation:none!important;scroll-behavior:auto!important} html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6 1 3 7-3 1-3-7-5 4z' fill='%23000' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 4 2,auto!important} /* ================= анкета: свои элементы ================= */ .lead-note{color:var(--muted);margin:0 0 18px;max-width:60ch;font-size:15px} /* ловушка для ботов: поле должно быть недоступно и людям, и скринридерам, но НЕ через display:none — часть ботов такие поля пропускает */ .hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden} .ic-sm{width:16px;height:16px} .ic-lg{width:34px;height:34px} /* ---------- переключатель «житель города» ---------- */ /* Нативный чекбокс оставлен внутри: он и хранит состояние, и работает с клавиатурой; видимую часть рисуем сами. */ .switch-row{display:grid;gap:5px} /* подпись той же величины, что у обычных полей — ряд читается как одна строка */ .switch-label{font-size:13px;font-weight:500;color:var(--muted);line-height:1.3;min-height:1.3em} .switch{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer; height:44px;padding:0 12px;border:1.5px solid var(--field-line); border-radius:var(--radius-sm);background:var(--field-bg);width:100%; transition:border-color .15s,box-shadow .15s} .switch:hover{border-color:var(--brand)} .switch:has(input:focus-visible){border-color:var(--brand); box-shadow:0 0 0 3px rgba(221,31,40,.16)} /* сам чекбокс не прячем от скринридера — уводим под видимую часть */ .switch input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer} .switch-track{position:relative;flex:0 0 auto;width:44px;height:26px;border-radius:999px; background:#cfcbdb;transition:background .18s} .switch-knob{position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px; border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .18s} .switch input:checked + .switch-track{background:var(--brand)} /* в RTL «включено» — это движение влево, поэтому знак сдвига зависит от направления */ .switch input:checked + .switch-track .switch-knob{transform:translateX(18px)} [dir=rtl] .switch input:checked + .switch-track .switch-knob{transform:translateX(-18px)} .switch-text{font-size:15px;font-weight:600;color:var(--ink);order:-1} .switch-note{margin:0;font-size:12px;line-height:1.4} /* ---------- блоки детей ---------- */ .kids{display:grid;gap:12px;margin:12px 0 0} .kid{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--field-bg)} .kid-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px} .kid-title{margin:0;font-size:15px;font-weight:700;color:var(--ink)} .kid-del{display:inline-flex;align-items:center;gap:6px;border:0;background:none;cursor:pointer; color:var(--muted);font:600 13px/1 inherit;padding:8px;border-radius:8px} .kid-del:hover{color:var(--brand-dark);background:var(--brand-soft)} .kid-del[hidden]{display:none} .kid .f input,.kid .f select{background:var(--card)} /* Шесть полей ребёнка идут по два в три ряда: имя | ת.ז., дата | пол, телефон | почта. Поэтому имя здесь НЕ на всю ширину, в отличие от имени родителя в первой секции. */ .btn-add{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0; min-height:42px;padding:0 16px;cursor:pointer; border:1.5px dashed var(--brand);border-radius:12px;background:var(--card); color:var(--brand-dark);font:600 15px/1 inherit; transition:background .15s,border-style .15s} .btn-add:hover{background:var(--brand-soft);border-style:solid} .btn-add[hidden]{display:none} /* адрес: улица 50%, дом 25%, квартира 25% — одной строкой на любом экране */ .addr{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px 14px;align-items:start;min-width:0} .consents{display:grid;gap:12px} /* ---------- страница «спасибо» ---------- */ .done{text-align:center;padding:48px 0 64px} .done-ic{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 10px; border-radius:50%;background:var(--brand-soft);color:var(--brand)} .done .h1{margin-top:14px} .done .lead-note{margin-inline:auto;font-size:17px;color:var(--ink)} /* ---------- поле города с поиском ---------- Разметка остаётся нативным