@import url('https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@600;700;800;900&family=Archivo:wght@600;700;800;900&family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ========================================================================== Sentinel Imports — site.css Brand-skinned components layered on top of the existing Bootstrap theme. All custom classes are prefixed `si-`. Brand (from logo): navy #062642, teal #11B7BD, white #FFFFFF. Font: Inter. ========================================================================== */ :root { --si-navy: #062642; --si-navy-deep: #021B30; --si-teal: #11B7BD; --si-teal-light: #4CC9D0; --si-teal-dark: #07818A; --si-primary: #11B7BD; /* teal accent (buttons, links, icons) */ --si-primary-dark: #0C9AA0; --si-primary-rgb: 17, 183, 189; /* accent as rgb, for tints */ --si-purple: #041b2f; /* legacy var name — now navy (gradient start / pill) */ --si-grad: linear-gradient(135deg, #041b2f 0%, #0a5f74 55%, #11B7BD 100%); /* navy → teal */ --si-ink: #041b2f; /* dark section background (deeper navy for teal contrast) */ --si-ink-rgb: 4, 27, 47; /* dark section as rgb, for image overlays */ --si-ink-soft: #0e3355; /* cards on dark */ --si-ink-border: rgba(255, 255, 255, 0.14); --si-text: #1c2b3a; --si-muted: #556172; --si-muted-light: #8b98a8; --si-bg-soft: #f3f7f9; --si-border: #e1e8ee; --si-radius: 10px; --si-shadow: 0 10px 30px rgba(6, 38, 71, 0.10); } body { color: var(--si-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; min-width: 0; } /* min-width:0 lets the flex item shrink so children wrap to the viewport */ /* Headlines in Archivo Expanded (800) for stronger presence; body/UI stays Inter. Falls back to regular Archivo, then Inter, if Expanded fails to load. */ .si-hero h1, .si-headline, .si-cta h2, .si-doc h1, .si-confirm h2, .si-stat-num, .si-single-title, .sb-pagehead h1 { font-family: 'Archivo Expanded', 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.01em; } img { max-width: 100%; height: auto; } /* The base Bootstrap theme still colours every link with the old brand blue (#4582EC). Override globally so stray links (legal pages, modal copy) are on-brand. Uses the darker teal: the bright accent is only ~2.5:1 on white, which fails WCAG AA for body text, while #07818A clears 4.5:1. Components that set their own link colour are unaffected. */ a { color: var(--si-teal-dark); } a:hover { color: var(--si-primary-dark); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .si-btn { display: inline-block; font-weight: 600; font-size: 15px; line-height: 1; padding: 14px 28px; border-radius: 6px; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease; } .si-btn:hover { transform: translateY(-1px); text-decoration: none; } .si-btn-primary { background: var(--si-primary); color: #fff; font-weight: 700; box-shadow: 0 6px 18px rgba(var(--si-primary-rgb), 0.38); } .si-btn-primary:hover { background: var(--si-primary-dark); color: #fff; box-shadow: 0 12px 26px rgba(var(--si-primary-rgb), 0.55); } .si-btn-light { background: #fff; color: var(--si-ink); box-shadow: 0 6px 18px rgba(2, 15, 30, 0.22); } .si-btn-light:hover { background: #eef2f8; color: var(--si-ink); box-shadow: 0 12px 26px rgba(2, 15, 30, 0.30); } .si-btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); } .si-btn-outline-light:hover { background: rgba(255,255,255,.1); color: #fff; } .si-btn-dark { background: var(--si-ink); color: #fff; } .si-btn-dark:hover { background: #11161f; color: #fff; } .si-btn-sm { padding: 9px 18px; font-size: 13px; } .si-btn-block { display: block; width: 100%; text-align: center; } /* -------------------------------------------------------------------------- Navbar (extends theme .navbar) -------------------------------------------------------------------------- */ .si-nav .nav-link { color: #d8deea !important; font-size: 14px; } .si-nav .nav-link:hover { color: #fff !important; } .si-nav .navbar-nav { align-items: lg-center; } .si-nav .si-nav-ctas { display: flex; gap: 10px; align-items: center; margin-left: 18px; } @media (max-width: 991.98px) { .si-nav .si-nav-ctas { margin: 12px 0 4px; } .si-nav .si-nav-ctas .si-btn { flex: 1; text-align: center; } } /* Floating header: fixed, detached rounded bar with translucent blur */ .navbar-container { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; padding: 14px 16px 0; pointer-events: none; /* clicks pass through the side gutters to content beneath */ } .si-floating { pointer-events: auto; max-width: 1180px; margin: 0 auto; border-radius: 14px; background: rgba(18, 23, 34, 0.72); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.10); } .si-floating .navbar { padding-top: 10px; padding-bottom: 10px; } @media (max-width: 991.98px) { /* more opaque so the expanded mobile menu stays readable */ .si-floating { background: rgba(18, 23, 34, 0.94); } } /* -------------------------------------------------------------------------- Generic section scaffolding -------------------------------------------------------------------------- */ .si-section { padding: 72px 0; } .si-section--soft { background: var(--si-bg-soft); } .si-section--dark { background: var(--si-ink); color: #cdd5e1; } .si-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--si-primary); margin-bottom: 10px; } .si-section--dark .si-label { color: var(--si-teal-light); } .si-headline { font-size: clamp(24px, 3vw, 30px); font-weight: 800; color: var(--si-ink); margin-bottom: 14px; } .si-section--dark .si-headline { color: #fff; } .si-sub { font-size: 16px; line-height: 1.75; color: var(--si-muted); max-width: 640px; margin-bottom: 36px; } .si-sub-wide { max-width: none; } /* About intro spans full width to match the stats bar */ .si-section--dark .si-sub { color: #aab4c4; } .si-pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--si-primary); background: rgba(var(--si-primary-rgb), 0.10); border: 1px solid rgba(var(--si-primary-rgb), 0.28); border-radius: 20px; padding: 5px 14px; margin-bottom: 16px; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .si-hero { color: #fff; position: relative; overflow: hidden; min-height: 600px; display: flex; align-items: center; padding: 120px 0 72px; background-image: linear-gradient(90deg, rgba(var(--si-ink-rgb),0.94) 0%, rgba(var(--si-ink-rgb),0.80) 45%, rgba(var(--si-ink-rgb),0.42) 100%), url('ship_bg.jpg'); background-size: cover; background-position: center; } .si-hero .container { position: relative; z-index: 1; } .si-hero-content { max-width: 660px; } .si-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--si-teal-light); margin-bottom: 18px; } .si-hero h1 { font-size: clamp(27px, 4.6vw, 46px); font-weight: 800; line-height: 1.12; margin-bottom: 22px; color: #fff; } .si-hero h1 .nowrap { white-space: nowrap; } .si-hero-proof { display: inline-flex; align-items: center; gap: 10px; color: var(--si-teal-light); font-weight: 600; font-size: 15px; font-style: italic; margin: -4px 0 22px; } .si-hero-proof::before { content: ""; width: 26px; height: 2px; background: var(--si-teal); border-radius: 2px; flex-shrink: 0; } @media (max-width: 767.98px) { .si-hero { min-height: 520px; text-align: left; background-image: linear-gradient(rgba(var(--si-ink-rgb),0.88), rgba(var(--si-ink-rgb),0.80)), url('ship_bg.jpg'); } /* Archivo Expanded is wide — let the headline & proof tag wrap so nothing clips on phones */ .si-hero h1 .nowrap { white-space: normal; } .si-hero-proof { display: flex; } } .si-hero-lead { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.92); margin-bottom: 24px; } .si-hero-expand { font-size: 14px; color: rgba(255,255,255,0.9); border-top: 1px solid rgba(255,255,255,0.22); padding-top: 18px; margin-bottom: 28px; } .si-hero-expand strong { color: #fff; } .si-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; } .si-hero-media { border-radius: 14px; overflow: hidden; border: 1px solid var(--si-ink-border); box-shadow: 0 24px 60px rgba(0,0,0,.45); aspect-ratio: 4 / 3; background: #11161f; } .si-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* -------------------------------------------------------------------------- Stats band -------------------------------------------------------------------------- */ .si-stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--si-ink); border-radius: var(--si-radius); overflow: hidden; margin-bottom: 40px; } .si-stat { text-align: center; padding: 30px 16px; border-right: 1px solid var(--si-ink-border); } .si-stat:last-child { border-right: 0; } .si-stat-num { font-size: 40px; font-weight: 800; line-height: 1; color: var(--si-teal-light); } .si-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.92); margin-top: 10px; } .si-stat-note { font-size: 12px; color: rgba(255,255,255,0.65); margin-top: 6px; } /* -------------------------------------------------------------------------- Cards (trust / generic) -------------------------------------------------------------------------- */ .si-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .si-card { margin: 0; /* neutralize theme's `article + article { margin-top: 3rem }` so grid cards align + stretch equally */ background: #fff; border: 1px solid var(--si-border); border-top: 3px solid var(--si-primary); border-radius: var(--si-radius); padding: 28px; box-shadow: var(--si-shadow); } .si-card-icon { width: 46px; height: 46px; border-radius: 10px; background: rgba(var(--si-primary-rgb), 0.12); color: var(--si-primary); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; } .si-card h3 { font-size: 17px; font-weight: 700; color: var(--si-ink); margin-bottom: 10px; } .si-card p { font-size: 14px; line-height: 1.7; color: var(--si-muted); margin-bottom: 0; } .si-molecules { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; margin: 12px 0 6px; } .si-molecules span { font-size: 13px; color: var(--si-text); padding: 4px 0; border-bottom: 1px solid #eef1f5; } .si-see-more { font-size: 13px; font-weight: 600; color: var(--si-primary); text-decoration: none; } .si-see-more:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- How it works — steps -------------------------------------------------------------------------- */ .si-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .si-steps { display: flex; flex-direction: column; gap: 22px; } .si-step { display: flex; gap: 16px; align-items: flex-start; } .si-step-num { width: 34px; height: 34px; border-radius: 50%; background: var(--si-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .si-step h4 { font-size: 15px; font-weight: 700; color: var(--si-ink); margin-bottom: 4px; } .si-step p { font-size: 14px; color: var(--si-muted); line-height: 1.6; margin: 0; } /* -------------------------------------------------------------------------- Sample report "browser" frame + chart -------------------------------------------------------------------------- */ .si-frame { background: #fff; border: 1px solid var(--si-border); border-radius: var(--si-radius); overflow: hidden; box-shadow: var(--si-shadow); } .si-frame-bar { background: #eef1f5; padding: 10px 16px; display: flex; align-items: center; gap: 6px; } .si-dot { width: 10px; height: 10px; border-radius: 50%; background: #c4ccd6; } .si-frame-bar span { font-size: 11px; color: #7b8696; margin-left: 8px; } .si-frame-body { padding: 20px 24px; } .si-frame-title { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--si-ink); } .si-frame-meta { font-size: 11px; color: var(--si-muted-light); margin-bottom: 16px; } .si-chart { display: flex; gap: 6px; align-items: flex-end; height: 120px; margin-bottom: 8px; } .si-chart .grp { display: flex; gap: 3px; align-items: flex-end; flex: 1; height: 100%; } /* height:100% gives bars a definite parent so their % heights render */ .si-chart .bar { flex: 1; border-radius: 2px 2px 0 0; } .si-chart .bar.prev { background: #c4ccd6; } .si-chart .bar.curr { background: var(--si-primary); } .si-chart-x { display: flex; justify-content: space-around; margin-bottom: 12px; } .si-chart-x span { font-size: 10px; color: var(--si-muted-light); } .si-legend { display: flex; gap: 16px; align-items: center; padding-top: 10px; border-top: 1px solid #eef1f5; } .si-legend span { font-size: 10px; color: var(--si-muted); display: flex; align-items: center; gap: 5px; } .si-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } /* Swatches share the bar colours so the legend can never drift from the chart */ .si-legend i.prev { background: #c4ccd6; } .si-legend i.curr { background: var(--si-primary); } .si-legend .muted { margin-left: auto; color: var(--si-muted-light); } /* -------------------------------------------------------------------------- Feature grid (what's in every report) -------------------------------------------------------------------------- */ .si-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--si-border); border-radius: var(--si-radius); overflow: hidden; } .si-feature { background: #fff; padding: 28px; } .si-feature .si-card-icon { margin-bottom: 14px; } .si-feature h4 { font-size: 15px; font-weight: 700; color: var(--si-ink); margin-bottom: 6px; } .si-feature p { font-size: 13px; line-height: 1.7; color: var(--si-muted); margin: 0; } .si-ast { color: var(--si-primary); font-weight: 700; } /* Footnote tied to the asterisked feature above (CIF coverage caveat) */ /* No max-width: the sentence is long and should sit on one line at desktop widths. It still wraps naturally on narrower screens. */ .si-disclaimer { font-size: 12.5px; line-height: 1.7; color: var(--si-muted-light); font-style: italic; margin: 18px 0 0; } .si-disclaimer a { color: var(--si-teal-dark); text-decoration: underline; } /* -------------------------------------------------------------------------- PricePulse -------------------------------------------------------------------------- */ .si-bullets { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; } .si-bullets li { position: relative; padding-left: 22px; font-size: 14px; color: var(--si-text); line-height: 1.6; } .si-bullets li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--si-primary); } .si-map { background: var(--si-ink); border-radius: var(--si-radius); height: 240px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 16px; } .si-map .si-map-inner { text-align: center; color: #8b97a8; } .si-map .si-map-inner .ic { font-size: 44px; opacity: .6; } .si-map .si-map-inner small { display: block; font-size: 10px; margin-top: 4px; } .si-map-tag { position: absolute; left: 14px; bottom: 14px; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; background: rgba(2, 27, 48, 0.6); border: 1px solid rgba(255, 255, 255, 0.18); padding: 5px 12px; border-radius: 6px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .si-price-float { position: absolute; background: #fff; border-radius: 8px; padding: 10px 14px; box-shadow: 0 8px 22px rgba(0,0,0,.3); } .si-price-float.tl { top: 18px; left: 18px; } .si-price-float.br { bottom: 18px; right: 18px; } .si-price-float .lbl { font-size: 10px; color: var(--si-muted); } .si-price-float .val { font-size: 16px; font-weight: 800; color: var(--si-ink); } .si-up { color: #1c9d5b; font-weight: 600; font-size: 10px; } .si-down { color: #d64545; font-weight: 600; font-size: 10px; } .si-price-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--si-border); border-radius: var(--si-radius); overflow: hidden; } .si-price-table caption { caption-side: top; text-align: left; background: var(--si-bg-soft); padding: 10px 16px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--si-muted); } .si-price-table th { font-size: 11px; color: var(--si-muted); text-align: left; padding: 8px 16px; border-bottom: 1px solid var(--si-border); font-weight: 600; } .si-price-table th.num, .si-price-table td.num { text-align: right; } .si-price-table td { font-size: 13px; color: var(--si-text); padding: 8px 16px; border-bottom: 1px solid #eef1f5; } .si-price-foot { font-size: 11px; color: var(--si-muted-light); padding: 8px 16px; } /* -------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------- */ .si-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .si-quote { background: var(--si-ink-soft); border: 1px solid var(--si-ink-border); border-radius: var(--si-radius); padding: 28px 24px; display: flex; flex-direction: column; } .si-quote p { font-size: 15px; line-height: 1.7; color: #dfe5ee; font-style: italic; margin-bottom: 22px; flex: 1; } .si-quote-person { display: flex; align-items: center; gap: 14px; } .si-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--si-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .si-quote-author { font-size: 14px; font-weight: 700; color: #fff; } .si-quote-title { font-size: 12px; color: #93a0b3; } .si-quote-note { font-size: 11px; color: #7d899b; text-align: left; font-style: italic; margin-top: 28px; } /* -------------------------------------------------------------------------- CTA band -------------------------------------------------------------------------- */ .si-cta { background: var(--si-grad); color: #fff; text-align: center; padding: 76px 0; } .si-cta h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: #fff; margin-bottom: 14px; } .si-cta p { color: rgba(255,255,255,.9); font-size: 16px; max-width: 520px; margin: 0 auto 32px; } .si-cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .si-footer { background: #11161f; color: #8893a3; padding: 34px 0; font-size: 13px; } .si-footer a { color: #aab4c4; text-decoration: none; } .si-footer a:hover { color: #fff; } .si-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .si-footer-links a { margin-left: 22px; } @media (max-width: 575.98px) { .si-footer-links a { margin: 0 14px 0 0; } } /* -------------------------------------------------------------------------- Demo page -------------------------------------------------------------------------- */ .si-demo { background: var(--si-grad); color: #fff; padding: 112px 0 64px; } .si-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: flex-start; } .si-tag { display: inline-block; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; font-size: 11px; padding: 5px 14px; border-radius: 20px; margin-bottom: 20px; } .si-demo h1 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 18px; } .si-demo-lead { font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, 0.9); margin-bottom: 30px; } .si-check-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 14px; } .si-check-list { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; } .si-check-list li { position: relative; padding-left: 26px; font-size: 14px; color: rgba(255, 255, 255, 0.9); line-height: 1.6; } .si-check-list li .icon-check { position: absolute; left: 0; top: 2px; color: #fff; } .si-check-list li strong { color: #fff; } .si-trusted-title { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 14px; } .si-badges { display: flex; flex-wrap: wrap; gap: 10px; } .si-badge { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 7px 14px; border-radius: 4px; } .si-demo-trust { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--si-ink-border); color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.6; font-style: italic; } /* form card */ .si-form-card { background: #fff; border-radius: 12px; padding: 32px; box-shadow: 0 18px 50px rgba(0,0,0,.3); color: var(--si-text); } .si-form-card h2 { font-size: 18px; font-weight: 700; color: var(--si-ink); margin-bottom: 22px; } .si-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .si-field label { font-size: 13px; font-weight: 600; color: var(--si-muted); } .si-field label .req { color: var(--si-primary); } .si-field input, .si-field select, .si-field textarea { border: 1px solid var(--si-border); border-radius: 6px; padding: 10px 12px; font-size: 14px; color: var(--si-text); background: #fbfcfe; width: 100%; font-family: inherit; } .si-field input:focus, .si-field select:focus, .si-field textarea:focus { outline: none; border-color: var(--si-primary); box-shadow: 0 0 0 3px rgba(69,130,236,.15); background: #fff; } .si-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .si-consent { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 4px; } .si-consent label { font-size: 12px; color: var(--si-muted); line-height: 1.5; } .si-form-note { font-size: 12px; color: var(--si-muted-light); text-align: center; margin-top: 12px; } .si-form-error { display: none; background: #fdecec; border: 1px solid #f5c2c2; color: #b42318; font-size: 13px; border-radius: 6px; padding: 10px 12px; margin-top: 12px; } /* honeypot */ .si-hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; width: 0; } /* in-place confirmation (brand-skinned, layout per client screenshot) */ .si-confirm { display: none; background: #fff; border-radius: 12px; padding: 44px 40px; box-shadow: 0 18px 50px rgba(0,0,0,.3); position: relative; overflow: hidden; } .si-confirm::before { content: ""; position: absolute; top: 0; right: 0; width: 140px; height: 70px; background: var(--si-grad); clip-path: polygon(100% 0, 0 0, 100% 100%); } .si-confirm-badge { width: 76px; height: 76px; border-radius: 50%; background: var(--si-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34px; margin-bottom: 26px; box-shadow: 0 8px 22px rgba(69,130,236,.35); } .si-confirm h2 { font-size: 26px; font-weight: 800; color: var(--si-ink); margin-bottom: 18px; } .si-confirm p { font-size: 15px; line-height: 1.7; color: var(--si-muted); margin-bottom: 14px; } .si-confirm a:not(.si-btn) { color: var(--si-primary); font-weight: 600; } /* -------------------------------------------------------------------------- Placeholder pages (privacy / terms / thanks) -------------------------------------------------------------------------- */ .si-doc { padding: 124px 0 80px; min-height: 60vh; } .si-doc h1 { font-size: 34px; font-weight: 800; color: var(--si-ink); margin-bottom: 8px; } .si-doc .si-doc-meta { color: var(--si-muted-light); font-size: 13px; margin-bottom: 28px; } .si-doc p { color: var(--si-muted); line-height: 1.8; } /* Client-supplied legal content (Privacy Policy) keeps its own inline styling; constrain width for readability */ .si-legal { max-width: 840px; } .si-legal h1 { font-family: 'Archivo Expanded', 'Archivo', 'Inter', sans-serif; color: var(--si-ink); margin-bottom: 6px; } .si-legal a { word-break: break-word; } .si-legal ul { padding-left: 22px; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .si-hero-grid, .si-split, .si-demo-grid { grid-template-columns: 1fr; gap: 36px; } .si-hero-media { order: -1; aspect-ratio: 16 / 9; } .si-card-grid, .si-features, .si-quotes { grid-template-columns: repeat(2, 1fr); } /* .si-stats stays 3-across down to phone width, then stacks (below). 3 items never split evenly into 2 columns, so we skip the 2-col step. */ } @media (max-width: 575.98px) { .si-section { padding: 52px 0; } .si-card-grid, .si-features, .si-quotes, .si-row2, .si-molecules { grid-template-columns: 1fr; } .si-stats { grid-template-columns: 1fr; } .si-stat { border-right: 0; border-bottom: 1px solid var(--si-ink-border); } .si-stat:last-child { border-bottom: 0; } .si-features { gap: 12px; background: transparent; } .si-feature { border: 1px solid var(--si-border); border-radius: var(--si-radius); } .si-hero { padding: 60px 0; } .si-confirm { padding: 32px 24px; } } /* ========================================================================== Icons — the bundled entypo webfont files (assets/fonts/*) were never shipped, so the glyphs render as empty boxes. We override the `icon-*` classes to paint self-contained inline-SVG masks instead: no font dependency, scales with font-size, inherits currentColor. Markup stays ``. ========================================================================== */ i[class^="icon-"]::before, i[class*=" icon-"]::before { content: "" !important; } i[class^="icon-"], i[class*=" icon-"] { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .navbar-toggler { color: #fff; } .icon-menu { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .icon-check { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .icon-database { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .icon-flower { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .icon-mail { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .icon-bar-graph { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .icon-price-tag { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .icon-line-graph { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .icon-list { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .icon-flow-parallel { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .icon-cog { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .icon-map { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }