/* =========================================================== Orli marketing site Warm editorial (Petaron) + teal identity (Iris on the Move) =========================================================== */ :root { --cream: #f7f5ef; --cream-2: #efece2; --surface: #fffdf8; --ink: #1b2523; --ink-soft: #5d6763; --line: #e4ddcf; --teal: #0f8a86; --teal-deep: #0a5d5a; --teal-bright: #14b8a6; --dark: #16211f; --shadow-sm: 0 6px 20px -10px rgba(20, 50, 45, 0.22); --shadow: 0 18px 45px -22px rgba(20, 50, 45, 0.32); --shadow-lg: 0 40px 80px -32px rgba(15, 60, 55, 0.4); --radius: 18px; --wrap: 1160px; --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Hebrew: Fraunces/Inter have no Hebrew glyphs, so switch the type stack to Heebo, and drop synthetic italics (Hebrew has no real italic — colour alone carries the emphasis). Triggered purely by the flip. */ html[lang="he"] { --serif: "Heebo", "Frank Ruhl Libre", Georgia, serif; --sans: "Heebo", "Inter", system-ui, sans-serif; } html[lang="he"] .display .ital, html[lang="he"] em { font-style: normal; } .lang-toggle { font-size: .78rem; font-weight: 700; letter-spacing: 0; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 72px; } body { margin: 0; font-family: var(--sans); background: var(--cream); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0 0 .5em; letter-spacing: -0.01em; } p { margin: 0 0 1em; } a { color: inherit; text-decoration: none; } em { font-style: normal; color: var(--teal); } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .narrow { max-width: 780px; } .center { text-align: center; margin-inline: auto; } /* editorial display type */ .display { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; font-size: clamp(2.1rem, 4.6vw, 3.5rem); } .display .ital { font-style: italic; color: var(--teal); } h1.display { font-size: clamp(2.4rem, 5.4vw, 4rem); } .eyebrow { display: inline-block; font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: 18px; } .eyebrow.light { color: rgba(255,255,255,.85); } /* ---------- buttons ---------- */ .btn-dark, .btn-line, .btn-cream { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; border-radius: 999px; padding: 11px 22px; border: 1.5px solid transparent; transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } /* Petaron-style "Book a demo": a cream blob expands to fill the dark pill, a shine sweeps across, and the label flips from cream to dark. */ .btn-dark { background: var(--dark); color: #f6f3ec; position: relative; overflow: hidden; z-index: 0; border: 1px solid rgba(255, 255, 255, 0.08); } .btn-dark::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(135deg, #f3eee2, #e2d8c4); border-radius: 50%; transform: scale(0); transform-origin: 22% 40%; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); } .btn-dark::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: translateX(-120%); transition: transform 0.7s ease; } .btn-dark:hover { color: #2a2000; transform: translateY(-2px); border-color: rgba(226, 216, 196, 0.7); box-shadow: 0 8px 24px -8px rgba(120, 108, 86, 0.5); } .btn-dark:hover::before { transform: scale(2.4); } .btn-dark:hover::after { transform: translateX(120%); } .btn-line { background: transparent; color: var(--ink); border-color: var(--line); } .btn-line:hover { background: var(--surface); transform: translateY(-2px); border-color: var(--teal); color: var(--teal); } .btn-cream { background: var(--cream); color: var(--dark); } .btn-cream:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.5); } .lg { padding: 15px 30px; font-size: 1.02rem; } /* ---------- utility bar ---------- */ .utility { background: var(--dark); color: rgba(255,255,255,.72); font-size: .82rem; } .utility-inner { display: flex; justify-content: space-between; align-items: center; height: 40px; } .util-right { display: flex; gap: 10px; align-items: center; } .util-right a:hover { color: #fff; } .util-sep { opacity: .4; } /* ---------- floating pill nav ---------- */ /* Flat top bar: connected to the top edge (not a floating pill) and thinner. */ .nav { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid var(--line); } .nav-pill { display: flex; align-items: center; gap: 24px; padding: 7px 0; } .brand { display: inline-flex; align-items: center; } .brand-logo { display: block; width: auto; height: 38px; object-fit: contain; } .brand-logo--footer { height: 44px; } html[lang="he"] .brand-logo--en, html:not([lang="he"]) .brand-logo--he { display: none; } .nav-links { display: flex; gap: 26px; flex: 1; justify-content: center; } .nav-links a { color: var(--ink-soft); font-weight: 500; font-size: .93rem; transition: color .15s; } .nav-links a:hover { color: var(--teal); } .nav-cta { display: flex; align-items: center; gap: 8px; } .icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: transparent; border: 1px solid var(--line); cursor: pointer; font-size: 1rem; transition: background .15s; } .icon-btn:hover { background: var(--cream-2); } /* ---------- hero ---------- */ .hero { padding: 64px 0 48px; position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; } .hero::before { content: ""; position: absolute; inset: -30% 45% auto -12%; height: 640px; background: radial-gradient(closest-side, rgba(20,184,166,.16), transparent 72%); pointer-events: none; } /* Decorative gradients/insets are physical and don't auto-mirror — flip the hero glow by hand so it stays behind the headline in RTL. */ html[dir="rtl"] .hero::before { inset: -30% -12% auto 45%; } /* Animated WebGL gradient background (hero-gradient.js) + readability veil. */ .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; } .hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent 54%, var(--cream) 100%), linear-gradient(to right, var(--cream) 30%, color-mix(in srgb, var(--cream) 78%, transparent) 48%, color-mix(in srgb, var(--cream) 30%, transparent) 62%, transparent 74%); } /* Text column flips to the right in RTL — flip the readability wash with it. */ html[dir="rtl"] .hero-veil { background: linear-gradient(to bottom, transparent 54%, var(--cream) 100%), linear-gradient(to left, var(--cream) 30%, color-mix(in srgb, var(--cream) 78%, transparent) 48%, color-mix(in srgb, var(--cream) 30%, transparent) 62%, transparent 74%); } /* Static fallback when WebGL is unavailable. */ .hero--nogl { background: linear-gradient(120deg, #f4f2ec, #98e2d6 45%, #beaae4); } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; position: relative; z-index: 2; } .lead { font-size: 1.16rem; color: var(--ink-soft); max-width: 34em; margin-top: 22px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 30px; } .hero-trust { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } .hero-trust li { color: var(--ink-soft); font-size: .96rem; padding-inline-start: 26px; position: relative; } .hero-trust li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--teal); font-weight: 800; } .hero-trust strong { color: var(--ink); font-weight: 600; } /* browser-chrome widget mockup */ .hero-visual { position: relative; pointer-events: none; } .browser { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; max-width: 380px; margin: 0 auto; } .browser-bar { display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 12px 16px; background: var(--cream-2); border-bottom: 1px solid var(--line); } .dot { width: 11px; height: 11px; border-radius: 50%; background: #cdbfa8; } .dot:nth-child(1){ background:#e6a19a;} .dot:nth-child(2){ background:#e8ca8f;} .dot:nth-child(3){ background:#a7c7a0;} .browser-url { direction: ltr; font-size: .8rem; color: var(--ink-soft); background: var(--surface); padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line); } .widget-body { padding: 22px 20px 24px; } .widget-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin: 0 0 9px; font-weight: 700; } .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: .84rem; color: var(--ink-soft); } .chip.active { background: var(--teal); color: #f2fffe; border-color: var(--teal); font-weight: 600; } .slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; } .slot { text-align: center; padding: 10px 0; border-radius: 10px; border: 1px solid var(--line); font-size: .9rem; font-variant-numeric: tabular-nums; } .slot-on { background: color-mix(in srgb, var(--teal) 14%, transparent); border-color: var(--teal); color: var(--teal); font-weight: 700; } .slot.muted { opacity: .38; text-decoration: line-through; } .widget-book { width: 100%; border: none; border-radius: 12px; padding: 14px; font: inherit; font-weight: 700; cursor: pointer; background: var(--dark); color: #f4fffe; } .widget-foot { text-align: center; font-size: .78rem; color: var(--ink-soft); margin: 13px 0 0; } .float-badge { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px; font-size: .82rem; font-weight: 600; box-shadow: var(--shadow); animation: float 5s ease-in-out infinite; } .badge-1 { top: 4%; right: -3%; color: var(--teal); } .badge-2 { bottom: 6%; left: -7%; animation-delay: -2.5s; } @keyframes float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-9px);} } /* ---------- stats ---------- */ .stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--cream-2); } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 38px 24px; } .stat { text-align: center; } .stat-num { display: block; font-family: var(--serif); font-size: 2.5rem; font-weight: 500; color: var(--teal); letter-spacing: -.02em; } .stat-cap { display: block; font-size: .9rem; color: var(--ink-soft); margin-top: 4px; } /* ---------- sections ---------- */ .section { padding: 70px 0; } .section.alt { background: var(--cream-2); } .section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; } .section-lead { font-size: 1.12rem; color: var(--ink-soft); } .problem h2 { margin-inline: auto; } /* scroll-pinned live demo (Vectrix-style scrollytelling) */ .scrolly-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin-top: 4px; } /* Top/bottom padding so the first and last steps can scroll to the centre. */ .scrolly-steps { display: flex; flex-direction: column; padding-block: 32vh; } .scrolly-step { min-height: 40vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; } .scrolly-step.is-active { opacity: 1; transform: none; } .scrolly-idx { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; } .scrolly-step h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.15rem); margin-bottom: 10px; } .scrolly-step p { color: var(--ink-soft); font-size: 1.08rem; max-width: 30em; margin: 0; } /* Centred in the space below the nav: firm top boundary, fully visible, and the widget sits at the vertical middle so the active step lines up with it. */ .scrolly-sticky { position: sticky; top: 64px; height: calc(100vh - 80px); display: flex; flex-direction: column; align-items: center; /* Centre when it fits; if the screen is too short, fall back to the top edge (below the nav) instead of overflowing up across the nav bar. */ justify-content: safe center; } .scrolly-sticky .demo-browser { flex-shrink: 0; } .scrolly-sticky .demo-browser { width: 82%; max-width: 460px; box-shadow: var(--shadow-lg); height: 660px; } /* Bare frame: no fake browser bar, just the rounded widget card. */ .demo-browser--bare { border-radius: 18px; } /* live demo (legacy static layout, still used by CSS below) */ .demo-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 52px; align-items: center; } .demo-notes { max-width: 440px; } .demo-flow { list-style: none; counter-reset: df; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; } .demo-flow li { counter-increment: df; position: relative; padding-inline-start: 44px; color: var(--ink-soft); font-size: .98rem; } .demo-flow li::before { content: counter(df); position: absolute; inset-inline-start: 0; top: -2px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--teal) 13%, transparent); color: var(--teal); font-family: var(--serif); font-weight: 600; font-size: .95rem; } .demo-flow li span { color: var(--ink); font-weight: 600; } .demo-tip { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; font-size: .92rem; color: var(--ink-soft); box-shadow: var(--shadow-sm); } .demo-tip code { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; font-size: .88em; background: var(--cream-2); padding: 1px 6px; border-radius: 6px; color: var(--teal); } .demo-tip strong { color: var(--ink); } .demo-notes .btn-line { margin-top: 20px; } .demo-stage { display: flex; flex-direction: column; align-items: center; } .demo-browser { max-width: 460px; width: 100%; box-shadow: var(--shadow-lg); } .demo-browser [data-orli-widget] { display: block; } .demo-caption { margin: 16px 0 0; font-family: var(--serif); font-style: italic; color: var(--teal); font-size: 1rem; } .section.scrolly { padding-bottom: 140px; } /* Mobile-only step tabs (see @media (max-width: 920px) below): a tap-through substitute for the desktop scroll-jack, since a pinned widget and scrolling step text can't share one narrow column without overlapping. */ .scrolly-tabs { display: none; } /* how it works — numbered panels */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-sm); } .step-idx { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; color: var(--teal); margin-bottom: 16px; } .step h3 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; } .step p { color: var(--ink-soft); font-size: .95rem; margin: 0; } /* comparisonn */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .compare-col { border-radius: var(--radius); padding: 30px 28px; border: 1px solid var(--line); } .compare-col.without { background: var(--surface); } .compare-col.with { background: linear-gradient(160deg, color-mix(in srgb, var(--teal) 10%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--teal) 35%, var(--line)); box-shadow: var(--shadow); } .compare-head { font-family: var(--serif); font-size: 1.35rem; margin-bottom: 20px; } .compare-col.with .compare-head { color: var(--teal); } .compare-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .compare-col li { position: relative; padding-inline-start: 30px; color: var(--ink-soft); font-size: .98rem; } .compare-col.without li::before { content: "✕"; position: absolute; inset-inline-start: 0; top: -1px; color: #c98b7f; font-weight: 700; } .compare-col.with li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: -1px; color: var(--teal); font-weight: 800; } .compare-col.with li { color: var(--ink); } /* features */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); } .feature-ico { font-size: 1.8rem; margin-bottom: 15px; } .feature h3 { font-family: var(--serif); font-weight: 500; font-size: 1.22rem; } .feature p { color: var(--ink-soft); font-size: .96rem; margin: 0; } /* embed */ .embed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; } .check-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; } .check-list li { padding-inline-start: 28px; position: relative; color: var(--ink-soft); } .check-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--teal); font-weight: 800; } .code-card { border-radius: var(--radius); overflow: hidden; border: 1px solid #1c332f; box-shadow: var(--shadow-lg); background: #0c1a17; } .code-head { display: flex; align-items: center; gap: 7px; padding: 13px 16px; background: #111f1c; border-bottom: 1px solid #1c332f; } .code-head .dot { background: #33524c; } .code-file { margin-inline-start: 10px; font-size: .82rem; color: #7f9a94; } .code-card { direction: ltr; } .code-body { margin: 0; padding: 24px 22px; overflow-x: auto; font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.8; color: #d6e8e3; } .c-com { color: #6a8a84; } .c-tag { color: #f5a3b0; } .c-attr { color: #4fd6c6; } .c-str { color: #f2cf7a; } /* security */ .sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .sec-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow-sm); } .sec-item h3 { font-family: var(--serif); font-weight: 500; font-size: 1.18rem; } .sec-item p { color: var(--ink-soft); margin: 0; font-size: .96rem; } .sec-ico { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(15, 138, 134, 0.1); color: var(--teal); margin-bottom: 14px; } .sec-ico svg { width: 22px; height: 22px; } /* roadmap ladder */ .ladder { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .rung { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; border-top: 4px solid var(--line); } .rung.done { border-top-color: var(--teal); } .rung.next { border-top-color: var(--teal-bright); } .rung-tag { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 11px; border-radius: 999px; margin-bottom: 14px; } .rung.done .rung-tag { background: color-mix(in srgb, var(--teal) 15%, transparent); color: var(--teal); } .rung.next .rung-tag { background: color-mix(in srgb, var(--teal-bright) 18%, transparent); color: var(--teal-deep); } .rung.soon .rung-tag { background: var(--cream-2); color: var(--ink-soft); } .rung h3 { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; } .rung p { color: var(--ink-soft); font-size: .93rem; margin: 0; } .ladder-note { text-align: center; max-width: 64ch; margin: 36px auto 0; color: var(--ink-soft); font-family: var(--serif); font-style: italic; font-size: 1.08rem; } /* faq */ .faq { display: grid; gap: 12px; } .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px 22px; box-shadow: var(--shadow-sm); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; font-size: 1.05rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; color: var(--teal); font-size: 1.4rem; font-weight: 400; transition: transform .2s; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-tag { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); background: var(--cream-2); padding: 3px 10px; border-radius: 999px; margin-inline-start: auto; } .faq-item summary span:first-child { flex: 1; } .faq-item p { color: var(--ink-soft); margin: 0 0 20px; max-width: 62ch; } /* cta band — teal full bleed */ .cta-band { background: linear-gradient(155deg, var(--teal-deep), var(--teal)); color: #f3fffd; padding: 74px 0; } .cta-band .display { color: #fff; } .cta-band .display .ital { color: #bff3ec; } .cta-lead { font-size: 1.14rem; color: rgba(255,255,255,.86); max-width: 46ch; margin-inline: auto; } .cta-form { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: flex-end; margin-top: 30px; } .field { text-align: start; } .field label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.85); margin-bottom: 6px; } .field input { font: inherit; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; min-width: 240px; } .field input::placeholder { color: rgba(255,255,255,.6); } .field input:focus { outline: 2px solid #fff; outline-offset: 1px; background: rgba(255,255,255,.2); } .form-note { min-height: 1.4em; margin-top: 18px; font-weight: 600; color: #fff; } .form-note:not(:empty) { display: inline-block; padding: 8px 18px; border-radius: 999px; background: rgba(10, 37, 35, .35); } .form-note.is-error { background: rgba(225, 29, 72, .55); } /* footer */ .footer { border-top: 1px solid var(--line); background: var(--cream-2); padding: 60px 0 30px; } .footer-inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .footer-brand { max-width: 300px; } .footer-brand p { color: var(--ink-soft); font-size: .94rem; margin-top: 12px; } .footer-cols { display: flex; gap: 60px; flex-wrap: wrap; } .footer-col { display: flex; flex-direction: column; gap: 10px; } .footer-col h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin: 0 0 4px; } .footer-col a { color: var(--ink); font-size: .94rem; } .footer-col a:hover { color: var(--teal); } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-soft); } /* ---------- responsive ---------- */ @media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } .hero-visual { order: -1; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .steps, .feature-grid, .sec-grid, .ladder { grid-template-columns: 1fr 1fr; } .compare, .embed-grid { grid-template-columns: 1fr; } .demo-grid { grid-template-columns: 1fr; gap: 36px; } .demo-notes { max-width: none; order: 2; } /* Mobile scrollytelling: the desktop sticky-pin-while-scrolling technique needs a second column for the steps to scroll past without crossing the widget's own space — there is no second column on a phone, so pinning here just parks the widget on top of whichever step is scrolling by, and un-pinning it just scrolls it out of view before its state changes ever show. Mobile trades the scroll-jack for a tap-through stepper: the widget stays put, numbered tabs below it switch both the widget's scene and the visible step text, so the "watch it update" payoff survives without fighting page scroll for control. */ .scrolly-grid { grid-template-columns: 1fr; gap: 0; } .scrolly-sticky { position: static; height: auto; order: -1; margin-bottom: 4px; } .scrolly-sticky .demo-browser { width: min(78vw, 340px); height: clamp(460px, 78vh, 620px); margin-inline: auto; } .scrolly-tabs { display: flex; justify-content: center; gap: 8px; margin-top: 18px; } .scrolly-tab { font: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .04em; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .scrolly-tab:hover { border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); color: var(--ink); } .scrolly-tab.is-active { background: var(--teal); border-color: var(--teal); color: #f4fffe; } .scrolly-steps { padding-block: 0; margin-top: 22px; } .scrolly-step { display: none; min-height: 0; opacity: 1; transform: none; text-align: center; } .scrolly-step.is-active { display: block; animation: scrolly-step-in .35s ease; } .scrolly-step p { margin-inline: auto; } @keyframes scrolly-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .nav-links { display: none; } } @media (max-width: 560px) { .utility-inner { font-size: .74rem; } .stats-grid, .steps, .feature-grid, .sec-grid, .ladder { grid-template-columns: 1fr; } .section { padding: 48px 0; } .field input { min-width: 0; width: 100%; } .cta-form { flex-direction: column; align-items: stretch; } .hero-actions .btn-dark, .hero-actions .btn-line { flex: 1; } } /* ===== Language-switch loading veil ===== */ .lang-loader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--cream); opacity: 0; pointer-events: none; transition: opacity .32s ease; } .lang-loader.on { opacity: 1; pointer-events: auto; } .lang-loader-box { position: relative; display: grid; place-items: center; width: 60px; height: 60px; } .lang-loader-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(140deg, var(--teal), var(--teal-bright)); color: #f4fffe; font-family: var(--serif); font-weight: 600; font-size: 1.7rem; } .lang-loader-ring { position: absolute; inset: -7px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--teal) 20%, transparent); border-top-color: var(--teal); animation: lang-spin .7s linear infinite; } @keyframes lang-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto !important; transition: none !important; } .lang-loader { transition: opacity .2s ease !important; } } /* ===== How it works — framed glow cards (Petaron ProcessFlow) ===== */ .hiw-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .hiw-card { position: relative; list-style: none; border-radius: 20px; border: 1px solid var(--line); padding: 7px; background: var(--cream-2); } /* Glowing border that follows the cursor (like Petaron's GlowingEffect). */ .hiw-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), var(--teal), color-mix(in srgb, var(--teal) 35%, transparent) 32%, transparent 66%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s ease; } .hiw-card:hover::before { opacity: 1; } .hiw-inner { height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px 22px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); } .hiw-ico { display: grid; place-items: center; width: 46px; height: 46px; font-size: 1.4rem; border-radius: 12px; border: 1px solid var(--line); background: var(--cream-2); } .hiw-inner h3 { font-family: var(--serif); font-weight: 500; font-size: 1.18rem; margin: 4px 0 0; } .hiw-inner p { color: var(--ink-soft); font-size: .95rem; margin: 0; } .hiw-chips { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 8px; } .hiw-chip { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent); padding: 4px 10px; border-radius: 999px; } /* ===== Comparison table (Petaron BeforeAfterTable) ===== */ .cmp-table { max-width: 900px; margin: 0 auto; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); } .cmp-thead { display: grid; grid-template-columns: 1fr 1fr; } .cmp-th { padding: 16px 26px; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); } .cmp-th--with { color: var(--teal); background: color-mix(in srgb, var(--teal) 6%, transparent); border-inline-start: 1px solid var(--line); } .cmp-rows { display: grid; grid-template-columns: 1fr 1fr; } .cmp-cell { display: flex; align-items: flex-start; gap: 12px; padding: 16px 26px; border-top: 1px solid var(--line); font-size: .96rem; color: var(--ink-soft); } .cmp-cell.with { background: color-mix(in srgb, var(--teal) 6%, transparent); border-inline-start: 1px solid var(--line); color: var(--ink); font-weight: 500; } .cmp-mark { flex: 0 0 auto; font-weight: 800; line-height: 1.5; } .cmp-cell.without .cmp-mark { color: #c98b7f; } .cmp-cell.with .cmp-mark { color: var(--teal); } /* ===== FAQ accordion (Petaron animation: grid-rows expand + rotating +) ===== */ .faq { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .faq-item { padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; } .faq-item:hover { transform: translateY(-2px); } .faq-btn { width: 100%; display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; background: none; border: none; text-align: start; cursor: pointer; font: inherit; } .faq-plus { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream-2); color: var(--ink); font-size: 1.35rem; font-weight: 300; line-height: 1; transition: transform .5s ease; } .faq-item.open .faq-plus { transform: rotate(45deg); } .faq-ring { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--teal); opacity: 0; } .faq-item.open .faq-ring { animation: faq-ping .9s cubic-bezier(0, 0, .2, 1); } @keyframes faq-ping { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.7); opacity: 0; } } .faq-q { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 7px; } .faq-q > span:first-child { font-weight: 600; font-size: 1.02rem; color: var(--ink); } .faq-q .faq-tag { margin-inline-start: auto; font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; } .faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; } .faq-item.open .faq-panel { grid-template-rows: 1fr; } .faq-panel-inner { overflow: hidden; } .faq-panel-inner p { color: var(--ink-soft); font-size: .96rem; margin: 0; padding: 0 22px 20px 76px; } @media (max-width: 900px) { .hiw-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .cmp-thead { display: none; } .cmp-rows { grid-template-columns: 1fr; } .cmp-cell.with, .cmp-th--with { border-inline-start: none; } .faq-panel-inner p { padding: 0 22px 20px; } }