/* Papelito Widget — Coupon Lead Magnet (Phase 5, Session 4) * * Component-scoped CSS for the bottom-left peeking tab + native . * Loaded from templates/funnel/_lead_magnet_widget.html on storefront + * product_detail + customer_dashboard pages. * * Theme tokens drive everything — inherits parent page's [data-theme] on * . Native sits in the browser top-layer but still reads * CSS custom properties from ancestry; verified Phase 5 dev walk. * * Design source: BUILD_PLAN §5.2 + RC2 deep-research report + Session 4 * 1-page design brief. Apple-clean direction (matches Pages 1+2 from S3): * DM Sans only, hairline borders, accent as 6px dot or 2px underline only * (NOT gold fill — RC2: gold ground reads as Shopify SALE tag at premium AOV). * * Discipline notes: * - G27: any gold-as-text uses var(--accent-on-light), never var(--accent). * - G29: no `color: white` / `#fff` — use var(--text-primary)/ * var(--text-on-accent). * - G37: NOT applied (component CSS, not surface CSS). * - G39: bare `*` reset is OFF-LIMITS here. Component CSS NEVER touches `*`. * - G40: this stylesheet is in the THEME_ASSET_VERSION cache-bust scope * (uses theme tokens). The tag carries ?v={{ theme_asset_version }}. * - Reduced motion: every animation declares a (prefers-reduced-motion: * reduce) branch. */ /* ============================================================ * 1. The papelito tab (corner ribbon — bottom-right) * ============================================================ */ .pap-tab { position: fixed; bottom: 0; right: 0; z-index: 10000; width: 160px; height: 160px; background: var(--accent); clip-path: polygon(100% 0, 100% 100%, 0 100%); border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; /* Initial state — JS reveals via class .pap-tab--ready after 1500ms */ opacity: 0; /* Force GPU layer so mobile browsers composite on first paint, not on first scroll. Without this, some mobile browsers defer rendering of fixed + clip-path elements until a repaint is triggered. */ will-change: opacity; /* View Transitions API morph target — must match .pap-dialog */ view-transition-name: papelito; } /* Subtle depth via drop-shadow (box-shadow doesn't render outside clip-path) */ [data-theme="light"] .pap-tab { filter: drop-shadow(-2px -2px 6px rgba(0, 0, 0, 0.10)); } [data-theme="dark"] .pap-tab { filter: drop-shadow(-2px -2px 8px rgba(0, 0, 0, 0.35)); } .pap-tab-ribbon { position: absolute; top: 62%; left: 62%; transform: translate(-50%, -50%) rotate(-45deg); color: var(--text-on-accent); font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; font-weight: 800; font-style: italic; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; line-height: 1; white-space: nowrap; pointer-events: none; } .pap-tab-close { position: absolute; bottom: 6px; right: 6px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; border-radius: 50%; color: var(--text-on-accent); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0.6; transition: opacity 180ms ease-out; } .pap-tab-close:hover { opacity: 1; } /* Entry — subtle fade in, fires once after 1500ms grace */ .pap-tab.pap-tab--ready { transition: opacity 400ms cubic-bezier(0.2, 0, 0, 1); opacity: 1; } /* Desktop hover — brightness lift on the whole triangle */ @media (hover: hover) { .pap-tab.pap-tab--ready:hover { background: var(--accent-bright); } } /* Active (click) — quick scale pulse */ .pap-tab:active { transform: scale(0.96); transition: transform 80ms ease-out; } /* Focus-visible — keyboard nav (WCAG 2.4.11) */ .pap-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Reduced motion: opacity only, no transform effects */ @media (prefers-reduced-motion: reduce) { .pap-tab, .pap-tab.pap-tab--ready, .pap-tab:active { transition: opacity 120ms linear; transform: none; } } /* Mobile: smaller triangle so it doesn't dominate the viewport */ @media (max-width: 640px) { .pap-tab { width: 110px; height: 110px; } .pap-tab-ribbon { font-size: 13px; } .pap-tab-close { display: none; } /* Product-detail mobile: hide papelito to protect the sticky Buy CTA. * RC2 §6 Option (a). */ body.pap-hide-mobile-product .pap-tab { display: none; } } /* ============================================================ * 2. The native * ============================================================ */ dialog.pap-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 32px); max-width: 480px; max-height: min(100dvh, 640px); overflow-y: auto; margin: 0; padding: 32px 28px; padding-bottom: max(28px, env(safe-area-inset-bottom)); background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-faint); border-radius: 20px; box-shadow: var(--shadow-elevated); /* VT morph target — pairs with .pap-tab */ view-transition-name: papelito; } /* Native ::backdrop — same in body but tinted by theme */ dialog.pap-dialog::backdrop { background: rgba(15, 23, 42, 0.32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="dark"] dialog.pap-dialog::backdrop { background: rgba(0, 0, 0, 0.5); } /* Mobile bottom-sheet — anchor to the bottom edge, big top radius */ @media (max-width: 640px) { dialog.pap-dialog { top: auto; left: 0; right: 0; bottom: 0; transform: none; width: 100%; max-width: none; max-height: 85vh; max-height: 85dvh; padding: 24px 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; border-bottom: 0; } } /* Reduced motion: skip the ::backdrop blur (paint perf + motion vector) */ @media (prefers-reduced-motion: reduce) { dialog.pap-dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Modal × button (top-right) */ .pap-dialog-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; border-radius: 50%; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color 180ms ease-out, color 180ms ease-out; } .pap-dialog-close:hover, .pap-dialog-close:focus-visible { background: var(--border-faint); color: var(--text-primary); } .pap-dialog-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ============================================================ * 3. Modal body — eyebrow / headline / subhead / form / policy * ============================================================ */ .pap-eyebrow { margin: 0 0 8px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .pap-headline { margin: 0 0 12px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-primary); } .pap-subhead { margin: 0 0 24px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--text-body); } .pap-form { margin: 0 0 16px; } .pap-input { display: block; width: 100%; height: 48px; padding: 0 16px; margin: 0 0 16px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px; /* iOS: 16px prevents auto-zoom on focus */ font-weight: 400; color: var(--text-primary); background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 12px; transition: border-color 180ms ease-out, box-shadow 180ms ease-out; } .pap-input::placeholder { color: var(--text-muted); opacity: 1; } .pap-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .pap-input.pap-has-error { border-color: var(--danger); } /* Coupon pill — same 8-char gradient-blur pattern as Page 1 (G22 reuse) */ .pap-coupon { display: flex; align-items: center; justify-content: center; margin: 0 0 16px; padding: 14px 18px; background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 12px; } .pap-coupon-code { display: inline-flex; align-items: baseline; font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 18px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-primary); font-variant-numeric: tabular-nums; } .pap-coupon-prefix { color: var(--accent-on-light); /* G27 — gold-as-text */ } [data-theme="dark"] .pap-coupon-prefix { color: var(--accent); /* dark mode: same hex but token semantics correct */ } .pap-coupon-suffix { display: inline-block; margin-left: 2px; color: var(--text-primary); } .pap-coupon-suffix-char { display: inline-block; transform: translateZ(0); /* hint the GPU; per-char blur stays buttery */ } /* Per-character blur gradient — G22, light-mode values */ [data-theme="light"] .pap-coupon-suffix-char:nth-child(1) { filter: blur(2px); opacity: 0.65; } [data-theme="light"] .pap-coupon-suffix-char:nth-child(2) { filter: blur(3px); opacity: 0.58; } [data-theme="light"] .pap-coupon-suffix-char:nth-child(3) { filter: blur(5px); opacity: 0.50; } [data-theme="light"] .pap-coupon-suffix-char:nth-child(4) { filter: blur(7px); opacity: 0.42; } [data-theme="light"] .pap-coupon-suffix-char:nth-child(5) { filter: blur(10px); opacity: 0.34; } [data-theme="light"] .pap-coupon-suffix-char:nth-child(6) { filter: blur(13px); opacity: 0.26; } [data-theme="light"] .pap-coupon-suffix-char:nth-child(7) { filter: blur(16px); opacity: 0.18; } [data-theme="light"] .pap-coupon-suffix-char:nth-child(8) { filter: blur(19px); opacity: 0.12; } /* Dark-mode values — bumped per S3 finding (G22): dark needs slightly less blur, slightly higher opacity floor than light. */ [data-theme="dark"] .pap-coupon-suffix-char:nth-child(1) { filter: blur(1.5px); opacity: 0.78; } [data-theme="dark"] .pap-coupon-suffix-char:nth-child(2) { filter: blur(2.5px); opacity: 0.70; } [data-theme="dark"] .pap-coupon-suffix-char:nth-child(3) { filter: blur(4px); opacity: 0.62; } [data-theme="dark"] .pap-coupon-suffix-char:nth-child(4) { filter: blur(6px); opacity: 0.54; } [data-theme="dark"] .pap-coupon-suffix-char:nth-child(5) { filter: blur(8px); opacity: 0.46; } [data-theme="dark"] .pap-coupon-suffix-char:nth-child(6) { filter: blur(11px); opacity: 0.38; } [data-theme="dark"] .pap-coupon-suffix-char:nth-child(7) { filter: blur(14px); opacity: 0.30; } [data-theme="dark"] .pap-coupon-suffix-char:nth-child(8) { filter: blur(16px); opacity: 0.22; } .pap-coupon-suffix.pap-mutating .pap-coupon-suffix-char { transition: none; } /* Unlock CTA */ .pap-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 24px; margin: 0 0 8px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.005em; color: var(--text-on-accent); /* G29 — black-on-gold luxury */ background: var(--accent); border: 1px solid var(--accent); border-radius: 12px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 120ms ease-out, background-color 180ms ease-out; } @media (hover: hover) { .pap-cta:hover { background: var(--accent-bright); border-color: var(--accent-bright); } } .pap-cta:active { transform: scale(0.98); } .pap-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pap-cta[disabled], .pap-cta.pap-loading { opacity: 0.7; cursor: progress; } .pap-cta-spinner { display: none; width: 16px; height: 16px; border: 2px solid var(--text-on-accent); border-top-color: transparent; border-radius: 50%; animation: pap-spin 800ms linear infinite; } .pap-cta.pap-loading .pap-cta-spinner { display: inline-block; } .pap-cta.pap-loading .pap-cta-text { opacity: 0.6; } @keyframes pap-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pap-cta-spinner { animation: none; } } .pap-error { min-height: 20px; margin: 4px 0 0; font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500; color: var(--danger); } .pap-error:empty { min-height: 0; } .pap-policy { margin: 16px 0 8px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500; color: var(--text-body); text-align: center; } .pap-disclosure { margin: 0; font-family: 'DM Sans', system-ui, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--text-muted); text-align: center; } /* Mobile content tightening — keeps the bottom-sheet from overflowing on * small viewports. Desktop spacing is generous (32px padding, 28px headline, * 48px inputs); mobile trims these proportionally. */ @media (max-width: 640px) { .pap-headline { font-size: 22px; margin-bottom: 8px; } .pap-subhead { font-size: 14px; margin-bottom: 16px; } .pap-input { height: 44px; margin-bottom: 12px; } .pap-coupon { padding: 10px 14px; margin-bottom: 12px; } .pap-coupon-code { font-size: 16px; } .pap-cta { min-height: 44px; } .pap-policy { margin: 12px 0 4px; } } /* Visually-hidden helper (replicates Bootstrap's class for the email