/* Kleine extra's bovenop Bootstrap */ :root { --brand: #0d6efd; color-scheme: light; } body { background-color: #f8f9fb; color: #1d232d; } .navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.85); } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link.active { color: #fff; } .navbar-dark .navbar-brand { color: #fff; } /* Thema's */ html.theme-light body { background-color: #f8f9fb; color: #1d232d; } html.theme-light .card { background-color: #fff; border-color: #dce3ea; } html.theme-light .card-header { background-color: #eef2f7; border-bottom-color: #dce3ea; color: #1d232d; } html.theme-light .table { color: #1f2933; } html.theme-light .table-striped tbody tr:nth-of-type(odd) { background-color: #f2f4f8; } html.theme-light .table-hover tbody tr:hover { background-color: #e6ebf2; } /* Donker thema (geforceerd via .theme-dark op ) */ html.theme-dark { color-scheme: dark; } html.theme-dark body { background-color: #0f1116; color: #e5ebf3; } html.theme-dark .navbar.bg-dark { background-color: #0c121d !important; } html.theme-dark .card { background-color: #171c24; border-color: #262d38; } html.theme-dark .card-header { background-color: #141b23; border-bottom-color: #262d38; color: #f3f6fc; } html.theme-dark .table { color: #dbe2ec; } .table td, .table th { vertical-align: middle; } :root { --base-font-size: 16px; } html, body { font-size: var(--base-font-size); line-height: 1.55; } /* Headings netjes en schaalbaar */ h1, h2, h3, h4, h5, h6 { line-height: 1.25; } /* Duidelijke focus voor toetsenbordnavigatie */ :focus-visible { outline: 3px solid rgba(13,110,253,.6); outline-offset: 2px; } /* ----------------------------- */ /* Uitgebreide donker thema UI */ /* ----------------------------- */ html.theme-dark a { color: #79a7ff; } html.theme-dark a:hover { color: #a9c4ff; } html.theme-dark .text-muted, html.theme-dark .form-text { color: #a3b4c8 !important; } html.theme-dark .form-label, html.theme-dark label, html.theme-dark .form-check-label { color: #e0e6f0; } /* Alerts */ html.theme-dark .alert { background-color: #151515; color: #eaeaea; border-color: #2c2c2c; } html.theme-dark .alert-success { background-color: #113a1f; border-color: #1f5a32; color: #c6f3d2; } html.theme-dark .alert-danger { background-color: #431b1b; border-color: #6a2a2a; color: #f1c0c0; } html.theme-dark .alert-warning { background-color: #4a3a12; border-color: #6a531a; color: #ffe3a3; } html.theme-dark .alert-info { background-color: #133a4a; border-color: #1c5669; color: #bfe9f5; } /* Badges */ html.theme-dark .badge.text-bg-secondary { background-color: #35455a; color: #e2edff; } html.theme-dark .badge.text-bg-success { background-color: #215533; color: #d6f6df; } html.theme-dark .badge.text-bg-danger { background-color: #5f1d2b; color: #ffd6d9; } html.theme-dark .badge.text-bg-warning { background-color: #6d4d16; color: #ffe9ba; } html.theme-dark .badge.text-bg-info { background-color: #1f4f6b; color: #d4efff; } /* Forms */ html.theme-dark .form-control, html.theme-dark .form-select { background-color: #101010; color: #eaeaea; border-color: #333; } html.theme-dark .form-control:focus, html.theme-dark .form-select:focus { background-color: #121212; color: #fff; border-color: #4a4a4a; box-shadow: none; } html.theme-dark .form-control::placeholder { color: #9a9a9a; } html.theme-dark .input-group-text { background-color: #171717; color: #ddd; border-color: #333; } html.theme-dark .form-check-input { background-color: #101010; border-color: #3a3a3a; } html.theme-dark .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); } html.theme-dark .btn-close { filter: invert(1); } /* Tables */ html.theme-dark .table { color: #e4e9f3; border-color: #2a2a2a; --bs-table-bg: #141b23; --bs-table-color: #e4e9f3; --bs-table-striped-bg: #121925; --bs-table-striped-color: #e0e6f3; --bs-table-hover-bg: #1b2432; --bs-table-hover-color: #f2f6ff; --bs-table-border-color: #2f3744; background-color: var(--bs-table-bg); } html.theme-dark .table thead th { color: #f3f6fc; background-color: #101723; border-bottom-color: #2f3744; } html.theme-dark .table tbody tr, html.theme-dark .table tbody td, html.theme-dark .table tbody th { color: #e4e9f3; } html.theme-dark .table-striped tbody tr:nth-of-type(odd) { background-color: var(--bs-table-striped-bg); } html.theme-dark .table-striped tbody tr:nth-of-type(even) { background-color: #161e2b; } html.theme-dark .table-hover tbody tr:hover { background-color: var(--bs-table-hover-bg); } /* Dropdowns & Modals */ html.theme-dark .dropdown-menu { background-color: #111; color: #eaeaea; border-color: #2a2a2a; } html.theme-dark .dropdown-item { color: #eaeaea; } html.theme-dark .dropdown-item:hover, html.theme-dark .dropdown-item:focus { background-color: #1e1e1e; color: #fff; } html.theme-dark .modal-content { background-color: #171717; color: #eaeaea; border-color: #2a2a2a; } /* Buttons */ html.theme-dark .btn-outline-light { color: #eaeaea; border-color: #cfcfcf; } html.theme-dark .btn-outline-light:hover { background-color: #eaeaea; color: #111; } html.theme-dark .btn-outline-secondary { color: #f1f5f9; border-color: #7c8aa3; } html.theme-dark .btn-outline-secondary:hover, html.theme-dark .btn-outline-secondary:focus { background-color: #7c8aa3; color: #0d1117; } html.theme-dark .btn-outline-primary { color: #9ec5fe; border-color: #3d8bfd; } html.theme-dark .btn-outline-primary:hover, html.theme-dark .btn-outline-primary:focus { background-color: #3d8bfd; color: #07101f; } html.theme-dark .btn-outline-danger { color: #f7c0c7; border-color: #ff6b7d; } html.theme-dark .btn-outline-danger:hover, html.theme-dark .btn-outline-danger:focus { background-color: #ff6b7d; color: #2b0a0f; } /* ----------------------------- */ /* Homepage experience */ /* ----------------------------- */ .ai-hero { position: relative; } .ai-hero__grid { display: grid; gap: 2.5rem; align-items: center; } .ai-hero__copy { max-width: 560px; } .ai-hero__eyebrow { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: #0d6efd; margin-bottom: 0.5rem; } .ai-hero__title { font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 700; margin-bottom: 1rem; } .ai-hero__lead { font-size: 1.12rem; color: rgba(17, 24, 39, 0.78); margin-bottom: 1.5rem; } .ai-hero__highlights { display: grid; gap: 0.75rem; margin-bottom: 1.75rem; color: rgba(17, 24, 39, 0.7); } .ai-hero__highlights i { color: #0d6efd; margin-right: 0.65rem; font-size: 1.1rem; } .ai-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; } .ai-hero__visual { display: flex; align-items: center; justify-content: center; } .ai-hero__visual-inner { position: relative; width: min(420px, 80vw); aspect-ratio: 1 / 1; border-radius: 32px; padding: 2.5rem; background: radial-gradient(circle at 30% 25%, rgba(13, 110, 253, 0.35), transparent 58%), linear-gradient(140deg, #071a3a 0%, #0a2647 35%, #143a68 100%); box-shadow: 0 30px 50px rgba(10, 22, 64, 0.45), inset 0 0 0 1px rgba(124, 182, 255, 0.12); overflow: hidden; } .ai-hero__halo { position: absolute; inset: -25%; background: radial-gradient(circle, rgba(86, 193, 255, 0.26), transparent 70%); pointer-events: none; } .ai-hero__orb { position: relative; width: 140px; height: 140px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8dd3ff, #2f6df6 65%, #122d69 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #03142e; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: 0 18px 28px rgba(14, 45, 102, 0.45); } .ai-hero__node { position: absolute; display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; padding: 0.9rem 1.1rem; border-radius: 16px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(18px); border: 1px solid rgba(124, 182, 255, 0.35); color: #e7f1ff; font-size: 0.92rem; line-height: 1.2; min-width: 150px; box-shadow: 0 12px 16px rgba(3, 12, 36, 0.35); } .ai-hero__node small { font-size: 0.75rem; opacity: 0.8; } .ai-hero__node--analysis { top: 12%; right: 10%; } .ai-hero__node--students { bottom: 14%; left: 8%; } .ai-hero__node--security { bottom: 8%; right: 16%; } .ai-hero__pulse { position: absolute; inset: 15%; border-radius: 32px; border: 1px dashed rgba(124, 182, 255, 0.4); animation: ai-pulse 12s linear infinite; } @keyframes ai-pulse { 0% { transform: scale(0.95); opacity: 0.65; } 50% { transform: scale(1.03); opacity: 0.9; } 100% { transform: scale(0.95); opacity: 0.65; } } html.theme-dark .ai-hero__lead, html.theme-dark .ai-hero__highlights { color: rgba(231, 241, 255, 0.82); } .ai-section { border-top: 1px solid rgba(13, 110, 253, 0.08); } .ai-section__header { max-width: 640px; margin: 0 auto 2.5rem; } .ai-card { height: 100%; padding: 2rem 1.75rem; border-radius: 18px; background: linear-gradient(145deg, #ffffff, #f2f5fb); border: 1px solid rgba(13, 110, 253, 0.08); box-shadow: 0 16px 28px rgba(13, 60, 123, 0.08); } html.theme-dark .ai-card { background: linear-gradient(145deg, rgba(18, 35, 61, 0.9), rgba(9, 18, 37, 0.85)); border: 1px solid rgba(124, 182, 255, 0.22); box-shadow: 0 18px 32px rgba(5, 12, 28, 0.55); } .ai-card h3 { color: #0f1a2f; } .ai-card p { color: rgba(17, 24, 39, 0.72); } html.theme-dark .ai-card h3 { color: #dbe8ff; } html.theme-dark .ai-card p { color: rgba(217, 227, 255, 0.8); } .ai-card__icon { width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem; color: #fff; margin-bottom: 1.25rem; } .bg-gradient-primary { background: linear-gradient(135deg, #0d6efd 0%, #5a9bff 100%); } .bg-gradient-secondary { background: linear-gradient(135deg, #6610f2 0%, #9c6bff 100%); } .bg-gradient-tertiary { background: linear-gradient(135deg, #198754 0%, #3ccf8e 100%); } .ai-roadmap { background: linear-gradient(160deg, rgba(13, 110, 253, 0.08), rgba(9, 17, 44, 0.92)), url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="320" height="320" viewBox="0 0 320 320"%3E%3Cg fill="none" stroke="rgba(124,182,255,0.2)" stroke-width="1"%3E%3Cpath d="M0 80h320"/%3E%3Cpath d="M0 160h320"/%3E%3Cpath d="M0 240h320"/%3E%3Cpath d="M80 0v320"/%3E%3Cpath d="M160 0v320"/%3E%3Cpath d="M240 0v320"/%3E%3C/g%3E%3C/svg%3E'); color: #f8fbff; border-radius: 22px; padding: 3rem clamp(1.5rem, 4vw, 3rem); box-shadow: 0 20px 32px rgba(6, 19, 48, 0.35); overflow: hidden; } .ai-roadmap__wrapper { max-width: 920px; margin: 0 auto; } .ai-roadmap__title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; margin-bottom: 2rem; } .ai-roadmap__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; } .ai-roadmap__list li { padding: 1.75rem 1.75rem 1.75rem 1.75rem; border-radius: 18px; background: rgba(2, 9, 28, 0.55); border: 1px solid rgba(124, 182, 255, 0.25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); } .ai-roadmap__step { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8dd3ff; margin-bottom: 0.75rem; } .ai-cta { display: flex; justify-content: center; } .ai-cta__panel { width: 100%; max-width: 960px; border-radius: 24px; padding: clamp(2rem, 4vw, 3rem); background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #312e81 100%); color: #fff; display: grid; gap: 1.5rem; align-items: center; box-shadow: 0 24px 36px rgba(11, 21, 57, 0.4); } .ai-cta__panel h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 0.5rem; } .ai-cta__panel p { margin: 0; color: rgba(240, 248, 255, 0.82); } .ai-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; } @media (min-width: 992px) { .ai-hero__grid { grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr); } .ai-cta__panel { grid-template-columns: 1fr auto; } } @media (max-width: 575.98px) { .ai-hero__actions { flex-direction: column; align-items: stretch; } .ai-cta__actions { flex-direction: column; } } /* ----------------------------- */ /* Admin actions grid */ /* ----------------------------- */ .admin-actions { margin: 2rem 0 1rem; } .admin-actions__intro { max-width: 640px; margin-bottom: 1.5rem; } .admin-actions__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: 0.5rem; } .admin-actions__lead { color: rgba(17, 24, 39, 0.7); } .admin-actions__grid { display: grid; gap: 1.5rem; } .admin-actions__card { display: block; padding: 1.75rem; border-radius: 18px; background: linear-gradient(135deg, rgba(246, 249, 255, 0.92), rgba(232, 241, 255, 0.78)); border: 1px solid rgba(164, 192, 255, 0.2); box-shadow: 0 18px 35px rgba(72, 106, 160, 0.12); text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .admin-actions__card:hover, .admin-actions__card:focus { transform: translateY(-6px); border-color: rgba(61, 139, 253, 0.4); box-shadow: 0 22px 40px rgba(61, 139, 253, 0.18); outline: none; } .admin-actions__icon { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 1.8rem; color: #1b4bb8; background: radial-gradient(circle at 30% 30%, rgba(233, 244, 255, 0.85), rgba(173, 208, 255, 0.4)); margin-bottom: 1.25rem; } .admin-actions__card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #10204b; } .admin-actions__card-text { margin: 0; color: rgba(17, 24, 39, 0.72); } html.theme-dark .admin-actions__lead { color: rgba(214, 224, 240, 0.8); } html.theme-dark .admin-actions__card { background: linear-gradient(135deg, rgba(18, 35, 61, 0.95), rgba(12, 23, 45, 0.85)); border: 1px solid rgba(87, 146, 255, 0.22); box-shadow: 0 18px 35px rgba(6, 13, 28, 0.45); } html.theme-dark .admin-actions__card:hover, html.theme-dark .admin-actions__card:focus { border-color: rgba(121, 182, 255, 0.6); box-shadow: 0 22px 40px rgba(32, 88, 190, 0.38); } html.theme-dark .admin-actions__icon { color: #9ec5ff; background: radial-gradient(circle at 30% 30%, rgba(66, 105, 168, 0.55), rgba(25, 55, 104, 0.42)); } html.theme-dark .admin-actions__card-title { color: #d9e2ff; } html.theme-dark .admin-actions__card-text { color: rgba(215, 224, 245, 0.75); } @media (min-width: 768px) { .admin-actions__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } /* ----------------------------- */ /* Student dashboard cards */ /* ----------------------------- */ .summary-card, .student-summary-card { background: linear-gradient(135deg, #ffffff, #f4f6fb); border: 1px solid rgba(13, 110, 253, 0.08); } .student-prompts-card { background: linear-gradient(135deg, #ffffff, #f9fbff); border: 1px solid rgba(13, 110, 253, 0.08); } .student-prompts-card .card-body { color: #1f2933; } .student-prompts-card .card-body p { color: rgba(31, 45, 68, 0.78); } .summary-card .card-body, .student-summary-card .card-body { color: #1f2933; } .summary-card .card-body p, .student-summary-card .card-body p { color: rgba(31, 45, 68, 0.78); } html.theme-dark .summary-card, html.theme-dark .student-summary-card { background: linear-gradient(135deg, rgba(24, 32, 48, 0.95), rgba(16, 23, 36, 0.92)); border: 1px solid rgba(124, 182, 255, 0.24); box-shadow: 0 14px 28px rgba(5, 12, 28, 0.55); } html.theme-dark .student-prompts-card { background: linear-gradient(135deg, rgba(19, 28, 44, 0.95), rgba(12, 19, 33, 0.92)); border: 1px solid rgba(124, 182, 255, 0.18); box-shadow: 0 14px 28px rgba(5, 12, 28, 0.45); } html.theme-dark .student-prompts-card .card-body { color: rgba(227, 236, 252, 0.92); } html.theme-dark .student-prompts-card .card-body p { color: rgba(227, 236, 252, 0.88); } html.theme-dark .summary-card .card-header, html.theme-dark .student-summary-card .card-header { background-color: transparent; border-bottom-color: rgba(124, 182, 255, 0.18); } html.theme-dark .summary-card .card-body, html.theme-dark .student-summary-card .card-body { color: rgba(227, 236, 252, 0.92); } html.theme-dark .summary-card .card-body p, html.theme-dark .student-summary-card .card-body p { color: rgba(227, 236, 252, 0.88); } .markdown-output { white-space: pre-wrap; line-height: 1.55; } .markdown-output strong { font-weight: 600; } .markdown-output em { font-style: italic; } .markdown-output ul, .markdown-output ol { margin-bottom: 0.75rem; padding-left: 1.25rem; }