/* "The whole tool" section on the landing page. Driven by the scrollcraft engine (scripts/landing/scrollcraft.js): the section pins itself and the feature rail pans sideways while you scroll. Only this section uses it. Everything is gated behind .sc-ready, the class the engine puts on once it has mounted — so without JavaScript the section degrades to a normal block with a horizontally scrollable rail instead of collapsing to an invisible, unreachable strip. */ /* --- the few scrollcraft tokens the devices below actually read ----------- */ :root { --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --sc-z-stage: 1; } /* --- scrollcraft devices (verbatim behaviour, .sc-ready-gated) ------------ */ [data-sc-pan] { display: flex; will-change: transform; } .sc-ready [data-sc-cue] { opacity: 0; will-change: opacity, transform; } .sc-split { display: inline-block; overflow: hidden; vertical-align: top; } .sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; } .sc-split__i { display: inline-block; will-change: transform, opacity; } .sc-is-split { opacity: 1 !important; } /* Pre-existing landing bug, ~30px of sideways page scroll below 820px: landing.css sets .landing__button { width: 100% } there, and the project has no border-box reset, so the button's 30px side padding is added on top of the full width. Dropping the body margin above widened the parent and made it 38px, so it is corrected here instead of left worse than it was. */ @media (max-width: 820px) { body.landing .landing__button { box-sizing: border-box; } } /* --- the section --------------------------------------------------------- */ /* style.css never resets the browser's default 8px body margin, so every page sits in an 8px white frame. On a full-bleed dark section that frame shows up as a white stripe down both sides, and it also pushes the panning rail 8px past the right edge at the end of its travel. Dropped for this page only — .landing is on the landing page's and nowhere else. */ body.landing { margin: 0; } .landing__showcase { --showcase-navy: #2a3647; --showcase-surface: #343f52; --showcase-cyan: #29abe2; --showcase-ink: #ffffff; --showcase-ink-soft: #c3cbd6; --showcase-hairline: rgba(255, 255, 255, 0.14); /* Gleiche Startlinie wie .landing__hero und .landing__section: die haben max-width var(--landing-max) (Content-Box) plus 24px Innenabstand und stehen zentriert, ihr Text beginnt also bei (Breite - Spalte) / 2, mindestens aber bei 24px. --landing-max kommt aus landing.css und waechst auf breiten Schirmen mit. */ --showcase-gutter: max(24px, calc((100% - var(--landing-max, 1100px)) / 2)); /* Breite einer normalen Karte (Inhaltsbox) und daraus die Aussenbreite samt Innenabstand und Rahmen. Der Nachlauf am Ende der Reihe rechnet damit, wie weit die letzte Karte noch nach links laufen darf, ohne aus dem Bild zu geraten. --sc-gap ist der Abstand zwischen zwei Karten. */ --sc-card: 340px; --sc-gap: clamp(16px, 2vw, 28px); --sc-card-outer: calc( clamp(250px, 76vw, var(--sc-card)) + 2 * clamp(20px, 2.4vw, 30px) + 2px ); background: var(--showcase-navy); color: var(--showcase-ink); } .landing__showcase-stage { display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 4vh, 48px); padding-block: clamp(48px, 8vh, 96px); /* No JavaScript: the rail is simply a scroll region the reader can swipe. */ overflow-x: auto; overscroll-behavior-x: contain; } .sc-ready .landing__showcase-stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: 0; overflow: clip; z-index: var(--sc-z-stage); } /* Headline block — stays put while the cards travel past it. */ .landing__showcase-head { padding-inline: var(--showcase-gutter); max-width: 760px; } .landing__showcase-eyebrow { margin: 0 0 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--showcase-cyan); } .landing__showcase-title { margin: 0 0 16px; font-size: clamp(30px, 5vw, 52px); line-height: 1.08; font-weight: 700; } .landing__showcase-lead { margin: 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--showcase-ink-soft); } .landing__showcase-hint { display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 14px; color: var(--showcase-ink-soft); } .landing__showcase-hint::after { content: ""; width: 42px; height: 1px; background: linear-gradient( to right, var(--showcase-cyan), transparent ); } /* The rail. Wider than the viewport on purpose — that overhang is exactly what the engine pans through as you scroll. */ .landing__showcase-rail { gap: var(--sc-gap); padding-inline: var(--showcase-gutter); align-items: stretch; } /* Nachlauf hinter der letzten Karte. Die Animation schiebt die Reihe um (Reihenbreite - Bildschirmbreite) nach links, und Chrome zaehlt den rechten Innenabstand eines Flex-Containers dabei nicht mit. Ohne diesen Platzhalter endet die Bewegung genau dann, wenn die letzte Karte ("And the door from outside") mit der rechten Bildschirmkante abschliesst - sie klebt am Rand und die Sektion gibt sofort weiter. Mit ihm laeuft sie bis kurz vor die Bildschirmmitte: - 50vw waere die Mitte, - der zweite Wert deckelt das auf "Karte bleibt ganz im Bild" (20px Reserve fuer die Bildlaufleiste, die in 100vw mitzaehlt), - der negative Aussenabstand hebt den Reihenabstand auf, damit der Wert wirklich der Abstand zur rechten Kante ist und nicht 16-28px mehr. */ .landing__showcase-rail::after { content: ""; flex-grow: 0; flex-shrink: 0; flex-basis: min( 50vw, max(0px, calc(100vw - var(--sc-card-outer) - 20px)) ); margin-inline-start: calc(-1 * var(--sc-gap)); } .landing__feature { flex: 0 0 auto; width: clamp(250px, 76vw, var(--sc-card)); display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--showcase-hairline); border-radius: 20px; background: var(--showcase-surface); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55); } .landing__feature--wide { width: clamp(280px, 86vw, 560px); } .landing__feature-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(41, 171, 226, 0.16); } .landing__feature-icon img { width: 26px; height: 26px; } .landing__feature-step { font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--showcase-cyan); } .landing__feature-title { margin: 0; font-size: clamp(20px, 2.2vw, 24px); font-weight: 700; } .landing__feature-text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--showcase-ink-soft); } .landing__feature-preview { margin-top: auto; /* The card is a column flex container, so a stretched image would be pulled to the full card width and squashed (560x234 instead of 376x234). flex-start keeps its own aspect ratio; auto width plus a max on both axes then shrinks the box to the scaled image, so there is no letterboxed gap beside it. The height cap keeps this one wide card from setting a rail height taller than the pinned viewport. */ align-self: flex-start; width: auto; max-width: 100%; max-height: clamp(150px, 26vh, 250px); border-radius: 12px; } .landing__feature-columns { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; } .landing__feature-columns li { padding: 6px 12px; border: 1px solid var(--showcase-hairline); border-radius: 999px; font-size: 14px; color: var(--showcase-ink-soft); } .landing__feature-link { margin-top: auto; align-self: flex-start; font-size: 16px; font-weight: 600; color: var(--showcase-cyan); text-decoration: none; border-bottom: 1px solid transparent; } .landing__feature-link:hover, .landing__feature-link:focus-visible { border-bottom-color: var(--showcase-cyan); } /* Short viewports. The stage is exactly one screen tall, so on a 640-720px high window the head plus the tallest card no longer fit and the headline gets clipped at the top. Trim the air rather than the content. */ @media (max-height: 820px) { .landing__showcase-stage { gap: 16px; } /* Wie auf schmalen Schirmen: oben ausrichten statt mittig. Auf flachen Fenstern ist der Inhalt der Buehne sonst hoeher als die Buehne, laeuft nach oben heraus und wird abgeschnitten - dann waere die Zeile "WHAT IS INSIDE" gar nicht mehr an der Bildschirmkante zu sehen. */ .sc-ready .landing__showcase-stage { justify-content: flex-start; padding-block-start: min(24px, 3vh); } .landing__showcase-title { font-size: clamp(26px, 3.4vw, 38px); } .landing__showcase-hint { display: none; } .landing__feature { padding: 20px; gap: 10px; } } /* Reduced motion: the engine stops panning, so the same cards have to stay reachable by hand. */ @media (prefers-reduced-motion: reduce) { .sc-ready .landing__showcase-stage { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; } .landing__feature { scroll-snap-align: center; } .sc-ready [data-sc-cue] { opacity: 1; } } @media (max-width: 700px) { .landing__feature--wide .landing__feature-preview { display: none; } } /* Grosse Schirme: die Karten wachsen mit. Zwei Gruende. Erstens sehen 340px breite Karten auf einem 4K-Schirm winzig aus. Zweitens lebt dieser Abschnitt davon, dass die Kartenreihe breiter ist als der Bildschirm - nur diesen Ueberhang schiebt die Scroll-Animation seitwaerts. Bei 3840px Breite war der Ueberhang auf 0 geschrumpft: die Sektion blieb anderthalb Bildschirme lang stehen, ohne sich zu bewegen. */ @media (min-width: 1600px) { .landing__showcase { --sc-card: 400px; } .landing__feature--wide { width: 660px; } /* Der Kopf des Abschnitts zieht mit der Ueberschrift des Hero mit - 52px neben einem 72px-Titel weiter oben wirkt wie ein Bruch. */ .landing__showcase-title { font-size: 64px; } .landing__showcase-lead { font-size: 22px; } .landing__showcase-head { max-width: 900px; } } @media (min-width: 2400px) { .landing__showcase { --sc-card: 480px; } .landing__feature--wide { width: 820px; } .landing__feature-text { font-size: 18px; } } /* Die groesste Kopf-Stufe haengt zusaetzlich an der Fensterhoehe: der Abschnitt ist genau einen Bildschirm hoch, und auf einem 2560x900-Fenster ragten Kopf plus Karten 17px darueber hinaus - die Ueberschrift waere oben abgeschnitten worden. */ @media (min-width: 2400px) and (min-height: 1000px) { .landing__showcase-title { font-size: 76px; } .landing__showcase-lead { font-size: 24px; } .landing__showcase-head { max-width: 1040px; } } /* Schmale Schirme: der Kopf der Buehne steht oben statt mittig. Der Einstieg darueber ist so hoch bemessen, dass genau die Zeile "WHAT IS INSIDE" unten am Bildschirmrand stehen bleibt. Bei mittiger Ausrichtung haengt diese Zeile auf einem hohen Handy 130px unter der Abschnittskante - der Einstieg muesste dann 130px kuerzer sein, als sein eigener Text braucht. Oben ausgerichtet sind es rund 25px. */ @media (max-width: 820px) { .sc-ready .landing__showcase-stage { justify-content: flex-start; padding-block-start: min(24px, 3vh); } }