/* * Свадебный планировщик — templates/planner.php + js/planner.js. * * Отдельный файл, не в bundle-core: грузится только на этой странице. * Всё под #akp-main / .akp — глобальные правила main.css (section p с * коричневым цветом, h3 с text-transform:capitalize, img{display:block}) * сюда не должны просачиваться, а стили планировщика — наружу. * .akp отдельно нужен для модальных окон и уведомлений: они вставляются * прямо в , вне #akp-main. */ #akp-main, .akp { --akp-brown: #4B1E00; --akp-brown-2: #6b3413; --akp-ink: #33241a; --akp-muted: #86776a; --akp-line: #e7ded2; --akp-line-2: #d6cabb; --akp-soft: #faf6f0; --akp-card: #ffffff; --akp-gold: #a67c3d; --akp-gold-bg: #f8f0e2; --akp-warn: #9e3a24; --akp-warn-bg: #fbeee9; --akp-info-bg: #f1eee9; --akp-ok: #3f6b3a; --akp-radius: 12px; --akp-serif: 'PT Serif Caption', Georgia, serif; --akp-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; font-family: var(--akp-sans); color: var(--akp-ink); box-sizing: border-box; } #akp-main { width: 100%; display: block; padding: 0 16px; } #akp-main *, .akp * { box-sizing: border-box; } .akp svg, #akp-main svg { display: inline-block; } /* ---------- заголовок страницы ---------- */ .akp-hero { max-width: 780px; margin: 0 auto; padding: 48px 0 28px; text-align: center; } .akp-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--akp-gold); } #akp-main .akp-h1 { margin: 0 0 14px; font-family: var(--akp-serif); font-weight: 400; font-size: clamp(30px, 5vw, 44px); line-height: 1.15; color: var(--akp-brown); text-shadow: none; text-transform: none; } .akp-lead { margin: 0 auto; max-width: 640px; font-size: 17px; line-height: 1.6; color: var(--akp-muted); } /* ---------- общие элементы ---------- */ /* min-height — место под приложение до того, как JS его отрисует. Иначе строка «загружаем…» (одна строка) сменялась стартовым экраном, и статья под ним прыгала вниз — это портит CLS в PageSpeed. Цифры — замеренная высота стартового экрана (2026-09-15): ~730px на десктопе, ~1300px на телефоне. */ #akp-app { max-width: 1000px; min-height: 720px; margin: 0 auto 40px; text-align: left; } @media (max-width: 700px) { #akp-app { min-height: 1280px; } } .akp-loading { text-align: center; color: var(--akp-muted); padding: 40px 0; } .akp-card { background: var(--akp-card); border: 1px solid var(--akp-line); border-radius: var(--akp-radius); padding: 26px; box-shadow: 0 1px 2px rgba(75, 30, 0, .04), 0 8px 24px rgba(75, 30, 0, .05); } .akp .akp-h2, #akp-main .akp-h2 { margin: 0 0 8px; padding: 0; width: auto; font-family: var(--akp-serif); font-weight: 400; font-size: 26px; line-height: 1.25; color: var(--akp-brown); text-transform: none; } .akp .akp-h3, #akp-main .akp-h3 { margin: 26px 0 10px; padding: 0; width: auto; max-width: none; font-family: var(--akp-sans); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--akp-ink); text-transform: none; text-align: left; } .akp p { margin: 0 0 12px; line-height: 1.55; color: inherit; letter-spacing: normal; } .akp .akp-muted { color: var(--akp-muted); } .akp .akp-small { margin: 14px 0 0; font-size: 13px; color: var(--akp-muted); } .akp-center { text-align: center; } .akp-ic { width: 17px; height: 17px; flex: 0 0 auto; vertical-align: -3px; } .akp-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } /* ---------- поля ---------- */ .akp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 18px 0 22px; } .akp-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; } .akp-grid .akp-field { margin: 0; } .akp-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--akp-muted); } .akp-hintline { font-size: 12px; color: var(--akp-muted); } .akp input[type="text"], .akp input[type="email"], .akp input[type="tel"], .akp input[type="date"], .akp input[type="time"], .akp input[type="number"], .akp select, .akp textarea { width: 100%; min-height: 42px; margin: 0; padding: 9px 12px; font: inherit; font-size: 15px; color: var(--akp-ink); background: #fff; border: 1px solid var(--akp-line-2); border-radius: 8px; outline: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; } .akp select { padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2386776a' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .akp textarea { min-height: 70px; resize: vertical; line-height: 1.5; } .akp input:focus, .akp select:focus, .akp textarea:focus { border-color: var(--akp-brown); box-shadow: 0 0 0 3px rgba(75, 30, 0, .12); } .akp input[type="checkbox"], .akp input[type="radio"] { accent-color: var(--akp-brown); } .akp-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 8px; font-size: 14px; line-height: 1.45; cursor: pointer; } .akp-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; } .akp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .akp .akp-error { margin: 8px 0 0; padding: 9px 12px; font-size: 14px; color: var(--akp-warn); background: var(--akp-warn-bg); border-radius: 8px; } .akp [hidden] { display: none !important; } /* ---------- кнопки ---------- */ .akp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; margin: 0; padding: 9px 18px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .1s; } .akp-btn:active { transform: translateY(1px); } .akp-btn:focus-visible, .akp-iconbtn:focus-visible, .akp-chip:focus-visible, .akp-tab:focus-visible, .akp-link:focus-visible { outline: 2px solid var(--akp-brown); outline-offset: 2px; } .akp-btn--primary { color: #fff; background: var(--akp-brown); } .akp-btn--primary:hover { background: var(--akp-brown-2); color: #fff; } .akp-btn--secondary { color: var(--akp-brown); background: #fff; border-color: var(--akp-line-2); } .akp-btn--secondary:hover { border-color: var(--akp-brown); } .akp-btn--ghost { color: var(--akp-muted); background: transparent; } .akp-btn--ghost:hover { color: var(--akp-brown); background: var(--akp-soft); } .akp-btn--dashed { width: 100%; margin-top: 12px; color: var(--akp-brown); background: transparent; border: 1.5px dashed var(--akp-line-2); border-radius: 10px; } .akp-btn--dashed:hover { border-color: var(--akp-brown); background: var(--akp-soft); } .akp-btn--lg { min-height: 50px; padding: 12px 28px; font-size: 16px; } .akp-btn--small { min-height: 32px; padding: 5px 13px; font-size: 13px; color: #fff; background: var(--akp-brown); } .akp-btn--small:hover { background: var(--akp-brown-2); } .akp-btn[disabled] { opacity: .6; cursor: wait; } .akp-link { display: inline; margin: 0; padding: 0; font: inherit; font-weight: 600; color: var(--akp-brown); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .akp-link--muted { font-weight: 400; font-size: 13px; color: var(--akp-muted); } .akp-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; padding: 0; color: var(--akp-muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; } .akp-iconbtn:hover { color: var(--akp-brown); background: var(--akp-soft); } .akp-iconbtn[data-act="remove"]:hover, .akp-iconbtn[data-act="gremove"]:hover, .akp-iconbtn[data-act="cremove"]:hover { color: var(--akp-warn); background: var(--akp-warn-bg); } .akp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0; padding: 4px 11px; font: inherit; font-size: 13px; color: var(--akp-muted); background: #fff; border: 1px solid var(--akp-line-2); border-radius: 999px; cursor: pointer; white-space: nowrap; } .akp-chip:hover { border-color: var(--akp-brown); color: var(--akp-brown); } .akp-chip.is-on { color: #fff; background: var(--akp-brown); border-color: var(--akp-brown); } .akp-chip--quiet.is-on { color: var(--akp-brown); background: var(--akp-gold-bg); border-color: var(--akp-gold); } /* ---------- стартовый экран ---------- */ .akp-start { max-width: 860px; margin: 0 auto; } .akp-alert { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; color: var(--akp-warn); background: var(--akp-warn-bg); border-radius: 10px; } .akp-alert p { margin: 0; } .akp-templates { margin: 18px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .akp-templates legend { grid-column: 1 / -1; margin-bottom: 10px; padding: 0; } .akp-tpl { position: relative; display: block; cursor: pointer; } .akp-tpl input { position: absolute; opacity: 0; pointer-events: none; } .akp-tpl-body { display: flex; flex-direction: column; gap: 5px; height: 100%; padding: 16px 18px; background: #fff; border: 1.5px solid var(--akp-line); border-radius: 12px; transition: border-color .15s, background-color .15s, box-shadow .15s; } .akp-tpl:hover .akp-tpl-body { border-color: var(--akp-line-2); } .akp-tpl input:checked + .akp-tpl-body { background: var(--akp-soft); border-color: var(--akp-brown); box-shadow: inset 0 0 0 1px var(--akp-brown); } .akp-tpl input:focus-visible + .akp-tpl-body { outline: 2px solid var(--akp-brown); outline-offset: 2px; } .akp-tpl-name { font-family: var(--akp-serif); font-size: 19px; color: var(--akp-brown); } .akp-tpl-desc { font-size: 14px; line-height: 1.45; color: var(--akp-ink); } .akp-tpl-meta { margin-top: auto; padding-top: 4px; font-size: 12px; color: var(--akp-muted); } .akp-start-form > .akp-btn--lg { display: flex; width: 100%; max-width: 360px; margin: 4px auto 18px; } /* ---------- панель плана ---------- */ .akp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-bottom: 14px; } .akp-bar-info { min-width: 0; } .akp-bar-names { font-family: var(--akp-serif); font-size: 28px; line-height: 1.2; color: var(--akp-brown); overflow-wrap: anywhere; } .akp-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; } .akp-fact { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; font: inherit; font-size: 14px; color: var(--akp-muted); background: none; border: 0; } .akp-fact--gold { color: var(--akp-gold); } .akp-fact--add { color: var(--akp-brown); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .akp-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .akp-status { font-size: 13px; color: var(--akp-muted); } .akp-status--saved::before { content: '✓ '; color: var(--akp-ok); } .akp-status--error { color: var(--akp-warn); } .akp-tabs { display: flex; gap: 4px; margin: 0 0 -1px; padding: 0 6px; overflow-x: auto; scrollbar-width: none; } .akp-tabs::-webkit-scrollbar { display: none; } .akp-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 11px 16px; font: inherit; font-size: 15px; font-weight: 600; color: var(--akp-muted); background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; cursor: pointer; white-space: nowrap; } .akp-tab:hover { color: var(--akp-brown); } .akp-tab.is-active { color: var(--akp-brown); background: var(--akp-card); border-color: var(--akp-line); } .akp-badge { min-width: 20px; padding: 1px 6px; font-size: 12px; line-height: 18px; text-align: center; color: #fff; background: var(--akp-gold); border-radius: 999px; } .akp-panel { border-top-left-radius: 0; } /* ---------- заметки фотографа ---------- */ .akp-notes { margin: 0 0 18px; padding: 14px 16px; background: var(--akp-soft); border: 1px solid var(--akp-line); border-radius: 10px; } .akp-notes-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--akp-brown); } .akp .akp-notes-ok, .akp .akp-notes-more { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--akp-muted); } .akp-notes .akp-hint { margin-top: 8px; } .akp-toggle { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 14px; color: var(--akp-muted); cursor: pointer; } .akp-toggle input { width: 17px; height: 17px; margin: 0; } .akp-hint { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; font-size: 14px; line-height: 1.5; border-radius: 9px; } .akp-hint > .akp-ic { margin-top: 2px; } .akp-hint-body { min-width: 0; flex: 1; } .akp .akp-hint-body p { margin: 0; } .akp-hint-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; } .akp-hint-actions:empty { display: none; } .akp-hint--warn { color: var(--akp-warn); background: var(--akp-warn-bg); } .akp-hint--warn .akp-hint-body p { color: #6d2a1a; } .akp-hint--tip { color: var(--akp-gold); background: var(--akp-gold-bg); } .akp-hint--tip .akp-hint-body p { color: var(--akp-ink); } .akp-hint--info { color: var(--akp-muted); background: var(--akp-info-bg); } /* ---------- таймлайн ---------- */ .akp-timeline { margin: 0; padding: 0; list-style: none; } .akp-item { --akp-cat: #c8bfb3; position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 6px 14px; margin: 0 0 10px; padding: 14px 10px 14px 18px; background: #fff; border: 1px solid var(--akp-line); border-radius: 12px; box-shadow: inset 4px 0 0 var(--akp-cat); } .akp-item.is-parallel { margin-left: 34px; background: var(--akp-soft); border-style: dashed; } .akp-cat-prep { --akp-cat: #d9ae84; } .akp-cat-ceremony { --akp-cat: #8c5a3c; } .akp-cat-photos { --akp-cat: #4B1E00; } .akp-cat-travel { --akp-cat: #a8b0b4; } .akp-cat-reception { --akp-cat: #b8914f; } .akp-cat-party { --akp-cat: #b8666d; } .akp-cat-other { --akp-cat: #c8bfb3; } .akp-item-rail { display: flex; flex-direction: column; gap: 2px; } .akp input.akp-time { min-height: 36px; padding: 4px 6px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--akp-brown); border-color: transparent; background: transparent; } .akp input.akp-time:hover { border-color: var(--akp-line); } .akp-end { padding-left: 7px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--akp-muted); } .akp-end em { font-style: normal; color: var(--akp-gold); } .akp-item-main { min-width: 0; } .akp input.akp-title { min-height: 36px; padding: 4px 8px; font-size: 17px; font-weight: 600; border-color: transparent; background: transparent; } .akp input.akp-title:hover { border-color: var(--akp-line); } .akp-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding-left: 8px; } .akp-dur { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--akp-muted); } .akp .akp-dur input { width: 72px; min-height: 34px; padding: 4px 8px; font-size: 14px; -moz-appearance: textfield; } .akp .akp-place { flex: 1 1 150px; width: auto; min-height: 34px; padding: 4px 10px; font-size: 14px; } .akp .akp-cat { width: auto; min-height: 34px; padding: 4px 30px 4px 10px; font-size: 13px; } .akp .akp-note { margin-top: 8px; font-size: 14px; } .akp-tip { margin: 8px 0 0 8px; } .akp-tip summary { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--akp-gold); cursor: pointer; list-style: none; } .akp-tip summary::-webkit-details-marker { display: none; } .akp-tip summary::after { content: '›'; font-size: 16px; transition: transform .15s; } .akp-tip[open] summary::after { transform: rotate(90deg); } .akp .akp-tip p { margin: 6px 0 0; padding: 10px 12px; font-size: 14px; line-height: 1.55; background: var(--akp-gold-bg); border-radius: 8px; } .akp-item-actions { display: flex; flex-direction: column; gap: 2px; } .akp-gap { display: flex; align-items: center; gap: 10px; margin: -2px 0 8px 18px; font-size: 12px; color: var(--akp-muted); } .akp-gap::before, .akp-gap::after { content: ''; flex: 1; border-top: 1px dashed var(--akp-line-2); } .akp-gap::before { flex: 0 0 60px; } /* ---------- чек-лист ---------- */ .akp-progress { height: 8px; margin-top: 6px; background: var(--akp-info-bg); border-radius: 999px; overflow: hidden; } .akp-progress-bar { height: 100%; background: var(--akp-brown); border-radius: 999px; transition: width .3s; } .akp .akp-progress-label { margin: 6px 0 0; font-size: 13px; color: var(--akp-muted); } .akp .akp-bucket { padding-bottom: 6px; border-bottom: 1px solid var(--akp-line); } .akp-tasks { margin: 0; padding: 0; list-style: none; } .akp-task { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: 9px 0; border-bottom: 1px solid #f1ebe2; } .akp-task-check { display: flex; flex: 1 1 260px; gap: 11px; align-items: flex-start; font-size: 15px; cursor: pointer; } .akp-task-check input { width: 19px; height: 19px; margin: 1px 0 0; flex: 0 0 auto; } .akp-task.is-done .akp-task-title { color: var(--akp-muted); text-decoration: line-through; } .akp-due { font-size: 13px; color: var(--akp-muted); white-space: nowrap; } .akp-due.is-overdue { color: var(--akp-warn); font-weight: 600; } .akp .akp-task-note { flex-basis: 100%; margin: 2px 0 0 30px; font-size: 13px; color: var(--akp-muted); } .akp-task .akp-link { margin-left: 30px; font-size: 13px; } .akp-inline-form { display: flex; gap: 8px; margin-top: 12px; } .akp-inline-form input { flex: 1; } /* ---------- групповые фото ---------- */ .akp .akp-estimate { margin: 14px 0 6px; font-weight: 600; color: var(--akp-brown); } .akp-groups { margin: 0; padding: 0; list-style: none; } .akp-group { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f1ebe2; } .akp-group-num { width: 26px; font-size: 13px; font-weight: 600; text-align: center; color: var(--akp-muted); flex: 0 0 auto; } .akp .akp-group input { flex: 1; border-color: transparent; } .akp .akp-group input:hover { border-color: var(--akp-line); } .akp-group-actions { display: flex; flex: 0 0 auto; } .akp .akp-suggest-label { display: block; margin: 22px 0 8px; } .akp-suggest { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------- детали ---------- */ .akp-shift { display: flex; flex-wrap: wrap; gap: 8px; } .akp-shift .akp-btn { min-width: 76px; } .akp-details-actions { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--akp-line); } .akp-linkbox { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; } .akp-linkbox-row { display: flex; gap: 8px; } .akp .akp-linkbox input { flex: 1; min-width: 0; font-size: 14px; color: var(--akp-muted); background: var(--akp-soft); } /* ---------- заявка ---------- */ .akp-cta { display: flex; align-items: center; gap: 22px; margin-top: 22px; padding: 22px 26px; background: linear-gradient(135deg, #fbf5ec 0%, #f4e8d6 100%); border: 1px solid var(--akp-line); border-radius: var(--akp-radius); } .akp-cta-photo, .akp-modal-person { width: 92px; height: 92px; flex: 0 0 auto; background: url('/pic/me2-mini.webp') 42% 30% / cover no-repeat; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 4px 14px rgba(75, 30, 0, .15); } .akp-cta-body { min-width: 0; } .akp-cta .akp-h3 { margin-top: 0; font-family: var(--akp-serif); font-weight: 400; font-size: 22px; color: var(--akp-brown); } .akp .akp-cta p { margin-bottom: 14px; color: var(--akp-ink); } .akp-cta.is-sent .akp-cta-photo { width: 56px; height: 56px; } .akp .akp-cta.is-sent p { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--akp-ok); } /* ---------- модальные окна ---------- */ .akp-noscroll { overflow: hidden; } .akp-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; } .akp-modal-backdrop { position: absolute; inset: 0; background: rgba(35, 18, 6, .5); } .akp-modal-box { position: relative; width: 100%; max-width: 470px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 30px 28px 26px; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(35, 18, 6, .3); animation: akp-pop .18s ease-out; } @keyframes akp-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } .akp-modal-x { position: absolute; top: 8px; right: 10px; width: 38px; height: 38px; font-size: 26px; line-height: 1; color: var(--akp-muted); background: none; border: 0; border-radius: 8px; cursor: pointer; } .akp-modal-x:hover { color: var(--akp-brown); background: var(--akp-soft); } .akp-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .akp-modal-done { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 12px; color: #fff; background: var(--akp-ok); border-radius: 50%; } .akp-modal-done .akp-ic { width: 26px; height: 26px; } .akp-modal-person { width: 64px; height: 64px; margin-bottom: 12px; } .akp-btn.is-busy { position: relative; color: transparent; } .akp-btn.is-busy::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: akp-spin .7s linear infinite; } @keyframes akp-spin { to { transform: rotate(360deg); } } .akp-toast { position: fixed; left: 50%; bottom: 22px; z-index: 3100; display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px); padding: 12px 18px; font-size: 14px; color: #fff; background: #2e1a0c; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transform: translateX(-50%); animation: akp-pop .18s ease-out; } .akp-toast button { margin: 0; padding: 0; font: inherit; font-weight: 600; color: #f2c98a; background: none; border: 0; cursor: pointer; } /* ---------- статья под приложением ---------- */ .akp-guide { max-width: 1000px; margin: 10px auto 60px; } .akp-guide > .akp-h2 { text-align: center; } #akp-main .akp-guide-lead { max-width: 680px; margin: 0 auto 26px; text-align: center; line-height: 1.6; color: var(--akp-muted); } .akp-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .akp-guide-card { position: relative; padding: 22px 22px 18px; background: #fff; border: 1px solid var(--akp-line); border-radius: var(--akp-radius); } .akp-guide-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-family: var(--akp-serif); font-size: 16px; color: var(--akp-brown); background: var(--akp-gold-bg); border-radius: 50%; } #akp-main .akp-guide-card .akp-h3 { margin: 12px 0 6px; } #akp-main .akp-guide-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--akp-muted); } /* ---------- пример дня и вопросы (статичный HTML под приложением) ---------- */ .akp-sample, .akp-faq { max-width: 820px; margin: 10px auto 60px; } .akp-sample > .akp-h2, .akp-faq > .akp-h2 { text-align: center; } .akp-sample-list { margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--akp-line); border-radius: var(--akp-radius); overflow: hidden; } .akp-sample-list li + li { border-top: 1px solid #f1ebe2; } .akp-sample-list summary, .akp-faq-item summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 12px 18px; cursor: pointer; list-style: none; } .akp-sample-list summary::-webkit-details-marker, .akp-faq-item summary::-webkit-details-marker { display: none; } .akp-sample-list summary::after, .akp-faq-item summary::after { content: '+'; margin-left: auto; font-size: 18px; line-height: 1; color: var(--akp-gold); } .akp-sample-list details[open] summary::after, .akp-faq-item[open] summary::after { content: '−'; } .akp-sample-time { width: 96px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--akp-brown); } .akp-sample-title { font-weight: 600; } .akp-sample-place { font-size: 13px; color: var(--akp-muted); } #akp-main .akp-sample-list p, #akp-main .akp-faq-item p { margin: 0; padding: 0 18px 14px; font-size: 15px; line-height: 1.6; color: var(--akp-muted); } #akp-main .akp-sample-list p { padding-left: 128px; } .akp-faq-item { margin-bottom: 8px; background: #fff; border: 1px solid var(--akp-line); border-radius: 10px; } #akp-main .akp-faq-item .akp-h3 { display: inline; margin: 0; font-size: 16px; } @media (max-width: 700px) { .akp-sample-time { width: auto; } #akp-main .akp-sample-list p { padding-left: 18px; } } /* ---------- печать (только на бумаге) ---------- */ .akp-print { display: none; } /* ---------- узкие экраны ---------- */ @media (max-width: 700px) { .akp-card { padding: 18px 14px; } .akp-templates { grid-template-columns: 1fr; } .akp-bar-names { font-size: 24px; } .akp-bar-actions { width: 100%; } .akp-bar-actions .akp-status { flex-basis: 100%; } .akp-hide-sm { display: none; } .akp-item { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 6px 12px 14px; } .akp-item.is-parallel { margin-left: 14px; } .akp-item-rail { flex-direction: row; align-items: center; gap: 6px; grid-column: 1; grid-row: 1; } .akp input.akp-time { width: auto; font-size: 18px; } .akp-end { padding-left: 0; } .akp-item-actions { grid-column: 2; grid-row: 1 / span 2; } .akp-item-main { grid-column: 1; grid-row: 2; } .akp-item-meta { padding-left: 6px; } /* длительность, тип и кнопки — одной строкой, место — отдельной под ними */ .akp .akp-place { order: 5; flex-basis: 100%; } .akp-chip--quiet span { display: none; } .akp-cta { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 18px; } .akp-cta-photo { width: 68px; height: 68px; } .akp-modal { align-items: flex-end; padding: 0; } .akp-modal-box { max-width: none; max-height: 92vh; padding: 26px 18px 22px; border-radius: 16px 16px 0 0; } .akp-inline-form { flex-direction: column; } .akp-linkbox-row { flex-direction: column; } } /* ---------- печать ---------- */ @media print { body { position: static !important; display: block !important; background: #fff !important; } nav, #clients_panel, footer, #cookie-banner, #mask, .akp-hero, .akp-guide, .akp-toast, .akp-modal, #akp-app > :not(.akp-print) { display: none !important; } #akp-main { padding: 0; } .akp-print { display: block; font-family: var(--akp-sans); color: #000; } .akp-print h1 { margin: 0 0 4px; font-family: var(--akp-serif); font-weight: 400; font-size: 26pt; color: #000; text-shadow: none; } .akp-print h2 { margin: 22px 0 8px; font-size: 14pt; } .akp-print-sub { margin: 0 0 16px; color: #555; } .akp-print table { width: 100%; border-collapse: collapse; font-size: 11pt; } .akp-print td { padding: 7px 8px; vertical-align: top; border-bottom: 1px solid #ddd; } .akp-print tr { page-break-inside: avoid; } .akp-print-time { width: 110px; font-weight: 600; white-space: nowrap; } .akp-print-photo { width: 30px; text-align: center; } .akp-print span, .akp-print em { color: #555; } .akp-print-foot { margin-top: 20px; font-size: 9pt; color: #888; } }