/* ============================================================ InfraSquad LMS — shared shell stylesheet. Loaded by every module via . What lives here: design tokens, theme toggle, app layout (mobile + desktop grid), bottom sheet, sidebar info-pane, timeline + controls, and the SVG zone-dim convention. What does NOT live here: module-specific SVG content, COMPONENTS / STEPS data, narration text. Those stay inline in each module's index.html. ============================================================ */ /* ============================================================ Design tokens. Brand consistency comes first; these match the :root in CLAUDE.md's design system note. ============================================================ */ :root { /* Card / interior tokens. Fixed across themes — these drive the sidebar, the bottom sheet, the SVG card. They ALWAYS render light so the diagram and detail panels stay legible regardless of theme. */ --color-bg-card: #FFFFFF; --color-bg-soft: #F4F1EA; --color-text: #0A0A0A; --color-text-soft: #5F5E5A; --color-text-muted: #888780; --color-border: rgba(10, 10, 10, 0.12); --color-border-strong: rgba(10, 10, 10, 0.30); /* Page chrome tokens. Swap with the theme toggle. Drive the page background and any text/borders that sit on the page (header, caption, controls). Cards do NOT use these. */ --color-bg: #FAFAF6; --page-text: #0A0A0A; --page-text-soft: #5F5E5A; --page-text-muted: #888780; --page-border: rgba(10, 10, 10, 0.30); --page-soft-bg: #F4F1EA; --infrasquad-orange: #E8651A; --infrasquad-orange-deep: #c9531a; --infrasquad-cream: #F4F1EA; --infrasquad-charcoal: #2C2C2A; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; } /* Manual theme toggle. Set on via the toggle button + localStorage. All text outside cards goes pure white; cards keep their own dark ink because their tokens (--color-text*) never change. */ [data-theme="dark"] { --color-bg: #1a1a18; --page-text: #FFFFFF; --page-text-soft: #FFFFFF; --page-text-muted: #FFFFFF; --page-border: rgba(255, 255, 255, 0.40); --page-soft-bg: #2C2C2A; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; } body { font-family: var(--font-sans); color: var(--page-text); background: var(--color-bg); line-height: 1.5; -webkit-font-smoothing: antialiased; /* Mobile: allow vertical scroll if content exceeds viewport (e.g., on phones where Safari chrome eats more vertical space than expected). Desktop overrides this back to overflow: hidden in its media query. */ overflow-x: hidden; overflow-y: auto; transition: background 0.25s ease, color 0.25s ease; } button { font-family: inherit; } /* ============================================================ App shell. Locks to viewport, single column, max 480px so the mobile experience holds on tablets and desktops too. ============================================================ */ .app { display: flex; flex-direction: column; /* min-height (not fixed height) so the app grows with its content when a phone's available viewport is shorter than the layout needs. The page can then scroll naturally. Desktop reverts to a locked height in its media query. */ min-height: 100vh; min-height: 100dvh; max-width: 480px; margin: 0 auto; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); background: var(--color-bg); } /* HEADER */ .header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 6px; flex-shrink: 0; } .header-text { min-width: 0; flex: 1; } .eyebrow { font-size: 11px; color: var(--page-text-muted); letter-spacing: 0.06em; margin: 0 0 2px; text-transform: uppercase; } .title { font-size: 17px; font-weight: 500; margin: 0; color: var(--page-text); letter-spacing: -0.01em; } .habits-btn { background: transparent; border: 0.5px solid var(--page-border); color: var(--page-text); font-size: 12px; padding: 7px 12px; border-radius: 999px; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; } .habits-btn:hover { background: var(--page-soft-bg); } .habits-btn::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--infrasquad-orange); } /* Theme toggle (sun/moon). Sits next to the Habits chip in the header. */ .theme-toggle { flex-shrink: 0; width: 34px; height: 34px; border-radius: 999px; background: transparent; border: 0.5px solid var(--page-border); color: var(--page-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; padding: 0; } .theme-toggle:hover { background: var(--page-soft-bg); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: inline-block; } /* Back-to-dashboard button. Sits at the start of the header so the learner always has a one-tap path back to the module list. Same visual weight as the theme toggle to keep the chrome quiet. */ .back-btn { flex-shrink: 0; width: 34px; height: 34px; border-radius: 999px; background: transparent; border: 0.5px solid var(--page-border); color: var(--page-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; padding: 0; text-decoration: none; } .back-btn:hover { background: var(--page-soft-bg); } .back-btn svg { width: 16px; height: 16px; } /* ============================================================ Stage. The big SVG. Owns the majority of vertical space, scaled to fit either width-constrained or height-constrained viewports. ============================================================ */ .stage { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px 12px; overflow: hidden; position: relative; } /* The SVG is a schematic — always render on a light "paper" surface so the building edges read regardless of system light/dark mode. */ .stage-card { background: #FFFFFF; border-radius: var(--radius-lg); padding: 8px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border: 0.5px solid rgba(10, 10, 10, 0.10); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05); } .stage-svg { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; } /* Two SVGs per module — one portrait for phones, one landscape for laptops. The right one shows based on viewport; the other display:none. Both carry the same zone class names so the shared engine drives both. */ .stage-svg-portrait { display: block; } .stage-svg-landscape { display: none; } /* SVG interactions */ .hot-area { cursor: pointer; transition: opacity 0.2s; outline: none; } .hot-area:hover { opacity: 0.85; } .hot-area:focus-visible rect:first-of-type, .hot-area:focus-visible circle:first-of-type { stroke: var(--infrasquad-orange); stroke-width: 2; } .hot-pulse { animation: pulse 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; pointer-events: none; } /* Real pulse: opacity AND scale. The previous opacity-only version read as static against the white card. */ @keyframes pulse { 0%, 100% { opacity: 0.35; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.12); } } .signal-flow { stroke-dasharray: 4 6; animation: flow 3s linear infinite; } @keyframes flow { to { stroke-dashoffset: -40; } } /* Spotlight for the narration: dim everything except the active zone */ .zone { transition: opacity 0.4s; } .zone.dim { opacity: 0.18; } /* ============================================================ Caption strip. Single line of narration, swaps as the day plays. Small and quiet when idle so the SVG keeps focus. ============================================================ */ .caption { flex-shrink: 0; padding: 8px 18px 4px; min-height: 56px; display: flex; align-items: center; justify-content: center; text-align: center; } .caption-text { font-size: 14px; line-height: 1.45; color: var(--page-text); margin: 0; max-width: 38ch; } .caption-text.muted { color: var(--page-text-muted); font-size: 13px; } .caption-step-time { font-size: 10px; color: var(--infrasquad-orange); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; display: block; margin-bottom: 4px; } /* ============================================================ Controls bar: play, timeline, mute. Apple-style media bar. ============================================================ */ .controls { flex-shrink: 0; padding: 6px 16px 14px; display: flex; align-items: center; gap: 12px; } .play-btn { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--infrasquad-orange); border: none; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.1s, background 0.15s; } .play-btn:hover { background: var(--infrasquad-orange-deep); } .play-btn:active { transform: scale(0.94); } .play-btn svg { width: 18px; height: 18px; fill: white; } .timeline { flex: 1; display: flex; align-items: center; gap: 5px; } .ts-step { flex: 1; height: 6px; background: var(--page-soft-bg); border: 0.5px solid var(--page-border); border-radius: 3px; cursor: pointer; padding: 0; position: relative; transition: background 0.2s, transform 0.1s; } .ts-step:hover { transform: scaleY(1.4); } .ts-step.played { background: var(--infrasquad-orange-deep); opacity: 0.55; border-color: transparent; } .ts-step.active { background: var(--infrasquad-orange); border-color: transparent; transform: scaleY(1.4); } .mute-btn, .stop-btn { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: transparent; border: 0.5px solid var(--page-border); color: var(--page-text); cursor: pointer; display: flex; align-items: center; justify-content: center; } .mute-btn svg { width: 16px; height: 16px; } .mute-btn.muted { color: var(--page-text-muted); opacity: 0.6; } /* Stop button: cancels playback and clears the spotlight in one tap. Quiet by default, full opacity on hover so it doesn't compete with the orange play button visually. */ .stop-btn { opacity: 0.5; transition: opacity 0.15s; } .stop-btn:hover { opacity: 1; } .stop-btn svg { width: 14px; height: 14px; } /* ============================================================ Bottom sheet. iOS Maps-style slide-up over the SVG. Backdrop dims the stage. Drag-handle is mostly visual cue; tap on backdrop or handle dismisses. ============================================================ */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.42); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 10; } .sheet-backdrop.open { opacity: 1; pointer-events: auto; } .sheet { position: fixed; bottom: 0; left: 50%; transform: translate(-50%, 100%); width: 100%; max-width: 480px; background: var(--color-bg-card); border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); padding: 6px 20px max(24px, env(safe-area-inset-bottom)); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); z-index: 11; max-height: 78vh; overflow-y: auto; box-shadow: 0 -16px 50px rgba(0,0,0,0.18); -webkit-overflow-scrolling: touch; } .sheet.open { transform: translate(-50%, 0); } .sheet-handle-wrap { display: flex; justify-content: center; padding: 8px 0 14px; cursor: pointer; } .sheet-handle { width: 38px; height: 4px; background: var(--color-border-strong); border-radius: 2px; opacity: 0.5; } .sheet-tag { font-size: 10px; color: var(--infrasquad-orange); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; margin: 0 0 6px; } .sheet-title { font-size: 22px; font-weight: 500; margin: 0 0 4px; letter-spacing: -0.01em; color: var(--color-text); } .sheet-sub { font-size: 13px; color: var(--color-text-soft); margin: 0 0 16px; line-height: 1.5; } .sheet-section { margin-bottom: 14px; } .sheet-section h4 { font-size: 11px; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 6px; } .sheet-section p { font-size: 14.5px; line-height: 1.55; margin: 0; color: var(--color-text); } .sheet-watchout { background: #FAEEDA; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: #633806; border-left: 3px solid #BA7517; margin: 0 0 14px; } .sheet-watchout b { font-weight: 600; } .sheet-habits { display: flex; flex-wrap: wrap; gap: 6px; } .habit-chip { font-size: 12px; padding: 6px 11px; border-radius: 999px; background: var(--color-bg-soft); color: var(--color-text); border: 0.5px solid var(--color-border); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .habit-chip::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--infrasquad-orange); } .habit-chip:hover { border-color: var(--color-border-strong); } .habits-list { display: flex; flex-direction: column; gap: 8px; } .habit-row { padding: 12px 14px; background: var(--color-bg-soft); border-radius: var(--radius-md); /* Lock text inside the row to the always-dark card token so it stays readable on the light card background even in dark mode. */ color: var(--color-text); } .habit-row h5 { font-size: 14px; font-weight: 500; margin: 0 0 4px; color: var(--color-text); } .habit-row p { font-size: 13px; color: var(--color-text-soft); margin: 0; line-height: 1.5; } button, .hot-area { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Larger phones with more height: let the SVG breathe a bit more */ @media (min-height: 800px) { .header { padding-top: 18px; } .caption { min-height: 60px; } } /* ============================================================ Right column. Hidden on mobile; persistent info pane on desktop. Acts as the desktop equivalent of the bottom sheet: tap a component on the SVG and the right column updates in place. ============================================================ */ .right-col { display: none; } .info-pane h2.info-title { font-size: 26px; font-weight: 500; margin: 0 0 6px; letter-spacing: -0.01em; color: var(--color-text); } .info-pane .info-eyebrow { font-size: 11px; color: var(--color-text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 4px; } .info-pane .info-lede { font-size: 14.5px; line-height: 1.55; color: var(--color-text-soft); margin: 0 0 24px; } .info-pane .info-section-title { font-size: 12px; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 22px 0 8px; } .info-pane .info-list { display: flex; flex-direction: column; gap: 6px; } .info-pane .info-row { background: var(--color-bg-soft); border: 0.5px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; cursor: pointer; text-align: left; color: var(--color-text); display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: border-color 0.15s, transform 0.1s; } .info-pane .info-row:hover { border-color: var(--color-border-strong); transform: translateX(2px); } .info-pane .info-row-title { font-size: 14px; font-weight: 500; margin: 0 0 2px; } .info-pane .info-row-sub { font-size: 11.5px; color: var(--color-text-muted); letter-spacing: 0.04em; } .info-pane .info-row-arrow { color: var(--infrasquad-orange); font-size: 14px; flex-shrink: 0; } .info-pane .info-back { background: transparent; border: none; color: var(--color-text-soft); font-family: inherit; font-size: 13px; cursor: pointer; padding: 0 0 16px; margin: 0; } .info-pane .info-back:hover { color: var(--infrasquad-orange); } /* ============================================================ Desktop layout: two-column. Left col holds the existing app experience (header / SVG / caption / controls). Right col surfaces component details and habits in place of the sheet. ============================================================ */ @media (min-width: 900px) { /* Desktop: lock the page to viewport (sidebar scrolls internally). */ body { overflow: hidden; } /* Grid layout. The sidebar lives only in the middle row so it has the same height as the stage. Header / caption / controls sit on the right column above and below the stage. .left-col uses display: contents so its children become direct grid items. */ .app { display: grid; grid-template-columns: 350px 1fr; grid-template-rows: auto 1fr auto auto; grid-template-areas: ". header" "sidebar stage" ". caption" ". controls"; column-gap: 24px; row-gap: 0; max-width: 1500px; padding: 24px; height: 100vh; height: 100dvh; min-height: auto; } .left-col { display: contents; } .header { grid-area: header; } .stage { grid-area: stage; } .caption { grid-area: caption; } .controls { grid-area: controls; } .right-col { grid-area: sidebar; display: flex; flex-direction: column; min-height: 0; background: var(--color-bg-card); border: 0.5px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px 22px 28px; overflow-y: auto; box-shadow: 0 2px 14px rgba(0,0,0,0.04); } /* Big SVG: fill the main column on desktop. The viewBox preserves aspect; the larger surface lets the diagram actually breathe. */ .stage { padding: 0; } .stage-card { padding: 18px; } .stage-svg { width: 100%; height: 100%; max-width: none; max-height: none; } /* On desktop, swap to the landscape SVG. */ .stage-svg-portrait { display: none; } .stage-svg-landscape { display: block; } /* Header sits over the SVG column at the top, full width of that col. */ .header { padding: 8px 4px 14px; } .title { font-size: 20px; } /* Caption + controls scaled up to match the bigger stage. */ .caption { padding: 14px 22px 6px; } .caption-text { font-size: 15.5px; max-width: 56ch; } .controls { padding: 8px 4px 0; gap: 14px; } .play-btn { width: 50px; height: 50px; } /* Bottom sheet not used on desktop. Component / habit detail renders in the left sidebar, with a "back to overview" link. */ .sheet, .sheet-backdrop { display: none !important; } }