/* ========================================================================================== callback-widget.css - ttisi.ru, callback widget v6.4 (v6.3 two-state trigger, icon-only A, clamped FAB, 3 separate consents) (name + phone + 2 required consents + optional call time) FINAL build for deploy review. CALLBACK L2 (04), 2026-10-11. Base = SITE-BUILDING v6.1 stylesheet (accepted). VISUAL SOURCE (authoritative): shared/design-registry/organisms-write/org-modal-callback.v6.2-final.json frame 584 wide, padding 56, rowGap 24, fill grey_100 (#ebf1f4), radius borderRadius_l title header_44_bold / lead header_20_bold / white card (pad 24, gap 24, neumorphism_dropShadow_buttonHover) card rows: time slot (link 16 | picker 56) -> Имя 56 -> phone 56 -> checkbox#1 (PDP label, wraps ~5 lines) -> checkbox#2 (24) -> submit 56 (left, 274) LAYOUT IS FLOW: nothing pins a container height; the reference frames (584x800 collapsed / 584x840 expanded) are the result of the content, not an input. Only the CONTROLS keep their kit heights (fields/selects/buttons 56, triggers 40). text field = "Text field/L/no title": 56 high, 1px elementBorderActive, radius S, text body_14_medium grey_700 2 x Checkbox/M 24px (check_box_outline_blank, grey_500) + body_12_regular label, gap 12 select = "Select/L/No title": white, 1px grey_600, radius S, padding 16, body_14_medium grey_700, chevron grey_600 submit = Button/fill/L 56 high, buttonFullActive (#476d85), radius M, body_16_medium white, LEFT aligned TRIGGERS (v6.4, CALLBACK L2, 2026-10-20): ONE logical button in TWO exclusive states - A = LARGE in-flow ICON-ONLY handset in the header slot (56x56), B = SMALLER position:fixed FAB (48x48, icon only), visible only while A is scrolled out of view. Kit look: #476d85, radius 5, white `call` icon. The icon is the WHITE kit `call` (inline SVG, fill=currentColor, colour = --pp-buttonfulltextcolor = white). TOKENS: every colour / size / type value is var(--pp-*) from penpot-tokens.css, which MUST be loaded on the page (prod: /opt/ttisi-site/src/styles/penpot-tokens.css). No hex, no foreign palette. The only non-var colour literal is ONE rgb() inside --cbw-shadow-neu: Penpot's composite shadow neumorphism_dropShadow_buttonHover is not exposable as a single --pp-* variable (see tokens.css footer), its values are copied verbatim from penpot-tokens-snapshot-2026-10-04.json. SITE HOOKS (all optional custom properties): --cbw-fab-edge / --cbw-fab-bottom / --cbw-content-max / --cbw-fab-radius state-B sticky FAB placement (v6.4 formula in the trigger block) --cbw-menu-radius state-A corner radius --cbw-trigger-font font of the labelled menu trigger --cbw-link-color colour of the consent-label links (default: inherit + underline) NOT drawn in Penpot (derived from kit tokens, spec F5/F6): checked / hover / focus / invalid states, success / error / rejected views, mobile (<=640px) scale, the triggers' hover/focus, the "Позвонить сейчас" way back (non-canon), the slots loading / unavailable note, the picker row below 480px (stacked here). ========================================================================================== */ .cbw, .cbw-trigger { /* widget-local layout constants (not colours, no Penpot token exists for them) */ --cbw-z: 9000; /* stacking of the floating trigger; the itself uses the top layer */ /* Penpot composite neumorphism_dropShadow_buttonHover: [-2 -2 4 0 white] + [2 2 4 0 #c3d0dd66] */ --cbw-shadow-neu: -2px -2px 4px 0 var(--pp-colors-additional-white), 2px 2px 4px 0 rgb(195 208 221 / 0.4); } .cbw { --cbw-modal-w: 584px; /* frame width (collapsed 584x785 / expanded 584x825) */ --cbw-motion: 200ms; /* time-section height transition (contract $disclosure.motion) */ font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* fontFamily_montserrat */ color: var(--pp-colors-grey-black-800); -webkit-text-size-adjust: 100%; } /* resets use :where() = zero specificity, so every single-class rule below wins regardless of order */ :where(.cbw) *, :where(.cbw) *::before, :where(.cbw) *::after, :where(.cbw-trigger), :where(.cbw-trigger) *, :where(.cbw-trigger) *::before, :where(.cbw-trigger) *::after { box-sizing: border-box; } .cbw [hidden] { display: none !important; } :where(.cbw) button, :where(.cbw) input, :where(.cbw) select { font: inherit; color: inherit; margin: 0; } :where(.cbw) h2, :where(.cbw) h3, :where(.cbw) p { margin: 0; } /* ---------------------------------------------------------------- TRIGGERS (Button/fill/M, #476d85, radius 5, white call icon) Both are plain