/* ========================================================================== Quantaiko shared site styles Pages opt into layout/accent variants via classes on : home — landing page (huge centered title) product — product page (left-aligned 44rem text column) vcenter — vertically centre the content docs — documentation hub spacing library-agent — green title gradient (emerald -> green) prediction-agent — green title gradient (teal -> emerald) numpypandas — pink/red accents and title gradient ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ========================================================================== COLOR PALETTES — the single place where each page's colors are defined. --title-grad : the big

gradient --accent : links, card hover border, "Discover ->", back link --accent-hover-bg : card hover background tint ========================================================================== / / defaults (home page): brand title cyan->violet; agents family = green / body { --accent: #34d399; --accent-hover-bg: rgba(52, 211, 153, 0.08); --title-grad: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc); } / Library Agent: emerald -> green / body.library-agent { --title-grad: linear-gradient(90deg, #34d399, #4ade80); } / Prediction Agent: teal -> emerald / body.prediction-agent { --title-grad: linear-gradient(90deg, #2dd4bf, #34d399); } / NumpyPandas (page AND its homepage card): pink -> red / body.numpypandas, .card.numpypandas { --accent: #f472b6; --accent-hover-bg: rgba(244, 114, 182, 0.08); --title-grad: linear-gradient(90deg, #f472b6, #fb7185, #ef4444); } / ========================================================================== Layout & components (no per-page colors below this line) ========================================================================== / body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; background: linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #0f172a 100%); color: #e2e8f0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 2rem; } / ---- layout variants ---- / body.vcenter { justify-content: center; } body.docs { padding: 4rem 2rem; } / ---- title ---- / h1 { font-weight: 800; letter-spacing: -0.02em; background: var(--title-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } body.home h1 { font-size: clamp(3rem, 12vw, 7rem); text-align: center; } body.product h1 { width: 100%; max-width: 44rem; font-size: clamp(2rem, 7vw, 3.5rem); } .tagline { margin-top: 0.75rem; font-size: clamp(1rem, 3vw, 1.25rem); color: #94a3b8; text-align: center; } / ---- text column ---- / p.description { margin-top: 1.25rem; width: 100%; max-width: 44rem; font-size: 1.05rem; line-height: 1.7; color: #cbd5e1; } p.description strong { color: #f1f5f9; } p.description code { font-family: Consolas, Monaco, monospace; font-size: 0.95em; color: #7dd3fc; } p.description a { color: var(--accent); text-decoration: none; } p.description a:hover { text-decoration: underline; } p.status { margin-top: 1.5rem; width: 100%; max-width: 44rem; font-size: 1.2rem; color: #94a3b8; } .section-title { margin-top: 3rem; width: 100%; max-width: 44rem; font-size: 1.5rem; font-weight: 700; color: #f1f5f9; } / ---- card grids ---- / .products, .packages { gap: 1.5rem; width: 100%; max-width: 56rem; } .products { margin-top: 3.5rem; display: flex; flex-wrap: wrap; justify-content: center; } .packages { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 40rem) { .packages { grid-template-columns: 1fr; } } .card { flex: 1 1 16rem; max-width: 24rem; display: block; text-decoration: none; color: inherit; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 1rem; padding: 2rem; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .packages .card { padding: 1.75rem; } .card:hover { transform: translateY(-4px); border-color: var(--accent); background: var(--accent-hover-bg); } .card h2, .card h3 { font-size: 1.3rem; font-weight: 600; color: #f1f5f9; } .packages .card h3 { font-size: 1.15rem; } .card p { margin-top: 0.6rem; font-size: 0.95rem; color: #94a3b8; line-height: 1.5; } .packages .card p { font-size: 0.92rem; } .card code { font-family: Consolas, Monaco, monospace; font-size: 0.9em; color: #7dd3fc; } .card .go { display: inline-block; margin-top: 1.2rem; font-size: 0.9rem; color: var(--accent); } / ---- chrome ---- */ a.home { position: absolute; top: 1.5rem; left: 1.5rem; color: var(--accent); text-decoration: none; font-size: 0.95rem; } a.home:hover { text-decoration: underline; } footer { margin-top: 4rem; font-size: 0.85rem; color: #64748b; text-align: center; } body.docs footer { margin-top: 3rem; }