/* ============================================================================= 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 */ .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 */ .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; } .skip-link:focus { top: 0; } /* ----------------------------------------------------------------------------- 4. CONTAINER UTILITY — alle __inner elementen Varianten kunnen --container-width en --container-pad-x overschrijven ----------------------------------------------------------------------------- */ .container, .site-header__inner, .hero__inner, .features__inner, .categories__inner, .seizoen__inner, .workshops__inner, .nieuws__inner, .reviews__inner, .merken__inner, .contact__inner, .site-footer__inner, .site-footer__bodem-inner, /* Inner-page containers (zie brand.css §19) */ .page-hero__inner, .contactform__inner, .bezoek__inner, .assortiment-intro__inner, .nieuws-overzicht__inner, .verhaal__inner, .team__inner, .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) ----------------------------------------------------------------------------- */ .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; } .btn:active { transform: translateY(1px); transition: transform 0.05s ease; /* Fast snap — overrides inherited transition: all */ } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } /* ----------------------------------------------------------------------------- 6. SECTION SPACING — structurele basis padding per sectie ----------------------------------------------------------------------------- */ .features, .categories, .seizoen, .nieuws, .reviews, .contact { padding: var(--section-padding); } /* ----------------------------------------------------------------------------- 7. SECTION-HEADER — gedeeld tekstblok boven secties ----------------------------------------------------------------------------- */ .section-header { text-align: center; margin-bottom: 3rem; } .section-header__title { font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: 1rem; } .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; } }