/* ========================================================================== weareswarm.online — interior route components ========================================================================== What belongs here: composition that is genuinely specific to one interior route, or a component shared by several of them. What does NOT belong here: colour values, type stacks, radii. Those come from focus-system.css, which aliases the brand SSOT. Every value below resolves to a --swarm-* token; a raw hex here means the route has started inventing its own brand again, which is exactly the drift that produced four unrelated design generations on this domain. Route-specific blocks are scoped by [data-page] on . That scoping is load-bearing, not decorative: .proof-card is a two-column grid on /feed/ and an accent-bordered card on /dreamos-services/, and .meta is a flex row on /kids-planner/ but a stacked grid on /tasks/. Unscoped, they would fight. ========================================================================== */ /* ========================================================================== Shared across several interior routes ========================================================================== */ /* Two-column working layout: primary canvas + supporting rail. */ .focus-layout, .split, .hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); gap: 16px; align-items: start; } .blocker-list, .feed-list, .focus-proof, .tasks { display: grid; gap: 14px; } /* A blocker is the one component that should read as "stop". */ .blocker { padding: 14px; border: 1px solid var(--swarm-danger-edge); border-radius: var(--swarm-radius-md); background: var(--swarm-danger-wash); } .blocker strong { color: var(--swarm-text); } .blocker p { margin: 6px 0 0; } /* Filter/segment controls that sit above a collection. */ .project-controls, .tagrow, .objective-meta, .feed-actions, .badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; } .project-controls button { min-height: 36px; padding: 8px 12px; border: 1px solid var(--swarm-line); border-radius: var(--swarm-radius-pill); background: var(--swarm-surface); color: var(--swarm-muted); font-family: var(--swarm-sans); font-weight: 800; cursor: pointer; transition: border-color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); } .project-controls button:hover { border-color: var(--swarm-accent-edge); color: var(--swarm-text); } .project-controls button[aria-pressed="true"] { border-color: var(--swarm-accent-edge); background: var(--swarm-accent-wash); color: var(--swarm-mint); } /* Definition lists used for record metadata on projects and roadmap detail. */ .project-card dl, .detail-card dl { display: grid; gap: 11px; margin: 0; } .project-card dt, .detail-card dt { color: var(--swarm-gold); font-family: var(--swarm-mono); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; } .project-card dd, .detail-card dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--swarm-muted); } /* Card header row: title left, status right. */ .top, .task-head, .evidence-branch-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; } /* A highlighted callout band closing a section. */ .cta-band, .objective { padding: 24px; border: 1px solid var(--swarm-accent-edge); border-radius: var(--swarm-radius-lg); background: linear-gradient(135deg, var(--swarm-accent-wash), var(--swarm-info-wash)); } .cta-band { margin-top: 8px; text-align: center; } .objective p { max-width: 850px; } /* Numeric callout used on services and skill tree. */ .metrics { display: grid; gap: 12px; } .metric { padding: 18px; border: 1px solid var(--swarm-line); border-radius: var(--swarm-radius-lg); background: var(--swarm-panel-soft); } .metric strong { display: block; margin-bottom: 6px; color: var(--swarm-mint); font-size: 1.5rem; line-height: 1; } .metric span, .metric-note { color: var(--swarm-muted); font-size: 0.9rem; line-height: 1.45; } /* ========================================================================== /focus/ ========================================================================== */ [data-page="focus"] .agent-grid { margin: 16px 0 0; } [data-page="focus"] .agent-card p { margin: 0; } [data-page="focus"] .agent-card .meta { display: block; margin-bottom: 8px; } [data-page="focus"] .focus-proof p { margin: 0; } .decision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; } .decision-card { padding: 14px; border: 1px solid var(--swarm-line); border-radius: var(--swarm-radius-md); background: var(--swarm-panel-soft); } .decision-card strong { display: block; margin-bottom: 6px; color: var(--swarm-text); } .decision-card p { margin: 0; color: var(--swarm-muted); font-size: 0.9rem; } /* ========================================================================== /feed/ ========================================================================== */ [data-page="feed"] .proof-card { display: grid; grid-template-columns: minmax(110px, 0.24fr) minmax(0, 1fr); gap: 20px; } [data-page="feed"] .proof-card p { margin: 0; } .proof-date { color: var(--swarm-blue); font-family: var(--swarm-mono); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.04em; } .proof-body { display: grid; gap: 11px; } /* ========================================================================== /projects/ ========================================================================== */ .project-card { display: flex; flex-direction: column; gap: 12px; } .project-card p { margin: 0; } .project-card .actions { margin-top: auto; padding-top: 4px; } /* ========================================================================== /roadmap/ ========================================================================== */ .timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 20px 0 34px; } .milestone { min-height: 210px; padding: 20px; border: 1px solid var(--swarm-line); border-radius: var(--swarm-radius-lg); background: linear-gradient(180deg, var(--swarm-panel), var(--swarm-panel-soft)); } .milestone time { display: block; margin-bottom: 0.7rem; color: var(--swarm-gold); font-family: var(--swarm-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; } .milestone p { margin-top: 0.75rem; font-size: 0.9rem; } .milestone strong { color: var(--swarm-blue); font-weight: 800; } .roadmap-detail { display: grid; gap: 16px; margin: 20px 0 48px; } .detail-card { display: grid; grid-template-columns: 220px 1fr; gap: 22px; padding: 20px; border: 1px solid var(--swarm-line); border-radius: var(--swarm-radius-lg); background: linear-gradient(180deg, var(--swarm-panel), var(--swarm-panel-soft)); } /* ========================================================================== /tasks/ ========================================================================== */ [data-page="tasks"] .card { min-height: 260px; } [data-page="tasks"] .meta { display: grid; gap: 0.3rem; font-family: var(--swarm-mono); font-size: 0.7rem; color: var(--swarm-muted); } [data-page="tasks"] .meta strong { color: var(--swarm-gold); font-weight: 700; } /* ========================================================================== /skill-tree/ ========================================================================== */ .skill-sphere { position: relative; min-height: 360px; margin: 2rem 0; overflow: hidden; border: 1px solid var(--swarm-line); border-radius: var(--swarm-radius-lg); background: var(--swarm-bg-soft); } .skill-sphere::before { content: ""; position: absolute; inset: 12%; border: 1px solid var(--swarm-hairline); border-radius: 50%; } .skill-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--swarm-mint); box-shadow: 0 0 18px var(--swarm-accent-glow); transform: translate(-50%, -50%); } .skill-dot.building, .skill-dot.advanced { background: var(--swarm-violet); box-shadow: 0 0 18px var(--swarm-violet-edge); } .skill-dot.locked { background: var(--swarm-gold); box-shadow: 0 0 18px var(--swarm-warn-glow); } .legend-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.85rem; margin: 1.25rem 0 2rem; } .legend-item { padding: 0.9rem; border: 1px solid var(--swarm-line); border-radius: var(--swarm-radius-md); background: var(--swarm-panel-soft); } .legend-item strong { display: block; margin-bottom: 0.25rem; color: var(--swarm-text); } .legend-item span { color: var(--swarm-muted); font-size: 0.9rem; } .evidence-branch { margin-top: 1.2rem; } .evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; } .evidence-branch-count { color: var(--swarm-mint); font-weight: 800; white-space: nowrap; } .capability-node { margin-top: 0.85rem; border: 1px solid var(--swarm-line); border-radius: var(--swarm-radius-md); background: var(--swarm-panel-soft); } .capability-node summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 1rem; list-style: none; cursor: pointer; } .capability-node summary::-webkit-details-marker { display: none; } .capability-node h3 { margin: 0.35rem 0 0.15rem; font-size: 1.05rem; } .node-status { padding: 0.28rem 0.5rem; border-radius: var(--swarm-radius-sm); background: var(--swarm-mint); color: var(--swarm-bg); font-family: var(--swarm-mono); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; } .node-status.building { background: var(--swarm-violet); } .node-status.locked { background: var(--swarm-gold); } .node-counts { align-self: center; color: var(--swarm-muted); font-size: 0.88rem; white-space: nowrap; } .node-body { padding: 1rem; border-top: 1px solid var(--swarm-line-soft); } .evidence-list { display: grid; gap: 0.55rem; margin-top: 0.8rem; } .evidence-item { padding-left: 0.7rem; border-left: 3px solid var(--swarm-mint); overflow-wrap: anywhere; color: var(--swarm-muted); } .evidence-item a { color: var(--swarm-blue); } .next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; margin-top: 0.9rem; } .next-gate { padding: 0.9rem; border: 1px solid var(--swarm-line); border-radius: var(--swarm-radius-md); color: var(--swarm-muted); } /* ========================================================================== /dreamos-services/ ========================================================================== */ .card-num { margin-bottom: 10px; color: var(--swarm-blue); font-family: var(--swarm-mono); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; } .step { padding: 20px; border: 1px dashed var(--swarm-info-edge); border-radius: var(--swarm-radius-lg); background: var(--swarm-panel-soft); } .step strong { color: var(--swarm-blue); font-size: 0.78rem; letter-spacing: 0.08em; } [data-page="dreamos-services"] .proof-card { border-left: 4px solid var(--swarm-mint); } /* ========================================================================== /kids-planner/ ========================================================================== */ .topline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .sub { max-width: 760px; margin: 12px 0 0; color: var(--swarm-muted); line-height: 1.55; } [data-page="kids-planner"] .stat strong { display: block; font-size: 28px; letter-spacing: -0.04em; } [data-page="kids-planner"] .stat span { color: var(--swarm-muted); font-size: 13px; } [data-page="kids-planner"] .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 11px 0; } .task { padding: 16px; border: 1px solid var(--swarm-line); border-radius: var(--swarm-radius-lg); background: linear-gradient(180deg, var(--swarm-panel), var(--swarm-panel-soft)); } .task h2 { margin: 0; font-size: 19px; letter-spacing: -0.02em; } .task p { color: var(--swarm-muted); line-height: 1.5; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--swarm-line); border-radius: var(--swarm-radius-pill); background: var(--swarm-panel-soft); color: var(--swarm-muted); font-family: var(--swarm-mono); font-size: 12px; } .pill.good { border-color: var(--swarm-accent-edge); color: var(--swarm-mint); } .pill.warn { border-color: var(--swarm-warn-edge); color: var(--swarm-gold); } .pill.bad { border-color: var(--swarm-danger-edge); color: var(--swarm-red); } [data-page="kids-planner"] details { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--swarm-line-soft); } [data-page="kids-planner"] summary { cursor: pointer; color: var(--swarm-muted); } [data-page="kids-planner"] textarea { min-height: 120px; resize: vertical; font-family: var(--swarm-mono); font-size: 12px; line-height: 1.45; } button.secondary { border-color: var(--swarm-info-edge); background: var(--swarm-info-wash); } button.warn { border-color: var(--swarm-warn-edge); background: var(--swarm-warn-wash); color: var(--swarm-gold); } button.danger { border-color: var(--swarm-danger-edge); background: var(--swarm-danger-wash); color: var(--swarm-red); } button:disabled { opacity: 0.45; cursor: not-allowed; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 900px) { .focus-layout, .split, .hero-grid, .process, .legend-grid, .next-grid, .evidence-grid { grid-template-columns: 1fr; } .capability-node summary { grid-template-columns: 1fr; } .node-counts { white-space: normal; } } @media (max-width: 820px) { .detail-card { grid-template-columns: 1fr; } } @media (max-width: 680px) { [data-page="feed"] .proof-card { grid-template-columns: 1fr; gap: 10px; } } /* ========================================================================== Dream.OS console chrome for interior routes ========================================================================== The front door boots into an operating environment; these routes used to be document-style pages behind it. Shared brand tokens made them the same company, but not the same product — the chrome still changed at the first click. This layer gives the interior routes the console's surfaces, menu bar and typography while leaving each route's content structure alone. It is a reskin, not a re-layout: no route needs the rail/inspector/stream geometry of the shell to read as part of the same system. Colour comes from --brand-*; nothing here introduces a palette. ========================================================================== */ :root { --con-edge: color-mix(in srgb, var(--brand-text) 7.5%, transparent); --con-edge-strong: color-mix(in srgb, var(--brand-text) 14%, transparent); --con-plate: color-mix(in srgb, var(--brand-text) 3.2%, transparent); --con-plate-2: color-mix(in srgb, var(--brand-text) 5.5%, transparent); --con-ink-3: color-mix(in srgb, var(--brand-muted) 62%, var(--brand-bg)); --con-bar: 46px; } /* Menu-bar styling now lives in dreamos-shell.css (.os-bar), which loads after this file and owns the real console chrome. Only the link treatment stays here, for the nav as it sits inside that bar. */ body[data-page] .swarm-nav-links a { padding: 5px 10px; border-radius: 7px; border-color: transparent; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.005em; color: var(--con-ink-3); } body[data-page] .swarm-nav-links a:hover, body[data-page] .swarm-nav-links a:focus-visible { background: var(--con-plate-2); border-color: transparent; color: var(--brand-text); transform: none; } body[data-page] .swarm-nav-links a[aria-current="page"], body[data-page] .swarm-nav-links a.is-active { background: var(--con-plate-2); border-color: transparent; color: var(--brand-text); } /* --- Canvas -------------------------------------------------------------- */ body[data-page] main.wrap { width: min(1180px, calc(100% - 40px)); padding-top: 4px; } /* Console headings are thin and quiet. The interior routes were shouting in 900-weight display type while the shell whispered in 250. */ /* Deliberately every h1 on a route, not just the one inside main > header: roadmap, tasks and skill-tree place theirs elsewhere and kept shouting in 900-weight display type while the rest of the console had quieted down. */ body[data-page] h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 250; letter-spacing: -0.02em; line-height: 1.08; margin: 10px 0 12px; } body[data-page] main.wrap > header .intro, body[data-page] main.wrap > header p { font-size: 0.92rem; font-weight: 300; line-height: 1.6; } body[data-page] h2 { font-size: 1.02rem; font-weight: 400; letter-spacing: 0; } /* --- Surfaces: plates, not cards ----------------------------------------- */ body[data-page] .panel, body[data-page] .card, body[data-page] .stat, body[data-page] .metric, body[data-page] .project-card, body[data-page] .proof-card, body[data-page] .detail-card, body[data-page] .decision-card { border: 1px solid var(--con-edge); border-radius: 12px; background: var(--con-plate); box-shadow: none; transition: border-color 240ms ease, background 240ms ease; } body[data-page] .card:hover, body[data-page] .project-card:hover, body[data-page] .proof-card:hover, body[data-page] .detail-card:hover { border-color: var(--con-edge-strong); background: var(--con-plate-2); } /* --- Readout typography -------------------------------------------------- */ body[data-page] .eyebrow, body[data-page] .kicker, body[data-page] .section-label, body[data-page] .stat-label, body[data-page] .metric-label { font-family: var(--brand-font-mono); font-size: 0.61rem; font-weight: 500; letter-spacing: 0.18em; color: var(--con-ink-3); } body[data-page] .stat-value, body[data-page] .metric .value { font-weight: 250; letter-spacing: -0.01em; } /* --- Status pills read as console state, not as buttons ------------------- */ body[data-page] .status, body[data-page] .pill, body[data-page] .badge { border-radius: 999px; font-family: var(--brand-font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } /* --- Footer echoes the shell's activity strip ---------------------------- */ body[data-page] footer { margin-top: 40px; padding: 12px 0; border-top: 1px solid var(--con-edge); background: color-mix(in srgb, var(--brand-bg) 82%, transparent); font-family: var(--brand-font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--con-ink-3); } @media (max-width: 900px) { body[data-page] .swarm-nav-shell { position: static; padding: 10px 14px; } }