/* ============================================================================= Archivo — home landing (noma visual system) A calm, scrolling landing page in noma's exact style: warm paper, pastel blobs, Georgia-serif headings, lavender accent, hand-drawn line-art. Deliberately NO 3D backgrounds, NO aurora, and NO scroll-triggered live previews (the old scene's "pop-out" editor previews are gone — everything here is static artwork). ISOLATED STYLESHEET: index.html loads ONLY this file (not css/styles.css), so the shared marketing-site styles used by pricing / login / about / etc. are left completely untouched. Palette + type lifted 1:1 from the noma reference. ============================================================================= */ :root { --ink: #242331; --muted: #6f6d7b; --paper: #fbfaf7; --white: #ffffff; --lavender: #c5b3d2; --lavender-deep: #8e769f; --peach: #fde2e1; --peach-deep: #e5aeb3; --mint: #c6d89d; --mint-deep: #819a5c; --cream: #f6e9ba; --accent: #647a5b; /* primary action, links, and focus */ --accent-hover: #4f6247; --stroke: rgba(36, 35, 49, 0.12); --shadow: 0 28px 80px rgba(55, 50, 81, 0.11); --radius-lg: 34px; --radius-md: 24px; --shell: min(1440px, calc(100vw - 56px)); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; /* clip (not hidden) so the hero art's horizontal overflow is contained WITHOUT turning into a scroll container — the latter breaks the pinned `position: sticky` showcase in Section 2. */ overflow-x: clip; } a { color: inherit; text-decoration: none; } button, input { font: inherit; } button { color: inherit; } svg { display: block; } .shell { width: var(--shell); margin-inline: auto; } .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; } /* ---------------------------------------------------------------- header / nav */ /* Sticky bar — transparent over the paper, then a controlled dose of the app's liquid-glass (frosted paper + hairline) on scroll (.scrolled set by js/home.js). */ .site-header { position: sticky; top: 0; z-index: 20; padding: 24px 0; border-bottom: 1px solid transparent; transition: background 240ms ease, box-shadow 240ms ease, border-color 240ms ease, padding 240ms ease; } .site-header.scrolled { background: rgba(251, 250, 247, 0.72); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border-bottom-color: var(--stroke); box-shadow: 0 10px 30px -18px rgba(55, 50, 81, 0.18); } .nav { display: flex; align-items: center; justify-content: space-between; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 760; font-size: 22px; letter-spacing: -0.04em; } .brand-mark { width: 30px; height: 30px; } .nav-menu { display: flex; align-items: center; gap: 52px; } .nav-links, .nav-actions { display: flex; align-items: center; gap: 30px; } .nav-links a, .text-link { color: #5f5d69; font-size: 14px; transition: color 180ms ease; } .nav-links a:hover, .text-link:hover { color: var(--ink); } .nav-toggle { display: none; border: 0; background: transparent; padding: 8px; cursor: pointer; } .nav-toggle > span:not(.sr-only) { display: block; width: 24px; height: 1.5px; margin: 6px 0; background: var(--ink); transition: transform 180ms ease; } /* ---------------------------------------------------------------- buttons */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 54px; padding: 0 24px; border-radius: 18px; font-size: 14px; font-weight: 700; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; } .button:hover { transform: translateY(-2px); } .button-dark { color: #fff; background: var(--accent); box-shadow: 0 12px 28px rgba(100, 122, 91, 0.24); } .button-dark:hover { box-shadow: 0 16px 34px rgba(100, 122, 91, 0.32); background: var(--accent-hover); } .button-small { min-height: 43px; padding: 0 18px; border-radius: 14px; font-size: 13px; gap: 10px; } .button-quiet { background: transparent; color: var(--ink); } .button-quiet svg { width: 25px; height: 25px; padding: 5px; border: 1px solid rgba(36, 35, 49, .18); border-radius: 50%; } .button-quiet svg path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; } /* ---------------------------------------------------------------- focus */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .footer :focus-visible { outline-color: var(--lavender); } .footer-newsletter input:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; } /* ================================================================= hero */ .hero { min-height: 720px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 44px; padding-top: 46px; padding-bottom: 70px; } /* left copy */ .hero-copy { align-self: center; } .eyebrow { display: flex; align-items: center; gap: 10px; color: #74717e; font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; } .eyebrow > span { width: 19px; height: 8px; border-radius: 999px; background: var(--peach); } h1, .section-heading, .cta-card h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.055em; } h1 { max-width: 15ch; margin: 22px 0 22px; font-size: clamp(46px, 5vw, 78px); line-height: .98; } em { font-weight: 400; color: var(--accent); } /* italic Georgia accent, matching noma */ .hero-text { max-width: 46ch; margin: 0 0 30px; color: var(--muted); font-size: 17px; line-height: 1.7; } .hero-actions { display: flex; align-items: center; gap: 12px; } .hero-note { display: flex; align-items: center; gap: 16px; margin-top: 36px; } .hero-note p { margin: 0; color: #7d7a84; font-size: 11px; line-height: 1.55; } .hero-note strong { color: #504e5a; font-weight: 750; } .avatar-stack { display: flex; padding-left: 8px; } .avatar { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -8px; border: 3px solid var(--paper); border-radius: 50%; color: var(--ink); font-size: 10px; font-weight: 800; } .avatar-one { background: var(--peach); } .avatar-two { background: var(--mint); } .avatar-three { background: var(--lavender); } /* right artwork (pure line-art, no previews) */ .hero-art { position: relative; align-self: stretch; min-height: 590px; } .soft-shape { position: absolute; filter: blur(.2px); } .shape-lavender { width: 60%; aspect-ratio: 530 / 475; top: 6%; left: 14%; border-radius: 43% 57% 47% 53% / 54% 41% 59% 46%; background: var(--lavender); transform: rotate(-7deg); } .shape-peach { width: 30%; aspect-ratio: 1; right: 2%; bottom: 8%; border-radius: 54% 46% 54% 46%; background: var(--peach); transform: rotate(18deg); } .shape-mint { width: 20%; aspect-ratio: 1; left: 4%; bottom: 18%; border-radius: 50% 50% 46% 54% / 52% 48% 52% 48%; background: var(--mint); transform: rotate(-12deg); } .hero-doodle { position: absolute; z-index: 2; fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .doodle-spark { width: 44px; top: 4%; right: 20%; } .doodle-loop { width: 128px; left: 2%; bottom: 4%; } .people-art { position: absolute; z-index: 3; width: 62%; top: 48%; left: 50%; transform: translate(-50%, -48%); } .people-art svg { width: 100%; height: auto; overflow: visible; } .line-art path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .line-art .fill-lavender { fill: var(--lavender); } .line-art .fill-peach { fill: var(--peach); } .line-art .fill-cream { fill: #fff4d1; } .line-art .idea-spark { fill: var(--lavender); } /* the tree: a flowing pastel line-art illustration (provided art — brown linework + pastel leaves, its own inline colors). The fruit are real 3D models hung on top (.tree-fruit / .fruit-hang / .fruit3d). */ .tree-art { position: absolute; z-index: 3; width: 96%; left: 50%; top: 50%; transform: translate(-50%, -50%); } .tree-art svg, .tree-art img.tree-svg { display: block; width: 100%; height: auto; overflow: visible; user-select: none; -webkit-user-drag: none; } /* the fruit: real 3D models (, assets/*.glb) hung at the branch tips. Each .fruit-hang is TOP-anchored at its tip and swings from that pivot — a dangling fruit; the model itself faces the viewer. Poster = the glossy app icon, which also shows via :not(:defined) if WebGL / the module can't load, so the tree always fruits. All motion is disabled under prefers-reduced-motion. */ .tree-fruit { position: absolute; inset: 0; } .fruit-hang { position: absolute; left: var(--x); top: var(--y); width: var(--sz); height: var(--sz); transform: translate(-50%, 32%); /* hang a little BELOW the branch/leaf */ transform-origin: 50% -32%; /* …but still swing from the branch tip */ cursor: pointer; z-index: 1; animation: dangle 4.6s ease-in-out infinite; will-change: transform; } .fruit3d { width: 100%; height: 100%; --poster-color: transparent; background: transparent; filter: drop-shadow(0 9px 10px rgba(90, 70, 60, .18)); transition: scale 260ms cubic-bezier(.34, 1.56, .64, 1), transform 200ms ease; } .fruit3d::part(default-progress-bar) { display: none; } /* no loading bar over the fruit */ /* before the module upgrades the element (or if it never does): show the icon */ .fruit3d:not(:defined) { background-image: var(--poster); background-size: 82%; background-position: center; background-repeat: no-repeat; } .fruit-hang:hover { animation-play-state: paused; z-index: 3; } /* hover: pop a touch, then swing from the TOP like a dangling pendant (not a shake around the middle) — transform-origin pins the pivot to top-centre. scale is its own property so it composes with the wiggle's transform: rotate(). */ .fruit-hang:hover .fruit3d { scale: 1.1; transform-origin: 50% 0; animation: fruit-wiggle .9s ease-in-out infinite; } .fruit-hang.is-falling { animation: fruit-fall 1s cubic-bezier(.4, 0, .7, 1) forwards; z-index: 4; } .fruit-hang:nth-of-type(2) { animation-delay: -.7s; animation-duration: 5s; } .fruit-hang:nth-of-type(3) { animation-delay: -1.6s; animation-duration: 4.2s; } .fruit-hang:nth-of-type(4) { animation-delay: -2.4s; animation-duration: 5.2s; } .fruit-hang:nth-of-type(5) { animation-delay: -3.1s; animation-duration: 4.6s; } .fruit-hang:nth-of-type(6) { animation-delay: -3.8s; animation-duration: 5.4s; } @keyframes dangle { 0%, 100% { transform: translate(-50%, 32%) rotate(3.2deg); } 50% { transform: translate(-50%, 32%) rotate(-3.2deg); } } /* hover swing: a gentle pendulum sway through centre. Paired with transform-origin:50% 0 on the fruit, it reads as a pendant dangling from the top rather than a shake. Starts/ends at 0deg so entry and loop are seamless. */ @keyframes fruit-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } } @keyframes fruit-fall { 0% { transform: translate(-50%, 32%) rotate(0deg); opacity: 1; } 12% { transform: translate(-50%, 24%) rotate(-12deg); } 100% { transform: translate(-50%, 520%) rotate(150deg); opacity: 0; } } .idea-card { position: absolute; z-index: 5; top: 2%; right: 3%; display: flex; flex-direction: column; gap: 10px; width: 152px; padding: 16px 16px 14px; border: 5px solid rgba(255, 255, 255, .5); border-radius: 20px; background: rgba(255, 255, 255, .92); box-shadow: 0 18px 45px rgba(65, 56, 92, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .idea-card .mini-label { color: #94909e; font-size: 8px; font-weight: 800; letter-spacing: .14em; } .idea-card .idea-svg { width: 84px; align-self: center; overflow: visible; } .idea-card .idea-svg path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sync-chip { position: absolute; z-index: 5; right: 6%; bottom: 12%; display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 5px solid rgba(255, 255, 255, .5); border-radius: 16px; background: rgba(255, 255, 255, .95); box-shadow: 0 18px 45px rgba(65, 56, 92, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .sync-chip .status-dot { width: 9px; height: 9px; border-radius: 50%; background: #82bd9d; box-shadow: 0 0 0 5px #e5f2eb; } .sync-chip strong { display: block; font-size: 9px; } .sync-chip small { color: #85818d; font-size: 7px; } /* ================================================================= app strip */ .app-strip { padding: 22px 0 58px; text-align: center; } .app-strip > p { margin: 0 0 26px; color: #6e6b78; font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; } .app-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 24px; color: #777480; } .app-row span { display: inline-flex; align-items: center; gap: 8px; font-family: Georgia, serif; font-size: 17px; font-weight: 600; } .app-row b { color: #a7a2ae; font-family: sans-serif; font-size: 19px; font-weight: 400; } /* ================================================================= sections */ .section { padding-block: 118px; } .section-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 42px; color: #6b6873; font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; } .section-kicker span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #eeeafa; color: #7168a8; font-size: 9px; } .intro-grid, .how-heading { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 80px; } .section-heading { margin: 0; font-size: clamp(44px, 5vw, 68px); line-height: 1.04; } .section-copy { max-width: 430px; margin: 0 0 7px; color: var(--muted); font-size: 15px; line-height: 1.8; } /* features bento */ .bento-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 20px; margin-top: 70px; } .bento-card { position: relative; min-height: 470px; overflow: hidden; border-radius: var(--radius-lg); } .bento-large { grid-column: 1 / -1; min-height: 500px; display: grid; grid-template-columns: .67fr 1.33fr; align-items: center; } .bento-lavender { background: var(--lavender); } .bento-mint { background: var(--mint); } .bento-peach { background: var(--peach); } .bento-copy { position: relative; z-index: 2; padding: 52px; } .number { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 58px; border: 1px solid rgba(36, 35, 49, .18); border-radius: 50%; font-size: 9px; font-weight: 750; } .bento-copy h3 { margin: 0 0 13px; font-family: Georgia, serif; font-size: 34px; font-weight: 400; letter-spacing: -.035em; } .bento-copy p { max-width: 300px; margin: 0; color: #6f6c77; font-size: 14px; line-height: 1.65; } .bento-copy a { display: inline-flex; align-items: center; gap: 16px; margin-top: 26px; font-size: 12px; font-weight: 750; } .bento-copy a span { transition: transform 160ms ease; } .bento-copy a:hover span { transform: translateX(4px); } /* Card 01 — the Invoice Table screenshot (assets/Images/01.png) shown as a "peeking" panel: its top-left area is visible while the rest bleeds off the card's right + bottom edges (cropped by .bento-card's overflow:hidden), tilted a touch, with NO drop shadow. background-size scales the image so a readable top-left region fills the window; background-position pins that top-left. */ .invoice-shot { align-self: end; justify-self: end; width: min(100%, 660px); height: 430px; margin: 0 -54px -74px 24px; border-radius: 16px; overflow: hidden; transform: rotate(-1.6deg); background: #fff url("../assets/Images/01.png") top left / 1480px auto no-repeat; } /* Card 02 — "Ask Simba, get answers" is a horizontal card: copy on the left, the WHOLE Simba preview (assets/previews/simba-preview.html) contained on the right (portrait, nothing cropped). On a real pointer it scales up MUCH larger and pops above the grid — the card lets it overflow and its z-index is raised. js/home.js fills the portrait wrapper via --se-scale; the frame is pointer-inert. The .bento-card.bento-simba selector out-specifies .bento-small's column flex. */ .bento-card.bento-simba { flex-direction: row; align-items: center; gap: 22px; padding: 30px 36px; overflow: visible; } .bento-card.bento-simba .bento-copy { flex: 1 1 auto; padding: 0; } .simba-embed { position: relative; flex: 0 0 auto; width: clamp(300px, 56%, 470px); aspect-ratio: 740 / 824; overflow: hidden; border-radius: 16px; box-shadow: 0 20px 44px -26px rgba(20, 45, 30, .42); transition: transform .34s cubic-bezier(.22, 1, .36, 1), box-shadow .34s ease; } .simba-embed-frame { position: absolute; top: 0; left: 0; width: 740px; height: 824px; border: 0; background: transparent; pointer-events: none; transform: scale(var(--se-scale, .58)); transform-origin: top left; } @media (hover: hover) { .simba-embed { cursor: pointer; } .simba-embed:hover { transform: scale(1.45); z-index: 30; box-shadow: 0 54px 104px -34px rgba(20, 45, 30, .5), 0 20px 44px -24px rgba(20, 45, 30, .34); } } .bento-small { display: flex; flex-direction: column; justify-content: space-between; } .bento-small .bento-copy { padding-top: 15px; } .bento-small .number { margin-bottom: 35px; } /* Grow to absorb the card's extra height (it stretches to match the taller Simba card in the same row) so the artwork stays vertically centered instead of being pinned to the top with a dead gap below. */ .line-illustration { flex: 1 1 auto; min-height: 200px; padding: 18px 16px 10px; margin: 0 -4px; transition: transform .45s cubic-bezier(.22, 1, .36, 1); } .line-illustration svg { width: 100%; height: 100%; overflow: visible; } .line-illustration path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .line-illustration .fill-lavender { fill: var(--lavender); } .line-illustration .fill-peach { fill: var(--peach); } .line-illustration .fill-cream { fill: #fff4d1; } .line-illustration .idea-spark { fill: var(--lavender); } .collab-shot { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; animation: collab-float 7s ease-in-out infinite; } /* Collaborate illustration: a slow ambient float (the independent `translate` property, so it composes cleanly with the card's reveal transform) plus a gentle lift on hover. Fade-in on scroll is inherited from the card's .reveal wrapper, so the image is never separately hidden — no risk of it being stranded invisible. */ .bento-peach:hover .line-illustration { transform: translateY(-6px) scale(1.015); } @keyframes collab-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } } @media (prefers-reduced-motion: reduce) { .collab-shot { animation: none !important; } } /* how / editor showcase — scroll-pinned, synced Simba previews ---------------- Section 2 pins while you scroll: each of the 7 editor previews holds for a scroll "period" (STEP_VH in home.js), then the next steps in. Every editor plays inside the lavender rounded stage; the 5 with a matching Simba panel build IN SYNC (Simba posts shp:reset/shp:generate → home.js relays preview:reset/preview:generate to the ?sync=1 editor iframe). Falls back to a plain clickable switcher when the pin is inactive (mobile / reduced-motion). */ /* this section breaks OUT of the normal 1180 content width so the preview can be genuinely large on wide screens; heading + showcase share the wider track. */ .how-section { background: #f2f0ed; --how-w: min(1560px, calc(100vw - 56px)); } .how-shell { width: var(--how-w); margin-inline: auto; } .how-heading { align-items: end; } .how-heading .section-kicker { margin-bottom: 34px; } .how-heading .section-copy { justify-self: end; } /* tall wrapper = the scroll travel that drives the pin; height set by home.js */ .showcase-scroll { position: relative; margin-top: 60px; } .showcase-pin { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(74px, 11vh, 120px) 0 44px; } .showcase { width: var(--how-w); margin-inline: auto; display: grid; grid-template-columns: .44fr 1.56fr; gap: clamp(22px, 3vw, 50px); align-items: center; } /* the lavender "purple rectangle" that holds the live preview — big + landscape */ .showcase-stage { --accent: #647a5b; position: relative; overflow: hidden; height: min(76vh, 720px); min-height: 460px; border-radius: var(--radius-lg); background: var(--lavender); } /* thin purple frame around the (now much larger) preview */ .showcase-panel { position: absolute; inset: clamp(8px, 1vw, 14px); opacity: 0; visibility: hidden; /* delay visibility:hidden until AFTER the fade, so the OUTGOING preview stays painted through the whole crossfade — no mid-transition flash to bare lavender (that was the flicker). the incoming panel shows at once + fades in. */ transition: opacity 420ms ease, visibility 0s linear 420ms; } .showcase-panel.is-active { opacity: 1; visibility: visible; z-index: 2; transition: opacity 420ms ease, visibility 0s; } /* editor window = white rounded card inside the lavender rect */ .preview-window { position: absolute; inset: 0; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -30px rgba(53, 48, 78, .45), 0 10px 24px -18px rgba(53, 48, 78, .3); } .preview-chrome { position: absolute; z-index: 2; top: 13px; left: 15px; display: flex; gap: 6px; pointer-events: none; } .preview-chrome i { width: 10px; height: 10px; border-radius: 50%; background: rgba(36, 35, 49, .1); } /* pointer-inert: the editor is a non-interactive preview, so the wheel/clicks pass straight through to the pinned page (and to the Simba pebble on top). */ .preview-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #fff; pointer-events: none; } /* Simba chat panel, floating over the editor's right side, in sync with the build. Wrapped: the wrapper handles hover/scale, while the iframe inside stays pointer-inert so it never eats the page scroll or clicks. At rest it recedes to 50% opacity; on hover it grows + goes fully opaque. Scaled via --sc-simba-scale. */ .preview-simba { position: absolute; z-index: 3; /* bottom lifted so the floating Simba pebble button owns the bottom-right corner (like the real app: the panel stacks above its launcher). */ right: clamp(10px, 1.8vw, 26px); bottom: clamp(72px, 9vh, 104px); width: 430px; height: 918px; border-radius: 22px; overflow: hidden; transform: scale(var(--sc-simba-scale, .46)); transform-origin: right bottom; opacity: .5; box-shadow: 0 34px 72px -30px rgba(20, 45, 30, .5), 0 14px 30px -20px rgba(20, 45, 30, .34); transition: opacity 300ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1), box-shadow 300ms ease; cursor: pointer; } .preview-simba:hover { opacity: 1; transform: scale(calc(var(--sc-simba-scale, .46) * 1.16)); box-shadow: 0 46px 96px -30px rgba(20, 45, 30, .58), 0 20px 44px -22px rgba(20, 45, 30, .42); z-index: 5; } .preview-simba-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; pointer-events: none; } /* hidden when Simba is toggled off (via the floating pebble button below) */ .showcase-stage.simba-off .preview-simba { opacity: 0; visibility: hidden; pointer-events: none; } /* The ACTUAL app Simba launcher: the floating pebble at the bottom-right corner (a 1:1 of App.tsx's `fixed bottom-6 right-6 h-12 w-12 rounded-full` button with the SimbaLogoIcon inside). Clicking it shows/hides the Simba panel. Sits above everything so it's clickable whether Simba is on or off. */ .preview-simba-fab { position: absolute; z-index: 6; right: clamp(0px, 0.3vw, 4px); bottom: clamp(14px, 1.9vw, 24px); width: clamp(36px, 4vw, 48px); height: clamp(36px, 4vw, 48px); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; opacity: .62; filter: drop-shadow(0 10px 22px rgba(30, 132, 94, .28)); transition: opacity .2s ease, transform .2s ease; -webkit-tap-highlight-color: transparent; } .preview-simba-fab .simba-pebble { width: 92%; height: 92%; display: block; } .preview-simba-fab:hover { opacity: 1; transform: scale(1.1); } .preview-simba-fab:active { transform: scale(.95); } .preview-simba-fab:focus-visible { outline: 2px solid var(--accent, #8075c2); outline-offset: 3px; } /* fully present when Simba is off (it's the only way back), a touch softer when on */ .showcase-stage.simba-off .preview-simba-fab { opacity: .9; } /* left explainer — accordion list; the active app darkens + expands its blurb */ .showcase-explainer { display: flex; flex-direction: column; } .sc-item { position: relative; display: block; width: 100%; padding: 20px 2px; border: 0; border-top: 1px solid rgba(36, 35, 49, .13); background: none; text-align: left; cursor: pointer; } /* the divider line above each name IS the scroll track: it fills left→right with the app's accent as you scroll that app's band (0→100%). Only when the whole line is filled does the next app take over. Completed lines stay full. */ .sc-item::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; z-index: 1; width: var(--sc-fill, 0%); max-width: 100%; background: var(--accent, #8075c2); border-radius: 2px; transition: width 90ms linear; } .sc-title { display: flex; align-items: center; gap: 13px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(21px, 2.3vw, 29px); font-weight: 400; letter-spacing: -.02em; line-height: 1.12; color: #a6a2ae; transition: color 300ms ease; } .sc-item:hover .sc-title { color: #6c6976; } .sc-item.is-active .sc-title { color: var(--ink); } .sc-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent, #8075c2); opacity: 0; transform: scale(.3); transition: opacity 300ms ease, transform 300ms ease; } .sc-item.is-active .sc-dot { opacity: 1; transform: scale(1); } .sc-desc { display: block; max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; color: var(--muted); font-size: 14px; line-height: 1.62; transition: max-height 450ms ease, opacity 350ms ease, margin-top 450ms ease; } .sc-item.is-active .sc-desc { max-height: 140px; margin-top: 12px; opacity: 1; } /* ================================================================= cta */ .cta-section { padding-top: 20px; padding-bottom: 120px; } .cta-card { position: relative; overflow: hidden; padding: 104px 40px; border-radius: var(--radius-lg); background: #e6e1fa; text-align: center; } .cta-card .eyebrow { justify-content: center; } .cta-card .eyebrow > span { background: var(--mint); } .cta-card h2 { margin: 26px 0 20px; font-size: clamp(50px, 6vw, 74px); line-height: 1; } .cta-card > p { margin: 0 0 30px; color: #6f6b79; font-size: 15px; } .cta-card .button { min-width: 200px; } .cta-card > small { display: block; margin-top: 16px; color: #5c5866; font-size: 11px; } .cta-doodle { position: absolute; width: 190px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .7; } .left-doodle { left: 25px; bottom: -8px; } .right-doodle { right: 20px; top: 22px; } /* ================================================================= footer */ .footer { padding: 80px 0 26px; background: #242331; color: #f7f5f2; } .footer-grid { display: grid; grid-template-columns: 1.25fr repeat(3, .65fr) 1.25fr; gap: 45px; } .footer .brand-mark { width: 30px; height: 30px; } .footer-brand p { margin-top: 26px; color: #aaa8b1; font-family: Georgia, serif; font-size: 19px; line-height: 1.4; } .footer-column { display: flex; flex-direction: column; gap: 15px; } .footer-column strong, .footer-newsletter > strong { margin-bottom: 8px; font-size: 13px; } .footer-column a { color: #aaa8b1; font-size: 13px; } .footer-column a:hover { color: white; } .footer-newsletter form { display: flex; margin-top: 20px; padding: 4px; border-radius: 12px; background: #33313f; } .footer-newsletter input { width: 100%; padding: 10px 12px; border: 0; outline: 0; color: white; background: transparent; font-size: 13px; } .footer-newsletter input::placeholder { color: #85828f; } .footer-newsletter button { width: 36px; border: 0; border-radius: 9px; background: var(--lavender); cursor: pointer; } .footer-newsletter small { display: block; margin-top: 10px; color: #7f7c88; font-size: 11px; } .footer-bottom { display: flex; justify-content: flex-start; margin-top: 68px; padding-top: 25px; border-top: 1px solid rgba(255, 255, 255, .08); color: #777480; font-size: 12px; } /* ================================================================= reveal */ /* Reveals are hidden ONLY when an inline script has confirmed JS is live (html.reveal-anim). If that script — or home.js — never runs, .reveal keeps its default opacity:1 and content is simply visible. Progressive enhancement: a scripting failure can never strand content, it just skips the fade. */ .reveal-anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms ease; } .reveal-anim .reveal.visible { opacity: 1; transform: translateY(0); } /* hard fail-safe: set by an inline timer (independent of home.js) — snaps any straggler to visible with NO transition, so a stalled frame loop, a dead observer, suppressed scroll events, or a failed home.js can never leave content at opacity:0. */ html.reveals-forced .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* ================================================================= responsive */ @media (max-width: 1080px) { :root { --shell: min(920px, calc(100vw - 40px)); } .nav-menu { gap: 30px; } .nav-links, .nav-actions { gap: 20px; } .hero { grid-template-columns: 1.08fr .92fr; gap: 30px; } .intro-grid, .how-heading { gap: 40px; } .bento-large { grid-template-columns: .75fr 1.25fr; } .invoice-shot { width: min(100%, 560px); } .showcase { grid-template-columns: .48fr 1.52fr; gap: 34px; } .footer-grid { grid-template-columns: 1.1fr repeat(3, .65fr); } .footer-newsletter { grid-column: 1 / -1; max-width: 420px; margin-top: 25px; } } @media (max-width: 820px) { :root { --radius-lg: 25px; } .site-header { padding: 17px 0; } .nav-toggle { display: block; position: relative; z-index: 30; } .nav-toggle[aria-expanded="true"] > span:first-child { transform: translateY(3.75px) rotate(45deg); } .nav-toggle[aria-expanded="true"] > span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); } .nav-menu { position: absolute; z-index: 25; width: calc(100% - 32px); top: 10px; left: 16px; display: none; flex-direction: column; align-items: stretch; gap: 24px; padding: 76px 24px 26px; border-radius: 22px; background: rgba(255, 255, 255, .97); box-shadow: var(--shadow); } .nav-menu.open { display: flex; } .nav-links, .nav-actions { flex-direction: column; align-items: stretch; gap: 0; } .nav-links a, .text-link { padding: 12px 0; font-size: 16px; } .nav-actions .button { width: 100%; } .hero { min-height: 0; grid-template-columns: 1fr; gap: 34px; padding: 60px 0 30px; } .hero h1 { font-size: clamp(44px, 12vw, 66px); } .hero-actions { flex-wrap: wrap; } .hero-actions .button { flex: 1 1 auto; } .hero-art { min-height: 380px; order: 2; } .tree-art { width: min(320px, 82%); } .app-strip { padding-top: 10px; } .app-row { justify-content: center; gap: 16px 20px; } .section { padding-block: 76px; } .intro-grid, .how-heading { grid-template-columns: 1fr; gap: 25px; } .section-kicker { margin-bottom: 28px; } .bento-grid { grid-template-columns: 1fr; margin-top: 48px; } .bento-large { grid-column: auto; min-height: 0; grid-template-columns: 1fr; align-items: start; } .bento-copy { padding: 36px; } .bento-large .number { margin-bottom: 34px; } .invoice-shot { justify-self: stretch; align-self: start; width: auto; height: 300px; margin: 6px -24px 4px 0; } .bento-small { min-height: 480px; } .bento-small .bento-copy { padding-top: 0; } .line-illustration { min-height: 220px; } /* card 02 stacks: copy above, the contained Simba panel centered below (no hover pop on touch, so keep it clipped to avoid any horizontal overflow). */ .bento-card.bento-simba { flex-direction: column; align-items: stretch; gap: 22px; padding: 36px; overflow: hidden; } .bento-card.bento-simba .simba-embed { width: 100%; max-width: 380px; align-self: center; } /* showcase: drop the pin, stack the explainer over the editor (editor only) */ .showcase { grid-template-columns: 1fr; gap: 24px; } .showcase-scroll { margin-top: 40px; height: auto !important; } .showcase-pin { position: static; min-height: 0; padding: 0; display: block; } .showcase-stage { height: auto; aspect-ratio: 4 / 3; min-height: 0; } .preview-simba, .preview-simba-fab { display: none; } .sc-item { padding: 15px 2px; } .sc-item.is-active .sc-desc { max-height: 96px; } .cta-section { padding-top: 0; } .cta-card { padding: 84px 22px; } .cta-doodle { width: 120px; opacity: .38; } .left-doodle { left: -25px; } .right-doodle { right: -20px; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand, .footer-newsletter { grid-column: 1 / -1; } .footer-newsletter { margin-top: 18px; } .footer-bottom { flex-direction: column; gap: 20px; } .footer-bottom div { flex-wrap: wrap; gap: 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } /* no scroll-jacking: unpin the showcase so it's a plain clickable switcher */ .showcase-scroll { height: auto !important; margin-top: 44px; } .showcase-pin { position: static; min-height: 0; padding: 24px 0; display: block; } }