/* ── Dark blue site header for academy (matches all other pages) ────── */ body.academy .site-header { background: #1B2345; border-bottom-color: rgba(255, 255, 255, 0.1); backdrop-filter: none; } body.academy .site-header::before { content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: var(--site-brand-mark-size); height: var(--site-brand-mark-size); border-radius: 999px; background: url("./ludodidactiek-patch.png") center / cover no-repeat; box-shadow: var(--site-shadow-soft); } body.academy .site-header__inner { padding-left: calc(var(--site-brand-mark-size) + 18px); } body.academy .site-nav__links { padding: 0; gap: 18px; border: 0; background: transparent; } body.academy .site-nav__links a { padding: 6px 0; border-radius: 0; font-size: 18px; font-weight: 500; letter-spacing: 0; text-transform: none; border-bottom: 1px solid transparent; color: rgba(255, 255, 255, 0.68); } body.academy .site-nav__links a:hover, body.academy .site-nav__links a:focus-visible { color: #ffffff; background: transparent; border-bottom-color: rgba(255, 255, 255, 0.38); } body.academy .site-header .site-brand { color: rgba(255, 255, 255, 0.95); } body.academy .site-lang { background: transparent; border-color: rgba(255, 255, 255, 0.22); } body.academy .site-header .site-lang-btn { color: rgba(255, 255, 255, 0.65); } body.academy .site-header .site-lang-btn.is-active { background: rgba(255, 255, 255, 0.14); color: #ffffff; } body.academy .site-menu-btn { background: transparent; border-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.9); } body.academy .site-menu-panel { background: rgba(27, 35, 69, 0.97); border-bottom-color: rgba(255, 255, 255, 0.1); } body.academy .site-menu-panel a { color: rgba(255, 255, 255, 0.72); } body.academy .site-menu-panel a:hover, body.academy .site-menu-panel a:focus-visible { background: rgba(255, 255, 255, 0.08); color: #ffffff; } /* ── Neutralise mda-app.css global body overrides ──────────────────── */ /* mda-app.css sets a dark radial-gradient background and non-system font on body. Since , these rules win by specificity. */ body.academy { background: var(--site-bg) !important; color: var(--site-text) !important; font-family: var(--site-font-sans) !important; min-height: unset; } /* mda-app.css .page sets min-height and a dark context — scope it */ .academy-tool .page { background: var(--site-bg); min-height: 0; } /* ── Academy subnav — site-styled secondary navigation ─────────────── */ .academy-subnav { display: flex; align-items: center; gap: 8px; padding: 0 24px; height: 48px; background: var(--site-bg-alt); border-bottom: 1px solid var(--site-border); position: sticky; top: var(--site-header-height, 64px); z-index: 10; } .academy-subnav__sections { display: flex; gap: 4px; flex: 1; } .academy-subnav__btn { padding: 5px 16px; border: none; background: transparent; color: var(--site-text-2); border-radius: 20px; cursor: pointer; font-size: 0.84rem; font-weight: 500; font-family: var(--site-font-sans); letter-spacing: 0; transition: background 0.15s, color 0.15s; white-space: nowrap; } .academy-subnav__btn:hover { background: var(--site-surface-muted); color: var(--site-text); } .academy-subnav__btn.is-active { background: var(--site-accent); color: #ffffff; font-weight: 600; } /* Inner tool switcher (MDA deck / Canvas) — only in Create section */ .academy-subnav__tools { display: flex; gap: 2px; padding-left: 16px; border-left: 1px solid var(--site-border); } .academy-subnav__tool { padding: 4px 12px; border: 1px solid var(--site-border); background: var(--site-surface); color: var(--site-text-2); border-radius: 14px; cursor: pointer; font-size: 0.78rem; font-weight: 500; font-family: var(--site-font-sans); transition: background 0.15s, color 0.15s; } .academy-subnav__tool:hover { background: var(--site-bg-alt); color: var(--site-text); } .academy-subnav__tool.is-active { background: var(--site-text); color: var(--site-bg); border-color: var(--site-text); } /* Action buttons */ .academy-subnav__actions { display: flex; gap: 6px; padding-left: 12px; border-left: 1px solid var(--site-border); } .academy-subnav__action { padding: 5px 14px; border: 1px solid var(--site-border); background: var(--site-surface); color: var(--site-text); border-radius: 14px; cursor: pointer; font-size: 0.78rem; font-weight: 500; font-family: var(--site-font-sans); transition: background 0.12s; } .academy-subnav__action:hover { background: var(--site-bg-alt); } .academy-subnav__action--primary { background: var(--site-accent); border-color: var(--site-accent); color: #ffffff; } .academy-subnav__action--primary:hover { background: var(--site-accent-hover); } /* ── Academy tool container ─────────────────────────────────────────── */ .academy-tool { display: flex; flex-direction: column; min-height: calc(100vh - var(--site-header-height, 64px) - 48px); } /* Section containers */ .academy-section { display: none; flex: 1; min-height: 0; flex-direction: column; } .academy-section.is-active { display: flex; } /* .page must be flex column so sections fill height */ .academy-tool .page { display: flex; flex-direction: column; flex: 1; } /* Metro iframe — fills Watch & Learn section */ .metro-frame { flex: 1; width: 100%; height: calc(100vh - var(--site-header-height, 64px) - 48px); border: none; display: block; } /* ── Override MDA app dark theme to match site ──────────────────────── */ .academy .academy-tool { --topbar-bg: var(--site-bg-alt); --topbar-fg: var(--site-text); --bg-window: var(--site-bg-alt); --bg-sidebar: var(--site-surface); --bg-canvas: var(--site-bg-alt); --bg-zone: var(--site-surface); --border-subtle: var(--site-border-subtle); --shadow-soft: var(--site-shadow-soft); --accent-blue: var(--site-accent); --text-primary: var(--site-text); --text-secondary: var(--site-text-2); --text-muted: var(--site-muted); } /* Canvas editor */ .academy .academy-tool .mda-app { background: var(--bg-window); } .academy .academy-tool .sidebar { border-color: var(--site-border-subtle); box-shadow: var(--site-shadow-soft); } .academy .academy-tool .library-toggle { background: transparent; } .academy .academy-tool .library-toggle__btn { border-color: var(--site-border-subtle); background: rgba(0, 0, 0, 0.03); color: var(--site-text); } .academy .academy-tool .library-toggle__btn.is-active { background: #ffffff; border-color: rgba(0, 0, 0, 0.14); color: var(--site-text); box-shadow: var(--site-shadow-soft); } .academy .academy-tool .canvas-zone { border-color: rgba(0, 0, 0, 0.10); } .academy .academy-tool .canvas-zone-header { background: rgba(255, 255, 255, 0.92); border-color: var(--site-border-subtle); } .academy .academy-tool .canvas-zone-header h2 { color: var(--site-text); } /* Preview view */ .academy .academy-tool .preview-hero { background: var(--site-surface); color: var(--site-text); border-bottom: 1px solid var(--site-border-subtle); box-shadow: none; } .academy .academy-tool .preview-notes, .academy .academy-tool .preview-deck { background: var(--site-surface); border-color: var(--site-border-subtle); box-shadow: var(--site-shadow-soft); } .academy .academy-tool .preview-deck__meta { background: rgba(0, 0, 0, 0.06); border-color: var(--site-border-subtle); color: var(--site-text-2); } /* Ludoscanner */ .academy .academy-tool .ludo-content, .academy .academy-tool .ludo-board, .academy .academy-tool .ludo-remedies { background: var(--site-surface); border-color: var(--site-border-subtle); box-shadow: var(--site-shadow-soft); } .academy .academy-tool .ludo-card__frame { background: rgba(0, 0, 0, 0.03); border-color: var(--site-border-subtle); } .academy .academy-tool .ludo-action { border-color: var(--site-border-subtle); background: rgba(0, 0, 0, 0.03); color: var(--site-text); box-shadow: none; } .academy .academy-tool .ludo-action__key { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.08); color: var(--site-text-2); } .academy .academy-tool .ludo-slot { background: rgba(0, 0, 0, 0.03); border-color: var(--site-border-subtle); } .academy .academy-tool .ludo-slot__label { color: var(--site-text-2); } .academy .academy-tool .ludo-result-group, .academy .academy-tool .ludo-result-item { background: rgba(0, 0, 0, 0.03); border-color: var(--site-border-subtle); } .academy .academy-tool .ludo-result-item__body { color: var(--site-text-2); } .academy .academy-tool .ludo-remedies__meta { background: rgba(0, 0, 0, 0.06); border-color: var(--site-border-subtle); color: var(--site-text-2); } .academy .academy-tool .ludo-remedies__scroll { margin-top: 12px; max-height: clamp(220px, 32vh, 520px); overflow: auto; padding-right: 4px; } .academy .academy-tool .ludo-remedies__list { display: flex; flex-direction: column; gap: 22px; padding: 34px 32px; margin: 0 auto; width: 100%; background: #ffffff; border: 1px solid var(--site-border-subtle); border-radius: 22px; box-shadow: var(--site-shadow-soft); } .academy .academy-tool .ludo-remedies__group { border: 0; background: transparent; padding: 0; } .academy .academy-tool .ludo-remedies__group-title { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); font-size: 12px; font-weight: 900; color: var(--site-text); letter-spacing: 0.14em; text-transform: uppercase; } .academy .academy-tool .ludo-remedies__items { margin: 0; padding-left: 26px; display: flex; flex-direction: column; gap: 14px; } .academy .academy-tool .ludo-remedies__item { margin: 0; padding: 0; list-style-position: outside; } .academy .academy-tool .ludo-remedies__item-head { font-size: 13px; font-weight: 800; color: var(--site-text); } .academy .academy-tool .ludo-remedies__item-text { margin-top: 6px; color: var(--site-text-2); white-space: pre-wrap; } @media (max-width: 640px) { .academy-subnav { padding: 0 12px; gap: 4px; overflow-x: auto; } .academy-subnav__btn { padding: 5px 10px; font-size: 0.78rem; } }