/* ============================================ RENATUS MODAL TOKENS Single source of truth for modal design. ============================================ TIER A · BRAND / CONVERSION ─────────────────────────── Apply the .ta-modal* classes (or copy the v2 mockup structure) and every one of the 7 typography roles below resolves to the correct colour, size and weight automatically. Change the token here → every Tier A modal in production updates in one place. Roles, in render order from top of the modal to bottom: 1. Gradient heading → --ta-heading-* 2. Subheading detail → --ta-subheading-* (line UNDER the gradient) 3. Paragraph description → --ta-paragraph-* (body copy) 4. Price → --ta-price-* 5. Price byline → --ta-price-byline-* 6. Feature CTA → --ta-cta-feature-* (pink pill, right) 7. Secondary CTA → --ta-cta-secondary-* (outline, left) */ :root { /* === BASE: gradient (consumed by the role tokens below) === --btn-pink lives in tokens/colors.css now (brand palette owns it). We don't redeclare it here — every role token below pulls it from colors.css via var(--btn-pink). */ --modal-head-bg: var(--gradient); /* === LEGACY ALIASES (kept so older selectors still resolve) === */ --modal-meta-color: var(--ta-subheading-color, var(--gray-mid)); /* ───────────────────────────────────────────── 1 · GRADIENT HEADING — single line on the gradient strip ───────────────────────────────────────────── */ --ta-heading-color: #ffffff; --ta-heading-size: 20px; --ta-heading-weight: 600; /* ───────────────────────────────────────────── 2 · SUBHEADING DETAIL — meta line UNDER the gradient e.g. "4 reports · ~30 min", "You have 0 credits remaining." ───────────────────────────────────────────── */ --ta-subheading-color: var(--ink-2); --ta-subheading-size: 13px; --ta-subheading-weight: 500; /* PARAGRAPH STRONG — bolded inline emphasis inside the body paragraph (e.g. the product name in "Gift **Customer Discovery — Sandra Meier**…"). One source of truth so every Tier A modal bolds the same way. */ --ta-paragraph-strong-color: var(--ink); --ta-paragraph-strong-weight: 600; /* ───────────────────────────────────────────── 3 · PARAGRAPH DESCRIPTION — body copy The descriptive paragraph that explains what the user is about to do / buy. ───────────────────────────────────────────── */ --ta-paragraph-color: var(--ink-2); --ta-paragraph-size: 14.5px; --ta-paragraph-weight: 400; /* ───────────────────────────────────────────── 4 · PRICE — bold, large, dark ───────────────────────────────────────────── */ --ta-price-color: var(--ink); --ta-price-size: 36px; --ta-price-weight: 700; /* ───────────────────────────────────────────── 5 · PRICE BYLINE — quiet detail next to the price e.g. "one-time · 1 credit" ───────────────────────────────────────────── */ --ta-price-byline-color: var(--ink-2); --ta-price-byline-size: 11px; --ta-price-byline-weight: 400; /* ───────────────────────────────────────────── 6 · FEATURE CTA — primary, pink pill, on the right ───────────────────────────────────────────── */ --ta-cta-feature-bg: var(--btn-pink); --ta-cta-feature-color: #ffffff; --ta-cta-feature-size: 14px; --ta-cta-feature-weight: 600; /* ───────────────────────────────────────────── 7 · SECONDARY CTA — outline pill, on the left ───────────────────────────────────────────── */ --ta-cta-secondary-bg: #ffffff; --ta-cta-secondary-color: var(--ink-2); --ta-cta-secondary-border: var(--gray-light); --ta-cta-secondary-size: 14px; --ta-cta-secondary-weight: 400; /* ───────────────────────────────────────────── 8 · TOGGLE — on/off switch (cookie settings, prefs) ───────────────────────────────────────────── */ --ta-toggle-width: 42px; --ta-toggle-height: 22px; --ta-toggle-radius: 11px; --ta-toggle-thumb-size: 16px; --ta-toggle-thumb-inset: 3px; --ta-toggle-thumb-travel: 20px; --ta-toggle-track-off: var(--gray-light); --ta-toggle-track-on: rgba(255, 126, 126, 0.60); /* coral 60% — matches Tier C callout family (--coral #FF7E7E) */ --ta-toggle-thumb-bg: #ffffff; --ta-toggle-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); --ta-toggle-transition: 0.2s; /* ───────────────────────────────────────────── LAYOUT PRIMITIVES — shape, spacing, line-height ───────────────────────────────────────────── */ --ta-modal-max-width: 440px; --ta-modal-radius: 16px; /* legacy / fallback */ --ta-modal-radius-top: 16px; /* Tier A keeps rounded top */ --ta-modal-radius-bottom: 16px; --ta-modal-pad-x: 28px; /* horizontal padding for head / body / foot */ --ta-head-pad-y: 22px; --ta-head-margin-bottom: 40px; /* gap AFTER the gradient (margin, not padding) — owned by the head */ --ta-body-pad-top: 0; /* first text line sits flush; gap is owned by --ta-head-margin-bottom */ --ta-body-pad-bottom: 8px; /* Generous breathing room from the gradient hero down to the first line of text (meta or body). Christine bumped 36px → 48px on 8 May 2026 for the gift form: "add a gap above the first paragraph." */ --ta-meta-pad-top: 0; /* first text line sits flush; gap is owned by --ta-head-pad-bottom */ --ta-meta-margin-bottom: 16px; /* gap between meta line and the next sibling block (body / price / etc.) */ --ta-foot-pad-top: 18px; --ta-foot-pad-bottom: 24px; --ta-foot-gap: 10px; /* gap between secondary and primary CTA */ --ta-paragraph-line-height: 1.6; /* Gap between two stacked paragraph-style lines inside a Tier A body (e.g. the sent confirmation's title line → helper sentence). */ --ta-paragraph-gap: 16px; --ta-price-row-gap: 8px; --ta-price-row-margin-top: 18px; --ta-price-row-margin-bottom: 4px; --ta-cta-pad-y: 11px; --ta-cta-pad-x: 22px; --ta-cta-min-height: 40px; /* shared CTA height — Tier A + Tier B + #kitConfirmModal */ --ta-cta-radius: 999px; /* full pill */ --ta-cta-border-width: 1px; --ta-cta-hover-lift: -1px; --ta-cta-transition: transform .08s ease; --ta-cta-flex: 0 0 auto; /* natural pill width — matches sibling Tier A/B modals */ /* Close (X) button on the gradient strip */ --ta-close-size: 28px; --ta-close-inset: 14px; --ta-close-radius: 999px; --ta-close-icon-size: 18px; --ta-close-bg: rgba(255, 255, 255, 0.18); --ta-close-bg-hover: rgba(255, 255, 255, 0.32); /* Dismiss / "already have an account" link underline offset */ --ta-subline-underline-offset: 3px; /* Optional subline beneath the CTA row (e.g. "Subscribe to gift…") — opts in by setting margin-top from this token. Visual rhythm: CTA row → 16px breathing → quiet supporting copy → 24px to bottom. */ --ta-subline-margin-top: 16px; --ta-subline-color: var(--gray-mid); --ta-subline-size: 13px; --ta-subline-line-height: 1.5; --ta-subline-link-color: var(--btn-pink); --ta-subline-link-weight: 600; /* ============================================================ TIER B · FUNCTIONAL (form modals — Edit / Save / Cancel) Pattern: thin gradient stripe at top, white card, dark heading. All copy in --gray-dark by design. ============================================================ */ --tb-stripe-bg: var(--gradient); --tb-stripe-height: 3px; /* Heading (h2) */ --tb-heading-color: var(--ink-2); /* Subheading (sentence under h2) — aliased to Tier A's subheading token so "4 reports · ~30 min" and "Update the name…" share one source. */ /* Form field label */ --tb-label-color: var(--ink-2); --tb-label-size: 13px; --tb-label-weight: 600; /* Form field input / textarea */ --tb-input-color: var(--ink-2); --tb-input-size: 14px; --tb-input-weight: 400; --tb-input-bg: #ffffff; --tb-input-border: var(--gray-light); --tb-input-radius: 10px; --tb-input-pad-y: 11px; --tb-input-pad-x: 12px; --tb-input-focus-border: var(--btn-pink); --tb-input-focus-ring: rgba(255,85,164,.15); /* CTAs (same shape as Tier A, dark-on-white secondary) */ /* Hover states */ --tb-cta-feature-hover-bg: #ED4493; --tb-cta-secondary-hover-bg: var(--gray-hover); --tb-cta-secondary-hover-border: var(--ink-2); /* Layout details specific to Tier B form modals. ─── RENDERED vertical gaps (one source of truth) ─── These tokens encode the VISIBLE distance between elements, NOT layout primitives. Block flow (mockup) and flex containers (production cards) yield identical visual results when these are applied directly to one side of one element. Never split a rendered gap across two sibling margins — that depends on margin-collapse and drifts between layouts. */ --tb-heading-letter-spacing: -0.01em; --tb-heading-line-height: normal; /* match v2 mockup — no inherited line-height */ --tb-label-line-height: normal; /* match v2 mockup — no inherited line-height */ --tb-card-shadow: none; /* v2 mockup uses flat card, no box-shadow */ --tb-gap-head-to-body: 32px; /* heading bottom → first field top */ --tb-gap-between-fields: 24px; /* field N bottom → field N+1 top */ --tb-gap-body-to-foot: 24px; /* last field bottom → footer top */ --tb-label-gap: 6px; /* label → input */ --tb-input-line-height: 1.55; --tb-input-focus-ring-width: 3px; --tb-textarea-min-h: 64px; /* Close (X) button used in larger Tier B modals (Move, etc.) */ --tb-close-size: 28px; --tb-close-radius: 6px; --tb-close-inset: 14px; --tb-close-color: var(--gray-mid); --tb-close-hover-bg: var(--bg-hover); /* Subtitle (sentence under heading) — used in Move modal */ --tb-subtitle-line-height: 1.45; /* Searchable list (Move modal) */ --tb-list-wrap-radius: 14px; --tb-list-wrap-border: var(--gray-light); --tb-list-row-pad-y: 12px; --tb-list-row-pad-x: 14px; --tb-list-row-gap: 12px; --tb-list-icon-size: 18px; --tb-list-max-h: 340px; --tb-list-pad: 6px; --tb-list-item-pad-y: 8px; --tb-list-item-pad-x: 12px; --tb-list-item-radius: 8px; --tb-list-item-hover-bg: var(--bg-hover); /* Move modal larger card width */ --tb-modal-wide-max-width: 560px; /* ── Form utilities (grid / helper / error / optional / success icon) ── Source-of-truth tokens for the shared classes in work.css that replace inline-style noise in admin/platform/partner modals. */ --tb-grid-col-gap: 12px; /* two-column field grid gutter */ --tb-helper-size: 12px; /* inline helper text under input */ --tb-helper-weight: 400; --tb-helper-line-height: 1.45; --tb-helper-color: var(--gray-mid); --tb-error-size: 13px; --tb-error-pad-y: 8px; --tb-error-pad-x: 12px; --tb-error-radius: 8px; --tb-error-bg: #FFEBEE; --tb-error-color: #D32F2F; /* Success / confirmation tick (gift-share confirmed, etc.) */ --tb-icon-success-size: 56px; --tb-icon-success-stroke: 2.4px; --tb-icon-success-color: var(--btn-pink); /* Link color used in Tier B body copy (gift-share change link, etc.) */ --tb-link-color: var(--btn-pink); /* ============================================================ TIER C · DESTRUCTIVE (Delete / consequence confirmations) Same chrome as Tier B + a 10% pink callout for the warning. All copy in --gray-dark. ============================================================ */ --tc-stripe-bg: var(--gradient); --tc-stripe-height: 3px; /* Heading (h2) */ --tc-heading-color: var(--ink-2); --tc-heading-size: var(--ta-heading-size, 20px); /* match Tier A — Christine 9 May: all three tiers same heading size/weight */ --tc-heading-weight: var(--ta-heading-weight, 600); --tc-heading-letter-spacing: -0.01em; --tc-heading-line-height: normal; /* match v2 mockup */ --tc-card-shadow: none; /* v2 mockup uses flat card */ /* Subheading — aliased to Tier A's subheading token (single source) */ --tc-subheading-color: var(--ta-subheading-color); --tc-subheading-size: var(--ta-subheading-size); --tc-subheading-weight: var(--ta-subheading-weight); --tc-subheading-line-height: normal; /* match v2 mockup — no inherited line-height */ --tc-sub-gap: 36px; /* gap from heading to subheading */ /* Body paragraph */ --tc-paragraph-color: var(--ink-2); --tc-paragraph-size: 14.5px; --tc-paragraph-weight: 400; --tc-paragraph-line-height: 1.6; --tc-body-pad-top: 20px; /* head -> body separation */ /* Callout (pink-tinted warning box) */ --tc-callout-bg: rgba(255,126,126,0.10); /* coral 10% (--coral #FF7E7E) */ --tc-callout-color: var(--ink-2); --tc-callout-size: 13px; --tc-callout-weight: 500; --tc-callout-radius: 10px; --tc-callout-pad-y: 10px; --tc-callout-pad-x: 14px; --tc-callout-gap: 20px; /* paragraph -> callout separation */ /* Footer offset above and beyond --ta-foot-pad-top */ --tc-foot-margin-top: 8px; /* CTAs */ --tc-cta-feature-bg: var(--btn-pink); --tc-cta-feature-color: #ffffff; --tc-cta-feature-size: 14px; --tc-cta-feature-weight: 600; --tc-cta-secondary-bg: #ffffff; --tc-cta-secondary-color: var(--ink-2); --tc-cta-secondary-border:var(--gray-light); --tc-cta-secondary-size: 14px; --tc-cta-secondary-weight:400; } /* ============================================ PROGRAM-ACCESS MODAL · default-hidden chrome ============================================ The Program Access modal HTML lives in pages/base-app.html so every page that extends the base (including public pages like /pricing, /facilitator, /products) carries the markup. Its full chrome is defined in static/css/work.css under `.mw-modal-overlay`, but work.css is only loaded by app pages and home.html — public pages don't load it. Without a default rule here the overlay would render as plain flow content (visible "Enter your access code" form at the bottom of every public page). This block ports just the visibility contract from work.css so any page that includes the markup hides the overlay by default and only shows it when JS adds `.open` (see static/js/base-app.js openProgramAccess). Pages that already load work.css re-declare the same rules — last-one-wins is identical, no regression. Same applies to `.mw-modal-step` which uses `data-panel` to swap between the code-entry and email-entry steps. */ .mw-modal-overlay { position: fixed; inset: 0; z-index: 9100; display: none; align-items: center; justify-content: center; } .mw-modal-overlay.open { display: flex; } .mw-modal-step { display: none; } .mw-modal-overlay[data-panel="code"] #globalCodeStep, .mw-modal-overlay[data-panel="email"] #globalEmailStep { display: block; }