/* * ===================================================================================== * Blijf Scherp! – app-gedrag en app-uiterlijk * ===================================================================================== * Alles wat het portaal laat aanvoelen als een geïnstalleerde app in plaats van een * website: geen rubber-band effect, geen blauwe tik-vlakken, geen tekstselectie op * knoppen, ruimte voor de notch, plus de installatiebanner en de update-melding. * * De klasse .app-standalone wordt door js/pwa/app-shell.js op gezet zodra de * app buiten de browser draait. Alles wat daaronder staat raakt de gewone website dus * niet aan. * ===================================================================================== */ :root { --app-groen: #0c4841; --app-groen-licht: #14655b; --app-geel: #f0d71e; --app-veilig-onder: env(safe-area-inset-bottom, 0px); --app-veilig-links: env(safe-area-inset-left, 0px); --app-veilig-rechts: env(safe-area-inset-right, 0px); } /* ── Basisgedrag op aanraakschermen ─────────────────────────────────────────────── */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { -webkit-tap-highlight-color: transparent; } /* Geen dubbeltik-zoom op dingen waar je op tikt: reageert merkbaar sneller. */ a, button, [role='button'], input[type='submit'], input[type='button'], label, select, summary { touch-action: manipulation; } /* ── Extra's die alleen gelden in de geïnstalleerde app ─────────────────────────── */ /* Geen wit vlak dat onder de pagina vandaan komt bij doorscrollen. */ .app-standalone, .app-standalone body { overscroll-behavior-y: none; background-color: rgb(235, 240, 246); } /* Geen "kopiëren/delen"-ballon bij lang indrukken, behalve op echte tekst. */ .app-standalone body { -webkit-touch-callout: none; } .app-standalone input, .app-standalone textarea, .app-standalone select, .app-standalone p, .app-standalone td, .app-standalone li, .app-standalone .selecteerbaar { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; } /* Menu's, knoppen en kopteksten selecteer je in een app ook niet per ongeluk. */ .app-standalone nav, .app-standalone header, .app-standalone button, .app-standalone a, .app-standalone label { -webkit-user-select: none; user-select: none; } /* Ruimte vrijhouden voor de streep/knoppen onderaan de telefoon. */ .app-standalone body { padding-bottom: var(--app-veilig-onder); padding-left: var(--app-veilig-links); padding-right: var(--app-veilig-rechts); } /* iOS zoomt automatisch in op invoervelden kleiner dan 16px. Dat ziet er niet uit. */ @media (max-width: 767px) { .app-standalone input, .app-standalone select, .app-standalone textarea { font-size: 16px; } } /* Kort indrukgevoel op knoppen, zoals in een native app. */ .app-standalone button:active, .app-standalone a[class*='rounded']:active, .app-standalone [role='button']:active { transform: scale(0.97); transition: transform 0.08s ease; } /* Menu-items die alleen zin hebben zolang je nog in de browser zit. */ .app-standalone .alleen-in-browser { display: none !important; } /* ── Laadbalkje bovenaan bij het openen van een pagina ──────────────────────────── */ #app-laadbalk { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--app-geel); box-shadow: 0 0 8px rgba(240, 215, 30, 0.7); z-index: 2147483000; opacity: 0; transition: width 0.2s ease, opacity 0.2s ease; pointer-events: none; } #app-laadbalk.bezig { opacity: 1; } /* ── Installatiebanner ──────────────────────────────────────────────────────────── */ .app-installbanner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--app-veilig-onder)); z-index: 2147482000; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, #0c4841, #14655b); color: #fff; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3); font-family: 'Figtree', system-ui, -apple-system, sans-serif; transform: translateY(140%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .app-installbanner.zichtbaar { transform: translateY(0); } .app-installbanner__icoon { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; background: #fff; } .app-installbanner__tekst { flex: 1; min-width: 0; line-height: 1.35; } .app-installbanner__titel { font-weight: 700; font-size: 14px; } .app-installbanner__uitleg { font-size: 12px; opacity: 0.82; } .app-installbanner__knop { flex-shrink: 0; border: 0; cursor: pointer; padding: 10px 18px; border-radius: 999px; background: var(--app-geel); color: #0c4841; font-weight: 800; font-size: 13px; font-family: inherit; } .app-installbanner__sluiten { flex-shrink: 0; border: 0; background: transparent; color: rgba(255, 255, 255, 0.65); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 2px; } /* Op smalle telefoons de knop op een eigen regel: anders wordt de tekst platgedrukt. */ @media (max-width: 430px) { .app-installbanner { flex-wrap: wrap; row-gap: 12px; } .app-installbanner__icoon { order: 1; } .app-installbanner__tekst { order: 2; } .app-installbanner__sluiten { order: 3; } .app-installbanner__knop { order: 4; width: 100%; padding: 12px 18px; font-size: 14px; } } @media (min-width: 640px) { .app-installbanner { left: auto; right: 20px; bottom: 20px; max-width: 420px; } } /* ── Uitlegvenster voor iPhone/iPad ─────────────────────────────────────────────── */ .app-uitleg { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-end; justify-content: center; background: rgba(4, 24, 22, 0.62); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; font-family: 'Figtree', system-ui, -apple-system, sans-serif; } .app-uitleg.zichtbaar { opacity: 1; pointer-events: auto; } .app-uitleg__paneel { width: 100%; max-width: 460px; background: #fff; color: #12211f; border-radius: 22px 22px 0 0; padding: 22px 22px calc(26px + var(--app-veilig-onder)); transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .app-uitleg.zichtbaar .app-uitleg__paneel { transform: translateY(0); } @media (min-width: 640px) { .app-uitleg { align-items: center; } .app-uitleg__paneel { border-radius: 22px; } } .app-uitleg__greep { width: 42px; height: 4px; border-radius: 999px; background: #d8e0e6; margin: 0 auto 16px; } .app-uitleg__titel { font-size: 18px; font-weight: 800; margin: 0 0 4px; } .app-uitleg__intro { font-size: 13.5px; color: #5b6b69; margin: 0 0 18px; } .app-stap { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid #eef2f4; } .app-stap__nummer { flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; background: var(--app-groen); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .app-stap__tekst { font-size: 14px; line-height: 1.45; } .app-stap__tekst strong { font-weight: 700; } .app-uitleg__sluiten { width: 100%; margin-top: 18px; border: 0; cursor: pointer; padding: 13px; border-radius: 14px; background: var(--app-groen); color: #fff; font-weight: 700; font-size: 15px; font-family: inherit; } /* ── Melding bij een nieuwe versie ──────────────────────────────────────────────── */ /* Bewust bovenaan: onderaan zou hij over de installatiebanner heen vallen. */ .app-update { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -220%); z-index: 2147482500; display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 18px; border-radius: 999px; background: #12211f; color: #fff; font-family: 'Figtree', system-ui, -apple-system, sans-serif; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .app-update.zichtbaar { transform: translate(-50%, 0); } .app-update__knop { border: 0; cursor: pointer; padding: 7px 15px; border-radius: 999px; background: var(--app-geel); color: #12211f; font-weight: 800; font-size: 13px; font-family: inherit; }