/* Theme Name: YCW Life & Garden Oostburg Theme URI: https://yourcloudweb.nl Author: Yourcloudweb Author URI: https://yourcloudweb.nl Description: Maatwerk WordPress-thema voor Life & Garden Oostburg. Pixel-identiek aan het ontwerp van Yourcloudweb (variant A), met mega-menu, workshops, reviews, merken en demo-content. Version: 2.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ycw Tags: tuincentrum, mega-menu, custom-post-types, widgets, nederlands __ __ _ _ _ \ \ / /__ _ _ _ __| |__ ___ _ _| | ___ __| | \ \ / / _ \| | | | '__| '_ \ / _ \| | | | |/ _ \/ _` | \ V / (_) | |_| | | | | | | (_) | |_| | | __/ (_| | \_/ \___/ \__,_|_| |_| |_|\___/ \__,_|_|\___|\__,_| W E B ============================================================ YOURCLOUDWEB · https://yourcloudweb.nl Alle classes, functies en hooks in dit thema dragen het ycw-/ycw_-voorvoegsel (YourCloudWeb). Stylesheet = het originele ontwerp (base + brand + variant-a), 1-op-1 overgenomen zodat de site identiek is aan het voorbeeld. ============================================================ */ /* ============================================================================= SHARED BASE.CSS Tuincentrum WaaS — Gedeeld skelet voor alle varianten Bevat: Google Fonts, CSS reset, structurele tokens, container utilities Geen visuele variant-stijlen — alleen fundament ============================================================================= */ /* ----------------------------------------------------------------------------- 1. GOOGLE FONTS Fonts worden geladen via tags in de HTML met preconnect hints. Zie homepage.html van elke variant — niet via @import hier. ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- 2. ROOT TOKENS — basiswaarden, varianten overschrijven naar behoefte ----------------------------------------------------------------------------- */ :root { /* Typografie */ --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Poppins', system-ui, sans-serif; /* Basiskleur tokens — neutrale defaults */ --color-primary: #295640; --color-accent: #f9851f; --color-bg: #f8f7f2; --color-text: #112a1e; /* Layout */ --container-width: 1280px; --section-padding: 80px 0; --container-pad-x: 5%; /* Border radius */ --radius: 8px; /* Schaduw */ --shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* Transitie */ --transition: all 0.3s ease; } /* ----------------------------------------------------------------------------- 3. MODERNE CSS RESET ----------------------------------------------------------------------------- */ /* Box-model reset */ *, *::before, *::after { box-sizing: border-box; } /* Verwijder standaard marges en paddings */ * { margin: 0; padding: 0; } /* HTML basis */ html { font-size: 100%; overflow-x: clip; /* Prevent horizontal scroll without breaking position:sticky */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Smooth scroll only when user has no motion preference */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Body basis */ body { font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Koppen */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-text); text-wrap: balance; } /* Paragrafen */ p { max-width: 70ch; text-wrap: pretty; } /* Links */ a { color: inherit; text-decoration: none; } /* Afbeeldingen */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* Formulier-elementen erven lettertype */ input, button, textarea, select { font: inherit; } /* Lijsten zonder stijl */ ul, ol { list-style: none; } /* Tabellen */ table { border-collapse: collapse; border-spacing: 0; } /* Citaten */ blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none; } /* Adresblok niet cursief */ address { font-style: normal; } /* Iframe standaard */ iframe { border: 0; display: block; } /* Buttons — verwijder standaard styling */ button { background: none; border: none; cursor: pointer; } /* Focus zichtbaar */ :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; } :focus:not(:focus-visible) { outline: none; } /* Screenreader-only utility */ .ycw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Skip-to-content link — verborgen totdat gefocust */ .ycw-skip-link { position: absolute; top: -100%; left: 1rem; z-index: 9999; padding: 0.625rem 1.25rem; background: var(--color-primary, #295640); color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 0 0 var(--radius, 8px) var(--radius, 8px); text-decoration: none; transition: top 0.15s ease; } .ycw-skip-link:focus { top: 0; } /* ----------------------------------------------------------------------------- 4. CONTAINER UTILITY — alle __inner elementen Varianten kunnen --container-width en --container-pad-x overschrijven ----------------------------------------------------------------------------- */ .ycw-container, .ycw-site-header__inner, .ycw-hero__inner, .ycw-features__inner, .ycw-categories__inner, .ycw-seizoen__inner, .ycw-workshops__inner, .ycw-nieuws__inner, .ycw-reviews__inner, .ycw-merken__inner, .ycw-contact__inner, .ycw-site-footer__inner, .ycw-site-footer__bodem-inner, /* Inner-page containers (zie brand.css §19) */ .ycw-page-hero__inner, .ycw-contactform__inner, .ycw-bezoek__inner, .ycw-assortiment-intro__inner, .ycw-nieuws-overzicht__inner, .ycw-verhaal__inner, .ycw-team__inner, .ycw-mega__inner { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--container-pad-x); } /* ----------------------------------------------------------------------------- 5. BTN — STRUCTURELE BASIS (varianten voegen visuele laag toe) ----------------------------------------------------------------------------- */ .ycw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.75rem; font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; border: 2px solid transparent; transition: var(--transition); -webkit-user-select: none; user-select: none; } .ycw-btn:active { transform: translateY(1px); transition: transform 0.05s ease; /* Fast snap — overrides inherited transition: all */ } .ycw-btn:disabled, .ycw-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } /* ----------------------------------------------------------------------------- 6. SECTION SPACING — structurele basis padding per sectie ----------------------------------------------------------------------------- */ .ycw-features, .ycw-categories, .ycw-seizoen, .ycw-nieuws, .ycw-reviews, .ycw-contact { padding: var(--section-padding); } /* ----------------------------------------------------------------------------- 7. SECTION-HEADER — gedeeld tekstblok boven secties ----------------------------------------------------------------------------- */ .ycw-section-header { text-align: center; margin-bottom: 3rem; } .ycw-section-header__title { font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: 1rem; } .ycw-section-header__subtitle { font-size: 1.0625rem; line-height: 1.7; max-width: 56ch; margin-inline: auto; } /* ----------------------------------------------------------------------------- 8. KEYFRAMES — gedeeld voor alle varianten ----------------------------------------------------------------------------- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } } /* ----------------------------------------------------------------------------- 9. REDUCED MOTION ----------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ----------------------------------------------------------------------------- 10. PRINT RESET ----------------------------------------------------------------------------- */ @media print { *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } img { page-break-inside: avoid; } h2, h3 { page-break-after: avoid; } } /* ============================================================================= BRAND.CSS — Life & Garden Oostburg Merkprofiel — single source of truth voor alle visuele styling Vereist: shared/css/base.css geladen VOOR dit bestand ┌─────────────────────────────────────────────────────────────────────────┐ │ KLANT-AANPASSING — dit zijn de tokens die je per klant aanpast: │ │ │ │ Kleuren (sectie 1, :root): │ │ --color-primary Hoofdkleur (buttons, links, accenten) │ │ --color-primary-dark Donkere hover-staat van de hoofdkleur │ │ --color-primary-light Lichte tint voor achtergronden & hover │ │ --color-accent-orange Accentkleur (sterren, badges, highlights) │ │ --color-bg Pagina-achtergrond │ │ --color-bg-white Kaart-achtergrond (puur wit) │ │ --color-bg-green-light Alternatieve sectie-achtergrond │ │ --color-text Hoofdtekstkleur │ │ --color-text-muted Subtekst, bijschriften │ │ │ │ Typografie (sectie 1, :root): │ │ --font-heading Koptekst lettertype (serif aanbevolen) │ │ --font-body Bodytekst lettertype │ │ Vergeet ook de Google Fonts in homepage.html te updaten! │ │ │ │ Kaarten / borders (sectie 1, :root): │ │ --radius-card Hoekafronding voor kaarten │ │ --radius-btn Hoekafronding voor knoppen │ │ --radius-badge Hoekafronding voor badges / labels │ │ --radius-icon Hoekafronding voor icoonvakjes │ │ --shadow-card Standaard kaartschaduw │ │ --shadow-card-hover Kaartschaduw bij hover │ │ --shadow-header Schaduw onder de navigatiebalk │ │ │ │ Layout (sectie 1, :root): │ │ --section-padding Verticale witruimte rondom secties │ │ --header-height Hoogte van de sticky navigatiebalk │ │ --transition CSS-transitie voor hover-effecten │ │ --transition-img CSS-transitie voor afbeelding-zoom │ └─────────────────────────────────────────────────────────────────────────┘ INHOUDSOPGAVE 1. Design tokens 2. Body & pagina-animatie 3. Header & navigatie 4. Hamburger menu (mobiel overlay) 5. KPI-balk 6. Buttons (btn--primary, btn--secondary) 7. Feature-blocks (kaart-stijl, niet het grid) 8. Category-card (kaart-stijl, niet het grid) 9. Nieuws-kaart (kaart-stijl, niet het grid) 10. Seizoen shared content-stijl 11. Reviews sectie (volledig — layout is identiek in alle varianten) 12. Merken sectie 13. Contact sectie 14. Footer 15. Workshops — kaart-stijl & modal (gedeeld) 16. Responsive — Header & hamburger (≤1023px) 17. Responsive — Shared tablet (768–1023px) 18. Responsive — Shared mobiel (<768px) ============================================================================= */ /* ----------------------------------------------------------------------------- 1. DESIGN TOKENS Life & Garden Oostburg merkprofiel. Varianten overschrijven ALLEEN layout-tokens in hun eigen :root-blok — nooit kleur- of font-tokens. ----------------------------------------------------------------------------- */ :root { /* Kleurenpalet — Life & Garden Oostburg */ --color-primary: #7ab648; --color-primary-dark: #5a8e2f; --color-primary-light: #eef6e4; --color-accent-orange: #f0a500; --color-accent-pink: #df0172; /* Roze accent — van lifeandgardenoostburg.nl */ --color-accent-pink-light:#fce6f1; /* Lichte roze tint voor achtergronden */ --color-bg: #f9f9f7; --color-bg-white: #ffffff; --color-bg-green-light: #f2f7ed; --color-text: #3a3a3a; --color-text-muted: #7a7a7a; /* Typografie — Playfair Display + Poppins (template standaard) */ --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Poppins', sans-serif; /* Border radius */ --radius-card: 8px; --radius-btn: 4px; --radius-badge: 4px; --radius-icon: 6px; /* Schaduwen */ --shadow-card: 0 2px 12px rgba(60, 100, 40, 0.10); --shadow-card-hover: 0 6px 24px rgba(60, 100, 40, 0.18); --shadow-header: 0 2px 16px rgba(60, 100, 40, 0.10); /* Layout */ --section-padding: 90px 0; --header-height: 80px; /* Transitie */ --transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; --transition-img: transform 0.4s ease; } /* ----------------------------------------------------------------------------- 2. BODY & PAGINA-ANIMATIE ----------------------------------------------------------------------------- */ body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } @media (prefers-reduced-motion: no-preference) { body { animation: fadeIn 0.35s ease both; } } /* ----------------------------------------------------------------------------- 3. HEADER & NAVIGATIE ----------------------------------------------------------------------------- */ .ycw-site-header { position: sticky; top: 0; z-index: 300; background-color: var(--color-bg-white); box-shadow: var(--shadow-header); height: var(--header-height); display: flex; align-items: center; transition: box-shadow 0.3s ease, background-color 0.3s ease; } .ycw-site-header--scrolled { box-shadow: 0 2px 24px rgba(60, 100, 40, 0.16), 0 1px 0 rgba(122, 182, 72, 0.10); } .ycw-site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 100%; } /* Logo */ .ycw-site-header__logo { flex-shrink: 0; display: flex; align-items: center; text-decoration: none; } .ycw-site-header__logo img { height: 42px; width: auto; } /* Navigatie */ .ycw-site-nav { flex: 1; display: flex; justify-content: center; } .ycw-site-nav__list { display: flex; align-items: center; gap: 0.25rem; } .ycw-site-nav__link { display: block; padding: 0.5rem 0.875rem; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--color-text); letter-spacing: 0.01em; border-radius: var(--radius-badge); transition: var(--transition); white-space: nowrap; text-decoration: none; } .ycw-site-nav__link:hover, .ycw-site-nav__link[aria-current="page"] { color: var(--color-primary); background-color: var(--color-primary-light); } /* Header CTA */ .ycw-site-header__cta { flex-shrink: 0; } /* ----------------------------------------------------------------------------- 4. HAMBURGER MENU — ICOON + OPEN-TOESTAND ----------------------------------------------------------------------------- */ /* Knop zelf — verborgen op desktop, zichtbaar via responsive sectie 16 */ .ycw-site-header__menu-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; gap: 5px; padding: 0; background: none; border: none; cursor: pointer; border-radius: var(--radius-btn); transition: var(--transition); } .ycw-site-header__menu-toggle:hover { background-color: var(--color-primary-light); } /* Drie lijntjes */ .ycw-site-header__menu-icon, .ycw-site-header__menu-icon::before, .ycw-site-header__menu-icon::after { display: block; width: 22px; height: 2px; background-color: var(--color-text); border-radius: 2px; transition: var(--transition); } .ycw-site-header__menu-icon { position: relative; } .ycw-site-header__menu-icon::before, .ycw-site-header__menu-icon::after { content: ''; position: absolute; left: 0; } .ycw-site-header__menu-icon::before { top: -7px; } .ycw-site-header__menu-icon::after { top: 7px; } /* Kruisje-animatie wanneer menu open is */ .ycw-site-header__menu-toggle[aria-expanded="true"] .ycw-site-header__menu-icon { background-color: transparent; } .ycw-site-header__menu-toggle[aria-expanded="true"] .ycw-site-header__menu-icon::before { transform: rotate(45deg); top: 0; } .ycw-site-header__menu-toggle[aria-expanded="true"] .ycw-site-header__menu-icon::after { transform: rotate(-45deg); top: 0; } /* ----------------------------------------------------------------------------- 5. KPI-BALK — donkergroen, scrollt soepel weg ----------------------------------------------------------------------------- */ .ycw-kpi-bar { position: relative; z-index: 400; background-color: var(--color-primary-dark); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 60%); overflow: hidden; transform: translateY(0); opacity: 1; pointer-events: auto; transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.38s ease; } /* Sierrand onderkant */ .ycw-kpi-bar::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.15) 20%, rgba(240, 165, 0, 0.4) 50%, rgba(255, 255, 255, 0.15) 80%, transparent 100% ); } /* Verborgen toestand — JS voegt class toe bij scrollen */ .ycw-kpi-bar--hidden { /* De balk staat in de documentstroom en scrolt vanzelf uit beeld. De oude translateY-verstopanimatie schoof tijdens de overgang zichtbaar over de sticky header heen (logo half bedekt), op elke schermbreedte. De klasse blijft bestaan voor het schaduw-effect op de header (--scrolled). */ pointer-events: none; } .ycw-kpi-bar__inner { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-pad-x); } /* Lijst van KPI-items */ .ycw-kpi-bar__list { display: flex; align-items: stretch; justify-content: center; list-style: none; margin: 0; padding: 0; height: 46px; } /* Individueel item */ .ycw-kpi-bar__item { display: flex; align-items: center; gap: 0.45rem; padding: 0 1.75rem; position: relative; white-space: nowrap; } /* Verticale scheidingslijn tussen items */ .ycw-kpi-bar__item + .ycw-kpi-bar__item::before { content: ''; position: absolute; left: 0; top: 25%; height: 50%; width: 1px; background: rgba(255, 255, 255, 0.18); } /* Icoon */ .ycw-kpi-bar__icon { display: flex; align-items: center; flex-shrink: 0; } .ycw-kpi-bar__icon img { width: 16px; height: 16px; filter: brightness(0) invert(1) opacity(0.75); display: block; } /* Tekst */ .ycw-kpi-bar__text { font-family: var(--font-body); font-size: 0.775rem; font-weight: 400; color: rgba(255, 255, 255, 0.82); letter-spacing: 0.01em; line-height: 1.2; } .ycw-kpi-bar__text strong { font-weight: 600; color: #ffd97a; } /* ----------------------------------------------------------------------------- 6. KNOPPEN Structurele .btn-basis zit in base.css — dit zijn de visuele lagen. ----------------------------------------------------------------------------- */ /* Primaire knop: gevuld groen */ .ycw-btn--primary { background-color: var(--color-primary); color: #ffffff; border-color: var(--color-primary); border-radius: var(--radius-btn); padding: 0.8125rem 2rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; } .ycw-btn--primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(90, 142, 47, 0.35); } .ycw-btn--primary:active { transform: translateY(0); box-shadow: none; } /* Secundaire knop: outline wit — standaard voor donkere achtergronden (hero). Contextregels hieronder zorgen voor groen outline op lichte achtergronden. */ .ycw-btn--secondary { background-color: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.6); border-radius: var(--radius-btn); padding: 0.8125rem 2rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; } .ycw-btn--secondary:hover { background-color: rgba(255, 255, 255, 0.12); border-color: #ffffff; color: #ffffff; transform: translateY(-2px); } .ycw-btn--secondary:active { transform: translateY(0); } /* Secundaire knop op lichte achtergrond */ .ycw-nieuws__footer .ycw-btn--secondary, .ycw-contact .ycw-btn--secondary, .ycw-workshops__footer .ycw-btn--secondary { color: var(--color-primary); border-color: var(--color-primary); } .ycw-nieuws__footer .ycw-btn--secondary:hover, .ycw-contact .ycw-btn--secondary:hover, .ycw-workshops__footer .ycw-btn--secondary:hover { background-color: var(--color-primary); color: #ffffff; } /* Roze actieknop — voor promotionele / seizoens-CTA's */ .ycw-btn--actie { background-color: var(--color-accent-pink); color: #ffffff; border-color: var(--color-accent-pink); border-radius: var(--radius-btn); padding: 0.8125rem 2rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; } .ycw-btn--actie:hover { background-color: #b8005e; border-color: #b8005e; color: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(223, 1, 114, 0.35); } .ycw-btn--actie:active { transform: translateY(0); box-shadow: none; } /* ----------------------------------------------------------------------------- 7. FEATURE-BLOCKS — kaart-visuele stijl Het grid (.features__list) is variant-specifiek en staat in variant-x.css ----------------------------------------------------------------------------- */ .ycw-features { background-color: var(--color-bg-green-light); padding: var(--section-padding); } .ycw-feature-block { min-width: 0; /* 1fr-kolommen echt gelijk: lange woorden als "Kwaliteitsplanten" mogen de kolom niet oprekken */ background-color: var(--color-bg-white); border-radius: var(--radius-card); padding: 2.5rem; box-shadow: var(--shadow-card); transition: var(--transition); display: flex; flex-direction: column; gap: 1rem; } .ycw-feature-block:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); } .ycw-feature-block__icon { width: 64px; height: 64px; background-color: var(--color-primary); border-radius: var(--radius-icon); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ycw-feature-block__icon img { width: 32px; height: 32px; filter: brightness(0) invert(1); } .ycw-feature-block__title { overflow-wrap: break-word; font-family: var(--font-heading); font-size: 1.375rem; font-weight: 700; color: var(--color-text); line-height: 1.3; } .ycw-feature-block__text { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 300; color: var(--color-text-muted); line-height: 1.7; max-width: none; } /* ----------------------------------------------------------------------------- 8. CATEGORY-CARD — kaart-visuele stijl Het grid (.categories__grid) is variant-specifiek en staat in variant-x.css ----------------------------------------------------------------------------- */ .ycw-categories { background-color: var(--color-bg); padding: var(--section-padding); } .ycw-category-card { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); background-color: var(--color-bg-white); transition: var(--transition); } .ycw-category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .ycw-category-card__link { display: block; text-decoration: none; color: inherit; height: 100%; } .ycw-category-card__image-wrap { overflow: hidden; aspect-ratio: 4 / 3; } .ycw-category-card__image { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-img); } .ycw-category-card:hover .ycw-category-card__image { transform: scale(1.05); } .ycw-category-card__body { background-color: var(--color-bg-white); padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ycw-category-card__title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; color: var(--color-text); line-height: 1.3; } .ycw-category-card__cta { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; color: var(--color-primary); white-space: nowrap; display: flex; align-items: center; gap: 0.375rem; transition: var(--transition); } .ycw-category-card__cta::after { content: '\2192'; font-size: 1rem; transition: var(--transition); } .ycw-category-card:hover .ycw-category-card__cta::after { transform: translateX(4px); } /* ----------------------------------------------------------------------------- 9. NIEUWS-KAART — kaart-visuele stijl Het grid (.nieuws__grid) is variant-specifiek en staat in variant-x.css ----------------------------------------------------------------------------- */ .ycw-nieuws { background-color: var(--color-bg); padding: var(--section-padding); } .ycw-nieuws-kaart { border-radius: var(--radius-card); overflow: hidden; background-color: var(--color-bg-white); box-shadow: var(--shadow-card); transition: var(--transition); } .ycw-nieuws-kaart:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .ycw-nieuws-kaart__article { height: 100%; } .ycw-nieuws-kaart__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .ycw-nieuws-kaart__image-wrap { overflow: hidden; aspect-ratio: 16 / 9; flex-shrink: 0; } .ycw-nieuws-kaart__image { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-img); } .ycw-nieuws-kaart:hover .ycw-nieuws-kaart__image { transform: scale(1.05); } .ycw-nieuws-kaart__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; flex: 1; } .ycw-nieuws-kaart__datum { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; color: var(--color-accent-pink); text-transform: uppercase; letter-spacing: 0.04em; } .ycw-nieuws-kaart__title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; color: var(--color-text); line-height: 1.35; } .ycw-nieuws-kaart__excerpt { font-family: var(--font-body); font-size: 0.9rem; font-weight: 300; color: var(--color-text-muted); line-height: 1.65; flex: 1; max-width: none; } .ycw-nieuws-kaart__cta { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--color-primary); display: flex; align-items: center; gap: 0.375rem; margin-top: auto; padding-top: 0.5rem; transition: var(--transition); } .ycw-nieuws-kaart__cta::after { content: '\2192'; font-size: 1rem; transition: var(--transition); } .ycw-nieuws-kaart:hover .ycw-nieuws-kaart__cta::after { transform: translateX(4px); } .ycw-nieuws__footer { text-align: center; } /* ----------------------------------------------------------------------------- 10. SEIZOEN — gedeelde content-styling Layout (grid-structuur) is variant-specifiek en staat in variant-x.css ----------------------------------------------------------------------------- */ .ycw-seizoen__label { display: inline-block; background-color: var(--color-accent-pink); color: #ffffff; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.4rem 1rem; border-radius: var(--radius-badge); text-transform: uppercase; align-self: flex-start; } .ycw-seizoen__title { font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--color-text); line-height: 1.2; } .ycw-seizoen__text { font-family: var(--font-body); font-size: 1rem; font-weight: 400; color: var(--color-text-muted); line-height: 1.75; max-width: none; } .ycw-seizoen__highlights { display: flex; flex-direction: column; gap: 0.625rem; } .ycw-seizoen__highlight { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; color: var(--color-text); display: flex; align-items: center; gap: 0.75rem; } .ycw-seizoen__highlight::before { content: ''; display: block; width: 20px; height: 20px; min-width: 20px; background-color: var(--color-primary-light); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235a8e2f'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-size: 13px; background-repeat: no-repeat; background-position: center; } .ycw-seizoen__media { position: relative; /* anker voor de kortingsbadge */ border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); } /* Kortingsbadge — bewust in HTML/CSS i.p.v. ingebrand in de foto: zo pas je het percentage aan zonder nieuwe foto, blijft hij scherp op elk scherm en werkt hij bij elk seizoensbeeld. De tekst ernaast noemt de korting al, daarom staat de badge op aria-hidden (geen dubbele voorlezing). */ .ycw-seizoen__korting { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2; width: 92px; height: 92px; border-radius: 50%; background: var(--color-accent-pink); color: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; transform: rotate(-8deg); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); border: 3px solid rgba(255, 255, 255, 0.9); } .ycw-seizoen__korting strong { font-family: var(--font-heading); font-size: 1.65rem; font-weight: 700; } .ycw-seizoen__korting span { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; margin-top: 0.15rem; } @media (max-width: 767px) { .ycw-seizoen__korting { width: 76px; height: 76px; top: 0.85rem; right: 0.85rem; } .ycw-seizoen__korting strong { font-size: 1.35rem; } } .ycw-seizoen__image { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; transition: var(--transition-img); } .ycw-seizoen__media:hover .ycw-seizoen__image { transform: scale(1.03); } .ycw-seizoen__content { display: flex; flex-direction: column; gap: 1.25rem; } /* ----------------------------------------------------------------------------- 11. REVIEWS — volledig (layout is identiek in alle drie varianten) ----------------------------------------------------------------------------- */ .ycw-reviews { background-color: var(--color-primary); padding: var(--section-padding); } .ycw-reviews .ycw-section-header__title { color: #ffffff; } .ycw-reviews .ycw-section-header__subtitle { color: rgba(255, 255, 255, 0.75); } .ycw-reviews__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .ycw-review-kaart__article { background-color: var(--color-bg-green-light); border-radius: var(--radius-card); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; height: 100%; transition: var(--transition); } .ycw-review-kaart__article:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .ycw-review-kaart__sterren { display: flex; gap: 0.25rem; } .ycw-review-kaart__ster { font-size: 1.25rem; color: var(--color-accent-pink); line-height: 1; } .ycw-review-kaart__ster--leeg { color: #c8d8cc; } .ycw-review-kaart__tekst { font-family: var(--font-heading); font-style: italic; font-size: 1rem; font-weight: 400; color: var(--color-text); line-height: 1.7; flex: 1; } .ycw-review-kaart__tekst p { max-width: none; } .ycw-review-kaart__auteur { display: flex; flex-direction: column; gap: 0.2rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(122, 182, 72, 0.18); } .ycw-review-kaart__naam { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; color: var(--color-text); } .ycw-review-kaart__locatie { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; color: var(--color-text-muted); } /* ----------------------------------------------------------------------------- 12. MERKEN ----------------------------------------------------------------------------- */ .ycw-merken { background-color: var(--color-bg-white); padding: var(--section-padding); } /* ----------------------------------------------------------------------------- MERKENSLIDER — CSS-only logo-marquee Naadloze oneindige loop, pauzeert bij hover, valt bij prefers-reduced-motion terug op een scrollbare rij. De track bevat twee IDENTIEKE sets en schuift precies één set naar links (-100% / --set-count). Meer of andere logo's? Pas beide sets identiek aan en houd --set-count gelijk aan het aantal sets. ----------------------------------------------------------------------------- */ @keyframes merken-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% / var(--set-count, 2))); } } .ycw-merken__slider { overflow: hidden; /* Zachte fade aan beide randen */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); } .ycw-merken__slider:hover .ycw-merken__track { animation-play-state: paused; } .ycw-merken__track { display: flex; width: max-content; animation: merken-scroll 32s linear infinite; /* snelheid: hoger = trager */ } .ycw-merken__set { display: flex; gap: 1.25rem; padding-inline-end: 1.25rem; /* zelfde ruimte op de naad als tussen de kaarten */ } .ycw-merk-kaart { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 160px; min-height: 110px; padding: 1rem 1.5rem; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-card); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); transition: border-color 0.25s ease, box-shadow 0.25s ease; } .ycw-merk-kaart:hover { border-color: var(--color-primary); box-shadow: var(--shadow-card-hover); } .ycw-merk-kaart__logo { max-width: 150px; max-height: 90px; width: auto; height: auto; object-fit: contain; display: block; filter: grayscale(100%); opacity: 0.7; transition: filter 0.25s ease, opacity 0.25s ease; } .ycw-merk-kaart:hover .ycw-merk-kaart__logo { filter: grayscale(0%); opacity: 1; } /* Toegankelijkheid: geen beweging bij voorkeur -> scrollbaar i.p.v. animatie */ @media (prefers-reduced-motion: reduce) { .ycw-merken__track { animation: none; } .ycw-merken__slider { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; } .ycw-merken__slider::-webkit-scrollbar { display: none; } } @media (max-width: 479px) { } /* ----------------------------------------------------------------------------- 13. CONTACT & OPENINGSTIJDEN ----------------------------------------------------------------------------- */ .ycw-contact { background-color: var(--color-bg); padding: var(--section-padding); } .ycw-contact__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; } .ycw-contact__kaart { background-color: var(--color-bg-white); border-radius: var(--radius-card); padding: 2rem; box-shadow: var(--shadow-card); height: 100%; } .ycw-contact__kaart-titel { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--color-primary-light); } /* Openingstijden tabel */ .ycw-openingstijden { width: 100%; border-collapse: collapse; } .ycw-openingstijden__rij { transition: background-color 0.2s ease; } .ycw-openingstijden__rij:nth-child(even) { background-color: var(--color-primary-light); } .ycw-openingstijden__rij:hover { background-color: var(--color-bg-green-light); } .ycw-openingstijden__dag, .ycw-openingstijden__tijd { padding: 0.625rem 0.75rem; font-family: var(--font-body); font-size: 0.9rem; color: var(--color-text); vertical-align: middle; } .ycw-openingstijden__dag { font-weight: 500; width: 48%; text-align: left; } .ycw-openingstijden__tijd { font-weight: 400; color: var(--color-text-muted); text-align: right; white-space: nowrap; } /* Contactgegevens */ .ycw-contact__adres { font-style: normal; display: flex; flex-direction: column; gap: 1.25rem; } /* Ruimte tussen de contactgegevens en de knop (knop = directe child van de kaart) */ .ycw-contact__kaart > .ycw-btn { margin-top: 1.5rem; } .ycw-contact__gegevens-lijst { display: flex; flex-direction: column; gap: 0.875rem; } .ycw-contact__gegeven { display: flex; flex-direction: column; gap: 0.2rem; } .ycw-contact__gegeven-label { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.06em; } .ycw-contact__gegeven-waarde { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; color: var(--color-text); } .ycw-contact__link { color: var(--color-primary); font-weight: 500; transition: var(--transition); } .ycw-contact__link:hover { color: var(--color-primary-dark); text-decoration: underline; } /* Google Maps iframe */ .ycw-contact__kaart--kaart { padding: 1.5rem; } .ycw-contact__maps-wrap { border-radius: 10px; overflow: hidden; margin-top: 0.5rem; } .ycw-contact__maps { width: 100%; height: 280px; border: 0; display: block; } /* ----------------------------------------------------------------------------- 14. FOOTER ----------------------------------------------------------------------------- */ .ycw-site-footer { background-color: var(--color-primary-dark); } .ycw-site-footer__inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; padding-top: 4rem; padding-bottom: 4rem; } /* Merk / logo kolom */ .ycw-site-footer__merk { display: flex; flex-direction: column; gap: 1rem; } .ycw-site-footer__logo img { height: 40px; width: auto; background: #ffffff; padding: 7px 12px; border-radius: 8px; } .ycw-site-footer__tagline { font-family: var(--font-body); font-size: 0.9rem; font-weight: 300; color: rgba(255, 255, 255, 0.65); line-height: 1.65; max-width: 28ch; } /* Social links */ .ycw-site-footer__social { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; } .ycw-site-footer__social-link { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; color: rgba(255, 255, 255, 0.6); padding: 0.375rem 0.875rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50px; transition: var(--transition); } .ycw-site-footer__social-link:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.08); } /* Nav kolommen */ .ycw-site-footer__nav { display: flex; flex-direction: column; gap: 0.875rem; } .ycw-site-footer__nav-titel { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.25rem; } .ycw-site-footer__nav-lijst { display: flex; flex-direction: column; gap: 0.5rem; } .ycw-site-footer__nav-link { font-family: var(--font-body); font-size: 0.9rem; font-weight: 400; color: rgba(255, 255, 255, 0.7); transition: var(--transition); } .ycw-site-footer__nav-link:hover { color: #ffffff; padding-left: 4px; } /* Footer bodem */ .ycw-site-footer__bodem { background-color: rgba(0, 0, 0, 0.25); border-top: 1px solid rgba(255, 255, 255, 0.07); } .ycw-site-footer__bodem-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1.25rem; padding-bottom: 1.25rem; flex-wrap: wrap; } .ycw-site-footer__copyright { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; color: rgba(255, 255, 255, 0.4); max-width: none; } .ycw-site-footer__juridisch { display: flex; flex-wrap: wrap; gap: 1.25rem; } .ycw-site-footer__juridisch-link { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; color: rgba(255, 255, 255, 0.4); transition: var(--transition); } .ycw-site-footer__juridisch-link:hover { color: rgba(255, 255, 255, 0.75); } /* ----------------------------------------------------------------------------- 15. WORKSHOPS — kaart-stijl & modal (gedeeld patroon) Variant-specifieke layout (grid vs lijst vs featured) staat in variant-x.css ----------------------------------------------------------------------------- */ .ycw-workshops { background-color: var(--color-bg-white); padding: var(--section-padding); } /* 3-koloms grid — default (variant-a); varianten kunnen dit overschrijven */ .ycw-workshops__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem; } /* Workshop-kaart */ .ycw-workshop-kaart { background-color: var(--color-bg-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); border: 1px solid var(--color-primary-light); transition: var(--transition); overflow: hidden; } .ycw-workshop-kaart:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .ycw-workshop-kaart.ycw-is-past { opacity: 0.52; filter: grayscale(0.45); } .ycw-workshop-kaart.ycw-is-past .ycw-workshop-kaart__cta { pointer-events: none; color: var(--color-text-muted); } .ycw-workshop-kaart__article { display: flex; flex-direction: column; height: 100%; } /* Datum-badge */ .ycw-workshop-kaart__date-badge { background-color: var(--color-primary); color: #ffffff; width: 80px; min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex-shrink: 0; padding: 0.625rem 0.5rem; } .ycw-workshop-kaart__month { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; opacity: 0.85; } .ycw-workshop-kaart__day { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; line-height: 1; } .ycw-workshop-kaart__year { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 400; line-height: 1; opacity: 0.75; } /* Kaart inhoud */ .ycw-workshop-kaart__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; } .ycw-workshop-kaart__title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--color-text); line-height: 1.25; } .ycw-workshop-kaart__desc { font-family: var(--font-body); font-size: 0.9rem; font-weight: 400; color: var(--color-text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: none; } .ycw-workshop-kaart__cta { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--color-primary); display: inline-flex; align-items: center; gap: 0.375rem; margin-top: auto; transition: var(--transition); text-align: left; } .ycw-workshop-kaart__cta:hover { color: var(--color-primary-dark); gap: 0.625rem; } .ycw-workshops__footer { text-align: center; } /* WORKSHOPS MODAL — gedeeld patroon */ .ycw-workshops-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } .ycw-workshops-modal[hidden] { display: none; } .ycw-workshops-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .ycw-workshops-modal__panel { position: relative; z-index: 1; background: #ffffff; border-radius: var(--radius-card); padding: 2.5rem; width: 90%; max-width: 560px; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(17, 42, 30, 0.25); } .ycw-workshops-modal__close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; background: var(--color-primary-light); border: none; border-radius: 50%; font-size: 1.375rem; line-height: 1; color: var(--color-text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .ycw-workshops-modal__close:hover { background: var(--color-primary); color: #ffffff; } .ycw-workshops-modal__header { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.5rem; padding-right: 2.5rem; } .ycw-workshops-modal__date-badge { background-color: var(--color-primary); color: #ffffff; width: 72px; height: 72px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-badge); padding: 0.5rem; } .ycw-workshops-modal__date-badge .ycw-modal-date__month { font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; line-height: 1; } .ycw-workshops-modal__date-badge .ycw-modal-date__day { font-family: var(--font-heading); font-size: 1.875rem; font-weight: 700; line-height: 1; margin: 0.1rem 0; } .ycw-workshops-modal__date-badge .ycw-modal-date__year { font-family: var(--font-body); font-size: 0.625rem; opacity: 0.7; line-height: 1; } .ycw-workshops-modal__title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-text); line-height: 1.2; margin-bottom: 0.375rem; } .ycw-workshops-modal__meta { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.5; max-width: none; } .ycw-workshops-modal__description { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.75; margin-bottom: 1.5rem; max-width: none; } .ycw-workshops-modal__includes { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; padding: 1.25rem; background: var(--color-primary-light); border-radius: var(--radius-badge); } .ycw-workshops-modal__includes li { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-text); display: flex; align-items: center; gap: 0.625rem; max-width: none; } .ycw-workshops-modal__includes li::before { content: ''; display: block; width: 18px; height: 18px; min-width: 18px; background-color: var(--color-primary); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-size: 11px; background-repeat: no-repeat; background-position: center; } .ycw-workshops-modal__info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.75rem; } .ycw-workshops-modal__info-grid div { display: flex; flex-direction: column; gap: 0.25rem; } .ycw-workshops-modal__info-grid strong { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); } .ycw-workshops-modal__info-grid span { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-text); max-width: none; } .ycw-workshops-modal__back { background: none; border: none; padding: 0; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--color-primary); cursor: pointer; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.375rem; transition: var(--transition); } .ycw-workshops-modal__back:hover { color: var(--color-primary-dark); } .ycw-workshops-modal__form-title { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 700; color: var(--color-text); margin-bottom: 1.5rem; } .ycw-workshops-modal__form { display: flex; flex-direction: column; gap: 1.125rem; } .ycw-workshops-modal__field { display: flex; flex-direction: column; gap: 0.375rem; } .ycw-workshops-modal__field label { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--color-text); } .ycw-workshops-modal__field input { width: 100%; padding: 0.75rem 1rem; border: 2px solid var(--color-primary-light); border-radius: var(--radius-btn); font-family: var(--font-body); font-size: 1rem; color: var(--color-text); background: #ffffff; transition: border-color 0.2s ease; } .ycw-workshops-modal__field input:focus { outline: none; border-color: var(--color-primary); } .ycw-workshops-modal__field input::placeholder { color: var(--color-text-muted); opacity: 0.6; } .ycw-workshops-modal__confirm { text-align: center; padding: 1rem 0; } .ycw-workshops-modal__confirm-icon { width: 64px; height: 64px; background-color: var(--color-primary); color: #ffffff; border-radius: 50%; font-size: 2rem; line-height: 64px; margin: 0 auto 1.5rem; } .ycw-workshops-modal__confirm h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.75rem; } .ycw-workshops-modal__confirm p { font-family: var(--font-body); font-size: 1rem; color: var(--color-text-muted); margin-bottom: 1.75rem; max-width: none; } /* ----------------------------------------------------------------------------- 16. RESPONSIVE — HEADER & HAMBURGER (≤1023px) ----------------------------------------------------------------------------- */ @media (max-width: 1023px) { .ycw-site-header__menu-toggle { display: flex; } .ycw-site-header__cta { display: none; } .ycw-site-nav { position: fixed; top: var(--header-height); left: 0; right: 0; background-color: var(--color-bg-white); padding: 1.5rem var(--container-pad-x) 2rem; box-shadow: 0 8px 32px rgba(17, 42, 30, 0.12); transform: translateY(-10px); opacity: 0; pointer-events: none; transition: var(--transition); z-index: 200; /* Menu mag nooit buiten beeld vallen: begrens tot de resterende schermhoogte en maak hem scrollbaar (nodig zodra het assortiment-mega uitklapt). dvh houdt rekening met de adresbalk op mobiel; vh is de fallback. */ max-height: calc(100vh - var(--header-height)); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .ycw-site-nav.ycw-is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .ycw-site-nav__list { flex-direction: column; align-items: stretch; gap: 0.25rem; } .ycw-site-nav__link { padding: 0.875rem 1rem; font-size: 1rem; } } /* ----------------------------------------------------------------------------- 17. RESPONSIVE — TABLET (768px – 1023px) ----------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) { :root { --section-padding: 70px 0; } /* Reviews: 2-koloms */ .ycw-reviews__list { grid-template-columns: repeat(2, 1fr); } .ycw-reviews__list .ycw-review-kaart:last-child { grid-column: 1 / -1; max-width: 560px; margin-inline: auto; width: 100%; } /* Contact: 2-koloms + 1 breed */ .ycw-contact__grid { grid-template-columns: repeat(2, 1fr); } .ycw-contact__kaart--kaart { grid-column: 1 / -1; } /* Footer: 2-koloms */ .ycw-site-footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; } .ycw-site-footer__merk { grid-column: 1 / -1; } /* KPI: 2-koloms */ .ycw-kpi-bar__list { flex-wrap: wrap; height: auto; padding: 6px 0; gap: 2px 0; } .ycw-kpi-bar__item { width: 50%; justify-content: center; padding: 5px 1rem; } .ycw-kpi-bar__item:nth-child(2n+1)::before { display: none; } /* Workshops: 2-koloms */ .ycw-workshops__grid { grid-template-columns: repeat(2, 1fr); } .ycw-workshops__grid .ycw-workshop-kaart:last-child { grid-column: 1 / -1; max-width: 480px; margin-inline: auto; width: 100%; } } /* ----------------------------------------------------------------------------- 18. RESPONSIVE — MOBIEL (<768px) ----------------------------------------------------------------------------- */ @media (max-width: 767px) { :root { --section-padding: 56px 0; --header-height: 64px; } /* KPI: op mobiel één belofte tegelijk, rouleert automatisch met een fade/schuif-animatie. Puur CSS (keyframes onderaan dit bestand), zodat het op elke pagina werkt zonder extra script. */ .ycw-kpi-bar__list { position: relative; display: block; height: 42px; } .ycw-kpi-bar__item { position: absolute; inset: 0; justify-content: center; padding: 0 1rem; opacity: 0; animation: kpi-wissel 16s linear infinite; } /* Geen scheidingsstreepje op mobiel: de items liggen hier over elkaar en tonen één voor één, dus het verticale lijntje links hoort er niet. */ .ycw-kpi-bar__item::before { display: none; } .ycw-kpi-bar__item:nth-child(2) { animation-delay: 4s; } .ycw-kpi-bar__item:nth-child(3) { animation-delay: 8s; } .ycw-kpi-bar__item:nth-child(4) { animation-delay: 12s; } /* Reviews: 1-koloms */ .ycw-reviews__list { grid-template-columns: 1fr; gap: 1rem; } /* Category card body */ .ycw-category-card__body { flex-direction: column; align-items: flex-start; gap: 0.5rem; } /* Nieuws: geen grid-regel hier — .nieuws__grid is variant-specifiek (zie §9) en elke variant-x.css laadt later, dus een override hier heeft geen effect. */ /* Contact: 1-koloms */ .ycw-contact__grid { grid-template-columns: 1fr; gap: 1rem; } /* Footer: 1-koloms */ .ycw-site-footer__inner { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.5rem; padding-bottom: 2.5rem; } .ycw-site-footer__bodem-inner { flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; } .ycw-site-footer__juridisch { justify-content: center; } /* Section header kleine aanpassing */ .ycw-section-header { margin-bottom: 2rem; } /* Workshops: 1-koloms */ .ycw-workshops__grid { grid-template-columns: 1fr; gap: 1rem; } .ycw-workshops-modal__panel { padding: 1.75rem 1.25rem; } .ycw-workshops-modal__info-grid { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------------------- 19. INNER-PAGE PRIMITIVES — gedeelde bouwstenen voor subpagina's page-hero · breadcrumb · contactformulier · bezoek-blok · verhaal · team Variant-signatuur (cursieve koppen, gouden ornament, panelen) komt in variant-x.css; dit is de neutrale baseline die alle varianten erven. ----------------------------------------------------------------------------- */ /* 19.1 PAGE-HERO — compacte paginakop (kleiner dan de homepage-hero) */ .ycw-page-hero { background-color: var(--color-bg-green-light); border-bottom: 1px solid rgba(41, 86, 64, 0.10); padding: clamp(2.25rem, 5vw, 3.75rem) 0; } .ycw-page-hero__content { max-width: 720px; } .ycw-page-hero__title { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--color-text); line-height: 1.15; } .ycw-page-hero__subtitle { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 400; color: var(--color-text-muted); line-height: 1.7; max-width: 60ch; margin-top: 0.875rem; } /* 19.2 BREADCRUMB — kruimelpad */ .ycw-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); } .ycw-breadcrumb a { color: var(--color-text-muted); transition: color 0.2s ease; } .ycw-breadcrumb a:hover { color: var(--color-primary); } .ycw-breadcrumb [aria-current="page"] { color: var(--color-primary); font-weight: 600; } .ycw-breadcrumb__sep { opacity: 0.5; user-select: none; } /* Home als huisje-icoon — inline SVG erft de linkkleur via currentColor */ .ycw-breadcrumb__home { display: inline-flex; align-items: center; } .ycw-breadcrumb__home svg { width: 16px; height: 16px; display: block; } /* 19.3 CONTACTFORMULIER — sectie + grid + formulier */ .ycw-contactform { background-color: var(--color-bg); padding: var(--section-padding); } .ycw-contactform__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: start; } .ycw-contact-form { display: flex; flex-direction: column; gap: 1.125rem; background-color: var(--color-bg-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 2.25rem; } .ycw-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; } .ycw-contact-form__field { display: flex; flex-direction: column; gap: 0.375rem; } .ycw-contact-form__field--vol { grid-column: 1 / -1; } .ycw-contact-form__field label { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--color-text); } .ycw-contact-form__field input, .ycw-contact-form__field textarea, .ycw-contact-form__field select { width: 100%; padding: 0.75rem 1rem; border: 2px solid var(--color-primary-light); border-radius: var(--radius-btn); font-family: var(--font-body); font-size: 1rem; color: var(--color-text); background: #ffffff; transition: border-color 0.2s ease; } .ycw-contact-form__field textarea { resize: vertical; min-height: 140px; } .ycw-contact-form__field input:focus, .ycw-contact-form__field textarea:focus, .ycw-contact-form__field select:focus { outline: none; border-color: var(--color-primary); } .ycw-contact-form__field input[aria-invalid="true"], .ycw-contact-form__field textarea[aria-invalid="true"] { border-color: #c0392b; } .ycw-contact-form__field input::placeholder, .ycw-contact-form__field textarea::placeholder { color: var(--color-text-muted); opacity: 0.6; } .ycw-contact-form__submit { align-self: flex-start; } /* Bevestigingsmelding na verzenden */ .ycw-contact-form__confirm { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.25rem; background-color: var(--color-primary-light); border-radius: var(--radius-badge); font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-text); } .ycw-contact-form__confirm[hidden] { display: none; } .ycw-contact-form__confirm-icon { width: 32px; height: 32px; flex-shrink: 0; background-color: var(--color-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; } /* Aside naast het formulier (hergebruikt .contact__kaart-stijl) */ .ycw-contactform__aside { display: flex; flex-direction: column; gap: 1.5rem; } /* 19.4 BEZOEK — openingstijden + kaart als 2-koloms blok */ .ycw-bezoek { background-color: var(--color-bg-white); padding: var(--section-padding); } .ycw-bezoek__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1.5rem; align-items: start; } /* 19.5 VERHAAL — tekst + beeld blok (Over ons), hergebruikt seizoen-ritme */ .ycw-verhaal { background-color: var(--color-bg); padding: var(--section-padding); } .ycw-verhaal__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .ycw-verhaal__media { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); } .ycw-verhaal__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; } .ycw-verhaal__content { display: flex; flex-direction: column; gap: 1.25rem; } .ycw-verhaal__label { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary); } .ycw-verhaal__title { font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--color-text); line-height: 1.2; } .ycw-verhaal__text { font-family: var(--font-body); font-size: 1rem; color: var(--color-text-muted); line-height: 1.8; max-width: none; } /* 19.6 TEAM — medewerkerskaarten */ .ycw-team { background-color: var(--color-bg); padding: var(--section-padding); } .ycw-team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .ycw-team-kaart { background-color: var(--color-bg-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; transition: var(--transition); } .ycw-team-kaart:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .ycw-team-kaart__image-wrap { aspect-ratio: 1 / 1; overflow: hidden; } /* Initialen-avatar als placeholder (geen teamfoto's beschikbaar) */ .ycw-team-kaart__image-wrap--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); } .ycw-team-kaart__initialen { font-family: var(--font-heading); font-size: 2.75rem; font-weight: 700; color: rgba(255, 255, 255, 0.92); letter-spacing: 0.02em; } .ycw-team-kaart__image { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-img); } .ycw-team-kaart:hover .ycw-team-kaart__image { transform: scale(1.05); } .ycw-team-kaart__body { padding: 1.25rem 1.5rem 1.5rem; text-align: center; } .ycw-team-kaart__naam { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; color: var(--color-text); } .ycw-team-kaart__rol { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: var(--color-primary); margin-top: 0.2rem; } /* 19.7 RESPONSIVE — inner-page primitives */ @media (min-width: 768px) and (max-width: 1023px) { .ycw-team__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .ycw-contactform__grid, .ycw-bezoek__grid, .ycw-verhaal__inner { grid-template-columns: 1fr; gap: 2rem; } .ycw-contact-form { padding: 1.5rem; } .ycw-contact-form__row { grid-template-columns: 1fr; } .ycw-team__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } } @media (max-width: 479px) { .ycw-team__grid { grid-template-columns: 1fr; } } /* 19.8 NIEUWS-OVERZICHT — uniform grid (los van de homepage-masonry van variant B) */ .ycw-nieuws-overzicht { background-color: var(--color-bg-white); padding: var(--section-padding); } .ycw-nieuws-overzicht__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem; } /* 19.9 PAGINATIE */ .ycw-paginatie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; list-style: none; } .ycw-paginatie__link, .ycw-paginatie__huidig { min-width: 40px; height: 40px; padding: 0 0.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-btn); border: 1px solid rgba(41, 86, 64, 0.18); font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--color-text); transition: var(--transition); } .ycw-paginatie__link:hover { background-color: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); } .ycw-paginatie__huidig { background-color: var(--color-primary); border-color: var(--color-primary); color: #ffffff; } .ycw-paginatie__link[aria-disabled="true"] { opacity: 0.4; pointer-events: none; } @media (min-width: 768px) and (max-width: 1023px) { .ycw-nieuws-overzicht__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .ycw-nieuws-overzicht__grid { grid-template-columns: 1fr; gap: 1rem; } } /* 19.10 ASSORTIMENT-OVERZICHT — uniform categorie-grid (los van de B-carrousel) */ .ycw-assortiment-intro { background-color: var(--color-bg); padding: var(--section-padding); } .ycw-assortiment-intro__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (min-width: 768px) and (max-width: 1023px) { .ycw-assortiment-intro__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .ycw-assortiment-intro__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } } @media (max-width: 479px) { .ycw-assortiment-intro__grid { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------------------- 20. ASSORTIMENT MEGA-MENU — dropdown in de hoofdnavigatie Volle-breedte paneel onder de header met categorieën + subcategorieën. Opent op hover/focus (desktop) of via klik (touch/keyboard, JS toggelt .is-open). ----------------------------------------------------------------------------- */ /* Trigger-knop — gelijke look als .site-nav__link */ .ycw-site-nav__trigger { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.875rem; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--color-text); letter-spacing: 0.01em; line-height: 1; background: none; border: none; border-radius: var(--radius-badge); cursor: pointer; white-space: nowrap; transition: var(--transition); } .ycw-site-nav__item--mega:hover .ycw-site-nav__trigger, .ycw-site-nav__item--mega:focus-within .ycw-site-nav__trigger, .ycw-site-nav__item--mega.ycw-is-open .ycw-site-nav__trigger, .ycw-site-nav__trigger[aria-current="page"] { color: var(--color-primary); background-color: var(--color-primary-light); } /* Caret-pijltje */ .ycw-site-nav__caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform 0.25s ease; } .ycw-site-nav__item--mega:hover .ycw-site-nav__caret, .ycw-site-nav__item--mega:focus-within .ycw-site-nav__caret, .ycw-site-nav__item--mega.ycw-is-open .ycw-site-nav__caret { transform: rotate(-135deg) translateY(-1px); } /* Volle-breedte paneel — anker is de sticky .site-header */ .ycw-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 320; background-color: var(--color-bg-white); border-top: 1px solid var(--color-primary-light); box-shadow: 0 18px 44px rgba(17, 42, 30, 0.13); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .ycw-site-nav__item--mega:hover > .ycw-mega, .ycw-site-nav__item--mega:focus-within > .ycw-mega, .ycw-site-nav__item--mega.ycw-is-open > .ycw-mega { opacity: 1; visibility: visible; transform: translateY(0); } .ycw-mega__inner { padding-top: 2.25rem; padding-bottom: 2.25rem; } .ycw-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem 2.5rem; } .ycw-mega__kop { display: block; font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-primary-light); transition: color 0.2s ease; } .ycw-mega__kop:hover { color: var(--color-primary); } .ycw-mega__lijst { display: flex; flex-direction: column; gap: 0.45rem; list-style: none; } .ycw-mega__lijst a { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; color: var(--color-text-muted); transition: color 0.2s ease, padding-left 0.2s ease; } .ycw-mega__lijst a:hover { color: var(--color-primary); padding-left: 4px; } .ycw-mega__foot { display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-primary-light); } .ycw-mega__foot-tekst { font-family: var(--font-body); font-size: 0.9rem; color: var(--color-text-muted); } /* RESPONSIVE — binnen het mobiele menu wordt de mega een uitklap-accordeon */ @media (max-width: 1023px) { .ycw-mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: none; background: transparent; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .ycw-site-nav__item--mega.ycw-is-open > .ycw-mega { max-height: 2000px; } .ycw-site-nav__trigger { width: 100%; justify-content: space-between; padding: 0.875rem 1rem; font-size: 1rem; } .ycw-mega__inner { padding: 0.25rem 0 0.75rem 0.75rem; } .ycw-mega__grid { grid-template-columns: 1fr; gap: 1.25rem; } .ycw-mega__foot { justify-content: flex-start; margin-top: 1.25rem; padding-top: 1rem; } } /* ----------------------------------------------------------------------------- KPI-BALK MOBIEL — wisselanimatie (zie responsive sectie hierboven) 16s cyclus / 4 items = elke 4 seconden de volgende belofte. ----------------------------------------------------------------------------- */ @keyframes kpi-wissel { 0% { opacity: 0; transform: translateY(8px); } 2.5% { opacity: 1; transform: translateY(0); } 22.5% { opacity: 1; transform: translateY(0); } 25% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 0; transform: translateY(-8px); } } @media (max-width: 767px) and (prefers-reduced-motion: reduce) { .ycw-kpi-bar__item { animation: none; } .ycw-kpi-bar__item:first-child { opacity: 1; } } /* ----------------------------------------------------------------------------- MOBIEL MENU — schuifpanelen met terugknop (mnav) Het menu vult op mobiel het hele scherm (lost ook de overlap met de KPI-balk op). Een script per pagina bouwt de panelen op uit de bestaande navigatie + het mega-menu: hoofdmenu -> categorieën -> subcategorieën. Diepere niveaus schuiven in beeld; 'Terug' schuift terug. ----------------------------------------------------------------------------- */ @media (max-width: 1023px) { /* De nav leeft ín de sticky header (stacking context z:300); zolang het menu open is tillen we de hele header boven de kpi-balk (z:400) uit. */ .ycw-site-header:has(.ycw-site-nav.ycw-is-open) { z-index: 600; } /* Volledig scherm, schuift van rechts in */ .ycw-site-nav { /* Desktop-nav is een flex-container; als block krijgt de mnav-overlay gewoon de volle schermbreedte i.p.v. een gecentreerde content-breedte. */ display: block; top: 0; height: 100vh; height: 100dvh; max-height: none; padding: 0; /* clip i.p.v. hidden: hidden blijft programmatisch scrollbaar, waardoor de browser bij focus op een (nog) buiten beeld staand paneel de hele nav opzij scrolde. clip verbiedt elke scroll. */ overflow: clip; z-index: 500; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; } .ycw-site-nav.ycw-is-open { transform: translateX(0); } /* De originele lijst en het mega-paneel doen op mobiel niet mee */ .ycw-site-nav > .ycw-site-nav__list { display: none; } .ycw-mnav { display: flex; flex-direction: column; height: 100%; } /* Bovenste regel: logo + sluiten (altijd zichtbaar) */ .ycw-mnav__kop { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); min-height: 60px; } .ycw-mnav__logo { display: inline-flex; align-items: center; } .ycw-mnav__logo img { height: 42px; width: auto; display: block; } /* Tweede regel: terug + niveau-titel (alleen op diepere niveaus) */ .ycw-mnav__top { display: flex; align-items: center; padding: 0.55rem 1.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); min-height: 48px; } .ycw-mnav__top[hidden] { display: none; } .ycw-mnav__spacer { min-width: 72px; } .ycw-mnav__terug { background: none; border: none; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; color: var(--color-primary); cursor: pointer; padding: 0.25rem 0.5rem 0.25rem 0; min-width: 72px; text-align: left; } .ycw-mnav__titel { flex: 1; text-align: center; font-family: var(--font-body); font-weight: 600; color: var(--color-text); } .ycw-mnav__sluit { background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--color-text); cursor: pointer; padding: 0.25rem 0 0.25rem 0.5rem; min-width: 72px; text-align: right; } .ycw-mnav__spoor { flex: 1; display: flex; min-height: 0; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Elk paneel exact één schermbreedte; flex-basis + shrink 0 zodat lange menuteksten het spoor nooit kunnen oprekken (dan kloppen de verschuivings-percentages niet meer). */ .ycw-mnav__paneel { flex: 0 0 100%; max-width: 100%; min-width: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 0.5rem 1.25rem 1.5rem; } .ycw-mnav__paneel ul { list-style: none; margin: 0; padding: 0; } .ycw-mnav__paneel li { border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .ycw-mnav__link { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; width: 100%; padding: 0.95rem 0.25rem; background: none; border: none; font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--color-text); text-align: left; text-decoration: none; cursor: pointer; } .ycw-mnav__link span[aria-hidden] { color: var(--color-primary); font-size: 1.2rem; } .ycw-mnav__link--alles { color: var(--color-primary); font-weight: 600; } .ycw-mnav__voet { padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(0, 0, 0, 0.08); } .ycw-mnav__voet .ycw-btn { width: 100%; justify-content: center; } .ycw-site-nav .ycw-site-nav__item--mega .ycw-mega { display: none; } } @media (min-width: 1024px) { .ycw-mnav { display: none; } } @media (prefers-reduced-motion: reduce) { .ycw-site-nav, .ycw-mnav__spoor { transition: none; } } /* Footer social — icoon-varianten (B/C) als ronde knop i.p.v. tekst-pill. Variant A gebruikt tekstlinks en houdt de pill; :has(svg) raakt alleen icoonlinks. */ .ycw-site-footer__social-link:has(svg) { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .ycw-site-footer__social-link svg { width: 18px; height: 18px; display: block; } /* Header-CTA verbergen tot 1199px: met 6 menu-items (incl. Aanbiedingen) is er op smallere desktops geen ruimte voor de knop. Hij is redundant met het 'Assortiment'-menu-item en blijft zichtbaar vanaf 1200px. */ @media (max-width: 1199px) { .ycw-site-header__cta { display: none; } } /* ============================================================================= VARIANT-A.CSS — Tuincentrum de Groene Tuin Gebaseerd op gardendemo.ontwerp.live/v2/ Warm groen, organisch, Playfair Display + Poppins Vereist laadvolgorde in : 1. shared/css/base.css 2. shared/css/brand.css 3. css/variant-a.css ← dit bestand Dit bestand bevat ALLEEN layout-afwijkingen ten opzichte van brand.css: - Hero layout (full-bleed achtergrondafbeelding met overlay) - Features grid (4-koloms) - Categories grid (3-koloms) - Seizoen grid (50/50 naast elkaar) - Nieuws grid (3-koloms) ============================================================================= */ /* ----------------------------------------------------------------------------- 5. HERO — full-bleed achtergrondafbeelding met gradient-overlay (Variant B: 50/50 split · Variant C: 3-blokken raster) ----------------------------------------------------------------------------- */ .ycw-hero { position: relative; min-height: 90vh; display: flex; align-items: center; background-color: var(--color-primary-dark); background-image: url('assets/images/hero-banner.jpg'); background-size: cover; background-position: center center; overflow: hidden; } /* Gradient overlay */ .ycw-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(41, 86, 64, 0.89) 0%, rgba(0, 0, 0, 0.45) 100% ); z-index: 1; } .ycw-hero__inner { position: relative; z-index: 2; display: flex; align-items: center; padding-top: 4rem; padding-bottom: 4rem; } .ycw-hero__content { max-width: 680px; animation: fadeInUp 0.7s ease 0.1s both; } /* Verberg het hero media-element — hero is een full-background sectie */ .ycw-hero__media { display: none; } .ycw-hero__title { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 3.75rem); font-weight: 700; color: #ffffff; line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -0.01em; } .ycw-hero__subtitle { font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 300; color: rgba(255, 255, 255, 0.9); line-height: 1.75; margin-bottom: 2.5rem; max-width: 560px; } .ycw-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } /* ----------------------------------------------------------------------------- 6. FEATURES GRID — 4-koloms (kaart-stijl zit in brand.css) ----------------------------------------------------------------------------- */ .ycw-features__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } /* ----------------------------------------------------------------------------- 7. CATEGORIES GRID — 3-koloms (kaart-stijl zit in brand.css) ----------------------------------------------------------------------------- */ .ycw-categories__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* ----------------------------------------------------------------------------- 8. SEIZOEN LAYOUT — 50/50 grid naast elkaar met ruimte (content-stijl zit in brand.css) ----------------------------------------------------------------------------- */ .ycw-seizoen { background-color: var(--color-bg-white); padding: var(--section-padding); } .ycw-seizoen__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } /* ----------------------------------------------------------------------------- 9. NIEUWS GRID — 3 gelijke kolommen (kaart-stijl zit in brand.css) ----------------------------------------------------------------------------- */ .ycw-nieuws__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem; } /* ----------------------------------------------------------------------------- 14. RESPONSIVE — TABLET (768px – 1023px) ----------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) { /* Features: 2-koloms op tablet */ .ycw-features__list { grid-template-columns: repeat(2, 1fr); } /* Categorieën: 2-koloms */ .ycw-categories__grid { grid-template-columns: repeat(2, 1fr); } /* Seizoen: gestapeld */ .ycw-seizoen__inner { grid-template-columns: 1fr; gap: 2.5rem; } .ycw-seizoen__media { max-height: 400px; overflow: hidden; } /* Nieuws: 2-koloms + 1 breed */ .ycw-nieuws__grid { grid-template-columns: repeat(2, 1fr); } .ycw-nieuws__grid .ycw-nieuws-kaart:last-child { grid-column: 1 / -1; } } /* ----------------------------------------------------------------------------- 15. RESPONSIVE — MOBIEL (< 768px) ----------------------------------------------------------------------------- */ @media (max-width: 767px) { /* Hero */ .ycw-hero { min-height: 75vh; } .ycw-hero__inner { min-height: 75vh; padding-top: 3rem; padding-bottom: 3rem; } .ycw-hero__actions { flex-direction: column; align-items: flex-start; } .ycw-hero__actions .ycw-btn { width: 100%; justify-content: center; } /* Features: 1-koloms — icoon naast de tekst i.p.v. erboven, scheelt veel hoogte. Het grid legt icoon links (over 2 rijen) en titel + tekst rechts. */ .ycw-features__list { grid-template-columns: 1fr; gap: 0.75rem; } .ycw-feature-block { display: grid; grid-template-columns: 44px 1fr; column-gap: 1rem; row-gap: 0.25rem; align-items: start; padding: 1.35rem 1.5rem; } .ycw-feature-block__icon { grid-row: 1 / span 2; width: 44px; height: 44px; margin-top: 2px; } .ycw-feature-block__icon img { width: 22px; height: 22px; } .ycw-feature-block__title { grid-column: 2; font-size: 1.125rem; } .ycw-feature-block__text { grid-column: 2; font-size: 0.875rem; line-height: 1.6; } /* Categorieën: 2-koloms */ .ycw-categories__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } /* Seizoen: gestapeld */ .ycw-seizoen__inner { grid-template-columns: 1fr; gap: 2rem; } /* Nieuws: 1-koloms — kaarten op volle breedte onder elkaar. Deze regel moet hier staan (niet in brand.css): de 3-koloms basisregel hierboven laadt later en zou een override in brand.css overschrijven. */ .ycw-nieuws__grid { grid-template-columns: 1fr; gap: 1rem; } /* Buttons seizoen breed op mobiel */ .ycw-seizoen__content .ycw-btn { width: 100%; justify-content: center; } } /* ----------------------------------------------------------------------------- 16. SINGLE-KOLOM GRID FIX VOOR HEEL KLEINE SCHERMEN (< 480px) ----------------------------------------------------------------------------- */ @media (max-width: 479px) { .ycw-categories__grid { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------------------- 17. PRODUCTCATEGORIE- EN SUBCATEGORIEPAGINA'S Gedeelde bouwstenen voor categorie-*.html en subcategorie-*.html. Stond eerder als inline