/* Sfeervol Meerssen Run — gedeeld stijlblad */ :root { /* merkkleuren — de 5 kleurvarianten van het salamander-logo, allemaal als volwaardige merkkleur */ --smr-orange: oklch(77% 0.17 63); --smr-orange-dark: oklch(62% 0.16 45); --smr-orange-tint: oklch(93% 0.06 63); /* exacte huisstijlkleuren (aangeleverd door klant): #B1CA33 hoofdkleur, #789F2F subkleur */ --smr-lime: #B1CA33; --smr-lime-dark: #789F2F; --smr-lime-tint: color-mix(in srgb, #B1CA33 20%, white); --smr-blue: oklch(68% 0.13 231); --smr-blue-dark: oklch(52% 0.12 235); --smr-blue-tint: oklch(93% 0.035 231); --smr-coral: oklch(64% 0.19 21); --smr-coral-dark: oklch(50% 0.17 20); --smr-coral-tint: oklch(92% 0.045 21); --smr-yellow: oklch(84% 0.15 92); --smr-yellow-dark: oklch(64% 0.13 80); --smr-yellow-tint: oklch(94% 0.06 92); /* algemene huisstijlkleur (groen/lime) — leidend door de hele site. Oranje/koraal/geel/blauw komen alleen nog subtiel terug per afstand. */ --smr-primary: var(--smr-lime); --smr-primary-dark: var(--smr-lime-dark); --smr-primary-tint: var(--smr-lime-tint); /* neutralen, licht getint richting groen */ --ink: oklch(24% 0.012 135); --ink-soft: oklch(40% 0.014 135); --paper: oklch(99% 0.004 125); --paper-tint: oklch(96% 0.012 125); --paper-tint-2: oklch(93% 0.02 125); --line: oklch(88% 0.015 125); --font-display: "Roboto Slab", "Georgia", serif; --font-body: "Arimo", "Helvetica Neue", Arial, sans-serif; --container: 1160px; --radius: 14px; --ease: cubic-bezier(0.16, 1, 0.3, 1); color-scheme: light; } /* Deze site is bewust altijd licht (buitenevenement, informatief, geen dashboard). Donkere-modusvariabelen alleen ter voorkoming van een geforceerd wit flitsscherm in systemen die force-dark toepassen op sites zonder eigen dark theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: oklch(97% 0.006 63); --paper-tint: oklch(94% 0.014 63); --paper-tint-2: oklch(91% 0.02 63); } } :root[data-theme="dark"] { --paper: oklch(97% 0.006 63); --paper-tint: oklch(94% 0.014 63); --paper-tint-2: oklch(91% 0.02 63); } /* Themahulp: zet op voor een pagina die aan één specifieke afstand hangt (bijv. body class="accent-blue" op de Kidsrun-pagina, "accent-yellow" op 5 km). Alle bestaande knoppen/eyebrows/chips volgen dan automatisch die kleur i.p.v. groen. Gebruik dit spaarzaam — groen blijft de algemene huisstijlkleur van de site. */ body.accent-blue { --smr-primary: var(--smr-blue); --smr-primary-dark: var(--smr-blue-dark); --smr-primary-tint: var(--smr-blue-tint); } body.accent-coral { --smr-primary: var(--smr-coral); --smr-primary-dark: var(--smr-coral-dark); --smr-primary-tint: var(--smr-coral-tint); } body.accent-yellow { --smr-primary: var(--smr-yellow); --smr-primary-dark: var(--smr-yellow-dark); --smr-primary-tint: var(--smr-yellow-tint); } body.accent-orange { --smr-primary: var(--smr-orange); --smr-primary-dark: var(--smr-orange-dark); --smr-primary-tint: var(--smr-orange-tint); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 0.5em; font-weight: 700; } h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); } h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); } h3 { font-size: 1.25rem; } p { margin: 0 0 1em; max-width: 1140px; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .eyebrow { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--smr-primary-dark); margin-bottom: 0.6em; } .eyebrow-lime { color: var(--smr-lime-dark); } .eyebrow-blue { color: var(--smr-blue-dark); } .eyebrow-coral { color: var(--smr-coral-dark); } .eyebrow-yellow { color: var(--smr-yellow-dark); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 6px; font-weight: 700; text-decoration: none; font-size: 1rem; transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease); border: 2px solid transparent; } .btn-primary { background: var(--smr-primary); color: var(--ink); } .btn-primary:hover { background: var(--smr-primary-dark); color: var(--paper); } .btn-ghost { background: transparent; border-color: currentColor; color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--paper); } .btn-on-dark { color: var(--paper); border-color: color-mix(in oklch, var(--paper) 55%, transparent); } .btn-on-dark:hover { background: var(--paper); color: var(--ink); } .btn-sm { padding: 9px 16px; font-size: 0.9rem; } /* ===== Header (bewust ongewijzigd qua opzet) ===== */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 10px; padding-bottom: 10px; } .site-logo img { width: 150px; height: auto; } .main-nav { display: flex; align-items: center; gap: 4px; } .main-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; } .main-nav > ul > li { position: relative; } .main-nav a.nav-link { display: block; padding: 10px 14px; text-decoration: none; font-weight: 700; font-size: 0.95rem; color: var(--ink); border-radius: 8px; } .main-nav a.nav-link:hover { background: var(--paper-tint); } .has-dropdown > .nav-link::after { content: ""; display: inline-block; margin-left: 6px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; vertical-align: middle; } .dropdown { position: absolute; left: 0; top: calc(100% + 6px); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; min-width: 220px; padding: 6px; box-shadow: 0 16px 32px -16px oklch(24% 0.012 135 / 0.25); list-style: none; margin: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.15s var(--ease), visibility 0.15s; } .has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; } .dropdown a { display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none; font-size: 0.92rem; color: var(--ink-soft); } .dropdown a:hover { background: var(--paper-tint); color: var(--ink); } .header-cta { margin-left: 8px; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); } @media (max-width: 900px) { .nav-toggle { display: block; } .main-nav { position: fixed; inset: 133px 0 0 0; background: var(--paper); flex-direction: column; align-items: stretch; padding: 12px 20px 40px; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s var(--ease); } .main-nav.is-open { transform: translateX(0); } .main-nav ul { flex-direction: column; gap: 0; } .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; border: none; background: var(--paper-tint); margin: 4px 0 8px; } .has-dropdown.is-open .dropdown { display: block; } .header-cta { margin: 16px 0 0; } .header-cta .btn { display: flex; justify-content: center; } } /* ===== Hero ===== */ .hero { position: relative; color: var(--paper); padding: 110px 0 90px; background: linear-gradient(180deg, oklch(24% 0.02 135 / 0.55), oklch(24% 0.02 135 / 0.78)), var(--hero-img, none) center/cover no-repeat; overflow: hidden; } .hero .eyebrow { color: var(--smr-primary); } .hero h1 { color: var(--paper); max-width: 16ch; } .hero p.lede { max-width: 56ch; font-size: 1.15rem; color: oklch(97% 0.01 63 / 0.92); } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } /* ===== Sections ===== */ section { padding: 76px 0; } .section-tint { background: var(--paper-tint); } .section-head { max-width: 1140px; margin-bottom: 44px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } /* Afstanden — bewust géén identieke iconen+kop+tekst kaartjes: lopende nummering met verschillende nadruk */ .distances { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .distance { background: var(--paper); padding: 30px 24px 26px; position: relative; display: flex; flex-direction: column; } /* Elke afstand krijgt een héél subtiele eigen kleur uit de 5 logovarianten — alleen als klein herkenningspunt (dunne rand + tag-pil). Groen blijft de hoofdkleur: knoppen en kaartvlakken blijven overal gelijk. */ .distance.c-yellow { --accent: var(--smr-yellow-dark); --accent-tint: var(--smr-yellow-tint); --accent-solid: var(--smr-yellow); } .distance.c-orange { --accent: var(--smr-orange-dark); --accent-tint: var(--smr-orange-tint); --accent-solid: var(--smr-orange); } .distance.c-coral { --accent: var(--smr-coral-dark); --accent-tint: var(--smr-coral-tint); --accent-solid: var(--smr-coral); } .distance.c-blue { --accent: var(--smr-blue-dark); --accent-tint: var(--smr-blue-tint); --accent-solid: var(--smr-blue); } .distance { border-top: 3px solid var(--accent-solid, var(--line)); } .distance-tag { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--accent, var(--ink-soft)); margin-bottom: 12px; } .distance h3 { font-size: 1.55rem; margin-bottom: 4px; } .distance .meta { font-size: 0.85rem; color: var(--ink-soft); margin: 2px 0; } .distance .price { margin-top: 16px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; } .distance .price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.78rem; color: var(--ink-soft); } /* Markeert welke prijs op het moment van bezoek van toepassing is (zie main.js) */ .distance .price.is-active { color: var(--accent, var(--smr-primary-dark)); } .distance .price.is-active small { color: inherit; font-weight: 700; } .distance .price.is-inactive { opacity: 0.45; } .distance-actions { margin-top: auto; padding-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 860px) { .distances { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .distances { grid-template-columns: 1fr; } } .sellout-note { margin: 28px auto 0; padding: 16px 20px; background: var(--smr-primary-tint); border-radius: 10px; font-weight: 600; color: var(--smr-primary-dark); max-width: 56ch; text-align: center; } /* CTA-banner */ .cta-band { position: relative; background: linear-gradient(180deg, oklch(20% 0.02 135 / 0.84), oklch(20% 0.02 135 / 0.9)), var(--cta-img, none) center/cover no-repeat; color: var(--paper); padding: 72px 0; text-align: center; } .cta-band h2 { color: var(--paper); } .cta-band .date { color: var(--smr-primary); font-weight: 700; letter-spacing: 0.04em; } /* Onderste 3 blokken (shop / goed doel / parcoursverkenning) — kaarten met vast media-paneel */ .feature-section { background: var(--paper-tint-2); } .feature-cards { display: flex; flex-direction: column; gap: 24px; } .feature-card { display: flex; background: var(--paper); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 28px -18px oklch(24% 0.012 135 / 0.35); } .feature-media { flex: 0 0 240px; display: flex; align-items: center; justify-content: center; padding: 28px; } .feature-media img { max-width: 100%; max-height: 220px; width: auto; } .feature-media.dark { background: var(--ink); } .feature-media.plain { background: var(--paper); } .feature-media.accent { background: var(--smr-primary-dark); color: var(--paper); flex-direction: column; gap: 8px; text-align: center; } .feature-media.accent .icon { font-size: 1.8rem; } .feature-media.accent .label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.95rem; line-height: 1.5; } .feature-body { flex: 1; padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .feature-body h2 { margin-bottom: 10px; } .feature-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; } .feature-btn { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 6px; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; border: 2px solid transparent; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .feature-btn-primary { background: var(--smr-primary-dark); color: var(--paper); } .feature-btn-primary:hover { background: var(--ink); } .feature-btn-outline { background: transparent; border-color: currentColor; color: var(--ink); } .feature-btn-outline:hover { background: var(--ink); color: var(--paper); } .feature-card.doel .feature-btn-primary { background: var(--smr-coral); } .feature-card.doel .feature-btn-primary:hover { background: var(--smr-coral-dark); } .feature-card.doel .feature-btn-outline { color: var(--smr-coral-dark); } .feature-card.doel .feature-btn-outline:hover { background: var(--smr-coral-dark); color: var(--paper); } .feature-dates { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .feature-dates .chip { padding: 8px 16px; border-radius: 999px; background: var(--smr-primary-tint); color: var(--smr-primary-dark); font-size: 0.85rem; font-weight: 600; } .feature-dates .chip.event { background: var(--smr-yellow-tint); color: var(--smr-yellow-dark); } @media (max-width: 700px) { .feature-card { flex-direction: column; } .feature-media { flex: none; width: 100%; } } /* Paginakop voor subpagina's (geen foto-hero, wel duidelijke intro) */ .page-header { padding: 56px 0 44px; background: var(--smr-primary-tint); border-bottom: 1px solid var(--line); } .page-header h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); max-width: 22ch; } .page-header .lede { max-width: 1140px; color: var(--ink-soft); margin-bottom: 0; } /* Feiten op een rij (starttijd, leeftijd, hoogtemeters...) */ .facts { display: flex; flex-wrap: wrap; gap: 30px; margin: 22px 0 0; padding: 0; list-style: none; } .facts dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin: 0 0 4px; } .facts dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; } /* Voorinschrijving / last minute naast elkaar */ .price-pair { display: flex; gap: 20px; flex-wrap: wrap; margin: 24px 0 30px; } .price-pair > div { background: var(--paper-tint); border-radius: 8px; padding: 18px 22px; min-width: 190px; } .price-pair .p-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--smr-primary-dark); margin-bottom: 8px; font-weight: 700; } .price-pair .amount { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; } .price-pair .until { font-size: 0.85rem; color: var(--ink-soft); margin-top: 2px; } /* Markeert welke prijs op het moment van bezoek van toepassing is (zie main.js) */ .price-pair .now-tag { display: none; } .price-pair > div.is-active { background: var(--smr-primary-tint); box-shadow: inset 0 0 0 2px var(--smr-primary-dark); } .price-pair > div.is-active .now-tag { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--smr-primary-dark); margin: -2px 0 6px; } .price-pair > div.is-inactive { opacity: 0.55; } /* Prijzengeld */ .prize-list { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 2px; max-width: 420px; } .prize-list li { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--line); } .prize-list li strong { font-family: var(--font-display); } /* Programma / tabellen */ .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { display: grid; grid-template-columns: 100px 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); } .timeline li:first-child { padding-top: 0; } .timeline time { font-weight: 700; color: var(--smr-primary-dark); } table.price-table { width: 100%; border-collapse: collapse; margin: 1.2em 0; } table.price-table th, table.price-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); } table.price-table th { font-family: var(--font-display); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); } /* Info-lijstjes */ .info-block { margin-bottom: 40px; } .info-block:last-child { margin-bottom: 0; } .tip-list, .task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .tip-list li, .task-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; } .tip-list li::before, .task-list li::before { content: attr(data-n); font-family: var(--font-display); font-weight: 700; color: var(--smr-primary-dark); font-size: 1.3rem; line-height: 1; } /* Uitverkocht-label voor artikelen die niet meer beschikbaar zijn */ .sold-out-tag { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--smr-coral-dark); margin-left: 10px; vertical-align: middle; } .info-block.sold-out .tip-list, .info-block.sold-out > p { opacity: 0.55; } /* SMR Shop — productkaarten */ .shop-section { background: var(--paper-tint-2); } .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .shop-card { background: var(--paper); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 28px -18px oklch(24% 0.012 135 / 0.35); display: flex; flex-direction: column; } .shop-photo { background: oklch(78% 0.01 125); height: 220px; display: flex; align-items: center; justify-content: center; padding: 20px; } .shop-photo img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; } .shop-card.sold-out .shop-photo img { opacity: 0.5; } .shop-body { padding: 22px 24px 26px; } .shop-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; } .shop-title-row h3 { font-size: 1.2rem; margin: 0; } .shop-price { font-family: var(--font-display); font-weight: 700; color: var(--smr-primary-dark); white-space: nowrap; } .shop-card.sold-out .shop-list { opacity: 0.55; } .shop-list { list-style: disc; margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--ink-soft); font-size: 0.92rem; } .shop-list li::marker { color: var(--smr-primary-dark); } .shop-info-card { background: var(--paper); border-radius: 14px; padding: 30px 32px; margin-top: 24px; box-shadow: 0 12px 28px -18px oklch(24% 0.012 135 / 0.35); } .shop-info-title { color: var(--smr-primary-dark); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1rem; margin-bottom: 14px; } .shop-info-card .shop-list a { color: var(--smr-primary-dark); font-weight: 700; } .shop-cta { background: var(--smr-primary-dark); color: var(--paper); text-align: center; padding: 48px 32px; border-radius: 14px; margin-top: 24px; } .shop-cta h2 { color: var(--paper); margin-bottom: 22px; } .shop-cta-btn { background: transparent; border: 2px solid var(--paper); color: var(--paper); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9rem; } .shop-cta-btn:hover { background: var(--paper); color: var(--ink); } @media (max-width: 860px) { .shop-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .shop-grid { grid-template-columns: 1fr; } } /* Sponsors */ .sponsor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .sponsor-tile { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 28px; display: flex; align-items: center; justify-content: center; height: 150px; } .sponsor-tile img { max-height: 100px; width: auto; max-width: 100%; object-fit: contain; } /* Uitgelichte sponsoren bovenaan: eerst 3 op een rij, dan 2 gecentreerd */ .sponsor-featured-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: calc((100% - 48px) * 2 / 3 + 24px); margin: 24px auto 0; } .sponsor-gap { height: 24px; } @media (max-width: 860px) { .sponsor-grid { grid-template-columns: repeat(2, 1fr); } .sponsor-featured-pair { max-width: 100%; } } @media (max-width: 560px) { .sponsor-grid { grid-template-columns: 1fr; } .sponsor-featured-pair { grid-template-columns: 1fr; } } /* Foto-albums */ .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .album-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--paper); } .album-card h3 { margin-bottom: 14px; } /* Formulier-vrije contactkaart */ .contact-card { background: var(--paper-tint); border-radius: var(--radius); padding: 32px; display: grid; gap: 10px; max-width: 480px; } .contact-card a { font-weight: 700; text-decoration: underline; } /* ===== Footer ===== */ .site-footer { background: var(--ink); color: oklch(92% 0.008 63); padding: 56px 0 28px; } .footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; margin-bottom: 36px; } .footer-brand img { height: 52px; margin-bottom: 12px; filter: brightness(0) invert(1); opacity: 0.95; } .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .footer-links a { text-decoration: none; color: oklch(92% 0.008 63 / 0.85); } .footer-links a:hover { color: var(--smr-primary); } .footer-social { display: flex; gap: 14px; } .footer-social a { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid oklch(92% 0.008 63 / 0.3); border-radius: 999px; text-decoration: none; font-size: 0.8rem; } .footer-bottom { border-top: 1px solid oklch(92% 0.008 63 / 0.15); padding-top: 20px; font-size: 0.82rem; color: oklch(92% 0.008 63 / 0.6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--smr-primary); color: var(--ink); padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; }