/* ============================================================ contentOS STOREFRONTS — SHARED STYLESHEET Source spec: contentOS_store_content_2026-08-07.md Brand rules (studio0x canonical): · Riptide = hairline borders + text ONLY. Never a fill. · Rosa 200 = accent fills, highlights. · Noir 900 = base background. · No hardcoded hex outside the token blocks below. Per-storefront industry colour is set via [data-store] on . ============================================================ */ :root { /* ── contentOS base tokens ── */ --color-bg: #0F0C0E; /* Noir 900 — base */ --color-surface: #1D191C; /* Noir 800 — cards, nav */ --color-border: #312C2F; /* Noir 700 — hairlines */ --color-accent: #F8BDD8; /* Rosa 200 — THE accent (fills allowed) */ --color-data: #5DCBD1; /* Riptide — text + hairline ONLY, never a fill */ --color-text: #F5F0F3; /* Off-white */ --color-text-muted: #A09099; /* Muted */ /* ── Type ── */ --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Instrument Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --text-hero: clamp(2.25rem, 5vw, 4rem); --text-h2: clamp(1.6rem, 3vw, 2.5rem); --text-h3: clamp(1.2rem, 2vw, 1.75rem); --text-body: clamp(1rem, 1.5vw, 1.0625rem); --text-label: 0.75rem; --radius: 12px; --radius-pill: 999px; --maxw: 1120px; } /* ── Per-storefront industry tokens ── */ [data-store="agentEdge"] { --color-industry: #F59E0B; /* Gold / Amber */ --color-industry-10: #F59E0B1A; --color-industry-20: #F59E0B33; --color-industry-hover: #D97706; } [data-store="eComEdge"] { --color-industry: #EF4444; /* Coral / Red */ --color-industry-10: #EF44441A; --color-industry-20: #EF444433; --color-industry-hover: #DC2626; } [data-store="bookedBNB"] { --color-industry: #F9A8D4; /* Rosa — brighter */ --color-industry-10: #F9A8D41A; --color-industry-20: #F9A8D433; --color-industry-hover: #F472B6; } [data-store="coachKit"] { --color-industry: #A78BFA; /* Lavender */ --color-industry-10: #A78BFA1A; --color-industry-20: #A78BFA33; --color-industry-hover: #7C3AED; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; min-height: 100dvh; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ::selection { background: var(--color-accent); color: var(--color-bg); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; } /* ── Skip link (a11y) ── */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-accent); color: var(--color-bg); padding: 10px 16px; border-radius: var(--radius); font-family: var(--font-mono); font-size: var(--text-label); z-index: 200; } .skip-link:focus { left: 12px; top: 12px; } /* ── Nav ── */ .site-nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--color-border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding-block: 12px; flex-wrap: wrap; } .nav-brand { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: slashed-zero; } .nav-brand .mark span { color: var(--color-accent); } .nav-brand .divider { color: var(--color-border); } .nav-brand .unit { color: var(--color-text-muted); font-size: var(--text-label); text-transform: lowercase; letter-spacing: 0.06em; } .nav-back { font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 7px 14px; transition: color .18s ease, border-color .18s ease; white-space: nowrap; } .nav-back:hover { color: var(--color-text); border-color: var(--color-industry); } /* ── Storefront switcher ── */ .switcher { border-bottom: 1px solid var(--color-border); background: var(--color-surface); } .switcher-inner { display: flex; gap: 8px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; } .switcher-inner::-webkit-scrollbar { display: none; } .switcher a { font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-text-muted); padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap; transition: color .18s ease, border-color .18s ease, background .18s ease; } .switcher a:hover { color: var(--color-text); } .switcher a[aria-current="page"] { color: var(--color-industry); background: var(--color-industry-10); border-color: var(--color-industry-20); } /* ── Hero ── */ .hero { padding-block: 64px 48px; } .eyebrow { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-industry); margin-bottom: 18px; } .hero h1 { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 20px; max-width: 16ch; } .hero-sub { font-size: var(--text-body); color: var(--color-text-muted); max-width: 54ch; margin-bottom: 32px; } .value-prop { border-left: 2px solid var(--color-industry); padding: 4px 0 4px 20px; max-width: 62ch; color: var(--color-text); font-size: var(--text-body); line-height: 1.75; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; padding: 12px 22px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--color-industry); color: var(--color-bg); font-weight: 600; } .btn-primary:hover { background: var(--color-industry-hover); } .btn-ghost { border-color: var(--color-border); color: var(--color-text); } .btn-ghost:hover { border-color: var(--color-industry); color: var(--color-industry); } /* ── Section shell ── */ .section { padding-block: 56px; } .section-head { margin-bottom: 36px; } .section-head h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .section-head p { color: var(--color-text-muted); margin-top: 12px; max-width: 58ch; } /* ── Product cards ── */ .product-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } .product-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; transition: border-color .2s ease, transform .2s ease; } .product-card:hover { border-color: var(--color-industry-20); transform: translateY(-2px); } .store-tag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-industry); background: var(--color-industry-10); border: 1px solid var(--color-industry-20); border-radius: var(--radius-pill); padding: 5px 11px; margin-bottom: 16px; } .product-title { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 6px; } .tagline { font-style: italic; color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: 16px; } .description { font-size: 0.9375rem; line-height: 1.75; color: var(--color-text-muted); margin-bottom: 24px; } .card-footer { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* Riptide as TEXT only — never a background fill. */ .price { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; color: var(--color-data); letter-spacing: 0.02em; } .price .price-key { display: block; font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 2px; } /* ── Closing CTA ── */ .closer { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); padding: 40px 28px; text-align: center; } .closer h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px; } .closer p { color: var(--color-text-muted); max-width: 52ch; margin: 0 auto 26px; } .closer-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ── Footer ── */ .site-footer { border-top: 1px solid var(--color-border); margin-top: 64px; padding-block: 32px 44px; } .footer-inner { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-text-muted); } .footer-inner a:hover { color: var(--color-accent); } .footer-links { display: flex; gap: 18px; flex-wrap: wrap; } /* ── Responsive ── */ @media (min-width: 720px) { .container { padding-inline: 32px; } .hero { padding-block: 88px 64px; } .product-grid { grid-template-columns: repeat(2, 1fr); } .closer { padding: 56px 40px; } } @media (min-width: 1040px) { .product-grid { grid-template-columns: repeat(3, 1fr); } .hero { padding-block: 104px 72px; } .section { padding-block: 72px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }