/* =============================== THEME VARIABLES =================================*/ /* Default: Dark theme */ :root { --bg: linear-gradient(135deg, #0f1a2b, #0c1422, #1a2b3f); --text-light: #e0e8ff; --text-dark: #000020; --cyan: #00ffff; --magenta: #ff00ff; --dark: #090f18; --dark2: #1a2b3f; --dark-light: #0c1422; --verydark: #090f18; --accent-blue: #3355cc; --accent-light: #66ccff; --border: #1a2b3f; --box-bg: #090f18; --box-border: #1a2b3f; --dark-border: #1a2b3f; --topbar-bg: linear-gradient(135deg, #1f2b40, #0f1a2b 70%, #1a2b3f); --topbar-border: rgba(255, 255, 255, 0.06); --topbar-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } /* =============================== LIGHT THEME Activeer met =================================*/ .light-theme { --bg: linear-gradient(135deg, #fafbff, #f2f5ff); --text-light: #000; --text-dark: #000; --accent-blue: #000; --cyan: #0077cc; --magenta: #cc0099; --dark: linear-gradient(135deg, #fafbff, #f2f5ff); --dark2: linear-gradient(135deg, #fafbff, #f2f5ff); --dark-light: linear-gradient(135deg, #fafbff, #f2f5ff); --verydark: linear-gradient(135deg, #fafbff, #f2f5ff); --accent-blue: #003366; --accent-light: #0055aa; --box-bg: #ffffff; --box-border: #cccccc; --topbar-bg: linear-gradient(#f4f6f9, #e9ecf2, #dde3ee); --topbar-text-color: #000; /* zwart voor light theme */ --topbar-border: #fff; --topbar-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } /* =============================== LIGHT THEME OVERRIDES =================================*/ .light-theme body { color: var(--text-dark); background: var(--bg); } .light-theme a { color: var(--accent-blue); text-shadow: none; } .light-theme a:hover { color: var(--accent-light); } /* Panels / wrappers */ .light-theme #left, .light-theme #content, .light-theme .boxa-box, .light-theme .teaser-block { background: var(--box-bg); border: 1px solid var(--box-border); box-shadow: 0 2px 2px rgba(0,0,0,0.3); /* licht tintje */ color: var(--text-dark); } /* Menu links */ /* MENU hetzelfde uiterlijk als TABS */ .light-theme .menu a, .light-theme .menu-btn { background: #f2f2f5; /* zelfde als tab */ color: #003366; /* zelfde tekstkleur */ border-radius: 6px; padding: 10px 14px; transition: 0.2s; font-weight: 600; border: 0; } /* Hover hetzelfde als tab hover */ .light-theme .menu-btn { border: 0; box-shadow: none; /* jij wou geen shadow */ } /* Hover hetzelfde als tab hover */ .light-theme .menu a:hover, .light-theme .menu-btn:hover { background: #e5e5e8; /* tab-hover kleur */ color: #003366; box-shadow: none; /* jij wou geen shadow */ } /* Tooltip */ .light-theme .tooltip .tooltip-text { background-color: #dde7ff; color: #002244; border: 1px solid #aac0e7; } /* Lists & bullets */ .light-theme #content ul li::before { opacity: 0.5; color: #0066cc; } /* Headings */ .light-theme h1, .light-theme h2, .light-theme h3 { color: var(--accent-blue); } /* Inputs */ .light-theme .box input[type="text"], .light-theme .box input[type="email"], .light-theme .box input[type="password"], .light-theme .box textarea { background: #ffffff; color: #222; border: 1px solid #b5c6e2; } /* Buttons */ .light-theme .box button, .light-theme .box input[type="submit"] { background: #e8efff; color: #004488; border: 1px solid #aac0e7; } .light-theme .box button:hover, .light-theme .box input[type="submit"]:hover { background: #d6e4ff; color: #002255; } /* Footer */ .light-theme #footer { background: #ffffff; color: #335; border-top: 2px solid var(--border); } html { font-size:13px; } body { margin:0; padding:0; background: var(--bg); color:var(--text-light); font-family: "Lucida Console", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.4; } html, body { max-width: 100%; overflow-x: hidden; } p { margin-bottom: 12px; /* ruimte tussen paragrafen */ } a { color: #ffffff; /* wit bij hover */ text-shadow: 0 0 2px #000; text-decoration: none; font-family: "Lucida Console", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: bold; position: relative; transition: color 0.2s; } a::after { display: none; } a:hover { color: var(--cyan); } /* =============================== HEADER =================================*/ #header { position: relative; width: 100%; background: var(--bg-dark2); border-bottom: 2px solid var(--dark-border); } /* Logo in header */ #header img.logo { position: absolute; /* los van flex-flow */ bottom: -40px; /* overlap met de border */ left: 72%; /* horizontaal centreren */ transform: translateX(-50%); top: 1px; height: 150px; /* pas aan naar wens */ } /* TOPBAR */ #topbar { position: sticky; top: 0; left: 0; margin-bottom: 50px; width: 100%; background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); box-shadow: var(--topbar-shadow); color: #fff; font-size: 14px; padding: 6px 20px; z-index: 999; } #topbar .topbar-inner { max-width: 1100px; margin: 0 auto; color: var(--topbar-text-color); align-items: center; } /* Logo styling, als die overlap nodig heeft */ .topbar-logo img.logo-small { position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%); height: 150px; } /* =============================== LAYOUT =================================*/ #wrapper { display:flex; flex-wrap:wrap; gap:15px; max-width:1100px; margin:0 auto 20px auto; padding:0; box-sizing:border-box; } #left { width:22%; background:var(--dark-light); padding:15px; border:1px solid var(--dark-border); border-radius:6px; box-shadow:0 0 8px #000; flex: 0 0 22%; /* flex-grow:0; flex-shrink:0; flex-basis:22% */ } #content { width:78%; background: var(--dark-light); padding:20px; border:1px solid var(--dark-border); border-radius:6px; box-shadow:0 0 8px #000; flex: 1; /* neemt rest van de ruimte */ } /* Alle iframes binnen #content responsief maken */ #content iframe { width: 100%; /* past zich aan de breedte van de container aan */ aspect-ratio: 16 / 9; /* behoudt de hoogte-breedte verhouding */ border: 0; display: block; max-width: 100%; margin: 0 auto; } /* =============================== MENU =================================*/ .menu { list-style:none; padding:0; } .menu li { margin-bottom:12px; } .menu a { display:block; padding:8px; color: var(--accent-light); background: #0f1a2b; border-radius:4px; border:1px solid #2a3b55; transition: background 0.2s, color 0.2s, box-shadow 0.2s; } .menu a:hover { background:var(--dark-border); color:#99ddff; box-shadow:0 0 8px #000; } .tooltip { position: relative; cursor: pointer; border-bottom: 1px dotted #88ccff; color: var(--accent-light); text-decoration: none; } .tooltip .tooltip-text { visibility: hidden; width: max-content; max-width: 250px; background-color: #111155; color: #fff; text-align: center; border-radius: 6px; padding: 6px 8px; position: absolute; z-index: 10; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s ease-in-out; font-size: 0.85rem; line-height: 1.2; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } /* =============================== CONTENT ELEMENTS =================================*/ h1 { color: #88bbff; font-size: 2rem; font-weight: 900; } h2 { color: #88bbff; } h3 { font-size: 1rem; color: #aabbee; } details summary { cursor: pointer; font-weight: 600; } .error { color: #ff6666; margin-bottom: 5px; } .success { color: #66cc66; margin-bottom: 5px; } .boxa-box { background: var(--verydark); padding: 12px; border: 1px solid var(--dark-border); border-radius: 4px; margin-bottom: 15px; box-shadow: 0 2px 6px rgba(0,0,0,0.6); display: flex; gap: 10px; align-items: flex-start; } /* afbeelding */ .thema { width: 180px; flex-shrink: 0; } /* mobiel */ @media (max-width: 768px) { .boxa-box { flex-direction: column; /* ONDER elkaar */ margin: 0 auto; } .thema { width: 100%; /* img volle breedte */ max-width: 250px; /* optioneel */ } } .boxa-text { margin: 0; padding: 0; width: 100%; } /* Flex voor summary zodat emoji + tekst op één lijn staan */ .boxa-box details summary { display: flex; align-items: center; gap: 8px; /* ruimte tussen emoji en tekst */ cursor: pointer; text-align: left; } /* Emoji inline en netjes uitlijnen met tekst */ .boxa-box img.emoji, .boxa img.emoji, img.emoji { display: inline !important; /* blijft inline */ width: 1em; /* grootte gelijk aan tekst */ height: 1em; margin: 0 0.2em 0 0; /* kleine ruimte rechts van emoji */ vertical-align: -0.15em; /* beetje omlaag zodat het mooi op lijn met tekst komt */ } /* Alle tekst-elementen in summary inline-block zodat ze naast emoji blijven */ .boxa-box details summary > *:not(.emoji) { display: inline-block; margin: 0; } /* Emoji inline houden, niet block */ .boxa-box details summary .emoji { width: 20px; height: 20px; display: inline-block; /* belangrijk! */ margin: 0; /* geen extra spacing */ } /* Afbeeldingen in boxa-box (naast content) */ .boxa-box img, .boxa img { max-width: 100%; max-height: 150px; display: block; /* alleen content-afbeeldingen blijven block */ margin: 0 auto 10px; /* gecentreerd onder content */ } #content ul { list-style: none; padding: 0; } #content ul li { position: relative; padding-left: 20px; /* ruimte voor ▸ */ margin-bottom: 2px; line-height: 1.6; } /* vaste marker links */ #content ul li::before { content: "\27A4"; position: absolute; left: 0; top: 0; opacity: 0.6; } .article-small-img { float: right; margin: 0 0 12px 12px; border-radius: 6px; border: 1px solid var(--cyan); max-width: 200px; height: auto; } @media (max-width: 768px) { .article-small-img { float: none !important; display: block; margin: 12px auto; max-width: 100%; } } ul.menu li::before { content: none !important; } ul.menu li { padding-left: 0 !important; margin-left: 0 !important; } ul.menu li a { display: block; padding: 10px 14px; text-decoration: none; } ul.menu li a:hover { background: var(--dark-light); color: #99ddff; box-shadow: 0 0 8px #000; } ul.topics-list { list-style: none; margin: 0; padding: 0; } ul.topics-list li { list-style: none; margin: 0; padding: 0; display: block; } ul.topics-list li::before { content: none !important; margin: 0 !important; padding: 0 !important; width: 0 !important; } /* Sidebar menu (links) - verwijder alle bolletjes/markers */ #left ul, #left li, #left li ul, #left li li { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; } #left ul li::before, #left li ul li::before { content: none !important; /* verwijdert de ▸ pseudo-elementen */ } /* Dropdown button zoals menu-link */ .menu-btn { display: block; width: 100%; text-align: left; padding: 10px 14px; background: #0f1a2b; color: var(--accent-light); border: 1px solid #2a3b55; border-radius: 4px; cursor: pointer; font-weight: bold; box-shadow: inset 0 0 2px #000; transition: background 0.2s, color 0.2s, box-shadow 0.2s; } .menu-btn:hover { background: var(--dark-light); color: #99ddff; box-shadow: 0 0 8px #000; } /* Dropdown container */ .menu-dropdown { position: relative; margin-bottom: 8px; } /* Dropdown list */ .dropdown-list { list-style: none; /* geen bolletjes */ margin: 4px 0 0 0; padding-left: 0; /* geen extra inspringing */ display: none; /* standaard gesloten */ max-height: 300px; /* mobiel: scrollbaar als te lang */ overflow-y: auto; border-left: 1px solid #2255aa; border-radius: 0 4px 4px 0; } /* Elke item */ .dropdown-list li { margin: 2px 0; font-size: 0.85rem; } /* Link in dropdown */ .dropdown-list li a { display: block; padding: 6px 12px; color: var(--accent-light); border-radius: 4px; transition: background 0.2s, color 0.2s; text-decoration: none; } .dropdown-list li a:hover { background: var(--dark); } /* Open dropdown */ .menu-dropdown.active .dropdown-list { display: block; } /* Emoji inline */ .menu-btn img.emoji { display: inline-block; width: 1em; height: 1em; margin-right: 6px; display:inline-block !important; margin:0 !important; vertical-align:middle; } /* Tooltip compact */ .tooltip .tooltip-text { font-size: 0.75rem; padding: 4px 6px; max-width: 200px; background-color: #111155; color: #fff; border-radius: 6px; text-align: center; } /* ---------------- MOBILE ---------------- */ @media (max-width: 768px) { .dropdown-list { max-height: 200px; /* kleiner scherm */ border-left: none; border-radius: 4px; } .menu-btn { padding: 10px; } .dropdown-list li a { padding: 6px 10px; } } .pc-toc-teasers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 40px 0; } /* =============================== BOX COMPONENTS =================================*/ .box { margin: 0px; width: 100%; max-width: 800px; border-radius: 8px; } .box h3, .box label { font-weight: 700; /* vetgedrukt */ font-size: 1.0rem; /* iets groter dan normale tekst */ letter-spacing: 0.5px; /* ruimtelijkheid in letters */ text-transform: uppercase; /* optioneel: maakt het duidelijker */ margin-bottom: 2px; margin-top: 10px; display: block; line-height: 1.4; } .box input[type="text"], .box input[type="email"], .box input[type="password"], .box textarea { width: 100%; max-width: 500px; padding: 8px 10px; border: 1px solid #2a3b55; border-radius: 4px; background: #0f1a2b; color: #ffffff; margin-bottom: 8px; font-size: 14px; } /* Password wrapper binnen .box */ /* wrapper */ .box .password-wrapper { position: relative; width: 100%; max-width: 500px; display: flex; align-items: center; /* verticale centrering */ } /* input padding voor oogje */ .box .password-wrapper input { width: 100%; padding-right: 36px; box-sizing: border-box; } /* oog-button */ .box .password-wrapper .toggle-eye { position: absolute; right: 8px; top: 0; bottom: 0; margin: auto; /* automatisch verticaal centreren */ background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .box .password-wrapper .toggle-eye svg { fill: #66ccff; transition: fill 0.2s; } .box .password-wrapper .toggle-eye:hover svg { fill: #00ffff; } .box input[type="radio"] { width: auto; margin-right: 8px; accent-color: #00ffff; } .box button, .box input[type="submit"] { display: block; margin-top: 10px; padding: 10px 20px; border: 1px solid #2255aa; border-radius: 5px; background: #090f18; color: #66ccff; font-weight: bold; cursor: pointer; transition: 0.2s ease-in-out; } .box button:hover, .box input[type="submit"]:hover { background: #0033cc; color: #00ffff; } /* =============================== BEAUTY GALLERY =================================*/ .beauty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 15px; margin-top: 15px; } .beauty-item { position: relative; overflow: hidden; border-radius: 12px; cursor: pointer; transition: transform 0.3s ease; will-change: transform; display: block; aspect-ratio: 4 / 3; /* zorgt dat elk blok een vaste verhouding heeft */ } .beauty-item:hover { transform: scale(1.05); } .beauty-img { width: 100%; height: 100%; display: block; object-fit: cover; /* zorgt dat de afbeelding het hele blok vult, bijsnijden indien nodig */ object-position: center; /* focus in het midden */ transition: filter 0.3s ease; } .beauty-text { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; background: rgba(0,0,0,0.5); color: #fff; font-weight: bold; font-size: 14px; text-align: center; transition: background 0.3s ease; pointer-events: none; /* clicks gaan door de overlay heen */ } .beauty-item:hover .beauty-text { background: rgba(0,0,0,0.7); } .beauty-item:hover .beauty-img { filter: brightness(0.75); } /* =============================== FOOTER =================================*/ #footer { background: var(--dark-light); padding:12px; text-align:center; font-size:14px; color:#88aaff; border-top:2px solid var(--dark-border); margin-top:20px; } /* =============================== TEASERS =================================*/ .teasers { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); flex-wrap: wrap; gap: 20px; margin-top: 20px; justify-content: center; } .teaser-block { flex: 1 1 280px; font-size: 13px; background: var(--dark-light); border: 1px solid var(--box-border); border-radius: 8px; padding: 12px 16px; box-shadow: 0 2px 2px rgba(0,0,0,0.3); } /* ============================ Mobile tweaks ============================ */ @media (max-width: 768px) { .teasers { flex-direction: column; /* stapelt teasers onder elkaar */ gap: 12px; } .teaser-block { flex: 1 1 auto; /* neem volledige breedte van container */ max-width: 100%; /* niet breder dan scherm */ } .teaser-block .btn { width: auto; /* knoppen passen bij hun inhoud */ display: inline-block; /* niet full width */ } } .teaser-block h2, .teaser-block h3 { margin-bottom: 8px; } .teaser-block a.btn { display: inline-block; margin-top: 10px; padding: 8px 14px; border-radius: 6px; background: var(--accent-blue); color: #fff; text-decoration: none; font-weight: bold; transition: background 0.2s ease, transform 0.2s ease; } .teaser-block a.btn:hover { background: var(--accent-light); transform: translateY(-2px); color: #fff; } /* Specifieke blok kleuren */ .teaser-block.pacman img { max-width: 70%; margin-top: 10px; border-radius: 6px; } /* Modern – koel & strak */ .teaser-block.placeholder { display: none; /* lege placeholders verdwijnen op mobile */ } /* Game Buttons in pacman blok */ .teaser-block.pacman .game-buttons a { margin: 5px 5px 0 5px; } .timeline { display: flex; flex-direction: column; position: relative; margin-left: 30px; padding-left: 20px; } .timeline::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background-color: #00ffff; } .timeline-item { position: relative; margin-bottom: 30px; padding-left: 20px; /* ruimte voor bolletje */ } .timeline-item::before { content: ''; position: absolute; left: -13px; /* past bij padding-left */ top: 0; width: 15px; height: 15px; background-color: #ff00ff; border-radius: 50%; border: 2px solid #fff; } .timeline-date { font-weight: bold; margin-bottom: 5px; } .timeline-content img { display: block; margin-bottom: 5px; width: 160px; /* iets groter */ }