/* * AEO Pugmill — Shared Stylesheet * Dark mode by default. Light mode via [data-theme="light"] on . */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Theme variables ─────────────────────────────────────────────────────── */ :root { /* Brand — unchanged across themes */ --brand: #7c3aed; --brand-dark: #6d28d9; --brand-muted: #a78bfa; --green: #16a34a; --amber: #d97706; --red: #dc2626; --blue: #2563eb; /* Dark mode surfaces (default) */ --bg: #0d1117; --surface: #161b22; --surface-2: #21262d; --border: #30363d; --border-2: #21262d; /* Dark mode text */ --text: #e6edf3; --text-muted: #8b949e; --text-faint: #484f58; /* Dark mode "light" tints — used for badges, callouts, highlights */ --brand-lt: #1d1535; --green-lt: #0d2b1a; --amber-lt: #2b1e05; --red-lt: #2b0808; /* Code blocks — always dark */ --code-bg: #0d1117; --code-text: #e2e8f0; /* Category / signal pills */ --pill-ai-bg: #1d1535; --pill-ai-fg: #a78bfa; --pill-train-bg: #2d1a26; --pill-train-fg: #f9a8d4; --pill-search-bg: #0d2040; --pill-search-fg: #93c5fd; --pill-seo-bg: #2b1e05; --pill-seo-fg: #fbbf24; --pill-other-bg: #21262d; --pill-other-fg: #8b949e; --pill-strong-bg: #0d2b1a; --pill-strong-fg: #4ade80; --pill-moderate-bg: #2b1e05; --pill-moderate-fg: #fbbf24; --pill-unclass-bg: #1c2128; --pill-unclass-fg: #8b949e; /* Footer — always dark regardless of theme */ --footer-bg: #080c11; /* Hero sections — always dark regardless of theme */ --hero-bg: #111827; /* Link color — high contrast on dark surfaces */ --link: #e2e8f0; /* Legacy gray aliases — map to dark-mode equivalents so inline var(--gray-*) references in HTML adapt without edits */ --gray-50: #0d1117; --gray-100: #161b22; --gray-200: #30363d; --gray-300: #484f58; --gray-400: #6e7681; --gray-500: #8b949e; --gray-600: #adb5c0; --gray-700: #c9d1d9; --gray-800: #e6edf3; --gray-900: #f0f6fc; } [data-theme="light"] { --bg: #f9fafb; --surface: #ffffff; --surface-2: #f3f4f6; --border: #e5e7eb; --border-2: #f3f4f6; --text: #1f2937; --text-muted: #6b7280; --text-faint: #9ca3af; --brand-lt: #ede9fe; --green-lt: #dcfce7; --amber-lt: #fef3c7; --red-lt: #fee2e2; --code-bg: #111827; --code-text: #e2e8f0; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --link: #6d28d9; --pill-ai-bg: #ede9fe; --pill-ai-fg: #6d28d9; --pill-train-bg: #fce7f3; --pill-train-fg: #9d174d; --pill-search-bg: #dbeafe; --pill-search-fg: #1d4ed8; --pill-seo-bg: #fef3c7; --pill-seo-fg: #92400e; --pill-other-bg: #f3f4f6; --pill-other-fg: #6b7280; --pill-strong-bg: #dcfce7; --pill-strong-fg: #15803d; --pill-moderate-bg: #fef3c7; --pill-moderate-fg: #92400e; --pill-unclass-bg: #f1f5f9; --pill-unclass-fg: #475569; } /* ── Base ────────────────────────────────────────────────────────────────── */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; } /* ── Nav ─────────────────────────────────────────────────────────────────── */ nav { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 24px; height: 58px; position: sticky; top: 0; z-index: 100; } .nav-inner { /* Full width — no max-width constraint */ display: flex; align-items: center; height: 100%; } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 15px; flex-shrink: 0; margin-right: auto; } .nav-logo img { height: 28px; width: 28px; border-radius: 6px; } /* Swap logo based on theme */ .nav-logo .logo-light { display: none; } [data-theme="light"] .nav-logo .logo-dark { display: none; } [data-theme="light"] .nav-logo .logo-light { display: block; } .nav-links { display: flex; gap: 6px; align-items: center; } .nav-links a { text-decoration: none; color: var(--text-muted); font-size: 14px; padding: 6px 10px; border-radius: 6px; transition: color 0.15s, background 0.15s; } .nav-links a:hover { color: var(--text); background: var(--surface-2); } .nav-links a.active { color: var(--brand-muted); font-weight: 600; background: var(--brand-lt); } .nav-links a.nav-cta { background: var(--brand); color: #fff; padding: 7px 16px; font-size: 13px; font-weight: 600; margin-left: 6px; } .nav-links a.nav-cta:hover { background: var(--brand-dark); color: #fff; } /* Theme toggle button */ .nav-theme-toggle { background: none; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; padding: 5px 8px; font-size: 15px; line-height: 1; color: var(--text-muted); transition: color 0.15s, background 0.15s, border-color 0.15s; margin-left: 8px; flex-shrink: 0; } .nav-theme-toggle:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); } .theme-icon-moon { display: none; } .theme-icon-sun { display: inline; } [data-theme="light"] .theme-icon-moon { display: inline; } [data-theme="light"] .theme-icon-sun { display: none; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: all 0.15s; line-height: 1; } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-dark); } .btn-white { background: var(--surface); color: var(--brand); } .btn-white:hover { background: var(--brand-lt); } .btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); } .btn-outline:hover { background: rgba(255,255,255,0.1); } .btn-ghost { background: var(--surface-2); color: var(--text-muted); } .btn-ghost:hover { background: var(--border); color: var(--text); } .btn-lg { padding: 14px 32px; font-size: 15px; } .btn-sm { padding: 7px 14px; font-size: 13px; } /* ── Layout ──────────────────────────────────────────────────────────────── */ .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } .container-sm { max-width: 780px; margin: 0 auto; padding: 0 24px; } /* Full-width container — used by the intelligence dashboard */ .container-full { width: 100%; padding: 0 24px; } section { padding: 56px 0; } section + section { border-top: 1px solid var(--border); } .section-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-muted); margin-bottom: 10px; } .section-title { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin: 0 0 10px; line-height: 1.2; } .section-sub { font-size: 16px; color: var(--text-muted); max-width: 560px; line-height: 1.6; } /* ── Cards ───────────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px; } /* ── Badges ──────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; } .badge-brand { background: var(--brand-lt); color: var(--brand-muted); } .badge-green { background: var(--green-lt); color: var(--green); } .badge-gray { background: var(--surface-2); color: var(--text-muted); } .badge-amber { background: var(--amber-lt); color: var(--amber); } /* ── Skeleton ────────────────────────────────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; display: inline-block; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Pulse dot ───────────────────────────────────────────────────────────── */ .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block; animation: pulsedot 2s infinite; flex-shrink: 0; } @keyframes pulsedot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } /* ── Check list ──────────────────────────────────────────────────────────── */ .check-list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-muted); line-height: 1.5; } .check-list li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; margin-top: 1px; } /* ── Footer ──────────────────────────────────────────────────────────────── */ .site-footer { background: var(--footer-bg); color: var(--text-faint); padding: 20px 24px; } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .footer-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; font-weight: 700; font-size: 14px; } .footer-logo img { height: 22px; width: 22px; border-radius: 4px; } .footer-links { display: flex; gap: 20px; flex-wrap: wrap; } .footer-links a { text-decoration: none; color: #6e7681; font-size: 13px; transition: color 0.15s; } .footer-links a:hover { color: #fff; } .footer-copy { display: block; font-size: 12px; color: #484f58; width: 100%; margin-top: 12px; padding-top: 12px; border-top: 1px solid #21262d; } .footer-copy a { color: #6e7681; text-decoration: none; } .footer-copy a:hover { color: #fff; } /* ── Nav controls (toggle + hamburger grouped) ───────────────────────────── */ .nav-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } /* ── Hamburger / mobile nav ──────────────────────────────────────────────── */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 6px; } .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--text-muted); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; } nav.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } nav.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; } nav.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-mobile-menu { display: none; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 680px) { nav { height: auto; } nav .nav-inner { height: 58px; } .nav-links { display: none; } .nav-hamburger { display: flex; } .nav-mobile-menu { flex-direction: column; padding: 8px 16px 14px; border-top: 1px solid var(--border); gap: 2px; } nav.nav-open .nav-mobile-menu { display: flex; } .nav-mobile-menu a { text-decoration: none; color: var(--text-muted); font-size: 15px; font-weight: 500; padding: 10px 12px; border-radius: 6px; transition: color 0.15s, background 0.15s; } .nav-mobile-menu a:hover { color: var(--text); background: var(--surface-2); } .nav-mobile-menu a.active { color: var(--brand-muted); font-weight: 600; background: var(--brand-lt); } .nav-mobile-menu a.nav-cta { background: var(--brand); color: #fff; text-align: center; margin-top: 6px; font-weight: 600; } .nav-mobile-menu a.nav-cta:hover { background: var(--brand-dark); } section { padding: 40px 0; } }