/* ============================================================ Something From Nothing — "Editorial Carbon" design system ------------------------------------------------------------ IBM Plex Serif display type over a sharp, 1px-ruled Carbon- style surface system. Paper-grain light theme, ink dark theme. Accent: IBM blue #0f62fe (light) / Carbon blue-40 #78a9ff (dark). Theme switching: set pre-paint. The class API is stable — pages style themselves with these. ============================================================ */ /* ---------- Design tokens ---------- */ :root { /* Type families. Display was IBM Plex Serif originally; switched to the sans stack for a friendlier, social-feed feel (bold sans titles). */ --font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --font-display: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'Consolas', monospace; /* Brand constants (theme-independent) */ --avatar-yellow: #F2C94C; --modal-scrim: rgba(13, 13, 18, 0.62); /* Spacing scale (4px baseline) */ --space-xs: 4px; --space-s: 8px; --space-m: 12px; --space-l: 16px; --space-xl: 20px; --space-xxl: 24px; --space-xxxl: 32px; /* Radius scale — deliberately tight: sharp, editorial */ --radius-s: 2px; --radius-m: 4px; --radius-l: 6px; --radius-xl: 8px; --radius-pill: 999px; /* Surface border thickness — themeable so brutalist palettes can go chunky. */ --surface-border-width: 1px; /* Type scale */ --font-display-size: 32px; --font-title: 21px; --font-heading: 17px; --font-body: 14px; --font-caption: 12px; --font-small: 11px; /* Motion */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 110ms; --dur-med: 220ms; /* Mobile tab bar height (incl. top border) — single source of truth for everything that docks against it (like bars, sticky footers). */ --tab-bar-height: 61px; /* Desktop sidebar rail width — fixed bottom bars offset past it. */ --sidebar-width: 232px; /* Desktop content-column geometry — one source of truth shared by .app-content, the narrow reading column, and the fixed docked action bars, so the Like/Nope bar always lines up under the reading column. */ --content-max: 1080px; --content-gutter: 40px; --reading-max: 720px; /* Height of a fixed top navigation bar (layouts.css sets this for the Top Bar layout). Sticky page headers offset below it. */ --topnav-height: 0px; } :root, [data-theme="light"] { --accent: #0f62fe; --accent-hover: #0043ce; --accent-text: #ffffff; --accent-soft: #edf5ff; /* Carbon blue-10: tints, hovers, selected */ --accent-soft-border: #d0e2ff; --accent-secondary: #dfd8f7; /* heritage lavender — idea hero avatars */ --page-bg: #f6f6f3; /* warm paper */ --page-dots: rgba(22, 22, 26, 0.05); --text: #16161a; --text-secondary: #5d5d66; --text-disabled: #a8a8b0; --card-bg: #ffffff; --card-stroke: #e2e2dc; --card-stroke-hover: #0f62fe; --surface-alt: #eeeee9; /* inset panels, wells */ --divider: #e7e7e1; --nav-bg: #fbfbf9; --nav-border: #e2e2dc; --nav-selected: #0f62fe; --nav-unselected: #5d5d66; --pill-bg: #eeeee9; --pill-text: #3c3c44; --dislike-red: #da1e28; --dislike-red-soft: #fff1f1; --interested-green: #198038; --interested-green-soft: #defbe6; --entry-bg: #ffffff; --entry-border: #c9c9c2; --entry-placeholder: #a0a0a8; --input-focus-ring: rgba(15, 98, 254, 0.18); --chat-bubble-theirs: #eeeee9; --chat-bubble-mine: #0f62fe; --chat-bubble-mine-text: #ffffff; --chat-input-bg: #fbfbf9; --chat-input-border: #c9c9c2; --button-disabled-bg: #e2e2dc; --button-disabled-text: #a8a8b0; --segment-bg: #eeeee9; --segment-stroke: #d8d8d1; --overlay-bg: #ffffff; --panel-header-bg: #f6f6f3; --panel-stroke: #e2e2dc; --skeleton-block: #e9e9e3; --empty-icon-bg: #eeeee9; --spinner: #0f62fe; --back-button-text: #5d5d66; --shadow-raise: 0 2px 6px rgba(22, 22, 26, 0.05), 0 12px 28px rgba(22, 22, 26, 0.07); --shadow-overlay: 0 8px 24px rgba(22, 22, 26, 0.16), 0 24px 64px rgba(22, 22, 26, 0.18); } [data-theme="dark"] { --accent: #78a9ff; /* Carbon blue-40 — cohesive with brand blue */ --accent-hover: #a6c8ff; --accent-text: #101014; --accent-soft: #1a2540; --accent-soft-border: #2c3d66; --accent-secondary: #3b3557; --page-bg: #101014; /* deep ink */ --page-dots: rgba(242, 242, 239, 0.045); --text: #f2f2ef; --text-secondary: #9d9da8; --text-disabled: #55555e; --card-bg: #191920; --card-stroke: #2b2b34; --card-stroke-hover: #78a9ff; --surface-alt: #20202a; --divider: #26262f; --nav-bg: #14141a; --nav-border: #26262f; --nav-selected: #78a9ff; --nav-unselected: #9d9da8; --pill-bg: #23232c; --pill-text: #c9c9d2; --dislike-red: #fa4d56; --dislike-red-soft: #35191c; --interested-green: #42be65; --interested-green-soft: #16281c; --entry-bg: #14141a; --entry-border: #3a3a45; --entry-placeholder: #6c6c78; --input-focus-ring: rgba(120, 169, 255, 0.22); --chat-bubble-theirs: #23232c; --chat-bubble-mine: #0f62fe; --chat-bubble-mine-text: #ffffff; --chat-input-bg: #14141a; --chat-input-border: #3a3a45; --button-disabled-bg: #26262f; --button-disabled-text: #6c6c78; --segment-bg: #14141a; --segment-stroke: #33333e; --overlay-bg: #1c1c24; --panel-header-bg: #14141a; --panel-stroke: #33333e; --skeleton-block: #23232c; --empty-icon-bg: #23232c; --spinner: #78a9ff; --back-button-text: #9d9da8; --shadow-raise: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.4); --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.55); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-ui); font-size: var(--font-body); line-height: 1.55; color: var(--text); background-color: var(--page-bg); /* faint editorial dot grid — atmosphere without noise */ background-image: radial-gradient(var(--page-dots) 1px, transparent 1px); background-size: 26px 26px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; font-weight: 600; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img { max-width: 100%; } h1:focus { outline: none; } ::selection { background: var(--accent); color: var(--accent-text); } /* Carbon-style focus ring on keyboard nav */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Typography ---------- */ .page-title { font-family: var(--font-display); /* Fluid: shrinks on narrow phones so titles fit beside header actions instead of ellipsizing; caps at the display size from ~530px up. */ font-size: clamp(21px, 6vw, var(--font-display-size)); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; } /* The signature mark: a short blue rule under page titles */ .page-title.ruled::after { content: ""; display: block; width: 34px; height: 4px; margin-top: 10px; background: var(--accent); } .card-title { font-family: var(--font-display); font-size: var(--font-title); font-weight: 600; line-height: 1.25; } .section-header { font-size: var(--font-heading); font-weight: 600; letter-spacing: -0.005em; } .caption { font-size: var(--font-caption); color: var(--text-secondary); } /* Mono meta label — timestamps, sectors, hrs/week, wizard steps */ .meta-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); } /* Intro screens (login / registration) */ .intro-title { font-family: var(--font-display); font-size: clamp(34px, 5vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; color: var(--text); } .intro-title .accent, .intro-title.accent { color: var(--accent); } .intro-subtitle { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--font-body); font-weight: 500; border: none; border-radius: var(--radius-s); /* near-square: the Carbon heritage */ padding: 10px 18px; min-height: 44px; min-width: 44px; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .btn:active:not(:disabled) { transform: scale(0.985); } .btn:disabled { cursor: default; } .btn-blue { background: var(--accent); color: var(--accent-text); } .btn-blue:hover:not(:disabled) { background: var(--accent-hover); } .btn-blue:disabled { background: var(--button-disabled-bg); color: var(--button-disabled-text); } .btn-white { background: var(--card-bg); color: var(--accent); border: 1px solid var(--accent); } .btn-white:hover:not(:disabled) { background: var(--accent-soft); } .btn-white:disabled { background: var(--button-disabled-bg); color: var(--button-disabled-text); border-color: transparent; } /* Quiet tertiary button */ .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--entry-border); } .btn-ghost:hover:not(:disabled) { border-color: var(--text); } .btn-ghost:disabled { color: var(--text-disabled); border-color: var(--divider); } /* Outlined action buttons (browse cards, like bar) */ .btn-action { height: 42px; border-radius: var(--radius-s); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; border: 1px solid currentColor; background: transparent; padding: 0 12px; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn-action:active:not(:disabled) { transform: scale(0.985); } .btn-action:disabled { opacity: 0.45; cursor: default; } .btn-action-primary { color: var(--text); } .btn-action-primary:hover:not(:disabled) { background: var(--surface-alt); } .btn-action-interested { color: var(--interested-green); } .btn-action-interested:hover:not(:disabled) { background: var(--interested-green-soft); } .btn-action-interested.is-active { background: var(--interested-green); color: #ffffff; border-color: var(--interested-green); } .btn-action-dislike { color: var(--dislike-red); } .btn-action-dislike:hover:not(:disabled) { background: var(--dislike-red-soft); } .btn-danger { background: var(--dislike-red); color: #ffffff; font-weight: 600; border: none; border-radius: var(--radius-s); padding: 10px 18px; min-height: 44px; transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn-danger:hover:not(:disabled) { filter: brightness(1.08); } .btn-danger:active:not(:disabled) { transform: scale(0.985); } .btn-text { background: transparent; border: none; color: var(--text); padding: 8px 0; font-size: var(--font-body); font-weight: 500; text-align: left; transition: color var(--dur-fast) var(--ease-out); } .btn-text:hover { color: var(--accent); } .btn-back { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: none; color: var(--back-button-text); font-size: 14px; padding: 8px 0; transition: color var(--dur-fast) var(--ease-out); } .btn-back:hover { color: var(--text); } /* Icon-only buttons (bell, settings, back arrow, dismiss X) */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--radius-s); padding: 8px; margin: -8px; /* keep >=44px hit area without visual bulk */ color: var(--text); transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .icon-btn:hover:not(:disabled) { color: var(--accent); } .icon-btn:active:not(:disabled) { opacity: 0.7; } .icon-btn:disabled { opacity: 0.4; cursor: default; } /* ---------- Icons ---------- */ .icon { display: inline-flex; flex-shrink: 0; line-height: 0; } .icon svg { width: 100%; height: 100%; fill: currentColor; } .icon-accent { color: var(--accent); } /* ---------- Cards & surfaces ---------- */ /* Flat token card — quiet section surface */ .section-card { background: var(--card-bg); border: var(--surface-border-width) solid var(--card-stroke); border-radius: var(--radius-l); padding: var(--space-xl); } /* Interactive list card (browse feeds): 1px rule, hover raises + accent edge */ .list-card { background: var(--card-bg); border: var(--surface-border-width) solid var(--card-stroke); border-radius: var(--radius-l); padding: var(--space-xl); transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); } .list-card:hover { border-color: var(--accent-soft-border); box-shadow: var(--shadow-raise); transform: translateY(-2px); } /* Home dashboard tile */ .tile-card { background: var(--card-bg); border: var(--surface-border-width) solid var(--card-stroke); border-radius: var(--radius-l); padding: var(--space-xl); min-height: 140px; text-align: left; transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); } .tile-card:hover { border-color: var(--card-stroke-hover); box-shadow: var(--shadow-raise); transform: translateY(-2px); } .divider { height: 1px; background: var(--divider); border: none; margin: 0; } /* Pressable feedback for tappable non-button surfaces */ .pressable { cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .pressable:active { transform: scale(0.985); opacity: 0.92; } /* Staggered entrance for card lists: parent gets .stagger */ @keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* 'backwards' (not 'both') so the retained end-keyframe doesn't pin transform and suppress hover translateY on cards after entry. */ .stagger > * { animation: rise-in 420ms var(--ease-out) backwards; } .stagger > *:nth-child(1) { animation-delay: 0ms; } .stagger > *:nth-child(2) { animation-delay: 45ms; } .stagger > *:nth-child(3) { animation-delay: 90ms; } .stagger > *:nth-child(4) { animation-delay: 135ms; } .stagger > *:nth-child(5) { animation-delay: 180ms; } .stagger > *:nth-child(6) { animation-delay: 225ms; } .stagger > *:nth-child(n+7) { animation-delay: 260ms; } @media (prefers-reduced-motion: reduce) { .stagger > * { animation: none; } .list-card, .tile-card, .btn, .pressable { transition: none; } .stepper-seg.active::after { animation: none; transition: none; } .modal-card, .action-sheet, .notif-panel { animation: none; } } /* ---------- Pills ---------- */ .pill { display: inline-block; background: var(--pill-bg); color: var(--pill-text); border-radius: var(--radius-s); padding: 3px 9px; font-size: 12px; font-weight: 500; margin: 0 6px 6px 0; } /* Mono variant for hrs/week, remote, sector meta */ .pill-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; } .pill-row { display: flex; flex-wrap: wrap; } /* ---------- Inputs ---------- */ /* NB: no `select.entry` here — an element-qualified selector (0,1,1) would out-specify `.entry-filled` (0,1,0) and strip the border off boxed