so the listbox can wrap them in
*
sections. Reset any default block-flow weirdness so
* groups look identical to the flat list layout.
*/
box-sizing: border-box;
}
.gr-shell-command-palette__option--active {
background: var(--gr-semantic-background-secondary, var(--gr-color-gray-100, #f3f4f6));
color: var(--gr-semantic-foreground-primary, var(--gr-color-gray-900, #111827));
}
.gr-shell-command-palette__option--disabled {
cursor: not-allowed;
opacity: 0.55;
}
.gr-shell-command-palette__option-body {
display: flex;
flex-direction: column;
gap: 0.125rem;
flex: 1 1 auto;
min-width: 0;
}
.gr-shell-command-palette__option-label {
font-size: 0.9375rem;
font-weight: 500;
}
.gr-shell-command-palette__option-description {
font-size: 0.8125rem;
color: var(--gr-semantic-foreground-tertiary, var(--gr-color-gray-500, #6b7280));
}
.gr-shell-command-palette__option-shortcut {
flex: 0 0 auto;
font-size: 0.75rem;
font-family: var(
--gr-typography-fontFamily-mono,
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
monospace
);
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
border: 1px solid var(--gr-semantic-border-subtle, var(--gr-color-gray-200, #e5e7eb));
background: var(--gr-semantic-background-secondary, var(--gr-color-gray-100, #f3f4f6));
color: var(--gr-semantic-foreground-secondary, var(--gr-color-gray-700, #374151));
}
.gr-shell-command-palette__status {
padding: 0.5rem var(--gr-shell-gutter);
font-size: 0.75rem;
color: var(--gr-semantic-foreground-tertiary, var(--gr-color-gray-500, #6b7280));
border-top: 1px solid var(--gr-semantic-border-subtle, var(--gr-color-gray-200, #e5e7eb));
}
@media (prefers-reduced-motion: no-preference) {
.gr-shell-command-palette__panel {
animation: gr-shell-command-palette-pop 100ms ease-out;
}
}
@keyframes gr-shell-command-palette-pop {
from {
transform: translateY(-0.5rem);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* ===== src/lib/greater/shell/components/PageFrame.css (vendored, CLI-copy channel) ===== */
.gr-shell-page-frame {
width: 100%;
margin: 0 auto;
padding: var(--gr-shell-gap-lg) var(--gr-shell-gutter);
display: flex;
flex-direction: column;
gap: var(--gr-shell-gap-lg);
min-width: 0;
}
.gr-shell-page-frame--width-narrow {
max-width: var(--gr-shell-content-max-narrow);
}
.gr-shell-page-frame--width-default {
max-width: var(--gr-shell-content-max-default);
}
.gr-shell-page-frame--width-wide {
max-width: var(--gr-shell-content-max-wide);
}
.gr-shell-page-frame--width-full {
max-width: none;
}
.gr-shell-page-frame__layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--gr-shell-gap-lg);
min-width: 0;
}
.gr-shell-page-frame--aside-right .gr-shell-page-frame__layout {
grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
}
.gr-shell-page-frame--aside-left .gr-shell-page-frame__layout {
grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
}
.gr-shell-page-frame__content {
min-width: 0;
}
.gr-shell-page-frame--aside-left .gr-shell-page-frame__content {
order: 2;
}
.gr-shell-page-frame--aside-left .gr-shell-page-frame__aside {
order: 1;
}
.gr-shell-page-frame__aside {
min-width: 0;
}
.gr-shell-page-frame__header,
.gr-shell-page-frame__footer {
min-width: 0;
}
@media (max-width: 60rem) {
.gr-shell-page-frame--aside-right .gr-shell-page-frame__layout,
.gr-shell-page-frame--aside-left .gr-shell-page-frame__layout {
grid-template-columns: 1fr;
}
}
/* ===== src/lib/greater/shell/components/PageTitle.css (vendored, CLI-copy channel) ===== */
.gr-shell-page-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--gr-shell-gap-md);
flex-wrap: wrap;
min-width: 0;
}
.gr-shell-page-title__text {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
flex: 1 1 24rem;
}
.gr-shell-page-title__eyebrow {
margin: 0;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--gr-semantic-foreground-tertiary, var(--gr-color-gray-500, #6b7280));
}
.gr-shell-page-title__heading {
margin: 0;
font-size: 1.5rem;
line-height: 1.25;
font-weight: 700;
color: var(--gr-semantic-foreground-primary, var(--gr-color-gray-900, #111827));
}
.gr-shell-page-title__subtitle {
margin: 0;
font-size: 0.9375rem;
color: var(--gr-semantic-foreground-secondary, var(--gr-color-gray-700, #374151));
}
.gr-shell-page-title__description {
margin: 0;
font-size: 0.875rem;
color: var(--gr-semantic-foreground-tertiary, var(--gr-color-gray-500, #6b7280));
max-width: 60ch;
}
.gr-shell-page-title__actions {
display: flex;
align-items: center;
gap: var(--gr-shell-gap-sm);
flex-shrink: 0;
}
/* ===== src/lib/greater/shell/components/Panel.css (vendored, CLI-copy channel) ===== */
.gr-shell-panel {
display: flex;
flex-direction: column;
background: var(--gr-semantic-background-surface, var(--gr-color-base-white, #fff));
color: var(--gr-semantic-foreground-primary, var(--gr-color-gray-900, #111827));
border-radius: 0.5rem;
min-width: 0;
}
.gr-shell-panel--variant-default {
border: 1px solid var(--gr-semantic-border-subtle, var(--gr-color-gray-200, #e5e7eb));
}
.gr-shell-panel--variant-flat {
border: none;
background: transparent;
}
.gr-shell-panel--variant-elevated {
border: 1px solid var(--gr-semantic-border-subtle, var(--gr-color-gray-200, #e5e7eb));
box-shadow: var(--gr-shadows-base, 0 1px 3px 0 rgb(0 0 0 / 0.1));
}
.gr-shell-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--gr-shell-gap-md);
padding: var(--gr-shell-gap-md) var(--gr-shell-gutter);
border-bottom: 1px solid var(--gr-semantic-border-subtle, var(--gr-color-gray-200, #e5e7eb));
}
.gr-shell-panel--variant-flat .gr-shell-panel__header {
border-bottom: none;
padding-inline: 0;
}
.gr-shell-panel__heading {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.gr-shell-panel__title {
margin: 0;
font-size: 1rem;
line-height: 1.4;
font-weight: 600;
color: var(--gr-semantic-foreground-primary, var(--gr-color-gray-900, #111827));
}
.gr-shell-panel__actions {
display: flex;
align-items: center;
gap: var(--gr-shell-gap-sm);
flex-shrink: 0;
}
.gr-shell-panel__body {
flex: 1 1 auto;
min-width: 0;
}
.gr-shell-panel--padding-none .gr-shell-panel__body {
padding: 0;
}
.gr-shell-panel--padding-sm .gr-shell-panel__body {
padding: 0.75rem;
}
.gr-shell-panel--padding-md .gr-shell-panel__body {
padding: 1rem var(--gr-shell-gutter);
}
.gr-shell-panel--padding-lg .gr-shell-panel__body {
padding: 1.5rem var(--gr-shell-gutter);
}
.gr-shell-panel__footer {
padding: var(--gr-shell-gap-md) var(--gr-shell-gutter);
border-top: 1px solid var(--gr-semantic-border-subtle, var(--gr-color-gray-200, #e5e7eb));
}
.gr-shell-panel--variant-flat .gr-shell-panel__footer {
border-top: none;
padding-inline: 0;
}
/* ===== src/lib/greater/shell/components/Shell.css (vendored, CLI-copy channel) ===== */
.gr-shell {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
'topbar'
'main';
background: var(--gr-semantic-background-base, var(--gr-color-gray-50, #f9fafb));
color: var(--gr-semantic-foreground-primary, var(--gr-color-gray-900, #111827));
min-height: 100%;
}
.gr-shell--full-height {
min-height: 100vh;
/* svh keeps Safari mobile from being clipped by the URL bar where supported */
min-height: 100svh;
}
/* Topbar */
.gr-shell--has-topbar.gr-shell {
grid-template-rows: var(--gr-shell-topbar-height) 1fr;
}
.gr-shell__topbar {
grid-area: topbar;
min-width: 0;
}
/* Sidebar layouts */
.gr-shell--has-sidebar.gr-shell--sidebar-left {
grid-template-columns: var(--gr-shell-sidebar-width-md) 1fr;
grid-template-areas:
'topbar topbar'
'sidebar main';
}
.gr-shell--has-sidebar.gr-shell--sidebar-right {
grid-template-columns: 1fr var(--gr-shell-sidebar-width-md);
grid-template-areas:
'topbar topbar'
'main sidebar';
}
/* When there is no topbar, drop the topbar row entirely. */
.gr-shell:not(.gr-shell--has-topbar).gr-shell--has-sidebar {
grid-template-rows: 1fr;
grid-template-areas: 'sidebar main';
}
.gr-shell:not(.gr-shell--has-topbar).gr-shell--has-sidebar.gr-shell--sidebar-right {
grid-template-areas: 'main sidebar';
}
.gr-shell--sidebar-width-sm.gr-shell--sidebar-left,
.gr-shell--sidebar-width-sm.gr-shell--sidebar-right {
grid-template-columns: var(--gr-shell-sidebar-width-sm) 1fr;
}
.gr-shell--sidebar-width-sm.gr-shell--sidebar-right {
grid-template-columns: 1fr var(--gr-shell-sidebar-width-sm);
}
.gr-shell--sidebar-width-lg.gr-shell--sidebar-left {
grid-template-columns: var(--gr-shell-sidebar-width-lg) 1fr;
}
.gr-shell--sidebar-width-lg.gr-shell--sidebar-right {
grid-template-columns: 1fr var(--gr-shell-sidebar-width-lg);
}
.gr-shell__sidebar {
grid-area: sidebar;
min-width: 0;
border-right: 1px solid var(--gr-semantic-border-subtle, var(--gr-color-gray-200, #e5e7eb));
}
.gr-shell--sidebar-right .gr-shell__sidebar {
border-right: none;
border-left: 1px solid var(--gr-semantic-border-subtle, var(--gr-color-gray-200, #e5e7eb));
}
.gr-shell__main {
grid-area: main;
min-width: 0;
display: block;
}
/* Responsive collapse: stack on narrow viewports. */
@media (max-width: 48rem) {
.gr-shell--has-sidebar.gr-shell--sidebar-left,
.gr-shell--has-sidebar.gr-shell--sidebar-right {
grid-template-columns: 1fr;
grid-template-areas:
'topbar'
'sidebar'
'main';
}
.gr-shell__sidebar {
border-right: none;
border-left: none;
border-bottom: 1px solid var(--gr-semantic-border-subtle, var(--gr-color-gray-200, #e5e7eb));
}
}
/* ===== src/lib/greater/shell/components/Sidebar.css (vendored, CLI-copy channel) ===== */
.gr-shell-sidebar {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
background: var(--gr-semantic-background-surface, var(--gr-color-base-white, #fff));
color: var(--gr-semantic-foreground-primary, var(--gr-color-gray-900, #111827));
overflow-y: auto;
}
.gr-shell-sidebar--variant-compact {
align-items: center;
}
.gr-shell-sidebar--width-sm {
width: var(--gr-shell-sidebar-width-sm);
}
.gr-shell-sidebar--width-md {
width: var(--gr-shell-sidebar-width-md);
}
.gr-shell-sidebar--width-lg {
width: var(--gr-shell-sidebar-width-lg);
}
.gr-shell-sidebar--variant-compact.gr-shell-sidebar {
width: var(--gr-shell-sidebar-width-compact);
}
.gr-shell-sidebar__header,
.gr-shell-sidebar__footer {
padding: var(--gr-shell-gap-md) var(--gr-shell-gutter);
}
.gr-shell-sidebar__header {
border-bottom: 1px solid var(--gr-semantic-border-subtle, var(--gr-color-gray-200, #e5e7eb));
}
.gr-shell-sidebar__footer {
border-top: 1px solid var(--gr-semantic-border-subtle, var(--gr-color-gray-200, #e5e7eb));
margin-top: auto;
}
.gr-shell-sidebar__body {
display: flex;
flex-direction: column;
gap: 0.125rem;
padding: var(--gr-shell-gap-md) 0.5rem;
flex: 1 1 auto;
min-height: 0;
}
/* Default styling for direct anchor / button descendants. Consumers may
* override via additional class names; these are baseline AA-compliant. */
.gr-shell-sidebar__body > a,
.gr-shell-sidebar__body > button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
color: var(--gr-semantic-foreground-secondary, var(--gr-color-gray-700, #374151));
background: transparent;
border: 1px solid transparent;
font: inherit;
text-align: start;
text-decoration: none;
cursor: pointer;
width: 100%;
}
.gr-shell-sidebar__body > a:hover,
.gr-shell-sidebar__body > button:hover {
background: var(--gr-semantic-background-secondary, var(--gr-color-gray-100, #f3f4f6));
color: var(--gr-semantic-foreground-primary, var(--gr-color-gray-900, #111827));
}
.gr-shell-sidebar__body > a[aria-current='page'],
.gr-shell-sidebar__body > button[aria-pressed='true'] {
background: var(--gr-semantic-background-secondary, var(--gr-color-gray-100, #f3f4f6));
color: var(--gr-semantic-foreground-primary, var(--gr-color-gray-900, #111827));
font-weight: 600;
}
/* ===== src/lib/greater/shell/components/StatCard.css (vendored, CLI-copy channel) ===== */
.gr-shell-statcard {
display: flex;
align-items: flex-start;
gap: var(--gr-shell-gap-md);
padding: var(--gr-shell-gap-md) var(--gr-shell-gutter);
background: var(--gr-semantic-background-surface, var(--gr-color-base-white, #fff));
color: var(--gr-semantic-foreground-primary, var(--gr-color-gray-900, #111827));
border: 1px solid var(--gr-semantic-border-subtle, var(--gr-color-gray-200, #e5e7eb));
border-radius: 0.5rem;
min-width: 0;
}
.gr-shell-statcard__icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.5rem;
background: var(--gr-semantic-background-secondary, var(--gr-color-gray-100, #f3f4f6));
color: var(--gr-semantic-foreground-primary, var(--gr-color-gray-900, #111827));
}
.gr-shell-statcard__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.gr-shell-statcard__label {
margin: 0;
font-size: 0.875rem;
color: var(--gr-semantic-foreground-secondary, var(--gr-color-gray-700, #374151));
}
.gr-shell-statcard__value {
margin: 0;
font-size: 1.5rem;
line-height: 1.2;
font-weight: 600;
}
.gr-shell-statcard__trend {
margin: 0;
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.8125rem;
}
.gr-shell-statcard__trend--up {
color: var(--gr-color-success-700, #15803d);
}
.gr-shell-statcard__trend--down {
color: var(--gr-color-error-700, #b91c1c);
}
.gr-shell-statcard__trend--flat {
color: var(--gr-semantic-foreground-secondary, var(--gr-color-gray-700, #374151));
}
.gr-shell-statcard__description {
margin: 0;
font-size: 0.8125rem;
color: var(--gr-semantic-foreground-tertiary, var(--gr-color-gray-500, #6b7280));
}
/* Status tinting */
.gr-shell-statcard--status-success {
border-color: var(--gr-color-success-300, #86efac);
}
.gr-shell-statcard--status-success .gr-shell-statcard__icon {
background: var(--gr-color-success-100, #dcfce7);
color: var(--gr-color-success-700, #15803d);
}
.gr-shell-statcard--status-warning {
border-color: var(--gr-color-warning-300, #fcd34d);
}
.gr-shell-statcard--status-warning .gr-shell-statcard__icon {
background: var(--gr-color-warning-100, #fef3c7);
color: var(--gr-color-warning-700, #b45309);
}
.gr-shell-statcard--status-danger {
border-color: var(--gr-color-error-300, #fca5a5);
}
.gr-shell-statcard--status-danger .gr-shell-statcard__icon {
background: var(--gr-color-error-100, #fee2e2);
color: var(--gr-color-error-700, #b91c1c);
}
.gr-shell-statcard--status-info {
border-color: var(--gr-color-info-300, #93c5fd);
}
.gr-shell-statcard--status-info .gr-shell-statcard__icon {
background: var(--gr-color-info-100, #dbeafe);
color: var(--gr-color-info-700, #1d4ed8);
}
/* ===== src/lib/greater/shell/components/SummaryStrip.css (vendored, CLI-copy channel) ===== */
.gr-shell-summary-strip {
display: grid;
min-width: 0;
}
.gr-shell-summary-strip--gap-sm {
gap: var(--gr-shell-gap-sm);
}
.gr-shell-summary-strip--gap-md {
gap: var(--gr-shell-gap-md);
}
.gr-shell-summary-strip--gap-lg {
gap: var(--gr-shell-gap-lg);
}
.gr-shell-summary-strip--columns-auto {
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.gr-shell-summary-strip--columns-1 {
grid-template-columns: 1fr;
}
.gr-shell-summary-strip--columns-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gr-shell-summary-strip--columns-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gr-shell-summary-strip--columns-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gr-shell-summary-strip--columns-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.gr-shell-summary-strip--columns-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 48rem) {
.gr-shell-summary-strip--columns-3,
.gr-shell-summary-strip--columns-4,
.gr-shell-summary-strip--columns-5,
.gr-shell-summary-strip--columns-6 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 30rem) {
.gr-shell-summary-strip--columns-2,
.gr-shell-summary-strip--columns-3,
.gr-shell-summary-strip--columns-4,
.gr-shell-summary-strip--columns-5,
.gr-shell-summary-strip--columns-6 {
grid-template-columns: 1fr;
}
}
/* ===== src/lib/greater/shell/components/Topbar.css (vendored, CLI-copy channel) ===== */
.gr-shell-topbar {
display: flex;
align-items: center;
gap: var(--gr-shell-gap-md);
min-height: var(--gr-shell-topbar-height);
padding: 0 var(--gr-shell-gutter);
background: var(--gr-semantic-background-surface, var(--gr-color-base-white, #fff));
color: var(--gr-semantic-foreground-primary, var(--gr-color-gray-900, #111827));
border-bottom: 1px solid var(--gr-semantic-border-subtle, var(--gr-color-gray-200, #e5e7eb));
}
.gr-shell-topbar--variant-flat {
border-bottom: none;
}
.gr-shell-topbar--variant-elevated {
border-bottom: none;
box-shadow: var(--gr-shadows-base, 0 1px 3px 0 rgb(0 0 0 / 0.1));
}
.gr-shell-topbar--sticky {
position: sticky;
top: 0;
z-index: 10;
}
.gr-shell-topbar__region {
display: flex;
align-items: center;
gap: var(--gr-shell-gap-sm);
min-width: 0;
}
.gr-shell-topbar__region--start {
flex: 0 0 auto;
}
.gr-shell-topbar__region--center {
flex: 1 1 auto;
justify-content: center;
min-width: 0;
}
.gr-shell-topbar__region--end {
flex: 0 0 auto;
margin-inline-start: auto;
justify-content: flex-end;
}
.gr-shell-topbar__region--full {
flex: 1 1 auto;
justify-content: space-between;
}
/* ===== greater blog face theme (vendored, CLI-copy channel) ===== */
/* Greater Components Blog Face Theme
* Typography and layout optimized for long-form reading
*/
/* ============================================================================
* Blog-Specific Design Tokens
* ============================================================================ */
:root {
/* Reading-optimized typography */
--gr-blog-font-family-body: var(
--gr-typography-fontFamily-serif,
Georgia,
'Times New Roman',
serif
);
--gr-blog-font-family-heading: var(--gr-typography-fontFamily-sans, system-ui, sans-serif);
--gr-blog-font-family-code: var(--gr-typography-fontFamily-mono, 'Fira Code', monospace);
/* Article content sizing */
--gr-blog-content-max-width: 680px;
--gr-blog-content-wide-max-width: 1000px;
--gr-blog-sidebar-width: 280px;
/* Reading-optimized line heights */
--gr-blog-line-height-body: 1.75;
--gr-blog-line-height-heading: 1.25;
--gr-blog-line-height-code: 1.5;
/* Article spacing */
--gr-blog-paragraph-spacing: var(--gr-spacing-scale-6);
--gr-blog-heading-spacing-top: var(--gr-spacing-scale-10);
--gr-blog-heading-spacing-bottom: var(--gr-spacing-scale-4);
--gr-blog-section-spacing: var(--gr-spacing-scale-12);
/* Reading progress indicator */
--gr-blog-progress-height: 3px;
--gr-blog-progress-color: var(--gr-color-primary-500);
--gr-blog-progress-background: var(--gr-color-gray-200);
/* Table of contents */
--gr-blog-toc-width: 240px;
--gr-blog-toc-active-color: var(--gr-color-primary-600);
--gr-blog-toc-link-color: var(--gr-color-gray-600);
/* Author card */
--gr-blog-author-avatar-size: 64px;
--gr-blog-author-avatar-size-sm: 40px;
/* Featured image */
--gr-blog-featured-image-ratio: 16 / 9;
--gr-blog-featured-image-radius: var(--gr-radii-lg);
/* Code blocks */
--gr-blog-code-background: var(--gr-color-gray-50);
--gr-blog-code-border: var(--gr-color-gray-200);
--gr-blog-code-radius: var(--gr-radii-md);
--gr-blog-code-text: var(--gr-color-gray-800, #1f2937);
/* Reading surface colors */
--gr-blog-article-background: var(--gr-color-base-white, #ffffff);
--gr-blog-article-text: var(--gr-color-gray-800, #1f2937);
--gr-blog-article-heading: var(--gr-color-gray-900, #111827);
--gr-blog-article-muted: var(--gr-color-gray-600, #4b5563);
--gr-blog-article-link: var(--gr-color-primary-700);
--gr-blog-article-tag-background: var(--gr-color-gray-100, #f3f4f6);
--gr-blog-article-tag-text: var(--gr-color-gray-700, #374151);
/* Blockquotes */
--gr-blog-blockquote-border-width: 4px;
--gr-blog-blockquote-border-color: var(--gr-color-primary-400);
--gr-blog-blockquote-background: var(--gr-color-gray-50);
/* Newsletter signup */
--gr-blog-newsletter-background: var(--gr-color-primary-50);
--gr-blog-newsletter-border: var(--gr-color-primary-200);
}
/* Dark theme overrides */
[data-theme='dark'] {
--gr-blog-code-background: var(--gr-color-gray-800, #1f2937);
--gr-blog-code-border: var(--gr-color-gray-700);
--gr-blog-code-text: var(--gr-color-gray-100, #f3f4f6);
--gr-blog-article-background: var(--gr-color-gray-900, #111827);
--gr-blog-article-text: var(--gr-color-gray-200, #e5e7eb);
--gr-blog-article-heading: var(--gr-color-gray-100, #f3f4f6);
--gr-blog-article-muted: var(--gr-color-gray-300, #d1d5db);
--gr-blog-article-link: var(--gr-color-primary-400, #60a5fa);
--gr-blog-article-tag-background: var(--gr-color-gray-800, #1f2937);
--gr-blog-article-tag-text: var(--gr-color-gray-200, #e5e7eb);
--gr-blog-blockquote-background: var(--gr-color-gray-800);
--gr-blog-newsletter-background: var(--gr-color-gray-800);
--gr-blog-newsletter-border: var(--gr-color-gray-700);
--gr-blog-toc-link-color: var(--gr-color-gray-400);
--gr-blog-progress-background: var(--gr-color-gray-700);
}
[data-theme='dark'] .gr-blog-article-card {
background: var(--gr-color-gray-900);
border-color: var(--gr-color-gray-700);
}
[data-theme='dark'] .gr-blog-article-card__meta {
color: var(--gr-color-gray-400);
}
[data-theme='dark'] .gr-blog-article-card__title {
color: var(--gr-color-gray-100);
}
[data-theme='dark'] .gr-blog-article-card__subtitle,
[data-theme='dark'] .gr-blog-article-card__excerpt {
color: var(--gr-color-gray-300);
}
[data-theme='dark'] .gr-blog-article-card__tag {
background: var(--gr-color-gray-800);
color: var(--gr-color-gray-200);
}
[data-theme='dark'] .gr-blog-author-card {
background: var(--gr-color-gray-800);
}
[data-theme='dark'] .gr-blog-author-card__name {
color: var(--gr-color-gray-100);
}
[data-theme='dark'] .gr-blog-author-card__bio {
color: var(--gr-color-gray-300);
}
[data-theme='dark'] .gr-blog-author-card__link {
color: var(--gr-color-primary-400);
}
[data-theme='dark'] .gr-blog-toc__title,
[data-theme='dark'] .gr-blog-archive__month-title,
[data-theme='dark'] .gr-blog-editor__meta {
color: var(--gr-color-gray-300);
}
[data-theme='dark'] .gr-blog-newsletter__title,
[data-theme='dark'] .gr-blog-archive__year {
color: var(--gr-color-gray-100);
}
[data-theme='dark'] .gr-blog-newsletter__description {
color: var(--gr-color-gray-300);
}
[data-theme='dark'] .gr-blog-editor__preview {
background: var(--gr-color-gray-900);
border-color: var(--gr-color-gray-700);
color: var(--gr-color-gray-100);
}
[data-theme='dark'] .gr-blog-article {
background: var(--gr-blog-article-background);
color: var(--gr-blog-article-text);
}
[data-theme='dark'] .gr-blog-article__content {
color: var(--gr-blog-article-text);
}
[data-theme='dark'] .gr-blog-article__content h1,
[data-theme='dark'] .gr-blog-article__content h2,
[data-theme='dark'] .gr-blog-article__content h3,
[data-theme='dark'] .gr-blog-article__content h4,
[data-theme='dark'] .gr-blog-article__content h5,
[data-theme='dark'] .gr-blog-article__content h6,
[data-theme='dark'] .gr-blog-article__title {
color: var(--gr-blog-article-heading);
}
[data-theme='dark'] .gr-blog-article__content h5,
[data-theme='dark'] .gr-blog-article__content h6 {
font-family: var(--gr-blog-font-family-heading);
line-height: var(--gr-blog-line-height-heading);
margin-top: var(--gr-blog-heading-spacing-top);
margin-bottom: var(--gr-blog-heading-spacing-bottom);
}
[data-theme='dark'] .gr-blog-article__subtitle,
[data-theme='dark'] .gr-blog-article__meta {
color: var(--gr-blog-article-muted);
}
[data-theme='dark'] .gr-blog-article__content a {
color: var(--gr-blog-article-link);
}
[data-theme='dark'] .gr-blog-article__tags .gr-blog-tag-cloud__tag {
background: var(--gr-blog-article-tag-background);
color: var(--gr-blog-article-tag-text);
}
[data-theme='dark'] .gr-blog-tag-cloud .gr-blog-tag-cloud__tag {
background: var(--gr-color-gray-700);
color: var(--gr-color-gray-100);
}
[data-theme='dark'] .gr-blog-article__content code {
color: var(--gr-blog-code-text);
}
/* ============================================================================
* Article Layout
* ============================================================================ */
.gr-blog-article {
max-width: var(--gr-blog-content-max-width);
margin: 0 auto;
padding: var(--gr-spacing-scale-6);
}
.gr-blog-article--wide {
max-width: var(--gr-blog-content-wide-max-width);
}
.gr-blog-article__header {
margin-bottom: var(--gr-blog-section-spacing);
}
.gr-blog-article__content {
font-family: var(--gr-blog-font-family-body);
font-size: var(--gr-typography-fontSize-lg);
line-height: var(--gr-blog-line-height-body);
color: var(--gr-color-gray-800);
}
.gr-blog-article__content p {
margin-bottom: var(--gr-blog-paragraph-spacing);
}
.gr-blog-article__content h1,
.gr-blog-article__content h2,
.gr-blog-article__content h3,
.gr-blog-article__content h4 {
font-family: var(--gr-blog-font-family-heading);
line-height: var(--gr-blog-line-height-heading);
margin-top: var(--gr-blog-heading-spacing-top);
margin-bottom: var(--gr-blog-heading-spacing-bottom);
color: var(--gr-color-gray-900);
}
.gr-blog-article__content h1 {
font-size: var(--gr-typography-fontSize-4xl);
}
.gr-blog-article__content h2 {
font-size: var(--gr-typography-fontSize-3xl);
}
.gr-blog-article__content h3 {
font-size: var(--gr-typography-fontSize-2xl);
}
.gr-blog-article__content h4 {
font-size: var(--gr-typography-fontSize-xl);
}
.gr-blog-article__layout {
display: grid;
gap: var(--gr-spacing-scale-8);
align-items: start;
}
@media (min-width: 1100px) {
.gr-blog-article__layout {
grid-template-columns: var(--gr-blog-toc-width) minmax(0, 1fr);
}
}
/* ============================================================================
* Article Cards
* ============================================================================ */
.gr-blog-article-card {
position: relative;
background: var(--gr-color-surface, var(--gr-color-base-white, #ffffff));
border: 1px solid var(--gr-color-border, var(--gr-color-gray-200));
border-radius: var(--gr-radii-lg);
overflow: hidden;
transition:
border-color 150ms ease,
box-shadow 150ms ease,
transform 150ms ease;
}
.gr-blog-article-card:focus-within,
.gr-blog-article-card:hover {
border-color: var(--gr-color-primary-300);
box-shadow: var(--gr-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.12));
transform: translateY(-1px);
}
.gr-blog-article-card__link {
color: inherit;
text-decoration: none;
}
.gr-blog-article-card__link::after {
position: absolute;
inset: 0;
content: '';
}
.gr-blog-article-card__link:focus-visible {
outline: 3px solid var(--gr-color-focus, var(--gr-color-primary-600));
outline-offset: 3px;
}
.gr-blog-article-card__image {
display: block;
width: 100%;
aspect-ratio: var(--gr-blog-featured-image-ratio);
object-fit: cover;
}
.gr-blog-article-card__body {
padding: var(--gr-spacing-scale-6);
}
.gr-blog-article-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gr-spacing-scale-2);
margin: 0 0 var(--gr-spacing-scale-3);
font-family: var(--gr-blog-font-family-heading);
font-size: var(--gr-typography-fontSize-sm);
color: var(--gr-color-gray-600);
}
.gr-blog-article-card__separator {
color: var(--gr-color-gray-400);
}
.gr-blog-article-card__title {
margin: 0 0 var(--gr-spacing-scale-2);
font-family: var(--gr-blog-font-family-heading);
font-size: var(--gr-typography-fontSize-2xl);
line-height: var(--gr-blog-line-height-heading);
color: var(--gr-color-gray-900);
}
.gr-blog-article-card__subtitle,
.gr-blog-article-card__excerpt {
margin: 0 0 var(--gr-spacing-scale-3);
color: var(--gr-color-gray-700);
line-height: 1.6;
}
.gr-blog-article-card__excerpt {
font-size: var(--gr-typography-fontSize-base);
}
.gr-blog-article-card__tags {
display: flex;
flex-wrap: wrap;
gap: var(--gr-spacing-scale-2);
padding: 0;
margin: var(--gr-spacing-scale-4) 0 0;
list-style: none;
}
.gr-blog-article-card__tag {
display: inline-flex;
align-items: center;
border-radius: var(--gr-radii-full);
background: var(--gr-color-gray-100);
color: var(--gr-color-gray-700);
padding: var(--gr-spacing-scale-1) var(--gr-spacing-scale-3);
font-size: var(--gr-typography-fontSize-sm);
font-family: var(--gr-blog-font-family-heading);
}
/* ============================================================================
* Reading Progress Indicator
* ============================================================================ */
.gr-blog-reading-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--gr-blog-progress-height);
background: var(--gr-blog-progress-background);
z-index: 1000;
}
.gr-blog-reading-progress__bar {
height: 100%;
width: 100%;
display: block;
}
.gr-blog-reading-progress__bar-fill {
fill: var(--gr-blog-progress-color);
}
/* ============================================================================
* Table of Contents
* ============================================================================ */
.gr-blog-toc {
position: sticky;
top: var(--gr-spacing-scale-6);
width: var(--gr-blog-toc-width);
max-height: calc(100vh - var(--gr-spacing-scale-12));
overflow-y: auto;
padding: var(--gr-spacing-scale-4);
}
.gr-blog-toc__title {
font-family: var(--gr-blog-font-family-heading);
font-size: var(--gr-typography-fontSize-sm);
font-weight: var(--gr-typography-fontWeight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--gr-color-gray-500);
margin-bottom: var(--gr-spacing-scale-3);
}
.gr-blog-toc__list {
list-style: none;
padding: 0;
margin: 0;
}
.gr-blog-toc__item {
margin-bottom: var(--gr-spacing-scale-2);
}
.gr-blog-toc__link {
display: block;
font-size: var(--gr-typography-fontSize-sm);
color: var(--gr-blog-toc-link-color);
text-decoration: none;
padding: var(--gr-spacing-scale-1) 0;
border-left: 2px solid transparent;
padding-left: var(--gr-spacing-scale-3);
transition:
color 150ms ease,
border-color 150ms ease;
}
.gr-blog-toc__link:hover {
color: var(--gr-blog-toc-active-color);
}
.gr-blog-toc__link--active {
color: var(--gr-blog-toc-active-color);
border-left-color: var(--gr-blog-toc-active-color);
font-weight: var(--gr-typography-fontWeight-medium);
}
.gr-blog-toc__link--h3 {
padding-left: var(--gr-spacing-scale-6);
}
.gr-blog-toc__link--h4 {
padding-left: calc(var(--gr-spacing-scale-8) + var(--gr-spacing-scale-1));
}
/* ============================================================================
* Author Card
* ============================================================================ */
.gr-blog-author-card {
display: flex;
gap: var(--gr-spacing-scale-4);
padding: var(--gr-spacing-scale-6);
background: var(--gr-color-gray-50);
border-radius: var(--gr-radii-lg);
}
.gr-blog-author-card__avatar {
flex-shrink: 0;
width: var(--gr-blog-author-avatar-size);
height: var(--gr-blog-author-avatar-size);
border-radius: var(--gr-radii-full);
object-fit: cover;
}
.gr-blog-author-card__info {
flex: 1;
}
.gr-blog-author-card__name {
font-family: var(--gr-blog-font-family-heading);
font-size: var(--gr-typography-fontSize-lg);
font-weight: var(--gr-typography-fontWeight-semibold);
color: var(--gr-color-gray-900);
margin-bottom: var(--gr-spacing-scale-1);
}
.gr-blog-author-card__bio {
font-size: var(--gr-typography-fontSize-sm);
color: var(--gr-color-gray-600);
line-height: var(--gr-blog-line-height-body);
}
.gr-blog-author-card__links {
display: flex;
flex-wrap: wrap;
gap: var(--gr-spacing-scale-2);
margin-top: var(--gr-spacing-scale-3);
}
.gr-blog-author-card__link {
font-size: var(--gr-typography-fontSize-sm);
color: var(--gr-color-primary-600);
text-decoration: none;
}
.gr-blog-author-card__link:hover {
text-decoration: underline;
}
/* ============================================================================
* Publication Banner
* ============================================================================ */
.gr-blog-publication-banner {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--gr-spacing-scale-4) var(--gr-spacing-scale-6);
background: var(--gr-color-gray-900);
color: var(--gr-color-gray-100);
}
.gr-blog-publication-banner__logo {
height: 32px;
width: auto;
}
.gr-blog-publication-banner__name {
font-family: var(--gr-blog-font-family-heading);
font-size: var(--gr-typography-fontSize-xl);
font-weight: var(--gr-typography-fontWeight-bold);
}
/* ============================================================================
* Newsletter Signup
* ============================================================================ */
.gr-blog-newsletter {
padding: var(--gr-spacing-scale-8);
background: var(--gr-blog-newsletter-background);
border: 1px solid var(--gr-blog-newsletter-border);
border-radius: var(--gr-radii-lg);
text-align: center;
}
.gr-blog-newsletter__title {
font-family: var(--gr-blog-font-family-heading);
font-size: var(--gr-typography-fontSize-2xl);
font-weight: var(--gr-typography-fontWeight-bold);
color: var(--gr-color-gray-900);
margin-bottom: var(--gr-spacing-scale-2);
}
.gr-blog-newsletter__description {
font-size: var(--gr-typography-fontSize-base);
color: var(--gr-color-gray-600);
margin-bottom: var(--gr-spacing-scale-6);
}
.gr-blog-newsletter__form {
display: flex;
gap: var(--gr-spacing-scale-3);
max-width: 400px;
margin: 0 auto;
}
/* ============================================================================
* Archive View
* ============================================================================ */
.gr-blog-archive {
padding: var(--gr-spacing-scale-6);
}
.gr-blog-archive__year {
font-family: var(--gr-blog-font-family-heading);
font-size: var(--gr-typography-fontSize-2xl);
font-weight: var(--gr-typography-fontWeight-bold);
color: var(--gr-color-gray-900);
margin-bottom: var(--gr-spacing-scale-4);
padding-bottom: var(--gr-spacing-scale-2);
border-bottom: 2px solid var(--gr-color-gray-200);
}
.gr-blog-archive__month {
margin-bottom: var(--gr-spacing-scale-6);
}
.gr-blog-archive__month-title {
font-family: var(--gr-blog-font-family-heading);
font-size: var(--gr-typography-fontSize-lg);
font-weight: var(--gr-typography-fontWeight-semibold);
color: var(--gr-color-gray-700);
margin-bottom: var(--gr-spacing-scale-3);
}
/* ============================================================================
* Tag Cloud
* ============================================================================ */
.gr-blog-tag-cloud {
display: flex;
flex-wrap: wrap;
gap: var(--gr-spacing-scale-2);
}
.gr-blog-tag-cloud__tag {
display: inline-flex;
align-items: center;
padding: var(--gr-spacing-scale-1) var(--gr-spacing-scale-3);
background: var(--gr-color-gray-100);
border-radius: var(--gr-radii-full);
font-size: var(--gr-typography-fontSize-sm);
color: var(--gr-color-gray-700);
text-decoration: none;
transition:
background 150ms ease,
color 150ms ease;
}
.gr-blog-tag-cloud__tag:hover {
background: var(--gr-color-primary-100);
color: var(--gr-color-primary-700);
}
.gr-blog-tag-cloud__tag--size-lg {
font-size: var(--gr-typography-fontSize-base);
padding: var(--gr-spacing-scale-2) var(--gr-spacing-scale-4);
}
.gr-blog-tag-cloud__tag--size-xl {
font-size: var(--gr-typography-fontSize-lg);
padding: var(--gr-spacing-scale-2) var(--gr-spacing-scale-5);
}
/* ============================================================================
* Editor Toolbar
* ============================================================================ */
.gr-blog-editor-toolbar {
display: flex;
align-items: center;
gap: var(--gr-spacing-scale-1);
padding: var(--gr-spacing-scale-2) var(--gr-spacing-scale-3);
background: var(--gr-color-gray-50);
border: 1px solid var(--gr-color-gray-200);
border-radius: var(--gr-radii-md);
}
.gr-blog-editor-toolbar__divider {
width: 1px;
height: 24px;
background: var(--gr-color-gray-300);
margin: 0 var(--gr-spacing-scale-2);
}
.gr-blog-editor-toolbar__button {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: transparent;
border-radius: var(--gr-radii-sm);
color: var(--gr-color-gray-600);
cursor: pointer;
transition:
background 150ms ease,
color 150ms ease;
}
.gr-blog-editor-toolbar__button:hover {
background: var(--gr-color-gray-200);
color: var(--gr-color-gray-900);
}
.gr-blog-editor-toolbar__button--active {
background: var(--gr-color-primary-100);
color: var(--gr-color-primary-700);
}
/* ============================================================================
* Editor Layout
* ============================================================================ */
.gr-blog-editor__body {
display: grid;
grid-template-columns: 1fr;
gap: var(--gr-spacing-scale-4);
margin-top: var(--gr-spacing-scale-4);
}
.gr-blog-editor__body textarea {
width: 100%;
min-height: 240px;
padding: var(--gr-spacing-scale-4);
border: 1px solid var(--gr-color-gray-200);
border-radius: var(--gr-radii-md);
font-family: var(--gr-blog-font-family-body);
font-size: var(--gr-typography-fontSize-base);
line-height: var(--gr-blog-line-height-body);
}
.gr-blog-editor__preview {
padding: var(--gr-spacing-scale-4);
border: 1px solid var(--gr-color-gray-200);
border-radius: var(--gr-radii-md);
background: var(--gr-color-gray-50);
max-height: 60vh;
overflow: auto;
}
.gr-blog-editor__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gr-spacing-scale-3);
margin-top: var(--gr-spacing-scale-3);
font-size: var(--gr-typography-fontSize-sm);
color: var(--gr-color-gray-600);
}
.gr-blog-editor__meta button {
padding: var(--gr-spacing-scale-1) var(--gr-spacing-scale-3);
border: 1px solid var(--gr-color-gray-200);
background: var(--gr-color-gray-50);
border-radius: var(--gr-radii-md);
cursor: pointer;
}
.gr-blog-editor__meta button:hover {
background: var(--gr-color-gray-100);
}
@media (min-width: 900px) {
.gr-blog-editor__body {
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
/* ============================================================================
* Blockquote Styles
* ============================================================================ */
.gr-blog-article__content blockquote {
margin: var(--gr-blog-paragraph-spacing) 0;
padding: var(--gr-spacing-scale-4) var(--gr-spacing-scale-6);
background: var(--gr-blog-blockquote-background);
border-left: var(--gr-blog-blockquote-border-width) solid var(--gr-blog-blockquote-border-color);
border-radius: 0 var(--gr-radii-md) var(--gr-radii-md) 0;
font-style: italic;
}
.gr-blog-article__content blockquote p:last-child {
margin-bottom: 0;
}
/* ============================================================================
* Code Block Styles
* ============================================================================ */
.gr-blog-article__content pre {
margin: var(--gr-blog-paragraph-spacing) 0;
padding: var(--gr-spacing-scale-4);
background: var(--gr-blog-code-background);
border: 1px solid var(--gr-blog-code-border);
border-radius: var(--gr-blog-code-radius);
overflow-x: auto;
}
.gr-blog-article__content code {
font-family: var(--gr-blog-font-family-code);
font-size: 0.9em;
line-height: var(--gr-blog-line-height-code);
}
.gr-blog-article__content :not(pre) > code {
padding: 0.2em 0.4em;
background: var(--gr-blog-code-background);
border-radius: var(--gr-radii-sm);
}
/* ============================================================================
* Featured Image
* ============================================================================ */
.gr-blog-featured-image {
position: relative;
width: 100%;
aspect-ratio: var(--gr-blog-featured-image-ratio);
border-radius: var(--gr-blog-featured-image-radius);
overflow: hidden;
margin-bottom: var(--gr-blog-section-spacing);
}
.gr-blog-featured-image__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gr-blog-featured-image__caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--gr-spacing-scale-3) var(--gr-spacing-scale-4);
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: var(--gr-color-gray-100);
font-size: var(--gr-typography-fontSize-sm);
}
/* ============================================================================
* Responsive Adjustments
* ============================================================================ */
@media (max-width: 768px) {
.gr-blog-article {
padding: var(--gr-spacing-scale-4);
}
.gr-blog-article__content {
font-size: var(--gr-typography-fontSize-base);
}
.gr-blog-toc {
display: none;
}
.gr-blog-newsletter__form {
flex-direction: column;
}
.gr-blog-author-card {
flex-direction: column;
text-align: center;
}
}
/* ============================================================================
* Review Workflow Chrome
* ----------------------------------------------------------------------------
* Queue cards, attribution strip, and verdict actions for the shared-draft
* review workflow.
*
* All colour comes from `--gr-*` custom properties so a consumer can rebrand by
* bridging tokens alone. Neutral steps use the emitted `--gr-color-gray-*` token
* path; selectable palette names change those values and are not token paths.
*
* State is never communicated by colour alone: every state badge renders its
* label as text.
* ============================================================================ */
:root {
--gr-blog-review-gap: var(--gr-spacing-scale-3);
--gr-blog-review-card-padding: var(--gr-spacing-scale-5);
--gr-blog-review-radius: var(--gr-radii-lg);
--gr-blog-review-approved-bg: var(--gr-color-success-100);
--gr-blog-review-approved-fg: var(--gr-color-success-900);
--gr-blog-review-approved-border: var(--gr-color-success-300);
--gr-blog-review-changes-bg: var(--gr-color-warning-100);
--gr-blog-review-changes-fg: var(--gr-color-warning-900);
--gr-blog-review-changes-border: var(--gr-color-warning-300);
--gr-blog-review-pending-bg: var(--gr-color-gray-100);
--gr-blog-review-pending-fg: var(--gr-color-gray-800);
--gr-blog-review-pending-border: var(--gr-color-gray-300);
--gr-blog-review-agent-bg: var(--gr-color-primary-100);
--gr-blog-review-agent-fg: var(--gr-color-primary-900, var(--gr-color-primary-700));
--gr-blog-review-agent-border: var(--gr-color-primary-300);
}
[data-theme='dark'] {
--gr-blog-review-approved-bg: var(--gr-color-success-900);
--gr-blog-review-approved-fg: var(--gr-color-success-100);
--gr-blog-review-approved-border: var(--gr-color-success-700);
--gr-blog-review-changes-bg: var(--gr-color-warning-900);
--gr-blog-review-changes-fg: var(--gr-color-warning-100);
--gr-blog-review-changes-border: var(--gr-color-warning-700);
--gr-blog-review-pending-bg: var(--gr-color-gray-800);
--gr-blog-review-pending-fg: var(--gr-color-gray-100);
--gr-blog-review-pending-border: var(--gr-color-gray-600);
--gr-blog-review-agent-bg: var(--gr-color-primary-900);
--gr-blog-review-agent-fg: var(--gr-color-primary-100);
--gr-blog-review-agent-border: var(--gr-color-primary-700);
}
/* --------------------------------------------------------------------------
* Queue card
* -------------------------------------------------------------------------- */
.gr-blog-review-card {
display: flex;
flex-direction: column;
gap: var(--gr-blog-review-gap);
padding: var(--gr-blog-review-card-padding);
background: var(--gr-color-surface, var(--gr-color-base-white, #ffffff));
border: 1px solid var(--gr-color-border, var(--gr-color-gray-200));
border-radius: var(--gr-blog-review-radius);
font-family: var(--gr-blog-font-family-heading);
}
[data-theme='dark'] .gr-blog-review-card {
background: var(--gr-color-gray-900);
border-color: var(--gr-color-gray-700);
}
.gr-blog-review-card__header {
display: flex;
flex-direction: column;
gap: var(--gr-spacing-scale-2);
}
@media (min-width: 40rem) {
.gr-blog-review-card__header {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: var(--gr-spacing-scale-4);
}
}
.gr-blog-review-card__title {
margin: 0;
font-size: 1.125rem;
line-height: var(--gr-blog-line-height-heading);
color: var(--gr-color-gray-900);
}
[data-theme='dark'] .gr-blog-review-card__title {
color: var(--gr-color-gray-100);
}
.gr-blog-review-card__link {
color: inherit;
text-decoration: none;
}
.gr-blog-review-card__link:hover,
.gr-blog-review-card__link:focus-visible {
text-decoration: underline;
}
.gr-blog-review-card__subtitle,
.gr-blog-review-card__excerpt {
margin: 0;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--gr-color-gray-600);
}
[data-theme='dark'] .gr-blog-review-card__subtitle,
[data-theme='dark'] .gr-blog-review-card__excerpt {
color: var(--gr-color-gray-300);
}
.gr-blog-review-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gr-spacing-scale-2);
margin: 0;
font-size: 0.8125rem;
color: var(--gr-color-gray-600);
}
[data-theme='dark'] .gr-blog-review-card__meta {
color: var(--gr-color-gray-400);
}
.gr-blog-review-card__author {
display: inline-flex;
align-items: center;
gap: var(--gr-spacing-scale-2);
}
.gr-blog-review-card__author-name {
font-weight: 600;
}
.gr-blog-review-card__separator {
color: var(--gr-color-gray-400);
}
.gr-blog-review-card__state-group {
display: flex;
flex-direction: column;
align-items: flex-end;
align-self: flex-start;
gap: var(--gr-spacing-scale-1);
}
.gr-blog-review-card__state {
display: inline-flex;
align-items: center;
align-self: flex-end;
margin: 0;
padding: var(--gr-spacing-scale-1) var(--gr-spacing-scale-3);
border: 1px solid transparent;
border-radius: var(--gr-radii-full);
font-size: 0.75rem;
font-weight: 600;
}
/* The badge never states publication readiness — this note says so in text,
so the meaning does not depend on the badge colour. */
.gr-blog-review-card__state-note {
font-size: 0.6875rem;
text-align: right;
color: var(--gr-color-gray-600);
}
[data-theme='dark'] .gr-blog-review-card__state-note {
color: var(--gr-color-gray-400);
}
.gr-blog-review-card__state--approved {
background: var(--gr-blog-review-approved-bg);
color: var(--gr-blog-review-approved-fg);
border-color: var(--gr-blog-review-approved-border);
}
.gr-blog-review-card__state--changes-requested {
background: var(--gr-blog-review-changes-bg);
color: var(--gr-blog-review-changes-fg);
border-color: var(--gr-blog-review-changes-border);
}
.gr-blog-review-card__state--pending {
background: var(--gr-blog-review-pending-bg);
color: var(--gr-blog-review-pending-fg);
border-color: var(--gr-blog-review-pending-border);
}
.gr-blog-review-card__agent-badge,
.gr-blog-review-attribution__agent-badge {
display: inline-flex;
align-items: center;
padding: 0 var(--gr-spacing-scale-2);
background: var(--gr-blog-review-agent-bg);
color: var(--gr-blog-review-agent-fg);
border: 1px solid var(--gr-blog-review-agent-border);
border-radius: var(--gr-radii-sm);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.gr-blog-review-card__attribution,
.gr-blog-review-card__actions {
padding-top: var(--gr-spacing-scale-3);
border-top: 1px solid var(--gr-color-border, var(--gr-color-gray-200));
}
[data-theme='dark'] .gr-blog-review-card__attribution,
[data-theme='dark'] .gr-blog-review-card__actions {
border-top-color: var(--gr-color-gray-700);
}
/* --------------------------------------------------------------------------
* Attribution strip
* -------------------------------------------------------------------------- */
.gr-blog-review-attribution {
font-size: 0.8125rem;
color: var(--gr-color-gray-700);
}
[data-theme='dark'] .gr-blog-review-attribution {
color: var(--gr-color-gray-300);
}
.gr-blog-review-attribution__actor-name {
font-weight: 600;
}
.gr-blog-review-attribution__actor-handle,
.gr-blog-review-attribution__granted-at,
.gr-blog-review-attribution__state-source {
color: var(--gr-color-gray-600);
}
[data-theme='dark'] .gr-blog-review-attribution__actor-handle,
[data-theme='dark'] .gr-blog-review-attribution__granted-at,
[data-theme='dark'] .gr-blog-review-attribution__state-source {
color: var(--gr-color-gray-400);
}
.gr-blog-review-attribution__empty {
color: var(--gr-color-gray-500);
font-style: italic;
}
.gr-blog-review-attribution__state {
display: inline-flex;
align-items: center;
padding: 0 var(--gr-spacing-scale-2);
border: 1px solid transparent;
border-radius: var(--gr-radii-sm);
font-weight: 600;
}
.gr-blog-review-attribution__state--approved {
background: var(--gr-blog-review-approved-bg);
color: var(--gr-blog-review-approved-fg);
border-color: var(--gr-blog-review-approved-border);
}
.gr-blog-review-attribution__state--changes-requested {
background: var(--gr-blog-review-changes-bg);
color: var(--gr-blog-review-changes-fg);
border-color: var(--gr-blog-review-changes-border);
}
.gr-blog-review-attribution__state--pending {
background: var(--gr-blog-review-pending-bg);
color: var(--gr-blog-review-pending-fg);
border-color: var(--gr-blog-review-pending-border);
}
.gr-blog-review-attribution__notes,
.gr-blog-review-attribution__approval {
white-space: pre-wrap;
}
.gr-blog-review-attribution__revocable {
color: var(--gr-color-gray-600);
}
/* --------------------------------------------------------------------------
* Verdict actions
* -------------------------------------------------------------------------- */
.gr-blog-review-verdict {
display: flex;
flex-wrap: wrap;
gap: var(--gr-spacing-scale-3);
}
.gr-blog-review-verdict__prompt {
margin: 0 0 var(--gr-spacing-scale-4);
font-size: 0.9375rem;
line-height: 1.5;
color: var(--gr-color-gray-700);
}
[data-theme='dark'] .gr-blog-review-verdict__prompt {
color: var(--gr-color-gray-300);
}
/* The notes field is the TextArea primitive — label, error text, and ARIA
* wiring come with it, so only the surrounding spacing belongs here. */
.gr-blog-review-verdict__field {
margin-bottom: var(--gr-spacing-scale-4);
}
.gr-blog-review-verdict__error {
margin: var(--gr-spacing-scale-4) 0 0;
font-size: 0.8125rem;
color: var(--gr-color-error-700);
}
[data-theme='dark'] .gr-blog-review-verdict__error {
color: var(--gr-color-error-100);
}
/* Keep state badges and the agent marker distinguishable when the user forces
* a system colour scheme, where author background/border colours are dropped. */
@media (forced-colors: active) {
.gr-blog-review-card__state,
.gr-blog-review-attribution__state,
.gr-blog-review-card__agent-badge,
.gr-blog-review-attribution__agent-badge {
border-color: CanvasText;
}
}
/* ===== Theory Cloud design pack — --tc-* brand tokens (webfont @import stripped) ===== */
/* =============================================================
Theory Cloud — Colors & Type
Dark-first design tokens for the Theory Cloud brand pack.
Source: theory_cloud_branding_package.md §6, §7, §27.C, §27.D
============================================================= */
/* ---------- Webfonts ---------- */
/* Primary sans: Inter (recommended ref in §7).
Display sans: Geist (recommended ref in §27.D).
Monospace: JetBrains Mono (recommended ref in §7). */
:root {
/* --------------------------------------------------------------
1. BRAND COLOR LOCKS (§27.C)
These are the only places these literals should appear; everything
downstream references the named token, never the hex.
-------------------------------------------------------------- */
/* Primary palette */
--tc-midnight: #081226; /* deep base for product + brand surfaces */
--tc-core-blue: #2EA7FF; /* system intelligence / clarity (primary) */
--tc-violet-signal: #7A5CFF; /* generative core / memory / energy (secondary) */
--tc-ice-white: #F4F8FF; /* typography + high-contrast UI text */
/* Secondary neutrals */
--tc-steel: #6F7D95; /* neutral UI linework */
--tc-steel-bright: #8593AB; /* steel lifted for tertiary TEXT: 4.48:1 on Midnight fails AA, so linework and text no longer share one literal */
--tc-mist: #DCE6F5; /* soft background tint; quiet body text */
--tc-graphite: #1C2433; /* light-mode dark text; subtle inverse */
/* Accent reserve */
--tc-phi-gold: #C9A96B; /* diagrams, premium moments, phi refs */
/* System error (calibrated; not defined in the brand doc) */
--tc-error: #FF5A65;
--tc-error-container:#4A1720;
/* --------------------------------------------------------------
2. MIDNIGHT ELEVATION RAMP
Calibrated from Midnight toward Ice White along a perceptual luma
line so M3 surface layers feel like one material.
Source: ts/src/tokens/base.ts midnightDepth..midnightLift4
-------------------------------------------------------------- */
--tc-midnight-depth: #050A1A; /* surfaceDim / surfaceContainerLowest */
--tc-midnight-lift-1:#0B172D; /* surfaceContainerLow */
--tc-midnight-lift-2:#111E38; /* surfaceContainer — standard panel/card */
--tc-midnight-lift-3:#17264A; /* surfaceContainerHigh — hover/active */
--tc-midnight-lift-4:#1D2E5C; /* surfaceContainerHighest — focused/elevated */
--tc-steel-dim: #3B465C; /* outlineVariant — quieter linework */
/* Accent containers (hand-picked tints on Midnight) */
--tc-core-blue-container: #143B5C;
--tc-core-blue-fixed: #7FC7FF;
--tc-core-blue-fixed-dim: #5CB5FF;
--tc-core-blue-inverse: #1274BF;
--tc-violet-container: #2C1F6B;
--tc-violet-fixed: #B6A4FF;
--tc-violet-fixed-dim: #9B85FF;
--tc-violet-inverse: #5A3FDB;
--tc-phi-gold-container: #3B2F16;
--tc-phi-gold-fixed: #E6D09A;
/* --------------------------------------------------------------
3. SEMANTIC ROLES (foreground / background / outline)
-------------------------------------------------------------- */
--tc-bg: var(--tc-midnight);
--tc-bg-dim: var(--tc-midnight-depth);
--tc-surface: var(--tc-midnight);
--tc-surface-1: var(--tc-midnight-lift-1);
--tc-surface-2: var(--tc-midnight-lift-2);
--tc-surface-3: var(--tc-midnight-lift-3);
--tc-surface-4: var(--tc-midnight-lift-4);
--tc-surface-bright: var(--tc-midnight-lift-4);
--tc-fg: var(--tc-ice-white); /* primary text on dark */
--tc-fg-muted: var(--tc-mist); /* secondary text */
--tc-fg-dim: var(--tc-steel-bright); /* tertiary text — AA on bg and every surface it sits on */
--tc-fg-inverse: var(--tc-graphite); /* text on inverse surfaces */
--tc-outline: var(--tc-steel);
--tc-outline-variant: var(--tc-steel-dim);
/* Accent semantic */
--tc-accent: var(--tc-core-blue);
--tc-accent-2: var(--tc-violet-signal);
--tc-accent-reserve: var(--tc-phi-gold);
/* --------------------------------------------------------------
4. SURFACE-TINT SEEDS (§29.F)
Core: Core Blue; MCP: Violet Signal; Auth: Steel.
Use --tc-surface-tint at the surface level (e.g. body[data-surface="mcp"])
to shift the elevation accent without changing primary identity.
-------------------------------------------------------------- */
--tc-surface-tint: var(--tc-core-blue); /* Core default */
/* --------------------------------------------------------------
5. SIGNATURE GRADIENT
Core Blue → Violet Signal (§6, §27.C). Use only in hero art,
icon highlight moments, motion, and key launch graphics.
Avoid in body UI.
-------------------------------------------------------------- */
--tc-gradient-signature: linear-gradient(135deg, var(--tc-core-blue) 0%, var(--tc-violet-signal) 100%);
--tc-gradient-signature-vertical: linear-gradient(180deg, var(--tc-core-blue) 0%, var(--tc-violet-signal) 100%);
--tc-gradient-soft: linear-gradient(135deg, rgba(46,167,255,0.18) 0%, rgba(122,92,255,0.18) 100%);
--tc-gradient-edge: linear-gradient(180deg, rgba(244,248,255,0.06) 0%, rgba(244,248,255,0) 100%);
/* --------------------------------------------------------------
6. TYPOGRAPHY STACKS (§7, §27.D)
-------------------------------------------------------------- */
--tc-font-sans: "Inter", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--tc-font-display: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--tc-font-mono: "JetBrains Mono", "Geist Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Weight scale */
--tc-w-regular: 400;
--tc-w-medium: 500;
--tc-w-semibold: 600;
--tc-w-bold: 700;
/* Type scale — display→ui, generous + premium */
--tc-fs-display-xl: 80px; --tc-lh-display-xl: 1.02; --tc-ls-display-xl: -0.03em;
--tc-fs-display-lg: 64px; --tc-lh-display-lg: 1.04; --tc-ls-display-lg: -0.025em;
--tc-fs-display-md: 48px; --tc-lh-display-md: 1.06; --tc-ls-display-md: -0.022em;
--tc-fs-h1: 36px; --tc-lh-h1: 1.12; --tc-ls-h1: -0.018em;
--tc-fs-h2: 28px; --tc-lh-h2: 1.18; --tc-ls-h2: -0.014em;
--tc-fs-h3: 22px; --tc-lh-h3: 1.24; --tc-ls-h3: -0.010em;
--tc-fs-h4: 18px; --tc-lh-h4: 1.32; --tc-ls-h4: -0.006em;
--tc-fs-body-lg: 17px; --tc-lh-body-lg: 1.55; --tc-ls-body-lg: -0.003em;
--tc-fs-body: 15px; --tc-lh-body: 1.55; --tc-ls-body: 0;
--tc-fs-body-sm: 13px; --tc-lh-body-sm: 1.5; --tc-ls-body-sm: 0;
--tc-fs-label: 13px; --tc-lh-label: 1.3; --tc-ls-label: 0.005em;
--tc-fs-label-sm: 11px; --tc-lh-label-sm: 1.3; --tc-ls-label-sm: 0.04em;
--tc-fs-mono: 13px; --tc-lh-mono: 1.5;
/* Eyebrow caps */
--tc-fs-eyebrow: 11px; --tc-ls-eyebrow: 0.16em;
/* --------------------------------------------------------------
7. SHAPE — corner radii (§8, §27.G — rounded, not cartoonish)
`xl` matches the 14 px outer radius of the icon mark.
-------------------------------------------------------------- */
--tc-radius-xs: 2px;
--tc-radius-sm: 4px;
--tc-radius-md: 8px;
--tc-radius-lg: 12px;
--tc-radius-xl: 14px; /* matches icon outer radius */
--tc-radius-2xl:20px;
--tc-radius-pill: 999px;
/* --------------------------------------------------------------
8. SPACING — 4px base unit (ts/src/tokens/base.ts)
-------------------------------------------------------------- */
--tc-space-0: 0;
--tc-space-1: 4px;
--tc-space-2: 8px;
--tc-space-3: 12px;
--tc-space-4: 16px;
--tc-space-5: 20px;
--tc-space-6: 24px;
--tc-space-8: 32px;
--tc-space-10: 40px;
--tc-space-12: 48px;
--tc-space-16: 64px;
--tc-space-20: 80px;
--tc-space-24: 96px;
--tc-space-32: 128px;
/* --------------------------------------------------------------
9. ELEVATION — restrained, dark-first
Shadows are subtle on Midnight; depth comes from the lift ramp
more than from drop shadows.
-------------------------------------------------------------- */
--tc-shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
--tc-shadow-md: 0 4px 12px rgba(0,0,0,0.35);
--tc-shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
--tc-shadow-xl: 0 24px 64px rgba(0,0,0,0.55);
/* Inner highlight — the "one luminous edge" §17 mood */
--tc-inner-edge: inset 0 1px 0 rgba(244,248,255,0.06);
/* Accent glows — restrained; use only on focal/active states */
--tc-glow-blue: 0 0 0 1px rgba(46,167,255,0.40), 0 0 24px rgba(46,167,255,0.18);
--tc-glow-violet: 0 0 0 1px rgba(122,92,255,0.40), 0 0 24px rgba(122,92,255,0.18);
/* Focus ring — Core Blue at 2px (§D logo usage / UI calm) */
--tc-focus-ring: 0 0 0 2px var(--tc-bg), 0 0 0 4px var(--tc-core-blue);
/* --------------------------------------------------------------
10. MOTION (§10, §27.H — structure first, intelligence second)
-------------------------------------------------------------- */
--tc-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* snap into place */
--tc-ease-in: cubic-bezier(0.55, 0, 0.55, 0.2);
--tc-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
--tc-dur-fast: 120ms;
--tc-dur-base: 200ms;
--tc-dur-slow: 360ms;
}
/* --------------------------------------------------------------
Surface variants — apply via [data-surface="core|mcp|auth"] on
the root or any container to swap the accent tint locally.
§29.F Surface Accent Strategy.
-------------------------------------------------------------- */
[data-surface="core"] { --tc-surface-tint: var(--tc-core-blue); }
[data-surface="mcp"] {
--tc-surface-tint: var(--tc-violet-signal);
--tc-accent: var(--tc-violet-signal); /* MCP leans agentic */
--tc-accent-2: var(--tc-core-blue);
}
[data-surface="auth"] { --tc-surface-tint: var(--tc-steel); }
[data-surface="journal"] {
--tc-surface-tint: var(--tc-phi-gold);
--tc-accent-2: var(--tc-phi-gold);
}
/* =============================================================
SEMANTIC TYPE STYLES
Use these classes (or copy the rules) wherever you want
"the canonical h1," not a one-off.
============================================================= */
.tc-display-xl,
.tc-display-lg,
.tc-display-md,
.tc-h1, .tc-h2, .tc-h3, .tc-h4 {
font-family: var(--tc-font-display);
color: var(--tc-fg);
text-wrap: balance;
margin: 0;
}
.tc-display-xl { font-size: var(--tc-fs-display-xl); line-height: var(--tc-lh-display-xl); letter-spacing: var(--tc-ls-display-xl); font-weight: var(--tc-w-semibold); }
.tc-display-lg { font-size: var(--tc-fs-display-lg); line-height: var(--tc-lh-display-lg); letter-spacing: var(--tc-ls-display-lg); font-weight: var(--tc-w-semibold); }
.tc-display-md { font-size: var(--tc-fs-display-md); line-height: var(--tc-lh-display-md); letter-spacing: var(--tc-ls-display-md); font-weight: var(--tc-w-semibold); }
.tc-h1 { font-size: var(--tc-fs-h1); line-height: var(--tc-lh-h1); letter-spacing: var(--tc-ls-h1); font-weight: var(--tc-w-semibold); }
.tc-h2 { font-size: var(--tc-fs-h2); line-height: var(--tc-lh-h2); letter-spacing: var(--tc-ls-h2); font-weight: var(--tc-w-semibold); }
.tc-h3 { font-size: var(--tc-fs-h3); line-height: var(--tc-lh-h3); letter-spacing: var(--tc-ls-h3); font-weight: var(--tc-w-medium); }
.tc-h4 { font-size: var(--tc-fs-h4); line-height: var(--tc-lh-h4); letter-spacing: var(--tc-ls-h4); font-weight: var(--tc-w-medium); }
.tc-body-lg, .tc-body, .tc-body-sm {
font-family: var(--tc-font-sans);
color: var(--tc-fg);
text-wrap: pretty;
margin: 0;
}
.tc-body-lg { font-size: var(--tc-fs-body-lg); line-height: var(--tc-lh-body-lg); letter-spacing: var(--tc-ls-body-lg); font-weight: var(--tc-w-regular); }
.tc-body { font-size: var(--tc-fs-body); line-height: var(--tc-lh-body); letter-spacing: var(--tc-ls-body); font-weight: var(--tc-w-regular); }
.tc-body-sm { font-size: var(--tc-fs-body-sm); line-height: var(--tc-lh-body-sm); letter-spacing: var(--tc-ls-body-sm); font-weight: var(--tc-w-regular); color: var(--tc-fg-muted); }
.tc-label {
font-family: var(--tc-font-sans);
font-size: var(--tc-fs-label);
line-height: var(--tc-lh-label);
letter-spacing: var(--tc-ls-label);
font-weight: var(--tc-w-medium);
color: var(--tc-fg);
}
.tc-label-sm {
font-family: var(--tc-font-sans);
font-size: var(--tc-fs-label-sm);
line-height: var(--tc-lh-label-sm);
letter-spacing: var(--tc-ls-label-sm);
font-weight: var(--tc-w-medium);
color: var(--tc-fg-muted);
text-transform: uppercase;
}
.tc-eyebrow {
font-family: var(--tc-font-sans);
font-size: var(--tc-fs-eyebrow);
letter-spacing: var(--tc-ls-eyebrow);
text-transform: uppercase;
font-weight: var(--tc-w-semibold);
color: var(--tc-fg-dim);
}
.tc-mono, code, kbd, pre, samp {
font-family: var(--tc-font-mono);
font-size: var(--tc-fs-mono);
line-height: var(--tc-lh-mono);
color: var(--tc-fg);
}
/* Inline code — quiet, on-surface */
:not(pre) > code {
background: var(--tc-surface-2);
border: 1px solid var(--tc-outline-variant);
border-radius: var(--tc-radius-sm);
padding: 1px 6px;
font-size: 0.9em;
}
/* Brand wordmark — text rendering convention */
.tc-wordmark {
font-family: var(--tc-font-display);
font-weight: var(--tc-w-medium);
letter-spacing: -0.012em;
color: var(--tc-fg);
}
/* Gradient text — for hero moments only */
.tc-text-gradient {
background: var(--tc-gradient-signature);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* =============================================================
BASE RESET (opt-in via .tc-root or )
============================================================= */
.tc-root {
background: var(--tc-bg);
color: var(--tc-fg);
font-family: var(--tc-font-sans);
font-size: var(--tc-fs-body);
line-height: var(--tc-lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ===== contentus brand bridge — maps --gr-* onto --tc-* ===== */
/* =============================================================
Theory Cloud → greater-components bridge
-------------------------------------------------------------
Contentus-owned brand consumption layer. This file contains NO brand
literals: every value resolves to a `--tc-*` token defined by the
design pack (`colors_and_type.css`, sourced from
`theory_cloud_branding_package.md`). The pack is the brand authority;
the `--gr-*` names below are the contract the vendored greater
components consume.
This is a token mapping, NOT a component fork. No vendored source is
edited and no reusable component is reimplemented here. If a rule
below starts describing component BEHAVIOUR rather than brand values,
it belongs upstream in greater-components instead.
Layer order (see `scripts/build-stylesheet.mjs`):
1. greater tokens — `--gr-*` defaults (tarball-pin channel)
2. greater primitives — component CSS (CLI-copy channel)
3. greater shell — shell CSS (CLI-copy channel)
4. greater blog face — blog CSS (CLI-copy channel)
5. Theory Cloud pack — `--tc-*` brand tokens (design pack)
6. THIS FILE — maps `--gr-*` onto `--tc-*`, last so it wins
---- Theme: data-theme="dark" at greater-v0.13.2 ----
Product design §2's preference is now satisfied: at greater-v0.13.2
the blog face ships 46 `[data-theme='dark']` selectors (cards, prose,
headings, review surfaces) and the primitives theme 47 more. The
shell root carries `data-theme="dark"` (AppShell.svelte — on the
shell, not , because FaceTheory v4.0.6's adapter pipeline does
not forward htmlAttrs from renderOptions), and the
`--gr-color-gray-*` ramp those rules read comes from the greater
tokens layer at :root.
The pre-0.13.2 arrangement — an inverted `--gr-color-neutral-*` ramp
standing in for a dark theme the faces did not ship — is deleted:
nothing vendored consumes `--gr-color-neutral-*` anymore (verified at
v0.13.2: zero references outside this file). This was emdash's
upstream gap U-18, closed by the v0.13.2 dark coverage. Remaining
coverage holes (`gr-blog-author-card`, `.gr-menu`) are upstream:
equaltoai/greater-components#1009.
============================================================= */
:root {
color-scheme: dark;
/* ---- Names the faces use that the tokens package does not define ----
Supplied so the vendored CSS resolves; nothing upstream is renamed. */
--gr-color-surface: var(--tc-surface-1);
/* `--tc-outline` (Steel — the pack's "neutral UI linework") rather than
`--tc-outline-variant`: this is the article card's boundary, and Steel
on the card surface clears WCAG 1.4.11's 3:1 non-text minimum where the
quieter variant does not. The variant is used below for decorative
separators, which 1.4.11 does not govern. */
--gr-color-border: var(--tc-outline);
--gr-color-focus: var(--tc-core-blue);
--gr-shadow-md: var(--tc-shadow-md);
--gr-shadows-base: var(--tc-shadow-sm);
--gr-shadows-lg: var(--tc-shadow-lg);
--gr-spacing-scale-9: var(--tc-space-8);
/* ---- Accent ramp → Core Blue (brand primary) ---- */
--gr-color-primary-50: var(--tc-core-blue-container);
--gr-color-primary-100: var(--tc-core-blue-container);
--gr-color-primary-200: var(--tc-core-blue-inverse);
--gr-color-primary-300: var(--tc-core-blue-fixed-dim);
--gr-color-primary-400: var(--tc-core-blue-fixed-dim);
--gr-color-primary-500: var(--tc-core-blue);
--gr-color-primary-600: var(--tc-core-blue);
--gr-color-primary-700: var(--tc-core-blue-fixed);
--gr-color-primary-800: var(--tc-core-blue-fixed);
--gr-color-primary-900: var(--tc-core-blue-fixed);
--gr-color-primary-950: var(--tc-core-blue-fixed);
/* ---- Status ramps ---- */
--gr-color-success-50: var(--tc-surface-2);
--gr-color-success-100: var(--tc-surface-2);
--gr-color-success-200: var(--tc-surface-3);
--gr-color-success-300: var(--tc-steel);
--gr-color-success-700: var(--tc-fg-muted);
--gr-color-success-900: var(--tc-fg);
--gr-color-warning-50: var(--tc-phi-gold-container);
--gr-color-warning-100: var(--tc-phi-gold-container);
--gr-color-warning-200: var(--tc-phi-gold-container);
--gr-color-warning-300: var(--tc-phi-gold);
--gr-color-warning-700: var(--tc-phi-gold);
--gr-color-warning-900: var(--tc-phi-gold-fixed);
--gr-color-error-100: var(--tc-error-container);
--gr-color-error-500: var(--tc-error);
--gr-color-error-700: var(--tc-error);
/* ---- Greater semantic roles ---- */
--gr-semantic-background-base: var(--tc-bg);
--gr-semantic-background-surface: var(--tc-surface);
--gr-semantic-background-raised: var(--tc-surface-2);
--gr-semantic-background-overlay: var(--tc-surface-3);
--gr-semantic-background-primary: var(--tc-surface);
--gr-semantic-background-secondary: var(--tc-surface-1);
--gr-semantic-background-tertiary: var(--tc-surface-2);
--gr-semantic-background-input: var(--tc-surface-2);
--gr-semantic-foreground-primary: var(--tc-fg);
--gr-semantic-foreground-secondary: var(--tc-fg-muted);
--gr-semantic-foreground-tertiary: var(--tc-fg-dim);
--gr-semantic-foreground-disabled: var(--tc-fg-dim);
--gr-semantic-border-subtle: var(--tc-outline-variant);
--gr-semantic-border-default: var(--tc-outline);
--gr-semantic-border-strong: var(--tc-fg-dim);
--gr-semantic-border-focus: var(--tc-core-blue);
--gr-semantic-action-primary-default: var(--tc-core-blue);
--gr-semantic-action-primary-hover: var(--tc-core-blue-fixed-dim);
--gr-semantic-action-primary-active: var(--tc-core-blue-fixed);
--gr-semantic-action-link-default: var(--tc-core-blue);
--gr-semantic-action-link-hover: var(--tc-core-blue-fixed-dim);
--gr-semantic-action-link-active: var(--tc-core-blue-fixed);
--gr-semantic-action-error-default: var(--tc-error);
--gr-semantic-focus-ring: var(--tc-core-blue);
/* ---- Radii and spacing from the pack's scales ---- */
--gr-radii-sm: var(--tc-radius-sm);
--gr-radii-md: var(--tc-radius-md);
--gr-radii-lg: var(--tc-radius-lg);
--gr-radii-full: var(--tc-radius-pill);
--gr-spacing-scale-1: var(--tc-space-1);
--gr-spacing-scale-2: var(--tc-space-2);
--gr-spacing-scale-3: var(--tc-space-3);
--gr-spacing-scale-4: var(--tc-space-4);
--gr-spacing-scale-5: var(--tc-space-5);
--gr-spacing-scale-6: var(--tc-space-6);
--gr-spacing-scale-8: var(--tc-space-8);
--gr-spacing-scale-10: var(--tc-space-10);
--gr-spacing-scale-12: var(--tc-space-12);
/* ---- Typography ----
`serif` maps to the sans stack deliberately: the pack specifies
Geist / Inter / JetBrains Mono and ships no serif face, and the blog
face uses `fontFamily-serif` only as its long-form reading stack. */
--gr-typography-font: var(--tc-font-sans);
--gr-typography-fontFamily-sans: var(--tc-font-sans);
--gr-typography-fontFamily-serif: var(--tc-font-sans);
--gr-typography-fontFamily-mono: var(--tc-font-mono);
/* ---- Long-form reading measures ---- */
--gr-blog-font-family-body: var(--tc-font-sans);
--gr-blog-font-family-heading: var(--tc-font-display);
--gr-blog-font-family-code: var(--tc-font-mono);
--gr-blog-line-height-body: var(--tc-lh-body-lg);
--gr-blog-line-height-heading: var(--tc-lh-h2);
--gr-blog-content-max-width: 760px;
--gr-blog-featured-image-radius: var(--tc-radius-xl);
--gr-blog-code-radius: var(--tc-radius-md);
--gr-blog-progress-color: var(--tc-accent);
--gr-blog-toc-active-color: var(--tc-accent);
/* ---- Shell metrics ---- */
--gr-shell-topbar-height: 56px;
--gr-shell-gutter: var(--tc-space-6);
--gr-shell-gap-sm: var(--tc-space-2);
--gr-shell-gap-md: var(--tc-space-4);
--gr-shell-gap-lg: var(--tc-space-6);
--gr-shell-sidebar-width-compact: 64px;
--gr-shell-sidebar-width-sm: 200px;
--gr-shell-sidebar-width-md: 240px;
--gr-shell-sidebar-width-lg: 280px;
--gr-shell-content-max-narrow: 760px;
--gr-shell-content-max-default: 960px;
--gr-shell-content-max-wide: 1200px;
}
/* =============================================================
Dark-theme companion rules
-------------------------------------------------------------
`data-theme="dark"` activates the vendored dark rules, which ground
cards and the article body on raw gray-ramp slabs (gray-900). The
brand ground is Midnight, so those surfaces are re-grounded on the
`--tc-*` surfaces here; upstream's dark text colors are kept. Same
specificity as the vendored dark rules (0,2,0) — this file wins on
layer order, which is the bridge's whole job.
`gr-blog-author-card` and `.gr-menu` ship no dark rules at all at
v0.13.2 and are deliberately NOT forked here: that coverage is
upstream's to add (equaltoai/greater-components#1009).
============================================================= */
[data-theme='dark'] .gr-blog-article-card,
[data-theme='dark'] .gr-blog-review-card {
background: var(--tc-surface-1);
border-color: var(--tc-outline);
}
[data-theme='dark'] .gr-blog-article {
background: transparent;
}
/* Read articles dim to the muted foreground: with no archive or read-state
of its own yet, :visited is the only signal a returning reader gets that
they have already opened a card. Descendant-scoped so it wins over the
vendored dark rule on cascade order, the bridge's whole job. At greater
v0.13.3 (#1008) the card inverted: the link lives INSIDE the title,
stretched over the card by ::after, so the selector follows the link. */
[data-theme='dark'] .gr-blog-article-card__title .gr-blog-article-card__link:visited {
color: var(--tc-fg-muted);
}
/* =============================================================
Surface variants (product design §2)
-------------------------------------------------------------
One brand, three legible modes. `--tc-accent` is the single knob the
rest of the sheet reads, so a surface swap is one declaration rather
than a parallel theme.
journal → Phi Gold — Articles, Review (the editorial half)
core → Core Blue — Compose, Timelines (the social half)
mcp → Violet — Messages, Agents, Drones (system intelligence)
Only `journal` ships in M1; the other two are declared so later faces
inherit the mechanism rather than inventing one.
============================================================= */
[data-surface='journal'] {
--tc-accent: var(--tc-phi-gold);
--tc-accent-2: var(--tc-phi-gold-fixed);
}
[data-surface='core'] {
--tc-accent: var(--tc-core-blue);
--tc-accent-2: var(--tc-core-blue-fixed);
}
[data-surface='mcp'] {
--tc-accent: var(--tc-violet-signal);
--tc-accent-2: var(--tc-violet-fixed);
}
/* =============================================================
Contentus application shell
-------------------------------------------------------------
Product-specific composition only: document ground, landmarks, nav,
and the page-level blocks the route layer emits around the face
components. Anything reusable belongs in greater-components.
============================================================= */
html,
body {
background: var(--tc-bg);
color: var(--tc-fg);
}
body {
font-family: var(--tc-font-sans);
font-size: var(--tc-fs-body-lg);
line-height: var(--tc-lh-body-lg);
margin: 0;
-webkit-font-smoothing: antialiased;
}
:focus-visible {
outline: 2px solid var(--tc-core-blue);
outline-offset: 2px;
}
a {
color: var(--tc-core-blue);
text-decoration: underline;
text-underline-offset: 0.18em;
}
code {
font-family: var(--tc-font-mono);
font-size: var(--tc-fs-mono);
}
.contentus-skip-link {
position: absolute;
left: -9999px;
top: var(--tc-space-2);
z-index: 10;
padding: var(--tc-space-2) var(--tc-space-4);
background: var(--tc-surface-2);
color: var(--tc-fg);
border: 1px solid var(--tc-outline);
border-radius: var(--tc-radius-md);
text-decoration: none;
}
.contentus-skip-link:focus {
left: var(--tc-space-4);
}
/* ---- Shell grid: sticky nav | content, collapsing at 960px ---- */
.contentus-shell {
display: grid;
grid-template-columns: var(--gr-shell-sidebar-width-md) minmax(0, 1fr);
gap: var(--tc-space-8);
min-height: 100vh;
max-width: var(--gr-shell-content-max-wide);
margin: 0 auto;
padding: 0 var(--tc-space-6);
}
.contentus-sidebar {
position: sticky;
top: 0;
align-self: start;
/* `100dvh` where supported: classic `100vh` includes browser-chrome area
on engines with dynamic toolbars, which pushed the session control at
the bottom of this column behind the chrome and off screen. The dynamic
unit tracks the visible area; the `vh` line is the fallback. */
height: 100vh;
height: 100dvh;
/* Horizontal padding too: without it the compose action's border and the
nav's hover backgrounds sat flush against this column's border-right
line. */
padding: var(--tc-space-8) var(--tc-space-4);
border-right: 1px solid var(--tc-outline-variant);
display: flex;
flex-direction: column;
gap: var(--tc-space-8);
}
.contentus-brand {
display: inline-flex;
align-items: center;
flex-shrink: 0;
/* The wordmark image is 22px tall; the LINK must still meet WCAG 2.2's
24px minimum target, so the box grows around it. */
min-height: 24px;
text-decoration: none;
}
.contentus-brand__wordmark {
display: block;
height: 22px;
width: auto;
}
.contentus-nav {
display: flex;
flex-direction: column;
gap: var(--tc-space-1);
/* The nav is the one flex child allowed to shrink and scroll: if the
column's content ever exceeds the viewport, the session control stays
pinned in view and the nav scrolls between brand and session instead of
pushing anything off screen. `min-height: 0` is what lets a flex item
shrink below its content height. */
min-height: 0;
overflow-y: auto;
}
.contentus-nav__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--tc-space-3);
/* 44px minimum touch target (product design §4). */
min-height: 44px;
padding: var(--tc-space-2) var(--tc-space-3);
border-radius: var(--tc-radius-md);
color: var(--tc-fg-muted);
font-size: var(--tc-fs-body);
text-decoration: none;
}
.contentus-nav__link:hover {
background: var(--tc-surface-1);
color: var(--tc-fg);
}
.contentus-nav__link[aria-current='page'] {
background: var(--tc-surface-2);
color: var(--tc-fg);
box-shadow: inset 2px 0 0 var(--tc-accent);
}
.contentus-nav__badge {
min-width: 20px;
padding: 0 var(--tc-space-1);
border-radius: var(--tc-radius-pill);
background: var(--tc-accent);
color: var(--tc-midnight);
font-size: var(--tc-fs-label-sm);
line-height: 20px;
text-align: center;
}
/* The compose action reads as an action, not a destination: the nav's other
entries are places, and this one writes. */
.contentus-nav__compose {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
margin-top: var(--tc-space-3);
padding: var(--tc-space-2) var(--tc-space-4);
border: 1px solid var(--tc-core-blue);
border-radius: var(--tc-radius-pill);
background: var(--tc-core-blue);
color: var(--tc-midnight);
font-size: var(--tc-fs-body);
font-weight: var(--tc-w-semibold);
text-decoration: none;
}
.contentus-session {
margin-top: auto;
/* Pinned: never shrink away. The nav above is the only flex child allowed
to shrink/scroll; if this block could shrink, a short viewport would
crush the account control instead of scrolling the nav. */
flex-shrink: 0;
font-size: var(--tc-fs-body-sm);
color: var(--tc-fg-muted);
}
.contentus-session__button {
min-height: 44px;
width: 100%;
padding: var(--tc-space-2) var(--tc-space-4);
border: 1px solid var(--tc-outline);
border-radius: var(--tc-radius-md);
background: var(--tc-surface-2);
color: var(--tc-fg);
font: inherit;
cursor: pointer;
}
.contentus-session__button:hover {
border-color: var(--tc-accent);
}
/* Pre-mount placeholder: inert and unpainted, but occupying exactly the real
control's box so the post-mount swap cannot move anything. */
.contentus-session__button--pending {
visibility: hidden;
cursor: default;
}
/* Account menu (P1-11): sign-out lives behind a menu with an inline
confirmation, never as a bare prominent button. The session block sits at
the BOTTOM of the desktop sidebar, so the menu opens upward; below 960px
the sidebar is a top row and it opens downward, end-aligned. */
.contentus-account {
position: relative;
}
.contentus-account__menu {
position: absolute;
bottom: calc(100% + var(--tc-space-2));
left: 0;
right: 0;
z-index: 20;
display: grid;
gap: var(--tc-space-2);
padding: var(--tc-space-3);
background: var(--tc-surface-2);
border: 1px solid var(--tc-outline);
border-radius: var(--tc-radius-md);
box-shadow: var(--tc-shadow-md);
}
.contentus-account__item {
min-height: 44px;
padding: var(--tc-space-2) var(--tc-space-3);
border: 1px solid transparent;
border-radius: var(--tc-radius-sm);
background: transparent;
color: var(--tc-fg);
font: inherit;
text-align: left;
cursor: pointer;
}
.contentus-account__item:hover {
background: var(--tc-surface-3);
}
.contentus-account__item--destructive {
color: var(--tc-error);
}
.contentus-account__confirm {
margin: 0;
color: var(--tc-fg-muted);
font-size: var(--tc-fs-body-sm);
}
.contentus-account__confirm-actions {
display: grid;
gap: var(--tc-space-1);
}
.contentus-main {
min-width: 0;
padding: var(--tc-space-12) 0 var(--tc-space-24);
}
/* The page footer (contentinfo). Column 2 on the desktop grid so it closes
the reading column rather than sitting under the sticky sidebar. */
.contentus-footer {
grid-column: 2;
padding: var(--tc-space-6) 0 var(--tc-space-10);
border-top: 1px solid var(--tc-outline-variant);
color: var(--tc-fg-dim);
font-size: var(--tc-fs-body-sm);
}
.contentus-page-header {
margin-bottom: var(--tc-space-12);
}
.contentus-eyebrow {
font-size: var(--tc-fs-eyebrow);
letter-spacing: var(--tc-ls-eyebrow);
text-transform: uppercase;
color: var(--tc-accent);
margin: 0 0 var(--tc-space-4) 0;
}
.contentus-h1 {
font-family: var(--tc-font-display);
font-size: var(--tc-fs-h1);
line-height: var(--tc-lh-h1);
letter-spacing: var(--tc-ls-h1);
font-weight: var(--tc-w-semibold);
margin: 0 0 var(--tc-space-4) 0;
}
.contentus-lede {
color: var(--tc-fg-muted);
max-width: 56ch;
margin: 0 0 var(--tc-space-8) 0;
}
.contentus-meta {
color: var(--tc-fg-muted);
font-size: var(--tc-fs-body-sm);
margin: 0 0 var(--tc-space-4) 0;
}
/* ---- Index grid: single column on mobile per product design §5 ---- */
.contentus-card-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--tc-space-6);
border-top: 1px solid var(--tc-outline-variant);
padding-top: var(--tc-space-8);
}
.contentus-filters {
display: flex;
flex-wrap: wrap;
gap: var(--tc-space-2);
margin-bottom: var(--tc-space-8);
}
.contentus-filter {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 0 var(--tc-space-4);
border: 1px solid var(--tc-outline-variant);
border-radius: var(--tc-radius-pill);
color: var(--tc-fg-muted);
font-size: var(--tc-fs-body-sm);
text-decoration: none;
}
.contentus-filter:hover,
.contentus-filter[aria-current='page'] {
border-color: var(--tc-accent);
color: var(--tc-fg);
}
/* "Load more" (P1-10): a real button, 44px target, centered under the grid.
The appended cards announce through the route's visually-hidden status
region rather than by moving focus off the control. */
.contentus-load-more {
display: grid;
justify-items: center;
gap: var(--tc-space-3);
margin-top: var(--tc-space-8);
}
.contentus-load-more__button {
min-height: 44px;
padding: var(--tc-space-2) var(--tc-space-6);
border: 1px solid var(--tc-outline);
border-radius: var(--tc-radius-pill);
background: var(--tc-surface-2);
color: var(--tc-fg);
font: inherit;
cursor: pointer;
}
.contentus-load-more__button:hover:not(:disabled) {
border-color: var(--tc-accent);
}
.contentus-load-more__button:disabled {
cursor: default;
color: var(--tc-fg-muted);
}
/* ---- Designed empty / unavailable states ---- */
.contentus-notice {
border: 1px solid var(--tc-outline-variant);
border-left: 3px solid var(--tc-accent);
border-radius: var(--tc-radius-md);
background: var(--tc-surface-1);
padding: var(--tc-space-6);
margin: var(--tc-space-8) 0;
}
.contentus-notice__title {
font-family: var(--tc-font-display);
font-size: var(--tc-fs-h4);
font-weight: var(--tc-w-semibold);
margin: 0 0 var(--tc-space-2) 0;
}
.contentus-notice__body {
color: var(--tc-fg-muted);
margin: 0;
}
.contentus-reader {
max-width: var(--gr-blog-content-max-width);
}
/* =============================================================
Face 2 — review queue (product design §5; contentus-owned, M2d.1)
Only the queue AROUND the cards. Every `.gr-blog-review-*` class the
vendored `Review.QueueCard` / `AttributionStrip` / `VerdictActions`
emit is styled by the blog face's own theme.css, which the site
stylesheet already adopts — unlike `compose` at M3, the `review`
registry entry ships its appearance upstream, so there is no shim
here and nothing for a pin bump to drift away from.
============================================================= */
.contentus-h2 {
font-family: var(--tc-font-display);
font-size: var(--tc-fs-h3);
font-weight: var(--tc-w-semibold);
margin: 0 0 var(--tc-space-4) 0;
}
.contentus-review-group {
border-top: 1px solid var(--tc-outline-variant);
padding-top: var(--tc-space-6);
margin-bottom: var(--tc-space-8);
}
/* The contentus-owned act-as attribution row, below the vendored strip inside
the same panel. The border marks the seam: everything above is the vendored
chrome's; this row is contentus's and disappears with the field. */
.contentus-review-acted-by {
margin-top: var(--tc-space-4);
padding-top: var(--tc-space-4);
border-top: 1px solid var(--tc-outline-variant);
}
/* The act-as banner above the review surfaces. The accent border is the same
signal the selected row on the agents route carries: acting as an agent is
always visible, never a silent restyle. Absence states nothing. */
.contentus-act-as-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--tc-space-2) var(--tc-space-4);
margin: 0 0 var(--tc-space-4);
padding: var(--tc-space-3) var(--tc-space-4);
background: var(--tc-surface-1);
border: 1px solid var(--tc-accent);
border-radius: var(--tc-radius-md);
line-height: 1.55;
}
.contentus-act-as-banner__link {
color: var(--tc-accent);
font-weight: var(--tc-w-semibold);
/* 44px minimum touch target (product design §4). */
min-height: 44px;
display: inline-flex;
align-items: center;
}
.contentus-review-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--tc-space-4);
}
.contentus-review-empty {
color: var(--tc-fg-muted);
max-width: 60ch;
margin: 0;
}
.contentus-review-hint {
color: var(--tc-fg-muted);
margin: var(--tc-space-6) 0;
}
/* ---- Workspace: metadata rail beside the server-rendered preview ----
Desktop is two columns; the mobile single-column form lands with the
segmented control in M2d.4. The rail comes FIRST in the document, so
the stacked order already reads attribution-then-body: knowing who
wrote something changes how the prose reads. */
.contentus-review-workspace {
display: grid;
grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
gap: var(--tc-space-6);
align-items: start;
}
.contentus-review-rail {
display: grid;
gap: var(--tc-space-4);
min-width: 0;
}
.contentus-review-preview {
min-width: 0;
}
.contentus-review-meta {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: var(--tc-space-2) var(--tc-space-4);
margin: 0 0 var(--tc-space-4) 0;
font-size: var(--tc-fs-body-sm);
}
.contentus-review-meta dt {
color: var(--tc-fg-muted);
}
.contentus-review-meta dd {
margin: 0;
overflow-wrap: anywhere;
}
/* The vendored `DefinitionItem` (greater primitives) switches to a two-column
label/value grid — `minmax(0, 14rem) minmax(0, 1fr)` — at 640px VIEWPORT
width. Inside the 22rem rail that leaves the value column roughly one
character wide, and `word-break: break-word` then stacks the attribution a
letter per line. The breakpoint cannot see its container, so in the rail
the strip keeps its stacked (sub-640px) form at every viewport. The
`grid-column` reset matters: the vendored media query pins the label to
column 1 and the content to column 2, which against a single track would
open an implicit second column and recreate the squeeze. */
.contentus-review-rail .gr-definition-item {
grid-template-columns: 1fr;
}
.contentus-review-rail .gr-definition-item__label,
.contentus-review-rail .gr-definition-item__content {
grid-column: auto;
}
.contentus-review-note {
color: var(--tc-fg-muted);
font-size: var(--tc-fs-body-sm);
margin: 0 0 var(--tc-space-2) 0;
}
.contentus-review-errors {
margin: 0;
padding-left: var(--tc-space-6);
color: var(--tc-fg-muted);
font-family: var(--tc-font-mono);
font-size: var(--tc-fs-body-sm);
}
/* ---- Verdict and publish controls (contentus-owned, M2d.3) ----
The vendored `Review.VerdictActions` brings its own appearance from the
blog face theme; these are the contentus controls around it. 44px is a
floor on every one of them, not a preference. */
.contentus-review-verdict {
display: grid;
gap: var(--tc-space-2);
}
.contentus-review-publish {
display: flex;
flex-wrap: wrap;
gap: var(--tc-space-3);
margin-bottom: var(--tc-space-3);
}
.contentus-review-publish__primary,
.contentus-review-publish__secondary {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 var(--tc-space-5);
border-radius: var(--tc-radius-md);
font: inherit;
cursor: pointer;
}
.contentus-review-publish__primary {
border: 1px solid var(--tc-accent);
background: var(--tc-accent);
color: var(--tc-midnight);
font-weight: var(--tc-w-semibold);
}
.contentus-review-publish__secondary {
border: 1px solid var(--tc-outline-variant);
background: transparent;
color: var(--tc-fg);
}
.contentus-review-publish__primary[disabled],
.contentus-review-publish__secondary[disabled] {
opacity: 0.6;
cursor: default;
}
.contentus-review-field {
display: grid;
gap: var(--tc-space-2);
margin: var(--tc-space-4) 0;
}
.contentus-review-field input {
min-height: 44px;
padding: 0 var(--tc-space-3);
border: 1px solid var(--tc-outline-variant);
border-radius: var(--tc-radius-md);
background: var(--tc-surface-1);
color: var(--tc-fg);
font: inherit;
}
.contentus-review-error {
color: var(--tc-fg);
border-left: 3px solid var(--tc-accent);
padding-left: var(--tc-space-3);
margin: var(--tc-space-3) 0 0 0;
font-size: var(--tc-fs-body-sm);
}
/* The decisions sit under both columns on desktop, and become the sticky
bar below. `grid-column: 1 / -1` rather than a third column: a verdict is
about the whole draft, not about one pane of it. */
.contentus-review-actions {
grid-column: 1 / -1;
display: grid;
gap: var(--tc-space-4);
}
/* The segmented control has nothing to switch while both panels are on
screen, so above the breakpoint it is not in the layout at all. */
.contentus-review-segmented {
display: none;
}
/* =============================================================
Single-column workspace (product design §5; M2d.4)
ONE PANEL AT A TIME, NEVER A SPLIT. A split view on a phone is two
columns too narrow to read instead of one that is. `data-panel` on
the workspace root is the only state; this media query is what
decides that it means anything. No script measures the viewport.
============================================================= */
@media (max-width: 960px) {
.contentus-review-workspace {
grid-template-columns: 1fr;
/* Room for the sticky bar and, below it, the tab bar and the home
indicator — so the last line of a preview is readable rather than
permanently behind the controls. */
padding-bottom: calc(
var(--tc-space-20) + var(--contentus-tabbar-height) + var(--contentus-safe-bottom)
);
}
.contentus-review-segmented {
display: flex;
gap: var(--tc-space-2);
margin-bottom: var(--tc-space-4);
padding: var(--tc-space-1);
border: 1px solid var(--tc-outline-variant);
border-radius: var(--tc-radius-pill);
background: var(--tc-surface-1);
}
.contentus-review-segmented__option {
flex: 1;
/* 44px is a floor, not a preference. */
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--tc-radius-pill);
background: transparent;
color: var(--tc-fg-muted);
font: inherit;
cursor: pointer;
}
.contentus-review-segmented__option[aria-pressed='true'] {
background: var(--tc-surface-2);
color: var(--tc-fg);
font-weight: var(--tc-w-semibold);
}
/* The panel the control is not showing is GONE, not merely hidden behind
another: `display: none` keeps it out of the accessibility tree and out
of the tab order, so a screen reader and a keyboard agree with the
painted state. */
.contentus-review-workspace[data-panel='details'] [data-review-panel='preview'],
.contentus-review-workspace[data-panel='preview'] [data-review-panel='details'] {
display: none;
}
/* The decisions stay reachable while a long preview scrolls. A decision
surface that scrolls away is one that gets made from memory. */
.contentus-review-actions {
position: sticky;
bottom: calc(var(--contentus-tabbar-height) + var(--contentus-safe-bottom));
z-index: 2;
gap: var(--tc-space-2);
padding-top: var(--tc-space-2);
background: var(--tc-bg);
border-top: 1px solid var(--tc-outline-variant);
}
}
.contentus-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* =============================================================
Mobile chrome — bottom tab bar, compose FAB, sheet
(product design §4; contentus-owned, M3.1)
-------------------------------------------------------------
greater-components ships no bottom-nav, drawer, or sheet at
greater-v0.11.9 — a planned upstream gap (§7). These rules are the
presentation half of the interim chrome; the components are
`src/lib/shell/MobileTabBar.svelte` and `src/lib/shell/Sheet.svelte`.
SWAP-TO-VENDORED: delete this whole block when greater M3a lands its
mobile-nav components and the two files above become bindings.
Metrics, all from the brand's own scales:
--contentus-tabbar-height 56px bar chrome, excluding the safe area
44px minimum touch target on every tab and the FAB
env(safe-area-inset-bottom) keeps the row clear of a home indicator
No affordance here depends on hover. Every tab carries a permanent text
label beside its icon, current state is `aria-current` plus a painted
indicator, and the hover rules below only add emphasis to something
already legible — which is the rule for a surface whose primary input
has no hover at all.
============================================================= */
:root {
--contentus-tabbar-height: 56px;
--contentus-fab-size: 56px;
--contentus-safe-bottom: env(safe-area-inset-bottom, 0px);
}
.contentus-tabbar {
display: none;
}
.contentus-tabbar__list {
display: flex;
align-items: stretch;
justify-content: space-around;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.contentus-tabbar__item {
flex: 1 1 0;
min-width: 0;
display: flex;
}
.contentus-tabbar__tab {
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
/* 44px minimum touch target (product design §4). */
min-height: 44px;
min-width: 44px;
padding: var(--tc-space-1) var(--tc-space-1);
color: var(--tc-fg-muted);
font-size: var(--tc-fs-label-sm);
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.contentus-tabbar__tab[aria-disabled='true'] {
color: var(--tc-fg-dim);
}
.contentus-tabbar__tab[aria-current='page'] {
color: var(--tc-fg);
}
/* The current-tab indicator is a painted bar, not a colour change alone:
colour is the one signal a reader may not be able to resolve. */
.contentus-tabbar__tab[aria-current='page']::before {
content: '';
position: absolute;
top: 0;
width: 28px;
height: 2px;
border-radius: var(--tc-radius-pill);
background: var(--tc-accent);
}
.contentus-tabbar__label {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contentus-tabbar__upcoming {
font-size: var(--tc-fs-label-sm);
color: var(--tc-fg-dim);
}
.contentus-fab {
display: none;
}
/* ---- Sheet chrome ----
`100svh` (small viewport height) rather than `100vh`: on a phone the
large viewport is the pre-scroll one, so `100vh` puts the sticky action
bar under the browser's own chrome exactly when the keyboard is up and
the submit button is what the reader is reaching for. */
.contentus-sheet-scrim {
position: fixed;
inset: 0;
z-index: 40;
background: color-mix(in srgb, var(--tc-midnight-depth) 72%, transparent);
}
.contentus-sheet {
position: fixed;
z-index: 41;
display: flex;
flex-direction: column;
background: var(--tc-surface-1);
border: 1px solid var(--tc-outline-variant);
box-shadow: var(--tc-shadow-lg);
/* Desktop default: a centered dialog. The mobile full-screen form is the
≤960px override below. */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(640px, calc(100vw - var(--tc-space-8)));
max-height: min(80svh, calc(100svh - var(--tc-space-8)));
border-radius: var(--tc-radius-lg);
}
.contentus-sheet__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--tc-space-4);
padding: var(--tc-space-4) var(--tc-space-5);
border-bottom: 1px solid var(--tc-outline-variant);
}
.contentus-sheet__title {
font-family: var(--tc-font-display);
font-size: var(--tc-fs-h4);
font-weight: var(--tc-w-semibold);
margin: 0;
}
.contentus-sheet__close {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
min-width: 44px;
border: 1px solid transparent;
border-radius: var(--tc-radius-md);
background: transparent;
color: var(--tc-fg-muted);
cursor: pointer;
}
.contentus-sheet__close:hover {
background: var(--tc-surface-2);
color: var(--tc-fg);
}
.contentus-sheet__body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: var(--tc-space-5);
}
.contentus-sheet__actions {
position: sticky;
bottom: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--tc-space-3);
padding: var(--tc-space-4) var(--tc-space-5);
padding-bottom: calc(var(--tc-space-4) + var(--contentus-safe-bottom));
border-top: 1px solid var(--tc-outline-variant);
background: var(--tc-surface-1);
}
/* =============================================================
Breakpoints — sim's proven system (product design §4)
960px: grid collapses to one column; the bottom tab bar takes over
from the sidebar nav
720px: tighter gutters, stacked headers
640px: tab labels tighten, sheet loses its inset
480px: smallest supported phone — labels shrink before targets do
============================================================= */
@media (max-width: 960px) {
.contentus-shell {
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding: 0 var(--tc-space-4);
}
.contentus-sidebar {
position: static;
height: auto;
padding: var(--tc-space-4) 0;
border-right: none;
border-bottom: 1px solid var(--tc-outline-variant);
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--tc-space-4);
}
/* The bottom tab bar is the mobile nav (product design §4), so the sidebar
nav is not also shown — two navigation systems on one small screen is
worse than one. The sidebar collapses to brand + session, which the tab
bar deliberately does not carry.
Review is the one primary destination the four-tab bar has no slot for.
§4 answers that: "tabs carry the unread/review badges" — when M2 lands,
the review count rides the Articles tab (the journal surface it belongs
to) rather than becoming a fifth target that would push every tab under
44px on a 360px screen. */
.contentus-nav {
display: none;
}
.contentus-session {
margin-top: 0;
}
.contentus-account__menu {
/* The sidebar is a top row below 960px, so the menu opens downward,
end-aligned against the session control. */
bottom: auto;
top: calc(100% + var(--tc-space-2));
left: auto;
width: min(260px, calc(100vw - var(--tc-space-8)));
}
.contentus-main {
/* Clear the fixed tab bar and the FAB's overhang, plus the safe area. */
padding: var(--tc-space-8) 0
calc(var(--tc-space-16) + var(--contentus-tabbar-height) + var(--contentus-safe-bottom));
}
.contentus-footer {
/* Single column below 960px; keep the last line clear of the fixed bar. */
grid-column: auto;
padding-bottom: calc(
var(--tc-space-6) + var(--contentus-tabbar-height) + var(--contentus-safe-bottom)
);
}
.contentus-tabbar {
position: fixed;
z-index: 30;
right: 0;
bottom: 0;
left: 0;
display: block;
padding-bottom: var(--contentus-safe-bottom);
border-top: 1px solid var(--tc-outline-variant);
background: var(--tc-surface-1);
box-shadow: var(--tc-shadow-lg);
}
.contentus-tabbar__list {
min-height: var(--contentus-tabbar-height);
/* Leave the middle clear for the FAB without narrowing any tab: the two
centre items keep their full width and the FAB floats above them. */
padding: 0 var(--tc-space-2);
}
.contentus-fab {
position: fixed;
z-index: 31;
left: 50%;
bottom: calc(
var(--contentus-tabbar-height) - var(--contentus-fab-size) / 2 + var(--contentus-safe-bottom)
);
transform: translateX(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--contentus-fab-size);
height: var(--contentus-fab-size);
border: 1px solid var(--tc-outline);
border-radius: var(--tc-radius-pill);
background: var(--tc-core-blue);
color: var(--tc-midnight);
box-shadow: var(--tc-shadow-lg);
text-decoration: none;
}
.contentus-fab[aria-disabled='true'] {
background: var(--tc-surface-2);
color: var(--tc-fg-dim);
}
/* Full-screen sheet on mobile: the composer is the highest-frequency
mobile write path, and a centered dialog wastes the screen it needs. */
.contentus-sheet {
top: auto;
left: 0;
right: 0;
bottom: 0;
transform: none;
width: 100%;
height: 100svh;
max-height: 100svh;
border: none;
border-radius: 0;
}
}
@media (max-width: 720px) {
.contentus-h1 {
font-size: var(--tc-fs-h2);
line-height: var(--tc-lh-h2);
}
.contentus-main {
padding: var(--tc-space-6) 0
calc(var(--tc-space-12) + var(--contentus-tabbar-height) + var(--contentus-safe-bottom));
}
.contentus-sheet__header,
.contentus-sheet__body,
.contentus-sheet__actions {
padding-left: var(--tc-space-4);
padding-right: var(--tc-space-4);
}
}
@media (max-width: 640px) {
.contentus-shell {
padding: 0 var(--tc-space-3);
}
.contentus-tabbar__list {
padding: 0;
}
.contentus-tabbar__upcoming {
/* The milestone marker is the first thing to go: the label and the
target matter more than the note, and the sidebar still states it. */
display: none;
}
}
@media (max-width: 480px) {
.contentus-shell {
padding: 0 var(--tc-space-2);
}
/* Labels shrink; touch targets do not. 44px is a floor, not a preference. */
.contentus-tabbar__label {
font-size: var(--tc-fs-label-sm);
letter-spacing: -0.01em;
}
.contentus-tabbar__tab {
padding-left: 0;
padding-right: 0;
}
}
/* ===== contentus compose theme — appearance for upstream class contract ===== */
/* =============================================================
Compose theme — interim consumption layer
-------------------------------------------------------------
WHY THIS FILE EXISTS, and when it should stop existing.
`greater add compose` vendors twelve Svelte components plus their
utilities and NO stylesheet. The registry record for the `compose`
shared module (`packages/cli/src/registry/shared.ts`) lists only
`component`, `types`, and `utils` files — there is no `styles` entry —
while every `.compose-*` class those components emit is defined in
`packages/faces/social/src/theme.css`, which is only reachable by
installing the entire social face. The same holds for the
`media-composer`, `poll-composer`, and `custom-emoji-picker` patterns.
So a consumer that vendors the compose module the way the CLI offers it
gets working components with no appearance at all. Installing the whole
social face to obtain its stylesheet would drag in timeline, status,
profile, lists, filters, hashtags, messaging, and admin — modules
milestones 4 through 6 own, none of them verified SSR-safe here, plus a
virtualisation dependency contentus does not use. That is not a narrower
fix than this file; it is a much wider one.
This layer is therefore contentus's own appearance for upstream's class
contract. It is APPEARANCE ONLY: no rule here changes what a component
does, what it emits, or how it behaves. Anything that would, belongs
upstream.
SUNSET: delete this file and its layer in `scripts/build-stylesheet.mjs`
when the `greater` CLI emits per-module CSS for the shared and pattern
registry records — routed upstream as the M3 consumption finding.
Values resolve to `--tc-*` and `--gr-*` tokens only; like `bridge.css`,
this file contains no brand literals of its own.
============================================================= */
/* =============================================================
Pattern variable bridge
-------------------------------------------------------------
The `media-composer`, `poll-composer`, and `custom-emoji-picker`
patterns DO ship styles — Svelte `