/* spanish.msimoes.dev brand tokens. * Terracotta-coral accent (CDMX warmth), generous white space, soft borders. * Inter where possible, system stack fallback so we work without web-font * loading on first paint. Variable names kept as --cf-orange* for cross-site * parity with cf-class infra; values are terracotta, not Cloudflare orange. */ :root { /* Color tokens — light mode defaults, overridden by html.dark below */ --cf-orange: #D86C56; --cf-orange-soft: #E89379; --cf-orange-deep: #A14430; --ink: #1F1F1F; --text: #2F2F2F; --text-2: #4F4F4F; --muted: #767676; --bg: #FAFAF8; --surface: #FFFFFF; --surface-2: #F4F4F1; --border: #E6E5DF; --border-2: #D6D5CC; --good: #2C7A39; --warn: #B7510B; --bad: #B33A3A; --sh-sm: 0 1px 2px rgba(20,20,20,0.04); --sh-md: 0 4px 14px rgba(20,20,20,0.06); --sh-lg: 0 14px 36px rgba(20,20,20,0.10); /* Typography, sizing, layout — same in both themes */ --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Mono", monospace; --t-xs: 12px; --t-sm: 14px; --t-base: 16px; --t-lg: 18px; --t-xl: 22px; --t-2xl: 28px; --t-3xl: 36px; --t-4xl: 52px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --max-w: 1080px; --max-w-prose: 720px; } /* Dark mode — warm neutrals + same terracotta accent (slightly lifted). * Activated by adding `dark` class to . The early-paint script in * Site.astro applies this before first render to avoid theme flash. * Only color/shadow tokens get overridden here — typography stays the same. */ html.dark { --cf-orange: #E89379; --cf-orange-soft: #F0AA94; --cf-orange-deep: #F0AA94; /* lighter on dark for hover contrast */ --ink: #F2F2EE; --text: #DEDED9; --text-2: #B5B5B0; --muted: #7E7E78; --bg: #131313; --surface: #1C1C1B; --surface-2: #232322; --border: #303030; --border-2: #3F3F3D; --good: #4FA85C; --warn: #D88A45; --bad: #D17070; --sh-sm: 0 1px 2px rgba(0,0,0,0.3); --sh-md: 0 4px 14px rgba(0,0,0,0.35); --sh-lg: 0 14px 36px rgba(0,0,0,0.5); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--t-lg); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--cf-orange-deep); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 120ms ease; } a:hover { border-bottom-color: currentColor; } h1, h2, h3, h4 { color: var(--ink); font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 12px 0; } h1 { font-size: var(--t-4xl); letter-spacing: -0.02em; } h2 { font-size: var(--t-2xl); margin-top: 48px; } h3 { font-size: var(--t-xl); margin-top: 32px; } p { margin: 0 0 14px 0; max-width: var(--max-w-prose); } code, pre { font-family: var(--font-mono); font-size: 13.5px; } code:not(pre code) { background: var(--surface-2); border: 1px solid var(--border); padding: 1px 6px; border-radius: var(--r-sm); font-size: 13px; } pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; overflow-x: auto; margin: 18px 0; box-shadow: var(--sh-sm); } /* ===== Site chrome ============================================ */ .shell { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; } .nav { border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(150%) blur(8px); background: rgba(255,255,255,0.92); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; } .nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); font-size: 17px; border: 0; } .nav-brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cf-orange); display: inline-block; } .nav-brand .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cf-orange); color: #ffffff; font-weight: 700; font-size: 11.5px; letter-spacing: 0.5px; flex-shrink: 0; } html.dark .nav-brand .brand-mark { color: #1F1F1F; } .nav-tag { font-style: italic; color: var(--cf-orange-deep); font-size: var(--t-sm); letter-spacing: 0.2px; } html.dark .nav-tag { color: var(--cf-orange); } /* Theme toggle button in the nav. Accent ring on hover/focus. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); cursor: pointer; padding: 0; transition: color 120ms ease, border-color 120ms ease, background 120ms ease; } .theme-toggle:hover { color: var(--cf-orange); border-color: var(--cf-orange); } .theme-toggle:focus-visible { outline: none; border-color: var(--cf-orange); box-shadow: 0 0 0 3px rgba(216,108,86,0.20); } .theme-icon { width: 16px; height: 16px; } /* Show sun in dark mode (so click switches to light), moon in light mode (so click switches to dark) */ .theme-icon-sun { display: none; } .theme-icon-moon { display: block; } html.dark .theme-icon-sun { display: block; } html.dark .theme-icon-moon { display: none; } /* Update the nav background to use surface var so dark mode flows */ html.dark .nav { background: rgba(28,28,27,0.92); } .nav-right { display: flex; align-items: center; gap: 14px; font-size: var(--t-sm); color: var(--muted); } .nav-right a { color: var(--muted); border: 0; } .nav-right a:hover { color: var(--ink); } footer.site { margin-top: 80px; border-top: 1px solid var(--border); padding: 28px 0 40px 0; color: var(--muted); font-size: var(--t-sm); } footer.site .shell { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } /* ===== Homepage hero ========================================== */ .hero { padding: 68px 0 32px 0; } .hero .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; font-weight: 700; color: var(--cf-orange-deep); margin-bottom: 18px; background: rgba(216,108,86,0.08); padding: 5px 10px; border-radius: 999px; } .hero h1 { margin: 0 0 12px 0; max-width: 760px; } .hero p.lede { font-size: var(--t-lg); color: var(--text-2); max-width: 640px; margin-bottom: 0; } /* ===== Card grid ============================================== */ .section-label { text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.12em; color: var(--muted); font-weight: 700; margin: 56px 0 16px 0; } .card-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 22px 24px 22px; display: flex; flex-direction: column; gap: 8px; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; position: relative; overflow: hidden; color: var(--ink); border-bottom: 1px solid var(--border); } .card[data-lesson-id] { padding-bottom: 38px; } .card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--border-2); } .card.disabled { opacity: 0.55; pointer-events: none; } .card .card-eyebrow { text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.14em; color: var(--cf-orange-deep); font-weight: 700; } .card.disabled .card-eyebrow { color: var(--muted); } .card h3 { margin: 0; font-size: var(--t-xl); letter-spacing: -0.01em; } .card p { margin: 0; color: var(--text-2); font-size: var(--t-sm); line-height: 1.5; } .card .card-arrow { position: absolute; right: 18px; top: 22px; font-size: 18px; color: var(--muted); transition: transform 160ms ease, color 160ms ease; } .card:hover .card-arrow { transform: translateX(3px); color: var(--cf-orange); } /* ===== Lesson page ============================================ */ article.lesson { padding: 56px 0 40px 0; } article.lesson .lesson-video { display: block; width: 100%; max-width: 960px; margin: 24px auto 40px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--paper); box-shadow: var(--sh-sm); aspect-ratio: 16 / 9; } article.lesson .breadcrumb { font-size: var(--t-sm); color: var(--muted); margin-bottom: 18px; } article.lesson .breadcrumb a { color: var(--muted); border: 0; } article.lesson .breadcrumb a:hover { color: var(--ink); } article.lesson > h1 { margin-bottom: 16px; } article.lesson > .lede { font-size: var(--t-lg); color: var(--text-2); max-width: var(--max-w-prose); margin-bottom: 8px; } article.lesson .prose { max-width: var(--max-w-prose); } article.lesson .prose ul, article.lesson .prose ol { padding-left: 22px; margin: 12px 0; } article.lesson .prose li { margin-bottom: 6px; } article.lesson .callout { background: rgba(216,108,86,0.06); border: 1px solid rgba(216,108,86,0.20); border-left: 3px solid var(--cf-orange); border-radius: var(--r-md); padding: 14px 18px; margin: 18px 0; max-width: var(--max-w-prose); } article.lesson .callout strong { color: var(--cf-orange-deep); } /* ===== KV demo widget ========================================= */ .kv-demo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; margin: 28px 0; box-shadow: var(--sh-sm); } .kv-demo .kv-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .kv-demo .kv-header h4 { margin: 0; font-size: var(--t-lg); } .kv-demo .kv-header .kv-status { font-size: 12.5px; color: var(--muted); font-family: var(--font-mono); background: var(--surface-2); border: 1px solid var(--border); padding: 4px 10px; border-radius: var(--r-sm); white-space: nowrap; } .kv-demo .kv-status.ok { border-color: rgba(44,122,57,0.3); color: var(--good); } .kv-demo .kv-status.fast { border-color: rgba(216,108,86,0.3); color: var(--cf-orange-deep); } .kv-demo .kv-status.cold { border-color: rgba(183,81,11,0.3); color: var(--warn); } .mailbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; } .mailbox { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 12px; cursor: pointer; background: var(--surface-2); transition: border-color 120ms ease, transform 120ms ease, background 120ms ease; text-align: left; font-family: var(--font-mono); } .mailbox:hover { border-color: var(--cf-orange); transform: translateY(-1px); } .mailbox.selected { border-color: var(--cf-orange); background: rgba(216,108,86,0.06); } .mailbox .mb-num { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-sans); } .mailbox .mb-title { font-size: 14px; color: var(--ink); font-weight: 600; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mailbox .mb-empty { color: var(--muted); font-style: italic; font-weight: 400; } .mailbox .mb-when { font-size: 11px; color: var(--muted); margin-top: 6px; } .kv-edit { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px; } .kv-edit label { display: block; font-size: var(--t-sm); color: var(--text-2); margin: 8px 0 4px 0; font-weight: 600; } .kv-edit input, .kv-edit textarea { width: 100%; font: inherit; font-size: var(--t-sm); padding: 9px 11px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-family: var(--font-mono); } .kv-edit input:focus, .kv-edit textarea:focus { outline: none; border-color: var(--cf-orange); box-shadow: 0 0 0 3px rgba(216,108,86,0.15); } .kv-edit textarea { min-height: 80px; resize: vertical; } .kv-edit .key-display { font-family: var(--font-mono); font-size: 13px; background: var(--surface-2); border: 1px solid var(--border); padding: 6px 10px; border-radius: var(--r-sm); color: var(--cf-orange-deep); display: inline-block; } .kv-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } button.btn { font: inherit; font-size: var(--t-sm); font-weight: 600; padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid var(--border-2); background: var(--surface); color: var(--ink); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, transform 80ms ease; } button.btn:hover { border-color: var(--ink); } button.btn:active { transform: translateY(1px); } button.btn:disabled { opacity: 0.5; cursor: default; } button.btn.primary { background: var(--cf-orange); border-color: var(--cf-orange); color: white; } button.btn.primary:hover { background: var(--cf-orange-deep); border-color: var(--cf-orange-deep); } button.btn.ghost { background: transparent; border-color: var(--border); color: var(--text-2); } button.btn.ghost:hover { color: var(--ink); border-color: var(--border-2); } .kv-log { margin-top: 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); max-height: 160px; overflow-y: auto; } .kv-log .log-entry { line-height: 1.6; } .kv-log .log-entry .t { color: var(--muted); } .kv-log .log-entry.write { color: var(--cf-orange-deep); } .kv-log .log-entry.read { color: var(--good); } .kv-log .log-entry.error { color: var(--bad); } /* ===== Race demo ============================================== */ .race-prompt { background: var(--surface-2); border: 1px dashed var(--border-2); border-radius: var(--r-md); padding: 14px 16px; margin: 18px 0; font-size: var(--t-sm); color: var(--text-2); max-width: var(--max-w-prose); } .race-prompt strong { color: var(--ink); } /* ===== Code blocks (manual ones) ============================== */ .codeblock { margin: 16px 0; max-width: var(--max-w-prose); } /* ===== Transistor lab — three-state visual vocabulary ========= */ :root { /* Three states a wire / transistor / signal can be in */ --lab-idle: var(--border-2); /* gray — at rest, no signal */ --lab-high: #2c79c8; /* blue — voltage HIGH (Vcc-side, "potential") */ --lab-high-soft: rgba(44, 121, 200, 0.16); --lab-flow: var(--cf-orange); /* orange — current actually flowing (kinetic) */ --lab-flow-soft: rgba(246, 130, 31, 0.18); --lab-flow-deep: var(--cf-orange-deep); } html.dark { --lab-idle: #4a4a4a; --lab-high: #5cabe0; --lab-high-soft: rgba(92, 171, 224, 0.18); } /* ===== Transistor lab — shared button + schematic styles ====== */ .lab-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 2px solid var(--border-2); color: var(--text); padding: 12px 22px; border-radius: 999px; cursor: pointer; font-family: var(--font-mono); font-size: var(--t-base); font-weight: 600; letter-spacing: 0.02em; transition: transform 0.1s, background 0.15s, border-color 0.15s, box-shadow 0.15s; box-shadow: var(--sh-sm); user-select: none; } .lab-btn:hover { border-color: var(--cf-orange); transform: translateY(-1px); box-shadow: var(--sh-md); } .lab-btn:active { transform: translateY(0) scale(0.98); } .lab-btn[aria-pressed="true"] { background: rgba(246, 130, 31, 0.14); border-color: var(--cf-orange); color: var(--cf-orange-deep); } .lab-btn .val { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-weight: 700; font-size: var(--t-lg); transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .lab-btn[aria-pressed="true"] .val { background: var(--cf-orange); color: white; box-shadow: 0 0 12px rgba(246, 130, 31, 0.5); } .lab-btn .val-label { letter-spacing: 0.06em; } .lab-btn.set { border-color: var(--good); color: var(--good); } .lab-btn.set:hover { background: rgba(44, 122, 57, 0.08); } .lab-btn.reset-btn { border-color: var(--bad); color: var(--bad); } .lab-btn.reset-btn:hover { background: rgba(179, 58, 58, 0.08); } .lab-btn.primary { background: var(--cf-orange); color: white; border-color: var(--cf-orange-deep); font-size: var(--t-lg); padding: 14px 26px; } .lab-btn.primary:hover { background: var(--cf-orange-deep); color: white; } .lab-btn.primary[aria-pressed="true"] { background: var(--cf-orange-deep); color: white; } .lab-input-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; } /* Schematic shared visuals (used across lab components) */ .lab-schem .rail { stroke: var(--text-2); stroke-width: 3; } .lab-schem .rail-label { font-family: var(--font-mono); font-size: 11px; fill: var(--text-2); font-weight: 600; } .lab-schem .resistor { stroke: var(--lab-idle); stroke-width: 2; fill: none; transition: stroke 0.2s; } .lab-schem .resistor.high { stroke: var(--lab-high); } .lab-schem .resistor.flow { stroke: var(--lab-flow); } /* Wires: idle (gray) → high (blue, voltage present) → flow (orange, current flowing) */ .lab-schem .schem-wire { stroke: var(--lab-idle); stroke-width: 2; fill: none; transition: stroke 0.2s, stroke-width 0.2s; } .lab-schem .schem-wire.high { stroke: var(--lab-high); stroke-width: 2.5; } .lab-schem .schem-wire.flow { stroke: var(--lab-flow); stroke-width: 3; } .lab-schem .schem-wire.feedback { stroke-dasharray: 6 4; opacity: 0.8; } .lab-schem .schem-wire.feedback.high { stroke-dasharray: 4 3; opacity: 1; } .lab-schem .schem-wire.feedback.flow { stroke-dasharray: none; opacity: 1; } .lab-schem .node { fill: var(--text-2); transition: fill 0.2s; } .lab-schem .node.high { fill: var(--lab-high); } .lab-schem .node.flow { fill: var(--lab-flow); } /* Transistor channel: off (idle) vs conducting (orange, current can flow) */ .lab-schem .t-channel { fill: var(--surface-2); stroke: var(--lab-idle); stroke-width: 1.5; transition: fill 0.25s, stroke 0.25s; } .lab-schem .t-channel.conducting { fill: var(--lab-flow-soft); stroke: var(--lab-flow); } /* Gate bar: indicates whether a HIGH signal is on the gate input */ .lab-schem .t-gate-bar { fill: var(--surface-2); stroke: var(--lab-idle); stroke-width: 1; transition: fill 0.2s, stroke 0.2s; } .lab-schem .t-gate-bar.high { fill: var(--lab-high); stroke: var(--lab-high); } .lab-schem .t-mini-label { font-family: var(--font-mono); font-size: 10px; fill: var(--muted); } .lab-schem .stage-label { font-family: var(--font-mono); font-size: 10px; fill: var(--muted); font-style: italic; letter-spacing: 0.04em; } .lab-schem .component-label { font-family: var(--font-mono); font-size: 9px; fill: var(--muted); } /* Output LED — bigger and more LED-like than a node */ .lab-schem .gate-out { fill: var(--surface-2); stroke: var(--lab-idle); stroke-width: 2; transition: fill 0.25s, stroke 0.25s, filter 0.25s; } .lab-schem .gate-out.high { fill: var(--lab-high); stroke: var(--lab-high); filter: drop-shadow(0 0 8px var(--lab-high)); } .lab-schem .gate-out.flow { fill: var(--lab-flow); stroke: var(--lab-flow-deep); filter: drop-shadow(0 0 8px var(--lab-flow)); } /* Sub-gate (compound diagram boxes): idle, high (output high), or flow (active current path) */ .lab-schem .sub-gate { fill: var(--surface-2); stroke: var(--lab-idle); stroke-width: 1.5; transition: fill 0.25s, stroke 0.25s; } .lab-schem .sub-gate.high { fill: var(--lab-high-soft); stroke: var(--lab-high); } .lab-schem .sub-gate.flow { fill: var(--lab-flow-soft); stroke: var(--lab-flow); } .lab-schem .sub-gate-name { font-family: var(--font-mono); font-size: 12px; fill: var(--ink); font-weight: 600; } .lab-schem .sub-gate-sub { font-family: var(--font-mono); font-size: 10px; fill: var(--muted); } .lab-schem .t-label { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); letter-spacing: 0.05em; } /* Big bit display (used in flip-flop & counter) */ .bit-display { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 36px; font-weight: 700; width: 64px; height: 64px; background: var(--surface); border: 2px solid var(--border-2); border-radius: var(--r-md); color: var(--muted); transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s; } .bit-display.live { color: var(--cf-orange-deep); border-color: var(--cf-orange); background: rgba(246, 130, 31, 0.12); box-shadow: 0 0 14px rgba(246, 130, 31, 0.3); } @media (max-width: 640px) { h1 { font-size: 36px; } .mailbox-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } .hero { padding: 48px 0 24px 0; } .lab-btn { padding: 10px 16px; font-size: var(--t-sm); } }