/* ================================================================ IdeaForge — "workbench" skin. One mono face. Hairline borders. Flat panels. No blur, no glass, no gradients, no pills. Built like a tool, not a landing page. ================================================================ */ :root { --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace; --serif: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif; --r: 2px; /* the only radius in the house */ --fast: 90ms; --med: 160ms; /* masthead — the one bold signature element on the public surface (a boot-in ASCII block-letter nameplate, JetBrains Mono 800, DOM/CSS glyphs — not a .tile). The existing hero scale (views.css .hero-greet: clamp(1.3rem, 2.6vw, 1.9rem)) tops out far too small for a nameplate, so this is its own dedicated display scale — use it only for the masthead, don't reuse it for ordinary headings. */ --masthead-size: clamp(2.75rem, 8vw, 6rem); --masthead-weight: 800; /* status colors (referenced from JS via var names — keep them). Tuned for the dark theme; :root[data-theme="light"] below overrides each one for WCAG-reasonable contrast against the paper background. */ --st-spark: #E3B341; --st-shaping: #6CA0DD; --st-forging: #FF6A00; --st-shipped: #7FB069; --st-cooling: #77766B; /* public-facing semantic aliases — the shipped-shelf vocabulary. Map 1:1 onto the pipeline's own --st-* status language so the public site and the owner dashboard are provably the same color system, just read through a different label. Always reference var(--st-*) here (never a hardcoded hex) — --st-* stays the one source of truth for every status color, on both the private and public surfaces. */ --pub-live: var(--st-forging); /* actively running / demoable */ --pub-shipped: var(--st-shipped); /* finished, out the door */ --pub-research: var(--st-spark); /* grants, papers, credentials (e.g. TÜBİTAK) */ --pub-explore: var(--st-shaping); /* prototypes, MVPs, in-progress */ --pub-idle: var(--st-cooling); /* archived / dormant */ /* GitHub contribution-calendar levels — 5 steps of the one accent blended against --bg-2, standing in for GitHub's own green ramp. Defined once here (not per theme block) since --acc/--bg-2 already flip per theme, so this auto-adapts with zero extra overrides. Retune the curve here alone if the mid-tones ever read too close together. */ --gh-0: var(--bg-2); --gh-1: color-mix(in srgb, var(--acc) 25%, var(--bg-2)); --gh-2: color-mix(in srgb, var(--acc) 50%, var(--bg-2)); --gh-3: color-mix(in srgb, var(--acc) 75%, var(--bg-2)); --gh-4: var(--acc); } /* ---------------- root data-attribute conventions ---------------- Both attributes below are set on (or — wherever app.js already stamps data-theme) and are read purely via CSS attribute selectors, never duplicated into a class. data-theme="dark" | "light" — theme selection, see the two blocks immediately below. data-role="public" — NOT YET WIRED UP. app.js will set this on the document root for logged-out visitors on the public surface (home.js, projects.js, the shared library.js feed header). Any public-only CSS MUST be scoped under [data-role="public"] ... { } — never written bare — so it can never bleed into the owner-only forge/ideas/pipeline/stash/think/ settings/fun dashboard views, which stay byte-identical through this pass. -------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0C0C0A; /* warm near-black */ --bg-2: #12120F; /* raised row / hover */ --bg-3: #1A1915; /* pressed / code bg */ --line: #26251E; /* hairline */ --line-2: #3A3830; /* strong hairline */ --ink: #E8E6D9; /* warm off-white */ --ink-2: #B9B6A5; --muted: #8A8776; --acc: #FF6A00; /* the one accent */ --acc-ink: #0C0C0A; /* text on accent */ --ok: #7FB069; --bad: #E05B4B; --risk: #E05B4B; --g-ledger: #A8A48D; /* graph: ledger nodes */ --hard-shadow: 7px 7px 0 rgba(0, 0, 0, 0.45); --dot: rgba(232, 230, 217, 0.05); } :root[data-theme="light"] { color-scheme: light; --bg: #F2EFE6; /* paper */ --bg-2: #EAE6D9; --bg-3: #E0DBCA; --line: #D5D0BE; --line-2: #B9B39D; --ink: #1B1A15; --ink-2: #45443B; --muted: #6E6C5E; --acc: #D14900; --acc-ink: #F2EFE6; --ok: #3E7A34; --bad: #B33A2B; --risk: #B33A2B; --g-ledger: #7A7660; --hard-shadow: 7px 7px 0 rgba(27, 26, 21, 0.18); --dot: rgba(27, 26, 21, 0.07); /* status colors, re-tuned for paper: darker/more saturated so each still clears WCAG-reasonable contrast against --bg #F2EFE6 (dark-theme values measure as low as ~1.7:1 here — unreadable). --st-forging and --st-shipped are pinned to the same hex as --acc / --ok above by design: forging IS the accent, shipped IS "ok", in both themes. */ --st-spark: #8A6100; /* ~4.8:1 on paper (was #E3B341, ~1.7:1) */ --st-shaping: #2A5C9E; /* ~5.8:1 on paper (was #6CA0DD, ~2.4:1) */ --st-forging: #D14900; /* = --acc, ~3.9:1 on paper */ --st-shipped: #3E7A34; /* = --ok, ~4.5:1 on paper */ --st-cooling: #6E6C5E; /* = --muted, ~4.6:1 on paper */ /* public-facing aliases, restated here for clarity — same var(--st-*) references as :root, they just now resolve through the paper values above. Nothing new is defined; this is documentation, not a second source of truth. */ --pub-live: var(--st-forging); --pub-shipped: var(--st-shipped); --pub-research: var(--st-spark); --pub-explore: var(--st-shaping); --pub-idle: var(--st-cooling); } /* ---------------- reset ---------------- */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--bg); /* blueprint dot grid — the whole backdrop, static, zero JS */ background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 22px 22px; color: var(--ink); font-family: var(--mono); font-size: 13.5px; line-height: 1.55; overflow: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--mono); font-weight: 700; letter-spacing: -0.01em; } a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; } a:hover { color: var(--acc); text-decoration-color: var(--acc); } button { font-family: var(--mono); cursor: pointer; color: inherit; } img { max-width: 100%; } ::selection { background: var(--acc); color: var(--acc-ink); } *:focus-visible { outline: 1.5px solid var(--acc); outline-offset: 1px; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* prose bits (pitches, descriptions, long copy) get the serif — the hand-set counterpoint to all the mono chrome */ .p-pitch, .fc-desc, .sod-pitch, .q-text, .m-sub, .empty p, .sec-sub { font-family: var(--serif); font-size: 0.98rem; } /* ---------------- layout ---------------- */ #app { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; height: 100vh; /* 100vh on a phone is the URL-bar-collapsed height, so the statusbar row sits behind the browser chrome and the view above it loses its last screenful. dvh tracks the visible viewport; vh above stays the fallback. */ height: 100dvh; } /* ---------------- topbar ---------------- */ #topbar { position: relative; display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line-2); background: var(--bg); min-height: 42px; z-index: 30; } .brand { display: flex; align-items: center; gap: 6px; padding: 0 16px; font-weight: 800; font-size: 0.86rem; letter-spacing: 0.06em; text-decoration: none; border-right: 1px solid var(--line); white-space: nowrap; } .brand:hover { color: var(--ink); background: var(--bg-2); text-decoration: none; } .brand-mark { color: var(--acc); font-weight: 700; font-size: 1rem; } .brand-cursor { color: var(--acc); animation: blink 1.1s steps(1) infinite; margin-left: -2px; } @keyframes blink { 50% { opacity: 0; } } .brand .ver { font-size: 0.62rem; font-weight: 400; color: var(--muted); border: 1px solid var(--line); padding: 0 5px; margin-left: 4px; } #mainnav { display: flex; align-items: stretch; overflow-x: auto; } #mainnav a { display: flex; align-items: center; gap: 7px; padding: 0 14px; font-size: 0.8rem; color: var(--muted); text-decoration: none; border-right: 1px solid var(--line); position: relative; transition: background var(--fast), color var(--fast); white-space: nowrap; } #mainnav a i { font-style: normal; font-size: 0.62rem; color: var(--muted); opacity: 0.55; } #mainnav a:hover { color: var(--ink); background: var(--bg-2); } #mainnav a.active { color: var(--ink); background: var(--bg-2); } #mainnav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--acc); } #mainnav a.active i { color: var(--acc); opacity: 1; } /* hamburger nav toggle — only relevant on the owner shell (8 tabs: forge/ ideas/pipeline/library/stash/think/fun/settings, vs. the public shell's 3), so it stays hidden everywhere until the phone breakpoint below turns it on for [data-role="owner"] specifically. app.js toggles #mainnav.open and this button's aria-expanded together. */ #nav-toggle.nav-toggle { display: none; font-size: 1rem; } .tb-actions { margin-left: auto; display: flex; align-items: stretch; } .tb-btn { display: flex; align-items: center; gap: 8px; padding: 0 14px; background: transparent; border: none; border-left: 1px solid var(--line); font-size: 0.78rem; color: var(--muted); transition: background var(--fast), color var(--fast); white-space: nowrap; } .tb-btn:hover { background: var(--bg-2); color: var(--ink); } .tb-btn.acc { color: var(--acc); font-weight: 700; } .tb-btn.acc:hover { background: var(--acc); color: var(--acc-ink); } .tb-btn.acc:hover kbd { border-color: var(--acc-ink); color: var(--acc-ink); } /* owner-only action — hidden until app.js confirms an owner session and un-hides it */ #new-idea-btn { display: none; } kbd { font-family: var(--mono); font-size: 0.6rem; padding: 1px 4px; border: 1px solid var(--line-2); color: var(--muted); background: transparent; } /* ---------------- views ---------------- */ #views { position: relative; overflow: hidden; } .view { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 22px 60px; opacity: 0; visibility: hidden; transform: translateY(3px); transition: opacity var(--med) ease, transform var(--med) ease, visibility 0s linear var(--med); } .view.active { opacity: 1; visibility: visible; transform: none; transition: opacity var(--med) ease, transform var(--med) ease; } #view-ideas { padding: 0; overflow: hidden; } #view-ideas canvas { display: block; width: 100%; height: 100%; cursor: grab; } #view-ideas canvas.dragging { cursor: grabbing; } #view-ideas canvas.linking { cursor: crosshair; } /* stagger: quick, subtle */ .stagger > * { animation: row-in 240ms ease both; animation-delay: calc(var(--i, 0) * 26ms); } @keyframes row-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } /* ---------------- statusbar ---------------- */ #statusbar { display: flex; align-items: stretch; justify-content: space-between; border-top: 1px solid var(--line-2); background: var(--bg); font-size: 0.68rem; color: var(--muted); min-height: 26px; z-index: 30; overflow: hidden; } .sb-left, .sb-right { display: flex; align-items: stretch; } .sb-seg { display: flex; align-items: center; gap: 6px; padding: 0 12px; border-right: 1px solid var(--line); white-space: nowrap; } .sb-right .sb-seg { border-right: none; border-left: 1px solid var(--line); } .sb-seg.mode { background: var(--acc); color: var(--acc-ink); font-weight: 700; letter-spacing: 0.08em; } .sb-seg .up { color: var(--ok); } .sb-seg .down { color: var(--bad); } .sb-seg a { color: inherit; text-decoration: none; } .sb-seg a:hover { color: var(--ink); } .sb-clock { font-variant-numeric: tabular-nums; color: var(--ink-2); } .sb-clock .colon { animation: blink 1s steps(1) infinite; } .sb-flash { color: var(--ink); } /* ---------------- motion levels ---------------- */ :root.motion-off *, :root.motion-off *::before, :root.motion-off *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } } @media (max-width: 960px) { #mainnav a i { display: none; } .tb-btn kbd { display: none; } .brand .ver { display: none; } .view { padding: 14px 12px 60px; } #statusbar .sb-hide-sm { display: none; } } /* owner shell's 8 tabs (forge/ideas/pipeline/library/stash/think/fun/ settings) can't fit inline below ~760px even trimmed — collapse #mainnav into a hamburger-triggered dropdown instead of shrinking tabs into unreadable slivers. The public shell's 3 tabs stay inline (scoped to [data-role="owner"]) since they already fit fine at every width tested. */ @media (max-width: 760px) { [data-role="owner"] #nav-toggle.nav-toggle { display: flex; } [data-role="owner"] #mainnav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; max-height: calc(100vh - 42px); overflow-y: auto; background: var(--bg); border-bottom: 1px solid var(--line-2); box-shadow: var(--hard-shadow); z-index: 35; } [data-role="owner"] #mainnav.open { display: flex; } [data-role="owner"] #mainnav a { padding: 12px 16px; font-size: 0.84rem; border-right: none; border-bottom: 1px solid var(--line); } [data-role="owner"] #mainnav a i { display: inline; } [data-role="owner"] #mainnav a.active::after { left: 0; top: 0; right: auto; bottom: 0; width: 3px; height: auto; } } /* phone: the topbar's brand + nav + actions no longer fit on one row at 960px's font sizes — trim padding and drop button label text (icon-ish "/" and "+" glyphs carry the meaning) so search/theme/new-idea stay reachable instead of getting pushed off the clipped (overflow:hidden) body. #mainnav keeps its own overflow-x:auto scroller for the rest. */ @media (max-width: 640px) { .brand { padding: 0 8px; gap: 3px; font-size: 0.74rem; } #mainnav a { padding: 0 8px; font-size: 0.72rem; } .tb-btn { padding: 0 8px; } .tb-btn .tb-label { display: none; } .view { padding: 12px 10px 56px; } } @media (max-width: 420px) { .brand .brand-cursor { display: none; } }