/* ============================================================ Wisdom SWE Solutions LLC - Shared stylesheet Plain CSS, no framework. Mobile-first, then widened at 768px/1024px. ============================================================ */ :root { --color-navy-900: #0b1f3a; --color-navy-800: #122a4d; --color-navy-700: #1c3a63; --color-slate-600: #45566f; --color-slate-400: #7c8aa0; --color-slate-200: #e2e6ee; --color-slate-100: #f4f6fa; --color-white: #ffffff; --color-teal-500: #1aa39a; --color-teal-600: #148077; --color-amber-500: #e6a417; /* Secondary accent - MUEVO (logistics platform brand) */ --color-muevo-orange: #f0700b; --color-muevo-orange-dark: #c2450a; --color-muevo-black: #0d0d0d; --color-muevo-black-soft: #1a1a1a; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius-md: 8px; --radius-lg: 14px; --shadow-card: 0 4px 18px rgba(11, 31, 58, 0.08); --max-width: 1160px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); color: var(--color-navy-900); background: var(--color-white); line-height: 1.6; } img { max-width: 100%; display: block; } a { color: var(--color-teal-600); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; } h1 { font-size: clamp(2rem, 4vw, 3rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } h3 { font-size: 1.25rem; } p { margin: 0 0 1em; color: var(--color-slate-600); text-align: justify; text-justify: inter-word; /* Hyphenation keeps justified text from opening up big word-gaps ("rivers") on narrow mobile columns; matches whichever language is currently set to (js/i18n.js keeps that in sync). */ -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; color: var(--color-teal-600); margin-bottom: 0.75em; } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 0.85em 1.6em; border-radius: var(--radius-md); font-weight: 600; border: 2px solid transparent; cursor: pointer; font-size: 1rem; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--color-teal-500); color: var(--color-white); } .btn-primary:hover { background: var(--color-teal-600); box-shadow: 0 6px 16px rgba(26,163,154,0.35); } .btn-outline { background: transparent; border-color: var(--color-white); color: var(--color-white); } .btn-outline:hover { background: rgba(255,255,255,0.12); } .btn-block { width: 100%; } .btn[disabled] { opacity: 0.6; cursor: not-allowed; } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--color-white); border-bottom: 1px solid var(--color-slate-200); } /* ---------- Header: single row - logo left, nav/search/CTA right ---------- */ .header-top { padding: 10px 20px; } .header-top-inner { max-width: none; margin: 0; display: flex; align-items: center; gap: 16px; width: 100%; } .nav-toggle { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 5px; padding: 6px; flex-shrink: 0; } .nav-toggle span { width: 24px; height: 2px; background: var(--color-navy-900); } .brand-lockup { display: flex; align-items: center; justify-content: flex-start; gap: 14px; flex-shrink: 0; } .brand-lockup .brand-logo { width: 72px; height: auto; display: block; flex-shrink: 0; } .brand-lockup .brand-text { display: flex; flex-direction: column; } .brand-lockup .brand-name { font-weight: 800; font-size: 1.35rem; line-height: 1.1; letter-spacing: 0.01em; color: var(--color-navy-900); text-align: left; } .brand-lockup .brand-name .accent { color: var(--color-teal-600); } .brand-lockup .brand-tagline { margin-top: 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-slate-400); } /* Nav sits directly next to the logo on the left */ .nav-links { display: none; gap: 22px; list-style: none; margin: 0 0 0 8px; padding: 0; font-weight: 700; font-size: 1.08rem; flex-wrap: nowrap; } .nav-links a { color: var(--color-navy-900); white-space: nowrap; } .nav-links a.active, .nav-links a:hover { color: var(--color-teal-600); text-decoration: none; } /* Search + language + CTA, pushed to the far right */ .header-right-group { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-shrink: 0; } .header-cta { display: none; white-space: nowrap; margin-left: 2px; padding: 0.6em 1.15em; font-size: 0.86rem; } /* Language switch: UI toggle only for now, no live translation yet */ .lang-switch { display: none; align-items: center; border: 1.5px solid var(--color-slate-200); border-radius: 999px; padding: 2px; flex-shrink: 0; } .lang-btn { background: none; border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.03em; padding: 4px 9px; border-radius: 999px; color: var(--color-slate-400); } .lang-btn.active { background: var(--color-navy-900); color: var(--color-white); } .lang-btn:not(.active):hover { color: var(--color-navy-900); } .mobile-menu { display: none; flex-direction: column; gap: 4px; padding: 8px 24px 20px; border-top: 1px solid var(--color-slate-200); } .mobile-menu.open { display: flex; } /* Language switch shown inside the mobile menu, since .lang-switch itself is only visible at the 1440px+ desktop breakpoint below. Reuses the same .lang-btn buttons/JS handlers as the desktop switch - toggling either one updates both because js/i18n.js targets every .lang-btn on the page. */ .lang-switch-mobile { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--color-slate-200); } .lang-switch-mobile .lang-btn { border: 1.5px solid var(--color-slate-200); border-radius: 999px; padding: 6px 16px; } .lang-switch-mobile .lang-btn.active { background: var(--color-navy-900); color: var(--color-white); border-color: var(--color-navy-900); } .mobile-menu a { color: var(--color-navy-900); font-weight: 600; padding: 10px 0; border-bottom: 1px solid var(--color-slate-100); } /* "Get a Quote" CTA shown inside the mobile menu, since .header-cta itself is only visible at the 1440px+ desktop breakpoint below. Below that breakpoint the desktop CTA was simply hidden with no mobile equivalent, making it unreachable on phones/tablets - this mirrors the same pattern used for .lang-switch-mobile above. */ .header-cta-mobile { display: inline-block; text-align: center; margin-top: 14px; border-bottom: none; } @media (min-width: 1440px) { .nav-links { display: flex; } .nav-toggle { display: none; } .header-cta { display: inline-block; } .lang-switch { display: flex; } .lang-switch-mobile { display: none; } .header-cta-mobile { display: none; } } @media (max-width: 520px) { .brand-lockup .brand-logo { width: 48px; } .brand-lockup .brand-name { font-size: 1.05rem; } .brand-lockup .brand-tagline { display: none; } .header-right-group { gap: 8px; } } /* ---------- Site search ---------- */ .site-search { position: relative; flex-shrink: 0; } .search-toggle { background: none; border: none; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; color: var(--color-navy-900); border-radius: 50%; } .search-toggle:hover { background: var(--color-slate-100); } .search-toggle svg { width: 20px; height: 20px; display: block; } .search-panel { display: none; position: absolute; top: calc(100% + 12px); right: 0; width: 340px; max-width: calc(100vw - 32px); background: var(--color-white); border: 1px solid var(--color-slate-200); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 14px; z-index: 60; } .search-panel.open { display: block; } .search-panel input[type="search"] { width: 100%; padding: 0.7em 0.9em; border: 1.5px solid var(--color-slate-200); border-radius: var(--radius-md); font-family: inherit; /* Kept at/above 16px (not 0.95rem) so iOS Safari doesn't auto-zoom the viewport when this input receives focus. */ font-size: 1rem; } .search-panel input[type="search"]:focus { outline: none; border-color: var(--color-teal-500); box-shadow: 0 0 0 3px rgba(26,163,154,0.15); } .search-results { margin-top: 10px; max-height: 340px; overflow-y: auto; } .search-result-item { display: block; padding: 10px 8px; border-radius: 6px; color: var(--color-navy-900); } .search-result-item:hover, .search-result-item:focus { background: var(--color-slate-100); text-decoration: none; } .search-result-item .result-title { font-weight: 700; font-size: 0.92rem; color: var(--color-navy-900); } .search-result-item .result-snippet { font-size: 0.82rem; color: var(--color-slate-400); margin-top: 2px; } .search-empty { padding: 10px 8px; color: var(--color-slate-400); font-size: 0.88rem; } .search-hint { padding: 4px 8px 0; color: var(--color-slate-400); font-size: 0.78rem; } /* ---------- Hero ---------- */ .hero { position: relative; background: radial-gradient(1200px 480px at 80% -10%, #14406f 0%, var(--color-navy-900) 55%); color: var(--color-white); padding: 34px 0 40px; overflow: hidden; min-height: calc(100vh - var(--header-h, 96px)); display: flex; align-items: center; } .hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; z-index: 0; } .hero-video-scrim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(5,13,26,0.42) 0%, rgba(6,15,29,0.36) 55%, rgba(6,15,29,0.6) 100%), radial-gradient(900px 500px at 85% -5%, rgba(11,31,58,0.2) 0%, rgba(6,15,29,0) 60%); z-index: 1; } .hero-grid { position: relative; z-index: 2; display: grid; gap: 32px; width: 100%; } .hero-pillars { margin-top: 8px; font-weight: 700; font-size: 1rem; letter-spacing: 0.03em; color: #7fe3da; } .hero-pillars .sep { color: rgba(127,227,218,0.45); margin: 0 10px; } .hero p.lead { margin-top: 12px; color: var(--color-slate-200); font-size: 1.05rem; max-width: 60ch; } .hero .hero-closing { margin-top: 8px; font-weight: 800; font-size: 1.1rem; color: var(--color-white); letter-spacing: 0.01em; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 1.1em; } /* Stat cards: 3D lift with a brick-orange (MUEVO) glow shadow */ .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 20px; margin-top: 28px; } .hero-stats .stat-card { position: relative; background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-lg); padding: 18px 18px; transform: perspective(700px) rotateX(4deg) translateY(0); box-shadow: 0 18px 30px -12px rgba(194,69,10,0.55), 0 6px 14px -6px rgba(194,69,10,0.35), inset 0 1px 0 rgba(255,255,255,0.16); transition: transform 0.25s ease, box-shadow 0.25s ease; } .hero-stats .stat-card:hover { transform: perspective(700px) rotateX(2deg) translateY(-4px); box-shadow: 0 26px 38px -12px rgba(194,69,10,0.65), 0 10px 18px -6px rgba(194,69,10,0.45), inset 0 1px 0 rgba(255,255,255,0.2); } .hero-stats .stat-eyebrow { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muevo-orange); margin-bottom: 8px; } .hero-stats .stat-num { font-size: 1.85rem; font-weight: 800; color: var(--color-white); line-height: 1; } .hero-stats .stat-label { margin-top: 6px; color: var(--color-slate-200); font-size: 0.88rem; } @media (max-width: 640px) { .hero { min-height: 0; display: block; padding: 28px 0 36px; } .hero-stats { grid-template-columns: 1fr; } } /* Stacked hero variant (Who We Are): video occupies the top 1/3 of the viewport as a normal block element (not a full-bleed background), with all copy flowing in normal document flow underneath it. Scoped to .hero--stacked so the homepage's full-bleed video hero is untouched. */ .hero--stacked { min-height: 0; display: block; padding: 0 0 40px; overflow: visible; } .hero--stacked .hero-video { position: relative; top: auto; left: auto; display: block; width: 100%; height: 33vh; min-height: 220px; max-height: 420px; object-fit: cover; object-position: center; z-index: auto; } .hero--stacked .hero-grid { display: block; padding-top: 36px; } @media (max-width: 640px) { .hero--stacked { padding: 0 0 32px; } .hero--stacked .hero-video { height: 30vh; min-height: 180px; } .hero--stacked .hero-grid { padding-top: 26px; } } /* Split hero variant (Who We Are): video fills the left half of the screen, the full text runs in two CSS columns filling the right half — video and text sit side by side in the same screen space instead of stacking. Scoped to .hero--split so it doesn't affect .hero-stacked, used earlier, or the homepage's full-bleed .hero. */ .hero--split { min-height: calc(100vh - var(--header-h, 96px)); display: flex; align-items: center; padding: 34px 0 40px; overflow: hidden; } .hero--split .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; width: 100%; } .hero--split .hero-video { position: relative; top: auto; left: auto; display: block; width: 100%; height: 100%; min-height: 320px; max-height: 560px; object-fit: cover; border-radius: var(--radius-lg); z-index: auto; } .hero--split .hero-text-columns { column-count: 2; column-gap: 28px; } .hero--split .hero-text-columns .eyebrow, .hero--split .hero-text-columns h1 { column-span: all; } .hero--split .hero-text-columns h1 { font-size: 1.85rem; margin-top: 6px; margin-bottom: 14px; } .hero--split .hero-text-columns p.lead { font-size: 0.85rem; line-height: 1.42; max-width: none; margin-top: 0; margin-bottom: 11px; } .hero--split .hero-text-columns .hero-closing { font-size: 0.9rem; margin-top: 0; margin-bottom: 11px; } .hero--split .hero-text-columns p, .hero--split .hero-text-columns .hero-closing { break-inside: avoid; } @media (max-width: 900px) { .hero--split { min-height: 0; display: block; padding: 28px 0 32px; } .hero--split .hero-grid { display: block; } .hero--split .hero-video { height: 30vh; min-height: 180px; max-height: none; margin-bottom: 22px; } .hero--split .hero-text-columns { column-count: 1; } } /* Detail zone: sits over the open/graphic part of the hero video, to the right of the text column, so a card's detail text never covers the headline or paragraph. One panel shown at a time, toggled by JS (main.js) on hover of the matching stat-card. Panels size themselves to their own content (no fixed height, no scroll). */ .hero-detail-zone { position: absolute; top: 0; right: 0; left: 53%; height: calc(var(--stats-top, 420px) - 10px); z-index: 6; display: flex; align-items: center; justify-content: center; pointer-events: none; } .card-detail-panel { width: min(600px, 96%); max-height: 100%; overflow-y: auto; background: linear-gradient(160deg, rgba(15,32,58,0.97) 0%, rgba(8,19,36,0.97) 100%); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-lg); padding: 16px 20px; box-shadow: 0 24px 44px -14px rgba(194,69,10,0.6), 0 8px 16px -6px rgba(194,69,10,0.4), inset 0 1px 0 rgba(255,255,255,0.14); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; position: absolute; } .card-detail-panel.visible { opacity: 1; visibility: visible; transform: translateY(0); } .card-detail-panel .panel-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muevo-orange); margin-bottom: 7px; } .card-detail-panel p { font-size: 0.74rem; line-height: 1.4; color: var(--color-slate-200); margin: 0 0 6px; } .card-detail-panel ul { margin: 0 0 6px; padding-left: 16px; } .card-detail-panel li { font-size: 0.74rem; line-height: 1.35; color: var(--color-slate-200); margin-bottom: 4px; } .card-detail-panel li strong, .card-detail-panel p strong { color: var(--color-white); } .card-detail-panel p:last-child, .card-detail-panel ul:last-child { margin-bottom: 0; } @media (max-width: 900px) { /* No reliable hover on touch. Previously this content was just hidden below 900px, making it completely inaccessible on tablets and phones. Instead, drop the absolute-positioned video overlay and let the zone fall back into normal document flow as the second row of .hero-grid (it's already the text column's next sibling there), showing every panel statically and stacked instead of one-at-a-time on hover - same fallback pattern used for .value-card and .cap-detail-zone elsewhere on the site. */ .hero-detail-zone { position: static; left: auto; right: auto; top: auto; height: auto; display: grid; gap: 14px; margin-top: 24px; pointer-events: auto; } .hero-detail-zone .card-detail-panel { position: static; opacity: 1; visibility: visible; transform: none; width: 100%; max-height: none; overflow: visible; } } /* ---------- Value cards (Who We Are page): same 3D + brick-orange-shadow standard as the homepage hero's stat cards, but standalone (no video backdrop) — solid dark navy/black fill so they read the same way on a light section. Title always visible; full text reveals on hover. ---------- */ .value-cards { align-items: start; transition: margin-bottom 0.2s ease; } /* Reserve extra room below the grid only while a panel is actually open, so the tallest panel (Understanding, 4 sub-points) never covers the CTA band underneath, without leaving a permanent gap when nothing is hovered. */ .value-cards:has(.value-card:hover) { margin-bottom: 280px; } @media (max-width: 900px) { .value-cards:has(.value-card:hover) { margin-bottom: 0; } } .value-card { position: relative; background: linear-gradient(160deg, #16305a 0%, #0a1626 100%); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: 26px 24px; transform: perspective(700px) rotateX(4deg) translateY(0); box-shadow: 0 18px 30px -12px rgba(194,69,10,0.5), 0 6px 14px -6px rgba(194,69,10,0.32), inset 0 1px 0 rgba(255,255,255,0.14); transition: transform 0.25s ease, box-shadow 0.25s ease; } .value-card:hover { transform: perspective(700px) rotateX(2deg) translateY(-4px); box-shadow: 0 26px 38px -12px rgba(194,69,10,0.62), 0 10px 18px -6px rgba(194,69,10,0.42), inset 0 1px 0 rgba(255,255,255,0.18); } .value-card .value-title { color: var(--color-white); font-size: 1.08rem; font-weight: 800; margin: 0; } .value-card .value-hint { display: block; margin-top: 10px; font-size: 0.78rem; color: var(--color-slate-300, #9fb0c8); opacity: 0.75; } /* Panel floats below its own card (opening upward would collide with the section heading directly above the card row) */ .value-card .card-detail-panel { position: absolute; top: calc(100% + 14px); bottom: auto; left: 50%; right: auto; width: min(400px, 88vw); max-height: none; overflow: visible; transform: translateX(-50%) translateY(-8px); } .value-card .card-detail-panel.visible { transform: translateX(-50%) translateY(0); } .value-cards .value-card:first-child .card-detail-panel { left: 0; transform: translateX(0) translateY(-8px); } .value-cards .value-card:first-child .card-detail-panel.visible { transform: translateX(0) translateY(0); } .value-cards .value-card:last-child .card-detail-panel { left: auto; right: 0; transform: translateX(0) translateY(-8px); } .value-cards .value-card:last-child .card-detail-panel.visible { transform: translateX(0) translateY(0); } /* Pure-CSS hover reveal (panel is a direct descendant here, unlike the hero's JS-driven zone) */ .value-card:hover .card-detail-panel, .value-card:focus-within .card-detail-panel { opacity: 1; visibility: visible; } .value-card:hover .card-detail-panel { transform: translateX(-50%) translateY(0); } .value-cards .value-card:first-child:hover .card-detail-panel { transform: translateX(0) translateY(0); } .value-cards .value-card:last-child:hover .card-detail-panel { transform: translateX(0) translateY(0); } @media (max-width: 900px) { /* No reliable hover on touch: show each panel inline/static instead of hiding content */ .value-card { transform: none; } .value-card:hover { transform: none; } .value-card .card-detail-panel { position: static; opacity: 1; visibility: visible; transform: none; width: 100%; margin-top: 14px; padding: 0; border: none; box-shadow: none; background: none; } .value-card .card-detail-panel .panel-title { display: none; } .value-card .value-hint { display: none; } } /* ---------- Sections ---------- */ section { padding: 72px 0; } section.alt { background: var(--color-slate-100); } .section-head { max-width: 640px; margin: 0 auto 3em; text-align: center; } .section-head p { text-align: center; } .section-head.left { margin: 0 0 3em; text-align: left; } .section-head.left p { text-align: left; } /* Centered eyebrow/heading (reuses .section-head) followed by a narrower, left-aligned column of body paragraphs - for long-form narrative content (several paragraphs) where .section-head's own 640px/centered-text rules would be too narrow and read oddly for full sentences. */ .narrative-block .section-head { max-width: 700px; margin-bottom: 2em; } .narrative-block-body { max-width: 760px; margin: 0 auto; text-align: left; } .narrative-block-body p { font-size: 1.02rem; line-height: 1.7; } .grid { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 640px) { .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } } .card { background: var(--color-white); border: 1px solid var(--color-slate-200); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card); } .card .icon { width: 46px; height: 46px; border-radius: 10px; background: rgba(26,163,154,0.12); color: var(--color-teal-600); display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 16px; } .cta-band { background: var(--color-navy-900); color: white; border-radius: var(--radius-lg); padding: 48px; text-align: center; } .cta-band p { color: var(--color-slate-200); text-align: center; } /* ---------- Forms ---------- */ .form-field { margin-bottom: 18px; } .form-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; } .form-field input, .form-field select, .form-field textarea { width: 100%; padding: 0.75em 0.9em; border: 1.5px solid var(--color-slate-200); border-radius: var(--radius-md); font-family: inherit; font-size: 1rem; background: var(--color-white); color: var(--color-navy-900); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--color-teal-500); box-shadow: 0 0 0 3px rgba(26,163,154,0.15); } .form-row { display: grid; gap: 18px; } @media (min-width: 640px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } } .form-status { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-md); font-size: 0.92rem; display: none; } .form-status.show { display: block; } .form-status.success { background: #e4f7f0; color: #146c50; } .form-status.error { background: #fdeceb; color: #a13327; } /* ---------- Footer ---------- */ .site-footer { background: var(--color-navy-900); color: var(--color-slate-200); padding: 56px 0 28px; } .footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr; } @media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; } } .site-footer h4 { color: white; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: 10px; } .site-footer a { color: var(--color-slate-200); } .site-footer .nav-brand { display: flex; align-items: center; gap: 10px; } .site-footer .nav-brand .brand-logo { width: 48px; height: auto; flex-shrink: 0; } .footer-newsletter input { width: 100%; padding: 0.7em 0.9em; border-radius: var(--radius-md); border: none; margin-bottom: 10px; font-family: inherit; /* Explicit 16px so iOS Safari doesn't auto-zoom the viewport on focus - this input previously had no font-size set at all and fell back to the browser default (~13px). */ font-size: 1rem; } /* ---------- Newsletter unsubscribe (collapsed link that reveals a tiny inline form) - lives right below the subscribe form in the same .footer-newsletter block ---------- */ .newsletter-unsubscribe { margin-top: 10px; } .newsletter-unsubscribe-toggle { background: none; border: none; padding: 0; font: inherit; font-size: 0.85rem; color: var(--color-slate-400); text-decoration: underline; cursor: pointer; text-align: left; } .newsletter-unsubscribe-toggle:hover { color: var(--color-slate-200); } .newsletter-unsubscribe-form { margin-top: 10px; } .footer-slogan { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); text-align: center; font-size: 0.98rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-slate-200); } .footer-slogan p { text-align: center; } .footer-bottom { margin-top: 20px; padding-top: 20px; font-size: 0.85rem; color: var(--color-slate-400); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .cookie-preferences-link { background: none; border: none; padding: 0; font: inherit; color: var(--color-slate-400); text-decoration: underline; cursor: pointer; } .cookie-preferences-link:hover { color: var(--color-slate-200); } /* ---------- Utility ---------- */ .text-center, .text-center p { text-align: center; } .mt-0 { margin-top: 0; } .badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--color-slate-100); color: var(--color-navy-800); font-size: 0.8rem; font-weight: 700; margin-bottom: 8px; } .page-hero { background: var(--color-navy-900); color: white; padding: 56px 0; } .page-hero p { color: var(--color-slate-200); max-width: 60ch; } /* Full-screen image hero variant — shared base, reused per page via a second modifier class that only sets the actual photo (see .page-hero--capabilities / .page-hero--industries below). Just the photo and the headline/lead over it — no dark/black scrim panel. The image is layered as a CSS background (not an ) precisely so that until the real file is in place, the background-color fallback shows instead of a broken-image icon. Text legibility over a busy photo comes from a text-shadow on the copy itself, not a black overlay layer. */ .page-hero--image { position: relative; min-height: calc(100vh - var(--header-h, 96px)); display: flex; align-items: center; padding: 64px 0; overflow: hidden; background-size: cover; background-position: center; /* Medium navy (not the near-black --color-navy-900) so the white headline stays readable while the real photo isn't in place yet; once the page's image file exists this fallback is invisible. */ background-color: var(--color-navy-700); } .page-hero--capabilities { background-image: url("../assets/img/capabilities-hero.jpg"); } .page-hero--industries { background-image: url("../assets/img/industries-hero.jpg"); } .page-hero--innovation { background-image: url("../assets/img/innovation-hero.jpg"); } /* MUEVO's photo is a branded composite (its own gauge/speedometer mark on a flat navy field on the left, a warehouse-dock photo on the right) rather than a plain photograph, and its hero has noticeably more copy than the other image heroes (tagline + two full lead paragraphs) - anchoring the text block to the bottom of the hero (instead of the shared vertical-center default) keeps it clear of the gauge mark, which sits roughly in the vertical middle of the image, and lands it in the calmer open-navy strip below it. */ .page-hero--muevo { background-image: url("../assets/img/muevo-hero.jpg"); align-items: flex-end; } .page-hero--leadership { background-image: url("../assets/img/leadership-hero.jpg"); } .page-hero--image .page-hero-scrim { /* Intentionally no background here anymore (no black/dark overlay) - kept as an empty, harmless element so the HTML doesn't need to change if a subtle scrim is ever wanted again. */ display: none; } /* Left-aligned instead of centered so the copy sits over one calmer region of the photo instead of dead-center; width is capped as a % of the viewport (not just a fixed px) so it keeps scaling down with the photo itself as the viewport narrows. Each page tunes its own column width below depending on how busy its specific photo is. */ .page-hero--image .container { position: relative; z-index: 2; margin: 0; padding-left: 40px; padding-right: 24px; } /* Capabilities' photo has baked-in text/graphics (a circular diagram, icon labels) spread almost edge to edge, so its column stays narrow to dodge them. */ .page-hero--capabilities .container { max-width: min(440px, 27vw); } /* Industries' photo is a straight photograph with no baked-in text, so its column can run wider without colliding with on-image typography - still narrow enough to sit clear of the busiest machinery on the right two-thirds of the frame. */ .page-hero--industries .container { max-width: min(560px, 38vw); } /* Innovation's photo has glowing on-image graphics (hologram icons, a city model, charts) spread across almost the full frame, similar to Capabilities - but unlike Capabilities this page never had a "no background layer" instruction, so it gets the frosted panel too rather than trying to thread text between the bright hologram elements. */ .page-hero--innovation .container { max-width: min(480px, 32vw); } /* Wider than the other three - this hero carries a tagline plus two full lead paragraphs, not just one, so a narrow column would force an awkwardly tall, cramped panel. */ .page-hero--muevo .container { max-width: min(620px, 42vw); } /* Leadership's hero also carries a tagline + full paragraph on top of the eyebrow/H1 (same shape as MUEVO's hero copy), so it gets the same wider column. */ .page-hero--leadership .container { max-width: min(620px, 42vw); } /* Text-shadow alone wasn't enough over this photo's brighter patches (wet reflective ground, the lit-up assembly line) - added a soft frosted dark panel behind the copy for real, reliable contrast at every point along the image, not just the darker corners. This is scoped to Industries and Innovation only (Capabilities explicitly asked for image + text with no background layer at all, so it stays untouched). */ .page-hero--industries .container, .page-hero--innovation .container, .page-hero--muevo .container, .page-hero--leadership .container { padding: 28px 32px; background: rgba(5, 13, 26, 0.58); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 16px; box-shadow: 0 20px 44px -18px rgba(0,0,0,0.55); } @media (max-width: 640px) { .page-hero--industries .container, .page-hero--innovation .container, .page-hero--muevo .container, .page-hero--leadership .container { padding: 22px 22px; } } .page-hero--image h1 { font-size: clamp(1.6rem, 2.3vw, 2.3rem); } .page-hero--image .eyebrow, .page-hero--image h1, .page-hero--image .lead { text-shadow: 0 2px 16px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.7); } .page-hero--image .lead { color: var(--color-slate-200); font-size: 0.95rem; margin-top: 14px; max-width: 62ch; } @media (max-width: 640px) { .page-hero--image { min-height: 0; padding: 48px 0; } .page-hero--image .container { max-width: 84%; padding-left: 24px; } .page-hero--image h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); } } /* On a narrow/tall viewport "cover" ends up showing a center-cropped vertical slice of the image - Capabilities' slice lands on its circular diagram graphic, so shift it left toward the calmer scene there too. Industries has no baked-in graphics, so its mobile crop is left at the default center. This is a wider breakpoint (900px, not 640px) than the other mobile-only hero tweaks above: at tablet widths (e.g. 768px) the container is tall enough relative to its width that a center-cropped slice still lands squarely on the diagram and overlaps the heading text, so the fix needs to cover tablets too, not just phones. */ @media (max-width: 900px) { .page-hero--capabilities { background-position: 0% center; } /* MUEVO's gauge mark lives on the left third of the photo - keep that visible on the narrow/tall crop instead of the default center (which would land mid-truck). MUEVO also has its own frosted background panel behind the text (see rules above), so this is a belt-and-suspenders legibility tweak rather than a fix for an actual overlap like Capabilities'. */ .page-hero--muevo { background-position: 0% center; } } /* ---------- Capabilities cards: same dark/orange 3D standard as the homepage stat-cards and Who We Are value-cards, but with a visible tagline + description on the face (this content is denser than a single title), and a shared "Core Services" detail zone below the whole grid (not nested inside each card) so a hovered card's panel never overlaps the row of cards beneath it in this 3-column/2-row layout — same JS-driven shared-zone pattern as the homepage's .hero-detail-zone, just placed in normal document flow instead of over a video. Sized down from the original (smaller padding/type/gap) so the whole 3x2 grid reads as one compact, scannable screen instead of a tall section you have to scroll through. ---------- */ .cap-cards-section { padding: 44px 0; } .cap-cards { gap: 16px; } .cap-card { padding: 18px 16px; } .cap-card .value-title { font-size: 0.95rem; } .cap-card .value-hint { margin-top: 6px; font-size: 0.72rem; } .cap-card .cap-tagline { color: var(--color-muevo-orange); font-weight: 700; font-size: 0.78rem; margin: 6px 0 6px; } .cap-card .cap-desc { color: var(--color-slate-200); font-size: 0.78rem; line-height: 1.42; margin: 0; } .cap-detail-zone { position: relative; display: flex; align-items: flex-start; justify-content: center; min-height: 210px; margin-top: 8px; } .cap-detail-zone .card-detail-panel { width: min(480px, 92%); } /* "Core Services" bullet list: two columns instead of one long stack, since each item here is a short 2-4 word phrase (unlike the homepage's hero-detail-zone panels, which use full-sentence bullets and stay single-column - this rule is scoped to .cap-detail-zone specifically so it doesn't touch that generic .card-detail-panel ul elsewhere). */ .cap-detail-zone .card-detail-panel ul { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 18px; row-gap: 4px; } @media (max-width: 900px) { /* No reliable hover on touch: instead of hiding this content (which made it completely inaccessible on tablets/phones), show every panel statically, stacked in card order below the grid. Each panel's title was made specific to its service (see the HTML) precisely so it's identifiable once it's no longer sitting right next to the card that triggers it. */ .cap-detail-zone { position: static; display: grid; gap: 14px; min-height: 0; margin-top: 20px; pointer-events: auto; } .cap-detail-zone .card-detail-panel { position: static; opacity: 1; visibility: visible; transform: none; width: 100%; max-height: none; overflow: visible; } .cap-detail-zone .card-detail-panel ul { grid-template-columns: 1fr 1fr; } } /* ---------- Industries cards: same dark navy/black + brick-orange 3D standard as the Capabilities cards above (and the homepage/Who We Are cards before that) - reuses .value-card for the tilt/shadow/gradient shell. Unlike Capabilities, there's no separate "expand on hover" content for each industry (just one description each), so these cards are title + icon + description only, always visible, no hint label and no hover panel. The icon is a small circular 3D badge (radial gradient + inset highlight/shadow) instead of a flat emoji character, per the request for "more 3d" icons. ---------- */ .industry-card { text-align: left; } .industry-card .industry-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; margin-bottom: 12px; background: radial-gradient(circle at 32% 28%, rgba(240,112,11,0.95) 0%, rgba(194,69,10,0.6) 45%, rgba(13,13,13,0.92) 100%); box-shadow: 0 10px 18px -8px rgba(194,69,10,0.7), 0 3px 8px -3px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -6px 10px rgba(0,0,0,0.35); } .industry-card .value-title { font-size: 1rem; margin-bottom: 8px; } .industry-card .industry-desc { color: var(--color-slate-200); font-size: 0.82rem; line-height: 1.5; margin: 0; } /* ---------- MUEVO (secondary brand accent: orange/black) ---------- */ .muevo-hero { background: radial-gradient(900px 420px at 85% -10%, rgba(240,112,11,0.35) 0%, transparent 60%), var(--color-muevo-black); color: var(--color-white); padding: 64px 0 88px; } .muevo-hero p { color: #d8d3cc; max-width: 62ch; } .badge-muevo { display: inline-block; padding: 4px 14px; border-radius: 999px; background: rgba(240,112,11,0.15); color: var(--color-muevo-orange); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; border: 1px solid rgba(240,112,11,0.35); } .btn-muevo { background: var(--color-muevo-orange); color: var(--color-white); border-color: transparent; } .btn-muevo:hover { background: var(--color-muevo-orange-dark); box-shadow: 0 6px 16px rgba(240,112,11,0.35); } .muevo-card { background: var(--color-muevo-black-soft); border: 1px solid rgba(240,112,11,0.2); border-radius: var(--radius-lg); padding: 28px; color: #d8d3cc; } .muevo-card h3 { color: var(--color-white); } .muevo-card .phase-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(240,112,11,0.15); color: var(--color-muevo-orange); font-weight: 800; margin-bottom: 14px; border: 1px solid rgba(240,112,11,0.4); } .muevo-cta { background: var(--color-muevo-black); border: 1px solid rgba(240,112,11,0.3); } .muevo-cta p { color: #d8d3cc; } .muevo-icon { width: 48px; height: auto; display: block; } /* Feature/service/audience card icon badge - same 3D radial-gradient + layered-shadow treatment as Industries/Innovation's .industry-icon, reused here so MUEVO's own cards (dark/orange .muevo-card shell instead of the navy .value-card one) still read as part of the same site-wide "3D icon badge" language. */ .muevo-card .muevo-feature-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; margin-bottom: 12px; background: radial-gradient(circle at 32% 28%, rgba(240,112,11,0.95) 0%, rgba(194,69,10,0.6) 45%, rgba(13,13,13,0.92) 100%); box-shadow: 0 10px 18px -8px rgba(194,69,10,0.7), 0 3px 8px -3px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -6px 10px rgba(0,0,0,0.35); } .muevo-card .muevo-feature-title { font-size: 1rem; margin: 0 0 8px; color: var(--color-white); } .muevo-card .muevo-feature-desc { color: #d8d3cc; font-size: 0.85rem; line-height: 1.5; margin: 0; } /* ---------- Leadership page: founder photo + profile grid ---------- The 4-column grid alternates photo, profile, photo, profile - on the single-column mobile layout that same order still reads correctly as "person 1 photo, person 1 profile, person 2 photo, person 2 profile" with no markup change needed. */ .founder-grid { align-items: start; } .founder-photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); display: block; } .founder-profile h3 { margin: 0 0 8px; font-size: 1.1rem; } .founder-profile .founder-title { color: var(--color-muevo-orange); font-weight: 700; font-size: 0.82rem; line-height: 1.45; margin: 0 0 16px; } .founder-profile .founder-specializes-label { font-weight: 700; font-size: 0.85rem; color: var(--color-navy-900); margin: 0 0 8px; } .founder-profile .founder-specializes { margin: 0; padding-left: 18px; font-size: 0.85rem; line-height: 1.65; color: var(--color-slate-600); } .founder-profile .founder-specializes li { margin-bottom: 3px; } @media (max-width: 899px) { .founder-photo { max-width: 320px; margin: 0 auto; } } .muevo-tagline { margin: 6px 0 0; font-size: 1rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muevo-orange); } /* ---------- Cookie consent banner (gates Google Analytics) ---------- Hidden by default and only shown by js/consent.js - either on first visit with no stored choice yet, or on demand via the "Cookie preferences" link in the footer. Fixed to the bottom of the viewport, above everything else, so it can't be missed but also never blocks the page content behind it (no full-screen scrim). */ .cookie-consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: var(--color-navy-900); color: var(--color-slate-200); box-shadow: 0 -8px 24px rgba(0,0,0,0.25); padding: 18px 24px; transform: translateY(100%); transition: transform 0.25s ease; } .cookie-consent-banner.visible { transform: translateY(0); } .cookie-consent-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .cookie-consent-inner p { margin: 0; color: var(--color-slate-200); text-align: left; max-width: 68ch; font-size: 0.92rem; flex: 1 1 320px; } .cookie-consent-actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; } .cookie-consent-actions .btn { padding: 0.65em 1.3em; font-size: 0.92rem; } @media (max-width: 640px) { .cookie-consent-banner { padding: 16px 18px; } .cookie-consent-inner { gap: 14px; } .cookie-consent-actions { width: 100%; } .cookie-consent-actions .btn { flex: 1 1 auto; text-align: center; } }