/** * 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; } /* Collection containers (bea kit). ScrollView / List / Grid render as these classes on BOTH the hard (html.go) and soft (IRRenderer.js) paths — the layout-mapping parity test guards the pairing. Note: `.grid` (bare) is a legacy 12-column page class in main.css, so the bea Grid maps to .grid-view (and List to .list-view, paralleling scroll-view/table-view). */ .scroll-view { overflow: auto; min-height: 0; -webkit-overflow-scrolling: touch; } .list-view { display: flex; flex-direction: column; min-width: 0; } .grid-view { display: grid; } /* Skeleton — placeholder shimmer while content loads (bea kit `Skeleton`; size it with the width/height style props). */ .skeleton { display: inline-block; border-radius: 8px; background: linear-gradient(100deg, rgba(120, 120, 128, 0.14) 40%, rgba(120, 120, 128, 0.26) 50%, rgba(120, 120, 128, 0.14) 60%); background-size: 200% 100%; animation: rc-skeleton-shimmer 1.4s ease-in-out infinite; } @keyframes rc-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* CollectionView — data-driven multi-column collection (bea kit). A sensible auto-fill default; override with grid style props. */ .collection-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } /* FeedView — live vertical feed (bea kit; rc-feed-view stamps its item template over the bound @state array). */ rc-feed-view { display: flex; flex-direction: column; gap: 12px; } /* VisualEffect — frosted material behind content (bea kit `VisualEffect`). The base material; layer style props (background, borderRadius) on top. */ .visual-effect { backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); background: rgba(255, 255, 255, 0.55); } /* ========================================================================= 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; }