/* ========================================================================== SEAL Learning Platform Brand foundation: Mirabilis Design System tokens (corporate royal-blue lead, matching mirabilisdesign.com), light-first with dark theme. ========================================================================== */ :root { --ink: #262626; --ink-true: #000000; --paper: #ffffff; --mirabilis-blue: #1e3fc8; --brand-blue: #147bd1; --brand-green: #00a376; --brand-amber: #ffb81c; --brand-red: #ff0000; --teal-700: #00778b; --cyan-400: #2cccd3; --acc-teal: #00778b; --acc-green: #00a376; --acc-amber: #ffb81c; --acc-orange: #ff8200; --acc-magenta: #ce0058; --acc-red: #ff0000; --acc-blue: #147bd1; --acc-violet: #6e4cc4; --n-0: #ffffff; --n-50: #f4f7fc; --n-100: #ecf1f7; --n-200: #dce3ec; --n-300: #c4ccd6; --n-400: #9aa6b4; --n-500: #6b7888; --n-600: #4b5663; --n-700: #333c47; --n-800: #20262e; --n-900: #141a21; --n-950: #0c1220; --success: #00a376; --error: #d92d20; --warning: #ffb81c; --info: #147bd1; /* Corporate lead: royal blue. Teal reserved for progress/status accents. */ --primary: var(--mirabilis-blue); --primary-deep: #16308f; --primary-tint: rgba(30, 63, 200, 0.12); --highlight: var(--brand-amber); --bg-app: var(--n-50); --bg-panel: var(--n-0); --bg-elev: var(--n-0); --bg-row: var(--n-0); --bg-hover: var(--n-100); --bg-sunken: var(--n-100); --text-hi: var(--ink); --text-mid: var(--n-600); --text-dim: var(--n-500); --text-inv: #ffffff; --border-hair: rgba(20, 30, 45, 0.12); --border-mid: rgba(20, 30, 45, 0.2); --border-strong: rgba(20, 30, 45, 0.35); --focus-ring: rgba(30, 63, 200, 0.35); --canvas-grid: rgba(20, 30, 45, 0.05); --vibrancy: rgba(244, 247, 252, 0.85); --font-ui: "SF Pro Text", Inter, Assistant, system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "SF Pro Display", Inter, Assistant, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace; --font-tech: "Chakra Petch", var(--font-display); --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-30: 120px; --r-control: 6px; --r-panel: 10px; --r-pill: 999px; --r-dense: 3px; --sh-1: 0 1px 2px rgba(10, 20, 40, 0.08), 0 1px 8px rgba(10, 20, 40, 0.04); --sh-pop: 0 8px 28px rgba(10, 20, 40, 0.16), 0 2px 8px rgba(10, 20, 40, 0.08); --m-120: 120ms; --m-180: 180ms; --m-260: 260ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } html[data-theme="dark"] { --bg-app: var(--n-950); --bg-panel: #121a2a; --bg-elev: #182235; --bg-row: #0f1726; --bg-hover: #202c41; --bg-sunken: #090f1b; --text-hi: #edf5ff; --text-mid: #aab9cc; --text-dim: #718198; --text-inv: #0c1722; --border-hair: rgba(214, 232, 255, 0.1); --border-mid: rgba(214, 232, 255, 0.17); --border-strong: rgba(214, 232, 255, 0.3); --focus-ring: rgba(44, 204, 211, 0.42); --primary: #4d6fe0; --primary-deep: #2cccd3; --primary-tint: rgba(77, 111, 224, 0.18); --success: #41d984; --error: #ff6262; --vibrancy: rgba(12, 18, 32, 0.72); } /* -- Reset-ish base --------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Anchor jumps land below the sticky header. */ scroll-padding-top: 76px; scrollbar-gutter: stable; /* The viewport scrolls on , so the sideways-pan guard must live here (body alone still lets the page pan to the off-canvas drawer). */ overflow-x: clip; } body { margin: 0; font-family: var(--font-ui); font-size: 15px; line-height: 1.55; color: var(--text-hi); background: var(--bg-app); -webkit-font-smoothing: antialiased; /* The off-canvas mobile drawer must never create sideways scroll. */ overflow-x: clip; } /* -- Scrollbars: thin, branded, consistent across the app ------------------- */ html { scrollbar-width: thin; scrollbar-color: var(--n-400) transparent; } html[data-theme="dark"] { scrollbar-color: var(--n-600) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: 999px; border: 2px solid var(--bg-app); } ::-webkit-scrollbar-thumb:hover { background: var(--n-400); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--n-700); border-color: var(--n-950); } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--n-600); } /* Keyboard focus: one visible ring everywhere. */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } img { max-width: 100%; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 var(--sp-4); color: var(--text-hi); } code, pre, .mono { font-family: var(--font-mono); } .tabular { font-variant-numeric: tabular-nums; } .label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); margin: 0 0 var(--sp-2); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -- Layout ----------------------------------------------------------------- */ .page-shell { max-width: 1180px; margin: 0 auto; padding-inline: var(--sp-6); } @media (min-width: 900px) { .page-shell { padding-inline: var(--sp-8); } } /* -- Header ----------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--vibrancy); /* Kept mild: a large blur radius over very tall pages causes visible repaint stalls while scrolling on mid-range hardware. */ backdrop-filter: blur(8px) saturate(1.4); -webkit-backdrop-filter: blur(8px) saturate(1.4); border-bottom: 1px solid var(--border-hair); transform: translateZ(0); } .nav-shell { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-3) var(--sp-6); min-height: 60px; } @media (min-width: 900px) { .nav-shell { padding-inline: var(--sp-8); } } .brand-lockup { display: flex; align-items: center; flex: 0 0 auto; gap: var(--sp-4); text-decoration: none; } .brand-lockup:hover { text-decoration: none; } .brand-logo-frame { position: relative; width: 116px; height: 34px; } .brand-logo { position: absolute; inset: 50% auto auto 0; width: 116px; height: auto; transform: translateY(-50%); } html[data-theme="dark"] .logo-on-light { display: none; } html:not([data-theme="dark"]) .logo-on-dark { display: none; } .brand-divider { width: 1px; height: 24px; background: var(--border-mid); } .event-mark { display: flex; flex-direction: column; line-height: 1.05; } .event-mark span:first-child { font-weight: 700; font-size: 15px; letter-spacing: 0.02em; color: var(--text-hi); } .event-mark span:last-child { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-dim); } .desktop-nav { display: none; gap: var(--sp-5); margin-inline: auto; } @media (min-width: 900px) { .desktop-nav { display: flex; } } .desktop-nav a { font-size: 14px; font-weight: 500; color: var(--text-mid); padding: var(--sp-2) var(--sp-1); } .desktop-nav a:hover { color: var(--text-hi); text-decoration: none; } .desktop-nav a[aria-current="page"] { color: var(--primary); } .nav-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; } @media (min-width: 900px) { .nav-actions { margin-left: 0; } } .menu-button { display: inline-flex; } @media (min-width: 900px) { .menu-button { display: none; } } /* Narrow phones: quiet header buttons move into the drawer; the brand lockup drops its sub-mark so the primary action always fits. */ @media (max-width: 640px) { .nav-actions .button-quiet { display: none; } .nav-shell { gap: var(--sp-3); } } @media (max-width: 480px) { .brand-divider, .event-mark { display: none; } .nav-actions .button { padding: 8px 12px; } } .mobile-nav-auth { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border-hair); display: flex; flex-direction: column; gap: var(--sp-2); } /* -- Buttons ---------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: var(--r-control); border: 1px solid transparent; cursor: pointer; transition: background var(--m-120) var(--ease), color var(--m-120) var(--ease), border-color var(--m-120) var(--ease), transform var(--m-120) var(--ease); text-decoration: none; line-height: 1.2; } .button:hover { text-decoration: none; transform: translateY(-1px); } .button:active { transform: translateY(0); } .button-primary { background: var(--primary); color: #fff; } .button-primary:hover { background: var(--primary-deep); color: #fff; } .button-secondary { background: transparent; color: var(--text-hi); border-color: var(--border-strong); } .button-secondary:hover { border-color: var(--primary); color: var(--primary); } .button-quiet { background: transparent; color: var(--text-mid); } .button-quiet:hover { color: var(--text-hi); background: var(--bg-hover); } .button-large { padding: 12px 22px; font-size: 15px; } .button:disabled { opacity: 0.5; pointer-events: none; } .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-control); border: 1px solid var(--border-hair); background: transparent; color: var(--text-mid); cursor: pointer; transition: color var(--m-120) var(--ease), background var(--m-120) var(--ease); } .icon-button:hover { color: var(--text-hi); background: var(--bg-hover); } /* -- Hero ------------------------------------------------------------------- */ .page-hero { position: relative; background: linear-gradient(180deg, rgba(30,63,200,0.06), transparent 70%); border-bottom: 1px solid var(--border-hair); padding: var(--sp-16) 0 var(--sp-12); overflow: hidden; } .page-hero-content { position: relative; z-index: 1; } .page-hero h1 { font-size: clamp(30px, 4.2vw, 42px); margin-bottom: var(--sp-4); letter-spacing: -0.02em; } /* Decorative model-canvas ornament filling the hero's right half: a blueprint grid with wired block nodes, drawn in CSS only. Hidden on narrow screens. */ .hero-ornament { display: none; } @media (min-width: 1150px) { .hero-ornament { display: block; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 42%; pointer-events: none; background-image: linear-gradient(var(--canvas-grid) 1px, transparent 1px), linear-gradient(90deg, var(--canvas-grid) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); } .hero-ornament svg { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: min(520px, 90%); height: auto; animation: seal-hero-in 900ms var(--ease-out) both; } @keyframes seal-hero-in { from { opacity: 0; transform: translateY(calc(-50% + 12px)); } to { opacity: 1; transform: translateY(-50%); } } } /* Hero model canvas: shared parts (SVG lives in index.php). */ .hero-model .hm-block { fill: var(--bg-panel); stroke-width: 1.5; rx: 8; filter: drop-shadow(0 1px 2px rgba(10, 20, 40, 0.12)); } .hero-model .hm-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; fill: var(--text-mid); text-transform: uppercase; } .hero-model .hm-wire { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 5 5; animation: seal-wire-flow 1.4s linear infinite; } @keyframes seal-wire-flow { to { stroke-dashoffset: -10; } } .hero-model .hm-token { fill: var(--primary); } .hero-model .hm-token-1 { animation: seal-tok-1 3.4s var(--ease) infinite; } .hero-model .hm-token-2 { animation: seal-tok-2 3.4s var(--ease) infinite 1.1s; } .hero-model .hm-token-3 { animation: seal-tok-3 3.4s linear infinite 0.4s; fill: var(--teal-700); } @keyframes seal-tok-1 { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 40% { transform: translate(70px, 0); opacity: 1; } 48% { opacity: 0; } 100% { transform: translate(70px, 0); opacity: 0; } } @keyframes seal-tok-2 { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 40% { transform: translate(60px, 0); opacity: 1; } 48% { opacity: 0; } 100% { transform: translate(60px, 0); opacity: 0; } } /* Elbow run: right then down into the plot. */ @keyframes seal-tok-3 { 0% { transform: translate(0, 0); opacity: 0; } 6% { opacity: 1; } 45% { transform: translate(0, 0); } 60% { transform: translate(0, 46px); } 90% { transform: translate(-64px, 46px); opacity: 1; } 96% { opacity: 0; } 100% { transform: translate(-64px, 46px); opacity: 0; } } /* Plot trace draws itself, then holds. */ .hero-model .hm-trace { fill: none; stroke: var(--acc-violet); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; animation: seal-trace 5s var(--ease-out) infinite; } @keyframes seal-trace { 0% { stroke-dashoffset: 220; } 45% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: 0; opacity: 1; } 95% { opacity: 0; } 100% { stroke-dashoffset: 220; opacity: 0; } } /* Queue occupancy bars breathe. */ .hero-model .hm-slot { fill: var(--primary-tint); } .hero-model .hm-slot-1 { animation: seal-slot 3.4s var(--ease) infinite; } .hero-model .hm-slot-2 { animation: seal-slot 3.4s var(--ease) infinite 0.55s; } .hero-model .hm-slot-3 { animation: seal-slot 3.4s var(--ease) infinite 1.1s; } @keyframes seal-slot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hero-model .hm-wire, .hero-model .hm-token, .hero-model .hm-trace, .hero-model .hm-slot { animation: none; } .hero-model .hm-trace { stroke-dashoffset: 0; } .hero-model .hm-token { opacity: 0; } } .page-hero-description { font-size: 17px; color: var(--text-mid); max-width: 640px; margin: 0 0 var(--sp-6); } .eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--primary); margin: 0 0 var(--sp-3); } .page-hero-meta { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-6); } .page-hero-meta span { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-mid); font-size: 14px; } /* -- Cards & grids ---------------------------------------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-5); } .card { background: var(--bg-panel); border: 1px solid var(--border-hair); border-radius: var(--r-panel); padding: var(--sp-6); box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: var(--sp-3); transition: border-color var(--m-180) var(--ease), transform var(--m-180) var(--ease); } .card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .card h3 { font-size: 17px; margin: 0; } .card p { margin: 0; color: var(--text-mid); font-size: 14px; } .card-meta { display: flex; gap: var(--sp-3); font-size: 12px; color: var(--text-dim); } /* Category sections on the catalogue */ .catalogue-section { margin-bottom: var(--sp-12); } .catalogue-section > h2 { font-size: 22px; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-hair); margin-bottom: var(--sp-6); } .catalogue-section > p.blurb { color: var(--text-mid); margin-top: calc(var(--sp-3) * -1); margin-bottom: var(--sp-6); } /* -- Progress bars ---------------------------------------------------------- */ .progress { height: 6px; border-radius: var(--r-pill); background: var(--bg-sunken); overflow: hidden; border: 1px solid var(--border-hair); } .progress > i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--primary), var(--teal-700)); transition: width var(--m-260) var(--ease-out); } .progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: var(--sp-1); } .progress-label .tabular { color: var(--text-hi); font-weight: 600; } /* -- Topic page ------------------------------------------------------------- */ .topic-shell { max-width: 1200px; margin: 0 auto; padding: var(--sp-10) var(--sp-6) var(--sp-16); } /* Two columns ONLY when the section rail actually rendered; a lesson without a rail otherwise dropped its whole body into the empty 210px rail track. */ @media (min-width: 980px) { .topic-layout:has(.topic-rail) { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--sp-8); align-items: start; } .topic-layout:not(:has(.topic-rail)) .topic-body { margin-inline: auto; } } /* Middle content column: bounded measure so tables don't run off the right. */ .topic-body { max-width: 900px; } .topic-layout > * { min-width: 0; } .topic-section { position: relative; display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; } /* Wider screens: put section actions in a right gutter, but ONLY for sections that actually have them (heading-only sections stay full-width). */ @media (min-width: 1180px) { .topic-section:has(.section-actions) { grid-template-columns: minmax(0, 1fr) 170px; } /* Full-width body only alongside a rail; rail-less lessons keep the centered 900px reading measure. */ .topic-layout:has(.topic-rail) .topic-body { max-width: 100%; } } /* Without actions (headings), no gutter. */ .topic-section { grid-template-columns: minmax(0, 1fr); } /* Tables must never overflow their content column. */ .topic-body .seal-text { max-width: 100%; overflow-x: auto; } .topic-body .seal-text table { max-width: 100%; } .topic-title { font-size: 38px; line-height: 1.12; letter-spacing: -0.01em; margin-bottom: var(--sp-3); } .topic-subtitle { font-size: 17px; color: var(--text-mid); margin-bottom: var(--sp-8); } .topic-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-8); } .topic-meta span { font-size: 12px; color: var(--text-dim); border: 1px solid var(--border-hair); border-radius: var(--r-pill); padding: 4px 12px; background: var(--bg-panel); } /* LHS section rail: sticky navigation + progress */ .topic-rail { position: sticky; top: var(--sp-8); align-self: start; max-height: calc(100vh - var(--sp-12)); overflow-y: auto; } .rail-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); font-family: var(--font-mono); margin: 0 0 var(--sp-3); } .rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .rail-list a { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2); border-radius: var(--r-control); font-size: 13px; color: var(--text-mid); text-decoration: none; border-left: 2px solid transparent; line-height: 1.3; } .rail-list a:hover { background: var(--bg-panel); color: var(--text-hi); } .rail-list a.rail-active { color: var(--primary); background: var(--primary-tint); border-left-color: var(--primary); font-weight: 600; } .rail-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--border-mid); } .rail-list a[data-seen="1"] .rail-dot { background: var(--success); } .rail-list a.rail-active .rail-dot { background: var(--primary); } /* Anchor offset so sticky rail / header don't cover section titles */ .topic-section { scroll-margin-top: var(--sp-8); } /* Reading progress bar: CSS scroll-driven animation (MDN pattern). Scales 0 -> 1 in step with the page's own scroll progress. Also give the rail the same timeline so it can inherit a subtle fill cue. */ .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform-origin: left; background: linear-gradient(90deg, var(--primary), var(--teal-700), var(--cyan-400)); box-shadow: 0 0 6px rgba(30, 63, 200, 0.35); animation: sealScaleProgress auto linear; animation-timeline: scroll(root); } @keyframes sealScaleProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* With JS: an explicit JS fallback sets transform + a custom progress var. */ .reading-progress[data-js] { animation: none; transform: scaleX(var(--reading, 0)); transition: transform 90ms linear; } /* Document body: comfortable reading rhythm */ .topic-body { font-size: 16.5px; line-height: 1.75; } .topic-body > * + * { margin-top: var(--sp-6); } /* Section headings with a colored accent rule (anchored, like Coursera/Notion) */ .topic-body h2.seal-heading-sec { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin: var(--sp-12) 0 var(--sp-3); position: relative; padding-left: var(--sp-4); line-height: 1.3; } .topic-body h2.seal-heading-sec .seal-head-rule { position: absolute; left: 0; top: 0.28em; bottom: 0.18em; width: 4px; border-radius: 4px; background: linear-gradient(var(--primary), var(--primary-tint)); } .topic-body h3.seal-heading { font-size: 20px; font-weight: 700; margin: var(--sp-9) 0 var(--sp-3); line-height: 1.35; } .topic-body h4.seal-heading { font-size: 17px; font-weight: 700; margin: var(--sp-7) 0 var(--sp-2); } .topic-body p { color: var(--text-hi); } .topic-body a { color: var(--primary); } /* Generic contained panels used by special blocks */ .seal-panel { background: var(--bg-panel); border: 1px solid var(--border-hair); border-radius: var(--r-panel); box-shadow: var(--sh-1); overflow: hidden; margin: var(--sp-7) 0; } .seal-panel-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border-hair); background: var(--bg-sunken); } .seal-panel-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--primary); font-family: var(--font-mono); } .seal-panel .seal-text, .seal-panel .seal-steps { padding: var(--sp-5); } .seal-panel .seal-text { padding-bottom: var(--sp-5); } /* Plain text blocks */ .seal-block { background: transparent; } /* Tables: clean documentation tables */ .seal-text table { width: 100%; border-collapse: collapse; font-size: 14px; margin: var(--sp-5) 0; border: 1px solid var(--border-hair); } .seal-text thead th { background: var(--bg-sunken); font-weight: 600; letter-spacing: 0.01em; text-align: left; border-bottom: 1px solid var(--border-mid); } .seal-text th, .seal-text td { padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-hair); } .seal-text thead th:not(:first-child), .seal-text tbody td:not(:first-child) { border-left: 1px solid var(--border-hair); } .seal-text tbody tr:last-child td { border-bottom: 0; } .seal-text tbody tr:nth-child(even) { background: var(--bg-app); } /* Numeric cells align nicely; extreme values get colored text (no fills). */ .seal-text td.num, .seal-text td.tabular { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 13px; } .seal-text td.t-hi { color: var(--success, #0a7d43); font-weight: 600; } .seal-text td.t-lo { color: var(--warning, #b45309); } .seal-text td.t-hi::after, .seal-text td.t-lo::after { content: " ▲" / ""; font-size: 9px; } .seal-text td.t-lo::after { content: " ▼" / ""; } /* Callouts with label chip + accent */ .seal-callout { border-radius: var(--r-panel); border: 1px solid var(--border-hair); border-left: 4px solid var(--info); background: var(--bg-panel); padding: var(--sp-4) var(--sp-5); box-shadow: var(--sh-1); margin: var(--sp-6) 0; } .seal-callout-warn { border-left-color: var(--warning); background: var(--bg-warn, var(--bg-panel)); } .seal-callout-tag { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--info); font-family: var(--font-mono); margin-bottom: var(--sp-2); } .seal-callout-warn .seal-callout-tag { color: var(--warning); } /* Figures */ .seal-figure { margin: var(--sp-6) 0; } .seal-figure img { border-radius: var(--r-panel); border: 1px solid var(--border-hair); box-shadow: var(--sh-1); width: 100%; height: auto; } .seal-figure figcaption, .seal-video figcaption { font-size: 13px; color: var(--text-dim); margin-top: var(--sp-2); text-align: center; } /* Video */ .seal-video-frame { position: relative; padding-top: 56.25%; border-radius: var(--r-panel); overflow: hidden; border: 1px solid var(--border-hair); background: var(--n-900); box-shadow: var(--sh-1); } .seal-video-frame iframe, .seal-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .seal-video video { border-radius: var(--r-panel); border: 1px solid var(--border-hair); } .seal-video { margin: var(--sp-6) 0; } /* Model location: terminal-style chip */ .seal-model-location { background: var(--bg-sunken); border: 1px solid var(--border-hair); border-radius: var(--r-panel); padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); font-family: var(--font-mono); font-size: 13.5px; } .seal-model-location .label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); font-family: var(--font-mono); } .seal-model-location code { font-size: 13.5px; color: var(--primary); word-break: break-all; } /* Download chip */ .seal-download-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 9px 16px; border-radius: var(--r-control); border: 1px solid var(--border-mid); background: var(--bg-panel); font-size: 14px; font-weight: 600; color: var(--text-hi); box-shadow: var(--sh-1); transition: border-color 0.12s ease, color 0.12s ease; } .seal-download-chip:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; } /* Numbered steps as a vertical timeline with connecting line */ .seal-steps, .seal-procedure .seal-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-5); position: relative; } .seal-steps::before { content: ""; position: absolute; left: 14px; top: 8px; bottom: 8px; width: 2px; background: var(--border-hair); } .seal-steps li { display: flex; gap: var(--sp-4); align-items: flex-start; position: relative; } .seal-steps li span { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--primary-tint); color: var(--primary); font-weight: 700; font-size: 13px; font-family: var(--font-mono); border: 2px solid var(--primary); z-index: 1; background: var(--bg-panel); } .seal-steps li p { margin: var(--sp-2) 0 0; } /* Feature lists & case cards (from text auto-upgrade) */ .seal-feature-card { margin: var(--sp-6) 0; } .seal-feature-list { list-style: none; margin: 0; padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-2); } .seal-feature-list li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: 15px; line-height: 1.5; } .seal-feature-list li::before { content: "✓"; flex: none; width: 18px; height: 18px; margin-top: 2px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-tint); color: var(--primary); font-size: 11px; font-weight: 700; } .seal-case-card { margin: var(--sp-7) 0; } .seal-case-card .seal-panel-head { gap: var(--sp-3); flex-wrap: wrap; } .seal-case-card .seal-case-title { font-size: 15px; font-weight: 600; color: var(--text-hi); } .seal-case-card .seal-text { padding-top: var(--sp-3); } /* Quiz options as selectable cards */ .seal-quiz-slot { margin: var(--sp-7) 0; } /* Quiz panel: card-style questions */ .seal-quiz-panel { background: var(--bg-panel); border: 1px solid var(--border-hair); border-radius: var(--r-panel); box-shadow: var(--sh-1); overflow: hidden; margin: var(--sp-7) 0; } .quiz-panel-head { justify-content: space-between; } .quiz-panel-head h2 { margin: 0; font-size: 19px; } .seal-quiz-form { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); } .seal-question { border: 1px solid var(--border-hair); border-radius: var(--r-panel); padding: var(--sp-4) var(--sp-5); background: var(--bg-app); } .seal-question-q { display: flex; gap: var(--sp-3); align-items: flex-start; } .seal-question-num { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--primary-tint); color: var(--primary); font-weight: 700; font-size: 14px; font-family: var(--font-mono); } .seal-question-text { margin: 0; font-weight: 600; line-height: 1.4; } .seal-question-meta { margin: 2px 0 0; font-size: 12px; color: var(--text-dim); } .seal-options { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); } .seal-option { display: flex; align-items: center; gap: var(--sp-3); border: 1px solid var(--border-hair); border-radius: var(--r-control); padding: var(--sp-3) var(--sp-4); cursor: pointer; background: var(--bg-panel); transition: border-color 0.12s ease, background 0.12s ease; } .seal-option:hover { border-color: var(--primary); } .seal-option input { position: absolute; opacity: 0; pointer-events: none; } .seal-option-mark { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-mid); position: relative; } .seal-option input:checked + .seal-option-mark { border-color: var(--primary); } .seal-option input:checked + .seal-option-mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary); } .seal-option input:checked ~ .seal-option-text { color: var(--primary); font-weight: 600; } .seal-option:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); } .seal-open-answer { width: 100%; margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-mid); border-radius: var(--r-control); font: inherit; font-size: 14.5px; background: var(--bg-panel); resize: vertical; } .seal-open-answer:focus { border-color: var(--primary); outline: 0; } /* Understanding / reflection box per question */ .seal-understanding { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--border-hair); } .seal-understanding-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: var(--sp-2); } .seal-understanding .seal-open-answer { margin-top: 0; } /* -- Forms ------------------------------------------------------------------ */ .form-page { padding: var(--sp-12) 0 var(--sp-16); } .form-page-layout { display: grid; gap: var(--sp-8); } @media (min-width: 900px) { .form-page-layout { grid-template-columns: 320px 1fr; } } .form-aside { color: var(--text-mid); } .form-aside h2 { font-size: 20px; } .form-aside ol { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: flex; flex-direction: column; gap: var(--sp-4); } .form-aside li { display: flex; gap: var(--sp-3); } .form-aside li span { color: var(--primary); font-weight: 700; font-family: var(--font-mono); font-size: 13px; } .form-aside li p { margin: 0; font-size: 14px; } .aside-help { margin-top: var(--sp-8); padding: var(--sp-4); border: 1px solid var(--border-hair); border-radius: var(--r-panel); background: var(--bg-panel); display: flex; gap: var(--sp-3); font-size: 14px; } .auth-card { max-width: 440px; margin: var(--sp-12) auto; background: var(--bg-panel); border: 1px solid var(--border-hair); border-radius: var(--r-panel); box-shadow: var(--sh-1); padding: var(--sp-8); } .auth-card h1 { font-size: 26px; } .field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); } .field label { font-size: 13px; font-weight: 600; color: var(--text-hi); } .field input, .field select, .field textarea { font-family: var(--font-ui); font-size: 14px; padding: 9px 12px; border-radius: var(--r-control); border: 1px solid var(--border-mid); background: var(--bg-app); color: var(--text-hi); width: 100%; transition: border-color var(--m-120) var(--ease), box-shadow var(--m-120) var(--ease); } /* Checkboxes and radios keep their natural size inside .field labels. */ .field input[type="checkbox"], .field input[type="radio"] { width: auto; flex: none; accent-color: var(--primary); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .field small { font-size: 12px; color: var(--text-dim); } .field-full { grid-column: 1 / -1; } .field-grid { display: grid; gap: var(--sp-4); } @media (min-width: 700px) { .field-grid { grid-template-columns: 1fr 1fr; } } .form-notice { display: flex; gap: var(--sp-3); border: 1px solid var(--border-hair); border-left: 3px solid var(--info); background: var(--bg-panel); border-radius: var(--r-panel); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-size: 14px; } .form-notice p { margin: 0; } .human-check { border: 1px dashed var(--border-mid); border-radius: var(--r-panel); padding: var(--sp-4); margin-top: var(--sp-2); font-size: 14px; } .human-check-input { max-width: 160px; } .human-check-hint { font-size: 12px; color: var(--text-dim); margin: var(--sp-2) 0 0; } .hp-field { position: absolute; left: -9999px; } /* -- Tables (admin/prof) ---------------------------------------------------- */ .data-table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); font-weight: 600; border-bottom: 1px solid var(--border-strong); padding: var(--sp-2) var(--sp-3); } .data-table td { border-bottom: 1px solid var(--border-hair); padding: var(--sp-3); vertical-align: top; } .data-table tr:hover td { background: var(--bg-hover); } .status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: var(--r-pill); padding: 3px 10px; border: 1px solid var(--border-hair); } .status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .status-pending { color: var(--warning); background: rgba(255, 184, 28, 0.1); } .status-approved, .status-issued, .status-graded { color: var(--success); background: rgba(0, 163, 118, 0.1); } .status-rejected { color: var(--error); background: rgba(217, 45, 32, 0.1); } .status-none, .status-started { color: var(--text-dim); background: var(--bg-sunken); } /* -- Admin chrome ----------------------------------------------------------- */ .admin-body { background: var(--bg-app); } .admin-topbar { position: sticky; top: 0; z-index: 50; background: var(--vibrancy); backdrop-filter: blur(8px) saturate(1.4); -webkit-backdrop-filter: blur(8px) saturate(1.4); border-bottom: 1px solid var(--border-hair); transform: translateZ(0); } .admin-topbar-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-6); min-height: 54px; flex-wrap: wrap; } .admin-brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-hi); font-weight: 700; } .admin-brand img { height: 22px; } .admin-nav { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .admin-nav a { font-size: 13px; font-weight: 500; color: var(--text-mid); padding: 6px 10px; border-radius: var(--r-control); } .admin-nav a:hover { color: var(--text-hi); background: var(--bg-hover); text-decoration: none; } .admin-nav a.is-current { color: var(--primary); background: var(--primary-tint); } .admin-topbar-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; } .admin-who { font-size: 13px; color: var(--text-dim); } .admin-main { padding: var(--sp-8) var(--sp-6) var(--sp-16); } .admin-title { font-size: 28px; margin-bottom: var(--sp-8); } .panel { background: var(--bg-panel); border: 1px solid var(--border-hair); border-radius: var(--r-panel); box-shadow: var(--sh-1); padding: var(--sp-6); margin-bottom: var(--sp-6); } .panel h2 { font-size: 18px; margin-bottom: var(--sp-4); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); } .stat { background: var(--bg-panel); border: 1px solid var(--border-hair); border-radius: var(--r-panel); padding: var(--sp-5); box-shadow: var(--sh-1); } .stat .stat-value { font-size: 30px; font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-hi); } .stat .stat-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-top: var(--sp-1); } /* -- Badges ----------------------------------------------------------------- */ .badge-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-4); } .badge-tile { background: var(--bg-panel); border: 1px solid var(--border-hair); border-radius: var(--r-panel); padding: var(--sp-5); text-align: center; box-shadow: var(--sh-1); } .badge-tile.is-locked { opacity: 0.45; } .badge-icon { width: 64px; height: 64px; margin: 0 auto var(--sp-3); display: grid; place-items: center; } .badge-icon img { max-width: 64px; max-height: 64px; } .badge-icon .badge-fallback { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 22px; color: #fff; } .badge-tier-1 .badge-fallback { background: #a0622d; } .badge-tier-2 .badge-fallback { background: #8a94a3; } .badge-tier-3 .badge-fallback { background: #d4a017; } .badge-tile h3 { font-size: 15px; margin: 0 0 var(--sp-1); } .badge-tile p { font-size: 12px; color: var(--text-dim); margin: 0; } .badge-tile .badge-date { font-size: 11px; color: var(--text-dim); margin-top: var(--sp-2); } /* Toast for new badges */ .toast-queue { position: fixed; bottom: var(--sp-6); right: var(--sp-6); z-index: 100; display: flex; flex-direction: column; gap: var(--sp-3); } .toast { background: var(--bg-panel); border: 1px solid var(--border-mid); border-left: 3px solid var(--acc-amber); border-radius: var(--r-panel); box-shadow: var(--sh-pop); padding: var(--sp-3) var(--sp-4); font-size: 14px; max-width: 320px; animation: toast-in var(--m-260) var(--ease-out); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* -- Certificate ------------------------------------------------------------ */ .certificate-page { display: grid; place-items: center; min-height: 80vh; padding: var(--sp-10) var(--sp-6); } .certificate { max-width: 720px; width: 100%; background: var(--bg-panel); border: 1px solid var(--border-hair); border-radius: var(--r-panel); box-shadow: var(--sh-pop); padding: var(--sp-10); text-align: center; } .certificate .cert-wordmark { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); } .certificate h1 { font-size: 34px; margin: var(--sp-4) 0 var(--sp-2); } .certificate .cert-badge { font-size: 72px; line-height: 1; margin: var(--sp-5) 0; } .cert-badge-mark { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); font-size: 40px; } .certificate .cert-name { font-size: 22px; font-weight: 600; margin: var(--sp-4) 0; } .certificate .cert-date { color: var(--text-dim); font-size: 14px; } .certificate .cert-footer { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border-hair); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-dim); } /* -- Footer ----------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border-hair); background: var(--bg-panel); padding: var(--sp-12) 0 var(--sp-6); margin-top: var(--sp-12); } .footer-grid { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; } @media (min-width: 700px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } } .footer-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--primary); } .footer-brand h2 { font-size: 20px; margin: var(--sp-2) 0; } .footer-brand p { color: var(--text-mid); font-size: 14px; margin: 0; } .footer-links { display: flex; flex-direction: column; gap: var(--sp-2); } .footer-links a { color: var(--text-mid); font-size: 14px; } .footer-links a:hover { color: var(--text-hi); } .footer-base { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border-hair); font-size: 13px; color: var(--text-dim); flex-wrap: wrap; } .footer-logo img { height: 18px; } .footer-status { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; } .footer-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--success); } /* -- Mobile nav ------------------------------------------------------------- */ .mobile-nav { position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw); background: var(--bg-panel); z-index: 60; transform: translateX(100%); visibility: hidden; transition: transform var(--m-260) var(--ease-out), visibility 0s linear var(--m-260); box-shadow: var(--sh-pop); padding: var(--sp-8) var(--sp-6); overflow-y: auto; } .mobile-nav.is-open { transform: none; visibility: visible; transition-delay: 0s; } /* Dimmed backdrop behind the open drawer; clicking it closes (see template JS). */ body.nav-open::before { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(10, 16, 28, 0.45); animation: seal-fade-in var(--m-180) var(--ease); } @keyframes seal-fade-in { from { opacity: 0; } to { opacity: 1; } } .mobile-nav nav { display: flex; flex-direction: column; gap: var(--sp-1); } .mobile-nav a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-control); color: var(--text-hi); font-weight: 600; font-size: 16px; } .mobile-nav a:hover { background: var(--bg-hover); text-decoration: none; } .mobile-nav a svg { margin-left: auto; color: var(--text-dim); } .mobile-nav-index { color: var(--primary); font-family: var(--font-mono); font-size: 13px; } /* -- Editor (linear notebook) ----------------------------------------------- */ .notebook { max-width: 900px; } .notebook-meta .nb-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } @media (max-width: 700px) { .notebook-meta .nb-meta-grid { grid-template-columns: 1fr; } } .notebook-toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; background: var(--bg-panel); border: 1px solid var(--border-hair); border-radius: var(--r-panel); padding: var(--sp-3) var(--sp-4); position: sticky; top: var(--sp-3); z-index: 5; margin-bottom: var(--sp-5); } .notebook-toolbar label { font-size: 13px; color: var(--text-dim); font-weight: 600; } .notebook-toolbar select { min-width: 190px; } .notebook-body { display: flex; flex-direction: column; gap: var(--sp-4); } .nb-block { background: var(--bg-panel); border: 1px solid var(--border-hair); border-radius: var(--r-panel); overflow: hidden; } .nb-block:focus-within { border-color: var(--primary); } .nb-block-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-hair); background: var(--bg-app); } .nb-grip { cursor: grab; color: var(--text-dim); font-weight: 700; user-select: none; } .nb-grip:active { cursor: grabbing; } .nb-add-below, .nb-del { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--text-dim); padding: 0 var(--sp-1); } .nb-add-below:hover { color: var(--primary); } .nb-del:hover { color: var(--error); } .nb-block-head .nb-add-below { margin-left: auto; } .nb-block.nb-dragging { opacity: 0.5; } .nb-block-body { padding: var(--sp-4); } .nb-quiz-slot { border-style: dashed; } .nb-quiz-slot .block-kind-tag { color: var(--primary); } .block-kind-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-family: var(--font-mono); padding: 2px 6px; border-radius: 4px; background: var(--bg-app); border: 1px solid var(--border-hair); } .block-editor-form { display: flex; flex-direction: column; gap: var(--sp-3); } .block-editor-form .field { margin-bottom: 0; } .nb-block-body textarea { min-height: 40px; } .nb-media { margin-bottom: var(--sp-3); } .nb-media-bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .nb-media-bar select { min-width: 180px; } .nb-media-badge { display: inline-flex; align-items: center; gap: var(--sp-3); background: var(--primary-tint); color: var(--text-hi); border: 1px solid var(--border-hair); border-radius: var(--r-control); padding: var(--sp-1) var(--sp-3); font-size: 13px; margin-bottom: var(--sp-2); } .nb-preview { display: block; max-width: 100%; max-height: 340px; margin-top: var(--sp-2); border: 1px solid var(--border-hair); border-radius: var(--r-control); } /* -- Rich text editor (notebook cells) -------------------------------------- */ .rte { border: 1px solid var(--border-mid); border-radius: var(--r-control); background: var(--bg-app); overflow: hidden; } .rte:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .rte-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 4px 6px; border-bottom: 1px solid var(--border-hair); background: var(--bg-panel); } .rte-btn { border: 0; background: transparent; cursor: pointer; color: var(--text-mid); font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; line-height: 1; padding: 6px 8px; border-radius: 4px; min-width: 28px; } .rte-btn:hover { background: var(--bg-hover); color: var(--text-hi); } .rte-btn.is-on { background: var(--primary-tint); color: var(--primary); } .rte-sep { width: 1px; height: 18px; background: var(--border-hair); margin: 0 4px; } .rte-area { min-height: 110px; max-height: 460px; overflow-y: auto; padding: var(--sp-3) var(--sp-4); font-size: 14.5px; line-height: 1.65; color: var(--text-hi); outline: none; cursor: text; } .rte-area:empty::before { content: "Write here..."; color: var(--text-dim); } .rte-area p { margin: 0 0 0.7em; } .rte-area p:last-child { margin-bottom: 0; } .rte-area h2, .rte-area h3, .rte-area h4 { margin: 0.7em 0 0.35em; line-height: 1.25; } .rte-area h2 { font-size: 18px; } .rte-area h3 { font-size: 16px; } .rte-area h4 { font-size: 14.5px; } .rte-area ul, .rte-area ol { margin: 0 0 0.7em; padding-left: 1.4em; } .rte-area code { font-family: var(--font-mono); font-size: 0.9em; background: var(--primary-tint); border-radius: 3px; padding: 0 4px; } .rte-area table { border-collapse: collapse; width: 100%; margin: 0.5em 0; font-size: 13.5px; } .rte-area th, .rte-area td { border: 1px solid var(--border-mid); padding: 4px 8px; min-width: 40px; } .rte-area th { background: var(--bg-sunken); font-weight: 600; text-align: left; } .rte-area a { color: var(--primary); text-decoration: underline; } .rte-area blockquote { margin: 0.5em 0; padding: 4px 12px; border-left: 3px solid var(--border-mid); color: var(--text-mid); } /* -- Editor: Colab-style cells ----------------------------------------------- */ .nb-block { transition: border-color var(--m-120) var(--ease), box-shadow var(--m-120) var(--ease); } .nb-block:hover { border-color: var(--border-mid); } .nb-block:focus-within { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--sh-1); } /* Cell controls stay quiet until the cell is hovered or focused. */ .nb-block .nb-add-below, .nb-block .nb-del, .nb-block .nb-grip { opacity: 0.35; transition: opacity var(--m-120) var(--ease); } .nb-block:hover .nb-add-below, .nb-block:hover .nb-del, .nb-block:hover .nb-grip, .nb-block:focus-within .nb-add-below, .nb-block:focus-within .nb-del, .nb-block:focus-within .nb-grip { opacity: 1; } .nb-media-search { font-family: var(--font-ui); font-size: 13px; padding: 6px 10px; border-radius: var(--r-control); border: 1px solid var(--border-mid); background: var(--bg-app); color: var(--text-hi); width: 160px; } .nb-media-search:focus { outline: none; border-color: var(--primary); } .nb-media video.nb-preview { max-height: 240px; } /* -- Misc ------------------------------------------------------------------- */ .divider { border: 0; border-top: 1px solid var(--border-hair); margin: var(--sp-6) 0; } .text-mid { color: var(--text-mid); } .text-dim { color: var(--text-dim); } .small { font-size: 13px; } .center { text-align: center; } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .gap-2 { gap: var(--sp-2); } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .space-between { justify-content: space-between; } /* -- Help / how-to pages ---------------------------------------------------- */ .help-manual > h2 { font-size: 20px; margin-top: var(--sp-8); } .help-manual p { max-width: 74ch; } .help-toc ol { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); } .help-toc a { color: var(--primary); text-decoration: none; } .help-toc a:hover { text-decoration: underline; } .help-fig { margin: var(--sp-4) 0 var(--sp-6); } .help-fig img { display: block; width: 100%; max-width: 900px; height: auto; border: 1px solid var(--border-hair); border-radius: 8px; background: #fff; } .help-fig figcaption { max-width: 900px; font-size: 13px; color: var(--text-dim); margin-top: var(--sp-2); } .help-list { padding-left: var(--sp-5); } .help-list li { margin: var(--sp-2) 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* -- Per-section actions (right gutter): mark complete + follow-up note ----- */ .section-actions { display: flex; flex-direction: column; gap: var(--sp-3); align-items: stretch; } .section-action { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-hair); border-radius: var(--r-control); background: var(--bg-panel); color: var(--text-mid); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease; } .section-action:hover { border-color: var(--primary); color: var(--primary); } .section-action.is-done { background: var(--primary-tint); border-color: var(--success, var(--primary)); color: var(--success, var(--primary)); } .section-action-icon { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-mid); display: grid; place-items: center; font-size: 11px; } .section-action.is-done .section-action-icon { background: var(--success, var(--primary)); border-color: var(--success, var(--primary)); color: #fff; } .section-action.is-done .section-action-icon::before { content: "✓"; } /* Inline note entry (opened by the Follow-up question button) */ .section-note-box { display: none; border: 1px solid var(--border-hair); border-radius: var(--r-panel); padding: var(--sp-3); background: var(--bg-panel); font-size: 12.5px; } .section-note-box.show { display: block; margin-top: var(--sp-2); } .section-note-box label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: var(--sp-2); } .section-note-box textarea { width: 100%; min-height: 60px; box-sizing: border-box; resize: vertical; font: inherit; font-size: 13px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-mid); border-radius: var(--r-control); background: var(--bg-app); } .section-note-box textarea:focus { border-color: var(--primary); outline: 0; } .section-note-reply { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--primary-tint); border-radius: var(--r-control); color: var(--text-hi); font-size: 12.5px; } .section-note-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); } .section-note-actions .button { font-size: 12.5px; padding: var(--sp-1) var(--sp-3); } .section-note-status { font-size: 11px; color: var(--success, var(--text-dim)); margin-top: var(--sp-1); } /* Narrow screens: actions sit under the content instead of a right gutter. */ @media (max-width: 1179px) { .section-actions { flex-direction: row; margin-top: var(--sp-3); } .section-note-box { width: 100%; } } /* -- Rendering performance on long pages ------------------------------------ */ /* Off-screen catalogue categories and lesson sections skip layout/paint. */ .catalogue-section { content-visibility: auto; contain-intrinsic-size: auto 420px; } .topic-section { content-visibility: auto; contain-intrinsic-size: auto 300px; } .help-manual figure { content-visibility: auto; contain-intrinsic-size: auto 480px; } /* -- Reading comfort --------------------------------------------------------- */ /* Body paragraphs keep a book-like measure; tables and figures use full width. */ .topic-body .seal-text p { max-width: 76ch; } .topic-body .seal-text pre { overflow-x: auto; padding: var(--sp-4); background: var(--bg-sunken); border: 1px solid var(--border-hair); border-radius: var(--r-control); font-size: 13px; line-height: 1.6; } .topic-body .seal-text blockquote { margin: var(--sp-5) 0; padding: var(--sp-3) var(--sp-5); border-left: 3px solid var(--border-mid); color: var(--text-mid); } /* Lesson tables: calmer grid, visible emptiness, hover row. */ .seal-text table { border-radius: var(--r-control); overflow: hidden; } .seal-text tbody tr:hover { background: var(--bg-hover); } .seal-text td:empty::before { content: "-"; color: var(--text-dim); } .seal-text th:first-child, .seal-text td:first-child { font-weight: 600; } /* Figure placeholder when a referenced image is missing from the library. */ .seal-figure-missing { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-5); margin: var(--sp-6) 0; border: 1px dashed var(--border-mid); border-radius: var(--r-panel); background: var(--bg-sunken); color: var(--text-dim); font-size: 13px; text-align: center; } .seal-figure-missing svg { opacity: 0.5; } /* -- Section rail: repeated labels get a small index chip ------------------- */ .rail-count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); border: 1px solid var(--border-hair); border-radius: var(--r-pill); padding: 0 6px; line-height: 1.5; } /* -- Scroll-reveal entrances (JS adds .reveal-in; reduced-motion neutralizes) */ .reveal { opacity: 0; transform: translateY(14px); } .reveal-in { opacity: 1; transform: none; transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); } html:not(.js) .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* Progress bars animate their first fill (width transition already set). */ /* -- Catalogue toolbar (search / filter / sort / jump chips) ---------------- */ .catalogue-toolbar { position: sticky; top: 0; z-index: 30; } .catalogue-search { flex: 1 1 260px; min-width: 220px; } .cat-jump { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .cat-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 4px 12px; border-radius: 999px; background: var(--primary-tint); border: 1px solid var(--border-hair); font-size: 12.5px; font-weight: 600; color: var(--n-800); } .cat-chip:hover { border-color: var(--primary); } .cat-summary { display: flex; align-items: baseline; gap: var(--sp-3); cursor: pointer; list-style: none; } .cat-summary::-webkit-details-marker { display: none; } .cat-summary h2 { margin: 0; } .cat-count { font-size: 13px; color: var(--n-500); } .progress > i { min-width: 2px; } /* -- Human check: match the standard field styling -------------------------- */ .human-check label { display: block; font-weight: 600; margin-bottom: var(--sp-2); } .human-check-input { font-family: var(--font-ui); font-size: 14px; padding: 9px 12px; border-radius: var(--r-control); border: 1px solid var(--border-mid); background: var(--bg-app); color: var(--text-hi); width: 100%; max-width: 160px; transition: border-color var(--m-120) var(--ease), box-shadow var(--m-120) var(--ease); } .human-check-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } /* -- Profile: collapsible per-category progress groups ---------------------- */ .progress-group { border: 1px solid var(--border-hair); border-radius: var(--r-panel); background: var(--bg-app); margin-bottom: var(--sp-3); overflow: hidden; } .progress-group summary { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; user-select: none; } .progress-group summary::-webkit-details-marker { display: none; } .progress-group summary::before { content: ""; width: 7px; height: 7px; flex: none; border-right: 1.5px solid var(--text-dim); border-bottom: 1.5px solid var(--text-dim); transform: rotate(-45deg); transition: transform var(--m-120) var(--ease); } .progress-group[open] summary::before { transform: rotate(45deg); } .progress-group summary:hover { background: var(--bg-hover); } .progress-group-title { font-weight: 600; } .progress-group-meta { margin-left: auto; font-size: 12px; color: var(--text-dim); } .progress-group-body { padding: var(--sp-4) var(--sp-4) var(--sp-2); background: var(--bg-panel); } /* -- Certificate print ------------------------------------------------------- */ @media print { .certificate-page { min-height: auto; padding: 0; } .certificate { box-shadow: none; border-color: #999; } .cert-footer .button { display: none; } }