/* accilium interim — terminal =================================================================== Ein Satz Tokens, zwei Designs. Umgeschaltet wird allein ueber data-theme="light" | "dark" auf ; ohne Attribut entscheidet das Betriebssystem. Denselben Vertrag benutzt der Standort-Globus, der Schalter muss also nur diese eine Sache tun. Mint traegt das dunkle Design, Petrol das helle -- Mint auf Weiss ist schlicht nicht lesbar, das ist kein Geschmack, sondern Kontrast. =================================================================== */ @font-face { font-family: "Clear Sans"; src: url("/fonts/acciliumClearSans-Thin.woff") format("woff"); font-weight: 100; font-display: swap; } @font-face { font-family: "Clear Sans"; src: url("/fonts/acciliumClearSans-Light.woff") format("woff"); font-weight: 300; font-display: swap; } @font-face { font-family: "Clear Sans"; src: url("/fonts/acciliumClearSans-Regular.woff") format("woff"); font-weight: 400; font-display: swap; } @font-face { font-family: "Clear Sans"; src: url("/fonts/acciliumClearSans-Bold.woff") format("woff"); font-weight: 700; font-display: swap; } /* ---------- Tokens: dunkel ---------- */ :root { --theme: dark; --page: #04161d; --surface: #071f29; --surface-2: #0a2732; --sunken: #04161d; --ink: #d3ebe6; --ink-muted: #7b9c98; --ink-faint: #567471; --accent: #54dbc0; --accent-ink: #04161d; --accent-soft: rgba(84, 219, 192, 0.14); --accent-line: rgba(84, 219, 192, 0.34); --amber: #e0b062; --alert: #e58f7a; --line: rgba(84, 219, 192, 0.15); --line-soft: rgba(84, 219, 192, 0.08); --shadow: 0 18px 44px rgba(0, 0, 0, 0.42); /* Liquid Glass. --glass ist die Fuellung, die der Unschaerfe noch einen Ton gibt; --glass-spec die helle Kante oben, an der man Glas erkennt; --glass-edge der Rand, der oben heller ist als unten. */ --glass: rgba(9, 33, 43, 0.5); --glass-soft: rgba(5, 21, 28, 0.44); --glass-spec: rgba(214, 245, 240, 0.13); --glass-sheen: rgba(214, 245, 240, 0.055); --glass-edge: rgba(159, 226, 214, 0.26); --glass-edge-2: rgba(159, 226, 214, 0.05); --glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.34); --inset: rgba(2, 12, 17, 0.3); --inset-edge: rgba(159, 226, 214, 0.1); --inset-shade: rgba(0, 0, 0, 0.26); --vignette: rgba(0, 0, 0, 0.34); /* Kleiner Radius, ueberall derselbe. Panels 6, Kleinteile 4. */ --r: 6px; --r-sm: 4px; /* accilium Clear Sans traegt die ganze Seite, auch das Terminal. Die Schrift laedt ueber @font-face von hier; der Rest der Kette greift nur, solange sie es nicht getan hat. Eine Monoschrift steht bewusst nicht mehr darin: nichts auf der Seite richtet sich an Zeichenzellen aus, die Spalten sind Grids. */ --sans: "Clear Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: var(--sans); --step: clamp(0.88rem, 0.6rem + 0.6vw, 1rem); --gut: clamp(0.9rem, 3vw, 1.6rem); --frame: 112ch; } /* ---------- Tokens: hell ---------- */ :root[data-theme="light"] { --theme: light; --page: #f2f6f6; --surface: #ffffff; --surface-2: #ffffff; --sunken: #f6f9f9; --ink: #0f2b33; --ink-muted: #587279; --ink-faint: #8aa2a8; --accent: #00677f; --accent-ink: #ffffff; --accent-soft: rgba(0, 103, 127, 0.09); --accent-line: rgba(0, 103, 127, 0.3); --amber: #8a6320; --alert: #b4442a; --line: rgba(15, 43, 51, 0.13); --line-soft: rgba(15, 43, 51, 0.07); --shadow: 0 16px 38px rgba(15, 43, 51, 0.09); --glass: rgba(255, 255, 255, 0.74); --glass-soft: rgba(255, 255, 255, 0.64); --glass-spec: rgba(255, 255, 255, 0.95); --glass-sheen: rgba(255, 255, 255, 0.45); --glass-edge: rgba(255, 255, 255, 1); --glass-edge-2: rgba(15, 43, 51, 0.14); --glass-shadow: 0 14px 34px rgba(15, 43, 51, 0.12); --inset: rgba(15, 43, 51, 0.045); --inset-edge: rgba(15, 43, 51, 0.11); --inset-shade: rgba(15, 43, 51, 0.07); --vignette: transparent; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --theme: light; --page: #f2f6f6; --surface: #ffffff; --surface-2: #ffffff; --sunken: #f6f9f9; --ink: #0f2b33; --ink-muted: #587279; --ink-faint: #8aa2a8; --accent: #00677f; --accent-ink: #ffffff; --accent-soft: rgba(0, 103, 127, 0.09); --accent-line: rgba(0, 103, 127, 0.3); --amber: #8a6320; --alert: #b4442a; --line: rgba(15, 43, 51, 0.13); --line-soft: rgba(15, 43, 51, 0.07); --shadow: 0 16px 38px rgba(15, 43, 51, 0.09); --glass: rgba(255, 255, 255, 0.74); --glass-soft: rgba(255, 255, 255, 0.64); --glass-soft: rgba(255, 255, 255, 0.5); --glass-spec: rgba(255, 255, 255, 0.95); --glass-sheen: rgba(255, 255, 255, 0.45); --glass-edge: rgba(255, 255, 255, 1); --glass-edge-2: rgba(15, 43, 51, 0.14); --glass-shadow: 0 14px 34px rgba(15, 43, 51, 0.12); --inset: rgba(15, 43, 51, 0.045); --inset-edge: rgba(15, 43, 51, 0.11); --inset-shade: rgba(15, 43, 51, 0.07); --vignette: transparent; } } /* ---------- Grundlage ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); font-size: var(--step); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow: hidden; transition: background-color 0.3s ease, color 0.3s ease; } /* Nur im Dunkeln, und nur als Ahnung an den Raendern. */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 6; background: radial-gradient(130% 105% at 50% 38%, transparent 58%, var(--vignette) 100%); } a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); transition: background-color 0.14s ease, border-color 0.14s ease; } a:hover { background: var(--accent-soft); border-bottom-color: var(--accent); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* ---------- Hintergrund ---------- Liegt ganz hinten, unter allem. Die Seitenfarbe bleibt darunter stehen: ohne WebGL2 oder ohne aurora.js sieht man genau sie, und das ist ohnehin der Grundton der Farbfelder. */ .aurora { position: fixed; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .aurora { display: none; } } /* ---------- Rahmen ---------- */ .term { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(0.6rem, 1.6vh, 1rem); height: 100vh; height: 100dvh; max-width: var(--frame); margin: 0 auto; padding: clamp(0.6rem, 1.8vh, 1rem) var(--gut) clamp(0.7rem, 2vh, 1.1rem); } /* ---------- Kopf: Logo, Claim, est. 2017, Schieber ---------- Steht ueber allem und bleibt stehen -- Marke und Claim verschwinden nie, auch nicht beim Scrollen der Ausgabe. */ /* Liquid Glass. Drei Dinge machen es aus, und alle drei muessen da sein: die Unschaerfe dahinter, die helle Kante oben innen, und ein Rand, der oben heller ist als unten. backdrop-filter braucht etwas zum Verwischen. Das liefert der Grainient dahinter; ohne ihn steht hinter dem Glas eine Flaeche, und dann sieht man von der Unschaerfe nichts. Beides gehoert zusammen. */ .bar { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: clamp(0.8rem, 2.2vw, 1.6rem); padding: 0.85rem clamp(0.95rem, 2.2vw, 1.35rem); border-radius: var(--r); background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.04); backdrop-filter: blur(30px) saturate(180%) brightness(1.04); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-spec); transition: background-color 0.3s ease; } /* Die Kante ist ein Verlauf, oben hell und unten fast weg -- so faellt Licht auf eine Scheibe. Ein border-image koennte das auch, kappt aber den Radius; der Rand waere wieder eckig. Deshalb liegt sie als eigene Ebene darueber, aus der ein Maskenpaar alles ausser dem Rahmen herausschneidet. */ /* Der Lichtzug. Das ist es, was eine getoente Flaeche von Glas unterscheidet -- und er **folgt dem Zeiger**: aurora.js setzt --sx/--sy je Scheibe in deren eigenen Koordinaten, und das Licht sitzt dort. Dieselbe Bewegung, die den Hintergrund verschiebt, wandert damit auch ueber das Glas; zwei getrennte Zeiger waeren zwei Lichtquellen im selben Raum. Ohne aurora.js sitzt er mittig und steht still -- die Scheibe sieht dann aus wie Glas ohne Bewegung, nicht wie ein Fehler. */ .bar::before, .console::before, .doc::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 70% 220% at var(--sx, 50%) var(--sy, 50%), var(--glass-sheen) 0%, transparent 68% ); pointer-events: none; } .bar::after, .console::after, .doc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, var(--glass-edge), var(--glass-edge-2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .brand { display: flex; align-items: center; gap: clamp(0.7rem, 2vw, 1.4rem); min-width: 0; border-bottom: 0; } .brand:hover { background: transparent; } .brand img { height: 34px; width: auto; display: block; flex: 0 0 auto; } /* Ein Logo je Design -- Weiss auf Weiss waere unsichtbar, Petrol auf Petrol ebenso. Die Selektoren tragen bewusst .brand mit: sonst schlaegt die Grundregel .brand img { display: block } sie an Spezifitaet. */ .brand .logo-light { display: none; } :root[data-theme="light"] .brand .logo-dark { display: none; } :root[data-theme="light"] .brand .logo-light { display: block; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .brand .logo-dark { display: none; } :root:not([data-theme="dark"]) .brand .logo-light { display: block; } } .claim { display: flex; align-items: baseline; gap: 1.1ch; min-width: 0; padding-left: clamp(0.8rem, 2.2vw, 1.6rem); border-left: 1px solid var(--line); } .claim b { font-family: var(--sans); font-weight: 400; font-size: 1.06em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); white-space: nowrap; } .est { font-size: 0.82em; letter-spacing: 0.1em; color: var(--ink-faint); white-space: nowrap; } .bar-end { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; flex: 0 0 auto; } /* ---------- Schieber ---------- */ .switch { position: relative; flex: 0 0 auto; width: 50px; height: 26px; padding: 0; border: 1px solid var(--inset-edge); border-radius: 13px; background: var(--inset); cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: border-color 0.18s ease, background-color 0.3s ease; } .switch:hover { border-color: var(--accent-line); } .switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Der Knopf. Links = hell, rechts = dunkel. */ .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .switch[aria-checked="true"]::after { transform: translateX(24px); } .switch svg { position: relative; z-index: 1; width: 13px; height: 13px; margin: 0 4px; display: block; color: var(--ink-faint); transition: color 0.22s ease; } /* Das Zeichen unter dem Knopf laeuft auf dessen Gegenfarbe. */ .switch[aria-checked="false"] .i-sun, .switch[aria-checked="true"] .i-moon { color: var(--accent-ink); } /* ---------- Ausgabe ---------- */ /* Auch der Schirm ist eine Scheibe, aber eine duennere: weniger Fuellung als Kopfzeile und Fenster, dafuer dieselbe Unschaerfe. So schimmert der Verlauf sichtbar durch, und der Text steht trotzdem auf einem ruhigen Grund -- direkt auf dem Schillern waere er kaum zu lesen. Keine Kante und kein Glanz: drei gleich laute Scheiben uebereinander waeren eine zu viel, dies ist die stille. */ /* Die Flaeche ist so hoch wie das, was drinsteht -- nicht so hoch wie der Platz, den es gaebe. Vorher belegte sie vom ersten Bild an die volle Resthoehe und der Inhalt klebte unten; oben stand die groesste Flaeche des Schirms leer. margin-top:auto schiebt sie samt Konsole nach unten, flex:0 1 auto laesst sie mit der Ausgabe wachsen, und min-height:0 erlaubt das Schrumpfen unter die Inhaltshoehe -- erst dann scrollt sie. Solange nichts drinsteht, ist sie gar nicht da. */ .screen { flex: 0 1 auto; min-height: 0; margin-top: auto; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: clamp(0.75rem, 2.2vh, 1.15rem) clamp(0.85rem, 2.2vw, 1.15rem); border-radius: var(--r); background: var(--glass-soft); -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%); scrollbar-width: thin; scrollbar-color: var(--accent-line) transparent; transition: border-color 0.3s ease; } .screen::-webkit-scrollbar { width: 8px; } .screen::-webkit-scrollbar-thumb { background: var(--accent-line); border-radius: 4px; } .screen:empty { display: none; } .screen > * { flex: 0 0 auto; animation: appear 0.16s ease-out both; } @keyframes appear { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } } .ln { margin: 0; white-space: pre-wrap; word-break: break-word; } .ln.gap { height: 0.9em; } .ln.dim { color: var(--ink-muted); } .ln.mint { color: var(--accent); } .ln.amber { color: var(--amber); } .ln.err { color: var(--alert); } .ln.big { font-family: var(--sans); font-size: 1.9em; line-height: 1.1; letter-spacing: 0.16em; color: var(--accent); margin: 0.35em 0 0.5em; text-transform: uppercase; } .ln.echo { color: var(--ink); margin-top: 1.1em; } .ln.echo .p { color: var(--accent); } .rule { border: 0; border-top: 1px solid var(--line); margin: 0.9em 0; } .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4em 1.5em; align-items: baseline; padding: 0.14em 0; } .row .k { min-width: 0; } .row .v { color: var(--ink-muted); white-space: nowrap; font-size: 0.92em; } .cmdlist { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.16em 1.6em; margin: 0.2em 0; } .cmdlist dt { color: var(--accent); } .cmdlist dd { margin: 0; color: var(--ink-muted); } /* Legende unter dem Standort-Globus. */ .ln.legend { display: flex; flex-wrap: wrap; gap: 0.4em 1.6em; color: var(--ink-muted); font-size: 0.9em; } .ln.legend span { display: inline-flex; align-items: center; gap: 0.6ch; } .ln.legend i { width: 9px; height: 3px; border-radius: 2px; display: block; } /* ---------- Das Fenster unten ---------- Traegt die Kurzbeschreibung, die Knoepfe und den Prompt. Es ist der einzige Ort, an dem etwas eingegeben wird, also bekommt es Gewicht. */ .console { position: relative; flex: 0 0 auto; border-radius: var(--r); background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.04); backdrop-filter: blur(30px) saturate(180%) brightness(1.04); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-spec); transition: background-color 0.3s ease; } /* Die Tastenhilfe steht rechts neben den Knoepfen, nicht mehr als eigene Leiste ueber der Konsole. Eine Zierleiste weniger, dieselbe Auskunft. */ .hint { margin-left: auto; font-size: 0.75em; color: var(--ink-faint); white-space: nowrap; } .hint kbd { font: inherit; font-size: 0.95em; padding: 0.05em 0.42em; border: 1px solid var(--line); border-radius: 3px; color: var(--ink-muted); } .console-body { padding: clamp(0.95rem, 2.4vh, 1.3rem) clamp(0.85rem, 2.2vw, 1.15rem) clamp(0.95rem, 2.4vh, 1.25rem); } /* Knoepfe links, Tastenhilfe rechts, eine Zeile. Auf schmalen Schirmen faellt die Hilfe weg (siehe unten) und die Knoepfe umbrechen. */ .actions { display: flex; align-items: center; gap: 0.45rem 0.9rem; flex-wrap: wrap; margin-bottom: 0.85rem; } .chips { display: flex; flex-wrap: wrap; gap: 0.45rem; min-width: 0; } /* Im Ruhezustand nur eine Linie. Fuenf mintgerahmte Kaesten nebeneinander ziehen mehr Aufmerksamkeit auf sich als die Ausgabe darueber. */ .chip { font: inherit; font-size: 0.92em; color: var(--ink-muted); background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.34em 0.85em; cursor: pointer; transition: color 0.14s ease, background-color 0.14s ease, border-color 0.14s ease; } .chip:hover, .chip:focus-visible { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); outline: none; } .promptline { display: flex; align-items: center; gap: 0.6ch; padding: 0.62em 0.8em; background: var(--inset); border: 1px solid var(--inset-edge); border-radius: var(--r-sm); box-shadow: inset 0 1px 2px var(--inset-shade); transition: border-color 0.16s ease, background-color 0.3s ease; } .promptline:focus-within { border-color: var(--accent-line); } .promptline .p { color: var(--accent); flex: 0 0 auto; user-select: none; } #cmd { flex: 1 1 auto; min-width: 0; font: inherit; color: var(--ink); background: transparent; border: 0; padding: 0; caret-color: var(--accent); } #cmd:focus { outline: none; } #cmd::placeholder { color: var(--ink-faint); } /* ---------- Rechtsseiten ---------- */ body.page { overflow: auto; } body.page .term { height: auto; min-height: 100dvh; } /* Die Kopfzeile bleibt auch hier stehen -- Marke, Claim und est. 2017 sollen nie verschwinden. Sie klebt aber mit Abstand zum oberen Rand, und durch diesen Spalt wuerde der Text darunter hindurchlaufen. Das ::before legt den Streifen in Seitenfarbe davor. Es reicht ueber die Rahmenlinie hinaus, sonst blitzt sie an den Ecken durch. */ body.page .bar { position: sticky; top: clamp(0.6rem, 1.8vh, 1rem); z-index: 3; } /* Der Spalt ueber der klebenden Kopfzeile, durch den sonst Text hindurchlaeuft. Deckend waere er ein Loch im Verlauf -- also dieselbe Unschaerfe wie die Kopfzeile selbst, dann laeuft er einfach mit. Eigenes Element statt ::before: der Platz ist dort vom Glanz belegt. */ .bar-gap { display: none; } body.page .bar-gap { display: block; position: absolute; left: -1px; right: -1px; bottom: 100%; height: clamp(0.75rem, 2.1vh, 1.2rem); background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.04); backdrop-filter: blur(30px) saturate(180%) brightness(1.04); pointer-events: none; } .doc { position: relative; flex: 1 1 auto; padding: clamp(0.6rem, 2vh, 1.2rem) clamp(0.9rem, 2.4vw, 1.5rem) clamp(2rem, 6vh, 3.5rem); border-radius: var(--r); background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.04); backdrop-filter: blur(30px) saturate(180%) brightness(1.04); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-spec); transition: background-color 0.3s ease; } .doc h1 { font-size: 1em; font-weight: 400; color: var(--accent); margin: clamp(1rem, 3vh, 1.8rem) 0 0.4em; letter-spacing: 0.02em; } .doc h1::before { content: "# "; color: var(--ink-faint); } .bi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; padding: clamp(1.4rem, 3.5vh, 2.2rem) 0; border-top: 1px solid var(--line); } .bi > section { min-width: 0; } .lang { display: block; font-size: 0.8em; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1em; } .lang::before { content: "# "; } .doc h2 { font-size: 1em; font-weight: 400; color: var(--accent); margin: 0 0 0.8em; } .doc h3 { font-size: 1em; font-weight: 400; color: var(--amber); margin: 1.7em 0 0.5em; } .doc h3::before { content: "## "; color: var(--ink-faint); } .doc p, .doc li, .doc address { color: var(--ink); margin: 0 0 0.9em; font-style: normal; line-height: 1.66; } .doc ul { margin: 0 0 0.9em; padding-left: 2ch; list-style: none; } .doc li::before { content: "- "; color: var(--ink-faint); } .facts { width: 100%; border-collapse: collapse; margin: 0 0 1.3em; } .facts th, .facts td { text-align: left; vertical-align: top; padding: 0.2em 0; } .facts th { font-weight: 400; color: var(--ink-muted); padding-right: 2ch; white-space: nowrap; } .doc-foot { margin-top: clamp(2rem, 6vh, 3.5rem); padding-top: 1.2rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.5rem 2ch; color: var(--ink-muted); font-size: 0.9em; } /* ---------- schmale Schirme ---------- Logo, Claim und est. 2017 bleiben sichtbar, sie ruecken nur untereinander. Der Schieber behaelt seinen Platz rechts oben. */ @media (max-width: 40rem) { .bar { flex-wrap: wrap; row-gap: 0.55rem; align-items: flex-start; } .brand { flex: 1 1 auto; flex-wrap: wrap; row-gap: 0.4rem; } .claim { flex-basis: 100%; padding-left: 0; border-left: 0; } .bar-end { align-self: flex-start; } /* Tab und Pfeiltasten gibt es hier nicht zu druecken. */ .hint { display: none; } } @media (max-width: 44rem) { .bi { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; } .row { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0.32em 0; } .row .v { white-space: normal; } .cmdlist { grid-template-columns: minmax(0, 1fr); gap: 0; } .cmdlist dd { margin-bottom: 0.5em; } .ln.big { font-size: 1.45em; letter-spacing: 0.1em; } } @media (prefers-reduced-motion: reduce) { .screen > *, .switch::after { animation: none !important; transition: none !important; } } /* ---------- Zielcursor ---------- Aufbau wie bei TargetCursor: ein Punkt, vier Eckwinkel, alles in einem gedrehten Rahmen. Bewegt wird ausschliesslich ueber transform, also auf dem Compositor -- Position und Groesse bleiben unangetastet, sonst rechnet der Browser in jedem Bild das Layout neu. Gesetzt werden die Werte von target-cursor.js ueber das CSSOM. Ohne die Datei steht hier nur ein unsichtbarer Kasten und der Zeiger des Systems bleibt, wie er ist. */ .tcur { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 2147483647; pointer-events: none; color: var(--accent); opacity: 1; /* Herein blendet er kurz. Hinaus nicht: is-off nimmt den Uebergang gleich mit weg, damit er in dem Moment weg ist, in dem der Knopf verlassen wird -- ein nachhaengender Zeiger ist schlimmer als gar keiner. */ transition: opacity 0.12s ease; } .tcur.is-off { opacity: 0; transition: none; } .tcur-dot { position: absolute; left: 0; top: 0; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: currentColor; will-change: transform; } .tcur-c { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border: 3px solid currentColor; will-change: transform; } .tcur-tl { border-right: 0; border-bottom: 0; } .tcur-tr { border-left: 0; border-bottom: 0; } .tcur-br { border-left: 0; border-top: 0; } .tcur-bl { border-right: 0; border-top: 0; } /* Der Zeiger des Systems geht weg, solange der eigene laeuft. In Eingabefeldern bleibt der Schreibbalken: ohne ihn sieht man nicht, wo man schreibt. */ body.tcur-on, body.tcur-on *, body.tcur-on .intro.is-live { cursor: none; } body.tcur-on input, body.tcur-on textarea, body.tcur-on [contenteditable="true"] { cursor: text; } @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .tcur { display: none; } } /* ---------- Intro ---------- Liegt ueber allem. Standard ist display:none -- bricht intro.js weg, bleibt der Schirm frei fuers Terminal. */ .intro { display: none; } .intro.is-live { display: block; position: fixed; inset: 0; z-index: 40; /* Rueckfall: deckend. Das Intro laeuft dann wie bisher auf Schwarz. Bewusst die Zahl und nicht --page -- intro.js traegt dieselbe Farbe hart in CONFIG.bg. */ background: #04161d; overflow: hidden; cursor: pointer; opacity: 1; transition: opacity 0.7s ease-out; } .intro.is-out { opacity: 0; pointer-events: none; } /* Beide liegen uebereinander, nicht untereinander. Als Blockelemente mit height:100% stapeln sie sich sonst: das Video nimmt die volle Hoehe und schiebt den Canvas aus dem Bild. Das Raster lief dann zwar, war aber nicht zu sehen -- ein Fehler, der nur im Rueckfall auftritt und deshalb leicht durchrutscht. */ .intro canvas, .intro video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } /* Der Film ist 16:9. Auf einem anderen Fensterverhaeltnis beschneidet er, statt Balken zu zeigen -- er soll das Bild fuellen, nicht darin schweben. Der Preis: auf sehr hohen Fenstern faellt seitlich etwas weg, und das trifft vor allem das letzte Bild, das die fertige Seite zeigt. */ .intro video { object-fit: cover; } /* Jeweils nur das, was auch laeuft. */ .intro:not(.is-film) video { display: none; } .intro.is-film canvas { display: none; } /* Das Intro auf dem Hintergrund. ------------------------------------------------------------------ Das Canvas ist ohnehin transparent, es malt nur die Zeichen. Deckend ist allein die Flaeche darunter -- nimmt man sie weg, stehen die Zeichen auf den Farbfeldern. Nur: unter dem Overlay liegt nicht nur der Hintergrund, sondern auch das Terminal. Eine halbdurchlaessige Flaeche wuerde beides zeigen, also auch die Scheiben, die noch gar nicht dran sind. Deshalb geht das Terminal fuer die Dauer des Intros auf visibility: hidden -- es behaelt seinen Platz, ist aber nicht zu sehen. Sobald intro.js is-out setzt, greift die Regel nicht mehr: das Terminal ist da, und das Overlay blendet darueber weg. Genau das ist die Uebergabe, sie bleibt unveraendert. Alles unter @supports, weil es an :has() haengt. Wo das fehlt, bleibt der deckende Rueckfall von oben -- also genau das Verhalten von vorher, nicht ein kaputtes. */ @supports selector(:has(*)) { .intro.is-live { background: transparent; } body:has(.intro.is-live:not(.is-out)) .term { visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .intro { display: none !important; } } /* ---------- Fragen an das Modell und 410-Seite ---------- Aus main uebernommen, damit der Redesign die Frage-Funktion und die 410-Seite nicht mitnimmt. */ /* Modellantwort. Der Balken links kennzeichnet sie als solche, damit sie nicht mit den festen Inhalten der Seite verwechselt wird. */ .ln.ai { color: var(--fg); border-left: 2px solid var(--mint-dim); padding-left: 0.9em; margin-left: -0.9em; } .ln.pending { opacity: 0.7; } @media (prefers-reduced-motion: no-preference) { .ln.pending { animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.8; } } } .send { flex: 0 0 auto; min-width: 2.5em; } .ai-notice { color: var(--fg-dim); font-size: 0.72em; line-height: 1.5; margin: 0.8em 0 0; } /* Pflichtangaben, dauerhaft sichtbar. Enger an den Hinweis darueber gesetzt, damit beide als ein Fuss gelesen werden, und ohne die Unterlinie, die terminal.css sonst jedem Link gibt -- drei unterstrichene Links in einer Zeile sehen aus wie eine Navigation, und das sollen sie nicht. */ /* Die Pflichtangaben stehen in derselben Zeile wie der Hinweis darueber und ruecken nur ein Stueck ab. Der Umbruch bleibt erlaubt: auf einem Telefon ist eine zweite Zeile besser als eine, die aus dem Bild laeuft. */ .site-legal { margin-left: 0.5em; white-space: normal; } /* Der Countdown ist die einzige Zeile auf dieser Seite, die sich selbst weiterschreibt. Die darf gross sein. Tabellenziffern, damit beim Zaehlen nichts springt: sonst wackelt die ganze Zeile, sobald aus einer 1 eine 8 wird. */ .ln.countdown { font-size: clamp(1.6rem, 5vw, 2.6rem); line-height: 1.15; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; margin: 0.2em 0 0.1em; } /* Die drei standen im selben Grau wie der Hinweis daneben und sahen damit nicht wie Links aus. Jetzt in der Akzentfarbe, wie jeder andere Link im Terminal auch. */ .site-legal a { border-bottom: 0; color: var(--accent); } .site-legal a:hover, .site-legal a:focus-visible { color: var(--accent); border-bottom: 0; } /* 410-Seite: Terminalzeilen ausserhalb des Terminals. Die Zeilen sind hier normaler Fliesstext, deshalb kein pre-wrap: sonst zieht der Quelltext seine Einrueckungen mit in die Darstellung. */ .doc.gone { padding-top: clamp(2.5rem, 12vh, 7rem); } .doc.gone .lines { max-width: 64ch; } .doc.gone .ln { margin: 0; word-break: break-word; } .doc.gone .ln + .ln { margin-top: 0.15em; } .doc.gone .ln.gap { height: 1.2em; } .doc.gone .ln.dim { color: var(--fg-dim); } .doc.gone .ln.err { color: #e58f7a; } .doc.gone .ln.echo { color: var(--fg); } .doc.gone .ln.echo .p { color: var(--mint); } .doc.gone .ln .req { word-break: break-all; } .doc.gone a { color: var(--mint); }