/** * @file style.css * @description * The main CSS stylesheet for Pebl’s public-facing landing page (and potentially other static files). * It provides optional font-face rules for custom fonts (“Primary” and “Secondary”), basic layout * and background colors, and styling for a “hero” section. Most of these rules apply to * `index.html` or other static pages in the `/public` folder. * * Sections: * 1) @font-face rules (optional) * 2) Basic element styles (html, body, etc.) * 3) Hero section styling * 4) Utility classes (e.g., .success for green text, ::selection for highlight) * * Notes: * - The `.dark-mode` and `.noScroll` classes may be toggled on the `` element * if your app supports a dark theme or wants to disable scrolling. * - Use `.success` to highlight text in a green color (e.g., “healthy” status). * - The `::selection` pseudo-element changes how text is highlighted when users select/copy content. * - Fonts loaded via @font-face can be further optimized or replaced with local hosting/CDN references if needed. */ /* ------------------------------------------------------ 1) Optional: Keep the @font-face rules if you want to load “Primary” and “Secondary” fonts globally. ------------------------------------------------------ */ @font-face { font-family: 'Primary'; font-style: normal; font-weight: 200; src: url('https://cdn.pebl.app/fonts/primary/200.woff2') format('woff2'); } @font-face { font-family: 'Primary'; font-style: normal; font-weight: 400; src: url('https://cdn.pebl.app/fonts/primary/400.woff2') format('woff2'); } @font-face { font-family: 'Primary'; font-style: normal; font-weight: 600; src: url('https://cdn.pebl.app/fonts/primary/600.woff2') format('woff2'); } @font-face { font-family: 'Secondary'; font-style: normal; font-weight: 200; src: url('https://cdn.pebl.app/fonts/secondary/100.woff2') format('woff2'); } @font-face { font-family: 'Secondary'; font-style: normal; font-weight: 400; src: url('https://cdn.pebl.app/fonts/secondary/200.woff2') format('woff2'); } @font-face { font-family: 'Secondary'; font-style: normal; font-weight: 600; src: url('https://cdn.pebl.app/fonts/secondary/600.woff2') format('woff2'); } /* ------------------------------------------------------ 2) Basic element styles: body, html classes, etc. ------------------------------------------------------ */ /* Use the custom “Primary” font family by default in :root */ :root { font-family: Primary, sans-serif; } /* Dark-mode adjustments for */ .dark-mode body { background-color: #000; background-image: linear-gradient(to bottom right, #363b41, #191a1e); } /* .noScroll can be added to the element or body to remove scrolling (overflow: hidden). */ .noScroll { overflow: hidden; } /* #app-content, body, and section.hero all share a minimum height of 100vh. This ensures that the main content spans the full viewport height. */ #app-content, body, section.hero { min-height: 100vh; margin: 0; padding: 0; box-sizing: border-box; } /* The default (light) background if not in dark mode */ body { background-color: #f0f0f3; font-family: Secondary, sans-serif; color: #6f7784; } /* ------------------------------------------------------ 3) Hero section styling ------------------------------------------------------ */ section.hero { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 70px 30px; position: relative; text-align: center; } section.hero h1, h1 { font-size: 3rem; font-weight: 400; margin: 0; font-family: 'Primary'; } section.hero p { font-family: 'Secondary', sans-serif; margin: 0.5rem 0; } /* ------------------------------------------------------ 4) Utility classes & pseudo-elements ------------------------------------------------------ */ /* .success => green text (e.g., “healthy” status messages) */ .success { color: #4aaf4f !important; } /* The ::selection pseudo-element changes the highlight color when selecting text */ ::selection { color: #fff; background: #000; }