/* ═══════════════════════════════════════════════════════════════ PANELOGUE — MAIN COMPONENT STYLES ═══════════════════════════════════════════════════════════════ */ @keyframes plgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes plgPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @keyframes plgFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* overflow-x on alone doesn't catch horizontal bleed when is the scroll container — decorative glows (.hero__bg-glow, .feature-row__glow) extend a few px past the viewport edge. Clip at the root; `clip` (not `hidden`) avoids creating a scroll container, so the sticky nav still works. */ html { overflow-x: clip; } body { font-family: var(--font-head); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } ::selection { background: rgba(176, 57, 44, 0.16); } /* Consistent, visible keyboard-focus ring — a box-shadow (rather than the default outline) so it reads cleanly on pill-shaped buttons and rounded inputs instead of relying on inconsistent browser defaults. */ a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(176, 57, 44, 0.35); } .nav__link:focus-visible { border-radius: 4px; } .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--side-pad); } /* Visually hidden but readable by screen readers — for labels that would be visually redundant next to a placeholder-carrying input. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-serif { font-family: var(--font-body); } .text-accent { color: var(--red); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; } .eyebrow--section { margin-bottom: 16px; } /* Eyebrow labels + icons consistent across light and dark sections — both use brand orange (#D9633A) to match hand-drawn callouts and sketch notes. */ .arc-section .eyebrow, .feature-row-dark .eyebrow { color: var(--orange); } .eyebrow__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex-shrink: 0; } .eyebrow__icon { flex-shrink: 0; stroke: var(--orange); } .handwrite-note { font-family: var(--font-note); font-size: 23px; font-weight: 600; color: #D9633A; margin-top: 14px; display: inline-flex; align-items: center; gap: 9px; } /* ─── NAV ─────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(250, 247, 242, 0.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--rule2); } .nav__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--side-pad); height: 68px; display: flex; align-items: center; justify-content: space-between; } .nav__logo { display: flex; align-items: center; gap: 11px; } .nav__logo img { height: 32px; width: 32px; border-radius: 7px; box-shadow: var(--shadow-sm); } .nav__wordmark { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; } .nav__links { display: flex; align-items: center; gap: 34px; } .nav__link { font-size: 14.5px; font-weight: 500; color: var(--ink2); letter-spacing: -0.01em; transition: color 0.18s; } .nav__link:hover { color: var(--ink); } .nav__cta { display: inline-flex; align-items: center; gap: 7px; background: var(--cta); color: var(--cta-text); padding: 10px 20px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; transition: background 0.18s, transform 0.12s; } .nav__cta:hover { background: var(--cta-hover); transform: translateY(-1px); } /* ─── HERO ────────────────────────────────────────────────────── */ .hero { position: relative; z-index: 1; padding: 54px var(--side-pad) 56px; overflow: hidden; } .hero__grid { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: 28px; align-items: center; } .hero__copy { position: relative; padding: 6px 0 24px; } .hero__kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-text); margin-bottom: 22px; } .hero__kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: plgPulse 2.4s ease-in-out infinite; } .hero__title { font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: -0.036em; margin: 0 0 18px; } /* Word-by-word settle-in on load. Progressive enhancement: the base state is fully visible with no JS involved, so a reduced-motion preference (or CSS failing to load) just shows static text, never invisible text. */ @media (prefers-reduced-motion: no-preference) { .hero__title .word { display: inline-block; opacity: 0; transform: translateY(4px); animation: plgWordIn 0.55s cubic-bezier(0.16, 0.8, 0.3, 1) both; } } @keyframes plgWordIn { to { opacity: 1; transform: translateY(0); } } .hero__sub { font-family: var(--font-body); font-size: 17.5px; line-height: 1.58; color: var(--ink2); margin: 0 0 28px; max-width: 26em; } .hero__actions { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; } .hero__platforms { display: flex; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; } .hero__beta { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cta-text); background: var(--amber); padding: 5px 12px 5px 10px; border-radius: var(--radius-pill); } .hero__beta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cta-text); animation: plgPulse 2.4s ease-in-out infinite; } .hero__plat { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--ink2); } .hero__plat svg { width: 15px; height: 15px; fill: currentColor; } .hero__art { position: relative; } .hero__shot-wrap { position: relative; padding: 40px 24px 48px; } .hero__shot { position: relative; } .hero__shot-frame { position: relative; border-radius: var(--ui-radius); overflow: hidden; box-shadow: var(--shadow-float); animation: plgFloat 7s ease-in-out infinite; } .hero__shot-frame img { width: 100%; display: block; } .btn-primary { display: inline-flex; align-items: center; gap: 9px; background: var(--cta); color: var(--cta-text); font-size: 15.5px; font-weight: 600; padding: 14px 26px; border-radius: var(--radius-pill); letter-spacing: -0.01em; box-shadow: 0 6px 20px rgba(245, 158, 11, 0.30); transition: background 0.18s, transform 0.12s, box-shadow 0.18s; border: none; cursor: pointer; font-family: var(--font-head); } .btn-primary:hover { background: var(--cta-hover); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(245, 158, 11, 0.36); } .btn-secondary { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15.5px; font-weight: 600; padding: 14px 20px; border-radius: var(--radius-pill); border: 1px solid var(--rule); letter-spacing: -0.01em; transition: background 0.18s, border-color 0.18s; } .btn-secondary:hover { background: var(--paper2); border-color: var(--ink2); } /* ─── POSITIONING STRIP (dark) ─────────────────────────────────── Four plain items separated by hairline dividers rather than four identical bordered/shadowed/numbered cards — the repeated card template read as generic template scaffolding rather than a deliberate layout. */ .positioning { position: relative; z-index: 1; padding: 72px var(--side-pad); background: var(--charcoal); border-top: 1px solid var(--on-dark-rule); border-bottom: 1px solid var(--on-dark-rule); overflow: hidden; } .positioning__inner { max-width: var(--max-w); margin: 0 auto; } .positioning__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; } .prop-item { padding-left: 22px; border-left: 1px solid var(--on-dark-rule); } .prop-item:first-child { padding-left: 0; border-left: none; } .prop-item__icon { display: block; margin-bottom: 14px; transition: stroke 0.18s; } .prop-item:hover .prop-item__icon { stroke: var(--on-dark); } .prop-item__title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--on-dark); margin: 0 0 8px; } .prop-item__desc { font-size: 14.5px; line-height: 1.6; color: var(--on-dark-body); margin: 0; } /* Editor Review pulled into the dark band as a centered editorial block below the feature grid — one section instead of a second centered stack below. */ .positioning__grid { padding-bottom: 46px; border-bottom: 1px solid var(--on-dark-rule); } .positioning__spotlight { max-width: 640px; margin: 46px auto 0; text-align: center; } .positioning__spotlight .spotlight__eyebrow { justify-content: center; margin-bottom: 15px; color: var(--orange); } .positioning__spotlight .spotlight__title { color: var(--on-dark); font-size: 37px; margin: 0 0 13px; } .positioning__spotlight .spotlight__title .text-accent { color: var(--orange); } .positioning__spotlight .spotlight__text { color: var(--on-dark-body); margin: 0 auto 22px; max-width: 34em; } .positioning__spotlight .spotlight__link { color: var(--orange); border-bottom-color: rgba(217, 99, 58, 0.42); } .positioning__spotlight .spotlight__link:hover { border-bottom-color: var(--orange); } @media (max-width: 560px) { .positioning__spotlight .spotlight__title { font-size: 30px; } } /* ─── FEATURES ────────────────────────────────────────────────── */ .features { position: relative; z-index: 1; padding: 40px var(--side-pad) 0; background: var(--tint); } .features--cont { padding-top: 0; } .feature-row { display: grid; gap: 64px; align-items: center; padding: 72px 0; border-top: 1px solid var(--rule); grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } .feature-row--reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } /* Cast's screenshot is a tall, narrow portrait panel — giving it a wide media column just left dead air on both sides of the frame, so the column is sized to match the frame's own width instead. */ .feature-row--cast { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .feature-row--cast .feature-row__frame--narrow { max-width: 329px; } /* Page Map's and World Building's screenshots at ~25% larger than the standard reverse ratio (media column fraction 0.575 -> ~0.71). World Building is flush/borderless (no card chrome), so it can take a little more still. */ .feature-row--reverse.feature-row--pagemap { grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr); } /* The Map UI screenshot is cropped edge-to-edge (nav rail at the very left), so no leftward bleed — it would shove the nav off-screen and leave a hard, un-rounded left edge. Show the full window, cleanly rounded on all sides like the World / Page Health / Story Board windows. */ .feature-row--reverse.feature-row--pagemap .feature-row__frame { border-radius: var(--ui-radius); box-shadow: 0 0 0 1px rgba(29, 23, 18, 0.06), var(--shadow-lg); } .feature-row--reverse.feature-row--world { grid-template-columns: minmax(0, 1.9fr) minmax(0, 0.85fr); } /* Story Board — enlarge the board window ~30%. The column is widened (the board grows leftward, staying anchored to the container's right edge) and the frame takes a modest rightward bleed into the dark band for the rest, so the copy column stays readable. */ .feature-row--board { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); } .feature-row--board .feature-row__frame { width: 120%; } /* Handwritten callout on the Cast panel — points at the reference photos. */ .annot--cast { position: absolute; top: 55%; left: -70px; align-items: flex-start; z-index: 7; } .annot--cast .annot__label { transform: rotate(-3deg); white-space: nowrap; } .annot--cast .annot__arrow { width: 40px; margin-left: 116px; margin-top: 2px; transform: rotate(56deg); } /* Second Cast callout — curly arrow in the bare lower-right, pointing up at a cast member's Notes. Arrow above the label (DOM order). */ .annot--cast-notes { position: absolute; bottom: calc(16% - 48px); left: calc(79% + 48px); align-items: flex-start; z-index: 7; } .annot--cast-notes .annot__label { transform: rotate(2deg); white-space: normal; width: 130px; line-height: 0.98; } .annot--cast-notes .annot__arrow { width: 56px; margin: 0 0 5px 6px; transform: scaleX(-1) rotate(-28deg); } @media (max-width: 900px) { .annot--cast, .annot--cast-notes { display: none; } } /* The notes callout now sits well right of the frame (user-placed on a wide screen) — below ~1380px it would clip at the viewport edge, so hide it. */ @media (max-width: 1380px) { .annot--cast-notes { display: none; } } /* ── Section callouts: one handwritten label + arrow per feature screenshot, pointing at the real UI element it describes — same voice as the hero and cast annotations. All are hidden under 1040px by the global .annot rule. ── */ /* These use the SVG arrows (vertical points up by default → scaleY(-1) to point down; horizontal points right). Widths are the arrow's short axis. */ /* Page Map — label above; arrow down into the page-card grid. */ .annot--pagemap { position: absolute; top: -40px; left: 33.5%; align-items: flex-start; z-index: 8; } .annot--pagemap .annot__label { transform: rotate(-2.5deg); white-space: nowrap; } .annot--pagemap .annot__arrow { width: 42px; margin-left: 44px; margin-top: 2px; transform: scaleY(-1) rotate(-3deg); } /* World Building — two callouts. build: label above-left, arrow down at the LOCATIONS rail. detail: label below the frame (column-reverse so the arrow sits above it) pointing up into the notes. */ .annot--world-build { position: absolute; top: -46px; left: 8%; align-items: flex-start; z-index: 8; } .annot--world-build .annot__label { transform: rotate(-3deg); white-space: nowrap; } .annot--world-build .annot__arrow { width: 28px; margin-left: 60px; margin-top: 2px; transform: scaleY(-1) rotate(6deg); } .annot--world-detail { position: absolute; bottom: -84px; left: 45%; align-items: flex-start; z-index: 8; } .annot--world-detail .annot__label { transform: rotate(2deg); white-space: nowrap; } .annot--world-detail .annot__arrow { width: 28px; margin-left: 46px; margin-bottom: 2px; transform: none; } /* Story Board — callout sits below the board; arrow points up into the board's bottom-left edge, label beneath it. */ .annot--board { position: absolute; top: 99%; left: 18%; align-items: flex-start; z-index: 8; } .annot--board .annot__label { transform: rotate(-2deg); white-space: nowrap; } .annot--board .annot__arrow { width: 38px; margin: 0 0 3px 28px; transform: rotate(-16deg); } /* Story Board — label + arrow above the window, diving at the arc rail's "Point of No Return" marker. */ .annot--board-arc { position: absolute; top: -86px; left: 66%; align-items: flex-start; z-index: 8; } .annot--board-arc .annot__label { transform: rotate(-2deg); white-space: nowrap; } .annot--board-arc .annot__arrow { width: 40px; margin: 3px 0 0 64px; transform: scaleY(-1) rotate(6deg); } .feature-row--last { padding-bottom: 80px; } /* The row right after a dark→light (or light→dark) section transition doesn't need its own hairline — the color change already reads as a divider. */ .features--cont > .container > .feature-row:first-child { border-top: none; } .feature-row-dark .feature-row { border-top: none; } .feature-row h2 { font-size: 40px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; margin: 0 0 18px; } .feature-row__desc { font-family: var(--font-body); font-size: 19px; line-height: 1.62; color: var(--ink2); margin: 0 0 26px; } .feature-row__list { display: flex; flex-direction: column; gap: 13px; margin: 0 0 26px; } .feature-row__list--tight { margin-bottom: 30px; } .feature-row__list li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--ink2); } .feature-row__list li strong { font-weight: 600; color: var(--ink); } /* A bold inline mark rather than an icon-in-a-circle — the circled-checkmark badge is one of the most recognizable generic-SaaS-template patterns, so this drops the container and lets the glyph itself do the work. */ .check-badge { flex-shrink: 0; width: 16px; color: var(--amber-text); font-family: var(--font-head); font-weight: 700; font-size: 14px; line-height: 1.55; } .feature-row-dark .check-badge { color: var(--amber); } .pill-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pill { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 6px 13px; border-radius: var(--radius-pill); background: rgba(29, 23, 18, 0.05); border: 1px solid var(--rule); color: var(--ink2); } .pill--muted { font-weight: 500; letter-spacing: normal; padding: 6px 4px; color: var(--muted); background: none; border: none; } .pill--amber { background: rgba(217, 130, 10, 0.13); color: var(--amber-text); border: 1px solid rgba(217, 130, 10, 0.28); font-weight: 600; letter-spacing: 0.03em; } .stat-pair { display: flex; gap: 36px; padding-top: 24px; border-top: 1px solid var(--rule); } .stat-pair__num { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; color: var(--red); line-height: 1; } .stat-pair__label { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 6px; } .feature-row__media { position: relative; } .feature-row__media--center { display: flex; justify-content: center; } .feature-row__frame { position: relative; border-radius: var(--ui-radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-row__frame:hover { transform: translateY(-3px) scale(1.012); box-shadow: 0 4px 10px rgba(60, 32, 8, 0.10), 0 30px 64px rgba(60, 32, 8, 0.20); } .feature-row__frame--narrow { max-width: 400px; } /* Idle float — every UI mockup gets the same subtle bob as the hero shot (plgFloat: translateY 0 → -10px → 0), so the animated windows and the stationary screenshots feel alive and consistent. Staggered delays keep them from bobbing in lockstep. Disabled for reduced-motion. */ .feature-row__frame, .health-app, .panel-app, .review-app { animation: plgFloat 7s ease-in-out infinite; } .health-app { animation-delay: -1.5s; } .panel-app { animation-delay: -2.5s; } .review-app { animation-delay: -3.5s; } @media (prefers-reduced-motion: reduce) { .feature-row__frame, .health-app, .panel-app, .review-app { animation: none; } } @media (max-width: 780px) { /* Break out of .container's side padding so the World screenshot runs edge-to-edge on phones, like a real app screen rather than an inset marketing image. */ .feature-row--world .feature-row__media { width: 100vw; margin-left: calc(50% - 50vw); } } /* ─── FEATURE ROW, DARK VARIANT — Page Map band ────────────────── A single feature row lifted into its own full-bleed dark section so the four feature rows don't read as one long light block. */ .feature-row-dark { position: relative; z-index: 1; background: var(--charcoal3); padding: 88px var(--side-pad); overflow: hidden; isolation: isolate; } .feature-row--on-dark h2 { color: var(--on-dark); } .feature-row--on-dark .feature-row__desc { color: var(--on-dark-body); } .feature-row--on-dark .feature-row__list li { color: var(--on-dark-body); } .feature-row--on-dark .feature-row__list li strong { color: var(--on-dark); } .feature-row--on-dark .stat-pair { border-top-color: var(--on-dark-rule); } .feature-row--on-dark .stat-pair__label { color: var(--on-dark-muted); } .feature-row--on-dark .feature-row__frame { box-shadow: 0 1px 0 rgba(243, 236, 226, 0.06), 0 30px 60px rgba(0, 0, 0, 0.45); } .feature-row--on-dark .feature-row__glow { background: radial-gradient(ellipse at 50% 55%, rgba(227, 137, 28, 0.18), transparent 65%); } /* World screenshot is a transparent-cornered PNG that sits directly on the dark band. Drop the frame's rounded clip + rectangular box-shadow — both would leak past the app window's own rounded corners — and give the window a drop-shadow that follows its alpha instead. */ .feature-row--on-dark.feature-row--world .feature-row__frame { border-radius: 0; overflow: visible; box-shadow: none; background: transparent; } .feature-row--world .feature-row__frame img { filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.5)); } .feature-row--world .feature-row__frame:hover { box-shadow: none; } /* ─── STORY ARC (dark) ────────────────────────────────────────── */ .arc-section { position: relative; z-index: 1; background: var(--charcoal); color: var(--on-dark); border-top: 1px solid var(--on-dark-rule); border-bottom: 1px solid var(--on-dark-rule); padding: 96px var(--side-pad); overflow: hidden; isolation: isolate; } .arc-intro { max-width: 640px; margin-bottom: 44px; } .arc-intro h2 { font-size: 44px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 18px; } .arc-intro p { font-family: var(--font-body); font-size: 19px; line-height: 1.62; color: var(--on-dark-body); margin: 0; } .arc-panel { position: relative; } .arc-panel__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; } .arc-panel__kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--beat-red-dark); } .arc-panel__title { font-size: 13px; font-weight: 600; } .arc-panel__meta { font-size: 12px; color: var(--on-dark-muted); margin-left: auto; } .arc-svg { width: 100%; height: auto; display: block; } .arc-legend { display: flex; flex-wrap: wrap; gap: 20px; padding: 18px 12px 4px; margin-top: 8px; border-top: 1px solid var(--on-dark-rule); } .legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--on-dark-body); } .legend-dot { width: 9px; height: 9px; border-radius: 50%; } /* ─── EXPORTS ─────────────────────────────────────────────────── */ .exports-section { position: relative; z-index: 1; padding: 96px var(--side-pad); background: var(--paper); } .export-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 52px; align-items: center; margin-bottom: 40px; } .export-intro__copy { max-width: 560px; } .export-intro__copy h2 { font-size: 44px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 18px; } .export-intro__copy p { font-family: var(--font-body); font-size: 19px; line-height: 1.62; color: var(--ink2); margin: 0; } /* overflow visible (not hidden): the fan-cards sit flush against the box edges and bob ±10px on the idle float, so a clip rectangle sliced their tops and left a hard line down the right/bottom. container-type: inline-size gives cqw units without paint containment, so nothing clips. */ .export-fan { position: relative; width: 100%; overflow: visible; container-type: inline-size; } .export-diagram { position: relative; width: 100%; max-width: 520px; aspect-ratio: 520 / 420; margin: 0 auto; } .export-diagram__arrows { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; } .export-diagram__hub { position: absolute; z-index: 3; left: 1.538cqw; top: 20cqw; width: 35.385cqw; height: 41.154cqw; background: #ffffff; border: 1px solid rgba(29, 23, 18, 0.14); border-radius: 3.462cqw; box-shadow: 0 2px 8px rgba(60, 32, 8, 0.14); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.077cqw; } .export-diagram__hub img { width: 10.385cqw; height: 10.385cqw; border-radius: 2.5cqw; box-shadow: 0 2px 6px rgba(60, 32, 8, 0.18); } .export-diagram__hub-name { font-size: 3.654cqw; font-weight: 700; letter-spacing: 0.01em; color: var(--ink); } .export-diagram__hub-tag { display: flex; align-items: center; gap: 1.731cqw; font-size: 2.019cqw; font-weight: 700; letter-spacing: 0.22em; color: var(--amber-text); } .export-diagram__hub-tag span { width: 3.077cqw; height: 1px; background: rgba(227, 137, 28, 0.6); } .export-diagram__hub { opacity: 0; transform: scale(0.88); transition: transform 0.7s cubic-bezier(.19, 1, .22, 1), opacity 0.6s ease; } .export-diagram__hub.is-shown { opacity: 1; transform: scale(1); } .export-diagram__arrows path { opacity: 0; transition: opacity .25s ease; } .export-diagram__arrows path.is-drawn { opacity: 1; } /* Outer: position + size + scroll-entrance transform (translate/scale toward the hub). */ .fan-card { position: absolute; z-index: 2; width: 20cqw; height: 22.692cqw; opacity: 0; transform: translate(var(--ex, -70%), var(--ey, 0%)) scale(0.4) rotate(var(--rot, 0deg)); transition: transform 0.9s cubic-bezier(.19, 1, .22, 1), opacity 0.5s ease; transition-delay: var(--reveal-delay, 0ms); will-change: transform; } .fan-card.is-shown { opacity: 1; transform: translate(0, 0) scale(1) rotate(var(--rot, 0deg)); } /* Inner: the visual card body — carries the idle float bob, isolated from the entrance transform above. */ .fan-card__body { position: relative; width: 100%; height: 100%; background: #FDFBF7; border: 1px solid var(--rule); border-radius: 1.731cqw; box-shadow: 0 3px 8px rgba(60, 32, 8, 0.14); padding: 2.115cqw; animation: plgFloat 6s ease-in-out infinite; animation-delay: var(--float-delay, 0s); } .fan-card__body::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 3.269cqw solid var(--fold-color); border-right: 3.269cqw solid transparent; } .fan-card__label { font-size: 2.308cqw; font-weight: 700; letter-spacing: 0.03em; text-align: right; color: var(--fold-color); } .fan-card__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.577cqw; width: 8.846cqw; height: 7.692cqw; margin-top: 2.115cqw; } .fan-card__grid div { border: 1px solid rgba(29, 23, 18, 0.18); border-radius: 2px; } .fan-card__lines { margin-top: 2.308cqw; display: flex; flex-direction: column; gap: 0.962cqw; } .fan-card__lines div { height: 0.577cqw; border-radius: 2px; background: rgba(29, 23, 18, 0.16); } .fan-card__lines div:nth-child(1) { width: 80%; } .fan-card__lines div:nth-child(2) { width: 55%; background: rgba(29, 23, 18, 0.12); } .fan-card__lines div:nth-child(3) { width: 70%; background: rgba(29, 23, 18, 0.12); } .fan-card__glyph { font-family: var(--font-body); font-weight: 500; font-size: 5.769cqw; line-height: 1; opacity: 0.55; margin-top: 2.308cqw; color: var(--fold-color); } .fan-card--fdx { --fold-color: var(--orange); left: 78.846cqw; top: 2.308cqw; --rot: 3deg; --ex: -62%; --ey: 42%; --reveal-delay: 90ms; --float-delay: -1s; } .fan-card--fountain { --fold-color: var(--beat-blue); left: 48.077cqw; top: 0; --rot: -2.5deg; --ex: -78%; --ey: 68%; --reveal-delay: 0ms; --float-delay: -2.4s; } .fan-card--rtf { --fold-color: var(--red); left: 80cqw; top: 28.846cqw; --rot: 2deg; --ex: -92%; --ey: 4%; --reveal-delay: 180ms; --float-delay: -3.6s; } .fan-card--pdf { --fold-color: var(--amber-text); left: 77.692cqw; top: 55.769cqw; --rot: -2deg; --ex: -88%; --ey: -36%; --reveal-delay: 270ms; --float-delay: -0.4s; } .fan-card--docx { --fold-color: var(--beat-green); left: 46.923cqw; top: 57.692cqw; --rot: 2.5deg; --ex: -58%; --ey: -58%; --reveal-delay: 360ms; --float-delay: -5s; } @media (prefers-reduced-motion: reduce) { .fan-card { transition-duration: .01ms; } .fan-card__body { animation: none; } } .role-chips { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .role-chip { font-family: var(--font-head); cursor: pointer; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; padding: 12px 18px; border-radius: var(--radius-pill); border: 1px solid var(--rule); background: transparent; color: var(--ink2); transition: all 0.18s; } .role-chip:hover { border-color: rgba(29, 23, 18, 0.3); } .role-chip.is-active { border-color: var(--ink); background: var(--ink); color: #fff; } .role-chip.is-active:hover { border-color: var(--ink); } /* Demo cursor — plays once to show the role filter is real, not just decorative chips. Injected by JS; see assets/js/main.js. */ .demo-cursor { position: absolute; top: 0; left: 0; z-index: 20; pointer-events: none; opacity: 0; transition: transform 0.75s cubic-bezier(.4, 0, .2, 1), opacity 0.3s ease; } .demo-cursor.is-active { opacity: 1; } .demo-cursor.is-pressing svg { transform: scale(0.85); transform-origin: 12% 8%; } .demo-cursor__ripple { position: absolute; top: 42%; left: 20%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(29, 23, 18, 0.3); transform: scale(0); opacity: 0; } .demo-cursor.is-pressing .demo-cursor__ripple { animation: demoCursorRipple 0.6s ease-out; } @keyframes demoCursorRipple { 0% { transform: scale(0); opacity: 0.6; } 100% { transform: scale(3.2); opacity: 0; } } @media (max-width: 1040px), (prefers-reduced-motion: reduce) { .demo-cursor { display: none; } } .export-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .export-item { transition: opacity 0.35s ease, transform 0.2s ease, box-shadow 0.2s ease; padding: 24px; border: 1px solid var(--rule); border-radius: var(--radius); background: #FBFAF7; } .export-item:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(60, 32, 8, 0.14); border-color: rgba(29, 23, 18, 0.18); } .export-item.is-dim { opacity: 0.28; transform: scale(0.985); box-shadow: none; } .export-item.is-match { box-shadow: 0 3px 8px rgba(60, 32, 8, 0.14); border-color: rgba(217, 130, 10, 0.45); } .export-item__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 16px; } .export-item__title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; } .export-item__fmt { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--red); white-space: nowrap; } .export-item__desc { font-size: 14px; line-height: 1.55; color: var(--ink2); margin: 0; } /* ─── STATS (dark) ────────────────────────────────────────────── */ .stats-section { position: relative; z-index: 1; background: var(--charcoal2); color: var(--on-dark); padding: 88px var(--side-pad); overflow: hidden; isolation: isolate; } .stats-lead { max-width: 640px; margin-bottom: 48px; } .stats-lead__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; } .stats-lead__text { font-family: var(--font-body); font-size: 26px; line-height: 1.4; margin: 0; color: var(--on-dark); } .stats-lead__text em { font-style: italic; color: #F4A83A; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat-block { border-top: 1px solid rgba(243, 236, 226, 0.16); padding-top: 22px; } .stat-block__num { font-size: 52px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #F4A83A; } .stat-block__label { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243, 236, 226, 0.55); margin-top: 12px; } /* ─── WAITLIST ────────────────────────────────────────────────── */ .waitlist-section { position: relative; z-index: 1; padding: 100px var(--side-pad); background: var(--tint); border-top: 1px solid var(--rule); } .waitlist-inner { max-width: 720px; margin: 0 auto; text-align: center; } .waitlist__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-text); margin-bottom: 18px; } .waitlist__title { font-size: 48px; font-weight: 700; letter-spacing: -0.038em; line-height: 1.04; margin: 0 0 18px; } .waitlist__sub { font-family: var(--font-body); font-size: 20px; line-height: 1.55; color: var(--ink2); margin: 0 auto 34px; max-width: 34em; } .waitlist-form { display: flex; gap: 12px; max-width: 480px; margin: 0 auto 16px; flex-wrap: wrap; justify-content: center; } .waitlist-form__input { flex: 1; min-width: 240px; font-family: var(--font-head); font-size: 15px; padding: 15px 20px; border-radius: var(--radius-pill); border: 1px solid var(--rule); background: #FBFAF7; color: var(--ink); outline: none; transition: border-color 0.18s; } .waitlist-form__input--name { flex-basis: 100%; } .waitlist-form__input:focus { border-color: var(--red); } .waitlist-form__input::placeholder { color: var(--muted); opacity: 1; } .waitlist-form__submit { font-family: var(--font-head); cursor: pointer; background: var(--cta); color: var(--cta-text); font-size: 15px; font-weight: 600; padding: 15px 30px; border-radius: var(--radius-pill); border: none; letter-spacing: -0.01em; box-shadow: 0 6px 20px rgba(245, 158, 11, 0.30); transition: background 0.18s, transform 0.12s; } .waitlist-form__submit:hover { background: var(--cta-hover); transform: translateY(-2px); } .waitlist-form__submit:disabled { opacity: 0.7; cursor: default; transform: none; } .waitlist__status { min-height: 22px; font-size: 14px; font-weight: 600; color: var(--beat-green); opacity: 0; transition: opacity 0.3s ease; } .waitlist__status.is-visible { opacity: 1; } .waitlist__status.is-error { color: var(--red); } .waitlist__perks { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 22px; } .waitlist__perks span { font-size: 13px; color: var(--muted); } /* ─── FOOTER ──────────────────────────────────────────────────── */ .site-footer { position: relative; z-index: 1; background: var(--paper); border-top: 1px solid var(--rule); padding: 40px var(--side-pad); } .footer__top { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .footer__brand { display: flex; align-items: center; gap: 11px; } .footer__brand img { height: 28px; width: 28px; border-radius: 6px; } .footer__brand span { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; } .footer__links { display: flex; gap: 28px; flex-wrap: wrap; } .footer__links a { font-size: 14px; color: var(--ink2); transition: color 0.18s; } .footer__links a:hover { color: var(--ink); } .footer__bottom { max-width: var(--max-w); margin: 24px auto 0; padding-top: 20px; border-top: 1px solid var(--rule2); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); } /* ─── FAQ PAGE ────────────────────────────────────────────────── */ .page-hero { position: relative; padding: 96px var(--side-pad) 60px; background: var(--tint); border-bottom: 1px solid var(--rule); overflow: hidden; } .page-hero__inner { position: relative; max-width: 1100px; margin: 0 auto; } .page-hero h1 { font-size: 46px; font-weight: 700; letter-spacing: -0.036em; line-height: 1.05; margin: 0 0 14px; } .page-hero p { font-family: var(--font-body); font-size: 19px; line-height: 1.55; color: var(--ink2); margin: 0; max-width: 34em; } .faq-body { padding: 72px var(--side-pad) 96px; background: var(--paper); } .faq-layout { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 190px 1fr; gap: 64px; align-items: flex-start; } .faq-jump { position: sticky; top: 96px; } .faq-jump__label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .faq-jump__links { display: flex; flex-direction: column; gap: 2px; } .faq-jump__links a { font-size: 14px; color: var(--ink2); padding: 5px 0; transition: color 0.18s; } .faq-jump__links a:hover { color: var(--red); } .faq-group { margin-bottom: 52px; } .faq-group:last-child { margin-bottom: 8px; } .faq-group__list { border-bottom: 1px solid var(--rule); } .faq-item { border-top: 1px solid var(--rule); } .faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; cursor: pointer; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item__q { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .faq-item__chevron { transition: transform 0.25s ease; flex-shrink: 0; } .faq-item[open] .faq-item__chevron { transform: rotate(180deg); } .faq-item[open] .faq-item__q { color: var(--red); } .faq-item__a { padding: 0 0 22px; font-size: 15px; line-height: 1.75; color: var(--ink2); max-width: 68ch; } .faq-item__a a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; } .faq-cta { background: var(--tint); border-top: 1px solid var(--rule); padding: 80px var(--side-pad); text-align: center; } .faq-cta__inner { max-width: 600px; margin: 0 auto; } .faq-cta h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 10px; } .faq-cta p { font-family: var(--font-body); font-size: 18px; color: var(--ink2); margin: 0 0 26px; } /* ─── LEGAL PAGES (Privacy / Terms) ───────────────────────────── */ .legal-body { padding: 72px var(--side-pad) 96px; background: var(--paper); } .legal-content { max-width: 680px; margin: 0 auto; } .legal-content h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 42px 0 14px; } .legal-content h2:first-child { margin-top: 0; } .legal-content p { font-size: 15px; color: var(--ink2); line-height: 1.8; margin-bottom: 16px; } .legal-content ul { margin: 12px 0 24px 24px; } .legal-content ul li { font-size: 15px; color: var(--ink2); line-height: 1.8; margin-bottom: 8px; list-style: disc; } .legal-content a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; } .legal-divider { border: none; border-top: 1px solid var(--rule); margin: 36px 0; } /* ─── RESPONSIVE ──────────────────────────────────────────────── */ @media (max-width: 1040px) { .annot { display: none !important; } } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr !important; } .feature-row { grid-template-columns: 1fr !important; } .feature-row .feature-row__copy { order: 1 !important; } .feature-row .feature-row__media { order: 2 !important; } /* Hide the in-page section links but keep the CTA — losing the whole nav (including "Early Access") on mobile left no way to reach the site's main action from the header. */ .nav__link { display: none !important; } .positioning__grid { grid-template-columns: 1fr 1fr !important; } .stats-grid { grid-template-columns: 1fr 1fr !important; } .hero__title { font-size: 44px !important; } .export-intro { grid-template-columns: 1fr !important; } .export-fan { display: none !important; } .faq-layout { grid-template-columns: 1fr !important; } .faq-jump { display: none !important; } } @media (max-width: 560px) { .positioning__grid { grid-template-columns: 1fr !important; } .hero__title { font-size: 36px !important; } } /* ─── SOCIAL PROOF — credibility & community signal ────────────────── Two testimonials (quote + author) and a waitlist stat. Light background, clean layout. Placeholder structure ready for real quotes. */ .social-proof { padding: 72px var(--side-pad); background: var(--paper); border-bottom: 1px solid var(--rule); } .social-proof__grid { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 48px; align-items: center; } .social-proof__quote { padding: 24px; background: #FBFAF7; border-left: 3px solid var(--orange); border-radius: var(--radius-sm); } .social-proof__text { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--ink2); margin: 0 0 12px; font-style: italic; } .social-proof__author { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; letter-spacing: -0.01em; } .social-proof__stat { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; text-align: center; } .social-proof__number { display: block; font-size: 52px; font-weight: 700; color: var(--orange); line-height: 1; margin-bottom: 12px; } .social-proof__label { font-size: 15px; color: var(--ink2); margin: 0; font-weight: 500; } /* ─── PHASE MARKERS — labeled divider line between the Write/Plan/Hand Off phases. A rule across the page with the label centered on it, so it reads as "new phase," not an empty band. */ .phase-marker { display: flex; align-items: center; justify-content: center; gap: 26px; max-width: 620px; margin: 0 auto; padding: 30px var(--side-pad); } .phase-marker::before, .phase-marker::after { content: ''; flex: 1; max-width: 150px; height: 1px; } /* Hairlines fade toward the handwritten label so it reads as the focal point. */ .phase-marker::before { background: linear-gradient(to right, transparent, rgba(217, 99, 58, 0.42)); } .phase-marker::after { background: linear-gradient(to left, transparent, rgba(217, 99, 58, 0.42)); } .phase-marker span { flex-shrink: 0; font-family: var(--font-note); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; color: var(--orange); transform: rotate(-2.5deg); white-space: nowrap; } /* ─── PROBLEM STATEMENT — bridge between hero and solution ──────────── Brief, sharp comparison that frames why existing tools don't work. Light background, centered, sets up the value prop. */ .problem-statement { padding: 48px var(--side-pad); background: var(--tint); border-bottom: 1px solid var(--rule); text-align: center; } .problem-statement p { max-width: 700px; margin: 0 auto; font-size: 20px; line-height: 1.6; color: var(--ink2); font-weight: 500; } .problem-statement strong { font-weight: 700; color: var(--ink); } /* ─── SECTION TONE — alternating band backgrounds for editorial rhythm ─ No two adjacent sections share a tone: paper (light) · paper3 (mid) · charcoal (dark) trade off down the page. Dark sections have a warm sepia wash (burnt-orange undertone) instead of flat black. */ .section-mid { background: var(--paper3); } .feature-band { position: relative; z-index: 1; padding: 80px var(--side-pad); overflow: hidden; } .feature-band .feature-row { padding: 0; border-top: none; } /* Warm tint overlay for dark sections — burnt-orange undertone (sepia wash). Uses ::before pseudo-element with radial gradient to avoid adding markup. Radial gradient creates warmth from top that fades down — subtle but readable. */ .positioning::before, .feature-row-dark::before, .arc-section::before, .stats-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse 150% 80% at 50% -20%, rgba(217, 130, 10, 0.16) 0%, rgba(217, 130, 10, 0.04) 60%, transparent 100%); pointer-events: none; z-index: 0; } /* Ensure content stays above the tint wash */ .positioning > *, .feature-row-dark > *, .arc-section > *, .stats-section > * { position: relative; z-index: 1; } /* Hand-drawn accent marks simplified: removed SVG pattern layer for now. Focus on core depth: warm tint (::before). Will add marks back in cleaner form. */ /* Review section's hand-drawn note: fills the dead space and angles down toward the Review Copy window instead of pointing off-screen. When the row is stacked (copy above the UI) it sits right; on the desktop two-column reverse layout the UI is in the left column, so the note hugs the left edge of the copy — nearest the window it points at. */ .handwrite-note--review { display: flex; width: fit-content; margin-left: auto; } /* Story Arc — centered hand-note between the intro copy and the chart. */ .handwrite-note--arc { display: flex; width: fit-content; margin: -14px auto 26px; } /* Exports — hand-note sits right above the role filter chips. */ .handwrite-note--roles { display: flex; width: fit-content; margin: 0 0 12px 6px; } @media (min-width: 900px) { .feature-row--reverse .handwrite-note--review { margin-left: 0; margin-right: auto; } } /* ─── PRICING — one-time purchase + free tier (Lemon Squeezy) ───────── Two cards on light paper; the paid card is amber-accented and featured. Local-first, own-your-tools framing — no subscription language. */ .pricing { position: relative; z-index: 1; background: var(--paper); padding: 96px var(--side-pad); } .pricing__head { max-width: 640px; margin: 0 auto 48px; text-align: center; } .pricing__head .eyebrow { justify-content: center; } .pricing__head h2 { font-size: 40px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; margin: 0 0 16px; } .pricing__head p { font-family: var(--font-body); font-size: 19px; line-height: 1.6; color: var(--ink2); margin: 0; } .pricing__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 840px; margin: 0 auto; } .price-card { position: relative; display: flex; flex-direction: column; background: var(--paper2); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 36px 32px; } .price-card--featured { background: #FBFAF7; border: 1.5px solid var(--cta); box-shadow: var(--shadow); } .price-card__badge { position: absolute; top: -13px; left: 32px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cta-text); background: var(--cta); padding: 5px 12px; border-radius: var(--radius-pill); } .price-card__name { font-family: var(--font-head); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .price-card__price { font-family: var(--font-head); font-size: 46px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; } .price-card__was { font-size: 22px; font-weight: 600; color: var(--muted); text-decoration: line-through; margin-left: 8px; letter-spacing: -0.02em; } .price-card__tagline { font-family: var(--font-body); font-size: 16px; color: var(--ink2); margin: 14px 0 26px; } .price-card__list { display: flex; flex-direction: column; gap: 13px; margin: 0 0 28px; flex: 1; } .price-card__list li { display: flex; gap: 11px; font-size: 15px; line-height: 1.45; color: var(--ink2); } .price-card__list li strong { color: var(--ink); font-weight: 700; } .price-card__cta { width: 100%; justify-content: center; } .price-card__note { font-size: 12.5px; color: var(--muted); margin-top: 14px; text-align: center; line-height: 1.5; } .pricing__foot { text-align: center; margin: 40px auto 0; font-size: 15px; color: var(--muted); } .pricing__foot a { color: var(--orange); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(217, 99, 58, 0.3); } .pricing__foot a:hover { border-bottom-color: var(--orange); } @media (max-width: 720px) { .pricing__grid { grid-template-columns: 1fr; max-width: 420px; } } /* ─── SECTION BANDS — strong warm/cool alternation so no two neighbours blend ─ Every light section is either a bright COOL cream or a warmer AMBER cream, each with a top-to-bottom gradient for life (the flat paper3 "mid" tone read as one long cream blur). Placed last so they win over section defaults. Dark bands sit between them and keep their sepia wash. */ /* ONE clean cream for every light section — the alternation comes from flipping to charcoal, not from cream-on-cream shades. Subtle top→bottom gradient so it isn't dead flat. */ .band-light { background: linear-gradient(180deg, #FDFBF7 0%, #F5EFE5 100%); } /* ─── FULL LIGHT/DARK ALTERNATION — section flips ───────────────────── Story Arc & Stats flip to LIGHT; Exports & Pricing flip to DARK (their light cards float on charcoal). Overrides live here (last) so they win. */ /* Story Arc → light */ .arc-section--light { background: linear-gradient(180deg, #FDFBF7 0%, #F5EFE5 100%); color: var(--ink); border-top-color: var(--rule); border-bottom-color: var(--rule); } .arc-section--light::before { display: none; } .arc-section--light .eyebrow { color: var(--orange); } .arc-section--light .arc-intro p { color: var(--ink2); } .arc-section--light .arc-panel__meta { color: var(--muted); } .arc-section--light .arc-panel__kicker { color: var(--red); } .arc-section--light #arcLine { stroke: rgba(29, 23, 18, 0.28); } /* Stats → light */ .stats-section--light { background: linear-gradient(180deg, #FDFBF7 0%, #F5EFE5 100%); color: var(--ink); } .stats-section--light::before, .stats-section--light::after { display: none; } .stats-section--light .stats-lead__eyebrow { color: var(--amber-text); } .stats-section--light .stats-lead__text { color: var(--ink2); } .stats-section--light .stats-lead__text em { color: var(--red); } .stats-section--light .stat-block { border-top-color: var(--rule); } .stats-section--light .stat-block__num { color: var(--red); } .stats-section--light .stat-block__label { color: var(--muted); } /* Exports → dark (light cards pop on charcoal) */ .exports-section--dark { background: linear-gradient(180deg, #241C13 0%, #1B140C 100%); color: var(--on-dark); } .exports-section--dark::before { display: none; } .exports-section--dark .eyebrow { color: var(--orange); } .exports-section--dark .export-intro__copy h2 { color: var(--on-dark); } .exports-section--dark .export-intro__copy p { color: var(--on-dark-body); } .exports-section--dark .role-chip { color: var(--on-dark-body); border-color: rgba(243, 236, 226, 0.28); } .exports-section--dark .role-chip:hover { border-color: rgba(243, 236, 226, 0.5); } .exports-section--dark .role-chip.is-active { background: var(--on-dark); color: var(--charcoal); border-color: var(--on-dark); } /* Export cards stay light on the dark section — reset their inherited text to dark so titles don't wash out. */ .exports-section--dark .export-item { color: var(--ink2); } .exports-section--dark .export-item__title { color: var(--ink); } /* Pricing → dark (light cards float on charcoal) */ .pricing--dark { background: linear-gradient(180deg, #241C13 0%, #1B140C 100%); color: var(--on-dark); } .pricing--dark .eyebrow { color: var(--orange); } .pricing--dark .pricing__head h2 { color: var(--on-dark); } .pricing--dark .pricing__head p { color: var(--on-dark-body); } .pricing--dark .pricing__foot { color: var(--on-dark-muted); } /* Waitlist → dark closing CTA (holds the alternation while Pricing is hidden). The email input stays a light pill on charcoal; the amber submit is unchanged. */ .waitlist-section--dark { background: linear-gradient(180deg, #241C13 0%, #1B140C 100%); color: var(--on-dark); border-top-color: var(--on-dark-rule); } .waitlist-section--dark .waitlist__eyebrow { color: var(--amber); } .waitlist-section--dark .waitlist__sub { color: var(--on-dark-body); } .waitlist-section--dark .waitlist__perks span { color: var(--on-dark-muted); } /* ─── DARK-SECTION CONTRAST — pills & the arc legend ────────────────── Default pills use dark ink (great on cream, invisible on charcoal). On the dark bands, give them light text and lean on amber for the highlighted one so the important state actually pops. */ .feature-row-dark .pill, .positioning .pill, .exports-section--dark .pill, .pricing--dark .pill, .waitlist-section--dark .pill { color: var(--on-dark-body); background: rgba(243, 236, 226, 0.07); border-color: rgba(243, 236, 226, 0.20); } .feature-row-dark .pill--muted, .positioning .pill--muted, .exports-section--dark .pill--muted, .pricing--dark .pill--muted, .waitlist-section--dark .pill--muted { color: var(--on-dark-muted); background: none; border-color: transparent; } .feature-row-dark .pill--amber, .positioning .pill--amber, .exports-section--dark .pill--amber, .pricing--dark .pill--amber, .waitlist-section--dark .pill--amber { color: var(--amber); background: rgba(227, 137, 28, 0.18); border-color: rgba(227, 137, 28, 0.5); } /* Story Arc flipped to light — its legend + rule were styled for dark. */ .arc-section--light .arc-legend { border-top-color: var(--rule); } .arc-section--light .legend-item { color: var(--ink2); } /* ─── EDITOR REVIEW SPOTLIGHT — bold teaser near the top, links to #review ── */ .spotlight { position: relative; z-index: 1; background: var(--paper); padding: 74px var(--side-pad); text-align: center; border-bottom: 1px solid var(--rule); } .spotlight .container { max-width: 720px; } .spotlight__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; } .spotlight__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); } .spotlight__title { font-size: 42px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; margin: 0 0 16px; } .spotlight__text { font-family: var(--font-body); font-size: 19px; line-height: 1.6; color: var(--ink2); margin: 0 auto 28px; max-width: 40em; } .spotlight__link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--red); text-decoration: none; border-bottom: 2px solid rgba(176, 57, 44, 0.28); padding-bottom: 2px; } .spotlight__link:hover { border-bottom-color: var(--red); } .spotlight__link svg { transition: transform 0.18s ease; } .spotlight__link:hover svg { transform: translateX(3px); } @media (max-width: 560px) { .spotlight__title { font-size: 32px; } } /* ─── SMART PANELS — recreated Inspector panel + looping demo ───────── A faithful rebuild of Panelogue's Inspector: the panel header assembles from Type/Location/Time, then a staging tag is picked and appended live. Built in the browser (no screenshot) so it can animate. */ /* The script excerpt sits above the Inspector; the tag picked below lands in this manuscript's panel heading, so you see the metadata reach the page. */ .panel-stack { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 380px; margin: 0 auto; } .panel-script { background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.10); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; } .panel-script__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #E4E0D8; border-bottom: 1px solid rgba(29, 23, 18, 0.08); } .panel-script__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(29, 23, 18, 0.16); } .panel-script__name { margin-left: 6px; font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--muted); } .panel-script__body { padding: 15px 18px 17px; font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace); } .panel-script__page { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--amber-text); margin-bottom: 12px; } .panel-script__page em { font-style: normal; font-weight: 600; color: var(--muted); } .panel-script__panel { font-size: 12.5px; font-weight: 700; line-height: 1.5; color: var(--ink); } /* Transparent-until-picked, same as the Inspector preview — reserves the wrap. */ .panel-script__hl { color: transparent; transition: color 0.2s ease; } .panel-script__hl.is-on { color: var(--orange); } .panel-script__desc { font-size: 12px; line-height: 1.55; color: var(--ink2); margin-top: 8px; } .panel-script__char { font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 12px; } .panel-script__dlg { font-size: 12px; color: var(--ink2); margin-top: 2px; } .panel-ui { position: relative; width: 100%; max-width: 380px; margin: 0 auto; font-family: var(--font-ui); background: #EAE6DE; border: 1px solid rgba(29, 23, 18, 0.10); border-radius: 14px; box-shadow: var(--shadow); } .panel-ui__tabs { display: flex; gap: 22px; padding: 14px 20px 0; border-bottom: 1px solid rgba(29, 23, 18, 0.10); background: #E4E0D8; border-radius: 14px 14px 0 0; } .panel-ui__tab { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 11px; } .panel-ui__tab.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--orange); } .panel-ui__scroll { padding: 18px 20px 22px; } .panel-ui__heading { font-size: 14px; font-weight: 700; color: var(--ink); padding-bottom: 12px; border-bottom: 1px solid rgba(29, 23, 18, 0.08); margin-bottom: 16px; } .panel-ui__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 18px 0 9px; } .panel-ui__kicker:first-child { margin-top: 0; } .panel-ui__kicker em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); opacity: 0.8; } .panel-ui__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .panel-ui__stat { background: #F1EEE7; border: 1px solid rgba(29, 23, 18, 0.07); border-radius: 8px; padding: 12px 6px; text-align: center; } .panel-ui__stat b { display: block; font-size: 20px; font-weight: 700; color: var(--amber-text); line-height: 1; } .panel-ui__stat span { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-top: 6px; } .panel-ui__field { margin-bottom: 11px; } .panel-ui__flabel { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink2); margin-bottom: 5px; } .panel-ui__select, .panel-ui__input { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink); background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.14); border-radius: 8px; padding: 9px 12px; } .panel-ui__select svg { color: var(--muted); } .panel-ui__preview { font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace); font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--ink); background: #FBFAF7; border: 1.5px solid var(--amber); border-radius: 8px; padding: 12px 13px; } /* The tag text is always in the DOM (transparent) so its wrapped height is reserved from the start — revealing it never grows the box or shoves the page. */ .panel-ui__hl { color: transparent; transition: color 0.2s ease; } .panel-ui__hl.is-on { color: var(--orange); } /* Always occupy one tag-row of height (even while empty) so the row appearing after the pick doesn't reflow everything below it. */ /* Reserved for TWO chip rows — the four stacked tags wrap, and the row must never grow mid-animation. Empty state shows the real app's hint. */ .panel-ui__tags { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 6px; margin-bottom: 9px; min-height: 62px; } .panel-ui__tags:empty::before { content: "No staging — type /tag in the panel heading"; font-size: 11.5px; font-style: italic; color: var(--muted); } .panel-ui__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--amber-text); background: rgba(217, 130, 10, 0.14); border: 1px solid rgba(217, 130, 10, 0.32); border-radius: var(--radius-pill); padding: 4px 10px; animation: plgTagIn 0.28s cubic-bezier(.34,1.56,.64,1); } .panel-ui__tag span { opacity: 0.6; font-weight: 700; } @keyframes plgTagIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } } .panel-ui__searchrow { position: relative; display: flex; gap: 8px; } .panel-ui__search { flex: 1; font-size: 13px; background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.14); border-radius: 8px; padding: 9px 12px; transition: border-color 0.15s, box-shadow 0.15s; } .panel-ui__search.is-focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(227, 137, 28, 0.15); } .panel-ui__search .is-placeholder { color: var(--muted); } .panel-ui__add { flex-shrink: 0; width: 38px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--ink2); background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.14); border-radius: 8px; } .panel-ui__hint { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin-top: 12px; } /* Right-size the media column so the narrow Inspector panel isn't lost in dead air. */ /* Smart Panels is a stacked showcase: intro copy on top, then a full-width two-pane app window (script + Inspector) so the pick and the propagation into the panel heading are visible side by side, in real time. */ .feature-row--smartpanels { display: block; } /* Let the staging dropdown spill past the window without being re-clipped, and give the section enough bottom padding that even the FULL grouped menu (296px cap) stays inside the light band — the dark section that follows paints over anything that escapes, cutting the menu off. */ #features.feature-band { overflow: clip; overflow-clip-margin: 240px; padding-bottom: 230px; } .smartpanels__intro { max-width: 720px; margin: 0 auto 74px; text-align: center; } .smartpanels__intro .feature-row__list { display: inline-flex; text-align: left; margin-bottom: 22px; } .smartpanels__intro .pill-row { justify-content: center; } .smartpanels__stage { position: relative; } .panel-app { position: relative; width: 100%; max-width: 940px; margin: 0 auto; background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.12); border-radius: 16px; box-shadow: var(--shadow); /* Visible so the staging dropdown can extend past the window's bottom edge. Corners are rounded on the bar + panes individually to keep the frame. */ overflow: visible; font-family: var(--font-ui); } .panel-app__bar { display: flex; align-items: center; gap: 7px; padding: 13px 18px; background: #E4E0D8; border-bottom: 1px solid rgba(29, 23, 18, 0.08); border-radius: var(--ui-radius) var(--ui-radius) 0 0; } .panel-app__name { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--muted); } .panel-app__body { display: flex; align-items: stretch; } /* Script pane (left) + Inspector rail (right) sit flush inside the one window. */ .panel-app__body .panel-script { flex: 1 1 auto; min-width: 0; background: #FBFAF7; border: none; border-radius: 0 0 0 var(--ui-radius); box-shadow: none; } .panel-app__body .panel-script__body { padding: 20px 24px 22px; } .panel-app__body .panel-ui { flex: 0 0 356px; max-width: 356px; margin: 0; background: #EAE6DE; border: none; border-left: 1px solid rgba(29, 23, 18, 0.10); border-radius: 0 0 var(--ui-radius) 0; box-shadow: none; } .panel-app__body .panel-ui__tabs { border-radius: 0; } .panel-script__panel--next { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(29, 23, 18, 0.08); } /* Handwritten callout floating above the window (hero-style), arrow sweeping down past the titlebar onto the Panel 1 heading the staging tag auto-fills. */ .annot--staging { top: -60px; left: 300px; align-items: flex-start; z-index: 8; } .annot--staging .annot__label { transform: rotate(-4deg); } .annot--staging .annot__arrow { width: 30px; margin-left: 40px; margin-top: 4px; transform: scaleY(-1) rotate(12deg); } @media (max-width: 720px) { .panel-app__body { flex-direction: column; } .panel-app__body .panel-ui { flex: none; max-width: none; border-left: none; border-top: 1px solid rgba(29, 23, 18, 0.10); } } /* ─── PAGE HEALTH — live Page-Map hover showcase (dark band, side-by-side) ── */ .feature-row-dark--health { padding: 90px var(--side-pad); overflow: hidden; } /* Faint warm-brown blueprint grid behind the window — very subtle, just enough texture so the dark band isn't flat. Content sits above it. */ .feature-row-dark--health::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(214, 170, 122, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(214, 170, 122, 0.06) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); } .feature-row-dark--health > .container { position: relative; z-index: 1; } /* Copy left (narrow), Map window right (wide) — alternates with the stacked Smart Panels section above so the flow zigzags instead of stacking. */ .feature-row--pagehealth { grid-template-columns: minmax(0, 0.52fr) minmax(0, 1.48fr); gap: 44px; } .health-app { position: relative; width: 100%; max-width: 840px; margin: 0; background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.14); border-radius: var(--ui-radius); box-shadow: 0 1px 0 rgba(243, 236, 226, 0.06), 0 40px 80px rgba(0, 0, 0, 0.5); overflow: hidden; font-family: var(--font-ui); } .health-app__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #E4E0D8; border-bottom: 1px solid rgba(29, 23, 18, 0.08); } .health-app__view { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .health-app__body { display: flex; align-items: stretch; } .health-cards { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; align-content: start; } .health-card { text-align: left; background: #F1EEE7; border: 1px solid rgba(29, 23, 18, 0.08); border-radius: 9px; padding: 7px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s, background .18s; } .health-card__top { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--ink); white-space: nowrap; } .health-card__no { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 4px; background: rgba(29, 23, 18, 0.08); font-size: 9.5px; color: var(--muted); } .health-dot { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; flex-shrink: 0; } .health-dot--ok { background: #4C9A6A; } .health-dot--tight { background: var(--amber); } .health-dot--over { background: #D9633A; } .health-card__thumb { position: relative; display: block; aspect-ratio: 36 / 53; border-radius: 5px; overflow: hidden; background: #E7E2D9; } .health-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .health-card__thumb::after { content: ""; position: absolute; inset: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(29, 23, 18, 0.07); } .health-card__meta { font-size: 9.5px; color: var(--muted); font-weight: 600; } .health-card.is-hover { border-color: var(--amber); box-shadow: 0 6px 18px rgba(60, 32, 8, 0.16); background: #FBFAF7; transform: translateY(-2px); } .health-inspector { flex: 0 0 272px; max-width: 272px; background: #EAE6DE; border-left: 1px solid rgba(29, 23, 18, 0.10); } .health-insp__tabs { display: flex; gap: 16px; padding: 12px 16px 0; border-bottom: 1px solid rgba(29, 23, 18, 0.10); background: #E4E0D8; } .health-insp__tab { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; } .health-insp__tab.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--orange); } .health-insp__scroll { padding: 15px 16px 18px; transition: opacity .2s ease; } .health-insp__scroll.is-swapping { opacity: 0.3; transition: opacity .16s ease; } .health-insp__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .health-insp__title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 11px; } .health-insp__verdict { margin-bottom: 14px; } .health-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: var(--radius-pill); } .health-badge--ok { color: #2F7A50; background: rgba(76, 154, 106, 0.15); border: 1px solid rgba(76, 154, 106, 0.34); } .health-badge--tight { color: var(--amber-text); background: rgba(217, 130, 10, 0.14); border: 1px solid rgba(217, 130, 10, 0.34); } .health-badge--over { color: #B4471F; background: rgba(217, 99, 58, 0.16); border: 1px solid rgba(217, 99, 58, 0.36); } .health-insp__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; } .health-stat { background: #F1EEE7; border: 1px solid rgba(29, 23, 18, 0.07); border-radius: 7px; padding: 9px 3px; text-align: center; } .health-stat b { display: block; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1; } .health-stat span { display: block; font-size: 8px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-top: 5px; } .health-stat--total b { color: var(--amber-text); } .health-insp__flabel { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .health-insp__balloon { font-size: 12.5px; font-weight: 600; color: var(--ink); background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.14); border-radius: 8px; padding: 8px 11px; margin-bottom: 13px; } /* min-height reserves a two-line note so the window never changes height as the cursor moves between pages with different verdict copy (no layout shift). */ .health-insp__note { font-size: 11.5px; line-height: 1.5; color: var(--ink2); background: rgba(217, 130, 10, 0.10); border: 1px solid rgba(217, 130, 10, 0.28); border-radius: 8px; padding: 10px 11px; min-height: 78px; } .health-insp__note b { display: block; font-weight: 700; color: var(--amber-text); margin-bottom: 3px; } .health-insp__note--ok { background: rgba(76, 154, 106, 0.10); border-color: rgba(76, 154, 106, 0.28); } .health-insp__note--ok b { color: #2F7A50; } .health-app__cursor { position: absolute; z-index: 8; top: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity .2s ease; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); } .health-app.is-animating .health-app__cursor { opacity: 1; } @media (max-width: 900px) { .feature-row--pagehealth { grid-template-columns: 1fr; } .health-app { max-width: 560px; margin: 0 auto; } } @media (max-width: 620px) { .health-app__body { flex-direction: column; } .health-inspector { flex: none; max-width: none; border-left: none; border-top: 1px solid rgba(29, 23, 18, 0.10); } } @media (prefers-reduced-motion: reduce) { .health-app__cursor { display: none; } } /* ─── EDITOR REVIEW — 2-beat cursor demo (send → in-browser review) ────── One fixed-size window. The browser review view is in normal flow (defines the height and is the no-JS / reduced-motion payoff); the Panelogue editor is an absolute overlay that JS shows first, then crossfades out on the "Share for review" click. Comments animate in only once JS marks the app with .review-app--anim, so they stay visible without JS. */ .review-app { position: relative; width: 100%; max-width: 640px; margin: 0; border-radius: var(--ui-radius); overflow: hidden; background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.14); box-shadow: var(--shadow-lg); font-family: var(--font-ui); } .review-scr__pagehead { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--muted); margin: 0 0 11px; padding-bottom: 7px; border-bottom: 2px solid rgba(29, 23, 18, 0.55); } .review-scr__pagehead b { font-size: 12px; font-weight: 700; color: var(--ink); } .review-scr__pagehead span { letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; font-size: 9px; } .review-scr__pagehead em { margin-left: auto; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); background: rgba(29, 23, 18, 0.06); border-radius: var(--radius-pill); padding: 2px 8px; } .review-scr__panel { display: flex; align-items: flex-start; gap: 5px; margin-bottom: 13px; } .review-scr__no { flex: 0 0 auto; font-size: 9px; font-weight: 700; color: var(--muted); padding-top: 2px; } /* Coloured panel bullet + the vertical line down the panel body — matches the real review view. */ .review-scr__dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin-top: 4px; } .review-scr__blk { min-width: 0; border-left: 2px solid rgba(217, 130, 10, 0.55); padding-left: 9px; margin-left: 4px; } .review-scr__blk p { margin: 0 0 8px; } .review-scr__blk p:last-child { margin-bottom: 0; } /* Loose lines between panels (dialogue tails, SFX) */ .review-scr__loose { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10px; line-height: 1.5; color: var(--ink2); margin: 0 0 11px; } .review-scr__char--loose { margin: 0 0 9px; } /* The block being commented on — outlined amber like the live selection */ .review-scr__sel { border: 1.5px solid var(--amber); background: rgba(232, 137, 28, 0.06); border-radius: 7px; padding: 8px 10px; margin: 0 0 15px; } .review-scr__sel .review-scr__char { margin: 0 0 4px; padding-left: 7px; border-left: 2px solid var(--amber); } .review-scr__sel p { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10px; line-height: 1.5; color: var(--ink2); margin: 0; } .review-scr__slug { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.01em; color: var(--ink); margin-bottom: 5px; } .review-scr__char { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10px; font-weight: 700; color: var(--ink); margin: 7px 0 2px; } .review-scr__panel p { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10px; line-height: 1.5; color: var(--ink2); margin: 0; } /* Browser (payoff) state */ .review-browser { display: flex; flex-direction: column; } .review-browser__chrome { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: #E4E0D8; border-bottom: 1px solid rgba(29, 23, 18, 0.08); } .review-browser__nav { display: flex; gap: 5px; } .review-browser__nav span { width: 7px; height: 7px; border-radius: 50%; background: rgba(29, 23, 18, 0.16); } .review-browser__url { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.10); border-radius: var(--radius-pill); padding: 4px 12px; font-size: 10.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-browser__url svg { flex: 0 0 auto; } .review-browser__top { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #FBFAF7; border-bottom: 1px solid var(--rule); } .review-browser__brand { display: flex; align-items: center; gap: 7px; } .review-browser__brand img { width: 20px; height: 20px; border-radius: 5px; } .review-brand__txt { display: flex; flex-direction: column; line-height: 1.25; } .review-brand__txt b { font-size: 10px; font-weight: 700; color: var(--ink); } .review-brand__txt i { font-style: normal; font-size: 7.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); } .review-browser__doc { display: flex; flex-direction: column; line-height: 1.3; margin-left: 4px; } .review-browser__doc b { font-size: 10.5px; font-weight: 700; color: var(--ink); } .review-browser__doc i { font-style: normal; font-size: 8.5px; color: var(--muted); } .review-browser__as { margin-left: auto; font-size: 9px; font-weight: 600; color: var(--muted); } .review-browser__name { font-size: 9px; color: var(--muted); background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.16); border-radius: 7px; padding: 4px 9px; min-width: 62px; } .review-browser__finish { font-size: 10px; font-weight: 700; color: var(--cta-text, #3A2408); background: var(--amber); border-radius: 8px; padding: 5px 11px; } .review-browser__body { display: flex; align-items: stretch; } .review-browser__script { flex: 1 1 auto; min-width: 0; padding: 15px 16px; } .review-browser__side { flex: 0 0 226px; max-width: 226px; background: #F1EEE7; border-left: 1px solid rgba(29, 23, 18, 0.10); padding: 13px 13px 15px; } .review-side__head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; } .review-side__count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--amber); color: #3A2408; font-size: 10px; font-weight: 700; } .review-side__gen { margin-left: auto; font-size: 8.5px; font-weight: 700; color: var(--ink2); border: 1px solid rgba(29, 23, 18, 0.16); border-radius: var(--radius-pill); padding: 3px 8px; white-space: nowrap; } .review-side__filters { font-size: 10px; color: var(--muted); font-weight: 600; margin-bottom: 8px; } .review-side__filters b { color: #B4471F; } .review-side__filters b.review-side__major { color: #A16207; margin-left: 8px; } .review-side__filters b.review-side__minor { color: #2F7A50; margin-left: 8px; } .review-side__pills { display: flex; gap: 5px; margin-bottom: 11px; } .review-side__pills span { font-size: 8.5px; font-weight: 700; color: var(--ink2); border: 1px solid rgba(29, 23, 18, 0.16); border-radius: var(--radius-pill); padding: 3px 9px; } .review-side__pills span.is-on { background: rgba(232, 137, 28, 0.14); border-color: rgba(217, 130, 10, 0.55); color: #8A5A17; } /* Count / Major tallies flip once the typed comment is posted. Default (no-JS) shows the posted totals. */ .review-swap-a { display: none; } .review-swap-b { display: inline; } .review-app--anim .review-swap-a { display: inline; } .review-app--anim .review-swap-b { display: none; } .review-app--anim.is-posted .review-swap-a { display: none; } .review-app--anim.is-posted .review-swap-b { display: inline; } /* Comment composer — mirrors the live review view */ .review-composer { background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.12); border-radius: 9px; padding: 9px 10px 10px; margin-bottom: 9px; } .review-composer__on { font-size: 9px; color: var(--muted); margin-bottom: 5px; } .review-composer__on b { color: var(--ink); } .review-composer__quote { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 8.5px; color: var(--ink2); border-left: 2px solid var(--amber); background: rgba(29, 23, 18, 0.04); padding: 4px 7px; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-composer__lab { font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); margin: 0 0 4px; } .review-composer__select { display: flex; align-items: center; justify-content: space-between; font-size: 9.5px; color: var(--ink); background: #fff; border: 1px solid rgba(29, 23, 18, 0.16); border-radius: 7px; padding: 5px 8px; margin-bottom: 8px; } .review-composer__seg { display: flex; gap: 4px; margin-bottom: 8px; } .review-composer__seg span { flex: 1 1 0; text-align: center; font-size: 9px; font-weight: 700; color: var(--ink2); border: 1px solid rgba(29, 23, 18, 0.16); border-radius: 7px; padding: 5px 0; } .review-composer__seg span.is-on { background: var(--amber); border-color: var(--amber); color: #3A2408; } .review-note { position: relative; min-height: 40px; font-size: 9.5px; line-height: 1.5; color: var(--ink); background: #fff; border: 1px solid rgba(29, 23, 18, 0.16); border-radius: 7px; padding: 6px 8px; margin-bottom: 8px; } .review-note__ph { color: var(--muted); } .review-note__text { display: none; } .review-note__caret { display: none; width: 1px; height: 10px; background: var(--ink); vertical-align: -1.5px; margin-left: 1px; animation: rvCaret 0.95s steps(1) infinite; } @keyframes rvCaret { 50% { opacity: 0; } } .review-app.is-typing .review-note { border-color: rgba(217, 130, 10, 0.65); box-shadow: 0 0 0 3px rgba(232, 137, 28, 0.12); } .review-app.is-typing .review-note__ph { display: none; } .review-app.is-typing .review-note__text { display: inline; } .review-app.is-typing .review-note__caret { display: inline-block; } .review-composer__actions { display: flex; justify-content: flex-end; gap: 6px; } .review-composer__cancel { font-size: 9.5px; font-weight: 700; color: var(--ink2); border: 1px solid rgba(29, 23, 18, 0.16); border-radius: 7px; padding: 5px 11px; } .review-composer__post { font-size: 9.5px; font-weight: 700; color: #3A2408; background: var(--amber); border-radius: 7px; padding: 5px 11px; transition: transform 0.12s ease; } .review-composer__post.is-press { transform: scale(0.94); } .review-comment { background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.10); border-radius: 9px; padding: 9px 10px; margin-bottom: 9px; transition: opacity 0.45s ease, transform 0.45s ease; } .review-comment:last-child { margin-bottom: 0; } .review-comment__meta { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; } .review-tag { font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: rgba(29, 23, 18, 0.06); border-radius: 4px; padding: 2px 5px; } .review-badge { font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; padding: 2px 5px; } .review-badge--crit { color: #fff; background: #B4471F; } .review-badge--major { color: #3A2408; background: var(--amber); } .review-badge--minor { color: #2F7A50; background: rgba(76, 154, 106, 0.18); } .review-chip { font-size: 8.5px; font-weight: 700; color: var(--muted); border: 1px solid rgba(29, 23, 18, 0.16); border-radius: var(--radius-pill); padding: 1.5px 6px; } .review-comment__ref { margin-left: auto; font-size: 9px; font-weight: 700; color: var(--muted); } .review-comment p { font-size: 11px; line-height: 1.45; color: var(--ink); margin: 0 0 6px; } .review-comment__by { display: flex; align-items: center; font-size: 9px; color: var(--muted); font-weight: 600; } .review-comment__by b { color: var(--ink2); margin-right: 3px; } .review-comment__acts { margin-left: auto; font-size: 8.5px; } /* Status bar along the bottom of the review window */ .review-browser__foot { display: flex; align-items: center; gap: 12px; padding: 7px 14px; background: #FBFAF7; border-top: 1px solid var(--rule); font-size: 8.5px; color: var(--muted); } .review-browser__foot b { color: var(--ink2); } .review-foot__dark { margin-left: auto; } /* Hidden only once JS takes over, then revealed one by one */ .review-app--anim .review-comment { opacity: 0; transform: translateY(8px); } .review-app--anim .review-comment.is-in { opacity: 1; transform: none; } /* Export overlay (beats 1–2) — hidden by default so the browser is the fallback. Beat 1 shows the real Export menu screenshot (top-cropped, the Share Online card is in the first row); beat 2 blurs it under the hand-built "Review link created" modal. */ .review-export { position: absolute; inset: 0; z-index: 3; background: #E7E3DA; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } .review-app.is-beat1 .review-export { opacity: 1; } .review-export__stage { position: relative; } .review-export__stage img { display: block; width: 100%; height: auto; transition: filter 0.45s ease, opacity 0.45s ease; } .review-export.is-modal .review-export__stage img { filter: blur(5px); opacity: 0.5; } /* Invisible hotspot over the "Share Online" card (top-center of the shot). */ .review-export__hot { position: absolute; left: 35.1%; top: 12.2%; width: 29.9%; height: 28.4%; } .review-modal { position: absolute; z-index: 5; left: 50%; top: 49%; width: min(400px, 86%); transform: translate(-50%, -46%) scale(0.93); opacity: 0; transition: opacity 0.38s ease, transform 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.08); background: #ECEAE2; border: 1px solid rgba(29, 23, 18, 0.14); border-radius: 13px; box-shadow: 0 22px 55px rgba(29, 23, 18, 0.3); font-family: var(--font-ui); } .review-export.is-modal .review-modal { opacity: 1; transform: translate(-50%, -50%) scale(1); } .review-modal__head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px 11px; border-bottom: 1px solid rgba(29, 23, 18, 0.1); } .review-modal__icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: rgba(217, 130, 10, 0.16); display: flex; align-items: center; justify-content: center; } .review-modal__headtxt b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 2px; } .review-modal__headtxt p { margin: 0; font-size: 10px; line-height: 1.45; color: var(--ink2); } .review-modal__x { margin-left: auto; flex: 0 0 auto; width: 20px; height: 20px; border: 1px solid rgba(29, 23, 18, 0.14); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); } .review-modal__body { padding: 11px 13px 12px; } .review-modal__label { display: flex; align-items: center; gap: 6px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); margin: 0 0 5px; } .review-modal__label i { font-style: normal; font-size: 8px; background: rgba(29, 23, 18, 0.07); color: var(--muted); border-radius: var(--radius-pill); padding: 1.5px 6px; } .review-modal__row { display: flex; gap: 7px; margin-bottom: 10px; } .review-modal__url, .review-modal__input { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10px; color: var(--ink2); background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.14); border-radius: 8px; padding: 7px 9px; white-space: nowrap; overflow: hidden; display: flex; align-items: center; } .review-modal__url em { font-style: normal; border-radius: 2px; } .review-modal.is-copied .review-modal__url em { background: #BCD3F2; } .review-modal__input { color: var(--muted); } .review-modal__copy, .review-modal__send, .review-modal__done { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #3A2408; background: var(--amber); border-radius: 8px; padding: 7px 14px; transition: transform 0.12s ease, background 0.25s ease, color 0.25s ease; } .review-modal__copy.is-press { transform: scale(0.94); } .review-modal__copy-b { display: none; } .review-modal.is-copied .review-modal__copy { background: #5E9C6F; color: #fff; } .review-modal.is-copied .review-modal__copy-a { display: none; } .review-modal.is-copied .review-modal__copy-b { display: inline; } .review-modal__foot { display: flex; align-items: center; } .review-modal__alt { font-size: 9.5px; color: var(--muted); text-decoration: underline; } .review-modal__done { margin-left: auto; padding: 7px 16px; } /* Beat 3 — the editor's browser slides in OVER the export overlay. JS parks it off-right (.is-off) once the overlay is up, then .is-slide brings it across; removing .is-slide also drops the transition, so resets snap. */ .review-browser { background: #FBFAF7; } .review-app--anim.is-off .review-browser { transform: translateX(107%); } .review-app--anim.is-slide .review-browser { position: relative; z-index: 6; transform: none; transition: transform 0.72s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: -18px 0 40px rgba(29, 23, 18, 0.18); } /* Shared cursor */ .review-app__cursor { position: absolute; z-index: 20; top: 0; left: 0; pointer-events: none; opacity: 0; transition: transform 0.8s cubic-bezier(.4,0,.2,1), opacity 0.3s ease; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); } .review-app.is-cursor .review-app__cursor { opacity: 1; } .review-app__cursor.is-press svg { transform: scale(0.85); transform-origin: 12% 8%; } /* ─── Import demo — File → Import → Final Draft (.fdx) → structure lands ── Static payoff (no-JS / reduced-motion) = the imported state: pages rail + script filled. JS (.import-app--anim) empties it, walks the real menu path, flashes the importing chip, then stagger-fills pages and script lines. */ .import-app { position: relative; width: 100%; max-width: 600px; margin: 0; border-radius: var(--ui-radius); overflow: hidden; background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.14); box-shadow: 0 1px 0 rgba(243, 236, 226, 0.06), 0 30px 60px rgba(0, 0, 0, 0.45); font-family: var(--font-ui); animation: plgFloat 7s ease-in-out infinite; animation-delay: -5s; } @media (prefers-reduced-motion: reduce) { .import-app { animation: none; } } .import-app__bar { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: #E4E0D8; border-bottom: 1px solid rgba(29, 23, 18, 0.08); } .import-dot { width: 8px; height: 8px; border-radius: 50%; } .import-dot--r { background: #EE6A5F; } .import-dot--y { background: #F5BD4F; } .import-dot--g { background: #61C455; } .import-app__logo { width: 15px; height: 15px; border-radius: 4px; margin-left: 4px; } .import-app__appname { font-size: 10.5px; font-weight: 700; color: var(--ink); margin-right: 4px; } .import-app__menu { font-size: 10.5px; font-weight: 600; color: var(--ink); padding: 3px 8px; border-radius: 6px; transition: background 0.15s ease; } .import-app__menu--dim { color: var(--muted); font-weight: 500; } .import-app.is-menu #impFileBtn { background: rgba(29, 23, 18, 0.10); } .import-app__title { margin-left: auto; font-size: 9.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .import-app__ver { flex: 0 0 auto; font-size: 8px; font-weight: 700; color: var(--muted); border: 1px solid rgba(29, 23, 18, 0.16); border-radius: var(--radius-pill); padding: 2.5px 7px; } .import-app__share { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; color: var(--ink2); border: 1px solid rgba(29, 23, 18, 0.18); border-radius: 7px; padding: 3.5px 8px; } .import-app__body { display: flex; align-items: stretch; min-height: 322px; } /* Left icon rail */ .import-app__rail { flex: 0 0 42px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 11px 0; background: #EDE9E0; border-right: 1px solid rgba(29, 23, 18, 0.08); } .import-rail__it { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 6px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); padding: 4px 5px; border-radius: 7px; } .import-rail__it.is-on { color: #8A5A17; background: rgba(232, 137, 28, 0.16); } .import-rail__it.is-on::before { content: ""; position: absolute; left: -8px; top: 4px; bottom: 4px; width: 2.5px; border-radius: 2px; background: var(--amber); } /* Pages column */ .import-app__pages { flex: 0 0 140px; max-width: 140px; background: #F1EEE7; border-right: 1px solid rgba(29, 23, 18, 0.10); padding: 11px 9px; } .import-pages__head { font-size: 8.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; } .import-pages__empty { display: none; font-size: 9.5px; font-style: italic; color: var(--muted); } .import-page { background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.10); border-left: 3px solid rgba(217, 130, 10, 0.6); border-radius: 8px; padding: 5px 7px 6px; margin-bottom: 6px; transition: opacity 0.4s ease, transform 0.4s ease; } .import-page.is-open { background: rgba(232, 137, 28, 0.10); border-color: rgba(217, 130, 10, 0.35); border-left-color: var(--amber); } .import-page__row { display: flex; align-items: center; gap: 4px; } .import-page__row em { font-style: normal; font-size: 8px; color: var(--muted); } .import-page__row b { font-size: 8.5px; font-weight: 700; color: var(--ink); letter-spacing: 0.02em; } .import-page__row u { text-decoration: none; font-size: 6px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8A5A17; background: rgba(232, 137, 28, 0.18); border-radius: 4px; padding: 1.5px 4px; margin-left: auto; } .import-page > i { display: block; font-style: normal; font-size: 7.5px; font-weight: 600; color: var(--muted); margin: 1px 0 0 13px; } .import-panelrow { display: flex; align-items: center; font-size: 8px; color: var(--ink2); margin: 4px 0 0 17px; } .import-dotmark { width: 5px; height: 5px; border-radius: 50%; margin-left: auto; margin-right: 3px; } .import-dotmark--a { background: var(--amber); } .import-dotmark--b { background: #3E78C9; } .import-pages__new { margin-top: 9px; text-align: center; font-size: 8.5px; font-weight: 600; color: var(--muted); border: 1px solid rgba(29, 23, 18, 0.14); border-radius: 8px; padding: 4.5px 0; } /* Script editor — white page card on the tint canvas, margin labels left */ .import-app__script { position: relative; flex: 1 1 auto; min-width: 0; padding: 12px; background: #EFEBE2; } .import-scr__empty { display: none; position: absolute; inset: 0; z-index: 2; align-items: center; justify-content: center; font-size: 10.5px; font-style: italic; color: var(--muted); } .import-card { background: #FEFDFB; border-radius: 6px; box-shadow: 0 1px 3px rgba(29, 23, 18, 0.12), 0 7px 20px rgba(29, 23, 18, 0.08); padding: 12px 12px 13px; min-height: 100%; } .import-line { display: flex; gap: 8px; margin: 0 0 7px; transition: opacity 0.4s ease; } .import-lab { flex: 0 0 50px; text-align: right; font-size: 6px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); padding-top: 2.5px; } .import-line__c { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 8.5px; line-height: 1.55; color: var(--ink2); } .import-line--page { font-weight: 700; color: #B4471F; border-bottom: 1px solid rgba(29, 23, 18, 0.14); padding-bottom: 5px; } .import-line--page em { font-style: normal; font-weight: 600; color: var(--muted); } .import-line--slug { font-weight: 700; color: var(--ink); } .import-line--slug s { display: inline-block; width: 2.5px; height: 8px; margin-right: 6px; border-radius: 2px; background: rgba(29, 23, 18, 0.35); text-decoration: none; } .import-line--slug b { color: #A16207; } .import-line--cap { font-style: italic; background: rgba(232, 137, 28, 0.08); border-left: 2px solid var(--amber); padding: 3px 7px; } .import-line--char { font-weight: 700; color: var(--ink); } /* Inspector */ .import-app__inspector { flex: 0 0 128px; max-width: 128px; background: #F6F3EC; border-left: 1px solid rgba(29, 23, 18, 0.10); padding: 10px; } .import-insp__tabs { display: flex; gap: 8px; margin-bottom: 10px; border-bottom: 1px solid rgba(29, 23, 18, 0.10); padding-bottom: 6px; } .import-insp__tabs span { font-size: 6.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .import-insp__tabs span.is-on { color: var(--ink); box-shadow: 0 7px 0 -5px var(--amber); } .import-insp__c { transition: opacity 0.5s ease; } .import-insp__page { font-size: 9px; font-weight: 700; color: var(--ink); margin-bottom: 8px; } .import-insp__kicker { font-size: 6.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; border-bottom: 1px solid rgba(29, 23, 18, 0.10); padding-bottom: 3px; } .import-insp__stats { display: flex; gap: 5px; margin-bottom: 9px; } .import-insp__stat { flex: 1 1 0; background: #FBFAF7; border: 1px solid rgba(29, 23, 18, 0.10); border-radius: 7px; padding: 5px 0; text-align: center; } .import-insp__stat b { display: block; font-size: 12px; font-weight: 700; color: #A16207; } .import-insp__stat i { font-style: normal; font-size: 5.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .import-insp__check { display: flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 600; color: var(--ink); margin-bottom: 5px; } .import-insp__check span { width: 8px; height: 8px; border: 1px solid rgba(29, 23, 18, 0.3); border-radius: 2.5px; background: #fff; } .import-insp__hint { margin: 0; font-size: 7px; font-style: italic; line-height: 1.5; color: var(--muted); } /* Status bar */ .import-app__foot { display: flex; align-items: center; gap: 8px; padding: 5.5px 12px; background: #ECE9E1; border-top: 1px solid rgba(29, 23, 18, 0.08); font-size: 7.5px; color: var(--muted); } .import-foot__mode { font-weight: 700; color: var(--ink2); } .import-foot__saved { color: #2F7A50; font-weight: 600; } .import-foot__stats { margin-left: auto; transition: opacity 0.5s ease; } .import-foot__stats b { color: var(--ink2); } /* Menus — macOS-style dropdown + submenu, hidden until JS opens them */ .import-menu, .import-submenu { position: absolute; z-index: 12; min-width: 172px; background: #F7F5F0; border: 1px solid rgba(29, 23, 18, 0.12); border-radius: 9px; box-shadow: 0 14px 34px rgba(29, 23, 18, 0.30); padding: 5px; font-size: 10.5px; color: var(--ink); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .import-menu { top: 30px; left: 140px; } .import-submenu { top: 132px; left: 310px; min-width: 148px; } .import-app.is-menu .import-menu { opacity: 1; transform: none; } .import-app.is-submenu .import-submenu { opacity: 1; transform: none; } .import-menu span, .import-submenu span { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4.5px 9px; border-radius: 6px; } .import-menu span em { font-style: normal; font-size: 9.5px; color: var(--muted); } .import-menu .import-menu__sep { display: block; height: 1px; padding: 0; margin: 4px 6px; background: rgba(29, 23, 18, 0.10); border-radius: 0; } .import-app.is-import-hl #impImportItem, .import-app.is-fdx-hl #impFdx { background: #3B7CF5; color: #fff; } .import-app.is-import-hl #impImportItem em { color: #fff; } /* Importing chip */ .import-chip { position: absolute; z-index: 11; left: 50%; top: 46%; display: flex; align-items: center; gap: 7px; background: #ECEAE2; border: 1px solid rgba(29, 23, 18, 0.14); border-radius: 10px; padding: 9px 14px; font-size: 11px; font-weight: 700; color: var(--ink); box-shadow: 0 16px 40px rgba(29, 23, 18, 0.25); opacity: 0; transform: translate(-50%, -50%) scale(0.95); transition: opacity 0.3s ease, transform 0.3s ease; } .import-chip i { font-style: normal; font-weight: 600; color: var(--muted); } .import-app.is-chip .import-chip { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* JS-driven pre-import state */ .import-app--anim .import-page { opacity: 0; transform: translateY(6px); } .import-app--anim .import-page.is-in { opacity: 1; transform: none; } .import-app--anim .import-line { opacity: 0; } .import-app--anim .import-line.is-in { opacity: 1; } .import-app--anim:not(.is-imported) .import-pages__empty { display: block; } .import-app--anim:not(.is-imported) .import-scr__empty { display: flex; } .import-app--anim:not(.is-imported) .import-insp__c { opacity: 0; } .import-app--anim:not(.is-imported) .import-foot__stats { opacity: 0; } /* Cursor (same pattern as the other loops) */ .import-app__cursor { position: absolute; z-index: 20; top: 0; left: 0; pointer-events: none; opacity: 0; transition: transform 0.8s cubic-bezier(.4,0,.2,1), opacity 0.3s ease; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); } .import-app.is-cursor .import-app__cursor { opacity: 1; } .import-app__cursor.is-press svg { transform: scale(0.85); transform-origin: 12% 8%; } @media (max-width: 900px) { .import-app { max-width: 560px; margin: 0 auto; } } @media (max-width: 900px) { .review-app { max-width: 560px; margin: 0 auto; } } @media (max-width: 560px) { .review-browser__body { flex-direction: column; min-height: 0; } .review-browser__side { flex: none; max-width: none; border-left: none; border-top: 1px solid rgba(29, 23, 18, 0.10); } } @media (prefers-reduced-motion: reduce) { .review-app__cursor { display: none; } } .panel-ui__dropdown { position: absolute; z-index: 6; top: calc(100% + 6px); left: 0; right: 46px; background: #FDFCFA; border: 1px solid rgba(29, 23, 18, 0.12); border-radius: 10px; box-shadow: 0 10px 28px rgba(60, 32, 8, 0.20); padding: 6px; max-height: 296px; overflow: hidden; opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s cubic-bezier(.16,.8,.3,1); } .panel-ui.is-picking .panel-ui__dropdown { opacity: 1; transform: none; } .panel-ui__opt { font-size: 13px; color: var(--ink2); padding: 8px 10px; border-radius: 6px; } .panel-ui__opt.is-hover { background: rgba(217, 130, 10, 0.12); color: var(--ink); } /* Group headers inside the staging picker (SHOT / ANGLE / SIZE / SHAPE / TREATMENT / PAGE LAYOUT / PANEL ROLE) — mirrors the real app's menu. */ .panel-ui__grp { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 7px 10px 3px; } .panel-ui__grp:first-child { padding-top: 3px; } .panel-ui__cursor { position: absolute; z-index: 8; top: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); } .panel-ui.is-animating .panel-ui__cursor { opacity: 1; } @media (prefers-reduced-motion: reduce) { .panel-ui__cursor { display: none; } .panel-ui__dropdown { display: none; } } /* ─── Mobile demo miniatures ────────────────────────────────────────── Below 740px the hand-built app windows KEEP their desktop layout and are shrunk whole to fit the screen (main.js sets `zoom` = available/natural width) instead of reflowing into very tall stacked columns. The demo loops don't run at these widths (gated in main.js), so each window shows its static payoff — pinch-zoom for detail. These overrides re-assert the desktop layout against the older stacking rules above. */ /* The JS miniature fitter (main.js) wraps each demo window in this host. `display: contents` makes it invisible to layout on desktop / no-JS; on mobile the fitter switches it to a clipping block sized to the scaled window. */ .mini-fit { display: contents; } @media (max-width: 740px) { /* minmax(0,1fr) keeps the single-column tracks viewport-sized — with plain 1fr the forced-wide windows below would inflate their own grid track, and the JS fitter would measure the inflated parent and skip scaling. */ .feature-row { grid-template-columns: minmax(0, 1fr) !important; } .panel-app { width: 940px; max-width: none; margin: 0; } .panel-app__body { flex-direction: row; } .panel-app__body .panel-ui { flex: 0 0 356px; max-width: 356px; border-left: 1px solid rgba(29, 23, 18, 0.10); border-top: none; } .health-app { width: 840px; max-width: none; margin: 0; } .health-app__body { flex-direction: row; } .health-inspector { flex: 0 0 272px; max-width: 272px; border-left: 1px solid rgba(29, 23, 18, 0.10); border-top: none; } .review-app { width: 640px; max-width: none; margin: 0; } .review-browser__body { flex-direction: row; } .review-browser__side { flex: 0 0 226px; max-width: 226px; border-left: 1px solid rgba(29, 23, 18, 0.10); border-top: none; } .import-app { width: 600px; max-width: none; margin: 0; } /* The fitter drives each window's `transform` (scale-to-fit) inline, but a CSS animation's transform OVERRIDES an inline one — so the idle float (`transform: translateY`) would win and cancel the scale (it did, on import-app). Drop the float on every shrunk window; a static miniature is the payoff here anyway. Must list all four. */ .panel-app, .health-app, .review-app, .import-app { animation: none !important; } /* No dropdown ever opens here (loops are off), so the desktop-only breathing room for the staging menu isn't needed. */ #features.feature-band { padding-bottom: 80px; } }