/* ============================================================================ Talent Take Over · gedeeld designsysteem ---------------------------------------------------------------------------- Eén stijl-laag voor de hele site. Wordt als laatste in geladen, zodat hij de losse pagina-stijlen verfrist zonder de inhoud te veranderen. Doel: fris, modern, speels-maar-rustig — wég van de standaard AI-look. Werkt offline (file://): systeemfont, geen externe requests. ============================================================================ */ /* ── 1. Design-tokens (gelden voor alle pagina's) ─────────────────────────── */ :root{ /* kleurfamilie blijft herkenbaar (botst niet met hardcoded kleuren), maar met extra vrolijke accenten */ --primary: #0e7490; --primary-dark: #0b5e74; --accent: #e0216f; /* magenta (logo) */ --accent2: #06b6d4; /* cyaan (logo) */ --joy: #f59e0b; /* zonnig geel */ --mint: #10b981; /* fris groen */ /* rondere vormen + zachtere, licht-gekleurde schaduwen = vriendelijker */ --radius: 22px; --radius-lg:28px; --shadow: 0 18px 40px -16px rgba(37, 60, 130, .28); --shadow-sm:0 6px 18px -8px rgba(37, 60, 130, .22); /* afgeronde systeemfont — mooi op Mac/iPhone, geen download nodig */ --tto-font: ui-rounded, "SF Pro Rounded", "Segoe UI Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ── 2. Typografie site-breed ─────────────────────────────────────────────── */ body{ font-family: var(--tto-font) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: .1px; } h1, h2, h3, h4, .hero-title, .section-title{ letter-spacing: -.4px; } /* ── 3. Licht thema — warme, frisse achtergrond i.p.v. koud AI-wit ────────── */ body.tto-light{ background: radial-gradient(1200px 480px at 12% -8%, rgba(224,33,111,.06), transparent 60%), radial-gradient(1000px 460px at 100% 0%, rgba(224,33,111,.05), transparent 55%), #fbf9f6 !important; background-attachment: fixed; } /* ── 4. Donker thema (videos.html) — blijft donker, lift alleen vorm/accent mee */ body.tto-dark{ /* tokens + font gelden al; bg/tekst blijven van de pagina */ } /* ── 5. Basis-polish voor de hele site ────────────────────────────────────── */ *{ -webkit-tap-highlight-color: transparent; } a, button, .btn, .card, .program-card, .video-card, .group-card, input, .nav-links a{ transition: background .18s ease, color .18s ease, box-shadow .2s ease, transform .14s ease, border-color .18s ease; } :focus-visible{ outline: 3px solid rgba(14,116,144,.45); outline-offset: 2px; border-radius: 8px; } ::selection{ background: rgba(224,33,111,.22); } /* ── 6. Knoppen: speelser, duidelijke 'press' + fijnere hover ─────────────── */ .btn{ border-radius: 16px; } .btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow); } .btn:active{ transform: translateY(0) scale(.985); } /* ── 7. Kaarten net iets ronder + zachte lift bij hover ───────────────────── */ .card, .program-card, .video-card, .group-card, .hero-card{ border-radius: var(--radius-lg); } .program-card:hover, .group-card:hover, .video-card:hover{ box-shadow: var(--shadow); } /* ── 8. Mooiere scrollbar (desktop), subtiel ──────────────────────────────── */ @media (pointer:fine){ *{ scrollbar-width: thin; scrollbar-color: rgba(224,33,111,.45) transparent; } ::-webkit-scrollbar{ width: 10px; height: 10px; } ::-webkit-scrollbar-thumb{ background: rgba(224,33,111,.40); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover{ background: rgba(224,33,111,.65); background-clip: padding-box; } } /* ── 9. Respecteer 'minder beweging' ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; } }