/* =========================================================================
* AITAS hamburger drawer — О4 «Касета» (rounds 8–10, 2026-07-30/31).
* Design source of truth: tasks/hamburger-menu-rework/option4.html.
* Companion files: inc/aitas-menu.php, js/aitas-menu.js, img/menu/*.webp.
*
* Everything here anchors on the ID (#aitas-drawer.main_menu) so it out-ranks
* BOTH legacy slide mechanisms in the bundle — the ≥862px transform rule and
* the ≤861px `left:-100%` / `.show_menu{left:0 !important}` pair — at every
* width. The open/close contract itself is untouched: custom.js still toggles
* `.show_menu` here, `.open` on the burger, `.hide_site-header`, `.blur`.
*
* Every link and every text node sets an explicit `color`: the Customizer
* ships `a{color:#007bff}` as the LAST sheet in with no aitas-scope
* carve, and an uncoloured anchor in here renders bright blue on navy.
*
* Photos are background-images, never ![]()
: enqueued CSS is not touched by
* webp-express's alter-html rewriter, so our own alpha-WebP ships as-is.
* ========================================================================= */
/* deploy marker — min copies strip comments, so both markers are functional
* tokens: a custom property and the keyframe name used by the entrance stagger */
:root { --aitas-menu-v: 3; }
@keyframes amn130-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
/* ---------------------------------------------------------------- shell -- */
/* <992 = fullscreen sheet; the ≥992 side panel lives in the media query below.
* height:auto is deliberate — the bundle's height:100vh would out-live the
* inset pair and overflow under mobile browser chrome. */
#aitas-drawer.main_menu {
position: fixed;
inset: 0 auto 0 0;
left: 0 !important;
width: 100%;
max-width: none;
height: auto;
margin: 0;
padding: 0;
transform: translateX(-102%);
transition: transform 0.34s cubic-bezier(0.65, 0, 0.35, 1),
visibility 0s linear 0.34s;
visibility: hidden;
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 100; /* above the stripe (20) inside the header's z-990 context —
* the drawer's own ✕ is the close control */
background: linear-gradient(168deg, #000D2E 0%, #0A1A45 100%);
}
#aitas-drawer.main_menu.show_menu {
transform: translateX(0) !important;
visibility: visible;
transition: transform 0.34s cubic-bezier(0.65, 0, 0.35, 1),
visibility 0s;
}
/* scoped reset — the drawer is a self-contained surface */
#aitas-drawer .amn-root,
#aitas-drawer .amn-root * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#aitas-drawer .amn-root {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
width: 100%;
font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 14px;
line-height: 1.3;
color: #fff;
}
#aitas-drawer .amn-root a { text-decoration: none; }
#aitas-drawer .amn-root svg { display: block; flex: none; }
/* :where keeps this reset at 1,1,0 so the later single-class button rules
(.amn-cb, .amn-x, .amn-dx) win by order — a bare `button` here is 1,1,1
and silently ate their background/border/box-shadow (r8 fix). */
#aitas-drawer .amn-root :where(button) {
font: inherit;
cursor: pointer;
background: none;
border: none;
color: inherit;
-webkit-appearance: none;
appearance: none;
box-shadow: none;
text-transform: none;
}
#aitas-drawer .amn-root :focus-visible,
#aitas-drawer .amn-drill :focus-visible {
outline: 2px solid #7CC0EA;
outline-offset: 2px;
}
/* ------------------------------------------------------------- top row -- */
/* logo · tagline · ✕ on one line (r9) — the tagline takes the free width so the
* menu itself starts higher up the sheet */
#aitas-drawer .amn-top {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 24px 8px;
flex: none;
}
#aitas-drawer .amn-logo {
display: block;
color: #fff;
line-height: 0;
}
#aitas-drawer .amn-logo img {
display: block;
width: 95px;
height: 44px;
}
#aitas-drawer .amn-big {
flex: 1;
min-width: 0;
font-size: 23px;
font-weight: 800;
color: #fff;
letter-spacing: -0.01em;
line-height: 1.08;
margin: 0;
/* sit the tagline on the logo's own text line (r10): the AITAS letters end
* 4px above the image bottom and Raleway 800 carries a 5px descent at 23px
* (7px at 31px) — the negative margin lands the two baselines together */
align-self: flex-end;
margin-bottom: -1px;
}
@media (max-width: 379px) {
#aitas-drawer .amn-big { font-size: 20px; }
}
#aitas-drawer .amn-x {
margin-left: auto;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex: none;
transition: border-color 0.2s, background 0.2s;
}
#aitas-drawer .amn-x:hover {
border-color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.07);
}
/* ---------------------------------------------------------------- body -- */
/* the bottom padding clears the iOS Safari toolbar on notched devices */
#aitas-drawer .amn-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 8px 24px calc(32px + env(safe-area-inset-bottom, 0px));
scrollbar-width: thin;
scrollbar-color: #4F9AD0 rgba(255, 255, 255, 0.08);
}
#aitas-drawer .amn-wrap {
max-width: 1240px;
margin: 0 auto;
width: 100%;
}
/* --------------------------------------------------------------- chips -- */
#aitas-drawer .amn-chips {
display: flex;
gap: 8px;
margin-top: 6px;
flex-wrap: wrap;
}
#aitas-drawer .amn-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid rgba(122, 168, 214, 0.4);
background: rgba(255, 255, 255, 0.05);
color: #DCE9F7;
font-size: 13.5px;
font-weight: 600;
transition: border-color 0.2s, background 0.2s;
}
/* touch target ≥44px without moving the painted box (the chip paints ~38px) */
#aitas-drawer .amn-chip::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -3px;
bottom: -3px;
}
#aitas-drawer .amn-chip:hover {
border-color: #4F9AD0;
background: rgba(79, 154, 208, 0.14);
color: #fff;
}
/* ----------------------------------------------------------------- tray -- */
#aitas-drawer .amn-tray {
margin-top: 16px;
padding: 16px;
border: 1px solid rgba(122, 168, 214, 0.35);
border-radius: 18px;
background:
repeating-linear-gradient(0deg, rgba(122, 168, 214, 0.07) 0 1px, transparent 1px 12px),
rgba(255, 255, 255, 0.03);
}
#aitas-drawer .amn-tray-head {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 2px 12px;
}
#aitas-drawer .amn-cap {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(154, 190, 226, 0.85);
}
#aitas-drawer .amn-seeall {
position: relative;
font-size: 13px;
font-weight: 700;
color: #4F9AD0;
white-space: nowrap;
transition: color 0.15s;
}
/* touch target ≥44px without moving the painted text */
#aitas-drawer .amn-seeall::after {
content: '';
position: absolute;
inset: -13px -6px;
}
#aitas-drawer .amn-seeall:hover { color: #fff; }
#aitas-drawer .amn-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
/* one tile template for all nine: photo zone on top, label pinned to the
* bottom — congruent whatever the photo's aspect ratio */
#aitas-drawer .amn-tile {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 9px;
padding: 14px 13px 12px;
background: rgba(10, 26, 69, 0.55);
border: 1px solid rgba(122, 168, 214, 0.35);
border-radius: 14px;
color: #fff;
font-size: 13.5px;
font-weight: 600;
text-align: left;
line-height: 1.3;
min-height: 152px;
width: 100%;
transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
#aitas-drawer .amn-tile:hover {
border-color: #4F9AD0;
background: rgba(79, 154, 208, 0.16);
transform: translateY(-1px);
color: #fff;
}
#aitas-drawer .amn-tile .amn-ic {
color: #4F9AD0;
height: 24px;
flex: none;
}
#aitas-drawer .amn-tile.amn-wide {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
gap: 10px;
min-height: 0;
padding: 13px 14px;
}
/* -------------------------------------------- products/brands switch tile -- */
/* the wide tile is the mode switch: a fixed cap on the left, an endless stripe
* on the right. Both stripes are always mounted and always animating — the mode
* only crossfades their opacity, so the stripe never restarts (owner, r9). */
#aitas-drawer .amn-tile.amn-switch {
padding: 0 0 0 16px;
gap: 14px;
min-height: 58px;
overflow: hidden;
}
#aitas-drawer .amn-swcap {
display: inline-flex;
align-items: center;
align-self: stretch;
gap: 8px;
flex: none;
padding-right: 14px;
border-right: 1px solid rgba(122, 168, 214, 0.35);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #9ABEE2;
}
#aitas-drawer .amn-swcap svg { color: #4F9AD0; }
#aitas-drawer .amn-swb {
font-weight: 700;
color: #9ABEE2;
}
#aitas-drawer .amn-mq {
flex: 1;
min-width: 0;
align-self: stretch;
display: grid;
align-items: center;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
/* the two tracks are stacked in one grid cell; each holds its content twice so
* the -50% loop is seamless */
#aitas-drawer .amn-mq-track {
grid-area: 1 / 1;
display: flex;
align-items: center;
width: max-content;
animation: amnmq 28s linear infinite;
/* no will-change here on purpose (r11): the running animation already
* promotes the layer, and will-change under the parent's mask-image is the
* known-flaky compositor combo on some real GPUs/drivers */
transition: opacity 0.3s;
}
#aitas-drawer .amn-mq-p { animation-duration: 34s; }
#aitas-drawer .amn-mq-b i {
font-style: normal;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.92);
margin-right: 38px;
white-space: nowrap;
}
/* the width cap tames the extreme-aspect photos (inst.webp is 555×87 and would
* otherwise render 242px wide — wider than the whole visible stripe window) */
#aitas-drawer .amn-mq-p img {
height: 38px;
width: auto;
max-width: 110px;
object-fit: contain;
margin-right: 34px;
filter: drop-shadow(0 6px 10px rgba(0, 6, 24, 0.55));
}
@keyframes amnmq { to { transform: translateX(-50%); } }
/* paused (not stopped) while the drawer is closed — position is preserved, so
* the next open resumes where it left off */
#aitas-drawer.main_menu:not(.show_menu) .amn-mq-track { animation-play-state: paused; }
#aitas-drawer .amn-grid:not(.amn-brands) .amn-mq-p { opacity: 0; }
#aitas-drawer .amn-grid.amn-brands .amn-mq-b { opacity: 0; }
/* ≤991 the cap is icon-only so the stripe gets the width (168→237px @390): the
* label stays in the DOM for the JS mode flip and for the desktop cap (r10) */
@media (max-width: 991px) {
#aitas-drawer .amn-swcap { padding-right: 12px; }
#aitas-drawer .amn-swcap .amn-swb { display: none; }
}
/* the photo zone: background-origin content-box reproduces the mockup's
* max-height 88 / max-width 92% inside a 92px-tall band, and drop-shadow on
* the element follows the alpha contour of the WebP */
#aitas-drawer .amn-ph {
display: block;
width: 100%;
height: 92px;
padding: 2px 4%;
background-origin: content-box;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: drop-shadow(0 10px 14px rgba(0, 6, 24, 0.55));
}
#aitas-drawer .amn-t {
display: flex;
margin-top: auto;
min-height: 35px;
align-items: flex-end;
justify-content: center;
text-align: center;
color: #fff;
}
#aitas-drawer .amn-tile-inst .amn-ph { background-image: url(../img/menu/inst.webp); }
#aitas-drawer .amn-tile-matrix .amn-ph { background-image: url(../img/menu/matrix.webp); }
#aitas-drawer .amn-tile-equip .amn-ph { background-image: url(../img/menu/equip.webp); }
#aitas-drawer .amn-tile-mater .amn-ph { background-image: url(../img/menu/mater.webp); }
#aitas-drawer .amn-tile-hand .amn-ph { background-image: url(../img/menu/hand.webp); }
#aitas-drawer .amn-tile-care .amn-ph { background-image: url(../img/menu/care.webp); }
#aitas-drawer .amn-tile-dez .amn-ph { background-image: url(../img/menu/dez.webp); }
#aitas-drawer .amn-tile-foto .amn-ph { background-image: url(../img/menu/foto.webp); }
/* ------------------------------------------------------------ tile slots -- */
/* every tile cell carries two faces — the category tile (drill opener) and the
* brand tile (archive link) — and the grid's .amn-brands class crossfades them.
* The delay rides its own custom property per longhand, so hover border/background
* stay instant while opacity/transform stagger across the grid. */
#aitas-drawer .amn-slot {
position: relative;
display: flex;
}
#aitas-drawer .amn-slot .amn-tile {
flex: 1;
transition: border-color 0.2s, background 0.2s, transform 0.15s,
opacity 0.28s var(--amn-d, 0s), visibility 0.28s var(--amn-d, 0s);
}
#aitas-drawer .amn-f-brand {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: scale(0.93);
transition: border-color 0.2s, background 0.2s,
opacity 0.28s var(--amn-d, 0s), transform 0.28s var(--amn-d, 0s),
visibility 0.28s var(--amn-d, 0s);
}
#aitas-drawer .amn-f-brand:hover { transform: none; }
#aitas-drawer .amn-grid.amn-brands .amn-f-cat {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: scale(0.96);
}
#aitas-drawer .amn-grid.amn-brands .amn-f-brand {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
}
#aitas-drawer .amn-grid .amn-slot:nth-child(2) { --amn-d: 0.02s; }
#aitas-drawer .amn-grid .amn-slot:nth-child(3) { --amn-d: 0.05s; }
#aitas-drawer .amn-grid .amn-slot:nth-child(4) { --amn-d: 0.08s; }
#aitas-drawer .amn-grid .amn-slot:nth-child(5) { --amn-d: 0.11s; }
#aitas-drawer .amn-grid .amn-slot:nth-child(6) { --amn-d: 0.14s; }
#aitas-drawer .amn-grid .amn-slot:nth-child(7) { --amn-d: 0.17s; }
#aitas-drawer .amn-grid .amn-slot:nth-child(8) { --amn-d: 0.2s; }
#aitas-drawer .amn-grid .amn-slot:nth-child(9) { --amn-d: 0.23s; }
/* the brand logo is a real ![]()
(one per slot, alpha WebP), reversed-on-dark
* since r11: every logo is recoloured for navy legibility (≥4.0:1 on #000D2E),
* so the r10 white chip is retired and the logo fills the photo zone like a
* product photo — the base .amn-ph drop-shadow now follows its silhouette */
#aitas-drawer .amn-f-brand .amn-ph {
display: flex;
align-items: center;
justify-content: center;
}
#aitas-drawer .amn-f-brand .amn-ph img {
max-height: 100%;
max-width: 100%;
width: auto;
object-fit: contain;
}
#aitas-drawer .amn-f-brand .amn-t {
font-size: 15px;
font-weight: 700;
}
/* ----------------------------------------------------------------- cols -- */
#aitas-drawer .amn-cols {
columns: 2;
gap: 20px;
margin: 20px 2px 0;
}
#aitas-drawer .amn-cols a {
display: block;
padding: 7px 0;
font-size: 14px;
font-weight: 500;
color: #9DB4D6;
break-inside: avoid;
transition: color 0.15s;
}
#aitas-drawer .amn-cols a:hover { color: #fff; }
/* ------------------------------------------------------------- callrow -- */
#aitas-drawer .amn-callrow {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
padding: 18px 16px 16px;
border-radius: 14px;
background: rgba(79, 154, 208, 0.14);
border: 1px solid rgba(79, 154, 208, 0.5);
}
#aitas-drawer .amn-ct { color: #9DB4D6; }
#aitas-drawer .amn-tel1 {
display: block;
color: #fff;
font-size: 17px;
font-weight: 800;
}
#aitas-drawer .amn-ct span {
font-size: 12px;
color: #9DB4D6;
}
#aitas-drawer .amn-tel2 { color: #9DB4D6; }
#aitas-drawer .amn-tel1:hover,
#aitas-drawer .amn-tel2:hover { color: #fff; }
#aitas-drawer .amn-cb {
position: relative;
margin-top: 8px;
height: 42px;
padding: 0 18px;
border: none;
border-radius: 10px;
background: #4F9AD0;
color: #fff;
font-size: 13.5px;
font-weight: 700;
box-shadow: 0 8px 20px rgba(47, 127, 209, 0.4);
transition: filter 0.15s;
white-space: nowrap;
flex: none;
}
#aitas-drawer .amn-cb::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -1px;
bottom: -1px;
}
#aitas-drawer .amn-cb:hover { filter: brightness(1.08); }
/* -------------------------------------------------------------- socials -- */
#aitas-drawer .amn-soc {
display: flex;
gap: 10px;
margin-top: 18px;
justify-content: center;
flex-wrap: wrap;
}
#aitas-drawer .amn-soc a {
position: relative;
width: 40px;
height: 40px;
border: 1px solid rgba(122, 168, 214, 0.4);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #9DB4D6;
transition: border-color 0.2s, color 0.2s;
}
#aitas-drawer .amn-soc a::after {
content: '';
position: absolute;
inset: -2px;
}
#aitas-drawer .amn-soc a:hover {
border-color: #4F9AD0;
color: #fff;
}
/* ------------------------------------------------------ entrance stagger -- */
#aitas-drawer.main_menu.show_menu .amn-anim { animation: amn130-in 0.5s ease backwards; }
#aitas-drawer.main_menu.show_menu .amn-grid > :nth-child(1) { animation-delay: 0.02s; }
#aitas-drawer.main_menu.show_menu .amn-grid > :nth-child(2) { animation-delay: 0.06s; }
#aitas-drawer.main_menu.show_menu .amn-grid > :nth-child(3) { animation-delay: 0.1s; }
#aitas-drawer.main_menu.show_menu .amn-grid > :nth-child(4) { animation-delay: 0.14s; }
#aitas-drawer.main_menu.show_menu .amn-grid > :nth-child(5) { animation-delay: 0.18s; }
#aitas-drawer.main_menu.show_menu .amn-grid > :nth-child(6) { animation-delay: 0.22s; }
#aitas-drawer.main_menu.show_menu .amn-grid > :nth-child(7) { animation-delay: 0.26s; }
#aitas-drawer.main_menu.show_menu .amn-grid > :nth-child(8) { animation-delay: 0.3s; }
#aitas-drawer.main_menu.show_menu .amn-grid > :nth-child(9) { animation-delay: 0.34s; }
#aitas-drawer.main_menu.show_menu .amn-chips.amn-anim { animation-delay: 0.38s; }
#aitas-drawer.main_menu.show_menu .amn-cols.amn-anim { animation-delay: 0.42s; }
#aitas-drawer.main_menu.show_menu .amn-callrow.amn-anim { animation-delay: 0.46s; }
#aitas-drawer.main_menu.show_menu .amn-soc.amn-anim { animation-delay: 0.5s; }
#aitas-drawer.main_menu.amn-noanim .amn-anim { animation: none !important; }
/* ---------------------------------------------------------------- drill -- */
/* absolute, not fixed: the drill lives INSIDE the drawer now (the drawer is the
* only node we own), and the drawer is position:fixed, so inset:0 lands on the
* drawer's own box exactly as the mockup's viewport-fixed sheet did.
* r10: it no longer slides — it pops in place (opacity only, both breakpoints),
* and the cards inside carry the motion. The delayed visibility flip keeps the
* closed drill out of the tab order without cutting the fade-out short. */
#aitas-drawer .amn-drill {
position: absolute;
inset: 0;
z-index: 60;
background: #0A1A45;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transition: opacity 0.22s ease,
visibility 0s linear 0.22s;
}
#aitas-drawer .amn-drill.amn-open {
opacity: 1;
visibility: visible;
transition: opacity 0.22s ease,
visibility 0s;
}
#aitas-drawer .amn-dh {
display: flex;
align-items: center;
gap: 8px;
padding: 16px 16px;
border-bottom: 1px solid rgba(122, 168, 214, 0.3);
flex: none;
}
/* r11: the back control is a pill, so it reads as a control on desktop too (the
* flat text label was invisible as an affordance). The border has to be spelled
* out — the :where(button) reset above strips it — and single-class rules still
* beat that reset because :where() keeps its element part at zero. */
#aitas-drawer .amn-back {
position: relative;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(157, 180, 214, 0.4);
border-radius: 999px;
display: flex;
align-items: center;
gap: 5px;
color: #DCE8F8;
font-size: 14.5px;
font-weight: 700;
padding: 9px 16px 9px 11px;
transition: color 0.15s, background 0.15s, border-color 0.15s;
flex: none;
}
#aitas-drawer .amn-back::after {
content: '';
position: absolute;
inset: -8px -6px;
}
#aitas-drawer .amn-back:hover {
color: #fff;
background: rgba(255, 255, 255, 0.12);
border-color: rgba(157, 180, 214, 0.6);
}
#aitas-drawer .amn-dtitle {
font-size: 17px;
font-weight: 800;
color: #fff;
flex: 1;
min-width: 0;
}
#aitas-drawer .amn-dx {
position: relative;
width: 38px;
height: 38px;
border: none;
background: rgba(255, 255, 255, 0.08);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex: none;
}
#aitas-drawer .amn-dx::after {
content: '';
position: absolute;
inset: -3px;
}
#aitas-drawer .amn-dbody {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 14px 22px 30px;
scrollbar-width: thin;
scrollbar-color: #4F9AD0 rgba(255, 255, 255, 0.08);
}
#aitas-drawer .amn-pane { display: none; }
#aitas-drawer .amn-pane.amn-on { display: block; }
#aitas-drawer .amn-all {
position: relative;
display: inline-block;
font-size: 14.5px;
font-weight: 700;
color: #4F9AD0;
margin: 4px 0 10px;
}
#aitas-drawer .amn-all::after {
content: '';
position: absolute;
inset: -10px -6px;
}
#aitas-drawer .amn-all:hover { color: #fff; }
/* ------------------------------------------------------- drill sub-cards -- */
/* r10: a pane lists the section's main subcategories as cards on the tray's own
* tile template — straight archive links, no group headings and no deeper
* levels. The pane swap is display:none→block, so the stagger below replays on
* every drill open without any JS help. */
#aitas-drawer .amn-dgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#aitas-drawer .amn-pane.amn-on .amn-dcard { animation: amn130-in 0.4s ease backwards; }
#aitas-drawer .amn-pane.amn-on .amn-dcard:nth-child(1 ) { animation-delay: .03s; }
#aitas-drawer .amn-pane.amn-on .amn-dcard:nth-child(2 ) { animation-delay: .07s; }
#aitas-drawer .amn-pane.amn-on .amn-dcard:nth-child(3 ) { animation-delay: .11s; }
#aitas-drawer .amn-pane.amn-on .amn-dcard:nth-child(4 ) { animation-delay: .15s; }
#aitas-drawer .amn-pane.amn-on .amn-dcard:nth-child(5 ) { animation-delay: .19s; }
#aitas-drawer .amn-pane.amn-on .amn-dcard:nth-child(6 ) { animation-delay: .23s; }
#aitas-drawer .amn-pane.amn-on .amn-dcard:nth-child(7 ) { animation-delay: .27s; }
#aitas-drawer .amn-pane.amn-on .amn-dcard:nth-child(8 ) { animation-delay: .31s; }
#aitas-drawer .amn-pane.amn-on .amn-dcard:nth-child(9 ) { animation-delay: .35s; }
#aitas-drawer .amn-pane.amn-on .amn-dcard:nth-child(10) { animation-delay: .39s; }
#aitas-drawer .amn-pane.amn-on .amn-dcard:nth-child(11) { animation-delay: .43s; }
#aitas-drawer .amn-pane.amn-on .amn-dcard:nth-child(12) { animation-delay: .47s; }
/* card thumbnails, keyed by the term slug — the slugs are identical on stage and
* prod, so the prod port needs no remap. 50 rules: «Насадки» (nasadky) renders
* on prod only (empty on stage), its rule and asset ship now anyway. */
/* 620 Стоматологічні інструменти */
#aitas-drawer .amn-sub-dodatkovi-instrumenti-ta-aksesuari .amn-ph { background-image: url(../img/menu/sub/dodatkovi-instrumenti-ta-aksesuari.webp); }
#aitas-drawer .amn-sub-diagnostika .amn-ph { background-image: url(../img/menu/sub/diagnostika.webp?r11); }
#aitas-drawer .amn-sub-endodontiya .amn-ph { background-image: url(../img/menu/sub/endodontiya.webp?r11); }
#aitas-drawer .amn-sub-implantologiya .amn-ph { background-image: url(../img/menu/sub/implantologiya.webp?r11); }
#aitas-drawer .amn-sub-ortodontiya .amn-ph { background-image: url(../img/menu/sub/ortodontiya.webp); }
#aitas-drawer .amn-sub-parodontologiya .amn-ph { background-image: url(../img/menu/sub/parodontologiya.webp); }
#aitas-drawer .amn-sub-terapiya .amn-ph { background-image: url(../img/menu/sub/terapiya.webp); }
#aitas-drawer .amn-sub-hirurgiya .amn-ph { background-image: url(../img/menu/sub/hirurgiya.webp?r11); }
/* 289 Стоматологічні матричні системи */
#aitas-drawer .amn-sub-kilcja .amn-ph { background-image: url(../img/menu/sub/kilcja.webp); }
#aitas-drawer .amn-sub-klynky .amn-ph { background-image: url(../img/menu/sub/klynky.webp); }
#aitas-drawer .amn-sub-matryci .amn-ph { background-image: url(../img/menu/sub/matryci.webp); }
#aitas-drawer .amn-sub-instrumenty .amn-ph { background-image: url(../img/menu/sub/instrumenty.webp); }
#aitas-drawer .amn-sub-nabory .amn-ph { background-image: url(../img/menu/sub/nabory.webp); }
/* 2122 Стоматологічне обладнання */
#aitas-drawer .amn-sub-rentgenivske-obladnannya .amn-ph { background-image: url(../img/menu/sub/rentgenivske-obladnannya.webp); }
#aitas-drawer .amn-sub-stomatologichni-ustanovky .amn-ph { background-image: url(../img/menu/sub/stomatologichni-ustanovky.webp); }
/* 291 Стоматологічні матеріали */
#aitas-drawer .amn-sub-aksesuary-inspiro .amn-ph { background-image: url(../img/menu/sub/aksesuary-inspiro.webp); }
#aitas-drawer .amn-sub-dodatkovi-shprici-inspiro .amn-ph { background-image: url(../img/menu/sub/dodatkovi-shprici-inspiro.webp); }
#aitas-drawer .amn-sub-nabory-inspiro .amn-ph { background-image: url(../img/menu/sub/nabory-inspiro.webp?r11); }
/* 3532 Наконечники */
#aitas-drawer .amn-sub-endomotor .amn-ph { background-image: url(../img/menu/sub/endomotor.webp); }
#aitas-drawer .amn-sub-zvukovi-skelery .amn-ph { background-image: url(../img/menu/sub/zvukovi-skelery.webp); }
#aitas-drawer .amn-sub-irygatory .amn-ph { background-image: url(../img/menu/sub/irygatory.webp); }
#aitas-drawer .amn-sub-kutovij .amn-ph { background-image: url(../img/menu/sub/kutovij.webp); }
#aitas-drawer .amn-sub-mikromotor .amn-ph { background-image: url(../img/menu/sub/mikromotor.webp); }
#aitas-drawer .amn-sub-multifleks .amn-ph { background-image: url(../img/menu/sub/multifleks.webp); }
#aitas-drawer .amn-sub-nasadky-do-skelera .amn-ph { background-image: url(../img/menu/sub/nasadky-do-skelera.webp); }
#aitas-drawer .amn-sub-pryamij .amn-ph { background-image: url(../img/menu/sub/pryamij.webp); }
#aitas-drawer .amn-sub-sodostrumenevi-nakonechnyky .amn-ph { background-image: url(../img/menu/sub/sodostrumenevi-nakonechnyky.webp); }
#aitas-drawer .amn-sub-turbinnij .amn-ph { background-image: url(../img/menu/sub/turbinnij.webp); }
/* 16 Засоби догляду за ротовою порожниною */
#aitas-drawer .amn-sub-aksesuari .amn-ph { background-image: url(../img/menu/sub/aksesuari.webp); }
#aitas-drawer .amn-sub-vidbilennya .amn-ph { background-image: url(../img/menu/sub/vidbilennya.webp); }
#aitas-drawer .amn-sub-geli .amn-ph { background-image: url(../img/menu/sub/geli.webp); }
#aitas-drawer .amn-sub-zhuvalni-gumki .amn-ph { background-image: url(../img/menu/sub/zhuvalni-gumki.webp); }
#aitas-drawer .amn-sub-zubni-pasti .amn-ph { background-image: url(../img/menu/sub/zubni-pasti.webp); }
#aitas-drawer .amn-sub-zubni-shhitki-ua .amn-ph { background-image: url(../img/menu/sub/zubni-shhitki-ua.webp?r11); }
#aitas-drawer .amn-sub-mizhzubnyj-dogljad .amn-ph { background-image: url(../img/menu/sub/mizhzubnyj-dogljad.webp); }
#aitas-drawer .amn-sub-opoliskuvachi .amn-ph { background-image: url(../img/menu/sub/opoliskuvachi.webp); }
/* 2920 Дезінфікуючі засоби */
#aitas-drawer .amn-sub-dezinfekcziya-aspiraczijnyh-system .amn-ph { background-image: url(../img/menu/sub/dezinfekcziya-aspiraczijnyh-system.webp); }
#aitas-drawer .amn-sub-dezinfikuyuchi-servetky .amn-ph { background-image: url(../img/menu/sub/dezinfikuyuchi-servetky.webp); }
#aitas-drawer .amn-sub-dispenseri-dezinfekcziya .amn-ph { background-image: url(../img/menu/sub/dispenseri-dezinfekcziya.webp); }
#aitas-drawer .amn-sub-zasobi-dezinfekcziyi-dlya-shkiri-ruk-ta-tila .amn-ph { background-image: url(../img/menu/sub/zasobi-dezinfekcziyi-dlya-shkiri-ruk-ta-tila.webp); }
#aitas-drawer .amn-sub-zasobi-dlya-dezinfekcziyi-poverhni-dezinfekcziya .amn-ph { background-image: url(../img/menu/sub/zasobi-dlya-dezinfekcziyi-poverhni-dezinfekcziya.webp); }
#aitas-drawer .amn-sub-zasobi-dlya-dezinfekcziyi-instrumentiv-ta-priladdya .amn-ph { background-image: url(../img/menu/sub/zasobi-dlya-dezinfekcziyi-instrumentiv-ta-priladdya.webp); }
#aitas-drawer .amn-sub-zasoby-dlya-prybyrannya-prymishhen .amn-ph { background-image: url(../img/menu/sub/zasoby-dlya-prybyrannya-prymishhen.webp); }
#aitas-drawer .amn-sub-zasobi-ekspres-dezinfekcziyi .amn-ph { background-image: url(../img/menu/sub/zasobi-ekspres-dezinfekcziyi.webp); }
#aitas-drawer .amn-sub-konczentrati .amn-ph { background-image: url(../img/menu/sub/konczentrati.webp); }
#aitas-drawer .amn-sub-kremi-dlya-rik-ta-tila .amn-ph { background-image: url(../img/menu/sub/kremi-dlya-rik-ta-tila.webp); }
#aitas-drawer .amn-sub-hlorovmisni-zasobi-dlya-dezinfekcziyi .amn-ph { background-image: url(../img/menu/sub/hlorovmisni-zasobi-dlya-dezinfekcziyi.webp); }
/* 5342 Фотоактивована дезінфекція */
#aitas-drawer .amn-sub-apparaty .amn-ph { background-image: url(../img/menu/sub/apparaty.webp); }
#aitas-drawer .amn-sub-nasadky .amn-ph { background-image: url(../img/menu/sub/nasadky.webp); }
#aitas-drawer .amn-sub-fotosensybilizatory .amn-ph { background-image: url(../img/menu/sub/fotosensybilizatory.webp); }
#aitas-drawer .amn-g { margin-top: 16px; }
#aitas-drawer .amn-gt {
display: block;
font-size: 15px;
font-weight: 800;
color: #fff;
margin-bottom: 6px;
}
#aitas-drawer .amn-g a,
#aitas-drawer .amn-lnk {
display: block;
padding: 7px 0;
font-size: 14.5px;
font-weight: 500;
color: #C9D9EE;
}
#aitas-drawer .amn-g a:hover,
#aitas-drawer .amn-lnk:hover { color: #fff; }
/* -------------------------------------------------- floating back pill -- */
/* ≤991 the drill is a fullscreen sheet and its header row sits out of thumb
* reach, so the drill's second .amn-back renders as a pill pinned to the bottom.
* It is a child of .amn-drill (the position:absolute container), never of the
* scroller, so it stays put while .amn-dbody scrolls under it. */
@media (max-width: 991px) {
#aitas-drawer .amn-back-b {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: calc(18px + env(safe-area-inset-bottom, 0px));
z-index: 5;
background: rgba(2, 20, 60, 0.78);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-color: rgba(157, 180, 214, 0.5);
color: #fff;
font-size: 15px;
padding: 12px 22px 12px 16px;
box-shadow: 0 10px 24px rgba(0, 6, 24, 0.5);
}
/* the last cards must clear the pill */
#aitas-drawer .amn-dbody { padding-bottom: 88px; }
}
/* ---------------------------------------------------- desktop side panel -- */
@media (min-width: 992px) {
#aitas-drawer.main_menu {
width: 640px;
box-shadow: 24px 0 80px rgba(0, 13, 46, 0.5);
}
#aitas-drawer .amn-top { padding: 16px 28px 8px; }
#aitas-drawer .amn-body { padding: 4px 28px 36px; }
#aitas-drawer .amn-big { font-size: 31px; margin-bottom: -3px; }
#aitas-drawer .amn-tray { margin-top: 18px; padding: 18px; }
#aitas-drawer .amn-tile {
font-size: 14px;
min-height: 160px;
padding: 16px 15px 13px;
gap: 10px;
}
#aitas-drawer .amn-ph { height: 96px; }
#aitas-drawer .amn-t { min-height: 37px; }
#aitas-drawer .amn-cols { max-width: none; }
#aitas-drawer .amn-cols a { font-size: 14.5px; }
#aitas-drawer .amn-dbody { padding: 14px 28px 30px; }
/* the header row is within easy reach here — the floating pill is mobile-only */
#aitas-drawer .amn-back-b { display: none; }
/* the drawer's own backdrop: the existing .blur_bg element, restyled from
* the bundle's white blur to the mockup's navy scrim (0,2,0 out-ranks the
* bundle's 0,1,0 `.blur`; this sheet also loads after crypt-css).
* Below 992 the fullscreen drawer covers it — left untouched there. */
.blur_bg.blur {
background-color: rgba(0, 13, 46, 0.45);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
}
/* ------------------------------------------------- mobile browser chrome -- */
/* <992 the drawer is fullscreen, so iOS Safari's translucent toolbar samples the
* white page UNDER it and paints a white bar at the bottom of a navy sheet.
* Painting html/body navy while the drawer is open removes what it samples.
* js/aitas-menu.js sets .amn-open from the same class watch every close runs
* through. ≥992 must keep the light page behind the 640px panel — hence the cap. */
@media (max-width: 991px) {
html.amn-open,
html.amn-open body { background: #000D2E; }
}
/* --------------------------------------------------------- reduced motion -- */
/* crypt.css:3331 already kills transition/animation on .main_menu itself —
* this covers everything inside it. */
@media (prefers-reduced-motion: reduce) {
#aitas-drawer .amn-root,
#aitas-drawer .amn-root *,
#aitas-drawer .amn-drill,
#aitas-drawer .amn-drill * {
transition-duration: 0.01ms !important;
animation: none !important;
}
}
/* ≥992: veil over the header stripe while the drawer is open — the page backdrop
(.blur_bg, z10 at root) sits below the sticky header's own stacking context
(z990) and cannot dim the stripe; without this the top-right of the page stays
full-brightness against the mockup's uniformly dimmed backdrop (r8 fix). */
@media (min-width: 992px) {
.site-header::after {
content: '';
position: absolute;
inset: 0;
z-index: 50; /* above the stripe (20), below the drawer (100) */
background: rgba(0, 13, 46, 0.45);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s, visibility 0.3s;
}
.site-header.hide_site-header::after {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
/* ------------------------------------------------------- history steps -- */
/* v1.4.1 marker. Min copies strip comments, so the version rides a functional
custom property, exactly like --aitas-menu-v above. */
:root { --amn-steps-v: 141; }
/* One-shot transition kill for the closes and opens js/aitas-menu.js renders
from popstate: WebKit tears its swipe snapshot at commit and only then fires
popstate, so anything that animates afterwards reads as a second transition.
TRANSITIONS only — killing animations cancels finished one-shot keyframes and
replays them when the class lifts (r14d) — and the marquee track is carved
out so the endless stripe never restarts. The class lives on for one
synchronous reflow at a time; it is never present between two frames. */
html.amn-cut #aitas-drawer,
html.amn-cut #aitas-drawer *:not(.amn-mq-track),
html.amn-cut .site-header,
html.amn-cut .site-header *,
html.amn-cut .site-header::after,
html.amn-cut .blur_bg,
html.amn-cut #aitas-cart-drawer,
html.amn-cut .aitas-cart-overlay,
html.amn-cut .aac-pop,
html.amn-cut .aac-pop-ov {
transition: none !important;
}
/* A tapped subcategory card leaves the drawer open while the archive loads, so
the tile itself is the only feedback the visitor gets until the new page
paints. Deliberately subtle — it must read as "pressed", not as a new state. */
#aitas-drawer .amn-dcard.amn-pressed,
#aitas-drawer .amn-all.amn-pressed {
transform: scale(0.97);
filter: brightness(0.82);
transition: transform 0.12s ease, filter 0.12s ease;
}
/* ------------------------------------------------------------- v1.4.1 ---- */
/* The cols links are block boxes spanning the whole column (154px @390 for a
~70px label): the invisible remainder reads as ghost tapboxes in the empty
dark space beside the labels once the body is scrolled to them (owner find,
battery v14). The box shrinks to its label; the 7px row padding stays. */
#aitas-drawer .amn-cols a { width: fit-content; }
/* The mobile filter sheet is position:fixed at z1200 in the ROOT stacking
context; the drawer lives inside the header's z990 one, so the open sheet
painted over the open drawer and its stripe (owner, battery v14 item 10).
While the drawer is open the header context outbids the sheet — the cart and
login modals (z100000+) stay above either way. */
html.amn-open .site-header { z-index: 1201; }