/* ============================================================ fabledflow.com — site stylesheet. Palette + type follow the "Fabled Flow v2" reference (Instrument Serif + Figtree, cream/ink/green beige monochrome). Content truth pass 2026-08-09 (10.1 / win-3.4). ============================================================ */ :root { --citrus: #DDECB8; --citrus-ink: #3A4A1F; --cream: #FBF7E4; --cream-deep: #F4EFD8; --ink: #191913; --ink-soft: #55554A; --green: #0C4A3C; --sage: #DCEBC9; --orange: #E8862E; --pill-pink: #F6D7DC; --pill-ink: #8C3B4A; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--cream); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; } .serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } /* ---- Header ---- */ header.site { position: sticky; top: 12px; z-index: 50; margin: 12px auto 0; max-width: 1080px; padding: 0 16px; } header.site .bar { display: flex; align-items: center; gap: 20px; background: rgba(251, 247, 228, 0.92); backdrop-filter: blur(12px); border: 1px solid rgba(25, 25, 19, 0.12); border-radius: 16px; padding: 12px 20px; } header.site .logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; color: var(--ink); text-decoration: none; } header.site .logo img { width: 26px; height: 26px; border-radius: 6px; } header.site .logo { white-space: nowrap; } @media (max-width: 720px) { header.site .logo { font-size: 16px; } header.site .bar { gap: 10px; padding: 10px 14px; } } header.site nav { margin-left: auto; display: flex; gap: 18px; align-items: center; } header.site nav a { color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 600; } header.site nav a:hover { color: var(--ink); } .btn { display: inline-flex; align-items: center; gap: 8px; /* Citrus-palette button (owner 2026-07-18): light like the app's Citrus colorway, dark visible text; hover inverts. */ background: var(--citrus); color: var(--citrus-ink); border-radius: 12px; padding: 11px 20px; font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid rgba(58, 74, 31, 0.25); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, color 0.2s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(58, 74, 31, 0.30); background: var(--citrus-ink); color: var(--citrus); } .btn.secondary { background: transparent; color: var(--green); border: 1.5px solid var(--green); } .btn.big { font-size: 17px; padding: 15px 28px; border-radius: 14px; } /* ---- Sections ---- */ section { padding: 96px 0; } section.tight { padding: 64px 0; } h2.display { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(42px, 4.8vw, 70px); line-height: 1.05; } .kicker { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin-bottom: 16px; } .lead { font-size: 19px; color: var(--ink-soft); max-width: 640px; } /* Scroll reveal (matches the reference's data-reveal behavior). Hidden ONLY when JS has tagged — with scripts off or broken, every element stays visible. */ html.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; } html.js [data-reveal].in { opacity: 1; transform: none; } /* Animations REPLAY when a section re-enters the viewport after fully leaving it (owner 2026-07-18) — the observer toggles .in both ways. */ @media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1; transform: none; transition: none; } .pill-demo span, .type-demo .caret { animation: none; } } /* ---- Cards ---- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; } .card { background: var(--cream-deep); border: 1px solid rgba(25, 25, 19, 0.10); border-radius: 18px; padding: 26px; } .card h3 { font-size: 18px; margin-bottom: 8px; } .card p { font-size: 15px; color: var(--ink-soft); } .card .num { font-family: 'Instrument Serif', Georgia, serif; font-size: 44px; line-height: 1; color: var(--green); display: block; margin-bottom: 10px; } /* ---- The animated pill ---- */ .pill-demo { display: inline-flex; align-items: center; gap: 5px; background: var(--pill-pink); border-radius: 999px; padding: 14px 26px; box-shadow: 0 10px 34px rgba(140, 59, 74, 0.25); } .pill-demo span { display: block; width: 4px; height: 22px; border-radius: 2px; background: var(--pill-ink); /* scaleY, not height: height animation re-lays-out the whole page every frame; a transform stays on the compositor. */ animation: wave 1.1s ease-in-out infinite; } @keyframes wave { 0%, 100% { transform: scaleY(0.28); } 50% { transform: scaleY(1); } } .pill-demo span:nth-child(1) { animation-delay: 0s; } .pill-demo span:nth-child(2) { animation-delay: 0.15s; } .pill-demo span:nth-child(3) { animation-delay: 0.3s; } .pill-demo span:nth-child(4) { animation-delay: 0.45s; } .pill-demo span:nth-child(5) { animation-delay: 0.6s; } .pill-demo span:nth-child(6) { animation-delay: 0.75s; } .pill-demo span:nth-child(7) { animation-delay: 0.9s; } /* ---- Typing demo ---- */ .type-demo { background: #fff; border: 1px solid rgba(25, 25, 19, 0.12); border-radius: 16px; padding: 22px 26px; font-size: 17px; max-width: 620px; min-height: 84px; box-shadow: 0 14px 40px rgba(25, 25, 19, 0.08); } .type-demo .caret { display: inline-block; width: 2px; height: 1.15em; background: var(--green); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ---- Comparison table ---- */ .table-scroll { overflow-x: auto; } table.compare { border-collapse: collapse; width: 100%; min-width: 560px; } table.compare th, table.compare td { text-align: left; padding: 14px 18px; border-bottom: 1px solid rgba(25, 25, 19, 0.12); font-size: 15.5px; } table.compare th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); } table.compare td.good { color: var(--green); font-weight: 800; } /* ---- The MacBook Neo fan (owner spec 2026-07-18: mimic Apple's Neo animation — cards lie flat, then spin up into a fan, 3D feel; Apple's color order Silver, Blush, Citrus, Indigo; our software in view) ---- */ .neo-fan { position: relative; height: clamp(300px, 46vw, 470px); perspective: 1400px; margin-top: 40px; } .neo-fan .fan-card { position: absolute; left: 50%; top: 12px; width: min(540px, 74vw); border-radius: 14px; box-shadow: 0 24px 60px rgba(25, 25, 19, 0.30); transform-origin: 50% 125%; /* pivot below the card, like a hand of cards */ transform: translateX(-50%) rotate(0deg) rotateX(24deg) scale(0.9); transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .neo-fan .fan-card img { width: 100%; display: block; border-radius: 14px; border: 1px solid rgba(25, 25, 19, 0.16); } .neo-fan .c1 { z-index: 1; } .neo-fan .c2 { z-index: 2; transition-delay: 0.08s; } .neo-fan .c3 { z-index: 3; transition-delay: 0.16s; } .neo-fan .c4 { z-index: 4; transition-delay: 0.24s; } /* Fanned-up state (the reveal observer adds .in) */ .neo-fan.in .c1 { transform: translateX(-50%) rotate(-16deg) translateY(8px) rotateX(0) scale(1); } .neo-fan.in .c2 { transform: translateX(-50%) rotate(-5.5deg) translateY(-8px) rotateX(0) scale(1); } .neo-fan.in .c3 { transform: translateX(-50%) rotate(5.5deg) translateY(-8px) rotateX(0) scale(1); } .neo-fan.in .c4 { transform: translateX(-50%) rotate(16deg) translateY(8px) rotateX(0) scale(1); } .neo-legend { display: flex; gap: 22px; justify-content: center; margin-top: 26px; flex-wrap: wrap; } .neo-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink-soft); } .neo-legend i { width: 13px; height: 13px; border-radius: 50%; display: inline-block; border: 1px solid rgba(25,25,19,0.2); } @media (prefers-reduced-motion: reduce) { .neo-fan .fan-card { transition: none; } } /* ---- Dark band sections ---- */ .band { background: var(--green); color: var(--cream); border-radius: 28px; padding: 72px 56px; text-align: center; } .band h2 { color: var(--cream); } .band .lead { color: var(--sage); margin: 18px auto 30px; } .band .btn { background: var(--cream); color: var(--green); } /* ---- FAQ ---- */ details.faq { border-bottom: 1px solid rgba(25, 25, 19, 0.14); padding: 18px 4px; } details.faq summary { font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } details.faq summary::after { content: "+"; font-size: 22px; color: var(--green); } details.faq[open] summary::after { content: "–"; } details.faq p { margin-top: 10px; color: var(--ink-soft); font-size: 15.5px; max-width: 700px; } /* ---- Footer ---- */ footer.site { margin-top: 60px; padding: 44px 0 60px; border-top: 1px solid rgba(25, 25, 19, 0.12); font-size: 14.5px; color: var(--ink-soft); } footer.site .cols { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; } footer.site a { color: var(--ink-soft); text-decoration: none; display: block; margin-bottom: 8px; } footer.site a:hover { color: var(--ink); } footer.site h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; color: var(--ink); } /* ---- Subpages ---- */ .subpage h1 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(38px, 4.4vw, 60px); margin: 48px 0 10px; } .subpage .updated { color: var(--ink-soft); font-size: 14px; margin-bottom: 36px; } .subpage h2 { font-size: 22px; margin: 34px 0 10px; } .subpage p, .subpage li { color: #3A3A2E; font-size: 16px; max-width: 760px; } .subpage ul { padding-left: 22px; margin: 10px 0; } .subpage .entry { border-left: 3px solid var(--sage); padding: 4px 0 4px 20px; margin: 26px 0; } .subpage .entry .v { font-weight: 800; font-size: 18px; } .subpage .entry .d { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 6px; } @media (max-width: 720px) { header.site nav a.hide-m { display: none; } section { padding: 64px 0; } .band { padding: 48px 24px; } } /* ---- The dictation demo (owner's design, 2026-07-18): press fn -> audio streams into the pill -> waveform reacts -> release -> the finished text appears AT ONCE. Text is never typed out: Fabled Flow doesn't rewrite anyone's words (that story lives in the AI section). */ .flowdemo { text-align: center; } .flowstage { display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .flowstage__say { font-size: 14px; font-weight: 600; color: var(--ink-soft); } .fnkey { font-size: 12.5px; font-weight: 700; color: var(--ink); background: linear-gradient(#fff, #efeae1); border: 1px solid rgba(25, 25, 19, 0.22); border-bottom-width: 3px; border-radius: 7px; padding: 7px 9px 5px; line-height: 1; transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease, border-bottom-width 0.12s ease; } .flowstage.is-pressed .fnkey { transform: translateY(2px); border-bottom-width: 1px; background: var(--pill-ink); color: #fff; border-color: var(--pill-ink); } .flowfeed { width: 48px; height: 18px; opacity: 0; transition: opacity 0.35s ease; -webkit-mask: linear-gradient(90deg, transparent, #000 60%); mask: linear-gradient(90deg, transparent, #000 60%); } .flowfeed svg { display: block; width: 48px; height: 18px; } .flowfeed path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 7; } .flowstage.is-live .flowfeed { opacity: 1; } .flowstage.is-live .flowfeed path { animation: streamflow 0.55s linear infinite; } @keyframes streamflow { to { stroke-dashoffset: -12; } } .flowpill { display: inline-flex; align-items: center; justify-content: center; background: var(--pill-pink); border-radius: 999px; padding: 12px 22px; box-shadow: 0 10px 26px rgba(140, 59, 74, 0.28); position: relative; } .flowpill__wave { display: flex; align-items: center; gap: 3px; height: 20px; } /* v1.1 (owner): bars mirror the REAL pill — center bars thicker than the edges, and the LIVE animation is driven by script like real speech: heights jump up on "words" and sink between them, randomly, never a uniform sine sweep. The CSS keeps only the smoothing transition. */ .flowpill__wave i { width: var(--bw, 3px); height: 4px; background: var(--pill-ink); border-radius: 3px; transition: height 0.14s ease; } .flowdemo__text { margin: 18px auto 0; font-size: 17px; color: var(--ink); max-width: 560px; min-height: 3em; font-weight: 500; opacity: 0; transition: opacity 0.5s ease; } .flowdemo__text.show { opacity: 1; } /* v1.1 (owner + his app screenshot): the AI marker sits INSIDE the pill at the LEFT, like the real app — and the pill visibly WIDENS when AI turns on, narrows again when a second Z-tap turns it off. */ .ai-badge { background: var(--pill-ink); color: var(--pill-pink); font-size: 9.5px; font-weight: 800; padding: 3px 7px; border-radius: 999px; margin-right: 9px; max-width: 0; padding-left: 0; padding-right: 0; margin-right: 0; opacity: 0; overflow: hidden; /* v1.2 (owner): the AI marker snaps in/out right on the Z tap — 0.35s read as laggy. */ transition: max-width 0.15s ease, opacity 0.12s ease, padding 0.15s ease, margin 0.15s ease; } .flowstage.ai-on .ai-badge { max-width: 40px; opacity: 1; padding-left: 7px; padding-right: 7px; margin-right: 9px; } /* v1.1: the hands-free stop button — red circle, white square, at the pill's right, exactly like the real recording pill. */ .stopbtn { width: 18px; height: 18px; border-radius: 50%; background: #E5484D; display: inline-flex; align-items: center; justify-content: center; margin-left: 10px; flex: none; } .stopbtn::before { content: ""; width: 7px; height: 7px; border-radius: 1.5px; background: #fff; } /* v1.1: mini pill demos inside the gesture cards — hidden until the key goes down, then the pill blooms in with a live waveform. */ .minipill { display: inline-flex; align-items: center; margin-left: 12px; background: var(--pill-pink); border-radius: 999px; padding: 9px 16px; box-shadow: 0 8px 20px rgba(140, 59, 74, 0.24); opacity: 0; transform: scale(0.85); transition: opacity 0.3s ease, transform 0.3s ease; } .minipill.on { opacity: 1; transform: scale(1); } /* v1.1: the dictionary mini-demo ("Your words, your spelling") — the add-an-entry moment, recreated in the site's own language. */ .dictdemo { margin-top: 14px; font-size: 12px; position: relative; min-height: 74px; } .dictdemo .stagebox { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; } .dictdemo .stagebox.on { opacity: 1; } .dictdemo .row { display: flex; align-items: center; gap: 7px; background: rgba(241, 184, 196, 0.25); border: 1px solid rgba(140, 59, 74, 0.18); border-radius: 12px; padding: 9px 10px; } .dictdemo .field { flex: 1; background: #fff; border: 1px solid rgba(25,25,19,0.14); border-radius: 8px; padding: 6px 9px; color: var(--ink); white-space: nowrap; overflow: hidden; } .dictdemo .field .ghost { color: rgba(25,25,19,0.38); } .dictdemo .addbtn { background: var(--pill-ink); color: #fff; font-weight: 700; border-radius: 8px; padding: 6px 12px; } .dictdemo .arrow { color: var(--ink-soft); font-weight: 700; } .dictdemo .entry .spoken { color: var(--ink-soft); } .dictdemo .entry .written { font-weight: 800; color: var(--ink); } .dictdemo .toggle { margin-left: auto; width: 30px; height: 18px; border-radius: 999px; background: rgba(25,25,19,0.18); position: relative; transition: background 0.3s ease; flex: none; } .dictdemo .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left 0.3s ease; } .dictdemo .stagebox.on .toggle.live { background: var(--pill-ink); } .dictdemo .stagebox.on .toggle.live::after { left: 14px; } /* v1.3 (owner): the entry BUILDS in order — the heard word appears, then the write-instead word, then the cursor clicks Add. */ .dictdemo .stageval { opacity: 0; transition: opacity 0.35s ease; } .dictdemo.stage-hear .hearval { opacity: 1; } .dictdemo.stage-write .writeval { opacity: 1; } /* v1.2 (owner): a little mouse cursor glides onto Add and CLICKS it — the click presses the button and the entry saves. */ .dictdemo .democursor { position: absolute; right: 46px; top: 54px; opacity: 0; z-index: 3; pointer-events: none; transition: transform 0.65s cubic-bezier(.25,.6,.35,1), opacity 0.2s ease; } .dictdemo.cursor-in .democursor { opacity: 1; transform: translate(30px, -36px); } .dictdemo .addbtn { transition: transform 0.1s ease, filter 0.1s ease; } .dictdemo.cursor-click .democursor { transform: translate(30px, -36px) scale(0.82); } .dictdemo.cursor-click .addbtn { transform: translateY(1px) scale(0.95); filter: brightness(0.8); } /* v1.1: before/after blocks keep their line breaks. */ .ba .a { white-space: pre-line; } /* ---- Marker underline (Wispr-style hand-drawn stroke, pill pink) ---- */ .marker { position: relative; white-space: nowrap; } .marker svg { position: absolute; left: -2%; bottom: -0.18em; width: 104%; height: 0.42em; overflow: visible; } .marker svg path { fill: none; stroke: var(--pill-pink); stroke-width: 7; stroke-linecap: round; filter: saturate(1.3); } /* ---- App marquee ---- */ .marquee { overflow: hidden; margin-top: 44px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: inline-flex; gap: 14px; padding: 4px 0; animation: marquee 36s linear infinite; will-change: transform; } @keyframes marquee { to { transform: translateX(-50%); } } .appchip { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: #fff; border: 1px solid rgba(25, 25, 19, 0.12); border-radius: 999px; padding: 9px 16px; font-size: 14.5px; font-weight: 700; color: var(--ink); } .appchip i { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; } /* ---- Card mini-demos ---- */ .keycap-demo { display: inline-block; margin-bottom: 12px; } .keycap-demo .fnkey { animation: keypulse 2.6s ease-in-out infinite; } @keyframes keypulse { 0%, 55%, 100% { transform: translateY(0); border-bottom-width: 3px; } 12%, 40% { transform: translateY(4px); border-bottom-width: 1px; background: var(--pill-ink); color: #fff; } } .handsfree-demo { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; } .handsfree-demo .plus { font-size: 13px; font-weight: 700; color: var(--ink-soft); } .handsfree-demo .spacekey { padding-left: 22px; padding-right: 22px; } /* fn + space is a QUICK simultaneous tap, released quickly (owner). */ .handsfree-demo .fnkey { animation: chordtap 3.6s ease-in-out infinite; } @keyframes chordtap { 0%, 12%, 19%, 100% { transform: translateY(0); border-bottom-width: 3px; } 14%, 17% { transform: translateY(4px); border-bottom-width: 1px; background: var(--pill-ink); color: #fff; } } /* ---- AI before/after examples ---- */ .ba { text-align: left; font-size: 14px; } .ba .b, .ba .a { border-radius: 10px; padding: 10px 12px; } .ba .b { background: rgba(25,25,19,0.05); color: var(--ink-soft); } .ba .arrow { text-align: center; color: var(--green); font-weight: 800; padding: 4px 0; } .ba .a { background: #fff; border: 1px solid rgba(25,25,19,0.12); white-space: pre-line; } /* ---- Speed stat tiles ---- */ .stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 36px 0 10px; } .stat-tiles .tile { background: var(--cream-deep); border: 1px solid rgba(25,25,19,0.10); border-radius: 18px; padding: 24px; } .stat-tiles .tile .big { font-family: 'Instrument Serif', Georgia, serif; font-size: 42px; color: var(--green); line-height: 1.1; } .stat-tiles .tile p { font-size: 14px; color: var(--ink-soft); margin-top: 6px; } /* ---- Navigation (owner revision 2, 2026-07-18 night): full button nav on desktop; hamburger ONLY at mobile widths, as a standard right-to-left slide-out drawer with big type. ---- */ .burger { width: 40px; height: 40px; border: 1px solid rgba(25,25,19,0.15); border-radius: 10px; background: transparent; cursor: pointer; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; z-index: 95; position: relative; } .burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.28s ease, opacity 0.2s ease; } .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Language picker (owner revision 3): a simple outline box with the drawer's solid cream background — matching the page, not a button. */ .lang-btn { position: relative; display: inline-flex; align-items: center; background: var(--cream); border: 1px solid rgba(25,25,19,0.25); border-radius: 10px; padding: 9px 14px; color: var(--ink); font-weight: 600; font-size: 14px; } .lang-btn:hover { background: var(--cream-deep); transform: none; box-shadow: none; } .lang-btn select { appearance: none; -webkit-appearance: none; border: none; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; padding-right: 12px; } .lang-btn::after { content: ""; position: absolute; right: 13px; top: 50%; margin-top: -2px; border: 4px solid transparent; border-top-color: currentColor; pointer-events: none; } .lang-btn select:focus { outline: none; } .lang-btn:hover select { color: inherit; } /* Mobile slide-out drawer (right to left). */ .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 84vw); background: var(--cream); border-left: 1px solid rgba(25,25,19,0.14); box-shadow: -24px 0 60px rgba(25,25,19,0.18); z-index: 90; padding: 84px 26px 26px; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); display: flex; flex-direction: column; gap: 4px; } .drawer.open { transform: translateX(0); } .drawer a { display: block; padding: 14px 10px; border-radius: 12px; color: var(--ink); font-weight: 700; font-size: 19px; text-decoration: none; } .drawer a:hover { background: var(--cream-deep); } .drawer .lang-row { border-top: 1px solid rgba(25,25,19,0.12); margin-top: 12px; padding: 16px 10px 0; font-size: 14px; color: var(--ink-soft); font-weight: 700; } .drawer .lang-select { width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(25,25,19,0.25); background: var(--cream); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; } .drawer-backdrop { position: fixed; inset: 0; background: rgba(25,25,19,0.35); z-index: 85; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .drawer-backdrop.open { opacity: 1; pointer-events: auto; } @media (max-width: 720px) { header.site nav a.navlink, header.site .lang-btn.desktop { display: none; } .burger { display: inline-flex; } } /* Tutorial page: video placeholder frames */ .tut-video { background: var(--cream-deep); border: 2px dashed rgba(25,25,19,0.22); border-radius: 16px; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-weight: 700; font-size: 14.5px; margin-top: 14px; } /* Stronger, more physical key depress (owner: the key didn't read as pushed down) — deeper travel, inner shadow, springier timing. v1.2 (owner): the RELEASE is a quick springy pop — the key comes up and the color snaps back FAST (50%→53%, ~100ms) with a 1px rebound overshoot, like a real key springing back under your finger. */ @keyframes keypress2 { 0%, 71%, 100% { transform: translateY(0) scale(1); border-bottom-width: 3px; box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset; } 8%, 66% { transform: translateY(6px) scale(0.96); border-bottom-width: 0px; background: var(--pill-ink); color: #fff; border-color: var(--pill-ink); box-shadow: 0 3px 6px rgba(0,0,0,0.45) inset; } 69% { transform: translateY(-1px) scale(1); border-bottom-width: 3px; background: linear-gradient(#fff, #efeae1); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset; } } .keycap-demo .fnkey { animation: keypress2 3.2s ease-in-out infinite; } /* v1.3 (owner): hands-free presses fn FIRST, then space a beat later; both are released TOGETHER with the quick springy snap. */ .handsfree-demo .fnkey { animation: hfFn 4.5s ease-in-out infinite; } .handsfree-demo .spacekey { animation: hfSpace 4.5s ease-in-out infinite; } @keyframes hfFn { 0%, 4%, 14.5%, 100% { transform: translateY(0); border-bottom-width: 3px; box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset; } 6%, 13.5% { transform: translateY(5px); border-bottom-width: 0px; background: var(--pill-ink); color: #fff; border-color: var(--pill-ink); box-shadow: 0 2px 4px rgba(0,0,0,0.35) inset; } 14.1% { transform: translateY(-1px); border-bottom-width: 3px; background: linear-gradient(#fff, #efeae1); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset; } } @keyframes hfSpace { 0%, 7%, 14.5%, 100% { transform: translateY(0); border-bottom-width: 3px; box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset; } 9%, 13.5% { transform: translateY(5px); border-bottom-width: 0px; background: var(--pill-ink); color: #fff; border-color: var(--pill-ink); box-shadow: 0 2px 4px rgba(0,0,0,0.35) inset; } 14.1% { transform: translateY(-1px); border-bottom-width: 3px; background: linear-gradient(#fff, #efeae1); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset; } } .demo-say { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-right: 7px; } /* The REAL pill (actual app captures) in the flow demo. */ .flowpill-real img { display: block; width: 240px; height: auto; border-radius: 999px; box-shadow: 0 10px 26px rgba(140, 59, 74, 0.25); } /* fn+Z corrected gesture (owner): fn presses and STAYS held while Z taps briefly and releases. */ #aiStage .fn-hold { animation: fnhold 8s ease-in-out infinite; } #aiStage .z-tap { animation: ztap 8s ease-in-out infinite; } @keyframes fnhold { 0%, 92%, 100% { transform: translateY(0); border-bottom-width: 3px; box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset; } 8%, 84% { transform: translateY(4px); border-bottom-width: 0px; background: var(--pill-ink); color: #fff; border-color: var(--pill-ink); box-shadow: 0 2px 4px rgba(0,0,0,0.35) inset; } } /* Z is a QUICK tap with an equally quick release (owner). */ /* v1.1 (owner): TWO quick Z taps per cycle — on, then off. v1.2 (owner): the color snaps back FAST after each tap (19%→20.5%, ~120ms — the old 26%/66% fade read as slow), a real key's quick springy rebound. */ @keyframes ztap { 0%, 15%, 100% { transform: translateY(0); border-bottom-width: 3px; box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset; } 17%, 19% { transform: translateY(4px); border-bottom-width: 0px; background: var(--pill-ink); color: #fff; border-color: var(--pill-ink); box-shadow: 0 2px 4px rgba(0,0,0,0.35) inset; } 20.5% { transform: translateY(0); border-bottom-width: 3px; background: linear-gradient(#fff, #efeae1); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset; } 55% { transform: translateY(0); border-bottom-width: 3px; } 57%, 59% { transform: translateY(4px); border-bottom-width: 0px; background: var(--pill-ink); color: #fff; border-color: var(--pill-ink); box-shadow: 0 2px 4px rgba(0,0,0,0.35) inset; } 60.5% { transform: translateY(0); border-bottom-width: 3px; background: linear-gradient(#fff, #efeae1); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset; } }