/*
* platform.css — HFIV3 Ads Portal shared design tokens
* Aesthetic: editorial, calm, minimal chrome.
* The ad imagery carries the visual weight; the UI stays quiet.
*
* Usage:
*
* Google Fonts required in the page (already in this file via @import):
* Instrument Sans 400/500/600 — body + UI
* DM Mono 400/500 — labels, codes, scores
*
* Token reference:
* --p-bg warm cream background (#f1f0ee)
* --p-fg near-black foreground (#1d1d1d)
* --p-card white card surface (#ffffff)
* --p-muted soft warm grey (#e8e6e3)
* --p-muted-fg muted text (#6b6966)
* --p-accent neutral foreground alias (pure b/w — no terracotta)
* --p-border subtle warm border (#d9d7d4)
* --p-radius base border-radius (4px)
*
* Utility classes:
* .platform-page — full-page layout (cream bg, centered)
* .platform-card — white card with border + subtle shadow
* .platform-label — mono uppercase label (small caps style)
* .platform-input — text / number input field
* .platform-textarea — multiline textarea
* .platform-button — primary filled button (near-black)
* .platform-button-ghost — ghost/outline button
* .platform-divider — 1px warm horizontal rule
*/
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');
/* ===== Tokens ===== */
:root {
--p-bg: #f1f0ee;
--p-fg: #1d1d1d;
--p-card: #ffffff;
--p-muted: #e8e6e3;
--p-muted-fg: #6b6966;
--p-accent: #1d1d1d; /* was terracotta #c4653a — pure b/w, equals --p-fg */
--p-border: #d9d7d4;
--p-radius: 4px;
/* semantic aliases */
--p-font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
--p-font-mono: 'DM Mono', ui-monospace, monospace;
}
/* ===== Reset ===== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ===== Base ===== */
/*
* .platform-page
* Full-viewport page wrapper. Applies background, foreground and font.
* Add to or a top-level wrapper.
*/
.platform-page {
background: var(--p-bg);
color: var(--p-fg);
font-family: var(--p-font-sans);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
/*
* .platform-card
* White surface card on the cream background.
* Subtle 1px border + soft box-shadow to lift it without drama.
*/
.platform-card {
background: var(--p-card);
border: 1px solid var(--p-border);
border-radius: var(--p-radius);
box-shadow: 0 1px 3px rgba(29, 29, 29, 0.06);
overflow: hidden;
}
/*
* .platform-label
* Mono uppercase micro-label. Used for field labels, metadata tags,
* eyebrows, and badge text.
*/
.platform-label {
font-family: var(--p-font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--p-muted-fg);
display: block;
}
/*
* .platform-input
* Single-line text / email / number input.
* Cream bg, warm border, near-black focus ring.
*/
.platform-input {
width: 100%;
padding: 10px 12px;
background: var(--p-bg);
border: 1px solid var(--p-border);
border-radius: var(--p-radius);
color: var(--p-fg);
font-family: var(--p-font-sans);
font-size: 15px;
outline: none;
transition: border-color 0.15s;
}
.platform-input:focus {
border-color: var(--p-fg);
}
.platform-input::placeholder {
color: var(--p-muted-fg);
}
/*
* .platform-textarea
* Multiline textarea. Same tokens as .platform-input.
*/
.platform-textarea {
width: 100%;
padding: 10px 12px;
background: var(--p-bg);
border: 1px solid var(--p-border);
border-radius: var(--p-radius);
color: var(--p-fg);
font-family: var(--p-font-sans);
font-size: 14px;
line-height: 1.55;
resize: vertical;
outline: none;
transition: border-color 0.15s;
min-height: 72px;
}
.platform-textarea:focus {
border-color: var(--p-fg);
}
.platform-textarea::placeholder {
color: var(--p-muted-fg);
}
/*
* .platform-button
* Primary filled action button. Background: near-black.
*/
.platform-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
background: var(--p-fg);
color: #ffffff;
border: 1px solid var(--p-fg);
border-radius: var(--p-radius);
font-family: var(--p-font-sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: opacity 0.15s;
text-decoration: none;
}
.platform-button:hover {
opacity: 0.88;
}
.platform-button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/*
* .platform-button-ghost
* Ghost / outline button. No fill, warm border, near-black on hover.
*/
.platform-button-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
background: transparent;
color: var(--p-fg);
border: 1px solid var(--p-border);
border-radius: var(--p-radius);
font-family: var(--p-font-sans);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
text-decoration: none;
}
.platform-button-ghost:hover {
border-color: var(--p-fg);
}
/*
* .platform-divider
* 1px warm horizontal rule.
*/
.platform-divider {
border: none;
border-top: 1px solid var(--p-border);
margin: 0;
}
/* ===== Extended tokens for brand-dashboards =====
*
* The core tokens above cover ad-review portals. Brand-dashboards (BIC and
* future ones) need a slightly richer set: a secondary card tone, a "soft"
* background for nested panels, and stronger / fainter ink + border shades
* for hover states, dividers and meta-text.
*
* These mirror the variable names that the (originally dark-mode) BIC chrome
* relied on (`--bg-soft`, `--card-2`, `--ink-soft`, `--ink-faint`,
* `--border-strong`), so any new brand dashboard can adopt the warm-editorial
* look with a one-block var-remap inside its