/* * GStudio Shared Theme * ───────────────────────────────────────────────────────────── * Single source of truth for colors, typography, and base UI. * Edit here to propagate changes across all tool modules. * * Fonts: include the Google Fonts in each page's : * Cormorant Garamond (300,400,500,600) + DM Mono (300,400,500) * ───────────────────────────────────────────────────────────── */ /* ── Design tokens ── */ :root { /* Backgrounds */ --bg0: #0b0b0d; /* page background */ --bg1: #111113; /* surfaces: topbar, sidebar, cards */ --bg2: #191a1d; /* inputs, secondary surfaces */ --bg3: #222326; /* hover / selected state */ /* Borders */ --border: rgba(255,255,255,0.20); --border-hover: rgba(255,255,255,0.38); /* Text */ --text0: #dedad1; /* primary */ --text1: rgba(222,218,209,0.60); /* secondary */ --text2: rgba(222,218,209,0.35); /* muted */ /* Accent palette */ --green: #1D9E75; --green-dim: rgba(29,158,117,0.15); --red: #c8513a; --red-dim: rgba(200,81,58,0.15); --amber: #BA7517; --amber-dim: rgba(186,117,23,0.12); --blue: #378ADD; --blue-dim: rgba(55,138,221,0.12); --purple: #9B59B6; --purple-dim: rgba(155,89,182,0.15); --teal: #16A085; --teal-dim: rgba(22,160,133,0.15); --orange: #D4681E; --orange-dim: rgba(212,104,30,0.15); --pink: #C0527A; --pink-dim: rgba(192,82,122,0.15); /* Shape */ --radius: 6px; --radius-lg: 10px; /* Typography */ --font-mono: 'DM Mono', monospace; --font-serif: 'Cormorant Garamond', serif; /* Font scale (all ≥ 18px with --base: 20px) */ --fs-sm: 0.9rem; /* 18px — minimum */ --fs-md: 1rem; /* 20px */ --fs-lg: 1.1rem; /* 22px */ --fs-xl: 1.25rem; /* 25px */ --fs-2xl: 1.5rem; /* 30px */ /* ── Base font size ────────────────────────────────────────── * All rem values scale from this. Change here to resize * the entire UI globally across all tools. * Minimum standard: 20px * ─────────────────────────────────────────────────────────── */ --base: 20px; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Base ── */ html, body { background: var(--bg0); color: var(--text0); font-family: var(--font-mono); font-size: var(--base); } /* ── Login screen ── */ #login-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 1.8rem; padding: 2rem; } .login-wordmark { font-size: 2.8rem; font-weight: 500; letter-spacing: 0.04em; } .login-wordmark span { color: var(--text2); font-weight: 400; } .login-subtitle { font-size: 0.9rem; color: var(--text2); letter-spacing: 0.14em; text-transform: uppercase; margin-top: -1.6rem; } .login-card { background: var(--bg1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 2.4rem; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; width: 100%; max-width: 340px; } .login-card-title { font-size: 0.9rem; color: var(--text1); letter-spacing: 0.04em; } .google-btn { display: flex; align-items: center; gap: 0.7rem; background: var(--bg2); border: 1px solid var(--border-hover); border-radius: var(--radius); padding: 0.6rem 1.2rem; cursor: pointer; color: var(--text0); font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.04em; transition: background 0.15s, border-color 0.15s; width: 100%; justify-content: center; } .google-btn:hover { background: var(--bg3); } .google-btn svg { flex-shrink: 0; } #login-error { display: none; font-size: 0.9rem; color: var(--red); background: var(--red-dim); border: 1px solid rgba(200,81,58,0.3); border-radius: var(--radius); padding: 0.5rem 0.8rem; text-align: center; width: 100%; } .login-note { font-size: 0.9rem; color: var(--text2); text-align: center; line-height: 1.6; } /* ── Shared header button ── */ .hbtn { background: var(--bg2); border: 1px solid var(--border); color: var(--text1); font-family: var(--font-mono); font-size: 0.9rem; padding: 0.18rem 0.45rem; border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s, color 0.15s; line-height: 1.4; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; letter-spacing: 0.03em; } .hbtn:hover { border-color: var(--border-hover); color: var(--text0); } /* ── Divider ── */ .sep { width: 1px; height: 1rem; background: var(--border); flex-shrink: 0; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); } /* ── GStudio tool nav ── */ .gs-tool-btn { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 4px; color: var(--text2); text-decoration: none; flex-shrink: 0; transition: all 0.12s; } .gs-tool-btn:hover { color: var(--text0); background: var(--bg2); } .gs-tool-btn.gs-cur { color: var(--text0); background: var(--bg3); } .gs-tool-nav { display:flex; align-items:center; flex-shrink:0; } .gs-tool-link { color:var(--text2); text-decoration:none; font-family:var(--font-mono); font-size:0.15in; padding:0.1rem 0.2rem; transition:color 0.12s; white-space:nowrap; } .gs-tool-link:hover { color:var(--text0); } .gs-tool-link.gs-cur { color:var(--blue); font-weight:700; } .gs-nav-sep { color:rgba(255,255,255,0.55); font-family:var(--font-mono); font-size:0.15in; user-select:none; padding:0 0.05rem; } .gs-font-label { font-size: 0.75rem; color: var(--text2); font-family: var(--font-mono); min-width: 2.2rem; text-align: center; flex-shrink: 0; } /* ── sz-btn (shared) ── */ .sz-btn { background: var(--bg2); border: none; color: var(--text1); width: 1.5rem; height: 1.5rem; font-family: var(--font-mono); font-size: 0.9rem; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; } .sz-btn:hover { background: var(--bg3); color: var(--text0); }