/* qbit404 — Signal (light) + Obsidian (dark) theme layer. * Loaded AFTER the base Tailwind bundle so it takes precedence. * Toggle by setting data-theme="light" or "dark" on . */ /* ─────────── Base-bundle token bridge ─────────── * The compiled Tailwind bundle uses a fixed dark palette via --c-*. * We remap those tokens per theme so EVERY rule in the base bundle * (news-row, ticker, inputs, borders, textareas…) follows the theme * without needing an individual override per class. */ :root[data-theme="light"] { --c-canvas: #f7f6f2; --c-surface: #ffffff; --c-surface-2: #eceae4; --c-surface-3: #ebe5d9; --c-border: #deded8; --c-border-hi: #c9c9c1; --c-text: #171817; --c-text-2: #2f322f; --c-text-3: #686b67; --c-accent: #ba806c; --c-accent-2: #9a5d4a; --c-ember: #ba806c; --c-ember-2: #9a5d4a; } :root[data-theme="dark"] { --c-canvas: #0d0e0d; --c-surface: #141614; --c-surface-2: #191b19; --c-surface-3: #22241f; --c-border: #2b2f2b; --c-border-hi: #3a3f3a; --c-text: #f0eee8; --c-text-2: #d1d3ce; --c-text-3: #989d96; --c-accent: #ba806c; --c-accent-2: #c2907d; --c-ember: #ba806c; --c-ember-2: #c2907d; } :root, :root[data-theme="light"] { --bg: #f7f6f2; --paper: #ffffff; --panel: #eceae4; --ink: #171817; --ink-soft: #2f322f; --muted: #686b67; --muted2: #9a9d97; --line: #deded8; --line-2: rgba(29,31,28,.09); --accent: #ba806c; --accent-2: #9a5d4a; --success: #7ba470; --danger: #c26060; --peach: #f5d8cc; --sage: #dce7d4; --sky: #dce6f3; --lilac: #e8def0; --butter: #f3e7bc; --mint: #d9e9e2; --rose: #ecdde1; --sand: #ebe5d9; --tint-1: var(--butter); --tint-2: var(--sage); --tint-3: var(--sky); --tint-4: var(--lilac); --shadow: 0 16px 48px rgba(29,31,28,.055); --radius-xl: 30px; --radius-l: 22px; --radius-m: 16px; --radius-s: 10px; color-scheme: light; } :root[data-theme="dark"] { --bg: #0d0e0d; --paper: #141614; --panel: #191b19; --ink: #f0eee8; --ink-soft: #d1d3ce; --muted: #989d96; --muted2: #6d726c; --line: #2b2f2b; --line-2: rgba(255,255,255,.05); --accent: #ba806c; --accent-2: #c2907d; --success: #a9bfa1; --danger: #d38b8b; /* Muted-tint gradients replace the pastels of light mode */ --peach: linear-gradient(145deg, rgba(111,91,47,.25), rgba(22,22,19,.96)); /* amber */ --sage: linear-gradient(145deg, rgba(80,104,72,.26), rgba(21,24,21,.95)); /* green */ --sky: linear-gradient(145deg, rgba(64,84,107,.27), rgba(19,21,21,.96)); /* blue */ --lilac: linear-gradient(145deg, rgba(81,64,92,.25), rgba(20,20,22,.96)); /* violet*/ --butter: linear-gradient(145deg, rgba(111,91,47,.30), rgba(22,22,19,.95)); --mint: linear-gradient(145deg, rgba(80,104,88,.22), rgba(21,24,21,.95)); --rose: linear-gradient(145deg, rgba(120,74,74,.22), rgba(22,20,20,.95)); --sand: linear-gradient(145deg, rgba(70,68,60,.28), rgba(21,21,20,.96)); --tint-1: var(--butter); --tint-2: var(--sage); --tint-3: var(--sky); --tint-4: var(--lilac); --shadow: 0 20px 60px rgba(0,0,0,.4); color-scheme: dark; } /* ─────────── Base ─────────── */ html { scroll-behavior: smooth; } body { background: var(--bg) !important; color: var(--ink) !important; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Kill the sticky reading-progress bar (was distracting) */ .reading-progress { display: none !important; } /* ─────────── Typography (Signal/Obsidian ultra-tight) ─────────── */ .font-display, h1, h2, h3, h4 { font-family: Inter, ui-sans-serif, system-ui, sans-serif !important; } h1, .text-5xl, .text-6xl { letter-spacing: -0.075em !important; line-height: 0.88 !important; font-weight: 900 !important; } h2, .text-3xl, .text-4xl { letter-spacing: -0.055em !important; line-height: 0.98 !important; font-weight: 800 !important; } h3, .text-2xl, .text-xl { letter-spacing: -0.045em !important; line-height: 1.02 !important; font-weight: 700 !important; } .tracking-tightest { letter-spacing: -0.075em !important; } .tracking-tighter { letter-spacing: -0.055em !important; } .tracking-tight { letter-spacing: -0.04em !important; } .tracking-wide { letter-spacing: 0.025em !important; } .tracking-widest { letter-spacing: 0.04em !important; } .font-mono, code, pre, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, "JetBrains Mono", monospace !important; } /* ─────────── Reusable palette utility overrides ─────────── */ .bg-canvas { background: var(--bg) !important; } .bg-surface, .bg-surface-2 { background: var(--paper) !important; } .bg-surface2 { background: var(--panel) !important; } .bg-ember-400, .bg-ember-500 { background: var(--accent) !important; } .bg-success { background: var(--success) !important; } .bg-danger { background: var(--danger) !important; } .text-text { color: var(--ink) !important; } .text-text2 { color: var(--ink-soft) !important; } .text-text3, .text-bone\/60, .text-bone\/70 { color: var(--muted) !important; } .text-bone\/85 { color: var(--ink-soft) !important; } .text-ember-300, .text-ember-400, .text-ember-500 { color: var(--accent) !important; } .text-success { color: var(--success) !important; } .text-danger { color: var(--danger) !important; } .text-warning { color: var(--accent-2)!important; } .text-canvas { color: var(--bg) !important; } .border-border, .border-borderHi { border-color: var(--line) !important; } .border-ember-400 { border-color: var(--accent) !important; } /* ─────────── Components: kicker, chip, surface, btn, input ─────────── */ .kicker { font: 800 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace !important; color: var(--accent-2) !important; text-transform: uppercase; letter-spacing: 0.045em; display: block; margin-bottom: 4px; } .kicker\!text-\[10px\] { font-size: 10px !important; } .field-label { font: 800 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace !important; text-transform: uppercase; letter-spacing: 0.045em; color: var(--muted); display: block; margin-bottom: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace !important; border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 10px; background: color-mix(in srgb, var(--paper), transparent 40%); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .chip-success { color: var(--success); border-color: color-mix(in srgb, var(--success), transparent 60%); background: color-mix(in srgb, var(--success), transparent 92%); } .chip-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger), transparent 60%); background: color-mix(in srgb, var(--danger), transparent 92%); } .chip-ember { color: var(--accent); border-color: color-mix(in srgb, var(--accent), transparent 60%); background: color-mix(in srgb, var(--accent), transparent 92%); } .surface { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-l) !important; box-shadow: var(--shadow); color: var(--ink); } :root[data-theme="dark"] .surface { background: var(--paper) !important; } .surface-2 { background: var(--panel) !important; border-color: var(--line) !important; } .surface-lift:hover { transform: translateY(-2px); transition: transform .18s ease; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px !important; font: 800 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace !important; padding: 12px 16px !important; text-transform: uppercase; letter-spacing: 0.045em; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; text-decoration: none; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; } .btn-primary:hover { opacity: .9; } .btn-secondary { background: transparent !important; color: var(--ink) !important; border-color: var(--line) !important; } .btn-secondary:hover { border-color: var(--ink) !important; } .btn-ghost { background: transparent !important; color: var(--muted) !important; border-color: transparent !important; } .btn-ghost:hover { color: var(--ink) !important; } .btn-sm { padding: 8px 12px !important; font-size: 9.5px !important; } .input, .textarea, input[type=email], input[type=text], input[type=password], textarea, select { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; padding: 12px 14px !important; font-size: 14px; width: 100%; outline: none; transition: border-color .18s, box-shadow .18s; box-shadow: none !important; } .input:focus, .textarea:focus, input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; background: var(--paper) !important; color: var(--ink) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 82%) !important; } .input-mono, .input.input-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; letter-spacing: 0.01em; } .textarea { min-height: 120px; resize: vertical; line-height: 1.5; } ::placeholder { color: var(--muted) !important; opacity: .55 !important; } /* Segmented buttons (stack/scheme selectors on tool_pqc) */ .seg { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; display: inline-flex; gap: 4px; } .seg-btn { background: transparent; color: var(--muted); border: none; border-radius: 9px; padding: 8px 12px; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-decoration: none; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; } .seg-btn.is-active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); } .seg-btn:hover { color: var(--ink); } /* Dots */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--success); } .is-pulse { animation: qb-pulse 1.7s ease-in-out infinite; } @keyframes qb-pulse { 0%,100%{opacity:.45} 50%{opacity:1} } /* ─────────── Header / Ticker ─────────── */ .topbar { padding: 17px 30px !important; border-bottom: 1px solid var(--line) !important; background: color-mix(in srgb, var(--bg), transparent 6%) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); position: sticky !important; top: 0; z-index: 40; } .topbar .max-w-6xl { max-width: 1200px; } .topbar a.font-display { font-size: 25px !important; font-weight: 950 !important; letter-spacing: -0.055em !important; } .topbar nav a { font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .topbar nav a:hover, .topbar nav a.text-text { color: var(--ink) !important; } .topbar .join { background: var(--ink) !important; color: var(--bg) !important; padding: 10px 13px !important; border-radius: 999px !important; border: none !important; font-weight: 800; } /* Theme toggle */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; font-size: 14px; line-height: 1; transition: color .18s, border-color .18s, background .18s; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink); } .theme-toggle .sun, .theme-toggle .moon { line-height: 1; } :root[data-theme="dark"] .theme-toggle .sun, :root:not([data-theme="dark"]) .theme-toggle .moon { display: none; } /* Ticker — matches the page background (transparent → inherits --bg). Overrides the base bundle's dark var(--c-surface) which used to leave a white/dark band across the page depending on theme. */ .ticker { background: transparent !important; border-top: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 11px 0; overflow: hidden; white-space: nowrap; font: 800 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted) !important; } .ticker__track { display: inline-flex; gap: 34px; color: var(--muted) !important; font-family: ui-monospace, SFMono-Regular, Menlo, "JetBrains Mono", monospace !important; font-size: 11px !important; } .ticker__item, .ticker span, .ticker a { color: var(--muted) !important; text-decoration: none; } .ticker__item:hover, .ticker a:hover { color: var(--ink) !important; } .ticker__item:before { background: var(--accent) !important; } /* ─────────── Signal / Obsidian hero + panels + tiles ─────────── */ .qb-hero { padding: 68px 0 36px; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(290px,.55fr); gap: 40px; align-items: end; } .qb-hero h1 { font-size: clamp(58px, 8.4vw, 108px); margin: 0 0 24px; color: var(--ink); } .qb-hero p { font-size: 20px; color: var(--muted); max-width: 720px; margin: 0; } .qb-hero .eyebrow { font: 850 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: 0.045em; color: var(--accent-2); margin-bottom: 18px; } .qb-hero-side { display: grid; gap: 12px; } .qb-hero-side .qday, .qb-hero-side .live { border: 1px solid var(--line); border-radius: 23px; padding: 21px; background: var(--paper); } .qb-hero-side .qday { background: var(--butter); border-color: transparent; } :root[data-theme="dark"] .qb-hero-side .qday { background-image: var(--butter); background-blend-mode: normal; } .qb-hero-side .qday strong { display: block; font-size: 39px; letter-spacing: -0.055em; margin: 10px 0 4px; color: var(--ink); } .qb-hero-side .qday p, .qb-hero-side .live p { font-size: 12px; margin: 0; color: var(--muted); } .qb-hero-side .live ul { padding: 0; margin: 12px 0 0; list-style: none; } .qb-hero-side .live li { font-size: 11px; padding: 7px 0; border-top: 1px solid var(--line-2); color: var(--ink-soft); } .panel { margin: 24px 0 76px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 16px; box-shadow: var(--shadow); } .panel-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; padding: 10px 10px 18px; } .panel-head h2, .section-head h2 { font-size: 31px; margin: 4px 0 0; color: var(--ink); } .panel-head p, .section-head p { margin: 0; color: var(--muted); font-size: 13px; max-width: 520px; text-align: right; } .tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; } .tile { border-radius: 20px; padding: 20px; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line-2); min-height: 230px; color: var(--ink); text-decoration: none; transition: transform .18s ease; } .tile:hover { transform: translateY(-2px); } .tile-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; } .tile small { font: 800 9px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .7; text-transform: uppercase; letter-spacing: .04em; } .tile .arrow { font-size: 20px; line-height: 1; } .tile-copy { margin-top: 52px; } .tile h3 { font-size: 25px; line-height: 1.02; letter-spacing: -0.04em; margin: 0; color: inherit; } .tile p { margin: 9px 0 0; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, currentColor, transparent 32%); max-width: 38ch; } .tile code { display: block; margin-top: 15px; font: 700 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: color-mix(in srgb, currentColor, transparent 38%); overflow-wrap: anywhere; } .tile .meta { margin-top: auto; padding-top: 26px; display: flex; gap: 7px; flex-wrap: wrap; } .tile .pill { font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 9px; background: color-mix(in srgb, var(--paper), transparent 54%); text-transform: uppercase; letter-spacing: 0.04em; color: color-mix(in srgb, currentColor, transparent 20%); } .tile.peach { background: var(--peach); } .tile.sage { background: var(--sage); } .tile.blue, .tile.sky { background: var(--sky); } .tile.lilac { background: var(--lilac); } .tile.butter { background: var(--butter); } .tile.mint { background: var(--mint); } .tile.rose { background: var(--rose); } .tile.sand { background: var(--sand); } .tile.paper { background: var(--paper); } .span3 { grid-column: span 3; } .span4 { grid-column: span 4; } .span5 { grid-column: span 5; } .span6 { grid-column: span 6; } .span7 { grid-column: span 7; } .span8 { grid-column: span 8; } .span12{ grid-column: span 12; } .section { margin: 0 0 80px; } .section-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 18px; } .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .metric { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 20px; color: var(--ink); } .metric b { display: block; font-size: 38px; letter-spacing: -0.055em; margin: 14px 0 4px; } .metric span { color: var(--muted); font-size: 12px; } /* Feature study */ .study-feature { background: var(--ink); color: var(--bg); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; min-height: 430px; } .study-feature .label { color: color-mix(in srgb, var(--bg), transparent 25%); } .study-feature h3 { font-size: clamp(35px, 5vw, 56px); line-height: 0.98; letter-spacing: -0.055em; margin: 78px 0 15px; max-width: 12ch; color: inherit; } .study-feature p { color: color-mix(in srgb, var(--bg), transparent 30%); max-width: 58ch; margin: 0; } .study-feature .by { margin-top: auto; font: 800 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: color-mix(in srgb, var(--bg), transparent 15%); text-transform: uppercase; letter-spacing: .05em; } .side-studies { display: grid; gap: 12px; } .study { padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; min-height: 209px; color: var(--ink); text-decoration: none; } .study h3 { font-size: 23px; line-height: 1.05; letter-spacing: -0.035em; margin: 30px 0 9px; color: inherit; } .study p { color: color-mix(in srgb, currentColor, transparent 38%); font-size: 13px; margin: 0; } .study .bottom { margin-top: auto; padding-top: 20px; display: flex; justify-content: space-between; font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .05em; } /* Privacy block */ .privacy { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; } .privacy-intro { background: var(--sand); border-radius: 22px; padding: 24px; color: var(--ink); } .privacy-intro h3 { font-size: 29px; letter-spacing: -0.04em; margin: 28px 0 8px; color: inherit; } .privacy-intro p { color: color-mix(in srgb, currentColor, transparent 38%); margin: 0; } .privacy-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .privacy-card { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 22px; color: var(--ink); } .privacy-card b { display: block; font-size: 18px; margin: 35px 0 8px; letter-spacing: -0.02em; } .privacy-card p { margin: 0; color: var(--muted); font-size: 13px; } /* Join box */ .joinbox { margin-bottom: 38px; border-radius: 28px; background: var(--ink); color: var(--bg); padding: 32px; display: grid; grid-template-columns: 1fr 330px; gap: 36px; align-items: end; } .joinbox h2 { font-size: clamp(38px, 5vw, 65px); line-height: 0.94; letter-spacing: -0.06em; margin: 0 0 12px; color: inherit; } .joinbox p { margin: 0; color: color-mix(in srgb, var(--bg), transparent 27%); max-width: 640px; } .joinbox aside { background: color-mix(in srgb, var(--ink), var(--bg) 12%); border: 1px solid color-mix(in srgb, var(--bg), var(--ink) 25%); border-radius: 20px; padding: 20px; } .joinbox aside b { font-size: 24px; } .joinbox aside p { font-size: 11px; margin-top: 8px; } .joinbox .btn { background: var(--butter); color: var(--ink) !important; border-color: var(--butter); } :root[data-theme="dark"] .joinbox .btn { background: var(--accent); color: var(--bg) !important; border-color: var(--accent); } /* Footer */ .qb-footer { padding: 25px 0 40px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font: 700 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: 0.055em; } /* ─────────── Signal-flavour override for the article-style prose ─────────── */ .prose-q h1, .prose-q h2, .prose-q h3 { color: var(--ink) !important; } .prose-q p, .prose-q li { color: var(--ink-soft) !important; } .prose-q a { color: var(--accent) !important; text-decoration: underline; text-underline-offset: 3px; } .prose-q code { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; font-size: 12.5px; color: var(--ink); } .prose-q pre { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; overflow-x: auto; } .prose-q blockquote { border-left: 3px solid var(--accent); padding: 4px 14px; color: var(--muted); } /* ─────────── Reveal animation kept subtle ─────────── */ .reveal { opacity: 0; transform: translateY(6px); animation: qb-reveal .5s ease .05s forwards; } @keyframes qb-reveal { to { opacity: 1; transform: none; } } /* ─────────── Responsive ─────────── */ @media (max-width: 900px) { .qb-hero, .privacy, .joinbox { grid-template-columns: 1fr; } .panel-head, .section-head { align-items: flex-start; flex-direction: column; } .panel-head p, .section-head p { text-align: left; } .span3, .span4, .span5, .span6, .span7 { grid-column: span 6; } .metrics { grid-template-columns: 1fr 1fr; } .qb-hero { padding: 48px 0 26px; } } @media (max-width: 600px) { .topbar { padding: 14px 18px !important; } .span3, .span4, .span5, .span6, .span7 { grid-column: span 12; } .metrics, .privacy-grid { grid-template-columns: 1fr; } .tile { min-height: 210px; } .tile-copy { margin-top: 38px; } .panel { padding: 11px; border-radius: 24px; } .qb-footer { flex-direction: column; } }