/* ============================================================================ Octohub Visual Identity Guide — core stylesheet - Imports tokens - Top nav + breadcrumb + cover hero + body + prev/next footer - Pure flexbox layout (no CSS grids; PrimeFlex-style if we want it later) - Dark mode aware (driven by [data-theme="dark"] on ) ============================================================================ */ @import './oh-tokens.css'; @import './icons/tabler-icons.min.css'; /* Tabler webfont — the icon system */ /* ---- Latin font face — self-hosted Poppins (latin subset, 4 weights) -- Was loaded from Google Fonts CDN; PR 7 (2026-05-28) moved it locally to kill the render-blocking third-party fetch on every page (and the user-agent / IP leak to Google on every page view). Latin subset only — we don't ship Devanagari / Latin-Ext. ~31 KB total across 4 weights. */ @font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap; src: url('../_fonts/poppins/Poppins-Regular-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap; src: url('../_fonts/poppins/Poppins-Medium-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url('../_fonts/poppins/Poppins-SemiBold-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url('../_fonts/poppins/Poppins-Bold-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Arabic font face -------------------------------------------------- */ @font-face { font-family: 'Octohub Arabic'; font-weight: 400; font-style: normal; font-display: swap; src: url('../_fonts/arabic/Octohub-Arabic-Regular.woff2') format('woff2'), url('../_fonts/arabic/Octohub-Arabic-Regular.woff') format('woff'), url('../_fonts/arabic/Octohub-Arabic-Regular.ttf') format('truetype'); } @font-face { font-family: 'Octohub Arabic'; font-weight: 700; font-style: normal; font-display: swap; src: url('../_fonts/arabic/Octohub-Arabic-Bold.woff2') format('woff2'), url('../_fonts/arabic/Octohub-Arabic-Bold.woff') format('woff'), url('../_fonts/arabic/Octohub-Arabic-Bold.ttf') format('truetype'); } /* ---- Reset / base ------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } html { /* Fixed-header height — the overlay header floats over the cover, so in-page anchors must clear it (and the cover reserves this much top space). */ --oh-header-h: 96px; scroll-padding-top: var(--oh-header-h); } body { margin: 0; font-family: var(--oh-font-app); font-size: 15px; line-height: 1.55; color: var(--oh-text-default); background-color: var(--oh-bg-page); background-image: radial-gradient(circle, rgba(91, 91, 214, 0.14) 1.2px, transparent 1.6px); background-size: 24px 24px; background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; min-height: 100vh; transition: background-color var(--oh-duration-base) var(--oh-ease), color var(--oh-duration-base) var(--oh-ease); } [data-theme="dark"] body { background-image: radial-gradient(circle, rgba(165, 180, 252, 0.14) 1.2px, transparent 1.6px); } /* In Arabic context, make the app font variable resolve to the Arabic typeface, so every element that opts into var(--oh-font-app) inherits it automatically. Explicit 'Poppins' families in inline styles stay Latin (used in Poppins specimens). */ [lang="ar"], [dir="rtl"] { --oh-font-app: 'Octohub Arabic', 'Greta Arabic', system-ui, sans-serif; } [lang="ar"] body { font-family: var(--oh-font-app); } a { color: var(--oh-text-link); text-decoration: none; transition: color var(--oh-duration-fast) var(--oh-ease); } a:hover { color: var(--oh-text-link-hover); } img, svg { display: block; max-width: 100%; } code, kbd { font-family: var(--oh-font-mono); font-size: 0.9em; } /* ---- Layout shell (flex column) --------------------------------------- */ .oh-shell { display: flex; flex-direction: column; min-height: 100vh; } .oh-main { flex: 1 0 auto; display: flex; flex-direction: column; } .oh-container { width: 100%; max-width: var(--oh-container); margin: 0 auto; padding: 0 var(--oh-space-5); } /* ============================================================================ CONCENTRIC RINGS — chrome decoration motif (CSS-only, theme-aware) 5 rings · radii 18/38/62/90/118 · fading opacity outward. Will be swapped for the canonical solutions/_ui/concentric-rings.svg once Omar generates it (see _ui/_prompts/concentric-rings.md). ============================================================================ */ :root { --oh-rings-color: 91, 91, 214; /* Indigo 500 RGB, used in light mode */ } [data-theme="dark"] { --oh-rings-color: 165, 180, 252; /* Indigo 300 RGB, used in dark mode */ } /* ============================================================================ HEADER STACK — top-nav + breadcrumb + section-nav wrapped together, pinned as a single block while scrolling. ============================================================================ */ .oh-header-stack { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50; background: transparent; transition: background var(--oh-duration-base) var(--oh-ease), box-shadow var(--oh-duration-base) var(--oh-ease); } /* Solid state — once the cover has scrolled up under the header (toggled by styleHeaderOnScroll in oh-core.js), the bar gains a page background + shadow. */ .oh-header-stack.is-solid { background: var(--oh-bg-page); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.07); } /* ============================================================================ TOP NAV — minimal, flex (sits inside .oh-header-stack) ============================================================================ */ .oh-top { position: relative; z-index: 1; /* Transparent while overlaying the dark cover; the decorative ring gradient, blur and hairline are added only in the solid (scrolled) state below. */ background: transparent; border-bottom: 1px solid transparent; transition: background var(--oh-duration-base) var(--oh-ease), border-color var(--oh-duration-base) var(--oh-ease); } .oh-header-stack.is-solid .oh-top { background: radial-gradient( circle at calc(100% - 80px) 50%, transparent 17px, rgba(var(--oh-rings-color), 0.18) 17px, rgba(var(--oh-rings-color), 0.18) 18px, transparent 19px, transparent 37px, rgba(var(--oh-rings-color), 0.14) 37px, rgba(var(--oh-rings-color), 0.14) 38px, transparent 39px, transparent 61px, rgba(var(--oh-rings-color), 0.11) 61px, rgba(var(--oh-rings-color), 0.11) 62px, transparent 63px, transparent 89px, rgba(var(--oh-rings-color), 0.08) 89px, rgba(var(--oh-rings-color), 0.08) 90px, transparent 91px, transparent 117px, rgba(var(--oh-rings-color), 0.05) 117px, rgba(var(--oh-rings-color), 0.05) 118px, transparent 119px ), color-mix(in srgb, var(--oh-bg-page) 88%, transparent); background-repeat: no-repeat, no-repeat; backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--oh-border-default); } [dir="rtl"] .oh-header-stack.is-solid .oh-top { background: radial-gradient( circle at 80px 50%, transparent 17px, rgba(var(--oh-rings-color), 0.18) 17px, rgba(var(--oh-rings-color), 0.18) 18px, transparent 19px, transparent 37px, rgba(var(--oh-rings-color), 0.14) 37px, rgba(var(--oh-rings-color), 0.14) 38px, transparent 39px, transparent 61px, rgba(var(--oh-rings-color), 0.11) 61px, rgba(var(--oh-rings-color), 0.11) 62px, transparent 63px, transparent 89px, rgba(var(--oh-rings-color), 0.08) 89px, rgba(var(--oh-rings-color), 0.08) 90px, transparent 91px, transparent 117px, rgba(var(--oh-rings-color), 0.05) 117px, rgba(var(--oh-rings-color), 0.05) 118px, transparent 119px ), color-mix(in srgb, var(--oh-bg-page) 88%, transparent); background-repeat: no-repeat, no-repeat; } .oh-top__inner { display: flex; align-items: center; gap: var(--oh-space-4); height: 96px; /* taller bar so the full horizontal lockup (70px mark) sits with breathing room */ width: 100%; /* Full-bleed bar — the 9-section two-level nav needs more room than the 1280 content column, so the header is not capped to --oh-container. */ max-width: none; margin: 0 auto; padding: 0 var(--oh-space-5); } .oh-top__brand { display: inline-flex; align-items: center; gap: var(--oh-space-3); font-family: var(--oh-font-app); font-weight: 700; font-size: 15px; letter-spacing: -0.2px; color: var(--oh-text-default); text-decoration: none; } .oh-top__brand:hover { color: var(--oh-text-default); } .oh-top__brand-mark { height: 70px; width: auto; object-fit: contain; flex-shrink: 0; } /* Light mode: show color mark, hide white mark. Dark mode: reverse. */ .oh-top__brand-mark--dark { display: none; } [data-theme="dark"] .oh-top__brand-mark--light { display: none; } [data-theme="dark"] .oh-top__brand-mark--dark { display: inline-block; } .oh-top__brand-text em { font-style: normal; font-weight: 400; color: var(--oh-text-muted); } /* Tagline retired from the bar — the lockup wordmark already carries identity, and dropping it frees the row for the 9-section nav (brand aria-label keeps it for AT). It still appears in the drawer header + on the home link. */ .oh-top .oh-top__brand-text { display: none; } .oh-top__sep { flex: 1; } /* Primary section nav inside the bar — desktop only; ☰ drawer takes over <720px. overflow stays visible so the two-level hover dropdowns can escape the bar. */ .oh-top__nav { display: flex; align-items: center; gap: 1px; /* Never shrink below content — a shrunk nav with visible overflow (needed for the dropdowns) would spill its links over the language/theme buttons. When there isn't room, the whole nav is hidden (breakpoint below) for the drawer. */ flex-shrink: 0; } .oh-top__nav-item { position: relative; display: inline-flex; } .oh-top__nav-link { display: inline-flex; align-items: center; padding: 6px 8px; font: 500 12px/1 var(--oh-font-app); color: var(--oh-text-muted); text-decoration: none; white-space: nowrap; border-radius: var(--oh-radius-pill); transition: all var(--oh-duration-fast) var(--oh-ease); } .oh-top__nav-link:hover { color: var(--oh-primary); background: var(--oh-primary-soft); } .oh-top__nav-link.is-current { color: var(--oh-primary); background: var(--oh-primary-soft); font-weight: 700; } .oh-top__nav-caret { width: 12px; height: 12px; margin-inline-start: 2px; opacity: 0.7; transition: transform var(--oh-duration-fast) var(--oh-ease); } .oh-top__nav-item:hover .oh-top__nav-caret, .oh-top__nav-item:focus-within .oh-top__nav-caret { transform: rotate(180deg); } /* ---- Two-level dropdown — a section's pages, on hover / keyboard focus -- */ .oh-top__dropdown { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 20; min-width: 210px; margin: 0; padding: var(--oh-space-2); list-style: none; background: var(--oh-bg-raised); border: 1px solid var(--oh-border-default); border-radius: var(--oh-radius-md); box-shadow: var(--oh-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--oh-duration-fast) var(--oh-ease), transform var(--oh-duration-fast) var(--oh-ease), visibility var(--oh-duration-fast) var(--oh-ease); } /* Hover bridge — keeps :hover alive while the cursor crosses the gap. */ .oh-top__dropdown::before { content: ""; position: absolute; inset-block-end: 100%; inset-inline: 0; height: 10px; } .oh-top__nav-item:hover .oh-top__dropdown, .oh-top__nav-item:focus-within .oh-top__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } /* The rightmost items open their panel toward the inline-start so it never spills past the viewport edge. */ .oh-top__nav-item:nth-last-child(-n+2) .oh-top__dropdown { inset-inline-start: auto; inset-inline-end: 0; } .oh-top__dropdown-link { display: flex; align-items: center; gap: var(--oh-space-2); padding: 7px 10px; border-radius: var(--oh-radius-sm); font: 500 13px/1.3 var(--oh-font-app); color: var(--oh-text-muted); text-decoration: none; white-space: nowrap; transition: all var(--oh-duration-fast) var(--oh-ease); } .oh-top__dropdown-link:hover { color: var(--oh-primary); background: var(--oh-primary-soft); } .oh-top__dropdown-link.is-current { color: var(--oh-primary); background: var(--oh-primary-soft); font-weight: 700; } .oh-top__dropdown-ico { display: inline-flex; align-items: center; color: var(--oh-text-subtle); flex: none; } .oh-top__dropdown-ico .oh-ico { font-size: 18px; } .oh-top__dropdown-link:hover .oh-top__dropdown-ico, .oh-top__dropdown-link.is-current .oh-top__dropdown-ico { color: var(--oh-primary); } /* The inline 9-section nav needs room; below this the ☰ drawer (also two-level) takes over. Tuned so MacBook Air / wide laptops show it, tablets use the drawer. */ @media (max-width: 1200px) { .oh-top__nav { display: none; } } .oh-top__btn { width: 36px; height: 36px; border: 1px solid var(--oh-border-default); background: var(--oh-bg-raised); border-radius: var(--oh-radius-md); color: var(--oh-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--oh-duration-fast) var(--oh-ease); font-size: 16px; } .oh-top__btn:hover { background: var(--oh-primary-soft); color: var(--oh-primary); border-color: var(--oh-primary); } .oh-top__btn .pi { font-size: 16px; line-height: 1; } .oh-top__menu-btn .pi { font-size: 18px; } .oh-top__btn .icon-sun { display: none; } .oh-top__btn .icon-moon { display: inline-flex; } [data-theme="dark"] .oh-top__btn .icon-sun { display: inline-flex; } [data-theme="dark"] .oh-top__btn .icon-moon { display: none; } .oh-top__lang-btn { width: auto; padding: 0 var(--oh-space-3); gap: 6px; text-decoration: none; } .oh-top__lang-btn .pi-language { font-size: 18px; } .oh-top__lang-code { font: 700 11px/1 var(--oh-font-mono); letter-spacing: 0.08em; } .oh-menu__lang .pi-language { font-size: 16px; } .oh-menu__lang .oh-top__lang-code { font-size: 12px; } .oh-top__menu-btn { /* sits leading, before brand */ } /* ---- Overlay state — header transparent over the always-dark cover ------ The cover is dark in both themes, so force the white lockup + white chrome regardless of light/dark; the solid (scrolled) state reverts to the tokens. */ .oh-header-stack:not(.is-solid) .oh-top__brand-mark--light { display: none; } .oh-header-stack:not(.is-solid) .oh-top__brand-mark--dark { display: inline-block; } .oh-header-stack:not(.is-solid) .oh-top__brand, .oh-header-stack:not(.is-solid) .oh-top__brand-text em { color: #fff; } .oh-header-stack:not(.is-solid) .oh-top__nav-link { color: rgba(255, 255, 255, 0.82); } .oh-header-stack:not(.is-solid) .oh-top__nav-link:hover, .oh-header-stack:not(.is-solid) .oh-top__nav-link.is-current { color: #fff; background: rgba(255, 255, 255, 0.14); } .oh-header-stack:not(.is-solid) .oh-top__btn { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); } .oh-header-stack:not(.is-solid) .oh-top__btn:hover { color: #fff; background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.5); } /* ============================================================================ MENU DRAWER — slide-out from inline-end, full height ============================================================================ */ .oh-menu { position: fixed; inset: 0; z-index: 100; pointer-events: none; } .oh-menu.is-open { pointer-events: auto; } .oh-menu__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); opacity: 0; transition: opacity var(--oh-duration-base) var(--oh-ease); } [data-theme="dark"] .oh-menu__backdrop { background: rgba(0, 0, 0, 0.7); } .oh-menu.is-open .oh-menu__backdrop { opacity: 1; } .oh-menu__panel { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(360px, 92vw); background: var(--oh-bg-page); border-inline-start: 1px solid var(--oh-border-default); box-shadow: -12px 0 40px -8px rgba(15, 23, 42, 0.2); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--oh-duration-base) var(--oh-ease); overflow: hidden; } /* Arm-curves motif — 3 overlapping open fading arcs sweeping diagonally, inspired by the Octohub tentacle wrap. Inline SVG so currentColor + gradient stops give us the fading stroke. The SVG viewBox is tall (240×1200) carrying THREE repeats of the 3-arc set stacked vertically, so the motif fills tall panels without visible joints. Animated with a continuous diagonal drift so the brush-stroke gesture reads as motion across the chrome. Will be swapped for the canonical solutions/_ui/arm-curves.svg if Omar produces one later. */ .oh-menu__motif { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; color: rgb(var(--oh-rings-color)); animation: oh-arms-drift 14s ease-in-out infinite alternate; will-change: transform; } /* All panel content sits above the motif */ .oh-menu__panel > *:not(.oh-menu__motif) { position: relative; z-index: 1; } /* Diagonal sway — ease-in-out alternate so the brush stroke reads as a slow breath without the snap-back of a linear loop. Amplitude tuned to be visible (40px / -80px) but not distracting. */ @keyframes oh-arms-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(40px, -80px, 0); } } @media (prefers-reduced-motion: reduce) { .oh-menu__motif { animation: none; } } [lang="ar"] .oh-menu__panel, [dir="rtl"] .oh-menu__panel { transform: translateX(-100%); box-shadow: 12px 0 40px -8px rgba(15, 23, 42, 0.2); } .oh-menu.is-open .oh-menu__panel { transform: translateX(0); } .oh-menu__head { display: flex; align-items: center; justify-content: space-between; padding: var(--oh-space-2) var(--oh-space-5); border-bottom: 1px solid var(--oh-border-default); flex-shrink: 0; } .oh-menu__home { display: inline-flex; align-items: center; gap: var(--oh-space-3); text-decoration: none; color: var(--oh-text-default); font: 700 15px/1.2 var(--oh-font-app); flex: 1; min-width: 0; } .oh-menu__home em { font-style: normal; font-weight: 500; color: var(--oh-text-default); font-size: 15px; } [lang="ar"] .oh-menu__home em, [dir="rtl"] .oh-menu__home em { font-family: 'Octohub Arabic', 'Greta Arabic', system-ui, sans-serif; font-size: 16px; font-weight: 600; } .oh-menu__close { width: 32px; height: 32px; border: 1px solid var(--oh-border-default); background: var(--oh-bg-raised); color: var(--oh-text-muted); border-radius: var(--oh-radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--oh-duration-fast) var(--oh-ease); } .oh-menu__close:hover { background: var(--oh-primary-soft); color: var(--oh-primary); border-color: var(--oh-primary); } .oh-menu__body { flex: 1; overflow-y: auto; padding: var(--oh-space-3) 0; } .oh-menu__section { border-bottom: 1px solid var(--oh-border-default); } .oh-menu__section:last-child { border-bottom: none; } .oh-menu__section-head { display: flex; align-items: center; gap: var(--oh-space-3); padding: var(--oh-space-3) var(--oh-space-5); cursor: pointer; list-style: none; user-select: none; transition: background var(--oh-duration-fast) var(--oh-ease); } .oh-menu__section-head::-webkit-details-marker { display: none; } .oh-menu__section-head:hover { background: var(--oh-primary-soft); } .oh-menu__num { font: 700 11px/1 var(--oh-font-mono); color: var(--oh-primary); letter-spacing: 0.08em; flex-shrink: 0; } .oh-menu__section-label { flex: 1; font: 600 14px/1 var(--oh-font-app); color: var(--oh-text-default); } .oh-menu__chevron { color: var(--oh-text-muted); font-size: 12px; transition: transform var(--oh-duration-fast) var(--oh-ease); } .oh-menu__section[open] .oh-menu__chevron { transform: rotate(180deg); } .oh-menu__close .pi { font-size: 14px; } .oh-menu__pages { list-style: none; margin: 0; padding: 0 0 var(--oh-space-3); background: var(--oh-bg-raised); } .oh-menu__page { display: block; padding: 8px var(--oh-space-5) 8px calc(var(--oh-space-5) + 28px); font: 400 13px/1.4 var(--oh-font-app); color: var(--oh-text-muted); text-decoration: none; border-inline-start: 2px solid transparent; transition: all var(--oh-duration-fast) var(--oh-ease); } [lang="ar"] .oh-menu__page, [dir="rtl"] .oh-menu__page { padding: 8px calc(var(--oh-space-5) + 28px) 8px var(--oh-space-5); } .oh-menu__page:hover { color: var(--oh-primary); background: var(--oh-primary-soft); } .oh-menu__page.is-current { color: var(--oh-primary); font-weight: 600; border-inline-start-color: var(--oh-primary); background: var(--oh-primary-soft); } .oh-menu__foot { flex-shrink: 0; display: flex; align-items: center; gap: var(--oh-space-3); padding: var(--oh-space-4) var(--oh-space-5); border-top: 1px solid var(--oh-border-default); } .oh-menu__lang, .oh-menu__theme { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--oh-border-default); border-radius: var(--oh-radius-pill); font: 600 12px/1 var(--oh-font-mono); color: var(--oh-text-default); text-decoration: none; cursor: pointer; background: none; transition: all var(--oh-duration-fast) var(--oh-ease); } .oh-menu__lang:hover, .oh-menu__theme:hover { border-color: var(--oh-primary); background: var(--oh-primary-soft); color: var(--oh-primary); } .oh-menu__theme .oh-ico { font-size: 16px; } .oh-menu__theme .icon-sun { display: none; } .oh-menu__theme .icon-moon { display: inline-flex; } [data-theme="dark"] .oh-menu__theme .icon-sun { display: inline-flex; } [data-theme="dark"] .oh-menu__theme .icon-moon { display: none; } body.oh-menu-open { overflow: hidden; } /* ============================================================================ BREADCRUMB — small, sits below the top nav, flex ============================================================================ */ .oh-breadcrumb { display: flex; align-items: center; gap: var(--oh-space-2); padding: var(--oh-space-3) var(--oh-space-5); font-size: 13px; color: var(--oh-text-muted); max-width: var(--oh-container); width: 100%; margin: 0 auto; } .oh-breadcrumb a { color: var(--oh-text-muted); text-decoration: none; } .oh-breadcrumb a:hover { color: var(--oh-primary); } .oh-breadcrumb__sep { color: var(--oh-text-subtle); font-size: 11px; } .oh-breadcrumb__current { color: var(--oh-text-default); font-weight: 600; } /* ============================================================================ SECTION NAV — pill strip showing sibling pages, sits above the cover ============================================================================ */ .oh-secnav { border-bottom: 1px solid var(--oh-border-default); background: color-mix(in srgb, var(--oh-bg-page) 88%, transparent); } .oh-secnav__inner { max-width: var(--oh-container); margin: 0 auto; padding: var(--oh-space-3) var(--oh-space-5); display: flex; flex-direction: column; gap: var(--oh-space-2); } .oh-secnav__row { display: flex; align-items: center; gap: var(--oh-space-5); flex-wrap: wrap; } .oh-secnav__row--child { padding-top: var(--oh-space-2); border-top: 1px dashed var(--oh-border-default); } .oh-secnav__sublabel { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font: 600 12px/1 var(--oh-font-app); color: var(--oh-text-muted); } .oh-secnav__sublabel { display: inline-flex; align-items: center; gap: 5px; } .oh-secnav__sub-ico { width: 14px; height: 14px; opacity: 0.6; flex: none; } [dir="rtl"] .oh-secnav__sub-ico { transform: scaleX(-1); } .oh-secnav__row--child .oh-secnav__tab { font-size: 11px; padding: 4px 10px; } .oh-secnav__head { display: inline-flex; align-items: center; gap: var(--oh-space-2); flex-shrink: 0; } .oh-secnav__num { font: 700 11px/1 var(--oh-font-mono); color: var(--oh-primary); letter-spacing: 0.08em; padding: 4px 8px; background: var(--oh-primary-soft); border-radius: var(--oh-radius-sm); } .oh-secnav__title { font: 600 13px/1 var(--oh-font-app); color: var(--oh-text-default); } .oh-secnav__tabs { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .oh-secnav__tab { display: inline-flex; align-items: center; padding: 6px 12px; font: 500 12px/1.3 var(--oh-font-app); color: var(--oh-text-muted); text-decoration: none; border-radius: var(--oh-radius-pill); white-space: nowrap; transition: all var(--oh-duration-fast) var(--oh-ease); } .oh-secnav__tab:hover { color: var(--oh-primary); background: var(--oh-primary-soft); } .oh-secnav__tab.is-current { color: var(--oh-primary); background: var(--oh-primary-soft); font-weight: 700; } /* ============================================================================ COVER HERO — the "01 —" + title block adapted from the PDF brand book Three motifs combined: - watermark of the Octohub mark in the corner - concentric circle ring around the section number - tentacle-derived curved accent line crossing the cover ============================================================================ */ .oh-cover { position: relative; overflow: hidden; background: var(--oh-cover-bg); color: var(--oh-cover-text); isolation: isolate; display: flex; align-items: stretch; /* Reserve space for the fixed overlay header; the dark background still fills behind it (the motifs span the padding box). */ padding-block-start: var(--oh-header-h); } /* Wavy bottom edge — a big wave band that carries the SAME dotted grid as the body (viewport-fixed so the dots line up), masked into a deep wave so the dark cover melts into the dotted body instead of a hard straight line. */ .oh-cover::after, .oh-hero::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; height: clamp(72px, 11vw, 168px); z-index: 1; pointer-events: none; background-color: var(--oh-bg-page); background-image: radial-gradient(circle, rgba(91, 91, 214, 0.14) 1.2px, transparent 1.6px); background-size: 24px 24px; background-attachment: fixed; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 168' preserveAspectRatio='none'%3E%3Cpath d='M0,104 C320,12 560,12 736,82 C912,152 1130,156 1440,60 L1440,168 L0,168 Z' fill='black'/%3E%3C/svg%3E") no-repeat center / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 168' preserveAspectRatio='none'%3E%3Cpath d='M0,104 C320,12 560,12 736,82 C912,152 1130,156 1440,60 L1440,168 L0,168 Z' fill='black'/%3E%3C/svg%3E") no-repeat center / 100% 100%; } [data-theme="dark"] .oh-cover::after, [data-theme="dark"] .oh-hero::after { background-image: radial-gradient(circle, rgba(165, 180, 252, 0.14) 1.2px, transparent 1.6px); } .oh-cover__inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--oh-space-5); padding: clamp(48px, 8vw, 96px) clamp(24px, 6vw, 80px); /* Extra bottom room so content always clears the wavy divider. */ padding-block-end: clamp(92px, 12vw, 190px); max-width: var(--oh-container); width: 100%; margin: 0 auto; min-height: clamp(340px, 38vw, 520px); justify-content: center; } .oh-cover__badge { display: inline-flex; align-items: center; gap: var(--oh-space-3); align-self: flex-start; } .oh-cover__badge-ring { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, transparent 18px, var(--oh-indigo-300) 19px, var(--oh-indigo-300) 20px, transparent 21px), radial-gradient(circle, transparent 26px, var(--oh-indigo-200) 27px, var(--oh-indigo-200) 28px, transparent 29px); display: flex; align-items: center; justify-content: center; color: var(--oh-indigo-200); font-family: var(--oh-font-mono); font-weight: 700; font-size: 16px; letter-spacing: 0.05em; flex-shrink: 0; } /* ---- Breadcrumb — now hosted inside the cover badge, after the ring ----- */ .oh-cover__breadcrumb { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--oh-space-2); font-family: var(--oh-font-app); font-size: 13px; } .oh-cover__breadcrumb a { display: inline-flex; align-items: center; color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color var(--oh-duration-fast) var(--oh-ease); } .oh-cover__breadcrumb a:hover { color: #fff; } .oh-cover__breadcrumb .oh-breadcrumb__sep { color: rgba(255, 255, 255, 0.35); font-size: 11px; } .oh-cover__breadcrumb .oh-breadcrumb__current { display: inline-flex; align-items: center; color: var(--oh-indigo-200); font-weight: 600; } .oh-cover__breadcrumb .oh-breadcrumb__ico { font-size: 16px; margin-inline-end: 5px; vertical-align: middle; } .oh-cover__title { font-family: var(--oh-font-app); font-weight: 700; font-size: clamp(40px, 7vw, 80px); line-height: 1.05; letter-spacing: -1.5px; margin: 0; color: var(--oh-text-inverse); } .oh-cover__lede { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, 0.7); max-width: var(--oh-prose); margin: 0; } /* ---- Cover motifs (decorative layer) ---------------------------------- */ .oh-cover__motifs { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .oh-cover__watermark { position: absolute; bottom: -10%; right: -8%; width: clamp(280px, 36vw, 520px); opacity: 0.08; filter: brightness(1.4) saturate(0); transform: rotate(-8deg); } [lang="ar"] .oh-cover__watermark { right: auto; left: -8%; transform: rotate(8deg); } .oh-cover__curve { position: absolute; top: -20%; right: -10%; width: 60%; height: 140%; opacity: 0.18; pointer-events: none; } [lang="ar"] .oh-cover__curve { right: auto; left: -10%; transform: scaleX(-1); } .oh-cover__dots { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1.5px); background-size: 28px 28px; background-position: 0 0; mask-image: linear-gradient(135deg, rgba(0,0,0,0.5), transparent 60%); -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.5), transparent 60%); } /* ============================================================================ PAGE BODY — section content, sits below the cover ============================================================================ */ .oh-body { padding: clamp(40px, 6vw, 80px) var(--oh-space-5); display: flex; flex-direction: column; gap: var(--oh-space-6); max-width: var(--oh-container); width: 100%; margin: 0 auto; } .oh-body > p { max-width: var(--oh-prose); font-size: 16px; line-height: 1.75; color: var(--oh-text-default); } .oh-body h2 { font-family: var(--oh-font-app); font-weight: 700; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.5px; margin: 0 0 var(--oh-space-3); color: var(--oh-text-default); } .oh-body h3 { font-family: var(--oh-font-app); font-weight: 600; font-size: clamp(16px, 1.4vw, 18px); margin: 0 0 var(--oh-space-2); color: var(--oh-text-default); } /* ============================================================================ PREV / NEXT FOOTER — flex, sticky-feel at end of each page ============================================================================ */ .oh-pager { display: flex; flex-wrap: wrap; gap: var(--oh-space-3); padding: var(--oh-space-6) var(--oh-space-5); margin-top: var(--oh-space-6); border-top: 1px solid var(--oh-border-default); max-width: var(--oh-container); width: 100%; margin-left: auto; margin-right: auto; } .oh-pager a { flex: 1 1 280px; display: flex; flex-direction: column; gap: 4px; padding: var(--oh-space-4); border: 1px solid var(--oh-border-default); border-radius: var(--oh-radius-lg); background: var(--oh-bg-raised); color: var(--oh-text-default); text-decoration: none; transition: all var(--oh-duration-fast) var(--oh-ease); } .oh-pager a:hover { border-color: var(--oh-primary); background: var(--oh-primary-soft); transform: translateY(-2px); box-shadow: var(--oh-shadow-md); } .oh-pager__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--oh-text-muted); font-weight: 600; } .oh-pager__title { font-size: 15px; font-weight: 600; } .oh-pager__next { text-align: end; } /* pager icons (Tabler chevrons) — beside the text, mirrored in RTL */ .oh-pager a { flex-direction: row; align-items: center; gap: var(--oh-space-3); } .oh-pager__col { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; } .oh-pager__next .oh-pager__col { align-items: flex-end; } .oh-pager__ico { display: inline-flex; color: var(--oh-primary); flex: none; } .oh-pager__ico .oh-ico { font-size: 26px; } /* Only the directional chevron fallback flips in RTL; real page glyphs never mirror. */ [dir="rtl"] .oh-pager__ico--chevron .oh-ico { transform: scaleX(-1); } /* ARABIC labels: drop uppercase + letter-spacing AND switch to the Arabic font (the default mono/Poppins stack has no Arabic glyphs and falls back to a system font that renders weak). */ [lang="ar"] .oh-pager__label, [dir="rtl"] .oh-pager__label, [lang="ar"] .oh-hero__eyebrow, [dir="rtl"] .oh-hero__eyebrow, [lang="ar"] .oh-toc__head small, [dir="rtl"] .oh-toc__head small, [lang="ar"] .oh-toc__count, [dir="rtl"] .oh-toc__count { text-transform: none; letter-spacing: 0; font-family: var(--oh-font-arabic); } /* ============================================================================ FOOTER — copyright · Powered-by Octohub logo · release block ============================================================================ */ .oh-footer { flex-shrink: 0; padding: var(--oh-space-6) var(--oh-space-5); border-top: 1px solid var(--oh-border-default); display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--oh-space-5); align-items: center; font-size: 12px; color: var(--oh-text-muted); max-width: var(--oh-container); width: 100%; margin: 0 auto; background: radial-gradient( circle at 80px 50%, transparent 17px, rgba(var(--oh-rings-color), 0.18) 17px, rgba(var(--oh-rings-color), 0.18) 18px, transparent 19px, transparent 37px, rgba(var(--oh-rings-color), 0.14) 37px, rgba(var(--oh-rings-color), 0.14) 38px, transparent 39px, transparent 61px, rgba(var(--oh-rings-color), 0.11) 61px, rgba(var(--oh-rings-color), 0.11) 62px, transparent 63px, transparent 89px, rgba(var(--oh-rings-color), 0.08) 89px, rgba(var(--oh-rings-color), 0.08) 90px, transparent 91px, transparent 117px, rgba(var(--oh-rings-color), 0.05) 117px, rgba(var(--oh-rings-color), 0.05) 118px, transparent 119px ); background-repeat: no-repeat; } [dir="rtl"] .oh-footer { background: radial-gradient( circle at calc(100% - 80px) 50%, transparent 17px, rgba(var(--oh-rings-color), 0.18) 17px, rgba(var(--oh-rings-color), 0.18) 18px, transparent 19px, transparent 37px, rgba(var(--oh-rings-color), 0.14) 37px, rgba(var(--oh-rings-color), 0.14) 38px, transparent 39px, transparent 61px, rgba(var(--oh-rings-color), 0.11) 61px, rgba(var(--oh-rings-color), 0.11) 62px, transparent 63px, transparent 89px, rgba(var(--oh-rings-color), 0.08) 89px, rgba(var(--oh-rings-color), 0.08) 90px, transparent 91px, transparent 117px, rgba(var(--oh-rings-color), 0.05) 117px, rgba(var(--oh-rings-color), 0.05) 118px, transparent 119px ); background-repeat: no-repeat; } @media (max-width: 720px) { .oh-footer { grid-template-columns: 1fr; text-align: center; gap: var(--oh-space-4); } } .oh-footer__col { display: flex; align-items: center; gap: var(--oh-space-2); min-width: 0; } .oh-footer__col--copy { justify-self: start; flex-direction: column; align-items: flex-start; gap: 4px; } .oh-footer__col--powered { justify-self: center; gap: var(--oh-space-3); } .oh-footer__col--release { justify-self: end; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } [dir="rtl"] .oh-footer__col--copy { align-items: flex-end; } .oh-footer__copy { font-size: 14px; color: var(--oh-text-muted); direction: ltr; } .oh-footer__author { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 11px; color: var(--oh-text-muted); opacity: 0.85; } .oh-footer__author-prefix { font-style: italic; } .oh-footer__author-name { color: var(--oh-text-default); font-weight: 600; } @media (max-width: 720px) { .oh-footer__col--copy, .oh-footer__col--powered, .oh-footer__col--release { justify-self: center; } .oh-footer__col--copy { align-items: center; text-align: center; } .oh-footer__col--release { justify-content: center; } .oh-footer__author { justify-content: center; } } .oh-footer__powered-img { height: 80px; width: auto; object-fit: contain; } .oh-footer__powered-img--dark { display: none; } [data-theme="dark"] .oh-footer__powered-img--light { display: none; } [data-theme="dark"] .oh-footer__powered-img--dark { display: inline-block; } /* Release column stacks vertically; alignment lives in the .oh-footer__col--release rule above. */ .oh-footer__release-version { font-size: 12px; font-weight: 600; color: var(--oh-text-default); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--oh-border-default); background: var(--oh-bg-raised); font-family: var(--oh-font-mono); } .oh-footer__release-greg, .oh-footer__release-hijri { font-size: 11px; color: var(--oh-text-muted); line-height: 1.4; } .oh-footer__release-hijri { direction: rtl; unicode-bidi: isolate; font-family: 'Octohub Arabic', 'Greta Arabic', system-ui, sans-serif; } .oh-footer__release-sep { color: var(--oh-text-subtle); font-size: 10px; line-height: 1; opacity: 0.6; } /* ============================================================================ PROSE — content type styles ============================================================================ */ .oh-prose-text { color: var(--oh-text-muted); line-height: 1.7; } .oh-mono { font-family: var(--oh-font-mono); font-size: 12px; color: var(--oh-text-muted); } .oh-label { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--oh-text-muted); margin-bottom: var(--oh-space-2); } /* ============================================================================ BACK-TO-TOP — floating action button, appears after the user scrolls ============================================================================ */ .oh-back-to-top { position: fixed; inset-block-end: var(--oh-space-5); inset-inline-end: var(--oh-space-5); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--oh-border-default); border-radius: 50%; background: var(--oh-bg-raised); color: var(--oh-text-default); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06); cursor: pointer; z-index: 60; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--oh-duration-fast) var(--oh-ease), transform var(--oh-duration-fast) var(--oh-ease), background var(--oh-duration-fast) var(--oh-ease), color var(--oh-duration-fast) var(--oh-ease); } .oh-back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .oh-back-to-top:hover { background: var(--oh-primary); color: var(--oh-on-primary); border-color: var(--oh-primary); } .oh-back-to-top:focus-visible { outline: 2px solid var(--oh-primary); outline-offset: 2px; } .oh-back-to-top .pi { font-size: 16px; line-height: 1; } @media (prefers-reduced-motion: reduce) { .oh-back-to-top { transition: opacity var(--oh-duration-fast) linear; transform: none; } .oh-back-to-top.is-visible { transform: none; } } /* ============================================================================ A11y — focus visibility, dark-mode contrast, reduced-motion guards Added in PR 4 (A11y polish). ============================================================================ */ /* Unified focus ring for every interactive control (PR 4). Single rule covers nav buttons, links, menu items, cards, pager — keeps keyboard navigation visible against any background. */ .oh-top__btn:focus-visible, .oh-top__lang-btn:focus-visible, .oh-top__brand:focus-visible, .oh-menu__close:focus-visible, .oh-menu__page:focus-visible, .oh-menu__section-head:focus-visible, .oh-menu__home:focus-visible, .oh-menu__lang:focus-visible, .oh-menu__theme:focus-visible, .oh-secnav__tab:focus-visible, .oh-pager a:focus-visible, .oh-toc__card:focus-visible, .oh-top__nav-link:focus-visible, .oh-top__dropdown-link:focus-visible, .oh-cover__breadcrumb a:focus-visible { outline: 2px solid var(--oh-border-focus); outline-offset: 2px; border-radius: var(--oh-radius-sm); } /* Reduced-motion guards for the remaining hover transforms (PR 4). The card/pager/sub-brand tiles all animate translateY on hover; on a user who set prefers-reduced-motion, the transition is dropped. */ @media (prefers-reduced-motion: reduce) { .oh-toc__card, .oh-toc__card:hover, .oh-pager a, .oh-pager a:hover, .sb-tile, .sb-tile:hover { transform: none !important; transition: none !important; } } /* ── Track / Unit detail pages (section 09) ───────────────────────── */ .logo-hero { display: flex; align-items: center; justify-content: center; min-height: 200px; background: #F8FAFC; border: 1px solid var(--oh-border-default); border-radius: var(--oh-radius-lg); margin-bottom: var(--oh-space-5); } .logo-hero .wm { font: 800 40px/1 var(--oh-font-app); letter-spacing: 1px; direction: ltr; } .logo-hero .wm .oh { color: #1E1B4B; } .logo-hero .wm .sfx { color: #5B5BD6; } .sub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--oh-space-3); margin-top: var(--oh-space-3); } .sub-grid a { display: block; padding: var(--oh-space-4); border: 1px solid var(--oh-border-default); border-radius: var(--oh-radius-md); background: var(--oh-bg-raised); font: 600 14px/1.4 var(--oh-font-app); color: var(--oh-text-default); text-decoration: none; } .sub-grid a:hover { border-color: var(--oh-primary); color: var(--oh-primary); } /* Track/unit overview card download link */ .track__dl { align-self: flex-start; margin-top: auto; padding: 7px 13px; background: var(--oh-primary-soft); color: var(--oh-primary); border-radius: var(--oh-radius-pill); font: 600 12px/1 var(--oh-font-app); text-decoration: none; } .track__dl:hover { background: var(--oh-primary); color: #fff; } .track__dl--soft { background: #F1F5F9; color: var(--oh-text-muted); pointer-events: none; } .track__logo img { width: auto; object-fit: contain; } /* Logos page — pending (not-yet-generated) pack previews */ .file__preview.is-pending img { display: none; } .file__preview.is-pending::after { content: ''; display: inline-block; width: 30px; height: 30px; opacity: 0.4; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") center/contain no-repeat; } .pack__head .note.pending { color: var(--oh-state-amber, #B45309); } /* Icon glyphs (Tabler webfont) — sized via font-size. .oh-ico = chrome wrapper. */ .oh-ico { font-size: 1.15em; display: inline-block; vertical-align: -0.18em; flex: none; } /* top nav */ .oh-top__btn .oh-ico { font-size: 18px; } .oh-top__menu-btn .oh-ico { font-size: 20px; } /* top nav — current-section glyph + number, sits next to the brand */ .oh-top__section { display: inline-flex; align-items: center; gap: 6px; padding-block: 4px; padding-inline: 8px 10px; border-radius: var(--oh-radius-md); background: var(--oh-primary-soft); color: var(--oh-primary); } .oh-top__section-ico { display: inline-flex; align-items: center; flex: none; } .oh-top__section-ico .oh-ico { font-size: 24px; } .oh-top__section-num { font: 700 12px/1 var(--oh-font-mono, var(--oh-font-app)); letter-spacing: 0.04em; color: var(--oh-primary); } /* menu drawer */ .oh-menu__ico { display: inline-flex; align-items: center; color: var(--oh-primary); flex: none; } .oh-menu__ico .oh-ico { font-size: 26px; } .oh-menu__chevron { font-size: 16px; } .oh-menu__close .oh-ico { font-size: 16px; } .oh-menu__lang .oh-ico { font-size: 16px; } /* section nav */ .oh-secnav__ico { display: inline-flex; align-items: center; color: var(--oh-primary); flex: none; } .oh-secnav__ico .oh-ico { font-size: 26px; } /* breadcrumb */ .oh-breadcrumb__ico { font-size: 19px; vertical-align: -0.2em; margin-inline-end: 6px; } /* back-to-top */ .oh-back-to-top .oh-ico { font-size: 18px; } /* per-page glyphs — menu items (every page, not just the section parent) */ .oh-menu__page { display: flex; align-items: center; gap: var(--oh-space-2); padding-block: 8px; padding-inline: var(--oh-space-5); } [lang="ar"] .oh-menu__page, [dir="rtl"] .oh-menu__page { padding-block: 8px; padding-inline: var(--oh-space-5); } .oh-menu__page-ico { display: inline-flex; align-items: center; color: var(--oh-text-subtle); flex: none; } .oh-menu__page-ico .oh-ico { font-size: 20px; } .oh-menu__page:hover .oh-menu__page-ico, .oh-menu__page.is-current .oh-menu__page-ico { color: var(--oh-primary); } /* per-page glyphs — section-nav tabs */ .oh-secnav__tab { gap: 5px; } .oh-secnav__tab-ico { display: inline-flex; align-items: center; flex: none; } .oh-secnav__tab-ico .oh-ico { font-size: 19px; } /* data-oh-icon (legacy — JS-rendered arch tiles) */ [data-oh-icon] > .oh-ico { font-size: 1em; vertical-align: -0.15em; margin-inline-end: 0.4em; flex: none; } h1[data-oh-icon], h2[data-oh-icon], h3[data-oh-icon], h4[data-oh-icon] { display: flex; align-items: center; gap: 0.45em; } h1[data-oh-icon] > .oh-ico, h2[data-oh-icon] > .oh-ico, h3[data-oh-icon] > .oh-ico, h4[data-oh-icon] > .oh-ico { color: var(--oh-primary); margin-inline-end: 0; } /* Content icons: as a leading glyph */ .ti:not(.oh-ico) { font-size: 1em; vertical-align: -0.15em; flex: none; } :where(h1,h2,h3,h4):has(> .ti:not(.oh-ico):first-child) { display: flex; align-items: center; gap: 0.45em; } :where(h1,h2,h3,h4) > .ti:not(.oh-ico):first-child { color: var(--oh-primary); } :where(a,button,summary,li,p,strong,.file__link) > .ti:not(.oh-ico):first-child { margin-inline-end: 0.4em; } /* Prompt viewer modal — shared popup for the "view prompt" feature (Assets + Illustrations) */ .oh-modal { position: fixed; inset: 0; background: rgba(15,23,42,.6); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 24px; } .oh-modal.is-open { display: flex; } .oh-modal__backdrop { position: absolute; inset: 0; cursor: pointer; } .oh-modal__box { position: relative; background: var(--oh-bg-raised); border: 1px solid var(--oh-border-default); border-radius: var(--oh-radius-lg); max-width: 760px; width: 100%; max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--oh-shadow-lg); } .oh-modal__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--oh-border-default); } .oh-modal__head-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; } .oh-modal__title { font: 700 14px/1.3 var(--oh-font-app); color: var(--oh-text-default); } /* Description — optional one-liner under the title (forced onto its own row). */ .oh-modal__desc { flex-basis: 100%; font: 500 12px/1.5 var(--oh-font-app); color: var(--oh-text-muted); } [dir="rtl"] .oh-modal__desc { line-height: 1.7; } .oh-modal__close { cursor: pointer; border: none; background: none; line-height: 1; color: var(--oh-text-muted); padding: 0 4px; display: inline-flex; align-items: center; align-self: flex-start; } .oh-modal__close:hover { color: var(--oh-text-default); } .oh-modal__close .oh-ico { font-size: 20px; } .oh-modal__body { overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; } .oh-modal__body pre { white-space: pre-wrap; word-break: break-word; font: 500 12px/1.6 var(--oh-font-mono); color: var(--oh-text-default); margin: 0; } /* PNG preview — the resulting image shown ALONGSIDE the prompt (the prompt image and the png look alike). Plate tint mirrors the mode. */ .oh-modal__preview { margin: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--oh-border-default); border-radius: var(--oh-radius-md); padding: 16px; } .oh-modal__preview.is-light { background: #F5F6FB; } .oh-modal__preview.is-dark { background: #1E1B4B; } .oh-modal__preview[hidden] { display: none; } .oh-modal__preview-img { max-width: 100%; max-height: 240px; object-fit: contain; border-radius: var(--oh-radius-sm); } @media (min-width: 620px) { .oh-modal__body { flex-direction: row; align-items: flex-start; } .oh-modal__preview { flex: 0 0 240px; align-self: stretch; } .oh-modal__body pre { flex: 1 1 0; min-width: 0; } } /* Mode badge — makes Light vs Dark unmistakable; color-coded per variant. */ .oh-modal__mode-badge { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1 var(--oh-font-mono); letter-spacing: 0.04em; padding: 5px 10px; border-radius: var(--oh-radius-pill); border: 1px solid transparent; white-space: nowrap; } [dir="rtl"] .oh-modal__mode-badge { font-family: var(--oh-font-app); font-size: 12px; letter-spacing: 0; } .oh-modal__mode-badge.is-light { color: var(--oh-indigo-700); background: var(--oh-indigo-50); border-color: var(--oh-indigo-200); } .oh-modal__mode-badge.is-dark { color: #E0E7FF; background: var(--oh-indigo-900); border-color: var(--oh-indigo-700); } /* Footer actions — Copy + PNG download. */ .oh-modal__foot { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--oh-border-default); } .oh-modal__action { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 600 12px/1 var(--oh-font-app); text-decoration: none; padding: 8px 12px; border-radius: var(--oh-radius-md); border: 1px solid var(--oh-border-default); background: var(--oh-bg-raised); color: var(--oh-text-default); } .oh-modal__action:hover { background: var(--oh-primary-soft); color: var(--oh-primary); border-color: var(--oh-primary); } .oh-modal__action .oh-ico { font-size: 16px; } .oh-modal__copy.is-done { background: var(--oh-primary-soft); color: var(--oh-primary); border-color: var(--oh-primary); } /* Prompt triggers ("View prompt" buttons) inside illustration cards. */ .ill-card__prompt-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 600 12px/1 var(--oh-font-app); padding: 7px 11px; border-radius: var(--oh-radius-md); border: 1px solid var(--oh-border-default); background: var(--oh-bg-raised); color: var(--oh-primary); } .ill-card__prompt-btn:hover { background: var(--oh-primary-soft); border-color: var(--oh-primary); } .ill-card__prompt-btn .oh-ico { font-size: 15px; } body.oh-modal-open { overflow: hidden; }