/* ========================================================================== django-seo-suite documentation theme (Specivo design language) Light + dark, driven by Bootstrap 5.3 color modes ([data-bs-theme] on ). Styles raw MkDocs/pymdownx output inside .article. ========================================================================== */ :root { --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-serif: 'Lora', Georgia, serif; --gold: #c49a3c; --gold-bright: #d4af5a; --gold-pale: #f0dca8; --max-content: 780px; --sidebar-w: 280px; --toc-w: 220px; --header-h: 64px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --code-bg: #0d0b20; --code-fg: #e9e4f8; } [data-bs-theme="light"] { --bg: #faf7f0; --bg-soft: #fffdf8; --surface: #ffffff; --surface-2: #f5f1e9; --header-bg: rgba(255, 253, 248, 0.82); --text: #211d3a; --text-muted: #645f78; --text-dim: #938da6; --heading: #16133a; --border: #e7e1d6; --border-strong: #d8d1c3; --link: #8a6a1e; --link-hover: #6f5314; --gold-glow: rgba(196, 154, 60, 0.13); --gold-border: rgba(196, 154, 60, 0.30); --shadow-md: 0 4px 16px rgba(22, 19, 58, 0.07); --shadow-lg: 0 12px 40px rgba(22, 19, 58, 0.12); --sidebar-active-bg: rgba(196, 154, 60, 0.12); --hero-glow: radial-gradient(ellipse at 75% 0%, rgba(196,154,60,0.10), transparent 60%); --grain-opacity: 0; color-scheme: light; } [data-bs-theme="dark"] { --bg: #12102e; --bg-soft: #15123a; --surface: rgba(28, 25, 64, 0.55); --surface-2: #1a1745; --header-bg: rgba(18, 16, 46, 0.82); --text: #e8e4f0; --text-muted: #9994ab; --text-dim: #6e6883; --heading: #f3f0fa; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(196, 154, 60, 0.28); --link: #d4af5a; --link-hover: #f0dca8; --gold-glow: rgba(196, 154, 60, 0.15); --gold-border: rgba(196, 154, 60, 0.30); --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.35); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5); --sidebar-active-bg: rgba(196, 154, 60, 0.14); --hero-glow: radial-gradient(ellipse at 78% -10%, rgba(196,154,60,0.10), rgba(90,62,158,0.12) 35%, transparent 65%); --grain-opacity: 0.025; color-scheme: dark; } /* ---- base ---- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a { color: var(--link); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--link-hover); } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--heading); line-height: 1.2; font-weight: 700; } ::selection { background: rgba(196, 154, 60, 0.3); color: var(--heading); } .accent { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--gold); } /* ---- header ---- */ .site-header { position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 1030; display: flex; align-items: center; gap: 18px; padding: 0 20px; background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--heading); flex-shrink: 0; } .brand svg { display: block; } .brand .brand-sep { width: 1px; height: 22px; background: var(--border-strong); } .brand .brand-doc { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); } .header-search { position: relative; margin-left: auto; max-width: 300px; flex: 1; } .header-search .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: .9rem; } .header-search input { width: 100%; font-family: var(--font-body); font-size: .85rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 12px 8px 34px; transition: border-color .2s ease, box-shadow .2s ease; } .header-search input::placeholder { color: var(--text-dim); } .header-search input:focus { outline: none; border-color: var(--gold-border); box-shadow: 0 0 0 3px var(--gold-glow); } .header-search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: .65rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; background: var(--bg); } .search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1040; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 60vh; overflow-y: auto; padding: 6px; } .search-hit { display: block; padding: 9px 12px; border-radius: var(--radius-sm); } .search-hit:hover { background: var(--gold-glow); } .search-hit .sh-title { display: block; font-size: .85rem; font-weight: 600; color: var(--heading); } .search-hit .sh-text { display: block; font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-empty { padding: 12px; font-size: .82rem; color: var(--text-dim); } .header-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .header-nav a.navlink { font-size: .85rem; font-weight: 500; color: var(--text-muted); padding: 7px 10px; border-radius: var(--radius-sm); } .header-nav a.navlink:hover { color: var(--heading); background: var(--surface-2); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); color: var(--text-muted); background: transparent; border: 1px solid transparent; cursor: pointer; font-size: 1.05rem; transition: all .15s ease; } .icon-btn:hover { color: var(--gold); background: var(--surface-2); border-color: var(--border); } .version-pill { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; color: var(--gold); background: var(--gold-glow); border: 1px solid var(--gold-border); border-radius: 999px; padding: 3px 10px; } .btn-gold { display: inline-flex; align-items: center; gap: 7px; background: var(--gold); color: #1a1100; font-weight: 700; font-size: .8rem; border: none; border-radius: var(--radius-sm); padding: 9px 16px; cursor: pointer; transition: all .25s ease; text-decoration: none; } .btn-gold:hover { background: var(--gold-bright); color: #1a1100; box-shadow: 0 0 18px rgba(196,154,60,.35); } .theme-menu .dropdown-menu { --bs-dropdown-bg: var(--surface-2); --bs-dropdown-border-color: var(--border); --bs-dropdown-link-color: var(--text-muted); --bs-dropdown-link-hover-bg: var(--gold-glow); --bs-dropdown-link-hover-color: var(--gold); --bs-dropdown-link-active-bg: var(--gold-glow); --bs-dropdown-link-active-color: var(--gold); font-size: .85rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width: 9rem; } .theme-menu .dropdown-item { display: flex; align-items: center; } .theme-menu .dropdown-item .bi { margin-right: 8px; } .theme-menu .dropdown-item .check { margin-left: auto; opacity: 0; } .theme-menu .dropdown-item.active .check { opacity: 1; } .menu-toggle { display: none; } /* ---- shell ---- */ .shell { position: relative; max-width: 1480px; margin: 0 auto; padding-top: var(--header-h); display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); align-items: start; } /* ---- sidebar ---- */ .sidebar { position: sticky; top: var(--header-h); align-self: start; height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 28px 16px 60px 24px; border-right: 1px solid var(--border); scrollbar-width: thin; } .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; } .nav-root, .nav-root ul { list-style: none; margin: 0; padding: 0; } .nav-root > li { margin-bottom: 4px; } .nav-group { margin: 18px 0 14px; } .nav-group-title { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; padding: 4px 12px; margin-bottom: 4px; } .nav-root a { display: block; font-size: .875rem; color: var(--text-muted); padding: 6px 12px; border-radius: var(--radius-sm); border-left: 2px solid transparent; transition: all .15s ease; } .nav-root a:hover { color: var(--heading); background: var(--surface-2); } .nav-root a.active { color: var(--gold); background: var(--sidebar-active-bg); border-left-color: var(--gold); font-weight: 600; } .nav-solo > a { font-weight: 600; color: var(--text); } /* ---- content ---- */ .content { min-width: 0; padding: 40px 56px 96px; position: relative; } .content::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 420px; background: var(--hero-glow); pointer-events: none; z-index: -1; } .article { max-width: var(--max-content); } .breadcrumbs { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: var(--text-dim); margin-bottom: 22px; flex-wrap: wrap; } .breadcrumbs a { color: var(--text-muted); } .breadcrumbs .bi { font-size: .7rem; } .eyebrow { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 14px; } .article h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); letter-spacing: -0.03em; margin: 0 0 18px; } .article > h1 + p { font-size: 1.18rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 32px; } .lede { font-size: 1.18rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 32px; } .article h2 { font-size: 1.55rem; letter-spacing: -0.02em; margin: 52px 0 16px; padding-top: 14px; border-top: 1px solid var(--border); } .article h3 { font-size: 1.18rem; margin: 34px 0 12px; } .article h4 { font-size: 1rem; margin: 26px 0 10px; } .article p { color: var(--text); margin: 0 0 18px; } .article ul, .article ol { color: var(--text); margin: 0 0 18px; padding-left: 22px; } .article li { margin-bottom: 7px; } .article li::marker { color: var(--gold); } .article blockquote { margin: 0 0 20px; padding: 4px 18px; border-left: 3px solid var(--gold-border); color: var(--text-muted); font-style: italic; } .article img { max-width: 100%; border-radius: var(--radius-md); } .article hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; } /* heading permalinks (toc permalink) */ .headerlink { color: var(--text-dim); opacity: 0; margin-left: 8px; font-size: .8em; text-decoration: none; } .article h2:hover .headerlink, .article h3:hover .headerlink, .article h4:hover .headerlink { opacity: 1; } /* inline code */ .article :not(pre) > code { font-family: var(--font-mono); font-size: .85em; color: var(--gold); background: var(--gold-glow); border: 1px solid var(--gold-border); border-radius: 5px; padding: 1px 6px; } /* code blocks (pymdownx .highlight) — dark in both themes */ .article .highlight { position: relative; margin: 0 0 24px; background: var(--code-bg); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; } .article .highlight pre { margin: 0; padding: 16px 18px; overflow-x: auto; } .article .highlight code { font-family: var(--font-mono); font-size: .82rem; line-height: 1.75; color: var(--code-fg); background: none; border: none; padding: 0; } .copy-btn { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #b9b3d0; border-radius: 5px; padding: 3px 9px; font-family: var(--font-mono); font-size: .7rem; cursor: pointer; opacity: 0; transition: all .15s ease; } .article .highlight:hover .copy-btn { opacity: 1; } .copy-btn:hover { color: var(--gold-pale); border-color: var(--gold-border); } /* admonitions (no colored left bar — icon chip + uppercase title) */ .article .admonition { position: relative; margin: 0 0 24px; padding: 16px 18px 16px 56px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-md); } .article .admonition::before { content: "\F431"; font-family: "bootstrap-icons"; position: absolute; left: 16px; top: 16px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; font-size: .95rem; color: #3574c4; background: rgba(53, 116, 196, 0.12); } .article .admonition-title { font-weight: 700; color: #3574c4; margin: 0 0 4px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-mono); } .article .admonition > :last-child { margin-bottom: 0; } .article .admonition.tip, .article .admonition.success, .article .admonition.hint { } .article .admonition.tip::before, .article .admonition.success::before, .article .admonition.hint::before { content: "\F4A2"; color: #2a8a5c; background: rgba(42, 138, 92, 0.13); } .article .admonition.tip .admonition-title, .article .admonition.success .admonition-title, .article .admonition.hint .admonition-title { color: #2a8a5c; } .article .admonition.warning::before, .article .admonition.caution::before, .article .admonition.attention::before { content: "\F33A"; color: var(--gold); background: var(--gold-glow); } .article .admonition.warning .admonition-title, .article .admonition.caution .admonition-title, .article .admonition.attention .admonition-title { color: var(--gold); } .article .admonition.danger::before, .article .admonition.error::before { content: "\F622"; color: #c44040; background: rgba(196, 64, 64, 0.12); } .article .admonition.danger .admonition-title, .article .admonition.error .admonition-title { color: #c44040; } .article .admonition.note::before { content: "\F431"; } [data-bs-theme="dark"] .article .admonition.note .admonition-title { color: #79a8e6; } [data-bs-theme="dark"] .article .admonition.tip .admonition-title { color: #6cc79a; } /* pymdownx.details */ .article details.admonition { padding-left: 18px; } .article details.admonition summary.admonition-title { padding-left: 40px; cursor: pointer; list-style: none; } /* tables (wrapped by JS in .table-wrap) */ .table-wrap { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--border); border-radius: var(--radius-md); } .article table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 0; } .article th, .article td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } .article thead th { background: var(--surface-2); color: var(--heading); font-weight: 600; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; } .article tbody tr:last-child td { border-bottom: none; } .article tbody tr:hover { background: var(--surface-2); } /* page nav */ .page-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); } .page-nav a { flex: 1; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: border-color .2s ease; display: block; } .page-nav a:hover { border-color: var(--gold-border); } .page-nav .dir { display: block; font-size: .72rem; color: var(--text-dim); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; } .page-nav .ttl { display: block; color: var(--heading); font-weight: 600; font-size: .95rem; margin-top: 2px; } .page-nav .next { text-align: right; } /* toc */ .toc { position: sticky; top: var(--header-h); align-self: start; height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 44px 24px 60px 8px; scrollbar-width: thin; } .toc .toc-title { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin-bottom: 12px; } .toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); } .toc li a { display: block; font-size: .82rem; color: var(--text-muted); padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; } .toc li a:hover { color: var(--heading); } .toc li a.active { color: var(--gold); border-left-color: var(--gold); font-weight: 600; } .toc li.sub a { padding-left: 26px; font-size: .78rem; } /* footer */ .site-footer { position: relative; z-index: 1; border-top: 1px solid var(--border); background: var(--bg-soft); } .footer-inner { max-width: 1480px; margin: 0 auto; padding: 48px 32px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } .footer-inner h4 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 14px; } .footer-inner ul { list-style: none; margin: 0; padding: 0; } .footer-inner li { margin-bottom: 9px; } .footer-inner a { font-size: .875rem; color: var(--text-muted); } .footer-inner a:hover { color: var(--gold); } .footer-blurb { color: var(--text-muted); font-size: .875rem; max-width: 300px; margin: 14px 0 0; } .footer-bottom { border-top: 1px solid var(--border); } .footer-bottom .fb-inner { max-width: 1480px; margin: 0 auto; padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--text-dim); } /* Version lives in the header on wide screens; it moves to the footer on mobile (the header runs out of room). Exactly one is visible at a time. */ .footer-version { display: none; } /* consent */ .consent { position: fixed; inset: auto 16px 16px auto; z-index: 1060; max-width: 420px; background: var(--surface-2); border: 1px solid var(--gold-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 20px 22px; transform: translateY(140%); opacity: 0; transition: transform .5s var(--ease-out), opacity .4s ease; } .consent[hidden] { display: block; } /* JS controls visibility via .show */ .consent.show { transform: translateY(0); opacity: 1; } .consent h5 { margin: 0 0 8px; font-size: 1rem; color: var(--heading); display: flex; align-items: center; gap: 8px; } .consent h5 .bi { color: var(--gold); } .consent p { font-size: .85rem; color: var(--text-muted); margin: 0 0 16px; line-height: 1.6; } .consent .actions { display: flex; gap: 10px; justify-content: flex-end; } .btn-outline { background: transparent; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 16px; font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .15s ease; } .btn-outline:hover { color: var(--heading); border-color: var(--gold-border); } /* ---- responsive ---- */ @media (max-width: 1200px) { .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } .toc { display: none; } .content { padding: 40px 40px 96px; } } @media (max-width: 996px) { .shell { grid-template-columns: minmax(0, 1fr); } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; z-index: 1025; height: 100vh; padding-top: calc(var(--header-h) + 16px); background: var(--bg); transform: translateX(-100%); transition: transform .3s var(--ease-out); box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .menu-toggle { display: inline-flex; } .content { padding: 32px 22px 80px; } .header-search { display: none; } .sidebar-backdrop { position: fixed; inset: 0; z-index: 1020; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .3s ease; } .sidebar-backdrop.show { opacity: 1; pointer-events: auto; } .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 560px) { .header-nav .hide-sm { display: none; } .footer-inner { grid-template-columns: 1fr; } .consent { inset: auto 12px 12px 12px; max-width: none; } .page-nav { flex-direction: column; } } @media (max-width: 640px) { /* Header runs out of room on phones — move the version pill into the footer. */ .header-nav .version-pill { display: none; } .footer-version { display: inline-flex; align-items: center; } }