/* Kiro Developer Education work sample — Terminal palette (calm-zen-themes) Dark-first developer aesthetic. Light theme fully supported. Theme resolution: data-theme on wins; otherwise prefers-color-scheme. */ :root { /* Terminal · dark (default) */ --primary: #E0A93B; --primary-text: #E7B85A; --on-primary: #0E1113; --primary-soft: #221E15; --accent: #54C48A; --bg: #0E1113; --bg-sunken: #14181B; --surface: #191E22; --surface-raised: #1F252A; --text: #E8EDF0; --text-muted: #AAB4BC; --text-subtle: #818D95; --border: #28323A; --focus: #E7B85A; --success: #54C48A; --danger: #E5675A; --code-bg: #14181B; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --aura: linear-gradient(135deg, #E0A93B 0%, #7FB98C 52%, #3FB27A 100%); --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --fs-display: clamp(2.1rem, 4.6vw, 3.3rem); --fs-h2: clamp(1.5rem, 2.6vw, 1.9rem); --fs-h3: 1.17rem; --fs-body: 1rem; --fs-small: .875rem; --fs-kicker: .76rem; --maxw: 76rem; --maxw-prose: 44rem; --radius: 10px; --radius-lg: 16px; color-scheme: dark; } @media (prefers-color-scheme: light) { :root { --primary: #1C2226; --primary-text: #7A5A12; --on-primary: #F5F6F7; --primary-soft: #ECEEF0; --accent: #1F6B47; --bg: #F5F6F7; --bg-sunken: #ECEEF0; --surface: #FFFFFF; --surface-raised: #FFFFFF; --text: #14181B; --text-muted: #3C464C; --text-subtle: #63707A; --border: #DCE1E5; --focus: #7A5A12; --success: #1F6B47; --danger: #A33322; --code-bg: #ECEEF0; --shadow: 0 1px 2px rgba(20,24,27,.06), 0 8px 24px rgba(20,24,27,.07); color-scheme: light; } } :root[data-theme="dark"] { --primary: #E0A93B; --primary-text: #E7B85A; --on-primary: #0E1113; --primary-soft: #221E15; --accent: #54C48A; --bg: #0E1113; --bg-sunken: #14181B; --surface: #191E22; --surface-raised: #1F252A; --text: #E8EDF0; --text-muted: #AAB4BC; --text-subtle: #818D95; --border: #28323A; --focus: #E7B85A; --success: #54C48A; --danger: #E5675A; --code-bg: #14181B; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); color-scheme: dark; } :root[data-theme="light"] { --primary: #1C2226; --primary-text: #7A5A12; --on-primary: #F5F6F7; --primary-soft: #ECEEF0; --accent: #1F6B47; --bg: #F5F6F7; --bg-sunken: #ECEEF0; --surface: #FFFFFF; --surface-raised: #FFFFFF; --text: #14181B; --text-muted: #3C464C; --text-subtle: #63707A; --border: #DCE1E5; --focus: #7A5A12; --success: #1F6B47; --danger: #A33322; --code-bg: #ECEEF0; --shadow: 0 1px 2px rgba(20,24,27,.06), 0 8px 24px rgba(20,24,27,.07); color-scheme: light; } /* ========================================================================== Brand themes (swappable). data-brand on picks the palette; it is orthogonal to data-theme (light/dark). No data-brand = Terminal (the default tokens above). Only color-role tokens change; structure/type/spacing do not. An unknown brand falls back to Terminal. Set by assets/site.js, persisted. ========================================================================== */ /* ---- Kiro (AWS Kiro brand: purple #9046FF, lavender accents, 240-hue dark) ---- */ :root[data-brand="kiro"] { --primary:#9046FF; --primary-text:#B794FF; --on-primary:#FFFFFF; --primary-soft:#1B1330; --accent:#C084FC; --bg:#0A0A0F; --bg-sunken:#070709; --surface:#16151C; --surface-raised:#201E29; --text:#F4F4F5; --text-muted:#A6A2B0; --text-subtle:#787485; --border:#2A2833; --focus:#B794FF; --success:#54C48A; --danger:#F1707A; --code-bg:#070709; --aura: linear-gradient(135deg, #9046FF 0%, #C084FC 52%, #E2D3FE 100%); color-scheme: dark; } @media (prefers-color-scheme: light) { :root[data-brand="kiro"] { --primary:#7A2FE6; --primary-text:#6B21D6; --on-primary:#FFFFFF; --primary-soft:#F1EBFF; --accent:#7A2FE6; --bg:#FBFAFE; --bg-sunken:#F2EFF9; --surface:#FFFFFF; --surface-raised:#FFFFFF; --text:#141118; --text-muted:#57525F; --text-subtle:#7A7585; --border:#E5E0EF; --focus:#7A2FE6; --success:#1F8A5B; --danger:#C4353F; --code-bg:#F2EFF9; --aura: linear-gradient(135deg, #9046FF, #C084FC, #E2D3FE); color-scheme: light; } } :root[data-brand="kiro"][data-theme="dark"] { --primary:#9046FF; --primary-text:#B794FF; --on-primary:#FFFFFF; --primary-soft:#1B1330; --accent:#C084FC; --bg:#0A0A0F; --bg-sunken:#070709; --surface:#16151C; --surface-raised:#201E29; --text:#F4F4F5; --text-muted:#A6A2B0; --text-subtle:#787485; --border:#2A2833; --focus:#B794FF; --success:#54C48A; --danger:#F1707A; --code-bg:#070709; --aura: linear-gradient(135deg, #9046FF 0%, #C084FC 52%, #E2D3FE 100%); color-scheme: dark; } :root[data-brand="kiro"][data-theme="light"] { --primary:#7A2FE6; --primary-text:#6B21D6; --on-primary:#FFFFFF; --primary-soft:#F1EBFF; --accent:#7A2FE6; --bg:#FBFAFE; --bg-sunken:#F2EFF9; --surface:#FFFFFF; --surface-raised:#FFFFFF; --text:#141118; --text-muted:#57525F; --text-subtle:#7A7585; --border:#E5E0EF; --focus:#7A2FE6; --success:#1F8A5B; --danger:#C4353F; --code-bg:#F2EFF9; --aura: linear-gradient(135deg, #9046FF, #C084FC, #E2D3FE); color-scheme: light; } /* ---- Blue Motion (blue-forward: deep azure primary, sky accent) ---- */ :root[data-brand="bluemotion"] { --primary:#3B82F6; --primary-text:#7CB1FF; --on-primary:#FFFFFF; --primary-soft:#0D1B33; --accent:#22D3EE; --bg:#070D18; --bg-sunken:#050A12; --surface:#101A2B; --surface-raised:#182438; --text:#EAF1FB; --text-muted:#9DB0C8; --text-subtle:#6E819B; --border:#243244; --focus:#7CB1FF; --success:#34D399; --danger:#F1707A; --code-bg:#050A12; --aura: linear-gradient(135deg, #2563EB 0%, #3B82F6 45%, #22D3EE 100%); color-scheme: dark; } @media (prefers-color-scheme: light) { :root[data-brand="bluemotion"] { --primary:#2563EB; --primary-text:#1D4ED8; --on-primary:#FFFFFF; --primary-soft:#E4EEFF; --accent:#0891B2; --bg:#F6F9FE; --bg-sunken:#E9F0FA; --surface:#FFFFFF; --surface-raised:#FFFFFF; --text:#0E1726; --text-muted:#41506A; --text-subtle:#63748F; --border:#DCE5F2; --focus:#2563EB; --success:#0E9F6E; --danger:#C4353F; --code-bg:#E9F0FA; --aura: linear-gradient(135deg, #2563EB, #3B82F6, #22D3EE); color-scheme: light; } } :root[data-brand="bluemotion"][data-theme="dark"] { --primary:#3B82F6; --primary-text:#7CB1FF; --on-primary:#FFFFFF; --primary-soft:#0D1B33; --accent:#22D3EE; --bg:#070D18; --bg-sunken:#050A12; --surface:#101A2B; --surface-raised:#182438; --text:#EAF1FB; --text-muted:#9DB0C8; --text-subtle:#6E819B; --border:#243244; --focus:#7CB1FF; --success:#34D399; --danger:#F1707A; --code-bg:#050A12; --aura: linear-gradient(135deg, #2563EB 0%, #3B82F6 45%, #22D3EE 100%); color-scheme: dark; } :root[data-brand="bluemotion"][data-theme="light"] { --primary:#2563EB; --primary-text:#1D4ED8; --on-primary:#FFFFFF; --primary-soft:#E4EEFF; --accent:#0891B2; --bg:#F6F9FE; --bg-sunken:#E9F0FA; --surface:#FFFFFF; --surface-raised:#FFFFFF; --text:#0E1726; --text-muted:#41506A; --text-subtle:#63748F; --border:#DCE5F2; --focus:#2563EB; --success:#0E9F6E; --danger:#C4353F; --code-bg:#E9F0FA; --aura: linear-gradient(135deg, #2563EB, #3B82F6, #22D3EE); color-scheme: light; } /* ---- Brand switcher (header) ---- */ .brand-switch { display: inline-flex; gap: .2rem; align-items: center; flex: none; } .brand-switch button { width: 1.5rem; height: 1.5rem; border-radius: 7px; cursor: pointer; padding: 0; border: 1px solid var(--border); background: var(--sw, #888); position: relative; transition: transform .1s; } .brand-switch button:hover { transform: translateY(-1px); } .brand-switch button[aria-pressed="true"] { outline: 2px solid var(--focus); outline-offset: 1px; } .brand-switch .sw-terminal { --sw: linear-gradient(135deg, #E0A93B, #3FB27A); } .brand-switch .sw-kiro { --sw: linear-gradient(135deg, #9046FF, #C084FC); } .brand-switch .sw-bluemotion { --sw: linear-gradient(135deg, #2563EB, #22D3EE); } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; height: auto; } a { color: var(--primary-text); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; } h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.015em; } h1 { font-size: var(--fs-display); letter-spacing: -0.025em; } h2 { font-size: var(--fs-h2); margin-top: 2.6em; } h3 { font-size: var(--fs-h3); margin-top: 2em; } p, ul, ol { margin: 0 0 1.1em; } ul, ol { padding-left: 1.3em; } li { margin-bottom: .35em; } strong { font-weight: 650; } hr { border: 0; border-top: 1px solid var(--border); margin: 3rem 0; } /* ---------- Layout ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.5rem); } .prose { max-width: var(--maxw-prose); } main { padding-bottom: 5rem; } section { margin-top: 3.5rem; } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .site-header .wrap { display: flex; align-items: center; gap: 1.25rem; min-height: 3.5rem; } .brand { font-family: var(--font-mono); font-size: .92rem; font-weight: 600; color: var(--text); white-space: nowrap; display: flex; align-items: center; gap: .55rem; } .brand:hover { text-decoration: none; } .brand .dot { width: 1.45rem; height: 1.45rem; border-radius: 6px; flex: none; background: var(--aura); color: #0B0E10; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: .72rem; letter-spacing: -.02em; } .site-nav { display: flex; gap: .25rem; margin-left: auto; overflow-x: auto; scrollbar-width: none; } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { font-size: var(--fs-small); color: var(--text-muted); padding: .45rem .7rem; border-radius: 8px; white-space: nowrap; } .site-nav a:hover { color: var(--text); background: var(--bg-sunken); text-decoration: none; } .site-nav a[aria-current="page"] { color: var(--text); background: var(--primary-soft); font-weight: 600; } .theme-toggle { flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); width: 2.1rem; height: 2.1rem; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; } .theme-toggle:hover { color: var(--text); border-color: var(--text-subtle); } /* ---------- Kickers, badges, meta ---------- */ .kicker { font-family: var(--font-mono); font-size: var(--fs-kicker); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--primary-text); margin-bottom: 1rem; display: block; } .badge { display: inline-block; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em; padding: .18rem .55rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); background: var(--bg-sunken); vertical-align: middle; } .badge.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 9%, var(--bg-sunken)); } .badge.warn { color: var(--primary-text); border-color: color-mix(in srgb, var(--primary-text) 45%, var(--border)); background: var(--primary-soft); } .lede { font-size: 1.16rem; line-height: 1.6; color: var(--text-muted); max-width: 42rem; } /* ---------- Hero ---------- */ .hero { padding: clamp(3rem, 7vw, 5.5rem) 0 1rem; } .hero h1 { max-width: 22ch; } .hero h1 .accent-word { background: var(--aura); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; box-shadow: var(--shadow); } .card h3 { margin-top: 0; } .card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); margin: 1.6rem 0; } .card .kicker { margin-bottom: .5rem; } .card p:last-child { margin-bottom: 0; } /* ---------- Module list (curriculum spine) ---------- */ .module { display: grid; grid-template-columns: 3rem 1fr; gap: 1.1rem; padding: 1.25rem 1.35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .7rem; } .module .num { font-family: var(--font-mono); font-weight: 600; font-size: 1.25rem; color: var(--primary-text); line-height: 1.3; } .module h3 { margin: 0 0 .3rem; font-size: 1.05rem; } .module p { margin: 0 0 .5rem; font-size: var(--fs-small); color: var(--text-muted); } .module .meta { display: flex; flex-wrap: wrap; gap: .4rem; } .module a.module-link { font-size: var(--fs-small); font-weight: 600; } .module-launch{display:inline-flex;align-items:center;gap:.4rem;margin:.2rem 0 .2rem;font-family:var(--font-mono);font-size:.76rem;font-weight:600;letter-spacing:.02em;border:1px solid var(--primary-text);color:var(--primary-text);border-radius:8px;padding:.5rem .85rem;text-decoration:none;transition:background .12s} .module-launch:hover{background:var(--primary-soft);text-decoration:none} .hero-launch{margin-top:1.1rem} /* ---------- Funnel ---------- */ .funnel { margin: 2rem 0; } .funnel-stage { display: grid; grid-template-columns: minmax(7.5rem, 11rem) 1fr; gap: 1rem; align-items: center; margin-bottom: .45rem; } .funnel-stage .label { font-family: var(--font-mono); font-size: .8rem; color: var(--text-muted); text-align: right; } .funnel-stage .bar { height: 2.4rem; border-radius: 7px; background: var(--primary-soft); border: 1px solid var(--border); display: flex; align-items: center; padding: 0 .9rem; font-size: var(--fs-small); font-weight: 600; color: var(--text); min-width: 0; } .funnel-stage .bar .event { font-family: var(--font-mono); font-weight: 500; font-size: .74rem; color: var(--text-subtle); margin-left: auto; padding-left: .8rem; white-space: nowrap; } .funnel-stage.key .bar { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } /* ---------- Tables ---------- */ .table-scroll { position: relative; margin: 1.6rem 0; } table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); } th, td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--border); vertical-align: top; } th { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); font-weight: 600; } tbody tr:hover { background: var(--bg-sunken); } /* ---------- Code ---------- */ pre, code { font-family: var(--font-mono); } code { font-size: .86em; background: var(--code-bg); border: 1px solid var(--border); border-radius: 5px; padding: .1em .35em; } pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; font-size: .84rem; line-height: 1.55; margin: 1.4rem 0; white-space: pre-wrap; overflow-wrap: anywhere; } pre code { background: none; border: 0; padding: 0; font-size: inherit; } .code-title { font-family: var(--font-mono); font-size: .74rem; color: var(--text-subtle); margin: 1.4rem 0 -1.1rem; padding: 0 .2rem; } .code-title + pre { margin-top: 1.35rem; } /* The negative bottom margin above is a paired hack that only pre compensates for; any other sibling rides up into the label. Compensate for the note/list panes too (fixes the lesson interactives' right panes, including the shipped correctness page). */ .code-title + p, .code-title + ul { margin-top: 1.35rem; } /* ---------- Callouts ---------- */ .callout { border: 1px solid var(--border); border-left: 3px solid var(--primary-text); background: var(--surface); border-radius: 8px; padding: 1rem 1.2rem; margin: 1.5rem 0; font-size: var(--fs-small); } .callout.success { border-left-color: var(--success); } .callout.danger { border-left-color: var(--danger); } .callout .kicker { margin-bottom: .35rem; font-size: .68rem; } .callout p:last-child { margin-bottom: 0; } /* ---------- EARS requirement blocks ---------- */ .ears { font-family: var(--font-mono); font-size: .82rem; line-height: 1.6; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.2rem 0; } .ears .kw { color: var(--accent); font-weight: 600; } .ears .id { color: var(--text-subtle); } /* ---------- Checkpoint boxes (labs) ---------- */ .checkpoint { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; background: color-mix(in srgb, var(--success) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border)); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.5rem 0; font-size: var(--fs-small); } .checkpoint .tick { color: var(--success); font-weight: 700; font-family: var(--font-mono); } .checkpoint p:last-child { margin-bottom: 0; } /* ---------- Details / progressive disclosure ---------- */ details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: .6rem; overflow: hidden; } details summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; list-style: none; display: flex; align-items: center; gap: .7rem; } details summary::-webkit-details-marker { display: none; } details summary::before { content: "+"; font-family: var(--font-mono); color: var(--primary-text); font-weight: 600; width: 1rem; flex: none; } details[open] summary::before { content: "−"; } details .details-body { padding: 0 1.25rem 1.15rem 3rem; font-size: var(--fs-small); color: var(--text-muted); } details .details-body p:last-child { margin-bottom: 0; } /* ---------- Scroll affordance (combo: fade + chevrons) ---------- */ .scroll-region { position: relative; } .scroll-region .scroll-inner { overflow-x: auto; scrollbar-width: thin; } .scroll-region .fade { position: absolute; top: 0; bottom: 0; width: 3rem; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 2; } .scroll-region .fade.left { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } .scroll-region .fade.right { right: 0; background: linear-gradient(270deg, var(--bg), transparent); } .scroll-region .chev { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-raised); color: var(--text); cursor: pointer; font-size: .9rem; line-height: 1; opacity: 0; pointer-events: none; transition: opacity .2s; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } .scroll-region .chev.left { left: .3rem; } .scroll-region .chev.right { right: .3rem; } .scroll-region.can-left .fade.left, .scroll-region.can-left .chev.left { opacity: 1; pointer-events: auto; } .scroll-region.can-right .fade.right, .scroll-region.can-right .chev.right { opacity: 1; pointer-events: auto; } /* ---------- Capability map (the signature: layers × surfaces) ---------- */ .capmap { margin: 2rem 0 1rem; } .capmap-grid { display: grid; grid-template-columns: minmax(6.5rem, 8rem) repeat(4, minmax(0, 1fr)); gap: 6px; } .capmap-corner { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); display: flex; align-items: flex-end; padding: 0 0 .5rem .1rem; line-height: 1.3; } .capmap-col { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); text-align: center; padding: 0 0 .5rem; align-self: end; } .capmap-row-label { font-family: var(--font-mono); font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--primary-text); display: flex; align-items: center; padding-right: .6rem; text-align: right; justify-content: flex-end; line-height: 1.2; } .capmap-cell { appearance: none; text-align: left; cursor: pointer; font: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: .6rem .65rem; min-height: 5.2rem; color: var(--text); display: flex; flex-direction: column; gap: .32rem; transition: transform .14s ease, border-color .14s ease, background .14s ease; } .capmap-cell:hover { transform: translateY(-2px); border-color: var(--text-subtle); background: var(--surface-raised); text-decoration: none; } .capmap-cell .cell-tags { display: flex; flex-wrap: wrap; gap: .25rem; } .capmap-cell .tag { font-family: var(--font-mono); font-size: .64rem; line-height: 1.35; color: var(--text-muted); background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 5px; padding: .05rem .3rem; white-space: nowrap; } .capmap-cell .cell-more { font-family: var(--font-mono); font-size: .62rem; color: var(--text-subtle); } /* Specification row is the heart (Deepak: the spec becomes the source of truth) */ .capmap-cell.is-spec { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); } .capmap-cell.is-spec .tag { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); } .capmap-cell[aria-pressed="true"] { border-color: var(--primary-text); box-shadow: 0 0 0 1px var(--primary-text); background: var(--surface-raised); } .capmap-detail { margin-top: 1rem; border: 1px solid var(--border); border-left: 3px solid var(--primary-text); border-radius: 10px; background: var(--surface); padding: 1.1rem 1.25rem; min-height: 4rem; } .capmap-detail .d-kicker { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-text); margin-bottom: .4rem; } .capmap-detail h3 { margin: 0 0 .5rem; font-size: 1.05rem; } .capmap-detail p { margin: 0 0 .7rem; font-size: var(--fs-small); color: var(--text-muted); } .capmap-detail .d-modules { display: flex; flex-wrap: wrap; gap: .4rem; } .capmap-detail .d-modules a { font-size: var(--fs-small); font-family: var(--font-mono); font-size: .74rem; border: 1px solid var(--border); border-radius: 7px; padding: .28rem .6rem; color: var(--text); background: var(--bg-sunken); } .capmap-detail .d-modules a:hover { border-color: var(--primary-text); text-decoration: none; color: var(--primary-text); } .capmap-hint { font-size: var(--fs-small); color: var(--text-subtle); margin: .3rem 0 0; } @media (max-width: 760px) { .capmap-grid { grid-template-columns: 1fr 1fr; } .capmap-corner, .capmap-col { display: none; } .capmap-row-label { grid-column: 1 / -1; justify-content: flex-start; text-align: left; padding: .8rem 0 .2rem; font-size: .8rem; } .capmap-cell::before { content: attr(data-surface); font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); } } /* ---------- Filter chips (learning paths) ---------- */ .filterbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1.4rem 0; } .filterbar .fb-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); margin-right: .2rem; } .chip { appearance: none; cursor: pointer; font: inherit; font-size: var(--fs-small); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: 999px; padding: .32rem .8rem; transition: all .14s ease; } .chip:hover { color: var(--text); border-color: var(--text-subtle); } .chip[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary-text); color: var(--text); font-weight: 600; } .path-dim { opacity: .32; transition: opacity .2s ease; } /* ---------- Coverage matrix ---------- */ .cov-status { font-family: var(--font-mono); font-size: .68rem; white-space: nowrap; } .cov-status.ok { color: var(--success); } .cov-status.pending { color: var(--primary-text); } .cov-status.none { color: var(--danger); } .cov-modules { display: flex; flex-wrap: wrap; gap: .25rem; } .cov-modules .m { font-family: var(--font-mono); font-size: .66rem; padding: .05rem .35rem; border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); background: var(--bg-sunken); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); margin-top: 4rem; padding: 2rem 0 3rem; font-size: var(--fs-small); color: var(--text-subtle); } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; } .site-footer a { color: var(--text-muted); } /* ---------- Page-nav (prev/next) ---------- */ .page-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 4rem; } .page-nav a { flex: 1; max-width: 48%; border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; background: var(--surface); font-size: var(--fs-small); } .page-nav a:hover { text-decoration: none; border-color: var(--text-subtle); } .page-nav a .dir { display: block; font-family: var(--font-mono); font-size: .7rem; color: var(--text-subtle); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .25rem; } .page-nav a.next { text-align: right; margin-left: auto; } /* ---------- Utility ---------- */ .mono { font-family: var(--font-mono); } .muted { color: var(--text-muted); } .subtle { color: var(--text-subtle); } .small { font-size: var(--fs-small); } .center { text-align: center; } .mt-0 { margin-top: 0; } .two-col { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } @media (max-width: 640px) { .module { grid-template-columns: 2.2rem 1fr; padding: 1rem; } .funnel-stage { grid-template-columns: 1fr; gap: .25rem; } .funnel-stage .label { text-align: left; } .page-nav a { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---- Living curriculum: modules light up (C rail) and the map glows (A) as lessons ship ---- */ .spine{position:relative} .spine .rail,.spine .rail-fill{position:absolute;border-radius:3px;z-index:0;pointer-events:none} .spine .rail{width:2px;background:var(--border)} .spine .rail-fill{width:3px;background:linear-gradient(#54C48A,#E0A93B);box-shadow:0 0 15px 1px rgba(224,169,59,.6)} .module{position:relative;z-index:1} .module .num{position:relative;z-index:1;transition:box-shadow .25s,background .25s,color .25s} .module.lit .num,.module.coming .num{display:inline-flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;border-radius:50%;font-size:1.02rem} .module.lit .num{background:linear-gradient(135deg,#E0A93B,#3FB27A);color:#0E1113;box-shadow:0 0 0 2px rgba(224,169,59,.7),0 0 26px 4px rgba(84,196,138,.5)} .module.coming{opacity:.55} .module.coming .num{background:transparent;border:1px dashed var(--border);color:var(--text-subtle)} .mod-pill{display:inline-block;font-family:var(--font-mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.12rem .45rem;border-radius:5px;margin-left:.55rem;vertical-align:middle} .mod-pill.live{background:linear-gradient(135deg,rgba(224,169,59,.28),rgba(84,196,138,.24));color:#8FE0B4;border:1px solid rgba(84,196,138,.65);box-shadow:0 0 12px -2px rgba(84,196,138,.7)} .mod-pill.soon{background:transparent;color:var(--text-subtle);border:1px solid var(--border)} .spine-progress{display:flex;align-items:center;gap:.6rem;margin:.1rem 0 1.3rem;font-family:var(--font-mono);font-size:.76rem;color:var(--text-muted)} .spine-progress .pips{display:flex;gap:.34rem} .spine-progress .pip{width:.6rem;height:.6rem;border-radius:50%;background:var(--border)} .spine-progress .pip.on{background:linear-gradient(135deg,#E0A93B,#3FB27A);box-shadow:0 0 9px 1px rgba(84,196,138,.75)} /* capmap lit cells: bright aurora border + strong glow + visible tint + a glowing corner dot */ .capmap-cell.lit{position:relative;border-color:#E0A93B;box-shadow:0 0 0 2px rgba(224,169,59,.65),0 0 30px 0 rgba(84,196,138,.45)} .capmap-cell.lit:hover{border-color:#E0A93B} .capmap-cell.lit::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background:linear-gradient(135deg,rgba(224,169,59,.18),rgba(84,196,138,.12))} .capmap-cell.lit::before{content:"";position:absolute;top:.55rem;right:.55rem;width:.52rem;height:.52rem;border-radius:50%;background:linear-gradient(135deg,#E0A93B,#3FB27A);box-shadow:0 0 10px 1px rgba(84,196,138,.8);z-index:3} .capmap-cell.lit .cell-tags,.capmap-cell.lit .cell-more{position:relative;z-index:1} @media (prefers-reduced-motion:no-preference){ .module.lit .num{animation:num-glow 3.2s ease-in-out infinite} @keyframes num-glow{0%,100%{box-shadow:0 0 0 2px rgba(224,169,59,.6),0 0 20px 3px rgba(84,196,138,.4)}50%{box-shadow:0 0 0 2px rgba(224,169,59,.85),0 0 34px 6px rgba(84,196,138,.65)}} .capmap-cell.lit{animation:cell-glow 3.2s ease-in-out infinite} @keyframes cell-glow{0%,100%{box-shadow:0 0 0 2px rgba(224,169,59,.6),0 0 24px 0 rgba(84,196,138,.38)}50%{box-shadow:0 0 0 2px rgba(224,169,59,.85),0 0 38px 4px rgba(84,196,138,.6)}} } /* Role-aware nav: founder-only tabs hidden by default, revealed for founders (set by api/me in site.js). */ .site-nav a[href="measurement.html"],.site-nav a[href="stats.html"],.site-nav a[href="working-backwards.html"]{display:none} html.is-founder .site-nav a[href="measurement.html"],html.is-founder .site-nav a[href="stats.html"],html.is-founder .site-nav a[href="working-backwards.html"]{display:inline} /* ---- The personalized path (treatment D from the spread): plated home + intake ---- */ /* When plated, the wall (the spine section) rests; the map rows below carry the territory. */ body.is-plated #spine { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #path-home { margin: 2.4rem 0 3rem; } .ph-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .7rem; margin-bottom: 1.1rem; } .ph-spec { display: flex; align-items: center; gap: .6rem; min-width: 0; font-family: var(--font-mono); font-size: .78rem; color: var(--text-muted); } .ph-tag { flex: none; color: var(--primary-text); border: 1px solid var(--primary-text); border-radius: 999px; padding: .15rem .65rem; } .ph-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ph-actions { display: flex; gap: .5rem; flex: none; } .ph-ghost { font-size: .8rem; font-weight: 600; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: .35rem .85rem; cursor: pointer; } .ph-ghost:hover { color: var(--text); border-color: var(--text-subtle); } .ph-courses { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: .8rem; align-items: stretch; } @media (max-width: 760px) { .ph-courses { grid-template-columns: 1fr; } } .ph-card { position: relative; border: 1px solid var(--primary-text); border-radius: var(--radius-lg); background: var(--primary-soft); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; min-height: 9.5rem; } .ph-hero { border-width: 2px; } .ph-hero .ph-t { font-size: 1.25rem; } .ph-k { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-text); } .ph-t { font-weight: 650; line-height: 1.3; } .ph-lang { align-self: flex-start; font-family: var(--font-mono); font-size: .64rem; color: var(--text-subtle); border: 1px dashed var(--border); border-radius: 999px; padding: .1rem .5rem; } .ph-card .module-launch { margin-top: auto; align-self: flex-start; } .ph-done-btn { position: absolute; top: .7rem; right: .8rem; font-size: .68rem; font-weight: 600; color: var(--text-subtle); background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: .15rem .55rem; cursor: pointer; } .ph-done-btn:hover { color: var(--text); border-color: var(--text-subtle); } .ph-map-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); margin: 1.4rem 0 .5rem; } .ph-rows { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .9rem; } @media (max-width: 760px) { .ph-rows { grid-template-columns: 1fr; } } .ph-row { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--border); border-radius: 9px; padding: .42rem .7rem; min-width: 0; } .ph-row.is-rest { opacity: .55; } .ph-row.is-done { border-color: var(--primary-text); } .ph-row.is-done .ph-row-t { text-decoration: line-through; opacity: .8; } .ph-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-subtle); flex: none; } .ph-row.is-done .ph-dot { background: var(--primary-text); } .ph-row-t { font-size: .84rem; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ph-why { margin-left: auto; font-family: var(--font-mono); font-size: .62rem; color: var(--text-subtle); flex: none; } .ph-pill { margin: 0 0 .5rem; } /* the intake overlay: the wall stays dimly visible behind it */ .pi-overlay { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 1.2rem; } .pi-card { width: min(34rem, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.6rem 1.7rem; display: flex; flex-direction: column; gap: .9rem; } .pi-kicker { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--primary-text); } .pi-q { font-size: 1.15rem; font-weight: 650; line-height: 1.3; color: var(--text); } .pi-q a { font-size: .9rem; } .pi-chips { display: flex; flex-wrap: wrap; gap: .5rem; } .pi-chip { font-size: .88rem; font-weight: 600; color: var(--text); background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 999px; padding: .5rem 1rem; cursor: pointer; } .pi-chip:hover, .pi-chip.is-prev { border-color: var(--primary-text); color: var(--primary-text); } .pi-go { background: var(--primary); color: var(--bg); border-color: var(--primary); align-self: flex-start; } .pi-skip, .pi-leave { align-self: flex-start; background: none; border: none; cursor: pointer; font-size: .78rem; color: var(--text-subtle); text-decoration: underline; padding: 0; } .pi-leave { margin-top: .3rem; }