/* * ── `nava`: the media store's storefront, as a template ─────────────────── * * `apps/media-store` is the one app on this installation that kept its own * design system — its own palette, its own radii, its own ambient chrome — * and this is that look, declared as a template a site can wear (root * specs/themes). A site picks it in the panel and wears it; nothing about the * media store itself changes. * * The components that write these classes are next door in `../src`, shared by * every app that offers this template. The two that do map their own rows into * the package's view models, so one card serves a native `ProductSummary` and a * WooCommerce product alike — which is why this stylesheet has no idea which * app is including it. * * Its own file rather than a block in `@/storefront/styles/storefront.css`, * for the reason cms's stylesheet gives about `@/blog`: `apps/resume` * and `apps/period` import that sheet and render none of this, and three * hundred lines of a scope nobody declares is three hundred lines shipped for * nothing. An app that offers `nava` imports this beside it, with an `@source` * glob at `packages/nava/frontend/src` so Tailwind sees the utilities those components * write — content detection skips `node_modules`, where the workspace link * lives (`scripts/check-css-sources.mjs`). * * The values below are `apps/media-store/frontend/app/globals.css`'s, with * three deliberate differences: * * - the section hues (`--bs-section-*`, one per content type) are gone. Four * fixed hues are a fact about that catalogue — audiobook blue, ebook green * — and a site's sections are whatever its own taxonomy says. The `nava` * components tint a category door from a rotating palette instead. * - `--chrome-ink` and `--brand-accent` are resolved rather than dropped: they * are the shared stylesheet's names for surfaces the media store paints with * literals. * - the radii are restated under `--radius-step-*`. `@theme inline` has * already inlined `--radius` into every `rounded-*` rule, so a scope that * set `--radius` would set four variables that do nothing. * * A site's own branding still wins over all of it: `RootLayout` writes * `--primary`/`--secondary` onto `` as an inline style, and no class rule * outranks that. The `#4060e8` below is what a site that has chosen no colour * gets. */ .theme-nava { --background: #f8fafc; --foreground: #0f172b; --card: #ffffff; --card-foreground: #0f172b; --popover: #ffffff; --popover-foreground: #0f172b; --primary: #4060e8; --primary-foreground: #ffffff; --secondary: #f1f5f9; --secondary-foreground: #0f172b; --muted: #f1f5f9; --muted-foreground: #62748e; --accent: #eef1fe; --accent-foreground: #2d49d0; --destructive: #e7000b; --destructive-foreground: #ffffff; --border: #e2e8f0; --input: #e2e8f0; --ring: #5b7cf1; --primary-50: #eef1fe; --primary-100: #d5dcfb; --primary-200: #adb9f7; --primary-300: #8496f3; --primary-400: #6e82f2; --primary-500: #5b7cf1; --primary-600: #4060e8; --primary-700: #2d49d0; --primary-800: #1c308f; --primary-900: #0e1c5a; --primary-950: #070e30; /* The green half of the headline gradient, which is where the media store puts its second colour. The footer band takes the deep navy that app's dark surface is, rather than the near-black default. */ --brand-accent: #00dc82; --brand-accent-foreground: #052e16; --chrome-ink: #0a1026; --chrome-ink-foreground: #cad5e2; --surface-page: #f8fafc; --surface-alt: #eff2f9; --surface-input: #f1f5f9; --surface-panel: #f2f4f9; --ink-secondary: #314158; /* `--radius: 0.75rem` and the ±4px/±2px steps shadcn derives from it, in the storefront's variable names. */ --radius-step-sm: 8px; --radius-step-md: 10px; --radius-step-lg: 12px; --radius-step-xl: 16px; /* The template's own primitives — the header's translucent surface, the card tint behind a cover, and the three shadows the hero is built from. Prefixed `--nava-` rather than the media store's `--bs-`: that prefix is that app's design system, and half of what it names has no counterpart here. */ --nava-header: rgba(255, 255, 255, 0.85); --nava-cover-tint: #eff2f9; --nava-shadow-header: 0 0 48px rgba(153, 153, 153, 0.3); --nava-shadow-cover: 0 24px 48px rgba(15, 23, 43, 0.18); --nava-shadow-chip: 0 18px 40px rgba(15, 23, 43, 0.16); } /* Dark, in the same two halves the default palette above is split into — the OS for a visitor with no JavaScript, the class for a visitor who chose. The scope sits on `` (the account panel is outside the storefront group and must wear the site's template too), which is the same element next-themes writes `.dark` onto, so `:root.dark.theme-nava` is one element rather than a descendant selector. */ @media (prefers-color-scheme: dark) { :root:not(.light).theme-nava, :root:not(.light) .theme-nava { --background: #0a1026; --foreground: #ffffff; --card: #111827; --card-foreground: #ffffff; --popover: #111827; --popover-foreground: #ffffff; --primary: #5b7cf1; --primary-foreground: #ffffff; --secondary: #1d293d; --secondary-foreground: #ffffff; --muted: #1d293d; --muted-foreground: #90a1b9; --accent: #1c308f; --accent-foreground: #d5dcfb; --destructive: #ff6467; --destructive-foreground: #0a1026; --border: rgba(255, 255, 255, 0.08); --input: rgba(255, 255, 255, 0.12); --ring: #5b7cf1; --surface-page: #0a1026; --surface-alt: #1d293d; --surface-input: #314158; --surface-panel: #111827; --ink-secondary: #cad5e2; --nava-header: rgba(10, 16, 38, 0.85); --nava-cover-tint: #1d293d; --nava-shadow-header: 0 0 48px rgba(0, 0, 0, 0.5); } } /* Same palette as the media query above — change both. */ :root.dark.theme-nava, .dark .theme-nava { --background: #0a1026; --foreground: #ffffff; --card: #111827; --card-foreground: #ffffff; --popover: #111827; --popover-foreground: #ffffff; --primary: #5b7cf1; --primary-foreground: #ffffff; --secondary: #1d293d; --secondary-foreground: #ffffff; --muted: #1d293d; --muted-foreground: #90a1b9; --accent: #1c308f; --accent-foreground: #d5dcfb; --destructive: #ff6467; --destructive-foreground: #0a1026; --border: rgba(255, 255, 255, 0.08); --input: rgba(255, 255, 255, 0.12); --ring: #5b7cf1; --surface-page: #0a1026; --surface-alt: #1d293d; --surface-input: #314158; --surface-panel: #111827; --ink-secondary: #cad5e2; --nava-header: rgba(10, 16, 38, 0.85); --nava-cover-tint: #1d293d; --nava-shadow-header: 0 0 48px rgba(0, 0, 0, 0.5); } /* * The template's helper classes. * * Not scoped under `.theme-nava` even though only its components write them: * every one of them resolves a token the scope declares, so a stray use * outside it renders in the default palette rather than breaking, and the * `nava-` prefix is what keeps them from colliding. Scoping the selectors as * well would double the specificity of rules that are already only reachable * from one folder. */ .nava-container { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; } @media (min-width: 640px) { .nava-container { padding-inline: 1.5rem; } } /* One row inside a category door: a hairline hover that tints from the door's own hue rather than the page's accent. */ .nava-door-row:hover { background: color-mix(in oklab, var(--door, var(--primary)) 9%, transparent); } /* ── The page-builder blocks this template used to own ────────────────────── * * `nava`'s front door was a gradient hero, four category doors and a pair of * rails, and all four were THIS package's components on a page only this * template could draw. They are app blocks now (ADR-0026 step 2): one markup, * placeable on any page, drawn by any template. * * What is left here is the only part that was ever this template's — the look. * The structure below is `src/content`'s `sb-showcase-*`, restyled inside this * scope into the gradient and the glow. A site on `default` places the same * block and gets the platform's green; a site on `nava` gets what it had. * * That is the whole argument of the ADR in ten selectors: a template that owns * a page costs a page per template, and a template that owns a palette costs a * palette. */ .theme-nava .sb-showcase-hero { background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 22%, transparent), transparent 65%), var(--card); border-color: color-mix(in oklab, var(--primary) 28%, var(--border)); box-shadow: 0 24px 60px -32px color-mix(in oklab, var(--primary) 55%, transparent); } .theme-nava .sb-showcase-hero-title { letter-spacing: -0.01em; } .theme-nava .sb-showcase-search { border-color: color-mix(in oklab, var(--primary) 25%, var(--border)); box-shadow: 0 12px 32px -20px color-mix(in oklab, var(--primary) 60%, transparent); } .theme-nava .sb-showcase-stats dt { font-size: 2rem; } /* The glow behind each door, which is what made these cards `nava`'s. Position rather than a per-door variable: the template's own `nava-hues` assigned a hue by index, and `:nth-child` is the same idea without a data field the block would have to carry for one template's benefit. */ .theme-nava .sb-showcase-door { border-color: color-mix(in oklab, var(--primary) 18%, var(--border)); position: relative; overflow: hidden; } .theme-nava .sb-showcase-door::before { background: radial-gradient(60% 60% at 80% 0%, color-mix(in oklab, var(--door, var(--primary)) 30%, transparent), transparent 70%); content: ''; inset: 0; pointer-events: none; position: absolute; } .theme-nava .sb-showcase-door:nth-child(4n + 1) { --door: var(--primary); } .theme-nava .sb-showcase-door:nth-child(4n + 2) { --door: #7c5cff; } .theme-nava .sb-showcase-door:nth-child(4n + 3) { --door: #14b8a6; } .theme-nava .sb-showcase-door:nth-child(4n + 4) { --door: #f59e0b; } .theme-nava .sb-showcase-door > * { position: relative; } .theme-nava .sb-showcase-door-enter { font-weight: 600; } /* The band heading, given the rule this template marks a section with. * * It arrived because a page BUILT out of these blocks was the one place on a * `nava` site where a section opened with a bare bold line, while the pages the * template drew itself carried the mark. Those pages are the app's again * (ADR-0047) and this rule is what is left of the shape — which makes it the * right kind of thing for a template to own: a selector over somebody else's * markup, not a copy of it. * * `h2` only, and an inline `::before` rather than a flex row. A section's own * heading is what carries the mark; an `h3` inside one is a sub-heading and * would end up with two. And the marker has to sit in the text flow, because * `.sb-heading` honours the editor's `text-align` — a flex row would silently * ignore a centred heading and pin the mark to the start edge. */ .theme-nava h2.sb-heading::before { background: linear-gradient(to bottom, var(--primary), color-mix(in oklab, var(--primary) 30%, transparent)); border-radius: 9999px; content: ''; display: inline-block; block-size: 1.25rem; inline-size: 0.25rem; margin-inline-end: 0.625rem; vertical-align: -0.15em; }