/* Theme Name: Amor Tarot Theme URI: https://amor-tarot.com/ Author: Poshukomur Description: Власна тема для amor-tarot.com. Дизайн-система «Опівніч»: Spectral + Manrope, токени dark/light, container queries. Розроблена під контент про Таро, сумісна з Polylang, Yoast, Easy TOC, Shortcoder. Version: 0.1.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: amor Tags: two-columns, custom-menu, featured-images, translation-ready */ /* ========================================================================= 1. ТОКЕНИ Палітра A «Опівніч» — базова. Палітра B «Присмерк» лишена як data-palette="b" на (перемикається однією строчкою в header.php). ====================================================================== */ :root, [data-theme="dark"] { --bg: #17131F; --bg-raise: #201A2E; --bg-soft: #241E33; --ink: #EDE6D8; --ink-soft: #B3AAC4; --accent: #C9A46B; --accent-ink: #D6B57E; --accent-line: rgba(201, 164, 107, .4); --accent-dim: rgba(201, 164, 107, .14); --btn-bg: #C9A46B; --btn-ink: #1C1626; --btn-bg-h: #DBBC85; --line: rgba(237, 230, 216, .14); --shadow: 0 14px 44px rgba(0, 0, 0, .45); --glow: 0 0 90px rgba(201, 164, 107, .14); --focus: #D6B57E; --ok: #7FB98A; color-scheme: dark; } [data-theme="light"] { --bg: #F6F1E6; --bg-raise: #FDFAF2; --bg-soft: #EFE7D7; --ink: #2B2438; --ink-soft: #6A6178; --accent: #A67F41; --accent-ink: #7E6127; --accent-line: rgba(166, 127, 65, .45); --accent-dim: rgba(166, 127, 65, .12); --btn-bg: #2E2540; --btn-ink: #F2ECDF; --btn-bg-h: #3D3253; --line: rgba(43, 36, 56, .16); --shadow: 0 14px 36px rgba(43, 36, 56, .12); --glow: none; --focus: #7E6127; --ok: #3F8A55; color-scheme: light; } /* Палітра B «Присмерк» — тепла. Вмикається data-palette="b" на . */ [data-palette="b"], [data-palette="b"][data-theme="dark"] { --bg: #201521; --bg-raise: #2B1C2C; --bg-soft: #30202F; --ink: #F0E7DE; --ink-soft: #BCABB8; --accent: #CFA070; --accent-ink: #DCB183; --accent-line: rgba(207, 160, 112, .4); --accent-dim: rgba(207, 160, 112, .14); --btn-bg: #CFA070; --btn-ink: #241318; --btn-bg-h: #DFB384; --line: rgba(240, 231, 222, .14); --focus: #DCB183; --ok: #7FB98A; --glow: 0 0 90px rgba(207, 160, 112, .14); } [data-palette="b"][data-theme="light"] { --bg: #F8F0E9; --bg-raise: #FEFAF5; --bg-soft: #F1E6DC; --ink: #362337; --ink-soft: #756270; --accent: #A97C42; --accent-ink: #8A5F2D; --accent-line: rgba(169, 124, 66, .45); --accent-dim: rgba(169, 124, 66, .12); --btn-bg: #3A2540; --btn-ink: #F5EDE4; --btn-bg-h: #4B3253; --line: rgba(54, 35, 55, .16); --shadow: 0 14px 36px rgba(54, 35, 55, .12); --glow: none; --focus: #8A5F2D; --ok: #3F8A55; } /* ========================================================================= 2. БАЗА ====================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); } /* Якорі: шапка sticky (72px + рамка), інакше верх секції ховається під меню */ :target, section[id], [id][data-anchor] { scroll-margin-top: 88px; } @media (max-width: 900px) { :target, section[id], [id][data-anchor] { scroll-margin-top: 82px; } } body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent-ink); text-decoration-color: var(--accent-line); text-underline-offset: 3px; } a:hover { color: var(--ink); } img { max-width: 100%; height: auto; } summary { list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } details[open] .am-plus { transform: rotate(45deg); } details[open] summary .am-chev { transform: rotate(180deg); } .am-lless { display: none; } details.am-seo[open] .am-lmore { display: none; } details.am-seo[open] .am-lless { display: inline; } @keyframes am-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes am-tw { 0%, 100% { opacity: .2; } 50% { opacity: .85; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } .am-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 20px; background: var(--btn-bg); color: var(--btn-ink); border-radius: 0 0 12px 0; font-weight: 700; text-decoration: none; } .am-skip:focus { left: 0; } /* ========================================================================= 3. АДАПТИВНІ ПЕРЕМИКАЧІ (заміна sc-if з макета) display:contents — щоб обгортка не ламала flex/grid батька. ====================================================================== */ .am-desk { display: contents; } .am-mob { display: none; } @media (max-width: 900px) { .am-desk { display: none; } .am-mob { display: contents; } } /* Іконки теми в кнопці-перемикачі */ .am-if-dark { display: flex; } .am-if-light { display: none; } [data-theme="light"] .am-if-dark { display: none; } [data-theme="light"] .am-if-light { display: flex; } /* Мобільне меню */ .am-menu { display: none; } .am-menu.is-open { display: block; } /* Sticky-CTA */ .am-sticky { display: none; } .am-sticky.is-visible { display: contents; } /* Слот під зображення (з макета image-slot) */ .am-imgslot { display: flex; align-items: center; justify-content: center; background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; text-align: center; overflow: hidden; } .am-imgslot--circle { border-radius: 50%; } .am-imgslot--rect { border-radius: 14px; } .am-imgslot img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================================= 4. ТИПОГРАФІКА КОНТЕНТУ (.am-prose) — для статей і сторінок ====================================================================== */ /* --- PROSE:START --- */ .am-prose{font-size:17px;line-height:1.72;color:var(--ink)} .am-prose p{margin:0 0 22px} .am-prose .lead{font-size:19px;line-height:1.6;color:var(--ink-soft);margin:0 0 24px} .am-prose h2{font-family:'Spectral',serif;font-weight:600;font-size:clamp(26px,2.4cqw,33px);line-height:1.2;margin:48px 0 16px;scroll-margin-top:96px;position:relative;padding-top:22px} .am-prose h2::before{content:"";position:absolute;top:0;left:0;width:38px;height:2px;background:var(--accent)} .am-prose h3{font-family:'Spectral',serif;font-weight:600;font-size:22px;line-height:1.3;margin:32px 0 12px;color:var(--ink)} .am-prose ul,.am-prose ol{margin:0 0 24px;padding-left:1.45em} .am-prose li{margin:0 0 10px;padding-left:.35em} .am-prose ul li::marker{color:var(--accent)} .am-prose ol li::marker{color:var(--accent-ink);font-weight:700} .am-prose a{color:var(--accent-ink);text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px} .am-prose a:hover{color:var(--ink)} .am-prose blockquote{margin:0 0 26px;padding:6px 0 6px 22px;border-left:3px solid var(--accent-line);font-family:'Spectral',serif;font-style:italic;font-size:clamp(21px,2cqw,25px);line-height:1.4;color:var(--ink)} .am-prose table{width:100%;border-collapse:collapse;font-size:16.5px;margin:0 0 8px} .am-prose th{text-align:left;padding:12px 15px;background:var(--bg-soft);border-bottom:2px solid var(--accent-line);font-weight:700;color:var(--ink)} .am-prose td{padding:12px 15px;border-bottom:1px solid var(--line);color:var(--ink-soft)} .am-prose td:first-child{color:var(--ink);font-weight:600} .am-prose figure{margin:0 0 28px} .am-prose figcaption{margin-top:11px;font-size:14.5px;color:var(--ink-soft);text-align:center} .toc-a{display:block;padding:7px 0 7px 16px;border-left:2px solid var(--line);color:var(--ink-soft);text-decoration:none;font-size:15px;line-height:1.35;transition:color .2s,border-color .2s} .toc-a:hover{color:var(--ink);border-left-color:var(--accent-line)} .toc-a.active{color:var(--accent-ink);border-left-color:var(--accent);font-weight:600} /* --- PROSE:END --- */ /* Доповнення теми поверх макета (у макеті цих елементів не було) */ .am-prose h4 { margin: 1.6em 0 .4em; font-weight: 700; font-size: 1.05em; } .am-prose img { border-radius: 14px; max-width: 100%; height: auto; } .am-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; } .am-prose code { background: var(--bg-soft); padding: 2px 6px; border-radius: 6px; font-size: .9em; } .am-prose blockquote p:last-child { margin-bottom: 0; } .am-prose > p:last-child { margin-bottom: 0; } /* Лід у герої «Про мене»: відступ до кнопок CTA. Раніше його випадково давав зайвий порожній

у RU-контенті — через це UA і RU виглядали по-різному. */ .am-about-lead { margin-bottom: 22px; } /* Easy TOC — підганяємо під тему */ .am-prose #ez-toc-container, #ez-toc-container { background: var(--bg-raise) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: none !important; padding: 20px 24px !important; color: var(--ink) !important; } #ez-toc-container .ez-toc-title { color: var(--ink) !important; font-family: 'Spectral', serif; } #ez-toc-container a { color: var(--ink-soft) !important; text-decoration: none !important; } #ez-toc-container a:hover { color: var(--accent-ink) !important; } /* ========================================================================= 4c. ШОРТКОДИ SHORTCODER У КОНТЕНТІ Розмітка шорткодів (appeal-in-the-text, convers-page, author-widget-sidebar) стилізувалась темою marafon. Тут ті самі класи, але на токенах нової теми. ====================================================================== */ /* [sc name="appeal-in-the-text"] — «🔮 Напиши в Telegram…» */ .am-prose .conversion-form, .conversion-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 22px; margin: 30px 0; padding: 20px 24px; background: color-mix(in srgb, var(--accent) 12%, var(--bg-raise)); border: 1px solid var(--accent-line); border-radius: 18px; font-family: inherit; transition: background-color .35s; } .conversion-form > * { align-self: center; } /* wpautop загортає у

(у шорткоді перед кнопкою є порожній рядок). Той

тягне margin-bottom 22px з прози — картка стає вищою, а кнопка виглядає задертою вгору. Гасимо відступи і центруємо вміст. */ .am-prose .conversion-form p, .conversion-form p { display: flex; align-items: center; align-self: center; margin: 0; padding: 0; } .conversion-form .form-text { flex: 1 1 260px; align-self: center; margin: 0; font-family: 'Spectral', serif; font-weight: 600; font-size: clamp(17px, 1.7cqw, 20px); line-height: 1.3; color: var(--ink); } .conversion-form .form-button { flex: none; display: inline-flex; align-items: center; align-self: center; /* Коли текст не влазить в один рядок і кнопка переноситься — центруємо її по горизонталі. На широкому екрані вільного місця немає, тож auto-поля нічого не змінюють. */ margin-inline: auto; gap: 9px; padding: 13px 26px; border: 0; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font: inherit; font-weight: 700; font-size: 15.5px; text-decoration: none; cursor: pointer; transition: background-color .2s, transform .15s, box-shadow .2s; } .conversion-form .form-button:hover, .conversion-form .form-button:focus-visible { background: var(--btn-bg-h); color: var(--btn-ink); transform: translateY(-1px); box-shadow: var(--glow); } .conversion-form .form-button svg, .conversion-form .form-button svg path { fill: var(--btn-ink); } /* [sc name="convers-page"] — блок вартості/умов */ .consultation-block { margin: 30px 0; padding: clamp(22px, 3cqw, 34px); background: var(--bg-raise); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); } .consultation-block .consultation-button { display: inline-flex; align-items: center; justify-content: center; margin: 0 0 22px; padding: 15px 30px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font-weight: 800; font-size: 15.5px; letter-spacing: .04em; text-decoration: none; transition: background-color .2s; } .consultation-block .consultation-button:hover { background: var(--btn-bg-h); } .consultation-block .row { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 6px 24px; padding: 14px 0; border-top: 1px solid var(--line); } .consultation-block .row:first-child { border-top: 0; padding-top: 0; } .consultation-block .title { font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); } .consultation-block .info { color: var(--ink); } .consultation-block .info ol { margin: 0; padding-left: 1.2em; } @media (max-width: 620px) { .consultation-block .row { grid-template-columns: 1fr; } } /* [sc name="author-widget-sidebar"] — картка авторки */ .author-card { padding: 22px; background: var(--bg-raise); border: 1px solid var(--line); border-radius: 18px; text-align: center; } .author-card-photo { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; border: 1px solid var(--accent-line); } .author-card-name-link { text-decoration: none; } .author-card-name { display: block; margin-top: 12px; font-family: 'Spectral', serif; font-weight: 600; font-size: 20px; color: var(--ink); } .author-card-role { margin: 4px 0 10px; font-size: 13px; color: var(--ink-soft); } .author-card-desc { margin: 0 0 16px; font-size: 15px; color: var(--ink-soft); } .author-card .highlight-online { color: var(--accent-ink); font-weight: 700; } .author-card-button { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; text-decoration: none; } .author-card-button .tg-icon { width: 18px; height: 18px; } /* Ім'я авторки — посилання на «Про мене» */ .am-author-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent-line); transition: color .2s, border-color .2s; } .am-author-link:hover, .am-author-link:focus-visible { color: var(--accent-ink); border-color: var(--accent-ink); } /* Двомовні шматки в контенті: чужу мову ріже PHP, це страховка */ [lang^="ru"] .ac-uk, [lang^="uk"] .ac-ru { display: none; } /* ========================================================================= 4b. СТАНИ ЛІСТИНГУ ТА ФОРМИ (заміна логіки DCLogic) ====================================================================== */ /* Приховані картки до натискання «Показати ще» */ [data-card].am-more { display: none; } [data-card].am-more.is-shown { display: flex; } /* Чипси-фільтри */ .am-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--btn-ink); } /* Спосіб звʼязку у формі */ .am-method { position: relative; display: inline-flex; align-items: center; } .am-method.is-active { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent-ink); } .am-method:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; } /* Пульс індикатора «онлайн» */ @keyframes am-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok, #6BBF8A) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* Мерехтіння зірок з макета */ @keyframes am-tw { 0%, 100% { opacity: .2; } 50% { opacity: .85; } } /* ========================================================================= 5. ЗГЕНЕРОВАНІ СТАНИ (з style-hover/style-focus/style-active макета) Файл генерується convert.py; правити тут вручну можна. ====================================================================== */ /* SEO-текст головної (реальний контент сторінки-фронту) */ .am-seotext { font-size: 15.5px; line-height: 1.72; color: var(--ink-soft); } .am-seotext > *:first-child { margin-top: 0; } .am-seotext > *:last-child { margin-bottom: 0; } .am-seotext p { margin: 0 0 14px; text-wrap: pretty; } .am-seotext h2 { font-family: 'Spectral', serif; font-weight: 600; font-size: clamp(22px, 2.2cqw, 28px); line-height: 1.18; color: var(--ink); margin: 34px 0 14px; scroll-margin-top: 88px; } .am-seotext h3 { font-family: 'Spectral', serif; font-weight: 600; font-size: 19px; color: var(--ink); margin: 26px 0 10px; } .am-seotext ul, .am-seotext ol { margin: 0 0 14px; padding-left: 22px; } .am-seotext li { margin: 6px 0; } .am-seotext li::marker { color: var(--accent); } .am-seotext blockquote { margin: 0 0 18px; padding: 0 0 0 18px; border-left: 2px solid var(--accent-line); font-style: italic; color: var(--ink); } .am-seotext blockquote p { margin: 0; } .am-seotext strong { color: var(--ink); } .am-seotext a { color: var(--accent-ink); text-underline-offset: 3px; } /* SEO-блок головної стоїть першим у коді сторінки (вище для роботів), а візуально лишається останнім — порядок задає flex order. */ body.home #am-content, #am-content:has(> .am-seo-block) { display: flex; flex-direction: column; } #am-content > .am-seo-block { order: 99; } /* Стаття: текст стоїть першим у коді (вище для роботів), а візуально лишається під заголовком/метою/змістом — порядок задає flex order. */ #am-content:has(> .am-crumbs) { display: flex; flex-direction: column; } /* width:100% обов'язковий: auto-маргіни в колонковому флексі скасовують stretch, без нього блок стискається по контенту й ліва межа крихт з'їжджає вправо. */ #am-content > .am-crumbs { order: -1; width: 100%; } .am-art { display: flex; flex-direction: column; } .am-art > .am-art-body { order: 4; } .am-art > .am-art-share { order: 5; } /* флекс-контейнер не схлопує маргіни — гасимо крайні, щоб відступи не поповзли */ .am-art-body > *:first-child { margin-top: 0; } .am-art-body > *:last-child { margin-bottom: 0; } /* --- GENERATED:START --- */ /* Головна */ .amx-1:hover{color:var(--ink)} .amx-2:hover{color:var(--ink)} .amx-3:hover{color:var(--ink)} .amx-4:hover{background:var(--bg-soft)} .amx-5:hover{background:var(--bg-soft)} .amx-6:hover{color:var(--ink)} .amx-7:hover{color:var(--ink)} .amx-8:hover{border-color:var(--accent-line);background:var(--bg-soft)} .amx-8:focus{outline:2px solid var(--focus);outline-offset:2px} .amx-9:focus{outline:2px solid var(--focus);outline-offset:2px} .amx-10:hover{background:var(--btn-bg-h);transform:translateY(-1px);box-shadow:var(--shadow)} .amx-10:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-10:active{transform:translateY(0)} .amx-11:hover{background:var(--accent-dim);color:var(--accent-ink)} .amx-11:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-12:hover{background:var(--accent-dim);color:var(--accent-ink)} .amx-12:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-13:hover{transform:translateY(-3px)} .amx-14:hover{transform:translateY(-3px)} .amx-15:hover{transform:translateY(-3px)} .amx-16:hover{transform:translateY(-3px)} .amx-17:hover{transform:translateY(-3px)} .amx-18:hover{color:var(--accent-ink)} .amx-19:hover{color:var(--accent-ink)} .amx-20:hover{color:var(--accent-ink)} .amx-21:hover{color:var(--accent-ink)} .amx-22:hover{color:var(--accent-ink)} .amx-23:hover{color:var(--accent-ink)} .amx-24:hover{background:var(--btn-bg-h);transform:translateY(-1px);box-shadow:var(--shadow)} .amx-24:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-24:active{transform:translateY(0)} .amx-25:hover{background:var(--accent-dim)} .amx-25:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-26:hover{color:var(--accent-ink)} .amx-27:hover{color:var(--accent-ink)} .amx-28:hover{color:var(--accent-ink)} .amx-29:hover{color:var(--accent-ink)} .amx-30:hover{color:var(--accent-ink)} .amx-31:hover{color:var(--accent-ink)} .amx-32:active{transform:translateY(1px)} /* Стаття */ .amx-art-1:hover{color:var(--ink)} .amx-art-2:hover{color:var(--ink)} .amx-art-3:hover{background:var(--bg-soft)} .amx-art-4:hover{background:var(--bg-soft)} .amx-art-5:hover{color:var(--ink)} .amx-art-6:hover{color:var(--ink)} .amx-art-7:hover{border-color:var(--accent-line);background:var(--bg-soft)} .amx-art-7:focus{outline:2px solid var(--focus);outline-offset:2px} .amx-art-8:focus{outline:2px solid var(--focus);outline-offset:2px} .amx-art-9:hover{color:var(--accent-ink)} .amx-art-10:hover{color:var(--accent-ink)} .amx-art-11:hover{color:var(--accent-ink)} .amx-art-12:hover{background:var(--accent-dim)} .amx-art-12:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-art-13:hover{background:var(--btn-bg-h)} .amx-art-14:hover{background:var(--accent-dim)} .amx-art-15:hover{border-color:var(--accent-line);background:var(--bg-soft)} .amx-art-16:hover{border-color:var(--accent-line);background:var(--bg-soft)} .amx-art-16:focus{outline:2px solid var(--focus);outline-offset:2px} .amx-art-17:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)} .amx-art-17:focus{outline:2px solid var(--focus);outline-offset:2px} .amx-art-18:hover{background:var(--btn-bg-h)} .amx-art-18:focus{outline:2px solid var(--focus);outline-offset:2px} .amx-art-19:hover{color:var(--accent-ink)} .amx-art-20:hover{color:var(--accent-ink)} .amx-art-21:hover{color:var(--accent-ink)} .amx-art-22:hover{background:var(--accent-dim)} .amx-art-23:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-art-24:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-art-25:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-art-26:hover{color:var(--accent-ink)} .amx-art-27:hover{color:var(--accent-ink)} .amx-art-28:hover{color:var(--accent-ink)} .amx-art-29:hover{color:var(--accent-ink)} .amx-art-30:hover{color:var(--accent-ink)} /* Рубрика */ .amx-cat-1:hover{color:var(--ink)} .amx-cat-2:hover{color:var(--ink)} .amx-cat-3:hover{background:var(--bg-soft)} .amx-cat-4:hover{background:var(--bg-soft)} .amx-cat-5:hover{color:var(--ink)} .amx-cat-6:hover{color:var(--ink)} .amx-cat-7:hover{border-color:var(--accent-line);background:var(--bg-soft)} .amx-cat-7:focus{outline:2px solid var(--focus);outline-offset:2px} .amx-cat-8:focus{outline:2px solid var(--focus);outline-offset:2px} .amx-cat-9:hover{color:var(--accent-ink)} .amx-cat-10:hover{transform:translateY(-3px)} .amx-cat-11:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-cat-12:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-cat-13:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-cat-14:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-cat-15:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-cat-16:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-cat-17:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-cat-18:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-cat-19:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-cat-20:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-cat-21:hover{background:var(--accent-dim)} .amx-cat-21:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-cat-22:hover{background:var(--btn-bg-h)} .amx-cat-22:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-cat-23:hover{color:var(--accent-ink)} .amx-cat-24:hover{color:var(--accent-ink)} .amx-cat-25:hover{color:var(--accent-ink)} .amx-cat-26:hover{color:var(--accent-ink)} .amx-cat-27:hover{color:var(--accent-ink)} /* Про мене */ .amx-abt-1:hover{color:var(--ink)} .amx-abt-2:hover{color:var(--ink)} .amx-abt-3:hover{background:var(--bg-soft)} .amx-abt-4:hover{background:var(--bg-soft)} .amx-abt-5:hover{color:var(--ink)} .amx-abt-6:hover{color:var(--ink)} .amx-abt-7:hover{border-color:var(--accent-line);background:var(--bg-soft)} .amx-abt-7:focus{outline:2px solid var(--focus);outline-offset:2px} .amx-abt-8:focus{outline:2px solid var(--focus);outline-offset:2px} .amx-abt-9:hover{background:var(--btn-bg-h);transform:translateY(-1px);box-shadow:var(--shadow)} .amx-abt-9:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-abt-9:active{transform:translateY(0)} .amx-abt-10:hover{background:var(--accent-dim);color:var(--accent-ink)} .amx-abt-10:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-abt-11:hover{background:var(--btn-bg-h);transform:translateY(-1px);box-shadow:var(--shadow)} .amx-abt-11:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-abt-11:active{transform:translateY(0)} .amx-abt-12:hover{background:var(--btn-bg-h);transform:translateY(-1px);box-shadow:var(--shadow)} .amx-abt-12:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-abt-12:active{transform:translateY(0)} .amx-abt-13:hover{background:var(--accent-dim);color:var(--accent-ink)} .amx-abt-13:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-abt-14:hover{color:var(--ink)} .amx-abt-15:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-abt-16:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-abt-17:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-abt-18:hover{color:var(--accent-ink)} .amx-abt-19:hover{color:var(--accent-ink)} .amx-abt-20:hover{color:var(--accent-ink)} .amx-abt-21:hover{color:var(--accent-ink)} .amx-abt-22:hover{color:var(--accent-ink)} .amx-abt-23:hover{color:var(--accent-ink)} .amx-abt-24:active{transform:translateY(1px)} /* Контакти */ .amx-cnt-1:hover{color:var(--ink)} .amx-cnt-2:hover{color:var(--ink)} .amx-cnt-3:hover{color:var(--ink)} .amx-cnt-4:hover{background:var(--bg-soft)} .amx-cnt-5:hover{background:var(--bg-soft)} .amx-cnt-6:hover{color:var(--ink)} .amx-cnt-7:hover{border-color:var(--accent-line);background:var(--bg-soft)} .amx-cnt-7:focus{outline:2px solid var(--focus);outline-offset:2px} .amx-cnt-8:focus{outline:2px solid var(--focus);outline-offset:2px} .amx-cnt-9:hover{background:var(--btn-bg-h);transform:translateY(-1px);box-shadow:var(--shadow)} .amx-cnt-9:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-cnt-9:active{transform:translateY(0)} .amx-cnt-10:hover{background:var(--accent-dim)} .amx-cnt-10:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-cnt-11:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--accent-dim)} .amx-cnt-12:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--accent-dim)} .amx-cnt-13:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--accent-dim)} .amx-cnt-14:hover{background:var(--btn-bg-h);transform:translateY(-1px);box-shadow:var(--shadow)} .amx-cnt-14:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-cnt-14:active{transform:translateY(0)} .amx-cnt-15:hover{background:var(--accent-dim)} .amx-cnt-15:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-cnt-16:hover{background:var(--accent-dim);color:var(--accent-ink)} .amx-cnt-16:focus{outline:2px solid var(--focus);outline-offset:3px} .amx-cnt-17:hover{color:var(--ink)} .amx-cnt-18:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-cnt-19:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-cnt-20:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .amx-cnt-21:hover{color:var(--accent-ink)} .amx-cnt-22:hover{color:var(--accent-ink)} .amx-cnt-23:hover{color:var(--accent-ink)} .amx-cnt-24:hover{color:var(--accent-ink)} .amx-cnt-25:hover{color:var(--accent-ink)} .amx-cnt-26:hover{color:var(--accent-ink)} .amx-cnt-27:active{transform:translateY(1px)} /* --- GENERATED:END --- */