/* ============================================================================ Ledgester /story/ - "Sach Mein?" illustrated scrollytelling landing. Design system + scene choreography. Vanilla CSS, no libraries. Three modes (set on by story.js): .no-js -> MODE_STATIC floor: every scene shows its FINAL pose, doubts pre-struck, stamps imprinted. Fully readable. .js.mode-static -> reduced-motion / saveData: same final poses, JS-gated fade-in only. .js.mode-step -> primary mobile: IntersectionObserver crossfades poses A..D at scroll thresholds. data-state on each .stage. .js.mode-scrub -> desktop enhancement: continuous --p (0..1) per stage drives in-between choreography on top of the poses. One accent (#0066FF) and it always means "proven or paid". No em/en dashes anywhere. Numbers reconcile: 5000 + 450 + 450 = 5900. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; cursor: pointer; } a { color: inherit; } :root { --ink: #0A0A0A; --ink-2: #52525B; --ink-3: #6B6B73; --paper: #FBFBFD; --paper-2: #F3F2EE; /* app cream surface */ --line: #E7E7EA; --accent: #0066FF; --accent-ink: #0047CC; --accent-10: rgba(0,102,255,.10); --accent-06: rgba(0,102,255,.06); --night: #08080C; --night-2: #111119; --app-green: #128a4f; /* mic, lives inside phone glass only */ --app-green-2:#e7f4ec; --red: #E5484D; --amber: #C77B22; --serif: 'Fraunces', Georgia, serif; /* time-of-day wash, driven by story.js writing --clock (0..1) on :root */ --clock: 0; --warmth: 0; --rail-w: 190px; --maxw: 1180px; } /* ---- time-of-day wash: one fixed overlay, never above 6% ---- */ .wash { position: fixed; inset: 0; z-index: 60; pointer-events: none; background: radial-gradient(120% 90% at 78% 8%, rgba(255, 214, 140, calc(var(--warmth) * 0.10)) 0%, rgba(255, 170, 90, calc(var(--warmth) * 0.06)) 40%, transparent 72%); opacity: 1; transition: none; } @media (prefers-reduced-motion: reduce) { .wash { display: none; } } /* ============================ shared type ============================ */ .kicker { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); } .serif { font-family: var(--serif); font-style: italic; font-weight: 400; } /* the doubt lockups: live DOM text, huge Fraunces italic */ .doubt { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; line-height: .96; letter-spacing: -.02em; font-size: clamp(2.4rem, 9vw, 6.4rem); color: var(--ink); position: relative; display: inline-block; } .doubt .q2 { color: var(--accent); display: block; } /* the strike overlay: aria-hidden svg absolutely on top, drawn on prove */ .doubt-strike { position: absolute; left: -2%; top: 42%; width: 104%; height: 40%; pointer-events: none; overflow: visible; } .doubt-strike path { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); } /* copy panels */ .copy { max-width: 30rem; } .copy .en { font-size: clamp(1.05rem, 1.4vw, 1.35rem); line-height: 1.5; color: var(--ink); font-weight: 500; margin: 0 0 .5rem; } .copy .hi { font-size: clamp(.95rem, 1.2vw, 1.1rem); line-height: 1.55; color: var(--ink-2); margin: 0; } .copy .en .em { font-family: var(--serif); font-style: italic; color: var(--accent); } /* ============================ hero ============================ */ .hero { position: relative; min-height: 100svh; padding: clamp(20px, 4vw, 40px); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; } .hero-top { max-width: var(--maxw); margin: 0 auto; width: 100%; } .hero-fine { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); } .hero-mid { max-width: var(--maxw); margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 2rem; } .hero-head { font-family: var(--serif); font-style: italic; line-height: .92; font-size: clamp(3rem, 12vw, 9rem); letter-spacing: -.03em; margin: 0; } .hero-head .l1 { color: var(--ink); display: block; } .hero-head .l2 { color: var(--accent); display: block; } .hero-cursor { display: inline-block; width: .06em; height: .82em; background: var(--accent); margin-left: .06em; vertical-align: -.06em; animation: blink 1.06s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .hero-phone-wrap { justify-self: center; align-self: end; width: min(300px, 74vw); position: relative; } .hero-bottom { max-width: var(--maxw); margin: 0 auto; width: 100%; text-align: center; padding-top: 8px; } .hero-cue { font-size: 13.5px; color: var(--ink-2); } .hero-cue b { color: var(--ink); font-weight: 600; } .hero-skip { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-10); padding-bottom: 1px; } .hero-skip:hover { border-color: var(--accent); } .scroll-chevron { margin: 10px auto 0; width: 22px; height: 22px; color: var(--ink-3); animation: bob 1.8s ease-in-out infinite; } @keyframes bob { 50% { transform: translateY(6px); } } @media (max-width: 780px) { .hero-mid { grid-template-columns: 1fr; text-align: center; gap: 1.2rem; } .hero-phone-wrap { align-self: center; width: min(240px, 64vw); } } /* ============================ phone shell ============================ */ .phone { width: 100%; aspect-ratio: 320 / 660; position: relative; filter: drop-shadow(0 24px 48px rgba(10,10,20,.14)); } .phone > .phone-bezel { width: 100%; height: 100%; } .phone .screen-html { position: absolute; overflow: hidden; /* screen inset inside the 320x660 bezel (see phone svg) */ left: 5.6%; top: 4.4%; right: 5.6%; bottom: 4.4%; border-radius: 26px; } .screen-html * { box-sizing: border-box; } /* ============================ scene + sticky stage ============================ */ .scene { position: relative; } .stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; } .stage-inner { position: relative; width: 100%; max-width: var(--maxw); height: 100%; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); display: grid; grid-template-columns: 1fr minmax(240px, 320px) 1fr; align-items: center; gap: 2rem; } .stage .doubt-slot { grid-column: 1 / 2; justify-self: end; text-align: right; align-self: center; } .stage .phone-slot { grid-column: 2 / 3; justify-self: center; width: 100%; position: relative; } .stage .copy-slot { grid-column: 3 / 4; justify-self: start; } /* Desktop: the doubt sits behind the phone as a muted background question. Uses an explicit muted colour that clears >=3:1 large-text contrast, instead of a blanket .34 opacity (which pushed both lines below WCAG AA and made the accent q2 line near-invisible). The q2 accent + mobile stay full-strength. */ @media (min-width: 781px) { .stage .doubt { color: #83838A; } .scene.dark .stage .doubt { color: rgba(255,255,255,.5); } } /* dark scenes */ .scene.dark { background: var(--night); color: #fff; } .scene.dark .copy .en { color: #fff; } .scene.dark .copy .hi { color: rgba(255,255,255,.62); } .scene.dark .doubt { color: #fff; } /* timestamp: a little postmark stamped on top of the phone. Centred over the phone via left/right/margin (NOT transform) so the rotate+scale stampIn stays free. Anchored to .phone-slot (position:relative), straddling its top edge. */ .timestamp { position: absolute; z-index: 6; left: 0; right: 0; margin-inline: auto; width: max-content; top: -14px; font-family: var(--serif); font-style: italic; font-size: clamp(13px, 1.35vw, 18px); color: var(--accent); background: rgba(255,255,255,.93); border: 2px solid var(--accent); border-radius: 8px; padding: 3px 11px; transform: rotate(-4deg) scale(.6); opacity: 0; transform-origin: center; letter-spacing: .01em; font-weight: 500; white-space: nowrap; pointer-events: none; box-shadow: 0 7px 18px rgba(10,10,20,.14); } /* closing scenes have no phone; drop the stamp to a visible top-centre spot */ .scene.ghar .timestamp, #cta .timestamp { top: clamp(18px, 6vh, 56px); } .stage[data-state]:not([data-state="idle"]) .timestamp { animation: stampIn .16s cubic-bezier(.2,1.4,.5,1) forwards; } .no-js .timestamp, .mode-static .timestamp { opacity: .92; transform: rotate(-4deg) scale(1); } @keyframes stampIn { 0% { opacity: 0; transform: rotate(-4deg) scale(1.5); } 60% { opacity: 1; transform: rotate(-4deg) scale(.92); } 100% { opacity: .92; transform: rotate(-4deg) scale(1); } } /* ============================ pose system ============================ */ /* Each scene's phone/overlay has .pose-* layers; the active pose is revealed by data-state on the stage. Default (JS idle) = pose A visible. */ .pose { transition: opacity .3s ease; } [data-poses] .pose { position: absolute; inset: 0; opacity: 0; } [data-poses] .pose.pose-a { opacity: 1; } .stage[data-state="a"] .pose { opacity: 0; } .stage[data-state="a"] .pose-a { opacity: 1; } .stage[data-state="b"] .pose { opacity: 0; } .stage[data-state="b"] .pose-b { opacity: 1; } .stage[data-state="c"] .pose { opacity: 0; } .stage[data-state="c"] .pose-c { opacity: 1; } .stage[data-state="d"] .pose { opacity: 0; } .stage[data-state="d"] .pose-d { opacity: 1; } .stage[data-state="done"] .pose { opacity: 0; } .stage[data-state="done"] .pose:last-child { opacity: 1; } /* no-js / static: show the LAST pose of each scene */ .no-js [data-poses] .pose, .mode-static [data-poses] .pose { opacity: 0 !important; transition: none; } .no-js [data-poses] .pose-final, .mode-static [data-poses] .pose-final { opacity: 1 !important; } /* and pre-strike the doubts */ .no-js .doubt-strike path, .mode-static .doubt-strike path { stroke-dashoffset: 0 !important; } /* struck state (set by JS when proof lands) */ .stage.struck .doubt-strike path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s ease .05s; } /* ============================ scoreboard ============================ */ .scoreboard { position: fixed; z-index: 50; right: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 12px 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(251,251,253,.82); backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s ease; } .scoreboard.show { opacity: 1; } .sb-count { font-size: 10.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; writing-mode: vertical-rl; letter-spacing: .04em; } .sb-slots { display: flex; flex-direction: column; gap: 7px; } .sb-slot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink-3); transition: background .3s, border-color .3s, transform .3s; } .sb-slot.hit { background: var(--accent); border-color: var(--accent); transform: scale(1.18); } @media (max-width: 780px) { .scoreboard { right: 0; left: 0; top: 0; bottom: auto; transform: none; width: 100%; flex-direction: row; justify-content: center; gap: 8px; border-radius: 0; border: none; border-bottom: 1px solid var(--line); padding: 6px 10px; height: 30px; } .sb-count { writing-mode: horizontal-tb; } .sb-slots { flex-direction: row; gap: 6px; } } /* ============================ sticky mini CTA ============================ */ .mini-cta { position: fixed; z-index: 55; left: 50%; bottom: 16px; transform: translate(-50%, 140%); visibility: hidden; background: var(--ink); color: #fff; border: none; border-radius: 999px; padding: 11px 20px; font-size: 14px; font-weight: 600; letter-spacing: .01em; box-shadow: 0 10px 30px rgba(10,10,20,.28); transition: transform .35s cubic-bezier(.2,.9,.3,1); } .mini-cta.show { transform: translate(-50%, 0); visibility: visible; } .mini-cta.retire { transform: translate(-50%, 140%); } /* ============================ rubber stamp rig ============================ */ .stamp { position: absolute; font-weight: 800; letter-spacing: .02em; border: 3px solid currentColor; border-radius: 8px; padding: 5px 11px; color: var(--accent); background: transparent; text-transform: uppercase; font-size: 15px; transform: rotate(-8deg) scale(1.6); opacity: 0; font-family: 'Inter', sans-serif; } .stamp.thunk { animation: thunk .14s cubic-bezier(.2,1.5,.5,1) forwards; } .no-js .stamp, .mode-static .stamp { opacity: .95; transform: rotate(-8deg) scale(1); } @keyframes thunk { 0% { opacity: 0; transform: rotate(-8deg) scale(1.6); } 55% { opacity: 1; transform: rotate(-8deg) scale(.9); } 100% { opacity: .95; transform: rotate(-8deg) scale(1); } } .stamp.green { color: var(--app-green); } .stamp.red { color: var(--red); } .stamp.paid { color: var(--app-green); font-size: 17px; } /* ============================ odometer ============================ */ .odo { font-variant-numeric: tabular-nums; font-weight: 700; } /* ============================ hand doodles ============================ */ .doodle path, .doodle circle, .doodle line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .scribble { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: 13px; line-height: 1.3; } /* ============================ mobile stage layout (step mode) ============================ */ @media (max-width: 780px) { .stage { height: auto; min-height: 100svh; top: 0; } .stage-inner { grid-template-columns: 1fr; gap: 1rem; padding: 40px 18px 24px; align-content: center; } .stage .doubt-slot { grid-column: 1; justify-self: center; text-align: center; opacity: 1; order: 1; } .stage .phone-slot { grid-column: 1; order: 2; width: min(260px, 66vw); justify-self: center; } .stage .copy-slot { grid-column: 1; order: 3; justify-self: center; text-align: center; } .copy { max-width: 30rem; } /* sit the stamp on the phone's top edge, clear of the doubt heading above */ .timestamp { top: -6px; } .scene.ghar .timestamp, #cta .timestamp { top: clamp(14px, 4vh, 40px); } } /* reduced motion: kill all non-essential animation */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* utility */ .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ============================ CTA scene ============================ */ .cta-stage { background: var(--night); color: #fff; } .cta-wrap { text-align: center; max-width: 460px; padding: 0 20px; } .cta-doubt { font-size: clamp(2.6rem, 8vw, 5rem); color: #fff; line-height: 1; margin: 0; } .cta-lead { color: rgba(255,255,255,.6); font-size: 1.05rem; margin: 12px 0 26px; } .cta-invoice { background: #fff; color: var(--ink); border-radius: 18px; padding: 22px; text-align: left; box-shadow: 0 30px 70px rgba(0,0,0,.5); } .cta-inv-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--line); padding-bottom: 12px; margin-bottom: 16px; } .cta-inv-head span { font-size: 11px; letter-spacing: .18em; color: var(--ink-3); font-weight: 700; } .cta-inv-head b { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--accent); } .cta-flbl { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; display: block; margin-bottom: 6px; } .cta-field input { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 600; letter-spacing: .02em; } .cta-field input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-10); } .cta-err { color: #B4262A; font-size: 12.5px; margin: 8px 0 0; } .cta-submit { position: relative; width: 100%; margin-top: 14px; background: var(--ink); color: #fff; border: none; border-radius: 12px; padding: 15px; font-size: 15px; font-weight: 700; overflow: hidden; } .cta-submit .cta-stamp { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Inter',sans-serif; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 3px solid var(--accent); border-radius: 10px; transform: rotate(-7deg) scale(1.5); opacity: 0; background: #fff; } .cta-submit.pressed .cta-stamp { animation: thunk .16s cubic-bezier(.2,1.5,.5,1) forwards; } .cta-fine { text-align: center; color: var(--ink-3); font-size: 12px; margin: 12px 0 0; } .cta-ok { margin-top: 14px; text-align: center; color: var(--app-green); font-weight: 700; font-size: 14px; } /* ============================ footer ============================ */ .story-foot { background: var(--night); color: rgba(255,255,255,.7); padding: 28px 20px 40px; } .story-foot-in { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: 14px; } .story-foot-in span { font-weight: 700; color: #fff; } .story-foot-in a { color: rgba(255,255,255,.7); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.2); } /* ============================ review fixes: mobile fit + perf + a11y ============================ */ /* mobile scoreboard: solid bar, no per-frame backdrop reblur */ @media (max-width: 780px) { .scoreboard { backdrop-filter: none; background: rgba(251,251,253,.97); } } /* short viewports: keep doubt + phone + copy inside one sticky pane in MODE_STEP. Without this the stacked column overflows a pinned frame and the copy sits below the fold. */ @media (max-width: 780px) { .stage .phone-slot { width: min(220px, 52vw); } .phone { max-height: 52svh; width: auto; margin-inline: auto; } } @media (max-width: 780px) and (max-height: 740px) { .stage-inner { padding: 30px 18px 16px; gap: .55rem; } .stage .phone-slot { width: min(150px, 38vw); } .doubt { font-size: clamp(1.8rem, 7.5vw, 2.8rem); } .copy .hi { display: none; } /* keep the EN line; drop the second paragraph */ .copy .en { font-size: 1rem; } }