/* ========================================================================== Yellowgrape Commerce Day — components.css De complete componentbibliotheek. Elke visuele waarde komt uit tokens.css. Naamgeving (BEM, prefix yg-): .yg-block component .yg-block__element onderdeel van dat component .yg-block--variant variant van dat component .is-state toestand die JS zet (is-open, is-active, is-error) Volgorde in dit bestand: 0 reset en basis 5 card 1 layout: wrap, section 6 lijst en accordion 2 typografie 7 formulier 3 stack en grid 8 hero, countdown, nav, footer 4 button, pill, eyebrow 9 hulpklassen en motion Documentatie en de bijbehorende regels: docs/02-design-system.md ========================================================================== */ /* ========================================================================== 0. RESET EN BASIS ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Geen elastische bounce aan de randen, horizontaal noch verticaal. */ overscroll-behavior: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: var(--t-body); font-weight: var(--w-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; overscroll-behavior: none; } img, video, svg { display: block; max-width: 100%; } img, video { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; } ::selection { background: var(--yellow); color: var(--black); } /* Eén zichtbare focus-stijl voor de hele site. Nooit outline:none zonder vervanging: toetsenbordgebruikers moeten altijd zien waar ze zijn. */ :focus-visible { outline: var(--bw-button) solid var(--black); outline-offset: 3px; border-radius: var(--r-block); } .on-dark :focus-visible, .yg-section--dark :focus-visible { outline-color: var(--yellow); } /* --- Preloader: gordijn van vijf panelen ------------------------------- Zichtbaar zolang de klasse yg-boot heeft (gezet door het boot-script). Vijf verticale zwarte panelen bedekken de pagina; bij het openen schuiven ze één voor één omhoog, het middelste eerst en dan naar buiten toe (curtain reveal). Tijdens de boot staat de scroll op slot. ------------------------------------------------------------------------ */ .yg-loader { position: fixed; inset: 0; z-index: var(--z-loader); display: none; } /* Zichtbaar tijdens de boot én tijdens het openen van het gordijn (de scroll is dan al vrij, maar de panelen moeten hun transitie afmaken). */ html.yg-boot .yg-loader, .yg-loader.is-klaar { display: block; } html.yg-boot { overflow: hidden; } .yg-loader.is-klaar { pointer-events: none; } /* De panelen overlappen een fractie zodat er nooit een naadje wit doorheen schemert. */ .yg-loader__strip { position: absolute; top: 0; bottom: 0; width: 20.5vw; background: var(--black); } .yg-loader__strip:nth-child(1) { left: 0; } .yg-loader__strip:nth-child(2) { left: 20vw; } .yg-loader__strip:nth-child(3) { left: 40vw; } .yg-loader__strip:nth-child(4) { left: 60vw; } .yg-loader__strip:nth-child(5) { left: 80vw; width: 20vw; } .yg-loader__logo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: clamp(44px, 7vw, 76px); width: auto; max-width: 80vw; opacity: 0; animation: yg-loader-in 0.7s var(--ease) 0.15s forwards; } @keyframes yg-loader-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Openen: panelen omhoog met de merk-easing, midden eerst, dan naar buiten. */ .yg-loader.is-klaar .yg-loader__strip { transform: translateY(-101%); transition: transform 0.7s var(--ease); } .yg-loader.is-klaar .yg-loader__strip:nth-child(3) { transition-delay: 0s; } .yg-loader.is-klaar .yg-loader__strip:nth-child(2), .yg-loader.is-klaar .yg-loader__strip:nth-child(4) { transition-delay: 0.1s; } .yg-loader.is-klaar .yg-loader__strip:nth-child(1), .yg-loader.is-klaar .yg-loader__strip:nth-child(5) { transition-delay: 0.2s; } .yg-loader.is-klaar .yg-loader__logo { opacity: 0; transition: opacity 0.25s var(--ease); animation: none; } /* Skip-link: eerste tabstop van de pagina. */ .yg-skip { position: absolute; left: var(--sp-4); top: calc(-1 * var(--sp-20)); z-index: var(--z-modal); padding: var(--sp-3) var(--sp-5); background: var(--black); color: var(--white); font-family: var(--font-display); font-size: var(--t-label); border-radius: var(--r-pill); transition: top var(--d-ui) var(--ease); } .yg-skip:focus { top: var(--sp-4); } /* ========================================================================== 1. LAYOUT — wrap en section ========================================================================== */ /* De enige horizontale uitlijning op de pagina. Alles staat op dezelfde linkerlijn omdat alles in een .yg-wrap zit. */ .yg-wrap { width: 100%; max-width: calc(var(--wrap-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .yg-wrap--narrow { max-width: calc(56rem + 2 * var(--gutter)); } /* Verticale ritme-eenheid van de pagina. Elke sectie heeft dezelfde verticale padding; verschil in dichtheid maak je binnen de sectie. */ .yg-section { position: relative; padding-block: var(--section-y); scroll-margin-block-start: var(--nav-h); } .yg-section--surface { background: var(--surface); } .yg-section--alt { background: var(--surface-alt); } .yg-section--dark { background: var(--black); color: var(--ink-on-dark); } .yg-section--dark .yg-lead, .yg-section--dark .yg-body { color: var(--ink-on-dark-600); } /* Geel statement-vlak, voor de aanmeld-CTA. Tekst op geel is altijd zwart. */ .yg-section--yellow { background: var(--yellow); color: var(--black); } .yg-section--yellow .yg-lead, .yg-section--yellow .yg-body { color: rgba(0, 0, 0, 0.78); } /* Op geel wisselt de primaire knop bij hover naar wit in plaats van geel. */ .yg-section--yellow .yg-btn--primary:hover { background: var(--white); border-color: var(--white); color: var(--black); } .yg-section--yellow .yg-small { color: rgba(0, 0, 0, 0.62); } /* Reactietijd-indicatie onder de CTA-knop. */ .yg-cta-note { margin-block-start: var(--sp-4); font-size: var(--t-body); } .yg-section--flush { padding-block: 0; } .yg-section--tight { padding-block: var(--sp-12); } /* Schermvullende sectie: minimaal één viewport hoog, content gecentreerd. */ .yg-section--full { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; } /* Sectiekop: eyebrow + kop + lead met vaste onderlinge afstanden. Nooit los opbouwen — altijd dit component gebruiken, dan is elke sectiekop op de pagina gegarandeerd identiek. */ .yg-section-head { display: flex; flex-direction: column; max-width: var(--measure); margin-block-end: var(--section-head-gap); } .yg-section-head > .yg-eyebrow { margin-block-end: var(--gap-label-title); } .yg-section-head > .yg-h2 + .yg-lead, .yg-section-head > .yg-h1 + .yg-lead { margin-block-start: var(--gap-title-text); } .yg-section-head--wide { max-width: none; } /* Voor secties waar lopende tekst direct onder de kop staat: dan geldt het kop->subtekst-ritme in plaats van de grote sectiekop-marge. */ .yg-section-head--tight { margin-block-end: var(--gap-title-text); } .yg-section-head--center { align-items: center; text-align: center; margin-inline: auto; } /* ========================================================================== 2. TYPOGRAFIE ========================================================================== */ .yg-display { font-family: var(--font-display); font-size: var(--t-display); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: balance; } .yg-h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: var(--w-display); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; } .yg-h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: var(--w-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; } .yg-h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: var(--w-heading); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); text-wrap: balance; } .yg-h4 { font-family: var(--font-display); font-size: var(--t-h4); font-weight: var(--w-heading); line-height: var(--lh-tight); text-wrap: balance; } .yg-lead { font-size: var(--t-lead); font-weight: var(--w-body); line-height: var(--lh-lead); color: var(--ink-600); max-width: var(--measure); text-wrap: balance; } .yg-body { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--ink-600); max-width: var(--measure); text-wrap: balance; } .yg-body strong { font-weight: var(--w-body-em); color: var(--ink); } .yg-section--dark .yg-body strong { color: var(--ink-on-dark); } /* Meerdere alinea's onder elkaar houden altijd dezelfde afstand. */ .yg-body > p + p { margin-block-start: var(--gap-para); } .yg-small { font-size: var(--t-sm); font-weight: var(--w-body-em); line-height: var(--lh-lead); color: var(--ink-400); } .yg-xs { font-size: var(--t-xs); font-weight: var(--w-body-em); line-height: var(--lh-lead); color: var(--ink-400); } .yg-section--dark .yg-small, .yg-section--dark .yg-xs { color: var(--ink-on-dark-400); } /* ========================================================================== 3. STACK EN GRID — de twee enige manieren om afstand te maken ========================================================================== */ /* Verticale stapel met één gap-waarde. Kies een modifier, niet een eigen margin: losse margins zijn de reden dat pagina's uit de pas gaan lopen. */ .yg-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--gap-para)); } .yg-stack--xs { --stack-gap: var(--sp-2); } /* 8 — icoon/label, tight */ .yg-stack--sm { --stack-gap: var(--sp-3); } /* 12 — eyebrow -> kop */ .yg-stack--md { --stack-gap: var(--sp-4); } /* 16 — kop -> tekst, alinea's */ .yg-stack--lg { --stack-gap: var(--sp-8); } /* 32 — tekst -> CTA */ .yg-stack--xl { --stack-gap: var(--block-gap); } /* 48/64 — blok -> blok */ /* Horizontale rij, breekt vanzelf af op smal scherm. */ .yg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--row-gap, var(--sp-3)); } .yg-row--sm { --row-gap: var(--sp-2); } .yg-row--lg { --row-gap: var(--sp-5); } /* Kaartraster. Mobiel altijd één kolom; de modifier bepaalt het maximum. */ .yg-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-card); } /* Visuele tegels (foto's, feiten) mogen al op mobiel naast elkaar: dat voorkomt eindeloos stapelen. Tekstcards blijven mobiel één kolom. */ .yg-grid--media { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 560px) { .yg-grid--2, .yg-grid--3, .yg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .yg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .yg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Tweekolomsblok: tekst naast beeld. Mobiel onder elkaar. */ .yg-split { display: grid; grid-template-columns: 1fr; gap: var(--block-gap); align-items: center; } @media (min-width: 1000px) { .yg-split { grid-template-columns: 1fr 1fr; gap: var(--sp-16); } .yg-split--wide-media { grid-template-columns: 5fr 7fr; } } /* In een split staat de lopende tekst direct onder de kop (zelfde kolom); dan geldt het kop->subtekst-ritme, niet de grote sectiekop-marge. */ .yg-split .yg-section-head { margin-block-end: var(--gap-title-text); } /* ========================================================================== 4. EYEBROW, PILL EN BUTTON ========================================================================== */ /* Overline met streepje. Signatuur-element uit het brandbook. */ .yg-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--font-display); font-size: var(--t-label); font-weight: var(--w-heading); line-height: 1; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink); } .yg-eyebrow::before { content: ""; flex: none; width: 28px; height: var(--bw-rule); /* Volgt de tekstkleur: zwart op licht, wit op donker. */ background: currentColor; } .yg-section--dark .yg-eyebrow, .on-dark .yg-eyebrow { color: var(--ink-on-dark); } /* De gradient-variant is het enige plek-gebonden accent. Maximaal twee keer per pagina gebruiken, anders verliest het zijn werking. */ .yg-eyebrow--ai::before { background: var(--grad-ai); } /* Pill: statische badge, geen interactie. */ .yg-pill { display: inline-flex; align-items: center; gap: var(--gap-inline); padding: var(--sp-2) var(--sp-4); border: var(--bw-hairline) solid var(--border); border-radius: var(--r-pill); font-family: var(--font-display); font-size: var(--t-xs); font-weight: var(--w-heading); line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-600); background: var(--white); } .yg-pill--yellow { background: var(--yellow); border-color: var(--yellow); color: var(--black); } .yg-pill--dark { background: var(--black); border-color: var(--black); color: var(--white); } .on-dark .yg-pill, .yg-section--dark .yg-pill { background: transparent; border-color: var(--border-on-dark); color: var(--ink-on-dark-600); } /* --- Button --------------------------------------------------------------- Drie varianten, drie maten. Altijd radius pill, altijd 2px border zodat solid en outline exact dezelfde afmeting hebben en niet verspringen. Minimale hoogte 48px: touch-target-eis op mobiel. -------------------------------------------------------------------------- */ .yg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-inline); min-height: 48px; padding: var(--sp-3) var(--sp-8); border: var(--bw-button) solid transparent; border-radius: var(--r-pill); font-family: var(--font-display); font-size: var(--t-body); font-weight: var(--w-heading); line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; background: transparent; transition: background-color var(--d-ui) var(--ease), border-color var(--d-ui) var(--ease), color var(--d-ui) var(--ease), transform var(--d-fast) var(--ease); } .yg-btn:active { transform: translateY(1px); } .yg-btn[disabled], .yg-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } .yg-btn--sm { min-height: 40px; padding: var(--sp-2) var(--sp-5); font-size: var(--t-sm); } .yg-btn--lg { min-height: 56px; padding: var(--sp-4) var(--sp-10); } .yg-btn--block { width: 100%; } /* Primair op licht: zwart vlak. */ .yg-btn--primary { background: var(--black); border-color: var(--black); color: var(--white); } .yg-btn--primary:hover { background: var(--yellow); border-color: var(--yellow); color: var(--black); } /* Secundair op licht: outline. */ .yg-btn--secondary { background: transparent; border-color: var(--black); color: var(--black); } .yg-btn--secondary:hover { background: var(--black); color: var(--white); } /* Primair op donker of over beeld: geel vlak, zwarte tekst. Brandbook-regel: tekst op geel is altijd zwart. */ .yg-btn--on-dark { background: var(--yellow); border-color: var(--yellow); color: var(--black); } .yg-btn--on-dark:hover { background: var(--black); border-color: var(--black); color: var(--white); } /* Secundair op donker: witte outline. */ .yg-btn--ghost-dark { background: transparent; border-color: var(--border-on-dark); color: var(--ink-on-dark); } .yg-btn--ghost-dark:hover { background: var(--white); border-color: var(--white); color: var(--black); } /* Tekstlink met onderlijn, voor tertiaire acties. */ .yg-link { font-family: var(--font-display); font-size: var(--t-sm); font-weight: var(--w-heading); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: opacity var(--d-fast) var(--ease); } .yg-link:hover { opacity: 0.6; } /* ========================================================================== 5. CARD ========================================================================== */ .yg-card { display: flex; flex-direction: column; padding: var(--card-pad); background: var(--white); border: var(--bw-hairline) solid var(--border); border-radius: var(--r-block); transition: border-color var(--d-hover) var(--ease), background-color var(--d-hover) var(--ease), transform var(--d-hover) var(--ease); } /* Vaste interne ritmes in elke card. Nooit per card afwijken. */ .yg-card__eyebrow + .yg-card__title { margin-block-start: var(--gap-label-title); } .yg-card__title + .yg-card__text { margin-block-start: var(--sp-2); } .yg-card__text + .yg-card__meta { margin-block-start: var(--sp-4); } .yg-card__media + .yg-card__title { margin-block-start: var(--sp-5); } /* De laatste regel van een card duwt zichzelf naar de bodem, zodat kaarten met verschillende tekstlengtes onderaan toch uitlijnen. */ .yg-card__foot { margin-block-start: auto; padding-block-start: var(--sp-5); } .yg-card--surface { background: var(--surface); } .yg-card--flat { border-color: transparent; background: var(--surface); } .yg-card--yellow { background: var(--yellow); border-color: var(--yellow); color: var(--black); } .yg-card--dark { background: var(--black); border-color: var(--black); color: var(--ink-on-dark); } .yg-card--dark .yg-card__text { color: var(--ink-on-dark-600); } /* Alleen klikbare cards krijgen hover-feedback. */ .yg-card--link { text-decoration: none; } .yg-card--link:hover { border-color: var(--black); transform: translateY(-2px); } /* Genummerde card, voor het programma-overzicht. */ .yg-card__index { font-family: var(--font-display); font-size: var(--t-label); font-weight: var(--w-heading); letter-spacing: var(--ls-label); color: var(--ink-400); } /* ========================================================================== 6. LIJST EN ACCORDION ========================================================================== */ /* Hairline-lijst: rijen zonder onderlinge gap, gescheiden door één lijn. Gebruik dit in plaats van losse cards wanneer items tekstueel en gelijkwaardig zijn (programma, praktische info). */ .yg-list { border-block-start: var(--bw-hairline) solid var(--border); } .yg-list__item { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); padding-block: var(--gap-row); border-block-end: var(--bw-hairline) solid var(--border); } @media (min-width: 768px) { .yg-list__item { grid-template-columns: 8rem 1fr; gap: var(--sp-8); padding-block: var(--sp-8); } } .yg-section--dark .yg-list, .yg-section--dark .yg-list__item { border-color: var(--border-on-dark); } .yg-list__aside { font-family: var(--font-display); font-size: var(--t-label); font-weight: var(--w-heading); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-400); padding-block-start: var(--sp-1); } .yg-section--dark .yg-list__aside { color: var(--ink-on-dark-400); } .yg-list__body > .yg-h3 + .yg-body { margin-block-start: var(--sp-3); } /* --- Accordion ------------------------------------------------------------- Gebouwd op native
/: werkt met toetsenbord en screenreader zonder één regel JS. -------------------------------------------------------------------------- */ .yg-accordion { border-block-start: var(--bw-hairline) solid var(--border); } .yg-accordion__item { border-block-end: var(--bw-hairline) solid var(--border); } .yg-accordion__summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5); padding-block: var(--gap-row); cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--t-h4); font-weight: var(--w-heading); line-height: var(--lh-tight); transition: color var(--d-ui) var(--ease); } .yg-accordion__summary::-webkit-details-marker { display: none; } .yg-accordion__summary:hover { color: var(--ink-400); } /* Plus dat naar een min draait: het hele icoon roteert een halve slag mee terwijl de verticale lijn wegdraait en vervaagt. De animatie hangt aan .is-open (gezet door app.js op het moment van klikken, dus het icoon reageert direct); zonder JavaScript neemt [open] het over. */ .yg-accordion__icon { position: relative; flex: none; width: 20px; height: 20px; margin-block-start: var(--sp-1); transition: transform calc(var(--d-ui) * 1.5) var(--ease); } .yg-accordion__icon::before, .yg-accordion__icon::after { content: ""; position: absolute; inset-inline: 0; top: 9px; height: var(--bw-rule); background: currentColor; transition: transform calc(var(--d-ui) * 1.5) var(--ease), opacity var(--d-ui) var(--ease); } .yg-accordion__icon::after { transform: rotate(90deg); } .yg-accordion__item.is-open .yg-accordion__icon, html:not(.js) .yg-accordion__item[open] .yg-accordion__icon { transform: rotate(180deg); } .yg-accordion__item.is-open .yg-accordion__icon::after, html:not(.js) .yg-accordion__item[open] .yg-accordion__icon::after { transform: rotate(0deg); opacity: 0; } .yg-accordion__panel { overflow: hidden; padding-block-end: var(--gap-row); max-width: var(--measure); } .yg-section--dark .yg-accordion, .yg-section--dark .yg-accordion__item { border-color: var(--border-on-dark); } /* ========================================================================== 7. FORMULIER ========================================================================== */ .yg-form { display: flex; flex-direction: column; gap: var(--gap-field); } .yg-form__grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-field); } @media (min-width: 560px) { .yg-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .yg-field { display: flex; flex-direction: column; gap: var(--sp-2); } .yg-field__label { font-family: var(--font-display); font-size: var(--t-sm); font-weight: var(--w-heading); color: var(--ink); } .yg-field__label .yg-req { color: var(--ink-400); font-weight: var(--w-body); } .yg-input { width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4); background: var(--white); border: var(--bw-hairline) solid var(--border); border-radius: var(--r-block); font-size: var(--t-body); font-weight: var(--w-body-em); line-height: 1.4; transition: border-color var(--d-ui) var(--ease); } .yg-input::placeholder { color: var(--ink-400); font-weight: var(--w-body); } .yg-input:hover { border-color: var(--ink-400); } .yg-input:focus { border-color: var(--black); } .yg-field.is-error .yg-input { border-color: var(--black); border-width: var(--bw-button); } .yg-field__error { font-size: var(--t-sm); font-weight: var(--w-body-em); color: var(--ink); } .yg-field:not(.is-error) .yg-field__error { display: none; } /* Honeypot: onzichtbaar voor mensen, ingevuld door domme bots. Niet display:none — sommige bots slaan die juist over. */ .yg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .yg-form__note { font-size: var(--t-xs); line-height: var(--lh-lead); color: var(--ink-400); } .yg-alert { padding: var(--sp-4) var(--sp-5); border: var(--bw-hairline) solid var(--border); border-inline-start: var(--sp-1) solid var(--black); background: var(--surface); font-size: var(--t-sm); line-height: var(--lh-lead); color: var(--ink); } .yg-alert--ok { border-inline-start-color: var(--yellow); } /* ========================================================================== 8. HERO, COUNTDOWN, NAV, FOOTER ========================================================================== */ /* --- Topbalk: altijd zichtbaar, transparant boven de hero -------------- */ .yg-nav { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-nav); height: var(--nav-h); display: flex; align-items: center; transition: background-color var(--d-ui) var(--ease), border-color var(--d-ui) var(--ease); border-block-end: var(--bw-hairline) solid transparent; } .yg-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); width: 100%; } .yg-nav__logo { display: flex; align-items: center; } .yg-nav__logo img { height: 26px; width: auto; } @media (min-width: 768px) { .yg-nav__logo img { height: 28px; } } .yg-nav__actions { display: flex; align-items: center; gap: var(--sp-3); } /* Sectielinks: alleen op brede schermen, kleuren mee met de balk. */ .yg-nav__links { display: none; align-items: center; gap: var(--sp-5); } @media (min-width: 1100px) { .yg-nav__links { display: flex; } } .yg-nav__link { font-family: var(--font-display); font-size: var(--t-sm); font-weight: var(--w-heading); text-decoration: none; color: var(--ink-on-dark-600); transition: color var(--d-fast) var(--ease); } .yg-nav__link:hover { color: var(--white); } .yg-nav.is-solid .yg-nav__link { color: var(--ink-400); } .yg-nav.is-solid .yg-nav__link:hover { color: var(--ink); } /* Actieve sectie: vol contrast met een geel accentlijntje eronder. */ .yg-nav__link.is-actief { color: var(--white); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: var(--bw-rule); text-underline-offset: 6px; } .yg-nav.is-solid .yg-nav__link.is-actief { color: var(--ink); } /* Op smalle schermen verhuist alles behalve het logo naar het mobiele menu; alleen de hamburger blijft in de balk staan. */ @media (max-width: 767px) { .yg-nav__overons, .yg-nav > .yg-wrap .yg-lang, .yg-nav__cta { display: none; } } /* --- Hamburger + mobiel menu ------------------------------------------- */ .yg-nav__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 8px; border: 0; background: transparent; cursor: pointer; } .yg-nav__burger span { display: block; height: 2px; border-radius: 1px; background: var(--white); transition: transform var(--d-ui) var(--ease), opacity var(--d-fast) var(--ease); } .yg-nav.is-solid .yg-nav__burger span { background: var(--black); } @media (max-width: 767px) { .yg-nav__burger { display: flex; } } /* Open: lijnen worden een kruis, en de balk kleurt zwart over het menu. */ html.yg-menu-open .yg-nav { background: var(--black); border-block-end-color: transparent; } html.yg-menu-open .yg-nav .yg-nav__logo--dark { display: none; } html.yg-menu-open .yg-nav .yg-nav__logo--light { display: block; } html.yg-menu-open .yg-nav__burger span { background: var(--white); } html.yg-menu-open .yg-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } html.yg-menu-open .yg-nav__burger span:nth-child(2) { opacity: 0; } html.yg-menu-open .yg-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } html.yg-menu-open { overflow: hidden; } .yg-mobielmenu { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); display: flex; flex-direction: column; padding-block-start: var(--nav-h); background: var(--black); color: var(--ink-on-dark); } .yg-mobielmenu[hidden] { display: none; } .yg-mobielmenu__scroll { flex: 1; overflow-y: auto; padding: var(--sp-6) var(--gutter) var(--sp-4); } /* Grote duimzones: elke sectielink is een volle rij. */ .yg-mobielmenu .yg-nav__link, .yg-mobielmenu__overons { display: block; padding-block: var(--sp-4); border-block-end: var(--bw-hairline) solid var(--border-on-dark); font-family: var(--font-display); font-size: var(--t-h3); font-weight: var(--w-heading); color: var(--white); text-decoration: none; } .yg-mobielmenu .yg-nav__link:hover, .yg-mobielmenu__overons:hover { color: var(--yellow); } /* Taal-toggle in het menu: beknopt (geen volle breedte), met dezelfde fontgrootte als de sectielinks erboven. */ .yg-mobielmenu__lang { margin-block-start: var(--sp-6); display: inline-flex; width: fit-content; } .yg-mobielmenu__lang .yg-lang__btn { font-size: var(--t-h3); letter-spacing: 0.02em; padding: var(--sp-2) var(--sp-5); } .yg-mobielmenu__voet { flex: none; padding: var(--sp-4) var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); } /* CTA in de nav: subtiel in de hero; zodra de balk wit wordt stroomt er een gele "vloeistof" van links naar binnen (blob met morphende radius). */ .yg-nav__cta { position: relative; overflow: hidden; font-weight: var(--w-display); border-color: var(--border-on-dark); color: var(--white); transition: color var(--d-ui) var(--ease), border-color var(--d-ui) var(--ease); } .yg-nav__cta > span { position: relative; } .yg-nav__cta::before { content: ""; position: absolute; inset: -30% -12%; background: var(--yellow); border-radius: 38% 62% 56% 44% / 58% 42% 58% 42%; transform: translateX(-115%) rotate(-6deg); transition: transform 0.8s var(--ease), border-radius 0.8s var(--ease), background-color var(--d-ui) var(--ease); } .yg-nav.is-solid .yg-nav__cta { color: var(--black); border-color: var(--yellow); } .yg-nav.is-solid .yg-nav__cta::before { transform: translateX(0) rotate(0deg); border-radius: 0; } /* Hover in de hero (balk nog transparant): dezelfde gele vloeistof stroomt binnen, met zwarte tekst. */ .yg-nav__cta:hover, .yg-nav__cta:focus-visible { color: var(--black); border-color: var(--yellow); } .yg-nav__cta:hover::before, .yg-nav__cta:focus-visible::before { transform: translateX(0) rotate(0deg); border-radius: 0; } /* Is de knop al geel (witte balk), dan wordt hij op hover zwart met wit. */ .yg-nav.is-solid .yg-nav__cta:hover, .yg-nav.is-solid .yg-nav__cta:focus-visible { color: var(--white); border-color: var(--black); } .yg-nav.is-solid .yg-nav__cta:hover::before, .yg-nav.is-solid .yg-nav__cta:focus-visible::before { background: var(--black); } @media (prefers-reduced-motion: reduce) { .yg-nav__cta::before { transition: none; } } /* Zodra je voorbij de hero scrollt wordt de balk wit met een hairline. */ .yg-nav.is-solid { background: var(--white); border-block-end-color: var(--border); } .yg-nav.is-solid .yg-nav__logo--light, .yg-nav:not(.is-solid) .yg-nav__logo--dark { display: none; } .yg-nav.is-solid .yg-btn--ghost-dark { border-color: var(--black); color: var(--black); } .yg-nav.is-solid .yg-btn--ghost-dark:hover { background: var(--black); color: var(--white); } /* Taalwissel: subtiele toggle, de actieve taal is het gevulde segment. */ .yg-lang { display: flex; align-items: center; padding: 2px; border: var(--bw-hairline) solid var(--border-on-dark); border-radius: var(--r-pill); } .yg-lang__btn { padding: 3px 10px; border: 0; border-radius: var(--r-pill); background: transparent; font-family: var(--font-display); font-size: var(--t-xs); font-weight: var(--w-heading); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ink-on-dark-400); cursor: pointer; transition: color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease); } .yg-lang__btn:hover { color: var(--ink-on-dark); } .yg-lang__btn[aria-current="true"] { background: var(--white); color: var(--black); } .yg-nav.is-solid .yg-lang { border-color: var(--border); } .yg-nav.is-solid .yg-lang__btn { color: var(--ink-400); } .yg-nav.is-solid .yg-lang__btn:hover { color: var(--ink); } .yg-nav.is-solid .yg-lang__btn[aria-current="true"] { background: var(--black); color: var(--white); } /* --- Hero -------------------------------------------------------------- */ /* De content (meta, titel, intro, CTA, countdown) staat links en verticaal gecentreerd in het scherm. */ .yg-hero { position: relative; display: flex; align-items: center; min-height: 100svh; padding-block: calc(var(--nav-h) + var(--sp-8)) var(--sp-10); background: var(--black); color: var(--ink-on-dark); overflow: hidden; } .yg-hero__bg { position: absolute; inset: 0; z-index: 0; background: var(--black); } .yg-hero__bg img, .yg-hero__bg video { width: 100%; height: 100%; object-fit: cover; } /* De video ligt boven de poster en fade't in zodra hij echt speelt, zodat je nooit een zwart gat ziet bij trage verbindingen. */ .yg-hero__bg video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--d-reveal) var(--ease); } .yg-hero__bg video.is-playing { opacity: 1; } /* Donkere gradient links -> rechts, plus bodem-, top- en basislaag. */ .yg-hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--grad-hero-x), var(--grad-hero-y), var(--grad-hero-top), var(--hero-scrim); } .yg-hero__inner { position: relative; z-index: var(--z-base); width: 100%; } .yg-hero__content { max-width: 48rem; } /* Het vaste hero-ritme: meta 16 -> titel 20 -> intro 32 -> button 48 -> countdown */ /* Mobiel ritme: eyebrow 40 boven de kop, kop 8 boven de subtekst, subtekst 16 boven de CTA, CTA 40 boven de countdown. Desktop houdt het ruimere ritme. */ .yg-hero__meta + .yg-hero__title { margin-block-start: var(--sp-10); } .yg-hero__title + .yg-hero__intro { margin-block-start: var(--sp-2); } .yg-hero__intro + .yg-hero__cta { margin-block-start: var(--sp-4); } .yg-hero__cta + .yg-countdown { margin-block-start: var(--sp-10); } @media (min-width: 768px) { .yg-hero__meta + .yg-hero__title { margin-block-start: var(--sp-4); } .yg-hero__title + .yg-hero__intro { margin-block-start: var(--sp-5); } .yg-hero__intro + .yg-hero__cta { margin-block-start: var(--sp-8); } .yg-hero__cta + .yg-countdown { margin-block-start: var(--sp-12); } } .yg-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); font-family: var(--font-display); font-size: var(--t-label); font-weight: var(--w-heading); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-on-dark); } .yg-hero__meta span { display: inline-flex; align-items: center; gap: var(--sp-3); } .yg-hero__meta span + span::before { content: ""; width: 4px; height: 4px; border-radius: var(--r-circle); background: var(--yellow); } .yg-hero__title { color: var(--white); } /* Accentwoord in de hero-titel: het enige gradient-tekstelement. */ .yg-accent { background: var(--grad-ai); -webkit-background-clip: text; background-clip: text; color: transparent; } .yg-hero__intro { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--ink-on-dark-600); max-width: 36rem; text-wrap: balance; } .yg-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); } /* --- Countdown --------------------------------------------------------- */ .yg-countdown { display: flex; flex-direction: column; gap: var(--sp-3); } .yg-countdown__label { font-family: var(--font-display); font-size: var(--t-xs); font-weight: var(--w-heading); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-on-dark-400); } .yg-countdown__units { display: flex; gap: var(--sp-2); } /* Mobiel vullen de vier blokjes samen de volle breedte; vanaf 768px een vaste breedte per blokje, zodat de inhoud (44 vs 11) de laag nooit laat verschuiven terwijl de teller loopt (tabular-nums vangt dat mobiel op). */ .yg-countdown__unit { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); flex: 1 1 0; min-width: 0; padding: var(--sp-3) var(--sp-2); border: var(--bw-hairline) solid var(--border-on-dark); border-radius: var(--r-block); background: var(--surface-on-dark); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } @media (min-width: 768px) { .yg-countdown__unit { flex: none; width: 84px; padding: var(--sp-4) var(--sp-3); } } .yg-countdown__value { font-family: var(--font-display); font-size: var(--t-h3); font-weight: var(--w-display); line-height: 1; font-variant-numeric: tabular-nums; color: var(--white); } .yg-countdown__unit-label { font-family: var(--font-display); font-size: var(--t-xs); font-weight: var(--w-heading); letter-spacing: 0.08em; /* Letter-spacing voegt na de laatste letter ruimte toe; dit compenseert, zodat het woord optisch echt in het midden van het blokje staat. */ padding-inline-start: 0.08em; text-transform: uppercase; color: var(--ink-on-dark-400); } /* --- Media ------------------------------------------------------------- */ .yg-media { position: relative; overflow: hidden; border-radius: var(--r-media); background: var(--surface-alt); } .yg-media img, .yg-media video { width: 100%; height: 100%; object-fit: cover; } .yg-media--16x9 { aspect-ratio: 16 / 9; } .yg-media--4x3 { aspect-ratio: 4 / 3; } .yg-media--1x1 { aspect-ratio: 1 / 1; } .yg-media--3x4 { aspect-ratio: 3 / 4; } .yg-media__caption { margin-block-start: var(--sp-3); } /* Scroll-groei van de aftermovie. De ruimte eromheen staat op de eind-hoogte (gezet door app.js) zodat de pagina-layout nooit verschuift; de video groeit erbinnen gecentreerd mee op echte 16:9. */ .yg-groei-ruimte { display: flex; align-items: center; justify-content: center; } .yg-media--grow { flex: none; } /* --- Distorto-slider: locatiefoto's met WebGL-overgang --------------------- Hoofdbeeld met een thumbnail-strip onderin (actieve thumb licht op met een gele lijn, label linksboven de strip). app.js tekent de overgang op het canvas; zonder WebGL of bij verminderde beweging wisselt de fallback-img met een korte fade. --------------------------------------------------------------------------- */ .yg-distorto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-alt); } .yg-distorto__beeld, .yg-distorto__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .yg-distorto__beeld { transition: opacity var(--d-ui) var(--ease); } .yg-distorto__beeld.is-wissel { opacity: 0; } /* Donker verloop onderin zodat label en thumbnails op elk beeld leesbaar blijven; ligt boven het beeld maar onder de bediening. */ .yg-distorto::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 45%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; } .yg-distorto__label, .yg-distorto__thumbs { z-index: var(--z-base); } .yg-distorto__label { position: absolute; left: var(--sp-4); bottom: calc(var(--sp-4) + 56px + var(--sp-2)); font-family: var(--font-display); font-size: var(--t-xs); font-weight: var(--w-heading); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--white); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.6); } .yg-distorto__thumbs { position: absolute; inset-inline: var(--sp-4); bottom: var(--sp-4); display: flex; gap: var(--sp-2); } .yg-distorto__thumb { position: relative; width: 76px; height: 56px; padding: 0; border: 0; background: var(--black); cursor: pointer; opacity: 0.55; transition: opacity var(--d-hover) var(--ease); } .yg-distorto__thumb img { width: 100%; height: 100%; object-fit: cover; } .yg-distorto__thumb:hover { opacity: 0.85; } .yg-distorto__thumb.is-actief { opacity: 1; } /* Geel accentlijntje onder de actieve thumb. */ .yg-distorto__thumb.is-actief::after { content: ""; position: absolute; inset-inline: 0; bottom: calc(-1 * var(--sp-1)); height: var(--bw-rule); background: var(--yellow); } /* --- Klanten-ticker: doorlopende logostrip onder de hero ------------------- Twee identieke groepen schuiven samen oneindig naar links (elke groep verplaatst exact zijn eigen breedte, dus de loop is naadloos). Pauzeert bij hover; bij verminderde beweging een gewone scrollbare rij. Zonder logo-upload toont een item de naam als wordmark-placeholder. --------------------------------------------------------------------------- */ .yg-ticker { padding-block: var(--sp-10) var(--sp-12); background: var(--white); overflow: hidden; } .yg-ticker__label { display: inline-block; margin-block-end: var(--sp-6); font-family: var(--font-display); font-size: var(--t-label); font-weight: var(--w-heading); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-400); } .yg-ticker__baan { display: flex; overflow: hidden; /* Zachte fade aan beide randen. */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .yg-ticker__groep { display: flex; flex: none; align-items: center; gap: var(--sp-16); padding-inline-end: var(--sp-16); animation: yg-ticker-loop 36s linear infinite; } .yg-ticker__baan:hover .yg-ticker__groep { animation-play-state: paused; } @keyframes yg-ticker-loop { to { transform: translateX(-100%); } } .yg-ticker__item { font-family: var(--font-display); font-size: var(--t-h4); font-weight: var(--w-heading); white-space: nowrap; color: var(--ink-400); } /* Logo-balans in drie klassen op verhouding (gezet door app.js): brede woordmerken op breedte begrensd, compacte logo's iets hoger, staande of vierkante merktekens het hoogst. Zo oogt alles optisch gelijkwaardig. */ .yg-ticker__logo { width: auto; height: auto; max-height: 34px; max-width: 180px; } .yg-ticker__logo--compact { max-height: 42px; } .yg-ticker__logo--mark { max-height: 52px; } @media (prefers-reduced-motion: reduce) { .yg-ticker__groep { animation: none; } .yg-ticker__baan { overflow-x: auto; } } /* --- Zalen: het programma in twee kolommen --------------------------------- Elke zaal een surface-paneel met naam + taal-pill en een hairline-lijst van talks (titel + track/spreker). De note over Orchid Dining eronder. --------------------------------------------------------------------------- */ .yg-zaal { display: flex; flex-direction: column; padding: var(--card-pad); background: var(--surface); border: var(--bw-hairline) solid var(--border); } .yg-zaal__kop { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block-end: var(--sp-5); border-block-end: var(--bw-rule) solid var(--black); } .yg-zaal__talk { padding-block: var(--sp-5); border-block-end: var(--bw-hairline) solid var(--border); } .yg-zaal__talk:last-child { border-block-end: 0; padding-block-end: 0; } .yg-zaal__talk > .yg-h4 + .yg-zaal__meta { margin-block-start: var(--sp-2); } .yg-zaal__meta { font-family: var(--font-display); font-size: var(--t-label); font-weight: var(--w-heading); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-400); } /* --- Teamrail: sprekers-carousel ------------------------------------------- Horizontale rij kaarten met scroll-snap; de kaart in het midden klapt open (foto krimpt naar een inzet bovenin, info verschijnt eronder), de rest is full-bleed foto. app.js koppelt de open-status aan de scrollpositie en de pijlen; op touch werkt swipen native. --------------------------------------------------------------------------- */ .yg-teamrail-wrap { position: relative; } .yg-teamrail { --teamcard-b: 260px; --teamcard-h: 380px; display: flex; gap: var(--gap-card); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: var(--sp-1); /* Links uitgelijnd; de rail stopt zodra de laatste kaart volledig in beeld is (geen doorloop-ruimte aan het einde). */ } .yg-teamrail::-webkit-scrollbar { display: none; } @media (min-width: 768px) { .yg-teamrail { --teamcard-b: 300px; --teamcard-h: 430px; } } .yg-teamcard { position: relative; flex: none; width: var(--teamcard-b); height: var(--teamcard-h); scroll-snap-align: start; background: var(--white); border: var(--bw-hairline) solid var(--border); overflow: hidden; } /* Dicht: foto vult de hele kaart. Open: hij krimpt naar een inzet bovenin. */ .yg-teamcard__foto { position: absolute; inset: 0; overflow: hidden; background: var(--surface-alt); transition: inset 0.55s var(--ease); } .yg-teamcard__foto img, .yg-teamcard__foto .yg-speaker__placeholder { width: 100%; height: 100%; object-fit: cover; } .yg-teamcard.is-open .yg-teamcard__foto { inset: var(--sp-3) var(--sp-3) 42% var(--sp-3); } .yg-teamcard__info { position: absolute; inset-inline: var(--sp-4); bottom: var(--sp-4); top: 60%; display: flex; flex-direction: column; gap: var(--sp-1); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } .yg-teamcard.is-open .yg-teamcard__info { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.15s; } .yg-teamcard__rol { font-size: var(--t-sm); line-height: var(--lh-lead); color: var(--ink-400); } .yg-teamcard__voet { margin-block-start: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } /* Ronde LinkedIn-knop met alleen het icoon: subtiel in de kaartvoet. */ .yg-teamcard__linkedin { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-circle); background: var(--black); color: var(--white); transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); } .yg-teamcard__linkedin:hover, .yg-teamcard__linkedin:focus-visible { background: var(--yellow); color: var(--black); } /* Pijlen: alleen op desktop (mobiel swipet). */ .yg-teamrail__pijl { position: absolute; top: 50%; transform: translateY(-50%); z-index: var(--z-base); display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: var(--bw-button) solid var(--black); border-radius: var(--r-circle); background: var(--white); color: var(--black); cursor: pointer; transition: background-color var(--d-ui) var(--ease), color var(--d-ui) var(--ease); } .yg-teamrail__pijl:hover { background: var(--black); color: var(--white); } .yg-teamrail__pijl.is-verborgen { opacity: 0; visibility: hidden; pointer-events: none; } .yg-teamrail__pijl { transition: background-color var(--d-ui) var(--ease), color var(--d-ui) var(--ease), opacity var(--d-ui) var(--ease), visibility var(--d-ui) var(--ease); } .yg-teamrail__pijl--vorige { left: var(--sp-2); } .yg-teamrail__pijl--volgende { right: var(--sp-2); } @media (min-width: 768px) { .yg-teamrail__pijl { display: flex; } } html:not(.js) .yg-teamrail__pijl { display: none; } @media (prefers-reduced-motion: reduce) { .yg-teamcard__foto, .yg-teamcard__info { transition: none; } } /* --- Spreker ----------------------------------------------------------- */ .yg-speaker { display: flex; flex-direction: column; } .yg-speaker__photo { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-media); background: var(--surface-alt); } .yg-speaker__photo img { width: 100%; height: 100%; object-fit: cover; } /* Placeholder zolang er nog geen portret is: geel vlak met initialen in plaats van een grijs gat, zodat de sectie er altijd af uitziet. */ .yg-speaker__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--yellow); color: var(--black); font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3rem); font-weight: var(--w-display); letter-spacing: -0.02em; } .yg-speaker__photo + .yg-speaker__name { margin-block-start: var(--sp-5); } .yg-speaker__name + .yg-speaker__role { margin-block-start: var(--sp-1); } .yg-speaker__role { font-size: var(--t-body); line-height: var(--lh-lead); color: var(--ink-400); } /* Gradient-woord: de signature AI-gradient als tekstkleur, doorlopend geanimeerd zoals in het brandbook. Alleen voor het woord AI-driven. */ .yg-ai { background: var(--grad-ai-anim); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; animation: yg-ai-schuif 6s linear infinite; } @keyframes yg-ai-schuif { from { background-position: 0% 50%; } to { background-position: 200% 50%; } } @media (prefers-reduced-motion: reduce) { .yg-ai { animation: none; background-position: 50% 50%; } } /* --- Footer ------------------------------------------------------------ Zwart slotvlak met het wordmerk groot als statement, tagline en links ernaast, en een hairline-onderregel met copyright en de eventgegevens. ------------------------------------------------------------------------ */ .yg-footer { padding-block: var(--sp-20) var(--sp-8); background: var(--black); color: var(--ink-on-dark); } .yg-footer__top { display: flex; flex-direction: column; gap: var(--sp-10); } @media (min-width: 768px) { .yg-footer__top { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--sp-16); } } .yg-footer__brand { display: flex; flex-direction: column; gap: var(--sp-6); max-width: 42rem; } /* Het wordmerk als statement: in balans met de regelbreedte van de tagline eronder (niet breder dan de langste tekstregel). */ .yg-footer__logo img { width: min(100%, 34rem); height: auto; } /* Mobiel: wordmerk over de volle breedte, tekst en links gecentreerd. */ @media (max-width: 767px) { .yg-footer__brand { align-items: center; } .yg-footer__logo img { width: 100%; } .yg-footer__tagline { text-align: center; } .yg-footer__links { align-items: center; width: 100%; } } .yg-footer__tagline { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--ink-on-dark-600); text-wrap: balance; } .yg-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); flex: none; } .yg-footer__links .yg-link { color: var(--ink-on-dark); transition: color var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease); } .yg-footer__links .yg-link:hover { color: var(--yellow); opacity: 1; } .yg-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-6); margin-block-start: var(--sp-16); padding-block-start: var(--sp-6); border-block-start: var(--bw-hairline) solid var(--border-on-dark); font-size: var(--t-xs); color: var(--ink-on-dark-400); } /* --- Lightbox: foto groot bekijken (alleen mobiel, geopend via app.js) ---- */ .yg-lightbox { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--sp-5); } .yg-lightbox.is-open { display: flex; } .yg-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.88); -webkit-backdrop-filter: blur(14px) saturate(0.85); backdrop-filter: blur(14px) saturate(0.85); animation: yg-fade var(--d-ui) var(--ease); } .yg-lightbox__inhoud { position: relative; max-width: 100%; animation: yg-rise var(--d-ui) var(--ease); } .yg-lightbox__beeld { display: block; max-width: 100%; max-height: 74svh; border-radius: var(--r-media); } /* Voetregel: label links, bladerpijlen rechts. */ .yg-lightbox__voet { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-block-start: var(--sp-4); min-height: 44px; } .yg-lightbox__label { font-family: var(--font-display); font-size: var(--t-xs); font-weight: var(--w-heading); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-on-dark-400); } .yg-lightbox__pijlen { display: flex; gap: var(--sp-2); margin-inline-start: auto; } .yg-lightbox__pijl { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--white); cursor: pointer; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55)); } /* Subtiel kruis rechtsboven in de foto zelf; de schaduw houdt hem leesbaar op elk beeld. */ .yg-lightbox__sluit { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--white); cursor: pointer; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55)); } @media (prefers-reduced-motion: reduce) { .yg-lightbox__backdrop, .yg-lightbox__inhoud { animation: none; } } /* --- Modal: het aanmeldformulier -------------------------------------------- Werkt op drie manieren, in deze volgorde: 1. JS opent hem en beheert focus (normale situatie) 2. Zonder JS pakt :target hem op, zodat de link altijd iets doet 3. Zonder CSS blijft het gewoon een formulier onderaan de pagina -------------------------------------------------------------------------- */ .yg-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: flex-end; justify-content: center; } .yg-modal.is-open, .yg-modal:target { display: flex; } /* Zodra JS de modal beheert mag :target hem niet meer openduwen. */ .js .yg-modal:target:not(.is-open) { display: none; } @media (min-width: 768px) { .yg-modal { align-items: center; padding: var(--sp-8); } } .yg-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); -webkit-backdrop-filter: blur(14px) saturate(0.85); backdrop-filter: blur(14px) saturate(0.85); animation: yg-fade var(--d-ui) var(--ease); } .yg-modal__panel { position: relative; width: 100%; max-width: 44rem; max-height: 92svh; overflow-y: auto; padding: var(--card-pad); padding-block-start: var(--sp-12); background: var(--white); border-radius: var(--r-block); animation: yg-rise var(--d-ui) var(--ease); } @media (min-width: 768px) { .yg-modal__panel { max-height: 88svh; padding: var(--sp-12); } } /* Mobiel is de modal een bottom-sheet (Teamtrip-stijl): hij schuift van onderen in beeld, met ronde bovenhoeken en een sleepgreep waarmee je hem omlaag kunt trekken om te sluiten (app.js). */ .yg-modal__greep { display: none; } @media (max-width: 767px) { .yg-modal__panel { border-radius: 24px 24px 0 0; animation: yg-sheet-op 0.45s var(--ease); will-change: transform; } .yg-modal__greep { display: block; position: sticky; top: calc(-1 * var(--sp-12)); z-index: 2; height: 28px; margin: calc(-1 * var(--sp-12)) calc(-1 * var(--sp-5)) 0; cursor: grab; touch-action: none; } .yg-modal__greep::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 44px; height: 4px; border-radius: 2px; background: var(--border); } } @keyframes yg-sheet-op { from { transform: translateY(100%); } } .yg-modal__close { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-circle); background: transparent; font-size: 28px; line-height: 1; color: var(--ink-400); cursor: pointer; transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); } .yg-modal__close:hover { background: var(--surface-alt); color: var(--ink); } .yg-modal__head { margin-block-end: var(--sp-8); } .yg-modal__head .yg-small { font-size: var(--t-body); text-wrap: balance; } .yg-modal__head > .yg-eyebrow { margin-block-end: var(--gap-label-title); } .yg-modal__head > .yg-h3 + .yg-small { margin-block-start: var(--gap-title-text); } .yg-modal__success { display: flex; flex-direction: column; align-items: flex-start; } .yg-modal__success > .yg-eyebrow { margin-block-end: var(--gap-label-title); } .yg-modal__success > .yg-h3 + .yg-body { margin-block-start: var(--gap-title-text); } .yg-modal__success > .yg-btn { margin-block-start: var(--gap-text-cta); } /* Webinar-teaser in het succes-scherm: geel accentvlak met eigen CTA. */ .yg-succes-extra { width: 100%; margin-block-start: var(--sp-8); padding: var(--card-pad); background: var(--yellow); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); } .yg-succes-extra .yg-body { color: rgba(0, 0, 0, 0.78); } .yg-succes-extra .yg-btn { margin-block-start: var(--sp-2); } /* Op het gele vlak hovert de zwarte knop naar wit (geel-op-geel zou onzichtbaar zijn). */ .yg-succes-extra .yg-btn--primary:hover { background: var(--white); border-color: var(--white); color: var(--black); } /* Turnstile-widget: alleen ruimte reserveren als hij er echt is. */ .yg-turnstile:empty { display: none; } @keyframes yg-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes yg-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .yg-modal__backdrop, .yg-modal__panel { animation: none; } } /* Scrollvergrendeling van de achtergrond terwijl de modal open is. */ body.is-locked { overflow: hidden; } /* --- Stapeldek: panelen die over elkaar heen scrollen ---------------------- Voor "Over de dag": drie panelen over de volle contentbreedte die tijdens het scrollen van onder naar boven verschijnen en op elkaar stapelen (position: sticky, geen JavaScript). Elke vorige kaart blijft --deck-peek zichtbaar boven de volgende. Kleurvolgorde: geel, wit, zwart. Let op: geen transform op het dek of zijn ancestors (breekt sticky), dus het dek krijgt bewust géén .yg-reveal. --------------------------------------------------------------------------- */ .yg-stackdeck { --deck-peek: 14px; display: flex; flex-direction: column; gap: var(--sp-12); } .yg-stackcard { position: sticky; top: calc(var(--nav-h) + var(--i, 0) * var(--deck-peek)); display: flex; flex-direction: column; padding: var(--card-pad); border: var(--bw-hairline) solid var(--border); border-radius: var(--r-block); overflow: hidden; } /* Kleurvarianten. De metaregel en placeholders kleuren per paneel mee. */ .yg-stackcard--yellow { background: var(--yellow); border-color: var(--yellow); color: var(--black); --panel-rule: rgba(0, 0, 0, 0.32); --panel-muted: rgba(0, 0, 0, 0.62); --panel-slot: rgba(0, 0, 0, 0.06); } .yg-stackcard--white { background: var(--white); border-color: var(--border); color: var(--ink); --panel-rule: var(--border); --panel-muted: var(--ink-400); --panel-slot: var(--surface-alt); } .yg-stackcard--black { background: var(--black); border-color: var(--black); color: var(--ink-on-dark); --panel-rule: var(--border-on-dark); --panel-muted: var(--ink-on-dark-400); --panel-slot: rgba(255, 255, 255, 0.08); } /* Metaregel: nummer links, label rechts, hairline eronder. */ .yg-stackcard__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-block-end: var(--sp-3); border-block-end: var(--bw-hairline) solid var(--panel-rule); font-family: var(--font-display); font-size: var(--t-label); font-weight: var(--w-heading); letter-spacing: var(--ls-label); text-transform: uppercase; } .yg-stackcard__meta span:last-child { color: var(--panel-muted); } /* Het gele nummer is het accent op het zwarte paneel. */ .yg-stackcard--black .yg-stackcard__meta span:first-child { color: var(--yellow); } .yg-stackcard__title { margin-block-start: var(--sp-6); font-family: var(--font-display); font-size: var(--t-h1); font-weight: var(--w-display); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; } .yg-stackcard__text { margin-block-start: var(--sp-3); max-width: var(--measure); font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: var(--w-body); text-wrap: balance; } .yg-stackcard--yellow .yg-stackcard__text { color: rgba(0, 0, 0, 0.78); } .yg-stackcard--white .yg-stackcard__text { color: var(--ink-600); } .yg-stackcard--black .yg-stackcard__text { color: var(--ink-on-dark-600); } /* De foto vult de rest van het paneel; altijd zwart-wit. */ /* Beeldvlak altijd 16:9, op elk formaat: de kaart is zo hoog als zijn inhoud in plaats van de viewport. */ .yg-stackcard__media { position: relative; flex: none; aspect-ratio: 16 / 9; margin-block-start: var(--sp-6); background: var(--panel-slot); overflow: hidden; } .yg-stackcard__media img:not(.yg-stackcard__icon) { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); } .yg-stackcard__icon { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; opacity: 0.25; object-fit: contain; } /* Verminderde beweging of geen sticky-ruimte: rustige, statische blokken. */ @media (prefers-reduced-motion: reduce) { .yg-stackcard { position: static; height: auto; } .yg-stackcard__media { flex: none; aspect-ratio: 3 / 2; } } /* --- Quote: review met naam en rol ----------------------------------------- Drie naast elkaar onder de aftermovie. Zwart 2px-streepje boven (zelfde taal als de feiten), quote als statement in Poppins, naam eronder. --------------------------------------------------------------------------- */ .yg-quote-grid { margin-block-start: var(--block-gap); } /* Het aantal kolommen volgt het aantal quotes: bij drie of meer de gewone drie kolommen, bij twee elk de halve breedte, bij één de halve pagina. */ @media (min-width: 1000px) { .yg-quote-grid:has(li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .yg-quote-grid:has(li:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 50%; } } /* Mobiel: carrousel. Elke quote full width met scroll-snap; app.js wisselt elke 4 seconden automatisch door en pauzeert zodra je zelf swipet. */ @media (max-width: 767px) { .yg-quote-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .yg-quote-grid::-webkit-scrollbar { display: none; } .yg-quote-grid > li { flex: 0 0 100%; scroll-snap-align: start; } } .yg-quote { display: flex; flex-direction: column; gap: var(--sp-3); padding-block-start: var(--sp-5); border-block-start: var(--bw-rule) solid var(--black); } /* Voetregel: naam en functie links, klantlogo rechts. */ .yg-quote__voet { margin-block-start: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .yg-quote__logo { flex: none; max-height: 32px; width: auto; } .yg-quote__text { font-family: var(--font-display); font-size: var(--t-h4); font-weight: var(--w-heading); line-height: 1.45; letter-spacing: var(--ls-heading); text-wrap: balance; } .yg-quote__name { margin-block-start: auto; font-size: var(--t-body); font-weight: var(--w-body-em); color: var(--ink-400); } /* --- Statement-band: de feitenrij over de volle breedte -------------------- */ .yg-statband { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: var(--block-gap); border-block: var(--bw-hairline) solid var(--border); } .yg-statband__item { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-6) var(--sp-5); border-inline-start: var(--bw-hairline) solid var(--border); } /* Mobiel (2 kolommen): linkerkolom start op de contentlijn (geen lijn, geen inspring), rechterkolom eindigt erop; tweede rij krijgt een toplijn. */ .yg-statband__item:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; } .yg-statband__item:nth-child(even) { padding-inline-end: 0; } .yg-statband__item:nth-child(n + 3) { border-block-start: var(--bw-hairline) solid var(--border); } @media (min-width: 1000px) { .yg-statband { grid-template-columns: repeat(4, minmax(0, 1fr)); } .yg-statband__item { padding: var(--sp-8) var(--sp-6); border-inline-start: var(--bw-hairline) solid var(--border); } /* Eén rij: alleen de buitenranden vallen op de contentlijn. */ .yg-statband__item:nth-child(odd) { border-inline-start: var(--bw-hairline) solid var(--border); padding-inline-start: var(--sp-6); } .yg-statband__item:nth-child(even) { padding-inline-end: var(--sp-6); } .yg-statband__item:first-child { border-inline-start: 0; padding-inline-start: 0; } .yg-statband__item:last-child { padding-inline-end: 0; } .yg-statband__item:nth-child(n + 3) { border-block-start: 0; } } .yg-statband__value { font-family: var(--font-display); font-size: var(--t-h2); font-weight: var(--w-display); line-height: 1.05; letter-spacing: var(--ls-heading); } .yg-statband__label { font-size: var(--t-body); color: var(--ink-400); } /* ========================================================================== 9. HULPKLASSEN EN MOTION ========================================================================== */ .yg-hidden { display: none !important; } /* Alleen voor screenreaders, blijft in de toegankelijkheidsboom. */ .yg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .yg-center { text-align: center; } .yg-measure { max-width: var(--measure); } .yg-measure-narrow { max-width: var(--measure-narrow); } /* Scroll-reveal: één patroon voor de hele pagina. JS zet .is-in. */ .yg-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--d-reveal) var(--ease), transform var(--d-reveal) var(--ease); } .yg-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .yg-reveal { opacity: 1; transform: none; } }