/* ═══════════════════════════════════════════════════════════════ ORJ CTA-systeem — ENIGE bron voor knoppen, sitewide. Regels en onderbouwing: ORJ-CTA-SYSTEM.md (bindend). Vier varianten: .orj-cta (primair solid) · .orj-cta--outline (rustende primair) · .orj-cta--ghost (secundair) · .orj-textlink (tekstlink met pijl). Drie maten: sm 40 · md 48 · lg 56. ═══════════════════════════════════════════════════════════════ */ /* ── Inter — zelf gehost (AVG: geen extern font-CDN) ───────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); } :root { /* B-041 (v2.7.0, referentiemaat vlucht-vertraagd.nl, gemeten): zand #fdf4ea → #fbf8f3, zand-donker #f9e6cf → #fceed8, oranje #f36b12 → #e37332. */ --orj-zand: #fbf8f3; --orj-zand-donker: #fceed8; --orj-paper: #f7f1e8; --orj-mint-donker: #d7ebe3; /* paper #fbf8f2 → #f7f1e8 (B-048): was na B-041 gelijk aan zand */ --orj-paper-donker: #f0e7d8; /* B-076: hover van een crème kaart (vlak verdonkeren, §3); tussen paper en de haarlijn #e5dccc */ --orj-container: 1263px; /* B-037: inhoud 1215 (1263 − 2 × 24 paginapadding), was 1200/1152 */ --orj-cta: #e37332; /* B-041 (was #f36b12, B-030): wit erop 3,1:1 — het AA-hiaat van B-030 blijft */ --orj-cta-hover: #cf6226; /* hover: verdonkeren, niets anders */ --orj-cta-text: #c4520a; /* B-010: 4,6:1 op wit — tekstlinks; de header-CTA gebruikt sinds B-038 --orj-cta */ --orj-cta-active: #bd581f; /* B-029: ingedrukt, één tint onder hover */ --orj-green: #269c74; --orj-green-dark: #1b6e52; --orj-mint: #ebf5f1; --orj-ink: #111827; --orj-muted: #6b7280; --orj-radius: 8px; /* B-025 (v2.6.0, was 14 = B-008): knoppen én invoervelden, huisstijlfamilie */ --orj-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* ORJ-streep — tempo (§14, vastgesteld op richtlijnen 2026-09-12). Eén beweging bij het laden, sitewide één tempo (hero én latere sectiekoppen). Duur 400 ms = bovengrens NN/g (100–400) en token in Carbon (slow-01) en Material (medium4); curve = entrance/decelerate (Carbon expressive) — de curve voor iets dat verschijnt; wacht 600 ms = oog op regel 2 bij de start, klaar op 1,0 s (NN/g-grens). */ --orj-streep-wacht: .6s; /* B-022 */ --orj-streep-duur: .4s; /* B-022 */ --orj-streep-curve: cubic-bezier(0, 0, .3, 1); /* B-022 */ /* Schaduw — zwevend (B-066, §2c): voor een kaart die over een vlakgrens hangt (USP-kaart). Drie lagen, één lichtbron recht boven, tint ink: 1 rand — rondom, zonder verschuiving: tekent de bovenrand op het zandvlak; 2 kern — de aanzet direct onder de kaart; 3 lift — de zachte val; negatieve spreiding houdt hem onder de kaart. Gemeten (1294 · DPR 2): bovenrand 8 grijswaarden (was 4), zijkant 20 (was 12), onder 35 · 21 · 12 op 0,5 · 8 · 20 px (was 19 · 15 · 9), bereik 51 px (was 44). Nooit op knoppen (§9). */ --orj-schaduw-zwevend: 0 0 3px rgba(17, 24, 39, .04), 0 6px 14px -4px rgba(17, 24, 39, .05), 0 18px 40px -4px rgba(17, 24, 39, .13); } /* ── Maten (B-024 · B-040, v2.7.0, ORJ-CTA-SYSTEM.md §4) ───────── sm 40 · 14/600 · 18 · rand 2 header (outline → solid), compacte contexten md 48 · 16/600 · 24 · rand 1 kaarten, formulieren, secties (basis) lg 68 · 18/600 · 40 · rand 1 · radius 6 hero en afsluitende sectie — alleen daar De hiërarchie zit in het verschil: header sm naast hero lg, exact de referentie vlucht-vertraagd (40 naast 68, gemeten). Nooit lg buiten de hero. Rand: sm 2 px (referentie), md/lg 1 px; de solid heeft dezelfde randbreedte in de vulkleur, zodat de header-swap niet verspringt. Gewicht 600, nooit 700 (Carbon 400, Material 500). */ .orj-cta, .orj-cta:visited { box-sizing: border-box; /* hoogte is inclusief rand, ook buiten .orj-hdr/.orj-sec */ display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: 48px; /* !important: de header-reset (.orj-hdr *{padding:0}) heeft gelijke specificiteit en laadt later — zonder !important wint de reset en staat de tekst tegen de knoprand (bug t/m v1.0.1). Het systeem- bestand verdedigt zijn kritieke regels zelf, ook tegen Pro. */ padding: 0 24px !important; background: var(--orj-cta); color: #fff !important; border: 1px solid var(--orj-cta); border-radius: var(--orj-radius) !important; font-family: var(--orj-font) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease; box-shadow: none !important; /* geen gloed/schaduw (verbodenlijst) */ } .orj-cta:hover { background: var(--orj-cta-hover); border-color: var(--orj-cta-hover); color: #fff !important; } /* Ingedrukt: 0 ms, één tint donkerder. NN/g: na jaren flat design leunen gebruikers op feedback ná de klik, en die moet binnen 0,1 s komen. */ .orj-cta:active { background: var(--orj-cta-active); border-color: var(--orj-cta-active); transition: none; } /* ── Maten ─────────────────────────────────────────────────── */ .orj-cta--lg { height: 68px; padding: 0 40px !important; font-size: 18px !important; border-radius: 6px !important; } /* B-040: 68/40/r6 (was 56/36/r8) */ .orj-cta--sm { height: 40px; padding: 0 18px !important; font-size: 14px !important; gap: 6px; border-width: 2px; } /* B-038: rand 2 px (was 1) */ .orj-cta--vol { width: 100%; } /* ── Pijl: altijd rechts, schuift 3px bij hover/focus. Optische compensatie: de open pijlvorm oogt als extra witruimte rechts, daarom −4px op de rechterkant. ────────── */ .orj-arrow { display: inline-flex; transition: transform .2s ease; } .orj-arrow svg { display: block; } .orj-cta .orj-arrow { margin-right: -4px; } .orj-cta--sm .orj-arrow svg { width: 14px; height: 14px; } .orj-cta:hover .orj-arrow, .orj-cta:focus-visible .orj-arrow, .orj-textlink:hover .orj-arrow, .orj-textlink:focus-visible .orj-arrow { transform: translateX(3px); } /* ── Rustende primair (outline oranje, B-027 · B-038) — alleen naast een zichtbare solid primair (swap-gedrag header). Label in de knopkleur zelf (referentie, gemeten), 3,1:1 — bewust geaccepteerd in B-038. ── */ .orj-cta--outline, .orj-cta--outline:visited { background: #fff; color: var(--orj-cta) !important; border-color: var(--orj-cta); } .orj-cta--outline:hover { background: #fff4ec; border-color: var(--orj-cta); color: var(--orj-cta) !important; } .orj-cta--outline:active { background: #ffe4d1; border-color: var(--orj-cta); } /* ── Secundair (ghost grijs) — nooit solitair (B-026) ───────── 1 px #d1d5db (1,5:1 — de knop wordt herkend aan label, pijl en plek; WCAG 1.4.11 eist 3:1 alleen als de rand het enige kenmerk is). Hover één stap donkerder, nooit ink: hover is feedback, geen identiteitswissel; muisklik laat geen zwarte rand achter (bug t/m v2.5.2: :focus kreeg de hoverkleur). Gewicht 500: de primair wint. */ .orj-cta--ghost, .orj-cta--ghost:visited { background: #fff; color: var(--orj-ink) !important; border-color: #d1d5db; font-weight: 500 !important; } /* Naast een lg-primair: zelfde hoogte, lichter label, md-padding (hero-rij 586 px < 592 beschikbaar bij de 640-grens). */ .orj-cta--ghost.orj-cta--lg { font-size: 16px !important; padding: 0 24px !important; } .orj-cta--ghost:hover { background: #fff; border-color: #9ca3af; color: var(--orj-ink) !important; } .orj-cta--ghost:active { background: #f3f4f6; border-color: #9ca3af; } /* ── Tekstlink met pijl (variant 4) ────────────────────────── */ .orj-textlink, .orj-textlink:visited { display: inline-flex; align-items: center; gap: 5px; color: var(--orj-green-dark) !important; font-family: var(--orj-font); font-weight: 600; text-decoration: none !important; } .orj-textlink:hover { text-decoration: underline !important; text-underline-offset: 3px; } /* ── Microcopy / click-triggers ────────────────────────────── */ .orj-microcopy { font-family: var(--orj-font); font-size: 13px; color: var(--orj-muted); } /* Witte knop op een groen vlak — de dienstenkaart die de spot heeft (§11b, B-059: in rust de uitgelichte kaart, bij hover de gehoverde). */ .orj-cta--wit, .orj-cta--wit:visited { background: #fff; border-color: #fff; color: var(--orj-green-dark) !important; } /* :visited erbij (v2.11.0): .orj-cta:visited (0-2-0) won anders van .orj-cta--wit (0-1-0) en kleurde een bezochte knop oranje */ .orj-cta--wit:hover { background: var(--orj-mint); border-color: var(--orj-mint); color: var(--orj-green-dark) !important; } /* kleur herhaald (v2.11.0): .orj-cta:hover zet color #fff !important op 0-2-0 en won — label werd wit op mint. Outline en ghost hadden de herhaling al */ .orj-cta--wit:active { background: var(--orj-mint-donker); border-color: var(--orj-mint-donker); color: var(--orj-green-dark) !important; } /* ── Typografie: koppen aanhalen ─────────────────────────── Inter staat op grote formaten standaard te wijd. Aanhalen is de goedkoopste "premium"-ingreep die er is. Modules zetten deze klassen op hun koppen; de header past -.005em toe op het menu. Schaal (§13, besluit 2026-09-05): h1 44 · sectiekop 38 · blokkop 34 · quote 27 · h3 22 · kaarttitel 20 · body 17 · klein 15 · micro 13,5. Mobiel (< 640): h1 32 · sectiekop 28 · h3 20. */ .orj-display { letter-spacing: -.03em; line-height: 1.08; } .orj-display-md { letter-spacing: -.02em; line-height: 1.15; } .orj-display-sm { letter-spacing: -.01em; line-height: 1.25; } /* ── Trustpilot-lockup (B-032) ─────────────────────────────── Extern bewijs staat in het systeembestand, niet per module: label + tegels + logo zijn één beeld en moeten overal dezelfde verhouding houden (derde-partij-regel, projectdocument §6a). EEN maatstaf: --tp-h = de hoogte van één stertegel. De rest is afgeleid. Verhoudingen gemeten op de referentiebalk van het team (B-036, 2026-09-12): label-kapitaal 0,65x tegel (= font-size 0,89x), telregel-kapitaal 0,50x (= font-size 0,69x), logo-ster 0,875x tegel, tussenruimte 0,48x tegel. De tegels zijn dus bewust kleiner dan in het officiële widget (daar 2,8x de label-inkt, hier 1,54x): de tekst en het logo dragen, de sterren begeleiden. Labelgewicht 500: stam/kapitaal 0,148 tegenover 0,150 gemeten op het officiële widget (600 = 0,174; 700 = 0,203, te zwaar). Vulfactoren: elk officieel bestand brengt eigen transparante rand mee. --tp-ster-vul / --tp-logo-vul = inkt gedeeld door vakhoogte (1 = strak uitgesneden). PHP zet ze inline uit de instelling. !important omdat header.css en home.css NA dit bestand laden (les v1.0.2: het systeembestand vertrouwt nooit op laadvolgorde). */ .orj-tp { --tp-h: 20px; --tp-ster-vul: 1; --tp-logo-vul: 1; display: inline-flex !important; align-items: center !important; gap: calc(var(--tp-h) * .48) !important; color: var(--orj-ink) !important; text-decoration: none !important; line-height: 1 !important; } .orj-tp-label { font-size: calc(var(--tp-h) * .89) !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1 !important; white-space: nowrap; } /* Hoogte uit de maatstaf; verticaal op de lijn gezet met de gemeten afwijking van het bestand (B-035). De browser centreert het vák van een afbeelding, niet de inkt — zit de inkt scheef in het bestand, dan hangt het beeld scheef. `top` in plaats van `transform`: een layoutverschuiving, geen compositielaag, dus geen onscherpte. De lijn zelf: het midden van de tegelrij. Daar hoort de groene ster van het logo op te staan — gemeten aan het officiële widget, waar het woordmerk juist iets lager uitkomt (de staart van de p hangt onder de basislijn). Tekst heeft geen correctie nodig: Inter zet bij line-height 1 het kapitaalmidden exact op het vakmidden (asc 0,9688 · desc 0,2412 · kapitaal 0,7275 → afwijking 0,0000em). */ .orj-tp-img { display: block !important; width: auto !important; height: calc(var(--tp-h, 20px) / var(--tp-ster-vul, 1)) !important; position: relative; top: calc(-1 * var(--tp-ster-mid, 0) * var(--tp-h, 20px) / var(--tp-ster-vul, 1)); } .orj-tp-logo { display: block !important; width: auto !important; height: calc(var(--tp-h, 20px) * .875 / var(--tp-logo-vul, 1)) !important; position: relative; top: calc(-1 * var(--tp-logo-mid, 0) * var(--tp-h, 20px) * .875 / var(--tp-logo-vul, 1)); } /* Tijdelijke weergave zolang de officiële bestanden ontbreken — zelfde verhoudingen, zodat de overstap niets verschuift. */ .orj-tp-stars { display: inline-flex !important; gap: calc(var(--tp-h) * .07) !important; } .orj-tp-stars svg { width: var(--tp-h) !important; height: var(--tp-h) !important; } .orj-tp-naam { display: inline-flex !important; align-items: center; gap: calc(var(--tp-h) * .12); font-size: calc(var(--tp-h) * .69) !important; font-weight: 600 !important; letter-spacing: -.02em; } .orj-tp-naam svg { width: calc(var(--tp-h) * .875) !important; height: calc(var(--tp-h) * .875) !important; } /* Aantal reviews (B-033) — zelfde maat als het label; het getal draagt de claim en staat daarom op 600. De onderstreping markeert dat hier de link zit (kleur doet dat niet, B-018). */ .orj-tp-aantal { font-size: calc(var(--tp-h) * .69) !important; font-weight: 500 !important; line-height: 1 !important; /* voorwaarde voor de nulcorrectie, zie .orj-tp-img */ white-space: nowrap; text-decoration: underline; text-underline-offset: calc(var(--tp-h) * .08); } .orj-tp-aantal strong { font-weight: 600 !important; } /* Onder 640 (B-045, referentie mobiel gemeten): het lockup wrapt in twee gecentreerde rijen — rij 1 label + sterren, rij 2 aantal + logo — met 6 px ertussen. De breuk is een leeg 100%-item vóór het aantal (`.orj-tp-breuk`, alleen in de markup als het aantal er is), zodat de rij-indeling vastligt en niet van de tekstlengte afhangt. Zonder aantal (onder de drempel, B-033) blijft het één rij van ±267 px. Vervangt de regel "aantal valt weg onder 640" van B-033. Maat: --tp-h 17,5 in de hero (gemeten 17,5), zie home.css. */ .orj-tp-breuk { display: none; } @media (max-width: 639px) { .orj-tp { flex-wrap: wrap !important; justify-content: center; row-gap: 6px !important; } /* !important: gap-shorthand hierboven is ook !important */ .orj-tp-breuk { display: block; flex-basis: 100%; height: 0; } } /* Het hele lockup is een link; kleur markeert hem niet, dus hover onderstreept (zelfde regel als de topbar-links, B-018). */ .orj-tp:hover .orj-tp-label, .orj-tp:hover .orj-tp-naam { text-decoration: underline; text-underline-offset: 3px; } /* Compact: alleen de tegels (mobiele balk, smalle vlakken). */ .orj-tp--compact .orj-tp-label, .orj-tp--compact .orj-tp-logo, .orj-tp--compact .orj-tp-aantal, .orj-tp--compact .orj-tp-naam { display: none !important; } /* ── Invoervelden (B-061, v2.13.0) ────────────────────────── §2: invoervelden krijgen dezelfde radius als knoppen (8) en de md-hoogte (48) — in een formulierrij staan ze naast de knop en mag het verschil niet zichtbaar zijn. 16 px letter: iOS zoomt dan niet in op focus. Focus: de groene ring, zoals op elk interactief element (§8). */ .orj-invoer { box-sizing: border-box; display: block; width: 100%; min-width: 0; height: 48px; margin: 0 !important; padding: 0 14px !important; background: #fff !important; color: var(--orj-ink) !important; border: 1px solid #c6d7cf !important; border-radius: var(--orj-radius) !important; font-family: var(--orj-font) !important; font-size: 16px !important; line-height: 1 !important; box-shadow: none !important; transition: border-color .15s ease; } .orj-invoer::placeholder { color: #9ca3af; } .orj-invoer:hover { border-color: #9dbfb1 !important; } .orj-invoer:focus, .orj-invoer:focus-visible { outline: 2px solid var(--orj-green) !important; outline-offset: 2px; border-color: var(--orj-green) !important; } /* ── Focus & toegankelijkheid ──────────────────────────────── */ .orj-cta:focus-visible, .orj-textlink:focus-visible, .orj-tekstlink:focus-visible, .orj-vso-link:focus-visible { outline: 2px solid var(--orj-green) !important; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .orj-cta, .orj-arrow, .orj-textlink { transition: none !important; } } /* ── Mobiel: hero-knoppen full-width, 52 hoog, md-label ──────── */ @media (max-width: 639px) { .orj-cta--lg { height: 56px; font-size: 16px !important; padding: 0 24px !important; } /* B-045: 56/16 (was 52), referentie mobiel gemeten */ }