/* Standalone stylesheet for the public pSEO exercise library (/oefeningen and /oefeningen/{regio}). These pages are generated as static HTML at build time (scripts/prerender-exercises.mjs) and are intentionally NOT part of the React SPA, so they ship their own self-contained CSS rather than the Vite/Tailwind bundle. That keeps the crawlable HTML independent of app deploys and asset hashing. Mirror the brand tokens here if they change in src/index.css (Roobert font, sky #0EA5E9, bg #F8FAFC). */ @font-face { font-family: 'Roobert'; src: url('/fonts/Roobert-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Roobert'; src: url('/fonts/Roobert-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Roobert'; src: url('/fonts/Roobert-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Roobert'; src: url('/fonts/Roobert-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } :root { --ink: #0f172a; --ink-soft: #334155; --muted: #475569; --line: #e2e8f0; --line-soft: #f1f5f9; --bg: #f8fafc; --sky: #0ea5e9; --sky-dark: #0284c7; --sky-50: #f0f9ff; --sky-100: #e0f2fe; --radius: 16px; --maxw: 1120px; /* Raised surfaces (cards, footer, buttons, header). Tokenised so the dark theme below can flip them in one place. */ --surface: #ffffff; --header-bg: rgba(248, 250, 252, 0.85); } /* Dark theme. Toggled by the static header's theme button (and the React app), which adds/removes `dark` on and stores the choice under the shared `kinmo_theme` localStorage key. Mirrors the app's #0B1120 base so a visitor crossing between the SPA and these static pages sees one theme. */ html.dark { --ink: #f1f5f9; --ink-soft: #cbd5e1; --muted: #94a3b8; --line: #1e293b; --line-soft: #16202e; --bg: #0b1120; --sky-50: #0c2536; --sky-100: #123047; --surface: #0f172a; --header-bg: rgba(11, 17, 32, 0.85); color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Roobert', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--ink-soft); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; display: block; } a { color: var(--sky-dark); text-decoration: none; } a:hover { text-decoration: underline; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } /* ---- Header / nav ---- */ .site-header { position: sticky; top: 0; z-index: 30; background: var(--header-bg); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; } .nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--ink); } .nav-brand img { height: 30px; width: auto; } .nav-brand { flex-shrink: 0; } .nav-links { display: flex; align-items: center; gap: 22px; } .nav-links > a:not(.nav-cta) { color: var(--ink-soft); font-weight: 500; } .nav-cta { background: var(--sky); color: #fff !important; padding: 9px 18px; border-radius: 10px; font-weight: 600; white-space: nowrap; } .nav-cta:hover { background: var(--sky-dark); text-decoration: none; } /* The CTA carries a full + short label; the short one only shows on mobile. */ .nav-cta-short { display: none; } @media (max-width: 720px) { /* Collapse only the top-level text links (NOT the language-menu links inside the dropdown, which are nested s) but keep the theme toggle, language switcher and CTA reachable. */ .nav-links > a:not(.nav-cta) { display: none; } .nav-links { gap: 10px; } .nav-cta { padding: 9px 14px; font-size: 0.9rem; } .nav-cta-full { display: none; } .nav-cta-short { display: inline; } } /* Narrowest phones: drop the wordmark (logo stays) so the row never overflows. */ @media (max-width: 380px) { .brand-name { display: none; } } /* ---- Theme toggle + language switcher (static clones of the app header) ---- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-soft); cursor: pointer; } .theme-toggle:hover { border-color: var(--sky); } /* Show the icon for the theme you'd switch TO is a common pattern, but here we show the current theme's icon: sun in light mode, moon in dark mode. */ .theme-toggle .icon-moon { display: none; } html.dark .theme-toggle .icon-sun { display: none; } html.dark .theme-toggle .icon-moon { display: inline; } .lang-switch { position: relative; } .lang-switch summary { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; cursor: pointer; list-style: none; user-select: none; } .lang-switch summary::-webkit-details-marker { display: none; } .lang-switch summary::marker { content: ''; } .lang-switch summary:hover { border-color: var(--sky); } .lang-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 150px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 12px 30px -12px rgba(15, 23, 42, 0.35); z-index: 40; display: flex; flex-direction: column; gap: 2px; } .lang-menu a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink-soft); font-weight: 500; font-size: 0.9rem; } .lang-menu a:hover { background: var(--sky-50); text-decoration: none; } .lang-menu a.active { background: var(--sky-50); color: var(--sky-dark); font-weight: 600; } /* ---- Generic sections ---- */ main { display: block; } section { padding: 8px 0; } .section-pad { padding: 40px 0; } h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; color: var(--ink); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 18px; } h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.2; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 18px; } h3 { font-size: 1.15rem; color: var(--ink); font-weight: 600; margin: 0 0 6px; } p { margin: 0 0 16px; max-width: 70ch; } .breadcrumbs { font-size: 0.85rem; color: var(--muted); padding-top: 24px; } .breadcrumbs a { color: var(--muted); } .breadcrumbs span { color: var(--ink); } .intro { font-size: 1.05rem; line-height: 1.65; color: var(--muted); max-width: 62ch; margin: 12px 0; } /* The first paragraph gets a touch more weight to anchor the page. */ .intro-lead { font-size: 1.18rem; line-height: 1.55; color: var(--ink); margin-top: 8px; } /* ---- What-you-get bullets (under the lead) ---- */ .page-bullets { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; max-width: 62ch; } .page-bullets li { display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); } .page-bullets li svg { flex: 0 0 auto; margin-top: 3px; color: var(--sky-dark); } /* ---- Disclaimer ---- */ .disclaimer { display: flex; gap: 12px; align-items: flex-start; background: var(--sky-50); border: 1px solid var(--sky-100); border-radius: var(--radius); padding: 16px 18px; margin: 24px 0 8px; color: var(--ink-soft); font-size: 0.95rem; } .disclaimer svg { flex: 0 0 auto; margin-top: 2px; color: var(--sky-dark); } .disclaimer p { margin: 0; max-width: none; } /* Single-line variant used at the top of region pages — same wording as the boxed disclaimer, styled as a subtle inline note so it doesn't add to the mobile-fold weight. */ .disclaimer-compact { display: flex; gap: 8px; align-items: flex-start; margin: 18px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5; max-width: 62ch; } .disclaimer-compact svg { flex: 0 0 auto; margin-top: 2px; color: var(--sky-dark); width: 16px; height: 16px; } .disclaimer-compact span { display: block; } /* ---- Exercise grid ---- */ /* Compact, fixed-height cards. The image height is capped so individual cards stay small and the page stays manageable even with 100+ exercises (all rendered in the DOM for SEO, images lazy-loaded below the fold). Grid widens to 2 then 3 columns to keep the page from getting too tall. */ .ex-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 8px; } @media (min-width: 640px) { .ex-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .ex-grid { grid-template-columns: repeat(3, 1fr); } } .ex-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .ex-card .photo { width: 100%; height: 180px; background: var(--line-soft); object-fit: cover; object-position: center; } .ex-body { padding: 14px 18px 18px; } .ex-body h3 { font-size: 1.05rem; } .ex-body p { font-size: 0.9rem; color: var(--muted); margin: 6px 0 0; max-width: none; } /* ---- Demo: patient schedule view in a phone frame ---- Same phone frame on mobile and desktop. The iframe inside always renders at IFRAME_VW (a true iPhone viewport width) and is visually downscaled to fit the frame on screen — so the embedded share looks pixel-identical to opening the share URL on a real phone (no clipped headers / overflowing images at a too-narrow viewport). Tweak --phone-w and --iframe-vw together; --iframe-scale is derived. */ :root { --phone-w: 320px; /* visible phone frame width on screen */ --phone-bezel: 12px; /* dark bezel thickness around the screen */ /* The screen sits inside the frame's padding, so its width is the frame width minus the bezel on both sides. Otherwise the screen overflows the frame's content area by 2 × bezel (the right-edge leak we kept chasing). */ --screen-w: calc(var(--phone-w) - var(--phone-bezel) * 2); --iframe-vw: 390px; /* viewport width the iframe renders at (iPhone 14) */ --iframe-vh: 760px; /* viewport height the iframe renders at */ /* Scale targets one pixel LESS than --screen-w. transform: scale() with the full screen width occasionally rounds up sub-pixel-wise and leaks 1px past the rounded screen clip on the right edge (visible on Chrome/Android). The 1px of white slack is hidden by the rounded clip + bottom fade. */ --iframe-scale: calc((var(--screen-w) - 1px) / var(--iframe-vw)); } .demo-frame { color: var(--muted); } .phone-frame { position: relative; width: var(--phone-w); max-width: 100%; margin: 16px auto 0; background: linear-gradient(155deg, #2a3441 0%, #0f172a 50%, #050912 100%); border-radius: 44px; padding: var(--phone-bezel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.4), 0 30px 60px -20px rgba(15, 23, 42, 0.55), 0 70px 90px -40px rgba(15, 23, 42, 0.35); } /* Side buttons — volume on the left, power on the right. Sit just outside the bezel for a real-device silhouette; z-index:-1 keeps them behind the frame's gradient so the edges blend rather than float. */ .phone-frame::before, .phone-frame::after { content: ''; position: absolute; width: 3px; background: linear-gradient(to right, #050912, #1a212d); border-radius: 1.5px; z-index: -1; } .phone-frame::before { left: -2px; top: 26%; height: 18%; } .phone-frame::after { right: -2px; top: 22%; height: 12%; } .phone-screen { position: relative; width: var(--screen-w); height: calc(var(--iframe-vh) * var(--iframe-scale)); border-radius: 32px; overflow: hidden; background: #fff; /* Force a new stacking context — works around a Safari/iOS bug where transformed iframe children visually leak past the rounded clip. */ isolation: isolate; transform: translateZ(0); /* Belt-and-braces clip for the same Safari bug: clip-path honours border-radius even when overflow:hidden alone doesn't. */ clip-path: inset(0 round 32px); } /* Soft fade at the bottom of the screen so that, wherever the user has scrolled the embedded patient view, the rounded clip line never cuts through a card mid-text — it always reads as an intentional fade. */ .phone-screen::after { content: ''; position: absolute; inset: auto 0 0 0; height: 56px; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%); z-index: 2; } .phone-screen iframe { width: var(--iframe-vw); height: var(--iframe-vh); border: 0; display: block; transform: scale(var(--iframe-scale)); transform-origin: top left; } /* On phones the demo doesn't need to be huge — the patient view inside is already at native phone proportions. Smaller --phone-w means less vertical space, so the visitor sees the demo + the headline + the CTA together without having to scroll the whole frame into view. */ @media (max-width: 640px) { :root { --phone-w: 284px; } } @media (max-width: 360px) { :root { --phone-w: 264px; } } /* ---- Pagination ---- */ .pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 28px; } .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-soft); font-weight: 600; font-size: 0.95rem; } a.page-link:hover { border-color: var(--sky); text-decoration: none; } .page-current { background: var(--sky); border-color: var(--sky); color: #fff; } .page-arrow { color: var(--sky-dark); } /* ---- CTA block ---- */ .cta-block { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px; margin-top: 12px; } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; } .btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 14px 22px; font-weight: 600; font-size: 1rem; cursor: pointer; border: 1px solid transparent; } .btn-primary { background: var(--sky); color: #fff; } .btn-primary:hover { background: var(--sky-dark); text-decoration: none; } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); text-decoration: none; } /* ---- FAQ ---- */ .faq-item { border-bottom: 1px solid var(--line); padding: 18px 0; } .faq-item h3 { margin-bottom: 8px; } .faq-item p { margin: 0; } /* ---- Related ---- */ .related-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 8px; } @media (min-width: 600px) { .related-grid { grid-template-columns: repeat(3, 1fr); } } .related-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; color: var(--ink); font-weight: 600; } .related-card:hover { border-color: var(--sky); text-decoration: none; } .related-card span { display: block; font-weight: 400; font-size: 0.85rem; color: var(--muted); margin-top: 4px; } /* ---- Hub region cards ---- */ .region-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 24px; } @media (min-width: 640px) { .region-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .region-grid { grid-template-columns: repeat(3, 1fr); } } .region-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; color: var(--ink); overflow: hidden; transition: border-color 0.15s ease, transform 0.15s ease; } .region-card:hover { border-color: var(--sky); text-decoration: none; } .region-card h3 { margin-bottom: 6px; } .region-card p { margin: 0; font-size: 0.92rem; color: var(--muted); max-width: none; } /* Variant: tile with a representative exercise photo on top. */ .region-card-with-media { padding: 0; } .region-card-with-media:hover { transform: translateY(-2px); } .region-card-media { aspect-ratio: 16 / 9; background: var(--sky-50); overflow: hidden; } .region-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .region-card-with-media .region-card-body { padding: 18px 22px 22px; } /* ---- Footer ---- */ .site-footer { margin-top: 48px; border-top: 1px solid var(--line); background: var(--surface); padding: 32px 0; font-size: 0.88rem; color: var(--muted); } .site-footer p { max-width: none; } .site-footer .brandline { color: var(--ink-soft); font-weight: 500; } /* Centered variant used by the "Zo maakt een fysiotherapeut..." section and the "Wanneer ga je naar een fysio?" CTA section, so their heading + body + buttons line up with the centered phone-frame demo above. Paragraphs (.demo-frame, plain

) get a max-width so they don't span the whole column at desktop widths; the cta-row centers its buttons via justify- content so the two pill-buttons sit in the middle of the page. */ .section-centered h2, .section-centered > p, .section-centered .demo-frame { text-align: center; } .section-centered > p, .section-centered .demo-frame { margin-left: auto; margin-right: auto; max-width: 640px; } .section-centered .cta-row { justify-content: center; }