/* ============================================================================ * GP App Door - Entry flow (slice E2) * ---------------------------------------------------------------------------- * The first-launch Welcome layer (decision D9), from * docs/plans/2026-07-26-app-entry-flow.md. The front-door sun/moon theme switch * (D1 as amended) left this file with the owner's 2026-09-03 ruling: no theme * choice during signup or first entry, Settings is the one theme control * (docs/plans/2026-09-03-theme-light-default.md). * * Enqueued by inc/gp-app-entry.php on app-door ENTRY SCREENS only (the login page * today, plus E3's password-help and coach-access screens once they land). The * website door never loads a byte of this file. * * TOKENS: Tier-2 / Tier-3 semantics only, per CLAUDE.md. No raw hex, no raw * duration or curve. Every token consumed here already resolves under * [data-theme="dark"] in assets/css/gp-base.css, which is what makes the whole * screen flip correctly from one attribute. * * COMPONENTS: the primary CTA consumes the frozen library's .gp-btn + * .gp-btn-primary. This file only gives it the door's SIZE (52px target, 12px * corner, full width). It never redefines the fill, which is what makes the * Podium action law (black on light, gold on dark, via --gp-color-primary) apply * to the door for free rather than being re-stated here. * * TARGETS: 52px on the primary controls, 44px minimum on everything else * including the quiet link, per decision D8. * * FOCUS: ink in both themes (--gp-color-text), never gold. D8: "Focus rings are * ink in both themes (DESIGN.md interaction states), not gold. Gold focus fails * 3:1 on white." The shared --gp-color-focus token is still gold site-wide; that * is a token-layer change for a coordinated slice, not something a feature file * gets to redefine, so the entry screens name the ink they need directly. * * SECONDARY INK: --gp-color-text-secondary, not --gp-color-text-muted. D8 again, * paraphrased so no literal color lands in this file: light-mode secondary and * faint ink take the Podium ink-2 / ink-3 values rather than the website grays, * which fixes every small-text contrast failure. That failure is real and * measured. --gp-color-text-muted resolves to the gray-500 primitive, which lands * at 4.35:1 on the light canvas, under the 4.5:1 AA floor for normal text, and the * lede, the quiet link and the coach line are all normal text. * --gp-color-text-secondary is the existing Tier-2 semantic for exactly this role * and measures 9.51:1 light / 13.20:1 dark. Repointing --gp-color-text-muted * itself would be the tidier fix but it is a site-wide token change, which belongs * to a coordinated token slice, not to a feature file. * * @package Gymnastics_Plus * @since 3.0.0 * ============================================================================ */ /* ---------------------------------------------------------------------------- * 1. LAYER VISIBILITY (D9) * ---------------------------------------------------------------------------- * The login layer is the DEFAULT and the Welcome layer is hidden. That direction * is deliberate: with JavaScript unavailable neither the pre-paint decision * script nor the in-page layer swap can run, and the correct thing to be left * looking at is the real login form, which still posts to wp-login.php on its * own and still carries a Create account link. * * gpa_entry_layer_script() (inc/gp-app-entry.php, wp_head priority -90, before * any stylesheet link is printed) adds .gpa-entry-welcome to when this * device has no memory of a successful sign-in. So the swap below is resolved * before the browser has a stylesheet to paint with: there is no flash of the * wrong layer in either direction. * -------------------------------------------------------------------------- */ .gpa-entry-welcome-layer { display: none; } html.gpa-entry-welcome .gpa-entry-welcome-layer { display: flex; } html.gpa-entry-welcome .gp-login__panel, html.gpa-entry-welcome .gp-login__footer { display: none; } /* ---------------------------------------------------------------------------- * 2. THE WELCOME LAYER * ---------------------------------------------------------------------------- * Three bands in one column: the brand + message centered in whatever space is * left, the actions docked under it, and the coach fine print last. The fine * print is deliberately tertiary (D9: "never the focal point") and still clears * a 44px target. * -------------------------------------------------------------------------- */ .gpa-entry-welcome-layer { flex: 1 1 auto; flex-direction: column; min-height: 0; padding: 32px 24px 12px; } .gpa-entry-welcome__body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* The app icon: the exact artwork the member just tapped on their home screen. */ .gpa-entry-welcome__mark { display: block; width: 76px; height: 76px; margin: 0 0 24px; } .gpa-entry-welcome__title { margin: 0 0 12px; font-size: var(--gp-t-lg); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; color: var(--gp-color-text); } /* The brand name never splits across lines. Measured on real devices 2026-08-23: at 393pt (iPhone 16) and 440pt (17 Pro Max) the natural wrap broke as "Welcome to Gymnastics / Plus", stranding one word on the first screen a member ever sees. 375pt (SE) happened to break correctly, which is why this stayed invisible until all three widths were walked. */ .gpa-entry-welcome__brand { white-space: nowrap; } .gpa-entry-welcome__actions { flex: 0 0 auto; width: 100%; max-width: 360px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 4px; } /* Size + shape only. .gp-btn-primary owns the fill, so the action law applies. */ .gpa-entry-welcome__cta { width: 100%; min-height: 52px; padding: 0 20px; border-radius: var(--gp-r-sm); font-size: var(--gp-t-body); font-weight: 600; text-decoration: none; } .gpa-entry-welcome__secondary { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: var(--gp-r-sm); font-size: var(--gp-t-sub); font-weight: 500; color: var(--gp-color-text-secondary); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color var(--gp-motion-duration-fast) var(--gp-motion-ease-out), transform var(--gp-motion-duration-instant) var(--gp-motion-ease-out); } @media (hover: hover) { .gpa-entry-welcome__secondary:hover { color: var(--gp-color-text); } } .gpa-entry-welcome__secondary:active { transform: scale(var(--gp-press-scale-button)); } .gpa-entry-welcome__fineprint { flex: 0 0 auto; margin: 12px 0 0; text-align: center; font-size: var(--gp-t-foot); /* Safe-area padding is already carried by .gp-login (the shared page container), so this only adds the visual breathing room under it. */ padding-bottom: 8px; } .gpa-entry-welcome__fineprint a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; color: var(--gp-color-text-secondary); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color var(--gp-motion-duration-fast) var(--gp-motion-ease-out); } @media (hover: hover) { .gpa-entry-welcome__fineprint a:hover { color: var(--gp-color-text); text-decoration: underline; } } /* Ink focus, both themes (D8). */ .gpa-entry-welcome-layer a:focus-visible { outline: 2px solid var(--gp-color-text); outline-offset: 2px; border-radius: var(--gp-r-xs); } /* ---------------------------------------------------------------------------- * 3. WELCOME ENTRANCE * ---------------------------------------------------------------------------- * The same authored moment the login layer already has ("the doorway rises to * meet you, once"), so the two layers read as one screen changing rather than * two different designs. Transform + opacity only, so it costs the main thread * nothing on the frame the splash hands off. * -------------------------------------------------------------------------- */ html.gpa-entry-welcome .gpa-entry-welcome-layer > * { animation: gpa-entry-rise var(--gp-motion-duration-base) var(--gp-motion-ease-out) both; } html.gpa-entry-welcome .gpa-entry-welcome-layer > *:nth-child(1) { animation-delay: 0ms; } html.gpa-entry-welcome .gpa-entry-welcome-layer > *:nth-child(2) { animation-delay: 60ms; } html.gpa-entry-welcome .gpa-entry-welcome-layer > *:nth-child(3) { animation-delay: 120ms; } @keyframes gpa-entry-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---------------------------------------------------------------------------- * 4. REDUCED MOTION * ---------------------------------------------------------------------------- * The state still changes, only the motion collapses (DESIGN.md interaction * states). The press scale IS the pressed state, so it is kept and only its * transition is dropped by the global reduced-motion rule in gp-base.css. * -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.gpa-entry-welcome .gpa-entry-welcome-layer > * { animation: none; } } /* ---------------------------------------------------------------------------- * 6. THE E3 SCREENS: PASSWORD HELP + COACH ACCESS * ---------------------------------------------------------------------------- * Slice E3 of docs/plans/2026-07-26-app-entry-flow.md: the app-door halves of * forgot password, check your email, reset password, password updated, coach * request access, and coach request sent. * * ONE ANATOMY, SIX SCREENS. Every one of them is the same object: the GP app * icon at the top, a title, a line of plain help, then either one form or one * confirmation, with a single primary action and one quiet link. The back * chevron sits top left and the sun/moon switch (section 4) top right, so the * two of them read as the ends of one top bar exactly as decision D1 describes, * without either screen having to build a bar. * * WHY THESE SCREENS CARRY NO INLINE