/* Package A final polish — Screen 2 catalog wide-viewport shell alignment. The PWA catalog page renders the public-web container class `masters-app-catalog` on (via pwa_page_start body classes). That class is meant for the centred `.container` div on public /masters.php and sets `width: min(980px, 100% - 28px)`, which on the PWA collapses to a 980px LEFT-aligned band. The fixed bottom nav still centres on the full viewport, so on wide screens the content column and nav detach (content hugs the left, big empty band on the right). Every other PWA client route keeps a clean body and centres correctly; only catalog carries the stray container class. Reset the PWA catalog body to full width so its shell and bottom nav share one centred app column, matching the accepted services page behaviour. Route-scoped to the PWA catalog body; public /masters.php (no page-pwa-client) is unaffected. Specificity (0,3,1) outranks the plain `.masters-app-catalog` (0,1,0) at all breakpoints — no !important needed. */ body.page-pwa-client.page-pwa-catalog.masters-app-catalog { width: 100%; max-width: 100%; margin-right: auto; margin-left: auto; } /* Package A final polish — Screen 2 catalog desktop card (>=768px). Two genuine desktop defects surfaced once the body was un-capped above: (1) the master grid used fixed 2-/3-column tracks, so with a sparse result set a lone card sat in the left cell with a dead empty column — the "tiny card column with blank space" the brief forbids; and (2) at >=1025px the PWA-catalog card lost its single-column overrides (they stopped at max-width:1024px), exposing the base 2-column card grid whose children are explicitly placed in column 2 — this crushed `.master-card-main` into a ~120px track and collapsed the photo/initials tile to ~2px (verified in-browser). Fix, scoped to the PWA catalog grid on desktop only: make the grid auto-fit and centre it so empty tracks collapse (a lone card centres, two+ masters still form a multi-column row); and lay the card out as a simple centred flex column so its parts stack full-width and `.master-card-main` keeps the approved horizontal tile+details composition at every desktop width — the same layout the <=1024px range already renders. `transform: none` neutralises the older translateY nudges that assumed the broken column placement. Selector specificity (0,7,1)/(0,8,1) outranks the existing catalog rules; no !important. Route-scoped to body.page-pwa-catalog; the public /masters.php grid (no page-pwa-client) is untouched. */ @media (min-width: 768px) { body.page-beauty.page-pwa-client.page-pwa-catalog.page-masters .page-platform-shell.masters-app-catalog .masters-grid-product { grid-template-columns: repeat(auto-fit, minmax(calc(var(--redesign-space-18) * 4), calc(var(--redesign-space-18) * 5))); justify-content: center; } body.page-beauty.page-pwa-client.page-pwa-catalog.page-masters .page-platform-shell.masters-app-catalog .master-product-card { display: flex; flex-direction: column; } body.page-beauty.page-pwa-client.page-pwa-catalog.page-masters .page-platform-shell.masters-app-catalog .master-card-main { display: grid; grid-template-columns: calc(var(--redesign-space-18) + var(--redesign-space-8)) minmax(0, 1fr); } body.page-beauty.page-pwa-client.page-pwa-catalog.page-masters .page-platform-shell.masters-app-catalog .master-product-card > .hero-actions { transform: none; } } /* ========================================================================== Approved client master profile — Screen 4 "Профиль мастера" Source of truth: approved-client Дизайн 1-18 p.35 (image4.jpeg). Route: /pwa/master.php reference variant (body hook .page-master-profile-s4; the public web /master.php keeps .page-master and is untouched). One warm-ivory canvas, sage-green accent, serif display: photo hero + name/fact rows with a watercolor botanical branch (approved-botanical-branch.png), a beige quote card, the «Услуги» header + service cards, then the restored portfolio/contact/follow modules restyled as a quiet lower tier. Selectors carry the .page-pwa-client.page-master-profile-s4 ancestor to outrank the generic shell/ nav rules without !important. CSS-only, additive at EOF. ========================================================================== */ .page-pwa-client.page-master-profile-s4 { --s4-ivory: #F5F3EC; --s4-beige: #ECE7DB; --s4-card: #FFFFFF; --s4-nav: #FCFBF6; --s4-photo-tile: #E7E4D8; --s4-ink: #2C2C27; --s4-body: #4C4C44; --s4-muted: #8A8A7C; --s4-sage: #6E8A5A; --s4-sage-deep: #5C7A48; --s4-badge: #E8EBDC; --s4-ring: rgba(110, 138, 90, 0.42); --s4-line: rgba(66, 62, 44, 0.14); background: var(--s4-ivory); color: var(--s4-ink); font-family: var(--redesign-font-ui); } .page-pwa-client.page-master-profile-s4 .pwa-shell { width: min(100%, 390px); margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 20px calc(120px + env(safe-area-inset-bottom)); background: transparent; } /* Top row: back circle + bare outline heart. */ .page-pwa-client.page-master-profile-s4 .s4-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 6px; } .page-pwa-client.page-master-profile-s4 .s4-back { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--s4-line); border-radius: 999px; background: var(--s4-nav); color: var(--s4-sage); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); text-decoration: none; } .page-pwa-client.page-master-profile-s4 .s4-back svg { width: 22px; height: 22px; } .page-pwa-client.page-master-profile-s4 .s4-heart-form { display: inline-flex; margin: 0; } .page-pwa-client.page-master-profile-s4 .s4-heart { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #90907F; text-decoration: none; cursor: pointer; } .page-pwa-client.page-master-profile-s4 .s4-heart.is-active { color: var(--s4-sage); } .page-pwa-client.page-master-profile-s4 .s4-heart.is-disabled { cursor: default; opacity: 0.5; } .page-pwa-client.page-master-profile-s4 .s4-heart-glyph { width: 26px; height: 26px; } /* Hero: photo left + name/fact rows right; watercolor branch behind, top-right. */ .page-pwa-client.page-master-profile-s4 .s4-hero { position: relative; display: grid; grid-template-columns: 164px minmax(0, 1fr); gap: 16px; align-items: center; padding: 6px 0 2px; overflow: hidden; } .page-pwa-client.page-master-profile-s4 .s4-hero-photo { width: 164px; height: 184px; overflow: hidden; border-radius: 24px; background: var(--s4-photo-tile); } .page-pwa-client.page-master-profile-s4 .s4-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .page-pwa-client.page-master-profile-s4 .s4-hero-photo--empty { display: grid; place-items: center; color: #B0AD9C; } .page-pwa-client.page-master-profile-s4 .s4-hero-photo-glyph svg { width: 56px; height: auto; } .page-pwa-client.page-master-profile-s4 .s4-hero-main { position: relative; z-index: 1; min-width: 0; } .page-pwa-client.page-master-profile-s4 .s4-name { margin: 0 0 14px; font-family: var(--redesign-font-display); font-weight: 600; font-size: 34px; line-height: 1.02; letter-spacing: -0.01em; color: var(--s4-ink); } .page-pwa-client.page-master-profile-s4 .s4-facts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .page-pwa-client.page-master-profile-s4 .s4-fact { display: flex; align-items: center; gap: 10px; min-width: 0; } .page-pwa-client.page-master-profile-s4 .s4-fact-ic { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border: 1px solid var(--s4-ring); border-radius: 999px; color: var(--s4-sage); } .page-pwa-client.page-master-profile-s4 .s4-fact-ic svg { width: 16px; height: 16px; } .page-pwa-client.page-master-profile-s4 .s4-fact-text { min-width: 0; font-size: 15px; line-height: 1.2; color: var(--s4-ink); } .page-pwa-client.page-master-profile-s4 .s4-fact-star { display: inline-flex; color: var(--s4-sage-deep); } .page-pwa-client.page-master-profile-s4 .s4-fact-star svg { width: 14px; height: 14px; } .page-pwa-client.page-master-profile-s4 :is(.s4-hero, .s4-quote) > .s4-decor-picture { display: contents; } .page-pwa-client.page-master-profile-s4 .s4-hero-decor { position: absolute; top: -30px; right: -34px; z-index: 0; width: 150px; height: auto; opacity: 0.85; pointer-events: none; user-select: none; } /* Quote card: beige tint, large serif green quote mark, botanical bottom-right. */ .page-pwa-client.page-master-profile-s4 .s4-quote { position: relative; margin-top: 20px; padding: 18px 20px 20px; overflow: hidden; border-radius: 20px; background: var(--s4-beige); } .page-pwa-client.page-master-profile-s4 .s4-quote-mark { display: block; height: 24px; font-family: var(--redesign-font-display); font-size: 46px; font-weight: 600; line-height: 1; color: var(--s4-sage); } .page-pwa-client.page-master-profile-s4 .s4-quote-body { position: relative; z-index: 1; max-width: 42ch; margin: 6px 0 0; font-size: 15px; line-height: 24px; color: var(--s4-body); } .page-pwa-client.page-master-profile-s4 .s4-quote-decor { position: absolute; right: -30px; bottom: -40px; z-index: 0; width: 150px; height: auto; opacity: 0.6; pointer-events: none; user-select: none; transform: rotate(58deg); } /* Services header row: serif «Услуги» + leaf, restored Список/Плитка + Все услуги. */ .page-pwa-client.page-master-profile-s4 .s4-services { margin-top: 28px; } .page-pwa-client.page-master-profile-s4 .s4-services-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 0 0 14px; } .page-pwa-client.page-master-profile-s4 .s4-services-title { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--redesign-font-display); font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; color: var(--s4-ink); } .page-pwa-client.page-master-profile-s4 .s4-services-leaf { display: inline-flex; color: var(--s4-sage); opacity: 0.7; } .page-pwa-client.page-master-profile-s4 .s4-services-leaf svg { width: 38px; height: 22px; } .page-pwa-client.page-master-profile-s4 .s4-services-controls { display: flex; align-items: center; gap: 10px; padding-bottom: 3px; } .page-pwa-client.page-master-profile-s4 .s4-view-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--s4-line); border-radius: 999px; background: var(--s4-nav); } .page-pwa-client.page-master-profile-s4 .s4-view-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--s4-muted); font: inherit; font-size: 12px; font-weight: 500; line-height: 1; cursor: pointer; } .page-pwa-client.page-master-profile-s4 .s4-view-btn svg { width: 15px; height: 15px; } .page-pwa-client.page-master-profile-s4 .s4-view-btn span { display: none; } .page-pwa-client.page-master-profile-s4 .s4-view-btn.is-active { background: var(--s4-badge); color: var(--s4-sage-deep); } .page-pwa-client.page-master-profile-s4 .s4-all-services { color: var(--s4-sage-deep); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; } .page-pwa-client.page-master-profile-s4 .s4-all-services:hover { text-decoration: underline; } .page-pwa-client.page-master-profile-s4 .s4-services-empty { margin: 0; font-size: 15px; color: var(--s4-muted); } /* Service list with Список/Плитка modes (JS toggles is-view-list / is-view-grid). Плитка = 2x2 reference tiles; Список = full-width horizontal rows. */ .page-pwa-client.page-master-profile-s4 .s4-service-list { display: grid; gap: 10px; } .page-pwa-client.page-master-profile-s4 .s4-service-list.is-view-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-pwa-client.page-master-profile-s4 .s4-service-list:not(.is-view-grid) { grid-template-columns: 1fr; } .page-pwa-client.page-master-profile-s4 .s4-service { display: grid; align-items: center; border: 1px solid var(--s4-line); border-radius: 18px; background: var(--s4-card); color: var(--s4-ink); text-decoration: none; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03); } .page-pwa-client.page-master-profile-s4 .s4-service-list:not(.is-view-grid) .s4-service { grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-areas: "badge copy arrow"; column-gap: 14px; min-height: 88px; padding: 12px 14px; } .page-pwa-client.page-master-profile-s4 .s4-service-list.is-view-grid .s4-service { grid-template-columns: auto 1fr auto; grid-template-areas: "badge . arrow" "copy copy copy"; row-gap: 8px; column-gap: 8px; min-height: 92px; padding: 12px; } .page-pwa-client.page-master-profile-s4 .s4-service:focus-visible { outline: 2px solid var(--s4-sage); outline-offset: 2px; } .page-pwa-client.page-master-profile-s4 .s4-service-badge { position: relative; display: grid; grid-area: badge; width: 56px; height: 56px; place-items: center; border-radius: 999px; background: var(--s4-badge); color: var(--s4-sage); } .page-pwa-client.page-master-profile-s4 .s4-service-list:not(.is-view-grid) .s4-service-badge { width: 60px; height: 60px; } .page-pwa-client.page-master-profile-s4 .s4-service-list.is-view-grid .s4-service-badge { align-self: start; width: 52px; height: 52px; } .page-pwa-client.page-master-profile-s4 .s4-service-badge::before, .page-pwa-client.page-master-profile-s4 .s4-service-badge::after { position: absolute; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%236E8A5A'%3E%3Cpath d='M6 0c.5 2.7 2.3 4.5 5 5-2.7.5-4.5 2.3-5 5-.5-2.7-2.3-4.5-5-5 2.7-.5 4.5-2.3 5-5Z'/%3E%3C/svg%3E") center / contain no-repeat; content: ""; } .page-pwa-client.page-master-profile-s4 .s4-service-badge::before { top: 2px; right: 3px; width: 8px; height: 8px; opacity: 0.85; } .page-pwa-client.page-master-profile-s4 .s4-service-badge::after { bottom: 4px; left: 2px; width: 6px; height: 6px; opacity: 0.6; } .page-pwa-client.page-master-profile-s4 .s4-service-badge svg { width: 30px; height: 30px; } .page-pwa-client.page-master-profile-s4 .s4-service-list:not(.is-view-grid) .s4-service-badge svg { width: 32px; height: 32px; } .page-pwa-client.page-master-profile-s4 .s4-service-copy { display: grid; grid-area: copy; gap: 3px; min-width: 0; } .page-pwa-client.page-master-profile-s4 .s4-service-title { font-family: var(--redesign-font-display); font-weight: 600; font-size: 16px; line-height: 1.12; color: var(--s4-ink); } .page-pwa-client.page-master-profile-s4 .s4-service-meta { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; } .page-pwa-client.page-master-profile-s4 .s4-service-dur { font-size: 13px; color: var(--s4-muted); } .page-pwa-client.page-master-profile-s4 .s4-service-price { font-size: 14px; font-weight: 500; color: var(--s4-body); } .page-pwa-client.page-master-profile-s4 .s4-service-arrow { display: grid; grid-area: arrow; align-self: center; width: 36px; height: 36px; place-items: center; justify-self: end; border: 1px solid var(--s4-ring); border-radius: 999px; color: var(--s4-sage); } .page-pwa-client.page-master-profile-s4 .s4-service-list.is-view-grid .s4-service-arrow { align-self: start; width: 34px; height: 34px; } .page-pwa-client.page-master-profile-s4 .s4-service-arrow svg { width: 17px; height: 17px; } /* Restored lower-tier modules — quieter than hero/quote/services. */ .page-pwa-client.page-master-profile-s4 .s4-block { margin-top: 30px; } .page-pwa-client.page-master-profile-s4 .s4-block-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--redesign-font-display); font-weight: 600; font-size: 20px; line-height: 1.1; letter-spacing: -0.01em; color: var(--s4-body); } .page-pwa-client.page-master-profile-s4 .s4-block-leaf { display: inline-flex; color: var(--s4-sage); opacity: 0.5; } .page-pwa-client.page-master-profile-s4 .s4-block-leaf svg { width: 28px; height: 17px; } .page-pwa-client.page-master-profile-s4 .s4-empty { display: grid; gap: 4px; padding: 20px; border: 1px dashed var(--s4-ring); border-radius: 18px; background: rgba(255, 255, 255, 0.4); } .page-pwa-client.page-master-profile-s4 .s4-empty strong { font-size: 15px; color: var(--s4-ink); } .page-pwa-client.page-master-profile-s4 .s4-empty p { margin: 0; font-size: 13px; color: var(--s4-muted); } .page-pwa-client.page-master-profile-s4 .s4-portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .page-pwa-client.page-master-profile-s4 .s4-portfolio-item { aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: var(--s4-badge); } .page-pwa-client.page-master-profile-s4 .s4-portfolio-item img { display: block; width: 100%; height: 100%; object-fit: cover; } .page-pwa-client.page-master-profile-s4 .s4-contact-card, .page-pwa-client.page-master-profile-s4 .s4-follow-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border: 1px solid var(--s4-line); border-radius: 18px; background: rgba(255, 255, 255, 0.45); } .page-pwa-client.page-master-profile-s4 .s4-contact-ic, .page-pwa-client.page-master-profile-s4 .s4-follow-ic { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 999px; background: rgba(110, 138, 90, 0.14); color: var(--s4-sage); } .page-pwa-client.page-master-profile-s4 .s4-contact-ic svg, .page-pwa-client.page-master-profile-s4 .s4-follow-ic svg { width: 21px; height: 21px; } .page-pwa-client.page-master-profile-s4 .s4-contact-copy, .page-pwa-client.page-master-profile-s4 .s4-follow-copy { display: grid; gap: 6px; min-width: 0; } .page-pwa-client.page-master-profile-s4 .s4-contact-copy strong, .page-pwa-client.page-master-profile-s4 .s4-follow-copy strong { font-size: 15px; color: var(--s4-ink); } .page-pwa-client.page-master-profile-s4 .s4-contact-copy p, .page-pwa-client.page-master-profile-s4 .s4-follow-copy p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--s4-muted); } .page-pwa-client.page-master-profile-s4 .s4-contact-chip, .page-pwa-client.page-master-profile-s4 .s4-follow-chip { justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--s4-badge); color: var(--s4-sage-deep); font-size: 12px; font-weight: 500; } .page-pwa-client.page-master-profile-s4 .s4-contact-facts { display: grid; gap: 8px; margin-top: 10px; } .page-pwa-client.page-master-profile-s4 .s4-contact-facts div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--s4-line); border-radius: 14px; background: rgba(255, 255, 255, 0.5); } .page-pwa-client.page-master-profile-s4 .s4-contact-facts span { font-size: 13px; color: var(--s4-muted); } .page-pwa-client.page-master-profile-s4 .s4-contact-facts strong { font-size: 13px; color: var(--s4-ink); text-align: right; } .page-pwa-client.page-master-profile-s4 .s4-follow-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin-top: 2px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--s4-sage); color: #fff; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; } .page-pwa-client.page-master-profile-s4 .s4-follow-btn.is-secondary { background: transparent; border: 1px solid var(--s4-ring); color: var(--s4-sage-deep); } .page-pwa-client.page-master-profile-s4 .s4-follow-btn[disabled] { opacity: 0.55; cursor: default; } .page-pwa-client.page-master-profile-s4 .s4-follow-card form { margin: 0; } /* Bottom nav: warm-white floating bar, sage active tab + leaf glyph. */ .page-pwa-client.page-master-profile-s4 .pwa-bottom-nav { --ok-motion-nav-indicator-inline-size: 24px; --ok-motion-nav-indicator-block-size: 2px; border-color: var(--s4-line); background: var(--s4-nav); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); } .page-pwa-client.page-master-profile-s4 .pwa-bottom-nav a { color: var(--s4-muted); } .page-pwa-client.page-master-profile-s4 .pwa-bottom-nav a.is-active { color: var(--s4-sage-deep); background: transparent; } .page-pwa-client.page-master-profile-s4 .pwa-bottom-nav a.is-active::before { width: 24px; height: 2px; background: var(--s4-sage); } .page-pwa-client.page-master-profile-s4 .pwa-bottom-nav a.is-active svg { color: transparent; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235C7A48'%3E%3Cpath d='M12 3c2.4 2.8 2.4 6.9 0 9.7-2.4-2.8-2.4-6.9 0-9.7Z'/%3E%3Cpath d='M11 13.4C7.8 12.6 5.3 9.8 5 6.2c3.6.3 6.1 3 6 7.2Z'/%3E%3Cpath d='M13 13.4c3.2-.8 5.7-3.6 6-7.2-3.6.3-6.1 3-6 7.2Z'/%3E%3Cpath d='M11.1 13h1.8v6.4a.9.9 0 0 1-1.8 0Z'/%3E%3C/svg%3E") center / contain no-repeat; } @media (min-width: 768px) { .page-pwa-client.page-master-profile-s4 .s4-view-btn span { display: inline; } .page-pwa-client.page-master-profile-s4 .pwa-shell { width: min(100%, 760px); padding-right: 28px; padding-left: 28px; } .page-pwa-client.page-master-profile-s4 .s4-hero { grid-template-columns: 224px minmax(0, 1fr); gap: 24px; } .page-pwa-client.page-master-profile-s4 .s4-hero-photo { width: 224px; height: 252px; } .page-pwa-client.page-master-profile-s4 .s4-name { font-size: 40px; } .page-pwa-client.page-master-profile-s4 .s4-hero-decor { width: 190px; right: -30px; } } @media (min-width: 1280px) { .page-pwa-client.page-master-profile-s4 .pwa-shell { width: min(100%, 840px); } .page-pwa-client.page-master-profile-s4 .s4-hero { grid-template-columns: 280px minmax(0, 1fr); } .page-pwa-client.page-master-profile-s4 .s4-hero-photo { width: 280px; height: 312px; } .page-pwa-client.page-master-profile-s4 .s4-name { font-size: 44px; } } /* Approved Screen 1 launcher — active «Услуги» nav shows the reference leaf/lotus glyph (scoped to this route; the shared grid icon is preserved elsewhere). */ .page-pwa-client.page-pwa-services .pwa-bottom-nav a.is-active svg { color: transparent; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235C7A48'%3E%3Cpath d='M12 3c2.4 2.8 2.4 6.9 0 9.7-2.4-2.8-2.4-6.9 0-9.7Z'/%3E%3Cpath d='M11 13.4C7.8 12.6 5.3 9.8 5 6.2c3.6.3 6.1 3 6 7.2Z'/%3E%3Cpath d='M13 13.4c3.2-.8 5.7-3.6 6-7.2-3.6.3-6.1 3-6 7.2Z'/%3E%3Cpath d='M11.1 13h1.8v6.4a.9.9 0 0 1-1.8 0Z'/%3E%3C/svg%3E") center / contain no-repeat; } /* ========================================================================== Approved client color calibration (hotfix) The client PWA base + services screens rendered green-tinted: a neon-lime radial on .page-pwa-client and pale-mint radials on the services body/intro. The approved client references use a clean warm-ivory canvas with white cards and sage only as an accent. This recolors the client-PWA canvas to warm ivory, the services body to warm ivory and the launcher hero card to warm white, keeping every layout/measure/shadow intact. Scoped to .page-pwa-client so the public web (/ , /masters.php) and admin/master shells are untouched. CSS-only. ========================================================================== */ .page-pwa-client { background: linear-gradient(180deg, #F7F5EF 0%, #F3F0E8 100%); } .page-pwa-client.page-pwa-services { background: linear-gradient(180deg, #F7F5EF 0%, #F3F0E8 100%); } .page-pwa-client.page-pwa-services .services-launcher__intro { background: #FDFCF8; } /* ========================================================================== Approved client filter — Screen 3 "Модальное окно фильтрации мастеров" Source of truth: approved-client Дизайн 1-18 p.25 (image3.jpeg). Route: /pwa/filter.php (body .page-pwa-filter). The markup already matches (Дата / Цена / Локация / радиус + Применить/Сбросить); it was still painted in the legacy purple palette. This recolors it to the approved warm-ivory + serif + sage system, adds the approved watercolor botanical accents, and turns the selected checkbox/button green. CSS-only, route-scoped; forms/inputs/values and the GET action are untouched. Specificity matches the existing body.page-beauty.page-pwa-client.page-pwa-filter rules (later in file wins). ========================================================================== */ body.page-beauty.page-pwa-client.page-pwa-filter { --f3-ivory: #F5F3EC; --f3-card: #FFFFFF; --f3-surface: #FDFCF8; --f3-ink: #2C2C27; --f3-muted: var(--redesign-color-text-muted); --f3-sage: #6E8A5A; --f3-sage-deep: #5C7A48; --f3-line: rgba(66, 62, 44, 0.14); background: var(--f3-ivory); } /* the form card + approved botanical accents (top-left, bottom-right) */ body.page-beauty.page-pwa-client.page-pwa-filter .catalog-filter-screen__form { position: relative; background: var(--f3-surface); border: 1px solid var(--f3-line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); overflow: hidden; } body.page-beauty.page-pwa-client.page-pwa-filter .catalog-filter-screen__form::before, body.page-beauty.page-pwa-client.page-pwa-filter .catalog-filter-screen__form::after { position: absolute; z-index: 0; content: ""; background: var(--redesign-asset-botanical) center / contain no-repeat; pointer-events: none; opacity: 0.5; } body.page-beauty.page-pwa-client.page-pwa-filter .catalog-filter-screen__form::before { top: -26px; left: -30px; width: 120px; height: 150px; transform: scaleX(-1) rotate(8deg); } body.page-beauty.page-pwa-client.page-pwa-filter .catalog-filter-screen__form::after { right: -30px; bottom: -30px; width: 120px; height: 160px; transform: rotate(4deg); opacity: 0.42; } body.page-beauty.page-pwa-client.page-pwa-filter .catalog-filter-screen__body, body.page-beauty.page-pwa-client.page-pwa-filter .catalog-filter-screen__header, body.page-beauty.page-pwa-client.page-pwa-filter .catalog-filter-screen__footer { position: relative; z-index: 1; } /* headers → serif charcoal */ body.page-beauty.page-pwa-client.page-pwa-filter .catalog-filter-screen__header h2 { font-family: var(--redesign-font-display); font-weight: 600; color: var(--f3-ink); } body.page-beauty.page-pwa-client.page-pwa-filter .catalog-filter-screen__header span { color: var(--f3-muted); } body.page-beauty.page-pwa-client.page-pwa-filter .catalog-filter-section h3 { font-family: var(--redesign-font-display); font-weight: 600; color: var(--f3-ink); } body.page-beauty.page-pwa-client.page-pwa-filter .filter-section-note, body.page-beauty.page-pwa-client.page-pwa-filter .filter-radius-hint, body.page-beauty.page-pwa-client.page-pwa-filter .filter-input-card > span:first-child { color: var(--f3-muted); } /* inputs → warm white cards, sage icons, ink text */ body.page-beauty.page-pwa-client.page-pwa-filter .filter-input-card { background: var(--f3-card); border: 1px solid var(--f3-line); color: var(--f3-ink); } body.page-beauty.page-pwa-client.page-pwa-filter .filter-input-card:focus-within { border-color: var(--f3-sage); box-shadow: 0 0 0 3px rgba(110, 138, 90, 0.16); } body.page-beauty.page-pwa-client.page-pwa-filter .filter-input-card svg { color: var(--f3-sage); } body.page-beauty.page-pwa-client.page-pwa-filter .filter-input-card input, body.page-beauty.page-pwa-client.page-pwa-filter .filter-input-card small { color: var(--f3-ink); } /* location + radius rows → warm white, sage pin, green check */ body.page-beauty.page-pwa-client.page-pwa-filter .filter-location-option, body.page-beauty.page-pwa-client.page-pwa-filter .filter-radius-option { background: var(--f3-card); border: 1px solid var(--f3-line); color: var(--f3-ink); } body.page-beauty.page-pwa-client.page-pwa-filter .filter-location-option.is-selected, body.page-beauty.page-pwa-client.page-pwa-filter .filter-radius-option.is-selected { border-color: var(--f3-sage); background: rgba(110, 138, 90, 0.08); } body.page-beauty.page-pwa-client.page-pwa-filter .filter-location-icon svg { color: var(--f3-sage); } body.page-beauty.page-pwa-client.page-pwa-filter .filter-location-option input[type="checkbox"] { border-color: var(--f3-line); } body.page-beauty.page-pwa-client.page-pwa-filter .filter-location-option input[type="checkbox"]:checked { border-color: var(--f3-sage); background: var(--f3-sage); } /* footer → sage-green primary + reset */ body.page-beauty.page-pwa-client.page-pwa-filter .catalog-filter-screen__footer .button-primary { background: linear-gradient(135deg, #7B9A63, #5C7A48); color: #fff; box-shadow: 0 10px 24px rgba(92, 122, 72, 0.24); } body.page-beauty.page-pwa-client.page-pwa-filter .catalog-filter-reset { color: var(--f3-sage-deep); } /* ========================================================================== Approved client account screens — Screen 10 «Мои мастера» + Screen 11 «Профиль пользователя». Source of truth: approved-client Дизайн 1-18 p.122 & p.134 (image12/image13.jpeg). The .client-page dashboard used a saturated green token palette (--client-bg #f3f8f4, --client-accent #25513f, dark-green ink and deep-green gradient avatars), reading over-green vs the approved warm-ivory + calm-sage + serif system. Route-scoped to the two account pages, this recolors the --client-* tokens to the approved palette, softens the monogram tiles and adds the approved watercolor botanical accent. Layout/markup/functionality unchanged; catalog/master (also .client-page-adjacent but not these routes) are untouched. CSS-only. ========================================================================== */ body.page-pwa-client.page-pwa-profile.client-page, body.page-pwa-client.page-pwa-my-masters.client-page { --client-bg: #F5F3EC; --client-card: #FFFFFF; --client-ink: #2C2C27; --client-muted: #8A8A7C; --client-soft: #EBEEE1; --client-accent: #5C7A48; --client-border: rgba(66, 62, 44, 0.13); --client-shadow: 0 10px 28px rgba(0, 0, 0, 0.06); /* The account components (avatars, kickers, soft card tints) resolve the shared --redesign brand/surface tokens, which are saturated green. Recolor them to the approved calm sage + warm cream — route-scoped, so catalog / master / booking (same tokens elsewhere) are untouched. */ --redesign-color-brand-primary: #5C7A48; --redesign-color-brand-primary-deep: #4C6B3C; --redesign-color-brand-accent: #9BB183; --redesign-color-brand-olive: #6A8A52; --redesign-color-surface-soft: #EFEADF; --redesign-color-surface-soft-2: #EEE9DE; --redesign-color-surface-soft-3: #E7E0D1; --redesign-color-border-soft-green: #D8D6C4; background: #F5F3EC; color: #2C2C27; } /* Approved watercolor botanical accent, top-right of the account canvas. */ body.page-pwa-client.page-pwa-profile.client-page .pwa-shell, body.page-pwa-client.page-pwa-my-masters.client-page .pwa-shell { position: relative; } body.page-pwa-client.page-pwa-profile.client-page .pwa-shell::before, body.page-pwa-client.page-pwa-my-masters.client-page .pwa-shell::before { position: absolute; top: 46px; right: 0; z-index: 0; width: 132px; height: 190px; background: var(--redesign-asset-botanical) right top / contain no-repeat; opacity: 0.5; pointer-events: none; content: ""; } body.page-pwa-client.page-pwa-profile.client-page .pwa-shell > *, body.page-pwa-client.page-pwa-my-masters.client-page .pwa-shell > * { position: relative; z-index: 1; } /* ========================================================================== Approved client visit history — Screen 18 "История посещений" Source of truth: approved-client Дизайн 1-18 p.223 (image22.jpeg). New route /pwa/history.php (render_shared_client_history) lists the signed-in client's real bookings. Warm-ivory canvas, serif «История» title, soft white visit cards (serif service name on a soft-sage panel + master/date/time/price), approved botanical accent. Route-scoped to .page-pwa-history; read-only, no POST. ========================================================================== */ body.page-pwa-client.page-pwa-history.client-page { --h18-ivory: #F5F3EC; --h18-card: #FFFFFF; --h18-panel: #EEF0E4; --h18-ink: #2C2C27; --h18-muted: #8A8A7C; --h18-sage: #5C7A48; --h18-line: rgba(66, 62, 44, 0.13); background: var(--h18-ivory); color: var(--h18-ink); } /* topbar → clean serif «История», botanical top-right */ body.page-pwa-client.page-pwa-history.client-page .pwa-shell { position: relative; } body.page-pwa-client.page-pwa-history.client-page .pwa-shell::before { position: absolute; top: 40px; right: 0; z-index: 0; width: 128px; height: 180px; background: var(--redesign-asset-botanical) right top / contain no-repeat; opacity: 0.48; pointer-events: none; content: ""; } body.page-pwa-client.page-pwa-history.client-page .pwa-shell > * { position: relative; z-index: 1; } body.page-pwa-client.page-pwa-history.client-page .pwa-topbar strong { font-family: var(--redesign-font-display); font-weight: 600; color: var(--h18-ink); } body.page-pwa-client.page-pwa-history.client-page .s18-history { display: block; margin-top: 8px; } body.page-pwa-client.page-pwa-history.client-page .s18-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } body.page-pwa-client.page-pwa-history.client-page .s18-visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; overflow: hidden; border: 1px solid var(--h18-line); border-radius: 18px; background: var(--h18-card); color: var(--h18-ink); text-decoration: none; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03); } body.page-pwa-client.page-pwa-history.client-page .s18-visit-service { display: grid; align-content: center; gap: 6px; padding: 16px; background: var(--h18-panel); } body.page-pwa-client.page-pwa-history.client-page .s18-visit-service strong { font-family: var(--redesign-font-display); font-weight: 600; font-size: 20px; line-height: 1.12; color: var(--h18-sage); } body.page-pwa-client.page-pwa-history.client-page .s18-visit-status { font-size: 12px; color: var(--h18-muted); } body.page-pwa-client.page-pwa-history.client-page .s18-visit-meta { display: grid; align-content: center; gap: 6px; padding: 14px 16px; } body.page-pwa-client.page-pwa-history.client-page .s18-visit-master { font-size: 13px; font-weight: 600; color: var(--h18-ink); } body.page-pwa-client.page-pwa-history.client-page .s18-visit-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--h18-ink); } body.page-pwa-client.page-pwa-history.client-page .s18-visit-ic { display: inline-flex; color: var(--h18-sage); } body.page-pwa-client.page-pwa-history.client-page .s18-visit-ic svg { width: 17px; height: 17px; } body.page-pwa-client.page-pwa-history.client-page .s18-visit-price { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--h18-sage); } body.page-pwa-client.page-pwa-history.client-page .s18-empty { display: grid; justify-items: center; gap: 6px; margin-top: 40px; padding: 28px 20px; border: 1px dashed var(--h18-line); border-radius: 20px; background: rgba(255, 255, 255, 0.5); text-align: center; } body.page-pwa-client.page-pwa-history.client-page .s18-empty-leaf { display: inline-flex; color: var(--h18-sage); opacity: 0.7; } body.page-pwa-client.page-pwa-history.client-page .s18-empty-leaf svg { width: 40px; height: 24px; } body.page-pwa-client.page-pwa-history.client-page .s18-empty strong { font-family: var(--redesign-font-display); font-weight: 600; font-size: 18px; color: var(--h18-ink); } body.page-pwa-client.page-pwa-history.client-page .s18-empty p { margin: 0; font-size: 13px; color: var(--h18-muted); } /* ========================================================================== Approved client rating — Screen 14 "Рейтинг пользователя" Source of truth: approved-client Дизайн 1-18 p.167 (image16.jpeg). New route /pwa/rating.php (render_shared_client_rating) shows the REAL trust score + the factors that influence it + a real visit-stats summary; bonuses are an honest empty state (no fake balance). Warm-ivory canvas, serif «Как Вы на него влияете?», soft factor card, sparkle + botanical accents. Read-only, no POST. ========================================================================== */ body.page-pwa-client.page-pwa-rating.client-page { --r14-ivory: #F5F3EC; --r14-card: #FFFFFF; --r14-panel: #EEF0E4; --r14-ink: #2C2C27; --r14-muted: #8A8A7C; --r14-sage: #5C7A48; --r14-line: rgba(66, 62, 44, 0.13); background: var(--r14-ivory); color: var(--r14-ink); } body.page-pwa-client.page-pwa-rating.client-page .pwa-topbar strong { font-family: var(--redesign-font-display); font-weight: 600; color: var(--r14-ink); } body.page-pwa-client.page-pwa-rating.client-page .s14-rating { display: grid; gap: 16px; margin-top: 4px; } body.page-pwa-client.page-pwa-rating.client-page .s14-hero { position: relative; display: grid; gap: 8px; padding: 4px 2px 4px; overflow: hidden; } body.page-pwa-client.page-pwa-rating.client-page .s14-score { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--r14-ink); } body.page-pwa-client.page-pwa-rating.client-page .s14-score strong { font-family: var(--redesign-font-display); font-size: 20px; color: var(--r14-sage); } body.page-pwa-client.page-pwa-rating.client-page .s14-star { display: inline-flex; color: var(--r14-sage); } body.page-pwa-client.page-pwa-rating.client-page .s14-star svg { width: 18px; height: 18px; } body.page-pwa-client.page-pwa-rating.client-page .s14-title { margin: 0; font-family: var(--redesign-font-display); font-weight: 600; font-size: 34px; line-height: 1.06; letter-spacing: -0.01em; color: var(--r14-sage); } body.page-pwa-client.page-pwa-rating.client-page .s14-status { justify-self: start; margin-top: 2px; padding: 4px 12px; border-radius: 999px; background: var(--r14-panel); color: var(--r14-sage); font-size: 13px; font-weight: 500; } body.page-pwa-client.page-pwa-rating.client-page .s14-factors { position: relative; display: grid; gap: 16px; padding: 20px; overflow: hidden; border: 1px solid var(--r14-line); border-radius: 20px; background: var(--r14-card); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04); } body.page-pwa-client.page-pwa-rating.client-page .s14-factors::after { position: absolute; right: -22px; bottom: -26px; width: 150px; height: 150px; background: var(--redesign-asset-botanical) right bottom / contain no-repeat; opacity: 0.4; pointer-events: none; content: ""; } body.page-pwa-client.page-pwa-rating.client-page .s14-factor { position: relative; z-index: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; } body.page-pwa-client.page-pwa-rating.client-page .s14-factor-ic { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 999px; background: var(--r14-panel); color: var(--r14-sage); } body.page-pwa-client.page-pwa-rating.client-page .s14-factor-ic svg { width: 22px; height: 22px; } body.page-pwa-client.page-pwa-rating.client-page .s14-factor strong { font-family: var(--redesign-font-display); font-weight: 600; font-size: 17px; color: var(--r14-ink); } body.page-pwa-client.page-pwa-rating.client-page .s14-factor p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--r14-muted); } body.page-pwa-client.page-pwa-rating.client-page .s14-thanks { position: relative; z-index: 1; margin: 2px 0 0; font-family: var(--redesign-font-display); font-size: 17px; line-height: 1.3; color: var(--r14-ink); text-align: center; } body.page-pwa-client.page-pwa-rating.client-page .s14-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } body.page-pwa-client.page-pwa-rating.client-page .s14-stat { display: grid; gap: 2px; padding: 14px 10px; border: 1px solid var(--r14-line); border-radius: 16px; background: var(--r14-card); text-align: center; } body.page-pwa-client.page-pwa-rating.client-page .s14-stat strong { font-family: var(--redesign-font-display); font-size: 24px; color: var(--r14-sage); } body.page-pwa-client.page-pwa-rating.client-page .s14-stat span { font-size: 12px; color: var(--r14-muted); } body.page-pwa-client.page-pwa-rating.client-page .s14-bonuses { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border: 1px dashed var(--r14-line); border-radius: 18px; background: rgba(255, 255, 255, 0.5); } body.page-pwa-client.page-pwa-rating.client-page .s14-bonus-ic { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 999px; background: var(--r14-panel); color: var(--r14-sage); } body.page-pwa-client.page-pwa-rating.client-page .s14-bonus-ic svg { width: 21px; height: 21px; } body.page-pwa-client.page-pwa-rating.client-page .s14-bonuses strong { font-family: var(--redesign-font-display); font-weight: 600; font-size: 16px; color: var(--r14-ink); } body.page-pwa-client.page-pwa-rating.client-page .s14-bonuses p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--r14-muted); } /* ========================================================================== Approved client Screen 12 «Настройки» (image14). Route: /pwa/settings.php · body.page-pwa-settings. Warm-ivory canvas, serif «Настройки» top bar, soft white field cards with a sage icon chip, three name rows (Имя / Фамилия / Отчество), wide phone (read- only) and email cards with the approved watercolor branch, and a dashed botanical «Мои beauty-данные» pill. CSRF POST form, real account fields. ========================================================================== */ body.page-pwa-client.page-pwa-settings.client-page { --s12-ivory: #F5F3EC; --s12-card: #FFFFFF; --s12-panel: #EAEDDF; --s12-ink: #2C2C27; --s12-muted: #8A8A7C; --s12-sage: #5C7A48; --s12-line: rgba(66, 62, 44, 0.12); background: var(--s12-ivory); color: var(--s12-ink); } body.page-pwa-client.page-pwa-settings.client-page .pwa-topbar strong { font-family: var(--redesign-font-display); font-weight: 600; font-size: 26px; letter-spacing: 0.01em; color: var(--s12-ink); } body.page-pwa-client.page-pwa-settings.client-page .s12-settings { display: grid; gap: 13px; margin-top: 6px; } body.page-pwa-client.page-pwa-settings.client-page .s12-flash { border-radius: 16px; padding: 12px 16px; font-size: 14px; line-height: 1.4; border: 1px solid var(--s12-line); } body.page-pwa-client.page-pwa-settings.client-page .s12-flash.is-success { background: #EAEDDF; color: #46603A; } body.page-pwa-client.page-pwa-settings.client-page .s12-flash.is-error { background: #F6EBE4; color: var(--redesign-color-warning-text); } body.page-pwa-client.page-pwa-settings.client-page .s12-form { display: grid; gap: 14px; margin: 0; } body.page-pwa-client.page-pwa-settings.client-page .s12-card { position: relative; display: flex; align-items: center; gap: 14px; background: var(--s12-card); border: 1px solid var(--s12-line); border-radius: 22px; padding: 16px 18px; box-shadow: 0 12px 26px rgba(66, 62, 44, 0.06); overflow: hidden; } body.page-pwa-client.page-pwa-settings.client-page .s12-card.is-disabled { opacity: 0.72; } body.page-pwa-client.page-pwa-settings.client-page .s12-card.s12-field { padding-block: 8px; } body.page-pwa-client.page-pwa-settings.client-page .s12-ic { flex: 0 0 auto; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--s12-panel); color: var(--s12-sage); } body.page-pwa-client.page-pwa-settings.client-page .s12-ic svg { width: 24px; height: 24px; } body.page-pwa-client.page-pwa-settings.client-page .s12-field-main { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; } body.page-pwa-client.page-pwa-settings.client-page .s12-field-label { font-family: var(--redesign-font-display); font-size: 20px; line-height: 1.1; color: var(--s12-ink); } body.page-pwa-client.page-pwa-settings.client-page .s12-input { border: none; background: transparent; padding: 2px 0 0; font-size: 16px; color: var(--s12-ink); width: 100%; font-family: inherit; } body.page-pwa-client.page-pwa-settings.client-page .s12-input::placeholder { color: var(--redesign-color-text-muted); } body.page-pwa-client.page-pwa-settings.client-page .s12-input:focus { outline: none; } body.page-pwa-client.page-pwa-settings.client-page .s12-field:focus-within { border-color: rgba(92, 122, 72, 0.55); box-shadow: 0 0 0 3px rgba(92, 122, 72, 0.12); outline: 3px solid var(--redesign-color-calm-green); outline-offset: 2px; } body.page-pwa-client.page-pwa-settings.client-page .s12-hint { flex: 0 0 auto; font-size: 13px; color: var(--s12-muted); white-space: nowrap; } body.page-pwa-client.page-pwa-settings.client-page .s12-hint-required { color: #A05C3C; } body.page-pwa-client.page-pwa-settings.client-page .s12-card-wide { align-items: flex-start; padding: 18px 20px; min-height: 96px; } body.page-pwa-client.page-pwa-settings.client-page .s12-card-wide[data-botanical="1"]::after { content: ""; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 92px; height: 72px; background: var(--redesign-asset-botanical) right center / contain no-repeat; opacity: 0.5; pointer-events: none; } body.page-pwa-client.page-pwa-settings.client-page .s12-wide-main { flex: 1 1 auto; display: grid; gap: 4px; min-width: 0; position: relative; z-index: 1; padding-right: 54px; } body.page-pwa-client.page-pwa-settings.client-page .s12-phone .s12-wide-value { white-space: nowrap; font-size: 16px; letter-spacing: 0; } body.page-pwa-client.page-pwa-settings.client-page .s12-wide-label { font-family: var(--redesign-font-display); font-size: 21px; line-height: 1.1; color: var(--s12-ink); } body.page-pwa-client.page-pwa-settings.client-page .s12-wide-value { font-size: 18px; color: var(--s12-ink); letter-spacing: 0.01em; } body.page-pwa-client.page-pwa-settings.client-page .s12-wide-muted { color: var(--redesign-color-text-muted); } body.page-pwa-client.page-pwa-settings.client-page .s12-wide-note { font-size: 12px; color: var(--s12-muted); } body.page-pwa-client.page-pwa-settings.client-page .s12-input-wide { font-size: 17px; } body.page-pwa-client.page-pwa-settings.client-page .s12-email .s12-wide-main { padding-right: 0; } body.page-pwa-client.page-pwa-settings.client-page .s12-email .s12-input-wide { font-size: 16px; letter-spacing: -0.01em; } body.page-pwa-client.page-pwa-settings.client-page .s12-email[data-botanical="1"]::after { width: 58px; opacity: 0.28; } body.page-pwa-client.page-pwa-settings.client-page .s12-save { margin-top: 2px; border: none; border-radius: 18px; padding: 15px 18px; background: var(--s12-sage); color: #FBFBF5; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 14px 28px rgba(92, 122, 72, 0.24); } body.page-pwa-client.page-pwa-settings.client-page .s12-save:active { transform: translateY(1px); } body.page-pwa-client.page-pwa-settings.client-page .s12-beauty { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 2px; padding: 20px 22px; border-radius: 32px; border: 1.6px dashed rgba(92, 122, 72, 0.5); background: linear-gradient(0deg, rgba(234, 237, 223, 0.55), rgba(234, 237, 223, 0.55)), var(--redesign-asset-botanical) left center / 120px auto no-repeat; color: #3C5230; font-family: var(--redesign-font-display); font-size: 22px; text-decoration: none; overflow: hidden; } body.page-pwa-client.page-pwa-settings.client-page .s12-beauty-arrow { font-size: 22px; line-height: 1; color: var(--s12-sage); } /* ========================================================================== Approved client Screen 13 «Beauty-данные» (image15). Route: /pwa/beauty-data.php · body.page-pwa-beauty-data. Warm-ivory canvas, serif top bar, soft white cards with a sage icon chip and a rounded «pill» native dropdown, plus a «нарощенные» card with square sage checkboxes and the approved watercolor branch. CSRF POST, real persistence. ========================================================================== */ body.page-pwa-client.page-pwa-beauty-data.client-page { --s13-ivory: #F5F3EC; --s13-card: #FFFFFF; --s13-panel: #EAEDDF; --s13-ink: #2C2C27; --s13-muted: #8A8A7C; --s13-sage: #5C7A48; --s13-line: rgba(66, 62, 44, 0.12); background: var(--s13-ivory); color: var(--s13-ink); } body.page-pwa-client.page-pwa-beauty-data.client-page .pwa-topbar strong { font-family: var(--redesign-font-display); font-weight: 600; font-size: 26px; letter-spacing: 0.01em; color: var(--s13-ink); } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-beauty { display: grid; gap: 16px; margin-top: 6px; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-flash { border-radius: 16px; padding: 12px 16px; font-size: 14px; line-height: 1.4; border: 1px solid var(--s13-line); } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-flash.is-success { background: #EAEDDF; color: #46603A; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-flash.is-error { background: #F6EBE4; color: #A05C3C; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-form { display: grid; gap: 16px; margin: 0; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-card { position: relative; background: var(--s13-card); border: 1px solid var(--s13-line); border-radius: 22px; box-shadow: 0 12px 26px rgba(66, 62, 44, 0.06); overflow: hidden; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-field { display: flex; align-items: center; gap: 12px; padding: 16px 16px; cursor: pointer; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-ic { flex: 0 0 auto; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--s13-panel); color: var(--s13-sage); } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-ic svg { width: 26px; height: 26px; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-field-label { flex: 1 1 auto; font-family: var(--redesign-font-display); font-size: 19px; line-height: 1.15; color: var(--s13-ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-select { position: relative; flex: 0 0 auto; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-select select { appearance: none; -webkit-appearance: none; border: 1px solid var(--s13-line); border-radius: 14px; background: #FBFBF5; color: var(--s13-ink); font-size: 15px; font-family: inherit; padding: 11px 36px 11px 14px; min-width: 92px; max-width: 148px; cursor: pointer; box-shadow: 0 6px 14px rgba(66, 62, 44, 0.05); } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-select select:focus { outline: none; border-color: rgba(92, 122, 72, 0.55); box-shadow: 0 0 0 3px rgba(92, 122, 72, 0.12); } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-chevron { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--s13-sage); pointer-events: none; display: inline-flex; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-chevron svg { width: 18px; height: 18px; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-ext { padding: 20px 20px 22px; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-ext[data-botanical="1"]::after { content: ""; position: absolute; right: 4px; bottom: 6px; width: 150px; height: 130px; background: var(--redesign-asset-botanical) right bottom / contain no-repeat; opacity: 0.5; pointer-events: none; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-ext-title { display: block; font-family: var(--redesign-font-display); font-size: 21px; color: var(--s13-ink); margin-bottom: 14px; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-ext-list { display: grid; gap: 14px; position: relative; z-index: 1; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-check { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 16px; color: var(--s13-ink); } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-check input { position: absolute; opacity: 0; width: 0; height: 0; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-check-box { flex: 0 0 auto; width: 26px; height: 26px; border: 1.6px solid var(--s13-sage); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: transparent; background: #FBFBF5; transition: color 0.12s ease, background 0.12s ease; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-check-box svg { width: 18px; height: 18px; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-check input:checked + .s13-check-box { color: var(--s13-sage); background: #EAEDDF; } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-check input:focus-visible + .s13-check-box { box-shadow: 0 0 0 3px rgba(92, 122, 72, 0.2); } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-save { margin-top: 2px; border: none; border-radius: 18px; padding: 15px 18px; background: var(--s13-sage); color: #FBFBF5; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 14px 28px rgba(92, 122, 72, 0.24); } body.page-pwa-client.page-pwa-beauty-data.client-page .s13-save:active { transform: translateY(1px); } /* ========================================================================== Approved client Screens 15 / 16 / 17 — booking management + cancellation. Route: /pwa/booking.php?token= · body.page-pwa-booking-status (only when the route opts in via cancel_variant='approved'; public/my_booking.php is a different body class and is untouched). Adds the reference «Отменить / Перенести» action row and a JS-free (CSS :checked toggle) «Отмена записи» reason-picker modal with the approved ivory/sage cards, watercolor branch and reason pills. Same cancel_booking POST semantics (action + token + status_comment via reason radios). ========================================================================== */ body.page-pwa-booking-status .s15-manage { --s15-ivory: #F5F3EC; --s15-card: #FFFFFF; --s15-panel: #EAEDDF; --s15-ink: #2C2C27; --s15-muted: #8A8A7C; --s15-sage: #5C7A48; --s15-line: rgba(66, 62, 44, 0.14); margin-top: 14px; } body.page-pwa-booking-status .s15-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } body.page-pwa-booking-status .s15-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 12px; border-radius: 18px; border: 1px solid var(--s15-line); background: var(--s15-card); color: var(--s15-ink); font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 22px rgba(66, 62, 44, 0.06); } body.page-pwa-booking-status .s15-btn svg { width: 22px; height: 22px; color: var(--s15-sage); } body.page-pwa-booking-status .s15-btn-reschedule.is-disabled { opacity: 0.55; cursor: not-allowed; } body.page-pwa-booking-status .s16-modal { display: none; position: fixed; inset: 0; z-index: 60; padding: 20px; background: rgba(44, 44, 39, 0.34); align-items: center; justify-content: center; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } body.page-pwa-booking-status .s16-toggle:checked ~ .s16-modal { display: flex; } body.page-pwa-booking-status .s16-modal-card { position: relative; width: min(440px, 100%); background: var(--s15-card); border-radius: 28px; padding: 20px 16px 24px; box-shadow: 0 30px 70px rgba(44, 44, 39, 0.28); overflow: hidden; } body.page-pwa-booking-status .s16-modal-card::after { content: ""; position: absolute; right: -6px; top: 40px; width: 150px; height: 150px; background: var(--redesign-asset-botanical) right top / contain no-repeat; opacity: 0.5; pointer-events: none; } body.page-pwa-booking-status .s16-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--s15-line); background: #FBFBF5; color: var(--s15-ink); cursor: pointer; } body.page-pwa-booking-status .s16-back svg { width: 22px; height: 22px; } body.page-pwa-booking-status .s16-modal-title { display: inline-block; margin-left: 12px; font-family: var(--redesign-font-display); font-size: 26px; vertical-align: middle; color: var(--s15-ink); } body.page-pwa-booking-status .s16-warn { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 6px; position: relative; z-index: 1; } body.page-pwa-booking-status .s16-warn-ic { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--s15-panel); color: var(--s15-sage); font-weight: 800; font-size: 20px; } body.page-pwa-booking-status .s16-warn p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--s15-ink); padding-top: 4px; } body.page-pwa-booking-status .s16-modal-q { display: block; margin: 18px 0 14px; font-family: var(--redesign-font-display); font-size: 27px; line-height: 1.1; color: var(--s15-sage); position: relative; z-index: 1; } body.page-pwa-booking-status .s16-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; z-index: 1; } body.page-pwa-booking-status .s16-reason { position: relative; cursor: pointer; } body.page-pwa-booking-status .s16-reason input { position: absolute; opacity: 0; width: 0; height: 0; } body.page-pwa-booking-status .s16-reason span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 58px; padding: 10px 8px; border-radius: 18px; border: 1px solid var(--s15-line); background: var(--s15-card); color: var(--s15-ink); font-size: 14px; letter-spacing: -0.01em; line-height: 1.2; word-break: keep-all; transition: background 0.12s ease, border-color 0.12s ease; } body.page-pwa-booking-status .s16-reason input:checked + span { background: #DDE6CC; border-color: rgba(92, 122, 72, 0.5); color: #3C5230; font-weight: 600; } body.page-pwa-booking-status .s16-reason input:focus-visible + span { box-shadow: 0 0 0 3px rgba(92, 122, 72, 0.2); } body.page-pwa-booking-status .s16-confirm { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: 16px; padding: 16px 18px; border: none; border-radius: 22px; background: #DDE6CC; color: #3C5230; font-size: 17px; font-weight: 600; cursor: pointer; position: relative; z-index: 1; box-shadow: 0 12px 24px rgba(92, 122, 72, 0.18); } body.page-pwa-booking-status .s16-confirm svg { width: 22px; height: 22px; } body.page-pwa-booking-status .s16-confirm:active { transform: translateY(1px); } /* ========================================================================== Approved client color hardening. Scoped to body.page-beauty (present on every client public + PWA route, and NEVER on admin/master-admin/platform pages). Neutralises the legacy CRM indigo/violet palette that leaks into client surfaces through the shared core tokens (--primary #312e81, --primary-dark #241d68, --ok-blueberry #403084, --text #17122a) and generic components (.button-secondary, links). Only fills gaps: more specific client component rules keep winning. Admin surfaces keep the global :root palette untouched. ========================================================================== */ body.page-beauty { --primary: #5C7A48; --primary-dark: #46603A; --primary-strong: #46603A; --text: #2C2C27; --muted: #8A8A7C; --ok-blueberry: #5C7A48; --ok-blueberry-deep: #46603A; --ok-blackberry-deep: #2C2C27; --violet: #6E8A5A; --accent: #6E8A5A; --link: #5C7A48; } body.page-beauty a.button-secondary, body.page-beauty .button-secondary { color: #46603A; background: #EAEDDF; } body.page-beauty a.button-secondary:hover, body.page-beauty .button-secondary:hover { background: #E1E6D2; } /* Generic client links/anchors that fell back to the legacy indigo */ body.page-beauty .catalog-empty-actions .button-secondary { border-color: rgba(92, 122, 72, 0.28); } /* ========================================================================== Approved client — final readability / color / icon hardening pass. Scoped to body.page-beauty (client-only; never admin/master/platform) and specific client route classes. Fixes: legacy CRM indigo in the active bottom nav, over-green service panels, purple addon checkboxes, my-masters card hierarchy/clipping, filter option proportions, and secondary-surface CTAs. CSS-only, no !important except where a route-scoped gradient must be reset. ========================================================================== */ /* 1. Bottom nav — active icon + label are sage on EVERY client route (base rule fell back to --ok-blackberry #403084 on routes without an explicit accent, e.g. filter / profile / settings / booking / history). */ body.page-beauty .pwa-bottom-nav a.is-active, body.page-beauty .pwa-bottom-nav a.is-active span { color: #4C6A3A; } body.page-beauty .pwa-bottom-nav a.is-active svg { color: #5C7A48; stroke: currentColor; } body.page-beauty .pwa-bottom-nav a.is-active::before { background: #78B98F; } /* 2. Warm dark ink body text on client (was a faintly purple #241824). */ body.page-beauty { color: #2C2C27; } /* 3. Generic client CTAs land on the approved sage (harmonises catalog empty state «Сбросить фильтры» and any .button-primary fallbacks). */ body.page-beauty .button-primary { background: #5C7A48; color: #FBFBF5; } /* 4. Service detail (screen 5) — content cards are warm ivory like the reference (image5); only the total card stays soft sage. The winning rules use a 7-class redesign selector, so these overrides reuse that exact prefix (equal specificity, later in the file) to reset the mint/lime gradient wash and re-proportion the add-on control. */ body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-service.page-booking.page-booking-services .booking-card:not(.booking-total-card), body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-service.page-booking.page-booking-services .booking-option-list:not(.booking-total-card), body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-service.page-booking.page-booking-services .booking-addon-options { background: #FCFBF6; background-image: none; border: 1px solid rgba(66, 62, 44, 0.12); box-shadow: 0 12px 26px rgba(66, 62, 44, 0.05); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-service.page-booking.page-booking-services .booking-total-card { background: #E6EBD8; background-image: none; color: #2C2C27; border: 1px solid rgba(92, 122, 72, 0.22); } /* add-on control: clean small sage circle (was a 30x44 tall box) */ body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-service.page-booking.page-booking-services .booking-addon-option__check { width: 22px; height: 22px; min-width: 22px; flex: 0 0 22px; align-self: center; border: 2px solid rgba(92, 122, 72, 0.55); border-radius: 50%; background: #FFFFFF; accent-color: #5C7A48; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-service.page-booking.page-booking-services .booking-addon-option.is-selected .booking-addon-option__check { background: #5C7A48; border-color: #5C7A48; } /* 5. My-masters cards — name is the serif emphasis, specialisation is a calm sage kicker, location never clips. */ body.page-beauty .client-master-card .client-kicker { color: #6E8A5A; font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; } body.page-beauty .client-master-card h2 { font-family: var(--redesign-font-display, "Cormorant Garamond", serif); color: #2C2C27; font-size: 20px; line-height: 1.12; margin: 2px 0; } body.page-beauty .client-master-card .client-master-info > div > p { color: #6B6B60; overflow-wrap: anywhere; line-height: 1.35; } /* 6. Filter — calmer radius chips, sage selection accents (were purple). */ body.page-beauty .filter-location-option input, body.page-beauty .filter-radius-option input { accent-color: #5C7A48; } body.page-beauty .filter-location-option.is-selected, body.page-beauty .filter-radius-option.is-selected { border-color: rgba(92, 122, 72, 0.5); background: #EEF2E4; } body > .catalog-filter-screen .filter-radius-option { min-height: 46px; } /* ========================================================================== Canonical CLIENT bottom-navigation system. One geometry, one icon set, one active/inactive treatment on EVERY client route. Scoped to body.page-beauty.page-pwa-client so it outranks the base (.page-pwa-client …) and the per-route (.page-pwa-services / .page-pwa-catalog / .page-master-profile-s4 …) rules that previously diverged — a grid icon on catalog vs a leaf on services, three different active greens, a purple-tinted inactive on booking, and a #2B0B4A-tinted nav border. Admin/master untouched. Icons: Услуги = approved sage botanical leaf (currentColor, inline markup), Мои мастера = outline heart, Профиль = outline user. No route icon swaps. */ body.page-beauty.page-pwa-client .pwa-bottom-nav { border: 1px solid var(--redesign-color-border-subtle, rgba(66, 62, 44, 0.10)); border-radius: var(--redesign-radius-card-lg, 26px); background: var(--redesign-color-surface-card, #FFFFFF); box-shadow: var(--redesign-shadow-floating, 0 14px 34px rgba(66, 62, 44, 0.14)); padding: 8px 10px; } /* inactive: one warm gray for icon + label (kills #6E6E6E variance and the purple-tinted #7B7284 seen on the booking route). Client-scoped !important is justified here: numerous per-route rules (up to 8 classes, some with :has() + data-attrs) diverge, and a single canonical result is the whole point. */ body.page-beauty.page-pwa-client .pwa-bottom-nav a, body.page-beauty.page-pwa-client .pwa-bottom-nav a span, body.page-beauty.page-pwa-client .pwa-bottom-nav a svg { color: #7A7A70 !important; } /* active: one sage — leaf/icon #5C7A48, label #4C6A3A, top indicator #78B98F. */ body.page-beauty.page-pwa-client .pwa-bottom-nav a.is-active, body.page-beauty.page-pwa-client .pwa-bottom-nav a.is-active span { color: #4C6A3A !important; } body.page-beauty.page-pwa-client .pwa-bottom-nav a.is-active svg { color: #5C7A48 !important; background: none !important; /* neutralise the per-route background-image leaf */ -webkit-text-fill-color: currentColor; } body.page-beauty.page-pwa-client .pwa-bottom-nav a.is-active::before { background: #78B98F !important; } /* consistent icon box + label typography across routes */ body.page-beauty.page-pwa-client .pwa-bottom-nav a svg { width: 24px; height: 24px; } body.page-beauty.page-pwa-client .pwa-bottom-nav a span { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; } /* ========================================================================== Approved client Screen 2 «Каталог мастеров» — reference composition. Opt-in via body.page-pwa-catalog + the reference_layout flag. WEB and PWA use the same renderer, with shell-specific back destinations. Warm-ivory canvas, search pill, taxonomy cards, compact functional filters and photo-left/content-right master cards. The shared renderer adapts to the WEB shell at desktop widths. Scoped to the catalog route; no !important needed. ========================================================================== */ body.page-pwa-client.page-pwa-catalog.page-masters.masters-app-catalog { background: var(--redesign-color-bg-app); } .masters-app-catalog { --catalog-canvas: var(--redesign-color-bg-app); --catalog-surface: var(--redesign-color-surface-card); --catalog-surface-soft: var(--redesign-color-surface-soft); --catalog-ink: var(--redesign-color-text-primary); --catalog-body: var(--redesign-color-text-body); --catalog-brand: var(--redesign-color-action-green); --catalog-brand-deep: var(--redesign-color-brand-primary-deep); --catalog-border: var(--redesign-color-border-subtle); --catalog-radius-card: var(--redesign-radius-card-lg); --catalog-radius-control: 999px; --catalog-shadow-card: var(--redesign-shadow-card); --catalog-shadow-floating: var(--redesign-shadow-floating); --catalog-mobile-gap: clamp(12px, 3.4vw, 16px); --catalog-content-max: 1180px; --catalog-focus-ring: 0 0 0 3px rgba(120, 185, 143, 0.32); } .masters-app-catalog .cat2-header { display: grid; gap: var(--catalog-mobile-gap); width: 100%; margin: 0 auto; padding: 0; border: 0; background: none; box-shadow: none; } /* 1. Compact title hero */ .masters-app-catalog .cat2-hero { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 78px; overflow: hidden; isolation: isolate; } .masters-app-catalog .cat2-back { position: relative; z-index: 2; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--catalog-border); border-radius: 50%; background: var(--catalog-surface); color: var(--catalog-brand-deep); box-shadow: var(--redesign-shadow-soft); } .masters-app-catalog .cat2-back svg { width: 23px; height: 23px; } .masters-app-catalog .cat2-heading { position: relative; z-index: 2; min-width: 0; padding-right: clamp(48px, 15vw, 112px); } .masters-app-catalog .cat2-eyebrow { display: block; margin-bottom: 2px; color: var(--redesign-color-text-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; } .masters-app-catalog .cat2-heading h1 { margin: 0; color: var(--catalog-brand-deep); font-family: var(--redesign-font-display); font-size: clamp(34px, 8.6vw, 46px); font-weight: 500; letter-spacing: -0.025em; line-height: 0.96; overflow-wrap: anywhere; } .masters-app-catalog .cat2-hero-botanical { position: absolute; z-index: 1; top: -24px; right: -20px; width: clamp(132px, 32vw, 210px); height: 122px; background: var(--redesign-asset-botanical) right center / contain no-repeat; opacity: 0.3; pointer-events: none; } /* 2. Search */ .masters-app-catalog .cat2-search { position: relative; display: flex; align-items: center; margin: 0; } .masters-app-catalog .cat2-search-ic { position: absolute; left: 16px; display: inline-flex; color: #8A8A7C; } .masters-app-catalog .cat2-search-ic svg { width: 20px; height: 20px; } .masters-app-catalog .cat2-search-input { width: 100%; border: 1px solid rgba(66, 62, 44, 0.14); border-radius: 999px; background: #FFFFFF; min-height: 56px; padding: 14px 60px 14px 46px; font-size: 16px; font-family: inherit; color: #2C2C27; box-shadow: 0 8px 20px rgba(66, 62, 44, 0.05); } .masters-app-catalog .cat2-search-filter { position: absolute; right: 6px; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--catalog-body); cursor: pointer; } .masters-app-catalog .cat2-search-filter svg { width: 22px; height: 22px; } .masters-app-catalog .cat2-search-input::placeholder { color: #6B6B60; } .masters-app-catalog .cat2-search-input:focus { outline: none; border-color: rgba(92, 122, 72, 0.5); box-shadow: 0 0 0 3px rgba(92, 122, 72, 0.12); } /* 3. Category chips */ .masters-app-catalog .cat2-chips { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 2px 4px 4px 0; scrollbar-width: none; overscroll-behavior-inline: contain; scroll-padding-inline: 2px; scroll-snap-type: x proximity; touch-action: pan-x pan-y; } .masters-app-catalog .cat2-chips::-webkit-scrollbar { display: none; } .masters-app-catalog .cat2-chip { flex: 0 0 auto; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 72px; min-height: 70px; padding: 9px 13px; border-radius: 20px; border: 1px solid rgba(66, 62, 44, 0.12); background: #FFFFFF; color: #3A3A33; text-decoration: none; font-size: 13px; line-height: 1.12; box-shadow: 0 6px 16px rgba(66, 62, 44, 0.05); scroll-snap-align: start; white-space: nowrap; } .masters-app-catalog .cat2-chip-ic { flex: 0 0 auto; display: inline-flex; color: #9BB183; } .masters-app-catalog .cat2-chip-ic svg { width: 23px; height: 23px; } .masters-app-catalog .cat2-chip.is-active { background: #E6EBD8; border-color: rgba(92, 122, 72, 0.4); color: #3C5230; font-weight: 600; } .masters-app-catalog .cat2-chip.is-active .cat2-chip-ic { color: #5C7A48; } .masters-app-catalog .cat2-chip-label--short { display: none; } @media (max-width: 480px) { .masters-app-catalog .cat2-chips { gap: 6px; padding-right: 0; } .masters-app-catalog .cat2-chip { min-width: 60px; padding-inline: 8px; font-size: 12px; } .masters-app-catalog .cat2-chip-ic svg { width: 20px; height: 20px; } .masters-app-catalog .cat2-chip-label--full { display: none; } .masters-app-catalog .cat2-chip-label--short { display: inline; } } /* 4. Compact filters + exact result metadata */ .masters-app-catalog .cat2-filter-row { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 14px; border: 1px solid var(--catalog-border); border-radius: 18px; background: var(--catalog-surface); box-shadow: var(--redesign-shadow-soft); } .masters-app-catalog .cat2-filter-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--catalog-brand-deep); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .masters-app-catalog .cat2-filter-btn svg { width: 22px; height: 22px; } .masters-app-catalog .cat2-filter-state { min-width: 0; color: var(--redesign-color-text-muted); font-size: 13px; text-align: right; } .masters-app-catalog .cat2-filter-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #5C7A48; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .masters-app-catalog .cat2-active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -2px; font-size: 12px; } .masters-app-catalog .cat2-active-chips span { background: #EEF2E4; color: #46603A; border-radius: 999px; padding: 5px 12px; } .masters-app-catalog .cat2-active-chips a { color: #A05C3C; align-self: center; } .masters-app-catalog .cat2-result-count { margin: -2px 0 0; color: var(--redesign-color-text-muted); font-size: 14px; line-height: 1.35; } /* 5. Master cards — photo-left / content-right */ .masters-app-catalog .cat2-cards { display: grid; gap: 14px; margin-top: 8px; } .masters-app-catalog .cat2-card { position: relative; display: grid; grid-template-columns: minmax(118px, 38%) minmax(0, 1fr); gap: 12px; background: var(--catalog-surface); border: 1px solid var(--catalog-border); border-radius: var(--catalog-radius-card); padding: 12px; box-shadow: var(--catalog-shadow-card); overflow: hidden; } .masters-app-catalog .cat2-photo { position: relative; display: block; min-height: 232px; border-radius: 19px; overflow: hidden; background: linear-gradient(160deg, #EFEDE3, #E5E2D5); text-decoration: none; } .masters-app-catalog .cat2-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .masters-app-catalog .cat2-photo.has-initials .master-card-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9DA98B; font-family: var(--redesign-font-display); font-size: 40px; font-weight: 600; letter-spacing: 0; line-height: 1; } .masters-app-catalog .cat2-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; position: relative; z-index: 1; } .masters-app-catalog .cat2-copy h2 { margin: 1px 0 0; padding-right: 42px; font-family: var(--redesign-font-display); font-size: clamp(20px, 5.5vw, 24px); line-height: 1; color: #3C5230; overflow-wrap: anywhere; } .masters-app-catalog .cat2-copy h2 a { color: inherit; text-decoration: none; } .masters-app-catalog .cat2-copy .catalog-speciality { margin: 0; font-size: 14px; color: #5A5A50; } .masters-app-catalog .cat2-loc { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; font-size: 13px; color: #6B6B60; line-height: 1.25; } .masters-app-catalog .cat2-loc svg { width: 16px; height: 16px; flex: 0 0 auto; color: #9BB183; margin-top: 1px; } .masters-app-catalog .cat2-loc span { min-width: 0; overflow-wrap: anywhere; } .masters-app-catalog .cat2-rating { position: absolute; z-index: 2; top: 10px; left: 10px; display: inline-flex; min-height: 28px; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid rgba(92, 122, 72, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #46603A; font-size: 12px; font-weight: 700; line-height: 1; box-shadow: var(--redesign-shadow-soft); } .masters-app-catalog .cat2-rating svg { width: 13px; height: 13px; color: #5C7A48; } .masters-app-catalog .cat2-rating--new { max-width: calc(100% - 20px); } .masters-app-catalog .cat2-services { display: flex; min-width: 0; gap: 5px; overflow: hidden; } .masters-app-catalog .cat2-services > span { min-width: 0; max-width: 96px; overflow: hidden; padding: 4px 7px; border: 1px solid rgba(66, 62, 44, 0.1); border-radius: 999px; background: #F8F7F1; color: var(--redesign-color-text-muted); font-size: 10.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .masters-app-catalog .cat2-services > .cat2-services-more { flex: 0 0 auto; } .masters-app-catalog .cat2-slot { display: flex; align-items: center; gap: 8px; margin-top: auto; background: var(--catalog-surface-soft); border-radius: 15px; padding: 8px 9px; } .masters-app-catalog .cat2-slot-ic { flex: 0 0 auto; display: inline-flex; color: #5C7A48; } .masters-app-catalog .cat2-slot-ic svg { width: 19px; height: 19px; } .masters-app-catalog .cat2-slot-text { display: grid; gap: 1px; min-width: 0; } .masters-app-catalog .cat2-slot-text small { font-size: 10.5px; color: #6B7A5A; } .masters-app-catalog .cat2-slot-text strong { font-size: 12.5px; font-weight: 700; color: #2C2C27; line-height: 1.2; overflow-wrap: anywhere; } .masters-app-catalog .cat2-slot-text > span { color: var(--catalog-brand-deep); font-size: 13px; font-weight: 700; line-height: 1.2; } .masters-app-catalog .cat2-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 2px; border: 1px solid var(--catalog-brand-deep); border-radius: 15px; padding: 9px 11px; background: var(--catalog-brand-deep); color: #FFFFFF; font-size: 13px; font-weight: 700; text-decoration: none; } .masters-app-catalog :is(.cat2-back, .cat2-search-filter, .cat2-chip, .cat2-filter-btn, .cat2-copy h2 a, .cat2-cta):focus-visible { outline: none; box-shadow: var(--catalog-focus-ring); } /* 6. Empty state */ .masters-app-catalog .cat2-empty { position: relative; overflow: hidden; text-align: center; background: #FFFFFF; border: 1px solid rgba(66, 62, 44, 0.10); border-radius: 24px; padding: 34px 22px; margin-top: 16px; box-shadow: 0 14px 30px rgba(66, 62, 44, 0.06); } .masters-app-catalog .cat2-empty-leaf { position: absolute; right: -6px; bottom: -6px; width: 130px; height: 130px; background: var(--redesign-asset-botanical) right bottom / contain no-repeat; opacity: 0.4; } .masters-app-catalog .cat2-empty strong { display: block; font-family: var(--redesign-font-display); font-size: 22px; color: #2C2C27; } .masters-app-catalog .cat2-empty p { margin: 8px 0 18px; color: #6B6B60; } .masters-app-catalog .cat2-empty-actions { position: relative; z-index: 1; display: grid; gap: 10px; } .masters-app-catalog .cat2-btn-primary { background: #5C7A48; color: #FBFBF5; border-radius: 16px; padding: 14px; font-weight: 600; text-decoration: none; } .masters-app-catalog .cat2-btn-ghost { background: #FFFFFF; border: 1px solid rgba(92, 122, 72, 0.4); color: #3C5230; border-radius: 16px; padding: 14px; font-weight: 600; text-decoration: none; } /* Screen 2 reference — neutralise legacy green washes that outrank the cat2 base rules (wrapper lime radial, header/photo mint radials, white initials circle). Higher-specificity, route-scoped resets. */ .masters-app-catalog .public-stack.masters-app-catalog, .masters-app-catalog .cat2-header { background: none; background-image: none; border: 0; box-shadow: none; } .masters-app-catalog .cat2-photo { background: linear-gradient(160deg, #EFEDE3, #E5E2D5); background-image: linear-gradient(160deg, #EFEDE3, #E5E2D5); } .masters-app-catalog .cat2-photo.has-initials .master-card-initials { background: transparent; border-radius: 0; width: 100%; height: 100%; box-shadow: none; } /* Screen 2 reference — keep legacy surface decoration out of this explicitly owned component without changing unrelated platform cards. */ .masters-app-catalog .public-stack.masters-app-catalog, .masters-app-catalog .cat2-header, .masters-app-catalog .cat2-active-chips { background-image: none; background-color: transparent; box-shadow: none; border: 0; } .masters-app-catalog .cat2-card { background: var(--catalog-surface); background-image: none; } .masters-app-catalog .cat2-photo { background: linear-gradient(160deg, #EFEDE3, #E5E2D5); } .masters-app-catalog .cat2-slot { background: var(--catalog-surface-soft); background-image: none; } .masters-app-catalog .cat2-search-input, .masters-app-catalog .cat2-chip { background-image: none; background-color: var(--catalog-surface); } .masters-app-catalog .cat2-chip.is-active { background-color: var(--catalog-surface-soft); } /* Shared product geometry. Shell-specific width changes happen only in the responsive rules below; markup and facts stay identical. */ .masters-app-catalog .cat2-header, .masters-app-catalog .cat2-cards, .masters-app-catalog .cat2-empty { width: 100%; max-width: var(--catalog-content-max); margin-left: auto; margin-right: auto; } .masters-app-catalog .cat2-card { display: grid; grid-template-columns: minmax(118px, 38%) minmax(0, 1fr); gap: 12px; align-items: stretch; } .masters-app-catalog .cat2-card > .cat2-photo { width: auto; max-width: none; margin: 0; } /* Screen 2 reference — remove the legacy decorative green radial pseudo-glows (.catalog-app-header::after and the wrapper ::before) on the catalog route. */ .masters-app-catalog .public-stack.masters-app-catalog::before, .masters-app-catalog .public-stack.masters-app-catalog::after, .masters-app-catalog .cat2-header::before, .masters-app-catalog .cat2-header::after { content: none; background: none; } /* ========================================================================== Approved client Screen 3 «Фильтры» — refined compact controls (image3). Scoped to .catalog-filter-screen (client filter sheet + page; never admin). Replaces the 30x50 empty native checkboxes with compact 26px sage controls and the 151x94 empty radius cards with tidy compact chips. Palette/markup preserved; GET form + names unchanged. Route-scoped !important where legacy control rules set fixed oversized geometry. ========================================================================== */ .catalog-filter-screen .filter-location-list { display: grid; gap: 10px; } .catalog-filter-screen .filter-location-option { grid-template-columns: 34px minmax(0, 1fr) 26px !important; gap: 10px; min-height: 50px; align-items: center; padding: 9px 14px; border: 1px solid rgba(66, 62, 44, 0.12); border-radius: 16px; background: #FFFFFF; } .catalog-filter-screen .filter-location-option > span:not(.filter-location-icon) { font-size: 15px; color: #2C2C27; overflow-wrap: anywhere; } .catalog-filter-screen .filter-location-icon { color: #8FA97C; } .catalog-filter-screen .filter-location-option input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 26px !important; height: 26px !important; min-width: 26px; flex: 0 0 26px; align-self: center; margin: 0; padding: 0; border: 1.7px solid rgba(92, 122, 72, 0.55); border-radius: 8px; background: #FBFBF5; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .catalog-filter-screen .filter-location-option input[type="checkbox"]:checked { border-color: #5C7A48; background: #5C7A48 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L19 7'/%3E%3C/svg%3E") center / 16px no-repeat; } .catalog-filter-screen .filter-location-option input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(92, 122, 72, 0.2); } .catalog-filter-screen .filter-location-option.is-selected { border-color: rgba(92, 122, 72, 0.45); background: #EEF2E4; } /* Radius — tidy compact chips instead of tall empty cards */ .catalog-filter-screen .filter-radius-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } .catalog-filter-screen .filter-radius-option { min-height: 46px !important; padding: 10px 8px !important; border: 1px solid rgba(66, 62, 44, 0.12) !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center; font-size: 13.5px; color: #3A3A33; background: #FFFFFF; } .catalog-filter-screen .filter-radius-option span { line-height: 1.15; } .catalog-filter-screen .filter-radius-option.is-selected { border-color: rgba(92, 122, 72, 0.45) !important; background: #E6EBD8 !important; color: #3C5230; font-weight: 600; } .catalog-filter-screen .filter-radius-option:focus-within { border-color: var(--redesign-color-border-active) !important; outline: 3px solid rgba(92, 122, 72, 0.22); outline-offset: 2px; } .catalog-filter-screen .filter-input-card { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; min-width: 0; border: 1px solid rgba(66, 62, 44, 0.12); border-radius: 16px; background: #FFFFFF; } .catalog-filter-screen .filter-search-card { grid-template-columns: auto minmax(0, 1fr) !important; } .catalog-filter-screen .filter-input-card:has(input[type="date"]) { grid-template-columns: auto auto minmax(0, 1fr) !important; } .catalog-filter-screen .filter-input-card input { min-width: 0; max-width: 100%; color: #2C2C27; } /* Screen 3 — hard-cap control geometry (legacy rules stretch them tall). */ .catalog-filter-screen .filter-location-option { align-items: center !important; } .catalog-filter-screen .filter-location-option input[type="checkbox"] { box-sizing: border-box !important; height: 26px !important; max-height: 26px !important; align-self: center !important; } .catalog-filter-screen .filter-radius-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: minmax(46px, auto) !important; align-items: stretch !important; } .catalog-filter-screen .filter-radius-option { box-sizing: border-box !important; height: auto !important; min-height: 46px !important; max-height: none !important; white-space: normal; } .catalog-filter-screen .filter-location-option input[type="checkbox"] { min-height: 26px !important; } @media (max-width: 480px) { :is(body > .catalog-filter-screen, .catalog-filter-screen--page)[data-shared-master-filter="rx-c3"] .filter-input-pair { grid-template-columns: minmax(0, 1fr) !important; } } @media (prefers-reduced-motion: reduce) { .catalog-filter-screen[data-shared-master-filter="rx-c3"] :is(.filter-input-card, .filter-location-option, .filter-radius-option, .catalog-filter-screen__close, .catalog-filter-screen__footer .button, .catalog-filter-reset) { transition: none !important; animation: none !important; transform: none !important; } } /* Screen 2 catalog polish — refined no-photo placeholder (elegant monogram in a soft circle over a warm-beige + watercolor-branch tile, not a big initials blob) and a specialty that stays plain text at every width. */ .masters-app-catalog .cat2-photo.has-initials { display: flex !important; align-items: center; justify-content: center; background: linear-gradient(160deg, #EFEDE3, #E5E2D5) !important; } .masters-app-catalog .cat2-photo.has-initials::before { content: ""; position: absolute; inset: 0; background: var(--redesign-asset-botanical) center 60% / 72% no-repeat; opacity: 0.22; pointer-events: none; } .masters-app-catalog .cat2-photo.has-initials .master-card-initials { position: static; inset: auto; width: 74px; height: 74px; border: 1.5px solid rgba(92, 122, 72, 0.45); border-radius: 50%; background: rgba(255, 255, 255, 0.6); color: #6E8A5A; font-family: var(--redesign-font-display); font-size: 25px; font-weight: 600; letter-spacing: 0; z-index: 1; box-shadow: 0 6px 16px rgba(66, 62, 44, 0.08); } .masters-app-catalog .cat2-copy .catalog-speciality { background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; display: block; font-size: 14px; color: #5A5A50; font-weight: 400; } /* ========================================================================== Approved client Screen 10 «Мои мастера» — card hierarchy (image12). The master NAME is the serif emphasis; the specialty is a calm muted subtitle below it (was a dominant sage-mint chip above the name). Scoped to the route; client-scoped !important justified to beat the high-specificity legacy rules. ========================================================================== */ body.page-pwa-my-masters .client-master-card .client-master-info > div { display: flex !important; flex-direction: column; gap: 3px; } body.page-pwa-my-masters .client-master-card h2 { order: -1; font-family: var(--redesign-font-display) !important; font-size: 23px !important; line-height: 1.06 !important; font-weight: 600 !important; color: #2C2C27 !important; margin: 0 !important; } body.page-pwa-my-masters .client-master-card .client-kicker { order: 0; background: none !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; font-family: var(--redesign-font-ui) !important; font-size: 13.5px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: #6B6B60 !important; } body.page-pwa-my-masters .client-master-card .client-master-info > div > p { order: 1; color: #6B6B60; overflow-wrap: anywhere; } /* ========================================================================== Public client-facing web chrome — approved palette (no old purple/CRM). Scoped to body.page-platform (/, /masters.php and other public pages) and body.page-master (/master.php). Remaps the legacy blackberry/indigo tokens to sage/ink and fixes the hardcoded purple logo badge + footer links, so the shared header/nav/footer/buttons read as the approved client system. Admin, platform-admin and pwa-master keep their own palette (different body classes). Content/structure/links unchanged. ========================================================================== */ body.page-platform, body.page-master { --ok-blackberry: #5C7A48; --ok-blackberry-deep: #2C2C27; --ok-plum: #6E8A5A; --ok-grape: #5C7A48; --primary: #5C7A48; --primary-strong: #46603A; --text: #2C2C27; } body.page-platform .site-brand-badge, body.page-master .site-brand-badge { background: linear-gradient(135deg, #8FA97C 0%, #5C7A48 100%) !important; box-shadow: 0 14px 30px rgba(92, 122, 72, 0.22) !important; } body.page-platform .site-footer a, body.page-master .site-footer a, body.page-platform .site-header a, body.page-master .site-header a { color: #46603A !important; } body.page-platform .site-header a:hover, body.page-master .site-header a:hover { color: #2C2C27 !important; } /* Public master profile (/master.php) — reuse the approved Screen 4 photo-left layout by enabling page-pwa-client + page-master-profile-s4 on the page. Bare .page-pwa-client paints a green radial on the body, so restore the approved warm-ivory canvas here (the S4 .s4-* rules are untouched, so /pwa/master.php is unaffected). The web header/footer live outside the S4 markup. */ body.page-master.page-pwa-client { background: #F5F3EC !important; } body.page-master.page-pwa-client .master-mini-site { width: min(680px, 100%); margin: 0 auto; padding-left: 16px; padding-right: 16px; } /* ========================================================================== UX Фаза 3 — профиль мастера на ноутбуке/десктопе (>=1025px). Референс S4 — телефонная одноколонка (680px), из-за чего фото/описание/ услуги/характеристики жались в узкую колонку с огромными полями. На широких экранах раскрываем рабочую область и раскладываем в 2 колонки: слева sticky — фото + характеристики (s4-hero) и контакты (s4-contact); справа — описание (s4-quote), услуги (s4-services) и портфолио (s4-portfolio). Мобильная approved-композиция ниже 1025px не затрагивается; /pwa/master.php (.pwa-shell) не затрагивается. ========================================================================== */ @media (min-width: 1025px) { body.page-master.page-pwa-client .master-mini-site { width: min(1180px, calc(100% - 64px)); grid-template-columns: 360px minmax(0, 1fr); grid-template-areas: "hero quote" "hero services" "contact services" "contact portfolio"; column-gap: 40px; row-gap: 24px; align-items: start; } body.page-master.page-pwa-client .s4-hero { grid-area: hero; position: sticky; top: 24px; grid-template-columns: minmax(0, 1fr); gap: 18px; text-align: left; } /* фото на всю ширину sidebar-колонки */ body.page-master.page-pwa-client .s4-hero .s4-hero-photo { width: 100%; aspect-ratio: 4 / 5; height: auto; } body.page-master.page-pwa-client .s4-contact { grid-area: contact; margin-top: 0; } body.page-master.page-pwa-client .s4-quote { grid-area: quote; margin-top: 0; } body.page-master.page-pwa-client .s4-services { grid-area: services; margin-top: 0; } body.page-master.page-pwa-client .s4-portfolio { grid-area: portfolio; margin-top: 0; } /* услуги в 2 колонки, портфолио остаётся сеткой */ body.page-master.page-pwa-client .s4-service-list.is-view-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } @media (min-width: 1440px) { body.page-master.page-pwa-client .master-mini-site { width: min(1280px, calc(100% - 96px)); grid-template-columns: 380px minmax(0, 1fr); } } /* ========================================================================== Public home (/) — approved client hero. Serif display headline (was a heavy Segoe-UI sans), soft-sage eyebrow, and no lavender/CRM hero tint. Scoped to body.page-platform so only the public client-facing pages are affected. Content/links/CTAs unchanged. ========================================================================== */ body.page-platform .hero-copy h1, body.page-platform .hero-platform h1 { font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif) !important; font-weight: 600 !important; letter-spacing: 0.004em; line-height: 1.03; color: #2C2C27 !important; } body.page-platform .eyebrow { background: #EAEDDF !important; color: #46603A !important; } body.page-platform .hero::before, body.page-platform .hero::after, body.page-platform .hero-platform::before, body.page-platform .hero-premium::before, body.page-platform .home-funnel::before { background: none !important; } /* Section headings across the home read as the approved serif too */ body.page-platform .home-funnel h2, body.page-platform .home-funnel h3 { font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif) !important; color: #2C2C27; } /* Public home — drop the lavender gradient wash on the hero copy panel. */ body.page-platform .hero-copy { background: none !important; } /* Public pages — replace the pink/lavender body radials and the coral hero pseudo-glow with the approved warm-ivory canvas. */ body.page-platform { background-image: none !important; background-color: #F5F3EC !important; } body.page-platform .hero-copy::before, body.page-platform .hero-copy::after { content: none !important; background: none !important; } /* Public home direction cards — approved Screen-1 language: warm-white card, soft-sage icon tile, no mint/indigo radial wash (the tile carried a hardcoded rgba(64,48,132) indigo glow). Marketing copy + «Выбрать» CTA are kept. Scoped to body.page-platform. */ body.page-platform .direction-card { background-color: #FFFFFF !important; background-image: none !important; border: 1px solid rgba(66, 62, 44, 0.12); box-shadow: 0 10px 24px rgba(66, 62, 44, 0.06); } body.page-platform .direction-card-visual { background-color: #EAEDDF !important; background-image: none !important; border: 1px solid rgba(92, 122, 72, 0.14); } body.page-platform .direction-card-copy strong { font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif) !important; font-size: 20px; color: #2C2C27; } /* ========================================================================== Client catalog / my-masters visual bugfixes. 1) A real photo must never carry a monogram overlay — the cat2 cards use .cat2-photo, which the legacy .master-card-visual.has-image hide rule never matched, so initials rendered on top of real photos. 2) My-masters placeholder avatar uses the same warm-ivory monogram tone as the catalog placeholder (was a saturated green blob). ========================================================================== */ .masters-app-catalog .cat2-photo.has-image .master-card-initials { display: none !important; } body.page-pwa-my-masters .client-master-card .client-master-visual.has-initials { background: linear-gradient(160deg, #EFEDE3, #E5E2D5) !important; color: #6E8A5A !important; } body.page-pwa-my-masters .client-master-card .client-master-visual.has-initials span { font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif) !important; font-weight: 600 !important; letter-spacing: 0 !important; color: #6E8A5A !important; } /* ========================================================================== Approved client Screen 5 «Услуга» — reference restyle (image5). CSS-only, scoped to body.page-pwa-service (public/booking keeps its own look; the JS booking form + all data-* hooks are untouched). Turns the hybrid hero glyph + chip/icon section headers into the approved warm-ivory hero with a circular service mark, serif title, description, clock/tag facts and a watercolor branch; serif «Что входит»/«Доп. опции» headings; a soft-sage «Итого» bar. Add-on circular checkboxes were already fixed. ========================================================================== */ body.page-pwa-service .booking-step-heading { display: none !important; } body.page-pwa-service .flow-app-header .eyebrow { display: none; } body.page-pwa-service .flow-app-header { margin-bottom: 10px; } /* hero card — warm ivory, circular mark, serif title, botanical */ body.page-pwa-service .booking-service-hero { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; background: #FCFBF6 !important; background-image: none !important; border: 1px solid rgba(66, 62, 44, 0.12); border-radius: 26px; padding: 20px 18px; overflow: hidden; box-shadow: 0 14px 30px rgba(66, 62, 44, 0.06); } body.page-pwa-service .booking-service-hero::after { content: ""; position: absolute; right: -14px; top: 6px; width: 150px; height: 190px; background: var(--redesign-asset-botanical) right top / contain no-repeat; opacity: 0.4; pointer-events: none; } body.page-pwa-service .booking-service-hero__visual { width: 92px !important; height: 92px !important; border-radius: 50% !important; background: #EEF2E4 !important; background-image: none !important; border: 1px solid rgba(92, 122, 72, 0.22); color: #5C7A48; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } body.page-pwa-service .booking-service-hero__visual svg { width: 46px; height: 46px; } body.page-pwa-service .booking-service-hero__visual img { width: 100%; height: 100%; object-fit: cover; } body.page-pwa-service .booking-service-hero__copy { position: relative; z-index: 1; min-width: 0; } body.page-pwa-service .booking-service-hero__copy .eyebrow { display: none; } body.page-pwa-service .booking-service-hero__copy h2 { font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif) !important; font-size: 26px; line-height: 1.05; color: #2C2C27; margin: 0 0 6px; overflow-wrap: anywhere; } body.page-pwa-service .booking-service-hero__copy p { font-size: 14px; line-height: 1.4; color: #5A5A50; margin: 0 0 12px; max-width: 46ch; } body.page-pwa-service .booking-service-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; } body.page-pwa-service .booking-service-hero__meta span, body.page-pwa-service .booking-service-hero__meta strong { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: #2C2C27; font-weight: 500; } body.page-pwa-service .booking-service-hero__meta span::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A48' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 7.6V12l3 1.8'/%3E%3C/svg%3E") center/contain no-repeat; } body.page-pwa-service .booking-service-hero__meta strong::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A48' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12.5 12.5 20l-8-8V4h8Z'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.3'/%3E%3C/svg%3E") center/contain no-repeat; } /* section headings: serif, no chip/icon clutter */ body.page-pwa-service .booking-card__head { display: block !important; margin-bottom: 12px; } body.page-pwa-service .booking-card__head .booking-card__icon { display: none !important; } body.page-pwa-service .booking-card__head h3, body.page-pwa-service .booking-card__head p { display: none !important; } body.page-pwa-service .booking-card__head .eyebrow { display: inline-block !important; background: none !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif) !important; font-size: 23px !important; font-weight: 600 !important; color: #2C2C27 !important; } /* «Что входит» list → clean sage bullets */ body.page-pwa-service .booking-check-list { display: grid; gap: 8px; } body.page-pwa-service .booking-check-list span { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: #2C2C27; } body.page-pwa-service .booking-check-list span::before { content: ""; width: 7px; height: 7px; margin-top: 7px; flex: 0 0 7px; border-radius: 50%; background: #5C7A48; } body.page-pwa-service .booking-included-card--soft p { color: #6B6B60; font-size: 14px; line-height: 1.45; } /* «Итого» — soft sage bar */ body.page-pwa-service .booking-total-card { background: #E6EBD8 !important; background-image: none !important; border: 1px solid rgba(92, 122, 72, 0.22) !important; border-radius: 24px; } body.page-pwa-service .booking-total-card .eyebrow { background: none !important; padding: 0 !important; border: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif) !important; font-size: 22px !important; font-weight: 600 !important; color: #2C2C27 !important; } body.page-pwa-service .booking-total-card [data-order-count], body.page-pwa-service .booking-total-card [data-total-price], body.page-pwa-service .booking-total-card [data-total-duration] { color: #3C4A2E; } body.page-pwa-service .booking-total-card .button-primary { background: #3C5230 !important; color: #FBFBF5 !important; white-space: nowrap; } /* My-masters — the fixed 89px + overflow:hidden card clipped the location district. The low-value status meta (last visit / next booking / window / favorite) is not part of the approved card (image12), so hide it outright, then let the card grow to show name + specialty + full location cleanly. */ body.page-pwa-my-masters .client-master-card .client-master-meta, body.page-pwa-my-masters .client-master-card .client-master-actions { display: none !important; } body.page-pwa-my-masters .client-master-card { height: auto !important; min-height: 116px !important; max-height: none !important; overflow: hidden !important; align-items: center; padding-top: 12px !important; padding-bottom: 12px !important; } body.page-pwa-my-masters .client-master-card .client-master-info, body.page-pwa-my-masters .client-master-card .client-master-info > div { overflow: visible !important; max-height: none !important; } body.page-pwa-my-masters .client-master-card .client-master-info > div > p { white-space: normal; overflow: visible; } /* stray decorative pill on the avatar tile */ body.page-pwa-my-masters .client-master-card .client-master-visual::after { display: none !important; } /* Catalog filter sheet — search field (search moved here from the default top). */ .catalog-filter-screen .filter-search-card { align-items: center; } .catalog-filter-screen .filter-search-card input[type="search"] { width: 100%; border: none; background: transparent; font-size: 15px; color: #2C2C27; font-family: inherit; } /* ========================================================================== Approved client Screen 5 «Услуга» — reference ARCHITECTURE (image5). Scoped to body.page-pwa-service (public/booking untouched). Markup adds a clean top bar, merges the hero + «Что входит» into one card (.s5-maincard), and lays «Итого» out horizontally — all JS hooks/data-* preserved. This block builds on the earlier Screen-5 restyle. ========================================================================== */ /* the outer section is just a transparent container in reference mode */ body.page-pwa-service .s5-service.section-card { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* 1. top bar: back | centered serif «Услуга» | menu */ body.page-pwa-service .s5-topbar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; margin: 2px 0 14px; } body.page-pwa-service .s5-back, body.page-pwa-service .s5-menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(66, 62, 44, 0.12); background: #FFFFFF; color: #2C2C27; box-shadow: 0 8px 18px rgba(66, 62, 44, 0.06); } body.page-pwa-service .s5-back svg, body.page-pwa-service .s5-menu svg { width: 22px; height: 22px; } body.page-pwa-service .s5-topbar-title { margin: 0; text-align: center; font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif); font-size: 27px; font-weight: 600; color: #2C2C27; } /* 2. merged main card */ body.page-pwa-service .s5-maincard { position: relative; overflow: hidden; background: #FCFBF6; border: 1px solid rgba(66, 62, 44, 0.12); border-radius: 28px; padding: 20px 18px 22px; box-shadow: 0 16px 34px rgba(66, 62, 44, 0.06); margin-bottom: 16px; } body.page-pwa-service .s5-maincard-botanical { position: absolute; right: -18px; top: 30px; width: 176px; height: 340px; background: var(--redesign-asset-botanical) right top / contain no-repeat; opacity: 0.42; pointer-events: none; z-index: 0; } /* inner hero + «что входит» become flat sections inside the card */ body.page-pwa-service .s5-maincard .booking-service-hero { position: relative; z-index: 1; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 0 4px !important; } body.page-pwa-service .s5-maincard .booking-card.booking-included-card { position: relative; z-index: 1; background: none !important; background-image: none !important; border: 0 !important; border-top: 1px solid rgba(66, 62, 44, 0.12) !important; box-shadow: none !important; border-radius: 0 !important; margin: 16px 0 0 !important; padding: 16px 0 0 !important; } /* 3. horizontal «Итого» bar */ body.page-pwa-service .s5-total { position: relative; overflow: hidden; display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 14px; background: #E6EBD8 !important; background-image: none !important; border: 1px solid rgba(92, 122, 72, 0.22) !important; border-radius: 24px; padding: 16px 18px; } body.page-pwa-service .s5-total .order-bar-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1 1 auto; width: auto !important; min-width: 0; position: relative; z-index: 1; } body.page-pwa-service .s5-total .eyebrow { background: none !important; padding: 0 !important; border: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif) !important; font-size: 24px !important; font-weight: 600 !important; color: #2C2C27 !important; } body.page-pwa-service .s5-total-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; } body.page-pwa-service .s5-total-fact { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 600; color: #3C4A2E; } body.page-pwa-service .s5-total-fact::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; } body.page-pwa-service .s5-fact-time::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A48' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 7.6V12l3 1.8'/%3E%3C/svg%3E") center/contain no-repeat; } body.page-pwa-service .s5-fact-price::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A48' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12.5 12.5 20l-8-8V4h8Z'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.3'/%3E%3C/svg%3E") center/contain no-repeat; } body.page-pwa-service .s5-total-count { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: #6B7A5A; } body.page-pwa-service .s5-total-note { align-self: flex-start; text-align: left; font-size: 11.5px; color: #6B7A5A; line-height: 1.3; max-width: 22ch; } body.page-pwa-service .s5-total-cta { flex: 0 0 auto; width: auto !important; max-width: 52% !important; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: #3C5230 !important; color: #FBFBF5 !important; border-radius: 20px; padding: 14px 16px; white-space: normal; line-height: 1.15; position: relative; z-index: 1; } body.page-pwa-service .s5-total-cta svg { width: 20px; height: 20px; } @media (max-width: 360px) { body.page-pwa-service .s5-total { flex-wrap: wrap; } body.page-pwa-service .s5-total-cta { width: 100%; margin-top: 4px; } } /* Client empty-state primary action (pwa_empty_state) — approved sage, not the legacy purple gradient. Applies on every client route (time.php and the login-gated rating/settings/beauty/history empty states). */ body.page-pwa-client .pwa-primary-action { background: #3C5230 !important; background-image: none !important; color: #FBFBF5 !important; } /* Client empty-state icon — sage, not legacy purple. */ body.page-pwa-client .pwa-empty-icon { color: #5C7A48 !important; background: #EAEDDF !important; } /* Client top-bar back/icon button — warm ink, not legacy indigo. */ body.page-pwa-client .pwa-icon-button { color: #2C2C27 !important; } /* Services launcher direction tiles on the PWA — sage, not indigo. */ body.page-pwa-client .direction-card-visual, body.page-pwa-client .direction-card-visual img { color: #5C7A48 !important; border-color: rgba(92, 122, 72, 0.20) !important; } /* ========================================================================== Approved MASTER Screen 19 «Главный экран мастера» (reference image1). Scoped to body.page-pwa-master (web /admin dashboard keeps its own mode). Hero: photo/monogram left, serif name + rating pill, sage-circle fact rows (Номер / Почта / Выполненных процедур / Локация), watercolor branch right. Menu: five reference rows (Заявки/Клиенты/Услуги/Портфолио/История) with sage circle icons, serif titles, muted captions. Purple links -> sage. ========================================================================== */ body.page-pwa-master { background: #F5F3EC; } body.page-pwa-master .shared-master-dashboard--pwa .admin-profile-card { position: relative; overflow: hidden; background: #FFFFFF; border: 1px solid rgba(66, 62, 44, 0.10); border-radius: 26px; box-shadow: 0 14px 30px rgba(66, 62, 44, 0.07); padding: 18px; } body.page-pwa-master .m19-botanical { position: absolute; right: -14px; top: 8px; width: 140px; height: 210px; background: var(--redesign-asset-botanical) right top / contain no-repeat; opacity: 0.42; pointer-events: none; } body.page-pwa-master .shared-master-dashboard--pwa .admin-profile-avatar { width: 108px; height: 128px; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, #EFEDE3, #E5E2D5); color: #6E8A5A; display: inline-flex; align-items: center; justify-content: center; font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif); font-size: 30px; font-weight: 600; } body.page-pwa-master .shared-master-dashboard--pwa .admin-profile-avatar img { width: 100%; height: 100%; object-fit: cover; } body.page-pwa-master .m19-namerow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 2px 0 8px; } body.page-pwa-master .m19-namerow h2 { margin: 0; font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif); font-size: 28px; line-height: 1.05; color: #2C2C27; } body.page-pwa-master .m19-rating { display: inline-flex; align-items: center; gap: 6px; background: #F3EFDC; border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 600; color: #3C5230; } body.page-pwa-master .m19-rating svg { width: 15px; height: 15px; color: #3C5230; } body.page-pwa-master .m19-facts { display: grid; gap: 9px; position: relative; z-index: 1; } body.page-pwa-master .m19-fact { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #2C2C27; min-width: 0; overflow-wrap: anywhere; } body.page-pwa-master .m19-fact em { font-style: normal; color: #6B6B60; } body.page-pwa-master .m19-fact-ic { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #EAEDDF; color: #5C7A48; } body.page-pwa-master .m19-fact-ic svg { width: 18px; height: 18px; } /* menu rows */ body.page-pwa-master .pwa-master-overview-menu { display: grid; gap: 12px; } body.page-pwa-master .pwa-master-overview-link { display: flex; align-items: center; gap: 14px; background: #FFFFFF; border: 1px solid rgba(66, 62, 44, 0.10); border-radius: 22px; padding: 15px 16px; box-shadow: 0 10px 24px rgba(66, 62, 44, 0.05); text-decoration: none; color: #2C2C27; } body.page-pwa-master .pwa-master-overview-link__icon { flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #EAEDDF; color: #5C7A48; } body.page-pwa-master .pwa-master-overview-link__icon svg { width: 24px; height: 24px; } body.page-pwa-master .pwa-master-overview-link__copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; } body.page-pwa-master .pwa-master-overview-link__copy strong { font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif); font-size: 21px; font-weight: 600; color: #2C2C27; } body.page-pwa-master .pwa-master-overview-link__copy small { font-size: 13px; color: #8A8A7C; } body.page-pwa-master .pwa-master-overview-link__meta { font-size: 12px; color: #46603A; background: #EEF2E4; border-radius: 999px; padding: 3px 9px; } body.page-pwa-master .pwa-master-overview-link__meta:empty { display: none; } body.page-pwa-master .pwa-master-overview-link__chev { color: #9BB183; font-weight: 500; } /* purple leaks on master dashboard secondary blocks -> sage/ink */ body.page-pwa-master .admin-section-title-row a, body.page-pwa-master .admin-next-booking a:not(.button), body.page-pwa-master a.pwa-master-profile-tool { color: #46603A; } body.page-pwa-master .admin-next-booking .button, body.page-pwa-master .admin-overview-booking-card .button { background: #FFFFFF; border: 1px solid rgba(92, 122, 72, 0.45); color: #3C5230; } /* S19 fact rows — label + value flow as one text block (no mid-word breaks, no orphaned values). */ body.page-pwa-master .m19-fact-txt { min-width: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; } body.page-pwa-master .m19-fact-txt em { font-style: normal; color: #6B6B60; white-space: nowrap; } /* ========================================================================== MASTER purple/CRM sweep — body.page-pwa-master scope. The remaining legacy indigo (#403084/#4c005e) computed on eyebrows, secondary buttons, booking date pills, status badges and chevrons across schedule/accounting/booking/ section routes. Recolors to the approved sage/ink; web /admin keeps its own palette (different body class). ========================================================================== */ body.page-pwa-master .eyebrow { color: #46603A !important; background: #EAEDDF !important; } body.page-pwa-master .button-secondary { color: #3C5230 !important; border-color: rgba(92, 122, 72, 0.45) !important; background: #FFFFFF !important; } body.page-pwa-master .button-primary { background: #3C5230 !important; color: #FBFBF5 !important; } body.page-pwa-master .admin-booking-date-pill { color: #3C5230 !important; background: #EEF2E4 !important; border-color: rgba(92, 122, 72, 0.3) !important; } body.page-pwa-master .status-badge { color: #3C5230 !important; background: #EAEDDF !important; border-color: rgba(92, 122, 72, 0.3) !important; } body.page-pwa-master .admin-action-card b, body.page-pwa-master .admin-row b, body.page-pwa-master .admin-overview-booking-card b { color: #9BB183 !important; border-color: rgba(92, 122, 72, 0.3) !important; } /* ========================================================================== MASTER Screen 31 «Детали записи» polish (reference image13). The composition already matches (date pill, Услуга/Цена/Клиент cards, chat row, red cancel bar). Fixes the two quality-bar fails: the invoice mini-form crammed its fields into columns (clipped «Комментарий» label and mid-word textarea placeholder), and the «Новый клиент» trust badge rendered in an off-palette pink. Scoped to body.page-pwa-master; forms unchanged. ========================================================================== */ body.page-pwa-master .admin-booking-money-card .inline-form { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } body.page-pwa-master .admin-booking-money-card .inline-form label { display: grid !important; gap: 6px; width: 100% !important; min-width: 0; } body.page-pwa-master .admin-booking-money-card .inline-form label span { white-space: nowrap; font-size: 13px; color: #6B6B60; } body.page-pwa-master .admin-booking-money-card .inline-form input, body.page-pwa-master .admin-booking-money-card .inline-form textarea { width: 100% !important; box-sizing: border-box; border: 1px solid rgba(66, 62, 44, 0.14); border-radius: 14px; background: #FFFFFF; padding: 11px 12px; font-size: 14px; color: #2C2C27; font-family: inherit; } body.page-pwa-master .admin-booking-money-card .inline-form .button { justify-self: start; } body.page-pwa-master .trust-badge { background: #EAEDDF !important; color: #46603A !important; border: 1px solid rgba(92, 122, 72, 0.3) !important; } /* Integration parity hotfix — web admin booking invoice card mobile width. The desktop booking detail polish gave the money card a grid track wider than the 320px web viewport. Keep POST forms/actions untouched; only constrain the visual grid on the web admin booking detail route. */ @media (max-width: 560px) { body.admin-page.admin-app:not(.page-pwa-master) .shared-master-booking .admin-booking-money-card { grid-template-columns: minmax(0, 1fr); overflow: hidden; } body.admin-page.admin-app:not(.page-pwa-master) .shared-master-booking .admin-booking-money-card > *, body.admin-page.admin-app:not(.page-pwa-master) .shared-master-booking .admin-booking-money-card .inline-form, body.admin-page.admin-app:not(.page-pwa-master) .shared-master-booking .admin-booking-money-card .inline-form label { width: 100%; max-width: 100%; min-width: 0; } body.admin-page.admin-app:not(.page-pwa-master) .shared-master-booking .admin-booking-money-card .inline-form { display: grid; grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== MASTER-facing web admin chrome sweep (screens 21-29 quality bar). The /admin top bar (brand, burger, back) computed legacy indigo, and the «Новый клиент» trust badge rendered pink on client screens. Recolors the shared admin chrome to the approved ink/sage. Scoped to body.admin-page .admin-app (master cabinet); no forms/logic touched. ========================================================================== */ body.admin-page.admin-app .admin-app-topbar__brand { color: #2C2C27 !important; } body.admin-page.admin-app .admin-app-topbar a, body.admin-page.admin-app .admin-app-topbar button, body.admin-page.admin-app .admin-app-topbar svg { color: #3C5230 !important; } body.admin-page.admin-app .trust-badge { background: #EAEDDF !important; color: #46603A !important; border: 1px solid rgba(92, 122, 72, 0.3) !important; } /* Master admin chrome sweep, part 2 — page h1s, the burger summary and the sidebar/menu links also computed legacy indigo. */ body.admin-page.admin-app h1 { color: #2C2C27 !important; border-color: rgba(66, 62, 44, 0.14) !important; } body.admin-page.admin-app summary, body.admin-page.admin-app .admin-sidebar-preview, body.admin-page.admin-app nav a, body.admin-page.admin-app nav a.is-active { color: #3C5230 !important; } /* Master admin chrome sweep, part 3 — «Связь через Окошко» chip in the client card's booking-links block. */ body.admin-page.admin-app .booking-links span { color: #46603A !important; border-color: rgba(92, 122, 72, 0.3) !important; background: #EAEDDF !important; } /* ========================================================================== MASTER Screen 20 «Заявки» — approved request-card anatomy (image2). Included-items + facts side by side, client row with trust score and an honest disabled chat chip, comment quote, INLINE Принять/Отклонить. ========================================================================== */ body.page-pwa-master .m20-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: start; } body.page-pwa-master .m20-included small { display: block; font-size: 12.5px; color: #8A8A7C; margin-bottom: 6px; } body.page-pwa-master .m20-included ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; } body.page-pwa-master .m20-included li { position: relative; padding-left: 14px; font-size: 13.5px; color: #2C2C27; line-height: 1.3; } body.page-pwa-master .m20-included li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #5C7A48; } body.page-pwa-master .m20-included-empty { margin: 0; font-size: 13px; color: #8A8A7C; } body.page-pwa-master .m20-clientrow { display: flex; align-items: center; gap: 10px; min-width: 0; } body.page-pwa-master .m20-client-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } body.page-pwa-master .m20-trust { display: inline-flex; align-items: center; gap: 4px; background: #F3EFDC; border-radius: 999px; padding: 2px 9px; font-size: 12.5px; font-weight: 600; color: #3C5230; } body.page-pwa-master .m20-trust svg { width: 12px; height: 12px; } body.page-pwa-master .m20-chat { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(66, 62, 44, 0.14); border-radius: 14px; padding: 8px 11px; font-size: 12.5px; color: var(--redesign-color-brand-primary-deep); background: var(--redesign-color-surface-soft-3); text-decoration: none; } body.page-pwa-master .m20-chat :where(svg, i) { width: 16px; height: 16px; } body.page-pwa-master .m20-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; } body.page-pwa-master .m20-actions form { margin: 0; display: contents; } body.page-pwa-master .m20-actions .button { width: 100%; border-radius: 16px; padding: 13px 10px; font-size: 15px; white-space: nowrap; } body.page-pwa-master .m20-accept { background: #5C7A48 !important; color: #FBFBF5 !important; } body.page-pwa-master .m20-reject { background: #FFFFFF !important; border: 1px solid rgba(92, 122, 72, 0.45) !important; color: #3C5230 !important; } body.page-pwa-master .m20-detail-link { display: inline-flex; align-items: center; gap: 6px; justify-content: center; margin-top: 2px; font-size: 13.5px; color: #46603A; text-decoration: none; } @media (max-width: 430px) { body.page-pwa-master .m20-body { grid-template-columns: 1fr; } } /* ========================================================================== MASTER Screens 23-27 — services state architecture. S23 list cards (thumb + title/status/facts + Редактировать), S24 edit state danger-zone, S25 create actions, S27 delete confirmation card. Scoped to body.admin-page.admin-app; all forms unchanged. ========================================================================== */ body.admin-page.admin-app .m23-create-cta { margin: 6px 0 14px; display: inline-flex; } body.admin-page.admin-app .m23-list { display: grid; gap: 14px; } body.admin-page.admin-app .m23-card { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px 16px; align-items: center; background: #FFFFFF; border: 1px solid rgba(66, 62, 44, 0.10); border-radius: 20px; padding: 14px; } body.admin-page.admin-app .m23-thumb { width: 96px; height: 96px; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #EFEDE3, #E5E2D5); display: flex; align-items: center; justify-content: center; color: #9DA98B; } body.admin-page.admin-app .m23-thumb img { width: 100%; height: 100%; object-fit: cover; } body.admin-page.admin-app .m23-thumb-glyph svg { width: 40px; height: 40px; } body.admin-page.admin-app .m23-copy { display: grid; gap: 6px; min-width: 0; } body.admin-page.admin-app .m23-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } body.admin-page.admin-app .m23-title { font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif); font-size: 20px; color: #2C2C27; } body.admin-page.admin-app .m23-desc { margin: 0; font-size: 13.5px; color: #6B6B60; overflow-wrap: anywhere; } body.admin-page.admin-app .m23-facts { display: flex; gap: 14px; font-size: 14px; font-weight: 600; color: #3C5230; } body.admin-page.admin-app .m23-edit { justify-self: start; margin-top: 4px; } body.admin-page.admin-app .m24-back { color: #46603A !important; text-decoration: none; } body.admin-page.admin-app .m24-form-actions { display: flex; gap: 10px; margin-top: 10px; } body.admin-page.admin-app .m24-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(180, 70, 70, 0.25); border-radius: 16px; background: #FBF2F0; } body.admin-page.admin-app .m24-danger-zone strong { color: #A04040; } body.admin-page.admin-app .m24-danger-zone p { margin: 2px 0 0; font-size: 13px; color: #8A6B66; } body.admin-page.admin-app .m27-confirm { max-width: 560px; } body.admin-page.admin-app .m27-warning { display: flex; gap: 12px; align-items: flex-start; background: #FBF2F0; border: 1px solid rgba(180, 70, 70, 0.25); border-radius: 16px; padding: 14px 16px; margin: 12px 0; } body.admin-page.admin-app .m27-warning-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #F3D9D4; color: #A04040; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; } body.admin-page.admin-app .m27-warning strong { color: #A04040; } body.admin-page.admin-app .m27-warning p { margin: 4px 0 0; font-size: 13.5px; color: #6B6B60; } body.admin-page.admin-app .m27-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: #2C2C27; margin-bottom: 16px; } body.admin-page.admin-app .m27-actions { display: flex; gap: 10px; align-items: center; } body.admin-page.admin-app .m27-actions form { margin: 0; } body.admin-page.admin-app .m27-actions .button-danger { background: #B44646 !important; color: #FFF6F4 !important; border: 0 !important; } /* S27 actions — two equal columns, no button clipping. */ body.admin-page.admin-app .m27-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; } body.admin-page.admin-app .m27-actions .button, body.admin-page.admin-app .m27-actions form .button { width: 100%; white-space: normal; line-height: 1.2; } /* ========================================================================== MASTER Screens 34-44 «Окошко.Деньги» — DERIVED REFERENCE PASS. Patterns inherited from the approved accounting family (S34 image16: period pills with sage-filled active, big serif profit KPI with botanical, sage circle-icon rows) and the master system (S19/S31 cards). Scoped to body.admin-page.admin-app money components; every form/action untouched. ========================================================================== */ body.admin-page.admin-app .money-hero { position: relative; overflow: hidden; background: #FCFBF6; border: 1px solid rgba(66, 62, 44, 0.12); border-radius: 24px; padding: 20px 18px; box-shadow: 0 14px 30px rgba(66, 62, 44, 0.06); } body.admin-page.admin-app .money-hero::after { content: ""; position: absolute; right: -16px; top: 4px; width: 150px; height: 190px; background: var(--redesign-asset-botanical) right top / contain no-repeat; opacity: 0.4; pointer-events: none; } body.admin-page.admin-app .money-hero h2 { font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif) !important; font-size: 30px; color: #2C2C27 !important; border: 0 !important; } body.admin-page.admin-app .money-hero .eyebrow { position: relative; z-index: 1; } body.admin-page.admin-app .money-hero-copy, body.admin-page.admin-app .money-hero-actions { position: relative; z-index: 1; } body.admin-page.admin-app .money-hero-actions .button-primary { background: #3C5230 !important; color: #FBFBF5 !important; border-radius: 16px; } body.admin-page.admin-app .money-hero-actions .button-secondary { border-radius: 16px; } /* period pills — sage-filled active exactly like the reference */ body.admin-page.admin-app .money-period-pills .filter-pill { border: 1px solid rgba(66, 62, 44, 0.14) !important; background: #FFFFFF !important; color: #3A3A33 !important; border-radius: 999px !important; padding: 9px 16px !important; } body.admin-page.admin-app .money-period-pills .filter-pill.is-active { background: #6E8A5A !important; border-color: #6E8A5A !important; color: #FBFBF5 !important; font-weight: 600; } body.admin-page.admin-app .money-period-status { color: #8A8A7C; font-size: 12.5px; } /* KPI summary cards — serif figures like the reference profit card */ body.admin-page.admin-app .money-summary-grid .stat-card, body.admin-page.admin-app .money-summary-grid > article { background: #FFFFFF !important; border: 1px solid rgba(66, 62, 44, 0.10) !important; border-radius: 20px !important; box-shadow: 0 10px 24px rgba(66, 62, 44, 0.05) !important; } body.admin-page.admin-app .money-summary-grid strong { font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif) !important; font-size: 26px !important; color: #3C5230 !important; } body.admin-page.admin-app .money-summary-grid span { color: #6B6B60 !important; } /* section headings across the money hub — serif family hierarchy */ body.admin-page.admin-app .money-page-shell h2, body.admin-page.admin-app .money-page-shell h3 { font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif) !important; color: #2C2C27 !important; } body.admin-page.admin-app .money-page-shell .section-card, body.admin-page.admin-app .money-page-shell .nested-card { border-radius: 20px; } /* Money hub — all stat-card figures use the serif sage treatment (the NPD/tax helper cards outside the summary grid still computed legacy indigo). */ body.admin-page.admin-app .money-page-shell .stat-card strong { font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif) !important; color: #3C5230 !important; border-color: rgba(66, 62, 44, 0.14) !important; } /* Final master acceptance sweep — last two indigo stragglers: the «Активна» status badges on the admin services list, and money-figure strongs on the pwa-master booking confirmation. */ body.admin-page.admin-app .status-badge { background: #EAEDDF !important; color: #46603A !important; border-color: rgba(92, 122, 72, 0.3) !important; } body.page-pwa-master .admin-booking-money-card strong, body.page-pwa-master .shared-master-booking strong { color: #2C2C27; } body.page-pwa-master .shared-master-booking .booking-meta-grid strong, body.page-pwa-master .shared-master-booking .stat-card strong { color: #3C5230 !important; border-color: rgba(66, 62, 44, 0.14) !important; } /* ========================================================================== MASTER Screen 20 — responsive facts-grid repair. Root cause: at >=768 the legacy request-card meta flipped to a 4-column grid inside the narrow right column of .m20-body, giving each fact ~60px — prices wrapped character-by-character («1 / 200 / ₽») and time collided with the two-line date. The m20 facts now keep a stable 2x2 grid at every width, the right column gets a real minimum width at >=768, and time/duration/price values never break. Forms/actions untouched. ========================================================================== */ body.admin-page.admin-app.page-pwa-master .m20-meta { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-content: stretch !important; gap: 10px 14px !important; align-content: start; } body.admin-page.admin-app.page-pwa-master .m20-meta .pwa-master-request-card__meta-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; } body.admin-page.admin-app.page-pwa-master .m20-meta .pwa-master-request-card__meta-row i { flex: 0 0 auto; margin-top: 1px; } /* time / duration / price stay on one line; the date (row 1) may wrap by words */ body.admin-page.admin-app.page-pwa-master .m20-meta .pwa-master-request-card__meta-row:nth-child(n+2) { white-space: nowrap; } body.admin-page.admin-app.page-pwa-master .m20-meta .pwa-master-request-card__meta-row:first-child { overflow-wrap: normal; word-break: keep-all; } @media (min-width: 768px) { body.admin-page.admin-app.page-pwa-master .m20-body { grid-template-columns: minmax(0, 1.4fr) minmax(230px, 1fr); gap: 20px; align-items: start; } } @media (min-width: 1024px) { body.admin-page.admin-app.page-pwa-master .m20-body { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); } } /* sparse fallback: calm hierarchy, same geometry as the rich card */ body.admin-page.admin-app.page-pwa-master .m20-card--sparse .pwa-master-request-card__title { font-size: 21px; color: #6B6B60; } body.admin-page.admin-app.page-pwa-master .m20-card--sparse .m20-included-empty { color: #8A8A7C; } /* details link: stable spacing, aligned arrow, readable contrast */ body.page-pwa-master .m20-detail-link { margin-top: 10px; padding: 6px 4px; color: #3C5230; font-weight: 600; } body.page-pwa-master .m20-detail-link b { display: inline-flex; transform: translateY(1px); } /* ========================================================================== Кабинет мастера — читаемость шапки sidebar и состояния PJAX-навигации. Эйбрау «Кабинет мастера» рендерился белым на светло-зелёном (нечитаемо); переводим на утверждённый sage-ink. Стилистика ivory/sage не меняется. ========================================================================== */ body.admin-page.admin-app .admin-sidebar-head .eyebrow { color: #3C5230 !important; background: #EAEDDF !important; border: 1px solid rgba(92, 122, 72, 0.28) !important; } body.admin-page.admin-app .admin-sidebar-head h1 { color: #2C2C27 !important; } body.admin-page.admin-app .admin-sidebar-head p { color: #5A5A50 !important; } /* активный пункт меню — читаемый контраст на sage-подложке */ body.admin-page.admin-app .sidebar-nav-admin a.is-active, body.admin-page.admin-app .admin-app-menu__panel a.is-active { background: #3C5230 !important; color: #FBFBF5 !important; font-weight: 600; } body.admin-page.admin-app .sidebar-nav-admin a:not(.is-active), body.admin-page.admin-app .admin-app-menu__panel a:not(.is-active) { color: #2C2C27 !important; } /* переключатель Деньги/Бухгалтерия */ body.admin-page.admin-app .money-view-pills { margin: 10px 0 4px; } body.admin-page.admin-app .money-view-pills .filter-pill.is-active { background: #3C5230 !important; border-color: #3C5230 !important; color: #FBFBF5 !important; } /* PJAX: загрузка без белого flash — контент гасится, фон оболочки остаётся */ body.admin-page.admin-app .admin-app-main.is-nav-loading { opacity: 0.55; transition: opacity 120ms ease-out; pointer-events: none; } body.admin-page.admin-app .admin-app-main { transition: opacity 120ms ease-in; } body.admin-page.admin-app .admin-app-main:focus-visible, body.admin-page.admin-app .admin-app-main h1:focus-visible, body.admin-page.admin-app .admin-app-main h2:focus-visible { outline: 2px solid rgba(92, 122, 72, 0.5); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { body.admin-page.admin-app .admin-app-main, body.admin-page.admin-app .admin-app-main.is-nav-loading { transition: none; } } /* Catalog tablet: one intentional wide card, still the same shared product. */ @media (min-width: 700px) and (max-width: 899px) { .masters-app-catalog .cat2-card { grid-template-columns: minmax(210px, 35%) minmax(0, 1fr); gap: 18px; padding: 16px; } .masters-app-catalog .cat2-photo { min-height: 244px; } .masters-app-catalog .cat2-copy h2 { font-size: 28px; } .masters-app-catalog .cat2-services > span { max-width: 150px; } } /* WEB-native catalog grid at 1024/1440; PWA keeps the bounded one-column shell. */ @media (min-width: 900px) { body.page-platform:not(.page-pwa-client) main.page-platform-shell.masters-app-catalog { width: min(var(--catalog-content-max), calc(100% - 48px)); max-width: var(--catalog-content-max); } body.page-platform:not(.page-pwa-client) .masters-app-catalog .cat2-header { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr); column-gap: 18px; } body.page-platform:not(.page-pwa-client) .masters-app-catalog .cat2-hero, body.page-platform:not(.page-pwa-client) .masters-app-catalog .cat2-chips, body.page-platform:not(.page-pwa-client) .masters-app-catalog .cat2-active-chips, body.page-platform:not(.page-pwa-client) .masters-app-catalog .cat2-result-count { grid-column: 1 / -1; } body.page-platform:not(.page-pwa-client) .masters-app-catalog .cat2-search { grid-column: 1; grid-row: 2; } body.page-platform:not(.page-pwa-client) .masters-app-catalog .cat2-filter-row { grid-column: 2; grid-row: 2; } body.page-platform:not(.page-pwa-client) .masters-app-catalog .cat2-cards { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } body.page-platform:not(.page-pwa-client) .masters-app-catalog .cat2-cards:has(> .cat2-card:only-child) { grid-template-columns: minmax(0, 1fr); } body.page-platform:not(.page-pwa-client) .masters-app-catalog .cat2-card:only-child { grid-column: 1 / -1; max-width: 720px; margin-inline: auto; } body.page-platform:not(.page-pwa-client) .masters-app-catalog .cat2-chips { flex-wrap: wrap; overflow: visible; } } @media (min-width: 1440px) { body.page-platform:not(.page-pwa-client) main.page-platform-shell.masters-app-catalog { width: min(var(--catalog-content-max), calc(100% - 80px)); } } /* UX Фаза 3 — метки локация/адрес в sidebar профиля не должны переноситься по буквам (узкая колонка). */ @media (min-width: 1025px) { body.page-master.page-pwa-client .s4-contact-facts > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } body.page-master.page-pwa-client .s4-contact-facts > div > span:first-child { white-space: nowrap; flex: 0 0 auto; } body.page-master.page-pwa-client .s4-contact-facts > div > strong { text-align: right; min-width: 0; } } /* UX Фаза 4 — секция локации фильтра: каскад Город (select) -> Район (чипы) -> Рядом со мной (радиус). «Другая локация» убрана. */ .masters-app-catalog .filter-location-block .filter-select-card, .catalog-filter-screen .filter-select-card { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(66, 62, 44, 0.14); border-radius: 14px; background: #FFFFFF; padding: 10px 14px; } .masters-app-catalog .filter-select-card > span, .catalog-filter-screen .filter-select-card > span { flex: 0 0 auto; font-size: 13px; color: #6B6B60; } .masters-app-catalog .filter-select-card select, .catalog-filter-screen .filter-select-card select { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; color: #2C2C27; padding: 2px 0; } .masters-app-catalog .filter-district-field, .catalog-filter-screen .filter-district-field { margin-top: 12px; display: grid; gap: 8px; } .masters-app-catalog .filter-field-label, .catalog-filter-screen .filter-field-label { font-size: 13px; color: #6B6B60; } .masters-app-catalog .filter-district-list, .catalog-filter-screen .filter-district-list { display: grid; gap: 8px; } /* ========================================================================== UX Фаза 5 — карточка услуги (Screen 5). «Услуга» и «Что входит» уже в одной карточке (.s5-maincard); по референсу описание услуги было скрыто. Возвращаем его в структуру карточки (иконка / название / описание / длительность / стоимость / разделитель / Что входит / список), сохраняя объединённый вид. «Доп. опции» остаются отдельным блоком ниже. Только клиентская Screen 5. ========================================================================== */ body.page-pwa-service .s5-maincard .booking-service-hero__copy p[data-booking-hero-description] { display: block !important; font-size: 14px; line-height: 1.45; color: #5A5A50; margin: 4px 0 12px; max-width: 52ch; overflow-wrap: anywhere; } /* ========================================================================== UX Фаза 6 — итоговый блок «Итого» (Screen 5) закреплён снизу. .booking-shell имеет backdrop-filter: blur() — это создаёт containing block, из-за которого fixed привязывался к секции, а не к вьюпорту (а overflow:hidden тех же предков ломает sticky). На узких экранах снимаем backdrop-filter на этой странице (чисто визуальный эффект стекла на светлом ivory фоне) и закрепляем «Итого» fixed у нижней кромки над навигацией, компактно показывая стоимость, длительность, количество услуг и CTA. Контент и нижняя навигация не перекрываются (padding-bottom резервирует место, safe-area учтена). ========================================================================== */ @media (max-width: 1024px) { body.page-pwa-service .booking-shell { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.page-pwa-service .s5-total { position: fixed !important; left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; margin: 0 !important; bottom: calc(var(--space-bottom-nav-safe, 108px) + 6px) !important; top: auto !important; z-index: 40; padding: 12px 16px !important; box-shadow: 0 14px 38px rgba(60, 74, 46, 0.22); border-radius: 20px; } body.page-pwa-service .s5-total .s5-total-note { display: none; } body.page-pwa-service [data-services-form] { padding-bottom: calc(var(--space-bottom-nav-safe, 108px) + 120px); } } @media (min-width: 1025px) { body.page-pwa-service .s5-total { position: sticky; bottom: 20px; z-index: 20; box-shadow: 0 12px 30px rgba(60, 74, 46, 0.14); } } /* ========================================================================== UX Фаза 7 — экран подтверждения записи (Screen /pwa/confirm.php). Композиция: Услуга -> (доп. услуги в том же списке) -> Дата/Время -> Мастер -> Стоимость -> Правило отмены -> Записаться. Приводим мета-поля к ровной сетке «подпись + значение» без «лесенки», убираем дублирующую карточку длительности («Примерно» — длительность уже показана в строке услуги), выравниваем интервалы секций. Только клиентский confirm; разметка/формы не трогаются. ========================================================================== */ body.page-pwa-confirm .booking-order-reference-meta .booking-order-duration-card { display: none; /* длительность уже указана в карточке услуги — без дубля */ } body.page-pwa-confirm .booking-order-reference-meta { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; align-items: stretch; } body.page-pwa-confirm .booking-order-reference-meta > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(66, 62, 44, 0.12); border-radius: 16px; background: #FFFFFF; } body.page-pwa-confirm .booking-order-reference-meta > div > span { font-size: 12.5px; color: #8A8A7C; white-space: nowrap; } body.page-pwa-confirm .booking-order-reference-meta > div > strong { font-size: 15px; color: #2C2C27; line-height: 1.25; overflow-wrap: anywhere; } /* Дата|Время в один ряд; Мастер и Стоимость — на всю ширину строки */ body.page-pwa-confirm .booking-order-reference-meta .booking-order-master-card, body.page-pwa-confirm .booking-order-reference-meta .booking-order-cost-card { grid-column: 1 / -1; } /* ровные интервалы секций «Важно знать» и «Правило отмены» */ body.page-pwa-confirm .booking-important-card { margin-top: 18px; } body.page-pwa-confirm .booking-policy-note { margin-top: 14px; } /* убрать дублирование названия услуги: head-иконка+подпись остаётся, но при единственной услуге в reference заголовок служит подписью «Услуга» */ body.page-pwa-confirm .booking-order-services .summary-service { align-items: center; } /* ========================================================================== UX Фаза B5 — карточка услуги мастера: устойчивая композиция. Desktop: иконка | контент (название+статус / описание / длительность+цена) | одна кнопка «Редактировать» справа. Кнопка вынесена из .m23-copy как прямой ребёнок карточки. Mobile (<=680px): вертикально, иконка+название сверху, кнопка на всю ширину. Только композиция. ========================================================================== */ body.admin-page.admin-app .m23-card .m23-edit { justify-self: end; align-self: center; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; } body.admin-page.admin-app .m23-titlerow { align-items: center; } body.admin-page.admin-app .m23-facts { flex-wrap: wrap; } @media (max-width: 680px) { body.admin-page.admin-app .m23-card { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "thumb copy" "edit edit"; gap: 10px 12px; align-items: start; } body.admin-page.admin-app .m23-card .m23-thumb { grid-area: thumb; width: 64px; height: 64px; } body.admin-page.admin-app .m23-card .m23-copy { grid-area: copy; } body.admin-page.admin-app .m23-card .m23-edit { grid-area: edit; justify-self: stretch; width: 100%; justify-content: center; margin-top: 4px; } } /* Integration parity — public booking service-card grid repair. The checkmark precedes the copy in DOM order, so legacy normal-flow grid placement pushed all service text into the narrow checkmark column on WEB. Explicit placement preserves form/JS behavior and leaves PWA styling alone. */ body.page-beauty.page-booking.page-booking-services:not(.page-pwa-client) .booking-service-card { grid-template-columns: calc(var(--redesign-space-18) + var(--redesign-space-1)) minmax(0, 1fr) var(--redesign-space-10) !important; gap: var(--redesign-space-3) !important; } body.page-beauty.page-booking.page-booking-services:not(.page-pwa-client) .booking-service-card .booking-service-visual { grid-column: 1; grid-row: 1; } body.page-beauty.page-booking.page-booking-services:not(.page-pwa-client) .booking-service-card .booking-service-copy { grid-column: 2; grid-row: 1; width: auto; align-self: start; } body.page-beauty.page-booking.page-booking-services:not(.page-pwa-client) .booking-service-card .service-checkmark { position: static !important; grid-column: 3; grid-row: 1; align-self: center; justify-self: end; } @media (max-width: 767px) { body.page-beauty.page-booking.page-booking-services:not(.page-pwa-client) .booking-service-card { grid-template-columns: calc(var(--redesign-space-12) + var(--redesign-space-2)) minmax(0, 1fr) !important; padding-right: calc(var(--redesign-space-10) + var(--redesign-space-1)) !important; } body.page-beauty.page-booking.page-booking-services:not(.page-pwa-client) .booking-service-card .service-checkmark { position: absolute !important; top: var(--redesign-space-3); right: var(--redesign-space-3); } } /* WEB/PWA parity: inferred schedule editor built from the approved schedule system. */ .admin-page .admin-schedule-editor-page { --stage68-green: var(--redesign-color-brand-olive); --stage68-green-deep: var(--redesign-color-brand-olive-strong); --stage68-mint: var(--redesign-color-surface-soft-2); --stage68-purple: var(--redesign-color-brand-primary-deep); --stage68-muted: var(--redesign-color-text-muted); font-family: var(--redesign-font-ui); } .admin-page .admin-schedule-editor-page .admin-schedule-ref-alert { padding: var(--redesign-space-4); } .admin-page .admin-schedule-editor-page .admin-schedule-ref-mode-option { text-decoration: none; } .admin-page .admin-schedule-editor-page .admin-schedule-ref-worktime-hero h2, .admin-page .admin-schedule-editor-page .admin-schedule-ref-manual-day h2 { margin: 0 0 var(--redesign-space-1); color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-size: clamp(1.9rem, 8vw, 2.7rem); line-height: var(--redesign-line-height-display); } .admin-page .admin-schedule-editor-page .admin-schedule-ref-info { display: grid; gap: var(--redesign-space-1); } .admin-page .admin-schedule-editor-page .admin-schedule-ref-info span { color: var(--redesign-color-text-muted); } .admin-page .admin-schedule-editor-page .admin-schedule-ref-day-link { position: relative; display: grid; width: 100%; height: 100%; min-height: var(--redesign-space-10); place-items: center; border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-pill); color: var(--redesign-color-brand-primary-deep); background: var(--redesign-color-surface-card); font-weight: 800; text-decoration: none; } .admin-page .admin-schedule-editor-page .admin-schedule-ref-day--selected .admin-schedule-ref-day-link { border-color: var(--redesign-color-border-active); background: var(--redesign-color-surface-soft-3); box-shadow: var(--redesign-shadow-card-soft); } .admin-page .admin-schedule-editor-page .admin-schedule-ref-day-link i { position: absolute; bottom: var(--redesign-space-2); left: 50%; width: var(--redesign-space-1); height: var(--redesign-space-1); border-radius: var(--redesign-radius-pill); background: var(--redesign-color-brand-olive-strong); transform: translateX(-50%); } .admin-page .admin-schedule-editor-page .admin-schedule-ref-savebar { position: static; padding-top: 0; } .admin-page .admin-schedule-editor-page .admin-schedule-ref-savebar__button { background: linear-gradient(135deg, var(--redesign-color-brand-olive), var(--redesign-color-brand-olive-strong)); box-shadow: var(--redesign-shadow-primary-action); } .admin-page .admin-schedule-editor-page .admin-schedule-ref-worktime-off input[type="checkbox"] { width: var(--redesign-space-5); height: var(--redesign-space-5); flex: 0 0 var(--redesign-space-5); accent-color: var(--redesign-color-brand-primary); } .admin-page .admin-schedule-editor-day-actions, .admin-page .admin-schedule-editor-range-actions { display: flex; flex-wrap: wrap; gap: var(--redesign-space-2); } .admin-page .admin-schedule-editor-day-actions form { flex: 1 1 10rem; } .admin-page .admin-schedule-editor-day-actions .button, .admin-page .admin-schedule-editor-range-actions .button { width: 100%; min-height: calc(var(--redesign-space-10) + var(--redesign-space-1)); } .admin-page .admin-schedule-editor-day-actions .button:disabled { color: var(--redesign-color-state-disabled-text); background: var(--redesign-color-state-disabled-bg); box-shadow: none; } .admin-page .admin-schedule-editor-existing-windows, .admin-page .admin-schedule-editor-bookings { display: grid; gap: var(--redesign-space-2); } .admin-page .admin-schedule-editor-existing-window { display: block; min-height: var(--redesign-space-12); padding: 0; border: 1px solid var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-md); background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary-deep); font-weight: 800; overflow: clip; } .admin-page .admin-schedule-editor-existing-window summary { display: flex; min-height: var(--redesign-space-12); align-items: center; justify-content: space-between; gap: var(--redesign-space-3); padding: var(--redesign-space-2) var(--redesign-space-3); cursor: pointer; list-style: none; touch-action: manipulation; user-select: none; } .admin-page .admin-schedule-editor-existing-window summary::-webkit-details-marker { display: none; } .admin-page .admin-schedule-editor-existing-window summary::after { content: "⌄"; flex: 0 0 auto; font-size: var(--redesign-text-body-lg-size); transition: transform var(--redesign-motion-fast) var(--redesign-ease-standard); } .admin-page .admin-schedule-editor-existing-window[open] summary::after { transform: rotate(180deg); } .admin-page .admin-schedule-editor-existing-window summary small { margin-left: auto; color: var(--redesign-color-text-muted); font-size: var(--redesign-text-caption-size); font-weight: 600; } .admin-page .admin-schedule-editor-window-actions { display: grid; gap: var(--redesign-space-2); padding: 0 var(--redesign-space-3) var(--redesign-space-3); } .admin-page .admin-schedule-editor-window-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--redesign-space-2); } .admin-page .admin-schedule-editor-window-form label { display: grid; min-width: 0; gap: var(--redesign-space-1); color: var(--redesign-color-text-muted); font-size: var(--redesign-text-caption-size); } .admin-page .admin-schedule-editor-window-form input { width: 100%; min-width: 0; min-height: calc(var(--redesign-space-10) + var(--redesign-space-2)); border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-sm); color: var(--redesign-color-text-primary); background: var(--redesign-color-surface-card); font: inherit; } .admin-page .admin-schedule-editor-window-form .button { grid-column: 1 / -1; width: 100%; } .admin-page .admin-schedule-editor-window-delete button { width: 100%; min-height: calc(var(--redesign-space-10) + var(--redesign-space-1)); padding: 0 var(--redesign-space-3); border: 1px solid color-mix(in srgb, var(--danger) 45%, white); border-radius: var(--redesign-radius-pill); color: var(--danger); background: var(--redesign-color-surface-card); font: inherit; font-weight: 700; } .admin-page .admin-schedule-editor-existing-window.is-delete-ready { border-color: var(--danger); } .admin-page .admin-schedule-editor-add-control { margin-top: var(--redesign-space-4); } .admin-page .admin-schedule-editor-add-control > summary { display: flex; min-height: calc(var(--redesign-space-10) + var(--redesign-space-2)); align-items: center; justify-content: center; gap: var(--redesign-space-2); border: 1px solid var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-pill); color: var(--redesign-color-brand-primary-deep); background: var(--redesign-color-surface-card); cursor: pointer; font-weight: 800; list-style: none; } .admin-page .admin-schedule-editor-add-control > summary::-webkit-details-marker { display: none; } .admin-page .admin-schedule-editor-add-control > summary span { font-size: var(--redesign-text-body-lg-size); line-height: 1; } .admin-page .admin-schedule-editor-empty, .admin-page .admin-schedule-ref-windows-head p { margin: var(--redesign-space-1) 0 0; color: var(--redesign-color-text-muted); line-height: var(--redesign-line-height-body); } .admin-page .admin-schedule-editor-add-window, .admin-page .admin-schedule-editor-range-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--redesign-space-3); margin-top: var(--redesign-space-3); } .admin-page .admin-schedule-editor-add-window label, .admin-page .admin-schedule-editor-range-fields label { display: grid; gap: var(--redesign-space-1); color: var(--redesign-color-text-muted); font-size: var(--redesign-text-caption-size); font-weight: 700; } .admin-page .admin-schedule-editor-add-window input, .admin-page .admin-schedule-editor-range-fields input { width: 100%; min-height: calc(var(--redesign-space-10) + var(--redesign-space-2)); border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-sm); color: var(--redesign-color-text-primary); background: var(--redesign-color-surface-card); font: inherit; } .admin-page .admin-schedule-editor-add-window .button { grid-column: 1 / -1; min-height: calc(var(--redesign-space-10) + var(--redesign-space-2)); } .admin-page .admin-schedule-editor-bookings a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--redesign-space-3); padding: var(--redesign-space-3); border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-md); color: var(--redesign-color-text-primary); background: var(--redesign-color-surface-card); text-decoration: none; } .admin-page .admin-schedule-editor-bookings strong { grid-row: 1 / 3; color: var(--redesign-color-brand-primary); font-size: var(--redesign-text-body-lg-size); } .admin-page .admin-schedule-editor-bookings small { color: var(--redesign-color-text-muted); } .admin-page .admin-schedule-editor-range { gap: var(--redesign-space-3); } .admin-page .admin-schedule-editor-range .admin-schedule-ref-row { padding: 0; border: 0; box-shadow: none; } .admin-page .admin-schedule-editor-range-actions { margin-top: var(--redesign-space-3); } .admin-page .admin-schedule-editor-page :where(a, button, input, select):focus-visible { outline: 3px solid var(--redesign-color-border-active); outline-offset: 3px; } @media (max-width: 520px) { .admin-page .admin-schedule-editor-page .admin-schedule-ref-calendar-card { padding-inline: var(--redesign-space-3); } .admin-page .admin-schedule-editor-page .admin-schedule-ref-day-link { min-height: var(--redesign-space-10); font-size: var(--redesign-text-caption-size); } .admin-page .admin-schedule-editor-page .admin-schedule-ref-worktime-row { grid-template-columns: var(--redesign-space-8) minmax(0, 1fr) minmax(0, 1fr); align-items: end; } .admin-page .admin-schedule-editor-page .admin-schedule-ref-worktime-off { grid-column: 2 / -1; } .admin-page .admin-schedule-editor-day-actions form, .admin-page .admin-schedule-editor-range-actions .button { flex-basis: 100%; } } @media (min-width: 900px) { .admin-page .admin-schedule-editor-page .admin-schedule-ref-worktime-hero, .admin-page .admin-schedule-editor-page .admin-schedule-ref-worktime-list { grid-column: 1 / -1; } .admin-page .admin-schedule-editor-page .admin-schedule-ref-manual { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-page .admin-schedule-editor-page .admin-schedule-ref-manual-day, .admin-page .admin-schedule-editor-page .admin-schedule-editor-day-actions, .admin-page .admin-schedule-editor-page .admin-schedule-editor-bookings { grid-column: 1 / -1; } } /* ========================================================================== UX Фаза B1-B3 — портфолио мастера: галерея работ + модальная загрузка. Работы показываются первыми крупной галереей (фото + стрелки + счётчик + точки + синхронная подпись/управление); постоянная upload-форма убрана, загрузка открывается модалкой по кнопке «+». Scoped к body.admin-page. ========================================================================== */ body.admin-page.admin-app .portfolio-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; } body.admin-page.admin-app .portfolio-add-btn { flex: 0 0 auto; min-height: 44px; } body.admin-page.admin-app .portfolio-add-btn span { font-size: 18px; margin-right: 4px; } /* галерея */ body.admin-page.admin-app .portfolio-gallery { margin-top: 16px; display: grid; gap: 12px; } body.admin-page.admin-app .portfolio-stage { position: relative; display: flex; align-items: center; gap: 10px; } body.admin-page.admin-app .portfolio-viewport { position: relative; flex: 1 1 auto; width: 100%; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #EFEDE3; outline: none; touch-action: pan-y; } body.admin-page.admin-app .portfolio-viewport:focus-visible { box-shadow: 0 0 0 3px rgba(92, 122, 72, 0.4); } body.admin-page.admin-app .portfolio-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 200ms ease; pointer-events: none; } body.admin-page.admin-app .portfolio-slide.is-active { opacity: 1; pointer-events: auto; } body.admin-page.admin-app .portfolio-slide img { width: 100%; height: 100%; object-fit: cover; /* стабильный кадр, без искажения лица/работы */ display: block; } body.admin-page.admin-app .portfolio-nav { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(66, 62, 44, 0.16); background: #FFFFFF; color: #3C5230; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 16px rgba(66, 62, 44, 0.10); } body.admin-page.admin-app .portfolio-nav[hidden] { display: none; } body.admin-page.admin-app .portfolio-nav svg { width: 22px; height: 22px; } body.admin-page.admin-app .portfolio-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; } body.admin-page.admin-app .portfolio-meta-copy { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } body.admin-page.admin-app .portfolio-meta-copy strong { font-size: 16px; color: #2C2C27; overflow-wrap: anywhere; } body.admin-page.admin-app .portfolio-featured-pill[hidden] { display: none; } body.admin-page.admin-app .portfolio-counter { flex: 0 0 auto; font-size: 14px; color: #6B6B60; font-variant-numeric: tabular-nums; } body.admin-page.admin-app .portfolio-dots { display: flex; gap: 8px; justify-content: center; } body.admin-page.admin-app .portfolio-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(66, 62, 44, 0.22); cursor: pointer; padding: 0; } body.admin-page.admin-app .portfolio-dot.is-active { background: #5C7A48; transform: scale(1.25); } body.admin-page.admin-app .portfolio-manage { display: grid; } body.admin-page.admin-app .portfolio-manage-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } body.admin-page.admin-app .portfolio-manage-row[hidden] { display: none; } body.admin-page.admin-app .portfolio-manage-row form { margin: 0; } body.admin-page.admin-app .portfolio-manage-row .button { min-height: 44px; } /* модальный диалог загрузки */ body.admin-page.admin-app .portfolio-upload-dialog { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; } body.admin-page.admin-app .portfolio-upload-dialog[hidden] { display: none; } body.admin-page.admin-app .portfolio-upload-backdrop { position: absolute; inset: 0; background: rgba(28, 26, 20, 0.42); } body.admin-page.admin-app .portfolio-upload-panel { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: #FFFFFF; border-radius: 22px; padding: 20px; box-shadow: 0 24px 60px rgba(28, 26, 20, 0.28); -webkit-overflow-scrolling: touch; } body.admin-page.admin-app .portfolio-upload-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } body.admin-page.admin-app .portfolio-upload-panel__head h3 { margin: 0; font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif); font-size: 22px; color: #2C2C27; } body.admin-page.admin-app .portfolio-upload-close { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(66, 62, 44, 0.14); background: #FBFBF5; color: #2C2C27; font-size: 22px; line-height: 1; cursor: pointer; } body.admin-page.admin-app .portfolio-upload-form { display: grid; gap: 12px; } body.admin-page.admin-app .portfolio-file-field, body.admin-page.admin-app .portfolio-caption-field { display: grid; gap: 6px; } body.admin-page.admin-app .portfolio-file-field > span, body.admin-page.admin-app .portfolio-caption-field > span { font-size: 13px; color: #6B6B60; } body.admin-page.admin-app .portfolio-caption-field input { border: 1px solid rgba(66, 62, 44, 0.14); border-radius: 12px; padding: 11px 12px; font: inherit; width: 100%; box-sizing: border-box; } body.admin-page.admin-app .portfolio-upload-preview { display: flex; gap: 8px; flex-wrap: wrap; } body.admin-page.admin-app .portfolio-upload-preview[hidden] { display: none; } body.admin-page.admin-app .portfolio-upload-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; } body.admin-page.admin-app .portfolio-upload-actions { display: flex; gap: 10px; margin-top: 4px; } body.admin-page.admin-app .portfolio-upload-actions .button { min-height: 44px; } body.portfolio-dialog-open { overflow: hidden; } @media (max-width: 680px) { body.admin-page.admin-app .portfolio-viewport { aspect-ratio: 3 / 4; } body.admin-page.admin-app .portfolio-upload-panel { width: 100%; align-self: flex-end; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); } body.admin-page.admin-app .portfolio-upload-dialog { align-items: flex-end; padding: 0; } } /* ========================================================================== UX Фаза B7 — карточки клиентов на телефоне (<=680px). Desktop-композиция (3 колонки) сохранена; на мобиле аватар из большой плашки становится компактным кружком в одной строке с именем и статусом, статистика равномерная, кнопки одинаковой высоты и не накладываются, «Чат» честно помечен как «скоро» (не выглядит активной кнопкой), комментарий ограничен по высоте. Только композиция, без цвета. ========================================================================== */ @media (max-width: 680px) { .admin-page .admin-client-card { grid-template-columns: 56px minmax(0, 1fr) !important; align-items: start; gap: 12px 12px; padding: 14px; } .admin-page .admin-client-avatar { min-height: 0 !important; width: 56px; height: 56px; border-radius: 50% !important; font-size: 22px; align-self: start; } .admin-page .master-admin-clients-page .admin-client-card__body { grid-column: 2; display: grid; gap: 8px; min-width: 0; } .admin-page .master-admin-clients-page .admin-client-card__head { gap: 8px; min-height: 56px; align-content: center; } .admin-page .master-admin-clients-page .admin-client-card__name { font-size: 18px; } /* статистика — компактный равномерный список */ .admin-page .master-admin-clients-page .admin-client-card__stats { gap: 6px; font-size: 13.5px; } .admin-page .master-admin-clients-page .admin-client-card__stats li { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; } /* действия — 2 в ряд, одинаковая высота, touch >=44px */ .admin-page .master-admin-clients-page .admin-client-card__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .admin-page .master-admin-clients-page .admin-client-card__action { min-height: 44px; font-size: 13.5px; text-align: center; justify-content: center; } /* Реальный телефонный контакт остаётся читаемым рядом с историей. */ .admin-page .master-admin-clients-page .admin-client-card__action--chat { border-style: solid; } .admin-page .master-admin-clients-page .admin-client-card__action--chat .admin-client-card__action-chevron { display: none; } /* комментарий — ограничен по высоте, не занимает всю карточку */ .admin-page .master-admin-clients-page .admin-client-card__note-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } } /* очень узкие экраны — действия вертикально */ @media (max-width: 360px) { .admin-page .master-admin-clients-page .admin-client-card__actions { grid-template-columns: 1fr; } } /* B7 — метки кнопок действий не должны ломаться по буквам */ @media (max-width: 680px) { .admin-page .master-admin-clients-page .admin-client-card__action { overflow-wrap: normal; word-break: keep-all; line-height: 1.25; } .admin-page .master-admin-clients-page .admin-client-card__action > span:not(.admin-client-card__action-icon):not(.admin-client-card__action-chevron) { overflow-wrap: normal; word-break: keep-all; } /* иконка + подпись в кнопке — вертикально при нехватке ширины, чтобы текст влезал */ .admin-page .master-admin-clients-page .admin-client-card__action--history { flex-direction: row; flex-wrap: wrap; gap: 6px; padding-inline: 8px; } } /* UX Фаза B9 — свободное окошко: «Записать вручную» (первичное) + «Закрыть окошко» (вторичное, с подтверждением). Действия не равнозначны визуально. */ body.page-pwa-master .admin-slot-action-choices { display: grid; gap: 10px; margin-top: 8px; } body.page-pwa-master .admin-slot-action-choices form { margin: 0; } body.page-pwa-master .admin-slot-action-choices .button { width: 100%; } body.page-pwa-master .admin-slot-close-btn { color: #A04040 !important; border: 1px solid rgba(160, 64, 64, 0.4) !important; background: #FFFFFF !important; } /* UX Фаза B10 — «Добавить клиента вручную»: компактное действие-раскрытие. Форма скрыта в

до клика по summary; раскрыта сразу при предзаполнении из свободного окошка. Нативный disclosure — работает при прямом открытии и после PJAX без JS. */ body.admin-page.admin-app .manual-booking-disclosure { display: block; } body.admin-page.admin-app .manual-booking-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 4px 0; min-height: 44px; } body.admin-page.admin-app .manual-booking-summary::-webkit-details-marker { display: none; } body.admin-page.admin-app .manual-booking-summary__copy { display: grid; gap: 2px; } body.admin-page.admin-app .manual-booking-summary__title { font-family: var(--redesign-font-display, "Cormorant Garamond", "Georgia", serif); font-size: 21px; color: #2C2C27; } body.admin-page.admin-app .manual-booking-summary__chevron { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(66, 62, 44, 0.14); color: #3C5230; transition: transform 160ms ease; } body.admin-page.admin-app .manual-booking-summary__chevron svg { width: 20px; height: 20px; } body.admin-page.admin-app .manual-booking-disclosure[open] .manual-booking-summary__chevron { transform: rotate(180deg); } body.admin-page.admin-app .manual-booking-form { margin-top: 14px; } body.admin-page.admin-app .manual-booking-summary:focus-visible { outline: 2px solid rgba(92, 122, 72, 0.5); outline-offset: 3px; border-radius: 8px; } /* ========================================================================== UX Фаза B6 — inline-редактор услуги в карточке /admin/services.php. Просмотр <-> редактирование внутри той же карточки; поля соответствуют серверному update_service. Scoped к body.admin-page. Без цвета-редизайна. ========================================================================== */ body.admin-page.admin-app .m23-card.is-editing { display: block; } body.admin-page.admin-app .m23-inline-edit[hidden] { display: none; } body.admin-page.admin-app .m23-inline-edit { display: grid; gap: 12px; margin-top: 2px; } body.admin-page.admin-app .m23-inline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; } body.admin-page.admin-app .m23-inline-field { display: grid; gap: 5px; min-width: 0; } body.admin-page.admin-app .m23-inline-field--wide { grid-column: 1 / -1; } body.admin-page.admin-app .m23-inline-field > span { font-size: 12.5px; color: #6B6B60; } body.admin-page.admin-app .m23-inline-field input { width: 100%; box-sizing: border-box; border: 1px solid rgba(66, 62, 44, 0.16); border-radius: 12px; padding: 10px 12px; font: inherit; color: #2C2C27; min-height: 44px; } body.admin-page.admin-app .m23-inline-field input:focus-visible { outline: 2px solid rgba(92, 122, 72, 0.5); outline-offset: 1px; } body.admin-page.admin-app .m23-inline-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #2C2C27; min-height: 44px; } body.admin-page.admin-app .m23-inline-check input { width: 20px; height: 20px; } body.admin-page.admin-app .m23-inline-error { margin: 0; color: #A04040; font-size: 13.5px; } body.admin-page.admin-app .m23-inline-error[hidden] { display: none; } body.admin-page.admin-app .m23-inline-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } body.admin-page.admin-app .m23-inline-actions .button { min-height: 44px; } body.admin-page.admin-app .m23-inline-fulledit { margin-left: auto; font-size: 13px; color: #46603A; text-decoration: none; } @media (max-width: 680px) { body.admin-page.admin-app .m23-inline-grid { grid-template-columns: 1fr; } body.admin-page.admin-app .m23-inline-fulledit { margin-left: 0; width: 100%; } } /* ========================================================================== Экран 34 — hub «Бухгалтерия / Деньги». Только layout money-раздела; цветовая система/токены не меняются (используются существующие фирменные зелёные). Референс: крупная карточка прибыли + навигационные карточки, много воздуха. ========================================================================== */ .money-hub { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; } .money-hub-top { display: flex; align-items: center; justify-content: space-between; } .money-hub-round { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #3C5230; box-shadow: 0 8px 22px rgba(66,62,44,0.12); border: 1px solid #ECEAE0; text-decoration: none; transition: transform 140ms ease, box-shadow 140ms ease; } .money-hub-round:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(66,62,44,0.16); } .money-hub-round-ai { font-weight: 700; font-size: 20px; letter-spacing: 0.02em; } .money-hub-periods { display: flex; gap: 6px; padding: 5px; background: #fff; border: 1px solid #E7E4D8; border-radius: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .money-hub-periods::-webkit-scrollbar { display: none; } .money-hub-period { flex: 1 0 auto; text-align: center; white-space: nowrap; padding: 9px 16px; border-radius: 12px; font-size: 14px; color: #2C2C27; text-decoration: none; transition: background 140ms ease, color 140ms ease; } .money-hub-period.is-active { background: linear-gradient(135deg, #5C7A48, #3C5230); color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(60,82,48,0.28); } .money-hub-period:not(.is-active):hover { background: #F1F3EC; } .money-hub-profit { position: relative; overflow: hidden; background: #fff; border: 1px solid #ECEAE0; border-radius: 26px; padding: 18px 20px 20px; box-shadow: 0 12px 34px rgba(66,62,44,0.10); } .money-hub-modes { display: flex; gap: 22px; margin-bottom: 12px; } .money-hub-mode { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: #8A8A80; cursor: pointer; } .money-hub-mode.is-active { color: #2C2C27; font-weight: 600; } .money-hub-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #B8C2A9; box-sizing: border-box; } .money-hub-mode.is-active .money-hub-dot { background: #5C7A48; border-color: #5C7A48; } .money-hub-dot-empty { background: transparent; } .money-hub-profit-label { display: block; font-size: 14px; color: #6B6B60; } .money-hub-profit-value { display: block; font-size: 48px; line-height: 1.05; font-weight: 800; color: #3C5230; letter-spacing: -0.01em; margin-top: 2px; } .money-hub-profit-value.is-negative { color: #A04040; } .money-hub-profit-value-empty { font-size: 26px; font-weight: 700; color: #6B6B60; } .money-hub-profit-body small { display: block; margin-top: 6px; max-width: 60%; } .money-hub-profit-body-empty small { max-width: 78%; } .money-hub-econ-note { display: inline-block; margin-top: 8px; font-size: 12px; color: #8A8A80; } .money-hub-branch { position: absolute; right: 6px; top: 40px; width: 150px; height: 120px; background: var(--redesign-asset-botanical) no-repeat right center / contain; opacity: 0.9; pointer-events: none; } .money-hub-profit-arrow { position: absolute; right: 18px; bottom: 16px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #3C5230; font-size: 20px; text-decoration: none; background: rgba(92,122,72,0.10); } .money-hub-profit-arrow:hover { background: rgba(92,122,72,0.18); } .money-hub-card { display: block; background: #fff; border: 1px solid #ECEAE0; border-radius: 20px; box-shadow: 0 8px 22px rgba(66,62,44,0.07); overflow: hidden; text-decoration: none; } .money-hub-group { padding: 4px 0; } .money-hub-row { display: flex; align-items: center; gap: 12px; padding: 15px 18px; text-decoration: none; color: #2C2C27; min-height: 44px; } .money-hub-row-sub { padding-top: 11px; padding-bottom: 13px; padding-left: 30px; border-top: 1px solid #F1EFE7; color: #6B6B60; } .money-hub-row:hover, .money-hub-nav:hover { background: #F5F6F0; } .money-hub-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #EEF3EA; color: #5C7A48; } .money-hub-ic-sm { width: 30px; height: 30px; background: transparent; } .money-hub-row-label { flex: 1 1 auto; font-size: 15px; } .money-hub-row-label b { color: #3C5230; font-weight: 700; } .money-hub-arrow { flex: 0 0 auto; color: #5C7A48; font-size: 19px; } .money-hub-arrow-muted { color: #B7B3A6; } .money-hub-nav { display: flex; align-items: center; gap: 12px; padding: 15px 18px; color: #2C2C27; min-height: 44px; } .money-hub-flag { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 16px; text-decoration: none; background: #FBF1E6; border: 1px solid #EBD9C2; color: #8A5B2E; } .money-hub-flag .money-hub-row-label b { color: #8A5B2E; } .money-hub-flag-ok { background: #EEF3EA; border-color: #DCE6D2; color: #46603A; } .money-hub-flag-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #E7B57A; color: #fff; font-weight: 700; } .money-hub-flag-ic-ok { background: #7FA766; } .money-hub-flag .money-hub-arrow { color: #C09257; } .money-hub-exports { margin-top: 2px; } .money-hub-exports-label { display: block; font-size: 12px; color: #8A8A80; margin-bottom: 6px; } .money-hub-views { justify-content: center; margin-top: 4px; } @media (min-width: 1024px) { .money-hub { max-width: 900px; grid-template-columns: 1fr 1fr; align-items: start; } .money-hub-top, .money-hub-periods, .money-hub-profit, .money-hub-exports, .money-hub-views { grid-column: 1 / -1; } .money-hub-profit-value { font-size: 56px; } .money-hub-branch { width: 200px; height: 150px; top: 30px; } } @media (max-width: 380px) { .money-hub-profit-value { font-size: 40px; } .money-hub-branch { width: 110px; opacity: 0.75; } .money-hub-profit-body small { max-width: 74%; } } @media (prefers-reduced-motion: reduce) { .money-hub-round, .money-hub-period { transition: none; } } /* Экран 34 hub — refine: текст прибыли над декоративной веткой, без клиппинга. */ .money-hub-profit-body { position: relative; z-index: 1; } .money-hub-profit-value-empty { max-width: 66%; } .money-hub-branch { z-index: 0; } /* Экран 34 — узкий fix переноса «Экономическая» (разрешённая точечная правка). */ .money-hub-mode { white-space: nowrap; } @media (max-width: 400px) { .money-hub-modes { gap: 10px; } .money-hub-mode { font-size: 12.5px; } } /* ========================================================================== Экран 35 — «Аналитика прибыли / ИИ-аналитик». Только layout money-раздела; цветовая система/токены не меняются (те же фирменные зелёные, что и в hub). Референс: назад+заголовок, период, формула прибыли, линейный график, AI. ========================================================================== */ .money-an { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; } .money-an-top { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; } .money-an-back { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: #3C5230; border: 1px solid #ECEAE0; box-shadow: 0 6px 16px rgba(66,62,44,0.10); text-decoration: none; } .money-an-back:hover { background: #F1F3EC; } .money-an-title { margin: 0; text-align: center; font-size: 26px; font-weight: 700; color: #3C5230; } .money-an-periods { margin: 0; } .money-an-modes { display: flex; gap: 22px; padding: 2px 4px; } .money-an-formula { position: relative; overflow: hidden; background: #fff; border: 1px solid #ECEAE0; border-radius: 22px; padding: 18px 20px; box-shadow: 0 12px 30px rgba(66,62,44,0.09); } .money-an-formula-body { position: relative; z-index: 1; } .money-an-formula-text { display: block; font-size: 14px; color: #6B6B60; line-height: 1.5; } .money-an-formula-value { display: block; font-size: 40px; line-height: 1.1; font-weight: 800; color: #3C5230; margin-top: 4px; letter-spacing: -0.01em; } .money-an-formula-value.is-negative { color: #A04040; } .money-an-formula-body small { display: block; margin-top: 6px; } .money-an-branch { z-index: 0; } .money-an-scale { display: flex; gap: 6px; padding: 5px; background: #fff; border: 1px solid #E7E4D8; border-radius: 14px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .money-an-scale-pill { padding: 7px 16px; border-radius: 10px; font-size: 13.5px; color: #2C2C27; text-decoration: none; white-space: nowrap; } .money-an-scale-pill.is-active { background: linear-gradient(135deg, #5C7A48, #3C5230); color: #fff; font-weight: 600; } .money-an-scale-pill:not(.is-active):hover { background: #F1F3EC; } .money-an-chart-card { background: #fff; border: 1px solid #ECEAE0; border-radius: 20px; padding: 14px; box-shadow: 0 10px 28px rgba(66,62,44,0.08); } .money-an-svg { display: block; width: 100%; height: auto; } .money-an-grid { stroke: #EDEBE1; stroke-width: 1; } .money-an-zero { stroke: #C7CBB8; stroke-width: 1; stroke-dasharray: 3 3; } .money-an-line { stroke: #3C5230; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .money-an-dot { fill: #5C7A48; } .money-an-ylab, .money-an-xlab { fill: #6B6B60; font-size: 11px; font-family: inherit; } .money-an-chart-empty { text-align: center; padding: 30px 16px; color: #6B6B60; } .money-an-chart-empty strong { display: block; color: #2C2C27; margin-bottom: 6px; } .money-an-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .money-an-stat { background: #fff; border: 1px solid #ECEAE0; border-radius: 16px; padding: 12px 14px; box-shadow: 0 6px 16px rgba(66,62,44,0.06); } .money-an-stat span { display: block; font-size: 12.5px; color: #6B6B60; } .money-an-stat b { display: block; font-size: 19px; color: #3C5230; margin-top: 3px; } .money-an-stat b.is-negative { color: #A04040; } .money-an-stat-primary { background: #F1F5EC; border-color: #D7E0CB; } .money-an-ai, .money-an-ask, .money-an-recs { background: #fff; border: 1px solid #ECEAE0; border-radius: 20px; padding: 16px 18px; box-shadow: 0 8px 22px rgba(66,62,44,0.06); } .money-an-ask-chips { flex-wrap: wrap; margin-bottom: 10px; } .money-an-answer { margin-top: 4px; } .money-an-recs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .money-an-rec { display: block; padding: 12px 14px; border-radius: 14px; background: #F7F8F3; border: 1px solid #E7E4D8; text-decoration: none; min-height: 44px; } .money-an-rec:hover { background: #EFF2E9; } .money-an-rec b { display: block; color: #3C5230; font-size: 14px; } .money-an-rec span { display: block; color: #6B6B60; font-size: 12px; margin-top: 2px; } @media (min-width: 1024px) { .money-an { max-width: 900px; } } @media (max-width: 560px) { .money-an-stats { grid-template-columns: 1fr; } .money-an-recs-grid { grid-template-columns: 1fr; } .money-an-title { font-size: 22px; } .money-an-formula-value { font-size: 32px; } } /* ============================================================================ Экран 36 — «Настройки бухгалтерии». Утверждённая accounting-палитра (Экран 34/35): тёмно-зелёный #3C5230, зелёный #5C7A48, карточки #fff/#ECEAE0, та же веточка. ========================================================================== */ .money-set { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; } .money-set-head { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; } .money-set-back { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: #3C5230; border: 1px solid #ECEAE0; box-shadow: 0 6px 16px rgba(66,62,44,0.10); text-decoration: none; } .money-set-back:hover { background: #F1F3EC; } .money-set-title { margin: 0; text-align: center; font-size: 26px; font-weight: 700; color: #3C5230; } .money-set-head-spacer { display: block; } .money-set-status { position: sticky; top: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; align-self: center; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid #E7E4D8; box-shadow: 0 4px 12px rgba(66,62,44,0.08); font-size: 13px; color: #6B6B60; } .money-set-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #B8C2A9; flex: 0 0 auto; transition: background 160ms ease; } .money-set-status[data-state="saving"] .money-set-status-dot { background: #E0A85B; } .money-set-status[data-state="saved"] .money-set-status-dot { background: #7FA766; } .money-set-status[data-state="error"] { color: #A04040; border-color: #E8C4C0; } .money-set-status[data-state="error"] .money-set-status-dot { background: #A04040; } .money-set-section-title { margin: 4px 0 -4px; text-align: center; font-size: 15px; font-weight: 600; color: #6B6B60; } .money-set-taxpayer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .money-set-choice { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px; min-height: 56px; background: #fff; border: 1px solid #E7E4D8; border-radius: 18px; cursor: pointer; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; } .money-set-choice:hover { background: #F7F8F3; } .money-set-choice.is-checked { border-color: #5C7A48; background: #F3F7EE; box-shadow: 0 6px 16px rgba(60,82,48,0.12); } .money-set-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .money-set-choice-radio { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #B8C2A9; box-sizing: border-box; display: inline-block; position: relative; transition: border-color 140ms ease; } .money-set-choice.is-checked .money-set-choice-radio, .money-set-docrow.is-checked .money-set-choice-radio { border-color: #5C7A48; } .money-set-choice.is-checked .money-set-choice-radio::after, .money-set-docrow.is-checked .money-set-choice-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #5C7A48; } .money-set-choice-label { font-size: 16px; color: #2C2C27; font-weight: 500; } .money-set-taxpanel { background: #fff; border: 1px solid #ECEAE0; border-radius: 18px; padding: 14px 16px; box-shadow: 0 8px 22px rgba(66,62,44,0.06); } .money-set-taxpanel-lead { margin: 0; font-size: 14px; color: #2C2C27; line-height: 1.5; } .money-set-taxpanel-muted .money-set-taxpanel-lead strong { color: #3C5230; } .money-set-taxpanel p + p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; } .money-set-star { color: #5C7A48; font-weight: 700; } .money-set-advanced { margin-top: 10px; } .money-set-advanced > summary { cursor: pointer; font-size: 14px; color: #3C5230; font-weight: 600; list-style: none; padding: 6px 0; } .money-set-advanced > summary::-webkit-details-marker { display: none; } .money-set-advanced > summary::before { content: "＋ "; color: #5C7A48; } .money-set-advanced[open] > summary::before { content: "－ "; } .money-set-advanced-body { display: grid; gap: 12px; margin-top: 8px; } .money-set-field { display: grid; gap: 5px; } .money-set-field > span { font-size: 13px; color: #6B6B60; } .money-set-field input, .money-set-field select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #E7E4D8; border-radius: 12px; background: #fff; font: inherit; color: #2C2C27; box-sizing: border-box; } .money-set-field input:focus, .money-set-field select:focus { outline: none; border-color: #5C7A48; box-shadow: 0 0 0 3px rgba(92,122,72,0.15); } .money-set-toggle { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #2C2C27; cursor: pointer; min-height: 44px; } .money-set-toggle input { width: 18px; height: 18px; accent-color: #5C7A48; } .money-set-card { position: relative; background: #fff; border: 1px solid #ECEAE0; border-radius: 22px; padding: 18px 20px; box-shadow: 0 8px 22px rgba(66,62,44,0.07); } .money-set-card-head { position: relative; display: flex; align-items: flex-start; gap: 10px; min-height: 40px; padding-right: 68px; } .money-set-marker { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 7px; border-radius: 50%; background: #5C7A48; } .money-set-card-title { margin: 0; font-size: 19px; font-weight: 700; color: #3C5230; line-height: 1.25; } .money-set-sprig { position: absolute; top: -6px; right: -6px; width: 74px; height: 54px; background: var(--redesign-asset-botanical) no-repeat right top / contain; opacity: 0.9; pointer-events: none; } .money-set-inner { margin-top: 14px; border: 1px solid #E7E4D8; border-radius: 16px; padding: 14px 16px; background: #FCFCF9; } .money-set-functions { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .money-set-function { position: relative; min-width: 0; min-height: 46px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #E7E4D8; border-radius: 14px; background: #fff; color: #2C2C27; font-size: 14px; line-height: 1.25; cursor: pointer; box-sizing: border-box; } .money-set-function:has(input:checked) { border-color: #AFC29E; background: #F2F6EC; color: #3C5230; } .money-set-function input { position: absolute; width: 1px; height: 1px; opacity: 0; } .money-set-function-check { flex: 0 0 auto; width: 20px; height: 20px; border: 1.5px solid #AEB7A3; border-radius: 7px; display: inline-grid; place-items: center; background: #fff; } .money-set-function input:checked + .money-set-function-check { border-color: #5C7A48; background: #5C7A48; } .money-set-function input:checked + .money-set-function-check::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); } .money-set-function input:focus-visible + .money-set-function-check { outline: 3px solid rgba(92,122,72,0.2); outline-offset: 2px; } .money-set-hint { margin: 0 0 10px; font-size: 13px; color: #6B6B60; line-height: 1.5; } .money-set-hint.muted { color: #8A8A80; margin-top: 10px; } .money-set-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .money-set-item { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; color: #2C2C27; } .money-set-item-num { color: #8A8A80; flex: 0 0 auto; } .money-set-item-label { flex: 1 1 auto; } .money-set-item-badge { flex: 0 0 auto; font-size: 11px; color: #5C7A48; background: #EEF3EA; border: 1px solid #DCE6D2; border-radius: 999px; padding: 2px 8px; } .money-set-item-remove { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #E8DAD3; background: #fff; color: #A04040; font-size: 17px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .money-set-item-remove:hover { background: #FBF0EE; } .money-set-plus { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 12px 0 0 auto; border-radius: 50%; border: 1.5px solid #5C7A48; background: #fff; color: #5C7A48; font-size: 24px; line-height: 1; cursor: pointer; transition: background 140ms ease; } .money-set-plus:hover { background: #EEF3EA; } .money-set-card > .money-set-plus { position: relative; } .money-set-inner .money-set-plus { display: flex; } @media (max-width: 430px) { .money-set-functions { grid-template-columns: 1fr; } } .money-set-add { display: none; grid-template-columns: 1fr auto auto; gap: 8px; margin-top: 12px; align-items: center; } .money-set-add:not([hidden]) { display: grid; } .money-set-add input[type="text"] { min-height: 44px; padding: 10px 12px; border: 1px solid #E7E4D8; border-radius: 12px; font: inherit; box-sizing: border-box; } .money-set-add input[type="text"]:focus { outline: none; border-color: #5C7A48; box-shadow: 0 0 0 3px rgba(92,122,72,0.15); } .money-set-add-save { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #5C7A48, #3C5230); color: #fff; font-weight: 600; cursor: pointer; } .money-set-add-cancel { width: 40px; height: 40px; border-radius: 12px; border: 1px solid #E7E4D8; background: #fff; color: #8A8A80; font-size: 18px; cursor: pointer; } .money-set-field-error { margin: 8px 0 0; font-size: 13px; color: #A04040; } .money-set-docselect { margin-top: 14px; border: 1px solid #E7E4D8; border-radius: 16px; overflow: hidden; } .money-set-docrow { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 56px; cursor: pointer; } .money-set-docrow + .money-set-docrow { border-top: 1px solid #EDEBE1; } .money-set-docrow:hover { background: #F7F8F3; } .money-set-docrow input { position: absolute; opacity: 0; width: 1px; height: 1px; } .money-set-docrow-text { display: flex; flex-direction: column; gap: 1px; } .money-set-docrow-text strong { font-size: 15px; color: #2C2C27; font-weight: 600; } .money-set-docstatus { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 13px; } .money-set-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #EEF3EA; color: #46603A; border: 1px solid #DCE6D2; } .money-set-badge-in_progress { background: #FBF3E4; color: #8A5B2E; border-color: #EBD9C2; } .money-set-badge-ready { background: #E8F1E2; color: #35632B; border-color: #C9E0BC; } .money-set-badge-rejected { background: #FBF0EE; color: #A04040; border-color: #E8C4C0; } .money-set-doc-open { color: #3C5230; font-weight: 600; text-decoration: underline; } .money-set-doc-actions { margin-top: 14px; display: flex; justify-content: flex-end; } .money-set-doc-request { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1.5px solid #5C7A48; border-radius: 14px; background: #fff; color: #3C5230; font-weight: 600; font-size: 15px; cursor: pointer; transition: background 140ms ease; } .money-set-doc-request:hover { background: #EEF3EA; } .money-set-doc-request:disabled { opacity: 0.6; cursor: default; } .money-set-reports { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; } .money-set-report { border: 1px solid #E7E4D8; border-radius: 14px; padding: 6px 12px; background: #FCFCF9; } .money-set-report.is-inactive { opacity: 0.6; } .money-set-report-row { display: flex; align-items: center; gap: 10px; min-height: 48px; } .money-set-report-title { flex: 1 1 auto; font-size: 15px; color: #2C2C27; } .money-set-clip { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid #E7E4D8; background: #fff; color: #5C7A48; cursor: pointer; } .money-set-clip:hover { background: #EEF3EA; } .money-set-report-restore { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid #DCE6D2; border-radius: 10px; background: #EEF3EA; color: #46603A; font-size: 13px; cursor: pointer; } .money-set-attachments { list-style: none; margin: 4px 0 8px; padding: 0 0 0 4px; display: grid; gap: 6px; } .money-set-attachment { display: flex; align-items: center; gap: 8px; font-size: 13px; } .money-set-attachment a { color: #3C5230; text-decoration: underline; word-break: break-word; } .money-set-field-select select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C7A48' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (min-width: 1024px) { .money-set { max-width: 900px; } .money-set-card { padding: 22px 26px; } } @media (max-width: 420px) { .money-set-taxpayer { grid-template-columns: 1fr; } .money-set-title { font-size: 22px; } .money-set-card-title { font-size: 17px; } .money-set-sprig { width: 58px; height: 44px; opacity: 0.8; } } @media (prefers-reduced-motion: reduce) { .money-set-choice, .money-set-status-dot, .money-set-plus, .money-set-doc-request { transition: none; } } /* PWA-оболочка: отступ под нижнюю навигацию и safe-area, чтобы контент и add-кнопки не перекрывались панелью и системными жестами. */ .pwa-master-accounting-settings { padding-bottom: 12px; } /* Экран 36 — mobile fix (QA). Глобальный хотфикс `@media (max-width:720px) .admin-page button { width:100% }` растягивал круглые/иконочные кнопки Экрана 36 в эллипсы на PWA/мобиле. Возвращаем фиксированный размер с более высокой специфичностью (.money-set … = 0,2,0 > .admin-page button = 0,1,1). */ .money-set .money-set-plus { width: 44px; } .money-set .money-set-item-remove { width: 26px; } .money-set .money-set-clip { width: 44px; } .money-set .money-set-add-cancel { width: 44px; } .money-set .money-set-add-save { width: auto; } .money-set .money-set-report-restore { width: auto; } /* Имя файла вложения должно усекаться многоточием, а не схлопываться в вертикальный столбик из букв при нехватке ширины (flexbox min-width:0). */ .money-set-attachment { flex-wrap: wrap; } .money-set-attachment a { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================================ Экраны 37 «Доходы» + 42 «Добавление дохода». Утверждённая accounting-палитра. ========================================================================== */ .money-inc, .money-inc-create { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; } .money-inc-head { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; } .money-inc-back { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: #3C5230; border: 1px solid #ECEAE0; box-shadow: 0 6px 16px rgba(66,62,44,0.10); text-decoration: none; } .money-inc-back:hover { background: #F1F3EC; } .money-inc-title { margin: 0; text-align: center; font-size: 26px; font-weight: 700; color: #3C5230; } .money-inc-head-spacer { display: block; } .money-inc-sprig { width: 74px; height: 48px; background: var(--redesign-asset-botanical) no-repeat right center / contain; opacity: 0.9; } .money-inc-select { width: 100%; min-height: 46px; padding: 10px 38px 10px 14px; border: 1px solid #E7E4D8; border-radius: 14px; background-color: #fff; font: inherit; font-size: 15px; color: #2C2C27; box-sizing: border-box; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C7A48' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .money-inc-select:focus { outline: none; border-color: #5C7A48; box-shadow: 0 0 0 3px rgba(92,122,72,0.15); } .money-inc-period { max-width: 200px; } .money-inc-chart-card { background: #fff; border: 1px solid #ECEAE0; border-radius: 24px; padding: 18px 18px 12px; box-shadow: 0 12px 34px rgba(66,62,44,0.10); } .money-inc-total { display: grid; gap: 2px; margin-bottom: 12px; } .money-inc-total-label { font-size: 13px; color: #6B6B60; } .money-inc-total-value { font-size: 34px; line-height: 1.05; font-weight: 800; color: #3C5230; letter-spacing: -0.01em; } .money-inc-chart-inner { position: relative; } .money-inc-chart-svg { display: block; width: 100%; height: 200px; } .money-inc-grid { stroke: #EFEDE3; stroke-width: 1; } .money-inc-line { stroke: #5C7A48; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .money-inc-area { fill: rgba(92,122,72,0.10); stroke: none; } .money-inc-dot { fill: #3C5230; } .money-inc-axis-y { fill: #8A8A80; font-size: 11px; text-anchor: end; } .money-inc-axis-x { fill: #8A8A80; font-size: 11px; text-anchor: middle; } .money-inc-chart-empty { padding: 8px 4px 12px; font-size: 13px; color: #6B6B60; } .money-inc-filter { max-width: 260px; } .money-inc-filter-select { font-weight: 600; color: #3C5230; } .money-inc-add { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 16px; background: linear-gradient(135deg, #EAF1E1, #DCE8CE); color: #2F4A24; font-weight: 600; font-size: 16px; text-decoration: none; border: 1px solid #D3E1C2; } .money-inc-add:hover { background: linear-gradient(135deg, #E3EDD6, #D2E1C0); } .money-inc-add-plus { font-size: 20px; line-height: 1; } .money-inc-list-card, .money-inc-full-card { background: #fff; border: 1px solid #ECEAE0; border-radius: 22px; padding: 16px 18px; box-shadow: 0 8px 22px rgba(66,62,44,0.07); } .money-inc-rows, .money-inc-full-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .money-inc-row { display: flex; align-items: center; gap: 10px; min-height: 32px; } .money-inc-row-marker { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #5C7A48; } .money-inc-row-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: #2C2C27; } .money-inc-row-amount { flex: 0 0 auto; font-weight: 700; color: #3C5230; font-variant-numeric: tabular-nums; } .money-inc-expand { display: inline-flex; align-items: center; margin-top: 14px; padding: 10px 18px; min-height: 44px; border: 1px solid #5C7A48; border-radius: 12px; background: #fff; color: #3C5230; font-size: 14px; font-weight: 600; text-decoration: none; } .money-inc-expand:hover { background: #EEF3EA; } .money-inc-empty { padding: 10px 4px; } .money-inc-empty strong { color: #3C5230; display: block; } .money-inc-full-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .money-inc-full-title { margin: 0; font-size: 17px; font-weight: 700; color: #3C5230; } .money-inc-full-total { font-size: 12px; color: #8A8A80; } .money-inc-full-row { display: grid; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid #F1EFE7; } .money-inc-full-row:last-child { border-bottom: 0; padding-bottom: 0; } .money-inc-full-main { display: flex; align-items: center; gap: 10px; } .money-inc-full-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: #2C2C27; } .money-inc-full-meta { font-size: 12px; padding-left: 18px; } .money-inc-more { display: inline-flex; align-items: center; margin-top: 12px; padding: 10px 18px; min-height: 44px; border: 1px solid #5C7A48; border-radius: 12px; background: #fff; color: #3C5230; font-size: 14px; text-decoration: none; } .money-inc-more:hover { background: #EEF3EA; } .money-inc-benefits { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 14px 18px; border-radius: 16px; background: linear-gradient(135deg, #EAF1E1, #DCE8CE); color: #2F4A24; font-weight: 600; text-decoration: none; border: 1px solid #D3E1C2; } .money-inc-benefits:hover { background: linear-gradient(135deg, #E3EDD6, #D2E1C0); } .money-inc-benefits-soft { flex-direction: column; align-items: flex-start; gap: 2px; cursor: default; } .money-inc-benefits-arrow { font-size: 20px; color: #3C5230; } .money-inc-ai { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; border-radius: 18px; background: linear-gradient(135deg, #5C7A48, #3C5230); color: #fff; font-weight: 600; font-size: 17px; text-decoration: none; overflow: hidden; } .money-inc-ai:hover { filter: brightness(1.04); } .money-inc-ai-star { font-size: 15px; } .money-inc-ai-sprig { position: absolute; right: 8px; top: 6px; width: 72px; height: 48px; background: var(--redesign-asset-botanical) no-repeat right center / contain; opacity: 0.35; pointer-events: none; } /* --- Экран 42: форма --- */ .money-inc-create-intro { display: grid; gap: 2px; } .money-inc-create-heading { margin: 0; font-size: 22px; font-weight: 700; color: #3C5230; } .money-inc-create-card { background: #fff; border: 1px solid #ECEAE0; border-radius: 22px; padding: 18px 20px; box-shadow: 0 8px 22px rgba(66,62,44,0.07); display: grid; gap: 16px; } .money-inc-field { display: grid; gap: 6px; } .money-inc-field-label { font-size: 13px; color: #6B6B60; font-weight: 600; } .money-inc-field input, .money-inc-field select { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #E7E4D8; border-radius: 14px; background: #fff; font: inherit; font-size: 16px; color: #2C2C27; box-sizing: border-box; } .money-inc-field input:focus, .money-inc-field select:focus { outline: none; border-color: #5C7A48; box-shadow: 0 0 0 3px rgba(92,122,72,0.15); } .money-inc-field input[aria-invalid="true"], .money-inc-field.is-invalid input { border-color: #A04040; } .money-inc-field-error { font-size: 13px; color: #A04040; } .money-inc-form-error { margin: 0; font-size: 14px; color: #A04040; } .money-inc-save { min-height: 52px; border: 0; border-radius: 16px; background: #3C5230; color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; } .money-inc-save:hover { background: #33481f; } .money-inc-save:disabled { opacity: 0.65; cursor: default; } @media (min-width: 1024px) { .money-inc, .money-inc-create { max-width: 860px; } .money-inc-chart-svg { height: 260px; } } @media (max-width: 480px) { .money-inc-title { font-size: 22px; } .money-inc-total-value { font-size: 28px; } .money-inc-period, .money-inc-filter { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { .money-inc-ai, .money-inc-add, .money-inc-benefits { transition: none; } } .pwa-master-accounting-income, .pwa-master-accounting-income-create { padding-bottom: 12px; } /* Экран 38 «Расходы»: карточка «Налоги» — белая (в отличие от зелёной «Льготы»). */ .money-inc-taxes { background: #fff; border-color: #ECEAE0; color: #2C2C27; } .money-inc-taxes:hover { background: #F7F8F3; } .money-inc-taxes .money-inc-benefits-arrow { color: #5C7A48; } .pwa-master-accounting-expenses, .pwa-master-accounting-expense-create { padding-bottom: 12px; } /* ============================================================================ Экран 39 «Льготы» + подробности. Утверждённая accounting-палитра. Юридически безопасные формулировки; статус — не только цветом (есть текст-бейдж). ========================================================================== */ .money-ben, .money-ben-detail { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; } .money-ben-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 16px; background: #F3F7EE; border: 1px solid #DCE6D2; } .money-ben-note-ic { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #5C7A48; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-style: italic; } .money-ben-note p { margin: 0; font-size: 14px; color: #3C4A2F; line-height: 1.5; } .money-ben-status-region { font-size: 13px; color: #46603A; min-height: 0; } .money-ben-status-region[data-state="error"] { color: #A04040; } .money-ben-status-region:empty { display: none; } .money-ben-profile-gap { padding: 12px 16px; border-radius: 14px; background: #FBF3E4; border: 1px solid #EBD9C2; } .money-ben-profile-gap p { margin: 0 0 6px; font-size: 13px; color: #8A5B2E; } .money-ben-profile-link { display: inline-flex; align-items: center; min-height: 44px; color: #3C5230; font-weight: 600; text-decoration: underline; } .money-ben-tabs { display: flex; gap: 6px; padding: 5px; background: #fff; border: 1px solid #E7E4D8; border-radius: 14px; } .money-ben-tab { flex: 1 1 auto; text-align: center; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 10px; font-size: 14px; color: #2C2C27; text-decoration: none; } .money-ben-tab.is-active { background: linear-gradient(135deg, #5C7A48, #3C5230); color: #fff; font-weight: 600; } .money-ben-list { display: grid; gap: 14px; } .money-ben-card { background: #fff; border: 1px solid #ECEAE0; border-radius: 20px; padding: 16px 18px; box-shadow: 0 8px 22px rgba(66,62,44,0.07); display: grid; gap: 8px; } .money-ben-card-head { display: flex; align-items: center; gap: 8px; } .money-ben-marker { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #5C7A48; } .money-ben-card-title { flex: 1 1 auto; margin: 0; font-size: 17px; font-weight: 700; color: #3C5230; } .money-ben-badge-regime { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: #46603A; background: #EEF3EA; border: 1px solid #DCE6D2; border-radius: 999px; padding: 2px 9px; } .money-ben-card-more { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #5C7A48; font-size: 22px; text-decoration: none; background: rgba(92,122,72,0.08); } .money-ben-card-desc { margin: 0; font-size: 14px; color: #6B6B60; line-height: 1.45; } .money-ben-eligibility { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 14px; } .money-ben-eligibility-text { color: #2C2C27; } .money-ben-status-badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; } .money-ben-status-matched { background: #E8F1E2; color: #35632B; border: 1px solid #C9E0BC; } .money-ben-status-potential { background: #FBF3E4; color: #8A5B2E; border: 1px solid #EBD9C2; } .money-ben-status-expired, .money-ben-status-not_matched { background: #F1EFE7; color: #6B6B60; border: 1px solid #E1DCCF; } .money-ben-disclaimer { margin: 0; font-size: 12.5px; color: #8A5B2E; } .money-ben-eligibility-matched + .money-ben-disclaimer { color: #46603A; } .money-ben-dims { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .money-ben-dim { font-size: 12.5px; } .money-ben-dim-ok { color: #46603A; } .money-ben-dim-missing { color: #8A5B2E; } .money-ben-validity { margin: 0; font-size: 12.5px; } .money-ben-freshness { margin: 0; font-size: 12.5px; color: #8A5B2E; } .money-ben-state-line { display: flex; } .money-ben-state-chip { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 9px; background: #F1F3EC; color: #6B6B60; border: 1px solid #E1DCCF; } .money-ben-state-using { background: #E8F1E2; color: #35632B; border-color: #C9E0BC; } .money-ben-state-skipped { background: #F1EFE7; color: #6B6B60; } .money-ben-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .money-ben-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid #E7E4D8; background: #fff; color: #3C5230; } .money-ben-btn:hover { background: #F5F6F0; } .money-ben-btn-using { border-color: #5C7A48; color: #3C5230; } .money-ben-btn-using.is-current { background: linear-gradient(135deg, #5C7A48, #3C5230); color: #fff; border-color: #3C5230; } .money-ben-btn-howto { border-color: #5C7A48; } .money-ben-btn-skip { color: #8A5B2E; } .money-ben-btn-restore { border-color: #5C7A48; color: #3C5230; } .money-ben-btn:disabled { opacity: 0.6; cursor: default; } .money-ben-empty { text-align: left; } .money-ben-empty strong { color: #3C5230; display: block; } .money-ben-footnote { font-size: 12px; margin: 0; } /* --- Подробности --- */ .money-ben-detail-card { background: #fff; border: 1px solid #ECEAE0; border-radius: 20px; padding: 18px 20px; box-shadow: 0 8px 22px rgba(66,62,44,0.07); display: grid; gap: 8px; } .money-ben-detail-head { display: flex; align-items: center; gap: 8px; } .money-ben-detail-title { flex: 1 1 auto; margin: 0; font-size: 20px; font-weight: 700; color: #3C5230; } .money-ben-detail-block { background: #fff; border: 1px solid #ECEAE0; border-radius: 16px; padding: 14px 18px; } .money-ben-detail-block-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #3C5230; } .money-ben-detail-text { margin: 0; font-size: 14px; color: #2C2C27; line-height: 1.55; } .money-ben-detail-listing, .money-ben-detail-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: #2C2C27; } .money-ben-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .money-ben-source { display: grid; gap: 2px; } .money-ben-source a { color: #3C5230; font-weight: 600; text-decoration: underline; word-break: break-word; } .money-ben-ext { font-size: 12px; } .money-ben-detail-actions { margin-top: 4px; } @media (min-width: 1024px) { .money-ben, .money-ben-detail { max-width: 860px; } } @media (max-width: 480px) { .money-ben-actions .money-ben-btn { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { .money-ben-btn, .money-ben-tab { transition: none; } } .pwa-master-accounting-benefits, .pwa-master-accounting-benefit-detail { padding-bottom: 12px; } /* ============================================================================ Экран 40 «Налоги». Композиция по референсу (стр. 164), суммы — только расчётная модель backend. Статусы не только цветом (текст в строке). ========================================================================== */ .money-tax { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; } .money-tax-status-region { font-size: 13px; color: #46603A; } .money-tax-status-region[data-state="error"] { color: #A04040; } .money-tax-status-region:empty { display: none; } .money-tax-period { display: flex; justify-content: flex-end; } .money-tax-summary { background: #fff; border: 1px solid #ECEAE0; border-radius: 20px; padding: 18px 20px; box-shadow: 0 8px 22px rgba(66,62,44,0.07); display: grid; gap: 14px; } .money-tax-summary-head { display: flex; align-items: center; gap: 12px; } .money-tax-summary-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: #EEF3EA; color: #3C5230; display: inline-flex; align-items: center; justify-content: center; } .money-tax-summary-title { margin: 0; font-size: 16px; font-weight: 700; color: #3C5230; } .money-tax-summary-sub { margin: 2px 0 0; font-size: 12.5px; color: #6B6B60; } .money-tax-summary-split { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #F0EEE4; } .money-tax-summary-cell { padding: 12px 8px 0; display: grid; gap: 4px; text-align: center; } .money-tax-summary-cell + .money-tax-summary-cell { border-left: 1px solid #F0EEE4; } .money-tax-summary-label { font-size: 12.5px; color: #6B6B60; } .money-tax-summary-value { font-size: 19px; color: #2C2C27; } .money-tax-disclaimer { margin: 0; font-size: 12.5px; color: #8A5B2E; } .money-tax-warning { padding: 12px 16px; border-radius: 14px; background: #FBF3E4; border: 1px solid #EBD9C2; font-size: 13px; color: #8A5B2E; } .money-tax-unsupported { text-align: left; display: grid; gap: 8px; justify-items: start; } .money-tax-table-card { background: #fff; border: 1px solid #ECEAE0; border-radius: 20px; padding: 8px 6px; box-shadow: 0 8px 22px rgba(66,62,44,0.07); overflow-x: auto; } .money-tax-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; } .money-tax-table th, .money-tax-table td { padding: 10px 8px; text-align: right; white-space: nowrap; } .money-tax-table thead th { font-size: 11.5px; font-weight: 600; color: #6B6B60; border-bottom: 1px solid #F0EEE4; } .money-tax-table thead th:first-child, .money-tax-table tbody td:first-child { text-align: center; width: 52px; } .money-tax-th-name, .money-tax-td-name { text-align: left !important; white-space: normal !important; } .money-tax-td-name { font-weight: 600; color: #2C2C27; } .money-tax-row + .money-tax-row th, .money-tax-row + .money-tax-row td { border-top: 1px solid #F7F5EC; } .money-tax-row-status { display: block; font-size: 11px; font-weight: 500; color: #6B6B60; } .money-tax-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #C9CDBF; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: #fff; } .money-tax-dot-paid { background: #3C5230; border-color: #3C5230; } .money-tax-dot-partial { background: linear-gradient(90deg, #5C7A48 50%, #fff 50%); border-color: #5C7A48; } .money-tax-dot-review { border-color: #EBD9C2; background: #FBF3E4; color: #8A5B2E; font-weight: 700; cursor: default; } .money-tax-review-note { font-size: 12px; color: #8A5B2E; } .money-tax-note-cell { text-align: left !important; font-size: 12px; color: #8A5B2E; white-space: normal !important; } .money-tax-total-card { background: #F3F7EE; border: 1px solid #DCE6D2; border-radius: 16px; padding: 14px 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .money-tax-total-label { font-size: 14px; color: #2C2C27; } .money-tax-total-value { font-size: 22px; color: #3C5230; } .money-tax-total-sub { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: #6B6B60; padding: 0 4px; } .money-tax-limit-card { background: #fff; border: 1px solid #ECEAE0; border-radius: 20px; padding: 16px 18px; box-shadow: 0 8px 22px rgba(66,62,44,0.07); display: grid; gap: 10px; } .money-tax-limit-head { display: flex; align-items: center; gap: 10px; } .money-tax-limit-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #EEF3EA; color: #3C5230; display: inline-flex; align-items: center; justify-content: center; } .money-tax-limit-title { flex: 1 1 auto; font-size: 14px; color: #2C2C27; } .money-tax-limit-value { font-size: 18px; color: #3C5230; } .money-tax-limit-bar { height: 10px; border-radius: 999px; background: #EDEBE1; overflow: hidden; } .money-tax-limit-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5C7A48, #3C5230); } .money-tax-limit-scale { display: flex; justify-content: space-between; font-size: 12px; color: #6B6B60; } .money-tax-limit-warn { margin: 0; font-size: 12.5px; color: #8A5B2E; } .money-tax-limit-exceeded .money-tax-limit-fill { background: #A04040; } .money-tax-limit-exceeded .money-tax-limit-warn { color: #A04040; } .money-tax-limit-source { margin: 0; font-size: 11.5px; } .money-tax-reserve-card, .money-tax-payform-card, .money-tax-history-card { background: #fff; border: 1px solid #ECEAE0; border-radius: 20px; padding: 16px 18px; box-shadow: 0 8px 22px rgba(66,62,44,0.07); display: grid; gap: 10px; } .money-tax-reserve-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .money-tax-reserve-title, .money-tax-payform-title, .money-tax-history-title { margin: 0; font-size: 15px; font-weight: 700; color: #3C5230; } .money-tax-reserve-chip { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 9px; background: #EEF3EA; color: #46603A; border: 1px solid #DCE6D2; } .money-tax-reserve-grid { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .money-tax-reserve-grid dt { font-size: 12px; color: #6B6B60; } .money-tax-reserve-grid dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: #2C2C27; } .money-tax-reserve-note { margin: 0; font-size: 12.5px; } .money-tax-payform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .money-tax-field { display: grid; gap: 5px; font-size: 13px; color: #2C2C27; } .money-tax-field input { min-height: 44px; border: 1px solid #E7E4D8; border-radius: 12px; padding: 10px 12px; font-size: 15px; background: #FDFDFB; } .money-tax-field input:focus-visible { outline: 2px solid #5C7A48; outline-offset: 1px; } .money-tax-payform-period { margin: 0; font-size: 12.5px; } .money-tax-payform-note { margin: 0; font-size: 12.5px; } .money-tax-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid #E7E4D8; } .money-tax-btn-primary { background: linear-gradient(135deg, #5C7A48, #3C5230); border-color: #3C5230; color: #fff; } .money-tax-btn-primary:disabled { opacity: 0.6; cursor: default; } .money-tax-btn-secondary { background: #fff; color: #3C5230; border-color: #5C7A48; } .money-tax-btn-secondary:hover { background: #F5F6F0; } .money-tax-history-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .money-tax-history-count { font-size: 12.5px; } .money-tax-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .money-tax-history-item { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; border-top: 1px solid #F7F5EC; padding-top: 8px; } .money-tax-history-item:first-child { border-top: 0; padding-top: 0; } .money-tax-history-amount { font-weight: 700; color: #2C2C27; } .money-tax-history-date { font-size: 13px; color: #6B6B60; } .money-tax-history-comment { font-size: 12.5px; } .money-tax-history-note { margin: 0; font-size: 12px; } .money-tax-ai { margin-top: 2px; } .money-tax-footnote { font-size: 12px; margin: 0; } @media (min-width: 1024px) { .money-tax { max-width: 900px; } } @media (max-width: 480px) { .money-tax-payform-grid { grid-template-columns: 1fr; } .money-tax-summary-split { grid-template-columns: 1fr; } .money-tax-summary-cell + .money-tax-summary-cell { border-left: 0; border-top: 1px solid #F0EEE4; padding-top: 10px; } } @media (prefers-reduced-motion: reduce) { .money-tax-btn, .money-tax-dot { transition: none; } } .pwa-master-accounting-taxes { padding-bottom: 12px; } /* ============================================================================ Экран 41 «Отчётность». Композиция по референсу (стр. 173): тематические секции с карточками-строками. Только реальные сущности; статусы с текстом. ========================================================================== */ .money-rep { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; } .money-rep-status-region { font-size: 13px; color: #46603A; } .money-rep-status-region:empty { display: none; } .money-rep-period { display: flex; justify-content: flex-end; } .money-rep-note { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border-radius: 16px; background: #F3F7EE; border: 1px solid #DCE6D2; } .money-rep-note-ic { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #5C7A48; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-style: italic; } .money-rep-note p { margin: 0; font-size: 13.5px; color: #3C4A2F; line-height: 1.5; } .money-rep-ai-analysis-content { min-width: 0; display: grid; gap: var(--redesign-space-2); overflow-wrap: anywhere; } .money-rep-ai-analysis-title, .money-rep-ai-analysis-heading { margin: 0; color: #2C2C27; } .money-rep-ai-analysis-title { font-size: 14px; } .money-rep-ai-analysis-heading { font-size: 13.5px; } .money-rep-ai-analysis-sections, .money-rep-ai-analysis-section { min-width: 0; display: grid; gap: var(--redesign-space-1); } .money-rep-ai-analysis-sections { gap: var(--redesign-space-2); } .money-rep-section-title { margin: 8px 0 0; font-size: 19px; font-weight: 700; color: #2C2C27; } .money-rep-section-title span { background: linear-gradient(180deg, transparent 58%, rgba(140,171,112,0.28) 58%); padding: 0 2px; } .money-rep-section-sub { margin: -6px 0 0; font-size: 13px; } .money-rep-list, .money-rep-requests, .money-rep-customs { display: grid; gap: 12px; } .money-rep-card, .money-rep-request, .money-rep-custom { background: #fff; border: 1px solid #ECEAE0; border-radius: 20px; padding: 14px 16px; box-shadow: 0 8px 22px rgba(66,62,44,0.07); display: grid; gap: 10px; } .money-rep-card-off { opacity: 0.82; background: #FBFBF7; } .money-rep-card-main { display: flex; align-items: center; gap: 12px; } .money-rep-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; background: #EEF3EA; color: #3C5230; display: inline-flex; align-items: center; justify-content: center; } .money-rep-card-body { flex: 1 1 auto; min-width: 0; } .money-rep-card-title { margin: 0; font-size: 15.5px; font-weight: 700; color: #2C2C27; overflow-wrap: anywhere; } .money-rep-card-desc { margin: 3px 0 0; font-size: 13px; color: #6B6B60; line-height: 1.45; } .money-rep-card-meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; } .money-rep-badge { font-size: 11px; font-weight: 600; color: #46603A; background: #EEF3EA; border: 1px solid #DCE6D2; border-radius: 999px; padding: 2px 9px; } .money-rep-count { font-size: 12.5px; color: #6B6B60; } .money-rep-unavailable { font-size: 12.5px; color: #8A5B2E; } .money-rep-arrow { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #5C7A48; font-size: 20px; text-decoration: none; background: rgba(92,122,72,0.08); } .money-rep-actions { display: flex; flex-wrap: wrap; gap: 8px; } .money-rep-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid #5C7A48; background: #fff; color: #3C5230; } .money-rep-btn:hover { background: #F5F6F0; } .money-rep-btn[aria-busy="true"] { opacity: 0.6; } .money-rep-btn:disabled { cursor: wait; opacity: 0.6; } .money-rep-btn-secondary { border-color: #E7E4D8; justify-self: start; } .money-rep-btn-mini { min-height: 44px; padding: 8px 12px; font-size: 13px; } .money-rep-request-head { display: flex; align-items: center; gap: 12px; } .money-rep-ic-doc { border-radius: 50%; } .money-rep-request-body { flex: 1 1 auto; min-width: 0; } .money-rep-request-dates { margin: 3px 0 0; font-size: 12.5px; } .money-rep-status { flex: 0 0 auto; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; } .money-rep-status-requested { background: #F1F3EC; color: #6B6B60; border: 1px solid #E1DCCF; } .money-rep-status-progress { background: #FBF3E4; color: #8A5B2E; border: 1px solid #EBD9C2; } .money-rep-status-ready { background: #E8F1E2; color: #35632B; border: 1px solid #C9E0BC; } .money-rep-status-rejected { background: #F7ECEC; color: #A04040; border: 1px solid #E8CFCF; } .money-rep-request-note { margin: 0; font-size: 12.5px; } .money-rep-request-result { margin: 0; font-size: 13.5px; color: #2C2C27; overflow-wrap: anywhere; } .money-rep-custom-off { opacity: 0.8; background: #FBFBF7; } .money-rep-custom-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .money-rep-chip { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 9px; background: #EEF3EA; color: #46603A; border: 1px solid #DCE6D2; } .money-rep-custom-off .money-rep-chip { background: #F1EFE7; color: #6B6B60; border-color: #E1DCCF; } .money-rep-attachments { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .money-rep-attachment { display: grid; gap: 2px; border-top: 1px solid #F7F5EC; padding-top: 8px; } .money-rep-attachment:first-child { border-top: 0; padding-top: 0; } .money-rep-attachment-link { color: #3C5230; font-weight: 600; text-decoration: underline; overflow-wrap: anywhere; min-height: 24px; } .money-rep-attachment-note { font-size: 11.5px; } .money-rep-attachment span { font-size: 12.5px; } .money-rep-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; background: #fff; border: 1px solid #ECEAE0; border-radius: 20px; padding: 14px 16px; box-shadow: 0 8px 22px rgba(66,62,44,0.07); } .money-rep-recent-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; border-top: 1px solid #F7F5EC; padding-top: 8px; } .money-rep-recent-item:first-child { border-top: 0; padding-top: 0; } .money-rep-recent-link { color: #3C5230; font-weight: 600; text-decoration: underline; overflow-wrap: anywhere; } .money-rep-recent-item .muted { font-size: 12.5px; } .money-rep-empty { text-align: left; display: grid; gap: 8px; justify-items: start; } .money-rep-ai { margin-top: 2px; } .money-rep-footnote { font-size: 12px; margin: 0; } @media (min-width: 1024px) { .money-rep { max-width: 900px; } } @media (prefers-reduced-motion: reduce) { .money-rep-btn, .money-rep-arrow { transition: none; } } .pwa-master-accounting-reports { padding-bottom: 12px; } /* ============================================================================ Экран 44 «История операций». Карточки по референсу (стр. 192): круглая иконка направления, «Дата: …», тип, сумма справа. Направление не только цветом (знак +/− и текст статуса). ========================================================================== */ .money-his { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; } .money-his-status-region { font-size: 13px; color: #46603A; } .money-his-status-region:empty { display: none; } .money-his-lead-title { margin: 4px 0 0; font-size: 21px; font-weight: 700; color: #2C2C27; } .money-his-lead-sub { margin: 2px 0 0; font-size: 13.5px; } .money-his-controls { display: flex; gap: 10px; flex-wrap: wrap; } .money-his-controls .money-inc-select { flex: 1 1 150px; } .money-his-summary { display: flex; flex-wrap: wrap; gap: 6px 18px; background: #F3F7EE; border: 1px solid #DCE6D2; border-radius: 14px; padding: 12px 16px; font-size: 13px; color: #3C4A2F; } .money-his-pos strong { color: #35632B; } .money-his-neg strong { color: #8A5B2E; } .money-his-summary-note { margin: -6px 0 0; font-size: 12px; } .money-his-group { display: grid; gap: 8px; } .money-his-group-title { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: #6B6B60; text-transform: uppercase; letter-spacing: 0.04em; } .money-his-list { display: grid; gap: 10px; } .money-his-card { background: #fff; border: 1px solid #ECEAE0; border-radius: 18px; padding: 12px 14px; box-shadow: 0 6px 18px rgba(66,62,44,0.06); display: flex; align-items: center; gap: 12px; } .money-his-card-canceled { opacity: 0.75; background: #FBFBF7; } .money-his-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .money-his-ic-positive { background: #E8F1E2; color: #35632B; } .money-his-ic-negative { background: #FBF3E4; color: #8A5B2E; } .money-his-ic-neutral { background: #F1F3EC; color: #6B6B60; } .money-his-card-body { flex: 1 1 auto; min-width: 0; } .money-his-card-date { margin: 0; font-size: 12px; } .money-his-card-title { margin: 2px 0 0; font-size: 14.5px; font-weight: 700; color: #2C2C27; overflow-wrap: anywhere; } .money-his-card-desc { margin: 2px 0 0; font-size: 12.5px; overflow-wrap: anywhere; } .money-his-card-status { margin: 4px 0 0; } .money-his-status { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; background: #F1F3EC; color: #6B6B60; border: 1px solid #E1DCCF; } .money-his-status-paid, .money-his-status-recorded { background: #E8F1E2; color: #35632B; border-color: #C9E0BC; } .money-his-status-canceled { background: #F7ECEC; color: #A04040; border-color: #E8CFCF; } .money-his-card-side { flex: 0 0 auto; display: grid; justify-items: end; gap: 6px; } .money-his-amount { font-size: 16.5px; font-weight: 700; white-space: nowrap; } .money-his-amount-positive { color: #35632B; } .money-his-amount-negative { color: #8A5B2E; } .money-his-amount-neutral { color: #6B6B60; } .money-his-open { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #5C7A48; font-size: 18px; text-decoration: none; background: rgba(92,122,72,0.08); } .money-his-pager { display: grid; gap: 8px; justify-items: center; } .money-his-pager-note { margin: 0; font-size: 12.5px; } .money-his-pager-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .money-his-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid #5C7A48; background: #fff; color: #3C5230; } .money-his-btn:hover { background: #F5F6F0; } .money-his-btn[aria-busy="true"] { opacity: 0.6; } .money-his-btn-secondary { border-color: #E7E4D8; } .money-his-empty { text-align: left; display: grid; gap: 8px; justify-items: start; } .money-his-export { display: grid; gap: 4px; justify-items: start; } .money-his-export-note { margin: 0; font-size: 12px; } .money-his-ai { margin-top: 2px; } @media (min-width: 1024px) { .money-his { max-width: 900px; } } @media (prefers-reduced-motion: reduce) { .money-his-btn, .money-his-open { transition: none; } } .pwa-master-accounting-history { padding-bottom: 12px; } /* Экран 44 — брендинг сайдбара как НЕ-заголовок (единственный H1 страницы принадлежит контенту: «История операций»). Значения повторяют итог каскада для прежнего

: font-family var(--font-heading) (6616 перекрывает Georgia), font-weight 600 (238), letter-spacing -0.035em (5678), line-height 1 и margin 0 (16352), цвет #2C2C27 !important (47109). font-size 2em — измеренный на staging размер прежнего

(32px при базовых 16px); в CSS он нигде не задан, поэтому для
его нужно указать явно. Специфичность подобрана так, чтобы обойти `.sidebar p` и `body.admin-page.admin-app .admin-sidebar-head p`. Класс применяется ТОЛЬКО к варианту
; остальные админ-экраны не затронуты. / .admin-sidebar-head .admin-sidebar-title { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 2em; letter-spacing: -0.035em; line-height: 1; color: var(--ok-blackberry-deep); } body.admin-page.admin-app .admin-sidebar-head .admin-sidebar-title { color: #2C2C27 !important; } / Wave 1B — CTA экрана подтверждения записи всегда доступна. Панель вынесена из .booking-shell в разметке: у секции backdrop-filter, а он создаёт containing block, из-за чего position: fixed внутри неё отсчитывался от секции. Замер на staging до правки: панель на 1399-1557 при scrollY 0 и на -299…-141 внизу страницы, то есть не видна ни в начале, ни в конце. Позиционирование задаёт собственный класс, а не .order-bar: у него в проекте 23 конкурирующих правила position, и опираться на него как на контракт нельзя. Глобальную систему .order-bar здесь не трогаем — только confirmation-скоуп. !important и top: auto нужны, чтобы детерминированно погасить эти правила (одно из них задаёт top, а top вместе с bottom у fixed выигрывает у bottom). / .page-booking-order .booking-confirm-submit-bar, .page-pwa-confirm .booking-confirm-submit-bar { position: fixed !important; top: auto !important; / Центрируем через left/right + auto-margins, а не translateX: в проекте есть правило, сбрасывающее transform в none, и центрирование ломалось — панель уезжала за правый край (замерено: right -85px при вьюпорте 1350). / left: 0 !important; right: 0 !important; transform: none !important; / Обнуляем и вертикальные margin: у легаси .order-bar есть margin-bottom 140px под нижнюю навигацию, и вместе с bottom он давал двойной запас (замерено: зазор 260px вместо 120px). / margin: 0 auto !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; width: min(calc(100% - 32px), 760px); z-index: 60; flex-wrap: wrap; } .page-booking-order .booking-confirm-submit-bar .button, .page-pwa-confirm .booking-confirm-submit-bar .button { min-height: 44px; } .page-booking-order .booking-confirm-submit-bar .booking-order-cta-note, .page-pwa-confirm .booking-confirm-submit-bar .booking-order-cta-note { flex-basis: 100%; margin: 6px 0 0; font-size: 13px; line-height: 1.35; } / Закреплённая панель не должна закрывать последний блок контента. Величину запаса публикует initBookingCtaReserve() по фактической высоте панели; значения ниже — фолбэк без JS, взятый с запасом по замерам: максимум нужно 255px (WEB 320px, вошедший клиент — у него добавляется подпись под кнопками), в PWA — 254px вместе с нижней навигацией. !important нужен потому, что запас перебивают более специфичные правила отступов карточек (в PWA — инлайновый блок в , дававший 24px). / .page-booking-order .booking-shell, .page-pwa-confirm .booking-shell { padding-bottom: var(--booking-cta-reserve, 288px) !important; } / PWA: панель поднимается над нижней навигацией общим токеном проекта. / .page-pwa-confirm .booking-confirm-submit-bar { bottom: calc(var(--space-bottom-nav-safe, calc(108px + env(safe-area-inset-bottom, 0px))) + 12px) !important; } / В PWA панель поднята над нижней навигацией, поэтому запас включает и её. / .page-pwa-confirm .booking-shell { padding-bottom: var(--booking-cta-reserve, calc(180px + var(--space-bottom-nav-safe, 108px))) !important; } / Wave 3 — расписание мастера: две секции и серверная пагинация дней. Точечные правила, массовая чистка CSS в этой волне не проводилась. / .admin-schedule-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 0 10px; flex-wrap: wrap; } .admin-schedule-range-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; } .admin-schedule-range-nav .button { min-height: 44px; } .admin-schedule-range-nav .is-disabled { opacity: 0.45; pointer-events: none; } .admin-schedule-range-current { font-weight: 600; } / Диалог приходит закрытым, открывает его initManualBookingDialog(). / .manual-booking-dialog[open] { display: block; width: min(calc(100% - 32px), 640px); max-height: 85vh; overflow-y: auto; border: 0; border-radius: 18px; padding: 20px; } .manual-booking-dialog::backdrop { background: rgba(24, 16, 28, 0.45); } .manual-booking-dialoghead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .manual-booking-dialogclose { min-height: 44px; } / Wave 4A — доступность: skip-link и заголовок страницы в PWA-оболочке. Компактный слой, массовая чистка CSS в этой волне не проводилась. / .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 12px 16px; min-height: 44px; display: inline-flex; align-items: center; background: #ffffff; color: #2c1338; border-radius: 0 0 12px 0; box-shadow: 0 6px 18px rgba(24, 16, 28, 0.18); } .skip-link:focus, .skip-link:focus-visible { left: 0; } / Заголовок в topbar раньше был : сохраняем прежний вид, меняя только семантику, чтобы у экрана появился H1. / .pwa-topbar-title { margin: 0; font: inherit; font-weight: 700; line-height: inherit; letter-spacing: inherit; } / Wave 4B — доступность: минимальная область нажатия 44px. Визуальный размер текста и иконок не меняем — растёт только кликабельная область через padding и min-height. Замерено до правки: site-brand 109x38, ссылки шапки и подвала 62x23, admin-app-topbarbrand 270x24, admin-profile-edit 60x20. / .site-brand, .site-nav a, .site-footer-links a, .admin-app-topbarbrand, .admin-profile-edit, .admin-sidebar-preview { min-height: 44px; display: inline-flex; align-items: center; } / Ссылкам в плотных рядах даём горизонтальный запас, не раздвигая типографику. / .site-nav a, .site-footer-links a { padding-block: 10px; } / Чекбоксы в списках услуг: сам input остаётся 18x18, кликабельным становится весь ярлык. / .booking-services .service-item, .compact-services .service-item { min-height: 44px; } / Замерено на живом staging при 390px уже после первой правки: ссылки внутри карточек заявок 294x24 и «Все заявки» на дашборде 316x24 — по ширине проходят, по высоте нет. Эти ряды в первый блок не попали, потому что у самих ссылок нет класса. / .booking-links a, .admin-section-title-row a { min-height: 44px; display: inline-flex; align-items: center; padding-block: 10px; } / Wave 4B добор — замерено под мастерской сессией на задеплоенном bab693b при 390px: ярлык .checkbox-inline 290x24 (сам input 18x18 допустим, но кликабельный ярлык обязан быть 44px), стрелки портфолио 42x44 не добирают по ширине, точки карусели 9-11px, «Все услуги» на витрине мастера 70x20. / .checkbox-inline { min-height: 44px; display: inline-flex; align-items: center; } .portfolio-nav { min-width: 44px; min-height: 44px; } .portfolio-dot { min-width: 44px; min-height: 44px; padding: 0 16px; background-clip: content-box; } .s4-all-services, .s4-view-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } / Integration parity hotfix — the PWA time CTA must not cover phone content. Booking confirmation keeps its canonical fixed action above the client nav; the measured JS reserve keeps its final content visible. / @media (max-width: 480px) { body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-app { min-height: calc(100dvh - var(--redesign-space-bottom-nav-safe) - var(--redesign-space-5)); max-height: calc(100dvh - var(--redesign-space-bottom-nav-safe) - var(--redesign-space-5)); overflow: hidden; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-form, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-picker, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-content { min-height: 0; overflow: hidden; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-scroll { max-height: none; overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: var(--redesign-space-4); scroll-padding-bottom: var(--redesign-space-12); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-slot-grid { max-height: none; overflow: visible; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-bottom-panel { position: static; bottom: auto; z-index: auto; margin-top: var(--redesign-space-3); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-shell { padding-bottom: var(--redesign-space-6) !important; } } / Integration parity hotfix — PWA account text/card micro-polish. Fresh screenshots showed one profile action label clipped ("Уведомле…") and saved-master cards overlapping their favorite/action chips. Keep behavior and links intact; only let text/cards occupy their natural compact height. / @media (max-width: 480px) { body.page-beauty.page-pwa-client.page-pwa-profile.client-page .pwa-shell > [data-shared-client-profile="rx-c2"] .client-profile-actions-section .client-dashboard-row strong { overflow: visible; overflow-wrap: normal; text-overflow: clip; white-space: normal; } body.page-beauty.page-pwa-client.page-pwa-profile.client-page .pwa-shell > [data-shared-client-profile="rx-c2"] .client-profile-actions-section .client-profile-notifications-action { grid-column: 1 / -1; } body.page-beauty.page-pwa-client.page-pwa-profile.client-page .pwa-shell > [data-shared-client-profile="rx-c2"] .client-profile-contact span { overflow-wrap: break-word; word-break: normal; } body.page-beauty.page-pwa-client.page-pwa-my-masters.client-page .pwa-shell > [data-shared-client-masters="rx-c1-1"] .client-master-list { max-height: none; overflow: visible; padding-bottom: var(--redesign-space-4); scroll-padding-bottom: calc(var(--redesign-space-bottom-nav-safe) + var(--redesign-space-4)); } body.page-beauty.page-pwa-client.page-pwa-my-masters.client-page .pwa-shell > [data-shared-client-masters="rx-c1-1"] .client-master-card { align-items: start; overflow: visible; } body.page-beauty.page-pwa-client.page-pwa-my-masters.client-page .pwa-shell > [data-shared-client-masters="rx-c1-1"] .client-master-meta { align-content: start; } body.page-beauty.page-pwa-client.page-pwa-my-masters.client-page .pwa-shell > [data-shared-client-masters="rx-c1-1"] .client-master-meta span { max-width: 100%; } body.page-beauty.page-pwa-client.page-pwa-my-masters.client-page .pwa-shell > [data-shared-client-masters="rx-c1-1"] .client-master-chipic { width: var(--redesign-space-4); min-width: var(--redesign-space-4); height: var(--redesign-space-4); } body.page-beauty.page-pwa-client.page-pwa-my-masters.client-page .pwa-shell > [data-shared-client-masters="rx-c1-1"] .client-master-actions { margin-top: 0; } } / Integration parity hotfix — admin services list title width. The Screen 23 card grid was applied to .m23-card, but the actual visual children live one level lower inside .m23-view. That put the whole view into a narrow first column and made long service names wrap letter-by-letter. Keep CRUD forms/links untouched; only move the read-only row layout onto the real container. / body.admin-page.admin-app .master-admin-services-page .m23-card { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; } body.admin-page.admin-app .master-admin-services-page .m23-view[hidden] { display: none; } body.admin-page.admin-app .master-admin-services-page .m23-view { display: grid; grid-template-columns: calc(var(--redesign-space-18) + var(--redesign-space-6)) minmax(0, 1fr) auto; gap: var(--redesign-space-3) var(--redesign-space-4); align-items: center; min-width: 0; } body.admin-page.admin-app .master-admin-services-page .m23-view .m23-thumb { width: calc(var(--redesign-space-18) + var(--redesign-space-6)); height: calc(var(--redesign-space-18) + var(--redesign-space-6)); } body.admin-page.admin-app .master-admin-services-page .m23-copy, body.admin-page.admin-app .master-admin-services-page .m23-titlerow, body.admin-page.admin-app .master-admin-services-page .m23-title { min-width: 0; } body.admin-page.admin-app .master-admin-services-page .m23-title { overflow-wrap: break-word; word-break: normal; } body.admin-page.admin-app .master-admin-services-page .m23-view .m23-edit { justify-self: end; } @media (max-width: 680px) { body.admin-page.admin-app .master-admin-services-page .m23-view { grid-template-columns: var(--redesign-space-16) minmax(0, 1fr); grid-template-areas: "thumb copy" "edit edit"; gap: var(--redesign-space-2) var(--redesign-space-3); align-items: start; } body.admin-page.admin-app .master-admin-services-page .m23-view .m23-thumb { grid-area: thumb; width: var(--redesign-space-16); height: var(--redesign-space-16); } body.admin-page.admin-app .master-admin-services-page .m23-view .m23-copy { grid-area: copy; } body.admin-page.admin-app .master-admin-services-page .m23-view .m23-edit { grid-area: edit; justify-self: stretch; width: 100%; justify-content: center; } } / Integration parity closure — public WEB booking confirmation composition. The submit CTA now lives after .booking-shell, but the legacy desktop form grid still reserved a second 360px CTA column. At 1280+ that collapsed the real comment/account cards to 176px. The old fixed CTA also covered those cards at every viewport. Public WEB only: PWA confirmation keeps its own route-scoped contract and all form/CSRF/submit behavior stays unchanged. / body.page-beauty.page-booking.page-booking-order:not(.page-pwa-client) .booking-shell.booking-app, body.page-beauty.page-booking.page-booking-order:not(.page-pwa-client) .order-review.booking-confirm-card, body.page-beauty.page-booking.page-booking-order:not(.page-pwa-client) .booking-order-submit-form { grid-template-columns: minmax(0, 1fr); } body.page-beauty.page-booking.page-booking-order:not(.page-pwa-client) .booking-order-submit-form > { grid-column: 1; grid-row: auto; width: 100%; min-width: 0; } @media (min-width: 768px) { body.page-beauty.page-booking.page-booking-order:not(.page-pwa-client) .booking-shell.booking-app { padding-bottom: var(--redesign-space-6) !important; } body.page-beauty.page-booking.page-booking-order:not(.page-pwa-client) .booking-confirm-submit-bar { position: static !important; inset: auto !important; width: min(calc(100% - var(--redesign-space-4)), 980px); max-width: 100%; max-height: none; margin: var(--redesign-space-4) auto 0 !important; overflow: visible; transform: none !important; z-index: auto; } body.page-beauty.page-booking.page-booking-order:not(.page-pwa-client) .flow-page { padding-bottom: var(--redesign-space-6) !important; } } /* Integration parity closure — keep the schedule step control composed. The broad <=1024px admin safety rule collapsed this three-part field into three full-width rows on PWA. Restore the intended label/select/unit row only inside the real schedule editor; submitted names and values are intact. / body.admin-page .admin-schedule-editor-page .admin-schedule-ref-average { grid-template-columns: minmax(0, 1fr) calc(var(--redesign-space-18) + var(--redesign-space-6)) var(--redesign-space-8); gap: var(--redesign-space-3); } / Post-deploy parity remediation — WEB adaptation of approved master Screen 19. The desktop shell/sidebar remains the navigation layer; dashboard content now shares the PWA identity and five-section information architecture instead of rendering the legacy action/KPI/next-booking dashboard. / body.admin-page.admin-app .shared-master-dashboard--web { display: grid; width: min(100%, var(--redesign-master-shell-max-wide)); gap: var(--redesign-space-6); margin-inline: auto; color: var(--redesign-color-text-primary); font-family: var(--redesign-font-ui); } body.admin-page.admin-app .shared-master-dashboard--web .admin-profile-card { position: relative; display: grid; grid-template-columns: minmax(calc(var(--redesign-space-18) + var(--redesign-space-18) + var(--redesign-space-12)), 0.82fr) minmax(0, 1.6fr); gap: var(--redesign-space-7); align-items: center; overflow: hidden; padding: var(--redesign-space-7); border: 1px solid var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-modal); background: radial-gradient(circle at 92% 8%, var(--redesign-color-surface-soft-3), transparent 38%), linear-gradient(145deg, var(--redesign-color-surface-card), var(--redesign-color-bg-app-warm)); box-shadow: var(--redesign-shadow-card-soft); } body.admin-page.admin-app .shared-master-dashboard--web .admin-profile-avatar { position: relative; z-index: 1; display: grid; width: 100%; height: auto; aspect-ratio: 4 / 5; place-items: center; overflow: hidden; border-radius: var(--redesign-radius-card-lg); color: var(--redesign-color-brand-primary); background: linear-gradient(145deg, var(--redesign-color-surface-soft), var(--redesign-color-surface-soft-3)); font-family: var(--redesign-font-display); font-size: var(--redesign-text-display-xl-size); box-shadow: var(--redesign-shadow-soft); } body.admin-page.admin-app .shared-master-dashboard--web .admin-profile-avatar img { width: 100%; height: 100%; object-fit: cover; } body.admin-page.admin-app .shared-master-dashboard--web .admin-profile-content { position: relative; z-index: 2; display: grid; min-width: 0; gap: var(--redesign-space-5); } body.admin-page.admin-app .shared-master-dashboard--web .admin-profile-kicker { color: var(--redesign-color-brand-primary); font-size: var(--redesign-text-caption-size); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } body.admin-page.admin-app .shared-master-dashboard--web .m19-namerow { display: flex; min-width: 0; gap: var(--redesign-space-3); align-items: center; flex-wrap: wrap; } body.admin-page.admin-app .shared-master-dashboard--web .m19-namerow h2 { margin: 0; color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-size: clamp(var(--redesign-text-title-xl-size), 4.4vw, var(--redesign-text-display-xl-size)); font-weight: 600; line-height: var(--redesign-line-height-display); letter-spacing: -0.03em; overflow-wrap: anywhere; } body.admin-page.admin-app .shared-master-dashboard--web .m19-rating { display: inline-flex; min-height: calc(var(--redesign-space-8) + var(--redesign-space-1)); gap: var(--redesign-space-2); align-items: center; padding-inline: var(--redesign-space-3); border-radius: var(--redesign-radius-pill); color: var(--redesign-color-brand-primary-deep); background: var(--redesign-color-surface-soft-2); font-size: var(--redesign-text-caption-size); font-weight: 700; } body.admin-page.admin-app .shared-master-dashboard--web .m19-rating svg { width: var(--redesign-space-4); height: var(--redesign-space-4); } body.admin-page.admin-app .shared-master-dashboard--web .m19-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--redesign-space-3) var(--redesign-space-5); } body.admin-page.admin-app .shared-master-dashboard--web .m19-fact { display: grid; grid-template-columns: var(--redesign-space-12) minmax(0, 1fr); min-width: 0; gap: var(--redesign-space-3); align-items: center; color: var(--redesign-color-text-body); } body.admin-page.admin-app .shared-master-dashboard--web .m19-fact-ic { display: grid; width: var(--redesign-space-12); height: var(--redesign-space-12); place-items: center; border-radius: var(--redesign-radius-pill); color: var(--redesign-color-brand-primary); background: var(--redesign-color-surface-soft); } body.admin-page.admin-app .shared-master-dashboard--web .m19-fact-ic svg { width: var(--redesign-space-5); height: var(--redesign-space-5); } body.admin-page.admin-app .shared-master-dashboard--web .m19-fact-txt { min-width: 0; font-size: var(--redesign-text-body-size); line-height: var(--redesign-line-height-body); overflow-wrap: anywhere; } body.admin-page.admin-app .shared-master-dashboard--web .m19-fact-txt em { display: block; color: var(--redesign-color-text-muted); font-size: var(--redesign-text-caption-size); font-style: normal; } body.admin-page.admin-app .shared-master-dashboard--web .m19-botanical { position: absolute; z-index: 0; top: var(--redesign-space-4); right: 0; width: calc(var(--redesign-space-18) + var(--redesign-space-18)); height: calc(var(--redesign-space-18) + var(--redesign-space-18) + var(--redesign-space-18)); background: var(--redesign-asset-botanical) right top / contain no-repeat; opacity: 0.36; pointer-events: none; } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--redesign-space-4); } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-link { display: grid; grid-template-columns: calc(var(--redesign-space-12) + var(--redesign-space-2)) minmax(0, 1fr) auto; min-width: 0; min-height: calc(var(--redesign-space-18) + var(--redesign-space-8)); gap: var(--redesign-space-4); align-items: center; padding: var(--redesign-space-5); border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card-lg); color: var(--redesign-color-text-primary); background: radial-gradient(circle at 100% 0%, var(--redesign-color-surface-soft-3), transparent 46%), var(--redesign-color-surface-card); box-shadow: var(--redesign-shadow-card-soft); text-decoration: none; transition: transform var(--redesign-motion-fast) var(--redesign-ease-standard), box-shadow var(--redesign-motion-fast) var(--redesign-ease-standard); } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-link:last-child { grid-column: 1 / -1; } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-link:hover { box-shadow: var(--redesign-shadow-card); transform: translateY(-2px); } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-linkicon { display: grid; width: calc(var(--redesign-space-12) + var(--redesign-space-2)); height: calc(var(--redesign-space-12) + var(--redesign-space-2)); place-items: center; border-radius: var(--redesign-radius-pill); color: var(--redesign-color-brand-primary); background: var(--redesign-color-surface-soft); } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-linkicon svg { width: var(--redesign-space-7); height: var(--redesign-space-7); } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-linkcopy { display: grid; min-width: 0; gap: var(--redesign-space-1); } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-linkcopy strong { color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-size: var(--redesign-text-title-md-size); font-weight: 600; line-height: var(--redesign-line-height-title); } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-linkcopy small { color: var(--redesign-color-text-muted); font-size: var(--redesign-text-caption-size); line-height: var(--redesign-line-height-body); } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-linkaside { display: grid; gap: var(--redesign-space-2); justify-items: end; } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-linkmeta:not(:empty) { padding: var(--redesign-space-1) var(--redesign-space-2); border-radius: var(--redesign-radius-pill); color: var(--redesign-color-brand-primary-deep); background: var(--redesign-color-surface-soft-2); font-size: var(--redesign-text-caption-size); } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-linkchev { color: var(--redesign-color-brand-olive); font-size: var(--redesign-text-title-md-size); } body.admin-page.admin-app .shared-master-dashboard--web .master-dashboard-utility { width: 100%; justify-self: stretch; } @media (min-width: 961px) { / The 1024px WEB shell leaves 372px per half-width card. Compact the horizontal chrome with existing tokens so every current title/caption fits on one line and the shared 104px card height remains deterministic. / body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-link { block-size: calc(var(--redesign-space-18) + var(--redesign-space-8)); gap: var(--redesign-space-3); padding: var(--redesign-space-4); } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-linkchev { font-size: var(--redesign-text-card-title-size); } } body.admin-page.admin-app .shared-master-dashboard--web :where(a, button):focus-visible { outline: 3px solid var(--redesign-color-border-active); outline-offset: 3px; } @media (max-width: 960px) { body.admin-page.admin-app .shared-master-dashboard--web .admin-profile-card { grid-template-columns: calc(var(--redesign-space-18) + var(--redesign-space-8) + var(--redesign-space-1)) minmax(0, 1fr); gap: var(--redesign-space-5); padding: var(--redesign-space-5); } body.admin-page.admin-app .shared-master-dashboard--web .m19-facts { grid-template-columns: minmax(0, 1fr); gap: var(--redesign-space-2); } } @media (max-width: 680px) { body.admin-page.admin-app .shared-master-dashboard--web { gap: var(--redesign-space-4); } body.admin-page.admin-app .shared-master-dashboard--web .admin-profile-card { grid-template-columns: calc(var(--redesign-space-18) + var(--redesign-space-8) + var(--redesign-space-1)) minmax(0, 1fr); align-items: start; padding: var(--redesign-space-4); border-radius: var(--redesign-radius-card-lg); } body.admin-page.admin-app .shared-master-dashboard--web .admin-profile-content { gap: var(--redesign-space-3); } body.admin-page.admin-app .shared-master-dashboard--web .m19-namerow h2 { font-size: var(--redesign-text-title-xl-size); } body.admin-page.admin-app .shared-master-dashboard--web .m19-fact { grid-template-columns: var(--redesign-space-8) minmax(0, 1fr); gap: var(--redesign-space-2); } body.admin-page.admin-app .shared-master-dashboard--web .m19-fact-ic { width: var(--redesign-space-8); height: var(--redesign-space-8); } body.admin-page.admin-app .shared-master-dashboard--web .m19-fact-ic svg { width: var(--redesign-space-4); height: var(--redesign-space-4); } body.admin-page.admin-app .shared-master-dashboard--web .m19-fact-txt, body.admin-page.admin-app .shared-master-dashboard--web .m19-fact-txt em { font-size: var(--redesign-text-caption-size); } body.admin-page.admin-app .shared-master-dashboard--web .m19-botanical { opacity: 0.2; } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-menu { grid-template-columns: minmax(0, 1fr); gap: var(--redesign-space-3); } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-link:last-child { grid-column: auto; } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-link { grid-template-columns: var(--redesign-space-12) minmax(0, 1fr) auto; min-height: calc(var(--redesign-space-18) + var(--redesign-space-3)); gap: var(--redesign-space-3); padding: var(--redesign-space-4); } body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-linkicon { width: var(--redesign-space-12); height: var(--redesign-space-12); } body.admin-page.admin-app .shared-master-dashboard--web .master-dashboard-utility { width: 100%; } } @media (max-width: 400px) { body.admin-page.admin-app .shared-master-dashboard--web .admin-profile-card { grid-template-columns: minmax(0, 1fr); } body.admin-page.admin-app .shared-master-dashboard--web .admin-profile-avatar { width: 100%; max-height: calc(var(--redesign-space-18) + var(--redesign-space-18) + var(--redesign-space-8) + var(--redesign-space-1)); aspect-ratio: 16 / 9; } body.admin-page.admin-app .shared-master-dashboard--web .m19-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { body.admin-page.admin-app .shared-master-dashboard--web .pwa-master-overview-link { transition: none; } } / WEB/PWA parity remediation: approved master composition, not legacy KPI shells. / .admin-page .master-admin-requests-page, .admin-page .master-admin-client-detail-page, .admin-page .master-admin-upsell-page { color: var(--redesign-color-text-primary); font-family: var(--redesign-font-ui); } .admin-page .master-admin-requests-page { display: grid; gap: var(--redesign-space-4); } .admin-page .master-admin-requests-board { display: grid; gap: var(--redesign-space-4); border-color: var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-modal); background: var(--redesign-color-surface-card); box-shadow: var(--redesign-shadow-card-soft); } .admin-page .master-admin-requests-board > .section-heading { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--redesign-space-5); align-items: end; } .admin-page .master-admin-requests-page .admin-request-card { grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr); border-color: var(--redesign-color-border-subtle); background: var(--redesign-color-surface-card); } .admin-page .master-admin-requests-page .admin-request-cardservice-head { padding-bottom: var(--redesign-space-3); border-bottom: 1px solid var(--redesign-color-border-subtle); } .admin-page .master-admin-requests-page .admin-request-cardservice-copy { display: grid; min-width: 0; gap: var(--redesign-space-2); } .admin-page .master-admin-requests-page .admin-request-cardservice-copy h3 { margin: 0; color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-size: var(--redesign-text-title-lg-size); font-weight: 600; line-height: var(--redesign-line-height-title); overflow-wrap: anywhere; } .admin-page .master-admin-requests-page .admin-request-cardappointment-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; } .admin-page .master-admin-requests-page .admin-request-cardappointment-facts span { justify-content: center; min-height: calc(var(--redesign-space-10) + var(--redesign-space-1)); } .admin-page .master-admin-requests-page .admin-request-cardincluded { display: grid; min-width: 0; gap: var(--redesign-space-2); padding: var(--redesign-space-3) var(--redesign-space-4); border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card); background: var(--redesign-color-surface-soft-3); } .admin-page .master-admin-requests-page .admin-request-cardincluded > strong { color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-size: var(--redesign-text-card-title-size); font-weight: 600; line-height: var(--redesign-line-height-title); } .admin-page .master-admin-requests-page .admin-request-cardincluded ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--redesign-space-1) var(--redesign-space-4); margin: 0; padding: 0; list-style: none; } .admin-page .master-admin-requests-page .admin-request-cardincluded li { position: relative; min-width: 0; padding-left: var(--redesign-space-4); color: var(--redesign-color-text-body); font-size: var(--redesign-text-caption-size); line-height: var(--redesign-line-height-body); overflow-wrap: anywhere; } .admin-page .master-admin-requests-page .admin-request-cardincluded li::before { position: absolute; top: 0.65em; left: 0; width: var(--redesign-space-2); height: var(--redesign-space-2); border-radius: var(--redesign-radius-pill); background: var(--redesign-color-brand-olive); content: ""; transform: translateY(-50%); } .admin-page .master-admin-requests-page .admin-request-cardincluded p { margin: 0; color: var(--redesign-color-text-muted); font-size: var(--redesign-text-caption-size); line-height: var(--redesign-line-height-body); } .admin-page .master-admin-requests-page .admin-request-cardclient-row { display: grid; grid-template-columns: var(--redesign-space-12) minmax(0, 1fr) auto; min-width: 0; gap: var(--redesign-space-3); align-items: center; padding: var(--redesign-space-3); border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card); background: var(--redesign-color-surface-soft-2); } .admin-page .master-admin-requests-page .admin-request-cardclient-avatar { display: grid; width: var(--redesign-space-12); height: var(--redesign-space-12); place-items: center; border-radius: var(--redesign-radius-pill); color: var(--redesign-color-brand-primary-deep); background: var(--redesign-color-surface-soft); font-family: var(--redesign-font-display); font-size: var(--redesign-text-title-md-size); } .admin-page .master-admin-requests-page .admin-request-cardclient-copy { display: grid; min-width: 0; gap: var(--redesign-space-1); } .admin-page .master-admin-requests-page .admin-request-cardclient-copy strong { color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-size: var(--redesign-text-card-title-size); font-weight: 600; line-height: var(--redesign-line-height-title); } .admin-page .master-admin-requests-page .admin-request-cardclient-copy span, .admin-page .master-admin-requests-page .admin-request-cardclient-row small { color: var(--redesign-color-text-muted); font-size: var(--redesign-text-caption-size); line-height: var(--redesign-line-height-body); } .admin-page .master-admin-requests-page .admin-request-cardclient-row .trust-inline { display: grid; gap: var(--redesign-space-1); justify-items: end; } .admin-page .master-admin-requests-page .admin-request-cardcomment { margin: 0; padding: var(--redesign-space-3) var(--redesign-space-4); border-left: var(--redesign-space-1) solid var(--redesign-color-brand-olive); border-radius: 0 var(--redesign-radius-card) var(--redesign-radius-card) 0; color: var(--redesign-color-text-body); background: var(--redesign-color-surface-soft-3); font-family: var(--redesign-font-display); font-size: var(--redesign-text-body-lg-size); font-style: italic; line-height: var(--redesign-line-height-body); } .admin-page .master-admin-requests-page .request-status-actions { align-content: start; border-color: var(--redesign-color-border-subtle); background: var(--redesign-color-surface-soft-2); } .admin-page .master-admin-client-detail-page .admin-client-history-search, .admin-page .master-admin-services-page .m23-search { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--redesign-space-2); align-items: center; } .admin-page .master-admin-client-detail-page .admin-client-history-search input[type="search"], .admin-page .master-admin-services-page .m23-search input[type="search"] { flex: 1 1 calc(var(--redesign-space-18) 4); min-width: min(100%, calc(var(--redesign-space-18) * 3)); } .admin-page .master-admin-client-detail-page .admin-client-history-search :where(input, button, a):focus-visible, .admin-page .master-admin-services-page .m23-search :where(input, button, a):focus-visible { outline: 3px solid var(--redesign-color-border-active); outline-offset: 3px; } .admin-page .master-admin-services-page .m23-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; gap: var(--redesign-space-3); padding-top: var(--redesign-space-2); border-top: 1px solid var(--redesign-color-border-subtle); } .admin-page .master-admin-services-page .m23-content > div { display: grid; min-width: 0; gap: var(--redesign-space-1); } .admin-page .master-admin-services-page .m23-content strong { color: var(--redesign-color-brand-primary-deep); font-size: var(--redesign-text-caption-size); line-height: var(--redesign-line-height-tight); } .admin-page .master-admin-services-page .m23-content ul { display: grid; gap: var(--redesign-space-1); margin: 0; padding: 0; list-style: none; } .admin-page .master-admin-services-page .m23-content li { position: relative; min-width: 0; padding-left: var(--redesign-space-3); color: var(--redesign-color-text-muted); font-size: var(--redesign-text-caption-size); line-height: var(--redesign-line-height-body); overflow-wrap: anywhere; } .admin-page .master-admin-services-page .m23-content p { margin: 0; color: var(--redesign-color-text-subtle); font-size: var(--redesign-text-caption-size); font-style: italic; line-height: var(--redesign-line-height-body); } .admin-page .master-admin-services-page .m23-content li::before { position: absolute; top: 0.65em; left: 0; width: var(--redesign-space-1); height: var(--redesign-space-1); border-radius: var(--redesign-radius-pill); background: var(--redesign-color-brand-olive); content: ""; transform: translateY(-50%); } @media (min-width: 1100px) { .admin-page .master-admin-client-detail-page .admin-client-history-section .stack-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--redesign-space-4); } } .admin-page .master-admin-upsell-page { display: grid; gap: var(--redesign-space-4); } .admin-page .master-admin-upsell-intro { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--redesign-space-5); align-items: end; border-color: var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-modal); background: var(--redesign-color-surface-card); box-shadow: var(--redesign-shadow-card-soft); } .admin-page .master-admin-upsell-intro h2, .admin-page .master-admin-upsell-panel h2, .admin-page .master-admin-upsell-form h3 { color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-weight: 600; line-height: var(--redesign-line-height-title); } .admin-page .master-admin-upsell-intro h2 { font-size: var(--redesign-text-title-xl-size); } .admin-page .master-admin-upsell-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--redesign-space-4); align-items: start; } .admin-page .master-admin-upsell-panel { display: grid; min-width: 0; gap: var(--redesign-space-4); border-color: var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card-lg); background: var(--redesign-color-surface-card); box-shadow: var(--redesign-shadow-card-soft); } .admin-page .master-admin-upsell-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; gap: var(--redesign-space-3); align-items: center; padding: var(--redesign-space-3); border-color: var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card); background: var(--redesign-color-surface-soft-2); box-shadow: none; } .admin-page .master-admin-upsell-itemcopy { display: grid; min-width: 0; gap: var(--redesign-space-2); } .admin-page .master-admin-upsell-itemcopy > strong { color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-size: var(--redesign-text-card-title-size); font-weight: 600; line-height: var(--redesign-line-height-title); overflow-wrap: anywhere; } .admin-page .master-admin-upsell-form { display: grid; min-width: 0; gap: var(--redesign-space-4); padding: var(--redesign-space-4); border-color: var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card); background: var(--redesign-color-surface-soft-3); box-shadow: none; } .admin-page .master-admin-upsell-form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--redesign-space-3); } .admin-page .master-admin-upsell-form :where(label, input, select, textarea, .service-content) { min-width: 0; } .admin-page .master-admin-upsell-form :where(input:not([type="checkbox"]), select, textarea) { width: 100%; min-height: calc(var(--redesign-space-10) + var(--redesign-space-2)); border-color: var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-control); background: var(--redesign-color-surface-card); } .admin-page .master-admin-upsell-form .booking-services { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--redesign-space-2); } .admin-page .master-admin-upsell-form .service-item { min-width: 0; border-color: var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-control); background: var(--redesign-color-surface-card); } .admin-page .master-admin-upsell-page :where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--redesign-color-border-active); outline-offset: 3px; } @media (max-width: 1100px) { .admin-page .master-admin-requests-board > .section-heading, .admin-page .master-admin-upsell-grid { grid-template-columns: minmax(0, 1fr); } .admin-page .master-admin-requests-page .admin-request-cardappointment-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .admin-page .master-admin-requests-page .admin-request-card { grid-template-columns: minmax(0, 1fr); } .admin-page .master-admin-upsell-form .form-grid, .admin-page .master-admin-upsell-form .booking-services { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { .admin-page .master-admin-requests-page .admin-request-cardclient-row, .admin-page .master-admin-upsell-item { grid-template-columns: minmax(0, 1fr); } .admin-page .master-admin-requests-page .admin-request-cardclient-row .trust-inline { justify-items: start; } .admin-page .master-admin-requests-page .admin-request-cardappointment-facts { grid-template-columns: minmax(0, 1fr); } .admin-page .master-admin-requests-page .admin-request-cardincluded ul, .admin-page .master-admin-services-page .m23-content { grid-template-columns: minmax(0, 1fr); } } /* Screen 22 PWA uses the mobile shell heading; remove duplicated WEB framing. / body.admin-page.admin-app.page-pwa-master .master-admin-client-detail-page { gap: var(--redesign-space-3); overflow: visible; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body.admin-page.admin-app.page-pwa-master .master-admin-client-detail-page::after { content: none; } body.admin-page.admin-app.page-pwa-master .master-admin-client-detail-page > .section-heading { display: block; padding-inline: var(--redesign-space-1); } body.admin-page.admin-app.page-pwa-master .master-admin-client-detail-page > .section-heading h2 { margin: 0; font-size: var(--redesign-text-title-xl-size); line-height: var(--redesign-line-height-title); } body.admin-page.admin-app.page-pwa-master .master-admin-client-detail-page .admin-client-history-section { gap: var(--redesign-space-3); overflow: visible; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body.admin-page.admin-app.page-pwa-master .master-admin-client-detail-page .admin-client-history-section > .section-heading { display: none; } / WEB master shell: the sidebar is the canonical desktop navigation. / @media (min-width: 1025px) { body.admin-page.admin-app:not(.page-pwa-master) .admin-app-menu { display: none; } } / Narrow accounting: assistant questions must stay readable, not vertical. / @media (max-width: 600px) { body.admin-page.admin-app .money-page-shell .money-assistant-chips { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; } body.admin-page.admin-app .money-page-shell .money-assistant-chips .filter-pill { width: 100%; min-width: 0; } } / Master PWA auth uses the canonical login handler inside the mobile shell. / body.admin-page.admin-app.page-pwa-master .pwa-master-auth-login { display: grid; width: 100%; gap: var(--redesign-space-4); padding: var(--redesign-space-5); border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card-lg); background: var(--redesign-color-surface-card); box-shadow: var(--redesign-shadow-card-soft); } body.admin-page.admin-app.page-pwa-master .pwa-master-auth-login h2 { margin: 0; color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-size: var(--redesign-text-title-xl-size); font-weight: 600; line-height: var(--redesign-line-height-title); } body.admin-page.admin-app.page-pwa-master .pwa-master-auth-login .auth-copy, body.admin-page.admin-app.page-pwa-master .pwa-master-auth-login .auth-form { display: grid; min-width: 0; gap: var(--redesign-space-3); } body.admin-page.admin-app.page-pwa-master .pwa-master-auth-login :where(input, button) { width: 100%; min-width: 0; } / Screen 34 WEB parity: advanced Money tools remain available without extending the Home composition. / .admin-page .money-page-shell > .money-operations-disclosure { width: 100%; max-width: 900px; margin: var(--redesign-space-4) auto 0; overflow: hidden; border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card); background: var(--redesign-color-surface-card); box-shadow: var(--redesign-shadow-card-soft); } .admin-page .money-page-shell .money-operations-summary { display: grid; grid-template-columns: var(--redesign-space-12) minmax(0, 1fr) var(--redesign-space-6); align-items: center; gap: var(--redesign-space-3); min-height: var(--redesign-space-18); padding: var(--redesign-space-3) var(--redesign-space-4); color: var(--redesign-color-text-primary); cursor: pointer; list-style: none; } .admin-page .money-page-shell .money-operations-summary::-webkit-details-marker { display: none; } .admin-page .money-page-shell .money-operations-summary:focus-visible { outline: 3px solid var(--redesign-color-border-active); outline-offset: -3px; } .admin-page .money-page-shell .money-operations-summaryicon { display: inline-flex; width: var(--redesign-space-12); height: var(--redesign-space-12); align-items: center; justify-content: center; border-radius: var(--redesign-radius-pill); background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary); } .admin-page .money-page-shell .money-operations-summarycopy { display: grid; min-width: 0; gap: var(--redesign-space-1); } .admin-page .money-page-shell .money-operations-summarycopy strong { color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-size: var(--redesign-text-card-title-size); font-weight: 600; line-height: var(--redesign-line-height-tight); } .admin-page .money-page-shell .money-operations-summarycopy small { color: var(--redesign-color-text-muted); font-family: var(--redesign-font-ui); font-size: var(--redesign-text-caption-size); line-height: var(--redesign-line-height-body); } .admin-page .money-page-shell .money-operations-summaryarrow { color: var(--redesign-color-brand-primary); font-size: var(--redesign-text-card-title-size); line-height: 1; transition: transform var(--redesign-motion-fast) var(--redesign-ease-standard); } .admin-page .money-page-shell .money-operations-disclosure[open] .money-operations-summaryarrow { transform: rotate(180deg); } .admin-page .money-page-shell .money-operations-panel { display: grid; min-width: 0; gap: var(--redesign-space-4); padding: var(--redesign-space-5); border-top: 1px solid var(--redesign-color-border-subtle); background: var(--redesign-color-bg-app-warm); } @media (max-width: 520px) { .admin-page .money-page-shell .money-operations-summary { grid-template-columns: var(--redesign-space-10) minmax(0, 1fr) var(--redesign-space-5); padding-inline: var(--redesign-space-3); } .admin-page .money-page-shell .money-operations-summaryicon { width: var(--redesign-space-10); height: var(--redesign-space-10); } .admin-page .money-page-shell .money-operations-panel { padding: var(--redesign-space-3); } } @media (prefers-reduced-motion: reduce) { .admin-page .money-page-shell .money-operations-summary__arrow { transition: none; } } / ========================================================================== Total design truth remediation — client WEB surfaces. The shared booking/auth markup and behavior are already canonical, but the Stage 28 consolidation layer still painted these WEB-only routes with the retired purple product language. This final, route-scoped layer makes WEB a desktop adaptation of approved client Screens 5–8 and extends that same system to the no-direct-reference auth screens. PWA/admin routes, forms, field names, CSRF, sessions, links and booking behavior are untouched. ========================================================================== / / Public catalog: an only-child grid item had auto inline margins without an explicit width, so it shrink-wrapped to 312px inside a 1120px track. / @media (min-width: 1025px) { body.page-beauty.page-platform .masters-app-catalog .cat2-card:only-child { width: 100%; } } / Client login, registration and OTP — INFERRED_FROM_APPROVED_SYSTEM. / body.page-beauty.client-auth-page { background: radial-gradient(circle at 12% 8%, var(--redesign-color-surface-soft-2), transparent 34%), radial-gradient(circle at 88% 14%, var(--redesign-color-surface-soft), transparent 30%), var(--redesign-color-bg-app-warm); color: var(--redesign-color-text-primary); font-family: var(--redesign-font-ui); } body.page-beauty.client-auth-page .client-auth-shell { width: min(100%, 600px); padding: calc(var(--redesign-space-8) + env(safe-area-inset-top)) var(--redesign-space-5) calc(var(--redesign-space-8) + env(safe-area-inset-bottom)); } body.page-beauty.client-auth-page .client-auth-card { position: relative; isolation: isolate; gap: var(--redesign-space-5); padding: clamp(var(--redesign-space-6), 5vw, var(--redesign-space-10)); overflow: hidden; border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card-lg); background: var(--redesign-color-surface-card); background-image: none; box-shadow: var(--redesign-shadow-modal); } body.page-beauty.client-auth-page .client-auth-card > { min-width: 0; } body.page-beauty.client-auth-page .client-auth-card::after { content: ""; position: absolute; z-index: -1; right: calc(-1 * var(--redesign-space-8)); top: var(--redesign-space-5); width: 180px; aspect-ratio: 1; border-radius: var(--redesign-radius-pill); background: radial-gradient(circle, var(--redesign-color-surface-soft), transparent 70%); opacity: 0.72; pointer-events: none; } body.page-beauty.client-auth-page .client-auth-icon, body.page-beauty.client-auth-page .client-auth-action-icon { color: var(--redesign-color-brand-primary); background: var(--redesign-color-surface-soft); } body.page-beauty.client-auth-page .client-auth-icon { width: var(--redesign-space-16); height: var(--redesign-space-16); border: 1px solid var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-control); box-shadow: var(--redesign-shadow-card-soft); } body.page-beauty.client-auth-page .client-auth-copy { gap: var(--redesign-space-2); } body.page-beauty.client-auth-page .client-auth-copy h1 { color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-size: clamp(42px, 6vw, 58px); font-weight: 600; letter-spacing: -0.025em; line-height: var(--redesign-line-height-display); } body.page-beauty.client-auth-page .client-auth-copy p, body.page-beauty.client-auth-page .client-auth-copy small, body.page-beauty.client-auth-page .client-auth-legal { color: var(--redesign-color-text-muted); font-family: var(--redesign-font-ui); line-height: var(--redesign-line-height-body); } body.page-beauty.client-auth-page .client-auth-actions, body.page-beauty.client-auth-page .client-auth-form, body.page-beauty.client-auth-page .client-auth-links { gap: var(--redesign-space-3); } body.page-beauty.client-auth-page .client-auth-action { min-height: var(--redesign-space-18); padding: var(--redesign-space-3) var(--redesign-space-4); border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-control); background: var(--redesign-color-surface-card); background-image: none; color: var(--redesign-color-text-primary); box-shadow: var(--redesign-shadow-card-soft); } body.page-beauty.client-auth-page .client-auth-action:hover { border-color: var(--redesign-color-border-soft-green); background: var(--redesign-color-surface-soft); } body.page-beauty.client-auth-page .client-auth-action-icon { width: var(--redesign-space-12); height: var(--redesign-space-12); border-radius: var(--redesign-radius-sm); } body.page-beauty.client-auth-page .client-auth-action strong { color: var(--redesign-color-text-primary); font-family: var(--redesign-font-ui); font-size: var(--redesign-text-body-size); font-weight: 600; } body.page-beauty.client-auth-page .client-auth-arrow, body.page-beauty.client-auth-page .client-auth-links a, body.page-beauty.client-auth-page .client-auth-legal a { color: var(--redesign-color-brand-primary); } body.page-beauty.client-auth-page .client-auth-input-card { gap: var(--redesign-space-2); padding: var(--redesign-space-3) var(--redesign-space-4); border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-control); background: var(--redesign-color-bg-app-warm); } body.page-beauty.client-auth-page .client-auth-input-card span { color: var(--redesign-color-text-muted); font-family: var(--redesign-font-ui); font-size: var(--redesign-text-micro-size); font-weight: 600; letter-spacing: 0.05em; } body.page-beauty.client-auth-page .client-auth-input-card input { min-height: var(--redesign-space-10); color: var(--redesign-color-text-primary); font-family: var(--redesign-font-ui); font-size: var(--redesign-text-body-size); font-weight: 500; } body.page-beauty.client-auth-page .client-auth-form .button-primary { min-height: var(--redesign-space-14); border-color: var(--redesign-color-brand-primary); border-radius: var(--redesign-radius-pill); background: var(--redesign-color-brand-primary); background-image: none; color: var(--redesign-color-text-inverse); box-shadow: var(--redesign-shadow-primary-action); } body.page-beauty.client-auth-page .client-auth-test-note { border: 1px solid var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-control); background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary-deep); } body.page-beauty.client-auth-page .client-auth-action:focus-visible, body.page-beauty.client-auth-page .client-auth-input-card:focus-within, body.page-beauty.client-auth-page .client-auth-form .button:focus-visible, body.page-beauty.client-auth-page .client-auth-links a:focus-visible, body.page-beauty.client-auth-page .client-auth-legal a:focus-visible { outline: 3px solid var(--redesign-color-calm-green); outline-offset: 3px; } /* Approved Screens 5–8 — public WEB booking desktop adaptation. / body.page-beauty.page-booking:not(.page-pwa-client) { background: radial-gradient(circle at 8% 2%, var(--redesign-color-surface-soft-2), transparent 30%), radial-gradient(circle at 94% 16%, var(--redesign-color-surface-soft), transparent 28%), var(--redesign-color-bg-app-warm); color: var(--redesign-color-text-primary); font-family: var(--redesign-font-ui); } body.page-beauty.page-booking:not(.page-pwa-client) .flow-page { width: min(100%, 1180px); padding: var(--redesign-space-12) var(--redesign-space-6); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-shell.booking-app { gap: var(--redesign-space-6); padding: var(--redesign-space-6); overflow: visible; border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card-lg); background: var(--redesign-color-surface-card); background-image: none; color: var(--redesign-color-text-primary); box-shadow: var(--redesign-shadow-modal); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-app::before, body.page-beauty.page-booking:not(.page-pwa-client) .booking-app::after { content: none; } body.page-beauty.page-booking:not(.page-pwa-client) .flow-app-header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--redesign-space-4); align-items: center; padding: var(--redesign-space-3) var(--redesign-space-4); border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-control); background: var(--redesign-color-bg-app-warm); box-shadow: none; } body.page-beauty.page-booking:not(.page-pwa-client) .flow-back-link { display: inline-flex; min-height: var(--redesign-space-10); align-items: center; padding: 0 var(--redesign-space-4); border: 1px solid var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-pill); background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary); font-family: var(--redesign-font-ui); font-weight: 600; text-decoration: none; } body.page-beauty.page-booking:not(.page-pwa-client) .flow-app-header-copy { display: grid; justify-items: end; gap: var(--redesign-space-1); } body.page-beauty.page-booking:not(.page-pwa-client) .flow-app-header-copy .eyebrow { border: 0; background: transparent; color: var(--redesign-color-brand-olive); font-family: var(--redesign-font-ui); } body.page-beauty.page-booking:not(.page-pwa-client) .flow-app-header-copy strong { color: var(--redesign-color-text-primary); font-family: var(--redesign-font-ui); font-weight: 600; } body.page-beauty.page-booking:not(.page-pwa-client) .booking-step-heading, body.page-beauty.page-booking:not(.page-pwa-client) .section-heading { display: grid; gap: var(--redesign-space-2); max-width: 760px; margin: 0; } body.page-beauty.page-booking:not(.page-pwa-client) .flow-title { margin: 0; color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-size: clamp(44px, 5vw, 64px); font-weight: 600; letter-spacing: -0.025em; line-height: var(--redesign-line-height-display); } body.page-beauty.page-booking:not(.page-pwa-client) .section-lead { margin: 0; color: var(--redesign-color-text-muted); font-family: var(--redesign-font-ui); font-size: var(--redesign-text-body-size); line-height: var(--redesign-line-height-body); } body.page-beauty.page-booking.page-booking-services:not(.page-pwa-client) .booking-flow-form.booking-services-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--redesign-space-6); align-items: start; } body.page-beauty.page-booking:not(.page-pwa-client) .booking-services-main, body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-list, body.page-beauty.page-booking:not(.page-pwa-client) .booking-addon-optionslist { gap: var(--redesign-space-4); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-hero, body.page-beauty.page-booking:not(.page-pwa-client) .booking-card, body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-card, body.page-beauty.page-booking:not(.page-pwa-client) .booking-addon-option, body.page-beauty.page-booking:not(.page-pwa-client) .booking-time-picker, body.page-beauty.page-booking:not(.page-pwa-client) .order-review > .booking-card, body.page-beauty.page-booking:not(.page-pwa-client) .booking-order-auth-gate, body.page-beauty.page-booking:not(.page-pwa-client) .booking-order-comment, body.page-beauty.page-booking:not(.page-pwa-client) .booking-order-account-note { border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card); background: var(--redesign-color-surface-card); background-image: none; color: var(--redesign-color-text-primary); box-shadow: var(--redesign-shadow-card-soft); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-hero { grid-template-columns: 168px minmax(0, 1fr); gap: var(--redesign-space-5); padding: var(--redesign-space-5); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-herovisual { width: 168px; min-height: 168px; border-radius: var(--redesign-radius-control); background: var(--redesign-color-surface-soft); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-herocopy h2, body.page-beauty.page-booking:not(.page-pwa-client) .booking-card h3, body.page-beauty.page-booking:not(.page-pwa-client) .booking-time-intro h1, body.page-beauty.page-booking:not(.page-pwa-client) .booking-cardhead h3 { color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-weight: 600; line-height: var(--redesign-line-height-title); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-herocopy h2 { font-size: var(--redesign-text-title-md-size); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-herocopy p, body.page-beauty.page-booking:not(.page-pwa-client) .booking-card p, body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-description, body.page-beauty.page-booking:not(.page-pwa-client) .booking-order-cta-note { color: var(--redesign-color-text-muted); font-family: var(--redesign-font-ui); line-height: var(--redesign-line-height-body); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-herometa span, body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-herometa strong, body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-meta, body.page-beauty.page-booking:not(.page-pwa-client) .booking-addon-optionmeta { border-color: var(--redesign-color-border-soft-green); background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary-deep); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-cardicon, body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-visual, body.page-beauty.page-booking:not(.page-pwa-client) .booking-order-auth-gateicon { background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-card, body.page-beauty.page-booking:not(.page-pwa-client) .booking-addon-option { min-height: 104px; padding: var(--redesign-space-3); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-card.is-selected, body.page-beauty.page-booking:not(.page-pwa-client) .booking-addon-option.is-selected { border-color: var(--redesign-color-border-active); background: var(--redesign-color-surface-soft); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-title, body.page-beauty.page-booking:not(.page-pwa-client) .booking-addon-optiontitle, body.page-beauty.page-booking:not(.page-pwa-client) .summary-service strong { color: var(--redesign-color-text-primary); font-family: var(--redesign-font-ui); font-weight: 600; } body.page-beauty.page-booking:not(.page-pwa-client) .booking-total-card, body.page-beauty.page-booking:not(.page-pwa-client) .order-bar, body.page-beauty.page-booking:not(.page-pwa-client) .booking-confirm-submit-bar { border: 1px solid var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-card); background: var(--redesign-color-surface-soft); background-image: none; color: var(--redesign-color-brand-primary-deep); box-shadow: var(--redesign-shadow-card); } body.page-beauty.page-booking.page-booking-services:not(.page-pwa-client) .booking-total-card { position: sticky; top: var(--redesign-space-5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--redesign-space-4); align-items: stretch; padding: var(--redesign-space-5); overflow: visible; } body.page-beauty.page-booking.page-booking-services:not(.page-pwa-client) .booking-total-card .order-bar-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--redesign-space-2) var(--redesign-space-3); align-items: center; } body.page-beauty.page-booking.page-booking-services:not(.page-pwa-client) .booking-total-card .order-bar-copy > .eyebrow { grid-row: 1 / span 2; } body.page-beauty.page-booking.page-booking-services:not(.page-pwa-client) .booking-total-card [data-continue-services] { width: 100%; min-width: 0; } body.page-beauty.page-booking:not(.page-pwa-client) .order-bar-copy strong, body.page-beauty.page-booking:not(.page-pwa-client) .order-bar-copy span { color: var(--redesign-color-brand-primary-deep); } body.page-beauty.page-booking:not(.page-pwa-client) .button-primary, body.page-beauty.page-booking:not(.page-pwa-client) [data-continue-services], body.page-beauty.page-booking:not(.page-pwa-client) .booking-time-continue { border-color: var(--redesign-color-brand-primary); border-radius: var(--redesign-radius-pill); background: var(--redesign-color-brand-primary); background-image: none; color: var(--redesign-color-text-inverse); box-shadow: var(--redesign-shadow-primary-action); } body.page-beauty.page-booking:not(.page-pwa-client) .button-secondary { border-color: var(--redesign-color-border-soft-green); background: var(--redesign-color-surface-card); background-image: none; color: var(--redesign-color-brand-primary); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-time-topbar { border-color: var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-control); background: var(--redesign-color-bg-app-warm); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-time-topbarbutton { border-color: var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-sm); background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-time-intro h1 { font-size: clamp(40px, 5vw, 58px); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-date-pill, body.page-beauty.page-booking:not(.page-pwa-client) .booking-slot-button, body.page-beauty.page-booking:not(.page-pwa-client) .booking-slot-option { border-color: var(--redesign-color-border-subtle); background: var(--redesign-color-surface-card); color: var(--redesign-color-text-primary); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-date-pill.is-active, body.page-beauty.page-booking:not(.page-pwa-client) .booking-slot-button.is-selected, body.page-beauty.page-booking:not(.page-pwa-client) .booking-slot-option.is-selected { border-color: var(--redesign-color-border-active); background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary-deep); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-time-bottom-panel { border: 1px solid var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-card); background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary-deep); box-shadow: var(--redesign-shadow-card); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-order-reference-meta > div, body.page-beauty.page-booking:not(.page-pwa-client) .order-meta > div, body.page-beauty.page-booking:not(.page-pwa-client) .summary-service { border-color: var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-control); background: var(--redesign-color-bg-app-warm); color: var(--redesign-color-text-primary); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-order-comment textarea, body.page-beauty.page-booking:not(.page-pwa-client) input, body.page-beauty.page-booking:not(.page-pwa-client) select, body.page-beauty.page-booking:not(.page-pwa-client) textarea { border-color: var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-control); background: var(--redesign-color-bg-app-warm); color: var(--redesign-color-text-primary); } body.page-beauty.page-booking:not(.page-pwa-client) .flow-back-link:focus-visible, body.page-beauty.page-booking:not(.page-pwa-client) .button:focus-visible, body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-card:focus-within, body.page-beauty.page-booking:not(.page-pwa-client) .booking-addon-option:focus-within, body.page-beauty.page-booking:not(.page-pwa-client) .booking-time-topbarbutton:focus-visible, body.page-beauty.page-booking:not(.page-pwa-client) .booking-slot-button:focus-visible, body.page-beauty.page-booking:not(.page-pwa-client) .booking-slot-option:focus-within, body.page-beauty.page-booking:not(.page-pwa-client) input:focus-visible, body.page-beauty.page-booking:not(.page-pwa-client) select:focus-visible, body.page-beauty.page-booking:not(.page-pwa-client) textarea:focus-visible { outline: 3px solid var(--redesign-color-border-active); outline-offset: 3px; } @media (max-width: 767px) { body.page-beauty.client-auth-page .client-auth-shell { padding-inline: var(--redesign-space-4); } body.page-beauty.client-auth-page .client-auth-card { padding: var(--redesign-space-5); border-radius: var(--redesign-radius-card); } body.page-beauty.client-auth-page .client-auth-copy h1 { font-size: var(--redesign-text-title-lg-size); } body.page-beauty.page-booking:not(.page-pwa-client) .flow-page { padding: var(--redesign-space-4); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-shell.booking-app { padding: var(--redesign-space-4); border-radius: var(--redesign-radius-card); } body.page-beauty.page-booking.page-booking-services:not(.page-pwa-client) .booking-flow-form.booking-services-layout, body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-hero { grid-template-columns: minmax(0, 1fr); } body.page-beauty.page-booking:not(.page-pwa-client) .booking-service-hero__visual { width: 100%; min-height: 190px; } body.page-beauty.page-booking.page-booking-services:not(.page-pwa-client) .booking-total-card { position: static; } body.page-beauty.page-booking:not(.page-pwa-client) .flow-title, body.page-beauty.page-booking:not(.page-pwa-client) .booking-time-intro h1 { font-size: var(--redesign-text-title-lg-size); } } / Total design truth remediation — master entry and public information surfaces. Direct-reference auth/onboarding components plus NO_REFERENCE desktop adaptations. / / Approved master auth language — WEB shell. / body.admin-auth { min-height: 100vh; min-height: 100dvh; background: radial-gradient(circle at 12% 8%, var(--redesign-color-surface-soft-2), transparent 30%), radial-gradient(circle at 88% 86%, var(--redesign-color-surface-soft), transparent 28%), var(--redesign-color-bg-app-warm); color: var(--redesign-color-text-primary); font-family: var(--redesign-font-ui); } body.admin-auth .auth-shell { display: grid; width: min(100%, 1120px); min-height: 100vh; min-height: 100dvh; place-items: center; padding: var(--redesign-space-8) var(--redesign-space-6); } body.admin-auth .auth-card.auth-card-wide { position: relative; display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1.14fr); gap: var(--redesign-space-8); width: min(100%, 920px); padding: var(--redesign-space-10); overflow: hidden; border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-modal); background: var(--redesign-color-surface-card); background-image: none; box-shadow: var(--redesign-shadow-modal); } body.admin-auth .auth-card.auth-card-wide::after { content: ""; position: absolute; top: calc(var(--redesign-space-12) -1); right: calc(var(--redesign-space-12) * -1); width: 220px; height: 220px; border: 1px solid var(--redesign-color-border-soft-green); border-radius: 46% 54% 62% 38%; background: var(--redesign-color-surface-soft); opacity: 0.72; pointer-events: none; transform: rotate(18deg); } body.admin-auth .auth-copy, body.admin-auth .auth-form, body.admin-auth .alert { position: relative; z-index: 1; } body.admin-auth .auth-copy { display: grid; align-content: center; gap: var(--redesign-space-3); } body.admin-auth .auth-copy .eyebrow { width: fit-content; border-color: var(--redesign-color-border-soft-green); background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary); font-family: var(--redesign-font-ui); } body.admin-auth .auth-copy h1 { margin: 0; color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-size: clamp(48px, 6vw, 68px); font-weight: 600; letter-spacing: -0.025em; line-height: var(--redesign-line-height-display); } body.admin-auth .auth-copy p { margin: 0; color: var(--redesign-color-text-muted); font-family: var(--redesign-font-ui); font-size: var(--redesign-text-body-size); line-height: var(--redesign-line-height-body); } body.admin-auth .auth-form { display: grid; align-content: center; gap: var(--redesign-space-4); padding: var(--redesign-space-6); border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card); background: var(--redesign-color-bg-app-warm); } body.admin-auth .auth-form label { display: grid; gap: var(--redesign-space-2); padding: var(--redesign-space-3) var(--redesign-space-4); border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-control); background: var(--redesign-color-surface-card); color: var(--redesign-color-text-muted); font-family: var(--redesign-font-ui); font-size: var(--redesign-text-caption-size); font-weight: 600; } body.admin-auth .auth-form input { width: 100%; min-height: var(--redesign-space-10); padding: 0; border: 0; outline: 0; background: transparent; color: var(--redesign-color-text-primary); font-family: var(--redesign-font-ui); font-size: var(--redesign-text-body-size); } body.admin-auth .auth-form .button-primary { min-height: var(--redesign-space-14); border-color: var(--redesign-color-brand-primary); border-radius: var(--redesign-radius-pill); background: var(--redesign-color-brand-primary); background-image: none; color: var(--redesign-color-text-inverse); box-shadow: var(--redesign-shadow-primary-action); } body.admin-auth .auth-form label:focus-within, body.admin-auth .auth-form .button:focus-visible { outline: 3px solid var(--redesign-color-border-active); outline-offset: 3px; } /* Approved master onboarding language — WEB desktop adaptation. / body.page-beauty.page-join { background: radial-gradient(circle at 8% 4%, var(--redesign-color-surface-soft-2), transparent 28%), radial-gradient(circle at 92% 18%, var(--redesign-color-surface-soft), transparent 26%), var(--redesign-color-bg-app-warm); color: var(--redesign-color-text-primary); font-family: var(--redesign-font-ui); } body.page-beauty.page-join .join-shell { width: min(100%, 1120px); gap: var(--redesign-space-5) var(--redesign-space-8); padding: var(--redesign-space-6); } body.page-beauty.page-join .join-shell::before, body.page-beauty.page-join .join-shell::after { border-color: var(--redesign-color-border-soft-green); background: var(--redesign-color-surface-soft); opacity: 0.58; } body.page-beauty.page-join .join-topbar-button, body.page-beauty.page-join .join-topbar-spacer, body.page-beauty.page-join .join-menu-panel { border-color: var(--redesign-color-border-subtle); background: var(--redesign-color-surface-card); color: var(--redesign-color-brand-primary); box-shadow: var(--redesign-shadow-card-soft); } body.page-beauty.page-join .join-topbar-brand, body.page-beauty.page-join .join-menu-panel a { color: var(--redesign-color-brand-primary-deep); } body.page-beauty.page-join .join-menu-panel a:hover { background: var(--redesign-color-surface-soft); } body.page-beauty.page-join .join-kicker { border-color: var(--redesign-color-border-soft-green); background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary); font-family: var(--redesign-font-ui); } body.page-beauty.page-join .join-hero h1, body.page-beauty.page-join .join-success h1 { color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-size: clamp(52px, 7vw, 76px); font-weight: 600; letter-spacing: -0.025em; line-height: var(--redesign-line-height-display); } body.page-beauty.page-join .join-hero p, body.page-beauty.page-join .join-success p, body.page-beauty.page-join .join-legal, body.page-beauty.page-join .join-login-card p { color: var(--redesign-color-text-muted); font-family: var(--redesign-font-ui); line-height: var(--redesign-line-height-body); } body.page-beauty.page-join .join-alert, body.page-beauty.page-join .join-form-card, body.page-beauty.page-join .join-login-card, body.page-beauty.page-join .join-success { border-color: var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card-lg); background: var(--redesign-color-surface-card); box-shadow: var(--redesign-shadow-card); } body.page-beauty.page-join .join-form-card { padding: var(--redesign-space-5); } body.page-beauty.page-join .join-field { border-color: var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-control); background: var(--redesign-color-bg-app-warm); background-image: none; } body.page-beauty.page-join .join-field-icon { border-radius: var(--redesign-radius-sm); background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary); } body.page-beauty.page-join .join-field-control > span, body.page-beauty.page-join .join-counter { color: var(--redesign-color-text-muted); font-family: var(--redesign-font-ui); } body.page-beauty.page-join .join-field input, body.page-beauty.page-join .join-field select, body.page-beauty.page-join .join-field textarea { color: var(--redesign-color-text-primary); font-family: var(--redesign-font-ui); } body.page-beauty.page-join .join-field-select .join-field-control::after, body.page-beauty.page-join .join-legal a, body.page-beauty.page-join .join-login-link { color: var(--redesign-color-brand-primary); } body.page-beauty.page-join .join-submit { border-radius: var(--redesign-radius-pill); background: var(--redesign-color-brand-primary); background-image: none; color: var(--redesign-color-text-inverse); box-shadow: var(--redesign-shadow-primary-action); } body.page-beauty.page-join .join-login-link { border-color: var(--redesign-color-border-soft-green); background: var(--redesign-color-surface-card); } body.page-beauty.page-join .join-topbar-button:focus-visible, body.page-beauty.page-join .join-menu-panel a:focus-visible, body.page-beauty.page-join .join-field:focus-within, body.page-beauty.page-join .join-submit:focus-visible, body.page-beauty.page-join .join-login-link:focus-visible { outline: 3px solid var(--redesign-color-border-active); outline-offset: 3px; } / Approved master onboarding language — PWA shell remains unchanged. / .admin-page.page-pwa-master .pwa-master-join-hero { border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card); background: var(--redesign-color-surface-card); color: var(--redesign-color-text-primary); box-shadow: var(--redesign-shadow-card-soft); } .admin-page.page-pwa-master .pwa-master-join-hero h1 { color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-size: var(--redesign-text-title-lg-size); font-weight: 600; letter-spacing: -0.02em; line-height: var(--redesign-line-height-title); } .admin-page.page-pwa-master .pwa-master-join-hero p { color: var(--redesign-color-text-muted); font-family: var(--redesign-font-ui); line-height: var(--redesign-line-height-body); } .admin-page.page-pwa-master .pwa-master-join-hero .pwa-master-eyebrow { border-color: var(--redesign-color-border-soft-green); background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary); } .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card:has(.pwa-master-form) { overflow: hidden; border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card); background: var(--redesign-color-surface-card); background-image: none; box-shadow: var(--redesign-shadow-card-soft); } .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--redesign-space-3); padding: var(--redesign-space-4); } .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form .pwa-master-field { display: grid; grid-template-columns: var(--redesign-space-10) minmax(0, 1fr); align-items: start; gap: var(--redesign-space-3); min-width: 0; padding: var(--redesign-space-3); border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-md); background: var(--redesign-color-bg-app-warm); background-image: none; } .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form .pwa-master-field > span:last-child { min-width: 0; } .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form .pwa-master-fieldicon { display: grid; width: var(--redesign-space-10); height: var(--redesign-space-10); place-items: center; border-radius: var(--redesign-radius-sm); background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary); } .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form .pwa-master-fieldicon svg { display: block; width: var(--redesign-space-5); height: var(--redesign-space-5); max-width: var(--redesign-space-5); max-height: var(--redesign-space-5); } .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form .pwa-master-field > span:last-child > span { display: block; margin-bottom: var(--redesign-space-1); color: var(--redesign-color-text-muted); font-family: var(--redesign-font-ui); font-size: var(--redesign-text-micro-size); font-weight: 700; letter-spacing: 0.04em; line-height: var(--redesign-line-height-tight); text-transform: uppercase; } .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form input, .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form select, .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form textarea { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--redesign-color-text-primary); background: transparent; font-family: var(--redesign-font-ui); } .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form textarea { resize: vertical; } .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form .pwa-master-legal { margin: 0; color: var(--redesign-color-text-muted); font-family: var(--redesign-font-ui); font-size: var(--redesign-text-micro-size); line-height: var(--redesign-line-height-body); } .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form .pwa-master-legal a { color: var(--redesign-color-brand-primary); font-weight: 700; } .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form .pwa-master-button { display: inline-flex; min-height: var(--redesign-space-12); align-items: center; justify-content: center; gap: var(--redesign-space-2); border: 1px solid transparent; border-radius: var(--redesign-radius-pill); font-family: var(--redesign-font-ui); font-weight: 700; line-height: var(--redesign-line-height-tight); text-align: center; text-decoration: none; } .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form .pwa-master-button:not(.pwa-master-button--secondary) { border-color: var(--redesign-color-brand-primary); background: var(--redesign-color-brand-primary); background-image: none; color: var(--redesign-color-text-inverse); box-shadow: var(--redesign-shadow-primary-action); } .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form .pwa-master-button--secondary { border-color: var(--redesign-color-border-soft-green); background: var(--redesign-color-surface-card); color: var(--redesign-color-brand-primary); } .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form .pwa-master-field:focus-within, .admin-page.page-pwa-master .pwa-master-join-hero ~ .pwa-master-card .pwa-master-form :is(.pwa-master-button, .pwa-master-legal a):focus-visible { outline: var(--redesign-space-1) solid var(--redesign-color-calm-green); outline-offset: var(--redesign-space-1); } / NO_REFERENCE: public information pages inferred from approved client/master components. / main.page-about, main.for-masters-page, main.page-platform-shell:has(> .legal-card) { color: var(--redesign-color-text-primary); font-family: var(--redesign-font-ui); } main.page-about .about-hero, main.for-masters-page .for-masters-hero { padding-top: var(--redesign-space-16); padding-bottom: var(--redesign-space-10); } main.page-about .about-kicker, main.for-masters-page .master-section-kicker, main.page-platform-shell > .legal-card .eyebrow { width: fit-content; border-color: var(--redesign-color-border-soft-green); background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary); font-family: var(--redesign-font-ui); } main.page-about h1, main.page-about h2, main.for-masters-page h1, main.for-masters-page h2, main.page-platform-shell > .legal-card h1, main.page-platform-shell > .legal-card h2 { color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-weight: 600; letter-spacing: -0.02em; } main.page-about .about-hero h1, main.for-masters-page .for-masters-hero h1 { font-size: clamp(56px, 7vw, 82px); line-height: var(--redesign-line-height-display); } main.page-about p, main.for-masters-page p, main.page-platform-shell > .legal-card p, main.page-platform-shell > .legal-card li { color: var(--redesign-color-text-muted); font-family: var(--redesign-font-ui); line-height: var(--redesign-line-height-body); } main.page-about .about-audience-card, main.page-about .about-steps-card, main.page-about .about-faq details, main.for-masters-page .for-masters-feature-card, main.for-masters-page .for-masters-how-card, main.page-platform-shell > .legal-card { border-color: var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-card); background: var(--redesign-color-surface-card); background-image: none; box-shadow: var(--redesign-shadow-card-soft); } main.page-about .about-card-icon, main.page-about .about-steps article > span, main.for-masters-page .for-masters-icon, main.for-masters-page .for-masters-steps article > span { background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary); } main.page-about .about-faq summary, main.page-about .about-audience-card h2, main.for-masters-page .for-masters-feature-card strong, main.for-masters-page .for-masters-steps strong { color: var(--redesign-color-text-primary); } main.for-masters-page .for-masters-actions .button-primary { border-color: var(--redesign-color-brand-primary); background: var(--redesign-color-brand-primary); background-image: none; color: var(--redesign-color-text-inverse); box-shadow: var(--redesign-shadow-primary-action); } main.for-masters-page .for-masters-actions .button-secondary { border-color: var(--redesign-color-border-soft-green); background: var(--redesign-color-surface-card); background-image: none; color: var(--redesign-color-brand-primary); } main.page-platform-shell:has(> .legal-card) { width: min(100%, 1040px); padding-top: var(--redesign-space-12); padding-bottom: var(--redesign-space-16); } main.page-platform-shell > .legal-card { padding: var(--redesign-space-8); } main.page-platform-shell > .legal-card .section-heading h1 { max-width: 760px; font-size: clamp(42px, 5vw, 62px); line-height: var(--redesign-line-height-title); } main.page-platform-shell > .legal-card .legal-copy { max-width: 780px; } main.page-platform-shell > .legal-card .legal-copy h2 { margin-top: var(--redesign-space-8); font-size: var(--redesign-text-title-md-size); line-height: var(--redesign-line-height-title); } main.page-about .about-faq summary:focus-visible, main.for-masters-page .button:focus-visible, main.page-platform-shell > .legal-card a:focus-visible { outline: 3px solid var(--redesign-color-border-active); outline-offset: 3px; } @media (min-width: 768px) { body.page-beauty.page-join .join-shell { grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr); align-items: start; } body.page-beauty.page-join .join-topbar { grid-column: 1 / -1; } body.page-beauty.page-join .join-hero { position: sticky; top: var(--redesign-space-8); grid-column: 1; grid-row: 2 / span 3; padding-top: var(--redesign-space-8); } body.page-beauty.page-join .join-alert, body.page-beauty.page-join .join-form-card, body.page-beauty.page-join .join-login-card { grid-column: 2; } main.for-masters-page .for-masters-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { body.admin-auth .auth-shell { padding: var(--redesign-space-4); } body.admin-auth .auth-card.auth-card-wide { grid-template-columns: minmax(0, 1fr); gap: var(--redesign-space-5); padding: var(--redesign-space-5); border-radius: var(--redesign-radius-card); } body.admin-auth .auth-copy h1 { font-size: var(--redesign-text-title-lg-size); } body.admin-auth .auth-form { padding: var(--redesign-space-4); } body.page-beauty.page-join .join-shell { padding-inline: var(--redesign-space-4); } body.page-beauty.page-join .join-hero h1, body.page-beauty.page-join .join-success h1, main.page-about .about-hero h1, main.for-masters-page .for-masters-hero h1 { font-size: var(--redesign-text-title-xl-size); } main.page-about .about-hero, main.for-masters-page .for-masters-hero { padding-top: var(--redesign-space-8); padding-bottom: var(--redesign-space-6); } main.page-platform-shell > .legal-card { padding: var(--redesign-space-5); } main.page-platform-shell > .legal-card .section-heading h1 { font-size: var(--redesign-text-title-lg-size); } } / Tablet truth fixes found by the 8-viewport gate. / @media (min-width: 860px) and (max-width: 1100px) { body.page-beauty.page-platform .home-funnel .direction-card { grid-template-columns: calc(var(--redesign-space-18) + var(--redesign-space-4)) minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; } body.page-beauty.page-platform .home-funnel .direction-card-visual { grid-row: 1 / -1; width: calc(var(--redesign-space-18) + var(--redesign-space-4)); min-width: 0; height: calc(var(--redesign-space-18) + var(--redesign-space-4)); min-height: 0; } body.page-beauty.page-platform .home-funnel .direction-card-copy, body.page-beauty.page-platform .home-funnel .direction-card-action { grid-column: 2; min-width: 0; } body.page-beauty.page-platform .home-funnel .direction-card-action { justify-self: start; } } @media (min-width: 640px) { body.page-beauty.page-pwa-client.page-pwa-profile.client-page .pwa-shell > [data-shared-client-profile-guest="rx-c2"] { grid-template-columns: minmax(0, 1fr); } body.page-beauty.page-pwa-client.page-pwa-profile.client-page .pwa-shell > [data-shared-client-profile-guest="rx-c2"] > .client-empty-card { width: 100%; min-width: 0; } } / Client booking mobile UX remediation: real day picker and stable PWA CTA. The seven day controls are rendered from the same server-side availability groups as the slot radios. No date, slot, price or duration is fabricated. / body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-day-picker { display: grid; gap: var(--redesign-space-3); min-width: 0; padding: var(--redesign-space-3); border: 1px solid var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-card); background: var(--redesign-color-surface-soft); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-day-pickerhead { display: flex; align-items: center; justify-content: space-between; gap: var(--redesign-space-3); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-day-pickerhead > div { display: grid; min-width: 0; gap: var(--redesign-space-1); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-day-pickerhead strong { color: var(--redesign-color-brand-primary-deep); font-family: var(--redesign-font-display); font-size: var(--redesign-text-card-title-size); line-height: var(--redesign-line-height-tight); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-day-pickerhead > div > span { color: var(--redesign-color-text-muted); font-size: var(--redesign-text-caption-size); line-height: var(--redesign-line-height-body); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-calendar-control { position: relative; display: inline-flex; min-height: calc(var(--redesign-space-10) + var(--redesign-space-1)); flex: 0 0 auto; align-items: center; gap: var(--redesign-space-2); padding: 0 var(--redesign-space-3); overflow: hidden; border: 1px solid var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-pill); background: var(--redesign-color-surface-card); color: var(--redesign-color-brand-primary-deep); font-size: var(--redesign-text-caption-size); font-weight: 800; cursor: pointer; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-calendar-controlicon, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-calendar-controlicon svg { width: var(--redesign-space-5); height: var(--redesign-space-5); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-calendar-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-calendar-control:focus-within { outline: var(--redesign-space-1) solid var(--redesign-color-brand-primary-deep); outline-offset: var(--redesign-space-1); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-day-strip { display: flex; min-width: 0; gap: var(--redesign-space-2); padding: var(--redesign-space-1); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-day-strip::-webkit-scrollbar { display: none; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-day-chip { display: grid; min-width: calc(var(--redesign-space-12) + var(--redesign-space-2)); min-height: var(--redesign-space-16); flex: 1 0 calc(var(--redesign-space-12) + var(--redesign-space-2)); place-items: center; gap: var(--redesign-space-1); padding: var(--redesign-space-2); border: 1px solid var(--redesign-color-border-subtle); border-radius: var(--redesign-radius-control); background: var(--redesign-color-surface-card); color: var(--redesign-color-text-muted); box-shadow: var(--redesign-shadow-soft); scroll-snap-align: start; cursor: pointer; touch-action: manipulation; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-day-chip span { font-size: var(--redesign-text-caption-size); font-weight: 700; line-height: var(--redesign-line-height-tight); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-day-chip strong { font-family: var(--redesign-font-display); font-size: var(--redesign-text-card-title-size); line-height: 1; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-day-chip.is-selected { border-color: var(--redesign-color-brand-primary); background: var(--redesign-color-brand-primary); color: var(--redesign-color-text-inverse); box-shadow: var(--redesign-shadow-primary-action); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-day-chip.is-unavailable, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-day-chip:disabled { border-color: var(--redesign-color-border-subtle); background: var(--redesign-color-state-disabled-bg); color: var(--redesign-color-state-disabled-text); box-shadow: none; cursor: not-allowed; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-slot-day-card[hidden] { display: none; } @media (max-width: 1024px) { body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-shell.booking-app.booking-time-app { backdrop-filter: none; -webkit-backdrop-filter: none; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .pwa-booking-flow-page { padding-bottom: var( --booking-time-cta-reserve, calc(var(--redesign-space-bottom-nav-safe) + var(--redesign-space-18) + var(--redesign-space-5)) ); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-shell.booking-app.booking-time-app { min-height: 0; max-height: none; overflow: visible; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-form, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-picker, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-content, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-scroll { max-height: none; overflow: visible; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-bottom-panel { position: fixed; top: auto; right: max(var(--redesign-space-4), env(safe-area-inset-right)); bottom: calc(var(--redesign-space-bottom-nav-safe) + var(--redesign-space-2)); left: max(var(--redesign-space-4), env(safe-area-inset-left)); z-index: 55; width: auto; max-width: var(--redesign-time-shell-max-wide); margin: 0 auto; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-continue { width: 100%; max-width: none; } } / The original 85% shell compounded two card paddings and reduced a 390px viewport to roughly 283px of usable confirmation content. Keep the approved cards, but give both booking steps a real 16px mobile gutter. / @media (max-width: 430px) { body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .pwa-booking-flow-page, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .pwa-booking-flow-page { width: calc(100% - (var(--redesign-space-4) 2)); max-width: none; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-day-pickerhead { align-items: stretch; flex-direction: column; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-calendar-control { align-self: start; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-shell.booking-app, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .order-review.booking-confirm-card, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .order-review.booking-confirm-card > .booking-card, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-services, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-submit-form { width: 100%; max-width: none; min-width: 0; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-included span { align-items: flex-start; font-size: var(--redesign-text-body-size); line-height: var(--redesign-line-height-body); overflow-wrap: normal; word-break: normal; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-confirm-submit-bar { width: calc(100% - (var(--redesign-space-4) * 2)); } } @media (max-width: 359px) { body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-reference-meta { grid-template-columns: minmax(0, 1fr) !important; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-services .summary-service b { justify-self: start; } } /* Client reference fidelity: Screen 6 day cards, Screen 8 confirmation and client auth reuse the canonical transparent botanical artwork. These rules are presentation-only and remain scoped to the client booking/auth shells. / body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-slot-day-card { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(145deg, var(--redesign-color-surface-card), var(--redesign-color-surface-soft)); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-slot-day-card::after { content: ""; position: absolute; z-index: -1; top: calc(var(--redesign-space-8) -1); right: calc(var(--redesign-space-6) * -1); width: calc(var(--redesign-space-18) + var(--redesign-space-16)); aspect-ratio: 2 / 3; background: var(--redesign-asset-botanical) center / contain no-repeat; opacity: 0.22; pointer-events: none; transform: rotate(12deg); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-slot-day-title { position: relative; z-index: 1; grid-template-columns: var(--redesign-space-12) minmax(0, 1fr); gap: var(--redesign-space-3); align-items: center; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-slot-day-title > .booking-slot-day-titleicon { display: grid; width: var(--redesign-space-12); height: var(--redesign-space-12); place-items: center; margin: 0; border: 1px solid var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-control); background: var(--redesign-color-surface-card); color: var(--redesign-color-brand-primary); box-shadow: var(--redesign-shadow-soft); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-slot-day-title > div { grid-column: 2; min-width: 0; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-slot-day-title > .booking-slot-day-titleicon svg { width: var(--redesign-space-6); height: var(--redesign-space-6); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-slot-grid { position: relative; z-index: 1; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-bottom-panel { overflow: hidden; background: radial-gradient(circle at 100% 0, var(--redesign-color-surface-soft-2), transparent 48%), var(--redesign-color-surface-card); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-continue, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-cta-arrow, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-reference-cta, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-reference-ctasparkle, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-reference-ctaarrow { display: inline-flex; align-items: center; justify-content: center; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-continue { gap: var(--redesign-space-2); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-cta-arrow, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-reference-ctasparkle, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-reference-ctaarrow { width: var(--redesign-space-5); height: var(--redesign-space-5); flex: 0 0 auto; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-cta-arrow svg, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-reference-ctasparkle svg, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-reference-ctaarrow svg { width: 100%; height: 100%; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .order-review.booking-confirm-card > .booking-card::after { content: ""; position: absolute; z-index: -1; top: calc(var(--redesign-space-10) * -1); right: calc(var(--redesign-space-8) * -1); width: calc(var(--redesign-space-18) + var(--redesign-space-18)); aspect-ratio: 2 / 3; background: var(--redesign-asset-botanical) center / contain no-repeat; opacity: 0.2; pointer-events: none; transform: rotate(10deg); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-included-disclosure { position: relative; z-index: 1; min-width: 0; margin-block: var(--redesign-space-3); padding: var(--redesign-space-3) var(--redesign-space-4); border: 1px solid var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-card); background: color-mix(in srgb, var(--redesign-color-surface-card) 84%, transparent); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-included-disclosure summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--redesign-space-2); align-items: center; min-height: var(--redesign-space-10); color: var(--redesign-color-brand-primary-deep); cursor: pointer; font-family: var(--redesign-font-ui); font-size: var(--redesign-text-body-size); font-weight: 800; list-style: none; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-included-disclosure summary::-webkit-details-marker { display: none; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-included-disclosure summary small { color: var(--redesign-color-text-muted); font-size: var(--redesign-text-caption-size); font-weight: 600; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-included-disclosure summary::after { width: var(--redesign-space-2); height: var(--redesign-space-2); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ""; transform: rotate(45deg) translateY(calc(var(--redesign-space-1) * -1)); transition: transform var(--redesign-motion-fast) var(--redesign-ease-standard); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-included-disclosure[open] summary::after { transform: rotate(225deg) translate(calc(var(--redesign-space-1) * -1), calc(var(--redesign-space-1) * -1)); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-included-disclosure .booking-order-included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--redesign-space-2); margin-top: var(--redesign-space-3); padding-top: var(--redesign-space-3); border-top: 1px solid var(--redesign-color-border-subtle); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-included-disclosure .booking-order-included span { min-width: 0; font-size: var(--redesign-text-caption-size); line-height: var(--redesign-line-height-body); overflow-wrap: break-word; word-break: normal; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-reference-meta .booking-order-cost-card { background: var(--redesign-asset-botanical) right center / auto 190% no-repeat, radial-gradient(circle at 100% 0%, var(--redesign-color-surface-soft-3), transparent 44%), linear-gradient(150deg, var(--redesign-color-surface-soft), var(--redesign-color-surface-soft-2)); } body.page-beauty.client-auth-page .client-auth-card::before { content: ""; position: absolute; z-index: -1; top: calc(var(--redesign-space-8) * -1); right: calc(var(--redesign-space-8) * -1); width: calc(var(--redesign-space-18) + var(--redesign-space-18)); aspect-ratio: 2 / 3; background: var(--redesign-asset-botanical) center / contain no-repeat; opacity: 0.22; pointer-events: none; transform: rotate(12deg); } body.page-beauty.client-auth-page .client-auth-card > * { position: relative; z-index: 1; } body.page-beauty.client-auth-page .client-auth-alert { border-radius: var(--redesign-radius-card); box-shadow: none; } /* The fixed confirmation CTA now owns bottom-nav clearance through the measured reserve. Remove the old per-card reserve that produced a second, empty nav-height block inside the confirmation surface. / body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-auth-gate { margin-bottom: 0; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-shell { padding-bottom: clamp(var(--redesign-space-3), 2vw, var(--redesign-space-6)) !important; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .pwa-booking-flow-page { padding-bottom: var(--booking-cta-reserve, calc(var(--redesign-space-bottom-nav-safe) + var(--redesign-space-18))); scroll-padding-bottom: var(--booking-cta-reserve, calc(var(--redesign-space-bottom-nav-safe) + var(--redesign-space-18))); } @media (max-width: 430px) { body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-slot-day-card { gap: var(--redesign-space-3); padding: var(--redesign-space-4); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-order-summary { display: none; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-bottom-panel { padding: var(--redesign-space-3); border-radius: var(--redesign-radius-card); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-included-disclosure .booking-order-included { grid-template-columns: minmax(0, 1fr); } body.page-beauty.client-auth-page .client-auth-shell { width: 100%; padding: calc(var(--redesign-space-6) + env(safe-area-inset-top)) var(--redesign-space-4) calc(var(--redesign-space-6) + env(safe-area-inset-bottom)); } body.page-beauty.client-auth-page .client-auth-card { gap: var(--redesign-space-4); padding: var(--redesign-space-6) var(--redesign-space-5); } body.page-beauty.client-auth-page .client-auth-copy h1 { font-size: clamp(38px, 13vw, 50px); } / Keep the reference CTA anchored directly above the client navigation. An older mobile override returned it to document flow, which left a large visual gap and made the primary action disappear while reviewing the confirmation details. The measured JS reserve keeps content clear. / body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-confirm-submit-bar { position: fixed !important; top: auto !important; right: var(--redesign-space-4) !important; bottom: calc(var(--redesign-space-bottom-nav-safe) + var(--redesign-space-3)) !important; left: var(--redesign-space-4) !important; width: auto; margin: 0 !important; z-index: 60; } } @media (max-width: 430px) { body.page-beauty.page-pwa-client.page-pwa-booking-status .s16-reason span { padding-inline: var(--redesign-space-1); font-size: var(--redesign-text-caption-size); letter-spacing: -0.025em; overflow-wrap: normal; word-break: normal; hyphens: none; } } @media (max-width: 359px) { body.page-beauty.page-pwa-client.page-pwa-booking-status .s16-reasons { grid-template-columns: minmax(0, 1fr); } } / Final accessibility polish for the exact remediated form routes. / body.admin-auth .auth-form input:focus-visible, body.page-beauty.page-join .join-field :where(input, select, textarea):focus-visible, body.page-beauty.client-auth-page .client-auth-input-card input:focus-visible, body.page-beauty.page-booking:not(.page-pwa-client) :where(input, select, textarea):focus-visible { border-color: var(--redesign-color-border-active); box-shadow: none; } / Physical-device reconciliation for inferred client auth screens. The challenge, fields and links remain canonical; this layer only composes them from the same botanical, editorial and icon language as Screens 1-21. / body.page-beauty.client-auth-page { background: linear-gradient(90deg, color-mix(in srgb, var(--redesign-color-border-soft-green) 18%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--redesign-color-border-soft-green) 18%, transparent) 1px, transparent 1px), radial-gradient(circle at 14% 8%, var(--redesign-color-surface-soft-2), transparent 34%), radial-gradient(circle at 88% 18%, var(--redesign-color-surface-soft), transparent 32%), var(--redesign-color-bg-app-warm); background-size: var(--redesign-space-12) var(--redesign-space-12), var(--redesign-space-12) var(--redesign-space-12), auto, auto, auto; } body.page-beauty.client-auth-page .client-auth-shell { width: min(100%, calc(var(--redesign-space-18) 8)); align-items: safe center; justify-items: center; padding: calc(var(--redesign-space-6) + env(safe-area-inset-top)) var(--redesign-space-4) calc(var(--redesign-space-8) + env(safe-area-inset-bottom)); } body.page-beauty.client-auth-page .client-auth-card { gap: var(--redesign-space-5); padding: clamp(var(--redesign-space-6), 5vw, var(--redesign-space-10)); border-color: var(--redesign-color-border-soft-green); background: radial-gradient(circle at 100% 0, var(--redesign-color-surface-soft-2), transparent 40%), linear-gradient(155deg, var(--redesign-color-surface-card), color-mix(in srgb, var(--redesign-color-surface-soft) 38%, var(--redesign-color-surface-card))); box-shadow: var(--redesign-shadow-modal); } body.page-beauty.client-auth-page .client-auth-card::before, body.page-beauty.client-auth-page .client-auth-card::after { z-index: 0; width: calc(var(--redesign-space-18) + var(--redesign-space-18) + var(--redesign-space-10)); aspect-ratio: 2 / 3; border-radius: 0; background: var(--redesign-asset-botanical) center / contain no-repeat; pointer-events: none; } body.page-beauty.client-auth-page .client-auth-card::before { top: calc(var(--redesign-space-5) * -1); right: calc(var(--redesign-space-4) * -1); opacity: 0.58; transform: rotate(10deg); } body.page-beauty.client-auth-page .client-auth-card::after { top: auto; right: auto; bottom: calc(var(--redesign-space-18) * -1); left: calc(var(--redesign-space-10) * -1); opacity: 0.2; transform: rotate(194deg) scaleX(-1); } body.page-beauty.client-auth-page .client-auth-icon { position: relative; width: var(--redesign-space-18); height: var(--redesign-space-18); border-radius: var(--redesign-radius-card); background: radial-gradient(circle at 30% 25%, var(--redesign-color-surface-card), transparent 36%), var(--redesign-color-surface-soft); box-shadow: var(--redesign-shadow-card); } body.page-beauty.client-auth-page .client-auth-icon::before, body.page-beauty.client-auth-page .client-auth-icon::after { position: absolute; width: var(--redesign-space-2); height: var(--redesign-space-2); border: 2px solid var(--redesign-color-brand-primary); border-radius: var(--redesign-space-1); content: ""; transform: rotate(45deg); } body.page-beauty.client-auth-page .client-auth-icon::before { top: calc(var(--redesign-space-2) * -1); right: calc(var(--redesign-space-1) * -1); } body.page-beauty.client-auth-page .client-auth-icon::after { bottom: var(--redesign-space-1); left: calc(var(--redesign-space-2) * -1); width: var(--redesign-space-1); height: var(--redesign-space-1); border-width: 1px; } body.page-beauty.client-auth-page .client-auth-kicker { display: inline-flex; width: fit-content; min-height: var(--redesign-space-8); align-items: center; justify-self: center; padding: var(--redesign-space-1) var(--redesign-space-3); border: 1px solid var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-pill); background: color-mix(in srgb, var(--redesign-color-surface-soft) 84%, transparent); color: var(--redesign-color-brand-primary); font-family: var(--redesign-font-ui); font-size: var(--redesign-text-micro-size); font-weight: 800; letter-spacing: 0.08em; line-height: var(--redesign-line-height-tight); text-transform: uppercase; } body.page-beauty.client-auth-page .client-auth-copy { gap: var(--redesign-space-2); } body.page-beauty.client-auth-page .client-auth-copy h1 { font-size: clamp(42px, 7vw, 58px); line-height: var(--redesign-line-height-display); } body.page-beauty.client-auth-page .client-auth-copy p { max-width: calc(var(--redesign-space-18) * 5); margin-inline: auto; font-size: var(--redesign-text-body-size); } body.page-beauty.client-auth-page .client-auth-alert { display: grid; width: 100%; max-width: 100%; gap: var(--redesign-space-2); padding: var(--redesign-space-4); border: 1px solid color-mix(in srgb, currentColor 20%, var(--redesign-color-border-subtle)); border-radius: var(--redesign-radius-control); box-shadow: var(--redesign-shadow-soft); } body.page-beauty.client-auth-page .client-auth-alert code { overflow-wrap: anywhere; word-break: break-word; } body.page-beauty.client-auth-page .client-auth-alert strong, body.page-beauty.client-auth-page .client-auth-alert p { margin: 0; } body.page-beauty.client-auth-page .client-auth-form { width: 100%; max-width: 100%; gap: var(--redesign-space-3); } body.page-beauty.client-auth-page .client-auth-input-card { display: grid; min-height: var(--redesign-space-18); grid-template-columns: var(--redesign-space-12) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--redesign-space-3); row-gap: var(--redesign-space-1); align-items: center; padding: var(--redesign-space-3) var(--redesign-space-4); border-color: var(--redesign-color-border-subtle); background: color-mix(in srgb, var(--redesign-color-surface-card) 92%, var(--redesign-color-surface-soft)); box-shadow: var(--redesign-shadow-card-soft); } body.page-beauty.client-auth-page .client-auth-input-card > .client-auth-input-icon { display: inline-grid; width: var(--redesign-space-12); height: var(--redesign-space-12); grid-row: 1 / -1; place-items: center; border: 1px solid var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-sm); background: var(--redesign-color-surface-soft); color: var(--redesign-color-brand-primary); letter-spacing: normal; } body.page-beauty.client-auth-page .client-auth-input-icon svg { width: var(--redesign-space-6); height: var(--redesign-space-6); } body.page-beauty.client-auth-page .client-auth-input-card > span:not(.client-auth-input-icon), body.page-beauty.client-auth-page .client-auth-input-card > input { grid-column: 2; } body.page-beauty.client-auth-page .client-auth-input-card > span:not(.client-auth-input-icon) { align-self: end; color: var(--redesign-color-brand-primary); } body.page-beauty.client-auth-page .client-auth-input-card input { min-width: 0; min-height: var(--redesign-space-8); align-self: start; font-size: var(--redesign-text-body-size); } body.page-beauty.client-auth-page .client-auth-input-card input::placeholder { color: var(--redesign-color-text-subtle); } body.page-beauty.client-auth-page .client-auth-submit { display: grid; width: 100%; max-width: 100%; min-width: 0; grid-template-columns: var(--redesign-space-6) minmax(0, 1fr) var(--redesign-space-6); gap: var(--redesign-space-2); align-items: center; padding-inline: var(--redesign-space-5); } body.page-beauty.client-auth-page .client-auth-submitsparkle, body.page-beauty.client-auth-page .client-auth-submitarrow { display: inline-flex; width: var(--redesign-space-6); height: var(--redesign-space-6); align-items: center; justify-content: center; } body.page-beauty.client-auth-page .client-auth-submit svg { width: 100%; height: 100%; } body.page-beauty.client-auth-page .client-auth-submitarrow { transition: transform var(--redesign-motion-fast) var(--redesign-ease-standard); } body.page-beauty.client-auth-page .client-auth-submit:hover .client-auth-submitarrow { transform: translateX(var(--redesign-space-1)); } body.page-beauty.client-auth-page .client-auth-links { display: flex; width: 100%; max-width: 100%; flex-wrap: wrap; gap: var(--redesign-space-2); align-items: center; justify-content: center; } body.page-beauty.client-auth-page .client-auth-links .client-auth-link { display: inline-flex; min-height: calc(var(--redesign-space-10) + var(--redesign-space-1)); align-items: center; justify-content: center; padding: var(--redesign-space-2) var(--redesign-space-4); border: 1px solid var(--redesign-color-border-soft-green); border-radius: var(--redesign-radius-pill); background: color-mix(in srgb, var(--redesign-color-surface-card) 82%, transparent); font-size: var(--redesign-text-caption-size); line-height: var(--redesign-line-height-tight); text-align: center; } body.page-beauty.client-auth-page .client-auth-link--switch { flex-basis: 100%; } body.page-beauty.client-auth-page .client-auth-legal { margin: 0; padding-top: var(--redesign-space-4); border-top: 1px solid var(--redesign-color-border-subtle); font-size: var(--redesign-text-caption-size); } body.page-beauty.client-auth-page .client-auth-action { border-color: var(--redesign-color-border-soft-green); background: radial-gradient(circle at 100% 0, var(--redesign-color-surface-soft-2), transparent 48%), var(--redesign-color-surface-card); } body.page-beauty.client-auth-page .client-auth-action-icon { border: 1px solid var(--redesign-color-border-soft-green); } @media (max-width: 430px) { body.page-beauty.client-auth-page .client-auth-shell { align-items: safe center; padding: calc(var(--redesign-space-4) + env(safe-area-inset-top)) var(--redesign-space-4) calc(var(--redesign-space-6) + env(safe-area-inset-bottom)); } body.page-beauty.client-auth-page .client-auth-card { gap: var(--redesign-space-4); padding: var(--redesign-space-5); } body.page-beauty.client-auth-page .client-auth-card::before, body.page-beauty.client-auth-page .client-auth-card::after { width: calc(var(--redesign-space-18) + var(--redesign-space-18)); } body.page-beauty.client-auth-page .client-auth-card::before { top: calc(var(--redesign-space-4) * -1); right: calc(var(--redesign-space-5) * -1); } body.page-beauty.client-auth-page .client-auth-icon { width: var(--redesign-space-16); height: var(--redesign-space-16); } body.page-beauty.client-auth-page .client-auth-copy h1 { font-size: clamp(40px, 11vw, 48px); } body.page-beauty.client-auth-page .client-auth-copy p { font-size: var(--redesign-text-caption-size); } body.page-beauty.client-auth-page .client-auth-input-card { min-height: var(--redesign-space-18); grid-template-columns: var(--redesign-space-10) minmax(0, 1fr); padding: var(--redesign-space-3); } body.page-beauty.client-auth-page .client-auth-input-card > .client-auth-input-icon { width: var(--redesign-space-10); height: var(--redesign-space-10); } body.page-beauty.client-auth-page .client-auth-input-icon svg { width: var(--redesign-space-5); height: var(--redesign-space-5); } body.page-beauty.client-auth-page .client-auth-form .button-primary { min-height: var(--redesign-space-14); } body.page-beauty.client-auth-page .client-auth-legal { padding-top: var(--redesign-space-3); font-size: var(--redesign-text-micro-size); } } @media (max-width: 359px) { body.page-beauty.client-auth-page .client-auth-shell { padding-inline: var(--redesign-space-3); } body.page-beauty.client-auth-page .client-auth-card { padding: var(--redesign-space-4); } body.page-beauty.client-auth-page .client-auth-copy h1 { font-size: var(--redesign-text-title-lg-size); } body.page-beauty.client-auth-page .client-auth-links .client-auth-link { padding-inline: var(--redesign-space-3); font-size: var(--redesign-text-micro-size); } } /* Physical mobile reconciliation: the booking shell used to compound page, shell, picker and card gutters. Keep the approved card language while restoring a deliberate 8px phone gutter and a clear CTA/nav stack. / @media (max-width: 430px) { body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .pwa-booking-flow-page, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .pwa-booking-flow-page { width: calc(100% - (var(--redesign-space-2) 2)); max-width: none; margin-inline: auto; padding-inline: 0; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .pwa-booking-flow-page { /* Overrides the legacy mobile flow-page reserve (126px !important), which left a measured 95px empty shelf above the fixed CTA. / padding-bottom: var(--redesign-space-12) !important; scroll-padding-bottom: calc(var(--redesign-space-bottom-nav-safe) + var(--redesign-space-12)); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-shell.booking-app.booking-time-app, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-shell.booking-app { padding-inline: 0; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-form, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-picker, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-content, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-scroll, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-slot-day-list, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .order-review.booking-confirm-card, body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-order-auth-gate { width: 100%; max-width: none; min-width: 0; } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-picker.booking-card { padding-inline: var(--redesign-space-2); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-slot-day-card { padding: var(--redesign-space-3); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-time.page-booking.page-booking-time .booking-time-bottom-panel { right: max(var(--redesign-space-2), env(safe-area-inset-right)); bottom: calc(var(--redesign-space-bottom-nav-safe) + var(--redesign-client-pwa-sticky-gap)); left: max(var(--redesign-space-2), env(safe-area-inset-left)); padding: var(--redesign-space-1); } body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-confirm-submit-bar--authenticated { right: var(--redesign-space-2) !important; bottom: calc(var(--redesign-space-bottom-nav-safe) + var(--redesign-client-pwa-sticky-gap)) !important; left: var(--redesign-space-2) !important; } body.page-beauty.client-auth-page .client-auth-shell { padding-inline: var(--redesign-space-2); } body.page-beauty.client-auth-page .client-auth-card { padding-inline: var(--redesign-space-4); } } / Guests act from the fully visible account card. The state class is presentation-only; authenticated submission remains in the fixed panel. / body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .booking-confirm-submit-bar--guest { display: none; } @media (max-width: 430px) { body.page-beauty.page-pwa-client.page-pwa-booking-shell.page-pwa-confirm.page-booking.page-booking-order .pwa-booking-flow-page:has(.booking-confirm-submit-bar--guest) { padding-bottom: calc(var(--redesign-space-bottom-nav-safe) + var(--redesign-space-4)); scroll-padding-bottom: calc(var(--redesign-space-bottom-nav-safe) + var(--redesign-space-4)); } } / Canonical client/master PWA shell geometry. The helpers now expose one shell class per product and no longer emit the historical route-specific inline styles. Geometry is intentionally final in the cascade so every route consumes the same viewport, nav and sticky action contracts while retaining its approved content composition. / body.page-beauty.page-pwa-client.client-pwa-app-shell { display: flex; width: 100%; height: 100vh; height: 100dvh; min-height: 0; flex-direction: column; padding: 0 !important; overflow: hidden; } body.page-beauty.page-pwa-client.client-pwa-app-shell > main.client-pwa-page { box-sizing: border-box; width: min( calc(100% - (var(--redesign-client-pwa-page-gutter) 2)), var(--redesign-client-pwa-shell-max) ) !important; max-width: var(--redesign-client-pwa-shell-max) !important; min-width: 0; min-height: 0; flex: 1 1 auto; margin: 0 auto !important; padding-top: max(var(--redesign-space-3), env(safe-area-inset-top)) !important; padding-right: 0 !important; padding-bottom: var(--redesign-space-4) !important; padding-left: 0 !important; overflow-x: clip; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable both-edges; -webkit-overflow-scrolling: touch; } @supports not (overflow-x: clip) { body.page-beauty.page-pwa-client.client-pwa-app-shell > main.client-pwa-page { overflow-x: hidden; } } /* The fixed CTA variants share one measured position above the single nav. Route-specific reserves only describe the control's own physical height. / body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service { --redesign-client-pwa-sticky-reserve: calc((var(--redesign-space-18) 2) + var(--redesign-space-5)); } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-time, body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-confirm { --redesign-client-pwa-sticky-reserve: calc(var(--redesign-space-18) + var(--redesign-space-6)); } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-confirm:has(.booking-confirm-submit-bar--guest) { --redesign-client-pwa-sticky-reserve: var(--redesign-space-4); } body.page-beauty.page-pwa-client.client-pwa-app-shell > main.client-pwa-page--booking { display: block !important; max-width: var(--redesign-client-pwa-shell-max); padding-bottom: var(--redesign-client-pwa-sticky-reserve, var(--redesign-space-4)) !important; scroll-padding-bottom: var(--redesign-client-pwa-sticky-reserve, var(--redesign-space-4)); } /* Screen 5 is a natural document flow in the approved reference. Legacy fixed-height shell geometry clipped the add-on rows below the heading. / body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .booking-shell.booking-app.s5-service { height: auto !important; min-height: 0 !important; max-height: none !important; grid-template-rows: auto auto !important; margin-bottom: 0 !important; overflow: visible !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } / A backdrop filter creates a desktop containing block for the fixed CTA. Keep the time panel anchored to the viewport, matching the mobile shell. / body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-time .booking-shell.booking-app.booking-time-app { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .booking-flow-form.booking-services-layout { padding-bottom: 0 !important; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .s5-total-count { display: none !important; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .s5-total { flex-wrap: nowrap !important; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .s5-total .order-bar-copy { display: flex !important; flex: 1 1 0 !important; flex-direction: column !important; gap: var(--redesign-space-1) !important; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .s5-total-facts { flex-wrap: nowrap; gap: var(--redesign-space-2); } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .s5-total-fact { gap: var(--redesign-space-1); font-size: var(--redesign-text-caption-size) !important; line-height: var(--redesign-line-height-tight) !important; white-space: nowrap; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .s5-total-fact > span { font-size: inherit !important; line-height: inherit !important; white-space: nowrap; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .s5-total-fact::before { width: var(--redesign-space-4); height: var(--redesign-space-4); flex-basis: var(--redesign-space-4); } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .s5-total-note { display: block !important; width: auto; max-width: none !important; font-size: var(--redesign-text-micro-size) !important; line-height: var(--redesign-line-height-tight) !important; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .s5-total-cta { flex: 0 0 auto !important; } @media (max-width: 360px) { body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .booking-shell.booking-app.s5-service { margin-bottom: 0 !important; padding-bottom: var(--redesign-space-18) !important; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .booking-service-hero { grid-template-columns: var(--redesign-space-18) minmax(0, 1fr) !important; gap: var(--redesign-space-3) !important; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .booking-service-herovisual { width: var(--redesign-space-18) !important; height: var(--redesign-space-18) !important; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .booking-service-herometa { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--redesign-space-1) !important; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .booking-service-herometa span, body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .booking-service-herometa strong { gap: var(--redesign-space-1) !important; padding-inline: var(--redesign-space-1) !important; font-size: var(--redesign-text-micro-size) !important; line-height: var(--redesign-line-height-tight) !important; overflow-wrap: normal; white-space: nowrap; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .s5-total { flex-wrap: wrap !important; gap: var(--redesign-space-2) !important; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .s5-total .order-bar-copy, body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .s5-total-cta { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .s5-total-note { display: none !important; } } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-service .booking-total-card, body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-time .booking-time-bottom-panel, body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-confirm .booking-confirm-submit-bar--authenticated { box-sizing: border-box; position: fixed !important; top: auto !important; right: max(var(--redesign-client-pwa-page-gutter), env(safe-area-inset-right)) !important; bottom: calc( var(--redesign-client-pwa-nav-height) + var(--redesign-client-pwa-nav-bottom-gap) + var(--redesign-client-pwa-sticky-gap) ) !important; left: max(var(--redesign-client-pwa-page-gutter), env(safe-area-inset-left)) !important; width: auto !important; max-width: var(--redesign-client-pwa-shell-max) !important; margin: 0 auto !important; transform: none !important; } / The nav is a sibling flex item, not a route-specific viewport overlay. Important geometry declarations retire higher-specificity legacy route rules without affecting color, iconography or active-state styling. / body.page-beauty.page-pwa-client.client-pwa-app-shell > nav.pwa-bottom-nav { box-sizing: border-box; position: static !important; inset: auto !important; display: grid !important; width: min(calc(100% - (var(--redesign-space-2) 2)), var(--redesign-client-pwa-nav-max)) !important; max-width: var(--redesign-client-pwa-nav-max) !important; min-height: var(--redesign-client-pwa-nav-height) !important; height: var(--redesign-client-pwa-nav-height) !important; flex: 0 0 var(--redesign-client-pwa-nav-height); grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 auto var(--redesign-client-pwa-nav-bottom-gap) !important; padding: var(--redesign-space-1) var(--redesign-space-2) !important; border-radius: var(--redesign-radius-card-lg) !important; transform: none !important; } body.page-beauty.page-pwa-client.client-pwa-app-shell > nav.pwa-bottom-nav > a { position: relative; display: grid !important; min-width: 0 !important; min-height: calc(var(--redesign-client-pwa-nav-height) - (var(--redesign-space-2) * 2)) !important; height: auto !important; grid-template-rows: var(--redesign-space-6) auto !important; gap: var(--redesign-space-1) !important; align-content: center !important; justify-items: center !important; padding: var(--redesign-space-1) var(--redesign-space-2) !important; border-radius: var(--redesign-radius-control) !important; font-size: var(--redesign-text-micro-size) !important; line-height: 1 !important; } body.page-beauty.page-pwa-client.client-pwa-app-shell > nav.pwa-bottom-nav > a > svg { width: var(--redesign-space-6) !important; height: var(--redesign-space-6) !important; margin: 0 !important; } body.page-beauty.page-pwa-client.client-pwa-app-shell > nav.pwa-bottom-nav > a > .pwa-bottom-navlabel { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-catalog .cat2-chips { max-width: 100%; padding-right: var(--redesign-space-3); overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-padding-inline: var(--redesign-space-1); scroll-snap-type: x proximity; touch-action: pan-x pan-y; } body.page-beauty.page-pwa-client.client-pwa-app-shell.page-pwa-catalog .cat2-chip { scroll-snap-align: start; white-space: nowrap; } /* Guest account states follow natural document flow. Vertical centering made short screens look empty and diverged from the approved compact references. / body.page-beauty.page-pwa-client.client-pwa-app-shell > main.client-pwa-page:has(> [data-shared-client-profile-guest]), body.page-beauty.page-pwa-client.client-pwa-app-shell > main.client-pwa-page:has(> [data-shared-client-masters-guest]) { display: block; } body.page-beauty.page-pwa-client.client-pwa-app-shell > main.client-pwa-page > [data-shared-client-profile-guest], body.page-beauty.page-pwa-client.client-pwa-app-shell > main.client-pwa-page > [data-shared-client-masters-guest] { width: 100%; align-self: auto; } / Master PWA deliberately retains the separate approved master language. Only its viewport and bottom-nav geometry are consolidated here. / body.admin-page.admin-app.page-pwa-master.master-pwa-app-shell { display: flex; width: 100%; height: 100vh; height: 100dvh; min-height: 0; flex-direction: column; padding: 0 !important; overflow: hidden; } body.admin-page.admin-app.page-pwa-master.master-pwa-app-shell > main.master-pwa-page { box-sizing: border-box; width: min( calc(100% - (var(--redesign-master-pwa-page-gutter) 2)), var(--redesign-master-pwa-shell-max) ) !important; max-width: var(--redesign-master-pwa-shell-max) !important; min-width: 0; min-height: 0; flex: 1 1 auto; margin: 0 auto !important; padding-top: max(var(--redesign-space-3), env(safe-area-inset-top)) !important; padding-right: 0 !important; padding-bottom: var(--redesign-space-4) !important; padding-left: 0 !important; overflow-x: clip; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable both-edges; -webkit-overflow-scrolling: touch; } body.admin-page.admin-app.page-pwa-master.master-pwa-app-shell > main.master-pwa-page.pwa-master-shell--plain { padding-bottom: max(var(--redesign-space-6), env(safe-area-inset-bottom)) !important; } body.admin-page.admin-app.page-pwa-master.master-pwa-app-shell > nav.pwa-master-bottom-nav { box-sizing: border-box; position: static !important; inset: auto !important; display: grid !important; width: min(calc(100% - (var(--redesign-space-2) * 2)), var(--redesign-master-pwa-nav-max)) !important; max-width: var(--redesign-master-pwa-nav-max) !important; min-height: var(--redesign-master-pwa-nav-height) !important; height: var(--redesign-master-pwa-nav-height) !important; flex: 0 0 var(--redesign-master-pwa-nav-height); grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 auto var(--redesign-master-pwa-nav-bottom-gap) !important; padding: var(--redesign-space-1) var(--redesign-space-2) !important; border-radius: var(--redesign-radius-card-lg) !important; transform: none !important; } body.admin-page.admin-app.page-pwa-master.master-pwa-app-shell > nav.pwa-master-bottom-nav > a { position: relative; display: grid !important; min-width: 0 !important; min-height: calc(var(--redesign-master-pwa-nav-height) - (var(--redesign-space-2) * 2)) !important; height: auto !important; grid-template-rows: var(--redesign-space-6) auto !important; gap: var(--redesign-space-1) !important; align-content: center !important; justify-items: center !important; padding: var(--redesign-space-1) var(--redesign-space-2) !important; border-radius: var(--redesign-radius-control) !important; font-size: var(--redesign-text-micro-size) !important; line-height: 1 !important; } @media (max-width: 340px) { body.admin-page.admin-app.page-pwa-master.master-pwa-app-shell .shared-master-schedule--pwa .admin-schedule-month-nav .button { padding-inline: var(--redesign-space-1); } }