/* ═══════════════════════════════════════════════════ module.css — shared stylesheet for all 1.x module pages Link from any 1.x subfolder as: ../module.css ═══════════════════════════════════════════════════ */ @font-face { font-family: "Jua"; src: url("../../../fonts/Jua-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* ── Variables ─────────────────────────────────────── */ :root { --bg: #f5f3ff; --card: #ffffff; --ink: #1e1a35; --muted: #7a76a0; --line: #e2defc; /* Shared card border — keep in sync with theme.css. */ --card-border: 4px solid var(--line); --green: #1ea878; --green-soft: #e4f8f1; --red: #d44e73; --red-soft: #fde8f0; --amber: #d07826; --amber-soft: #fef3e4; --accent: #7c5ccf; --accent-soft: #ede8ff; --purple: #6b4fa5; --purple-soft: #eeebf6; color-scheme: light; } /* ── Dark theme overrides (set by theme-toggle.js via ) ── */ html[data-theme="dark"] { --bg: #15121f; --card: #201b30; --ink: #ece9f6; --muted: #a49ec6; --line: #998cc5; --green: #2fbd8c; --green-soft: #143229; --red: #e86c8d; --red-soft: #371d28; --amber: #e0974a; --amber-soft: #38280f; --accent: #a385e6; --accent-soft: #2c2447; --purple: #a98fd6; --purple-soft: #2a2342; color-scheme: dark; } /* ── Heading font ─────────────────────────────────── */ h2, .module-page-title { font-family: "Jua", sans-serif; font-weight: 400; font-style: normal; } /* ── Reset ─────────────────────────────────────────── */ * { box-sizing: border-box; margin: 0; padding: 0; } /* ── Base ──────────────────────────────────────────── */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); line-height: 1.6; padding: 24px 16px 80px; /* Animated pixel-art city backdrop with a dark --bg-tinted scrim, matching theme.css. url() is relative to this stylesheet (modules/), so assets live one level up. */ background-image: linear-gradient(180deg, rgba(30,26,53,.62), rgba(30,26,53,.48)), url("../assets/city-animted.gif"); background-repeat: no-repeat; background-position: bottom center; background-size: cover; background-attachment: fixed; image-rendering: pixelated; } html[data-theme="dark"] body { background-image: linear-gradient(180deg, rgba(21,18,31,.80), rgba(21,18,31,.66)), url("../assets/city-dark-animted.gif"); } .wrap { max-width: 860px; margin: 0 auto; } /* ── Brand bar ─────────────────────────────────────── */ .brand { font-weight: 700; font-size: 16px; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .brand a { color: inherit; text-decoration: none; } /* ── Module header ─────────────────────────────────── */ .module-page-title { font-size: 26px; font-weight: 800; margin-bottom: 4px; } .module-sub { font-size: 15px; color: var(--muted); margin-bottom: 24px; } .obj-pill { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; background: var(--accent-soft); color: var(--accent); margin-bottom: 20px; } /* ── Cards ─────────────────────────────────────────── */ .card { background: var(--card); border: var(--card-border); border-radius: 14px; padding: 26px 30px; box-shadow: 0 2px 8px rgba(0,0,0,.04); margin-bottom: 22px; } .card-compact { padding: 18px 22px; } /* ── Headings ──────────────────────────────────────── */ h2 { font-size: 20px; font-weight: 800; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } h2 .ico { font-size: 22px; } h3 { font-size: 13px; font-weight: 700; margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } /* ── Text ──────────────────────────────────────────── */ p { margin-bottom: 12px; font-size: 15px; } p:last-child { margin-bottom: 0; } ul, ol { padding-left: 22px; font-size: 15px; } li { margin-bottom: 6px; } code { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: 13px; } /* ── Alert boxes ───────────────────────────────────── */ .alert { border-radius: 10px; padding: 13px 16px; font-size: 14px; margin: 16px 0; display: flex; gap: 12px; align-items: flex-start; } .alert .icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; } .alert.exam { background: var(--accent-soft); border-left: 4px solid var(--accent); color: #2c3e5a; } .alert.tip { background: var(--green-soft); border-left: 4px solid var(--green); color: #1e4a30; } .alert.warn { background: var(--amber-soft); border-left: 4px solid var(--amber); color: #5a3a0a; } .alert.note { background: var(--purple-soft); border-left: 4px solid var(--purple); color: #3a2a5a; } /* dark mode: soft backgrounds invert, so the dark body text would vanish — use light ink */ html[data-theme="dark"] .alert.exam, html[data-theme="dark"] .alert.tip, html[data-theme="dark"] .alert.warn, html[data-theme="dark"] .alert.note { color: var(--ink); } .alert .content .title { display: block; font-weight: 700; margin-bottom: 3px; } .alert .content .description { font-size: 14px; } /* ── Tables ────────────────────────────────────────── */ .tbl-wrap { overflow-x: auto; margin: 14px 0; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { background: var(--bg); text-align: left; padding: 9px 12px; font-weight: 700; border-bottom: 2px solid var(--line); color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; } td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } tr:last-child td { border-bottom: none; } tr:hover td { background: #f9f8ff; } html[data-theme="dark"] tr:hover td { background: #262036; } /* ── Badges ────────────────────────────────────────── */ .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; } .badge.green { background: var(--green-soft); color: var(--green); } .badge.amber { background: var(--amber-soft); color: var(--amber); } .badge.red { background: var(--red-soft); color: var(--red); } .badge.blue { background: var(--accent-soft); color: var(--accent); } .badge.purple { background: var(--purple-soft); color: var(--purple); } /* ── Figures ───────────────────────────────────────── */ .fig-wrap { margin: 20px 0; } .fig-wrap img { width: 100%; max-width: 640px; border-radius: 10px; border: 1px solid var(--line); display: block; } .fig-cap { font-size: 13px; color: var(--muted); margin-top: 7px; font-style: italic; } .fig-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; } .fig-row .fig-wrap { margin: 0; } /* ── Video — single ────────────────────────────────── */ .video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; background: #000; margin-bottom: 12px; } .video-wrap video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; } .video-meta { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* ── Video — paired (side-by-side) ─────────────────── */ .video-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .video-block { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.04); } .video-label { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; } /* ── Table of contents ─────────────────────────────── */ .toc { list-style: none; padding: 0; } .toc li { border-bottom: 1px solid var(--line); } .toc li:last-child { border-bottom: none; } .toc a { display: flex; align-items: center; gap: 10px; padding: 10px 4px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; transition: color .12s; } .toc a:hover { color: var(--accent); } .toc .num { font-size: 12px; color: var(--muted); min-width: 32px; } /* ── Step lists ────────────────────────────────────── */ .steps { list-style: none; padding: 0; margin: 0; } .steps li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); } .steps li:last-child { border-bottom: none; } .step-num { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .steps .content { display: flex; flex-direction: column; gap: 4px; } .steps .content .title { font-weight: 700; font-size: 14px; } .steps .content .description { font-size: 13px; color: var(--muted); } /* ── Layout helpers ────────────────────────────────── */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .diagram { margin: 20px 0; overflow-x: auto; } .diagram svg { max-width: 100%; display: block; margin: 0 auto; } /* ── Buttons (base — also used by quiz) ────────────── */ button { background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 11px 22px; font-size: 15px; font-weight: 700; cursor: pointer; transition: filter .15s; } button:hover { filter: brightness(1.08); } button:disabled { opacity: .4; cursor: not-allowed; filter: none; } button.ghost { background: transparent; color: var(--accent); border: 2px solid var(--accent); } button.ghost:hover { background: var(--accent-soft); } /* ── Practice test shortcut ────────────────────────── */ .test-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--accent-soft); border: 2px solid var(--accent); border-radius: 10px; padding: 10px 16px; margin-bottom: 20px; text-decoration: none; color: var(--accent); font-size: 13px; font-weight: 700; transition: background .12s, border-color .12s; width: 100%; cursor: pointer; font-family: inherit; text-align: left; } .test-cta:hover { background: var(--accent); color: #fff; } .test-cta .cta-arrow { font-size: 16px; flex-shrink: 0; } /* ── Responsive ────────────────────────────────────── */ @media (max-width: 600px) { .card { padding: 18px 16px; } .fig-row, .two-col, .video-pair { grid-template-columns: 1fr; } } /* ── Text that sits directly on the page backdrop (not inside a card) ── The body now carries a dark city scrim in BOTH themes, so these header elements read light regardless of light/dark mode. Placed last to win the cascade; card-internal text keeps using the --ink/--muted tokens. */ .brand, .module-page-title, .domain-name { color: #efecfb; } .module-sub, .domain-num, .domain-progress { color: #cbc4ec; } .brand, .module-page-title, .module-sub, .domain-name, .domain-num, .domain-progress { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); } .domain-header { border-bottom-color: rgba(255, 255, 255, .18); }