/* * platform.css — HFIV3 Ads Portal shared design tokens * Aesthetic: warm 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 terracotta single warm accent (#c4653a) * --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 (accent) * .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: #c4653a; --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, terracotta 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-accent); } .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-accent); } .platform-textarea::placeholder { color: var(--p-muted-fg); } /* * .platform-button * Primary filled action button. Background: terracotta accent. */ .platform-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; background: var(--p-accent); color: #ffffff; border: 1px solid var(--p-accent); 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, accent color 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; }