@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Space+Mono:wght@400;700&display=swap'); :root{ --bg: #FFF8F2; --fg: #2A1B14; --accent: #F2664A; --amber: #FFD9A8; --muted: #F4EAE3; --card: #ffffff; } :root.theme-contrast{ --bg: #ffffff; --fg: #000000; --accent: #000000; --muted: #f0f0f0; --card: #ffffff; } /* Donker thema (data-theme="dark" op ) */ :root[data-theme="dark"]{ --bg: #241712; --fg: #F5EEE9; --accent: #F2664A; --amber: #FFD9A8; --muted: #3a2a20; --card: #32231b; } :root[data-theme="dark"] .site-header{border-bottom-color:#4a382e;background:color-mix(in oklab, var(--bg) 80%, black 20%)} :root[data-theme="dark"] .card{border-color:#4a382e} :root[data-theme="dark"] .section.alt{background:#2c1d16} :root[data-theme="dark"] .login-card{background:var(--card);border-color:#4a382e} :root[data-theme="dark"] input[type=email], :root[data-theme="dark"] input[type=password]{background:#2c1d16;color:var(--fg);border-color:#4a382e} .plan-box{border:1px solid #eee;border-radius:14px;padding:16px;background:#fff} :root[data-theme="dark"] .plan-box{background:#2c1d16;border-color:#4a382e} :root[data-theme="dark"] .btn.secondary{background:color-mix(in oklab, var(--accent) 22%, #241712 78%);color:var(--fg)} :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select{background:#2c1d16;color:var(--fg);border-color:#4a382e} :root[data-theme="dark"] .slider-display{border-color:#4a382e} /* Taal- en thema-schakelaar */ .topctl{display:flex;align-items:center;gap:.5rem} .langsw{display:inline-flex;border:1px solid color-mix(in oklab, var(--fg) 25%, transparent);border-radius:999px;overflow:hidden} .langsw a{padding:.2rem .55rem;font-size:.8rem;font-weight:700;text-decoration:none;color:var(--fg);opacity:.65;line-height:1.7} .langsw a.on{background:var(--accent);color:#fff;opacity:1} .themesw{border:1px solid color-mix(in oklab, var(--fg) 25%, transparent);background:transparent;border-radius:999px;cursor:pointer;width:36px;height:30px;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;padding:0} .themesw .t-light{display:none} .themesw .t-dark{display:inline} :root[data-theme="dark"] .themesw .t-light{display:inline} :root[data-theme="dark"] .themesw .t-dark{display:none} *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--fg); font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height:1.5; font-size: 18px; } .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#fff;padding:.5rem .75rem;border-radius:.5rem;box-shadow:0 2px 8px rgba(0,0,0,.15)} .site-header{position:sticky;top:0;backdrop-filter:saturate(120%) blur(6px);background:color-mix(in oklab, var(--bg) 85%, white 15%);border-bottom:1px solid #e8e8e8;z-index:10} .nav{max-width:1100px;margin:0 auto;padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem} .brand{display:flex;align-items:center;gap:.75rem;color:var(--fg);text-decoration:none;font-weight:700;font-size:1.25rem} .brand img{height:46px;width:auto;border-radius:.25rem} /* Logo-wordmark: blijft Bricolage Grotesque (uitgezonderd van Space Mono) */ .brand-name,.wordmark{font-family:'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.02em} .brand-name{color:var(--fg);font-size:1.55rem;font-weight:800;line-height:1} .brand-name .tld{color:var(--accent)} /* Al het overige (koppen + tekst) in Space Mono via de body-font */ h1,h2,h3{font-family:'Space Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0} .mono{font-family:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace} .menu{display:flex;gap:1rem;list-style:none;margin:0;padding:0} .menu a{color:var(--fg);text-decoration:none;padding:.25rem .5rem;border-radius:.5rem} .menu a:focus,.menu a:hover{outline:2px solid transparent;background:var(--muted)} .toggles{display:flex;align-items:center;gap:.75rem} .toggle{display:flex;align-items:center;gap:.35rem;font-size:.95rem} .slider-label{display:flex;align-items:center;gap:.25rem} .slider-label input{accent-color:var(--accent)} .slider-display{font-size:.9rem;padding:.2rem .4rem;border:1px solid #ddd;border-radius:.4rem} .section{padding:3rem 0;scroll-margin-top:5rem} .section.alt{background:var(--muted)} .container{max-width:1100px;margin:0 auto;padding:0 1rem} .container.narrow{max-width:800px} .two-col{display:grid;grid-template-columns:1fr;gap:1.25rem} @media(min-width:880px){.two-col{grid-template-columns:1.2fr .8fr}} .row{display:flex;align-items:center} .gap{gap:.6rem} .btn{border:0;background:var(--accent);color:#fff;padding:.6rem .9rem;border-radius:.8rem;cursor:pointer;font-weight:600} .btn:hover,.btn:focus{filter:brightness(.95)} .btn.outline{background:transparent;color:var(--fg);border:2px solid var(--fg)} .btn.secondary{background:color-mix(in oklab, var(--accent) 15%, white 85%);color:var(--fg)} .btn.ghost{background:transparent;color:var(--fg)} .btn.danger{background:#b00020} .card{background:var(--card);border:1px solid #eee;border-radius:1rem;padding:1rem;box-shadow:0 2px 8px rgba(0,0,0,.04)} .card-title{margin:0 0 .25rem 0} .grid.two{display:grid;grid-template-columns:1fr;gap:1rem} @media(min-width:760px){.grid.two{grid-template-columns:1fr 1fr}} .hero h1{font-size:2.2rem;margin:.25rem 0 .5rem 0} .hero .text{opacity:.9} .hero .text.full{display:none} body.easy-off .hero .text.easy{display:none} body.easy-off .hero .text.full{display:block} .form label{display:block;font-size:.95rem;margin:.5rem 0} input,textarea{width:100%;padding:.65rem;border-radius:.6rem;border:1px solid #ccc;background:#fff;color:#111;font:inherit} input:focus,textarea:focus{outline:3px solid color-mix(in oklab, var(--accent) 30%, transparent)} .icon-list{list-style:none;padding:0;margin:0} .icon-list li{padding-left:.1rem} .site-footer{border-top:1px solid #eee;padding:2rem 0;margin-top:2rem} .hint{font-size:.85rem;opacity:.8} .profile-img { width: 250px; /* formaat kun je groter/kleiner maken */ height: 250px; border-radius: 50%; /* maakt de foto rond */ object-fit: cover; /* zorgt dat het gezicht niet vervormt */ box-shadow: 0 4px 12px rgba(0,0,0,0.15); margin: auto; display: block; } /* smalle card voor Over ons */ .about-card{ padding:1.25rem; } .about-content{ display:flex; align-items:center; gap:1.5rem; } .about-text{ flex:1; } /* ronde foto */ .profile-img{ width:180px; height:180px; border-radius:50%; object-fit:cover; box-shadow:0 4px 12px rgba(0,0,0,.12); } /* stack op mobiel */ @media (max-width: 800px){ .about-content{ flex-direction:column-reverse; text-align:left; } .profile-img{ width:150px; height:150px; } } /* standaard: korte tekst tonen, lange verbergen */ .hero .text.easy{display:block} .hero .text.full{display:none} /* als 'easy-off' op body staat -> juist lange tekst tonen */ body.easy-off .hero .text.easy{display:none} body.easy-off .hero .text.full{display:block} /* basis lettergrootte; slider overschrijft dit via inline style */ body{font-size:18px} /* Login pagina */ .login-card { max-width: 420px; margin: 3rem auto; background: #fff; padding: 1.25rem; border-radius: 12px; border: 1px solid #eee; box-shadow: 0 4px 12px rgba(0,0,0,.04); } .login-card h1 { margin: .25rem 0 1rem; } .form-row { margin: .5rem 0; } input[type=email], input[type=password] { width: 100%; padding: .7rem; border-radius: .6rem; border: 1px solid #ccc; font: inherit; } .btnlogin { border: 0; background: #F2664A; color: #fff; padding: .6rem .9rem; border-radius: .8rem; cursor: pointer; font-weight: 700; width: 100%; } .err { color: #b00020; margin: .5rem 0 .25rem; } .msg { color: green; margin: .5rem 0; } /* register.php */ .msg2 { margin: 12px 0; padding: 12px 14px; border-radius: 8px; text-align: center; font-weight: 600; } .msg2.success { background:#e6ffed; color:#064d1e; border:1px solid #a6f0b6; } .msg2.error { background:#ffecec; color:#7a0000; border:1px solid #f0b3b3; } /* Houd de slider altijd even breed/hoog, ongeacht font-size */ .toggles { display: flex; align-items: center; gap: 12px; } .slider-label { display: flex; align-items: center; gap: 12px; } /* vaste pixel-waarden: schaal NIET mee met font-size */ #fontSlider { width: 150px; /* vaste breedte */ height: 8px; /* hoogte van de rail */ flex: 0 0 150px; /* voorkom meerekken in flex containers */ } /* knopje met A↕ ook vastzetten */ .slider-display { width: 44px; height: 44px; font-size: 16px; /* tekstgrootte in px zodat dit niet meeschuift */ line-height: 44px; text-align: center; border-radius: 10px; border: 1px solid rgba(0,0,0,.1); background: #fff; display: inline-block; } /* Zincheck pagina */ #result.ok { background:#f9fff9; border-radius:.8rem; padding:1rem; font-size:1rem; line-height:1.6; } .beste { margin-bottom: .8rem; } .alts { margin-bottom: 1rem; } /* Voorzetsen.php*/ .uitleg { margin:.5rem 0 0.75rem; color:#2a2a2a; white-space:normal; /* tekst mag gewoon afbreken */ overflow-wrap:break-word; /* breek lange woorden als nodig */ word-break:break-word; /* extra fallback */ line-height:1.6; } .oefeningen-lijst { display: flex; flex-direction: column; gap: 1rem; } .oefeningen-lijst { list-style: none; padding-left: 0; } .oefen-item { margin-bottom: 1rem; } .zin-container { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; /* laat tekst mooi afbreken op kleine schermen */ } .zin-nummer { font-weight: 700; color: #b00020; /* optioneel: accentkleur */ min-width: 1.5rem; text-align: right; } .zin-tekst { flex: 1; } /* compactere radio-opties bij toonkeuze */ fieldset { line-height: 1.2; /* minder lucht */ } fieldset label { display: flex; gap: .4rem; /* kleine ruimte tussen bolletje en tekst */ margin: 2px 0; /* minder marge tussen regels */ font-size: 1rem; /* consistent lettertype */ } .tone-choice { display: flex; flex-direction: column; gap: 0.25rem; line-height: 1.3; } .tone-choice label { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; border-radius: .5rem; transition: background .15s; cursor: pointer; } .tone-choice label:hover { background: var(--muted); } .tone-choice span { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 500; } .icon-tone { display: inline-flex; color: var(--accent); /* jouw oranje kleur #F2664A */ font-size: 1.2rem; width: 1.5rem; /* zorgt dat alles mooi uitlijnt */ text-align: center; } .tone-choice input[type="radio"] { margin-left: .75rem; transform: scale(1.1); } /* Zijmenu CSS */ .menu-toggle { background: var(--accent); color: #fff; font-size: 1.4rem; border: none; border-radius: .6rem; padding: .4rem .8rem; cursor: pointer; margin: .5rem; } .side-menu { position: fixed; top: 0; left: -240px; width: 220px; height: 100%; background: var(--card); box-shadow: 2px 0 8px rgba(0,0,0,0.15); padding-top: 2.5rem; transition: left 0.3s ease; z-index: 1000; } .side-menu.open { left: 0; } .side-menu ul { list-style: none; margin: 0; padding: 0; } .side-menu li { margin: .5rem 0; } .side-menu a { display: block; color: var(--fg); text-decoration: none; padding: .75rem 1.25rem; } .side-menu a:hover { background: var(--muted); } .logout { color: #b00020; font-weight: 700; } .side-logo { text-align: center; padding: .5rem 0; border-bottom: 1px solid #eee; } .side-logo img { width: 120px; height: auto; } /* Historie pagina CSS */ #history-list { list-style: none; padding: 0; margin: 0; } #history-list li { margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid #eee; } .history-grid { display: grid; gap: 1rem; margin-top: 1.5rem; } .history-card { background: #fff; border: 1px solid #eee; border-left: 6px solid var(--accent); border-radius: 10px; padding: 1rem 1.25rem; box-shadow: 0 2px 6px rgba(0,0,0,.05); } .history-card p { margin: .4rem 0; line-height: 1.5; } .history-card details { background: #f9f9f9; padding: .5rem .8rem; border-radius: .5rem; margin-top: .5rem; } .history-card summary { cursor: pointer; font-weight: 600; color: var(--accent); } .history-card ul { margin: .4rem 0 0 1rem; } .history-card li { margin-bottom: .3rem; } .history-header { text-align: right; font-size: .85rem; color: #888; margin-bottom: .3rem; } .ai-block { margin-top: 8px; } .speak-btn { margin-top: 6px; } /* Geschiedenis – strakker en rustiger */ .history-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem; } .history-actions{ display:flex; gap:.5rem; } .history-grid{ display:grid; gap:1rem; margin-top:1rem; } .history-item{ background:var(--card); border:1px solid #eee; border-left:6px solid var(--accent); border-radius:14px; padding:1rem 1.1rem; box-shadow:0 2px 8px rgba(0,0,0,.04); } .history-meta{ display:flex; justify-content:flex-end; margin-bottom:.5rem; } .history-date{ font-size:.85rem; opacity:.65; } .history-block{ display:grid; gap:.35rem; } .history-label{ font-weight:800; } .history-text{ line-height:1.6; } .history-divider{ height:1px; background:#eee; margin:.85rem 0; } .history-details{ margin-top:.8rem; background:color-mix(in oklab, var(--muted) 70%, white 30%); border-radius:12px; padding:.65rem .8rem; } .history-details summary{ cursor:pointer; font-weight:800; color:var(--accent); } .history-alts{ margin:.6rem 0 0 1.2rem; padding:0; display:grid; gap:.6rem; } .history-alt-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; } .history-alt-text{ flex:1; } /* kleinere knoppen */ .btn-small{ padding:.45rem .7rem; border-radius:.75rem; font-size:.95rem; width:auto; } .tts-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; font-size: .95rem; font-weight: 500; border-radius: 999px; /* pill-shape */ border: 1px solid var(--border, #e6e6e6); background: #fff5f1; color: #333; cursor: pointer; transition: all .15s ease; } .tts-btn .tts-icon { font-size: 1rem; } .tts-btn:hover { background: #ffe6dd; } .tts-btn:active { transform: scale(0.97); } .tts-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Stop iets neutraler */ .tts-btn.stop-btn { background: #f6f6f6; } .tts-btn.stop-btn:hover { background: #eeeeee; } /* --- Knoppen netjes uitlijnen (Spreek + Delen) --- */ .row.gap{ align-items: center; /* verticaal gelijk */ flex-wrap: wrap; /* mobiel: netjes afbreken */ } .btn{ display: inline-flex; /* i.p.v. inline-block */ align-items: center; justify-content: center; gap: .45rem; /* ruimte tussen icoon en tekst */ min-height: 44px; /* vaste hoogte → perfect uitlijnen */ line-height: 1; /* voorkomt baseline-verschil door emoji */ vertical-align: middle; } /* optional: iets strakker voor outline knoppen */ .btn.outline{ padding-top: .55rem; padding-bottom: .55rem; } /* --- TTS knoppen: mobiel fix --- */ .tts-controls { display: flex; gap: .5rem; flex-wrap: wrap; /* MAG afbreken */ } @media (max-width: 480px) { .tts-controls { justify-content: flex-start; } .tts-btn { flex: 1 1 auto; /* knoppen delen breedte */ min-width: 0; padding: .5rem .65rem; font-size: .9rem; } .tts-btn span:last-child { white-space: nowrap; } } .card { overflow-x: hidden; } /* Mail-result header: titel + knoppen netjes */ /* Header in mail-cards: titel + knoppen */ .mail-item-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; } /* Knoppen: desktop = rij, mobiel = 3 tegels */ .tts-controls{ display:flex; gap:.5rem; flex-wrap:wrap; } @media (max-width: 600px){ .mail-item-head{ flex-direction:column; align-items:flex-start; } .tts-controls{ width:100%; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 gelijke tegels */ gap:.5rem; } .tts-btn{ width:100%; justify-content:center; padding:.55rem .5rem; font-size:.9rem; } /* tekst mag niet overlopen */ .tts-btn span:last-child{ white-space:nowrap; } } .extra-card{ display:flex; flex-direction:column; } .lang-choice{ display:flex; flex-direction:column; gap:.5rem; padding:.6rem .75rem; border:1px solid #e6e6e6; border-radius:12px; background:#fff; } .lang-opt{ display:flex; justify-content:space-between; align-items:center; padding:.2rem 0; font-weight:600; } .grow-textarea{ flex:1; min-height:140px; resize:vertical; } .form-actions{ display:flex; justify-content:flex-end; margin-top:16px; } /* Compact zijmenu */ .side-menu li { margin: 0.25rem 0; /* was .5rem */ } .side-menu a { padding: 0.4rem 0.9rem; /* was .75rem 1.25rem */ font-size: 0.95rem; /* iets kleiner, rustiger */ line-height: 1.15; /* minder verticale lucht */ } /* Toggle switch */ .switch-ui{ width:52px; height:30px; border-radius:999px; position:relative; background:#d7d7d7; transition: background .15s ease; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); } .switch-ui::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:999px; background:#fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .15s ease; } .switch input:checked + .switch-ui{ background: var(--accent); } .switch input:checked + .switch-ui::after{ transform: translateX(22px); } /* Keyboard focus */ .switch input:focus + .switch-ui{ outline: 3px solid rgba(242,102,74,.25); outline-offset: 2px; } .img-wide{max-width:100%;height:auto;border-radius:12px} .img-small{max-width:220px;width:100%;height:auto;border-radius:12px} .register-link a{ display:inline-block; margin-top:1rem; font-size:1rem; text-decoration:none; } .form-row.checkbox label{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.4; } .form-row.checkbox input[type="checkbox"]{ margin-top:.2rem; transform:scale(1.15); } .form-row.checkbox a{ color:inherit; text-decoration:underline; } /* --- Side menu list: overschrijft de topmenu .menu flex --- */ .side-menu .side-menu-list{ list-style:none; margin:0; padding:0; display:block; /* geen flex */ } .side-menu .side-menu-list li{ margin: .25rem 0; } .side-menu .side-menu-list a{ display:block; color: var(--fg); text-decoration:none; padding: .4rem .9rem; font-size: .95rem; line-height: 1.15; } .side-menu .side-menu-list a:hover{ background: var(--muted); } .side-menu .side-menu-list .logout{ color:#b00020; font-weight:700; } /* Fix: witte strook boven side-menu */ .side-menu{ top: 0; left: -240px; height: 100vh; /* ipv 100% */ background: var(--bg); /* zelfde als pagina */ padding-top: 0; /* we regelen spacing in logo-blok */ z-index: 2000; /* boven alles */ } /* Logo-blok = eigen header binnen menu */ .side-logo{ background: var(--bg); padding: 16px 0; border-bottom: 1px solid #eee; } /* Zorg dat de lijst niet tegen de rand plakt */ .side-menu .side-menu-list{ padding-top: 10px; } .video-card { margin-top: 12px; } .video-head{ display:flex; justify-content:flex-start; align-items:center; gap:.5rem; } #videoToggleBtn{ display:inline-flex; align-items:center; gap:.55rem; } #videoToggleBtn .video-check{ font-weight:900; font-size:1.1rem; line-height:1; } /* Video: altijd 100% breed, altijd 16:9 */ .video-wrap{ position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 */ border-radius: 12px; overflow: hidden; background: #000; } .video-wrap iframe{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; display: block; } .input-summary{ min-height:1.2em; padding:.45rem .6rem; border:1px solid #eee; border-radius:.6rem; background:#fff; white-space:pre-wrap; } .input-static{ width: 100%; padding: .85rem 1rem; border: 1px solid #cfcfcf; border-radius: 14px; background: #f7f7f7; color: #24324b; margin-bottom: 1rem; } .card-actions{ margin-top: 1rem; display: flex; justify-content: flex-end; } select{ width: 100%; padding: .85rem 1rem; border: 1px solid #cfcfcf; border-radius: 14px; background: #fff; color: #24324b; font: inherit; } /* --- Hamburger menu (hoofdnavigatie) --- */ .nav-toggle { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--fg); padding: .25rem .5rem; border-radius: .5rem; line-height: 1; margin-left: auto; } .nav-toggle:focus { outline: 2px solid var(--accent); } @media (max-width: 760px) { .nav-toggle { display: block; } .nav { flex-wrap: wrap; } #nav-menu { display: none !important; flex-direction: column; width: 100%; border-top: 1px solid #e8e8e8; padding: .5rem 0 .75rem; gap: 0; } #nav-menu.open { display: flex !important; } #nav-menu li { width: 100%; } #nav-menu a { display: block; padding: .6rem 1rem; } .toggles { display: none; } }