/* ARIA film surface — shared material layer for every product screen. */ :root { --film-black: #121010; --film-charcoal: #1d191a; --film-red: #8c0a0b; --font-editorial: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; } html body { background-color: var(--film-charcoal) !important; background-image: radial-gradient(90rem 48rem at -18% -12%, rgba(121, 43, 62, .34), transparent 48%), radial-gradient(70rem 42rem at 114% 16%, rgba(60, 91, 86, .16), transparent 48%), radial-gradient(42rem 24rem at 53% 112%, rgba(140, 10, 11, .18), transparent 52%), linear-gradient(132deg, #161314 0%, #221b1d 48%, #161617 100%) !important; background-attachment: fixed !important; } html[data-theme="dark"] body { color: #eee8e2; } /* The studio's film material must not force dark mode onto the light theme. Before this rule, the shared surface painted a charcoal canvas while the light theme correctly supplied dark ink, making every field look disabled on iPhone. Keep the same soft, photographic material but lift the base so the light tokens have their intended contrast. */ html:not([data-theme="dark"]) body { color: var(--ink) !important; background-color: var(--bg) !important; background-image: radial-gradient(72rem 38rem at -12% -16%, rgba(151, 72, 80, .13), transparent 52%), radial-gradient(58rem 34rem at 112% 12%, rgba(65, 104, 99, .10), transparent 50%), linear-gradient(132deg, #ebe9e4 0%, #dfd9d5 50%, #e9e7e1 100%) !important; } html body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .18; background-image: radial-gradient(rgba(255,255,255,.13) .45px, transparent .7px), radial-gradient(rgba(0,0,0,.38) .5px, transparent .75px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px; mix-blend-mode: soft-light; } .screen, .page, .page-scroll, .editor-main { position: relative; z-index: 1; } .page, .page-scroll { background: transparent !important; } /* Editorial type is an accent for hierarchy; fields, data and screenplay text retain their reliable UI faces. */ h1, h2, h3, .panel-head h1, .title-block h1, .proj-name, .hero .cell.lead .h-val, .exec-cell.lead .x-val, #title { font-family: var(--font-editorial) !important; font-weight: 700 !important; letter-spacing: -.022em !important; text-transform: none !important; } .brand-header { background: rgba(18, 16, 16, .82) !important; border-bottom-color: rgba(222, 189, 181, .18) !important; backdrop-filter: blur(16px) saturate(118%); -webkit-backdrop-filter: blur(16px) saturate(118%); } .brand-header::after { display: block !important; height: 1px !important; bottom: -1px !important; opacity: .72; background: linear-gradient(90deg, transparent 0%, rgba(205,83,87,.72) 18%, rgba(197,189,239,.38) 50%, rgba(103,179,158,.34) 78%, transparent 100%) !important; } .brand-header .brand-lockup { position: relative; } .brand-header .brand-lockup::before { content: ""; position: absolute; left: -14px; top: 50%; width: 62px; height: 62px; transform: translateY(-50%) scale(.76); border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(236,180,192,.68) 0%, rgba(175,69,80,.36) 26%, rgba(106,169,160,.16) 46%, transparent 70%); filter: blur(3px); animation: film-exposure 1.25s cubic-bezier(.2,.75,.24,1) both; } .brand-header .brand-lockup img, .panel-head img { position: relative; z-index: 1; animation: film-mark 1.1s cubic-bezier(.17,.84,.31,1) both; transform-origin: center; } .card, .proj, .join-strip, .page-card, .exec-summary, .hero, .terms-modal, .dropzone, .foot-strip { border-radius: 18px !important; border-color: rgba(224, 202, 194, .22) !important; background-color: rgba(28, 24, 25, .80) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 48px rgba(0,0,0,.19) !important; } html:not([data-theme="dark"]) .card, html:not([data-theme="dark"]) .proj, html:not([data-theme="dark"]) .join-strip, html:not([data-theme="dark"]) .page-card, html:not([data-theme="dark"]) .exec-summary, html:not([data-theme="dark"]) .dropzone, html:not([data-theme="dark"]) .foot-strip { background-color: rgba(214, 198, 199, .86) !important; border-color: rgba(82, 47, 49, .18) !important; } .card, .proj, .join-strip, .page-card, .exec-summary, .hero, .dropzone { position: relative; overflow: hidden; } .card::before, .proj::before, .join-strip::before, .page-card::before, .exec-summary::before, .hero::before, .dropzone::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; background: linear-gradient(112deg, transparent 0 42%, rgba(230,184,192,.1) 47%, transparent 53%), radial-gradient(35rem 14rem at 10% 0%, rgba(197,106,118,.11), transparent 72%); } .card > *, .proj > *, .join-strip > *, .page-card > *, .exec-summary > *, .hero > *, .dropzone > * { position: relative; z-index: 1; } button, .cta, .hdr-btn.primary { border-radius: 999px !important; background-color: var(--film-red) !important; background-image: linear-gradient(110deg, rgba(255,255,255,.11), transparent 35%, rgba(255,203,210,.08)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 8px 18px rgba(54, 5, 8, .24) !important; } button.ghost, .theme-btn, .hdr-btn:not(.primary), .el-btn, .sec-toggle { background: rgba(20, 18, 18, .18) !important; border-color: rgba(214, 187, 181, .28) !important; box-shadow: none !important; } html:not([data-theme="dark"]) button.ghost, html:not([data-theme="dark"]) .theme-btn, html:not([data-theme="dark"]) .el-btn, html:not([data-theme="dark"]) .sec-toggle { background: rgba(255,255,255,.36) !important; } input, select, textarea, .join-strip input { border-radius: 12px !important; background-color: rgba(19, 17, 18, .40) !important; border-color: rgba(220, 192, 185, .24) !important; } html:not([data-theme="dark"]) input, html:not([data-theme="dark"]) select, html:not([data-theme="dark"]) textarea, html:not([data-theme="dark"]) .join-strip input { background-color: rgba(255,255,255,.53) !important; } /* iOS can retain a dimmed text fill after a translucent field animation. Set both the standard colour and WebKit's fill explicitly so typed text is as legible as the rest of the workspace. */ body.studio input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), body.studio select, body.studio textarea { color: var(--ink) !important; -webkit-text-fill-color: var(--ink); caret-color: var(--red); opacity: 1 !important; } body.studio select option { color: #191817; background: #f0ece6; } input:focus, select:focus, textarea:focus { border-color: rgba(214, 105, 112, .95) !important; box-shadow: 0 0 0 3px rgba(180, 52, 65, .13), inset 0 1px 0 rgba(218,199,255,.16) !important; } .dropzone { border-style: dashed !important; } .dropzone:hover, .dropzone.drag { border-color: rgba(223, 132, 142, .92) !important; background-color: rgba(104, 22, 33, .28) !important; } .skip-line .beta-tester { display: block; margin-bottom: 5px; font: 700 9px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(224, 182, 186, .72); } .skip-line button { color: #e9c3c6 !important; } .report-nav { background: rgba(28, 24, 25, .72) !important; border-bottom-color: rgba(224, 202, 194, .18) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* A tangible transition between upload and the generated plan. It answers the only question that matters during a longer PDF read: ARIA is working. */ .analysis-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; color: #f0e9e5; background: rgba(14, 12, 13, .94); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); touch-action: none; } .analysis-overlay[hidden] { display: none; } .analysis-stage { width: min(390px, 100%); text-align: center; padding: 38px 30px 32px; border: 1px solid rgba(237, 193, 199, .25); border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 50% 4%, rgba(200, 93, 111, .28), transparent 38%), rgba(30, 24, 26, .92); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 28px 90px rgba(0,0,0,.45); } .analysis-mark { width: 86px; height: 86px; margin: 0 auto 23px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(244, 189, 204, .7) 0%, rgba(169, 60, 82, .26) 42%, rgba(79, 144, 139, .16) 61%, transparent 72%); animation: analysis-exposure 2.4s ease-in-out infinite; } .analysis-mark img { width: 48px; height: 48px; object-fit: contain; animation: analysis-mark 1.4s ease-in-out infinite alternate; } .analysis-kicker { margin: 0 0 9px; color: rgba(239, 205, 208, .72); font: 700 9px/1 var(--font-mono); letter-spacing: .17em; text-transform: uppercase; } .analysis-stage h2 { margin: 0; color: #f5e8e3; font: 700 29px/1.06 var(--font-editorial); letter-spacing: -.02em; } .analysis-detail { min-height: 2.8em; margin: 12px auto 22px; max-width: 280px; color: rgba(235, 226, 222, .73); font-size: 13px; line-height: 1.45; } .analysis-track { height: 2px; overflow: hidden; background: rgba(255,255,255,.14); } .analysis-track span { display: block; width: 38%; height: 100%; background: linear-gradient(90deg, #8c0a0b, #e9bbc7, #78a99f, #8c0a0b); animation: analysis-scan 1.4s cubic-bezier(.3,.7,.4,1) infinite; } @keyframes analysis-exposure { 0%,100% { transform: scale(.9); filter: saturate(.8); } 50% { transform: scale(1.15); filter: saturate(1.2); } } @keyframes analysis-mark { from { transform: scale(.92) rotate(-2deg); } to { transform: scale(1.04) rotate(2deg); } } @keyframes analysis-scan { from { transform: translateX(-115%); } to { transform: translateX(315%); } } /* The studio pages stay open and continuous. Texture belongs to the canvas, never to a grid of artificial cards. */ body.studio .card { background: transparent !important; border: 0 !important; border-top: 1px solid rgba(224, 202, 194, .25) !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } body.studio .card::before { display: none; } body.studio .card > * { position: relative; z-index: 1; } body.studio input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), body.studio select, body.studio textarea { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(224, 202, 194, .29) !important; border-radius: 0 !important; box-shadow: none !important; } html:not([data-theme="dark"]) body.studio input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), html:not([data-theme="dark"]) body.studio select, html:not([data-theme="dark"]) body.studio textarea { color: #1a1917 !important; -webkit-text-fill-color: #1a1917 !important; background: rgba(255,255,255,.30) !important; border-bottom-color: rgba(57, 48, 47, .48) !important; } html:not([data-theme="dark"]) body.studio input::placeholder, html:not([data-theme="dark"]) body.studio textarea::placeholder { color: #5c574f !important; -webkit-text-fill-color: #5c574f !important; opacity: 1 !important; } @keyframes film-exposure { 0% { opacity: 0; transform: translateY(-50%) scale(.48); } 35% { opacity: .85; } 100% { opacity: 0; transform: translateY(-50%) scale(1.2); } } @keyframes film-mark { 0% { opacity: 0; transform: scale(.76) rotate(-5deg); filter: saturate(.7) brightness(1.7); } 55% { opacity: 1; transform: scale(1.045) rotate(1deg); filter: saturate(1.17) brightness(1.08); } 100% { opacity: 1; transform: scale(1) rotate(0); filter: none; } } @media (prefers-reduced-motion: reduce) { .brand-header .brand-lockup::before, .brand-header .brand-lockup img, .panel-head img, .analysis-mark, .analysis-mark img, .analysis-track span { animation: none !important; } } @media (max-width: 640px) { h1, .panel-head h1, .title-block h1 { letter-spacing: -.015em !important; } .card, .proj, .join-strip, .page-card, .exec-summary, .hero, .dropzone { border-radius: 14px !important; } .analysis-overlay { padding: 18px; } .analysis-stage { width: min(340px, 100%); padding: 28px 24px 25px; border-radius: 22px; } .analysis-mark { width: 70px; height: 70px; margin-bottom: 17px; } .analysis-mark img { width: 40px; height: 40px; } .analysis-stage h2 { font-size: 25px; } } /* --------------------------------------------------------------------------- Light-mode auth surface (login / signup) — 2026-08-08. login.html was authored for an always-dark cinematic panel, so its headings, labels, inputs and secondary copy hardcode --paper-brand (#EFEDE8, light ink). When the light theme made the canvas light, that ink collapsed to ~1.1:1 contrast on the FIRST screen every tester sees: typed credentials rendered white-on-white and "Welcome back" was invisible. The earlier workbench correction was scoped to `body.studio` and never reached here. Dark mode is deliberately untouched — every rule below is gated on html:not([data-theme="dark"]) and on body.auth, so the workbench, projects, platform and editor surfaces are unaffected. --------------------------------------------------------------------------- */ html:not([data-theme="dark"]) body.auth { color: var(--ink); } /* Headings and the product line under the emblem */ html:not([data-theme="dark"]) body.auth h1, html:not([data-theme="dark"]) body.auth .panel-head h1, html:not([data-theme="dark"]) body.auth #heading, html:not([data-theme="dark"]) body.auth #welcomeHeading { color: var(--ink) !important; } /* Secondary copy: sub-headings, switch prompt, terms row, dropzone caption */ html:not([data-theme="dark"]) body.auth .panel-head .sub, html:not([data-theme="dark"]) body.auth .switch-line, html:not([data-theme="dark"]) body.auth .terms-row, html:not([data-theme="dark"]) body.auth .terms-row span, html:not([data-theme="dark"]) body.auth .dz-sub, html:not([data-theme="dark"]) body.auth label { color: var(--muted) !important; } /* Typed credentials — the actual defect: white text in a near-white field. -webkit-text-fill-color is required or iOS Safari keeps the inherited ink. */ html:not([data-theme="dark"]) body.auth input:not([type="checkbox"]):not([type="radio"]), html:not([data-theme="dark"]) body.auth select, html:not([data-theme="dark"]) body.auth textarea { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; background: rgba(255, 255, 255, .58) !important; border-color: rgba(57, 48, 47, .38) !important; } html:not([data-theme="dark"]) body.auth input::placeholder, html:not([data-theme="dark"]) body.auth textarea::placeholder { color: var(--muted) !important; -webkit-text-fill-color: var(--muted) !important; opacity: 1 !important; } /* iOS autofill repaints the field with its own near-white wash. */ html:not([data-theme="dark"]) body.auth input:-webkit-autofill { -webkit-text-fill-color: var(--ink) !important; -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .58) inset !important; } /* Dropzone headline keeps the strong ink so a chosen filename stays readable */ html:not([data-theme="dark"]) body.auth .dropzone .dz-main { color: var(--ink) !important; } /* Guest CTA — the beta path. The "Beta tester" kicker had all but vanished. */ html:not([data-theme="dark"]) body.auth .beta-tester { color: var(--muted) !important; } /* The inline text links on this page (guest CTA, Sign up, Log in/Sign up switch, Forgot?, Terms) are