/* =========================================================================== * ZillaPDF — die Farbtafel „Kontrast" und das ganze Vokabular. * * WARUM DIESE DATEI IN public/ LIEGT UND NICHT IN src/styles/ * * Sie wird als `` eingebunden, also als eigene * Datei ausgeliefert und nicht mitgebündelt. Die CSP dieses Hauses erlaubt `style-src * 'unsafe-inline'`, aber `assetsInlineLimit: 0` in `astro.config.mjs` verbietet jedes * Einbetten — und eine gebündelte Stilvorlage, die nirgends eingebettet werden darf, ist * am Ende auch nur eine Datei. Dann lieber eine, deren Adresse feststeht. * * NICHTS VON WOANDERS. Keine Schrift, kein Bild, kein Skript von einem fremden Wirt. Das * ist nicht Sparsamkeit: die CSP lässt es nicht zu (`default-src 'self'`), und der * Datenschutztext sagt es dem Kunden zu. * * ═══ EINE TAFEL, NICHT ZWEI ═══ * * ZillaPDF ist hell — immer, auf jeder Seite, unabhängig von der Einstellung des Browsers. * Das ist eine Entscheidung und kein vergessener Zweig: * * Kalio folgt `prefers-color-scheme`, PW-Keeper schaltet über `class="hell"` am `` * zwischen zwei Tafeln, Schachmich ist immer dunkel. Jeder Umschalter kostet die doppelte * Prüffläche — jede Komponente muss in zwei Zuständen richtig aussehen, und die * Bezahlseite, die in einem fremden Rahmen steckt, kann ihm ohnehin nicht folgen. * * Dazu kommt der Gegenstand: dieses Produkt zeigt Papier. Eine gerasterte PDF-Seite ist * weiss, und sie bleibt weiss — eine dunkle Umgebung machte aus jeder Vorschau ein * leuchtendes Rechteck in einem schwarzen Feld, und der Mensch, der acht Seiten sortiert, * sähe acht davon. * * ═══ DIE HANDSCHRIFT: SCHWARZ, WEISS, UND EIN ORANGE ═══ * * Harte Kanten (`--radius: 0`), 2px-Rahmen in Tinte, keine Schatten, keine Verläufe, sehr * grosse und sehr schwere Überschriften. Das Orange kommt an wenigen Stellen vor und ist * dort das Einzige, was Farbe hat. * * ═══ DAS ORANGE TRÄGT NIE NORMALEN TEXT ═══ * * `--signal` (#ff5a1f) auf Weiss sind 3,12:1. Das reicht für eine Fläche, einen Strich und * ein Symbol — für Fliesstext reicht es nicht, und für Kleingedrucktes erst recht nicht. * * Als FLÄCHE mit Tinte darauf: 6,35:1 ✓ (der Knopf) * Als SCHRIFT auf Weiss: 3,12:1 ✗ * * Für farbige Schrift gibt es `--signal-tief` (#c93a07, 5,13:1). Wer das verwechselt, baut * eine Seite, die ein Prüfgerät durchfallen lässt und ein müdes Auge nicht mehr liest. * * ═══ DIE KONTRASTE SIND NACHGERECHNET, NICHT GESCHÄTZT ═══ * * Jeder Textton gegen `--grund-tief` (#f4f4f2), den DUNKELSTEN hellen Untergrund — wer * gegen den besteht, besteht auch gegen das reine Weiss: * * --tinte #0a0a0a 18,8:1 * --tinte-leise #4a4a48 8,1:1 Fliesstext * --tinte-still #6b6b68 4,9:1 Kleingedrucktes * --signal-tief #c93a07 4,7:1 farbige Schrift * --gut #0f7a3d 4,9:1 * --warnung #b3261e 5,9:1 * * `components/gestalt.test.ts` rechnet sie nach. Wer einen Wert ändert, ohne den Kontrast * zu prüfen, bekommt einen roten Lauf — eine Farbe, die nur „gut aussieht", ist für * jemanden mit schwachem Sehvermögen keine. * =========================================================================== */ :root { /* --- Der Grund -------------------------------------------------------- */ --grund: #ffffff; /* die Seite, und die Karten darauf */ --grund-tief: #f4f4f2; /* jeder zweite Abschnitt, Eingabefelder */ --grund-invers: #0a0a0a; /* Kopfbalken, Fuss, die eingeschwärzten Streifen */ /* --- Die Tinte -------------------------------------------------------- */ --tinte: #0a0a0a; --tinte-leise: #4a4a48; --tinte-still: #6b6b68; --tinte-invers: #f4f4f2; /* Text AUF dem eingeschwärzten Grund — 17,9:1 */ --tinte-invers-leise: #b5b5b0; /* --- Die Rahmen ------------------------------------------------------- */ --rand: #0a0a0a; /* der harte, 2px — die Handschrift dieser Seite */ --rand-leise: #d6d6d2; /* die feine Trennlinie */ --rand-invers: #2e2e2c; /* --- Das Signal ------------------------------------------------------- */ --signal: #ff5a1f; /* NUR Fläche, Strich, Symbol */ --signal-tief: #c93a07; /* Schrift */ --signal-fern: #fff0ea; /* eine Waschung, auf der Tinte noch 18,0:1 hat */ /* --- Die Meldungen ---------------------------------------------------- */ --gut: #0f7a3d; --warnung: #b3261e; --warnung-grund: #b3261e12; --hinweis-grund: #fff0ea; /* --- Mass und Rhythmus ------------------------------------------------ * `--radius: 0` ist ein WERT und keine fehlende Zeile. Er steht als Variable da, damit * eine Regel ihn nennen kann — wer später eine Ecke runden will, sieht dann sofort, dass * er gegen die Handschrift dieser Seite arbeitet, statt es nebenbei zu tun. */ --radius: 0px; --radius-rund: 999px; /* nur für das, was wirklich ein Kreis ist */ --satzbreite: 76rem; --satzbreite-eng: 38rem; --strich: 2px; /* die Rahmenstärke — an EINER Stelle */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2.5rem; --s7: 4rem; --s8: 6rem; /* * DIE SCHRIFT IST DIE SYSTEMSCHRIFT — wie bei Kalio und PW-Keeper, anders als bei * Schachmich, das für Überschriften eine Serifenschrift setzt. * * Der Unterschied entsteht hier nicht über die Schriftart, sondern über GEWICHT und * LAUFWEITE: Überschriften stehen in 800 mit −0,035 em, also eng und sehr schwer. Das ist * ein anderer Ton als der gleiche Schriftschnitt in 600 mit normaler Laufweite, und er * kostet keinen Abruf, keinen Sprung beim Aufbau der Seite und keinen Empfänger im * Datenschutztext. */ --schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --schrift-fest: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* =========================================================================== * Grundlagen * =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* * `[hidden]` MUSS HIER STEHEN UND MUSS `!important` TRAGEN. * * Der Browser gibt `[hidden]` nur `display: none` mit der Gewichtung einer Vorgabe. Jede * eigene Regel mit einem `display` — auch ein `.kachel { display: grid }` — schlägt sie, und * dann steht ein Element auf dem Bildschirm, das der Code für verborgen hält. Das ist kein * Schönheitsfehler: der Ergebnisbereich einer Werkzeugseite zeigte dann eine leere Liste, * bevor überhaupt etwas gerechnet wurde. `gestalt.test.ts` prüft, dass diese Zeile dasteht. */ [hidden] { display: none !important; } html { color-scheme: light; /* Formularfelder und Rollbalken folgen mit */ scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--grund); color: var(--tinte-leise); font-family: var(--schrift); font-size: 1rem; line-height: 1.65; } h1, h2, h3, h4 { color: var(--tinte); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; margin: 0 0 var(--s3); } h1 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.5rem); } h2 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem); } h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); letter-spacing: -.02em; } h4 { font-size: 1.05rem; letter-spacing: -.01em; } p, li { text-wrap: pretty; } p { margin: 0 0 var(--s4); } a { color: var(--signal-tief); text-decoration-thickness: 2px; text-underline-offset: 3px; } a:hover { color: var(--tinte); } strong, b { color: var(--tinte); font-weight: 700; } hr { border: 0; border-top: 1px solid var(--rand-leise); margin: var(--s6) 0; } :focus-visible { outline: var(--strich) solid var(--signal-tief); outline-offset: 2px; } /* =========================================================================== * Gerüst — das Vokabular DIESER Marke * * `.satz` (die Spalte), `.blatt` (der Abschnitt), `.streifen` (das eingeschwärzte Band), * `.kachel` (die Fläche mit Rahmen), `.balken` (die schwere Leiste). Die Schwestermarken * heissen `.wrap`/`.sec` (Kalio), `.band` (PW-Keeper) und `.bahn`/`.reihe` (Schachmich) — * die Namen sind das Skelett, und zwei Marken mit demselben Skelett sind zwei Anstriche * derselben Seite. * =========================================================================== */ .satz { width: min(100% - 2.5rem, var(--satzbreite)); margin-inline: auto; } .satz.eng { max-width: var(--satzbreite-eng); } .blatt { padding-block: clamp(var(--s6), 5vw, var(--s8)); } .blatt.getoent { background: var(--grund-tief); } .blatt + .blatt:not(.getoent):not(.streifen) { border-top: 1px solid var(--rand-leise); } /* * DER EINGESCHWÄRZTE STREIFEN. * * Er zieht sich über die volle Breite und dreht die Tafel um. Weil er ein eigener Block ist * und keine Variante von `.blatt`, kann man ihm nicht versehentlich `.getoent` mitgeben und * damit zwei Untergründe gleichzeitig setzen. */ .streifen { background: var(--grund-invers); color: var(--tinte-invers-leise); padding-block: clamp(var(--s6), 5vw, var(--s8)); } .streifen h1, .streifen h2, .streifen h3, .streifen h4 { color: var(--tinte-invers); } .streifen strong, .streifen b { color: var(--tinte-invers); } .streifen a { color: var(--signal); } .streifen a:hover { color: var(--tinte-invers); } .streifen hr { border-top-color: var(--rand-invers); } .spalten { display: grid; gap: var(--s4); } .spalten.zwei { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } .spalten.drei { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .spalten.vier { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } /* * DER BALKEN — die schwere Leiste über einem Abschnitt. * * Statt einer Überschrift mit Linie darunter: ein durchgehender Strich in Signalfarbe, über * dem eine sehr kleine, gesperrte Zeile steht. Es ist das wiederkehrende Zeichen dieser * Seite und der einzige Ort, an dem gesperrte Versalien vorkommen. */ .balken { border-top: 3px solid var(--signal); padding-top: var(--s3); margin-bottom: var(--s5); } .balken > .marke-zeile { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-still); margin: 0 0 var(--s2); } .streifen .balken > .marke-zeile { color: var(--tinte-invers-leise); } /* * ═══ ALLES, WAS DER STREIFEN UMDREHT, STEHT HIER ═══ * * Auch die Knöpfe — obwohl sie erst weiter unten überhaupt entstehen. Der Grund ist die * Regel „ein Name, eine Bedeutung": stünde die Umkehrung unten bei den Bauteilen, wäre * `.streifen` in zwei Abschnitten geregelt, und `gestalt.test.ts` könnte nicht mehr * unterscheiden, ob das ein zweiter Gedanke ist oder derselbe. Hier ist es sichtbar * derselbe: die Tafel dreht sich um, und das gilt für alles darin. */ .streifen .knopf { border-color: var(--tinte-invers); color: var(--tinte-invers); background: transparent; } .streifen .knopf:hover { background: var(--tinte-invers); color: var(--tinte); } .streifen .knopf.signal { background: var(--signal); border-color: var(--signal); color: var(--tinte); } .streifen .knopf.signal:hover { background: var(--grund); border-color: var(--grund); } /* =========================================================================== * Bauteile * =========================================================================== */ /* * DIE KACHEL — Fläche mit hartem Rahmen. * * `border` und nicht `box-shadow`: ein Schatten ist die Handschrift der anderen drei Marken. * Hier trägt die Kante. */ .kachel { background: var(--grund); border: var(--strich) solid var(--rand); border-radius: var(--radius); padding: var(--s5); } .kachel.still { border-color: var(--rand-leise); } .kachel.signal { border-color: var(--signal); background: var(--signal-fern); } .kachel > :last-child { margin-bottom: 0; } /* Eine Kachel, die ein Link ist — die zwölf Werkzeuge auf der Startseite. */ a.kachel { display: block; color: inherit; text-decoration: none; } a.kachel h3 { margin-bottom: var(--s2); } a.kachel:hover { background: var(--signal-fern); border-color: var(--signal); } a.kachel:hover h3 { color: var(--signal-tief); } .knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: .72rem 1.4rem; border: var(--strich) solid var(--rand); border-radius: var(--radius); background: var(--grund); color: var(--tinte); font: inherit; font-weight: 700; letter-spacing: -.01em; text-decoration: none; cursor: pointer; } /* * DER HAUPTKNOPF: Signalfläche mit Tinte darauf — 6,35:1, also AA auch für kleinen Text. * Das ist die einzige Stelle, an der Orange grossflächig vorkommt, und der Grund, warum es * überall sonst zurückhält. */ .knopf.signal { background: var(--signal); border-color: var(--signal); } .knopf.signal:hover { background: var(--tinte); border-color: var(--tinte); color: var(--grund); } .knopf.still { border-color: var(--rand-leise); color: var(--tinte-leise); } .knopf.still:hover { border-color: var(--rand); color: var(--tinte); } .knopf.gefahr { border-color: var(--warnung); color: var(--warnung); } .knopf.gefahr:hover { background: var(--warnung); color: var(--grund); } .knopf.gross { padding: .95rem 1.9rem; font-size: 1.08rem; } .knopf.breit { width: 100%; } .knopf:hover { background: var(--tinte); color: var(--grund); } .knopf[disabled], .knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; } .knopfreihe { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; } .meldung { border-left: 4px solid var(--rand-leise); padding: var(--s3) var(--s4); background: var(--grund-tief); margin-bottom: var(--s4); } .meldung.hinweis { border-left-color: var(--signal); background: var(--hinweis-grund); } .meldung.fehler { border-left-color: var(--warnung); background: var(--warnung-grund); color: var(--tinte); } .meldung.gut { border-left-color: var(--gut); } .meldung > :last-child { margin-bottom: 0; } /* --- Formular --------------------------------------------------------- */ .feld { display: block; margin-bottom: var(--s4); } .feld > span { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinte-leise); margin-bottom: var(--s1); } .feld input, .feld select, .feld textarea { width: 100%; padding: .62rem .8rem; border: var(--strich) solid var(--rand-leise); border-radius: var(--radius); background: var(--grund); color: var(--tinte); font: inherit; } .feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--rand); outline: none; } .feld-hinweis { font-size: .86rem; color: var(--tinte-still); margin-top: var(--s1); } /* --- Tabellen --------------------------------------------------------- */ .tabelle-huelle { overflow-x: auto; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rand-leise); } th { color: var(--tinte); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; } td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; } /* --- Kleinkram -------------------------------------------------------- */ .leise { color: var(--tinte-still); } .klein { font-size: .88rem; } .fest { font-family: var(--schrift-fest); font-size: .92em; } .nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .anriss { font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); color: var(--tinte-leise); } /* =========================================================================== * Kopf und Fuss * =========================================================================== */ .kopf { background: var(--grund-invers); color: var(--tinte-invers); position: sticky; top: 0; z-index: 20; } .kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s3); } .marke { display: inline-flex; align-items: baseline; gap: .1rem; font-weight: 800; font-size: 1.25rem; letter-spacing: -.04em; color: var(--tinte-invers); text-decoration: none; } /* * DER SCHRIFTZUG. Beide Hälften holen ihre Farbe hier und nirgends sonst — `Marke.astro` * setzt keine eigene. Auf eingeschwärztem Grund dreht die erste Hälfte um; die Regel steht * MIT hier, damit der Name nicht in einem zweiten Gedankengang auftaucht. */ .marke-zilla { color: var(--tinte); } .auf-schwarz .marke-zilla, .kopf .marke-zilla, .fuss .marke-zilla { color: var(--tinte-invers); } .marke-pdf { color: var(--signal); } .kopf nav { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; } .kopf nav a { color: var(--tinte-invers-leise); text-decoration: none; font-weight: 600; font-size: .95rem; } .kopf nav a:hover { color: var(--signal); } .fuss { background: var(--grund-invers); color: var(--tinte-invers-leise); padding-block: var(--s6); font-size: .92rem; } .fuss h4 { color: var(--tinte-invers); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; } .fuss a { color: var(--tinte-invers-leise); text-decoration: none; } .fuss a:hover { color: var(--signal); text-decoration: underline; } .fuss-spalten { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } .fuss-spalten ul { list-style: none; margin: 0; padding: 0; } .fuss-spalten li { margin-bottom: var(--s1); } .fuss-unten { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rand-invers); color: var(--tinte-invers-leise); font-size: .86rem; } /* =========================================================================== * Die Werkbank — die Oberfläche, auf der wirklich gearbeitet wird * =========================================================================== */ /* * DIE ABLAGE. Der grosse gestrichelte Kasten, in den eine Datei gezogen wird. * * `label` um ein verstecktes ``: damit ist die ganze Fläche anklickbar * UND die Tastatur kommt an das Feld heran. Ein `
` mit einem Klick-Ereignis wäre für * jemanden, der nicht mit der Maus arbeitet, gar nichts. */ .ablage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); min-height: 13rem; padding: var(--s6) var(--s4); border: var(--strich) dashed var(--rand); border-radius: var(--radius); background: var(--grund-tief); text-align: center; cursor: pointer; } .ablage:hover, .ablage.drueber { background: var(--signal-fern); border-color: var(--signal); } .ablage input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ablage-titel { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--tinte); } .werkbank { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); } @media (min-width: 62rem) { .werkbank.mit-schalter { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } } /* Die Liste der ausgewählten Dateien und der erzeugten Ergebnisse. */ .stapel { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s2); } .stapel li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border: 1px solid var(--rand-leise); border-radius: var(--radius); background: var(--grund); } .stapel .name { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--tinte); font-weight: 600; } .stapel .groesse { color: var(--tinte-still); font-variant-numeric: tabular-nums; font-size: .88rem; } /* * DIE SEITENVORSCHAU. Ein Raster aus gerasterten Seiten — für „ordnen" und „zuschneiden". * * Die Seiten liegen in ``, nicht in ``. Das ist kein Detail: die * Inhaltsrichtlinie erlaubt bei `img-src` kein `blob:`, und ein Bild aus einem Objekt-Verweis * bliebe leer — lautlos, wie jeder Verstoss gegen die Richtlinie. */ .seitenfeld { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); margin-top: var(--s5); } .seitenbild { position: relative; border: var(--strich) solid var(--rand-leise); border-radius: var(--radius); background: var(--grund); padding: var(--s2); cursor: grab; } .seitenbild.gewaehlt { border-color: var(--signal); background: var(--signal-fern); } .seitenbild canvas { display: block; width: 100%; height: auto; } /* * Die Knöpfe unter einem Seitenbild. Sie stehen GLOBAL und nicht im Stilblock der * Werkzeugseite, weil `browser/seitenordner.ts` sie mit `document.createElement` erzeugt — * ein komponenteneigener Block trüge eine Kennung, die diese Elemente nie haben. */ .seitenknoepfe { display: flex; gap: .25rem; margin-top: .4rem; } .seitenknoepfe .knopf { flex: 1; padding: .2rem; font-size: .9rem; } .seitenbild .nummer { position: absolute; top: var(--s2); left: var(--s2); background: var(--grund-invers); color: var(--tinte-invers); font-size: .72rem; font-weight: 700; padding: 1px 6px; font-variant-numeric: tabular-nums; } /* * DER LAUFBALKEN. Kein Kreis, kein Ring — ein Strich, der von links nach rechts wächst. * * `transition` steht hier bewusst NICHT: der Balken springt in den Schritten, in denen * wirklich gerechnet wurde. Eine weiche Bewegung erzählte einen gleichmässigen Fortschritt, * den es nicht gibt — und bei einer Datei, die zwischen zwei Seiten eine Sekunde braucht, * sieht sie aus wie ein Fortschritt, der nie ankommt. */ .ergebnis { margin-top: var(--s5); } .lauf { height: 6px; background: var(--rand-leise); overflow: hidden; } .lauf > i { display: block; height: 100%; width: 0; background: var(--signal); } /* =========================================================================== * Rechtsdokumente * * Die Klassen `dok`, `block` und `felder` schreibt `@platform/compliance` vor — das Herz * setzt die Struktur der Rechtstexte, jedes Produkt nur ihre Gestalt. * =========================================================================== */ .dok { max-width: var(--satzbreite-eng); } .dok h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); margin-top: var(--s6); } .dok h3 { margin-top: var(--s5); } .dok .block { border-left: 4px solid var(--signal); padding: var(--s3) var(--s4); background: var(--grund-tief); margin-bottom: var(--s4); } .dok .felder th { width: 40%; color: var(--tinte-leise); text-transform: none; letter-spacing: 0; font-weight: 600; } /* =========================================================================== * Bewegung — und ihr Ausschalter * * JEDE Bewegung dieser Seite muss hier erfasst sein. `gestalt.test.ts` sucht nach * `animation`- und `transition`-Eigenschaften, die dieser Block nicht abdeckt, und prüft * ausserdem mit einer Gegenprobe, dass er eine ungeschützte Bewegung überhaupt fände. * =========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }