/* * Poster Style -- shared design tokens & chrome components * ----------------------------------------------------------------------- * Source of truth: circuit/motherboard_lab.html (see * .github/skills/course-exercise-review/SKILL.md, Visual style guide). * * This file only styles site "chrome" (topbar/nav, hero headers, section * headers, card grids, buttons, badges, focus states). It intentionally * does NOT touch page-specific interactive widget internals (sliders, * canvases, tables, simulators) -- those keep their existing layout and * only inherit color/typography tokens from :root. * * Usage: add * * and add class="poster-body" to . */ :root { color-scheme: light; --bg: #e9e9e5; --panel: #f4f4f0; --panel-strong: #ffffff; --line: #171717; --text: #111111; --muted: #676764; --muted-soft: #a9a9a5; --accent: #2b3fce; --accent-dark: #202f9e; --accent-soft: #dde1fb; /* --accent at ~2.4:1 on #111 fails WCAG AA as text; use this lightened variant for accent-colored text sitting directly on a black ground (topbar/hero). Keep --accent for fills, borders, and text on light backgrounds, where its contrast is already fine. */ --accent-on-dark: #7b86f0; --red: #ff4b35; --red-soft: #ffd8d0; --orange: #ff8a22; --green: #b8e600; --shadow: 0 10px 0 rgba(17, 17, 17, 0.08); --shadow-sm: 0 6px 0 rgba(17, 17, 17, 0.08); --radius-lg: 14px; --radius: 10px; --radius-sm: 4px; --font-body: "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; --font-mono: "SFMono-Regular", Consolas, monospace; /* Legacy tokens. Several pages carry their own override CSS written against the palette that used to live in lesson-system.css. That stylesheet is gone, and an undefined custom property makes the whole declaration invalid -- which silently turned those cards transparent and borderless rather than erroring. Keep the names, point them at the poster palette. */ --cs-ink: var(--line); --cs-paper: var(--bg); --cs-white: var(--panel-strong); --cs-muted: var(--muted); --cs-soft: #e8e8e2; --cs-blue: var(--accent); --cs-blue-dark: var(--accent-dark); --ui-blue: #4f9ed4; --ui-green: #2faf74; --ui-yellow: #edc949; --ui-orange: #f47a3f; --ui-red: #e45b4d; --ui-teal: #36b6ad; --ui-purple: #8a6fd1; } /* -- Base ----------------------------------------------------------- */ body.poster-body { min-height: 100vh; margin: 0; color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: linear-gradient(rgba(17, 17, 17, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 17, 17, 0.035) 1px, transparent 1px), var(--bg); background-size: 28px 28px; } .poster-body :focus-visible, .poster-body button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } /* -- Kicker (small uppercase mono label) ----------------------------- */ .kicker { display: inline-block; margin: 0 0 4px; color: var(--muted-soft); font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; } /* -- Topbar (replaces bg-slate-800 navbar) --------------------------- */ .poster-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 18px; overflow: hidden; padding: 10px 18px 10px 24px; border-bottom: 2px solid var(--line); background: #111; color: #fff; } .poster-topbar::before { position: absolute; top: 0; bottom: 0; left: 0; width: 6px; content: ""; background: var(--accent); } .poster-topbar a { color: #fff; text-decoration: none; } .poster-topbar .home-link { display: inline-flex; align-items: baseline; gap: 8px; flex: none; font-weight: 700; font-size: 0.92rem; white-space: nowrap; color: #fff; } .poster-topbar .home-link:hover { color: var(--accent-on-dark); } /* 講義コード。どのページでも同じ位置に出して、教材のどこにいても同じ科目のページだと分かるようにする。 */ .poster-topbar .home-tag { padding: 1px 6px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-sm); color: var(--accent-on-dark); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; } .poster-topbar .home-link:hover .home-tag { border-color: currentColor; } .poster-topbar nav { display: flex; align-items: center; gap: 4px; font-size: 0.86rem; } .poster-topbar nav a { padding: 6px 12px; border-radius: var(--radius-sm); font-weight: 600; transition: background 160ms ease, color 160ms ease; } .poster-topbar nav a:hover { background: rgba(255, 255, 255, 0.12); } .poster-topbar nav a.is-current, .poster-topbar nav a.current { background: var(--accent); color: #fff; } .poster-topbar nav a.cta { background: var(--accent); color: #fff; } .poster-topbar nav a.cta:hover { background: var(--accent-dark); } /* -- Hero header ------------------------------------------------------ */ .poster-hero { position: relative; overflow: hidden; padding: 3.2rem 1.5rem 3rem; border-bottom: 2px solid var(--line); background: #111; color: #fff; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 28px 28px; } .poster-hero::before { position: absolute; top: 0; bottom: 0; left: 0; width: 8px; content: ""; background: var(--accent); } .poster-hero .kicker { color: var(--accent-on-dark); } .poster-hero h1 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; } .poster-hero p.lede { color: #cfcfcb; } .poster-hero .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; color: #fff; font-size: 0.76rem; font-weight: 700; } /* -- Section head (chapter/section title with accent bar) ----------- */ .poster-section-head { display: flex; align-items: center; gap: 16px; margin-bottom: 1.6rem; } .poster-section-head .bar { flex-shrink: 0; width: 6px; height: 2.4rem; border-radius: 3px; background: var(--accent); } .poster-section-head h2 { margin: 0; color: var(--text); font-weight: 800; } /* -- Lesson body ------------------------------------------------------ * Components for exercise/lesson page CONTENT (not just chrome), so pages * stop reaching for ad-hoc Tailwind card soup. Headings carry a mono * kicker + rule instead of an emoji. * ------------------------------------------------------------------- */ .poster-body-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 1.1rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--line); } .poster-body-head .num { flex-shrink: 0; min-width: 2.1rem; padding: 2px 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); color: #fff; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-align: center; } .poster-body-head h2 { margin: 0; color: var(--text); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; } .poster-panel { padding: 1.25rem 1.4rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--panel-strong); box-shadow: var(--shadow-sm); } .poster-panel--plain { border-width: 1px; border-color: #d9d9d3; background: var(--panel); box-shadow: none; } /* side-note / takeaway: accent rail, no fill fight with the panel */ .poster-note { padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 0.9rem; line-height: 1.7; } .poster-note--warn { border-left-color: var(--orange); background: #fff3e2; } .poster-note strong { font-weight: 700; } .poster-kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; font-size: 0.88rem; } .poster-kv dt { color: var(--muted); font-family: var(--font-mono); font-size: 0.78rem; } .poster-kv dd { margin: 0; } .poster-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .poster-table th, .poster-table td { padding: 0.45rem 0.7rem; border: 1px solid #d9d9d3; text-align: left; } .poster-table th { background: var(--panel); font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; } .poster-table td { font-family: var(--font-mono); font-size: 0.78rem; } .poster-table tbody tr:nth-child(even) td { background: #fbfbf9; } .poster-table .is-flag { color: var(--red); font-weight: 700; } .poster-scroll { overflow-x: auto; } /* -- Cards (replaces rounded-2xl + shadow-sm soft-blur cards) -------- */ .poster-card { overflow: hidden; border: 2px solid var(--line); border-radius: var(--radius); background: var(--panel-strong); box-shadow: var(--shadow); transition: transform 140ms ease, box-shadow 140ms ease; } .poster-card:hover { transform: translateY(-3px); box-shadow: 0 13px 0 rgba(17, 17, 17, 0.1); } .poster-card .accent-bar { height: 6px; background: var(--accent); } .poster-card .body { padding: 1.1rem 1.25rem; } .poster-card h3 { margin: 0 0 0.4rem; color: var(--text); font-weight: 800; } .poster-card p.desc { margin: 0 0 0.9rem; color: var(--muted); line-height: 1.6; } .poster-card .meta { display: flex; align-items: center; gap: 8px; padding-top: 0.75rem; border-top: 1px solid #e5e5e0; color: var(--muted-soft); font-family: var(--font-mono); font-size: 0.76rem; } /* -- Badges / pills --------------------------------------------------- */ .poster-badge { display: inline-flex; flex-shrink: 0; align-items: center; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font-size: 0.72rem; font-weight: 700; } /* -- Buttons ------------------------------------------------------------ */ .poster-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-strong); color: var(--text); font-weight: 700; text-decoration: none; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; } .poster-btn:hover { border-color: var(--accent); background: var(--accent); color: #fff; } .poster-btn-primary { border-color: var(--line); background: var(--accent); color: #fff; } .poster-btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); } /* -- Footer -------------------------------------------------------------- */ .poster-footer { padding: 2rem 1.5rem; border-top: 2px solid var(--line); color: var(--muted); font-size: 0.82rem; text-align: center; } /* ========================================================================= * Compat layer -- retrofits existing pages' generic Tailwind chrome * (bg-slate-800 navbar, bg-gradient-to-* hero, rounded-2xl/shadow-sm cards) * into the poster look WITHOUT requiring markup rewrites. Uses attribute * selectors + !important since these override Tailwind's CDN-generated * utility classes regardless of stylesheet injection order. * Scope: site chrome only -- internal widget/simulator alert boxes, status * colors, and pedagogical color-coding are intentionally left untouched. * ========================================================================= */ /* Global base: typography + focus ring, safe on every page */ body { font-family: var(--font-body); } body:not(.bg-gray-950) { background-color: var(--bg) !important; } a:focus-visible, button:focus-visible, [class*="focus-ring"]:focus-visible, [class*="focus-ring"]:focus { outline: 3px solid var(--red) !important; outline-offset: 3px !important; } /* Navbar: bg-slate-800 becomes a dark poster topbar with left accent stripe */ nav.bg-slate-800 { position: relative; overflow: hidden; background: #111 !important; border-bottom: 2px solid var(--line); box-shadow: none !important; } nav.bg-slate-800::before { position: absolute; top: 0; bottom: 0; left: 0; width: 6px; content: ""; background: var(--accent); z-index: 1; } nav.bg-slate-800 a[class*="hover:text-slate-300"]:hover { color: var(--accent-soft) !important; } /* Current-page pill (bg-white/20) */ nav.bg-slate-800 a[class*="bg-white/20"] { background: var(--accent) !important; color: #fff !important; } /* Regular hover pill stays neutral on the dark bar */ nav.bg-slate-800 a[class*="hover:bg-white/10"]:hover { background: rgba(255, 255, 255, 0.14) !important; } /* CTA button at the end of nav (ml-2 bg-{color}-500 hover:bg-{color}-400 ...) */ nav.bg-slate-800 a[class*="ml-2"][class*="rounded-lg"] { background: var(--accent) !important; color: #fff !important; } nav.bg-slate-800 a[class*="ml-2"][class*="rounded-lg"]:hover { background: var(--accent-dark) !important; } /* "You are here" translucent pill variant (e.g. ex/final current-page chip) */ nav.bg-slate-800 a[class*="/30"][class*="border"] { background: rgba(43, 63, 206, 0.32) !important; border-color: var(--accent) !important; color: #fff !important; } /* Hero banners: any full-bleed gradient + text-white section/header becomes a solid dark poster hero with a faint grid and accent left stripe */ section[class*="bg-gradient-to-"][class*="text-white"], header[class*="bg-gradient-to-"][class*="text-white"] { position: relative; overflow: hidden; background-color: #111 !important; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) !important; background-size: 28px 28px !important; } section[class*="bg-gradient-to-"][class*="text-white"]::before, header[class*="bg-gradient-to-"][class*="text-white"]::before { position: absolute; top: 0; bottom: 0; left: 0; width: 8px; content: ""; background: var(--accent); } /* Rainbow chapter-chips inside hero (bg-*-500/15 border-*-400/25 text-*-300 spans, e.g. index.html's はじめに/デジタル回路/... chips) -> one neutral chip style so the hero doesn't stay a multi-color sampler */ section[class*="bg-gradient-to-"][class*="text-white"] span[class*="rounded-full"][class*="border"], header[class*="bg-gradient-to-"][class*="text-white"] span[class*="rounded-full"][class*="border"] { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.35) !important; color: #fff !important; } /* Homepage sitemap (index.html .topic-card grid) */ a.topic-card { border: 2px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; } a.topic-card:hover { box-shadow: 0 13px 0 rgba(17, 17, 17, 0.1) !important; } /* Card accent bar / stripe (divs only, scoped inside topic-card): solid accent */ a.topic-card > div[class*="bg-gradient-to-"] { background-image: none !important; background-color: var(--accent) !important; } /* Card badge pills inside topic-card: hard-bordered neutral badge */ a.topic-card [class*="rounded-full"][class*="border-"] { border: 1px solid var(--line) !important; background: var(--panel) !important; color: var(--text) !important; } /* Hover title color unification (was per-chapter hue) */ a.topic-card.group:hover h3 { color: var(--accent) !important; } /* ex/index.html style card list: a.focus-ring.rounded-2xl.bg-white.shadow */ a[class*="focus-ring"][class*="rounded-2xl"][class*="bg-white"] { border: 2px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; } a[class*="focus-ring"][class*="rounded-2xl"][class*="bg-white"]:hover { box-shadow: 0 13px 0 rgba(17, 17, 17, 0.1) !important; } /* -- Topbar nav on narrow screens: scroll instead of squeezing every link's text down to one character per line -------------------------- */ @media (max-width: 700px) { .poster-topbar { flex-wrap: nowrap; } .poster-topbar nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .poster-topbar nav::-webkit-scrollbar { display: none; } .poster-topbar nav a { flex: 0 0 auto; white-space: nowrap; } /* 幅が足りないときはフルネームを畳み、講義コードだけ残す */ .poster-topbar .home-link .home-full { display: none; } }