/* ============================================================ SITE-FOOTER — .rfoot component op --rui tokens, theme-aware. Geladen in header.php (filemtime). .rfoot-gescopet → geen leak op pagina's die de footer niet renderen (kaart/dock). ============================================================ */ .rfoot{ background:var(--rui-card); border-top:1px solid var(--rui-line); color:var(--rui-text); font-family:var(--rui-body); margin-top:var(--rui-sp-8); } .rfoot-inner{ max-width:1120px; margin:0 auto; /* extra bodem-ruimte zodat de fine-print niet achter de vaste bottom-nav (dock / footer-main, position:fixed) valt; + iOS safe-area. */ padding:var(--rui-sp-8) var(--rui-sp-6) calc(88px + env(safe-area-inset-bottom, 0px)); } /* ---- Bovenste rij: merk + 3 linkkolommen ---- */ .rfoot-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--rui-sp-8) var(--rui-sp-7); } /* ---- Merk-blok ---- */ .rfoot-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--rui-sp-4); } .rfoot-logo{ display:inline-block; line-height:0; } .rfoot-logo img{ height:28px; width:auto; display:block; } .rfoot-logo-dark{ display:none; } [data-bs-theme="dark"] .rfoot-logo-light{ display:none; } [data-bs-theme="dark"] .rfoot-logo-dark{ display:block; } .rfoot-tagline{ margin:0; max-width:34ch; color:var(--rui-muted); font-size:var(--rui-fs-md); line-height:1.5; } .rfoot-social{ display:flex; gap:var(--rui-sp-3); } .rfoot-social a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--rui-r-2); background:var(--rui-card-2); border:1px solid var(--rui-line); color:var(--rui-muted); transition:color var(--rui-dur) var(--rui-ease), border-color var(--rui-dur) var(--rui-ease), background var(--rui-dur) var(--rui-ease); } .rfoot-social a:hover{ color:var(--rui-accent-strong); border-color:var(--rui-accent-line); background:var(--rui-accent-soft); } .rfoot-social svg{ width:18px; height:18px; fill:currentColor; } .rfoot-cta{ display:inline-flex; align-items:center; gap:var(--rui-sp-2); margin-top:var(--rui-sp-1); padding:9px 16px; border-radius:var(--rui-r-pill); background:var(--rui-accent); color:var(--rui-accent-ink); font-size:var(--rui-fs-md); font-weight:600; text-decoration:none; transition:background var(--rui-dur) var(--rui-ease); } .rfoot-cta:hover{ background:var(--rui-accent-hover); color:var(--rui-accent-ink); } .rfoot-cta svg{ width:16px; height:16px; } /* ---- Linkkolommen ---- */ .rfoot-coltitle{ margin:0 0 var(--rui-sp-4); font-size:var(--rui-fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--rui-faint); } .rfoot-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--rui-sp-3); } .rfoot-links a{ color:var(--rui-muted); text-decoration:none; font-size:var(--rui-fs-md); transition:color var(--rui-dur) var(--rui-ease); } .rfoot-links a:hover{ color:var(--rui-text); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rui-accent); } /* ---- Onderbalk ---- */ .rfoot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:var(--rui-sp-5); margin-top:var(--rui-sp-7); padding-top:var(--rui-sp-5); border-top:1px solid var(--rui-line); } .rfoot-copy{ margin:0; color:var(--rui-muted); font-size:var(--rui-fs-md); } .rfoot-lang{ display:inline-flex; gap:2px; padding:3px; background:var(--rui-card-2); border:1px solid var(--rui-line); border-radius:var(--rui-r-pill); } .rfoot-lang-btn{ appearance:none; -webkit-appearance:none; border:0; cursor:pointer; padding:5px 14px; border-radius:var(--rui-r-pill); background:transparent; color:var(--rui-muted); font-family:var(--rui-body); font-size:var(--rui-fs-sm); font-weight:600; line-height:1; transition:background var(--rui-dur) var(--rui-ease), color var(--rui-dur) var(--rui-ease); } .rfoot-lang-btn:hover{ color:var(--rui-text); } .rfoot-lang-btn.is-active{ background:var(--rui-accent); color:var(--rui-accent-ink); } /* ---- Fine-print ---- */ .rfoot-fine{ margin:var(--rui-sp-5) 0 0; color:var(--rui-faint); font-size:var(--rui-fs-sm); line-height:1.55; } /* ---- Responsive ---- */ @media (max-width:767px){ .rfoot-top{ grid-template-columns:1fr 1fr; gap:var(--rui-sp-7) var(--rui-sp-6); } .rfoot-brand{ grid-column:1 / -1; } } @media (max-width:479px){ .rfoot-bottom{ flex-direction:column; align-items:flex-start; gap:var(--rui-sp-4); } }