/* THE SCROLLING TOUR ON THE HOME PAGE. 17 October 2026. * * The look of the landing page since Mounir asked for it to be rebuilt in the style of a scroll * showcase. Every scene is tall on the outside and holds a 1440 × 900 board pinned inside it, * scaled to fit the window; tour.js moves things on the board as you scroll. On a phone the board * is 600 × 1040 instead, and the same pieces are arranged one above another. * * IN ITS OWN FILE, and every rule starts with #landing.tr, so nothing here can reach the editor or * any other page. */ #landing.tr{ --tr-ink:#0E0E11; --tr-mute:#6E6E78; --tr-lime:#FFFFFF; /* was lime; lime removed from the site 25 October 2026 */ --tr-blue:#3D95FF; --tr-dark:#0A0A0C; --tr-light:#F2F2F4; --tr-line:#E6E6EB; --tr-top:var(--headh,0px); /* THE TYPE SCALE. One ratio, 1.25, from a 17px body, so every size is a step of the same ladder: 13 · 15 · 17 · 21 · 26 · 33 · 42 · 52 · 65 · 81. Lines run to about 60 characters; headings break into balanced lines. Text on the scaled boards is divided by the board's scale (--tr-s, set by tour.js), so it reads at the same size as the text in the ordinary sections on every screen. */ --fs-xs:13px; --fs-sm:15px; --fs-body:17px; --fs-lead:21px; --fs-h4:21px; --fs-h3:42px; --fs-h2:52px; --fs-h1:81px; --tr-s:1; --b-body:calc(var(--fs-body) / var(--tr-s)); --b-lead:calc(var(--fs-lead) / var(--tr-s)); --b-sm:calc(var(--fs-sm) / var(--tr-s)); --b-h4:calc(var(--fs-h4) / var(--tr-s)); --b-h3:calc(var(--fs-h3) / var(--tr-s)); --b-h1:calc(var(--fs-h1) / var(--tr-s)); --b-measure:calc(640px / var(--tr-s)); position:relative; background:var(--tr-dark); color:var(--tr-ink); overflow:visible; overflow-x:clip; font-family:'Google Sans Flex','Schibsted Grotesk',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; } #landing.tr img{ display:block; } #landing.tr.tr-measure *{ transition:none !important; } #landing.tr .tr-topbar{ position:sticky; top:var(--tr-top); z-index:30; height:3px; margin-bottom:-3px; pointer-events:none; } #landing.tr .tr-topbar i{ display:block; height:100%; width:0; background:#000; } /* ---------- back to the top: a round button, bottom right, once you have scrolled ---------- */ #landing.tr .tr-totop{ position:fixed; right:24px; bottom:24px; z-index:60; width:52px; height:52px; border-radius:50%; border:0; padding:0; cursor:pointer; display:grid; place-items:center; background:#0E0E11; color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 12px 30px -10px rgba(0,0,0,.5); opacity:0; transform:translateY(12px) scale(.9); pointer-events:none; transition:opacity .25s, transform .25s, background .2s, color .2s; } #landing.tr .tr-totop.on{ opacity:1; transform:none; pointer-events:auto; } #landing.tr .tr-totop.tr-totop-pale{ background:#fff; color:#111; box-shadow:0 12px 30px -10px rgba(0,0,0,.6); } #landing.tr .tr-totop:hover{ background:#000; color:#fff; } #landing.tr .tr-totop:focus-visible{ outline:3px solid var(--tr-blue); outline-offset:3px; } #landing.tr.tr-narrow .tr-totop{ right:16px; bottom:16px; width:48px; height:48px; } /* ---------- buttons ---------- */ #landing.tr .tr-btn{ display:inline-flex; align-items:center; justify-content:center; height:54px; padding:0 26px; border-radius:15px; border:0; font:inherit; font-size:17px; font-weight:650; cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s; letter-spacing:-.01em; } #landing.tr .tr-btn:active{ transform:scale(.97); } #landing.tr .tr-btn-lime{ background:#000; color:#fff; box-shadow:none; } #landing.tr .tr-btn-lime:hover{ background:#000; } #landing.tr .tr-btn-ghost{ background:#fff; color:#111; box-shadow:0 0 0 1px var(--tr-line), 0 8px 24px -14px rgba(0,0,0,.25); } #landing.tr .tr-btn-ghost:hover{ background:#F7F7F9; } #landing.tr .tr-board .tr-btn{ height:calc(54px / var(--tr-s)); padding:0 calc(26px / var(--tr-s)); border-radius:calc(15px / var(--tr-s)); font-size:var(--b-body); } #landing.tr .tr-btn-big{ height:62px; padding:0 34px; font-size:19px; border-radius:17px; } /* ---------- scenes ---------- */ #landing.tr .tr-scene{ position:relative; } #landing.tr .tr-light{ background:var(--tr-light); color:var(--tr-ink); } #landing.tr .tr-dark{ background:var(--tr-dark); color:#fff; } #landing.tr .tr-stage{ position:sticky; top:var(--tr-top); height:calc(100vh - var(--tr-top)); height:calc(100svh - var(--tr-top)); overflow:hidden; } #landing.tr .tr-board{ position:absolute; left:50%; top:50%; width:1440px; height:900px; transform-origin:50% 50%; transform:translate(-50%,-50%); } #landing.tr .tr-board > *{ position:absolute; } #landing.tr .tr-glow{ border-radius:50%; filter:blur(90px); pointer-events:none; opacity:.55; } #landing.tr .tr-g1{ width:820px; height:520px; left:-120px; top:300px; background:radial-gradient(circle,#BFD9FF,transparent 70%); } #landing.tr .tr-g2{ width:760px; height:520px; right:-160px; top:120px; background:radial-gradient(circle,#FFFFFF,transparent 70%); } #landing.tr .tr-g3{ width:1100px; height:700px; left:170px; top:160px; background:radial-gradient(circle,rgba(61,149,255,.45),transparent 65%); } #landing.tr .tr-g4{ width:900px; height:600px; left:60px; top:240px; background:radial-gradient(circle,#CFE2FF,transparent 70%); } #landing.tr .tr-g5{ width:900px; height:700px; left:460px; top:120px; background:radial-gradient(circle,rgba(139,92,246,.35),transparent 65%); } #landing.tr .tr-g6{ width:900px; height:600px; left:520px; top:260px; background:radial-gradient(circle,#FFFFFF,transparent 70%); } #landing.tr .tr-g7{ position:absolute; width:1300px; height:800px; left:50%; margin-left:-650px; top:240px; background:radial-gradient(circle,rgba(61,149,255,.5),transparent 60%); } /* ---------- 1. opening ---------- */ #landing.tr .tr-hero-copy{ left:0; right:0; top:96px; text-align:center; z-index:3; } #landing.tr .tr-h1{ font-size:var(--b-h1); line-height:1; letter-spacing:-.045em; font-weight:800; margin:0 0 calc(24px / var(--tr-s)); color:var(--tr-ink); text-wrap:balance; } #landing.tr .tr-h1 em{ font-style:normal; color:#9A9AA6; } #landing.tr .tr-lead{ font-size:var(--b-lead); color:var(--tr-mute); margin:0 auto calc(32px / var(--tr-s)); max-width:var(--b-measure); line-height:1.5; text-wrap:pretty; } #landing.tr .tr-note{ font-size:var(--b-sm); color:var(--tr-mute); margin:calc(18px / var(--tr-s)) 0 0; } #landing.tr .tr-ctas{ display:flex; gap:calc(12px / var(--tr-s)); justify-content:center; } #landing.tr .tr-persp{ left:0; top:0; width:1440px; height:900px; perspective:1700px; pointer-events:none; z-index:4; } #landing.tr .tr-shot{ position:absolute; left:150px; top:120px; width:1140px; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 70px 130px -40px rgba(10,12,30,.45), 0 0 0 1px rgba(0,0,0,.08); transform-origin:50% 0; will-change:transform; } #landing.tr .tr-shot img{ width:100%; height:auto; } #landing.tr .tr-card{ width:280px; padding:18px; border-radius:22px; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 30px 60px -24px rgba(16,18,40,.35), 0 0 0 1px rgba(0,0,0,.05); opacity:0; z-index:5; will-change:transform; } #landing.tr .tr-card-k{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tr-blue); } #landing.tr .tr-card-t{ font-size:18px; font-weight:700; letter-spacing:-.02em; margin:6px 0 14px; line-height:1.18; color:var(--tr-ink); } #landing.tr .tr-card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } #landing.tr .tr-card-grid img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top; border-radius:8px; box-shadow:0 0 0 1px rgba(0,0,0,.06); } #landing.tr .tr-card.tr-fc2{ width:344px; } #landing.tr .tr-card-apps{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; } #landing.tr .tr-card-apps span{ display:flex; align-items:center; gap:8px; height:40px; padding:0 8px; border-radius:11px; background:#F3F4F7; font-size:12.5px; font-weight:600; color:#2a2a33; white-space:nowrap; } #landing.tr .tr-card-apps img{ width:24px; height:24px; border-radius:6px; flex:none; } #landing.tr .tr-card-dl{ display:grid; gap:4px; } #landing.tr .tr-card-dl span{ display:flex; justify-content:space-between; align-items:center; height:34px; padding:0 12px; border-radius:9px; font-size:14px; font-weight:600; color:#1a1a22; background:#F3F4F7; } #landing.tr .tr-card-dl em{ font-style:normal; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; color:#8a8a95; } /* ---------- 2. the editor, taken apart ---------- */ #landing.tr .tr-iso{ left:300px; top:188px; width:840px; height:525px; transform-style:preserve-3d; will-change:transform; } #landing.tr .tr-iso-l{ position:absolute; inset:0; transform-style:preserve-3d; } #landing.tr .tr-ex-bar{ position:absolute; left:0; top:0; width:840px; height:39px; border-radius:12px 12px 0 0; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 20px 40px -10px rgba(0,0,0,.6); } #landing.tr .tr-ex-rail{ position:absolute; left:0; top:39px; width:27px; height:486px; border-radius:0 0 0 12px; box-shadow:0 20px 40px -10px rgba(0,0,0,.6); } #landing.tr .tr-ex-canvas{ position:absolute; left:27px; top:39px; width:628px; height:486px; background:#F4F5F8; box-shadow:0 20px 40px -10px rgba(0,0,0,.5); } #landing.tr .tr-ex-canvas img{ position:absolute; left:138px; top:23px; width:351px; height:439px; box-shadow:0 10px 30px -12px rgba(0,0,0,.35); } #landing.tr .tr-ex-props{ position:absolute; left:655px; top:39px; width:185px; height:486px; border-radius:0 0 12px 0; box-shadow:0 20px 40px -10px rgba(0,0,0,.6); } /* ---------- 3 to 7. the scenes with a recording ---------- */ #landing.tr .tr-side{ left:76px; top:50%; transform:translateY(-50%); width:380px; z-index:3; } #landing.tr .tr-side.tr-right{ left:auto; right:84px; } /* the sizes are worked out again here, so a phone too short for the words can make this one block a step smaller (tour.js) */ #landing.tr .tr-side{ --b-body:calc(var(--fs-body) / var(--tr-s)); --b-sm:calc(var(--fs-sm) / var(--tr-s)); --b-h4:calc(var(--fs-h4) / var(--tr-s)); --b-h3:calc(var(--fs-h3) / var(--tr-s)); } #landing.tr .tr-tag{ display:inline-flex; height:2.3em; align-items:center; padding:0 .95em; border-radius:99px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em; background:rgba(255,255,255,.08); color:var(--tr-lime); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); } #landing.tr .tr-board .tr-tag{ font-size:calc(var(--fs-xs) / var(--tr-s)); } #landing.tr .tr-light .tr-tag, #landing.tr .tr-price .tr-tag{ background:#fff; color:var(--tr-blue); box-shadow:0 0 0 1px var(--tr-line); } #landing.tr .tr-h3{ font-size:var(--b-h3); line-height:1.06; letter-spacing:-.035em; font-weight:800; margin:.5em 0 .45em; color:inherit; text-wrap:balance; } #landing.tr .tr-p{ font-size:var(--b-body); line-height:1.55; opacity:.68; margin:0; text-wrap:pretty; } #landing.tr .tr-steps{ list-style:none; margin:.4em 0 0; padding:0; font-size:var(--b-body); } #landing.tr .tr-steps li{ position:relative; padding:.6em 0 .6em 1.45em; font-size:var(--b-h4); line-height:1.25; font-weight:700; letter-spacing:-.015em; opacity:.32; transition:opacity .4s; } #landing.tr .tr-steps li::before{ content:""; position:absolute; left:0; top:1.1em; width:.42em; height:.42em; border-radius:50%; background:currentColor; } #landing.tr .tr-steps li.on{ opacity:1; } #landing.tr .tr-steps li.on::before{ background:var(--tr-lime); box-shadow:0 0 0 4px rgba(255,255,255,.25); } #landing.tr .tr-steps small{ display:block; font-size:var(--b-body); line-height:1.55; letter-spacing:0; font-weight:400; opacity:0; max-height:0; overflow:hidden; transition:all .4s; margin-top:.3em; } #landing.tr .tr-steps li.on small{ opacity:.68; max-height:9em; } #landing.tr .tr-win{ left:488px; top:169px; width:900px; border-radius:16px; overflow:hidden; background:#fff; will-change:transform; box-shadow:0 0 0 1px rgba(0,0,0,.07); } /* no drop shadow on the light sections, only the hairline edge (Mounir, 28 October 2026) */ #landing.tr .tr-dark .tr-win{ box-shadow:0 60px 140px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.1); } #landing.tr .tr-win.tr-win-l{ left:52px; } #landing.tr .tr-vid{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; background:#F4F5F8; } #landing.tr #trS5 .tr-vid, #landing.tr #trS6 .tr-vid{ aspect-ratio:16/9; } #landing.tr #trS5 .tr-win, #landing.tr #trS6 .tr-win{ top:197px; } #landing.tr .tr-cam{ transform-origin:0 0; will-change:transform; } /* ---------- 8. plans and pricing ---------- */ #landing.tr .tr-price{ position:relative; background:var(--tr-light); padding:120px 32px 110px; text-align:center; color:var(--tr-ink); } #landing.tr .tr-h2{ font-size:var(--fs-h2); line-height:1.06; letter-spacing:-.04em; font-weight:800; margin:.45em auto 0; max-width:16em; text-wrap:balance; } #landing.tr .tr-plans{ display:grid; grid-template-columns:repeat(2,minmax(0,440px)); gap:22px; justify-content:center; margin-top:56px; text-align:left; } /* PRICING CARDS — 24 October 2026. Mounir: "remove shadows, dont use bold text, fix spacing … the design need to be always clean". Flat cards with a hairline edge, regular and medium weights only, one size step between each line, and the description sits under the plan name. The words are unchanged. */ #landing.tr .tr-plan{ background:#fff; border-radius:24px; padding:32px; border:1px solid var(--tr-line); box-shadow:none; display:flex; flex-direction:column; } #landing.tr .tr-plan-pro{ background:#0E0E11; color:#fff; border-color:#0E0E11; box-shadow:none; } #landing.tr .tr-plan > *{ order:3; } #landing.tr .tr-plan-top{ display:flex; align-items:center; justify-content:space-between; } #landing.tr .tr-plan .tr-plan-name{ order:0; font-size:20px; font-weight:500; letter-spacing:-.01em; line-height:1.3; } #landing.tr .tr-plan .tr-plan-blurb{ order:1; font-size:15px; font-weight:400; line-height:1.5; letter-spacing:0; margin:6px 0 0; color:var(--tr-mute); } #landing.tr .tr-plan-pro .tr-plan-blurb{ color:rgba(255,255,255,.62); } #landing.tr .tr-plan-badge{ height:26px; padding:0 11px; border-radius:99px; background:#000; color:#fff; font-size:13px; font-weight:500; display:inline-flex; align-items:center; } #landing.tr .tr-plan .tr-plan-price{ order:2; display:flex; align-items:baseline; flex-wrap:wrap; font-size:48px; font-weight:400; letter-spacing:-.03em; line-height:1; margin-top:28px; } #landing.tr .tr-plan-price .tr-cur{ align-self:flex-start; font-size:20px; font-weight:400; letter-spacing:0; margin:4px 2px 0 0; opacity:1; } #landing.tr .tr-plan-price span:not(.tr-cur){ font-size:15px; font-weight:400; letter-spacing:0; margin-left:8px; color:var(--tr-mute); opacity:1; } #landing.tr .tr-plan-pro .tr-plan-price span:not(.tr-cur){ color:rgba(255,255,255,.62); } #landing.tr .tr-plan-note{ font-size:var(--fs-sm); opacity:.6; margin:10px 0 0; min-height:42px; line-height:1.45; } #landing.tr .tr-plan-list{ list-style:none; padding:0; margin:28px 0 32px; display:grid; gap:14px; flex:1; align-content:start; } #landing.tr .tr-plan-list li{ position:relative; padding-left:28px; font-size:15px; font-weight:400; line-height:1.45; letter-spacing:0; } #landing.tr .tr-plan-list li::before{ content:none; } #landing.tr .tr-plan-list li::after{ content:""; position:absolute; left:3px; top:6px; width:10px; height:5px; border-left:1.5px solid var(--tr-ink); border-bottom:1.5px solid var(--tr-ink); transform:rotate(-45deg); } #landing.tr .tr-plan-pro .tr-plan-list li::after{ border-color:#fff; } #landing.tr .tr-plan .tr-btn{ width:100%; height:48px; padding:0 22px; border-radius:999px; font-size:15px; font-weight:500; letter-spacing:0; box-shadow:none; } #landing.tr .tr-plan .tr-btn-ghost{ background:transparent; color:var(--tr-ink); border:1px solid #CFCFD6; } #landing.tr .tr-plan .tr-btn-ghost:hover{ background:#F5F5F7; } #landing.tr .tr-plan .tr-btn-lime{ box-shadow:none; } #landing.tr .tr-price-strip{ margin:34px 0 0; font-size:var(--fs-sm); color:var(--tr-mute); display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; } #landing.tr .tr-price-strip i{ width:4px; height:4px; border-radius:50%; background:#C4C4CC; } /* ---------- 9. the end ---------- */ #landing.tr .tr-end{ position:relative; background:var(--tr-dark); color:#fff; padding:150px 24px 0; text-align:center; overflow:hidden; } #landing.tr .tr-end-copy{ position:relative; z-index:2; } #landing.tr .tr-end-h{ font-size:var(--fs-h1); letter-spacing:-.045em; line-height:1; font-weight:800; max-width:11em; margin:0 auto .3em; text-wrap:balance; } #landing.tr .tr-end-p{ font-size:var(--fs-lead); line-height:1.5; opacity:.62; margin:0 0 34px; } #landing.tr .tr-wordmark{ position:relative; width:min(1320px,94vw); margin:90px auto 0; opacity:.95; will-change:transform; -webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 92%); mask-image:linear-gradient(180deg,#000 10%,transparent 92%); } #landing.tr > .tf-footer{ background:var(--tr-dark); border-top-color:rgba(255,255,255,.08); color:rgba(255,255,255,.7); } #landing.tr > .tf-footer .tf-flinks a{ color:rgba(255,255,255,.7); } #landing.tr > .tf-footer .brand-logo{ filter:invert(1); } /* ---------- on a phone: a tall board, the pieces one above another ---------- */ #landing.tr.tr-narrow .tr-board{ width:600px; height:1040px; } #landing.tr.tr-narrow .tr-persp{ width:600px; height:1040px; } #landing.tr.tr-narrow .tr-hero-copy{ top:40px; padding:0 24px; } #landing.tr.tr-narrow .tr-ctas{ flex-direction:column; align-items:center; } #landing.tr.tr-narrow .tr-ctas .tr-btn{ width:100%; max-width:calc(340px / var(--tr-s)); } #landing.tr.tr-narrow .tr-shot{ left:20px; top:600px; width:560px; } #landing.tr.tr-narrow .tr-card{ display:none; } #landing.tr.tr-narrow .tr-iso{ left:20px; top:330px; width:840px; transform-origin:0 0; } #landing.tr.tr-narrow .tr-side, #landing.tr.tr-narrow .tr-side.tr-right{ left:36px; right:36px; top:56px; width:auto; transform:none; } #landing.tr.tr-narrow .tr-win, #landing.tr.tr-narrow .tr-win.tr-win-l, #landing.tr.tr-narrow #trS5 .tr-win, #landing.tr.tr-narrow #trS6 .tr-win{ left:20px; top:520px; width:560px; } @media (max-width:900px){ #landing.tr{ --fs-body:16px; --fs-lead:18px; --fs-h4:20px; --fs-h3:31px; --fs-h2:36px; --fs-h1:46px; } #landing.tr .tr-price{ padding:84px 18px 80px; } #landing.tr .tr-plans{ grid-template-columns:minmax(0,1fr); margin-top:40px; } #landing.tr .tr-plan{ padding:28px 22px; } #landing.tr .tr-end{ padding-top:100px; } #landing.tr .tr-wordmark{ margin-top:60px; } } /* ---------- the words added with the homepage copy, 17 October 2026 ---------- */ #landing.tr a.tr-btn{ text-decoration:none; } #landing.tr .tr-btn-dark{ background:#0E0E11; color:#fff; } #landing.tr .tr-btn-dark:hover{ background:#26262C; } #landing.tr .tr-side-btn{ margin-top:calc(28px / var(--tr-s)); } #landing.tr .tr-h4{ font-size:var(--b-h4); line-height:1.25; font-weight:750; letter-spacing:-.015em; margin:1.3em 0 .35em; } #landing.tr .tr-win.tr-win-c{ left:250px; top:120px; } #landing.tr .tr-block{ position:relative; padding:120px 32px 110px; color:var(--tr-ink); background:#fff; } #landing.tr .tr-block-head, #landing.tr .tr-price-head{ max-width:860px; margin:0 auto; text-align:center; } #landing.tr .tr-block-p{ font-size:var(--fs-lead); line-height:1.5; color:var(--tr-mute); margin:.9em auto 0; max-width:34em; text-wrap:pretty; } #landing.tr .tr-app-grid, #landing.tr .tr-feat-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:1180px; margin:56px auto 0; } #landing.tr .tr-app{ display:block; padding:28px; border-radius:24px; background:var(--tr-light); color:inherit; text-decoration:none; transition:transform .2s, box-shadow .2s; } #landing.tr .tr-app:hover{ transform:translateY(-3px); box-shadow:0 24px 48px -28px rgba(10,12,30,.35); } #landing.tr .tr-app img{ width:44px; height:44px; border-radius:11px; } #landing.tr .tr-app-h, #landing.tr .tr-feat-h{ font-size:var(--fs-h4); line-height:1.25; font-weight:750; letter-spacing:-.015em; margin:.85em 0 .4em; } #landing.tr .tr-app-p, #landing.tr .tr-feat-p{ font-size:var(--fs-body); line-height:1.55; color:var(--tr-mute); margin:0; text-wrap:pretty; } #landing.tr .tr-block-cta{ text-align:center; margin-top:44px; } #landing.tr .tr-feats{ background:var(--tr-dark); color:#fff; } #landing.tr .tr-feats .tr-tag{ background:rgba(255,255,255,.08); color:var(--tr-lime); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); } #landing.tr .tr-feats .tr-block-p, #landing.tr .tr-feats .tr-feat-p{ color:rgba(255,255,255,.62); } #landing.tr .tr-feat{ padding:28px; border-radius:24px; background:#16161A; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); } #landing.tr .tr-feat-h{ margin-top:0; } #landing.tr .tr-plan .tr-plan-plus{ font-size:15px; font-weight:500; line-height:1.45; margin:28px 0 -14px; } #landing.tr .tr-end-note{ font-size:var(--fs-sm); opacity:.55; margin:20px 0 0; } #landing.tr .tr-foot{ position:relative; background:var(--tr-dark); color:rgba(255,255,255,.7); border-top:1px solid rgba(255,255,255,.08); padding:64px 32px 36px; } #landing.tr .tr-foot-in{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:40px; } #landing.tr .tr-foot-brand img{ height:30px; width:auto; } #landing.tr .tr-foot-brand p{ font-size:var(--fs-sm); line-height:1.55; margin:16px 0 0; max-width:340px; } #landing.tr .tr-foot-col{ display:flex; flex-direction:column; gap:12px; } #landing.tr .tr-foot-col h3{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin:0 0 4px; } #landing.tr .tr-foot-col a{ color:rgba(255,255,255,.7); text-decoration:none; font-size:var(--fs-sm); cursor:pointer; } #landing.tr .tr-foot-col a:hover{ color:#fff; } #landing.tr .tr-foot-copy{ max-width:1180px; margin:48px auto 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:var(--fs-xs); } #landing.tr .tr-foot-copy p{ margin:0; opacity:.6; } #landing.tr .tr-foot .soc a{ color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.18); } #landing.tr .tr-foot .soc a:hover{ color:#fff; background:rgba(255,255,255,.1); border-color:transparent; } #landing.tr.tr-narrow #trS4 .tr-win{ top:640px; } #landing.tr.tr-narrow .tr-shot{ top:720px; } #landing.tr.tr-narrow .tr-win.tr-win-c{ left:20px; top:300px; width:560px; } @media (max-width:900px){ #landing.tr .tr-block{ padding:84px 18px 80px; } #landing.tr .tr-app-grid, #landing.tr .tr-feat-grid{ grid-template-columns:minmax(0,1fr); margin-top:36px; gap:12px; } #landing.tr .tr-foot-in{ grid-template-columns:minmax(0,1fr); gap:30px; } } /* ---------- the templates scene: three rows of real templates sliding in turn ---------- */ #landing.tr .tr-wall-scene{ left:0; top:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; } #landing.tr .tr-wall-head{ position:relative; z-index:2; will-change:transform; width:900px; max-width:92%; padding-top:64px; text-align:center; } #landing.tr .tr-wall-head .tr-p{ margin:0 auto; max-width:var(--b-measure); } /* THE ROWS FILL THE SCREEN. 19 October 2026, Mounir: "show full templates, always design like a professional UI designer". The three rows are sized to the whole board, not to what the words leave, so each template is shown large and whole; the words sit above them at first and lift away as you scroll, and the rows rise into the space they leave (tour.js). */ #landing.tr .tr-wall{ position:absolute; left:0; right:0; top:0; height:100%; padding:56px 0; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; gap:18px; transform-origin:50% 0; will-change:transform; } #landing.tr .tr-wall-row{ position:relative; flex:0 0 250px; } #landing.tr .tr-wall-track{ position:absolute; left:50%; top:0; height:100%; display:flex; gap:18px; will-change:transform; } #landing.tr .tr-wall-track img{ height:100%; width:auto; flex:none; border-radius:14px; box-shadow:0 24px 48px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); } #landing.tr.tr-narrow .tr-wall-head{ padding-top:44px; width:auto; padding-left:36px; padding-right:36px; max-width:none; } #landing.tr.tr-narrow .tr-wall{ padding:48px 0; gap:16px; } #landing.tr.tr-narrow .tr-wall-row{ flex-basis:300px; } /* Somebody who has asked for less motion gets every scene at its finished state, with no scrubbing. */ @media (prefers-reduced-motion:reduce){ #landing.tr .tr-steps li{ opacity:1; } #landing.tr .tr-steps small{ opacity:.66; max-height:none; } } /* EVERY CALL TO ACTION IS BLACK AND WHITE — 25 October 2026. Mounir: "needs to be monochrome, round corners. black and white no grey, no colors, and text is regular not bold". Spacing from his example: 56 tall, 40 either side, regular 17px. Black with white words on a light background, white with black words on a dark one, and the second button of a pair is white with a black edge. Written last so it beats every older button rule above. */ #landing.tr .tr-btn, #landing.tr .tr-board .tr-btn, #landing.tr .tr-btn-big, #landing.tr .tr-plan .tr-btn{ height:56px; padding:0 40px; border-radius:999px; border:1px solid #000; font-size:17px; font-weight:400; letter-spacing:normal; box-shadow:none; background:#000; color:#fff; transition:transform .15s; } /* on the scaled boards the size is divided by the board's scale, like every other line on them */ #landing.tr .tr-board .tr-btn{ height:calc(56px / var(--tr-s)); padding:0 calc(40px / var(--tr-s)); font-size:calc(17px / var(--tr-s)); } #landing.tr .tr-plan .tr-btn{ width:100%; } #landing.tr .tr-btn:hover, #landing.tr .tr-btn-lime:hover, #landing.tr .tr-btn-dark:hover{ background:#000; color:#fff; transform:translateY(-1px); } #landing.tr .tr-btn.tr-btn-ghost, #landing.tr .tr-board .tr-btn.tr-btn-ghost, #landing.tr .tr-plan .tr-btn.tr-btn-ghost, #landing.tr .tr-btn.tr-btn-ghost:hover, #landing.tr .tr-board .tr-btn.tr-btn-ghost:hover, #landing.tr .tr-plan .tr-btn.tr-btn-ghost:hover{ background:#fff; color:#000; border-color:#000; } /* on the dark bands and the black Pro card the colours swap */ #landing.tr #trWallHead .tr-btn, #landing.tr #trS4 .tr-btn, #landing.tr #trEnd .tr-btn, #landing.tr .tr-plan-pro .tr-btn, #landing.tr #trWallHead .tr-btn:hover, #landing.tr #trS4 .tr-btn:hover, #landing.tr #trEnd .tr-btn:hover, #landing.tr .tr-plan-pro .tr-btn:hover{ background:#fff; color:#000; border-color:#fff; } #landing.tr .tr-btn:focus-visible{ outline:2px solid currentColor; outline-offset:3px; } /* the back-to-top button too — it turned lime under the pointer (Mounir, 25 October 2026: "this icon is black and white"). Black with a white arrow on light sections, white with a black arrow on dark ones, and it stays that way under the pointer. */ #landing.tr .tr-totop{ background:#000; color:#fff; } #landing.tr .tr-totop:hover{ background:#000; color:#fff; } #landing.tr .tr-totop.tr-totop-pale, #landing.tr .tr-totop.tr-totop-pale:hover{ background:#fff; color:#000; } #landing.tr .tr-totop:focus-visible{ outline:2px solid currentColor; } /* GOOGLE SANS FLEX, THE WHOLE SITE — 25 October 2026. Mounir: "apply it to the whole site, and replace serif with that font". It was tried on the first screen first. Every page outside the editor and the admin panel reads it from the font set at the top of this file and of the site's stylesheet; the serif accent ("made simple.") is now the same family, upright and Regular, in its grey. */ #landing.tr #trHero .tr-h1{ letter-spacing:-.03em; } /* THE HOMEPAGE IS LIGHT ALL THE WAY DOWN — 28 October 2026. Mounir: "use only white theme in the landing page, no black bg like this, except for the pro card keep it black", and "remove shadow from the big one, and reduce it on the small cards". Every section that was black — the template wall, how it works, the editor taken apart, Bento Grid, the feature cards, the closing section and the footer — now wears the light grey the light sections already had, with dark words. The Pro price card is not touched. Written last so it beats the dark rules above without unpicking them. */ #landing.tr{ --tr-dark:var(--tr-light); background:var(--tr-light); } #landing.tr .tr-dark, #landing.tr .tr-end, #landing.tr .tr-feats, #landing.tr .tr-foot, #landing.tr > .tf-footer{ background:var(--tr-light); color:var(--tr-ink); } #landing.tr .tr-dark .tr-tag, #landing.tr .tr-feats .tr-tag{ background:#fff; color:var(--tr-blue); box-shadow:0 0 0 1px var(--tr-line); } #landing.tr .tr-steps li.on::before{ background:var(--tr-ink); box-shadow:0 0 0 4px rgba(14,14,17,.08); } /* the glows that were blue and violet on black become the soft light ones the light sections use */ #landing.tr .tr-g3{ background:radial-gradient(circle,#CFE2FF,transparent 70%); } #landing.tr .tr-g5{ background:radial-gradient(circle,#FFFFFF,transparent 70%); } #landing.tr .tr-g7{ background:radial-gradient(circle,#CFE2FF,transparent 65%); } /* the big windows: no shadow anywhere, the hairline only */ #landing.tr .tr-win, #landing.tr .tr-dark .tr-win{ box-shadow:0 0 0 1px rgba(0,0,0,.07); } /* the small template cards on the wall: a much lighter shadow */ #landing.tr .tr-wall-track img{ box-shadow:0 6px 16px -10px rgba(10,12,30,.28), 0 0 0 1px rgba(0,0,0,.06); } /* the editor taken apart: soft shadows for a light page */ #landing.tr .tr-ex-bar, #landing.tr .tr-ex-rail, #landing.tr .tr-ex-props, #landing.tr .tr-ex-canvas{ box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 14px 30px -18px rgba(10,12,30,.3); } #landing.tr .tr-ex-canvas img{ box-shadow:0 8px 20px -14px rgba(10,12,30,.3); } /* the feature cards: white on light grey, with a hairline */ #landing.tr .tr-feats .tr-block-p, #landing.tr .tr-feats .tr-feat-p{ color:var(--tr-mute); } #landing.tr .tr-feat{ background:#fff; box-shadow:0 0 0 1px var(--tr-line); } /* the buttons that turned white for the black sections are black again */ #landing.tr #trWallHead .tr-btn, #landing.tr #trS4 .tr-btn, #landing.tr #trEnd .tr-btn, #landing.tr #trWallHead .tr-btn:hover, #landing.tr #trS4 .tr-btn:hover, #landing.tr #trEnd .tr-btn:hover{ background:#000; color:#fff; border-color:#000; } /* the back-to-top button is black on every section now */ #landing.tr .tr-totop.tr-totop-pale, #landing.tr .tr-totop.tr-totop-pale:hover{ background:#000; color:#fff; } /* the footer: dark words on light */ #landing.tr .tr-foot{ border-top:1px solid var(--tr-line); } #landing.tr .tr-foot-col h3{ color:var(--tr-ink); } #landing.tr .tr-foot-col a, #landing.tr > .tf-footer .tf-flinks a{ color:var(--tr-mute); } #landing.tr .tr-foot-col a:hover{ color:var(--tr-ink); } #landing.tr .tr-foot .soc a{ color:var(--tr-ink); border-color:var(--tr-line); } #landing.tr .tr-foot .soc a:hover{ color:var(--tr-ink); background:#fff; border-color:var(--tr-line); } /* REGULAR HEADINGS AND NO OUTLINES ON THE HOMEPAGE — 28 October 2026. Mounir: "home page change all semi bold titles to regular, and remove this outlines from cards and scroll to animate". The site-wide rule makes headings Semibold; on the homepage they are Regular (400). The hairline edges around the cards (features, apps, prices, template wall) and around the scroll-animated windows and editor layers are gone. */ #landing.tr :is(h1,h2,h3,h4,h5,h6,.tr-h1,.tr-h2,.tr-h3,.tr-h4,.tr-end-h,.tr-app-h,.tr-feat-h,.tr-plan-name){ font-weight:400 !important; } #landing.tr .tr-steps li{ font-weight:400; } #landing.tr .tr-win, #landing.tr .tr-dark .tr-win{ box-shadow:none; } #landing.tr .tr-ex-bar, #landing.tr .tr-ex-rail, #landing.tr .tr-ex-props, #landing.tr .tr-ex-canvas{ box-shadow:0 14px 30px -18px rgba(10,12,30,.3); } #landing.tr .tr-wall-track img{ box-shadow:0 6px 16px -10px rgba(10,12,30,.28); } #landing.tr .tr-feat, #landing.tr .tr-app{ box-shadow:none; border:0; } #landing.tr .tr-plan{ border-color:transparent; } #landing.tr .tr-shot{ box-shadow:0 70px 130px -40px rgba(10,12,30,.45); } /* the opening editor window: its shadow stays, the edge goes */ #landing.tr .tr-card{ box-shadow:0 30px 60px -24px rgba(16,18,40,.35); } /* the three floating cards in the opening: same */ #landing.tr .tr-card-t{ font-weight:400; } /* the titles on the three floating cards in the opening */