/* =================================================== earthity — base.css: rules shared by two or more pages (nav, footer, wf-* primitives, shared blocks). Load after the design system, before the page file. Generated by splitting the former site.css (2026-09-11). =================================================== */ /* =================================================== 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-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-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-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-track { display: flex; gap: 140px; align-items: center; width: max-content; will-change: transform; } .trust-track img { -webkit-user-drag: none; user-drag: none; } /* Per-logo vertical nudge to align optical centers across the band — some marks sit visually high/low inside their bounding box. */ .trust-track img[alt="LifeLine"] { transform: translateY(1px); } .trust-track img[alt="Zing"] { transform: translateY(2px); } @media (max-width: 640px) { .trust-track { gap: 72px; } } /* ===== CUSTOMER STORIES — accordion — notes in home.css ===== */ .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; } /* =================================================== 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 4-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; } /* Solutions card-info — reserve worst-case wrap (4 lines @24px) */ .solutions-card-info { min-height: 134px; } /* 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), .footer__grid > div:nth-child(3) { 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; } /* On mobile the wordmark drops to the bottom of the grid so it sits directly above the copyright line. `order: 1` moves the source-first logo cell below the link columns (grid is single-column here from the ≤1024px rule). 32 px margin-top separates it from the Company column; the 48 px copyright margin-top handles the gap below. Products → Company spacing keeps its own 24 px margin (line 525). */ .footer__grid { gap: 0 !important; } .footer__grid > div:first-child { order: 1; margin-bottom: 0 !important; margin-top: 32px !important; } /* Hero buttons stack and center */ .hero__actions { flex-wrap: nowrap !important; gap: 8px !important; justify-content: center !important; } /* Match `Register Outpost +` (default .wf-btn-primary at 16px). */ .hero__actions .wf-btn-primary, .hero__actions .wf-btn-secondary { padding: 0 14px !important; font-size: 16px !important; white-space: nowrap; } /* Hero globe shrinks (capped by container) */ #rotating-earth { width: 100% !important; max-width: 320px; height: auto !important; } .customer-story-bar { padding: 16px 0; gap: 12px; } /* 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; } /* Match the gap below the subscribe button to the gap above the "Newsletter" label (.final-cta__cards margin-bottom = 64px), so the CTA block sits symmetrically between cards and footer. Overrides the 32px bottom from the .final-cta shorthand (line 573). */ .final-cta { padding-bottom: 64px !important; } /* 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%; position: relative; } /* 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 max(32px, calc((100% - 1376px) / 2)); 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; border-left: 1px solid #c6c6c6; } .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):not(.wf-nav-demo):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; } /* Kisses the Sign in / Dashboard link on its left (no margin, and nav.js no longer puts a divider between them) and bleeds through the bar's right gutter, so the blue runs to the edge of the window. The negative margin is the gutter expression from .wf-nav negated — one value, two places, so a change to the bar's padding cannot leave a white sliver behind the CTA. */ .wf-nav-cta { background: #0f62fe; color: #fff; font-size: 15px; padding: 0 32px; align-self: stretch; display: flex; align-items: center; margin-right: calc(-1 * max(32px, calc((100% - 1376px) / 2))); 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, .wf-nav-demo { display: flex; align-items: center; padding: 0 16px; transition: background-color 0.15s ease; } .wf-nav-signin:hover, .wf-nav-demo:hover { background-color: #f4f4f4; } /* Sign-in dropdown (js/auth-nav.js). Desktop-only — the right nav is hidden on mobile, where Sign in is a plain menu link. The panel is a self-contained LIGHT card with hardcoded colors + accent-only DS buttons (blue-60 is the single brand accent in both themes), so it stays readable regardless of the nav's light/dark context. No border-radius (brand rule). */ .sign-in-menu { position: relative; display: flex; align-items: stretch; } .sign-in-panel { position: absolute; top: 100%; right: 0; z-index: 60; width: 288px; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #ffffff; border: 1px solid #c6c6c6; box-shadow: 0 8px 24px rgba(22, 22, 22, 0.16); } .sign-in-panel[hidden] { display: none; } .sign-in-panel__btn { width: 100%; justify-content: center; text-decoration: none; } .sign-in-panel__google { background: #ffffff; color: #161616; box-shadow: inset 0 0 0 1px #8d8d8d; gap: 8px; } .sign-in-panel__google:hover { background: #f4f4f4; } .sign-in-panel__google-icon { flex: 0 0 auto; } .sign-in-panel__divider { display: flex; align-items: center; color: #8d8d8d; font-size: 12px; } .sign-in-panel__divider::before, .sign-in-panel__divider::after { content: ""; flex: 1; height: 1px; background: #e0e0e0; } .sign-in-panel__divider span { padding: 0 12px; } .sign-in-panel__email { display: flex; flex-direction: column; gap: 6px; } .sign-in-panel__input { width: 100%; } .sign-in-panel__email .sign-in-panel__btn { margin-top: 6px; } .sign-in-panel__note { font-size: 12px; color: #525252; margin: 4px 0 0; } .sign-in-panel__note[hidden] { display: none; } /* Auth-state toggle (js/auth-nav.js): the dropdown and the Dashboard link both live in [data-auth-nav]; the state attribute (set optimistically from cache, pre-paint) picks which one shows — no flash, nothing destroyed/rebuilt. */ [data-auth-nav] { display: flex; align-items: stretch; } [data-auth-dashboard] { display: none; } [data-auth-nav][data-auth-state="in"] .sign-in-menu { display: none; } [data-auth-nav][data-auth-state="in"] [data-auth-dashboard] { display: flex; } .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 max(32px, calc((100% - 1376px) / 2)); background: #f4f4f4; } .wf-h2 { font-size: 30px; font-weight: 600; color: #161616; } .wf-h3-inv { font-size: 22px; font-weight: 600; color: #ffffff; } .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; } a.wf-btn-secondary { text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } a.wf-btn-secondary:hover { background-color: #161616; color: #fff; } /* 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 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: stretch; 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-h3-inv { font-size: 18px; font-weight: 600; } 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); } /* =================================================== HERO — copy left, rotating-earth visual right. =================================================== */ .hero { background: #ffffff; display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; max-width: 1440px; margin: 0 auto; width: 100%; } .hero__copy { padding: 80px 32px 80px 48px; display: flex; flex-direction: column; justify-content: center; } .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; } /* =================================================== GLOSSARY TERM — inline text highlight + cursor- following tooltip. Tooltip logic in main.js. =================================================== */ .glossary-term { background: linear-gradient(transparent 55%, rgba(15, 98, 254, 0.18) 55%); cursor: help; } #glossary-tooltip { position: fixed; pointer-events: none; z-index: 9999; background: #161616; color: #f4f4f4; font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; line-height: 1.5; padding: 12px 16px; /* Cap to 280px but never wider than the viewport less an 8px buffer each side, so the tooltip fits on the narrowest phones. */ max-width: min(280px, calc(100vw - 16px)); opacity: 0; transition: opacity 0.12s ease; } #glossary-tooltip.is-visible { opacity: 1; } /* =================================================== 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, — notes in home.css ===== */ .outpost { padding: 64px max(32px, calc((100% - 1376px) / 2)); background: #eef2f6; } .host-dash, .scale-dash { flex: 1; } /* =================================================== 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 max(32px, calc((100% - 1376px) / 2)); } /* =================================================== 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 max(32px, calc((100% - 1376px) / 2)); 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__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, 4-column links (logo · Products · Resources · Company) + centered copyright. =================================================== */ .footer { background: #161616; padding: 0 max(32px, calc((100% - 1376px) / 2)) 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 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; } /* Nudge the Products column inboard on desktop so it sits visually separated from the wordmark. Logo cell + copyright row untouched. */ .footer__grid > div:nth-child(2) { padding-left: 48px; } /* Half that nudge on Resources, which is what puts it midway between Products and Company. The three link cells are equal 1fr tracks, so their edges are already evenly spaced — but the indent above moves only the Products text, leaving Resources visually closer to it than to Company. Mirrored in the Outpost app's `.site-footer__grid`, which is the same footer. */ .footer__grid > div:nth-child(3) { padding-left: 24px; } } /* ──── Short viewport (≤ 900px tall) — 13" laptop fit ──── */ @media (max-height: 900px) { .outpost { padding: 40px 32px; } } /* ===== Outpost — host earnings dashboard widget (tile row 2 left) — notes in home.css ===== */ .host-dash { width: 100%; border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; background: #ffffff; font-family: 'IBM Plex Sans', sans-serif; } .host-dash__viewport { overflow: hidden; height: 170px; } .host-dash__row { display: flex; align-items: center; gap: 8px; padding: 2px 0; border-bottom: 1px solid #e8edee; height: 34px; box-sizing: border-box; } .host-dash__row:last-child { border-bottom: none; } .host-dash__thumb { width: 26px; height: 26px; flex-shrink: 0; object-fit: cover; border-radius: 4px; } .host-dash__row-text { flex: 1; min-width: 0; } .host-dash__prop { font-size: 11px; font-weight: 600; color: #161616; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .host-dash__city { font-size: 9px; color: #7a8a99; margin-top: 1px; line-height: 1.2; } .host-dash__row-amount { font-size: 11px; font-weight: 600; color: #161616; white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; } /* ===== Outpost — scale operations dashboard widget (tile row 2 right) — notes in home.css ===== */ .scale-dash { width: 100%; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-family: 'IBM Plex Sans', sans-serif; box-sizing: border-box; } .scale-dash__bar { flex: 1; background: #FF7A18; min-width: 0; min-height: 3px; border-radius: 1px; } /* ===== CONTACT — page wrapper for /contact/. — notes in contact.css ===== */ .contact-page__error { color: var(--red-60); margin-bottom: var(--spacing-04); } #contact-form.is-success .eu-field, #contact-form.is-success .eu-textarea { cursor: not-allowed; opacity: 0.7; } .contact-form__toast { margin: 0; font-family: var(--font-sans); font-size: var(--type-body-short-01-size); letter-spacing: var(--type-body-short-01-ls); color: var(--blue-70); } .contact-form__toast[hidden] { display: none; } /* ===== SHARED PAGE-LEVEL HELPERS — notes in drone-program.css ===== */ /* ─── Data room gate ──────────────────────────────────────── */ .data-room { position: relative; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-07); padding: var(--spacing-08) var(--spacing-06); background: #0a0a0a; box-sizing: border-box; } /* thinking-globe canvas stage — reused from the thinking-globe page */ .thinking-globe__stage { width: 100%; max-width: min(28rem, 38vh); aspect-ratio: 1; position: relative; flex-shrink: 0; } .thinking-globe__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } /* ===== CHARGING DOCK PAGE — notes in charging-dock.css ===== */ /* The Download-spec controls (hero + CTA) are