@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* * Scale Page Builder -- shared stylesheet every generated page links to * (/vendor/pagebuilder/site.css). Mobile-first, no framework, driven * entirely by five CSS custom properties the Theme panel in builder.js * edits. Keep this file framework-free and dependency-free: it ships to * every tenant's public site. */ :root { --sb-primary: #12243b; --sb-accent: #0f766e; --sb-bg: #ffffff; --sb-text: #1f2933; --sb-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sb-muted: #5b6672; --sb-border: #e2e8f0; --sb-radius: 0.75rem; /* Neutral "surface" tokens (2026-09 light/dark pass). Every one of these defaults to something that reproduces the ORIGINAL (pre-dark-mode) look exactly, so an existing site's rendering is untouched until it opts into a dark html[data-sb-theme] scheme below. --sb-primary/ --sb-accent/--sb-text/--sb-font stay per-site (set by the Theme panel or a site's own :root rule); only these neutrals are ever touched by the dark scheme. */ --sb-surface: #ffffff; --sb-header-bg: var(--sb-bg); --sb-soft: rgba(15, 23, 42, 0.035); --sb-page-bg: var(--sb-bg); /* Optional per-site overrides, unset by default: a site's own head code (see SeedPlatformSiteCommand for the platform site's own values) can set these to brighten .sb-btn-primary/.sb-h1.sb-gradient-text without touching every other button on the page. */ --sb-btn-gradient: initial; --sb-heading-gradient: initial; } /* * Dark scheme (2026-09 light/dark pass). Opt-in per site: the public * renderer (Modules\AppSites\Http\Controllers\TenantSitePublicController:: * decorate()) stamps `data-sb-theme="dark"|"light"` and * `data-sb-appearance="light"|"dark"|"auto"` onto from a site's own * `settings.appearance` (see modules/AppSites README / that controller); * a site that never sets it keeps the exact pre-dark-mode look above, * since nothing here ever matches. Only the NEUTRAL tokens are touched -- * --sb-primary/--sb-accent/--sb-text.../--sb-font stay whatever the site's * own theme (or :root rule) set, so a tenant's brand colours carry * straight through into dark mode. html[data-sb-theme] wins over a site's * own :root{} rule (emitted by the builder ahead of this stylesheet) by * specificity, not source order, so this is safe regardless of where the * two rules land in the cascade. */ html[data-sb-theme="dark"] { color-scheme: dark; --sb-bg: #070814; --sb-page-bg: radial-gradient(circle at top, rgba(139, 92, 246, 0.14), transparent 18%), linear-gradient(180deg, #04050d 0%, #070814 26%, #090b19 60%, #05060f 100%); --sb-surface: #0f1224; --sb-header-bg: #0c1020; --sb-soft: rgba(255, 255, 255, 0.03); --sb-text: #f8fafc; --sb-muted: #aab6d3; --sb-border: #1f2440; } /* No-JS / not-yet-resolved fallback for a site whose OWNER chose "Match device" (settings.appearance = 'auto'). Only applies once the renderer has marked the page as auto (`data-sb-appearance="auto"`); a fixed light or dark choice never depends on the visitor's OS preference, and `:not([data-sb-theme="light"])` keeps this from fighting a visitor who already picked Light through the toggle (see the injected script). */ @media (prefers-color-scheme: dark) { html[data-sb-appearance="auto"]:not([data-sb-theme="light"]) { color-scheme: dark; --sb-bg: #070814; --sb-page-bg: radial-gradient(circle at top, rgba(139, 92, 246, 0.14), transparent 18%), linear-gradient(180deg, #04050d 0%, #070814 26%, #090b19 60%, #05060f 100%); --sb-surface: #0f1224; --sb-header-bg: #0c1020; --sb-soft: rgba(255, 255, 255, 0.03); --sb-text: #f8fafc; --sb-muted: #aab6d3; --sb-border: #1f2440; } } *, *::before, *::after { box-sizing: border-box; } body.sb-page { margin: 0; background: var(--sb-page-bg); color: var(--sb-text); font: 400 1rem/1.65 var(--sb-font); -webkit-text-size-adjust: 100%; } .sb-page img, .sb-page video { max-width: 100%; height: auto; display: block; } .sb-page a { color: var(--sb-accent); } .sb-container { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; } /* Header / nav */ .sb-header { border-bottom: 1px solid var(--sb-border); background: var(--sb-header-bg); } .sb-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; flex-wrap: wrap; } .sb-logo { font-weight: 700; font-size: 1.15rem; color: var(--sb-text); text-decoration: none; } .sb-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; } .sb-nav a { color: var(--sb-text); text-decoration: none; font-weight: 500; font-size: 0.92rem; } .sb-nav a:hover { color: var(--sb-accent); } /* Sections */ .sb-section { padding: 3rem 0; } .sb-section-tight { padding: 1.75rem 0; } .sb-section-alt { background: var(--sb-soft); } .sb-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-accent); margin-bottom: 0.5rem; } .sb-h1 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.1; margin: 0 0 1rem; color: var(--sb-text); } /* Optional hero treatment: --sb-heading-gradient is unset by default (see :root), so this class is a no-op (falls back to --sb-primary, i.e. a solid-colour "gradient" of one stop) until a site's own head code sets it -- see SeedPlatformSiteCommand for the platform site's own values. */ .sb-h1.sb-gradient-text { background: var(--sb-heading-gradient, var(--sb-primary)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .sb-h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); line-height: 1.2; margin: 0 0 0.75rem; color: var(--sb-text); } .sb-h3 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.5rem; color: var(--sb-text); } .sb-lead { font-size: 1.1rem; color: var(--sb-muted); max-width: 60ch; margin: 0 0 1.5rem; } .sb-text { color: var(--sb-muted); max-width: 65ch; } .sb-center { text-align: center; margin-left: auto; margin-right: auto; } /* Buttons */ .sb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0 1.5rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; } /* --sb-btn-gradient is unset by default (see :root) -- when a site's own head code sets it, every .sb-btn-primary picks up the gradient instead of the flat --sb-primary fill. Text stays white in both cases. */ .sb-btn-primary { background: var(--sb-btn-gradient, var(--sb-primary)); color: #fff; } .sb-btn-accent { background: var(--sb-accent); color: #fff; } .sb-btn-outline { background: transparent; border-color: var(--sb-primary); color: var(--sb-primary); } .sb-btn-lg { min-height: 52px; padding: 0 2rem; font-size: 1.05rem; } /* Layout helpers */ .sb-spacer-sm { height: 1rem; } .sb-spacer-md { height: 2.5rem; } .sb-spacer-lg { height: 5rem; } .sb-divider { border: 0; border-top: 1px solid var(--sb-border); margin: 2rem 0; } .sb-columns { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } .sb-col { min-width: 0; } @media (min-width: 48rem) { .sb-columns-2 { grid-template-columns: repeat(2, 1fr); } .sb-columns-3 { grid-template-columns: repeat(3, 1fr); } } /* Hero */ .sb-hero { padding: 4rem 0; text-align: center; } .sb-hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; } /* Feature / testimonial / pricing cards */ .sb-card { border: 1px solid var(--sb-border); border-radius: var(--sb-radius); padding: 1.75rem; background: var(--sb-surface); } .sb-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: color-mix(in srgb, var(--sb-accent) 14%, transparent); color: var(--sb-accent); margin-bottom: 1rem; font-size: 1.1rem; } .sb-testimonial-quote { font-size: 1.02rem; color: var(--sb-text); margin: 0 0 1rem; } .sb-testimonial-author { font-weight: 700; font-size: 0.9rem; } .sb-testimonial-role { font-size: 0.82rem; color: var(--sb-muted); } .sb-stars { color: #f59e0b; letter-spacing: 0.1em; margin-bottom: 0.5rem; } /* Pricing */ .sb-price-card { text-align: center; display: flex; flex-direction: column; } .sb-price-card.sb-price-featured { border-color: var(--sb-accent); box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--sb-accent) 60%, transparent); } .sb-price-value { font-size: 2.25rem; font-weight: 800; margin: 0.5rem 0; color: var(--sb-text); } .sb-price-period { font-size: 0.85rem; color: var(--sb-muted); font-weight: 500; } .sb-price-features { list-style: none; margin: 1.25rem 0; padding: 0; text-align: left; color: var(--sb-muted); font-size: 0.9rem; } .sb-price-features li { padding: 0.35rem 0; } /* FAQ (native details/summary, no JS needed) */ .sb-faq-item { border-bottom: 1px solid var(--sb-border); padding: 1rem 0; } .sb-faq-item summary { cursor: pointer; font-weight: 600; color: var(--sb-text); list-style: none; } .sb-faq-item summary::-webkit-details-marker { display: none; } .sb-faq-item summary::after { content: "+"; float: right; color: var(--sb-accent); font-weight: 700; } .sb-faq-item[open] summary::after { content: "\2212"; } .sb-faq-item p { margin: 0.75rem 0 0; color: var(--sb-muted); } /* Call-to-action band */ .sb-cta { background: var(--sb-primary); color: #fff; border-radius: var(--sb-radius); padding: 3rem 2rem; text-align: center; } .sb-cta .sb-h2 { color: #fff; } .sb-cta .sb-text { color: color-mix(in srgb, #fff 78%, transparent); } .sb-cta .sb-btn-primary { background: #fff; color: var(--sb-primary); } /* Footer */ .sb-footer { border-top: 1px solid var(--sb-border); padding: 2.5rem 0; color: var(--sb-muted); font-size: 0.85rem; } .sb-footer-inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; } .sb-footer a { color: var(--sb-muted); } /* Forms (used by static form fields and the 'form' dynamic block) */ .sb-form { display: flex; flex-direction: column; gap: 1rem; max-width: 32rem; } .sb-form-label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--sb-text); } .sb-input { min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--sb-border); border-radius: 0.5rem; font: 400 0.95rem/1.4 var(--sb-font); color: var(--sb-text); background: var(--sb-surface); } .sb-textarea { min-height: 96px; padding: 0.65rem 0.9rem; resize: vertical; } .sb-form-success { padding: 1.25rem; border-radius: var(--sb-radius); background: color-mix(in srgb, var(--sb-accent) 12%, transparent); color: var(--sb-text); font-weight: 600; } /* Embeds (booking iframe, map) */ .sb-embed { border-radius: var(--sb-radius); overflow: hidden; border: 1px solid var(--sb-border); } .sb-embed iframe { display: block; } /* Countdown */ .sb-countdown { display: inline-flex; gap: 0.5rem; align-items: baseline; font-weight: 700; font-size: 1.3rem; color: var(--sb-text); } .sb-countdown span { font-variant-numeric: tabular-nums; } /* Editor-only placeholder for a dynamic block that has not rendered yet (only ever seen inside the builder canvas -- BlockHydrator always replaces the real data-scale-block element before a page is served). */ .sb-block-placeholder { display: block; padding: 1.25rem; border: 2px dashed var(--sb-border); border-radius: var(--sb-radius); text-align: center; color: var(--sb-muted); font-weight: 600; background: color-mix(in srgb, var(--sb-primary) 3%, transparent); } /* product_grid / membership_plans (AppCommerce) */ .sb-product-card { display: flex; flex-direction: column; } .sb-product-card .sb-btn { margin-top: auto; align-self: flex-start; } .sb-product-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--sb-radius); margin-bottom: 1rem; } .sb-product-price { font-weight: 700; font-size: 1.15rem; color: var(--sb-text); margin: 0.5rem 0; } .sb-product-trial { display: inline-block; font-size: 0.78rem; font-weight: 600; color: var(--sb-accent); margin-bottom: 0.75rem; } /* course_catalog / course_card (AppLms) */ .sb-course-card { display: flex; flex-direction: column; } .sb-course-card .sb-btn { margin-top: auto; align-self: flex-start; } .sb-course-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--sb-radius); margin-bottom: 1rem; } /* Light/dark appearance toggle (settings.appearance_toggle -- see TenantSitePublicController::injectAppearanceToggle()). Fixed bottom-right, same corner and z-index family as the platform's own .scale-site-login control; that control's own lift script measures any other fixed bottom-right element at least 40px wide and raises itself above it, so the two never overlap without either one knowing about the other. */ .sb-appearance-toggle { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 2147483000; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--sb-border); background: var(--sb-surface); color: var(--sb-text); font-size: 1.1rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); } .sb-appearance-toggle:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; } @media print { .sb-appearance-toggle { display: none; } } /* --------------------------------------------------------------------- Members area (Modules\AppLms\Members) --------------------------------------------------------------------- The standalone course library a buyer signs into, served at /m/{site-slug}/... on the platform host and /members/... on a tenant's verified custom domain. Appended at the END of this file on purpose: everything above is the page-builder's own vocabulary and must keep its exact cascade position, so the members area only ever ADDS rules and never re-declares one. It reuses the same five --sb-* tokens, so a tenant's palette and typeface carry straight through. Mobile-first: every multi-column rule below is inside a min-width query. */ .sb-members-body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .sb-members-bar { border-bottom: 1px solid var(--sb-border); background: var(--sb-soft); } .sb-members-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; width: 100%; max-width: 72rem; margin: 0 auto; padding: 0.85rem 1.25rem; } .sb-members-brand { font-weight: 700; font-size: 1.05rem; color: var(--sb-text); text-decoration: none; } .sb-members-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; } .sb-members-identity { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; color: var(--sb-muted); } .sb-members-signout { margin: 0; } .sb-members-link { font-size: 0.9rem; font-weight: 600; color: var(--sb-accent); text-decoration: none; } .sb-members-link:hover { text-decoration: underline; } .sb-members-link-button { min-height: 44px; padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; } .sb-members-main { flex: 1 0 auto; padding: 2rem 0 3rem; } .sb-members-breadcrumb { margin: 0 0 1rem; } .sb-members-meta { font-size: 0.85rem; color: var(--sb-muted); margin: 0.5rem 0 1.5rem; } .sb-members-notice { margin: 0 0 1.5rem; padding: 0.9rem 1.1rem; border-radius: var(--sb-radius); background: color-mix(in srgb, var(--sb-accent) 12%, transparent); color: var(--sb-text); font-weight: 600; } .sb-members-error { margin: 0 0 1rem; padding: 0.9rem 1.1rem; border-radius: var(--sb-radius); background: color-mix(in srgb, #dc2626 12%, transparent); color: #991b1b; font-weight: 600; } .sb-members-card { border: 1px solid var(--sb-border); border-radius: var(--sb-radius); padding: 1.5rem; margin: 0 0 1.5rem; background: var(--sb-surface); } .sb-members-card-narrow { max-width: 30rem; margin-inline: auto; } .sb-members-form { margin-top: 1.25rem; } .sb-members-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 48rem) { .sb-members-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { .sb-members-grid { grid-template-columns: repeat(3, 1fr); } } .sb-members-course-card { display: block; border: 1px solid var(--sb-border); border-radius: var(--sb-radius); padding: 1.5rem; background: var(--sb-surface); color: var(--sb-text); text-decoration: none; } .sb-members-course-card:hover { border-color: var(--sb-accent); } .sb-members-course-excerpt { color: var(--sb-muted); font-size: 0.92rem; margin: 0 0 1rem; } .sb-members-progress { display: block; height: 0.5rem; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--sb-primary) 12%, transparent); } .sb-members-progress-wide { margin-top: 1.25rem; } .sb-members-progress-fill { display: block; height: 100%; background: var(--sb-accent); } .sb-members-lessons { list-style: none; margin: 1rem 0 0; padding: 0; } .sb-members-lesson { border-top: 1px solid var(--sb-border); } .sb-members-lesson:first-child { border-top: 0; } .sb-members-lesson-link { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.35rem 1rem; min-height: 44px; padding: 0.75rem 0; color: var(--sb-text); text-decoration: none; } .sb-members-lesson-title { font-weight: 600; } .sb-members-lesson-state { font-size: 0.8rem; color: var(--sb-muted); } .sb-members-lesson-locked .sb-members-lesson-link { opacity: 0.6; cursor: not-allowed; } a.sb-members-lesson-link:hover .sb-members-lesson-title { color: var(--sb-accent); } .sb-members-video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; margin: 0 0 1.5rem; border-radius: var(--sb-radius); overflow: hidden; background: #000; } .sb-members-video iframe, .sb-members-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .sb-members-lesson-body { color: var(--sb-text); max-width: 65ch; margin: 0 0 2rem; } .sb-members-lesson-body a { color: var(--sb-accent); word-break: break-word; } .sb-members-lesson-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--sb-border); } .sb-members-pager { display: flex; flex-wrap: wrap; gap: 1.25rem; } .sb-members-done { font-weight: 600; color: var(--sb-accent); } .sb-members-footer { border-top: 1px solid var(--sb-border); padding: 1.5rem 0; } .sb-members-footer-text { margin: 0; font-size: 0.82rem; color: var(--sb-muted); } /* --------------------------------------------------------------------- * Blocks added with the 2026-09 builder UX pass. Same rules as the rest * of this file: framework-free, custom-property driven, mobile-first. * ------------------------------------------------------------------- */ /* Spacer (sizes are chosen with the Spacer block's Size trait) */ .sb-spacer { width: 100%; } /* Image + Text */ .sb-media-text { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: center; padding: 2rem 1.25rem; max-width: 72rem; margin: 0 auto; } .sb-media-text-media img { width: 100%; border-radius: var(--sb-radius); } .sb-media-text-body .sb-text { margin-bottom: 1.25rem; } @media (min-width: 48rem) { .sb-media-text { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } /* Gallery */ .sb-gallery { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; } .sb-gallery-item { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sb-radius); } @media (min-width: 48rem) { .sb-gallery { grid-template-columns: repeat(3, 1fr); } } /* Logo bar */ .sb-logobar-title { text-align: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-muted); margin: 0 0 1rem; } .sb-logobar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 2.5rem; } .sb-logobar-item { max-height: 3rem; width: auto; opacity: 0.72; } /* Icon list */ .sb-icon-list { list-style: none; margin: 0 auto; padding: 0; max-width: 44rem; } .sb-icon-list-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.45rem 0; color: var(--sb-text); } .sb-icon-list-mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: color-mix(in srgb, var(--sb-accent) 16%, transparent); color: var(--sb-accent); font-size: 0.85rem; font-weight: 700; } /* Contact info */ .sb-contact-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; } .sb-contact-item { display: flex; flex-direction: column; gap: 0.2rem; } .sb-contact-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sb-muted); } .sb-contact-value { color: var(--sb-text); font-weight: 600; text-decoration: none; } @media (min-width: 48rem) { .sb-contact-info { grid-template-columns: repeat(3, 1fr); } } /* Social links */ .sb-social { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; } .sb-social-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border: 1px solid var(--sb-border); border-radius: 999px; color: var(--sb-text); text-decoration: none; font-size: 0.85rem; font-weight: 600; } .sb-social-link:hover { border-color: var(--sb-accent); color: var(--sb-accent); } /* Video (the sb-video component type) -- responsive 16:9 box */ .sb-video { position: relative; width: 100%; max-width: 64rem; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--sb-radius); overflow: hidden; background: #000; } .sb-video > iframe, .sb-video > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: contain; } /* Embed (the sb-embed component type) -- height comes from its trait */ .sb-embed-frame { position: relative; width: 100%; max-width: 72rem; margin: 0 auto; min-height: 240px; } .sb-embed-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* Background media (set from the visual builder's Design panel). A cover video or image sits behind a section's content. */ .sb-has-bg-media { position: relative; } .sb-has-bg-media > .sb-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; } .sb-has-bg-media > :not(.sb-bg-video) { position: relative; z-index: 1; } /* ===================================================================== * "Nova" front-end kit (2026-09 platform front-page parity pass) * --------------------------------------------------------------------- * Appended at the END on purpose and STRICTLY ADDITIVE: every selector * below is a NEW class name, so no existing tenant page changes by a * single pixel. The platform's own seeded pages (the five HTML files in * modules/AppPlatformSite/Resources/pages) are the first consumer, but * the vocabulary is generic and any tenant page can opt in. * * New neutral tokens get their light values in the :root rule below and * their dark values in the two rules after it, mirroring exactly how the * pre-existing --sb-surface/--sb-header-bg/... neutrals are themed near * the top of this file. They are declared here rather than inside those * earlier blocks so the original rules stay byte-for-byte unchanged. * ================================================================== */ :root { --sb-nav-bg: rgba(255, 255, 255, 0.82); --sb-nav-border: rgba(15, 23, 42, 0.10); --sb-nav-active-bg: rgba(79, 70, 229, 0.10); --sb-pill-bg: rgba(79, 70, 229, 0.07); --sb-pill-border: rgba(79, 70, 229, 0.20); --sb-nova-bg: #ffffff; --sb-nova-border: rgba(15, 23, 42, 0.10); --sb-outline-border: rgba(15, 23, 42, 0.18); --sb-outline-text: #0f172a; } html[data-sb-theme="dark"] { --sb-nav-bg: rgba(10, 13, 28, 0.72); --sb-nav-border: rgba(255, 255, 255, 0.08); --sb-nav-active-bg: rgba(255, 255, 255, 0.08); --sb-pill-bg: rgba(139, 92, 246, 0.12); --sb-pill-border: rgba(255, 255, 255, 0.10); --sb-nova-bg: rgba(255, 255, 255, 0.03); --sb-nova-border: rgba(255, 255, 255, 0.08); --sb-outline-border: rgba(255, 255, 255, 0.22); --sb-outline-text: #f8fafc; } @media (prefers-color-scheme: dark) { html[data-sb-appearance="auto"]:not([data-sb-theme="light"]) { --sb-nav-bg: rgba(10, 13, 28, 0.72); --sb-nav-border: rgba(255, 255, 255, 0.08); --sb-nav-active-bg: rgba(255, 255, 255, 0.08); --sb-pill-bg: rgba(139, 92, 246, 0.12); --sb-pill-border: rgba(255, 255, 255, 0.10); --sb-nova-bg: rgba(255, 255, 255, 0.03); --sb-nova-border: rgba(255, 255, 255, 0.08); --sb-outline-border: rgba(255, 255, 255, 0.22); --sb-outline-text: #f8fafc; } } /* The platform header hides its guest-only CTA server-side for a signed-in visitor (TenantSitePublicController::applyAuthLinks()). The UA sheet's [hidden]{display:none} loses to .sb-btn{display:inline-flex}, so the page builder's own vocabulary has to restate it. */ .sb-page [hidden] { display: none !important; } /* Floating "pill" navigation bar -------------------------------------- A rounded, inset, translucent bar: brand mark, centred links, then the appearance control and the CTA. Wraps to a stacked layout on a phone without any media query (flex-wrap plus a centred link row). */ .sb-navbar { padding: 1.25rem 1rem 0; } .sb-navbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1rem; width: 100%; max-width: 76rem; margin: 0 auto; padding: 0.5rem 0.65rem; border: 1px solid var(--sb-nav-border); border-radius: 999px; background: var(--sb-nav-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .sb-brandmark { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: linear-gradient(135deg, #8b5cf6 0%, #4f46e5 52%, #22d3ee 100%); color: #fff; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; } .sb-navlinks { display: flex; flex: 1 1 18rem; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.15rem; } .sb-navlinks a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.85rem; border-radius: 999px; color: var(--sb-muted); font-size: 0.92rem; font-weight: 500; text-decoration: none; } .sb-navlinks a:hover { color: var(--sb-text); } .sb-navlinks a.is-active { background: var(--sb-nav-active-bg); color: var(--sb-text); font-weight: 600; } .sb-navbar-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; } .sb-nav-btn { min-height: 38px; padding: 0 1.15rem; font-size: 0.88rem; } /* Inline appearance control (the element carrying data-sb-appearance-slot; TenantSitePublicController::injectAppearanceToggle() fills it with one sun and one moon button instead of the fixed bottom-right toggle). */ .sb-appearance-inline { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.2rem; border: 1px solid var(--sb-nav-border); border-radius: 999px; background: var(--sb-soft); } .sb-appearance-mode { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--sb-muted); font-family: inherit; font-size: 0.95rem; line-height: 1; cursor: pointer; } .sb-appearance-mode.is-active { background: var(--sb-nav-active-bg); color: var(--sb-text); } .sb-appearance-mode:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; } /* Hero ---------------------------------------------------------------- */ .sb-hero-xl { padding: 4.5rem 0 3.5rem; text-align: center; } .sb-pill-eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; /* Long eyebrow copy must wrap inside the pill, not push the page wider than a phone viewport. */ max-width: 100%; text-align: center; gap: 0.55rem; margin: 0 0 1.75rem; padding: 0.45rem 1.15rem; border: 1px solid var(--sb-pill-border); border-radius: 999px; background: var(--sb-pill-bg); color: var(--sb-text); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .sb-pill-eyebrow-mark { color: var(--sb-accent); font-size: 0.85rem; letter-spacing: 0; } /* Bigger, tighter hero headline. A modifier on .sb-h1 so the base heading colour and margins keep coming from the rule that ships. */ .sb-h1.sb-display { /* The lower bound has to fit a ~400px phone: the longest word in the platform's own headline is "Everything" and 2rem keeps it inside the container's gutters. */ font-size: clamp(2rem, 7.2vw, 4.5rem); font-weight: 800; line-height: 1.03; letter-spacing: -0.035em; overflow-wrap: break-word; } /* One headline line per row. Not scoped to .sb-display: the inner pages use the plain .sb-h1 size (their copy is longer and the display size wrapped it into four ragged rows) with the same two-line split. */ .sb-h1 .sb-line { display: block; } /* The gradient treatment was previously reachable only as `.sb-h1.sb-gradient-text`; a two-line headline needs it on the inner , so the same declarations are restated selector-free. Identical output for the pre-existing combined selector. */ .sb-gradient-text { background: var(--sb-heading-gradient, var(--sb-primary)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .sb-lead-xl { font-size: 1.12rem; max-width: 46rem; margin: 0 auto; color: var(--sb-muted); } /* Stats row (deliberately NOT cards -- the original front page shows a plain number + uppercase label row under the hero). */ .sb-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem clamp(1.5rem, 6vw, 3.5rem); margin-top: 3rem; } .sb-stat { min-width: 7rem; text-align: center; } .sb-stat-value { display: block; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--sb-text); } .sb-stat-label { display: block; margin-top: 0.6rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sb-muted); } /* Buttons ------------------------------------------------------------- .sb-btn-ghost is the outlined secondary the original uses: a faint neutral border that reads correctly on both the dark and the light page background, where .sb-btn-outline's --sb-primary border does not. */ .sb-btn-ghost { background: transparent; border-color: var(--sb-outline-border); color: var(--sb-outline-text); } .sb-btn-ghost:hover { border-color: var(--sb-accent); color: var(--sb-accent); } /* A button that is an was losing its own text colour to `.sb-page a { color: var(--sb-accent) }` (same specificity, declared earlier but on a MORE specific selector), so every filled CTA on a generated page rendered with accent-coloured text on an accent-ish fill instead of the white this file has always intended -- see the comment on .sb-btn-primary above. Restated at a winning specificity for the filled variants only; .sb-btn-outline is left alone, since a transparent button reads fine in the accent colour. The .sb-cta band inverts its primary button (white fill, primary text) and has to win back over the first rule here. */ .sb-page a.sb-btn-primary, .sb-page a.sb-btn-accent { color: #fff; } .sb-page .sb-cta a.sb-btn-primary { color: var(--sb-primary); } .sb-page a.sb-btn-ghost { color: var(--sb-outline-text); } .sb-page a.sb-btn-ghost:hover { color: var(--sb-accent); } /* Translucent "nova" surface for capability/pricing cards. Layered over .sb-card, which it deliberately overrides (same specificity, later in the file) so `class="sb-card sb-nova"` reads as an upgrade. */ .sb-nova { border: 1px solid var(--sb-nova-border); border-radius: 1.25rem; background: var(--sb-nova-bg); padding: 1.75rem; } /* Generous section rhythm for the platform's long marketing pages. */ .sb-section-xl { padding: 5rem 0; } /* Brand mark can be an image (the platform site uses the round HS logo). */ .sb-brandmark img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .sb-brandmark:has(img) { background: #fff; box-shadow: 0 0 0 2px rgba(139,92,246,.35); padding: 2px; } /* Long-form text (legal pages, articles) rendered inside a section. */ .sb-prose { color: var(--sb-text); line-height: 1.75; font-size: 1.02rem; } .sb-prose h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; } .sb-prose h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; } .sb-prose p, .sb-prose ul, .sb-prose ol { margin: 0 0 1rem; } .sb-prose ul, .sb-prose ol { padding-left: 1.4rem; } .sb-prose a { color: var(--sb-accent); } .sb-prose strong { color: var(--sb-text); }