/*
* Tokens from the BarkleyOKRP Internal Design System. Fonts are the
* system's settled Google Font equivalents (Figtree = Söhne, DM Mono =
* Söhne Mono, Libre Baskerville = Self Modern), loaded from layout.php's
* - the DS explicitly says not to swap in licensed Söhne binaries.
*/
:root {
color-scheme: light;
/* Primary palette - the whole UI */
--bokrp-black: #000000;
--bokrp-cream: #FFF8EE;
--bokrp-orange: #FF501C;
--bokrp-juice: #FBB832;
/* Neutrals derived from black on cream */
--gray-hairline: #E2DACE;
--gray-rule: #CFC5B6;
--gray-muted: #6E675E;
--gray-faint: #F4ECE0;
--gray-chrome-line: #2A2A2A;
--gray-chrome-mute: #9A948C;
/* Surfaces - depth is a tint change, never a shadow */
--surface-page: var(--bokrp-cream);
--surface-raised: #FFFCF7;
--surface-sunken: var(--gray-faint);
--surface-chrome: var(--bokrp-black);
--surface-field: #FFFFFF;
--surface-selected: #FFE9D9;
/* Data palette - tables/charts categorization only, never chrome,
buttons or status */
--data-blue: #3E8CF0;
--data-pink: #FFCBF6;
--data-green: #A0A404;
/* Typography */
--font-core: "Figtree", system-ui, sans-serif;
--font-mono: "DM Mono", ui-monospace, monospace;
--font-quote: "Libre Baskerville", Georgia, serif;
--track-tight: -0.02em;
--track-caps: 0.08em;
--track-wide: 0.12em;
/* Spacing / control metrics */
--gutter: 24px;
--control-h: 36px;
--control-h-sm: 28px;
--chrome-h: 56px;
/* Borders & radii - flat, small, structural */
--radius-1: 2px;
--radius-2: 4px;
/* Motion - minimal and functional */
--transition-control: background-color 90ms cubic-bezier(.2, 0, .2, 1),
color 90ms cubic-bezier(.2, 0, .2, 1),
border-color 90ms cubic-bezier(.2, 0, .2, 1);
/*
* Legacy aliases - the names the rest of this stylesheet grew up with,
* now pointing at DS tokens. New rules should use the DS names above.
* The old red/amber "danger/warning" pairs map into the DS's no-red
* status model: errors are orange, warnings are juice, blocks are black.
*/
--color-bg: var(--surface-sunken);
--color-surface: var(--surface-raised);
--color-text: var(--bokrp-black);
--color-text-muted: var(--gray-muted);
--color-border: var(--gray-hairline);
--color-border-strong: var(--gray-rule);
--color-accent: var(--bokrp-orange);
--color-accent-text: var(--bokrp-orange);
--color-highlight: var(--bokrp-juice);
--color-danger: var(--bokrp-orange);
--color-danger-bg: var(--surface-selected);
--color-danger-border: var(--bokrp-orange);
--color-warning-bg: var(--bokrp-juice);
--color-warning-text: var(--bokrp-black);
--color-warning-strong-bg: var(--bokrp-orange);
--color-warning-strong-text: var(--bokrp-black);
--font-heading: var(--font-core);
--font-body: var(--font-core);
--font-emphasis: var(--font-quote);
/* interaction */
--focus-ring: 2px solid var(--bokrp-orange);
--transition-quick: 90ms cubic-bezier(.2, 0, .2, 1);
}
* {
box-sizing: border-box;
}
/* The UA's [hidden] { display: none } loses to ANY author display rule
(e.g. a display:flex overlay or notice), which is exactly how the comment
panel could never visually close and the orphan-exclusions notice showed
while hidden (UX audit B1). One blanket rule ends the whole bug class:
the hidden attribute always wins. */
[hidden] {
display: none !important;
}
html {
-webkit-font-smoothing: antialiased;
}
body {
margin: 0;
font-family: var(--font-core);
font-weight: 400;
font-size: 14px;
line-height: 1.45;
background: var(--surface-page);
color: var(--bokrp-black);
text-wrap: pretty;
}
/* DS dense-UI scale: h1 30 / h2 24 / h3 19, ExtraBold, tight tracking. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-core);
font-weight: 800;
letter-spacing: var(--track-tight);
line-height: 1.15;
}
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
/* Links are orange, underlined; hover shifts the text to black and keeps
the orange underline (DS base.css). */
a {
color: var(--bokrp-orange);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: var(--transition-control);
}
a:hover {
color: var(--bokrp-black);
text-decoration-color: var(--bokrp-orange);
}
::selection {
background: var(--bokrp-juice);
color: var(--bokrp-black);
}
/* Native checkboxes/radios take the DS's black checked state (Checkbox.jsx:
black fill, cream check) instead of the browser-default blue. */
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--bokrp-black);
}
/* All figures, IDs and dates use mono with tabular figures so columns align. */
.num,
td.num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* One visible keyboard-focus treatment for everything interactive:
2px orange ring, offset 1px (DS interaction states). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
}
/*
* Chrome: black top bar carrying cream text (DS "chrome vs content").
* Cream is the content field below; the bar holds the BarkleyOKRP lockup,
* a divider, the tool name as a mono label, then nav.
*/
.site-header {
border-bottom: 1px solid var(--gray-chrome-line);
background: var(--surface-chrome);
color: var(--bokrp-cream);
}
.site-nav {
min-height: var(--chrome-h);
padding: 8px var(--gutter);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
}
.site-nav a {
color: var(--bokrp-cream);
text-decoration: none;
font-family: var(--font-mono);
font-weight: 500;
font-size: 11px;
text-transform: uppercase;
letter-spacing: var(--track-caps);
transition: var(--transition-control);
}
.site-nav a:hover {
color: var(--bokrp-juice);
}
.site-nav__brand {
display: inline-flex;
align-items: center;
gap: 16px;
margin-right: auto;
}
.site-nav__logo {
height: 16px;
width: auto;
display: block;
}
.site-nav__divider {
width: 1px;
height: 20px;
background: var(--gray-chrome-line);
}
.site-nav__tool {
color: var(--bokrp-cream);
}
.site-nav__user {
color: var(--gray-chrome-mute);
}
.site-nav a.site-nav__user:hover {
color: var(--bokrp-cream);
}
.site-nav__logout {
margin: 0;
display: inline;
}
/* Content field: full width and left-aligned - no centered narrow column
(DS layout rules). */
.site-main {
padding: var(--gutter);
}
.flash {
margin: 16px var(--gutter) 0;
padding: 0.75rem 1rem;
border-radius: var(--radius-2);
border: 1px solid var(--gray-hairline);
background: var(--surface-raised);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.flash__message {
word-break: break-word;
}
.flash__copy {
flex-shrink: 0;
background: transparent;
color: var(--color-text);
border: 1px solid var(--color-border-strong);
padding: 0.3rem 0.7rem;
font-size: 0.85rem;
}
/* No red/green pair in this system: errors are orange on the selected
tint, success is reported neutrally in black ("state the fact"). */
.flash--error {
background: var(--surface-selected);
border-color: var(--bokrp-orange);
color: var(--bokrp-black);
}
.flash--success {
background: var(--surface-sunken);
border-color: var(--gray-rule);
color: var(--bokrp-black);
}
.panel {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-2);
padding: 1.5rem;
}
.panel--error h1 {
color: var(--color-danger);
}
/*
* Buttons per the DS Button spec: mono, uppercase, tracked caps, 4px
* radius, flat. Primary = orange fill with BLACK text (filled orange never
* takes white/cream text); hover darkens the fill, press darkens further -
* no lift, no shadow.
*/
.button,
button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--control-h);
font-family: var(--font-mono);
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
letter-spacing: var(--track-caps);
background: var(--bokrp-orange);
color: var(--bokrp-black);
border: 1px solid var(--bokrp-orange);
border-radius: var(--radius-2);
padding: 0 14px;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: var(--transition-control);
}
/* :where() keeps these at zero specificity so any component's own button
styling (transparent icon buttons, secondary buttons, …) wins over them. */
:where(.button, button):hover {
background: #E8410F;
border-color: #E8410F;
color: var(--bokrp-black);
}
:where(.button, button):active {
background: #D0380C;
border-color: #D0380C;
}
.site-nav__logout button {
background: transparent;
color: var(--bokrp-cream);
border: 1px solid var(--gray-chrome-line);
min-height: var(--control-h-sm);
padding: 0 10px;
font-size: 11px;
}
.site-nav__logout button:hover {
background: #141414;
border-color: var(--gray-chrome-mute);
color: var(--bokrp-cream);
}
/*
* Text-like and glyph buttons: undo the mono-uppercase control treatment.
* These render user content (field names, menu items) or a single glyph
* (remove ×, collapse ▸), where uppercasing/tracking would mangle the text
* and the 36px control height would inflate dense list rows.
*/
.builder__field-name,
.actions-more__item,
.builder__reorder-button,
.builder__value-remove,
.channel-row__collapse,
.channel-row__remove,
.format-row__remove,
.comment-panel__close {
font-family: var(--font-core);
font-size: inherit;
text-transform: none;
letter-spacing: normal;
min-height: 0;
}
.panel + .panel {
margin-top: 1.5rem;
}
/* Outline variant: hairline black boundary, sunken cream on hover. */
.button--secondary {
background: transparent;
color: var(--bokrp-black);
border: 1px solid var(--bokrp-black);
}
.button--secondary:hover {
background: var(--surface-sunken);
color: var(--bokrp-black);
border-color: var(--bokrp-black);
}
.button--secondary:active {
background: var(--gray-hairline);
}
.field {
margin-bottom: 1rem;
}
/* Labels are nouns set as mono caps (DS Field spec). */
.field label {
display: block;
font-family: var(--font-mono);
font-weight: 500;
font-size: 11px;
text-transform: uppercase;
letter-spacing: var(--track-caps);
margin-bottom: 6px;
}
/* Fields sit on white, bounded by the rule gray; focus darkens the border
to black (the global focus-visible rule adds the orange ring). */
.field input[type="text"],
.field input[type="date"],
.field input[type="file"],
.field select,
.field textarea {
width: 100%;
max-width: 420px;
padding: 0.5rem 10px;
border: 1px solid var(--gray-rule);
border-radius: var(--radius-2);
font-family: var(--font-core);
font-size: 13px;
background: var(--surface-field);
color: var(--bokrp-black);
transition: var(--transition-control);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
border-color: var(--bokrp-black);
}
.field__error {
color: var(--bokrp-orange);
font-weight: 500;
font-size: 12px;
margin: 0.25rem 0 0;
}
.filters {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: flex-end;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-border);
}
.filters .field {
margin-bottom: 0;
}
.field--actions {
display: flex;
gap: 0.5rem;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
text-align: left;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--gray-hairline);
font-size: 13px;
}
/* Column heads are mono micro-labels over a rule-weight border
(DS DataTable spec). */
.table th {
font-family: var(--font-mono);
font-weight: 500;
font-size: 10px;
text-transform: uppercase;
letter-spacing: var(--track-caps);
color: var(--gray-muted);
border-bottom-color: var(--gray-rule);
}
.table tbody tr {
transition: var(--transition-control);
}
.table tbody tr:hover {
background: var(--surface-sunken);
}
/* Numeric cells: right-aligned mono with tabular figures so columns align. */
.table__num {
text-align: right;
font-family: var(--font-mono);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
/* Action cells hold a link + a form (forms are block-level and would
otherwise stack) - lay them out inline. */
.table__actions {
white-space: nowrap;
}
.table__actions .actions__form {
display: inline-block;
margin-left: 0.4rem;
}
/* Wide tables scroll inside their own container instead of stretching the
page (no page-level horizontal scroll on narrow screens). */
.table-wrap {
overflow-x: auto;
}
.empty-state {
color: var(--color-text-muted);
background: var(--color-bg);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-2);
padding: 1rem;
}
/* Dashboard-style heading row: page title + primary action side by side. */
.page-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.page-heading h1 {
margin: 0;
}
/*
* Badges per the DS Badge spec: 20px, 2px radius (not a pill), mono caps.
* Status is built from primaries - orange = active/needs action, juice =
* pending, black = done, hairline outline = idle/draft. The secondary
* blue/pink/green palette never appears in status indicators.
*/
.badge {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 7px;
border-radius: var(--radius-1);
border: 1px solid var(--gray-hairline);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--track-caps);
white-space: nowrap;
background: var(--surface-sunken);
color: var(--bokrp-black);
}
.badge--status-draft {
background: transparent;
border-color: var(--gray-rule);
color: var(--gray-muted);
}
.badge--status-active {
background: var(--bokrp-orange);
border-color: var(--bokrp-orange);
color: var(--bokrp-black);
}
.badge--status-in-review {
background: var(--bokrp-juice);
border-color: var(--bokrp-juice);
color: var(--bokrp-black);
}
.badge--status-approved {
background: var(--bokrp-black);
border-color: var(--bokrp-black);
color: var(--bokrp-cream);
}
.badge--status-archived {
background: transparent;
border-color: var(--gray-rule);
color: var(--gray-muted);
}
.actions {
display: flex;
gap: 0.75rem;
align-items: flex-start;
flex-wrap: wrap;
margin-top: 1rem;
}
.actions__form {
margin: 0;
}
/* ============================================================
Reels-specific styles below. Everything above is the shared
BarkleyOKRP Internal Design System foundation from kaleido.
============================================================ */
/* This app writes fields as (one element, no for/id bookkeeping) - give the label
the same DS treatment kaleido's block