/* =================================================== earthity site styles — page-level only. Design system rules live in public/earthity-design-system. Brand fonts (Manrope, IBM Plex Sans) are loaded via @font-face in earthity-tokens.css — linked from the page before this stylesheet. =================================================== */ /* =================================================== SOLUTIONS CAROUSEL --------------------------------------------------- Stack-style carousel of 9 industry cards. Active card sits in front; remaining cards peek to the right in a fanned stack. Each card is a large area with title + copy overlaid on the bottom (no overlay background). Carousel extends past the section's right padding to the page edge. =================================================== */ .solutions-carousel { width: 100%; } .solutions-carousel-controls { display: flex; gap: 4px; flex-shrink: 0; } .solutions-carousel-btn { width: 48px; height: 48px; background: #ffffff; border: 1.5px solid #161616; cursor: pointer; color: #161616; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-family: inherit; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .solutions-carousel-btn:hover:not(:disabled) { background-color: #f4f4f4; } .solutions-carousel-btn:disabled { border-color: #c6c6c6; color: #c6c6c6; cursor: not-allowed; } .solutions-carousel-stack { position: relative; width: 100%; height: min(540px, 60vh); /* Clip cards to the carousel boundary so the section's right padding stays visible when the viewport shrinks. */ overflow: hidden; } .solutions-card { position: absolute; top: 0; left: 0; width: min(1160px, calc(100vw - 280px)); height: min(540px, 60vh); background: #ffffff; cursor: pointer; } /* Default stacking before JS runs — keeps the carousel visible on first paint with the first card on top. JS overrides via inline styles for navigation. */ .solutions-card:nth-child(1) { transform: translateX(0); z-index: 100; } .solutions-card:nth-child(2) { transform: translateX(40px); z-index: 99; } .solutions-card:nth-child(3) { transform: translateX(80px); z-index: 98; } .solutions-card:nth-child(4) { transform: translateX(120px); z-index: 97; } .solutions-card:nth-child(5) { transform: translateX(160px); z-index: 96; } .solutions-card:nth-child(6) { transform: translateX(200px); z-index: 95; } .solutions-card-image { width: 100%; height: 100%; background: #ffffff; border: 1px solid #161616; display: flex; align-items: center; justify-content: center; } .solutions-card-icon { width: 72px; height: 72px; } .solutions-card-photo { width: 100%; height: 100%; object-fit: cover; display: block; } .solutions-card-info { margin-top: 32px; max-width: 1000px; min-height: 102px; line-height: 1.4; font-family: 'IBM Plex Sans', sans-serif; } .solutions-card-info-title { font-size: 24px; font-weight: 600; color: #161616; } .solutions-card-info-body { font-size: 24px; font-weight: 400; color: #525252; } /* =================================================== FINAL CTA — 3 cards above footer --------------------------------------------------- Flex-column layout pushes the button to the bottom of each card with margin-top: auto, keeping all 3 button centerlines colinear regardless of how text wraps in each card. Font sizes scale with viewport via clamp(). =================================================== */ .grid-3 .wf-card-dark { display: flex; flex-direction: column; } .grid-3 .wf-card-dark .wf-btn-primary { margin-top: auto; font-size: clamp(13px, 1.4vw, 16px); /* All 3 buttons take the width of the longest one so they match across cards, with text centered inside. */ min-width: 200px; justify-content: center; } .grid-3 .wf-card-dark .wf-h3-inv { font-size: clamp(16px, 1.8vw, 22px); } .grid-3 .wf-card-dark .wf-body-inv { font-size: clamp(13px, 1.3vw, 16px); } /* =================================================== TRUST BAND — auto-scrolling carousel with fade edges --------------------------------------------------- Container clips and applies a mask so logos fade in on the left and out on the right. The track holds the logos in a single flex row that scrolls left continuously via JS rAF loop. Drag (mouse or touch) pauses auto-scroll and lets the user pull the track either direction; release resumes auto-scroll. =================================================== */ .trust-band-wrap { background: #ffffff; } .trust-band-section { cursor: grab; user-select: none; -webkit-user-select: none; padding: 48px 0; background: #ffffff; border-top: 1px solid #e0e0e0; } .trust-band-section.is-dragging { cursor: grabbing; } .trust-band { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .trust-track { display: flex; gap: 80px; align-items: center; width: max-content; will-change: transform; } .trust-track img { -webkit-user-drag: none; user-drag: none; } .trust-logo { height: auto; width: auto; /* Bounding box: each logo scales to fit within these bounds while preserving aspect. Box width = logo content width (no min-width padding) so flex gap = edge-to-edge spacing. */ max-height: 32px; max-width: 140px; display: block; object-fit: contain; /* Unify the trust band: grey out colored logos, dim slightly. */ filter: grayscale(100%); opacity: 0.65; transition: opacity 0.2s ease, filter 0.2s ease; } .trust-logo:hover { opacity: 1; filter: grayscale(0%); } /* Smaller variant for logos that visually dominate at the default 32×140 bounding box (typically wide wordmarks). */ .trust-logo--sm { max-height: 24px; max-width: 100px; } /* Larger variant for logos that read small at the default bounding box (typically icon-mark logos). */ .trust-logo--lg { max-height: 48px; max-width: 180px; } /* =================================================== CUSTOMER STORIES — accordion --------------------------------------------------- Vertical list of expandable customer entries on a dark background. Exactly one entry is expanded at a time; the first is open by default. Expand/ collapse animates via CSS max-height. =================================================== */ .customer-stories { padding: 64px 32px; background: #f5f1ea; box-sizing: border-box; } .customer-stories-heading { margin-bottom: 48px; } .customer-stories-list { width: 100%; } .customer-story-bar { display: flex; align-items: center; gap: 16px; width: 100%; padding: 24px 0; background: transparent; border: none; border-bottom: 1px solid #c6c6c6; text-align: left; color: #161616; font-family: inherit; cursor: pointer; } .customer-story-logo { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; } .customer-story-headline { flex: 1; margin: 0; } .customer-story-toggle { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #161616; } .customer-story-toggle-minus { display: none; } .customer-story.is-open .customer-story-toggle-plus { display: none; } .customer-story.is-open .customer-story-toggle-minus { display: block; } .customer-story-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .customer-story.is-open .customer-story-content { max-height: calc(min(480px, 55vh) + 110px); } .customer-story-content-inner { padding: 24px 0 32px; } .customer-story-image { width: 100%; height: min(480px, 55vh); object-fit: cover; display: block; } .customer-story-image--top { object-position: top; } .customer-story-stats { display: flex; align-items: stretch; margin-top: 24px; } .customer-story-stat { display: flex; align-items: baseline; gap: 12px; flex: 1; padding: 0 24px; } .customer-story-stat:first-child { padding-left: 0; } .customer-story-stat:last-child { padding-right: 0; } .customer-story-stat + .customer-story-stat { border-left: 1px solid #c6c6c6; } .customer-story-stat-number { font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 24px; color: #161616; flex-shrink: 0; } .customer-story-stat-label { font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; color: #6f6f6f; } /* =================================================== RESPONSIVE --------------------------------------------------- The base layout assumes a 1440px page. Below that: - Tablet (≤ 1024px): grids collapse, paddings shrink - Mobile (≤ 640px): single column, carousel shows one card at a time Inline styles in HTML are overridden via attribute selectors + !important. =================================================== */ html, body { overflow-x: hidden; } /* ──── Hamburger button + mobile nav menu ──── */ .wf-nav-mobile-trigger { display: none; align-items: stretch; align-self: stretch; /* Extend past the nav's right padding so the hamburger area reaches the right edge of the viewport. */ margin-right: -32px; } .wf-nav-hamburger { /* Padding mirrors the logo's 32/24 padding so hamburger area visually balances the logo area on the opposite side. */ padding: 0 32px; align-self: stretch; background: transparent; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #161616; } .wf-nav-hamburger .hamburger-icon-close { display: none; } .wf-nav-hamburger[aria-expanded="true"] .hamburger-icon { display: none; } .wf-nav-hamburger[aria-expanded="true"] .hamburger-icon-close { display: inline; } .wf-nav-mobile-menu { display: none; position: absolute; top: 49.5px; left: 0; right: 0; background: #ffffff; border-bottom: 1.5px solid #c6c6c6; padding: 12px 0; z-index: 50; flex-direction: column; } .wf-nav-mobile-menu[data-open="true"] { display: flex; } .wf-nav-mobile-link { font-family: 'IBM Plex Sans', sans-serif; font-size: 16px; color: #161616; text-decoration: none; padding: 14px 32px; border-bottom: 1px solid #e0e0e0; } .wf-nav-mobile-link:last-child { border-bottom: none; } .wf-nav-mobile-link.wf-nav-mobile-cta { background: #0f62fe; color: #ffffff; margin-top: 8px; border-bottom: none; } /* ──── Tablet (≤ 1024px) ──── */ @media (max-width: 1024px) { /* Hero two-column grid → single column, globe above text */ .hero { display: flex !important; flex-direction: column-reverse !important; } /* Footer 3-column → single */ .footer__grid { grid-template-columns: 1fr !important; gap: 24px !important; } /* Section paddings ease */ .outpost, .dpi, .final-cta, .solutions { padding: 48px 24px !important; } .hero__copy { padding: 48px 24px !important; } /* Carousel card adapts */ .solutions-card { width: calc(100vw - 48px) !important; max-width: 1160px; } /* Customer stories tighten */ .customer-stories { padding: 48px 24px; min-height: 0; } .customer-story-image { height: 360px; } /* Match max-height to tablet image + padding/stats so transition peak doesn't exceed natural content (= no page expansion). */ .customer-story.is-open .customer-story-content { max-height: 470px; } /* Solutions card-info — reserve worst-case wrap (4 lines @24px) */ .solutions-card-info { min-height: 134px; } /* Hero display heading scales */ .wf-display { font-size: 40px; } /* Outpost section grid (2 cols × 3 rows) — convert to flex column and reorder so each column's items stay together. */ .outpost__grid { display: flex !important; flex-direction: column !important; } .outpost__grid > *:nth-child(1) { order: 1; } .outpost__grid > *:nth-child(3) { order: 2; } .outpost__grid > *:nth-child(5) { order: 3; } .outpost__grid > *:nth-child(2) { order: 4; } .outpost__grid > *:nth-child(4) { order: 5; } .outpost__grid > *:nth-child(6) { order: 6; } /* Center the CTA buttons in the row-3 cells */ .outpost__grid > *:nth-child(5), .outpost__grid > *:nth-child(6) { text-align: center; } /* Footer (mobile/tablet stack): use individual item margins so the logo→Products gap mirrors the subscribe→logo space (96px), but the Products→Company gap is smaller. */ .footer__grid { gap: 0 !important; } .footer__grid > div:nth-child(1) { margin-bottom: 96px; } .footer__grid > div:nth-child(2) { margin-bottom: 24px; } .footer__grid > div { text-align: center; } } /* ──── Mobile (≤ 768px) — hamburger menu kicks in ──── */ @media (max-width: 768px) { /* Hide desktop nav links (preserve divider after logo) and right-side group */ .wf-nav-left > .wf-nav-links { display: none !important; } .wf-nav-right { display: none !important; } /* Show mobile trigger (left divider + hamburger button) */ .wf-nav-mobile-trigger { display: flex; } } /* ──── Final CTA stack — when 3 cards can't fit horizontally ──── */ @media (max-width: 880px) { /* Stack the 3 cards into 1 column once they'd overflow due to button min-width + padding (~264px per card minimum). */ .grid-3 { grid-template-columns: 1fr !important; } .wf-card-dark { text-align: center; } .grid-3 .wf-card-dark .wf-btn-primary { align-self: center; } } /* ──── Mobile (≤ 640px) ──── */ @media (max-width: 640px) { /* Pad smaller, font smaller */ .outpost, .dpi, .final-cta, .solutions { padding: 32px 16px !important; } .hero__copy { padding: 32px 16px !important; } .footer { padding: 0 16px 24px !important; } /* Footer earthity wordmark — scale up to fill the viewport width without wrapping. clamp lower bound covers 320 px screens; upper bound caps at 640 px (last mobile width before tablet rules kick in). */ .footer .footer__logo { font-size: clamp(48px, 15vw, 100px); line-height: 1; letter-spacing: 0.02em; display: inline-block; } /* Symmetric breathing room around the wordmark on mobile. Above the wordmark = .final-cta padding-bottom (32 px). Below the wordmark should match — override the tablet rule's 96 px margin-bottom and the inherited 24 px grid gap so the only gap below the cell is the 32 px margin we set here. Products → Company spacing keeps its own 24 px margin (line 525) so the link columns stay readable. */ .footer__grid { gap: 0 !important; } .footer__grid > div:first-child { margin-bottom: 32px !important; } /* Hero display heading down further */ .wf-display { font-size: 28px !important; line-height: 1.2 !important; } /* Hero buttons stack and center */ .hero__actions { flex-wrap: nowrap !important; gap: 8px !important; justify-content: center !important; } /* Trim button width so both fit one row on common phone widths (≥375). */ .hero__actions .wf-btn-primary, .hero__actions .wf-btn-secondary { padding: 0 14px !important; font-size: 14px !important; white-space: nowrap; } /* Hero globe shrinks (capped by container) */ #rotating-earth { width: 100% !important; max-width: 320px; height: auto !important; } /* Solutions section heading flex stacks; arrows pinned to right */ .solutions__header { flex-direction: column !important; align-items: stretch !important; } #solutions .solutions-carousel-controls { align-self: flex-end; } /* Customer stories: tighter */ .customer-stories { padding: 32px 16px; } .customer-story-bar { padding: 16px 0; gap: 12px; } .customer-story-image { height: 220px; } /* Stats stack vertically */ .customer-story-stats { flex-direction: column; align-items: stretch; gap: 12px; } .customer-story-stat { padding: 0 !important; } .customer-story-stat + .customer-story-stat { border-left: none; border-top: 1px solid #c6c6c6; padding-top: 12px; } /* Tight max-height matched to a fixed content-inner min-height so the section sizes naturally without any min-height waste: - All cards reserve the same content height (440px). - max-height matches, so transitions don't peak. - Section height is just bars + 440 + heading + padding, no padding-bottom waste. */ .customer-story.is-open .customer-story-content { max-height: 440px; } .customer-story.is-open .customer-story-content-inner { min-height: 440px; } .customer-stories { min-height: 0 !important; } /* Carousel: only the active card visible, full-width, stacked layout */ .solutions-carousel-stack { height: auto !important; min-height: 0; } .solutions-card { position: relative !important; transform: none !important; width: 100% !important; max-width: 100%; height: auto !important; aspect-ratio: 1.93 / 1; box-sizing: border-box; display: none; } .solutions-card.is-active { display: block; } /* Default stack overrides for nth-child get unset on mobile */ .solutions-card:nth-child(n) { transform: none !important; z-index: auto !important; } /* Solutions card-info — shrink font, reserve worst-case wrap. 16px × 1.4 line-height × 6 lines ≈ 134px. */ .solutions-card-info-title, .solutions-card-info-body { font-size: 16px; } .solutions-card-info { margin-top: 16px; min-height: 134px; } /* Newsletter row stacks vertically; input goes full width */ .final-cta__newsletter { flex-direction: column !important; gap: 12px !important; } .wf-newsletter-input { width: 100% !important; max-width: 320px; } } /* =================================================== Moved from inline CSS block in index.html (CSP migration, 2026-05-03). =================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } body { background: #e8e8e8; font-family: 'IBM Plex Sans', sans-serif; } /* ── Wireframe primitives ── */ .wf-page { background: #fff; width: 100%; max-width: 1440px; margin: 0 auto; position: relative; overflow: hidden; } /* Nav placeholder — reserves the .wf-nav box height (48px + 1.5px border) so CLS stays at 0 between document parse and partials/nav.js injecting the real markup. Once nav.js runs, the placeholder element is replaced with .wf-nav itself, which carries the same dimensions. */ [data-include="nav"] { display: block; height: 49.5px; } /* Nav */ .wf-nav { height: 48px; border-bottom: 1.5px solid #c6c6c6; display: flex; align-items: center; padding: 0 32px; justify-content: space-between; } .wf-nav-logo { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 18px; color: #161616; text-decoration: none; } .wf-nav-left { display: flex; align-items: stretch; gap: 24px; align-self: stretch; } .wf-nav-right { display: flex; align-items: stretch; align-self: stretch; } .wf-nav-divider { width: 1px; align-self: stretch; background: #c6c6c6; } .wf-nav-left .wf-nav-logo { display: flex; align-items: center; justify-content: center; align-self: stretch; padding: 0 32px; margin: 0 -24px 0 -32px; } .wf-nav-logo-img { display: block; width: 32px; height: 32px; } .wf-nav-left .wf-nav-links { align-items: stretch; } .wf-nav-links { display: flex; gap: 32px; } /* DS-faithful nav link: 2px transparent border-bottom that becomes visible on hover or active, mirroring .eu-nav__link. Sign-in keeps its filled-bg hover via .wf-nav-signin's own rules below. */ .wf-nav-link { display: inline-flex; align-items: center; font-size: 15px; color: #525252; text-decoration: none; border-bottom: 2px solid transparent; transition: color 70ms ease, border-bottom-color 70ms ease; } .wf-nav-link:not(.wf-nav-signin):hover, .wf-nav-link[aria-current="page"] { color: #161616; border-bottom-color: #161616; } .wf-nav-link[aria-current="page"] { font-weight: 600; } .wf-nav-link:focus-visible { outline: 2px solid #0f62fe; outline-offset: -2px; } .wf-nav-cta { background: #0f62fe; color: #fff; font-size: 15px; padding: 0 16px; align-self: stretch; display: flex; align-items: center; margin-left: 12px; text-decoration: none; transition: background-color 0.15s ease; } .wf-nav-cta:hover { background-color: #0353e9; } .wf-nav-cta:active { background-color: #002d9c; } .wf-nav-cta:focus-visible { outline: 2px solid #0f62fe; outline-offset: 2px; } .wf-nav-signin { display: flex; align-items: center; padding: 0 16px; transition: background-color 0.15s ease; } .wf-nav-signin:hover { background-color: #f4f4f4; } .wf-newsletter-input { width: 300px; height: 48px; background: #262626; border: 1px solid #525252; padding: 0 16px; font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; color: #f4f4f4; outline: none; } .wf-newsletter-input::placeholder { color: #6f6f6f; opacity: 1; } .wf-newsletter-input:focus { border-color: #0f62fe; } /* Section */ .wf-section-gray { padding: 64px 32px; background: #f4f4f4; } /* Text stubs */ .wf-display { font-family: 'Manrope'; font-size: 52px; font-weight: 300; line-height: 1.12; color: #161616; } .wf-h2 { font-size: 30px; font-weight: 600; color: #161616; } .wf-h2-inv { font-size: 30px; font-weight: 600; color: #ffffff; } .wf-h3 { font-size: 22px; font-weight: 600; color: #161616; } .wf-h3-inv { font-size: 22px; font-weight: 600; color: #ffffff; } .wf-body { font-size: 15px; color: #525252; line-height: 1.5; } .wf-body-inv { font-size: 15px; color: #c6c6c6; line-height: 1.5; } .wf-label { font-family: 'IBM Plex Mono'; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #8d8d8d; } /* Buttons */ .wf-btn-primary { background: #0f62fe; color: #fff; font-size: 16px; padding: 0 24px; height: 48px; display: inline-flex; align-items: center; border: none; cursor: default; } a.wf-btn-primary { text-decoration: none; cursor: pointer; transition: background-color 0.15s ease; } a.wf-btn-primary:hover { background-color: #0353e9; } .wf-btn-secondary { background: #fff; color: #161616; font-size: 16px; padding: 0 24px; height: 48px; display: inline-flex; align-items: center; border: 1.5px solid #161616; cursor: default; } .wf-btn-ghost-inv { background: transparent; color: #78a9ff; font-size: 16px; padding: 0 4px; height: 32px; display: inline-flex; align-items: center; border: none; cursor: default; } /* Card */ .wf-card-dark { background: #262626; padding: 24px; } /* Grid helpers — only .grid-3 is used in HTML (final-cta cards). The DS exposes equivalent .eu-grid-2/-3/-4 utilities; this project keeps .grid-3 because several site.css rules scope by it (.grid-3 .wf-card-dark, etc). New work should prefer the .eu-grid-* utilities directly. */ .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; } /* Page wrapper — center horizontally, no vertical chrome */ .wf-canvas { display: flex; flex-direction: column; align-items: center; min-height: 100vh; } /* hifi tweaks (locked-in default look) */ body[data-fidelity="hifi"] .wf-h2, body[data-fidelity="hifi"] .wf-h2-inv, body[data-fidelity="hifi"] .wf-h3, body[data-fidelity="hifi"] .wf-h3-inv, body[data-fidelity="hifi"] .wf-body, body[data-fidelity="hifi"] .wf-body-inv, body[data-fidelity="hifi"] .wf-nav-link, body[data-fidelity="hifi"] .wf-nav-cta, body[data-fidelity="hifi"] .wf-btn-primary, body[data-fidelity="hifi"] .wf-btn-secondary, body[data-fidelity="hifi"] .wf-btn-ghost-inv { font-family: 'IBM Plex Sans', sans-serif; } body[data-fidelity="hifi"] .wf-h2 { font-size: 24px; font-weight: 600; } body[data-fidelity="hifi"] .wf-h2-inv { font-size: 24px; font-weight: 600; } body[data-fidelity="hifi"] .wf-h3 { font-size: 18px; font-weight: 600; } body[data-fidelity="hifi"] .wf-h3-inv { font-size: 18px; font-weight: 600; } body[data-fidelity="hifi"] .wf-body { font-size: 14px; } body[data-fidelity="hifi"] .wf-body-inv { font-size: 14px; } body[data-fidelity="hifi"] .wf-card-dark { box-shadow: 0 1px 4px rgba(0,0,0,0.1); } /* No max-height clamp — image renders at natural 3:2 aspect within the tile width. Avoids the cropping that the previous max-height + cover combo introduced on normal viewports. Tile row 2 grows ~60px taller. */ .host-dashboard-img { width: 100%; height: auto; display: block; border-radius: 8px; transition: transform 0.3s ease; } .host-dashboard-img:hover { transform: scale(1.03); } /* =================================================== HERO — copy left, rotating-earth visual right. =================================================== */ .hero { background: #ffffff; display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; } .hero__copy { padding: 80px 32px 80px 48px; display: flex; flex-direction: column; justify-content: center; } .hero__display { margin: 0 0 24px; } .hero__body { margin-bottom: 40px; max-width: 480px; font-size: 17px; } .hero__actions { display: flex; gap: 8px; margin-bottom: 16px; } .hero__visual { display: flex; align-items: center; justify-content: center; padding: 32px; background: #f4f4f4; /* Click anywhere in the gray-shaded visual column triggers the globe spin burst (see js/main.js → heroVisual). The hero copy column stays unaffected. */ cursor: pointer; } .hero__earth { display: block; } /* =================================================== SECTION HEADER — shared across product/marketing sections. .section-bar's width is set by JS in main.js to match the .section-title span width. =================================================== */ .section-bar { height: 3px; background: #0f62fe; margin-bottom: 16px; } .section-heading { font-size: 22px; line-height: 1.4; } .section-heading__secondary { color: #525252; font-weight: 400; } /* =================================================== OUTPOST — 2x3 product tile grid: intro tiles, imagery, CTAs. Light + dark column variants. =================================================== */ .outpost { padding: 64px 32px; background: #eef2f6; } .outpost__header { margin-bottom: 40px; } .outpost__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; column-gap: 2px; row-gap: 0; } .outpost__tile--light { background: #ffffff; } .outpost__tile--dark { background: #dde6f0; } .outpost__tile--top { padding: 40px 40px 0; } .outpost__tile--mid { padding: 32px 40px 0; } .outpost__tile--bottom { padding: 32px 40px 40px; text-align: center; } .outpost__icon { margin-bottom: 20px; } .outpost__tile-title { margin-bottom: 8px; } /* =================================================== DPI — Drone Program Integration teaser banner. Dark counterpart to outpost; single CTA. =================================================== */ .dpi { padding: 64px 32px; background: #161616; } .dpi__header { margin-bottom: 32px; } /* Dark-bg modifier for section heading secondary copy. */ .section-heading__secondary--inv { color: #c6c6c6; } /* =================================================== SOLUTIONS — section wrapper. Carousel rules already exist above; this just sizes the section + lays out the heading row (title left, prev/next arrows right). =================================================== */ .solutions { padding: 64px 32px; } .solutions__header { margin-bottom: 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; } /* =================================================== FINAL CTA — 3 dark cards above footer + newsletter row. Card flex/font rules live in the FINAL CTA block above; this adds spacing + the disabled-CTA visual + newsletter row layout. =================================================== */ .final-cta { padding: 64px 32px; background: #161616; } .final-cta__cards { gap: 2px; margin-bottom: 64px; } .final-cta__card { padding: 32px; } .final-cta__card-title { margin-bottom: 8px; } .final-cta__card-body { margin-bottom: 20px; } .final-cta__btn--disabled { background: #525252; color: #8d8d8d; cursor: not-allowed; } .final-cta__newsletter { display: flex; align-items: center; justify-content: center; gap: 16px; } .final-cta__subscribe { height: 48px; cursor: pointer; transition: background-color 0.15s ease; } .final-cta__subscribe:hover:not(:disabled) { background-color: #0353e9; } .final-cta__subscribe:disabled { opacity: 0.6; cursor: default; } .wf-newsletter-input:disabled { opacity: 0.6; } .wf-newsletter-input.is-success { color: #42be65; } /* =================================================== FOOTER — dark, 3-column links + centered copyright. =================================================== */ .footer { background: #161616; padding: 0 32px 24px; /* Pull 1 px up so any subpixel rounding gap between the .final-cta bottom and .footer top doesn't reveal the white .wf-page background between two same-color dark sections. Harmless 1 px dark-on-dark overlap. */ margin-top: -1px; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; } .footer__logo { color: #ffffff; } .footer__col-label { color: #6f6f6f; margin-bottom: 12px; } .footer__col-item { margin-bottom: 6px; } .footer__col-link { display: block; text-decoration: none; transition: color 0.15s ease; } .footer__col-link:hover { color: #ffffff; } .footer__col-link:focus-visible { outline: 2px solid #0f62fe; outline-offset: 2px; } .footer__copyright { margin-top: 48px; color: #ffffff; font-size: 13px; text-align: center; } /* ──── Desktop only (≥ 1025px) — billboard-size earthity wordmark in the footer's bottom-left. Wrapped in min-width so tablet (≤ 1024px) and mobile (≤ 640px) keep the default 18 px logo. Anchors to the bottom of the first grid cell with align-items: flex-end so the wordmark grows upward; Products + Company columns stay top-aligned in their own cells (grid row grows, but column items don't reflow). Letter-spacing tightens the Manrope wordmark for a more typographic feel at this size. */ @media (min-width: 1025px) { .footer__grid > div:first-child { display: flex; align-items: flex-end; } .footer .footer__logo { font-size: clamp(80px, 11vw, 160px); line-height: 0.9; letter-spacing: 0.02em; } } /* ──── Short viewport (≤ 900px tall) — 13" laptop fit ──── */ @media (max-height: 900px) { .outpost { padding: 40px 32px; } .outpost__header { margin-bottom: 24px; } .outpost__tile--top { padding: 28px 32px 0; } .outpost__tile--mid { padding: 20px 32px 0; } .outpost__tile--bottom { padding: 20px 32px 28px; } .outpost__icon { margin-bottom: 12px; } } /* =================================================== CONTACT — page wrapper for /contact/. Everything else (h1 size, label, input, button) is pure design-system: t-display-02, mb-06, c-secondary, eu-field-group, eu-field--filled, eu-textarea, eu-btn--primary, mt-06. CSP form-action needs api.sheetmonkey.io added before prod ship. =================================================== */ .contact-page { max-width: 960px; margin: 0 auto; padding: var(--spacing-12) var(--spacing-06) var(--spacing-13); } .contact-page__header { margin-bottom: var(--spacing-09); } .contact-page__lead { max-width: 56ch; } /* Single-column on mobile/tablet (form, then HQ below). 2-column on desktop with HQ pinned to the left and form on the right. HTML order is form-then-HQ so the mobile reading flow lands on the form first. */ .contact-page__grid { display: grid; grid-template-columns: 1fr; } @media (min-width: 880px) { .contact-page__grid { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); grid-template-areas: "hq form"; gap: var(--spacing-10); align-items: center; } .contact-page__grid > .contact-page__form-col { grid-area: form; } .contact-page__grid > .contact-page__hq { grid-area: hq; } } .contact-form__required { color: var(--red-60); margin-left: 2px; } .contact-page__error { color: var(--red-60); margin-bottom: var(--spacing-04); } /* Status banner inserted at the top of the form on successful submit. The form stays mounted (fields readonly, button disabled) so the user sees their entry locked and the confirmation reads as inline state. */ .contact-form__success { background: var(--blue-10); color: var(--blue-80); padding: var(--spacing-05); border-left: 4px solid var(--blue-60); margin-bottom: var(--spacing-06); font-family: var(--font-sans); font-size: var(--type-body-short-01-size); letter-spacing: var(--type-body-short-01-ls); } #contact-form.is-success .eu-field, #contact-form.is-success .eu-textarea { cursor: not-allowed; opacity: 0.7; } .contact-page__hq { /* Mobile / tablet: HQ stacks below the form, separated by a divider. */ margin-top: var(--spacing-08); padding-top: var(--spacing-08); border-top: 1px solid var(--gray-20); } .contact-page__hq-label { margin-bottom: var(--spacing-02); } @media (min-width: 880px) { .contact-page__hq { /* Desktop: HQ sits in the left sidebar column, top-aligned with form. */ margin-top: 0; padding-top: 0; border-top: none; } } /* =================================================== ABOUT — page-level layout for /about/. Heading + section type from the design system; this block is layout, spacing, and the founder bio rows. =================================================== */ .about-page { max-width: 720px; margin: 0 auto; padding: var(--spacing-12) var(--spacing-06) var(--spacing-13); } .about-page__lead { max-width: 60ch; margin-bottom: var(--spacing-09); } .about-page__section { margin-top: var(--spacing-10); } .about-page__section-title { margin-bottom: var(--spacing-06); } .about-page__body { max-width: 60ch; } .about-page__body + .about-page__body { margin-top: var(--spacing-04); } .about-founder { padding: var(--spacing-08) 0; border-top: 1px solid var(--gray-20); } .about-founder:last-child { border-bottom: 1px solid var(--gray-20); } .about-founder__name { margin-bottom: var(--spacing-03); } .about-founder__bio { max-width: 60ch; margin-bottom: var(--spacing-05); } .about-founder__link { color: var(--blue-60); font-weight: 600; text-decoration: none; transition: color 70ms ease; } .about-founder__link:hover { color: var(--blue-60-hover); text-decoration: underline; } .about-founder__link:focus-visible { outline: 2px solid var(--blue-60); outline-offset: 2px; } /* ============================================================ OUTPOST PAGE ============================================================ */ .outpost-page { background: var(--gray-100); color: var(--gray-10); } /* Body-level class set on outpost.html so the page-wide surface (body, .wf-canvas, .wf-page wrappers) and the shared nav render dark. The nav lives outside .outpost-page (which is on
), so we need a selector that reaches it. */ .outpost-body { background: var(--gray-100); color: var(--gray-10); } .outpost-body .wf-canvas, .outpost-body .wf-page { background: var(--gray-100); } .outpost-body .wf-nav { background: var(--gray-100); border-bottom: 1px solid var(--gray-80); } /* Dark-nav variants of the legacy .wf-nav rules. The base styles in site.css:754-772 hardcode colors for the light nav on the home page (gray-100 indicator, white sign-in hover). On a dark nav those colors are invisible or wrong, so we override per-context here. The hover/active indicator flips to blue-60 — the brand single accent. That's the correct DS-faithful behavior for a dark nav (the underlying structural pattern of "transparent border that fills on hover/active" stays the same; only the fill color changes). */ .outpost-body .wf-nav-link { color: var(--gray-30); } .outpost-body .wf-nav-link:not(.wf-nav-signin):hover, .outpost-body .wf-nav-link[aria-current="page"] { color: var(--white); border-bottom-color: var(--blue-60); } .outpost-body .wf-nav-divider { background: var(--gray-80); } .outpost-body .wf-nav-signin { color: var(--gray-30); } .outpost-body .wf-nav-signin:hover { background-color: var(--gray-90); color: var(--white); } /* Outer-edge vertical dividers — pinned to the absolute left/right of the nav. Flex-item pseudos didn't work because .wf-nav has 32px L/R padding and the logo uses a -32px margin trick that covers x=0; absolute positioning sidesteps both. z-index: 1 keeps the line visible above the logo image and the "Talk to us" button at the edges. Desktop only — the mobile nav has no inner content to flank. */ @media (min-width: 881px) { .outpost-body .wf-nav { position: relative; } .outpost-body .wf-nav::before, .outpost-body .wf-nav::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--gray-80); z-index: 1; } .outpost-body .wf-nav::before { left: 0; } .outpost-body .wf-nav::after { right: 0; } } /* Visually-hidden text (used for the hero h1 — design has no overarching headline, but the page contract requires a single h1 for SEO + a11y). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ─── Hero — split-screen Hosts | Operators (mockup-a / Stitch reference) ─── */ /* The split is a 2×6 grid: two columns (Hosts | Operators), four content rows (icon, headline, body, cta), and a 1fr spacer at top + bottom. The 1fr spacers absorb extra vertical space, vertically centering the content WHILE letting the half elements span all 6 rows (= full 600px height) — that's how the hover background covers the whole hero, not just the centered content area. Each half and body-zone uses `grid-template-rows: subgrid` to inherit the 6 row tracks, so an element in row 3 of one half is at the same Y as row 3 of the other — that's the colinearity guarantee. */ .outpost-hero__split { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto auto auto 1fr; row-gap: var(--spacing-05); /* Match home hero's min-height for cross-page rhythm (`.hero` line 845). */ min-height: 600px; } .outpost-hero__half { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; /* Hover lightens the background; 300ms transition matches the mockup. The whole half reacts so each "side" reads as one zone. */ transition: background 300ms ease; } .outpost-hero__half--hosts { background: var(--gray-90); border-right: 1px solid var(--gray-80); } .outpost-hero__half--hosts:hover { background: var(--gray-80); } .outpost-hero__half--operators { background: var(--gray-100); } .outpost-hero__half--operators:hover { background: var(--gray-90); } /* Body zone: still a subgrid so its children participate in the same row tracks as the parent split. The wrapper handles horizontal centering (max-width + margin: auto) and the side padding from the half's edges. */ .outpost-hero__body-zone { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; max-width: 28rem; width: 100%; margin: 0 auto; padding: 0 var(--spacing-07); } /* Explicit row assignment for each child of body-zone. Rows 1 and 6 are the 1fr spacers (empty); content lives in rows 2-5. */ .outpost-hero__icon { grid-row: 2; } .outpost-hero__headline { grid-row: 3; } .outpost-hero__body { grid-row: 4; } .outpost-hero__cta { grid-row: 5; align-self: start; } .outpost-hero__icon { color: var(--white); flex-shrink: 0; } .outpost-hero__half--operators .outpost-hero__icon { color: var(--blue-60); } .outpost-hero__headline { font-family: var(--font-brand); font-size: var(--type-display-01-size); font-weight: var(--fw-light); line-height: 1.1; letter-spacing: -0.01em; color: var(--white); margin: 0; } .outpost-hero__body { font-family: var(--font-sans); font-size: var(--type-body-long-01-size); line-height: var(--type-body-long-01-lh); color: var(--gray-30); margin: 0; } /* Sized to match the home hero's wf-btn-primary / wf-btn-secondary (`site.css:791-794`): 16px font, 24px L/R padding, 48px height, natural content width. justify-self: start prevents grid's default stretch from blowing the button up to the full column width. */ .outpost-hero__cta { align-self: flex-start; justify-self: start; margin-top: var(--spacing-04); height: 3rem; min-height: 3rem; padding: 0 var(--spacing-06); font-size: 1rem; justify-content: flex-start; } /* Project-level modifier that overrides .eu-btn--secondary's gray-80 fill to a transparent-with-white-border treatment. Layered (not redefined) so the DS button geometry, focus ring, and disabled states still apply. site.css loads after components.css, so on specificity ties this wins. */ .outpost-hero__cta--outline { background: transparent; border: 1px solid var(--white); color: var(--white); } .outpost-hero__cta--outline:hover { background: var(--white); color: var(--gray-100); } /* ─── Tablet / mobile (<=880px) ─── */ /* When the halves stack vertically, colinearity isn't meaningful, so the subgrid setup is dropped. Each half flows as a flex column; each body-zone flows as a flex column. Children's grid-row values are ignored by flex parents, so no reset needed. */ @media (max-width: 880px) { .outpost-hero__split { grid-template-columns: 1fr; grid-template-rows: auto; align-content: stretch; row-gap: 0; min-height: 0; } .outpost-hero__half { display: flex; flex-direction: column; justify-content: center; grid-row: auto; padding: var(--spacing-09) var(--spacing-06); min-height: 28rem; } .outpost-hero__half--hosts { border-right: none; border-bottom: 1px solid var(--gray-80); } .outpost-hero__body-zone { display: flex; flex-direction: column; gap: var(--spacing-05); grid-row: auto; /* Drop the desktop measure on narrow viewports — fill the half. */ max-width: 100%; padding: 0; } /* Display-01 (60px) overflows long words like "Infrastructure" on a 375px viewport. Scale fluidly between 32px and 44px. */ .outpost-hero__headline { font-size: clamp(2rem, 8vw, 2.75rem); line-height: 1.05; } }