// ── Icon base ───────────────────────────────────────────────────────────────── // Applied by the icon() Jinja2 global to every icon. .icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } // Meta row icons (author, timestamp, branch) are intentionally muted. .commit-meta-item .icon { opacity: .6; } // Decorative empty-state icons use a lighter stroke weight. .icon--light-stroke { stroke-width: 1.2; } /* * MuseHub Layout System * * Global structural layout: page container, header/nav chrome, responsive * breakpoints, and utility spacing helpers. * * Breakpoints (mobile-first): * xs < 480px — compact phones * sm 480-767px — large phones / small tablets (portrait) * md 768-1023px— tablets and small laptops * lg 1024-1279px— laptops * xl >= 1280px — desktops / wide monitors * * Minimum supported width: 375px (iPhone SE / most modern phones). * Maximum design width: 1280px (content column; wider screens add side whitespace). */ /* ------------------------------------------------------------------------- * Base scaling * * FOUC prevention is handled by setting background:#0d1117 directly on the * element as an inline style in base.html — no opacity tricks needed. * -------------------------------------------------------------------------*/ body { zoom: 1.25; } @media (max-width: 768px) { body { zoom: 1; } } /* ------------------------------------------------------------------------- * Global navigation bar (.musehub-navbar) * * Replaces the plain
element with a structured nav bar that includes * logo, search form, site links, and a mobile hamburger toggle. * ------------------------------------------------------------------------- */ /* Hidden checkbox drives the CSS-only mobile collapse — no JS required. */ .navbar-toggle-input { display: none; } .musehub-navbar { background: var(--bg-surface); border-bottom: 1px solid var(--border-default); position: sticky; top: 0; z-index: var(--z-raised); height: 42px; } .navbar-inner { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); height: 100%; width: 100%; } .navbar-logo { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-primary); white-space: nowrap; text-decoration: none; flex-shrink: 0; letter-spacing: -0.01em; } .navbar-logo:hover { text-decoration: none; color: var(--text-primary); opacity: 0.85; .gradient-text { opacity: 1; /* gradient handles its own visual feedback via parent opacity */ } } .navbar-logo-icon { color: var(--color-accent); flex-shrink: 0; } .navbar-logo-text { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: 16px; } /* Search form */ .navbar-search-form { display: flex; align-items: center; gap: var(--space-2); flex: 1; max-width: 400px; background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-base); padding: 0 var(--space-3); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); /* Override the global input[type="search"] rule which has higher specificity (0-1-1) than .navbar-search-input (0-1-0) and would otherwise show its own border, padding, and width as an inner stroke. */ input[type="search"], .navbar-search-input { flex: 1; background: transparent; border: none; border-radius: 0; outline: none; box-shadow: none; padding: 6px 0; font-size: var(--text-sm); font-family: var(--font-sans); color: var(--text-primary); min-width: 0; width: auto; } input[type="search"]::placeholder, .navbar-search-input::placeholder { color: var(--text-muted); } } .navbar-search-form:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent); } .navbar-search-icon { color: var(--text-muted); flex-shrink: 0; } /* Action links */ .navbar-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; margin-left: auto; } .navbar-link { font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; white-space: nowrap; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast); } .navbar-link:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; } /* Icon-only nav button (bell, etc.) */ .navbar-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: var(--radius-base); color: var(--text-muted); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); } .navbar-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; } .nav-notif-badge { position: absolute; top: 2px; right: 2px; background: var(--color-danger); color: #fff; border-radius: var(--radius-full); font-size: 9px; font-weight: var(--weight-bold); min-width: 14px; height: 14px; display: none; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; pointer-events: none; } .navbar-signout { flex-shrink: 0; } /* Theme toggle — swap sun/moon icon based on [data-theme] on */ .navbar-theme-btn { border: none; background: none; cursor: pointer; } .navbar-theme-icon { display: none; } /* Dark mode (default): show sun so user can switch to light */ .navbar-theme-icon--sun { display: block; } /* Light mode: show moon so user can switch back to dark */ [data-theme="light"] .navbar-theme-icon--sun { display: none; } [data-theme="light"] .navbar-theme-icon--moon { display: block; } /* Hamburger button (hidden on desktop) */ .navbar-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: var(--space-2); border-radius: var(--radius-sm); flex-shrink: 0; } .navbar-hamburger span { display: block; width: 20px; height: 2px; background: var(--text-secondary); border-radius: 1px; transition: background var(--transition-fast); } .navbar-hamburger:hover span { background: var(--text-primary); } /* Breadcrumb bar below navbar */ .breadcrumb-bar { background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); padding: 4px var(--space-4); display: flex; align-items: center; gap: var(--space-2); min-height: 0; } .breadcrumb-bar:empty, .breadcrumb-bar .breadcrumb:empty + * { display: none; } .breadcrumb-bar .breadcrumb { color: var(--text-muted); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breadcrumb-bar .breadcrumb a, .breadcrumb-link { color: var(--color-accent); text-decoration: none; } .breadcrumb-bar .breadcrumb a:hover, .breadcrumb-link:hover { text-decoration: none; } .breadcrumb-sep { color: var(--text-muted); padding: 0 var(--space-1); } .breadcrumb-current { color: var(--text-muted); font-size: var(--text-sm); } /* breadcrumb_data nav rendered by breadcrumbs.html */ .breadcrumb-data-nav { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0; font-size: var(--text-sm); color: var(--text-muted); } /* ------------------------------------------------------------------------- * Page header / navigation bar (legacy — kept for embed and non-base pages) * ------------------------------------------------------------------------- */ header { background: var(--bg-surface); border-bottom: 1px solid var(--border-default); padding: var(--space-3) var(--space-6); display: flex; align-items: center; gap: var(--space-4); position: sticky; top: 0; z-index: var(--z-raised); } header .logo { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); white-space: nowrap; } header .breadcrumb { color: var(--text-muted); font-size: var(--text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } header .breadcrumb a { color: var(--color-accent); } header .spacer { flex: 1; } header .header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* ------------------------------------------------------------------------- * Repo header card (shown on all repo-scoped pages) * ------------------------------------------------------------------------- */ .repo-header { background: var(--bg-surface); border-bottom: 1px solid var(--border-default); padding: 10px 0; } .repo-header-inner { padding: 0 var(--space-4); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; width: 100%; } .repo-header-identity { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-semibold); flex-shrink: 0; } .repo-header-owner { color: var(--color-accent); } .repo-header-sep { color: var(--text-muted); font-weight: var(--weight-normal); } .repo-header-name { color: var(--text-primary); } .repo-visibility-badge { font-size: var(--text-xs); border: 1px solid var(--border-default); background: transparent; color: var(--text-muted); border-radius: var(--radius-full); padding: 1px var(--space-2); } .repo-header-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; flex: 1; } .nav-meta-pill { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--bg-overlay); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); padding: 2px var(--space-2); border-radius: var(--radius-full); border: 1px solid var(--border-subtle); white-space: nowrap; svg { flex-shrink: 0; } } .nav-meta-tags { display: flex; gap: var(--space-1); flex-wrap: wrap; } .nav-meta-tag, .nav-tag-chip { background: var(--bg-overlay); color: var(--color-accent); font-size: var(--text-xs); padding: 2px var(--space-2); border-radius: var(--radius-full); border: 1px solid var(--border-subtle); } .repo-visibility-public { color: var(--color-success, #3fb950); border-color: var(--color-success, #3fb950); } .repo-visibility-private { color: var(--text-muted); } .repo-visibility-unlisted { color: var(--color-warning); border-color: var(--color-warning); } .repo-header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* ------------------------------------------------------------------------- * Repo tab strip (sticky below global header) * ------------------------------------------------------------------------- */ :root { --header-height: 42px; /* global header height — matches .musehub-navbar height */ --repo-tabs-height: 38px; /* repo tab strip height — sticky below global header */ --sticky-offset: calc(var(--header-height) + var(--repo-tabs-height)); /* total sticky chrome */ } .repo-tabs { background: var(--bg-surface); border-bottom: 1px solid var(--border-default); padding: 0; overflow-x: auto; scrollbar-width: none; position: sticky; top: var(--header-height); z-index: calc(var(--z-raised) - 1); /* Right-only fade for overflow scroll indicator; left is flush with content */ -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%); mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%); } /* Inner wrapper aligns tabs with the page container */ .repo-tabs-inner { display: flex; align-items: stretch; padding: 0 var(--space-4); width: 100%; } .repo-tabs::-webkit-scrollbar { display: none; } .repo-tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; transition: color var(--transition-fast), border-color var(--transition-fast); flex-shrink: 0; svg { opacity: 0.6; transition: opacity var(--transition-fast); } } .repo-tab:hover { color: var(--text-primary); text-decoration: none; background: var(--bg-hover); svg { opacity: 1; } } .repo-tab.active { color: var(--text-primary); border-bottom-color: var(--color-accent); svg { opacity: 1; } } .tab-count { background: var(--bg-overlay); color: var(--text-muted); border-radius: var(--radius-full); padding: 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-medium); min-width: 18px; text-align: center; } .repo-tab.active .tab-count { background: var(--color-accent); color: white; } /* ------------------------------------------------------------------------- * Page container * ------------------------------------------------------------------------- */ .container { max-width: 960px; margin: var(--space-6) auto; padding: 0 var(--space-6); } .container-wide { margin: var(--space-3) 0; padding: 0 var(--space-4); } .container-narrow { max-width: 720px; margin: var(--space-6) auto; padding: 0 var(--space-6); } /* ------------------------------------------------------------------------- * Shared full-bleed page layout (.ph-* = page hero/layout primitives) * * Used by MCP docs, Domain detail, and any future full-page layout. * Pages using this system add: * {% block container_extra_class %} page-container{% endblock %} * to strip the default container padding, then manage their own padding * internally so hero backgrounds can be truly full-bleed. * ------------------------------------------------------------------------- */ /* Strips container padding so child sections can be full-bleed. .container-wide.page-container wins over .container-wide by specificity. */ .container-wide.page-container, .page-container { padding: 0; margin-top: 0; } /* ── Hero ─────────────────────────────────────────────────────────────────── */ .ph-hero { position: relative; border-bottom: 1px solid var(--border-subtle); overflow: hidden; padding: 0 var(--space-4); } .ph-hero-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) 0 var(--space-4); @media (max-width: 768px) { flex-direction: column; } } .ph-hero-eyebrow { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; } .ph-hero-title { font-size: clamp(24px, 3.5vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--space-2); color: var(--text-primary); } .ph-hero-sub { font-size: 14px; line-height: 1.6; color: var(--text-secondary); max-width: 520px; margin-bottom: var(--space-3); } .ph-hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } /* ── Stats strip — flat separator bar ────────────────────────────────────── */ .ph-stats-strip { display: flex; background: transparent; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); overflow-x: auto; scrollbar-width: none; &::-webkit-scrollbar { display: none; } } .ph-stat { flex: 1; min-width: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 12px; gap: 2px; text-align: center; border-right: 1px solid var(--border-subtle); &:last-child { border-right: none; } } .ph-stat-value { font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1; font-family: var(--font-mono); } .ph-stat-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } // Color modifiers for ph-stat-value — used by insights page .ins-val--add { color: var(--color-success); } .ins-val--del { color: var(--color-danger); } .ins-val--agent { color: var(--color-purple); } /* ── Page body: sidebar + main content ───────────────────────────────────── */ .ph-body { display: grid; grid-template-columns: 240px 1fr; // narrow content left | wide sidebar right align-items: start; gap: 0; @media (max-width: 900px) { grid-template-columns: 1fr; } } /* ── Sidebar (right column) ───────────────────────────────────────────────── */ .ph-sidebar { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3); border-left: 1px solid var(--border-subtle); min-width: 0; @media (max-width: 900px) { display: none; } } .ph-sidebar-section { padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); &:last-child { border-bottom: none; } } .ph-sidebar-heading { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-2); } .ph-sidebar-link { display: flex; align-items: center; gap: 6px; padding: 3px var(--space-2); border-radius: 3px; font-size: 12px; color: var(--text-secondary); text-decoration: none; transition: color 0.1s, background 0.1s; &:hover { color: var(--text-primary); background: var(--bg-hover); text-decoration: none; } &.is-active { color: var(--color-accent); } } /* ── Main content area ────────────────────────────────────────────────────── */ .ph-content { padding: 0 var(--space-4); min-width: 0; } /* ── Section: divider-based, no card box ─────────────────────────────────── */ .ph-section { padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); &:last-child { border-bottom: none; } } .ph-section-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-2); display: flex; align-items: center; gap: var(--space-2); } .ph-section-desc { font-size: 13px; color: var(--text-muted); margin: 0 0 var(--space-3); line-height: 1.55; } /* ── Count badge (section title inline pill) ─────────────────────────────── */ .ph-count { font-size: 11px; font-weight: 600; font-family: var(--font-mono); padding: 1px 6px; border-radius: var(--radius-full); background: var(--bg-overlay); color: var(--text-muted); border: 1px solid var(--border-subtle); } /* ------------------------------------------------------------------------- * Two-column sidebar layout * Sidebar: fixed-width left column (e.g. repo metadata, file tree) * Main: flexible right column * ------------------------------------------------------------------------- */ .layout-sidebar { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-6); align-items: start; } .layout-sidebar-right { display: grid; grid-template-columns: 1fr 240px; gap: var(--space-6); align-items: start; } /* ------------------------------------------------------------------------- * Section divider * ------------------------------------------------------------------------- */ .section-title { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-accent); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle); } /* ------------------------------------------------------------------------- * Flex utilities * ------------------------------------------------------------------------- */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; } .flex-shrink-0 { flex-shrink: 0; } /* ------------------------------------------------------------------------- * Spacing utilities * ------------------------------------------------------------------------- */ .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } /* ------------------------------------------------------------------------- * Text utilities * ------------------------------------------------------------------------- */ .text-muted { color: var(--text-muted); } .text-primary { color: var(--text-primary); } .text-accent { color: var(--color-accent); } .text-danger { color: var(--color-danger); } .text-success { color: var(--color-success); } .text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); } .text-mono { font-family: var(--font-mono); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------------------- * Repo landing page — two-column layout (GitHub-style) * Main content (~68%) + sidebar (~30%), collapses to single column on mobile. * ------------------------------------------------------------------------- */ .repo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: var(--space-6); align-items: start; margin-top: var(--space-6); } .repo-main { min-width: 0; } .repo-sidebar { min-width: 0; } @media (max-width: 1023px) { .repo-layout { grid-template-columns: 1fr; } /* On mobile, sidebar collapses above main (like GitHub mobile) */ .repo-sidebar { order: -1; } } /* Latest commit banner — sits flush above the commit card */ .latest-commit-banner { background: var(--bg-overlay); border: 1px solid var(--border-default); border-radius: var(--radius-base) var(--radius-base) 0 0; border-bottom: none; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); } /* Small inline avatar (author initials) in commit rows and banner */ .commit-avatar { width: 20px; height: 20px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: var(--weight-bold); color: #fff; flex-shrink: 0; vertical-align: middle; } /* ── Sidebar ── */ /* Star / Watch / Fork action strip */ .repo-action-strip { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); } .repo-action-btn { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 5px var(--space-3); font-size: var(--text-sm); border: 1px solid var(--border-default); border-radius: var(--radius-base); background: var(--bg-overlay); color: var(--text-secondary); cursor: pointer; text-decoration: none; flex: 1; line-height: 1.4; transition: background var(--transition-fast), color var(--transition-fast); } .repo-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; } .repo-action-btn.active { background: var(--color-accent-muted); border-color: var(--color-accent); color: var(--text-primary); } .repo-action-count { font-weight: var(--weight-semibold); color: var(--text-primary); font-size: var(--text-xs); } /* Sidebar sections — each separated by a subtle rule */ .sidebar-section { padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); } .sidebar-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .sidebar-section h3 { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); } /* About section prose */ .about-description { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-3); } .about-stat-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); padding: 3px 0; } .about-stat-row strong { color: var(--text-primary); font-weight: var(--weight-semibold); } /* Contributor avatar grid */ .contributor-grid { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); } .contributor-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--bg-overlay); border: 2px solid var(--border-default); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--weight-bold); color: #fff; text-decoration: none; cursor: pointer; transition: border-color var(--transition-fast), transform var(--transition-fast); position: relative; flex-shrink: 0; } .contributor-avatar:hover { border-color: var(--color-accent); transform: scale(1.15); text-decoration: none; z-index: 1; } /* Instrument / track breakdown bar (like GitHub's language bar) */ .instrument-bar { height: 8px; border-radius: var(--radius-full); overflow: hidden; display: flex; gap: 2px; margin-bottom: var(--space-3); } .instrument-segment { height: 100%; transition: opacity var(--transition-fast); } .instrument-segment:hover { opacity: 0.7; } .instrument-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); } .instrument-legend-item { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-secondary); } .instrument-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* ------------------------------------------------------------------------- * Responsive breakpoints — mobile-first overrides * ------------------------------------------------------------------------- */ /* xs — phones < 480px */ @media (max-width: 479px) { header { padding: var(--space-2) var(--space-3); gap: var(--space-2); } header .breadcrumb { display: none; } /* Mobile navbar: hamburger visible, search and actions collapse */ .navbar-hamburger { display: flex; } .navbar-search-form { display: none; max-width: 100%; } .navbar-actions { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-surface); border-bottom: 1px solid var(--border-default); flex-direction: column; align-items: flex-start; padding: var(--space-3) var(--space-4); gap: var(--space-2); z-index: calc(var(--z-raised) + 1); } /* Show when hamburger checkbox is checked */ .navbar-toggle-input:checked ~ * .navbar-search-form, .navbar-toggle-input:checked + .navbar-inner .navbar-search-form { display: flex; } .navbar-toggle-input:checked ~ .navbar-inner .navbar-actions { display: flex; } .musehub-navbar { position: relative; } .container, .container-wide, .container-narrow { padding: 0 var(--space-3); margin-top: var(--space-4); } .layout-sidebar, .layout-sidebar-right { grid-template-columns: 1fr; } .grid-2, .grid-3 { grid-template-columns: 1fr; } h1 { font-size: var(--text-md); } h2 { font-size: var(--text-base); } } /* sm — large phones 480-767px */ @media (min-width: 480px) and (max-width: 767px) { header { padding: var(--space-2) var(--space-4); } .container, .container-wide, .container-narrow { padding: 0 var(--space-4); } .layout-sidebar, .layout-sidebar-right { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr 1fr; } } /* md — tablets 768-1023px */ @media (min-width: 768px) and (max-width: 1023px) { .container { max-width: 100%; padding: 0 var(--space-6); } .layout-sidebar { grid-template-columns: 200px 1fr; } .layout-sidebar-right { grid-template-columns: 1fr 200px; } } /* lg — laptops 1024px+ */ @media (min-width: 1024px) { /* Full layout — no overrides needed; base styles apply */ } /* xl — desktops 1280px+ */ @media (min-width: 1280px) { /* No overrides needed — content is full-width at all viewport sizes */ } /* ------------------------------------------------------------------------- * Print styles (minimal — MuseHub is primarily a screen UI) * ------------------------------------------------------------------------- */ @media print { header { display: none; } .btn { display: none; } .token-form { display: none; } pre { white-space: pre-wrap; border: 1px solid var(--border-default); } } /* ========================================================================= * Muse protocol design language utilities * ========================================================================= */ /* ------------------------------------------------------------------------- * Section eyebrow * Monospace uppercase label placed above section headings, identical in * style to the section labels used on cgcardona.github.io/muse/. * Usage:

Protocol

…

* ------------------------------------------------------------------------- */ .eyebrow { font-family: var(--font-mono); font-size: 11px; color: var(--color-accent); letter-spacing: 2px; text-transform: uppercase; margin-bottom: var(--space-2); font-weight: var(--weight-medium); } /* ------------------------------------------------------------------------- * Page sections — full-bleed horizontal bands with border separator, * mirroring the section rhythm on the Muse protocol site. * .page-section — default (--bg-base background) * .page-section-alt — elevated surface (--bg-surface background) * .page-section-hero — gradient glow overlay for landing/hero areas * ------------------------------------------------------------------------- */ .page-section { padding: var(--space-12) var(--space-6); border-top: 1px solid var(--border-subtle); } .page-section-alt { background: var(--bg-surface); } .page-section-hero { background: var(--gradient-hero), linear-gradient(160deg, var(--bg-base) 0%, var(--bg-surface) 50%, var(--bg-base) 100%); border-bottom: 1px solid var(--border-default); } /* Section lead text — descriptive subtitle beneath a section heading */ .section-lead { font-size: var(--text-md); color: var(--text-muted); max-width: 620px; margin-bottom: var(--space-10); line-height: 1.7; strong { color: var(--text-primary); } } /* ------------------------------------------------------------------------- * Accent text — solid brand blue for headings and wordmarks. * ------------------------------------------------------------------------- */ .gradient-text { color: var(--color-accent); } /* ------------------------------------------------------------------------- * Radial glow overlay — decorative background for hero / banner cards. * Apply to a position:relative container; the pseudo-element renders the * radial gradients as a non-interactive overlay. * ------------------------------------------------------------------------- */ .glow-overlay { position: relative; overflow: hidden; &::before { content: ''; position: absolute; inset: 0; background: var(--gradient-hero); pointer-events: none; z-index: 0; } > * { position: relative; z-index: 1; } } /* ------------------------------------------------------------------------- * Site footer * ------------------------------------------------------------------------- */ .site-footer { margin-top: var(--space-12); border-top: 1px solid var(--border-subtle); background: var(--bg-base); &__inner { display: flex; align-items: center; gap: var(--space-6); max-width: 1280px; margin: 0 auto; padding: var(--space-4) var(--space-6); flex-wrap: wrap; } &__brand { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); letter-spacing: 0.02em; } &__copy { font-size: var(--text-xs); color: var(--text-muted); flex: 1; } &__legal { display: flex; gap: var(--space-4); a { font-size: var(--text-xs); color: var(--text-muted); text-decoration: none; transition: color 0.15s ease; &:hover { color: var(--color-accent-link); } } } }