/** * Ritodocs front-end — portal home + article page. Self-contained page * chrome (see templates/*.php), so this file owns everything from * down rather than layering on top of a theme's own styles. */ * { box-sizing: border-box; } /* Belt-and-braces guard against page-level horizontal scroll. Scoped to html (not body) so it never disturbs position:sticky, which breaks if a scrolling ancestor's overflow-y also gets forced to a non-visible value. Every component below is expected to contain its own overflow (tables/code via overflow-x:auto, media via max-width:100%) — this is a safety net, not a substitute for that. */ html { overflow-x: hidden; } .ritodocs-body { margin: 0; background: var( --ritodocs-canvas ); color: var( --ritodocs-ink ); font-family: var( --ritodocs-font ); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Painted directly on our own markup rather than relied on from — when "Site header & footer" is on, the active theme's own template usually wraps page content in its own opaque container div (#page, .site-content, etc.) sitting between and this content, which would otherwise hide a body-level background entirely. !important guards against theme utility classes that set a background on generic wrapper/content elements. */ .ritodocs-canvas { background: var( --ritodocs-canvas ) !important; min-height: 100%; padding-bottom: 60px; } /* Some themes' own page wrapper (commonly #page, per the _s/Underscores pattern most themes descend from) has margin/padding of its own around the footer that sits outside anything Ritodocs renders — that gap then shows the wrapper's background, not ours. Scoped to .ritodocs-body so it only ever applies on Ritodocs pages, never the rest of the site. */ .ritodocs-body #page, .ritodocs-body .site { background: var( --ritodocs-canvas ) !important; } .ritodocs-skip-link { position: absolute; left: -9999px; top: 0; background: var( --ritodocs-ink ); color: #fff; padding: 8px 14px; border-radius: var( --ritodocs-r-sm ); z-index: 100; } .ritodocs-skip-link:focus { left: 12px; top: 12px; } /* ------------------------------------------------------------------ */ /* Site header */ /* ------------------------------------------------------------------ */ .ritodocs-site-head { position: sticky; top: 0; z-index: var( --ritodocs-z-header ); background: rgba( 255, 255, 255, 0.78 ); backdrop-filter: blur( 14px ) saturate( 1.4 ); -webkit-backdrop-filter: blur( 14px ) saturate( 1.4 ); border-bottom: 1px solid var( --ritodocs-line ); } .ritodocs-site-head__in { max-width: 1360px; margin: 0 auto; padding: 14px var( --ritodocs-gutter ); display: flex; align-items: center; gap: 14px; } .ritodocs-brand { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var( --ritodocs-ink ); text-decoration: none; } .ritodocs-brand::before { content: ""; width: 26px; height: 26px; border-radius: var( --ritodocs-r-sm ); background: var( --ritodocs-accent ); flex: none; } .ritodocs-back-link { font-size: 12.5px; font-weight: 500; color: var( --ritodocs-ink-4 ); text-decoration: none; padding-right: 14px; border-right: 1px solid var( --ritodocs-line ); } .ritodocs-back-link:hover { color: var( --ritodocs-accent ); } .ritodocs-nav-toggle { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; background: none; border: 1px solid transparent; border-radius: var( --ritodocs-r-sm ); font-size: 16px; cursor: pointer; color: var( --ritodocs-ink-2 ); } .ritodocs-nav-toggle:hover { background: var( --ritodocs-paper-2 ); } .ritodocs-search-head { position: relative; margin-left: auto; display: flex; align-items: center; min-width: 0; width: 300px; max-width: 44vw; border: 1.5px solid var( --ritodocs-line-strong ); border-radius: var( --ritodocs-r-lg ); background: var( --ritodocs-paper ); transition: border-color var( --ritodocs-fast ), box-shadow var( --ritodocs-fast ), width var( --ritodocs-fast ); } .ritodocs-search-head:focus-within { width: 380px; max-width: 60vw; border-color: var( --ritodocs-accent ); box-shadow: var( --ritodocs-shadow-focus ); } .ritodocs-search-head__icon { flex: none; width: 15px; height: 15px; margin-left: 14px; border: 1.8px solid var( --ritodocs-ink-4 ); border-radius: 50%; position: relative; } .ritodocs-search-head__icon::after { content: ""; position: absolute; width: 6.5px; height: 1.8px; background: var( --ritodocs-ink-4 ); right: -6px; bottom: -1px; transform: rotate( 45deg ); transform-origin: right center; } .ritodocs-search-head__input { flex: 1; min-width: 0; border: none !important; outline: none !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; background: none; font-family: inherit; font-size: 14px; padding: 11px 10px; color: var( --ritodocs-ink ); } .ritodocs-search-head__input::placeholder { color: var( --ritodocs-ink-4 ); } .ritodocs-search-head__kbd { flex: none; font-family: var( --ritodocs-mono ); font-size: 11px; background: var( --ritodocs-paper-2 ); border: 1px solid var( --ritodocs-line-strong ); border-radius: var( --ritodocs-r-xs ); padding: 3px 7px; margin-right: 10px; color: var( --ritodocs-ink-4 ); } .ritodocs-search-head:focus-within .ritodocs-search-head__kbd { display: none; } .ritodocs-lbl { font-family: var( --ritodocs-mono ); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var( --ritodocs-ink-4 ); } .ritodocs-muted { color: var( --ritodocs-ink-3 ); } /* Breadcrumb */ .ritodocs-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var( --ritodocs-ink-4 ); margin-bottom: 18px; } .ritodocs-crumbs a { color: var( --ritodocs-ink-3 ); text-decoration: none; } .ritodocs-crumbs a:hover { color: var( --ritodocs-accent ); } .ritodocs-crumbs__sep { width: 4px; height: 4px; border-radius: 50%; background: var( --ritodocs-line-strong ); flex: none; } .ritodocs-crumbs__current { color: var( --ritodocs-ink-3 ); overflow-wrap: anywhere; } /* ------------------------------------------------------------------ */ /* Portal home */ /* ------------------------------------------------------------------ */ .ritodocs-home__hero { position: relative; text-align: center; padding: clamp( 48px, 10vw, 88px ) var( --ritodocs-gutter ) clamp( 36px, 7vw, 60px ); margin: 28px 0 0; background: radial-gradient( 620px 320px at 50% -10%, var( --ritodocs-accent-wash ), transparent 70% ), var( --ritodocs-paper ); border: 1px solid var( --ritodocs-line ); border-radius: var( --ritodocs-r-xl ); box-shadow: var( --ritodocs-shadow-sm ); } .ritodocs-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var( --ritodocs-mono ); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var( --ritodocs-accent ); background: var( --ritodocs-accent-soft ); border-radius: var( --ritodocs-r-full ); padding: 6px 14px; } .ritodocs-home__hero h1 { font-size: clamp( 32px, 4vw, 46px ); font-weight: 600; letter-spacing: -0.035em; margin: 22px 0 30px; color: var( --ritodocs-ink ); } .ritodocs-home__search { position: relative; width: 100%; max-width: 540px; margin: 0 auto; display: flex; align-items: center; border-radius: var( --ritodocs-r-lg ); border: 1px solid var( --ritodocs-line-strong ); background: var( --ritodocs-paper ); box-shadow: var( --ritodocs-shadow-sm ); transition: box-shadow var( --ritodocs-base ), border-color var( --ritodocs-base ); } .ritodocs-home__search:focus-within { box-shadow: var( --ritodocs-shadow-md ), var( --ritodocs-shadow-focus ); border-color: var( --ritodocs-accent ); } .ritodocs-home__search-icon { flex: none; width: 15px; height: 15px; margin-left: 18px; border: 1.8px solid var( --ritodocs-ink-4 ); border-radius: 50%; position: relative; } .ritodocs-home__search-icon::after { content: ""; position: absolute; width: 7px; height: 1.8px; background: var( --ritodocs-ink-4 ); right: -6.5px; bottom: -1px; transform: rotate( 45deg ); transform-origin: right center; } .ritodocs-home__search-input { flex: 1; min-width: 0; border: none !important; outline: none !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; background: none; font-family: inherit; color: var( --ritodocs-ink ); font-size: 14.5px; padding: 15px 18px 15px 12px; } .ritodocs-home__search-input::placeholder { color: var( --ritodocs-ink-4 ); } .ritodocs-home { max-width: 980px; margin: 0 auto; padding: 0 var( --ritodocs-gutter ) 100px; background: var( --ritodocs-canvas ); } .ritodocs-home__categories, .ritodocs-home__recent, .ritodocs-home__empty { padding: 44px 0; } .ritodocs-home__categories + .ritodocs-home__recent { border-top: 1px solid var( --ritodocs-line ); } .ritodocs-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; } .ritodocs-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 14px; } @media ( max-width: 720px ) { .ritodocs-grid { grid-template-columns: 1fr; } } .ritodocs-card { border: 1px solid var( --ritodocs-line ); border-radius: var( --ritodocs-r-lg ); padding: 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; background: var( --ritodocs-paper ); transition: transform var( --ritodocs-base ), box-shadow var( --ritodocs-base ), border-color var( --ritodocs-base ); } a.ritodocs-card:hover, a.ritodocs-card:focus-visible { transform: translateY( -2px ); box-shadow: var( --ritodocs-shadow-md ); border-color: var( --ritodocs-accent ); } .ritodocs-card__icon { width: 34px; height: 34px; border-radius: var( --ritodocs-r-sm ); background: var( --ritodocs-accent-soft ); color: var( --ritodocs-accent ); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; } .ritodocs-card strong { font-size: 14.5px; letter-spacing: -0.01em; } .ritodocs-list { list-style: none; margin: 0; padding: 6px 20px; background: var( --ritodocs-paper ); border: 1px solid var( --ritodocs-line ); border-radius: var( --ritodocs-r-lg ); box-shadow: var( --ritodocs-shadow-sm ); } .ritodocs-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var( --ritodocs-line ); font-size: 14.5px; } .ritodocs-list li:last-child { border-bottom: none; } .ritodocs-list a { color: var( --ritodocs-ink ); text-decoration: none; font-weight: 500; display: flex; align-items: center; gap: 10px; } .ritodocs-list a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var( --ritodocs-line-strong ); flex: none; transition: background var( --ritodocs-fast ); } .ritodocs-list a:hover { color: var( --ritodocs-accent ); } .ritodocs-list a:hover::before { background: var( --ritodocs-accent ); } .ritodocs-home__empty { text-align: center; color: var( --ritodocs-ink-3 ); font-size: 14.5px; } /* ------------------------------------------------------------------ */ /* Article layout: sidebar / content / TOC */ /* ------------------------------------------------------------------ */ .ritodocs-docs { display: grid; grid-template-columns: 264px 1fr 232px; max-width: 1360px; margin: 20px auto 40px; padding: 0 var( --ritodocs-gutter ); background: var( --ritodocs-paper ); border-radius: var( --ritodocs-r-xl ); align-items: start; } .ritodocs-side { border-right: 1px solid var( --ritodocs-line ); padding: 28px 16px; font-size: 13.5px; position: sticky; top: var( --ritodocs-header-h ); max-height: calc( 100vh - var( --ritodocs-header-h ) ); overflow-y: auto; } /* IMPORTANT: keep every ".ritodocs-side" override below this line — inside a media query — never above it. Two rules with equal specificity resolve by source order regardless of which one sits inside a media query, so a later unconditional rule silently wins the cascade over an earlier conditional one even when its own condition is true. (This is exactly what broke the mobile drawer before this fix: the desktop `position: sticky` above used to be declared after the mobile `position: fixed` override and silently cancelled it out on every phone-width viewport.) */ @media ( max-width: 1100px ) { .ritodocs-docs { grid-template-columns: 244px 1fr; } .ritodocs-toc { display: none; } } @media ( max-width: 780px ) { .ritodocs-docs { grid-template-columns: 1fr; padding: 0; } .ritodocs-nav-toggle { display: flex; } .ritodocs-search-head { width: auto; max-width: none; flex: 1; } .ritodocs-search-head:focus-within { width: auto; max-width: none; } .ritodocs-search-head__kbd { display: none; } /* .ritodocs-brand has no intrinsic width, so its flex-basis is its full text length — with a long portal name, flex-shrink alone doesn't reliably leave room for the search box (shrink is proportional to basis, not "shrink to fit"). Capping it directly is deterministic regardless of how long a given portal's title is. */ .ritodocs-brand { max-width: 34vw; } /* Off-canvas drawer. Capped with min() rather than a bare percentage so it reads as a proper app-style drawer at every width — 85% of a 320px phone (272px) up to a hard ceiling of 320px on a 768px tablet, instead of ballooning to 600px+. */ .ritodocs-side { position: fixed; top: 0; left: 0; bottom: 0; width: min( 85vw, 320px ); max-height: none; z-index: var( --ritodocs-z-drawer ); transform: translateX( -100% ); transition: transform var( --ritodocs-slow ); background: var( --ritodocs-paper ); box-shadow: var( --ritodocs-shadow-lg ); overflow-y: auto; -webkit-overflow-scrolling: touch; border-right: 1px solid var( --ritodocs-line ); padding-top: 64px; /* clears the close button row */ } .ritodocs-docs.is-nav-open .ritodocs-side { transform: translateX( 0 ); } /* Dimmed backdrop behind the drawer — click-to-close target and the visual separation the flat "just tap outside" version was missing. */ .ritodocs-side-backdrop { display: none; position: fixed; inset: 0; z-index: var( --ritodocs-z-backdrop ); background: rgba( 16, 17, 20, 0.42 ); opacity: 0; transition: opacity var( --ritodocs-slow ); } .ritodocs-docs.is-nav-open .ritodocs-side-backdrop { display: block; opacity: 1; } .ritodocs-side__close { display: flex; position: absolute; top: 12px; right: 12px; align-items: center; justify-content: center; width: 34px; height: 34px; background: var( --ritodocs-paper-2 ); border: 1px solid var( --ritodocs-line ); border-radius: var( --ritodocs-r-sm ); font-size: 18px; line-height: 1; color: var( --ritodocs-ink-2 ); cursor: pointer; } .ritodocs-side__close:hover { background: var( --ritodocs-paper-3 ); } /* Locks the background while the drawer is open. Applied to (not ) so it never fights a theme's own body-level classes when "Site header & footer" is on. */ html.ritodocs-scroll-lock { overflow: hidden; height: 100%; } } @media ( min-width: 781px ) { .ritodocs-side__close, .ritodocs-side-backdrop { display: none; } } .ritodocs-side__group { font-family: var( --ritodocs-mono ); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var( --ritodocs-ink-4 ); padding: 18px 10px 8px; } .ritodocs-side__group:first-child { padding-top: 4px; } .ritodocs-side__item { display: block; padding: 7px 10px; border-radius: var( --ritodocs-r-sm ); color: var( --ritodocs-ink-2 ); text-decoration: none; position: relative; transition: background var( --ritodocs-fast ), color var( --ritodocs-fast ); } .ritodocs-side__item:hover { background: var( --ritodocs-paper-2 ); color: var( --ritodocs-ink ); } .ritodocs-side__item.is-active { background: var( --ritodocs-accent-soft ); color: var( --ritodocs-accent ); font-weight: 600; } .ritodocs-side__item.is-active::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var( --ritodocs-accent ); } .ritodocs-article { padding: clamp( 24px, 6vw, 44px ) clamp( 16px, 5vw, 40px ) clamp( 48px, 8vw, 80px ); min-width: 0; max-width: 760px; overflow-wrap: anywhere; } .ritodocs-article h1 { font-size: clamp( 28px, 3vw, 34px ); font-weight: 600; letter-spacing: -0.03em; margin: 0 0 12px; } .ritodocs-article__meta { display: flex; gap: 16px; font-size: 12.5px; color: var( --ritodocs-ink-3 ); padding-bottom: 22px; border-bottom: 1px solid var( --ritodocs-line ); margin-bottom: 28px; } .ritodocs-article__body { font-size: 16px; line-height: 1.75; color: var( --ritodocs-ink-2 ); } .ritodocs-article__body h2 { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; margin: 42px 0 12px; color: var( --ritodocs-ink ); scroll-margin-top: 80px; } .ritodocs-article__body h3 { font-size: 17.5px; font-weight: 600; margin: 28px 0 8px; color: var( --ritodocs-ink ); scroll-margin-top: 80px; } .ritodocs-article__body p { margin: 0 0 16px; } .ritodocs-article__body ul, .ritodocs-article__body ol { padding-left: 22px; margin: 0 0 16px; } .ritodocs-article__body li { margin-bottom: 6px; } .ritodocs-article__body a { color: var( --ritodocs-accent ); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; } .ritodocs-article__body a:hover { color: var( --ritodocs-accent-hover ); } .ritodocs-article__body img, .ritodocs-article__body iframe, .ritodocs-article__body video { max-width: 100%; } .ritodocs-article__body img { border-radius: var( --ritodocs-r-md ); border: 1px solid var( --ritodocs-line ); height: auto; } .ritodocs-article__body iframe, .ritodocs-article__body video { border-radius: var( --ritodocs-r-md ); border: 1px solid var( --ritodocs-line ); } /* Responsive embeds. Article content is filtered through the_content(), so a pasted YouTube/Vimeo URL or a core Embed block renders with WordPress's own .wp-embed-aspect-* / .wp-block-embed__wrapper classes — width is capped above via the generic iframe rule, this locks the height to the same ratio so a bare iframe (no wrapper, e.g. hand-pasted embed HTML) can't force horizontal scroll either. */ .ritodocs-article__body .wp-block-embed__wrapper { position: relative; } .ritodocs-article__body .wp-embed-aspect-16-9 .wp-block-embed__wrapper { aspect-ratio: 16 / 9; } .ritodocs-article__body .wp-embed-aspect-4-3 .wp-block-embed__wrapper { aspect-ratio: 4 / 3; } .ritodocs-article__body .wp-has-aspect-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; } /* Fallback for a bare iframe with no wrapper — the explicit width/ height: 100% above (when a wrapper is present) wins over this, since aspect-ratio only governs a dimension left to compute automatically. */ .ritodocs-article__body iframe { aspect-ratio: 16 / 9; height: auto; } .ritodocs-article__body table { /* Deliberately NOT min-width:max-content — that forces the table's own box wider than its container, which leaks the overflow to the page instead of containing it. width:100% + white-space:nowrap on cells is what actually keeps this self-contained: cells can no longer wrap their way into fitting an artificially narrow column, so when content genuinely doesn't fit, the table's own content overflows *within* its own width:100% box, and overflow-x:auto scrolls that — never the page. */ width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-size: 14.5px; } .ritodocs-article__body th, .ritodocs-article__body td { padding: 9px 12px; border: 1px solid var( --ritodocs-line ); text-align: left; white-space: nowrap; } .ritodocs-article__body th { background: var( --ritodocs-paper-2 ); font-weight: 600; } .ritodocs-article__body code { font-family: var( --ritodocs-mono ); font-size: 0.88em; background: var( --ritodocs-paper-2 ); border: 1px solid var( --ritodocs-line ); border-radius: var( --ritodocs-r-xs ); padding: 1px 6px; } .ritodocs-article__body pre { overflow-x: auto; } .ritodocs-article__body pre code { border: none; padding: 0; background: none; } .ritodocs-article__body blockquote { margin: 18px 0; padding: 2px 18px; border-left: 3px solid var( --ritodocs-accent-line ); color: var( --ritodocs-ink-3 ); } .ritodocs-article__body hr { border: none; border-top: 1px solid var( --ritodocs-line ); margin: 32px 0; } .ritodocs-article__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 44px; } .ritodocs-article__nav-link { border: 1px solid var( --ritodocs-line ); border-radius: var( --ritodocs-r-lg ); padding: 16px 18px; text-decoration: none; color: var( --ritodocs-ink ); display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; font-weight: 600; transition: border-color var( --ritodocs-base ), transform var( --ritodocs-base ), box-shadow var( --ritodocs-base ); } .ritodocs-article__nav-link:hover { border-color: var( --ritodocs-accent-line ); box-shadow: var( --ritodocs-shadow-sm ); transform: translateY( -1px ); } .ritodocs-article__nav-link .ritodocs-lbl { display: flex; align-items: center; gap: 6px; } .ritodocs-article__nav-link::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid var( --ritodocs-ink-4 ); border-right: 1.5px solid var( --ritodocs-ink-4 ); transform: rotate( 225deg ); order: -1; } .ritodocs-article__nav-link--next { text-align: right; align-items: flex-end; } .ritodocs-article__nav-link--next::before { transform: rotate( 45deg ); order: 2; } .ritodocs-article__nav-link--next .ritodocs-lbl { flex-direction: row-reverse; } @media ( max-width: 520px ) { .ritodocs-article__nav { grid-template-columns: 1fr; } .ritodocs-article__nav-link--next { text-align: left; align-items: flex-start; } .ritodocs-article__nav-link--next::before { transform: rotate( 225deg ); order: -1; } .ritodocs-article__nav-link--next .ritodocs-lbl { flex-direction: row; } } /* Feedback widget */ .ritodocs-feedback { border: 1px solid var( --ritodocs-line ); border-radius: var( --ritodocs-r-xl ); padding: clamp( 18px, 5vw, 26px ); margin: 40px 0; text-align: center; background: var( --ritodocs-paper-2 ); } .ritodocs-feedback strong { font-size: 15px; letter-spacing: -0.01em; } .ritodocs-feedback__buttons, .ritodocs-feedback__reasons { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .ritodocs-feedback button { border: 1px solid var( --ritodocs-line-strong ); background: var( --ritodocs-paper ); border-radius: var( --ritodocs-r-full ); padding: 8px 18px; font-size: 13px; font-family: inherit; cursor: pointer; color: var( --ritodocs-ink ); transition: border-color var( --ritodocs-fast ), color var( --ritodocs-fast ), background var( --ritodocs-fast ); } .ritodocs-feedback button:hover { border-color: var( --ritodocs-accent ); color: var( --ritodocs-accent ); background: var( --ritodocs-accent-soft ); } .ritodocs-feedback__thanks { color: var( --ritodocs-ok ); font-weight: 600; margin-top: 14px; } .ritodocs-feedback__hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; } /* TOC — spine device */ .ritodocs-toc { padding: 44px 20px; position: sticky; top: var( --ritodocs-header-h ); max-height: calc( 100vh - var( --ritodocs-header-h ) ); overflow-y: auto; } .ritodocs-spinetoc { display: flex; gap: 14px; margin-top: 16px; } .ritodocs-spinetoc__rail { width: 2px; background: var( --ritodocs-line ); border-radius: 2px; position: relative; flex: none; } .ritodocs-spinetoc__rail b { position: absolute; left: -1px; width: 4px; border-radius: 2px; background: var( --ritodocs-accent ); top: 0; height: 0; transition: top 160ms ease, height 160ms ease; } .ritodocs-spinetoc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .ritodocs-spinetoc li { font-size: 12.5px; line-height: 1.4; } .ritodocs-spinetoc li.is-sub { padding-left: 12px; font-size: 12px; } .ritodocs-spinetoc a { color: var( --ritodocs-ink-3 ); text-decoration: none; transition: color var( --ritodocs-fast ); } .ritodocs-spinetoc a:hover { color: var( --ritodocs-ink ); } .ritodocs-spinetoc li.is-active a { color: var( --ritodocs-accent ); font-weight: 600; } /* ------------------------------------------------------------------ */ /* Search — inline dropdown panel, anchored to whichever box triggered */ /* it (home hero or header). No overlay, no backdrop — the page stays */ /* fully interactive underneath. */ /* ------------------------------------------------------------------ */ .ritodocs-search-panel { position: absolute; text-align: left; top: calc( 100% + 8px ); left: 0; right: 0; z-index: var( --ritodocs-z-dropdown ); background: var( --ritodocs-paper ); border: 1px solid var( --ritodocs-line ); border-radius: var( --ritodocs-r-lg ); box-shadow: var( --ritodocs-shadow-lg ); max-height: 60vh; overflow-y: auto; padding: 6px; } .ritodocs-search-panel[hidden] { display: none; } .ritodocs-search-result { display: block; padding: 12px 14px; border-radius: var( --ritodocs-r-md ); text-decoration: none; color: var( --ritodocs-ink ); } .ritodocs-search-result:hover, .ritodocs-search-result.is-active { background: var( --ritodocs-accent-soft ); } .ritodocs-search-result strong { display: block; font-size: 14px; font-weight: 600; } .ritodocs-search-result span { font-size: 12px; color: var( --ritodocs-ink-3 ); } .ritodocs-search-panel__empty, .ritodocs-search-panel__loading { padding: 28px 18px; color: var( --ritodocs-ink-3 ); font-size: 13.5px; text-align: center; } /* ------------------------------------------------------------------ */ /* Restricted */ /* ------------------------------------------------------------------ */ .ritodocs-restricted { max-width: 460px; margin: 14vh auto; text-align: center; padding: 44px 36px; font-family: var( --ritodocs-font ); background: var( --ritodocs-paper ); border: 1px solid var( --ritodocs-line ); border-radius: var( --ritodocs-r-xl ); box-shadow: var( --ritodocs-shadow-sm ); } .ritodocs-restricted::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 18px; border-radius: var( --ritodocs-r-md ); background: var( --ritodocs-accent-soft ); } .ritodocs-restricted h1 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; } .ritodocs-restricted p { color: var( --ritodocs-ink-3 ); font-size: 14.5px; margin: 0; } .ritodocs-btn { display: inline-block; margin-top: 18px; padding: 10px 20px; background: var( --ritodocs-accent ); color: #fff; text-decoration: none; border-radius: var( --ritodocs-r-md ); font-size: 14px; font-weight: 600; transition: background var( --ritodocs-fast ); } .ritodocs-btn:hover { background: var( --ritodocs-accent-hover ); } /* ------------------------------------------------------------------ */ /* Documentation library (/{slug}/) — index of every portal. */ /* ------------------------------------------------------------------ */ .ritodocs-library { max-width: 1180px; margin: 0 auto; padding: 0 var( --ritodocs-gutter ) 100px; } .ritodocs-library__hero { position: relative; overflow: hidden; text-align: center; padding: clamp( 40px, 9vw, 76px ) var( --ritodocs-gutter ) clamp( 28px, 6vw, 46px ); margin: 28px 0 40px; background: var( --ritodocs-paper ); border: 1px solid var( --ritodocs-line ); border-radius: var( --ritodocs-r-xl ); box-shadow: var( --ritodocs-shadow-sm ); } /* Signature element: a soft field of blurred color blobs built from the *actual* accent color configured on each live portal — the hero background is quite literally the palette of this site's own theme library, not a decorative stand-in. Fewer than 3 portals still looks intentional since the blobs are large and softly overlapping. */ .ritodocs-library__wash { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .ritodocs-library__wash i { position: absolute; width: 240px; height: 240px; border-radius: 50%; filter: blur( 60px ); opacity: 0.16; top: -80px; } .ritodocs-library__wash i:nth-child(1) { left: 2%; top: -100px; } .ritodocs-library__wash i:nth-child(2) { left: 16%; top: -40px; width: 180px; height: 180px; } .ritodocs-library__wash i:nth-child(3) { left: 32%; top: -120px; width: 280px; height: 280px; } .ritodocs-library__wash i:nth-child(4) { left: 50%; top: -60px; } .ritodocs-library__wash i:nth-child(5) { left: 64%; top: -110px; width: 220px; height: 220px; } .ritodocs-library__wash i:nth-child(6) { left: 80%; top: -50px; width: 190px; height: 190px; } .ritodocs-library__wash i:nth-child(7) { left: 92%; top: -100px; } .ritodocs-library__wash i:nth-child(8) { left: 8%; top: 40px; width: 160px; height: 160px; opacity: 0.10; } .ritodocs-library__hero > * { position: relative; z-index: 1; } .ritodocs-library__hero h1 { font-size: clamp( 30px, 3.6vw, 42px ); font-weight: 600; letter-spacing: -0.03em; margin: 16px 0 10px; } .ritodocs-library__sub { color: var( --ritodocs-ink-3 ); font-size: 15.5px; max-width: 480px; margin: 0 auto 28px; } .ritodocs-library__search { max-width: 480px; } .ritodocs-library__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .ritodocs-library__count { font-size: 13.5px; color: var( --ritodocs-ink-3 ); } .ritodocs-library__sort { display: flex; align-items: center; gap: 8px; font-family: var( --ritodocs-mono ); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var( --ritodocs-ink-4 ); } .ritodocs-library__sort select { font-family: var( --ritodocs-font ); font-size: 13px; text-transform: none; letter-spacing: normal; color: var( --ritodocs-ink-2 ); border: 1px solid var( --ritodocs-line-strong ); border-radius: var( --ritodocs-r-sm ); padding: 5px 10px; background: var( --ritodocs-paper ); } .ritodocs-library__no-results { text-align: center; padding: 60px 20px; color: var( --ritodocs-ink-3 ); } .ritodocs-empty-panel { background: var( --ritodocs-paper ); border: 1px dashed var( --ritodocs-line-strong ); border-radius: var( --ritodocs-r-lg ); padding: 32px; text-align: center; } .ritodocs-empty-panel p { color: var( --ritodocs-ink-3 ); margin: 0; } .ritodocs-library__empty { margin-top: 0; } .ritodocs-library__grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) ); gap: 20px; } .ritodocs-theme-card { display: flex; flex-direction: column; background: var( --ritodocs-paper ); border: 1px solid var( --ritodocs-line ); border-radius: var( --ritodocs-r-lg ); overflow: hidden; text-decoration: none; color: inherit; transition: transform var( --ritodocs-base ), box-shadow var( --ritodocs-base ), border-color var( --ritodocs-base ); } .ritodocs-theme-card:hover, .ritodocs-theme-card:focus-visible { transform: translateY( -3px ); box-shadow: var( --ritodocs-shadow-md ); border-color: var( --ritodocs-accent ); } .ritodocs-theme-card__cover { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var( --ritodocs-line ); } .ritodocs-theme-card__cover img { width: 100%; height: 100%; object-fit: cover; } .ritodocs-theme-card__glyph { font-family: var( --ritodocs-mono ); font-size: 44px; font-weight: 500; opacity: 0.85; } .ritodocs-theme-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; } .ritodocs-theme-card__body h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 6px; } .ritodocs-theme-card__body p { font-size: 13.5px; line-height: 1.55; color: var( --ritodocs-ink-3 ); margin: 0 0 14px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ritodocs-theme-card__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var( --ritodocs-ink-4 ); margin-bottom: 14px; } .ritodocs-theme-card__cta { font-size: 13px; font-weight: 600; color: var( --ritodocs-accent ); } @media ( max-width: 640px ) { .ritodocs-library__grid { grid-template-columns: 1fr; } } @media ( prefers-reduced-motion: reduce ) { .ritodocs-side, .ritodocs-card, .ritodocs-theme-card, .ritodocs-article__nav-link, .ritodocs-home__search, .ritodocs-spinetoc__rail b { transition: none; } }