/* ========================================================================== A&V ICT — global theme stylesheet Design tokens + component classes extracted from the /Design mockups. ========================================================================== */ :root { /* Colour system */ --wsc-bg: #F1F3F6; --wsc-surface: #FFFFFF; --wsc-ink: #14161B; --wsc-ink-2: #4E5563; --wsc-ink-3: #8A91A0; --wsc-line: #E3E7ED; --wsc-line-2: #C9D0DA; /* De accenttinten volgen de kleur uit Dashboard, Huisstijl. Staat daar niets, dan gelden de waarden hieronder en verandert er niets aan bestaande sites. */ --wsc-accent: var(--wsc-huisstijl-accent, #FFA934); --wsc-accent-2: var(--wsc-huisstijl-accent-2, #D9791A); --wsc-accent-h: var(--wsc-huisstijl-accent-h, #F89828); --wsc-accent-bg: var(--wsc-huisstijl-accent-bg, #FFF8EF); --wsc-accent-line: var(--wsc-huisstijl-accent-line, #FFE5C2); --wsc-accent-soft: var(--wsc-huisstijl-accent-soft, #FFCE8B); --wsc-blue: #0E6FC5; /* "Hulp op afstand" / TeamViewer — springt eruit naast oranje */ --wsc-blue-h: #0B5CA3; --wsc-pink: #F1C8D3; --wsc-footer-bg: #0F1115; --wsc-footer-2: #14161B; --wsc-footer-ink:#B7BECC; --wsc-footer-ink-3:#8A91A0; /* Type */ --wsc-font-head: 'Archivo', system-ui, sans-serif; --wsc-font-body: 'Inter', system-ui, sans-serif; --wsc-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Rhythm */ --wsc-maxw: 1220px; --wsc-radius: 14px; --wsc-radius-lg: 20px; --wsc-gutter: clamp(18px, 4vw, 40px); --wsc-section-y: clamp(56px, 8vw, 96px); --wsc-shadow: 0 24px 60px rgba(20, 22, 27, .16); --wsc-shadow-sm: 0 8px 22px rgba(255, 169, 52, .34); } /* ---------- Reset-ish base ---------- */ .wsc-theme *, .wsc-theme *::before, .wsc-theme *::after { box-sizing: border-box; } /* The .wsc-theme class sits on a wrapper DIV, not , so the browser's default body margin (8px) was never reset — it inset every full-width band by 8px left/right. Zero it so coloured bands reach the screen edges. */ html, body { margin: 0; } .wsc-theme { margin: 0; font-family: var(--wsc-font-body); color: var(--wsc-ink); background: var(--wsc-bg); -webkit-font-smoothing: antialiased; /* clip (niet hidden): voorkomt horizontaal scrollen bij full-bleed banden zonder een scroll-container te maken — anders breekt de sticky header. */ overflow-x: clip; line-height: 1.6; } .wsc-theme ::selection { background: var(--wsc-accent); color: var(--wsc-ink); } .wsc-theme img { max-width: 100%; display: block; } .wsc-theme a { color: inherit; } /* ---------- Layout helpers ---------- */ .wsc-container { max-width: var(--wsc-maxw); margin-inline: auto; padding-inline: var(--wsc-gutter); } .wsc-section { padding-block: var(--wsc-section-y); } .wsc-section--tight { padding-block: clamp(40px, 6vw, 72px); } /* Full-bleed coloured bands */ .wsc-band { width: 100%; } .wsc-band--white { background: var(--wsc-surface); } .wsc-band--light { background: var(--wsc-bg); } .wsc-band--dark { background: var(--wsc-footer-bg); color: var(--wsc-footer-ink); } /* gelijk aan de footer */ /* Seam line only between two white bands is unnecessary; keep sections clean */ /* Dark band: invert text + cards */ .wsc-band--dark h1, .wsc-band--dark h2, .wsc-band--dark h3, .wsc-band--dark h4 { color: #fff; } .wsc-band--dark p, .wsc-band--dark .wsc-lead { color: var(--wsc-footer-ink); } .wsc-band--dark .wsc-card { background: #1B1E25; border-color: rgba(255,255,255,.08); } .wsc-band--dark .wsc-card p { color: var(--wsc-footer-ink); } .wsc-band--dark .wsc-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #fff; } .wsc-band--dark .wsc-stat__label { color: var(--wsc-footer-ink-3); } /* Multi-column layouts (used by area layout presets + service grids) */ .wsc-cols { display: grid; gap: clamp(20px, 3vw, 34px); } .wsc-cols--2 { grid-template-columns: repeat(2, 1fr); } .wsc-cols--3 { grid-template-columns: repeat(3, 1fr); } .wsc-cols--split { grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(32px, 5vw, 64px); } @media (max-width: 860px) { .wsc-cols--2, .wsc-cols--3, .wsc-cols--split { grid-template-columns: 1fr; } } /* ---------- Typography ---------- */ .wsc-theme h1, .wsc-theme h2, .wsc-theme h3, .wsc-theme h4 { font-family: var(--wsc-font-head); letter-spacing: -.025em; line-height: 1.08; margin: 0 0 .5em; color: var(--wsc-ink); } .wsc-display, .wsc-theme h1 { font-family: var(--wsc-font-head); font-weight: 800; font-size: clamp(34px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -.025em; } .wsc-h2, .wsc-theme h2 { font-weight: 800; font-size: clamp(28px, 3.8vw, 42px); } .wsc-h3, .wsc-theme h3 { font-weight: 700; font-size: clamp(19px, 2vw, 24px); letter-spacing: -.015em; } .wsc-theme p { margin: 0 0 1.1em; color: var(--wsc-ink-2); } .wsc-lead { display: block; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.62; color: var(--wsc-ink-2); max-width: 60ch; } .wsc-eyebrow { display: block; font-family: var(--wsc-font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--wsc-accent-2); margin-bottom: 12px; } .wsc-accent { color: var(--wsc-accent-2); } /* Orange highlight inside headings (from *text* convention) */ .wsc-hl { color: var(--wsc-accent-2); } /* Section heading group */ .wsc-section-head { max-width: 680px; margin-bottom: 30px; } .wsc-section-head .wsc-lead { margin-bottom: 0; } /* Media / image slot */ .wsc-media { position: relative; z-index: 1; border-radius: var(--wsc-radius-lg); overflow: hidden; box-shadow: var(--wsc-shadow); } .wsc-media__img { display: block; width: 100%; height: 100%; object-fit: cover; } .wsc-media--empty { min-height: clamp(300px, 40vw, 440px); display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--wsc-ink-3); background: #FBF3E7; border: 2px dashed rgba(217,121,26,.4); box-shadow: none; } .wsc-media__icon { font-size: 30px; opacity: .7; } /* ---------- Buttons ---------- */ .wsc-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--wsc-font-body); font-size: 16px; font-weight: 600; text-decoration: none; padding: 16px 28px; border-radius: 14px; border: 1px solid transparent; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; line-height: 1; } /* Double-class selectors (0,2,0) so the button text colour beats the generic `.wsc-theme a { color: inherit }` link rule (0,1,1). */ .wsc-btn.wsc-btn--primary { background: var(--wsc-accent); color: #fff; box-shadow: var(--wsc-shadow-sm); } .wsc-btn.wsc-btn--primary:hover { background: var(--wsc-accent-h); transform: translateY(-1px); } .wsc-btn.wsc-btn--ghost { background: var(--wsc-surface); color: var(--wsc-ink); border-color: var(--wsc-line); } .wsc-btn.wsc-btn--ghost:hover { border-color: var(--wsc-ink); } /* Prominente "Hulp op afstand"-knop (TeamViewer) — moet er echt uitspringen */ .wsc-btn.wsc-btn--remote { background: var(--wsc-blue); color: #fff; box-shadow: 0 8px 22px rgba(14, 111, 197, .26); } .wsc-btn.wsc-btn--remote:hover { background: var(--wsc-blue-h); transform: translateY(-1px); } .wsc-btn-row { display: flex; flex-wrap: wrap; gap: 13px; } /* Icon inside a button: sized to the text and in the button's own colour. */ .wsc-btn .wsc-mark { width: 1.2em; height: 1.2em; --mc: currentColor; } .wsc-btn .wsc-mark--squares span { background: currentColor; } /* ---------- Cards ---------- */ .wsc-card { background: var(--wsc-surface); border: 1px solid var(--wsc-line); border-radius: var(--wsc-radius); padding: clamp(20px, 2.4vw, 28px); } .wsc-card__eyebrow, .wsc-card .wsc-dot { width: 11px; height: 11px; display: inline-block; border-radius: 3px; background: var(--wsc-accent); } /* ---------- Trust / partner bar ---------- */ .wsc-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; justify-content: space-between; padding-block: 26px; } .wsc-trust__label { font-family: var(--wsc-font-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--wsc-ink-3); flex: none; } .wsc-trust__items { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; flex: 1; justify-content: center; } .wsc-chip { font-family: var(--wsc-font-head); font-weight: 700; font-size: 13.5px; color: var(--wsc-ink-2); border: 1px solid var(--wsc-line); border-radius: 8px; padding: 8px 13px; background: #F5F6F9; } /* ========================================================================== Prose (single pages / rich content blocks) ========================================================================== */ .wsc-prose { max-width: 780px; } /* De breedte-instelling van het tekstblok. Smal is de maat die er altijd al was; middel en volledig zijn er voor koppen die anders over te veel regels vallen. */ .wsc-prose--smal { max-width: 820px; } .wsc-prose--middel { max-width: 1080px; } .wsc-prose--vol { max-width: none; } /* De breedte van de inhoud onder de kop, los van de kolom hierboven. Zonder een van deze klassen verandert er niets: het blok zet ze alleen als de redacteur een keuze maakt, dus een bestaande pagina blijft staan zoals hij stond. De klasse staat er twee keer in om op specificiteit te winnen van een thema dat lopende tekst standaard op een leesbreedte zet; anders zou dat thema de keuze van de redacteur overrulen omdat zijn stylesheet later laadt. */ .wsc-prose--tekst-smal.wsc-prose--tekst-smal > p, .wsc-prose--tekst-smal.wsc-prose--tekst-smal > ul, .wsc-prose--tekst-smal.wsc-prose--tekst-smal > ol, .wsc-prose--tekst-smal.wsc-prose--tekst-smal > h3, .wsc-prose--tekst-smal.wsc-prose--tekst-smal > h4, .wsc-prose--tekst-smal.wsc-prose--tekst-smal > blockquote { max-width: 68ch; } .wsc-prose--tekst-middel.wsc-prose--tekst-middel > p, .wsc-prose--tekst-middel.wsc-prose--tekst-middel > ul, .wsc-prose--tekst-middel.wsc-prose--tekst-middel > ol, .wsc-prose--tekst-middel.wsc-prose--tekst-middel > h3, .wsc-prose--tekst-middel.wsc-prose--tekst-middel > h4, .wsc-prose--tekst-middel.wsc-prose--tekst-middel > blockquote { max-width: 88ch; } .wsc-prose--tekst-breed.wsc-prose--tekst-breed > p, .wsc-prose--tekst-breed.wsc-prose--tekst-breed > ul, .wsc-prose--tekst-breed.wsc-prose--tekst-breed > ol, .wsc-prose--tekst-breed.wsc-prose--tekst-breed > h3, .wsc-prose--tekst-breed.wsc-prose--tekst-breed > h4, .wsc-prose--tekst-breed.wsc-prose--tekst-breed > blockquote { max-width: 110ch; } .wsc-prose--tekst-vol.wsc-prose--tekst-vol > p, .wsc-prose--tekst-vol.wsc-prose--tekst-vol > ul, .wsc-prose--tekst-vol.wsc-prose--tekst-vol > ol, .wsc-prose--tekst-vol.wsc-prose--tekst-vol > h3, .wsc-prose--tekst-vol.wsc-prose--tekst-vol > h4, .wsc-prose--tekst-vol.wsc-prose--tekst-vol > blockquote { max-width: none; } .wsc-prose h1 { margin-top: 0; } .wsc-prose img { border-radius: var(--wsc-radius); margin: 1.5em 0; } .wsc-prose ul, .wsc-prose ol { color: var(--wsc-ink-2); line-height: 1.7; } /* Concrete edit-mode niceties */ .wsc-theme .ccm-page { min-height: 40px; } /* ========================================================================== Dark-band overrides — placed last so source order wins over base typography ========================================================================== */ .wsc-band--dark h1, .wsc-band--dark h2, .wsc-band--dark h3, .wsc-band--dark h4, .wsc-band--dark .wsc-display, .wsc-band--dark .wsc-h2, .wsc-band--dark .wsc-h3 { color: #fff; } .wsc-band--dark p, .wsc-band--dark .wsc-lead, .wsc-band--dark li { color: var(--wsc-footer-ink); } .wsc-band--dark .wsc-card { background: #1B1E25; border-color: rgba(255,255,255,.08); } .wsc-band--dark .wsc-card p { color: var(--wsc-footer-ink); } .wsc-band--dark .wsc-eyebrow { color: var(--wsc-accent); } .wsc-band--dark .wsc-stat__value { color: #fff; } .wsc-band--dark .wsc-stat__label { color: var(--wsc-footer-ink-3); } .wsc-band--dark .wsc-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); } .wsc-band--dark .wsc-btn--ghost:hover { border-color: #fff; } /* ========================================================================== Shared grid-carousel — circular arrows + hidden scrollbar. Used by wsc_cards (carousel layout) and wsc_references (testimonials) and any future wsc_* carousel. Behaviour lives in js/carousel.js. ========================================================================== */ /* Hide the native scrollbar on every carousel track (still swipe/scrollable) */ .wsc-cards-track, .wsc-ref-track { scrollbar-width: none; -ms-overflow-style: none; } .wsc-cards-track::-webkit-scrollbar, .wsc-ref-track::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Circular prev/next arrows (defined here so every block shares them) */ .wsc-cards__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--wsc-line); background: #fff; color: var(--wsc-ink); font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(20,22,27,.12); transition: background .15s, opacity .15s, transform .15s; } .wsc-cards__arrow:hover { background: var(--wsc-accent); } .wsc-cards__arrow--prev { left: -8px; } .wsc-cards__arrow--next { right: -8px; } .wsc-cards__arrow[disabled] { opacity: .35; cursor: default; } .wsc-band--dark .wsc-cards__arrow { background: #1B1E25; border-color: rgba(255,255,255,.14); color: #fff; } /* When there is nothing to scroll, hide the arrows entirely (JS adds the class) */ .wsc-carousel--static [data-wsc-prev], .wsc-carousel--static [data-wsc-next] { display: none; } /* ---------- Shared brand-mark (Wsc\Core\Mark::render) ---------- */ .wsc-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--mc, var(--wsc-accent)); flex: none; } .wsc-mark svg { width: 100%; height: 100%; display: block; } .wsc-mark--img img { width: 100%; height: 100%; object-fit: contain; } /* Uploaded SVG tinted to the chosen colour (--mc) via a mask. */ .wsc-mark--mask { background-color: var(--mc, var(--wsc-accent)); -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; } .wsc-mark--squares span { position: absolute; background: currentColor; } .wsc-mark--squares span:nth-child(1) { top: 0; right: 0; width: 11px; height: 11px; } .wsc-mark--squares span:nth-child(2) { top: 12px; right: 12px; width: 9px; height: 9px; opacity: .45; } .wsc-mark--squares span:nth-child(3) { top: 12px; right: 0; width: 9px; height: 9px; } /* ========================================================================== Mobile refinements (phones ≤600px) — stack, shrink, calm. Nothing may force a horizontal page scroll. ========================================================================== */ @media (max-width: 600px) { /* Buttons: full-width and stacked so long labels never overflow */ .wsc-btn-row { flex-direction: column; align-items: stretch; } .wsc-btn-row > .wsc-btn { width: 100%; justify-content: center; } /* Calmer heading sizes on small screens */ .wsc-display, .wsc-theme h1 { font-size: clamp(26px, 7.4vw, 33px); } .wsc-h2, .wsc-theme h2 { font-size: clamp(22px, 6vw, 27px); } .wsc-h3, .wsc-theme h3 { font-size: 18px; } /* Long compound words / URLs must never break the layout */ .wsc-theme h1, .wsc-theme h2, .wsc-theme h3, .wsc-card p, .wsc-lead, .wsc-service-card h3 { overflow-wrap: break-word; } /* Safety net against a sideways scroll from any wide child */ .wsc-band { overflow-x: clip; } }