/* ============================================================ NeoTrack — base.css Marken-Tokens, Fonts, Reset, globale Grundlagen ============================================================ */ /* ---------- Fonts ---------- */ @font-face { font-family: 'Clash Display'; src: url('../assets/fonts/ClashDisplay-Variable.woff2') format('woff2-variations'); font-weight: 200 700; font-display: block; } @font-face { font-family: 'Inter Var'; src: url('../assets/fonts/InterVariable.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Archivo'; src: url('../assets/fonts/Archivo-Variable.woff2') format('woff2'); /* Eine variable Datei deckt 400 bis 600 ab — zwei feste Schnitte JetBrains Mono wogen zusammen 186 KB, diese hier 35 KB. */ font-weight: 400 600; font-display: swap; } /* ============================================================ HELL UND DUNKEL ============================================================ Die Seite ist dunkel entworfen; der helle Modus tauscht ausschliesslich die Tokens unten. Deshalb ist es wichtig, dass **keine Farbe irgendwo fest verdrahtet** steht: Was nicht als Token da ist, bleibt beim Umschalten dunkel und fällt sofort auf. Umgeschaltet wird über `data-theme` am ``. Steht dort nichts, entscheidet die Einstellung des Betriebssystems. Der Wert wird in `js/theme.js` gesetzt — noch vor dem ersten Bild, sonst blitzt die falsche Fassung auf. ============================================================ */ /* ---------- Tokens ---------- */ :root { /* Grund */ --bg: #070708; --surface-1: #0D0D10; --surface-2: #1C1C1E; --hairline: #242426; /* Text */ --ink: #F2F2EF; --ink-dim: #9A9A94; --ink-faint: #55554F; /* Akzent */ --petrol: #00C2B0; --petrol-deep: #063B36; --on-petrol: #313233; --petrol-glow: rgba(0, 194, 176, 0.35); /* **Petrol als Textfarbe braucht einen eigenen Wert.** #00C2B0 auf Weiss kommt auf 2,1:1 und ist damit kaum zu lesen; auf dunklem Grund ist genau dasselbe Petrol richtig. Wo Petrol *Schrift* ist, steht deshalb `--petrol-text`, nicht `--petrol`. */ --petrol-text: var(--petrol); /* Kanäle für abgestufte Flächen. Ein `color-mix(in srgb, var(--ink) 5%, transparent)` ist im hellen Modus falsch — dort muss dieselbe Aufhellung eine Abdunklung sein. Über die Kanäle folgt sie dem Modus. */ --ink-rgb: 242 242 239; --bg-rgb: 7 7 8; /* **Der Gegenwert für die Zeichen im Balken.** Punkt der Bildmarke, Schrift, Korbsymbol und die Umrandungen kehren sich gegen den Grund um, statt einen gedämpften Ton anzunehmen. Der Wert gehört deshalb hierher zu den Themenmarken und nicht in den Balken: Er hängt am Grund der Seite, und der wechselt mit dem Satz. Kurz stand er fest auf Schwarz und wurde nur von der Zonenerkennung umgedreht — im dunklen Satz greift die aber nie, weil dort keine Fläche als dunkel markiert ist, die Seite es aber überall ist. Der Punkt blieb dadurch schwarz auf Schwarz. */ --negativ: #FFFFFF; --negativ-rand: rgb(255 255 255 / 0.28); /* **Der dunkle Ton der Marke.** Nicht alles am Logo ist Petrol: Der Punkt im n und die Buchstaben t, r, a, c und k tragen `currentColor`. Die hingen vorher an `--ink` und `--negativ` — beides fast Schwarz. Ein eigener Wert dafür, weil es eine Markenentscheidung ist und keine Frage der Lesbarkeit: Ändert sich die Schriftfarbe der Seite, soll das Logo nicht mitwandern, und umgekehrt. Im dunklen Satz bleibt es wie die Schrift — auf schwarzem Grund ist ein Anthrazit nicht mehr zu sehen. */ --marke-ton: #F2F2EF; /* **Die ausgeleuchtete Fläche im Hero.** Zwei Werte: das Licht, das von hinten auf die Kehle fällt, und der Abfall zu den Rändern. Beide liegen *über* `--bg` — die Fläche bringt keinen eigenen Grund mit, sonst gäbe es eine Kante zum nächsten Abschnitt. Im dunklen Satz ist das Licht ein kühler Schimmer statt Weiss: Ein heller Kegel auf #070708 sähe aus wie ein Scheinwerfer, der ins Objektiv leuchtet, nicht wie eine Wand dahinter. */ /* Der Verlauf der Aufbau-Überschrift — gebürstetes Metall. Stand fest auf #d8d8d3 → #4a4a4d und folgte damit dem Satz nicht: Im dunklen Satz lief das dunkle Ende in einen Grund, von dem es sich kaum abhob. */ --metall-a: #F2F2EF; --metall-b: #6D6D67; --studio-licht: rgb(150 180 210 / 0.13); --studio-kante: rgb(0 0 0 / 0.30); --studio-abfall: rgb(0 0 0 / 0.82); /* Typo */ --font-display: 'Clash Display', 'Inter Var', system-ui, sans-serif; --font-text: 'Inter Var', system-ui, -apple-system, sans-serif; /* **Die Schrift der Kleinschrift** — Rubriken, Navigationspunkte, Preise, Chips, Beschriftungen. Sie hiess `--font-mono`, solange dort eine Monospace stand; der Name nennt jetzt die Rolle und nicht die Bauart, damit er beim nächsten Wechsel nicht wieder lügt. */ --font-label: 'Archivo', 'Inter Var', system-ui, sans-serif; /* Radius — apple-weich */ --r-pill: 999px; --r-xl: 32px; --r-lg: 24px; --r-md: 16px; --r-sm: 10px; /* Layout */ --container: 1440px; --gutter: clamp(20px, 4vw, 64px); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.45, 0, 0.15, 1); } /* ---------- Der helle Satz ---------- Kein reines Weiss als Grund: #FFFFFF unter einer grossen Fläche blendet und lässt jede Kante hart erscheinen. Ein Hauch Wärme nimmt das, ohne dass es cremefarben wird — und die Produktaufnahmen, deren eigener Grund bei #EEEAE7 bis #FEFEFE liegt, sitzen darin ohne sichtbare Kante. */ /* **Kein Schwarz mehr.** Wo vorher #111113 und #0A0A0B standen, steht jetzt durchgehend #313233 — rgb(49, 50, 51). Petrol bleibt unangetastet. Nicht angefasst ist die Leiter der dunklen Flächen (`--bg` #070708, `--surface-1` #0D0D10, `--surface-2` #1C1C1E). Das sind Gründe, keine Tinte: Auf #313233 gehoben wäre der dunkle Satz mittelgrau, und die drei Stufen lägen übereinander statt untereinander. */ :root[data-theme="light"] { --bg: #FBFAF9; --surface-1: #FFFFFF; --surface-2: #F1EFEC; --hairline: #E4E1DC; --ink: #313233; --ink-dim: #5C5C56; --ink-faint: #96958E; --petrol-deep: #C9EFEA; --petrol-glow: rgba(0, 194, 176, 0.28); /* Dunkler als das Marken-Petrol, damit Schrift darauf lesbar bleibt: #00857A auf #FBFAF9 kommt auf 4,6:1. */ --petrol-text: #00857A; --ink-rgb: 49 50 51; --bg-rgb: 251 250 249; --negativ: #313233; --negativ-rand: rgb(49 50 51 / 0.20); /* Anthrazit statt Schwarz — eine Zahl, hier zu drehen. */ --marke-ton: #313233; /* Aus der Vorlage gemessen: Der Schatten ist **kühl**, das Licht neutral. rgb(202,201,207) in der dunkelsten Ecke — Blau liegt fünf bis sechs Stufen über Rot. Ein neutrales Grau als Abfall vergraut die Fläche, statt sie in den Schatten laufen zu lassen. */ --metall-a: #9A9A95; --metall-b: #313233; --studio-licht: rgb(255 255 255 / 0.94); --studio-kante: rgb(111 110 129 / 0.10); --studio-abfall: rgb(111 110 129 / 0.52); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); /* Der blanke Satz oben ist der dunkle — das gilt auch für die Bedienelemente des Browsers. Umgeschaltet wird eine Zeile tiefer. */ color-scheme: dark; -webkit-text-size-adjust: 100%; } /* Bildlaufleiste, Auswahlfelder und Datumswähler ziehen mit. */ :root[data-theme="light"] { color-scheme: light; } /* **Der Inhalt liegt über der Studio-Fläche, nicht darunter.** Ohne diese Zeile stünde `main` unpositioniert da, und eine feste Fläche mit `z-index: 0` läge nach der Zeichenreihenfolge **über** dem Text — feste Elemente werden nach dem Fliesstext gezeichnet. Mit einem eigenen Stapel liegt alles in `main` darüber, auch die Fläche darin. Stand vorher in sections.css und galt damit nur für die Startseite; Laden, Produktseite und Kasse laden diese Datei nicht. */ main { position: relative; z-index: 4; } /* **Eine Hohlkehle, kein weisser Grund.** Im Fotostudio steht ein Gegenstand nicht vor einer Wand, sondern in einer Kehle: einer Fläche, die von hinten angeleuchtet wird. Das Auge liest daraus einen Raum mit Tiefe statt einer Pappe. **Die Werte sind aus der Vorlage gemessen, nicht geschätzt.** Ein erster Anlauf hatte eine mittige Ellipse mit vierundzwanzig Stufen zwischen Mitte und Ecke — und war damit im Bild nicht zu sehen. Die Vorlage hat **zweiundfünfzig** Stufen, und sie ist nicht mittig: links 205, rechts 219, oben rechts 248. Das Licht kommt von oben rechts, die linke Seite fällt in den Schatten. Die Zahlen darunter sind an neun Messpunkten angepasst, mittlere Abweichung drei Stufen. Drei Lagen, von oben nach unten: 1. **Das Licht** — ein breites, flaches Band am oberen Rand, sein hellster Punkt bei 87 % der Breite. Das ist die Quelle, nicht das Gerät: ausdrücklich kein enger Schein darum herum, der ist einmal geflogen. 2. **Die Schattenseite** links, wo das Licht nicht hinkommt. 3. **Der Abfall** zu den Rändern. Hoch und schmal (67 % auf 160 %), Mitte bei 70 % Höhe — dadurch bleibt die Bildmitte offen und die Kanten fallen zu. Ein eigener Grund fehlt bewusst: Die Fläche liegt auf `--bg`. Nach unten blendet sie über eine Maske aus, nicht über einen Verlauf zur Seitenfarbe — der müsste deren Wert kennen und liefe beim nächsten Wechsel des Satzes auseinander. */ .studio { /* **Fest im Fenster, nicht im Abschnitt.** Erst stand hier `position: absolute` mit `background-attachment: fixed`. Im Chromium der Vorschau ging das; in Safari nicht, und der Grund ist die `mask-image` auf demselben Element: Sie macht daraus eine eigene Zeichenebene, und `fixed` bezieht sich dann auf **diese** statt aufs Fenster — die Fläche scrollte mit. Jetzt ist das Element selbst fest — und es hängt **direkt in `main`**, nicht mehr im Hero. Der trug `overflow: clip`, und Safari macht daraus einen Bezugsrahmen für feste Elemente: Die Fläche scrollte dort mit dem Abschnitt weg, während sie in Chromium stehenblieb. `main` trägt `z-index: 4` und bildet einen eigenen Stapel — die Fläche kann also nicht über den Inhalt geraten, obwohl sie fest im Fenster steht. `100vw` statt `100 %` schliesst die Bildlaufleiste ein — sonst bliebe an ihrer Kante ein Streifen ohne Licht. **Sie bleibt über die ganze Seite stehen.** Zuerst blendete sie am Ende des Heros aus — das war falsch verstanden: „fest" heisst nicht „fest, solange der erste Abschnitt läuft", sondern der Raum, in dem die Seite steht. Abschnitte mit eigenem Grund (Funktionen, Figur) legen sich ohnehin darüber; wo keiner ist, scheint das Licht durch. Eine Maske hat sie deshalb auch nicht mehr. Sie war es, die den festen Anstrich in Safari ausgehebelt hat — und zu maskieren gäbe es nichts mehr, denn die Fläche wandert nicht aus dem Bild. */ position: fixed; top: 0; left: 0; width: 100vw; height: 100svh; z-index: 0; pointer-events: none; background: radial-gradient(96% 32% at 87% 0%, var(--studio-licht) 0%, var(--studio-licht) 10%, transparent 100%), linear-gradient(to right, var(--studio-kante) 0%, transparent 43%), radial-gradient(67% 160% at 52% 70%, transparent 55%, var(--studio-abfall) 100%); } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: 16px; line-height: 1.55; font-feature-settings: 'ss01' on; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, svg, video, canvas { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } input { font: inherit; } ::selection { background: var(--petrol); color: var(--on-petrol); } /* Scrollbar dezent */ ::-webkit-scrollbar { width: 10px; } /* **Durchsichtig, nicht in der Seitenfarbe.** Die feste Studio-Fläche reicht unter die Leiste; eine Rinne in `--bg` legte sich als heller Streifen darüber, genau dort, wo die Seitenkante abgedunkelt ist. */ ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 999px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: #3a3a40; } /* ---------- Utility ---------- */ .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; } .eyebrow { font-family: var(--font-label); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--petrol-text); display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; opacity: 0.7; } .kleinschrift { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); } /* Screenreader only */ .sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }