/** * RC Loading State Styles * * Controls the loading-to-ready transition for the platform. * The base HTML template includes `class="no-js rc-loading"` on . * * - `no-js` is removed when JavaScript executes * - `rc-loading` is removed when the platform is ready * * This provides a smooth fade-in transition when the page loads, * preventing flash of unstyled content (FOUC). */ /* Loading state - content hidden */ html.rc-loading body { opacity: 0; pointer-events: none; } /* Smooth transition when loading completes */ body { transition: opacity 250ms ease-out; } /* Ready state - content visible */ html:not(.rc-loading) body { opacity: 1; } /* Smooth background transitions during soft navigation */ html { transition: background-color 300ms ease-out; } /* ========================================================================= Splash Screen Styles ========================================================================= */ /* Text styles for splash screen content */ .text.hero { font-size: 4rem; font-weight: 700; color: #ffffff; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.5rem; } .text.tagline { font-size: 1.25rem; font-weight: 400; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.05em; } /* Layout helpers for splash */ .zstack { position: relative; display: grid; grid-template-areas: "stack"; align-items: center; justify-items: center; width: 100%; height: 100%; } .zstack > * { grid-area: stack; } .vstack { display: flex; flex-direction: column; } .vstack[alignment="center"], .vstack.center { align-items: center; } /* Spacer element */ .spacer { flex: 1; } /* Gradient overlay for splash backgrounds */ .gradient { position: absolute; inset: 0; pointer-events: none; } /* ========================================================================= Layout Helpers ========================================================================= */ /* HStack - horizontal flex layout */ .hstack { display: flex; flex-direction: row; align-items: center; } /* ========================================================================= News Page Styles ========================================================================= */ /* News Banner - blue notification bar */ /* Targets HStack containing banner text elements */ .hstack:has(.banner-badge) { background: #38BDF8; padding: 12px 48px; justify-content: center; gap: 8px; } .text.banner-badge { font-size: 0.75rem; font-weight: 600; background: rgba(0, 0, 0, 0.15); padding: 4px 10px; border-radius: 4px; color: #000; } .text.banner-text { font-size: 0.875rem; color: #000; } .text.banner-link { font-size: 0.875rem; font-weight: 600; color: #000; text-decoration: underline; cursor: pointer; } /* News Typography */ .text.news-headline { font-size: 2.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #ffffff; } .text.news-subheadline { font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: #ffffff; } .text.news-category { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #38BDF8; } .text.news-excerpt { font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.7); } .text.news-meta { font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); } .text.news-author { font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); } /* ========================================================================= Manual.app Typography ========================================================================= */ .text.manual-display { font-size: 2.75rem; font-weight: 700; color: #1a1a2e; letter-spacing: -0.03em; line-height: 1.1; } .text.manual-title { font-size: 1.75rem; font-weight: 600; color: #1a1a2e; letter-spacing: -0.02em; line-height: 1.2; } .text.manual-subtitle { font-size: 1.125rem; font-weight: 400; color: #6b7280; line-height: 1.6; } .text.manual-body { font-size: 1rem; font-weight: 400; color: #6b7280; line-height: 1.6; } .text.manual-body-em { font-size: 1rem; font-weight: 500; color: #374151; line-height: 1.6; } .text.manual-caption { font-size: 0.75rem; font-weight: 600; color: rgb(54, 123, 144); text-transform: uppercase; letter-spacing: 0.08em; } .text.manual-nav { font-size: 0.875rem; font-weight: 500; color: #6b7280; cursor: pointer; transition: color 150ms ease; } .text.manual-nav:hover { color: #1a1a2e; } .text.manual-nav-active { font-size: 0.875rem; font-weight: 600; color: rgb(54, 123, 144); } .text.manual-brand { font-size: 0.875rem; font-weight: 600; color: #1a1a2e; } .text.manual-card-title { font-size: 1.0625rem; font-weight: 600; color: #1a1a2e; line-height: 1.3; } .text.manual-card-desc { font-size: 0.875rem; font-weight: 400; color: #6b7280; line-height: 1.5; } .text.manual-mono { font-size: 0.8125rem; font-weight: 500; color: rgb(54, 123, 144); font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace; } .text.manual-version { font-size: 1.5rem; font-weight: 700; color: #1a1a2e; } .text.manual-step-num { font-size: 0.875rem; font-weight: 700; color: rgb(54, 123, 144); } .text.manual-link { font-size: 1rem; font-weight: 500; color: rgb(54, 123, 144); cursor: pointer; transition: color 150ms ease; } .text.manual-link:hover { color: rgb(40, 95, 112); } /* Roadmap status badges */ .text.manual-status-complete { font-size: 0.6875rem; font-weight: 600; color: rgb(34, 120, 69); letter-spacing: 0.06em; } .text.manual-status-active { font-size: 0.6875rem; font-weight: 600; color: rgb(54, 123, 144); letter-spacing: 0.06em; } .text.manual-status-upcoming { font-size: 0.6875rem; font-weight: 600; color: #9ca3af; letter-spacing: 0.06em; }