/* * sbt-theme.css * Struck by Travel — Custom Theme * Companion stylesheet for Bootstrap 5 * Import Google Fonts in your BS Studio project settings or add to * Fonts: Playfair Display (400,600,700,italic) + DM Sans (300,400,500,600) + Cormorant Garamond (300,400,italic) */ /* ============================================================ 1. BRAND TOKENS ============================================================ */ :root { --sbt-navy: #015394; --sbt-navy-dk: #012d55; --sbt-navy-rgb: 1, 83, 148; --sbt-orange: #F38227; --sbt-orange-dk: #d96e18; --sbt-orange-rgb: 243, 130, 39; --sbt-text: #2d2d2d; --sbt-muted: #6b7280; --sbt-light: #f4f7fc; --sbt-border: #dde3ef; --sbt-shadow: 0 4px 24px rgba(1, 83, 148, 0.10); --sbt-shadow-lg: 0 12px 48px rgba(1, 83, 148, 0.16); --sbt-radius: 12px; --sbt-radius-sm: 7px; --bs-primary: #015394; --bs-body-color: #2d2d2d; --bs-border-color: #dde3ef; --bs-border-radius: 12px; } /* ============================================================ 2. TYPOGRAPHY ============================================================ */ body { font-family: 'DM Sans', system-ui, sans-serif; color: var(--sbt-text); line-height: 1.7; font-size: 16px; overflow-x: hidden; } h1, h2, h3, .sbt-serif { font-family: 'Playfair Display', Georgia, serif; line-height: 1.2; } h4, h5, h6 { font-family: 'DM Sans', system-ui, sans-serif; } em.sbt-italic { font-style: italic; font-weight: 400; opacity: 0.88; } .sbt-cormorant { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 300; } .sbt-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--sbt-orange); display: block; margin-bottom: 12px; } .sbt-lead-italic { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; font-style: italic; font-weight: 300; color: var(--sbt-muted); line-height: 1.65; border-left: 3px solid var(--sbt-orange); padding-left: 20px; } /* ============================================================ 3. LAYOUT UTILITIES ============================================================ */ .sbt-section { padding: 96px 0; } .sbt-section-sm { padding: 64px 0; } .sbt-section-alt { background-color: var(--sbt-light); } /* Override Bootstrap container max-width to match design */ .container-xl { max-width: 1200px; } @media (min-width: 1200px) { .container-xl { max-width: 1200px; } } /* ============================================================ 4. NAVIGATION (.sbt-navbar) BS Studio: Navbar component, dark variant, fixed-top TWO USAGE PATTERNS: ───────────────────────────────────────────────────────────── A) HOMEPAGE (transparent → solid on scroll):