/* ============================================================ Inter, selbst gehostet. Vorher kam die Schrift von fonts.googleapis.com/fonts.gstatic.com -- und damit ging die IP JEDES Besuchers an Google LLC in die USA, bevor irgendjemand irgendetwas angeklickt hatte. Das ist der Fall des LG Muenchen I (20.01.2022, 3 O 17493/20); sauber waere die Einbindung nur mit vorgeschalteter Einwilligung gewesen, also mit einem Banner auf einer Seite, die keins hat. Eine Datei, 48 KB, Variable Font ueber 400-700: das ersetzt vier statische Schnitte UND zwei Preconnects. Subset "latin" (U+0000-00FF ...) traegt Umlaute, Eszett, Paragraphenzeichen und die typografischen Anfuehrungen der Seite. Damit verlaesst kein Byte dieser Website die eigene Domaene, der Abschnitt "Schriftarten" in der Datenschutzerklaerung entfaellt ersatzlos, und die Seite laedt offline. ============================================================ */ @font-face { font-family: 'Inter'; font-style: normal; /* 300, nicht 400, als Untergrenze. Der Bereich in @font-face sagt dem Browser, was die Datei kann -- ist er zu eng, klemmt er ab, und font-synthesis-weight:none im Reset verbietet zugleich das Faelschen. Folge: --sc-weight-whisper (300) rendert exakt wie 400, an beiden Stellen, an denen es steht. Die "whisper voice" der Vorlage, im BRIEF als Entscheidung protokolliert, hat die Seite nie erreicht. Gemessen an derselben Datei, 48px, "Fundament Handgloves 123": als "400 700" deklariert -> 300 = 622,95px = 400 als "100 900" deklariert -> 300 = 615,08px, 400 = 622,95px Die Achse war die ganze Zeit da. */ font-weight: 300 700; /* Variable: ein File, alle Schnitte */ font-display: swap; src: url('assets/fonts/inter-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ Tokens — from /Volumes/Goose/Goose/Website/DesignSystem/src/ styles/tokens.css and Referenz/DESIGN.md. No new typeface, and no new colours BEYOND the four measured exceptions named under "Ausnahmen" below. Die Zeile hiess frueher "No new colours" und war falsch: vier Werte standen ohne Namen und ohne Begruendung im Blatt. The display sizes are CLAMPED, not fixed. The reference's 96px is the ceiling, not the constant: set flat, it dragged the document 298px wider than a 390px phone and cut the first headline in half. Every floor stays at or above the reference's own 40px minimum for headings. ============================================================ */ :root { --sc-canvas: #ffffff; --sc-surface: #f5f5f7; --sc-ink: #1d1d1f; --sc-ink-soft: #707070; --sc-hairline: #d6d6d6; /* #0071e3 is the filled-button fill and nothing else; inline links take #0066cc. Referenz/DESIGN.md, Do's: "Reserve #0071e3 for filled CTA buttons only — never as text color, never as decoration." */ --sc-accent: #0071e3; --sc-accent-ink: #ffffff; --sc-link: #0066cc; --sc-ember: #b64400; /* ---- Ausnahmen. Vier Werte, die die Vorlage nicht fuehrt. Sie stehen hier mit Namen, damit sie als Entscheidung lesbar sind statt als Streuung: ein unbenannter Hex-Wert mitten in einer Regel ist genau das, was eine Palette aushoehlt. */ --sc-ink-black: #0c0c0d; /* Grund der Bildkarte in Kapitel I. Dunkler als --sc-ink, damit das Produktbild und nicht der Karton die dunkelste Flaeche ist. */ --sc-bubble: #33343a; /* Sprechblase des Nutzers auf #1d1d1f. Die Vorlage kennt keine Chat-Komponente. */ --sc-plate-field: #eee9e0; /* Aus den vier Aluminium-Platten gemessen, nicht aus Starlight (#f0e4d3) bestellt: bei object-fit:contain zeigt jede Abweichung sich als Naht im Briefkasten. */ --sc-cool-wash: #e8e8ed; /* Steht in der Vorlage als "Cool Wash": gedaempfte Knopfflaechen und Hover. Er war hier nur nie deklariert -- anders als die vier Werte darueber ist er KEINE Ausnahme. */ --sc-accent-hover: #0062c4; /* Die Vorlage nennt keinen Hover-Wert fuer #0071e3. Luecke der Vorlage, nicht der Seite. */ --sc-font-display: 'SF Pro Display', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --sc-font-text: 'SF Pro Text', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --sc-t-xs: 0.875rem; /* 14 caption */ --sc-t-sm: 1.0625rem; /* 17 body-sm */ --sc-t-base: 1.3125rem; /* 21 body */ --sc-t-lg: 1.75rem; /* 28 body-lg */ --sc-t-xl: 2.5rem; /* 40 heading-sm */ --sc-t-2xl: clamp(2.5rem, 1.1rem + 4vw, 3.5rem); /* 40 → 56 */ --sc-t-3xl: clamp(2.5rem, 1.2rem + 6vw, 5rem); /* 40 → 80 */ --sc-t-4xl: clamp(2.75rem, 1rem + 8vw, 6rem); /* 44 → 96 */ --sc-track-tight: -0.015em; --sc-track-snug: -0.006em; --sc-track-normal: -0.01em; /* --sc-track-wide (0.04em) ist ersatzlos weg: die Vorlage kennt nirgends positives Tracking ueber +0.011em und keine Versalienkomponente. */ /* Referenz: -0.022em at 17px, "the canonical reading size across all Apple pages". It was declared nowhere and applied to no body copy. */ --sc-track-body: -0.022em; /* Die Kurve der Vorlage kehrt in der Mitte das Vorzeichen um: eng bei Displaygroessen, OFFEN bei 21 und 28px, wieder eng beim 17px-Fliesstext -- genau das macht die mittleren Groessen "warm and approachable". --sc-track-body ist der Wert FUER 17px und war von dort auf die ganze Skala kopiert: bei 21px lag das 0,69px pro Zeichen daneben, bei 28px 0,81px, jeweils mit falschem Vorzeichen. Tabelle der Vorlage: 21px +0,231px, 28px +0,196px. */ --sc-track-mid: 0.011em; /* 21px, zu --sc-t-base */ --sc-track-midlg: 0.007em; /* 28px, zu --sc-t-lg */ --sc-leading-none: 1.05; /* Referenz: 1.04–1.07 on display sizes */ --sc-leading-tight: 1.15; --sc-leading-body: 1.47; /* Referenz: 1.47 on body-sm (25/17) */ /* Und derselbe Fehler beim Durchschuss: 1,47 ist 25/17. Die Vorlage gibt 21px auf 29px. */ --sc-leading-mid: 1.38; /* Referenz: 29/21 */ --sc-measure: 34rem; /* Referenz, Layout: page max-width 1200px, section gap 100–120px. The engine ships 82rem/72–176px, which is a different page. */ --sc-maxw: 75rem; /* Die Bildkarten laufen breiter als die Seite: 1760px gegen 1200px. Apple laesst Produktbilder ueber die Textbreite hinaus laufen, insofern gibt es den Fall -- aber der Wert stand dreimal als nacktes Literal im Blatt und war nirgends begruendet. Ein Wert, ein Ort. */ --sc-card-maxw: 110rem; /* 1760px */ --sc-section: clamp(6.25rem, 7vw, 7.5rem); /* Vorlage: 100-120px. Der Boden lag bei 80px und damit unter der Untergrenze. */ /* Product finish swatches, used ONLY as the field colour inside the chapter IV images. Never as UI. */ --sc-sky: #c8d8e0; --sc-citrus: #dddc8c; --sc-starlight: #f0e4d3; --sc-silver: #e3e4e5; --sc-blush: #e8d0d0; --sc-indigo: #596680; --sc-midnight: #2e3642; --sc-r-sm: 10px; --sc-r-md: 10px; --sc-r-lg: 28px; --sc-r-pill: 980px; --sc-r-bubble: 18px; /* Sprechblase. Die Vorlage kennt keine; 28px machte aus einer einzeiligen Blase eine Pille, 10px einen Kasten. */ } .sc-display { font-weight: 600; } a { color: inherit; } /* Anchor targets must clear the fixed bar, or a jump lands with the heading hidden underneath it. */ html { scroll-padding-top: 64px; } /* 52px product bar + air */ /* ------------------------------------------------ product sub-nav ----- Apple's second tier: the company bar on top, the product bar under it carrying the sections of THIS page plus the one action. The company tier that used to sit above it is gone — one page, one product, one bar; a second row saying only "Goose" above "Goose AI" was the word twice in the top 100px. It is opaque from the first pixel: it is the page's own furniture, not an overlay that earns its background by scrolling. */ .subnav { position: fixed; top: 0; left: 0; right: 0; z-index: 79; height: 52px; font-family: var(--sc-font-text); background: rgba(250,250,252,0.94); -webkit-backdrop-filter: saturate(180%) blur(15px); backdrop-filter: saturate(180%) blur(15px); /* --sc-hairline, nicht rgba(0,0,0,0.12): das ergab auf #fafafc ~#e0e0e2 und damit eine zweite, hellere Haarlinie neben der der ganzen Seite. */ box-shadow: inset 0 -1px 0 var(--sc-hairline); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .subnav { background: #fafafc; } } .subnav__inner { max-width: 1024px; margin-inline: auto; height: 100%; padding-inline: clamp(1rem, 4vw, 1.375rem); display: flex; align-items: center; gap: clamp(0.75rem, 3vw, 2rem); } .subnav__name { font-family: var(--sc-font-display); font-size: 1.3125rem; font-weight: 600; /* 21px, Apple's local-nav title */ letter-spacing: var(--sc-track-tight); color: var(--sc-ink); text-decoration: none; white-space: nowrap; } .subnav__links { display: flex; align-items: center; gap: clamp(0.25rem, 1.5vw, 1rem); margin-left: auto; } .subnav__links a { font-size: 0.75rem; font-weight: 400; color: rgba(0,0,0,0.8); text-decoration: none; padding-inline: 10px; display: flex; align-items: center; min-height: 44px; transition: color 160ms var(--sc-ease-out); } .subnav__links a:hover { color: rgba(0,0,0,1); } .subnav__links a:focus-visible { outline: 2px solid var(--sc-link); outline-offset: -3px; border-radius: 6px; } @media (max-width: 833px) { /* The product name goes, not the links: the wordmark one bar up already says whose page this is, and the links are the only way to move. */ .subnav__name { display: none; } .subnav__links { margin-left: 0; flex: 1; justify-content: space-between; gap: 0; } .subnav__links a { padding-inline: 4px; } } @media (prefers-reduced-motion: reduce) { .subnav__links a { transition: none; } } /* No grain, no shadow, no gradient decoration: the reference forbids texture and elevation. Depth comes from parallax, occlusion and the hard white/grey band cuts. */ /* ------------------------------------------------- filled pill CTA -- Referenz/DESIGN.md's primary component, and the one the page was missing entirely: --sc-r-pill was declared and never used, so the build shipped with zero buttons. */ .pill { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; padding: 0.7rem 1.4rem; background: var(--sc-accent); color: var(--sc-accent-ink); border-radius: var(--sc-r-pill); font-family: var(--sc-font-text); font-size: var(--sc-t-sm); text-decoration: none; white-space: nowrap; transition: background 180ms var(--sc-ease-out); } .pill:hover, .pill:focus-visible { background: var(--sc-accent-hover); } .pill:active { transform: translateY(1px); } .pill--ghost { background: transparent; color: var(--sc-ink); border: 1px solid rgba(29,29,31,0.8); } .pill--ghost:hover, .pill--ghost:focus-visible { background: var(--sc-cool-wash); } /* Apple's local-nav action is a small pill, not the hero's full-size one: a 44px-tall button in a 52px bar leaves no bar. 32px still clears the 24px minimum target comfortably. This has to sit AFTER .pill, not with the sub-nav rules further down: same specificity, so source order decides, and declared first it lost every property to the base class and rendered 48px tall in a 52px bar. */ .pill--sm { min-height: 32px; padding: 0.3rem 0.9rem; font-size: 0.75rem; } /* Am Zeigegeraet ist 32px richtig (siehe oben), am Finger nicht: die Trefferflaeche waechst auf 44px, der sichtbare Kasten bleibt 32px. Gleiches fuer die Rechtszeile im Schluss, die 21px hoch ist. Dazu die drei eigenstaendigen Links der Anmeldeseite: "Kennung vergessen?", "Passwort vergessen?" und "Registrieren" stehen je allein auf einer Zeile und sind damit Handlungen, keine Verweise im Satz -- ein Link MITTEN im Fliesstext darf 20px hoch sein (sonst ueberlappen sich die Zeilen, und die Zielgroessen-Regel nimmt ihn ausdruecklich aus), ein Link, der allein steht, nicht. Gemessen waren es 20px. */ @media (pointer: coarse) { .pill--sm, .close__legal a, .login__meta a, .login__new a { position: relative; } .pill--sm::after, .close__legal a::after, .login__meta a::after, .login__new a::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 44px; transform: translateY(-50%); } } /* Text link with arrow — #0066cc, underline on hover only. */ .tlink { color: var(--sc-link); text-decoration: none; transition: color 180ms var(--sc-ease-out); } .tlink:hover, .tlink:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .tlink .cta-arrow { display: inline-block; transition: transform 180ms var(--sc-ease-out); } .tlink:hover .cta-arrow { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .tlink .cta-arrow, .pill { transition: none; } .tlink:hover .cta-arrow { transform: none; } } /* Kein Folio, kein Kapitelzaehler. Ein fixes "III · TAX OS" in der Ecke ist die Kapitelnavigation der chaptered-editorial-Grammatik und zugleich das, was auf einer Apple-Seite als Einziges nie vorkommt: Apple nummeriert Abschnitte nicht und haengt nichts in die Ecke. Die Seite hat eine Produktleiste oben; das ist die Navigation. Der Aktenspiegel zaehlt weiter, er rendert nur noch dort, wo er etwas bedeutet: im Boden des Peak-Bildes. */ /* ============================================================ HERO === Apple's Product Hero, layered. Three planes that move at different rates with real occlusion: the light wash drifts with the reader, the type block sits still, and the product plane recedes behind it and is clipped by it. Depth from separation and differential movement, not from a drop shadow. */ .hero { position: relative; overflow: clip; padding-block: calc(var(--sc-9) + 52px) 0; /* clears the fixed bar */ } /* Kein .hero__wash mehr. Er war ein Radialverlauf in rgba(200,216,224,0.5) -- das IST --sc-sky, und sechzig Zeilen weiter oben steht der eigene Satz dazu: "Never as UI". Die Vorlage sagt dasselbe: Farbe erscheint in der Produktabbildung, nie als UI-Dekoration, und Verlaeufe auf Oberflaechen sind ausgeschlossen. Die Tiefe des Hero kommt aus der Parallaxe zwischen Typo-Ebene und Produktebene und aus der Okklusion dazwischen -- so steht es im Kommentar darueber, und so trug es den Akt auch ohne den Wisch. */ .hero__type { position: relative; z-index: 2; } /* Referenz, Product Hero: centred stack — headline, CTA, then the product image filling the lower part of the frame. Weight 700 is the reference's own call for 80–96px display type ("the tight tracking on huge type is what makes Apple headlines feel architectural"); 600 is for section headings. No product-name eyebrow: the product bar carries it two rows up, and the word would otherwise appear three times in the first 300px. Centring is the exception here, not the rule: the skill bans centred copy in EVERY act, not in one. The six chapters below stay left-aligned. */ .hero__type { text-align: center; } .hero__title { margin-top: 0; font-size: var(--sc-t-4xl); font-weight: 700; line-height: var(--sc-leading-none); letter-spacing: var(--sc-track-tight); max-width: 18ch; margin-inline: auto; } .hero__deck { margin-top: var(--sc-5); font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-midlg); line-height: var(--sc-leading-tight); color: var(--sc-ink-soft); max-width: 34ch; margin-inline: auto; } .hero__actions { margin-top: var(--sc-6); display: flex; gap: var(--sc-6); flex-wrap: wrap; justify-content: center; align-items: center; } /* Apples eigene Hero-Paarung: ein gefuellter Pill und daneben ein blauer Textlink mit Pfeil, kein zweiter umrandeter Knopf. .tlink war dafuer deklariert und wurde auf der ganzen Seite nie benutzt. */ /* gap, nicht das Leerzeichen im Markup: ein Flex-Container verwirft den Zwischenraum zwischen seinen Elementen, der Pfeil klebte am letzten n. */ .hero__actions .tlink { display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); } /* The product plane. Referenz: "Product image fills lower half." For software the product IS the window, so that is what stands here now; the folder still moved down to chapter I, where the card is the right size to show it as an object. Parallax keeps this a separate plane from the type above it. */ /* Same box as the big cards in I and III: the frame padding is repeated here rather than shared, because the hero has no .sc-stage wrapper to carry it. Change one, change both. */ .hero__product { position: relative; z-index: 1; margin-top: var(--sc-8); width: min(var(--sc-card-maxw), 100% - 2 * clamp(0.75rem, 2.2vw, 1.75rem)); margin-inline: auto; } .hero__product img { display: block; width: 100%; height: auto; border-radius: var(--sc-r-lg); } /* The card goes full tile width; the thread does not. A 1400px measure is unreadable, so the conversation keeps its own column inside it. */ /* height:auto, nicht min(86vh,40rem). Feste Hoehe plus zentrierter Inhalt hiess: der Inhalt endete nach 60% der Karte, darunter stand eine tote schwarze Flaeche ueber ~440px (lab/index/01.png). Die Vorlage: "the product IS the visual" -- und das Produktfenster ist der einzige Ort der Startseite, an dem das Produkt zu sehen ist. .stage__product .chat hat genau diese Behandlung schon; sie war am Hero nie angekommen. */ .hero__product .chat { text-align: left; height: auto; max-height: min(86vh, 40rem); padding: clamp(1.5rem, 4vw, 4rem); } .hero__product .chat__bar { position: absolute; top: clamp(1.25rem, 2.2vw, 2rem); left: clamp(1.5rem, 4vw, 4rem); } .hero__product .chat__thread { width: min(56rem, 100%); margin-inline: auto; } @media (max-width: 860px) { .hero__product { margin-top: var(--sc-7); } } /* No decorative plate in the hero. The slab render that sat here was a product shot for a product that does not exist: no subject, no relation to the argument. The reference's own hero is type on white, and the depth the reader actually reads comes from the wash drifting behind the type and chapter I's card rising into the same white. */ .hero { padding-bottom: var(--sc-8); } /* The bar offset has to be repeated here: this rule overrides the whole padding-block shorthand, and without it the masthead sat at y=81 under a sub-nav that ends at 96. */ @media (max-width: 860px) { .hero { padding-block: calc(var(--sc-8) + 52px) var(--sc-7); } } /* ---------------------------------------------------------- chapters -- */ .chapter { padding-block: var(--sc-section); } .chapter--paper { background: var(--sc-canvas); } .chapter--canvas { background: var(--sc-surface); } /* ===================================================== I · REEL ====== The product still inside an inset card with the reference's own 28px radius, held in a pinned 100vh frame. The plate drifts against the card (parallax) and the copy wipes up (reveal, clip-path only), so the act has motion without a video. No scrim anywhere in here. The .chat block below is styled here but used in the HERO — it is the hero's product image. It lives next to its sibling card styles. */ .reel__frame { display: flex; align-items: center; justify-content: center; background: var(--sc-canvas); padding: clamp(0.75rem, 2.2vw, 1.75rem); } .reel__card { position: relative; width: min(var(--sc-card-maxw), 100%); height: min(86vh, 100%); border-radius: var(--sc-r-lg); overflow: hidden; background: var(--sc-ink-black); --sc-canvas: var(--sc-ink-black); } /* Hier stand: "Field and object are both dark in this shot, so white copy holds over the whole frame and needs no scrim." Das galt fuer den Aluminiumblock. Der Abendclip hat ein helles Fenster und eine beleuchtete Tischplatte, und die Copy steht genau darauf: gemessen 2,65:1 fuer die Ueberschrift am Schreibtisch, 1,02:1 fuer den Fliesstext am Telefon. Also braucht dieser Akt den Scrim, den der vorige nicht brauchte. Und er braucht ihn dauerhaft, nicht als einmal gemessene Zahl: auf einem gescrubten Clip ist der Grund unter jedem Wort in jedem Frame ein anderer. Von links, wo die Copy sitzt; rechts, wo Lampe und Fenster stehen, laeuft er aus und laesst das Bild stehen. */ .reel__card::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(100deg, rgba(12,12,13,0.93) 0%, rgba(12,12,13,0.88) 38%, rgba(12,12,13,0.55) 68%, rgba(12,12,13,0.15) 100%); } .reel__plate { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; } /* Der Clip und sein Poster gehoeren in die gerundete KARTE, nicht in die Buehne. scrollcraft.css spannt beide per `.sc-stage :is(video[...], .sc-stage__poster)` ueber die ganze Buehne auf -- Spezifitaet (0,2,1), also schlaegt sie `.reel__plate` (0,1,0) und das Bild liefe randlos ueber den Kartenrand hinaus. `:is()` addiert hier auf (0,3,1) und holt es zurueck in die Karte. Die Kartenform ist begruendete Arbeit (28px Haus-Radius, Feldfarbe), die der Clip nicht aufheben soll. */ .reel__card :is(video[data-sc-scrub], img.sc-stage__poster) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .reel__card img.sc-stage__poster { z-index: 1; } .reel__card video[data-sc-scrub] { z-index: 2; } .reel__copy { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4.5vw, 4.5rem); } .reel__title { color: #fff; font-size: var(--sc-t-3xl); line-height: var(--sc-leading-none); letter-spacing: var(--sc-track-tight); max-width: 13ch; } .reel__body { margin-top: var(--sc-5); font-size: var(--sc-t-base); letter-spacing: var(--sc-track-mid); line-height: var(--sc-leading-mid); color: rgba(255,255,255,0.88); max-width: 38ch; } /* The window itself. Real DOM, not a render: an image model asked for a user interface returns a band of garbled pseudo-glyphs, which is exactly how 02-vault.jpg shipped once already. The messages wipe in with data-sc-reveal, which is clip-path only — no opacity ramp, so every line is at full contrast the frame it appears, and none of this repeats the contrast trap the old scrub copy fell into. */ .chat { display: flex; flex-direction: column; gap: var(--sc-5); max-height: 100%; overflow: hidden; padding: clamp(1rem, 1.7vw, 1.6rem); border-radius: var(--sc-r-lg); background: #1d1d1f; } .chat__bar { display: flex; align-items: center; gap: 6px; } .chat__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); } .chat__name { margin-left: var(--sc-3); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-body); color: rgba(255,255,255,0.58); } .chat__thread { display: flex; flex-direction: column; gap: var(--sc-4); } .chat__msg { margin: 0; font-size: var(--sc-t-sm); line-height: var(--sc-leading-body); letter-spacing: var(--sc-track-body); } .chat__msg--you { align-self: flex-end; max-width: 84%; padding: var(--sc-3) var(--sc-5); border-radius: var(--sc-r-bubble); background: var(--sc-bubble); color: #fff; } .chat__msg--goose { color: rgba(255,255,255,0.92); } .chat__steps { margin: var(--sc-4) 0 0; padding: 0; list-style: none; } .chat__steps li { display: flex; gap: var(--sc-4); padding: var(--sc-3) 0; border-top: 1px solid rgba(255,255,255,0.12); font-size: var(--sc-t-xs); color: rgba(255,255,255,0.78); } .chat__steps li span { color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; } @media (max-width: 860px) { /* Portrait card, copy at the foot. object-position keeps the folder in frame when the 1.8:1 plate is cropped to 3/4. */ .reel__card { height: auto; aspect-ratio: 3 / 4; } .reel__plate { object-position: center 60%; } .reel__copy { justify-content: flex-start; } /* The card is a fixed box and the copy is absolutely placed in it, so overlong copy escapes through the top edge instead of pushing the box down. At 390px the headline alone was three 40px lines. */ .reel__title { font-size: clamp(1.75rem, 1rem + 4.2vw, 2.5rem); } /* Faellt die Groesse auf 17px, faellt das Tracking auf den 17px-Wert zurueck -- sonst steht die offene Mitte-der-Skala-Sperrung auf einer Groesse, fuer die die Vorlage -0,374px vorsieht. */ .reel__body { margin-top: var(--sc-4); font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); line-height: var(--sc-leading-body); } /* Die Copy laeuft hier ueber die volle Breite statt in der linken Haelfte, also deckt ein Verlauf von links die rechte Haelfte jeder Zeile nicht mehr. Gemessen waren es dort 1,02:1. Von unten. */ .reel__card::after { background: linear-gradient(to top, rgba(12,12,13,0.94) 0%, rgba(12,12,13,0.9) 50%, rgba(12,12,13,0.66) 80%, rgba(12,12,13,0.3) 100%); } .chat { gap: var(--sc-4); } .chat__msg { font-size: var(--sc-t-xs); } } /* =================================================== II · ARGUMENT === Deliberately NO media. Chapter I is a dark full-frame film; this is white paper and type. The previous build ran the same widescreen video card here as in I, at the same size with the same radii, so the two chapters read as one idea shown twice. The cut to paper is the variety. */ .argument { max-width: 52rem; } .argument__lines { font-size: var(--sc-t-2xl); line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-tight); } /* No `.argument__lines span { display:block }`: scrollcraft.css's own .sc-split--line already blocks each detected line, and a page-level rule also catches the engine's transient measurement probes (plain words appended here to detect wrapping), forcing one word per line at every width. */ .argument__body { margin-top: var(--sc-6); font-size: var(--sc-t-base); letter-spacing: var(--sc-track-mid); line-height: var(--sc-leading-mid); color: var(--sc-ink-soft); max-width: 46ch; } .argument__bar { margin-top: var(--sc-7); height: 2px; background: var(--sc-ink); transform: scaleX(var(--sc-p, 0)); transform-origin: left center; opacity: 0.55; } @media (prefers-reduced-motion: reduce) { .argument__bar { transform: scaleX(1); } } /* ======================================================= III · PEAK == The peak, and the only act with a span over 4. [data-sc-stage] is sticky and exactly 100vh/100svh with overflow:clip, so everything here has to fit one frame without relying on vertical stacking. No padding-block on the act's own outer element — that lives on .peak__frame, the sticky stage itself. Padding on the JS-sized (span*100vh) outer element measurably delayed native sticky release past where act progress reached 1, leaving a static hold. */ .peak { position: relative; padding-block: 0; } /* Same shell as chapter I: one big rounded card, image edge to edge, copy inside it. The act is unchanged — pin, parallax, reveal, cues. */ .peak__frame { display: flex; align-items: center; justify-content: center; padding: clamp(0.75rem, 2.2vw, 1.75rem); } /* The card is painted in the plates' own field colour, so the beat-to-beat cross-fade shows only the object changing. Two photographs dissolving over a different ground flash the ground in the middle of the mix. It is also what makes the copy safe over the image without a scrim: the measured failure of the previous plate (1.01:1 at its worst frame) came from hard shadow wedges in a photograph of a room. A flat field has no wedges — dark ink on #f0e4d3 is ~13:1 everywhere. */ .peak__card { position: relative; width: min(var(--sc-card-maxw), 100%); height: min(86vh, 100%); border-radius: var(--sc-r-lg); overflow: hidden; /* Aus den Platten selbst gemessen, nicht aus dem Starlight-Token, in dem sie bestellt wurden: bei object-fit:contain zeigt jede Abweichung sich als Naht im Briefkasten. Der Wert gehoert zum jeweiligen Shooting. #ecdec9 (236,222,201) war das alte; das Aluminium-Shooting steht auf einem kuehleren Creme, Mittel ueber das linke Drittel aller vier Platten: EFEAE2 / EDE9E2 / F1ECE2 / E9E4DA. */ background: var(--sc-plate-field); } /* Parallax (JS, writes transform on the wrapper) and the Ken-Burns zoom (CSS, writes transform on the img) each get their own element: two transform-writers cannot share a node without one silently winning every frame. */ /* ---- Der Peak als Film. Die vier Plattenbilder sind weg; hier laeuft ein Clip. Dieselbe Spezifitaetskorrektur wie bei .reel__card -- scrollcraft.css spannt Clip und Poster ueber die BUEHNE auf (0,2,1), sie gehoeren aber in die gerundete Karte. --sc-plate-field war aus den vier Aluminiumplatten gemessen, damit der Briefkasten bei object-fit:contain unsichtbar blieb. Mit einem Clip, der die Karte fuellt (cover), gibt es keinen Briefkasten mehr; die Karte traegt jetzt dasselbe --sc-ink-black wie Kapitel I, also keine neue Farbe. Das Token bleibt deklariert: es beschreibt die Platten, und die liegen weiter in assets/. */ .peak--film .peak__card { background: var(--sc-ink-black); } .peak--film .peak__card :is(video[data-sc-scrub], img.sc-stage__poster) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .peak--film .peak__card img.sc-stage__poster { z-index: 1; } .peak--film .peak__card video[data-sc-scrub] { z-index: 2; } /* Scrim. Auf einem gescrubten Clip ist der Grund unter jedem Wort in jedem Frame ein anderer, also laesst er sich nicht einmal messen und dann vergessen -- er braucht eine Flaeche, die in JEDEM Frame traegt. Von links, wo die Copy in der linken Kartenhaelfte steht; rechts, wo das Licht und die Blaetter liegen, laeuft er aus. */ .peak--film .peak__card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(100deg, rgba(12,12,13,0.93) 0%, rgba(12,12,13,0.87) 34%, rgba(12,12,13,0.5) 64%, rgba(12,12,13,0.12) 100%); } /* Schrift und Aktenspiegel drehen mit der Flaeche. --sc-stage-ink ist der helle Ton, den goose.html auf seinen schwarzen Buehnen schon fuehrt. */ .peak--film .peak__copy { z-index: 4; } .peak--film .peak__stack :is(p, h2) { color: var(--sc-stage-ink); } .peak--film .peak__stack p { color: rgba(245,245,247,0.82); } /* Der Aktenspiegel wandert von rechts unten nach links unten. Rechts lag er auf dem flachen Cremefeld der Platten; im Clip steht dort das Licht auf den Blaettern, also die hellste Stelle des Bildes -- und sie ist in jedem Frame woanders. Links unten deckt der Scrim mit 0,9, dort haelt ein heller Punkt ueber die ganze Laufzeit. */ .peak--film .peak__marks { z-index: 4; left: var(--sc-6); right: auto; justify-content: flex-start; } .peak--film .peak__mark { background: var(--sc-stage-ink); } @media (max-width: 860px) { /* Am Telefon steht die Copy unten und der Scrim kommt von unten; der Spiegel muss dann aus dem Textfeld heraus nach oben. */ .peak--film .peak__marks { left: var(--sc-4); top: var(--sc-4); bottom: auto; } /* Der Clip ist 16:9, die Karte hier 3:4. `cover` nimmt dann die Mitte -- und das Motiv (Blaetter, Licht, Tischkante) liegt rechts unten, faellt also heraus. Uebrig bliebe eine dunkle Flaeche mit einem Lichtfleck. Genau davor warnt der alte Plattenkommentar ein paar Zeilen weiter oben; bei den Platten war `contain` die Antwort, hier waere das ein Briefkasten ueber die halbe Karte. Also den Ausschnitt dorthin schieben, wo das Bild etwas zeigt. */ .peak--film .peak__card :is(video[data-sc-scrub], img.sc-stage__poster) { object-position: 72% 38%; } } .peak__plates { position: absolute; inset: 0; z-index: 1; } .peak__plate { position: absolute; inset: 0; opacity: 0; } /* contain, not cover. The card background is the plates' own field colour, so the letterbox is invisible — and contain is what keeps the object whole and the left half of the frame empty for the copy at every card ratio. cover on a 16:9 plate in a 3/4 card (mobile) crops to a narrow vertical slice and throws the object away. */ .peak__plate img { width: 100%; height: 100%; object-fit: contain; display: block; transform: scale(calc(1 + var(--sc-p, 0) * 0.04)); transform-origin: center; } @media (prefers-reduced-motion: reduce) { .peak__plate img { transform: none; } } /* The Aktenspiegel: one dot per content beat actually scrolled past, rendered into the floor of the peak image. */ /* Moved to the right edge: the copy now lives inside the card and would otherwise sit on top of the dots. */ .peak__marks { position: absolute; z-index: 4; right: var(--sc-6); bottom: var(--sc-6); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; max-width: 34%; } .peak__mark { width: 9px; height: 9px; border-radius: 50%; /* Nicht mehr Ember. Die Vorlage gibt #b64400 eine Rolle -- Badges, Validierung, kurze Statuslabels -- und diese Punkte sind keine davon, sondern Zierrat im Bildboden. In einem System, dessen Regel lautet, dass Chroma Bedeutung traegt, ist die einzige Statusfarbe des Hauses als Dekoration der teuerste Griff. Ink auf dem hellen Plattenfeld misst ~13:1; die Deckkraft unten haelt sie trotzdem zurueckhaltend. */ background: var(--sc-ink); opacity: 0; transform: translateY(8px); transition: opacity 520ms var(--sc-ease-out), transform 520ms var(--sc-ease-out); } .peak__mark.is-on { opacity: 0.85; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .peak__mark { transition: none; opacity: 0.85; transform: none; } } /* The four cue paragraphs share one box and cross-fade in place: stacking them in flow would grow past the fixed-height card. No scrim under them — the flat field is the contrast carrier. */ .peak__copy { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; padding: clamp(1.5rem, 4.5vw, 4.5rem); } .peak__stack { position: relative; width: min(34rem, 46%); min-height: clamp(11rem, 26vh, 16rem); } .peak__stack :is(p, h2) { position: absolute; inset: 0; margin: 0; color: var(--sc-ink); } .peak__stack h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem); line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-tight); } /* Der Satz, der etwas erklaert, ist Fliesstext. Alle vier Beats standen in 48px-Displaytype; Apple setzt EINE kurze Zeile gross und die Erklaerung klein darunter, nie einen Dreizeiler mit Nebensatz in Displaygroesse. Auf dem Telefon lief der laengste davon zusaetzlich unten aus der Karte heraus, weil der Stack eine feste Hoehe hat und der Text absolut sitzt. */ .peak__stack p { font-family: var(--sc-font-text); font-weight: 400; font-size: var(--sc-t-lg); line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-midlg); } @media (max-width: 860px) { /* Portrait card, copy at the foot on the empty field — the same arrangement the six tiles use, since the plates are now the same kind of picture. */ .peak__card { height: auto; aspect-ratio: 3 / 4; } .peak__plate img { object-position: center top; } .peak__copy { align-items: flex-end; padding-bottom: clamp(1.75rem, 6vh, 3rem); } /* Die Copy sitzt hier unten und ueber die ganze Breite, nicht mehr in der linken Haelfte -- ein Verlauf von links laesst dann die rechte Haelfte jeder Zeile ungedeckt. Also von unten. Derselbe Fehler, vor dem scrollcraft.css bei .sc-scrim--trail warnt. */ /* Die Dichte ist nachgemessen, nicht geschaetzt: der erste Ansatz (0,94/0,88/0,55/0,2) trug den Text mit 7,67:1 -- weit ueber der Schwelle -- und loeschte dafuer den halben Clip aus. Ein Scrim, der mehr deckt als noetig, macht den Einbau des Films sinnlos. */ .peak--film .peak__card::after { background: linear-gradient(to top, rgba(12,12,13,0.88) 0%, rgba(12,12,13,0.78) 42%, rgba(12,12,13,0.4) 74%, rgba(12,12,13,0.08) 100%); } .peak__stack { width: 100%; min-height: clamp(8rem, 24vh, 12rem); } .peak__stack p { font-size: var(--sc-t-base); } .peak__marks { right: var(--sc-4); bottom: var(--sc-4); gap: 7px; } .peak__mark { width: 7px; height: 7px; } } /* ==================================================== IV · SUBSTANCE = A pan act: the only lateral movement on the page. Vertical travel reads as argument, horizontal reads as range, and this chapter is a set of things held side by side. Under reduced motion the engine turns the rail into a native snap-scroller. */ /* align-items:center, not stretch. Stretched to the 100vh rail the tiles became portrait boxes with the copy pinned to the bottom of an otherwise empty card: at six tiles that is six columns of dead white. */ /* Eigener Rahmen, NICHT .peak__frame. Der Peak-Rahmen zentriert seinen Inhalt (justify-content:center), und ein Flex-Kind, das breiter ist als der Container, wird dabei nach BEIDEN Seiten aus dem Bild geschoben: die Schiene startete 1134px links ausserhalb, weshalb ihre Ueberschrift und die erste Kachel auf der fertigen Seite nie zu sehen waren, und endete auf einem leeren weissen Bild. Die Engine rechnet mit einer Schiene, die bei x=0 beginnt. */ .rail__frame { display: flex; align-items: center; justify-content: flex-start; } .rail { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); padding-inline: clamp(1.5rem, 6vw, 7rem); will-change: transform; } /* Chapter-I grammar at tile scale: the image IS the card, and the copy sits on it. Every still was composed with its subject in the upper half and an empty field below, so the copy lands on flat colour with nothing behind it — no scrim needed, and a scrim here would be the patch the skill's hard rules forbid. Das zweite Shooting ist durchgehend dunkel (Abend, eine Leuchte), also traegt jede Karte weisse Schrift statt nur die sechste. --tile-ink bleibt, weil die Regeln unten darauf stehen; nur der Wert ist jetzt fuer alle gleich. Der Grund ist --sc-ink-black wie in Kapitel I und III, nicht eine eigene Farbe, und er steht unter dem Bild fuer den Fall, dass ein Bild nicht laedt: dann bleibt die Schrift lesbar, statt weiss auf hell. */ .rail__card { position: relative; flex: 0 0 auto; width: min(30rem, 82vw); aspect-ratio: 3 / 4; height: auto; border-radius: var(--sc-r-lg); overflow: hidden; background: var(--sc-ink-black); --tile-ink: #fff; color: var(--tile-ink); } .rail__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .rail__copy { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--sc-6); } .rail__lead { flex: 0 0 auto; width: min(26rem, 80vw); display: flex; flex-direction: column; justify-content: center; } .rail__title { font-size: var(--sc-t-2xl); line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-tight); } .rail__sub { margin-top: var(--sc-4); font-size: var(--sc-t-base); color: var(--sc-ink-soft); } .rail__label { font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-midlg); color: var(--tile-ink); } /* Keine Abdunklung: die alte Fassung dimmte den Fliesstext auf 88%, was auf Pastell reichte. Auf dunklem Grund hat gedimmtes Weiss diesen Spielraum nicht — schon die indigofarbene Karte der ersten Fassung fiel damit auf 4,33:1 und stand deshalb auf 1. Die Hierarchie traegt jetzt allein der Groessen- und Tracking-Sprung zwischen --sc-t-lg und --sc-t-sm. */ .rail__body { margin-top: var(--sc-3); font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); color: var(--tile-ink); } /* Bei reduzierter Bewegung gibt die Engine die Schiene als gewoehnlichen Scrollbereich zurueck (overflow-x:auto auf der Buehne) — die Hoehe des Akts setzt sie aber weiter in JS auf span*100vh. Ergebnis: 3,6 Bildhoehen senkrecht scrollen an einem Streifen vorbei, der stillsteht. Ein Autoren- !important schlaegt die normale Inline-Deklaration der Engine, ohne die Engine anzufassen. Gemessen: neun identische Frames im reduced-Durchgang. */ @media (prefers-reduced-motion: reduce) { [data-sc-act="pan"] { height: 100svh !important; } } /* ===================================================== V · PRICING === */ .pricing-lead { font-size: var(--sc-t-2xl); line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-tight); max-width: 18ch; } .pricing-grid { margin-top: var(--sc-8); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sc-5); } /* Weiss auf dem grauen Band. Die Karten trugen --sc-surface, und das Band traegt --sc-surface: exakt derselbe Wert, also loesten sich drei der vier Karten im Hintergrund auf, waehrend die vierte weiss war und wie ein Versehen aussah. Referenz, Feature Showcase Card: weisse Karte auf dem grauen Band, kein Rahmen, kein Schatten. Empfohlen wird die Pro-Karte durch ihr Label und ihren gefuellten Pill, so markiert die Referenz. */ .plan { border-radius: var(--sc-r-lg); padding: var(--sc-6); background: var(--sc-canvas); display: flex; flex-direction: column; } .plan__badge { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-body); color: var(--sc-ink-soft); font-weight: 500; min-height: 1.2em; } .plan__name { margin-top: var(--sc-2); font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-midlg); } .plan__for { margin-top: var(--sc-2); font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); color: var(--sc-ink-soft); min-height: 3.2em; } .plan__features { list-style: none; margin: var(--sc-5) 0 0; padding: 0; flex: 1; } .plan__features li { font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); color: var(--sc-ink); padding-block: 0.45rem; border-top: 1px solid var(--sc-hairline); } .plan__features li:first-child { border-top: none; } .plan__cta { margin-top: var(--sc-6); align-self: flex-start; } @media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } } /* ==================================================== VI · CLOSE ===== A pinned close, not a footer. The previous build ended on a legal line fading out at the bottom of a grey band. This one stops, holds the last frame, and puts the single action in it. */ .close__frame { display: flex; align-items: center; } .close__inner { width: 100%; position: relative; z-index: 3; } /* ---- Der Schluss mit Film dahinter. Dieselbe Spezifitaetsfalle wie bei .reel__card: scrollcraft.css spannt Clip und Poster per `.sc-stage :is(...)` (0,2,1) ueber die Buehne auf. Hier ist das sogar richtig -- randlos ist genau die Absicht -- also nur z-index setzen, damit sie unter der Copy liegen (die hat 3). Der Scrim ist NICHT Dekoration und nicht wegzulassen: Text auf einem Standbild laesst sich einmal messen, Text auf einem gescrubten Clip nicht -- der Grund unter dem Wort ist in jedem Frame ein anderer. Also ein Verlauf von links, wo die Copy steht, der nach rechts ausgeht und das Bild dort ungetruebt laesst. Gemessen wird trotzdem, ueber mehrere Scrollstaende: eine Regel, die man nicht nachmisst, ist eine Hoffnung. */ /* KEIN `position: relative` und kein `overflow` auf .close__frame. Das Element IST die Buehne (es traegt data-sc-stage), und .sc-stage ist sticky mit overflow:clip -- also schon ein Positionierungskontext und schon beschnitten. Eine eigene position-Regel hat dieselbe Spezifitaet wie .sc-stage, steht spaeter und gewinnt: der Akt pinnt dann nicht mehr und scrollt leer durch. Genau davor warnt der Kommentar an .stage--lit weiter oben, und die Engine schreibt es in die Konsole -- was sie hier auch getan hat. Zweimal dieselbe Falle, zweimal von der Konsole gefangen. */ .close__film { z-index: 1; } video.close__film { z-index: 2; } .close--black .close__frame::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(100deg, rgba(12,12,13,0.92) 0%, rgba(12,12,13,0.86) 32%, rgba(12,12,13,0.55) 62%, rgba(12,12,13,0.18) 100%); } @media (max-width: 860px) { /* Am Telefon steht die Copy nicht mehr in der linken Haelfte, sondern ueber die ganze Breite. Ein Verlauf von links deckt dann die rechte Haelfte der Zeilen nicht mehr ab. Also von unten. */ .close--black .close__frame::after { background: linear-gradient(to top, rgba(12,12,13,0.94) 0%, rgba(12,12,13,0.88) 45%, rgba(12,12,13,0.6) 78%, rgba(12,12,13,0.35) 100%); } } .close__title { color: var(--sc-ink); font-size: var(--sc-t-3xl); line-height: var(--sc-leading-none); letter-spacing: var(--sc-track-tight); max-width: 14ch; } .close__line { margin-top: var(--sc-5); font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-midlg); line-height: var(--sc-leading-tight); color: var(--sc-ink-soft); max-width: 30ch; } .close__actions { margin-top: var(--sc-7); } .close__legal { margin-top: clamp(3rem, 12vh, 8rem); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); display: flex; gap: var(--sc-4); flex-wrap: wrap; } /* Unterstrich nur bei Hover -- so steht es bei jedem Linktyp der Vorlage. */ .close__legal a { color: var(--sc-ink-soft); text-decoration: none; text-underline-offset: 2px; } .close__legal a:hover, .close__legal a:focus-visible { text-decoration: underline; } .close__legal a:hover, .close__legal a:focus-visible { color: var(--sc-ink); } /* ================================================ UNTERSEITEN ========= Apples Unterseiten-Muster: eine grosse Zeile, ein Deck, sonst nichts. Kein Produktfenster wie auf der Startseite -- die Seite darunter bringt sofort ihr eigenes Bild, und zwei Bilder uebereinander sind eins zu viel. */ .masthead { padding-block: calc(var(--sc-9) + 52px) var(--sc-8); } .masthead__title { /* 600, nicht 700. Die Vorlage reserviert 700 fuer 80-96px; --sc-t-3xl klammert ab 40px, also stand hier 700 auf 40px. Auf tax-os.html war das schon einmal korrigiert (.masthead--hero) und nicht verteilt worden. 700 bleibt allein auf .hero__title, dessen Klammer bis 96px laeuft. */ margin: 0; font-size: var(--sc-t-3xl); font-weight: 600; line-height: var(--sc-leading-none); letter-spacing: var(--sc-track-tight); max-width: 16ch; } .masthead__deck { margin-top: var(--sc-5); font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-midlg); line-height: var(--sc-leading-tight); color: var(--sc-ink-soft); max-width: 42ch; } @media (max-width: 860px) { .masthead { padding-block: calc(var(--sc-8) + 52px) var(--sc-7); } } /* Die laufende Seite in der Leiste. Kein Unterstrich, kein Kasten: Apple markiert sie durch volles Ink gegen die 80%-Grauen der uebrigen. */ .subnav__links a[aria-current="page"] { color: rgba(0,0,0,1); } /* ==================================================== GOOSE · BUEHNEN == Die schwarzen Produktbuehnen von goose.html. Der Rahmen der Seite bleibt hell wie auf den vier Schwesterseiten; nur die Momente, in denen das Produkt arbeitet, werden schwarze Vollbilder. Das ist Apples eigener Griff und nicht der der refero-Vorlage, die die GANZE Seite dunkel fuehrt: Referenz/DESIGN.md bindet den Bau auf hell, und eine Seite von fuenf einfach umzudrehen haette goose.html aus dem Satz geloest. Kein Schatten, keine Verlaeufe auf Oberflaechen. Die Tiefe kommt aus dem Abstand zwischen #000000, #1d1d1f und der hellen Seite davor -- genau die drei Flaechen, die die Vorlage nennt. */ :root { --sc-stage-black: #000000; --sc-stage-ink: #f5f5f7; } /* [data-sc-stage] ist sticky, exakt 100vh und overflow:clip. Alles hier muss in EIN Bild passen, ohne sich vertikal zu stapeln -- dieselbe Regel, unter der .peak__frame schon steht. */ .stage { position: relative; padding-block: 0; background: var(--sc-stage-black); } .stage__frame { display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 3.5vh, 3rem); padding: calc(52px + clamp(1rem, 4vh, 2.5rem)) 0 clamp(1.5rem, 5vh, 3.5rem); background: var(--sc-stage-black); color: var(--sc-stage-ink); } /* Die Vorlage setzt das Produkt auf 60% Viewport-Hoehe und die Zeile darunter nach links. Das Fenster bekommt die Hoehe, nicht die Breite: ein Chatfenster, das in die Breite laeuft, ist ein Dokument. */ .stage__product { flex: 0 1 auto; min-height: 0; height: 60vh; display: flex; align-items: center; justify-content: center; /* Derselbe Seitenrand wie .sc-wrap, sonst klebt die Karte am Telefon an beiden Kanten: .stage__frame hat bewusst padding-inline 0, damit die schwarze Flaeche randlos laeuft. */ padding-inline: var(--sc-gutter); } /* Das Fenster umschliesst seinen Inhalt, es fuellt die 60vh nicht aus: auf volle Hoehe gezogen stand unter dem Gespraech eine tote Haelfte. Die 60vh sind die BUEHNE fuer das Produkt, nicht das Produkt. */ .stage__product .chat { width: min(100%, 46rem); height: auto; max-height: 100%; justify-content: flex-start; } .stage__title { font-size: var(--sc-t-2xl); line-height: var(--sc-leading-none); letter-spacing: var(--sc-track-tight); color: var(--sc-stage-ink); max-width: 18ch; text-wrap: balance; } .stage__line { margin-top: var(--sc-4); font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); line-height: var(--sc-leading-body); color: rgba(245,245,247,0.72); max-width: 46ch; } /* Die Tatsache im Satz, die den Fall entscheidet. Kein Leuchten, kein farbiger Halo: ein Unterstrich, der mit dem Akt aufzieht. Ember ist die einzige Statusfarbe des Hauses und beruehrt keinen Fliesstext. */ .fact { background-image: linear-gradient(var(--sc-ember), var(--sc-ember)); background-repeat: no-repeat; background-position: 0 100%; /* Direkt aus --sc-p des Akts, das die Engine auf dem Akt-Element veroeffentlicht und das hierher vererbt wird. max/min klemmen den Strich auf 0..100%, ohne dass negative background-size die ganze Deklaration fallen laesst. Kein eigener Timer, kein Listener. */ background-size: max(0%, min(100%, calc(var(--sc-p, 0) * 160% - 30%))) 2px; } /* ------------------------------------------------ II · DIE KETTE ------ Das helle Detailband der Vorlage: zwei Spalten, links der Schritt, rechts die Norm, die er zieht. Kein Bild -- die Kette IST das Bild. */ .chain { max-width: 58rem; } .chain__list { margin: var(--sc-8) 0 0; padding: 0; list-style: none; } .chain__step { display: grid; grid-template-columns: 2.5rem 1fr minmax(0, 16rem); gap: var(--sc-5); align-items: baseline; padding: var(--sc-6) 0; border-top: 1px solid var(--sc-hairline); } .chain__no { font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; } .chain__what { font-size: var(--sc-t-lg); line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-midlg); } .chain__norm { font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); line-height: var(--sc-leading-body); color: var(--sc-ink-soft); } @media (max-width: 860px) { .chain__step { grid-template-columns: 2rem 1fr; } .chain__norm { grid-column: 2; } .chain__what { font-size: var(--sc-t-base); } } /* ------------------------------------------ III · DIE NORM (PEAK) ----- Der Absatz klappt unter dem Schritt auf. data-sc-reveal ist clip-path und kein Opacity-Ramp: jede Zeile steht in dem Frame, in dem sie erscheint, auf vollem Kontrast. Dieselbe Begruendung wie bei .chat. */ .cite { border-radius: var(--sc-r-lg); background: #1d1d1f; padding: clamp(1.25rem, 2.6vw, 2rem); max-width: 48rem; width: min(100%, 48rem); } .cite__ref { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-body); color: rgba(245,245,247,0.55); } .cite__text { margin-top: var(--sc-4); font-size: var(--sc-t-base); line-height: var(--sc-leading-mid); letter-spacing: var(--sc-track-mid); color: var(--sc-stage-ink); } .cite__from { margin-top: var(--sc-5); padding-top: var(--sc-4); border-top: 1px solid rgba(255,255,255,0.14); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-body); color: rgba(245,245,247,0.6); } /* Das Licht folgt dem Zeiger ueber die Flaeche. --sc-mx/--sc-my kommen von data-sc-spotlight; die Engine gated das selbst auf (hover:hover) und (pointer:fine) und schaltet es bei reduzierter Bewegung ab. */ /* Das Licht gehoert auf das 100vh-Fenster, nicht auf die Sektion: die ist span*100vh hoch, und ein Radialverlauf ueber 2340px steht im sichtbaren Ausschnitt an der falschen Stelle. Und es darf das Buehnenelement selbst NICHT anfassen. Ein frueherer Versuch setzte hier `.stage--lit > * { position: relative }`, traf damit [data-sc-stage] und schlug .sc-stage's position:sticky bei gleicher Spezifitaet aus dem Rennen -- der Akt pinnte nicht mehr und die Buehne scrollte leer durch. Die Engine sagt das in die Konsole; nur wer sie liest, findet es. Deshalb: Position nur auf die Inhaltsbloecke. */ .stage--lit [data-sc-stage] { isolation: isolate; } .stage--lit [data-sc-stage]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(38rem 38rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%), rgba(255,255,255,0.09), transparent 70%); } .stage--lit .stage__product, .stage--lit .sc-wrap { position: relative; z-index: 1; } /* ------------------------------------------- V · SCHLUSS, SCHWARZ ----- Auf den vier Schwesterseiten steht derselbe helle Schluss. Hier ist er schwarz, damit der eine blaue Knopf das einzige Chromatische auf der Flaeche ist -- die Vorlage: "the only filled chromatic button". */ .close--black { background: var(--sc-stage-black); } .close--black .close__title, .close--black .close__line { color: var(--sc-stage-ink); } /* 0,68 war richtig auf einer ruhenden schwarzen Flaeche. Mit einem Clip darunter ist es das nicht mehr: gemessen 4,35:1 am Telefon und 4,62:1 am Schreibtisch, beide an der Linie oder darunter. Die gedaempfte Stufe bleibt -- sie macht die Hierarchie -- sie wird nur so weit dichter, dass sie auch ueber dem hellsten Frame traegt. */ .close--black .close__line, .close--black .close__legal { color: rgba(245,245,247,0.82); } .close--black .close__legal a { color: rgba(245,245,247,0.82); } .close--black .close__legal a:hover, .close--black .close__legal a:focus-visible { color: var(--sc-stage-ink); } /* Die umrandete Pille ist dunkle Tinte auf dunklem Rand -- auf index war das egal, weil dort nur die gefuellte stand. modelle und support fuehren beide eine zweite Handlung, und auf Schwarz waere sie unsichtbar gewesen. Der Rand ist gedaempft, die Schrift nicht: die Hierarchie zwischen gefuellt und umrandet macht die Flaeche, nicht die Lesbarkeit. */ .close--black .pill--ghost { color: var(--sc-stage-ink); border-color: rgba(245,245,247,0.55); } .close--black .pill--ghost:hover, .close--black .pill--ghost:focus-visible { background: rgba(245,245,247,0.12); } /* Platzhalterleiste. Unten fixiert, nicht oben: oben sitzt die 52px-Leiste, und ein zweites Band darunter haette den Masthead umgebaut. Ember ist die Statusfarbe des Hauses. Sie steht bewusst im Weg. */ .placeholder-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; margin: 0; padding: var(--sc-3) var(--sc-5); background: var(--sc-ember); color: #fff; font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-body); text-align: center; } /* =================================================== TAX-OS · HERO ==== Die zweite Apple-Referenz (styles.refero.design/…/aecac5da) ist die helle Store-Sprache: zentrierter Produktname, Tagline in Weight 300 ("whisper voice"), darunter ZWEI Pillen -- eine gefuellte und eine umrandete, nie zwei gefuellte. tax-os.html hatte bis zum Schluss der Seite ueberhaupt keine Handlung, und .pill--ghost lag seit dem Bau ungenutzt im Blatt. Zentriert wird NUR der Hero. Der Peak bleibt linksbuendig, die Schiene laeuft seitlich, der Schluss steht links: "centred copy in every act" ist eine Ship-Blocker-Regel des Scroll-Skills, und die Referenz meint mit "everything centered" ihre Hero- und CTA-Bloecke, nicht jeden Akt. */ /* Weight 300 steht in KEINEM Gewichtssatz der Vorlage: SF Pro Display fuehrt 600/700, SF Pro Text 400/500/600. Nur der Fliesstext der refero-Seite empfiehlt 300 fuer Subheads ("whisper voice"). Die beiden Quellen widersprechen sich; die Zeile bleibt, weil sie genau einmal benutzt wird, auf 28px und bei 16,8:1 -- aber sie ist eine Entscheidung gegen die Tokentabelle, nicht aus ihr. Inter traegt 300 als echtes Light. */ :root { --sc-weight-whisper: 300; } .masthead--hero { text-align: center; } .masthead--hero .masthead__title { max-width: none; margin-inline: auto; } .masthead--hero .masthead__deck { margin-inline: auto; max-width: 34ch; font-weight: var(--sc-weight-whisper); font-size: var(--sc-t-lg); color: var(--sc-ink); } .hero-actions { margin-top: var(--sc-7); display: flex; gap: var(--sc-4); flex-wrap: wrap; justify-content: center; } /* ------------------------------------------- DIE STILLE VOR DEM PEAK -- Der Peak hatte nichts vor sich: Masthead, dann sofort 4,2vh Hoehepunkt. Der Skill verlangt, dass der Akt davor ruhiger ist als er -- ein Akt, den es nicht gibt, kann das nicht sein. Kein Bild, eine Zeile, und die dritte Device-Familie der Seite (kinetic), die vorher fehlte. */ .claim { max-width: 46rem; } .claim__lines { font-size: var(--sc-t-2xl); line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-tight); } /* KEIN Weight 300 hier. --sc-ink-soft auf --sc-canvas misst 4,55:1 -- es besteht AA um 0,05, und 21px zaehlt nicht als "large text", darf die Schwelle also nicht mit duennerem Schnitt weiter ausreizen. Die Whisper-Staerke der Referenz gehoert auf grosse Subheads (der Hero-Deck steht bei 16,8:1), nicht auf Fliesstext. */ .claim__body { margin-top: var(--sc-6); font-size: var(--sc-t-base); letter-spacing: var(--sc-track-mid); line-height: var(--sc-leading-mid); color: var(--sc-ink-soft); max-width: 42ch; } /* ============================================ TAX-OS · EIGENER INHALT == tax-os.html war ein Ausschnitt aus index.html: alle zehn Bilder und acht Textbloecke standen dort ebenfalls, der Peak war Akt III und die Schiene Akt IV, verbatim. Beide gehen an index.html zurueck. Was hier steht, hat index.html nirgends: der Aufbau des Korpus, die Verdrahtungsregel und die Abdeckung. Alles aus Markup, kein Bild -- was auch praktisch noetig ist, weil KIE_AI_API_KEY nicht gesetzt ist, und was die Seiten zusaetzlich unterscheidet: index.html ist fotografisch und erzaehlend, tax-os.html ist strukturell. Quelle der Angaben: /Volumes/Goose/Goose/Tax Operation System/Germany. Keine Zahl auf der Seite -- die Phasenzahl ist je Korpus verschieden (KStG fuehrt zehn), und eine Zahl auf einer Website veraltet beim naechsten Ausbau still. */ /* ------------------------------------------------ DIE PRUEFKETTE ------ Ein pan-Akt, aber nicht der von index.html: dort tragen sechs grosse Bildkacheln ein Versprechen, hier laeuft eine Kette aus reinen Namensplaketten. Schmal, damit zehn Glieder in zwei Bildhoehen Reise passen statt in vier. */ .kette__frame { display: flex; align-items: center; justify-content: flex-start; } .kette { display: flex; align-items: stretch; gap: var(--sc-4); padding-inline: clamp(1.5rem, 6vw, 7rem); will-change: transform; } .kette__lead { flex: 0 0 auto; width: min(26rem, 78vw); padding-right: var(--sc-6); } .kette__title { font-size: var(--sc-t-2xl); line-height: var(--sc-leading-none); letter-spacing: var(--sc-track-tight); } .kette__sub { margin-top: var(--sc-4); font-size: var(--sc-t-base); letter-spacing: var(--sc-track-mid); line-height: var(--sc-leading-mid); color: var(--sc-ink-soft); } .kette__glied { flex: 0 0 auto; width: 15rem; display: flex; flex-direction: column; gap: var(--sc-3); padding: var(--sc-5); border-radius: var(--sc-r-lg); background: var(--sc-surface); } .kette__no { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-body); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; } .kette__was { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-snug); } @media (max-width: 860px) { .kette__glied { width: 12rem; } } /* ------------------------------------------- DIE VERDRAHTUNG (PEAK) --- Der beste Gedanke der Seite, und der einzige Ort, an dem "ein Massstab fuer jeden Fall" kein Versprechen ist, sondern ein Mechanismus. Links die drei Korpora, rechts die eine Norm, die sie konsumieren statt sie dreimal nachzubilden. Reines Markup, eine CSS-Linie dazwischen. */ .draht { max-width: 62rem; width: 100%; } .draht__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; margin-top: var(--sc-8); } .draht__korpora { display: flex; flex-direction: column; gap: var(--sc-4); } .draht__korpus { padding: var(--sc-4) var(--sc-5); border-radius: var(--sc-r-lg); /* Kein Rahmen: "Components are borderless", und die Karte der Vorlage hat "no visible stroke". Der Strich stand hier nur, weil weisse Kaesten auf weissem Grund sonst nicht zu sehen waren -- die Vorlage loest das durch den Flaechenwechsel, nicht durch die Linie. */ background: var(--sc-surface); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-snug); } /* Drei Stichleitungen, ein Sammelstrang, eine Leitung zur Norm. Kein SVG: vier Verlaeufe auf einem Element, und ein clip-path faehrt sie von links mit dem Akt auf. --sc-p veroeffentlicht die Engine auf dem Akt, es vererbt sich hierher. Vorher war es EINE waagerechte Linie in der Mitte der Spalte. Auf dem fertigen Bild sah das aus, als haenge nur die Koerperschaftsteuer am Strang und die anderen beiden stuenden daneben -- das Gegenteil der Aussage des Akts. */ .draht__spur { position: relative; align-self: stretch; width: clamp(2.5rem, 8vw, 7rem); min-height: 9rem; background: linear-gradient(var(--sc-hairline), var(--sc-hairline)) no-repeat 0 16.7% / 50% 1px, linear-gradient(var(--sc-hairline), var(--sc-hairline)) no-repeat 0 50% / 100% 1px, linear-gradient(var(--sc-hairline), var(--sc-hairline)) no-repeat 0 83.3% / 50% 1px, linear-gradient(var(--sc-hairline), var(--sc-hairline)) no-repeat 50% 16.7% / 1px 66.6%; clip-path: inset(0 max(0%, min(100%, calc(100% - (var(--sc-p, 0) * 190% - 45%)))) 0 0); } .draht__norm { padding: var(--sc-6); border-radius: var(--sc-r-lg); background: var(--sc-ink); color: var(--sc-canvas); } .draht__norm-ref { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-body); color: rgba(255,255,255,0.62); } .draht__norm-was { margin-top: var(--sc-3); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-midlg); /* "Festsetzungsverjaehrung" ist bei 28px 334px breit und hat keinen Umbruchpunkt. Als Grid-Kind (min-width:auto) zwang das Wort die ganze Spalte auf 382px -- breiter als jedes Telefon. Sichtbar wurde es nie, weil die gepinnte Buehne in overflow:clip steht und den Ueberstand lautlos abschneidet: auf dem fertigen Bild bei 390px fehlte rechts das "g", und die drei Korpus-Kaesten endeten an der Bildkante. Deutsche Komposita brauchen Trennung, nicht mehr Platz. lang="de" steht am , also hat der Browser die Muster. */ hyphens: auto; overflow-wrap: break-word; } /* Ohne das wandert die min-content-Breite eines Kindes weiter nach oben durch: ein Grid-Item ist per Vorgabe nie schmaler als sein laengstes unteilbares Wort. */ .draht__grid > * { min-width: 0; } .draht__regel { margin-top: var(--sc-7); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-base); line-height: var(--sc-leading-mid); letter-spacing: var(--sc-track-mid); max-width: 52ch; } /* Auf zu kurzen Telefonen gibt der Peak seine Form auf statt seinen Inhalt (das Skript am Fuss von tax-os.html schaltet ihn auf flow). Dann ist die Buehne ein gewoehnlicher Block: sie braucht die Luft, die .peak ihr als gepinnter Akt wegnimmt, und keine feste Hoehe. */ .peak--entpinnt { padding-block: var(--sc-9); } .peak--entpinnt .peak__frame { display: block; padding: 0; } /* Dasselbe fuer AKT III von goose.html (das Skript an ihrem Fuss schaltet ihn auf flow). Ein Unterschied zum Peak: .stage__product traegt height:60vh -- die BUEHNE fuer das Chatfenster, nicht das Fenster. Im entpinnten Akt gibt es keine Buehne mehr, und eine feste vh-Hoehe waere dort genau die Klemme, aus der der Akt gerade geholt wurde: das Zitat braucht 497px und bekaeme bei 568px Fensterhoehe 341px. */ .stage--entpinnt { padding-block: var(--sc-9); } .stage--entpinnt .stage__frame { display: block; padding: 0; } .stage--entpinnt .stage__product { height: auto; padding-block: 0 var(--sc-7); } @media (max-width: 860px) { /* Der Akt ist gepinnt, und eine gepinnte Buehne ist EIN Bildschirm mit overflow:clip -- hier ueberhaupt kein Platz, den mehr Spanne schaffen koennte. Einspaltig gestapelt lief der Inhalt bei 390x844 auf 932px und schnitt 88px ab, darunter den Satz, der den ganzen Akt traegt. Also ist jeder Abstand hier eine Stufe kleiner. Gemessen, nicht geschaetzt: die Engine warnt seit diesem Durchgang in der Konsole, sobald eine Buehne ihren eigenen Inhalt beschneidet. */ .draht__grid { grid-template-columns: 1fr; margin-top: var(--sc-6); } .draht__korpora { gap: var(--sc-3); } .draht__korpus { padding: var(--sc-3) var(--sc-4); } .draht__norm { padding: var(--sc-5); } /* 307px Prosa in einer geclippten Buehne. 17px ist in diesem Blatt die kanonische Lesegroesse ("the canonical reading size across all Apple pages", siehe --sc-track-body) -- also die passenden drei Tokens zusammen, nicht nur die Groesse: bei 17px kehrt das Tracking das Vorzeichen um und der Durchschuss oeffnet sich. */ .draht__regel { margin-top: var(--sc-5); padding-top: var(--sc-4); font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); line-height: var(--sc-leading-body); } /* Am Telefon steht der Strang senkrecht: ein Strich von den drei Korpora hinunter zur Norm. Drei Stichleitungen waeren hier nur Dekoration, weil die Kaesten uebereinander stehen. */ .draht__spur { width: 100%; height: 2rem; min-height: 0; align-self: center; background: linear-gradient(var(--sc-hairline), var(--sc-hairline)) no-repeat 50% 0 / 1px 100%; clip-path: inset(0 0 max(0%, min(100%, calc(100% - (var(--sc-p, 0) * 190% - 45%)))) 0); } } /* --------------------------------------------------- DIE ABDECKUNG ---- Nur Deutschland, keine Zahlen: was benannt ist, ist im Korpus als eigener Ordner mit Code/Logik/Phasen vorhanden. */ .abdeckung { max-width: 62rem; } .abdeckung__liste { margin: var(--sc-8) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sc-5); } .abdeckung__liste li { padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-snug); } .abdeckung__liste span { display: block; margin-top: var(--sc-2); font-family: var(--sc-font-text); font-weight: 400; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: var(--sc-track-body); } /* ====================================================== LOGIN ========= ACHTUNG: die Vorlage gibt hier nichts vor. Referenz/DESIGN.md fuehrt unter "Components" keine Eingabekomponente, DesignSystem/src/components/ auch nicht, und site.css hatte bis hier keine einzige Input-Regel. Alles unter dieser Ueberschrift ist EXTRAPOLATION, nicht Regel -- und deshalb streng aus Tokens gebaut, die es schon gibt: keine neue Farbe, kein neuer Radius, keine neue Schriftgroesse. Das Muster ist Apples eigener Zweischritt: erst die Kennung, dann das Passwort. Ein Feld, eine Handlung -- kein Formularblock. Das ist auch das Einzige, was sich aus der Vorlage begruenden laesst, deren ganze Grammatik "eine gefuellte Handlung je Abschnitt" lautet. ==================================================================== */ .login { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding-block: calc(52px + var(--sc-8)) var(--sc-8); padding-inline: var(--sc-gutter); background: var(--sc-canvas); } .login__inner { width: min(21rem, 100%); } .login__title { margin: 0; text-align: center; font-size: var(--sc-t-2xl); /* 600, nicht 700: --sc-t-2xl klammert 40 auf 56px, und die Vorlage reserviert 700 fuer 80-96px. Derselbe Griff wie auf den Mastheads. */ font-weight: 600; line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-tight); } .login__form { margin-top: var(--sc-7); } /* ---- Das Feld. Gefuellt, rahmenlos, 10px -- die Vorlage trennt durch Flaechenwechsel, nicht durch Striche, und kennt keinen Rahmen an einer Komponente. KEIN overflow:hidden auf der Gruppe: das beschneidet den Fokusring, und der ist hier die einzige Rueckmeldung, die die Seite ueberhaupt gibt. */ .login__field { position: relative; background: var(--sc-surface); border-radius: var(--sc-r-md); } .login__field:focus-within { outline: 2px solid var(--sc-link); outline-offset: 2px; } .login__field input { width: 100%; height: 56px; padding: var(--sc-5) 3.5rem var(--sc-2) var(--sc-5); border: 0; background: transparent; color: var(--sc-ink); font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); border-radius: var(--sc-r-md); } .login__field input:focus { outline: none; } /* der Ring sitzt auf der Gruppe */ /* Der eigene Autofill-Anstrich von Chrome wuerde die Flaeche gelb faerben und damit die einzige Farbregel der Seite brechen. */ .login__field input:-webkit-autofill { -webkit-text-fill-color: var(--sc-ink); box-shadow: inset 0 0 0 100px var(--sc-surface); } /* ---- Floating Label. Rein deklarativ ueber :placeholder-shown, kein JS. Ein Platzhalter als EINZIGE Beschriftung verschwindet beim Tippen und ist der bekannte a11y-Fehler; das schwebende Label bleibt stehen. Es loest zugleich einen gemessenen Kontrast: --sc-ink-soft auf --sc-surface steht bei 4,55:1 und besteht AA um 0,05 -- das traegt fuer ein Label, aber nichts darf es weiter ausreizen. Deshalb hier kein Weight 300 und keine zusaetzliche Deckkraft. */ .login__field label { position: absolute; left: var(--sc-5); top: 0.45rem; font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-body); color: var(--sc-ink-soft); pointer-events: none; transition: transform 160ms var(--sc-ease-out), font-size 160ms var(--sc-ease-out); transform-origin: left top; } .login__field input:placeholder-shown:not(:focus) + label { font-size: var(--sc-t-sm); transform: translateY(0.75rem); } @media (prefers-reduced-motion: reduce) { .login__field label { transition: none; } } /* ---- Der Pfeil im Feld. GEFUELLT, nicht als blaues Zeichen auf Grau: --sc-accent auf --sc-surface misst 4,31:1 und faellt durch AA. Weiss auf --sc-accent steht bei 4,70:1. Das naheliegende Apple-Bild waere hier also das unzugaengliche gewesen. 32px sichtbar, 44px Trefferflaeche -- dieselbe Trennung wie bei .pill--sm. */ .login__go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--sc-r-pill); background: var(--sc-accent); color: var(--sc-accent-ink); font-size: var(--sc-t-sm); line-height: 1; cursor: pointer; transition: background 180ms var(--sc-ease-out); } .login__go::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .login__go:hover, .login__go:focus-visible { background: var(--sc-accent-hover); } .login__go:focus-visible { outline: 2px solid var(--sc-link); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .login__go { transition: none; } } /* ---- Schritt 2: die bestaetigte Kennung steht still darueber. */ .login__who { display: flex; align-items: baseline; gap: var(--sc-4); flex-wrap: wrap; margin-bottom: var(--sc-4); font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); color: var(--sc-ink-soft); } .login__meta { margin-top: var(--sc-5); text-align: center; font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); } .login__new { margin-top: var(--sc-8); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); text-align: center; font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); color: var(--sc-ink-soft); } /* ---- Die Antwort auf den Druck. Der Knopf "Anmelden" tat vorher nichts Sichtbares: submit war preventDefault und sonst leer. Ein Knopf, der aussieht, als ginge er, und auf den Druck schweigt, ist die eine Stelle, an der eine Seite sofort kaputt wirkt -- Reaktion ist die Grundlage, auf der alles andere steht. Die orangene Leiste am Fuss sagt zwar, dass nichts dahinterliegt, aber sie antwortet nicht auf DIESEN Druck. Also antwortet die Zeile. Ember, weil das im Haus die Statusfarbe ist und dies ein Status. */ .login__antwort { margin-top: var(--sc-4); min-height: 1.5em; font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); color: var(--sc-ember); opacity: 0; transform: translateY(-4px); transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out); } .login__antwort.is-on { opacity: 1; transform: none; } /* ---- Die Richtung des Zweischritts. Vorher tauschte [hidden] die beiden Schritte in einem Bild aus: keine Richtung, also auch keine lesbare Umkehrung ueber "Aendern". Jetzt geht es vorwaerts nach links hinaus und rueckwaerts denselben Weg zurueck -- derselbe Pfad hin wie her, sonst stimmt die Raumbeziehung nicht. */ .login__form [data-step] { transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out); } .login__form [data-step].is-enter-fwd { opacity: 0; transform: translateX(12px); } .login__form [data-step].is-enter-back { opacity: 0; transform: translateX(-12px); } @media (prefers-reduced-motion: reduce) { .login__antwort { transition: opacity 200ms var(--sc-ease-out); transform: none; } .login__form [data-step] { transition: opacity 200ms var(--sc-ease-out); } .login__form [data-step].is-enter-fwd, .login__form [data-step].is-enter-back { transform: none; } } /* Der Fuss steht hier unter dem Formular, nicht am Seitenende: die Seite ist ein Bild und hat keinen Scrollweg, an dessen Ende er haengen koennte. */ .login .close__legal { margin-top: var(--sc-8); justify-content: center; } /* ================================================= INDEX · RANGE-TEASER = Die volle Preistabelle stand auf index.html UND auf modelle.html -- 20 von 21 Textbloecken der Preisseite waren die der Startseite, 95%. Eine Vergleichstabelle mit vier Spalten haelt ausserdem eine Scrollgeschichte an. Auf der Startseite steht deshalb nur noch die Bandbreite mit einem Verweis; die Tabelle gehoert der Preisseite. Produktnamen duerfen doppelt stehen, Prosa nicht. */ .range__line { margin-top: var(--sc-5); font-size: var(--sc-t-lg); font-weight: var(--sc-weight-whisper); letter-spacing: var(--sc-track-body); line-height: var(--sc-leading-tight); color: var(--sc-ink); max-width: 34ch; } .range__names { margin: var(--sc-8) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--sc-5); } .range__names li { padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-midlg); } .range__actions { margin-top: var(--sc-7); } /* =============================================== MODELLE · WAS GLEICH IST Was eine Vergleichstabelle baulich nicht sagen kann: was in allen Spalten dasselbe ist. Das ist der eigene Inhalt der Preisseite. */ .gleich { max-width: 58rem; } .gleich__liste { margin: var(--sc-8) 0 0; padding: 0; list-style: none; } .gleich__liste li { display: grid; grid-template-columns: minmax(0, 18rem) 1fr; gap: var(--sc-5); align-items: baseline; padding: var(--sc-5) 0; border-top: 1px solid var(--sc-hairline); } .gleich__was { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); } .gleich__wie { font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); line-height: var(--sc-leading-body); color: var(--sc-ink-soft); } @media (max-width: 860px) { .gleich__liste li { grid-template-columns: 1fr; gap: var(--sc-2); } } /* ==================================================== SUPPORT · KONTAKT = Die Seite hatte sechs Textbloecke und keinen Kontaktweg: "Kontaktiere uns" sprang auf den Schluss. Hier steht jetzt ein echter Block -- mit sichtbar markierten Feldern, wo die Angabe fehlt. Eine erfundene Erreichbarkeit waere auf einer Support-Seite der teuerste Satz der ganzen Website. */ .kontakt { max-width: 58rem; } .kontakt__karten { margin-top: var(--sc-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sc-5); } .kontakt__karte { padding: var(--sc-6); border-radius: var(--sc-r-lg); background: var(--sc-surface); display: flex; flex-direction: column; gap: var(--sc-3); } .kontakt__wofuer { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-snug); } .kontakt__wie { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-body); line-height: var(--sc-leading-body); color: var(--sc-ink-soft); } /* Fehlende Angabe. Ember ist die Statusfarbe des Hauses, und sie steht hier bewusst im Weg: wer sie nicht ersetzt, sieht sie. */ .fehlt { display: inline-block; padding: 0.1em 0.5em; border-radius: var(--sc-r-sm); background: var(--sc-ember); color: #fff; font-size: 0.9em; letter-spacing: var(--sc-track-body); } /* ================================================= RECHTSTEXTE ======== Die Vorlage nennt fuer dichte Informationsseiten eine klare Groesse: 17px SF Pro Text Weight 400 ist "the workhorse ... on dense informational pages", Ueberschriften 28px Weight 600 mit leicht positivem Tracking. Genau das steht hier -- kein eigener Satz fuer Rechtstexte, nur die Rolle der Skala, die dafuer vorgesehen ist. */ /* Ein Block IM .sc-wrap, nicht der Wrap selbst: .legal auf dem Wrap ueberschreibt dessen max-width (75rem) mit 46rem, und weil beide margin-inline:auto tragen, zentrieren sich zwei verschieden breite Kaesten -- Ueberschrift und Text standen auf verschiedenen linken Kanten. Die Vorlage: linksbuendig am Seitenraster. */ .legal { max-width: 46rem; /* Deutsche Komposita in Rechtstexten sprengen bei 390px die Spalte: "Verbraucherstreitbeilegung" misst bei 28px 379px in einer 350px breiten Box. hyphens:auto nutzt das Trennwoerterbuch des Browsers ( ist gesetzt) -- eine Zeile statt ­ von Hand in jedem zweiten Wort. overflow-wrap ist der Rueckfall fuer Browser ohne deutsches Woerterbuch: haesslicher Umbruch schlaegt Ueberlauf. */ hyphens: auto; overflow-wrap: break-word; } .legal h2 { margin: var(--sc-8) 0 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-midlg); } .legal h2:first-child { margin-top: 0; } .legal p, .legal li { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body); line-height: var(--sc-leading-body); } .legal ul { margin: var(--sc-4) 0 0; padding-left: var(--sc-5); } .legal li { margin-top: var(--sc-2); } .legal__stand { margin-top: var(--sc-8); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: var(--sc-track-body); } /* Die Luecke. Ember ist die Statusfarbe des Hauses, und die Vorlage gibt ihr genau diese Rolle: "validation surfaces and short status labels". Eine Pflichtangabe, die fehlt, IST eine Validierungsflaeche -- und sie muss im Text stehen bleiben, bis jemand sie fuellt, nicht in einem Kommentar, den der Leser nie sieht. */ .legal__luecke { color: var(--sc-ember); font-weight: 500; border-bottom: 1px solid currentColor; } /* Der Hinweis unter dem Anmeldeformular. */ .login__privacy { margin-top: var(--sc-5); text-align: center; font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-body); line-height: var(--sc-leading-body); color: var(--sc-ink-soft); } /* .tlink als Button: eine Handlung auf der Seite ist kein Link. Der Vorleser sagt sonst "Link Aendern", und es gibt kein Ziel. */ button.tlink { border: 0; background: none; padding: 0; cursor: pointer; } /* ============================================================ Der Schweiz-Hinweis (geo-hinweis.js). Eine Leiste OBEN haette den Kopf der Seite verschoben und die Hero-Komposition auseinandergezogen, die in jedem Kapitel auf ihre Hoehe gerechnet ist. Deshalb unten rechts als eigene Flaeche: sie liegt ueber der Seite, statt sie zu verruecken, und nimmt ihr keinen Pixel Layout weg. z-index 78, also UNTER der Subnav (79): wenn beide am Rand liegen, gehoert die Navigation nach oben. ============================================================ */ .ch-hinweis { /* Einmal benannt, weil das Skript denselben Abstand fuer den Versatz ueber der .placeholder-bar braucht. */ --ch-hinweis-luft: clamp(1rem, 4vw, 1.5rem); position: fixed; z-index: 78; right: var(--ch-hinweis-luft); bottom: var(--ch-hinweis-luft); max-width: min(26rem, calc(100vw - 2rem)); display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.75rem 0.75rem 1.125rem; background: var(--sc-canvas); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-bubble); box-shadow: 0 6px 24px rgba(0,0,0,0.12); font-family: var(--sc-font-text); /* Erst beim Einblenden sichtbar: das Skript setzt .is-on einen Frame spaeter, sonst springt die Flaeche ohne Uebergang ins Bild. */ opacity: 0; transform: translateY(0.5rem); transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out); } .ch-hinweis.is-on { opacity: 1; transform: none; } .ch-hinweis__text { margin: 0; flex: 1; font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-body); line-height: var(--sc-leading-body); color: var(--sc-ink); } .ch-hinweis__link { color: var(--sc-link); text-decoration: none; white-space: nowrap; } .ch-hinweis__link:hover, .ch-hinweis__link:focus-visible { text-decoration: underline; } /* 44px Trefferflaeche bei 20px sichtbarem Kreuz -- dieselbe Trennung von Kasten und Ziel wie bei .pill--sm am Finger. */ .ch-hinweis__weg { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; padding: 0; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--sc-ink-soft); border-radius: var(--sc-r-sm); } .ch-hinweis__weg:hover, .ch-hinweis__weg:focus-visible { background: var(--sc-cool-wash); color: var(--sc-ink); } @media (max-width: 520px) { .ch-hinweis { left: var(--ch-hinweis-luft); max-width: none; } } @media (prefers-reduced-motion: reduce) { .ch-hinweis { transition: none; transform: none; } }