/* Vemido Schriftbibliothek — Specimen-Page-Styling. * Kompakt, professionell, typografisch versiert. * Off-white BG, dunkelgrauer Text, einzelne dezente Akzentfarbe. * Keine Schatten, keine Rundungen ausser am Input — Fokus auf Type. */ * { box-sizing: border-box; margin: 0; padding: 0; } /* CSS-Variablen fuer die zwei Color-Picker oben rechts + zwei abgeleitete * Werte fuer "Chrome"-Elemente (Trennlinien, Sekundaer-Text), die JS bei * BG-Aenderung passend zu der wahrgenommenen Helligkeit umschaltet: * --tt-line-color → Trennlinien (z.B. .tt-family-header border-bottom) * --tt-secondary-text → graue Texte (z.B. .tt-family-count) * Damit bleiben Linien + Sekundaer-Texte auf einem dunklen BG sichtbar * (hell), und auf einem hellen BG kontrastreich (dunkel). Defaults = * Off-white BG + dunkler Text wie vorher. */ :root { /* --tt-page-bg: #f7f7f5; */ --tt-page-bg: #f9f8f5; --tt-specimen-fg: #1a1a1a; --tt-line-color: #1a1a1a; --tt-secondary-text: #333; } html { /* --tt-sticky-top: 215px; */ --tt-sticky-top: 213px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; color: #1a1a1a; background: var(--tt-page-bg); /* overflow-x: clip auf html (nicht hidden — sonst Sticky-Bruch). * Das Browser-Document-Scrollelement ist html, nicht body — wenn * wir nur body clippen, kann das html trotzdem eine horizontale * Scrollbar zeigen. Clip auf html schneidet die horizontale * Scrollbar im Document-Root sauber ab. */ overflow-x: clip; /* Font-Smoothing per Default GARANTIERT AUS. Wir setzen die * Off-Werte explizit (statt nur den Default zu lassen) — sonst * koennte irgendein vererbtes/uebergeordnetes CSS oder ein * Browser-Style-Reset versehentlich Greyscale-AA aktivieren. * Resultat: System-Rendering, auf macOS subpixel-antialiased * (= LCD-Subpixel-AA, native OS-Defaults). */ -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; text-rendering: auto; font-feature-settings: normal; } /* Smoothing-Set per CSS-Klasse aktivierbar. Aktivieren via: * - im Quelltext / DevTools, oder * - document.documentElement.classList.add('smooth') in JS, oder * - Checkbox "Font-Smoothing" im Live-Tester-Controls. * Wirkung: Greyscale-AA + optimizeLegibility + explizite kern/liga. */ html.smooth { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga"; } body { font-size: 14px; line-height: 1.5; /* overflow-x: clip statt hidden — clip ist subtil anders: * - hidden erzeugt einen NEUEN Formatting Context * → bricht position: sticky auf descendant-Elementen * - clip clippt visuell, behaelt aber den ursprünglichen * Scroll-Container → Sticky bleibt funktional * Faengt horizontale Sub-Pixel-Ueberlaeufe von Sticky-Headern, * negativen Margins (.tt-family-header margin-left:-5px) etc. * ab — sonst zeigt Body manchmal eine 1-px-Scrollbar unten. */ overflow-x: clip; } /* ── Page-Header (sticky) ────────────────────────────────────── */ .tt-page-header { /* padding: 24px 32px 16px; */ /* padding: 12px 32px 16px; */ /* padding: 12px 14px 16px; */ padding: 14px 14px 15px; border-bottom: 1px solid #e5e5e5; position: sticky; top: 0; /* background: #f7f7f5; */ background: #f9f8f5; z-index: 10; /* Flex-Layout: Titel-Block links, Sprachschalter rechts. */ display: flex; align-items: center; gap: 16px; } .tt-page-header-text { flex: 1; min-width: 0; /* Logo links, Titel-Block (h1 + meta-Counter) rechts. Logo spannt * vertikal beide Titel-Zeilen, weil align-items:center die ganze * .tt-page-header-titles als Geschwister vertikal mittig zum Logo * setzt. */ display: flex; align-items: center; gap: 14px; } .tt-page-header-titles { flex: 1; min-width: 0; } /* TUXS-Logo: 48x48, klickbarer Outlink zur Designer-Site. * flex-shrink:0 damit es bei wenig Platz nicht zerquetscht wird. * Link-Wrapper hat keinen Border/Outline. Hover-Effekt: 3D-Card-Flip * um die Y-Achse. Frueher war perspective:600px — bei dem kurzen * Abstand entsteht zur Halbrotation eine starke perspektivische * Verkuerzung ("Kaugummi"-Effekt). Mit 2000px ist die Perspektive * fast orthografisch: 3D-Tiefe bleibt, aber das SVG wird nicht mehr * sichtbar gequetscht. */ .tt-logo-link { display: inline-flex; flex-shrink: 0; line-height: 0; cursor: pointer; text-decoration: none; border: none; outline: none; perspective: 2000px; } .tt-logo-link:hover, .tt-logo-link:focus, .tt-logo-link:focus-visible, .tt-logo-link:active { outline: none; border: none; text-decoration: none; } .tt-logo { width: 48px; height: 48px; display: block; transition: transform 0.55s cubic-bezier(0.4, 0.0, 0.2, 1); transform-style: preserve-3d; } .tt-logo-link:hover .tt-logo { transform: rotateY(180deg); } .tt-page-header h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: #1a1a1a; } .tt-meta { font-size: 12px; color: #666; /* margin-top: 2px; */ margin-top: 0px; margin-bottom: 0px; font-variant-numeric: tabular-nums; } /* Auf sehr schmalen Viewports (< 480 px) den Familien/Schnitt-Counter * ausblenden — der schmale Header-Bereich hat sonst nicht genug Platz * fuer Logo + Titel + Counter + Sprachschalter. */ @media (max-width: 480px) { .tt-meta { display: none; } /* Engere line-height fuer den Page-Titel auf sehr schmalen Viewports — * verhindert grosse Lufthoehe wenn der Titel auf zwei Zeilen umbricht. */ .tt-page-header h1 { line-height: 1.18; } } /* ── Sprach-Auswahl (Vemido-Frontend-Stil) ─────────────────────── * 1:1 portiert von der Root-Directory-Variante in /css/styles.css * (Selektoren #lang-nav .form-select-sm). Pill-rund, hellgrau- * transparenter Hintergrund, KEIN Border, Globus-SVG als Caret rechts. * Funktional aktuell ohne Effekt — keine onchange-Logik. */ .tt-language-select { appearance: none; -webkit-appearance: none; flex-shrink: 0; /* Explizit rechtsbuendig — auch wenn .tt-page-header-text bereits * flex:1 ist und die Selectbox automatisch ans rechte Ende drueckt, * kommt margin-left:auto als zweiter Riegel: greift selbst wenn der * flex-Container-Modus durch eine spaetere Aenderung wegbrechen sollte. */ margin-left: auto; padding: 0.35rem 2.5rem 0.38rem 1.2rem; border: none; border-radius: 999999px; background-color: rgba(229, 229, 229, 0.68); color: #111827; font: inherit; font-size: 14px; line-height: 1.4; cursor: pointer; box-shadow: none; /* Vemido-Globe-SVG (1:1 aus /css/styles.css Zeile 1029) — als * Dropdown-Caret rechts positioniert. */ background-image: url("data:image/svg+xml,%3Csvg width='14' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.66663 10.0001C1.66663 5.39771 5.39759 1.66675 9.99996 1.66675C14.6023 1.66675 18.3333 5.39771 18.3333 10.0001C18.3333 14.6025 14.6023 18.3334 9.99996 18.3334C5.39759 18.3334 1.66663 14.6025 1.66663 10.0001ZM9.99996 3.33341L9.99104 3.33342L9.99139 3.33479C9.95963 3.34286 9.80535 3.40924 9.58085 3.74399C9.36709 4.06271 9.15088 4.53605 8.95932 5.15837C8.63433 6.21414 8.40896 7.60422 8.34913 9.16675H11.6508C11.591 7.60422 11.3656 6.21414 11.0406 5.15837C10.849 4.53605 10.6328 4.06271 10.4191 3.74399C10.1946 3.40924 10.0403 3.34286 10.0085 3.33479L10.0089 3.33342L9.99996 3.33341ZM11.6508 10.8334H8.34913C8.41119 12.4543 8.65137 13.8887 8.99546 14.9565C9.19753 15.5837 9.42283 16.0447 9.63919 16.3394C9.74591 16.4848 9.83696 16.5711 9.90386 16.6188C9.93619 16.6418 9.96 16.6537 9.97486 16.6598C9.98916 16.6656 9.99635 16.6665 9.99788 16.6666L9.99996 16.6667H10.0021C10.0036 16.6666 10.0108 16.6656 10.0251 16.6598C10.0399 16.6537 10.0637 16.6418 10.0961 16.6188C10.163 16.5711 10.254 16.4848 10.3607 16.3394C10.5771 16.0447 10.8024 15.5837 11.0045 14.9565C11.3485 13.8887 11.5887 12.4543 11.6508 10.8334ZM6.68134 9.16675C6.74185 7.46317 6.98634 5.90276 7.36641 4.66805C7.46726 4.34041 7.57976 4.02878 7.70432 3.7392C5.40381 4.58296 3.69765 6.65849 3.38487 9.16675H6.68134ZM3.38487 10.8334H6.68134C6.74405 12.5989 7.00439 14.2116 7.40911 15.4677C7.49847 15.745 7.59673 16.0109 7.70431 16.261C5.40381 15.4172 3.69765 13.3417 3.38487 10.8334ZM13.3186 10.8334H16.615C16.3023 13.3417 14.5961 15.4172 12.2956 16.261C12.4032 16.0109 12.5015 15.745 12.5908 15.4677C12.9955 14.2116 13.2559 12.5989 13.3186 10.8334ZM16.615 9.16675H13.3186C13.2581 7.46317 13.0136 5.90276 12.6335 4.66805C12.5327 4.34041 12.4202 4.02878 12.2956 3.7392C14.5961 4.58296 16.3023 6.65849 16.615 9.16675Z' fill='%23111827'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px; } .tt-language-select:focus, .tt-language-select:focus-visible { outline: none; border: none; box-shadow: none; } /* ── Live-Tester (sticky direkt unter Page-Header) ───────────── */ /* Die `top`-Werte fuer .tt-live-tester und .tt-sidebar werden von JS * dynamisch gesetzt, weil sie sich aus der GEMESSENEN Hoehe von * .tt-page-header bzw. .tt-live-tester ergeben — sonst desynchronisieren * sie sich bei Padding-Aenderungen und es entsteht ein scrollender * Mini-Spalt. Siehe specimen.js → updateStickyTops(). * Fallback (CSS-Default) ist nur ein Anfangswert vor dem ersten JS-Run. */ .tt-live-tester { /* padding: 16px 32px 14px; */ padding: 14px; border-bottom: 1px solid #e5e5e5; background: #fff; position: sticky; top: 76px; /* Fallback — JS misst echte Page-Header-Hoehe */ z-index: 9; /* Verhindert dass die Section horizontal/vertikal scrollbar wird, * wenn z. B. der Live-Text zu lang ist oder die Slider-Row auf * schmalem Viewport breiter als der Container wird. */ overflow: hidden; } /* Farb-Gruppe (BG + FG + Invert) — wird in .tt-controls als EIN Flex-Item * behandelt, sodass die drei Elemente bei Flex-Wrap immer als Einheit * gemeinsam in die naechste Zeile rutschen statt einzeln umzubrechen. * margin-left: auto schiebt die ganze Gruppe ans rechte Ende der Row. */ .tt-color-group { display: inline-flex; align-items: center; align-self: center; flex-shrink: 0; gap: 6px; margin-left: auto; } /* Innerhalb der Gruppe regelt der eigene gap: 6px die Abstaende — * die alten negativen margin-left-Workarounds (die den 32 px gap der * Eltern-Row kompensiert haben) werden hier explizit zurueckgesetzt. */ .tt-color-group .tt-color-swatch:has(#ttBgColor), .tt-color-group .tt-color-swatch + .tt-color-swatch, .tt-color-group .tt-color-invert { margin-left: 0; } /* Color-Swatches in der Controls-Row (BG + FG) — rechtsbuendig * mit margin-left: auto auf der ERSTEN Swatch (BG): das schiebt BG + * alles danach (FG) ans rechte Ende der Flex-Row. * 28x18 px kompakt, native color-input ueberlappt das Swatch-Rechteck * komplett (Click-Target = ganze Flaeche, gewaehlte Farbe = sichtbarer * Hintergrund). */ .tt-color-swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; /* width: 28px; */ width: 32px; height: 18px; border: 1px solid #d4d4d4; border-radius: 3px; cursor: pointer; overflow: hidden; flex-shrink: 0; align-self: center; } /* Bug-Fix: `:first-of-type` matchte den ersten (= "Grösse"-Slider), * nicht den ersten .tt-color-swatch — weil :first-of-type tag-basiert ist, * nicht class-basiert. Stattdessen via :has() den BG-Swatch eindeutig * targeten (er enthaelt #ttBgColor). margin-left:auto schiebt ihn + den * danach folgenden FG-Swatch ans rechte Ende der Flex-Row. */ .tt-color-swatch:has(#ttBgColor) { margin-left: auto; } /* Engerer Abstand zwischen BG und FG (1/4 vom Parent gap:24px = 6 px). * Adjacent-sibling-Selector matcht das zweite .tt-color-swatch (FG), * negativer margin-left zieht es naeher an BG heran: * gap(24) + margin-left(-18) = 6 px effektiver Abstand */ .tt-color-swatch + .tt-color-swatch { margin-left: -18px; } /* Invert-Button direkt nach den beiden Swatches — tauscht BG ↔ FG. * Gleiche Dimensionen wie die Swatches (32×18 px), gleicher Border-Stil. * Icon: zwei entgegengesetzte Pfeile, schwarz, currentColor-stroke. */ .tt-color-invert { appearance: none; flex-shrink: 0; width: 32px; height: 18px; /* Gleicher Engabstand wie zwischen BG und FG */ margin-left: -18px; padding: 0; border: 1px solid #d4d4d4; border-radius: 3px; background: #fff; color: #1a1a1a; cursor: pointer; align-self: center; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.1s, background 0.1s; } .tt-color-invert svg { display: block; transition: transform 0.2s ease; } .tt-color-invert:hover { border-color: #1a1a1a; background: #f5f5f5; } .tt-color-invert:hover svg { transform: rotate(180deg); /* leichte Animation als Hover-Affordance */ } .tt-color-invert:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; } .tt-color-swatch input[type="color"] { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); padding: 0; border: 0; background: transparent; cursor: pointer; } .tt-color-label { position: relative; z-index: 1; font-family: ui-monospace, "SF Mono", Menlo, monospace; /* font-size: 8px; */ /* color: rgba(255, 255, 255, 0.95); */ /* text-shadow: 0 0 2px rgba(0, 0, 0, 0.6); */ font-size: 10px; font-weight: 700; color: #000; text-shadow: none; letter-spacing: 0.05em; pointer-events: none; } /* Auf der FG-Swatch (dunkler Default) bleibt das Label weiss damit es * gegen den schwarzen Default-Wert lesbar ist. */ #ttFgColor + .tt-color-label { color: #fff; } /* Input + Reset-Button in einer Flex-Row — Button gleiche Hoehe wie Input. * flex-wrap fuer Mobile-Viewports: wenn die Row zu breit wird (Input + * Length-Select + ggf. Trigger + Counter + Reset), umbrechen statt * horizontal aus dem Viewport rauszuwachsen. */ .tt-input-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; /* margin-top: 20px; */ margin-top: 0; } .tt-reset-all { appearance: none; flex-shrink: 0; height: 40px; padding: 0 14px; border: 1px solid #d4d4d4; border-radius: 4px; background: #fff; color: #1a1a1a; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.1s, border-color 0.1s, color 0.1s; } /* Specimen-Laenge-Auswahl (lang/mittel/kurz). Funktionalitaet kommt * spaeter — aktuell nur UI. Selbe Hoehe wie Input + Reset-Button damit * die Input-Row sauber fluchtet. */ .tt-sample-length { appearance: none; -webkit-appearance: none; flex-shrink: 0; height: 40px; padding: 0 28px 0 12px; border: 1px solid #d4d4d4; border-radius: 4px; background: #fff; color: #1a1a1a; font: inherit; font-size: 13px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; } .tt-sample-length:focus { outline: 2px solid rgba(29, 78, 216, 0.3); outline-offset: 1px; border-color: #1d4ed8; } .tt-reset-all:hover { background: #1a1a1a; border-color: #1a1a1a; color: #fff; } .tt-reset-all:active { background: #000; } /* Counter-Button "X markiert" — erscheint nur wenn ≥1 Cut-Checkbox * angehakt ist. Klick → smooth-scroll zum ersten markierten Schnitt. * Brand-blau, damit der User die Auswahl sofort visuell wahrnimmt. */ .tt-scroll-selected { appearance: none; flex-shrink: 0; height: 40px; padding: 0 14px; border: 1px solid #1d4ed8; border-radius: 4px; background: #1d4ed8; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.1s; font-variant-numeric: tabular-nums; } .tt-scroll-selected:hover { background: #1e40af; border-color: #1e40af; } .tt-scroll-selected #ttSelectedCount { margin-right: 4px; } #ttLiveText { flex: 1; min-width: 0; width: 100%; height: 40px; margin-top: 0; font-family: inherit; font-size: 18px; padding: 8px 12px; border: 1px solid #d4d4d4; border-radius: 4px; background: #fff; color: #1a1a1a; } #ttLiveText:focus { outline: none; border-color: #1d4ed8; } .tt-controls { display: flex; flex-wrap: wrap; /* row-gap kleiner als column-gap, damit auf umgebrochenen Zeilen * die Controls nicht unnoetig weit auseinander stehen. */ gap: 16px 32px; margin-top: 12px; } .tt-controls label { display: inline-flex; align-items: center; /* gap: 8px; */ /* color: #666; */ gap: 10px; /* font-size: 12px; */ font-size: 11px; color: #000; cursor: pointer; } .tt-ctrl-label { /* min-width: 100px; */ min-width: auto; color: #1a1a1a; font-weight: 500; } /* Font-Smoothing-Checkbox in der Live-Tester-Controls-Reihe. * Base-Styling kommt von .tt-controls label (inline-flex, gap:10px, * font-size:12px). Hier nur die Checkbox-Groesse + Akzentfarbe * anpassen, damit sie nicht zu klein neben den Slidern wirkt. */ .tt-smoothing-toggle input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: #1d4ed8; cursor: pointer; } .tt-controls input[type="range"] { /* width: 100px; */ width: 80px; vertical-align: middle; accent-color: #1d4ed8; } /* Line-Height-Slider ausgeblendet — :has() erlaubt es das ganze * -Wrapper-Element zu treffen ohne HTML-Aenderung. JS setzt * weiterhin line-height-Werte (default bleibt aktiv), nur die UI ist * versteckt. */ .tt-controls label:has(#ttLH) { display: none; } .tt-ctrl-out { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; /* color: #888; */ color: #555; /* min-width: 48px; */ /* width: 56px; */ min-width: auto; width: auto; text-align: right; font-variant-numeric: tabular-nums; } /* ── Layout — Sidebar + Main ─────────────────────────────────── */ .tt-layout { display: grid; grid-template-columns: 240px 1fr; } .tt-sidebar { /* Frueher position: sticky — hat die Sidebar erst ab Scroll-Position * ~10 px ans top: 172 geklebt; davor scrollte sie sichtbar mit dem * Layout mit, was die ersten Eintraege schwer erreichbar machte. * Jetzt position: fixed → bleibt absolut an Ort und Stelle, unabhaengig * vom Scroll-State. Die Grid-Spalte (.tt-layout columns 240px 1fr) * bleibt in der Layout-Reservation — die fixed Sidebar overlayt dort. * * KEIN Padding mehr direkt — wird vom Inner-Wrapper getragen, damit * smooth-scrollbar einen sauberen Scroll-Host hat. Sonst rechnet die * Library Inner-Hoehe falsch und der Inhalt rutscht nach unten. */ position: fixed; top: 172px; left: 0; width: 240px; height: calc(100vh - 172px); /* overflow-y wird vom Inner-Wrapper / smooth-scrollbar geregelt; * .tt-sidebar selbst muss hidden bleiben, damit nichts ueberschiesst. */ overflow: hidden; /* border-right: 1px solid #e5e5e5; */ /* background: #f7f7f5; */ border-right: none; background: #f9f8f5; z-index: 5; /* unter Page-Header (10) und Live-Tester (9) */ /* Flex-Column: Filter-Block (auto-Hoehe) sitzt fix oben, Scroll-Host * (.tt-sidebar-inner mit flex:1) nimmt den Rest. Damit beginnt der * Scrollbalken erst unterhalb der Filter und gehoert nur zur * Familien-Liste. */ display: flex; flex-direction: column; } /* Inner-Wrapper — wird von smooth-scrollbar als Scroll-Host benutzt * (data-scrollbar="true"). Traegt die Padding, fuellt die Sidebar * komplett aus. box-sizing: border-box damit das Padding NICHT die * Breite addiert. */ .tt-sidebar-inner { /* Flex-Kind: nimmt den Platz unterhalb des Filter-Blocks. min-height:0 * ist Pflicht, sonst waechst der Inner-Container am Inhalt entlang * statt zu scrollen. */ flex: 1; min-height: 0; width: 100%; /* padding-top entfaellt — der Filter-Block oberhalb traegt jetzt * sein eigenes oberes Padding. Hier nur noch horizontal + bottom. */ padding: 0 20px 20px 14px; box-sizing: border-box; border-right: 1px solid #cecece; } /* Sidebar-Footer: dritter Flex-Child unter .tt-sidebar-filters (oben) * und .tt-sidebar-inner (flex:1, scrollt). Hoehe 24px, fix am unteren * Sidebar-Rand, scrollt nicht mit der Family-Liste. Linksbuendig der * Impressum-Link, rechtsbuendig das rote Upload-Icon. */ .tt-sidebar-footer { flex: 0 0 36px; height: 36px; display: flex; align-items: center; justify-content: space-between; /* padding: 0 20px 0 14px; */ padding: 0 18px 0 14px; border-top: 1px solid #e5e5e5; /* Rechte Trennlinie identisch zu .tt-sidebar-inner — dadurch zieht * sich die vertikale Sidebar-Kante ueber die volle Hoehe durch. */ border-right: 1px solid #cecece; background: inherit; box-sizing: border-box; } /* Wrapper fuer Impressum + @ + Hilfe — eine inline-Einheit, damit die * Links und das @-Zeichen sauber zentriert in der gleichen Linie sitzen. */ .tt-footer-links { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1; } .tt-footer-sep { color: #999; font-size: 11px; line-height: 1; } .tt-imprint-link { font-size: 11px; color: #666; text-decoration: none; line-height: 1; /* Button-Reset — die Links sind jetzt