/* ========================================================================== Case Study Pages — Nautilus Techlabs Load order: combined.min.css -> blog.css -> case-study.css Body: Extracted from the ai-buddy microsite prototype and generalised for anonymized (descriptor-only) case studies. No client names, no screenshots, no store links: identity is carried by sector, scale and evidence tier instead. ========================================================================== */ /* ----- Token aliases ------------------------------------------------------- blog.css owns the --brand / --heading / --body / --border family in a global :root, and combined.min.css owns the --primary / --text- / --surface- family. Alias both with literal fallbacks so this file still renders correctly on its own if the load order ever changes. (Do not write a bare asterisk-slash inside these comments when abbreviating a token family: it closes the comment early and takes the next rule with it.) */ .cs-page { --cs-brand: var(--brand, var(--primary, #5479EE)); --cs-brand-light: var(--brand-light, #EEF2FD); --cs-brand-dark: var(--brand-dark, var(--primary-dark, #3D5CC8)); --cs-heading: var(--heading, var(--text-heading, #30303C)); --cs-body: var(--body, var(--text-body, #52525D)); --cs-body-light: var(--body-light, var(--text-muted, #6E6E7A)); --cs-bg: var(--bg, var(--surface-white, #FFFFFF)); --cs-bg-light: var(--bg-light, var(--surface-light, #F8F9FC)); --cs-border: var(--border, var(--border-light, #E8EAF0)); --cs-border-strong: var(--border-medium, rgba(84, 121, 238, 0.15)); --cs-green: var(--green, #16A34A); --cs-amber: var(--amber, #D97706); /* Poppins for display, Roboto for reading — per canonical/brand.md. */ --cs-hf: 'Poppins', sans-serif; --cs-bf: 'Roboto', sans-serif; --cs-radius-md: var(--radius-md, 14px); --cs-radius-lg: var(--radius-lg, 20px); --cs-radius-full: var(--radius-full, 100px); --cs-ease-out: var(--ease-out, cubic-bezier(0.16, 0.84, 0.44, 0.98)); --hf: 'Poppins', sans-serif; --bf: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif; color: var(--cs-body); } .cs-hl { color: var(--cs-brand); } /* The header CTA is deliberately NOT restyled here. This file used to force an outlined pill "to match the live site", and at the time that was true — but what it was matching was index.html's inline critical-CSS block, a snapshot of the pre-revamp header that overrode combined.min.css. That block is gone, so the revamp's own .ree-btn-grdt2 (solid --primary, white label) now governs the header on every page, and this override would put case-study pages back out of step with the other two. Leave the header to combined.min.css. */ /* ===== HERO ============================================================== */ /* minmax() rather than a hard 460px: the SVG mockup is fluid, and a fixed column overflows around 1080px — before the 1024px stacking breakpoint fires. */ .cs-hero { max-width: 1200px; margin: 0 auto; padding: 44px 24px 8px; display: grid; grid-template-columns: 1fr minmax(320px, 460px); gap: 48px; align-items: center; position: relative; } /* Decorative glow. `right` must stay >= 0: a negative value extends the scrollable area 80px past the viewport on every width, and the hero can't be clipped to hide it without also cutting the mockup's drop shadow. The gradient's core sits at 70% 30% of this box, so keeping it flush right looks the same. */ .cs-hero::before { content: ""; position: absolute; top: -60px; right: 0; width: 520px; height: 420px; background: radial-gradient(60% 60% at 70% 30%, rgba(84, 121, 238, 0.22), rgba(84, 121, 238, 0) 70%); z-index: 0; pointer-events: none; } .cs-hero > * { position: relative; z-index: 1; } .cs-hero-title { font-family: var(--cs-hf); font-size: 42px; font-weight: 700; line-height: 1.16; color: var(--cs-heading); margin: 14px 0 18px; } .cs-hero-sub { font-size: 18px; line-height: 1.7; color: var(--cs-body-light); margin-bottom: 26px; } .cs-store-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .cs-store-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: var(--cs-radius-full); font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; } .cs-store-btn.primary { background: var(--cs-brand); color: #fff; box-shadow: 0 12px 26px -12px rgba(84, 121, 238, 0.7); } .cs-store-btn.primary:hover { color: #fff; transform: translateY(-2px); } .cs-store-btn.ghost { background: transparent; color: var(--cs-brand); border: 1.5px solid var(--cs-border); } .cs-store-btn.ghost:hover { border-color: var(--cs-brand); } /* ===== IDENTITY BLOCK (new) ============================================== Replaces the client logo/name. The descriptor is the stable phrase reused verbatim in every sentence, on every surface. */ .cs-identity { margin: 0 0 20px; } .cs-descriptor { font-family: var(--cs-hf); font-size: 15px; line-height: 1.6; color: var(--cs-body-light); margin: 0 0 12px; } .cs-descriptor b { color: var(--cs-heading); font-weight: 700; } .cs-descriptor .cs-withheld { display: inline-block; font-size: 13px; color: var(--cs-body-light); opacity: .85; border-left: 2px solid var(--cs-border); margin-left: 8px; padding-left: 8px; } .cs-identity-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; } .cs-identity-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--cs-radius-full); background: var(--cs-brand-light); color: var(--cs-brand); font-family: var(--cs-hf); font-size: 13px; font-weight: 600; letter-spacing: .2px; line-height: 1.4; white-space: nowrap; } .cs-identity-chip i { font-size: 12px; opacity: .85; } .cs-identity-chip.is-muted { background: var(--cs-bg-light); color: var(--cs-body-light); border: 1px solid var(--cs-border); } /* ===== ABSTRACT DEVICE MOCKUP (new) ====================================== Inline SVG, zero assets, zero network requests. Blocked-out shapes stand in for layout — never a screenshot, never client branding. Per-study variation comes from data-variant (screen content), data-accent (palette) and the arrangement chosen in markup. */ .cs-mockup { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px; --mk-1: var(--cs-brand); --mk-2: var(--cs-brand-dark); --mk-3: var(--cs-brand-light); --mk-chassis: #243043; --mk-screen: #fff; --mk-ink: #E3E8F4; } .cs-mockup[data-accent="deep"] { --mk-1: #3D5CC8; --mk-2: #2A428F; --mk-3: #E4EAFB; } .cs-mockup[data-accent="light"] { --mk-1: #7B99F3; --mk-2: #5479EE; --mk-3: #F1F5FE; } .cs-mockup[data-accent="ink"] { --mk-1: #0f172a; --mk-2: #334155; --mk-3: #E8EAF0; --mk-chassis: #0f172a; } .cs-mockup svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 26px 40px rgba(84, 121, 238, 0.28)); } .mk-chassis { fill: var(--mk-chassis); } .mk-screen { fill: var(--mk-screen); } .mk-notch, .mk-homebar { fill: var(--mk-chassis); opacity: .85; } .mk-a { fill: var(--mk-1); } .mk-b { fill: var(--mk-2); } .mk-c { fill: var(--mk-3); } .mk-ink { fill: var(--mk-ink); } .mk-line { fill: none; stroke: var(--mk-1); stroke-width: 2; stroke-linecap: round; } .mk-halo { fill: var(--mk-1); opacity: .08; } /* IMPORTANT: .mk-float must sit on its OWN , nested inside the that carries the positioning transform attribute. A CSS transform replaces an SVG transform="" attribute outright rather than composing with it, so putting both on one element snaps the group back to the origin. */ .cs-mockup .mk-float { transform-origin: center; } @media (prefers-reduced-motion: no-preference) { .cs-mockup .mk-float { animation: mkFloat 7s var(--cs-ease-out) infinite alternate; } @keyframes mkFloat { to { transform: translateY(-12px); } } } /* ===== FACT BAR ========================================================== auto-fit, not repeat(5, 1fr): scale/region/timeframe are optional and omit their tile entirely rather than rendering "unknown", so the count is 3-7. Known tradeoff: a collapsed trailing track still contributes its gap, so at some widths ~22px goes unused on the right (reads as slightly wider panel padding). The flex alternative removes that but stretches the last row's tiles to fill — at 900px one tile becomes ~780px wide, which is far more visible than 22px of slack. Equal tiles win. */ .cs-factbar { max-width: 1200px; margin: 30px auto 0; padding: 0 24px; } .cs-factbar-inner { background: var(--cs-bg-light); border: 1px solid var(--cs-border); border-radius: 16px; padding: 26px 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; } .cs-fact-label { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--cs-body-light); font-weight: 600; margin-bottom: 6px; } .cs-fact-value { font-size: 15px; color: var(--cs-heading); font-weight: 600; line-height: 1.5; } /* ===== LAYOUT + SECTIONS ================================================= */ .cs-wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; } .cs-section { padding: 54px 0 0; scroll-margin-top: 100px; } /* fixed 85px header eats anchors */ .cs-eyebrow { display: inline-block; color: var(--cs-brand); font-family: var(--cs-hf); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 14px; position: relative; padding-bottom: 12px; } .cs-eyebrow::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 44px; height: 2px; background: var(--cs-brand); border-radius: 2px; } .cs-section h2 { font-family: var(--cs-hf); font-size: 30px; font-weight: 700; color: var(--cs-heading); line-height: 1.25; margin-bottom: 18px; } /* Section headers centered like the marketing site; body copy stays left. */ .cs-section > .cs-eyebrow, .cs-section > h2 { display: block; text-align: center; } .cs-section > h2 { margin-left: auto; margin-right: auto; max-width: 640px; } .cs-section p { font-size: 17px; line-height: 1.75; color: var(--cs-body); margin-bottom: 16px; } .cs-list { list-style: none; padding: 0; margin: 6px 0 18px; } .cs-list li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.65; color: var(--cs-body); margin-bottom: 12px; } .cs-list li i { position: absolute; left: 0; top: 4px; color: var(--cs-brand); font-size: 15px; } /* ===== PROCESS STEPS ===================================================== */ .cs-steps { margin: 20px 0 0; } .cs-step { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding-bottom: 26px; position: relative; } .cs-step:not(:last-child)::before { content: ""; position: absolute; left: 22px; top: 46px; bottom: 0; width: 2px; background: var(--cs-border); } .cs-step-num { width: 46px; height: 46px; border-radius: 50%; background: var(--cs-brand-light); color: var(--cs-brand); font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; z-index: 1; } .cs-step-body h3 { font-size: 19px; font-weight: 700; color: var(--cs-heading); margin: 8px 0; } .cs-step-body p { font-size: 16px; line-height: 1.7; color: var(--cs-body); margin: 0; } /* ===== FEATURE GRID ====================================================== */ .cs-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 22px; } .cs-feature { background: var(--cs-bg); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); padding: 22px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .cs-feature:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(48, 48, 60, 0.35); border-color: var(--cs-brand); } .cs-feature-ico { width: 44px; height: 44px; border-radius: 11px; background: var(--cs-brand-light); color: var(--cs-brand); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 14px; } .cs-feature h3 { font-size: 17px; font-weight: 700; color: var(--cs-heading); margin-bottom: 7px; } .cs-feature p { font-size: 15px; line-height: 1.6; color: var(--cs-body-light); margin: 0; } /* ===== DECISION BLOCK (new) ============================================== The default approach -> why it fails here -> what we did instead. Generalises the "Why React Native, not Flutter" / "Why BLoC" sections. */ .cs-decision { border: 1px solid var(--cs-border); border-left: 4px solid var(--cs-brand); border-radius: 0 var(--cs-radius-md) var(--cs-radius-md) 0; background: var(--cs-bg-light); padding: 24px 28px; margin-top: 22px; } .cs-decision h3 { font-family: var(--cs-hf); font-size: 19px; font-weight: 700; color: var(--cs-heading); margin: 0 0 12px; } .cs-decision p { font-size: 16px; line-height: 1.7; margin-bottom: 12px; } .cs-decision p:last-child { margin-bottom: 0; } .cs-decision-label { display: inline-block; font-family: var(--cs-hf); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--cs-brand); margin-bottom: 4px; } /* ===== TECH STACK ======================================================== */ .cs-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 26px; margin-top: 18px; } .cs-stack-item { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed var(--cs-border); } .cs-stack-name { font-family: var(--cs-hf); font-weight: 700; color: var(--cs-heading); font-size: 15px; } .cs-stack-why { font-size: 15px; color: var(--cs-body-light); line-height: 1.55; } /* ===== METRIC TILES ====================================================== */ .cs-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; } .cs-metric { background: linear-gradient(160deg, var(--cs-brand-light), var(--cs-bg)); border: 1px solid var(--cs-border); border-radius: 16px; padding: 24px 20px; text-align: center; } .cs-metric-num { font-family: var(--cs-hf); font-size: 34px; font-weight: 800; color: var(--cs-brand); line-height: 1; margin-bottom: 8px; } .cs-metric-label { font-size: 14px; color: var(--cs-body); line-height: 1.45; } /* Build-fact variant: dashed, to read as "verifiable from the delivered app" rather than "measured client outcome". This is the common case — there is no recorded outcome metric for most engagements, and inventing one is forbidden. */ .cs-metrics--build .cs-metric { background: var(--cs-bg-light); border-style: dashed; border-color: var(--cs-border-strong); } .cs-metrics--build .cs-metric-num { color: var(--cs-brand-dark); } .cs-metrics-note { margin-top: 14px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--cs-body-light); font-style: italic; } /* ===== EVIDENCE STRIP (new) ============================================== The credibility mechanism that replaces the client name: every claim is tagged with how it can be checked. */ .cs-evidence { background: var(--cs-bg-light); border: 1px solid var(--cs-border); border-radius: 16px; padding: 24px 28px; margin-top: 22px; } .cs-evidence-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .cs-evidence-head i { color: var(--cs-brand); font-size: 15px; } .cs-evidence-head h3 { font-family: var(--cs-hf); font-size: 16px; font-weight: 700; color: var(--cs-heading); margin: 0; } /* Tier column is auto-sized: the chip labels differ in length ("Publicly verifiable" vs "From our delivery record") and a fixed width lets the longest one overflow into the proof column. */ .cs-evidence-row { display: grid; grid-template-columns: 1fr auto 150px; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed var(--cs-border); } .cs-evidence-row:last-child { border-bottom: 0; padding-bottom: 0; } .cs-evidence-claim { font-size: 15px; line-height: 1.55; color: var(--cs-body); } .cs-evidence-proof a { font-size: 14px; font-weight: 600; color: var(--cs-brand); } .cs-evidence-proof span { font-size: 14px; color: var(--cs-body-light); } .cs-tier { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--cs-radius-full); font-family: var(--cs-hf); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; } .cs-tier--public { background: #F0FDF4; color: var(--cs-green); border: 1px solid rgba(22, 163, 74, 0.25); } .cs-tier--record { background: var(--cs-brand-light); color: var(--cs-brand); border: 1px solid rgba(84, 121, 238, 0.25); } .cs-tier--none { background: var(--cs-bg); color: var(--cs-body-light); border: 1px solid var(--cs-border); } /* ===== DISCLOSURE (new) ================================================== "What we can't show". Naming the omission turns a gap into a professionalism signal — and is honest in a way that blurring a screenshot is not. */ .cs-disclosure { position: relative; margin-top: 26px; padding: 20px 24px 20px 58px; background: var(--cs-bg-light); border: 1px dashed var(--cs-border-strong); border-radius: var(--cs-radius-md); } .cs-disclosure::before { content: "\f070"; /* eye-slash — declared in the glyph block below */ font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 23px; top: 21px; color: var(--cs-body-light); font-size: 16px; opacity: .75; } .cs-disclosure h4 { font-family: var(--cs-hf); font-size: 15px; font-weight: 700; color: var(--cs-heading); margin: 0 0 7px; } .cs-disclosure p { font-size: 15px; line-height: 1.65; color: var(--cs-body-light); margin: 0 0 8px; } .cs-disclosure ul { margin: 0; padding: 0; list-style: none; } .cs-disclosure li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.6; color: var(--cs-body-light); margin-bottom: 5px; } .cs-disclosure li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--cs-body-light); opacity: .5; } /* ===== QUOTE ============================================================= */ .cs-quote { background: var(--cs-bg-light); border-left: 4px solid var(--cs-brand); border-radius: 0 var(--cs-radius-md) var(--cs-radius-md) 0; padding: 26px 30px; margin-top: 24px; } .cs-quote p { font-size: 19px; line-height: 1.65; color: var(--cs-heading); font-style: italic; margin-bottom: 16px; } .cs-quote-by { display: flex; align-items: center; gap: 14px; } .cs-quote-by b { color: var(--cs-heading); font-size: 15px; } .cs-quote-by span { display: block; color: var(--cs-body-light); font-size: 13px; } /* Anonymous attribution: a CSS-drawn silhouette, so no avatar asset is needed and no real person is pictured. Attribution is role + sector, never a name. */ .cs-quote--anon .cs-quote-by::before { content: ""; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background-color: var(--cs-brand-light); border: 1px solid var(--cs-border); background-image: radial-gradient(circle at 50% 35%, var(--cs-brand) 0 21%, transparent 22%), radial-gradient(ellipse 62% 46% at 50% 100%, var(--cs-brand) 0 99%, transparent 100%); opacity: .5; } .cs-quote--anon .cs-quote-by b { font-weight: 700; } .cs-quote--anon .cs-quote-by span { font-style: normal; } /* ===== CTA + CLOSING ===================================================== */ .cs-cta { max-width: 1000px; margin: 60px auto 0; padding: 44px 40px; background: linear-gradient(135deg, var(--cs-brand), var(--cs-brand-dark)); border-radius: 22px; text-align: center; color: #fff; } .cs-cta h2 { font-family: var(--cs-hf); font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 12px; } .cs-cta p { font-size: 17px; color: rgba(255, 255, 255, 0.9); margin: 0 auto 24px; max-width: 620px; } .cs-cta .cs-store-btn.primary { background: #fff; color: var(--cs-brand); } .cs-cta .cs-store-btn.ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); } .cs-cta .cs-store-btn.ghost:hover { border-color: #fff; } .cs-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .cs-closing { max-width: 820px; margin: 40px auto 70px; padding: 0 24px; text-align: center; } .cs-closing a { font-weight: 600; } /* ===== LISTING PAGE ====================================================== */ .cs-listing-hero { max-width: 1200px; margin: 0 auto; padding: 46px 24px 8px; text-align: center; } .cs-listing-hero h1 { font-family: var(--cs-hf); font-size: 40px; font-weight: 700; color: var(--cs-heading); line-height: 1.18; margin: 12px 0 16px; } .cs-listing-hero p { font-size: 18px; line-height: 1.7; color: var(--cs-body-light); max-width: 720px; margin: 0 auto; } .cs-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 1000px; margin: 30px auto 0; padding: 0 24px; } .cs-filter-chip { appearance: none; border: 1px solid var(--cs-border); background: var(--cs-bg); color: var(--cs-body-light); font-family: var(--cs-hf); font-size: 13px; font-weight: 600; letter-spacing: .2px; padding: 8px 18px; border-radius: var(--cs-radius-full); cursor: pointer; transition: all .2s ease; } .cs-filter-chip:hover { border-color: var(--cs-brand); color: var(--cs-brand); } .cs-filter-chip.is-active { background: var(--cs-brand); border-color: var(--cs-brand); color: #fff; box-shadow: 0 6px 16px -8px rgba(84, 121, 238, 0.8); } .cs-card { display: block; height: 100%; background: var(--cs-bg); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); overflow: hidden; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .cs-card:hover { transform: translateY(-4px); border-color: var(--cs-brand); box-shadow: 0 22px 46px -28px rgba(48, 48, 60, 0.45); } .cs-card-art { background: var(--cs-bg-light); border-bottom: 1px solid var(--cs-border); padding: 18px 18px 0; } .cs-card-art .cs-mockup { padding: 0; } .cs-card-art .cs-mockup svg { filter: drop-shadow(0 14px 22px rgba(84, 121, 238, 0.22)); } .cs-card-body { padding: 22px 24px 24px; } .cs-card-sector { display: inline-block; font-family: var(--cs-hf); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--cs-brand); background: var(--cs-brand-light); padding: 4px 12px; border-radius: var(--cs-radius-full); margin-bottom: 12px; } .cs-card h3 { font-family: var(--cs-hf); font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--cs-heading); margin: 0 0 10px; } .cs-card-desc { font-size: 15px; line-height: 1.6; color: var(--cs-body-light); margin: 0 0 16px; } .cs-card-desc b { color: var(--cs-heading); font-weight: 600; } .cs-card-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding-top: 14px; border-top: 1px solid var(--cs-border); font-size: 13px; color: var(--cs-body-light); } .cs-card-meta > span { display: inline-flex; align-items: center; gap: 6px; } .cs-card-meta i { color: var(--cs-brand); font-size: 12px; } .cs-empty { display: none; text-align: center; padding: 60px 24px; color: var(--cs-body-light); font-size: 16px; } .cs-empty.is-visible { display: block; } /* Company-level proof. Never per-study: a specific store or review link paired with a specific case study is exactly what breaks anonymity. */ .cs-proofstrip { max-width: 1000px; margin: 44px auto 0; padding: 22px 28px; background: var(--cs-bg-light); border: 1px solid var(--cs-border); border-radius: 16px; display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center; align-items: center; } .cs-proofstrip span, .cs-proofstrip a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--cs-body); } .cs-proofstrip a { color: var(--cs-brand); } .cs-proofstrip i { color: var(--cs-green); font-size: 13px; } /* ===== RESPONSIVE ======================================================== */ /* The hero stacks earlier (1024px) than the rest of the page (900px) so the two-column split never has to squeeze the h1 into a narrow well — below 1024px it's single-column full-width instead. */ @media (max-width: 1024px) { .cs-hero { grid-template-columns: 1fr; gap: 28px; padding-top: 30px; } .cs-mockup { order: -1; max-width: 460px; margin: 0 auto; } .cs-hero-title { font-size: 34px; } } @media (max-width: 900px) { .cs-feature-grid, .cs-stack { grid-template-columns: 1fr; } .cs-metrics { grid-template-columns: repeat(2, 1fr); } .cs-hero-title { font-size: 30px; } .cs-listing-hero h1 { font-size: 30px; } .cs-evidence-row { grid-template-columns: 1fr; gap: 6px; } .cs-evidence-proof { margin-top: 2px; } } @media (max-width: 520px) { .cs-factbar-inner { grid-template-columns: 1fr; } .cs-metrics { grid-template-columns: 1fr; } .cs-stack-item { grid-template-columns: 1fr; gap: 2px; } .cs-cta { padding: 32px 22px; } .cs-disclosure { padding-left: 24px; } .cs-disclosure::before { position: static; display: block; margin-bottom: 8px; } } /* ===== FONT AWESOME GLYPHS =============================================== combined.min.css ships a tree-shaken Font Awesome — verified that fa-check-circle, fa-store, fa-shield-alt, fa-eye-slash, fa-mobile-alt and fa-layer-group all have zero glyph rules there. The base .fas/.fab rules and the webfonts do load, so these only supply the missing glyph content. */ .fa-check-circle::before { content: "\f058"; } .fa-shield-alt::before { content: "\f3ed"; } .fa-store::before { content: "\f54e"; } .fa-eye-slash::before { content: "\f070"; } .fa-layer-group::before { content: "\f5fd"; } .fa-external-link-alt::before { content: "\f35d"; } .fa-mobile-alt::before { content: "\f3cd"; } .fa-map-marker-alt::before { content: "\f3c5"; } .fa-calendar-alt::before { content: "\f073"; } .fa-users::before { content: "\f0c0"; } .fa-bolt::before { content: "\f0e7"; } .fa-quote-left::before { content: "\f10d"; } .fa-industry::before { content: "\f275"; } .fa-code-branch::before { content: "\f126"; } .fa-lightbulb::before { content: "\f0eb"; } .fa-lock::before { content: "\f023"; } .fa-sync-alt::before { content: "\f2f1"; } .fa-chart-line::before { content: "\f201"; } .fa-arrow-right::before { content: "\f061"; }