/* ═══════════════════════════════════════════════════════════
taimurtools.com — Site-wide theme & floating-pill nav
───────────────────────────────────────────────────────────
Loaded on every public page via:
element when present (so pages with
old navs still render only the new floating pill on top)
═══════════════════════════════════════════════════════════ */
/* ── 1. Canonical color tokens ── */
:root {
--tt-bg: #fafafa;
--tt-card: #fff;
--tt-text: #0f172a;
--tt-text-2: #334155;
--tt-text-3: #64748b;
--tt-border: #e2e8f0;
--tt-border-strong: #cbd5e1;
--tt-blue: #0a84ff;
--tt-purple: #7c3aed;
--tt-green: #10b981;
--tt-amber: #f59e0b;
--tt-red: #ef4444;
--tt-grad: linear-gradient(135deg, #0a84ff, #7c3aed);
--tt-grad-soft: linear-gradient(135deg, #eef2ff, #faf5ff);
--tt-shadow-sm: 0 1px 3px rgba(15, 23, 42, .05);
--tt-shadow: 0 4px 12px rgba(15, 23, 42, .06);
--tt-shadow-lg: 0 16px 48px rgba(15, 23, 42, .10);
--tt-radius: 14px;
--tt-radius-lg: 18px;
}
:root.dark, :root[data-theme="dark"] {
--tt-bg: #0a0a0a;
--tt-card: #171717;
--tt-text: #f5f5f5;
--tt-text-2: #d4d4d4;
--tt-text-3: #a3a3a3;
--tt-border: #262626;
--tt-border-strong: #404040;
}
/* ── 2. Floating-pill nav (CreatorSuite-style) ── */
.nav-wrap {
position: fixed;
top: 18px; left: 0; right: 0;
z-index: 50;
display: flex;
justify-content: center;
pointer-events: none;
padding: 0 16px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.nav-wrap .nav {
pointer-events: auto;
display: flex;
align-items: center;
gap: 28px;
background: rgba(255, 255, 255, .78);
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
border: 1px solid rgba(15, 18, 36, .06);
border-radius: 999px;
padding: 7px 8px 7px 22px;
box-shadow: 0 1px 2px rgba(15, 18, 36, .04), 0 8px 30px -12px rgba(15, 18, 36, .12);
}
.nav-wrap .logo {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 15px;
letter-spacing: -.01em;
color: #0e1020;
text-decoration: none;
white-space: nowrap;
}
.nav-wrap .logo-mark {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: #fff;
border-radius: 7px;
box-shadow: 0 1px 2px rgba(15, 18, 36, .06);
overflow: hidden;
}
.nav-wrap .logo-mark img,
.nav-wrap .logo-mark svg { width: 100%; height: 100%; object-fit: contain; }
.nav-wrap .nav-links {
display: flex;
gap: 22px;
list-style: none;
margin: 0 8px;
padding: 0;
}
.nav-wrap .nav-links a {
color: #4a4f63;
font-size: 13.5px;
font-weight: 500;
text-decoration: none;
transition: color .15s;
white-space: nowrap;
}
.nav-wrap .nav-links a:hover { color: #0e1020; }
.nav-wrap .btn-google {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid #d8dbe8;
border-radius: 999px;
padding: 8px 16px;
font-size: 13.5px;
font-weight: 600;
color: #0e1020;
text-decoration: none;
transition: border-color .15s, box-shadow .15s;
white-space: nowrap;
}
.nav-wrap .btn-google:hover {
border-color: #4a4f63;
box-shadow: 0 4px 12px -4px rgba(15, 18, 36, .15);
}
.nav-wrap .hamburger {
display: none;
flex-direction: column;
gap: 4px;
padding: 6px;
background: none;
border: none;
cursor: pointer;
}
.nav-wrap .hamburger span {
width: 20px; height: 2px;
background: #0e1020;
border-radius: 2px;
}
@media (max-width: 960px) {
.nav-wrap .nav { gap: 14px; padding: 7px 8px 7px 16px; }
.nav-wrap .nav-links, .nav-wrap .btn-google { display: none; }
.nav-wrap .hamburger { display: flex; }
.nav-wrap .nav-links.open {
display: flex;
flex-direction: column;
position: absolute;
top: 62px; left: 16px; right: 16px;
background: #fff;
border: 1px solid rgba(15, 18, 36, .06);
border-radius: 18px;
padding: 18px;
gap: 14px;
box-shadow: 0 12px 36px rgba(15, 18, 36, .18);
z-index: 51;
margin: 0;
}
.nav-wrap .nav-links.open a { padding: 6px 0; font-size: 15px; }
}
@media (max-width: 480px) { .nav-wrap .logo-text { display: none; } }
/* Dark mode */
:root.dark .nav-wrap .nav,
:root[data-theme="dark"] .nav-wrap .nav {
background: rgba(11, 12, 20, .78);
border-color: rgba(255, 255, 255, .06);
}
:root.dark .nav-wrap .logo,
:root[data-theme="dark"] .nav-wrap .logo { color: #f1f3ff; }
:root.dark .nav-wrap .nav-links a,
:root[data-theme="dark"] .nav-wrap .nav-links a { color: #c2c6db; }
:root.dark .nav-wrap .nav-links a:hover,
:root[data-theme="dark"] .nav-wrap .nav-links a:hover { color: #fff; }
:root.dark .nav-wrap .btn-google,
:root[data-theme="dark"] .nav-wrap .btn-google {
background: #1a1d2e;
border-color: rgba(255, 255, 255, .1);
color: #f1f3ff;
}
:root.dark .nav-wrap .btn-google:hover,
:root[data-theme="dark"] .nav-wrap .btn-google:hover {
border-color: #c2c6db;
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4);
}
:root.dark .nav-wrap .hamburger span,
:root[data-theme="dark"] .nav-wrap .hamburger span { background: #f1f3ff; }
:root.dark .nav-wrap .nav-links.open,
:root[data-theme="dark"] .nav-wrap .nav-links.open {
background: #0f111c;
border-color: rgba(255, 255, 255, .06);
}
/* ── 3. Body padding (apply class .tt-floating-nav to ) ── */
body.tt-floating-nav { padding-top: 84px; }
@media (max-width: 960px) { body.tt-floating-nav { padding-top: 80px; } }
/* ── 4. Hide legacy direct child (keeps new floating pill only) ── */
body.tt-floating-nav > nav:first-of-type { display: none !important; }
/* ── 5. Beat tools.css's .rdx-active nav:not(.rdx-nav){display:none!important}
so the floating pill renders on the redesigned tools page too ── */
body.tt-floating-nav > header.nav-wrap { display: flex !important; }
body.tt-floating-nav > header.nav-wrap > nav { display: flex !important; }
body.tt-floating-nav > header.nav-wrap > nav .nav-links { display: flex !important; }
@media (max-width: 960px) {
body.tt-floating-nav > header.nav-wrap > nav .nav-links { display: none !important; }
body.tt-floating-nav > header.nav-wrap > nav .nav-links.open { display: flex !important; }
}