/* Glixo shared shell — one flat, near-black visual system for glixo.io, the dev/marketplace portal, and docs. Canonical source: glixo-portals/shared-brand/shell.css → synced into io/assets/brand/shell.css and dev/src/brand/shell.css Principles: flat (no decorative borders), near-black, minimal radius (0.5rem), restrained cohesive smoke, editorial type. */ :root { /* ground + ink */ --bg: #020307; --bg-2: #04050b; --text: #f6f7f9; --muted: #9a9ca6; --faint: #6c6e78; /* flat surfaces (elevation by fill, not borders) */ --surface: rgba(255, 255, 255, 0.035); --surface-2: rgba(255, 255, 255, 0.065); --surface-solid: #101014; /* borders exist only where structurally unavoidable (tables, code) — kept nearly invisible */ --hairline: rgba(255, 255, 255, 0.08); /* smoke — three adjacent hues only (indigo → violet → pink), used as restrained atmosphere */ --s1: #5b6cff; --s2: #a855f7; --s3: #ec4899; /* a single link/emphasis accent pulled from the smoke */ --accent: #8ea2ff; /* geometry */ --radius: .5rem; /* 8px — the maximum */ --radius-lg: .75rem; /* 12px — large media panels only */ --maxw: 1120px; --nav-h: 62px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "Cascadia Code", Consolas, monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; } a { color: inherit; text-decoration: none; } .glixo-site, .portalRoot { min-height: 100vh; display: flex; flex-direction: column; position: relative; } /* ---- Typography ---- */ h1, h2, h3, h4 { margin: 0; line-height: 1.05; letter-spacing: -.03em; font-weight: 600; color: var(--text); } p { margin: 0; color: var(--muted); } code { font-family: var(--mono); font-size: .92em; color: #cbd0dd; } .eyebrow { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); } /* ---- Ambient smoke (restrained; sits behind the nav so a transparent nav visibly floats; never a box behind media). Place a

as the first element in (before the nav) so it spans behind both. ---- */ .smoke, .bg-glow, .glixo-bg-glow { position: absolute; top: 0; left: 0; right: 0; height: 820px; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 42rem 27rem at 50% 300px, rgba(75, 91, 222, .20), transparent 68%), radial-gradient(ellipse 30rem 22rem at 58% 280px, rgba(215, 60, 192, .09), transparent 72%), repeating-linear-gradient(45deg, rgba(74, 139, 255, .017) 0 1px, transparent 1px 96px), repeating-linear-gradient(-45deg, rgba(190, 64, 213, .014) 0 1px, transparent 1px 96px); } /* ---- Buttons (flat, min radius, no border) ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: inherit; font-size: 14px; font-weight: 600; padding: 12px 20px; border-radius: var(--radius); border: 0; cursor: pointer; color: inherit; white-space: nowrap; transition: opacity .15s ease, background .15s ease, transform .15s ease; } .btn-primary { background: var(--text); color: #0a0a0d; } .btn-primary:hover { opacity: .9; } .btn-secondary, .btn-ghost { background: var(--surface-2); color: var(--text); } .btn-secondary:hover, .btn-ghost:hover { background: rgba(255,255,255,.1); } .btn-sm { padding: 9px 14px; font-size: 13px; } /* ---- Top navigation: transparent, gains a frosted bar on scroll (no border) ---- */ .glixo-nav, .nav { position: sticky; top: 0; z-index: 50; flex-shrink: 0; background: transparent; backdrop-filter: none; transition: background .22s ease, backdrop-filter .22s ease; } .glixo-nav.is-scrolled, .nav.is-scrolled, .glixo-nav.scrolled, .nav.scrolled { background: rgba(8, 8, 11, .72); backdrop-filter: blur(16px) saturate(130%); } .glixo-nav-inner, .nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; height: var(--nav-h); display: flex; align-items: center; gap: 22px; } .glixo-brand, a.glixo-brand, .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); flex-shrink: 0; font-weight: 650; font-size: 16px; letter-spacing: -.02em; } .glixo-brand-mark, .brand-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; } .glixo-brand-mark img, .brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; } .brand-name, .glixo-brand-text strong { font-weight: 650; font-size: 16px; letter-spacing: -.02em; color: var(--text); } .glixo-nav-links, .nav-links { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; } .glixo-nav-links a, .nav-links a { color: var(--muted); font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: var(--radius); transition: color .15s, background .15s; } .glixo-nav-links a:hover, .nav-links a:hover, .glixo-nav-links a.is-active, .nav-links a.is-active, .glixo-nav-links a.active, .nav-links a.active { color: var(--text); background: var(--surface); } .nav-divider { width: 1px; height: 20px; background: var(--hairline); flex-shrink: 0; } .nav-side, .glixo-nav .side, .nav .side { color: var(--muted); font-size: 14px; font-weight: 500; padding: 8px 6px; } .nav-side:hover { color: var(--text); } /* Portal nav cluster (React SPA marketplace/dev-portal + generated docs) */ .glixo-brand-text { display: inline-flex; flex-direction: column; line-height: 1.12; } .glixo-brand-text small, .brand-sub { color: var(--faint); font-size: 11px; font-weight: 500; } .portalNavCluster { min-width: 0; margin-left: auto; display: flex; align-items: center; gap: 18px; } .portalNavCluster .glixo-nav-links, .portalNavCluster .nav-links { margin-left: 0; } .nav-links-pages a { font-size: 13px; } .glixo-nav-actions, .nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .portalNavToggle { display: none; } @media (max-width: 860px) { .portalNavToggle { display: inline-grid; place-content: center; gap: 5px; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); cursor: pointer; } .portalNavToggle span { width: 20px; height: 1.5px; background: currentColor; transition: transform 160ms ease; display: block; } .is-nav-open .portalNavToggle span:first-child { transform: translateY(3.25px) rotate(45deg); } .is-nav-open .portalNavToggle span:last-child { transform: translateY(-3.25px) rotate(-45deg); } .portalNavCluster { position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; display: none; flex-direction: column; align-items: stretch; padding: 10px; border-radius: 14px; background: rgba(9, 10, 13, .97); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); } .is-nav-open .portalNavCluster { display: flex; } .portalNavCluster .glixo-nav-links, .portalNavCluster .nav-links { display: grid; width: 100%; } .portalNavCluster .nav-divider { width: 100%; height: 1px; margin: 4px 0; } .portalNavCluster .glixo-nav-actions, .portalNavCluster .nav-actions { width: 100%; } } /* ---- Sidebar page layout (docs) ---- */ .glixo-frame, .page-frame { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 40px 24px 48px; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 56px; align-items: start; } .glixo-sidebar, .page-sidebar { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; } .glixo-sidebar-label, .page-sidebar-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 0 10px 10px; } .glixo-sidebar-nav, .page-sidebar-nav, .glixo-sidebar nav, .page-sidebar nav { display: flex; flex-direction: column; gap: 2px; } .glixo-sidebar a, .page-sidebar a, .glixo-sidebar-nav a, .page-sidebar-nav a { display: block; color: var(--muted); font-size: 13.5px; font-weight: 500; padding: 7px 10px; border-radius: var(--radius); } .glixo-sidebar a:hover, .page-sidebar a:hover, .glixo-sidebar a.is-active, .page-sidebar a.is-active, .glixo-sidebar a.active, .page-sidebar a.active { color: var(--text); background: var(--surface); } .glixo-main, .page-main { min-width: 0; } /* ---- Cards (flat, borderless) ---- */ .glixo-card, .glass-card { background: var(--surface); border-radius: var(--radius); padding: 22px; border: 0; transition: background .15s ease; } .glixo-card:hover, .glass-card:hover { background: var(--surface-2); } /* ---- Footer (no top border; a hairline of space) ---- */ .glixo-footer, .footer { flex-shrink: 0; width: 100%; max-width: var(--maxw); margin: 40px auto 0; padding: 24px 24px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; color: var(--faint); font-size: 13px; } .glixo-footer-links, .footer-links { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; } .glixo-footer-links a, .footer-links a { color: var(--muted); font-size: 14px; } .glixo-footer-links a:hover, .footer-links a:hover { color: var(--text); } .copy { color: var(--faint); font-size: 13px; width: 100%; margin: 0; } .footer-version { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; } /* ---- Docs prose ---- */ .prose h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 550; letter-spacing: -.04em; line-height: 1.02; margin-bottom: 18px; } .prose h2 { font-size: 1.3rem; font-weight: 580; letter-spacing: -.02em; margin: 36px 0 10px; } .prose h3 { font-size: 1.05rem; font-weight: 600; margin: 26px 0 8px; } .prose p, .prose li { max-width: 70ch; margin-bottom: 12px; font-size: 16px; line-height: 1.7; color: var(--muted); } .prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 16px; } .prose a { color: var(--accent); } .prose code { padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.05); } .prose pre { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; padding: 16px; border-radius: var(--radius); background: #090a0d; overflow: auto; margin: 0 0 18px; } .prose table { width: 100%; max-width: 70ch; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; } .prose th, .prose td { border: 1px solid var(--hairline); padding: 10px 12px; text-align: left; vertical-align: top; } .prose th { background: var(--surface); color: var(--text); font-weight: 600; } .prose td code { font-size: 12px; } @media (max-width: 820px) { .glixo-frame, .page-frame { grid-template-columns: 1fr; padding: 36px 16px 72px; gap: 32px; } .glixo-sidebar, .page-sidebar { position: static; } .glixo-sidebar-nav, .page-sidebar-nav, .glixo-sidebar nav, .page-sidebar nav { flex-direction: row; flex-wrap: wrap; } .glixo-nav-links, .nav-links { display: none; } }