/* ================================================================ Resayil Portal Shell — Phase 24.3 Plan 01 ---------------------------------------------------------------- Shared layout primitives for portal pages under erpnext_cli/www/*.html. Provides the container, nav, hero, bento grid, and stat-card rules that /subscribe and /brand-preview already used inline — pulled out so all admin and customer portal surfaces can share the same structural language. Consumes only tokens defined in resayil-brand.css (--rs-accent, --rs-bg, --rs-space-*, etc.). Introduces no new --rs-* variables. Dark mode is a free ride: the tokens swap when [data-theme="dark"] is applied to or any ancestor. RTL: all new spacing uses logical properties (padding-inline, margin-inline, inset-inline, border-inline-*) so right-to-left layouts flip automatically without per-direction rules. Consumed after resayil-brand.css in hooks.py web_include_css. ================================================================ */ /* ===================================================== Page container — 8pt padding, max-width, auto margins Matches the 24.1-03 page-frame contract. ===================================================== */ .rs-container { max-width: 1280px; margin-inline: auto; padding-inline: var(--rs-space-6); padding-block: var(--rs-space-8); } @media (max-width: 768px) { .rs-container { padding-inline: var(--rs-space-4); } } /* ===================================================== Nav (sticky header, logo, right-side actions, toggle) Ported from .resayil-subscribe .rs-nav in subscribe.css to a top-level ruleset so the portal shell partial can be used from any page. ===================================================== */ .rs-nav { position: sticky; inset-block-start: 0; z-index: var(--rs-z-sticky); background: var(--rs-surface); border-block-end: 1px solid var(--rs-border); backdrop-filter: blur(10px); font-family: var(--rs-font-sans); } .rs-nav-inner { max-width: 1280px; margin-inline: auto; padding-inline: var(--rs-space-6); padding-block: var(--rs-space-3); height: 64px; display: flex; align-items: center; gap: var(--rs-space-6); } .rs-logo { display: inline-flex; align-items: center; gap: var(--rs-space-2); font-weight: 700; font-size: var(--rs-text-lg); color: var(--rs-fg); text-decoration: none; } .rs-logo img { height: 32px; width: auto; display: block; } .rs-nav-right { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--rs-space-3); } .rs-nav-link { padding-inline: var(--rs-space-4); padding-block: var(--rs-space-2); color: var(--rs-fg-muted); text-decoration: none; font-size: var(--rs-text-sm); font-weight: 500; border-radius: var(--rs-radius); transition: background var(--rs-duration-fast) var(--rs-ease), color var(--rs-duration-fast) var(--rs-ease); } .rs-nav-link:hover, .rs-nav-link:focus-visible { background: var(--rs-surface-2); color: var(--rs-fg); text-decoration: none; } .rs-nav[data-active] .rs-nav-link[aria-current="page"] { background: var(--rs-accent-soft); color: var(--rs-accent); } .rs-theme-toggle { width: 40px; height: 40px; border-radius: var(--rs-radius); background: var(--rs-surface-2); border: 1px solid var(--rs-border); color: var(--rs-fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--rs-duration-fast) var(--rs-ease), border-color var(--rs-duration-fast) var(--rs-ease), color var(--rs-duration-fast) var(--rs-ease); } .rs-theme-toggle:hover { background: var(--rs-accent-soft); color: var(--rs-accent); border-color: var(--rs-accent); } .rs-theme-toggle .rs-sun { display: block; } .rs-theme-toggle .rs-moon { display: none; } [data-theme="dark"] .rs-theme-toggle .rs-sun { display: none; } [data-theme="dark"] .rs-theme-toggle .rs-moon { display: block; } /* ===================================================== Hero band — page title + description strip. Radial accent glow uses ::before pseudo like /brand-preview to keep the signature Resayil feel. ===================================================== */ .rs-page-hero { position: relative; overflow: hidden; padding-block: var(--rs-space-12); text-align: center; } .rs-page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top, var(--rs-accent-glow) 0%, transparent 60%); pointer-events: none; } .rs-page-hero > * { position: relative; } .rs-page-hero h1 { font-size: clamp(var(--rs-text-3xl), 5vw, var(--rs-text-5xl)); font-weight: 800; line-height: var(--rs-leading-tight); letter-spacing: -0.02em; margin: 0 0 var(--rs-space-4); color: var(--rs-fg); } .rs-page-hero h1 .rs-accent { color: var(--rs-accent); } .rs-page-hero p { font-size: var(--rs-text-lg); color: var(--rs-fg-muted); max-width: 640px; margin-inline: auto; margin-block: 0; line-height: var(--rs-leading-relaxed); } /* ===================================================== Section header — used above bento grids / tables. Small uppercase label + optional caption on the right. ===================================================== */ .rs-section { margin-block-end: var(--rs-space-12); } .rs-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rs-space-4); padding-block-end: var(--rs-space-3); margin-block-end: var(--rs-space-5); border-block-end: 1px solid var(--rs-border); } .rs-section-title { font-size: var(--rs-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rs-fg-muted); margin: 0; } .rs-section-caption { font-size: var(--rs-text-xs); color: var(--rs-fg-muted); } /* ===================================================== Bento grid + cards — default 3-column, collapses to 2 on tablets and 1 on phones. Used for both stat tiles and feature tiles across all admin dashboards. ===================================================== */ .rs-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rs-space-5); } @media (max-width: 1023px) { .rs-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .rs-bento { grid-template-columns: 1fr; } } .rs-bento-card { position: relative; overflow: hidden; background: var(--rs-surface); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg); padding-inline: var(--rs-space-6); padding-block: var(--rs-space-6); color: var(--rs-fg); transition: transform var(--rs-duration) var(--rs-ease-brand), box-shadow var(--rs-duration) var(--rs-ease-brand), border-color var(--rs-duration) var(--rs-ease-brand); } .rs-bento-card:hover { transform: translateY(-4px); box-shadow: var(--rs-shadow-glow); border-color: var(--rs-accent); } .rs-bento-card h3 { font-size: var(--rs-text-lg); font-weight: 700; margin: 0 0 var(--rs-space-2); color: var(--rs-fg); line-height: var(--rs-leading-tight); } .rs-bento-card p { font-size: var(--rs-text-sm); color: var(--rs-fg-muted); line-height: var(--rs-leading-relaxed); margin: 0; } .rs-bento-card--featured { background: linear-gradient(135deg, var(--rs-accent) 0%, var(--rs-accent-hover) 100%); color: #ffffff; border-color: var(--rs-accent); } .rs-bento-card--featured h3, .rs-bento-card--featured p, .rs-bento-card--featured .rs-stat-value, .rs-bento-card--featured .rs-stat-label { color: #ffffff; } .rs-bento-card--featured .rs-bento-icon { background: rgba(255, 255, 255, 0.2); color: #ffffff; } .rs-bento-card--span-2 { grid-column: span 2; } @media (max-width: 599px) { .rs-bento-card--span-2 { grid-column: span 1; } } /* ===================================================== Bento icon — 44x44 tile using Tabler sprite inside. Pairs with ===================================================== */ .rs-bento-icon { width: 44px; height: 44px; border-radius: var(--rs-radius); background: var(--rs-accent-soft); color: var(--rs-accent); display: inline-flex; align-items: center; justify-content: center; margin-block-end: var(--rs-space-4); } .rs-bento-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; } /* ===================================================== Stat tile typography — big number + small label. Reused inside .rs-bento-card for dashboard stats. ===================================================== */ .rs-stat-label { font-size: var(--rs-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rs-fg-muted); margin-block-end: var(--rs-space-1); } .rs-stat-value { font-size: var(--rs-text-3xl); font-weight: 800; line-height: 1; color: var(--rs-fg); margin: 0; } .rs-stat-value-sm { font-size: var(--rs-text-xl); font-weight: 700; line-height: 1; color: var(--rs-fg); } .rs-stat-sub { font-size: var(--rs-text-xs); color: var(--rs-fg-muted); margin-block-start: var(--rs-space-2); } /* ===================================================== Table wrap — used for log tables / endpoint lists. Gives the table a card outline without wrapping each row in a bento card (tables stay tabular). ===================================================== */ .rs-table-wrap { background: var(--rs-surface); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg); overflow-x: auto; } .rs-table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--rs-text-sm); } .rs-table-wrap th { padding-block: var(--rs-space-3); padding-inline: var(--rs-space-5); background: var(--rs-surface-2); font-size: var(--rs-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rs-fg-muted); text-align: start; border-block-end: 1px solid var(--rs-border); } .rs-table-wrap td { padding-block: var(--rs-space-3); padding-inline: var(--rs-space-5); color: var(--rs-fg); border-block-end: 1px solid var(--rs-border); } .rs-table-wrap tr:last-child td { border-block-end: none; } .rs-table-wrap tr:hover td { background: var(--rs-surface-2); } .rs-table-wrap a { color: var(--rs-accent); text-decoration: none; } .rs-table-wrap a:hover { text-decoration: underline; } /* ===================================================== Pill / badge — small colored status chips used in tables across all dashboards. ===================================================== */ .rs-pill { display: inline-flex; align-items: center; gap: var(--rs-space-1); padding-inline: var(--rs-space-3); padding-block: 0.125rem; border-radius: var(--rs-radius-full); font-size: var(--rs-text-xs); font-weight: 600; line-height: 1.4; background: var(--rs-bg-subtle); color: var(--rs-fg-muted); border: 1px solid var(--rs-border); } .rs-pill--success { background: rgb(16 185 129 / 0.10); color: var(--rs-success); border-color: transparent; } .rs-pill--warning { background: rgb(245 158 11 / 0.10); color: var(--rs-warning); border-color: transparent; } .rs-pill--danger { background: rgb(239 68 68 / 0.10); color: var(--rs-danger); border-color: transparent; } .rs-pill--info { background: rgb(59 130 246 / 0.10); color: var(--rs-info); border-color: transparent; } .rs-pill--accent { background: var(--rs-accent-soft); color: var(--rs-accent); border-color: transparent; } /* ===================================================== Page wrapper root + footer shell. ===================================================== */ .rs-portal-page { background: var(--rs-bg); color: var(--rs-fg); font-family: var(--rs-font-sans); min-height: 100vh; transition: background var(--rs-duration) var(--rs-ease), color var(--rs-duration) var(--rs-ease); } .rs-portal-footer { border-block-start: 1px solid var(--rs-border); padding-block: var(--rs-space-6); padding-inline: var(--rs-space-6); text-align: center; color: var(--rs-fg-muted); font-size: var(--rs-text-sm); } .rs-portal-footer a { color: var(--rs-fg-muted); text-decoration: none; transition: color var(--rs-duration-fast) var(--rs-ease); } .rs-portal-footer a:hover { color: var(--rs-accent); } /* ===================================================== RTL — swap to Arabic font on the nav (rest is logical properties, flips automatically). ===================================================== */ [dir="rtl"] .rs-nav, [dir="rtl"] .rs-portal-page, [dir="rtl"] .rs-portal-footer { font-family: var(--rs-font-arabic); } /* ===================================================== Print — shell chrome hides, cards flatten, no hover transforms so the page prints clean. ===================================================== */ @media print { .rs-nav, .rs-theme-toggle, .rs-portal-footer { display: none; } .rs-bento-card { break-inside: avoid; box-shadow: none; transform: none; } .rs-bento-card:hover { transform: none; box-shadow: none; border-color: var(--rs-border); } .rs-page-hero::before { display: none; } } /* ===================================================== Reduced motion — honour user preference. ===================================================== */ @media (prefers-reduced-motion: reduce) { .rs-bento-card, .rs-bento-card:hover, .rs-theme-toggle, .rs-nav-link, .rs-portal-page { transition: none; } .rs-bento-card:hover { transform: none; } } /* ===================================================== Error hero — 403 / 404 / 500 pages nested in the portal shell. Used inside .rs-container so they inherit the same 8pt rhythm as the rest of the portal surface. Variant classes swap the icon chroma (warning / danger) without duplicating the block. ===================================================== */ .rs-error-hero { text-align: center; padding-block-start: var(--rs-space-16); padding-block-end: var(--rs-space-12); max-inline-size: 640px; margin-inline: auto; } .rs-error-icon { inline-size: 96px; block-size: 96px; border-radius: var(--rs-radius-full); background: var(--rs-accent-soft); color: var(--rs-accent); display: grid; place-items: center; margin-inline: auto; margin-block-end: var(--rs-space-6); } .rs-error-icon svg { width: 48px; height: 48px; stroke: currentColor; stroke-width: 1.5; fill: none; } .rs-error-icon--warning { color: var(--rs-warning); background: rgb(245 158 11 / 0.12); } .rs-error-icon--danger { color: var(--rs-danger); background: rgb(239 68 68 / 0.12); } .rs-error-code { font-size: var(--rs-text-5xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--rs-fg); margin-block-end: var(--rs-space-3); } .rs-error-title { font-size: var(--rs-text-2xl); font-weight: 700; color: var(--rs-fg); margin-block-end: var(--rs-space-3); } .rs-error-body { font-size: var(--rs-text-base); color: var(--rs-fg-muted); line-height: var(--rs-leading-relaxed); margin-block-end: var(--rs-space-6); } .rs-error-actions { display: flex; gap: var(--rs-space-3); justify-content: center; flex-wrap: wrap; } .rs-error-btn { display: inline-flex; align-items: center; gap: var(--rs-space-2); padding-inline: var(--rs-space-5); padding-block: var(--rs-space-3); border-radius: var(--rs-radius); font-weight: 600; font-size: var(--rs-text-sm); text-decoration: none; transition: background var(--rs-duration-fast) var(--rs-ease), border-color var(--rs-duration-fast) var(--rs-ease), color var(--rs-duration-fast) var(--rs-ease); } .rs-error-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; flex-shrink: 0; } .rs-error-btn--primary { background: var(--rs-accent); color: rgb(255 255 255); border: 1px solid var(--rs-accent); } .rs-error-btn--primary:hover, .rs-error-btn--primary:focus-visible { background: var(--rs-accent-hover); border-color: var(--rs-accent-hover); color: rgb(255 255 255); text-decoration: none; } .rs-error-btn--secondary { background: transparent; color: var(--rs-fg); border: 1px solid var(--rs-border-strong); } .rs-error-btn--secondary:hover, .rs-error-btn--secondary:focus-visible { background: var(--rs-bg-subtle); border-color: var(--rs-accent); color: var(--rs-fg); text-decoration: none; } /* ===================================================== Help layout — Phase 24.3 Plan 03 ----------------------------------------------------- Two-column layout for /help/{lang}/* pages: sticky sidebar TOC + long-form prose article. Collapses to a single column on narrow viewports. All spacing uses logical properties so the same rules flip cleanly under [dir="rtl"] without extra selectors. ===================================================== */ .rs-help-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--rs-space-8); align-items: start; } @media (max-width: 1024px) { .rs-help-layout { grid-template-columns: 1fr; gap: var(--rs-space-6); } } .rs-help-sidebar { position: sticky; inset-block-start: var(--rs-space-8); padding-block-start: var(--rs-space-8); } @media (max-width: 1024px) { .rs-help-sidebar { position: static; padding-block-start: 0; } } .rs-help-sidebar h3 { font-family: var(--rs-font-sans); font-size: var(--rs-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rs-fg-muted); margin: 0 0 var(--rs-space-3); } .rs-help-nav { display: flex; flex-direction: column; gap: var(--rs-space-1); } .rs-help-nav-item { display: inline-flex; align-items: center; gap: var(--rs-space-2); padding-inline: var(--rs-space-3); padding-block: var(--rs-space-2); border-radius: var(--rs-radius-sm); font-size: var(--rs-text-sm); color: var(--rs-fg-muted); text-decoration: none; transition: background var(--rs-duration-fast) var(--rs-ease), color var(--rs-duration-fast) var(--rs-ease); } .rs-help-nav-item:hover, .rs-help-nav-item:focus-visible { background: var(--rs-accent-soft); color: var(--rs-accent); text-decoration: none; } .rs-help-nav-item.is-active, .rs-help-nav-item[aria-current="page"] { background: var(--rs-accent); color: rgb(255 255 255); } .rs-help-nav-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; } .rs-help-article { max-inline-size: 760px; padding-block: var(--rs-space-10); } .rs-help-breadcrumb { font-size: var(--rs-text-sm); color: var(--rs-fg-muted); margin-block-end: var(--rs-space-6); } .rs-help-breadcrumb a { color: var(--rs-fg-muted); text-decoration: none; } .rs-help-breadcrumb a:hover, .rs-help-breadcrumb a:focus-visible { color: var(--rs-accent); text-decoration: underline; } /* ===================================================== Prose typography — .rs-prose ----------------------------------------------------- Long-form content reset for help articles and other documentation pages. Applies tight defaults to the first/last child so the block sits inside .rs-help-article without fighting the article's own padding. ===================================================== */ .rs-prose { color: var(--rs-fg); font-family: var(--rs-font-sans); font-size: var(--rs-text-base); line-height: var(--rs-leading-relaxed); } .rs-prose > :first-child { margin-block-start: 0; } .rs-prose > :last-child { margin-block-end: 0; } .rs-prose h1 { font-size: var(--rs-text-4xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 var(--rs-space-6); color: var(--rs-fg); } .rs-prose h2 { font-size: var(--rs-text-2xl); font-weight: 700; line-height: 1.3; margin-block: var(--rs-space-10) var(--rs-space-4); padding-block-end: var(--rs-space-2); border-block-end: 1px solid var(--rs-border); color: var(--rs-fg); } .rs-prose h3 { font-size: var(--rs-text-xl); font-weight: 600; line-height: 1.4; margin-block: var(--rs-space-8) var(--rs-space-3); color: var(--rs-fg); } .rs-prose p { margin: 0 0 var(--rs-space-4); color: var(--rs-fg); } .rs-prose a { color: var(--rs-accent); text-decoration: underline; text-underline-offset: 2px; } .rs-prose a:hover, .rs-prose a:focus-visible { color: var(--rs-accent-hover); } .rs-prose code { font-family: var(--rs-font-mono); font-size: 0.9em; padding-inline: var(--rs-space-1); padding-block: 0.1em; background: var(--rs-bg-subtle); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-sm); } .rs-prose pre { padding: var(--rs-space-4); background: var(--rs-bg-subtle); border: 1px solid var(--rs-border); border-radius: var(--rs-radius); overflow-x: auto; margin-block: var(--rs-space-4); font-family: var(--rs-font-mono); font-size: var(--rs-text-sm); line-height: 1.6; } .rs-prose pre code { padding: 0; background: transparent; border: 0; border-radius: 0; font-size: inherit; } .rs-prose blockquote { margin-block: var(--rs-space-4); margin-inline: 0; padding-inline-start: var(--rs-space-5); border-inline-start: 3px solid var(--rs-accent); color: var(--rs-fg-muted); font-style: italic; } .rs-prose ul, .rs-prose ol { padding-inline-start: var(--rs-space-6); margin-block: var(--rs-space-4); } .rs-prose li { margin-block: var(--rs-space-1); } .rs-prose img { max-inline-size: 100%; height: auto; border-radius: var(--rs-radius); border: 1px solid var(--rs-border); } .rs-prose table { inline-size: 100%; border-collapse: collapse; margin-block: var(--rs-space-4); font-size: var(--rs-text-sm); } .rs-prose th, .rs-prose td { padding-inline: var(--rs-space-3); padding-block: var(--rs-space-2); border: 1px solid var(--rs-border); text-align: start; } .rs-prose th { background: var(--rs-bg-subtle); font-weight: 600; } .rs-prose hr { border: 0; border-block-start: 1px solid var(--rs-border); margin-block: var(--rs-space-8); } /* RTL: keep code / pre / inline-code LTR even when the document direction is RTL (Arabic articles still embed English CLI commands and those must read left-to-right). */ [dir="rtl"] .rs-prose code, [dir="rtl"] .rs-prose pre { unicode-bidi: plaintext; direction: ltr; text-align: start; } /* ================================================================ Phase 24.11 Plan 03 — Theme toggle button (32x32, token-aware) ================================================================ Replaces the 40x40 floating white pill with a quiet surface-2 button. Docked into .navbar .navbar-nav when present; fixed pill otherwise. Token-only, RTL-safe, reduced-motion-safe. */ .rs-floating-theme-toggle { width: 32px; height: 32px; padding: 0; background: var(--rs-surface-2); border: 1px solid var(--rs-border); border-radius: var(--rs-radius); color: var(--rs-fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--rs-duration-fast) var(--rs-ease), color var(--rs-duration-fast) var(--rs-ease), transform var(--rs-duration-fast) var(--rs-ease), box-shadow var(--rs-duration-fast) var(--rs-ease); } .rs-floating-theme-toggle:hover, .rs-floating-theme-toggle:focus-visible { background: var(--rs-accent-soft); color: var(--rs-accent); transform: scale(1.08); outline: none; } .rs-floating-theme-toggle:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--rs-accent) 22%, transparent); } .rs-floating-theme-toggle .rs-theme-toggle-icon { display: inline-flex; width: 16px; height: 16px; line-height: 0; } .rs-floating-theme-toggle .rs-theme-toggle-icon svg { width: 16px; height: 16px; } /* Docked into .navbar-nav — align with navbar baseline, add side margin. */ .rs-floating-theme-toggle--docked { margin-inline: var(--rs-space-2); align-self: center; } /* Fixed pill — /404 and other pages that lack a navbar. */ .rs-floating-theme-toggle--fixed { position: fixed; top: 12px; inset-inline-end: 16px; z-index: 1055; } @media (prefers-reduced-motion: reduce) { .rs-floating-theme-toggle, .rs-floating-theme-toggle:hover, .rs-floating-theme-toggle:focus-visible { transform: none; transition: none; } }