/* ============================================================================= * NIZU Onboarding — public wizard UI · Framework7 styling layer * ----------------------------------------------------------------------------- * The look comes from Framework7 8 (iOS theme), vendored at * assets/vendor/framework7/framework7.min.css * and activated by onboarding-theme.js adding `.ios` (+ `.dark` for dark mode) * on , which switches Framework7's --f7-* design tokens. This file maps * the wizard's own .ob-* hooks (kept stable for wizard.js) onto that F7 look, * sets the accent, and handles layout glue + microanimations. Tailwind (loaded * in wizard.php) still provides layout utilities; a few !important rules below * win over its colour utilities so Framework7 owns the component surfaces. * ========================================================================== */ :root { /* Accent — onboarding-theme.js sets --f7-theme-color(+ -rgb) and --ob-primary from the flow's colour; these fall back to the iOS system blue. */ --ob-primary: var(--f7-theme-color, #007aff); --ob-primary-soft: rgba(var(--f7-theme-color-rgb, 0, 122, 255), .14); --ob-ease: cubic-bezier(.32, .72, 0, 1); --ob-dur: .5s; } /* Framework7's Material (MD) theme normally receives its colours from F7's JS (Material dynamic colour engine). We run Framework7 CSS-only, so Android — which uses the .md theme — would render colourless. Define a neutral Material palette here (primary follows the flow accent) so .md works without that JS. */ .md { --f7-md-primary: var(--f7-theme-color, #007aff); --f7-md-on-primary: #ffffff; --f7-md-surface: #f6f7f9; --f7-md-surface-1: #ffffff; --f7-md-surface-2: #eef1f4; --f7-md-surface-2-rgb: 238, 241, 244; --f7-md-surface-variant: #e5e7eb; --f7-md-on-surface: #1b1c1e; --f7-md-on-surface-variant: #6b7280; --f7-md-outline: #c4c7cc; --f7-md-secondary-container: #e6e9ef; --f7-md-on-secondary-container: #1b1c1e; } .md.dark { --f7-md-surface: #121316; --f7-md-surface-1: #1e1f24; --f7-md-surface-2: #26272d; --f7-md-surface-2-rgb: 38, 39, 45; --f7-md-surface-variant: #44464f; --f7-md-on-surface: #e6e1e5; --f7-md-on-surface-variant: #c4c7cc; --f7-md-outline: #8b8e96; --f7-md-secondary-container: #3a3b41; --f7-md-on-secondary-container: #e6e1e5; } /* Material cards are a touch less rounded than iOS. */ .md .ob-glass { border-radius: 16px; } * { -webkit-tap-highlight-color: transparent; } body { font-family: var(--f7-font-family); color: var(--f7-text-color); background: var(--f7-page-bg-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color .3s ease, color .3s ease; } /* Framework7's reset forces EVERY