/* ============================================================================ DrAIStudio brand layer — v1 (2026-09-12) · spec: DrAIStudio-Brand-System-2026-09.md Load LAST on tool pages: + /assets/brand.js Token-level only: fonts, colour tokens, radii, header/wordmark, status semantics. Page layouts untouched. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap'); :root{ /* ---- namespaced tokens ---- */ --db-ink:#0F1B22; --db-slate:#3C4A53; --db-gray:#5A6B75; --db-silver:#8A98A1; --db-bg:#F8FAFB; --db-card:#FFFFFF; --db-soft:#EEF3F5; --db-line:#E5EAED; --db-navy:#0B1F33; --db-blue:#2563EB; --db-blue-d:#1D4ED8; --db-cyan:#22B8CF; --db-pink:#DB2777; --db-pink-d:#BE185D; --db-violet:#6D28D9; --db-violet-d:#5B21B6; --db-teal:#0F9AA6; --db-teal-d:#0B7C86; --db-green:#2E9E5B; --db-amber:#C98A18; --db-red:#C4493D; --db-crimson:#B91C1C; --db-gold:#D6A63A; --db-r-btn:10px; --db-r-card:14px; --db-shadow:0 1px 3px rgba(15,27,34,.06),0 8px 24px rgba(15,27,34,.05); --db-display:'Space Grotesk',system-ui,-apple-system,sans-serif; --db-text:'Inter',system-ui,-apple-system,sans-serif; --db-mono:'JetBrains Mono','Fira Code',ui-monospace,monospace; /* family accent (brand.js sets data-family on ; default research) */ --db-accent:var(--db-blue); --db-accent-d:var(--db-blue-d); /* ---- retheme the shared teaching shell + any page using these vars ---- */ --font-display:var(--db-display); --font-meta:var(--db-text); --font-body:var(--db-text); } body[data-family="teaching"]{--db-accent:var(--db-pink);--db-accent-d:var(--db-pink-d)} body[data-family="writing"]{--db-accent:var(--db-violet);--db-accent-d:var(--db-violet-d)} body[data-family="directories"]{--db-accent:var(--db-teal);--db-accent-d:var(--db-teal-d)} /* ---- typography (headings must win over per-page display fonts) ---- */ body{font-family:var(--db-text)} h1,h2,h3,h4,.display,.rc-h1,.tt-hero h1,.hero h1,.page,.sec{font-family:var(--db-display)!important;letter-spacing:-.01em} button,input,select,textarea{font-family:inherit} code,pre,kbd,.mono{font-family:var(--db-mono)} /* keep handwriting inside the AI Tutor whiteboard */ .wb-text,.board-text,.chalk,[data-keep-font],[data-keep-font] *{font-family:inherit!important} /* ---- wordmark (brand.js normalises header brand markup to .db-wm) ---- */ .db-wm{font-family:var(--db-display)!important;font-weight:700;letter-spacing:-.01em;white-space:nowrap;color:inherit;text-decoration:none} .db-wm .db-ai{background:linear-gradient(90deg,var(--db-blue),var(--db-cyan));-webkit-background-clip:text;background-clip:text;color:transparent} .db-dark .db-wm .db-ai,[data-theme="dark"] .db-wm .db-ai{background:linear-gradient(90deg,#60A5FA,var(--db-cyan));-webkit-background-clip:text;background-clip:text;color:transparent} /* header logo images are retired (text-only headers) */ .brand img.brand-logo,.brand img[src*="logo-avatar"],.hbar .brand img,a.brand > img:not(.bimark){display:none!important} /* mascots leave research / directory / writing heroes (brand.js also removes them) */ body:not([data-family="teaching"]) .hero-robo,body:not([data-family="teaching"]) img.ai-robo{display:none!important} /* ---- per-tool token remaps (only where the page is variable-driven and the change is safe) ---- */ body[data-tool="refcheck"]{--blue:var(--db-blue);--blue-dark:var(--db-blue-d)} body[data-tool="statistics-studio"],body[data-tool="smartfsqca"],body[data-tool="smartsem"],body[data-tool="academic-editor"]{--blue:var(--db-blue);--blue-dark:var(--db-blue-d);--blue-d:var(--db-blue-d)} body[data-tool="power-simulator"]{--indigo:var(--db-blue);--indigo-hover:var(--db-blue-d);--indigo-soft:#E8EFFD} body[data-tool="literature-review"]{--indigo:var(--db-violet);--indigo-hover:var(--db-violet-d);--indigo-soft:#EFE9FB} body[data-tool="CFP"]{--teal:var(--db-teal);--teal-deep:var(--db-teal-d)} body[data-tool="journal-finder"]{--teal:var(--db-teal)} /* ---- shape normalisation (pill primaries → 10 px; Biblio Infinity keeps its own identity) ---- */ body[data-tool="journal-finder"] .btn,body[data-tool="smartform"] .btn,body[data-tool="tutor"] .btn,body[data-tool="tutor"] .btn-go{border-radius:var(--db-r-btn)!important} body[data-tool="smartform"] .qb-brand{font-family:var(--db-display)!important;font-weight:700} /* ---- site-wide status semantics (pills) ---- */ .db-pill{font-size:.7rem;font-weight:700;letter-spacing:.3px;padding:4px 10px;border-radius:999px;border:1px solid var(--db-line);background:var(--db-soft);color:var(--db-gray);display:inline-block} .db-pill.v{background:#EAF7EF;color:var(--db-green);border-color:#BFE6CD}.db-pill.c{background:#FDF6E7;color:var(--db-amber);border-color:#F0DCA8}.db-pill.u{background:#FDF2F1;color:var(--db-red);border-color:#F3D6D3}.db-pill.r{background:#FDE2E2;color:#8A1414;border-color:#F3B3B3}.db-pill.gold{background:#FFF7E6;color:#8A6414;border-color:#F0DCA8} /* ---- "Next step" card (studio-next.js) ---- */ .db-next{margin:26px 0 8px;background:var(--db-card);border:1px solid var(--db-line);border-radius:var(--db-r-card);box-shadow:var(--db-shadow);padding:16px 18px;font-family:var(--db-text);color:var(--db-ink)} .db-next h4{font-family:var(--db-display);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--db-accent);margin:0 0 10px} .db-next .g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px} .db-next a{display:block;padding:11px 13px;border:1px solid var(--db-line);border-radius:10px;text-decoration:none;color:var(--db-ink);background:var(--db-bg);transition:.18s} .db-next a:hover{border-color:var(--db-accent);background:var(--db-card);transform:translateY(-1px)} .db-next a b{display:block;font-size:.95rem;margin-bottom:2px}.db-next a span{display:block;font-size:.8rem;color:var(--db-gray);line-height:1.4} .db-next .why{font-size:.82rem;color:var(--db-gray);margin:0 0 10px} @media (prefers-reduced-motion:reduce){.db-next a{transition:none}}