/* ========================================================================= AI-Study.tips · Shared theme · 2026 Loaded LAST in to override per-page inline styles. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* -------- tokens (override common per-page variables) -------- */ html, :root { --ai-bg: #0a0a0f; --ai-bg-elev: #101018; --ai-bg-card: #0f0f17; --ai-border: rgba(255, 255, 255, 0.08); --ai-border-strong: rgba(255, 255, 255, 0.16); --ai-text: #f5f5f7; --ai-text-dim: #9ca3af; --ai-text-muted: #6b7280; --ai-accent: #8b5cf6; --ai-accent-2: #06b6d4; --ai-accent-3: #22c55e; --ai-font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --ai-font-body: 'Inter', system-ui, -apple-system, sans-serif; --ai-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* Override common palette variables used by legacy pages */ --primary-color: #8b5cf6 !important; --secondary-color: #0a0a0f !important; --accent-color: #06b6d4 !important; --light-color: #0a0a0f !important; --dark-color: #f5f5f7 !important; --bg-color: #0a0a0f !important; --text-color: #f5f5f7 !important; --card-bg: #0f0f17 !important; --footer-bg: #05050a !important; --module-bg: #0f0f17 !important; --border-color: rgba(255, 255, 255, 0.08) !important; --item-hover: rgba(255, 255, 255, 0.05) !important; --header-gradient-start: #0a0a0f !important; --header-gradient-end: #101018 !important; --font-main: 'Inter', system-ui, -apple-system, sans-serif !important; --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.2) !important; --shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.35) !important; } ::selection { background: var(--ai-accent); color: #fff; } /* -------- base typography + background -------- */ html { scroll-behavior: smooth; } body { background: var(--ai-bg) !important; color: var(--ai-text) !important; font-family: var(--ai-font-body) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: 80px !important; min-height: 100vh; position: relative; } body[data-ai-no-pad] { padding-top: 0 !important; } /* Mesh backdrop */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(60vmax 60vmax at -10% -20%, rgba(139, 92, 246, 0.32), transparent 60%), radial-gradient(55vmax 55vmax at 110% 120%, rgba(6, 182, 212, 0.28), transparent 60%), radial-gradient(40vmax 40vmax at 50% 110%, rgba(34, 197, 94, 0.12), transparent 60%); } /* Grain overlay */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* -------- hide legacy page navbars (avoid double-nav with chip) -------- */ body > header, body > nav, body > header.fade-in, body > #header, header#header, header.site-header, nav.navbar { display: none !important; } /* -------- headings -------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--ai-font-display) !important; letter-spacing: -0.02em !important; color: var(--ai-text) !important; line-height: 1.15 !important; } h1 { font-weight: 700 !important; } h2, h3 { font-weight: 600 !important; } /* -------- links (default) -------- */ p a, li a, td a, article a, main a { color: var(--ai-accent-2) !important; transition: color 0.2s !important; text-decoration: underline; text-decoration-color: rgba(6, 182, 212, 0.35); text-underline-offset: 3px; } p a:hover, li a:hover, td a:hover, article a:hover, main a:hover { color: var(--ai-accent) !important; text-decoration-color: var(--ai-accent); } /* -------- buttons -------- */ .btn, a.btn, button.btn, .button, a.button, button.button { background: var(--ai-text) !important; color: var(--ai-bg) !important; border: 1px solid transparent !important; border-radius: 12px !important; padding: 12px 20px !important; font-family: var(--ai-font-body) !important; font-weight: 500 !important; font-size: 0.95rem !important; text-decoration: none !important; cursor: pointer !important; transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } .btn:hover, a.btn:hover, button.btn:hover, .button:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 24px rgba(245, 245, 247, 0.15) !important; background: var(--ai-text) !important; color: var(--ai-bg) !important; } /* -------- cards / modules / items -------- */ .card, .course-card, .module, .module-item, .module-card, .content-card, .info-card, .resource-card, .section-card, .phase-card, .rubric-card, .course-content, .quiz-card { background: var(--ai-bg-card) !important; border: 1px solid var(--ai-border) !important; border-radius: 16px !important; color: var(--ai-text) !important; box-shadow: none !important; transition: transform 0.25s, border-color 0.25s !important; } .card:hover, .course-card:hover, .module:hover, .module-item:hover, .module-card:hover, .content-card:hover, .info-card:hover, .resource-card:hover, .section-card:hover { border-color: var(--ai-border-strong) !important; transform: translateY(-2px) !important; } .card img, .course-card img, .module img { border-radius: 12px !important; } /* -------- containers / sections -------- */ section, .section { background: transparent !important; } /* -------- tables -------- */ table { border-collapse: collapse !important; width: 100% !important; color: var(--ai-text) !important; } th, td { border: 1px solid var(--ai-border) !important; padding: 10px 14px !important; text-align: left !important; } th { background: var(--ai-bg-elev) !important; font-family: var(--ai-font-display) !important; font-weight: 600 !important; color: var(--ai-text) !important; } tr:hover td { background: rgba(255, 255, 255, 0.03) !important; } /* -------- code -------- */ code, pre, kbd, samp { font-family: var(--ai-font-mono) !important; background: var(--ai-bg-elev) !important; color: var(--ai-accent-2) !important; border-radius: 6px !important; padding: 2px 6px !important; } pre { padding: 14px !important; overflow-x: auto; } pre code { padding: 0 !important; background: transparent !important; } /* -------- blockquote -------- */ blockquote { border-left: 3px solid var(--ai-accent) !important; padding-left: 16px !important; margin: 16px 0 !important; color: var(--ai-text-dim) !important; font-style: italic !important; } /* -------- hr -------- */ hr { border: none !important; border-top: 1px solid var(--ai-border) !important; margin: 32px 0 !important; } /* -------- footer (if present) -------- */ footer, body > footer, .site-footer { background: transparent !important; border-top: 1px solid var(--ai-border) !important; color: var(--ai-text-dim) !important; margin-top: 60px !important; } footer h3, footer h4, footer h5 { color: var(--ai-text) !important; } footer a, .footer-links a { color: var(--ai-text-dim) !important; text-decoration: none !important; } footer a:hover { color: var(--ai-text) !important; } /* -------- hide legacy back-to-top buttons (theme.js injects its own) -------- */ .btn-volver-arriba, #btnVolverArriba, #scrollTopBtn, .back-to-top-btn { display: none !important; } /* ========================================================================= Floating chip (back to home) — top-left ========================================================================= */ .ai-chip { position: fixed; top: 20px; left: 20px; z-index: 2147483000; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px; background: rgba(15, 15, 22, 0.72); border: 1px solid var(--ai-border-strong); color: var(--ai-text) !important; text-decoration: none !important; font-family: var(--ai-font-display) !important; font-weight: 600 !important; font-size: 0.88rem !important; letter-spacing: -0.01em; backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; line-height: 1; user-select: none; } .ai-chip:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(139, 92, 246, 0.35); border-color: rgba(139, 92, 246, 0.55); color: #fff !important; text-decoration: none !important; } .ai-chip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ai-accent-3); box-shadow: 0 0 10px var(--ai-accent-3); animation: ai-pulse 2s infinite; flex-shrink: 0; } .ai-chip__arrow { display: inline-block; transition: transform 0.25s ease; color: var(--ai-text-dim); font-family: var(--ai-font-mono); font-size: 0.95rem; } .ai-chip:hover .ai-chip__arrow { transform: translateX(-3px); color: var(--ai-accent-2); } .ai-chip__brand .dim { color: var(--ai-text-dim); font-weight: 400; } @keyframes ai-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.18); } } /* ========================================================================= Page title pill (top-center, injected by theme.js) ========================================================================= */ .ai-pagepill { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 2147482999; padding: 10px 18px; border-radius: 999px; background: rgba(15, 15, 22, 0.72); border: 1px solid var(--ai-border-strong); color: var(--ai-text-dim); font-family: var(--ai-font-mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50vw; } /* ========================================================================= Dock (bottom-right): scroll-to-top ========================================================================= */ .ai-dock { position: fixed; bottom: 20px; right: 20px; z-index: 2147483000; display: flex; flex-direction: column; gap: 10px; } .ai-dock__btn { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--ai-border-strong); background: rgba(15, 15, 22, 0.72); color: var(--ai-text) !important; backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); cursor: pointer; display: flex !important; align-items: center; justify-content: center; transition: transform 0.2s, border-color 0.2s, color 0.2s, opacity 0.3s; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); padding: 0; } .ai-dock__btn:hover { transform: translateY(-3px); border-color: rgba(139, 92, 246, 0.55); color: var(--ai-accent) !important; background: rgba(15, 15, 22, 0.72) !important; } .ai-dock__btn svg { width: 18px; height: 18px; display: block; } .ai-dock__btn--top { opacity: 0; pointer-events: none; } .ai-dock__btn--top.is-visible { opacity: 1; pointer-events: auto; } /* -------- responsive -------- */ @media (max-width: 560px) { .ai-chip { top: 12px; left: 12px; padding: 8px 14px 8px 10px; font-size: 0.8rem !important; } .ai-pagepill { top: 12px; font-size: 0.7rem; max-width: 40vw; padding: 8px 12px; } .ai-dock { bottom: 14px; right: 14px; } .ai-dock__btn { width: 40px; height: 40px; border-radius: 12px; } body { padding-top: 64px !important; } } @media (prefers-reduced-motion: reduce) { .ai-chip, .ai-dock__btn, .ai-chip__arrow, .ai-chip__dot, body::before { animation: none !important; transition: none !important; } }