/* DISCLAIMER MODAL — shared styles from landing-components.css, SCOPED under .disclaimer-overlay so it only styles the modal (no bare selector bleed). Loaded on /try; the landing page keeps its own copy (unchanged). */ :root { --disclaimer-primary-start: #667eea; --disclaimer-primary-end: #764ba2; --disclaimer-warning: #f59e0b; --disclaimer-danger: #ef4444; --disclaimer-info: #3b82f6; --disclaimer-dark-bg: #151e2b; --disclaimer-dark-surface: #1c2a38; --disclaimer-dark-surface-light: #243345; --disclaimer-text-primary: #ffffff; --disclaimer-text-secondary: #a0a0b8; --disclaimer-border: rgba(255, 255, 255, 0.1); } /* Hidden on page load (landing.css also defines this, but it isn't loaded on /try — keep it here so the shared modal never flashes visible on either page). */ .disclaimer-overlay.disclaimer-initial-state { display: none; opacity: 0; } .disclaimer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(16, 28, 42, 0.95) 0%, rgba(22, 36, 52, 0.95) 50%, rgba(16, 28, 42, 0.95) 100%); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); z-index: var(--z-modal-backdrop, 2000); display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden; /* W4.0 · TYPOGRAPHY. This file never set a font-family, and the modal is a DIRECT CHILD OF on both surfaces it renders on — so it inherited whatever `body` had. The landing applies --font-ui per-SECTION rather than on `body`, and /try's `body` rule names Inter, so the modal was painting in the UA default serif (Times New Roman) on `/` while every act around it was General Sans. One declaration here fixes both, and inherits down through the whole subtree (header, cards, checkbox labels, buttons). Scoped to the overlay ON PURPOSE — setting this on `body` would flatten the landing's deliberate per-section type assignment. The fallback chain is spelled out rather than relying on --font-ui alone: /try (workspace.html) does NOT load site-tokens.css, so the token is undefined there and only the literal chain resolves. It is the same chain site-tokens.css defines, so both surfaces land on General Sans. */ font-family: var(--font-ui, 'General Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif); } /* Form controls do NOT inherit font-family — the UA stylesheet hard-sets `font: 400 13.33px Arial` on button/input/select/textarea. Without this the Accept and Decline CTAs stayed Arial while the copy above them was General Sans. Verified live: `.disclaimer-overlay button` computed "Arial" until this rule landed. */ .disclaimer-overlay button, .disclaimer-overlay input, .disclaimer-overlay select, .disclaimer-overlay textarea { font-family: inherit; } /* W6.6 · `@keyframes overlayFadeIn` removed. It was declared here and named by nothing: no `animation:` shorthand and no `animation-name` in this file, in any template, or anywhere else under static/ referenced it (verified by grep for the identifier across the whole tree — one hit, this declaration). The overlay's actual entrance is the opacity/visibility transition on `.disclaimer-overlay` further down. */ .disclaimer-overlay .disclaimer-modal { position: relative; background: var(--disclaimer-dark-surface); border-radius: 24px; max-width: 680px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 0 60px rgba(102, 126, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); border: 1px solid var(--disclaimer-border); } .disclaimer-overlay .modal-bg-pattern { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.03; background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.05) 35px, rgba(255,255,255,.05) 70px), repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255,255,255,.03) 35px, rgba(255,255,255,.03) 70px); pointer-events: none; } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes modalSlideOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(30px) scale(0.95); } } .disclaimer-overlay .disclaimer-header { position: relative; background: linear-gradient(135deg, var(--disclaimer-primary-start), var(--disclaimer-primary-end)); padding: 32px; overflow: hidden; flex-shrink: 0; } .disclaimer-overlay .header-glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); animation: glowRotate 20s linear infinite; } @keyframes glowRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .disclaimer-overlay .header-content { position: relative; display: flex; align-items: center; gap: 20px; } .disclaimer-overlay .disclaimer-icon-wrapper { position: relative; } .disclaimer-overlay .icon-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; animation: iconPulse 2s ease-in-out infinite; } @keyframes iconPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } 50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.3; } } .disclaimer-overlay .disclaimer-icon { position: relative; width: 56px; height: 56px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--disclaimer-text-primary); border: 1px solid rgba(255, 255, 255, 0.2); } .disclaimer-overlay .header-text { flex: 1; } .disclaimer-overlay .disclaimer-title { color: var(--disclaimer-text-primary); font-size: 1.75rem; font-weight: 700; margin: 0; letter-spacing: -0.5px; } .disclaimer-overlay .disclaimer-subtitle { color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; margin: 4px 0 0 0; } .disclaimer-overlay .disclaimer-content { padding: 32px; overflow-y: auto; flex: 1; min-height: 0; /* W5.1 — `scroll-behavior: smooth` was here and it SWALLOWED WHEEL TICKS. Chromium applies the property to user-initiated wheel scrolling too, and every new tick restarts the animation from the ANIMATION'S start offset rather than the current one, so a normal three-tick flick advanced the box by one tick's worth and then appeared to stop. Measured on the live page: three 120px ticks -> scrollTop 120 with `smooth`, scrollTop 326 (the box's maximum) with `auto`. This is the second half of the bug Kaus reported — `data-lenis-prevent` (W3.1) let the wheel event through, and this let it through to an animation that then threw most of it away. Nothing in this modal scrolls programmatically, so `auto` costs nothing. */ scroll-behavior: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.1) transparent; /* W3.1 — stop the scroll at this box's own ends instead of handing the remainder to the page behind the overlay (scroll chaining), which on the landing means the visitor silently loses their place in the film. */ overscroll-behavior: contain; } /* The scroll region is keyboard-focusable (tabindex=0 in the partial), so it needs a visible focus ring — but only for keyboard users, never on the click that merely puts the caret in it. */ .disclaimer-overlay .disclaimer-content:focus { outline: none; } .disclaimer-overlay .disclaimer-content:focus-visible { outline: 2px solid var(--disclaimer-info, #3b82f6); outline-offset: -3px; } .disclaimer-overlay .disclaimer-content::-webkit-scrollbar { width: 6px; } .disclaimer-overlay .disclaimer-content::-webkit-scrollbar-track { background: transparent; } .disclaimer-overlay .disclaimer-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; } .disclaimer-overlay .disclaimer-content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } .disclaimer-overlay .info-card { position: relative; background: var(--disclaimer-dark-surface-light); border-radius: 16px; margin-bottom: 20px; overflow: hidden; border: 1px solid var(--disclaimer-border); transition: transform var(--duration-normal, 300ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)), box-shadow var(--duration-normal, 300ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)); } .disclaimer-overlay .info-card:hover { transform: translateY(var(--hover-lift-sm, -2px)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } .disclaimer-overlay .card-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--disclaimer-info), var(--disclaimer-primary-end)); } .disclaimer-overlay .beta-card .card-accent { background: linear-gradient(90deg, var(--disclaimer-info), #06b6d4); } .disclaimer-overlay .warning-card .card-accent { background: linear-gradient(90deg, var(--disclaimer-warning), var(--disclaimer-danger)); } .disclaimer-overlay .card-content { padding: 24px; display: flex; gap: 16px; } .disclaimer-overlay .card-icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--disclaimer-primary-start), var(--disclaimer-primary-end)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--disclaimer-text-primary); flex-shrink: 0; } .disclaimer-overlay .warning-card .card-icon { background: linear-gradient(135deg, var(--disclaimer-warning), var(--disclaimer-danger)); } .disclaimer-overlay .card-text h3 { color: var(--disclaimer-text-primary); font-size: 1.1rem; font-weight: 600; margin: 0 0 8px 0; } .disclaimer-overlay .card-text p { color: var(--disclaimer-text-secondary); font-size: 0.95rem; line-height: 1.6; margin: 0; } .disclaimer-overlay .acknowledgment-section { margin-top: 28px; padding: 28px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%); border-radius: 16px; border: 1px solid rgba(102, 126, 234, 0.2); } .disclaimer-overlay .section-header { margin-bottom: 24px; text-align: center; } .disclaimer-overlay .section-header h3 { color: var(--disclaimer-text-primary); font-size: 1.2rem; font-weight: 600; margin: 0 0 6px 0; } .disclaimer-overlay .section-header p { color: var(--disclaimer-text-secondary); font-size: 0.9rem; margin: 0; text-align: center; } .disclaimer-overlay .checkbox-group { display: flex; flex-direction: column; gap: 16px; } .disclaimer-overlay .checkbox-item { position: relative; display: flex; align-items: flex-start; cursor: pointer; padding: 12px; padding-left: 9px; border-left: 3px solid transparent; border-radius: 12px; transition: background-color 0.2s ease, border-color 0.2s ease; user-select: none; } .disclaimer-overlay .checkbox-item:hover { background: rgba(102, 126, 234, 0.05); } .disclaimer-overlay .disclaimer-checkbox { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; cursor: pointer; } .disclaimer-overlay .checkbox-custom { position: relative; width: 22px; height: 22px; min-width: 22px; background: var(--disclaimer-dark-bg); border: 2px solid rgba(102, 126, 234, 0.4); border-radius: 6px; margin-right: 14px; margin-top: 1px; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .disclaimer-overlay .checkbox-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 10px; stroke: var(--disclaimer-text-primary); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16px; stroke-dashoffset: 16px; transition: stroke-dashoffset 0.3s ease; } .disclaimer-overlay .disclaimer-checkbox:checked ~ .checkbox-custom { background: linear-gradient(135deg, var(--disclaimer-primary-start), var(--disclaimer-primary-end)); border-color: transparent; } .disclaimer-overlay .disclaimer-checkbox:focus-visible ~ .checkbox-custom { outline: 2px solid var(--disclaimer-primary-start, #667eea); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.25); } .disclaimer-overlay .disclaimer-checkbox:checked ~ .checkbox-custom .checkbox-icon { stroke-dashoffset: 0; } .disclaimer-overlay .checkbox-label { color: var(--disclaimer-text-secondary); font-size: 0.95rem; line-height: 1.5; flex: 1; } .disclaimer-overlay .inline-link { color: var(--disclaimer-primary-start); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-bottom-color 0.2s ease; } .disclaimer-overlay .inline-link:hover { color: var(--disclaimer-primary-end); border-bottom-color: var(--disclaimer-primary-end); } .disclaimer-overlay .checkbox-item.checked { background: rgba(102, 126, 234, 0.08); border-left-color: rgba(102, 126, 234, 0.5); } .disclaimer-overlay .risk-disclosure { margin-top: 20px; padding: 16px; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 12px; display: flex; align-items: flex-start; gap: 12px; } .disclaimer-overlay .disclosure-icon { color: var(--disclaimer-danger); font-size: 18px; margin-top: 2px; } .disclaimer-overlay .risk-disclosure p { color: var(--disclaimer-text-secondary); font-size: 0.9rem; line-height: 1.5; margin: 0; flex: 1; } .disclaimer-overlay .disclaimer-footer { padding: 24px 32px; background: var(--disclaimer-dark-bg); border-top: 1px solid var(--disclaimer-border); display: flex; gap: 12px; justify-content: flex-end; flex-shrink: 0; } .disclaimer-overlay .action-btn { position: relative; padding: 12px 24px; border-radius: 12px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; border: none; display: flex; align-items: center; gap: 8px; overflow: hidden; } .disclaimer-overlay .btn-secondary { background: var(--disclaimer-dark-surface-light); color: var(--disclaimer-text-secondary); border: 1px solid var(--disclaimer-border); } .disclaimer-overlay .btn-secondary:hover { background: rgba(255, 255, 255, 0.05); color: var(--disclaimer-text-primary); transform: translateY(-2px); } .disclaimer-overlay .btn-primary { background: linear-gradient(135deg, var(--disclaimer-primary-start), var(--disclaimer-primary-end)); color: var(--disclaimer-text-primary); position: relative; } .disclaimer-overlay .btn-primary:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4); } .disclaimer-overlay .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; } .disclaimer-overlay .btn-shimmer { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .disclaimer-overlay .btn-primary:not(:disabled):hover .btn-shimmer { left: 100%; } .disclaimer-overlay .action-btn.ready { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); } 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); } } .disclaimer-overlay .checkbox-item.validation-error { background: rgba(239, 68, 68, 0.1); outline: 1px solid rgba(239, 68, 68, 0.3); outline-offset: -1px; border-radius: 12px; } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } } @media (max-width: 767px) { .disclaimer-overlay .disclaimer-modal { max-width: calc(100vw - 32px); max-height: calc(100vh - 40px); margin: 0 16px; display: flex; flex-direction: column; } .disclaimer-overlay .disclaimer-header { padding: 24px; flex-shrink: 0; } .disclaimer-overlay .header-content { flex-direction: column; text-align: center; } .disclaimer-overlay .disclaimer-title { font-size: 1.5rem; } .disclaimer-overlay .disclaimer-content { padding: 24px; flex: 1; min-height: 0; overflow-y: auto; } .disclaimer-overlay .card-content { padding: 20px; } .disclaimer-overlay .acknowledgment-section { padding: 20px; } .disclaimer-overlay .checkbox-item { padding: 10px; padding-left: 7px; } .disclaimer-overlay .disclaimer-footer { flex-direction: column; padding: 20px; flex-shrink: 0; } .disclaimer-overlay .action-btn { width: 100%; justify-content: center; } } @media (max-width: 480px) { .disclaimer-overlay { padding: 12px; } .disclaimer-overlay .disclaimer-modal { max-width: calc(100vw - 24px); border-radius: 16px; } .disclaimer-overlay .disclaimer-title { font-size: 1.25rem; } .disclaimer-overlay .card-text h3 { font-size: 1rem; } .disclaimer-overlay .checkbox-label { font-size: 0.9rem; } } @media (max-width: 480px) { .disclaimer-overlay { padding: 12px; } .disclaimer-overlay .disclaimer-modal { max-width: calc(100vw - 24px); border-radius: 16px; } .disclaimer-overlay .disclaimer-header { padding: 18px 20px 16px; gap: 12px; } .disclaimer-overlay .disclaimer-icon { width: 36px; height: 36px; font-size: 18px; } .disclaimer-overlay .disclaimer-title { font-size: 1.2rem; } .disclaimer-overlay .disclaimer-content { padding: 20px; } .disclaimer-overlay .card-text h3 { font-size: 1rem; } .disclaimer-overlay .checkbox-label { font-size: 0.9rem; } } @media (prefers-reduced-motion: reduce) { .disclaimer-overlay .disclaimer-content { scroll-behavior: auto; } } /* ============================================================================= VALIDATION TOASTS · .disclaimer-toast ============================================================================= PROVENANCE: recovered verbatim (2026-07-28) from the deleted static/css/landing.css @ git HEAD, lines 9255-9285 ("Toast Notification Styles"). landing/landing.js's showToast() builds these nodes on every "Please accept all terms to continue" path; when landing.css was deleted in the Phase-C chrome unification the rules went with it and the toast rendered as unstyled text in the document flow. They live here, next to the modal they belong to, so the pair can never be separated again. Additive on /try, which loads this file but never calls showToast(). ONE deliberate change from the recovered block: z-index. The original sat at var(--z-toast, 1040) — under the disclaimer overlay's var(--z-modal-backdrop, 2000), so a toast raised BY the modal would have been painted behind it. It is now pinned above that backdrop. ============================================================================= */ .disclaimer-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); color: white; padding: 16px 24px; border-radius: 12px; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); z-index: calc(var(--z-modal-backdrop, 2000) + 40); /* >= 2040, above the overlay */ transition: transform 0.3s ease-out; font-size: 14px; font-weight: 500; } .toast-error { background: #ef4444; } .toast-info { background: #3b82f6; } .disclaimer-toast.show { transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce) { .disclaimer-toast { transition: none; } }