/* ============================================================= footer-keypad.css · faces/footer-keypad/mobile/ui/ · standalone Stub: inherits canvas geometry, overlay primitives, and chip-close button styling from add-account.css (loaded ahead of this in ). Sections start hidden — design will fill content per section. Depends on: shared/tokens.css, shared/canvas.css, shared/components/chips.css, add-account.css (overlay primitives). ============================================================= */ .footer-keypad-section[hidden] { display: none; } /* show only the blue footer band — let the home face underneath bleed through. all rules scoped to this overlay so add-account etc. are untouched. canvas-root needs explicit transparent because canvas.css sets background: var(--canvas) (white) on it by default. */ #overlay-footer-keypad .canvas-root, #overlay-footer-keypad .canvas-header, #overlay-footer-keypad .canvas-main { background: transparent; } #overlay-footer-keypad .canvas-header { box-shadow: none; } #overlay-footer-keypad .overlay-footer { background: var(--brand-active); display: grid; /* minmax(0, 1fr) so rows/cols stay strictly equal — plain 1fr lets the SVG icons' intrinsic 300×150 replaced-element default expand a row. */ grid-template-rows: repeat(6, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr)); container-type: size; /* enables cqh on cells for font-size */ } #overlay-footer-keypad .footer-keypad-cell { border: 1px solid var(--brand); display: grid; place-items: center; color: var(--brand); font-size: 14cqh; /* digits ≈ 80% of cell height = "big" */ /* project-wide interactive-element pattern (see chips.css / toggle-neon.css / chip-check.css): no text selection, no tap highlight box on iOS. */ user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; /* press / hover affordance */ transition: transform 0.08s ease-out, background-color 0.15s ease-out; } #overlay-footer-keypad .footer-keypad-cell:active { transform: scale(0.94); background-color: rgba(15, 20, 41, 0.18); } @media (hover: hover) { #overlay-footer-keypad .footer-keypad-cell:hover { background-color: rgba(15, 20, 41, 0.08); } } #overlay-footer-keypad .footer-keypad-cell--wide { grid-column: 1 / -1; /* span all 3 columns of the keypad grid */ } #overlay-footer-keypad .footer-keypad-cell--code { font-size: 7cqh; /* country-code labels at half the digit size */ } /* explicit cqh size on icons inside cells — bypasses iOS Safari's flaky resolution of % dimensions on replaced elements inside flexible grid tracks. cqh queries .overlay-footer (has container-type:size). */ #overlay-footer-keypad .footer-keypad-cell .icon { width: 12cqh; height: 12cqh; } /* dismiss cell — keyboard-down icon closes the keypad on tap */ #overlay-footer-keypad .footer-keypad-cell--dismiss { cursor: pointer; -webkit-tap-highlight-color: transparent; } /* the overlay div still spans the whole viewport (10/80/10 grid lives inside it) but only the visible footer band intercepts pointer events. transparent bands let clicks reach the layer beneath (home face or add-account overlay). pointer-events isn't inherited, so we have to set `none` explicitly on every structural descendant — otherwise .frame / .canvas-root / .canvas-header / .canvas-main keep their default `auto` and silently swallow taps. */ #overlay-footer-keypad, #overlay-footer-keypad .frame, #overlay-footer-keypad .canvas-root, #overlay-footer-keypad .canvas-header, #overlay-footer-keypad .overlay-header, #overlay-footer-keypad .canvas-main { pointer-events: none; } #overlay-footer-keypad .overlay-footer, #overlay-footer-keypad .overlay-footer * { pointer-events: auto; } /* this overlay's footer band is 40% (vs the home face's 10%); main shrinks to 50% to compensate. header stays 10% so the geometry still matches the home face for the top two bands. */ #overlay-footer-keypad .canvas-root { grid-template-rows: 10% 50% 40%; }