/* ========================================================================== GASTO · support.gasto.io — de handleiding-skin Geport uit docs/design/gasto/uitgepakt.html. De inline styles uit het ontwerp zijn hier gehoist naar klassen met het prefix .g-. Tokens gelijk aan trunk/src/themes/gasto/css/gasto-tokens.css, plus de zachte notitie- en code-tokens die het ontwerp toevoegt. ========================================================================== */ :root { --gasto-primary:#D9552F; --gasto-on-primary:#FFFDFA; --gasto-warning:#C4892B; --gasto-success:#2E5D46; --gasto-bg:#F1E9DC; --gasto-surface:#FFFDFA; --gasto-surface-2:#F7F1E8; --gasto-text:#2A231C; --gasto-muted:#8C7F6E; --gasto-faint:#B4A793; --gasto-border:#E8DDCC; --gasto-danger:#A82F27; --gasto-info:#3C6E8F; --gasto-tip-bg:#E8EFE9; --gasto-tip-border:#C3D5C7; --gasto-warning-bg:#FAF0DA; --gasto-warning-border:#EAD6A8; --gasto-info-bg:#E6EEF4; --gasto-info-border:#C3D6E2; --gasto-danger-bg:#F8E6E2; --gasto-danger-border:#E7C3BB; --gasto-code-bg:#F3EDE3; --gasto-code-ink:#3C6E8F; --gasto-shadow:0 1px 2px rgba(42,35,28,.05), 0 8px 24px -16px rgba(42,35,28,.25); --gasto-radius-sm:8px; --gasto-radius-md:11px; --gasto-radius-lg:16px; --gasto-radius-xl:20px; --gasto-font-display:'Bricolage Grotesque', system-ui, sans-serif; --gasto-font-body:'Instrument Sans', system-ui, sans-serif; --gasto-font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* Bootstrap 5.3 gebruikt data-bs-theme; het ontwerp gebruikt data-theme. We zetten ze allebei op , zodat ook Bootstrap-componenten meeflippen. */ [data-theme="dark"], [data-bs-theme="dark"] { --gasto-primary:#E8734B; --gasto-on-primary:#1A1512; --gasto-warning:#D9A344; --gasto-success:#5E9B7C; --gasto-bg:#191411; --gasto-surface:#221C17; --gasto-surface-2:#2A231D; --gasto-text:#F2EAE0; --gasto-muted:#A79A88; --gasto-faint:#7C7062; --gasto-border:#3A3029; --gasto-danger:#E4796C; --gasto-info:#7FB0CE; --gasto-tip-bg:#1F2A23; --gasto-tip-border:#33463A; --gasto-warning-bg:#2C2418; --gasto-warning-border:#4A3B21; --gasto-info-bg:#1C262C; --gasto-info-border:#2F4450; --gasto-danger-bg:#2E1D1A; --gasto-danger-border:#4B2A25; --gasto-code-bg:#2A231D; --gasto-code-ink:#7FB0CE; --gasto-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.6); } /* Bootstrap-bridge: dezelfde afspraak als in het adminpaneel, zodat Bootstrap-componenten (dropdowns, collapse) in de huisstijl staan. */ :root, [data-bs-theme="dark"] { --bs-primary: var(--gasto-primary); --bs-body-bg: var(--gasto-bg); --bs-body-color: var(--gasto-text); --bs-secondary-color: var(--gasto-muted); --bs-tertiary-bg: var(--gasto-surface-2); --bs-secondary-bg: var(--gasto-surface); --bs-border-color: var(--gasto-border); --bs-success: var(--gasto-success); --bs-warning: var(--gasto-warning); --bs-danger: var(--gasto-danger); --bs-info: var(--gasto-info); --bs-link-color: var(--gasto-primary); --bs-link-hover-color: var(--gasto-warning); --bs-border-radius: var(--gasto-radius-md); --bs-border-radius-lg: var(--gasto-radius-lg); --bs-border-radius-sm: var(--gasto-radius-sm); } /* --- basis ---------------------------------------------------------------- */ * { box-sizing: border-box; } body.g-body { margin: 0; background: var(--gasto-bg); color: var(--gasto-text); font-family: var(--gasto-font-body); -webkit-font-smoothing: antialiased; } .g-body a { color: var(--gasto-primary); text-decoration: none; } .g-body a:hover { color: var(--gasto-warning); text-decoration: underline; } .g-mono { font-family: var(--gasto-font-mono); } /* --- shell ---------------------------------------------------------------- */ .g-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; } .g-col { display: flex; flex-direction: column; min-width: 0; } .g-sidebar { background: var(--gasto-surface); border-right: 1px solid var(--gasto-border); display: flex; flex-direction: column; gap: 4px; padding: 20px 0; overflow-y: auto; } .g-brand { display: flex; align-items: center; gap: 10px; padding: 0 20px 18px; } .g-brand:hover { text-decoration: none; } .g-brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--gasto-primary); display: grid; place-items: center; color: var(--gasto-on-primary); font-family: var(--gasto-font-display); font-weight: 800; font-size: 17px; } .g-brand-name { display: flex; flex-direction: column; line-height: 1.1; } .g-brand-name b { font-family: var(--gasto-font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--gasto-text); } .g-brand-name span { font-size: 11px; color: var(--gasto-muted); letter-spacing: .06em; text-transform: uppercase; } .g-searchbtn { margin: 0 16px 18px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--gasto-border); background: var(--gasto-surface-2); border-radius: var(--gasto-radius-md); color: var(--gasto-muted); font-family: inherit; font-size: 13.5px; cursor: pointer; text-align: left; width: calc(100% - 32px); } .g-searchbtn span:first-of-type { flex: 1; } .g-kbd { font-family: var(--gasto-font-mono); font-size: 10.5px; border: 1px solid var(--gasto-border); border-radius: 5px; padding: 1px 5px; background: var(--gasto-surface); } .g-navgroup { padding: 16px 20px 6px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--gasto-faint); font-weight: 600; } .g-navgroup:first-of-type { padding-top: 0; } .g-nav { display: flex; align-items: center; gap: 8px; padding: 8px 20px; font-size: 14px; color: var(--gasto-text); text-decoration: none; } .g-nav:hover { background: var(--gasto-surface-2); color: var(--gasto-text); text-decoration: none; } .g-nav.is-on { background: var(--gasto-surface-2); color: var(--gasto-primary); font-weight: 600; box-shadow: inset 3px 0 0 var(--gasto-primary); } .g-nav .g-dot { width: 6px; height: 6px; border-radius: 2px; background: var(--gasto-primary); flex: none; } .g-nav-sub { padding-left: 34px; font-size: 13.5px; color: var(--gasto-muted); } /* --- topbar --------------------------------------------------------------- */ .g-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: var(--gasto-surface); border-bottom: 1px solid var(--gasto-border); } .g-burger { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--gasto-border); background: var(--gasto-surface-2); border-radius: 10px; color: var(--gasto-text); cursor: pointer; } .g-crumbs { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; font-size: 13px; color: var(--gasto-muted); } .g-crumbs a { color: var(--gasto-muted); } .g-crumbs a:hover { color: var(--gasto-text); } .g-crumbs .sep { color: var(--gasto-faint); } .g-crumbs .cur { color: var(--gasto-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .g-spacer { flex: 1; } .g-topsearch { display: flex; align-items: center; gap: 8px; width: 280px; padding: 8px 12px; border: 1px solid var(--gasto-border); background: var(--gasto-surface-2); border-radius: var(--gasto-radius-md); color: var(--gasto-muted); font-family: inherit; font-size: 13px; cursor: pointer; } .g-iconbtn { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 38px; height: 38px; padding: 0 11px; border: 1px solid var(--gasto-border); background: var(--gasto-surface); border-radius: var(--gasto-radius-md); color: var(--gasto-text); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .g-iconbtn:hover { border-color: var(--gasto-faint); } .g-langwrap { position: relative; } .g-langmenu { position: absolute; right: 0; top: calc(100% + 8px); width: 190px; background: var(--gasto-surface); border: 1px solid var(--gasto-border); border-radius: 14px; box-shadow: var(--gasto-shadow); padding: 6px; display: none; flex-direction: column; z-index: 40; } .g-langwrap.is-open .g-langmenu { display: flex; } .g-langmenu a { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: var(--gasto-radius-sm); font-size: 13.5px; color: var(--gasto-text); } .g-langmenu a:hover { background: var(--gasto-surface-2); text-decoration: none; } .g-langmenu a.is-on { background: var(--gasto-surface-2); color: var(--gasto-primary); font-weight: 600; } .g-langmenu a span { font-family: var(--gasto-font-mono); font-size: 11px; color: var(--gasto-faint); } /* --- content -------------------------------------------------------------- */ .g-pad { padding: 34px 28px 88px; } .g-wrap { width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; } .g-wrap-wide { max-width: 1120px; } .g-h1 { margin: 0; font-family: var(--gasto-font-display); font-weight: 700; font-size: 32px; letter-spacing: -.02em; } .g-lede { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--gasto-muted); max-width: 60ch; } .g-eyebrow { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--gasto-faint); font-weight: 600; } .g-badges { display: flex; flex-wrap: wrap; gap: 8px; } .g-badge { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--gasto-surface-2); border: 1px solid var(--gasto-border); color: var(--gasto-text); } .g-badge--easy { background: var(--gasto-tip-bg); border-color: var(--gasto-tip-border); color: var(--gasto-success); } .g-badge--medium { background: var(--gasto-warning-bg); border-color: var(--gasto-warning-border); color: var(--gasto-warning); } .g-badge--hard { background: var(--gasto-danger-bg); border-color: var(--gasto-danger-border); color: var(--gasto-danger); } /* Waar-in-de-applicatie + benodigde modules */ .g-info { display: flex; flex-wrap: wrap; gap: 10px 22px; background: var(--gasto-surface); border: 1px solid var(--gasto-border); border-radius: var(--gasto-radius-md); padding: 12px 16px; font-size: 13.5px; } .g-info dt { color: var(--gasto-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; margin: 0 0 3px; } .g-info dd { margin: 0; } .g-info .g-path { font-family: var(--gasto-font-mono); font-size: 12.5px; color: var(--gasto-text); } /* Notities — kleur EN vorm, zodat ze in grijstinten en dark uit elkaar blijven */ .g-note { display: flex; gap: 13px; border-radius: var(--gasto-radius-md); padding: 14px 16px; border: 1px solid var(--gasto-info-border); background: var(--gasto-info-bg); } .g-note + .g-note { margin-top: 10px; } .g-note svg { flex: none; margin-top: 1px; } .g-note-body { display: flex; flex-direction: column; gap: 3px; } .g-note-body strong { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--gasto-info); } .g-note-body span { font-size: 15px; line-height: 1.6; } .g-note--tip { border-color: var(--gasto-tip-border); background: var(--gasto-tip-bg); } .g-note--tip .g-note-body strong { color: var(--gasto-success); } .g-note--warning { border-color: var(--gasto-warning-border); background: var(--gasto-warning-bg); } .g-note--warning .g-note-body strong { color: var(--gasto-warning); } .g-note--danger { border-color: var(--gasto-danger-border); background: var(--gasto-danger-bg); } .g-note--danger .g-note-body strong { color: var(--gasto-danger); } /* Stappen */ .g-steps { display: flex; flex-direction: column; gap: 14px; counter-reset: gstep; } .g-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; background: var(--gasto-surface); border: 1px solid var(--gasto-border); border-radius: var(--gasto-radius-lg); padding: 16px 18px; } .g-step-n { width: 28px; height: 28px; border-radius: 50%; background: var(--gasto-primary); color: var(--gasto-on-primary); display: grid; place-items: center; font-family: var(--gasto-font-mono); font-size: 13px; font-weight: 600; } .g-step h3 { margin: 2px 0 6px; font-family: var(--gasto-font-display); font-weight: 700; font-size: 17px; } .g-step-body { font-size: 15px; line-height: 1.65; } .g-step-body > *:last-child { margin-bottom: 0; } /* Tegels (categorieblokken) */ .g-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .g-tiles3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-tile { display: flex; flex-direction: column; gap: 6px; background: var(--gasto-surface); border: 1px solid var(--gasto-border); border-radius: var(--gasto-radius-lg); padding: 18px 20px; transition: border-color .15s ease, transform .15s ease; } .g-tile:hover { border-color: var(--gasto-primary); transform: translateY(-2px); text-decoration: none; } .g-tile h3 { margin: 0; font-family: var(--gasto-font-display); font-weight: 700; font-size: 17px; color: var(--gasto-text); } .g-tile p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--gasto-muted); } .g-tile--hero { grid-column: 1 / -1; background: var(--gasto-surface); border-left: 3px solid var(--gasto-primary); } .g-tile--hero h3 { font-size: 21px; } /* De body uit de editor */ .g-prose { font-size: 16px; line-height: 1.7; } .g-prose > *:first-child { margin-top: 0; } .g-prose h2 { font-family: var(--gasto-font-display); font-weight: 700; font-size: 23px; letter-spacing: -.01em; margin: 32px 0 10px; } .g-prose h3 { font-family: var(--gasto-font-display); font-weight: 700; font-size: 18px; margin: 26px 0 8px; } .g-prose h4 { font-weight: 600; font-size: 16px; margin: 22px 0 6px; } .g-prose p { margin: 0 0 14px; } .g-prose ul, .g-prose ol { margin: 0 0 14px; padding-left: 22px; } .g-prose li { margin: 0 0 6px; } .g-prose img { max-width: 100%; height: auto; border-radius: var(--gasto-radius-md); border: 1px solid var(--gasto-border); } .g-prose hr { border: 0; border-top: 1px solid var(--gasto-border); margin: 26px 0; } .g-prose blockquote { margin: 0 0 14px; padding: 10px 16px; border-left: 3px solid var(--gasto-border); color: var(--gasto-muted); } .g-prose code { font-family: var(--gasto-font-mono); font-size: .875em; background: var(--gasto-code-bg); color: var(--gasto-code-ink); padding: 1px 5px; border-radius: 5px; } .g-prose pre { background: var(--gasto-code-bg); border: 1px solid var(--gasto-border); border-radius: var(--gasto-radius-md); padding: 14px 16px; overflow-x: auto; margin: 0 0 16px; } .g-prose pre code { background: none; padding: 0; color: inherit; } /* De rechtsleutels in lopende tekst staan als inline style #0b6bcb in de body-HTML. Op crème leest dat blauw als vreemd; hier naar de koele Gasto-info-kleur. */ .g-prose span[style*="0b6bcb"] { color: var(--gasto-info) !important; font-family: var(--gasto-font-mono); } /* Tabellen */ .g-prose table, .g-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0 0 16px; background: var(--gasto-surface); border: 1px solid var(--gasto-border); border-radius: var(--gasto-radius-md); overflow: hidden; } .g-prose th, .g-table th { text-align: left; font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--gasto-faint); background: var(--gasto-surface-2); padding: 10px 14px; border-bottom: 1px solid var(--gasto-border); } .g-prose td, .g-table td { padding: 10px 14px; border-bottom: 1px solid var(--gasto-border); vertical-align: top; } .g-prose tr:last-child td, .g-table tr:last-child td { border-bottom: 0; } .g-prose tbody tr:hover, .g-table tbody tr:hover { background: var(--gasto-surface-2); } .g-scroll { overflow-x: auto; } /* Gerelateerde rechten / functionele pagina's */ .g-related { background: var(--gasto-surface); border: 1px solid var(--gasto-border); border-radius: var(--gasto-radius-lg); padding: 16px 20px; } .g-related h2 { margin: 0 0 10px; font-family: var(--gasto-font-display); font-weight: 700; font-size: 16px; } .g-related ul { margin: 0; padding-left: 18px; font-size: 14.5px; } .g-related li { margin: 0 0 5px; } .g-related .g-key { font-family: var(--gasto-font-mono); color: var(--gasto-info); } /* Vorige/volgende */ .g-pager { display: flex; justify-content: space-between; gap: 14px; } .g-pager a { flex: 1; display: flex; flex-direction: column; gap: 3px; background: var(--gasto-surface); border: 1px solid var(--gasto-border); border-radius: var(--gasto-radius-md); padding: 12px 16px; font-size: 14.5px; color: var(--gasto-text); } .g-pager a:hover { border-color: var(--gasto-primary); text-decoration: none; } .g-pager a.next { text-align: right; } .g-pager span { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--gasto-faint); font-weight: 600; } /* Zoekresultaten */ .g-hit { display: block; background: var(--gasto-surface); border: 1px solid var(--gasto-border); border-radius: var(--gasto-radius-md); padding: 14px 18px; } .g-hit + .g-hit { margin-top: 10px; } .g-hit:hover { border-color: var(--gasto-primary); text-decoration: none; } .g-hit h3 { margin: 0 0 4px; font-family: var(--gasto-font-display); font-weight: 700; font-size: 16px; color: var(--gasto-text); } .g-hit p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--gasto-muted); } .g-hit em { background: var(--gasto-warning-bg); font-style: normal; border-radius: 3px; padding: 0 2px; } /* 404 */ .g-empty { text-align: center; padding: 60px 20px; } .g-empty .g-h1 { margin-bottom: 10px; } /* --- responsive ----------------------------------------------------------- */ @media (max-width: 900px) { .g-shell { grid-template-columns: 1fr; } .g-sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: 280px; transform: translateX(-100%); transition: transform .22s ease; } .g-sidebar.is-open { transform: translateX(0); } .g-burger { display: inline-flex; } .g-hidemob { display: none !important; } .g-tiles, .g-tiles3 { grid-template-columns: 1fr; } .g-pad { padding: 20px 16px 64px; } .g-pager { flex-direction: column; } .g-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 35; } } @media print { .g-sidebar, .g-top { display: none; } .g-shell { grid-template-columns: 1fr; } } /* --- de ingebedde API v2-verkenner ---------------------------------------- */ /* De wrapper in de body gebruikt de full-bleed-truc `margin-left:calc(50% - 50vw)` met `width:100vw`. Die rekent met het midden van het VENSTER; in deze shell begint de contentkolom pas na de zijbalk van 272px, dus schoof het kader naar links en liep het rechts over. Hier terug naar de kolom zelf. Inline styles, dus !important. */ .g-wrap-full { max-width: none; } .g-wrap-full .g-prose { max-width: none; } [data-apiref-versions] { margin-left: 0 !important; width: 100% !important; } [data-apiref-versions] iframe { /* topbar is 12px padding + 38px knop + 12px + 1px rand ≈ 63px; plus de kop erboven */ height: calc(100vh - 220px) !important; min-height: 560px !important; border: 1px solid var(--gasto-border) !important; border-radius: var(--gasto-radius-md); background: var(--gasto-surface); }