/* ============================================================================ RadioNovel Design System Palette follows OneSparked Publishing's actual site (onesparked.com, measured directly): white/light surface, #404040 body text, #007565 teal accent, Poppins headings + Mulish body. The walnut/brass "Golden Age" cues are kept only as a small nod (the dial mark, a warm highlight color) - they no longer drive the base surface/background, which was the prior mistake. Layered over Bootstrap 5 via CSS custom properties. Organized: tokens -> theme presets (Light/Dark/High-Contrast) -> base/reset -> typography -> layout (app shell) -> components -> accessibility. Theming: every color that needs to swap between presets is expressed as a CSS variable, INCLUDING translucent overlays - those use an "-rgb" triplet variable (e.g. --rn-cream-rgb) fed into rgba(var(--rn-cream-rgb), 0.04) so a theme swap re-themes every surface/border tint, not just solid colors. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Mulish:wght@400;500;600;700&display=swap'); :root { /* ---- Light (default) palette - follows onesparked.com ---- */ --rn-walnut: #ffffff; --rn-walnut-deep: #1c1b1a; --rn-brass: #007565; --rn-brass-bright: #00997f; --rn-cream: #2b2b2b; --rn-oxblood: #b3541f; --rn-danger: #b3261e; --rn-success: #1c7a4d; --rn-surface: #f6f5f3; --rn-border-soft: #e3e0da; --rn-cream-rgb: 43, 43, 43; --rn-brass-rgb: 0, 117, 101; --rn-walnut-rgb: 255, 255, 255; --bs-body-bg: var(--rn-walnut); --bs-body-color: var(--rn-cream); /* ---- Scale tokens (theme-independent) ---- */ --rn-radius-sm: 8px; --rn-radius-md: 12px; --rn-radius-lg: 20px; --rn-radius-pill: 999px; --rn-space-1: 0.25rem; --rn-space-2: 0.5rem; --rn-space-3: 1rem; --rn-space-4: 1.5rem; --rn-space-5: 2.5rem; --rn-space-6: 4rem; --rn-shadow-sm: 0 2px 10px rgba(20, 20, 20, 0.06); --rn-shadow-md: 0 10px 28px rgba(20, 20, 20, 0.10); --rn-shadow-lg: 0 24px 56px rgba(20, 20, 20, 0.16); --rn-transition: 0.2s ease; --rn-sidebar-width: 264px; --rn-topbar-height: 68px; /* Fixed (non-theme-swapping) text color for content placed on --rn-walnut-deep surfaces (topbar, footer, dropdown menu, mobile sidebar header) - those surfaces are intentionally dark in every preset (matches onesparked's own dark-header convention), so their text must stay light regardless of whether --rn-cream currently means "light theme's dark body text" or "dark theme's light body text". Using --rn-cream there would go invisible in Light/High-Contrast (dark-on-dark). */ --rn-on-dark-rgb: 255, 255, 255; } /* ============================================================================ Theme presets - swapped via [data-rn-theme] on (see theme-switcher.js) Three presets, as specified: Light (default, above), Dark, High Contrast. ============================================================================ */ :root[data-rn-theme="dark"] { --rn-walnut: #14161a; --rn-walnut-deep: #0a0b0d; --rn-brass: #2dd4b8; --rn-brass-bright: #5eead4; --rn-cream: #e8e9ea; --rn-oxblood: #b3541f; --rn-danger: #b03a30; --rn-success: #2f9e5c; --rn-surface: #1c1f24; --rn-border-soft: #2a2e35; --rn-cream-rgb: 232, 233, 234; --rn-brass-rgb: 45, 212, 184; --rn-walnut-rgb: 20, 22, 26; --bs-body-bg: var(--rn-walnut); --bs-body-color: var(--rn-cream); } :root[data-rn-theme="high-contrast"] { --rn-walnut: #ffffff; --rn-walnut-deep: #000000; --rn-brass: #0047ab; --rn-brass-bright: #0047ab; --rn-cream: #000000; --rn-oxblood: #7a0000; --rn-danger: #b30000; --rn-success: #006400; --rn-surface: #ffffff; --rn-border-soft: #000000; --rn-cream-rgb: 0, 0, 0; --rn-brass-rgb: 0, 71, 171; --rn-walnut-rgb: 255, 255, 255; --bs-body-bg: var(--rn-walnut); --bs-body-color: var(--rn-cream); } /* High contrast strips translucency and thin borders entirely - AAA-oriented, not just a color re-skin. Subtlety is the opposite of what this mode is for. */ :root[data-rn-theme="high-contrast"] .rn-card, :root[data-rn-theme="high-contrast"] .rn-feature-card, :root[data-rn-theme="high-contrast"] .rn-auth-card, :root[data-rn-theme="high-contrast"] .rn-pricing-card, :root[data-rn-theme="high-contrast"] .rn-demo-card, :root[data-rn-theme="high-contrast"] .rn-sidebar, :root[data-rn-theme="high-contrast"] .rn-app-topbar, :root[data-rn-theme="high-contrast"] .rn-tab-content, :root[data-rn-theme="high-contrast"] .rn-table-card { border-width: 2px; border-color: #000000; background: #ffffff; box-shadow: none; } :root[data-rn-theme="high-contrast"] a, :root[data-rn-theme="high-contrast"] .rn-sidebar-link.active { text-decoration: underline; } :root[data-rn-theme="high-contrast"] .form-control, :root[data-rn-theme="high-contrast"] .form-select { background-color: #ffffff; border: 2px solid #000000; } :root[data-rn-theme="high-contrast"] .form-control:focus, :root[data-rn-theme="high-contrast"] .form-select:focus { background-color: #ffffff; border-color: #0047ab; } :root[data-rn-theme="high-contrast"] *:focus-visible { outline: 3px solid #0047ab; outline-offset: 2px; } /* ============================================================================ Base / reset (folds in the two live rules formerly in site.css) ============================================================================ */ html { font-size: 14px; position: relative; min-height: 100%; } @media (min-width: 768px) { html { font-size: 16px; } } *:focus-visible { outline: 2px solid var(--rn-brass-bright); outline-offset: 2px; } /* Default icon size: 1em square, scaling with the surrounding font-size, so an icon never falls back to a browser's SVG intrinsic size (~300x150px) when a call site doesn't apply its own sizing class. Contextual rules further down (.rn-feature-icon svg, .rn-sidebar-link svg, etc) override this for icons that need to be deliberately larger/smaller. */ .rn-icon { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.15em; } .btn:focus-visible, .form-control:focus-visible, .nav-link:focus-visible, a:focus-visible { box-shadow: 0 0 0 0.2rem rgba(var(--rn-brass-rgb), 0.4); } .rn-skip-link { position: absolute; top: -100px; left: 1rem; z-index: 2000; background: var(--rn-brass-bright); color: var(--rn-walnut-deep); padding: 0.6rem 1.1rem; border-radius: var(--rn-radius-sm); font-weight: 600; transition: top var(--rn-transition); } .rn-skip-link:focus { top: 1rem; color: var(--rn-walnut-deep); } /* Sticky footer via flex column: main grows to fill any leftover viewport height so the footer always sits right after the content, in normal document flow - never fixed/absolute. */ html, body { height: 100%; } body { font-family: 'Mulish', system-ui, sans-serif; background: var(--rn-walnut); color: var(--rn-cream); min-height: 100vh; display: flex; flex-direction: column; transition: background-color var(--rn-transition), color var(--rn-transition); } main { flex: 1 0 auto; } h1, h2, h3, h4, .rn-brand { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; } a { color: var(--rn-brass); } a:hover { color: var(--rn-brass-bright); } /* ============================================================================ Public site navbar + footer ============================================================================ */ .rn-navbar { background: var(--rn-walnut-deep); border-bottom: 1px solid rgba(var(--rn-brass-rgb), 0.35); } .rn-brand { color: var(--rn-brass-bright) !important; font-weight: 700; font-size: 1.4rem; display: inline-flex; align-items: center; gap: 0.5rem; } .rn-brand-mark { width: 1.6rem; height: 1.6rem; flex-shrink: 0; } .rn-brand-dial { color: var(--rn-oxblood); margin-right: 0.35rem; } .rn-footer { padding: var(--rn-space-5) 0 var(--rn-space-4); color: rgba(var(--rn-on-dark-rgb), 0.6); border-top: 1px solid rgba(var(--rn-brass-rgb), 0.2); background: var(--rn-walnut-deep); } .rn-footer h6 { color: var(--rn-brass-bright); font-family: 'Poppins', system-ui, sans-serif; font-size: 0.95rem; margin-bottom: var(--rn-space-2); } .rn-footer a { color: rgba(var(--rn-on-dark-rgb), 0.75); text-decoration: none; } .rn-footer a:hover { color: var(--rn-brass-bright); } .rn-footer-legal { font-size: 0.82rem; color: rgba(var(--rn-on-dark-rgb), 0.45); border-top: 1px solid rgba(var(--rn-brass-rgb), 0.15); margin-top: var(--rn-space-4); padding-top: var(--rn-space-3); } .rn-onesparked-credit { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: rgba(var(--rn-on-dark-rgb), 0.6); } .rn-onesparked-credit a { color: var(--rn-brass-bright); font-weight: 600; } .rn-onesparked-credit a:hover { color: var(--rn-brass); } /* ============================================================================ Hero / marketing sections ============================================================================ */ /* ---- Secondary page header (Pricing, etc): a lighter band, not the full splash treatment reserved for the homepage. ---- */ .rn-hero { padding: var(--rn-space-6) 0 var(--rn-space-5); background: linear-gradient(180deg, rgba(var(--rn-brass-rgb), 0.08), transparent); } /* ---- Splash hero: full-bleed dark band (matches onesparked's own dark-header- over-light-body convention), animated glow + waveform backdrop, staggered entrance animation on the text stack. ---- */ .rn-hero-splash { position: relative; overflow: hidden; min-height: min(80vh, 640px); display: flex; align-items: center; background: var(--rn-walnut-deep); color: #ffffff; padding: var(--rn-space-6) 0; isolation: isolate; } .rn-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .rn-hero-glow { position: absolute; inset: -25%; background: radial-gradient(ellipse at 25% 20%, rgba(var(--rn-brass-rgb), 0.35), transparent 60%), radial-gradient(ellipse at 82% 78%, rgba(var(--rn-brass-rgb), 0.2), transparent 55%); animation: rn-glow-drift 14s ease-in-out infinite alternate; } @keyframes rn-glow-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(2.5%, -3%) scale(1.1); } } .rn-waveform { position: absolute; bottom: 0; left: 0; right: 0; height: 70px; display: flex; align-items: flex-end; gap: 5px; padding: 0 6%; opacity: 0.32; } .rn-waveform span { flex: 1 1 auto; background: var(--rn-brass-bright); border-radius: 3px 3px 0 0; height: 100%; transform-origin: bottom; animation: rn-bar 2.6s ease-in-out infinite; } @keyframes rn-bar { 0%, 100% { transform: scaleY(0.18); } 50% { transform: scaleY(1); } } .rn-hero-splash .container { position: relative; z-index: 1; } .rn-dial-badge { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--rn-brass-rgb), 0.15); border: 1px solid rgba(var(--rn-brass-rgb), 0.4); color: var(--rn-brass-bright); animation: rn-dial-glow 3.5s ease-in-out infinite; } .rn-dial-badge .rn-icon { width: 2.25rem; height: 2.25rem; } @keyframes rn-dial-glow { 0%, 100% { box-shadow: 0 0 0 rgba(var(--rn-brass-rgb), 0); } 50% { box-shadow: 0 0 28px rgba(var(--rn-brass-rgb), 0.55); } } .rn-hero-splash .rn-hero-title { color: #ffffff; } .rn-hero-accent { color: var(--rn-brass-bright); } .rn-hero-splash .rn-hero-subtitle { color: rgba(255, 255, 255, 0.85); } .rn-hero-splash .rn-hero-note { color: rgba(255, 255, 255, 0.6); } /* .rn-btn-outline normally assumes it sits on the light page body (dark text) - inside the dark hero band it needs light text instead, or it goes near- invisible (dark text on the dark hero background). */ .rn-hero-splash .rn-btn-outline { color: #ffffff; border-color: rgba(255, 255, 255, 0.4); } .rn-hero-splash .rn-btn-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.7); color: #ffffff; } .rn-hero-in { opacity: 0; transform: translateY(18px); animation: rn-hero-in 0.7s ease forwards; animation-delay: var(--d, 0s); } @keyframes rn-hero-in { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .rn-dial, .rn-reveal, .rn-card, .rn-feature-card, * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } .rn-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .rn-reveal.rn-revealed { opacity: 1; transform: translateY(0); } .rn-hero-title { font-size: clamp(2.25rem, 4vw, 3.25rem); color: var(--rn-cream); } .rn-hero-subtitle { max-width: 680px; margin: 0 auto var(--rn-space-4); color: rgba(var(--rn-cream-rgb), 0.85); font-size: 1.15rem; } .rn-hero-note { color: rgba(var(--rn-cream-rgb), 0.6); font-size: 0.9rem; } .rn-section-title { color: var(--rn-cream); } .rn-section-subtitle { color: rgba(var(--rn-cream-rgb), 0.7); max-width: 640px; } /* ============================================================================ Buttons, cards, badges ============================================================================ */ .rn-btn-brass { background: linear-gradient(180deg, var(--rn-brass-bright), var(--rn-brass)); border: none; color: #ffffff; font-weight: 600; padding: 0.75rem 1.75rem; border-radius: var(--rn-radius-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; } .rn-btn-brass:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--rn-brass-rgb), 0.35); color: #ffffff; } .rn-btn-outline { border: 1px solid rgba(var(--rn-brass-rgb), 0.5); color: var(--rn-cream); background: transparent; border-radius: var(--rn-radius-sm); transition: background-color var(--rn-transition), border-color var(--rn-transition), transform 0.15s ease; } /* .rn-btn-brass has no border (border: none) and 0.75rem/1.75rem padding; without a matching override here .rn-btn-outline falls back to Bootstrap's smaller default .btn padding, so the two button styles come out different heights whenever they sit side by side (e.g. My Projects' "New Blank Project" / "Upload a New Manuscript" row). Skip .btn-sm so the many existing compact uses of .rn-btn-outline are unaffected. */ .rn-btn-outline:not(.btn-sm) { padding: calc(0.75rem - 1px) calc(1.75rem - 1px); } .rn-btn-outline:hover { background: rgba(var(--rn-brass-rgb), 0.1); border-color: var(--rn-brass); color: var(--rn-cream); transform: translateY(-1px); } .rn-card, .rn-feature-card, .rn-auth-card { background: rgba(var(--rn-cream-rgb), 0.04); border: 1px solid rgba(var(--rn-brass-rgb), 0.25); border-radius: var(--rn-radius-md); padding: var(--rn-space-4); height: 100%; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .rn-card:hover, .rn-feature-card:hover { transform: translateY(-2px); border-color: rgba(var(--rn-brass-rgb), 0.5); box-shadow: var(--rn-shadow-md); } .rn-feature-icon { font-size: 2rem; margin-bottom: 0.75rem; } .rn-feature-icon svg { width: 2rem; height: 2rem; color: var(--rn-brass); } .rn-badge-status { background: var(--rn-oxblood); color: #ffffff; font-size: 0.85rem; padding: 0.4rem 0.75rem; border-radius: var(--rn-radius-pill); } .rn-badge-failed { background: var(--rn-danger); color: #ffffff; } /* ============================================================================ Pricing table + genre demo cards (public marketing site) ============================================================================ */ .rn-pricing-card { background: rgba(var(--rn-cream-rgb), 0.04); border: 1px solid rgba(var(--rn-brass-rgb), 0.3); border-radius: var(--rn-radius-lg); padding: var(--rn-space-5); } .rn-pricing-figure { font-family: 'Playfair Display', Georgia, serif; font-size: 3rem; color: var(--rn-brass-bright); } .rn-pricing-list { list-style: none; padding: 0; margin: var(--rn-space-4) 0; } .rn-pricing-list li { padding: 0.5rem 0; border-bottom: 1px solid rgba(var(--rn-brass-rgb), 0.15); display: flex; gap: 0.6rem; } .rn-pricing-list li:last-child { border-bottom: none; } .rn-info-pop { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid rgba(var(--rn-brass-rgb), 0.4); background: transparent; color: var(--rn-brass); font-size: 0.65rem; vertical-align: middle; margin: 0 0.15rem; transition: background-color var(--rn-transition), color var(--rn-transition); } .rn-info-pop:hover, .rn-info-pop:focus { background: var(--rn-brass); color: #fff; } .rn-demo-card { background: rgba(var(--rn-cream-rgb), 0.04); border: 1px solid rgba(var(--rn-brass-rgb), 0.25); border-radius: var(--rn-radius-lg); padding: var(--rn-space-4); height: 100%; } .rn-demo-genre { display: inline-block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rn-walnut-deep); background: var(--rn-brass-bright); padding: 0.25rem 0.7rem; border-radius: var(--rn-radius-pill); font-weight: 700; margin-bottom: var(--rn-space-2); } .rn-demo-card audio { width: 100%; margin-top: var(--rn-space-3); border-radius: var(--rn-radius-sm); } .rn-script-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; border: none; padding: 0.6rem 0 0.1rem; margin-top: var(--rn-space-2); font-size: 0.85rem; font-weight: 600; color: var(--rn-brass); cursor: pointer; } .rn-script-toggle:hover { color: var(--rn-brass-bright); } .rn-script-toggle .rn-row-chevron { transition: transform var(--rn-transition); } .rn-script-toggle[aria-expanded="true"] .rn-row-chevron { transform: rotate(180deg); } .rn-script-text { max-height: 260px; overflow-y: auto; margin-top: var(--rn-space-2); padding-top: var(--rn-space-2); border-top: 1px solid rgba(var(--rn-brass-rgb), 0.15); text-align: left; } .rn-script-text p { font-size: 0.85rem; line-height: 1.6; margin-bottom: 0.6rem; } /* ============================================================================ App shell: sidebar + topbar (authenticated dashboard) ============================================================================ */ .rn-app-shell { display: flex; flex: 1 0 auto; min-height: calc(100vh - var(--rn-topbar-height)); } .rn-app-topbar { height: var(--rn-topbar-height); background: var(--rn-walnut-deep); border-bottom: 1px solid rgba(var(--rn-brass-rgb), 0.25); display: flex; align-items: center; padding: 0 var(--rn-space-4); gap: var(--rn-space-3); position: sticky; top: 0; z-index: 1030; } .rn-app-topbar .nav-link { color: rgba(var(--rn-on-dark-rgb), 0.75); font-weight: 500; padding: 0.4rem 0.8rem; border-radius: var(--rn-radius-sm); transition: background-color var(--rn-transition), color var(--rn-transition); } .rn-app-topbar .nav-link:hover, .rn-app-topbar .nav-link.active { color: var(--rn-brass-bright); background: rgba(var(--rn-brass-rgb), 0.1); } /* .rn-btn-outline normally assumes it sits on the light page body (dark text) - the topbar is always a dark surface (like the hero), so it needs light text instead or it goes near-invisible. Same fix as the hero splash button. */ .rn-app-topbar .rn-btn-outline { color: #ffffff; border-color: rgba(255, 255, 255, 0.35); } .rn-app-topbar .rn-btn-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); color: #ffffff; } .rn-sidebar { position: relative; width: var(--rn-sidebar-width); flex-shrink: 0; background: rgba(var(--rn-cream-rgb), 0.025); border-right: 1px solid rgba(var(--rn-brass-rgb), 0.18); padding: var(--rn-space-4) var(--rn-space-3); transition: width var(--rn-transition), padding var(--rn-transition); } /* Collapsed rail: icon-only desktop sidebar. Persisted via the rn_sidebar cookie and applied before first paint (see _AppLayout.cshtml's inline script), same pattern as the theme cookie, to avoid a flash of the expanded width on load. The mobile offcanvas drawer shares the .rn-sidebar class for its link/heading styles but is never collapsed - :not(.offcanvas) keeps this scoped to the desktop rail. */ html[data-rn-sidebar="collapsed"] .rn-sidebar:not(.offcanvas) { width: 64px; padding-left: var(--rn-space-2); padding-right: var(--rn-space-2); } html[data-rn-sidebar="collapsed"] .rn-sidebar:not(.offcanvas) .rn-sidebar-label, html[data-rn-sidebar="collapsed"] .rn-sidebar:not(.offcanvas) .rn-sidebar-heading { display: none; } html[data-rn-sidebar="collapsed"] .rn-sidebar:not(.offcanvas) .rn-sidebar-link { justify-content: center; padding-left: 0; padding-right: 0; } /* The Admin nested collapse toggle has nothing left to show once its label/chevron are hidden above - rather than leave an empty clickable button, hide it outright and force its panel open so the admin links themselves (icon-only) stay reachable. */ html[data-rn-sidebar="collapsed"] .rn-sidebar:not(.offcanvas) #rnSidebarAdmin.collapse { display: block; height: auto !important; } html[data-rn-sidebar="collapsed"] .rn-sidebar:not(.offcanvas) .rn-sidebar-collapse-btn svg { transform: rotate(180deg); } .rn-sidebar-collapse-btn { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin-left: auto; margin-bottom: var(--rn-space-2); background: transparent; border: 1px solid rgba(var(--rn-brass-rgb), 0.25); border-radius: var(--rn-radius-sm); color: rgba(var(--rn-cream-rgb), 0.6); cursor: pointer; transition: background-color var(--rn-transition), color var(--rn-transition), transform var(--rn-transition); } .rn-sidebar-collapse-btn svg { width: 0.9rem; height: 0.9rem; transition: transform var(--rn-transition); } .rn-sidebar-collapse-btn:hover { background: rgba(var(--rn-brass-rgb), 0.1); color: var(--rn-brass-bright); } html[data-rn-sidebar="collapsed"] .rn-sidebar-collapse-btn { margin-left: 0; margin-right: 0; } /* As a mobile offcanvas, .rn-sidebar is a floating panel over the page rather than sitting inline on the page's own background - it needs a fully opaque surface, not the barely-there tint used for the desktop inline sidebar. position: fixed restores Bootstrap's own .offcanvas positioning, which the base .rn-sidebar rule above (same "single class" specificity, but later in the cascade) otherwise silently overrides to "relative" - that turned the closed offcanvas into a normal, in-flow, full-width (see the width:100% rule below) flex sibling of .rn-app-content below 992px, shoving the real content completely off-screen to the right (invisible, since it's still visibility:hidden, so it just looked blank rather than obviously broken). */ .offcanvas.rn-sidebar { position: fixed; background: var(--rn-surface, var(--rn-walnut)); } .offcanvas.rn-sidebar .offcanvas-header { border-bottom: 1px solid rgba(var(--rn-brass-rgb), 0.18); } .rn-sidebar-section { margin-bottom: var(--rn-space-4); } .rn-sidebar-heading { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--rn-cream-rgb), 0.45); padding: 0 0.75rem; margin-bottom: var(--rn-space-2); } .rn-sidebar-heading-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; border: none; cursor: pointer; } .rn-sidebar-heading-toggle .rn-row-chevron { width: 0.85em; height: 0.85em; } .rn-sidebar-heading-toggle[aria-expanded="true"] .rn-row-chevron { transform: rotate(180deg); } .rn-sidebar-heading-toggle:hover { color: var(--rn-brass); } .rn-sidebar-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.75rem; border-radius: var(--rn-radius-sm); color: rgba(var(--rn-cream-rgb), 0.8); text-decoration: none; font-weight: 500; transition: background-color var(--rn-transition), color var(--rn-transition); } .rn-sidebar-link svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: rgba(var(--rn-cream-rgb), 0.55); transition: color var(--rn-transition); } .rn-sidebar-link:hover { background: rgba(var(--rn-brass-rgb), 0.1); color: var(--rn-cream); } .rn-sidebar-link:hover svg { color: var(--rn-brass-bright); } .rn-sidebar-link.active { background: rgba(var(--rn-brass-rgb), 0.16); color: var(--rn-brass-bright); font-weight: 600; } .rn-sidebar-link.active svg { color: var(--rn-brass-bright); } .rn-app-content { flex: 1 1 auto; min-width: 0; padding: var(--rn-space-5) var(--rn-space-4); } @media (max-width: 991.98px) { .rn-sidebar { width: 100%; } .rn-app-content { padding: var(--rn-space-4) var(--rn-space-3); } } .rn-account-dropdown .dropdown-menu { background: var(--rn-walnut-deep); border: 1px solid rgba(var(--rn-brass-rgb), 0.3); border-radius: var(--rn-radius-md); box-shadow: var(--rn-shadow-md); } .rn-account-dropdown .dropdown-item { color: rgb(var(--rn-on-dark-rgb)); display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem; } .rn-account-dropdown .dropdown-item svg { width: 1rem; height: 1rem; color: rgba(var(--rn-on-dark-rgb), 0.6); } .rn-account-dropdown .dropdown-header { color: rgba(var(--rn-on-dark-rgb), 0.5) !important; } .rn-account-dropdown .dropdown-item:hover, .rn-account-dropdown .dropdown-item:focus { background: rgba(var(--rn-brass-rgb), 0.14); color: var(--rn-brass-bright); } .rn-account-dropdown .dropdown-divider { border-color: rgba(var(--rn-brass-rgb), 0.2); } /* Theme swatch picker (inside the Account dropdown) */ .rn-theme-swatch-row { display: flex; gap: 0.6rem; padding: 0.5rem 1rem 0.75rem; } .rn-theme-swatch { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform var(--rn-transition), border-color var(--rn-transition); } .rn-theme-swatch:hover { transform: scale(1.1); } .rn-theme-swatch.active { border-color: var(--rn-brass-bright); box-shadow: 0 0 0 2px rgba(var(--rn-brass-rgb), 0.25); } .rn-theme-swatch-labels { display: flex; gap: 0.6rem; padding: 0 1rem 0.5rem; font-size: 0.68rem; } .rn-theme-swatch-labels span { width: 1.9rem; text-align: center; color: rgba(var(--rn-on-dark-rgb), 0.55); } /* ============================================================================ Docs nav (Documentation section) ============================================================================ */ .rn-docs-layout { display: flex; gap: var(--rn-space-5); align-items: flex-start; } .rn-docs-nav { width: 240px; flex-shrink: 0; position: sticky; top: calc(var(--rn-topbar-height) + var(--rn-space-3)); } .rn-docs-nav a { display: block; padding: 0.5rem 0.75rem; border-radius: var(--rn-radius-sm); color: rgba(var(--rn-cream-rgb), 0.75); text-decoration: none; font-size: 0.92rem; } .rn-docs-nav a:hover { background: rgba(var(--rn-brass-rgb), 0.1); color: var(--rn-brass-bright); } .rn-docs-nav a.active { background: rgba(var(--rn-brass-rgb), 0.16); color: var(--rn-brass-bright); font-weight: 600; } .rn-docs-content { flex: 1 1 auto; min-width: 0; max-width: 760px; } .rn-docs-content h2 { margin-top: var(--rn-space-5); } @media (max-width: 767.98px) { .rn-docs-layout { flex-direction: column; } .rn-docs-nav { width: 100%; position: static; } } /* ============================================================================ Project/scene images - shared thumbnail + placeholder treatment (Projects/ Index, Projects/Details, Chapters/Show). ============================================================================ */ .rn-image-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rn-radius-md); display: block; } .rn-image-placeholder { width: 100%; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; border-radius: var(--rn-radius-md); background: rgba(var(--rn-cream-rgb), 0.04); border: 1px dashed rgba(var(--rn-brass-rgb), 0.3); color: rgba(var(--rn-cream-rgb), 0.3); } .rn-image-placeholder .rn-icon { width: 2.5rem; height: 2.5rem; } .rn-card-image { margin: calc(var(--rn-space-4) * -1) calc(var(--rn-space-4) * -1) var(--rn-space-3); border-radius: var(--rn-radius-md) var(--rn-radius-md) 0 0; overflow: hidden; } .rn-card-image .rn-image-thumb, .rn-card-image .rn-image-placeholder { border-radius: 0; aspect-ratio: 16 / 10; } .rn-thumb-sm { width: 4.5rem; height: 4.5rem; flex-shrink: 0; } .rn-thumb-sm .rn-image-thumb, .rn-thumb-sm .rn-image-placeholder { width: 100%; height: 100%; aspect-ratio: auto; border-radius: var(--rn-radius-sm); } .rn-thumb-sm .rn-image-placeholder .rn-icon { width: 1.5rem; height: 1.5rem; } .rn-image-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ============================================================================ Series groups (Projects/Index) - collapsible sections grouping projects into user-defined series, e.g. a series of books. ============================================================================ */ .rn-series-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: var(--rn-space-2); border-bottom: 1px solid rgba(var(--rn-brass-rgb), 0.2); margin-bottom: var(--rn-space-2); } .rn-series-toggle { display: flex; align-items: center; gap: 0.6rem; background: transparent; border: none; padding: 0.3rem 0; cursor: pointer; color: var(--rn-cream); text-align: left; } .rn-series-toggle:hover .h5 { color: var(--rn-brass); } .rn-series-toggle .rn-row-chevron { color: var(--rn-brass); } .rn-series-toggle[aria-expanded="false"] .rn-row-chevron { transform: rotate(-90deg); } .rn-series-actions { display: flex; gap: 0.4rem; flex-shrink: 0; } .rn-series-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(var(--rn-brass-rgb), 0.25); background: transparent; color: rgba(var(--rn-cream-rgb), 0.6); transition: background-color var(--rn-transition), color var(--rn-transition), border-color var(--rn-transition); } .rn-series-action-btn:hover { background: rgba(var(--rn-brass-rgb), 0.12); border-color: var(--rn-brass); color: var(--rn-brass); } .rn-series-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(var(--rn-brass-rgb), 0.08); border: 1px solid rgba(var(--rn-brass-rgb), 0.3); border-radius: var(--rn-radius-pill); padding: 0.35rem 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--rn-brass); transition: background-color var(--rn-transition), border-color var(--rn-transition); } .rn-series-badge:hover { background: rgba(var(--rn-brass-rgb), 0.16); border-color: var(--rn-brass); } .rn-series-remove-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid rgba(var(--rn-cream-rgb), 0.25); background: transparent; color: rgba(var(--rn-cream-rgb), 0.5); font-size: 1.1rem; line-height: 1; transition: background-color var(--rn-transition), color var(--rn-transition), border-color var(--rn-transition); } .rn-series-remove-btn:hover { background: rgba(var(--rn-cream-rgb), 0.06); border-color: var(--rn-danger); color: var(--rn-danger); } /* ============================================================================ Accordion (FAQ, and reused anywhere content should expand/collapse) ============================================================================ */ .rn-accordion-item { background: var(--rn-surface, var(--rn-walnut)); border: 1px solid rgba(var(--rn-brass-rgb), 0.2); border-radius: var(--rn-radius-md) !important; margin-bottom: var(--rn-space-2); overflow: hidden; } .rn-accordion .accordion-button { background: transparent; color: var(--rn-cream); font-weight: 600; font-family: 'Poppins', system-ui, sans-serif; box-shadow: none; } .rn-accordion .accordion-button:not(.collapsed) { background: rgba(var(--rn-brass-rgb), 0.08); color: var(--rn-brass); box-shadow: none; } .rn-accordion .accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(var(--rn-brass-rgb), 0.25); } .rn-accordion .accordion-button::after { filter: none; transition: transform var(--rn-transition); } .rn-accordion .accordion-body { color: rgba(var(--rn-cream-rgb), 0.85); line-height: 1.6; } /* ============================================================================ Row cards: modern replacement for plain admin lists (Users, Coupons, Feedback) - each row is a clickable summary that expands into a details panel, rather than a static grid. ============================================================================ */ .rn-row-list { display: flex; flex-direction: column; gap: var(--rn-space-2); } .rn-row-card { background: var(--rn-surface, var(--rn-walnut)); border: 1px solid rgba(var(--rn-brass-rgb), 0.2); border-radius: var(--rn-radius-md); overflow: hidden; transition: border-color var(--rn-transition), box-shadow var(--rn-transition); } .rn-row-card:hover { border-color: rgba(var(--rn-brass-rgb), 0.4); box-shadow: var(--rn-shadow-sm); } .rn-row-summary { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.1rem; background: transparent; border: none; text-align: left; cursor: pointer; color: inherit; } .rn-row-summary:hover { background: rgba(var(--rn-brass-rgb), 0.05); } .rn-row-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(var(--rn-brass-rgb), 0.15); color: var(--rn-brass); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .rn-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; } .rn-row-title { font-weight: 600; color: var(--rn-cream); font-family: 'Poppins', system-ui, sans-serif; } .rn-row-sub { font-size: 0.85rem; color: rgba(var(--rn-cream-rgb), 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rn-row-meta { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .rn-row-chevron { color: rgba(var(--rn-cream-rgb), 0.45); transition: transform var(--rn-transition); } .rn-row-summary[aria-expanded="true"] .rn-row-chevron { transform: rotate(180deg); color: var(--rn-brass); } .rn-row-details { padding: 0 1.1rem 1rem; border-top: 1px solid rgba(var(--rn-brass-rgb), 0.15); padding-top: 0.85rem; } .rn-row-details p { white-space: pre-wrap; } /* ============================================================================ Tables, forms, modals (existing, tokenized) ============================================================================ */ .rn-table { color: var(--rn-cream); } .rn-estimate-summary dt, .rn-estimate-summary dd { color: var(--rn-cream); } .rn-progress-bar { background-color: var(--rn-brass); transition: width 0.6s ease; } .rn-row-hidden { opacity: 0.55; } .rn-stage-timeline { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; } .rn-stage-step { flex: 1 1 auto; text-align: center; padding: 0.35rem 0.5rem; font-size: 0.7rem; border-radius: var(--rn-radius-sm); background: rgba(var(--rn-cream-rgb), 0.05); border: 1px solid rgba(var(--rn-brass-rgb), 0.2); color: rgba(var(--rn-cream-rgb), 0.5); white-space: nowrap; } .rn-stage-step.rn-stage-done { background: rgba(var(--rn-brass-rgb), 0.18); border-color: var(--rn-brass); color: var(--rn-cream); } .rn-stage-step.rn-stage-current { background: linear-gradient(180deg, var(--rn-brass-bright), var(--rn-brass)); border-color: var(--rn-brass-bright); color: var(--rn-walnut-deep); font-weight: 600; } .rn-stage-step.rn-stage-failed { background: rgba(138, 32, 32, 0.35); border-color: var(--rn-danger); color: var(--rn-cream); font-weight: 600; } .rn-locked-panel { padding: 2rem; text-align: center; color: rgba(var(--rn-cream-rgb), 0.6); border: 1px dashed rgba(var(--rn-brass-rgb), 0.3); border-radius: var(--rn-radius-md); } .rn-tab-content { background: rgba(var(--rn-cream-rgb), 0.03); border: 1px solid rgba(var(--rn-brass-rgb), 0.25); border-top: none; border-radius: 0 0 var(--rn-radius-md) var(--rn-radius-md); padding: var(--rn-space-4); } .rn-nav-tabs .nav-link { color: rgba(var(--rn-cream-rgb), 0.6); border: 1px solid transparent; } .rn-nav-tabs .nav-link.active { background: rgba(var(--rn-cream-rgb), 0.03); color: var(--rn-cream); border-color: rgba(var(--rn-brass-rgb), 0.25); border-bottom-color: transparent; } .rn-nav-tabs .nav-link:not(.active):hover { color: var(--rn-brass-bright); } .form-control, .form-select, .form-label { background-color: rgba(var(--rn-cream-rgb), 0.06); color: var(--rn-cream); border-color: rgba(var(--rn-brass-rgb), 0.3); } .form-control:focus, .form-select:focus { background-color: rgba(var(--rn-cream-rgb), 0.1); color: var(--rn-cream); border-color: var(--rn-brass); box-shadow: 0 0 0 0.2rem rgba(var(--rn-brass-rgb), 0.25); } .rn-back-link { font-size: 0.9rem; color: rgba(var(--rn-cream-rgb), 0.7); } .rn-color-swatch { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 50%; } .rn-segment-text { line-height: 2.4; font-size: 1.05rem; text-align: left; /* Deliberately NOT white-space: pre-wrap - that made the Razor view's own source indentation between tags significant whitespace too, rendering as a left-pad at the start of every segment. Paragraph breaks are handled by converting real newlines in the segment text to explicit
tags server-side instead (see _CharactersTab.cshtml). */ } .rn-segment { padding: 0.1rem 0.3rem 0.1rem 0; border-radius: 3px; margin-right: 0.25rem; } .rn-speaker-pill { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.05rem 0.55rem; margin-right: 0.35rem; border-radius: var(--rn-radius-pill); border: 1px solid; background-color: rgba(var(--rn-cream-rgb), 0.06); vertical-align: baseline; line-height: 1.5; } .rn-speaker-pill-editable { cursor: pointer; } .rn-speaker-pill-editable:hover { background-color: rgba(var(--rn-cream-rgb), 0.16); } .rn-audio-tag-badge { display: inline-block; font-size: 0.68rem; font-style: italic; color: var(--rn-brass); margin-right: 0.35rem; vertical-align: baseline; } .rn-insert-segment-btn { display: inline-block; width: 1.1rem; height: 1.1rem; line-height: 1; padding: 0; margin: 0 0.2rem; font-size: 0.75rem; border: 1px solid rgba(var(--rn-brass-rgb), 0.3); border-radius: 50%; background: transparent; color: rgba(var(--rn-cream-rgb), 0.5); vertical-align: middle; } .rn-insert-segment-btn:hover { background-color: rgba(var(--rn-brass-rgb), 0.2); color: var(--rn-cream); } .rn-modal-content { background-color: var(--rn-walnut); color: var(--rn-cream); border: 1px solid rgba(var(--rn-brass-rgb), 0.35); } .rn-modal-content .modal-header, .rn-modal-content .modal-footer { border-color: rgba(var(--rn-brass-rgb), 0.25); } :root[data-rn-theme="dark"] .rn-modal-content .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .rn-character-roster .form-select, .rn-character-roster .form-control { font-size: 0.85rem; } .rn-auth-container { max-width: 960px; }