/* One stylesheet for every client. Per-client theming comes only from the CSS custom properties the builder writes into each page's from the Root fields — never a per-client CSS build. */ :root { --sb-primary: #6933d3; --sb-accent: #c4b5fd; --sb-ink: #0f172a; --sb-muted: #64748b; --sb-surface: #ffffff; --sb-surface-alt: #f3f4f6; --sb-border: rgba(15, 23, 42, 0.08); --sb-maxw: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--sb-ink); background: var(--sb-surface); line-height: 1.6; } img { max-width: 100%; display: block; } .sb-btn { display: inline-block; padding: 0.7rem 1.4rem; border-radius: 8px; font-weight: 600; text-decoration: none; } .sb-btn--primary { background: var(--sb-primary); color: #fff; } /* Hero */ .sb-hero { display: grid; gap: 2.5rem; align-items: center; max-width: var(--sb-maxw); margin: 0 auto; padding: 4rem 1.5rem; } .sb-hero--center { text-align: center; } .sb-hero:has(.sb-hero__media) { grid-template-columns: 1fr 1fr; } .sb-hero--center:has(.sb-hero__media) { grid-template-columns: 1fr; } .sb-hero__title { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; margin: 0 0 1rem; } .sb-hero__subtitle { font-size: 1.2rem; color: var(--sb-muted); margin: 0 0 1.75rem; } .sb-hero__img { width: 100%; border-radius: 16px; } /* Text section */ .sb-text { max-width: var(--sb-maxw); margin: 0 auto; padding: 3rem 1.5rem; } .sb-text--center { text-align: center; } .sb-text__heading { font-size: 1.9rem; margin: 0 0 1rem; } .sb-text__body { color: var(--sb-muted); white-space: pre-line; margin: 0; } /* Card grid */ .sb-cards { max-width: var(--sb-maxw); margin: 0 auto; padding: 3rem 1.5rem; } .sb-cards__heading { font-size: 1.9rem; text-align: center; margin: 0 0 2rem; } .sb-cards__grid { display: grid; gap: 1.25rem; } .sb-cards__grid--2 { grid-template-columns: repeat(2, 1fr); } .sb-cards__grid--3 { grid-template-columns: repeat(3, 1fr); } .sb-cards__grid--4 { grid-template-columns: repeat(4, 1fr); } .sb-card { background: var(--sb-surface-alt); border: 1px solid var(--sb-border); border-radius: 14px; padding: 1.5rem; } .sb-card__icon { font-size: 1.75rem; margin-bottom: 0.5rem; } .sb-card__title { margin: 0 0 0.4rem; font-size: 1.15rem; } .sb-card__text { margin: 0; color: var(--sb-muted); } /* Footer */ .sb-footer { background: var(--sb-ink); color: #e5e7eb; margin-top: 2rem; } .sb-footer__grid { max-width: var(--sb-maxw); margin: 0 auto; padding: 3rem 1.5rem 1.5rem; display: grid; gap: 1.5rem; grid-template-columns: 2fr 1fr 1fr; } .sb-footer__about { color: #9ca3af; margin: 0; } .sb-footer__links { display: flex; flex-direction: column; gap: 0.4rem; } .sb-footer__link { color: #e5e7eb; text-decoration: none; } .sb-footer__contact { color: #9ca3af; display: flex; flex-direction: column; gap: 0.3rem; } .sb-footer__copy { max-width: var(--sb-maxw); margin: 0 auto; padding: 1rem 1.5rem 2.5rem; color: #6b7280; font-size: 0.9rem; } @media (max-width: 800px) { .sb-hero:has(.sb-hero__media), .sb-cards__grid--2, .sb-cards__grid--3, .sb-cards__grid--4, .sb-footer__grid { grid-template-columns: 1fr; } }