/* ═══════════════════════════════════════════════════════════════════ nomad-terminal.css — de terminal-componenten WAT DIT IS. De visuele taal van seasonality.html, losgetrokken uit die pagina zodat de rest van het platform hem kan hergebruiken in plaats van hem te kopiëren. Panelen met een mono-kop, een vraagteken dat de uitleg verbergt, kerncijfers rechts uitgelijnd, pill-knoppen, scanlines. WAAROM OPT-IN. De namen hierin — .panel, .kpi, .tag, .preset — zijn generiek en al in gebruik op tien pagina's, elk met een eigen definitie. Een globale stylesheet zou die stilletjes overschrijven; .tag op de marketingpagina's betekent iets heel anders dan hier. Daarom hangt alles onder [data-terminal] en gebeurt er niets tot een pagina zich aanmeldt: Dat is dezelfde afspraak als nomad-verhoogd.css met [data-nv], en om dezelfde reden: de laag moet betrouwbaar winnen zonder één !important, en niets aanraken wat zich niet heeft aangemeld. VERHOUDING TOT nomad-verhoogd.css. Die laag doet MATERIAAL — diepte, korrel, oppervlakken, de dagstand. Deze doet COMPONENTEN. Ze bijten elkaar niet en horen allebei geladen te worden; verhoogd eerst, terminal erna. TOKENS. Deze laag definieert alleen ALIASSEN op de tokens die de pagina al heeft (--panel, --line, --white, --blue ...). Zet die dus in je eigen :root; hier staat geen enkele kleur hardgecodeerd behalve de twee glaseffecten. Aanpassen? Doe het hier, niet in de pagina's. Dat is het hele punt. ═══════════════════════════════════════════════════════════════════ */ [data-terminal]{ /* Aliassen — de componenten spreken deze namen, de pagina levert de bron. */ --border:var(--line); --border-strong:var(--line-2); --text:var(--white); --muted:var(--gray); /* --faint is met opzet NIET var(--dim). De stack zet --dim op #565E73 en dat haalt op onze paneelkleuren maar 2,8:1 — ruim onder de 4,5:1 die WCAG AA vraagt onder 18px. Juist de kleinste tekst op deze pagina's (hints, voetregels, labels) draagt die kleur, dus daar is het niet vrijblijvend. #7D88A7 is de donkerste tint op dezelfde lijn die op alle drie de paneelkleuren (#111628, #0D1019, #1A2135) boven 4,5:1 uitkomt. */ --faint:#7D88A7; --accent:var(--blue); --accent-bright:var(--blue-2); --up:var(--green); --down:var(--red); /* Radiusschaal. Vier stappen, meer niet: de laag stond op zes verschillende waarden (6, 8, 9, 16, 999 en 2 voor balkjes) en dat leest als toeval in plaats van als systeem. --r blijft de paneelmaat, zodat bestaande code die hem gebruikt niets merkt. */ /* Fontschaal. Zes stappen: 9 (micro-labels), 11.5 (kleine tekst), 13 (lopend), 18 (sectiekop), 22 (cijfer), 30 (paginakop). De laag stond op tien maten omdat 9/9.5/10 en 11/11.5 naast elkaar leefden zonder dat het verschil iets betekende. */ --r-micro:2px; /* balkjes en meters */ --r-klein:8px; /* labels, rijen, knoppen, tooltips */ --r:16px; /* panelen */ --r-pil:999px; /* keuzepillen */ --fd:var(--display); --fb:var(--body); --fm:var(--mono); } /* ── Panelen ───────────────────────────────────────────────────── Het basisoppervlak. De blur is er niet voor het effect maar voor de diepte: hij zet het paneel los van de korrel die eronder ligt. */ [data-terminal] .panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); position:relative; transition:border-color .18s; } [data-terminal] .panel:hover{border-color:var(--border-strong)} [data-terminal] .panel-pad{padding:14px 16px} /* Laadstand: een veeg licht over het paneel in plaats van een spinner. Zo houdt het paneel zijn plek en springt de pagina niet als de data komt. */ [data-terminal] .panel.loading::after{ content:"";position:absolute;inset:0;border-radius:var(--r);z-index:4; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%); background-size:200% 100%; animation:nt-shimmer 1.1s linear infinite; } @keyframes nt-shimmer{to{background-position:-200% 0}} /* ── Paneelkop ─────────────────────────────────────────────────── Titel links in mono-kapitalen, hint rechts. De titel is bewust klein en gespatieerd: hij is een label boven de data, geen kop in een artikel. */ [data-terminal] .p-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap; } [data-terminal] .p-title{ display:flex;align-items:center;gap:6px; font-family:var(--fd);font-weight:700;font-size:10.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--muted); } [data-terminal] .p-hint{ font-family:var(--fm);font-size:9px;letter-spacing:.12em;color:var(--faint); text-transform:uppercase;white-space:nowrap;padding-top:1px;text-align:right; } /* Variant voor onder de titel in plaats van ernaast: daar staat hij links en mag hij afbreken als de kolom smal wordt. */ [data-terminal] .p-hint.links{text-align:left;white-space:normal;padding-top:5px} /* De bronvermelding onder een grafiek: elk stuk een eigen item met een eigen regelhoogte. Als losse inline-spans afbreken schuiven ze over elkaar heen — met flex kan dat niet, want elk item houdt zijn eigen doos. */ [data-terminal] .voet .bronnen{ display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;min-width:0; } [data-terminal] .voet .bronnen > span{position:relative;line-height:1.7} [data-terminal] .voet .bronnen > span + span::before{ content:"·";position:absolute;left:-8px;color:var(--border-strong); } /* Het vraagteken draagt de toelichting. Dat scheelt per paneel drie tot vier regels tekst en houdt het blad een instrument in plaats van een artikel — maar de uitleg blijft bereikbaar, ook via toetsenbord. */ [data-terminal] .q{ width:14px;height:14px;border-radius:50%; border:1px solid var(--border-strong); display:inline-grid;place-items:center;flex:0 0 auto; font-family:var(--fb);font-weight:700;font-size:9px; color:var(--faint);cursor:help;user-select:none; position:relative; } /* Het rondje blijft 14px — groter zou naast een titel van 10,5px schreeuwen — maar het RAAKVLAK wordt 32px. Zonder dat is het op een telefoon een gok, en juist daar zit de uitleg die je nodig hebt. */ [data-terminal] .q::after{ content:"";position:absolute;left:50%;top:50%; width:32px;height:32px;transform:translate(-50%,-50%); } /* Zelfde truc voor losse tekstlinks in kleine voetregels: het onderstreepte woord blijft klein, het raakvlak wordt 32px hoog. */ [data-terminal] .tv-attr a{position:relative;display:inline-block} [data-terminal] .tv-attr a::after{ content:"";position:absolute;left:0;right:0;top:50%; height:32px;transform:translateY(-50%); } [data-terminal] .q:hover, [data-terminal] .q:focus-visible{color:var(--text);border-color:var(--muted)} /* ── Zwevende tooltip ──────────────────────────────────────────── Voor grafiekwaarden onder de cursor. Positie zet de pagina zelf. */ [data-terminal] .tip{ position:absolute;pointer-events:none;z-index:8;display:none; background:#0D1322;border:1px solid var(--border-strong);border-radius:var(--r-klein); padding:8px 11px;font-size:11.5px;color:var(--muted);line-height:1.55; box-shadow:0 10px 28px rgba(0,0,0,.5);white-space:nowrap; } [data-terminal] .tip.on{display:block} [data-terminal] .tip .t1{font-family:var(--fd);font-weight:700;font-size:13px;color:var(--text)} /* ── Kerncijfers ───────────────────────────────────────────────── Piepklein label met veel spatiëring, cijfer eronder. De gloed onder het cijfer is wat het van een tabelwaarde onderscheidt. */ [data-terminal] .kpis{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap} [data-terminal] .kpi{text-align:right;position:relative} [data-terminal] .kpi .k-l{ font-family:var(--fm);font-size:9px;letter-spacing:.18em; color:var(--faint);text-transform:uppercase; } [data-terminal] .kpi .k-v{ font-family:var(--fd);font-weight:800;font-size:22px;line-height:1.1;margin-top:2px; font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(0,82,255,.28); } [data-terminal] .kpi .k-v small{ font-size:11.5px;font-weight:400;font-family:var(--fm);color:var(--muted); } [data-terminal] .kpi .k-s{ font-family:var(--fm);font-size:9px;letter-spacing:.06em;color:var(--faint);margin-top:2px; } [data-terminal] .k-v.blue{color:var(--accent-bright)} [data-terminal] .up{color:var(--up)} [data-terminal] .down{color:var(--down)} /* ── Labels ──────────────────────────────────────────────────────*/ [data-terminal] .tag{ font-family:var(--fm);font-size:9px;letter-spacing:.08em;font-weight:500; color:var(--muted);border:1px solid var(--border);border-radius:var(--r-klein); padding:3px 8px;text-transform:uppercase; } [data-terminal] .tag.blue{ color:var(--accent-bright);border-color:rgba(46,107,255,.45);background:rgba(46,107,255,.10); } [data-terminal] .tag.amber{ color:var(--amber);border-color:rgba(245,166,35,.42);background:rgba(245,166,35,.10); } /* ── Keuzeknoppen ──────────────────────────────────────────────── Pillen voor perioden, presets, filters. */ [data-terminal] .presets{display:flex;gap:7px;flex-wrap:wrap} [data-terminal] .preset{ font-family:var(--fb);font-size:11.5px;font-weight:600; background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-pil); color:var(--muted);padding:5px 12px;cursor:pointer;transition-property:background-color,background-image,border-color,color,box-shadow,opacity,transform,outline-color;transition-duration:.15s; /* 32px hoog: onder die maat wordt een pil op een aanraakscherm een gok. De tekst blijft even groot; alleen het raakvlak groeit. */ min-height:32px; } [data-terminal] .preset:hover{color:var(--text);border-color:var(--border-strong)} /* De actieve pil zet blauwe tekst op een blauw vlak. Met --accent-bright (#3D7BFF) haalt dat 3,7:1 — te weinig. Een lichtere tint van dezelfde kleur houdt de pil herkenbaar blauw en komt op 4,6:1 uit. */ [data-terminal] .preset.active, [data-terminal] .preset.aan{ background:rgba(0,82,255,.18);border-color:var(--accent-bright);color:#7AA5FF; } [data-terminal] .preset:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px} [data-terminal] .icon-btn{ width:32px;height:32px;border-radius:var(--r-klein);border:1px solid var(--border); background:var(--panel-2);color:var(--muted);cursor:pointer; display:grid;place-items:center;font-size:14px;font-family:var(--fb);transition-property:background-color,background-image,border-color,color,box-shadow,opacity,transform,outline-color;transition-duration:.15s; } [data-terminal] .icon-btn:hover{color:var(--text);border-color:var(--border-strong)} /* ── Paginakop — APARTE opt-in: ── Waarom los van de rest: deze regels leggen een hele kop-LAYOUT op (waar de titel staat, hoe de ghost-code eroverheen valt, hoe de kolommen wrappen). Dat werkt op een blad dat verder niets in zijn kop heeft staan, maar een pagina met een zoekbalk, een periodekiezer en een filterrij heeft zijn eigen ordening — en die won het niet van deze selectors. Seasonality raakte er zijn koplucht door kwijt en zag zijn knoppen overlappen. De componenten hierboven (panelen, tags, kerncijfers) zijn veilig overal; deze laag is een keuze. Ghost-code achter de titel, eyebrow met streepje, tags eronder. De ghost-code is de handtekening van deze stijl: hij benoemt waar je bent zonder ruimte te kosten. */ [data-terminal-kop] .topline{ position:relative;display:flex;align-items:flex-end;justify-content:space-between; gap:20px;flex-wrap:wrap; } [data-terminal-kop] .greet{position:relative;flex:0 1 auto;min-width:0} [data-terminal-kop] .greet > *{position:relative;z-index:1} [data-terminal-kop] .ghost-code{ position:absolute;left:-4px;top:-8px;z-index:0;pointer-events:none;user-select:none; font-family:var(--fd);font-weight:900;font-size:clamp(72px,9vw,110px); line-height:.8;letter-spacing:-.03em;white-space:nowrap; color:transparent;-webkit-text-stroke:1.5px rgba(214,222,245,.08); animation:nt-ghost 6s ease-in-out infinite alternate; } @keyframes nt-ghost{from{opacity:.55}to{opacity:1}} [data-terminal-kop] .greet .eyebrow{ font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--accent-bright);margin-bottom:8px;display:flex;align-items:center;gap:9px; } [data-terminal-kop] .greet .eyebrow .ln{ width:22px;height:1px;background:linear-gradient(90deg,var(--accent),transparent); } [data-terminal-kop] .greet h1{ font-family:var(--fd);font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.08; } [data-terminal-kop] .greet .sub{ font-size:14px;color:var(--muted);margin-top:7px; display:flex;align-items:center;gap:8px;flex-wrap:wrap; } /* ── Grafiekomhulsel ─────────────────────────────────────────────*/ [data-terminal] .chart-wrap{position:relative;margin-top:8px} [data-terminal] svg.chart{display:block;width:100%} [data-terminal] svg.chart text{font-family:var(--fm)} [data-terminal] .cap{margin-top:8px;font-size:11px;color:var(--faint)} [data-terminal] .cap b{color:var(--muted);font-weight:600} [data-terminal] .empty-note{padding:26px 0;text-align:center;color:var(--faint);font-size:12.5px} /* ── Scanlines ─────────────────────────────────────────────────── De textuur die het geheel een terminal maakt in plaats van een website. Puur decoratief, dus buiten de toegankelijkheidsboom en zonder muis. */ [data-terminal] .scanlines{ position:fixed;inset:0;z-index:90;pointer-events:none;mix-blend-mode:overlay; background:repeating-linear-gradient(to bottom, rgba(255,255,255,.016) 0px,rgba(255,255,255,.016) 1px, transparent 1px,transparent 3px); } [data-terminal] .scanlines::after{ content:"";position:absolute;left:0;right:0;height:120px;top:-120px; background:linear-gradient(to bottom,transparent,rgba(0,82,255,.05),transparent); animation:nt-scan 9s linear infinite; } @keyframes nt-scan{to{transform:translateY(calc(100vh + 240px))}} /* ── Respect ───────────────────────────────────────────────────── Alles wat beweegt staat uit zodra het systeem daarom vraagt. De scanlines zelf blijven: dat is textuur, geen beweging. */ @media (prefers-reduced-motion:reduce){ [data-terminal] .ghost-code, [data-terminal] .scanlines::after, [data-terminal] .panel.loading::after{animation:none} [data-terminal] .scanlines::after{display:none} } /* ── Twee kolommen ─────────────────────────────────────────────── Hoofdinhoud links, een smalle rail met samenvattende panelen rechts. Dat is wat een blad met grafieken tot een dashboard maakt: de rail geeft de stand, de kolom ernaast de onderbouwing. */ [data-terminal] .layout{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:12px} [data-terminal] .layout > aside{display:grid;gap:12px;align-content:start} /* De inhoudskolom strekt mee met de rail. Zonder dit eindigt het paneel waar zijn grafiek ophoudt en blijft er onder een korte kolom een gat staan zo groot als het verschil met de rail — bij de ratio-pagina zo'n 120px. */ [data-terminal] .layout > :first-child{display:flex;flex-direction:column} [data-terminal] .layout > :first-child > .panel{flex:1 1 auto;display:flex;flex-direction:column} [data-terminal] .layout > :first-child > .panel > .chart-wrap{flex:1 1 auto;min-height:260px} [data-terminal] .layout > :first-child > .panel > .chart-wrap > .chart{height:100%} @media (max-width:1100px){ [data-terminal] .layout{grid-template-columns:minmax(0,1fr)} } /* ── Meter ─────────────────────────────────────────────────────── Halve boog met een waarde erin. Voor alles wat een stand tussen twee uitersten uitdrukt; de pagina tekent de SVG zelf. */ [data-terminal] .gauge-card{display:grid;justify-items:center;padding:14px 14px 13px} [data-terminal] .gauge-card .p-title{justify-content:center} [data-terminal] .gauge-card svg{margin-top:2px} [data-terminal] .gauge-legend{ margin-top:2px;font-size:11.5px;color:var(--muted);text-align:center;line-height:1.5; } [data-terminal] .gauge-legend b{color:var(--text);font-weight:700} /* ── Waardeparen en cellen ───────────────────────────────────────*/ [data-terminal] .bigpair{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:center;padding:14px 12px} [data-terminal] .bigpair .bp-v{font-family:var(--fd);font-weight:800;font-size:19px;font-variant-numeric:tabular-nums} [data-terminal] .bigpair .bp-l{ font-family:var(--fm);font-size:9px;letter-spacing:.1em;text-transform:uppercase; color:var(--faint);margin-top:3px; } [data-terminal] .kv{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;margin-top:11px} [data-terminal] .kv .cell .v{font-family:var(--fd);font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums} [data-terminal] .kv .cell .l{font-family:var(--fm);font-size:9px;color:var(--faint)} /* ── Klikbare rij ──────────────────────────────────────────────── Een regel die naar iets toe leidt. Schuift een tikje op bij hover, zodat duidelijk is dat er iets achter zit. */ [data-terminal] .win-row{ display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%; background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-klein); padding:9px 11px;margin-top:7px;cursor:pointer;font-family:inherit;color:var(--text); transition-property:background-color,background-image,border-color,color,box-shadow,opacity,transform,outline-color;transition-duration:.14s;text-align:left; } [data-terminal] .win-row:first-child{margin-top:2px} @media (hover:hover) and (pointer:fine){ [data-terminal] .win-row:hover{ border-color:var(--accent-bright);background:rgba(0,82,255,.08);transform:translateX(2px); } } [data-terminal] .win-row:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px} [data-terminal] .win-l{font-size:11.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-terminal] .win-per{font-family:var(--fm);font-size:9px;color:var(--faint);flex:0 0 auto} /* Balkje met een stip erop: waar staat deze waarde tussen zijn eigen laagste en hoogste punt ooit. Groen links (goedkoop) naar rood rechts (duur). */ [data-terminal] .winbar{ position:relative;height:3px;border-radius:var(--r-micro);flex:1 1 auto;min-width:34px; background:linear-gradient(90deg,rgba(31,168,148,.30),rgba(255,255,255,.10) 50%,rgba(224,82,95,.30)); } [data-terminal] .winbar i{ position:absolute;top:50%;width:7px;height:7px;border-radius:50%; transform:translate(-50%,-50%);background:currentColor;box-shadow:0 0 7px currentColor; outline:2px solid var(--panel-2); } [data-terminal] .win-note{ margin-top:10px;font-family:var(--fm);font-size:9px;letter-spacing:.1em; text-transform:uppercase;color:var(--faint);line-height:1.5; } /* ── Oordeelpaneel ─────────────────────────────────────────────── Twee vlakken die één naad delen: links het oordeel in woorden, rechts wat het concreet betekent. cot.html en macro.html openden hier allebei mee met een eigen kopie van dezelfde regels; research.html had er geen en opende met een cijfer over zichzelf ("1 van 2"). Eén definitie dus. De kleur komt van de pagina via --hero-accent, niet uit deze laag: elk scherm heeft zijn eigen betekeniskleur (retail-rood op cot, liquiditeits- groen op macro). --hero-glow is de gloed eromheen, standaard uit. LET OP de dagstand: daar worden --green en --red grijs. Het oordeel moet daarom in de WOORDEN staan, niet alleen in de tint. */ [data-terminal] .hero{ display:grid;grid-template-columns:1.25fr 1fr;gap:1px; background:var(--border);border:1px solid var(--border-strong); border-radius:20px;overflow:hidden; box-shadow:0 0 60px var(--hero-glow,transparent); } @media(max-width:780px){[data-terminal] .hero{grid-template-columns:1fr}} [data-terminal] .hero > div{background:var(--panel);padding:26px 28px} /* .kicker en niet .tag: de laag geeft .tag zelf een betekenis (een kleine grijze pil) en twee dingen met dezelfde naam op één blad is precies hoe de drift begon. */ [data-terminal] .hero .kicker{ font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--hero-accent,var(--accent-bright));display:flex;align-items:center;gap:9px; margin-bottom:16px; } [data-terminal] .hero .verdict{ font-family:var(--fd);font-weight:800;font-size:clamp(23px,3vw,32px); letter-spacing:-.02em;line-height:1.08; } [data-terminal] .hero .verdict em{font-style:normal;color:var(--hero-accent,var(--accent-bright))} [data-terminal] .hero .verdict em.tweede{color:var(--hero-accent-2,var(--amber))} [data-terminal] .hero p{color:var(--muted);font-size:14px;margin-top:12px;max-width:44ch} [data-terminal] .hero p b{color:var(--text);font-weight:600} /* De rechterkant: een kop, één groot getal en een paar regels die optellen tot dat getal. Zo blijft zichtbaar waar het oordeel op rust. */ [data-terminal] .hero-kaart{display:flex;flex-direction:column;justify-content:center} [data-terminal] .hero-kaart .st{ font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint); } [data-terminal] .hero-kaart .gv{ font-family:var(--fd);font-weight:800;font-size:34px;letter-spacing:-.02em; line-height:1.1;margin:8px 0 4px;font-variant-numeric:tabular-nums; } [data-terminal] .hero-kaart .rij{ display:flex;justify-content:space-between;gap:14px;font-family:var(--fm);font-size:11.5px; color:var(--muted);padding:7px 0;border-top:1px solid var(--border); } [data-terminal] .hero-kaart .rij b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums} /* ── Kerncijfertegels ──────────────────────────────────────────── Een rij tegels met een accentstreepje links, een groot getal en een peilregel eronder. Anders dan .kpi (die hoort in een rail rechts van een kop): deze tegel draagt zijn eigen peildatum, en juist die regel houdt het scherm eerlijk over hoe vers een cijfer is. auto-fit en geen repeat(4,1fr): research toont twee tegels voor de elf van de tweeëndertig markten zonder CFTC-contract, en een vast viertal liet dan de halve rij leeg staan. Gemeten: 50% van de rij ongebruikt. */ [data-terminal] .tegels{ display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px; } @media(max-width:460px){[data-terminal] .tegels{grid-template-columns:1fr}} [data-terminal] .tile{ background:var(--panel);border:1px solid var(--border);border-radius:var(--r); padding:16px 17px 15px;position:relative;overflow:hidden; } /* --tegel-lijn, niet --accent: de laag zet --accent zelf op [data-terminal], dus var(--accent,) bereikt zijn fallback nooit meer en een tegel zonder eigen kleur zou stilzwijgend blauw worden. */ [data-terminal] .tile::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tegel-lijn,transparent); } [data-terminal] .tile .lbl{ font-family:var(--fm);font-size:10px;letter-spacing:.11em;text-transform:uppercase; color:var(--faint);display:flex;align-items:center;gap:7px; } [data-terminal] .swatch{width:9px;height:9px;border-radius:3px;flex:none} [data-terminal] .tile .big{ font-family:var(--fm);font-weight:600;font-size:25px;letter-spacing:-.01em; margin-top:10px;font-variant-numeric:tabular-nums; } [data-terminal] .tile .big span{font-size:14px;color:var(--muted)} [data-terminal] .tile .sub{ font-family:var(--fm);font-size:10.5px;color:var(--muted);margin-top:7px; font-variant-numeric:tabular-nums;line-height:1.6; } [data-terminal] .tile .peil{ font-family:var(--fm);font-size:9.5px;color:var(--faint);margin-top:8px;padding-top:7px; border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:8px; } [data-terminal] .tile.oud{opacity:.62} [data-terminal] .tile.oud .peil{color:var(--amber)} /* ── Voetregel ─────────────────────────────────────────────────── Het voorbehoud onderaan een onderzoeksscherm. Stond alleen op seasonality. */ [data-terminal] footer.voorbehoud{ margin-top:26px;padding-top:16px;border-top:1px solid var(--border); font-family:var(--fm);font-size:10px;letter-spacing:.06em;color:var(--faint);line-height:1.6; } /* ── De werkbank ───────────────────────────────────────────────── Spring-naar (/ of ⌘K) en de deelknop. De laag hangt onder [data-terminal] zoals de rest, maar de overlay zelf staat op en dus buiten .app -- vandaar dat deze twee regels niet genest zijn onder een paneel. Zie nomad-werkbank.js: het zoeken heeft geen eigen register maar leest de keuzepillen die de pagina toch al tekent. */ [data-terminal] .wb-laag{ position:fixed;inset:0;z-index:120;display:none; background:rgba(3,5,10,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); align-items:flex-start;justify-content:center;padding:14vh 20px 20px; } [data-terminal] .wb-laag.op{display:flex} [data-terminal] .wb-bak{ width:min(560px,100%);background:var(--panel);border:1px solid var(--border-strong); border-radius:var(--r);overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.5); } [data-terminal] .wb-veld{ width:100%;background:transparent;border:0;border-bottom:1px solid var(--border); color:var(--text);font-family:var(--fb);font-size:15px;padding:15px 18px; } [data-terminal] .wb-veld:focus{outline:none} [data-terminal] .wb-veld::placeholder{color:var(--faint)} [data-terminal] .wb-lijst{max-height:46vh;overflow-y:auto;padding:6px} [data-terminal] .wb-rij{ padding:9px 12px;border-radius:var(--r-klein);font-size:13.5px;color:var(--muted);cursor:pointer; } [data-terminal] .wb-rij{display:flex;justify-content:space-between;gap:14px;align-items:baseline} [data-terminal] .wb-rij.op{background:rgba(0,82,255,.16);color:var(--text)} [data-terminal] .wb-groep{ font-family:var(--fm);font-size:9px;letter-spacing:.1em;text-transform:uppercase; color:var(--faint);flex:none; } [data-terminal] .wb-leeg{padding:16px 18px;color:var(--faint);font-size:13px} /* De knoppenstrip in de kopregel. Onderaan rechts in de topline, zodat hij niet concurreert met de titel maar wel op elk blad op dezelfde plek staat. */ [data-terminal] .wb-acties{ display:flex;gap:7px;flex-wrap:wrap;margin-top:12px; } [data-terminal-kop] .topline .wb-acties{width:100%;justify-content:flex-end} @media(max-width:700px){[data-terminal-kop] .topline .wb-acties{justify-content:flex-start}} /* De deelknop leunt op .preset zodat hij dezelfde vorm heeft als elke andere knop op het blad; alleen de vaste breedte is van hem, anders springt de rij als de tekst even "Gekopieerd" wordt. */ [data-terminal] [data-wb-deel]{min-width:104px;justify-content:center} [data-terminal] [data-wb-zoek]{min-width:112px;justify-content:center} @media (prefers-reduced-motion:reduce){ [data-terminal] .wb-laag{backdrop-filter:none;-webkit-backdrop-filter:none} } /* Wijzig je deze laag, dan hoort scripts/terminal-stempelen.mjs --schrijf te draaien: zonder verse stempel blijft een browser een dag lang de oude CSS gebruiken terwijl de HTML wel ververst. Een PostToolUse-hook in ~/.claude/settings.json doet dat automatisch. */