/* ============================================ TRI OCEAN – Offshore Oil & Gas (Unseen-style) ============================================ */ :root { --color-bg: #e8e4df; --color-bg-splash: #e5ddd6; --color-text: #0a0a0a; --color-text-muted: #444; --color-accent: #c45c26; --color-ocean: #1a3a4a; --color-cream: #f5f0eb; --color-menu-bg: #e0d9d2; --font-sans: 'DM Sans', sans-serif; --font-serif: 'Cormorant Garamond', serif; /* Home hero headline: geometric sans, no effects */ --font-hero-tagline: 'Outfit', 'DM Sans', system-ui, sans-serif; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; height: 100%; max-width: 100%; overflow: hidden; /* disable scrolling unless index-can-scroll */ } /* Inner routes: no document scroll — avoid chaining wheels to a locked root */ html:not(.index-can-scroll) { overscroll-behavior-y: none; } /* * Single page scrollbar: scroll only on . * Do NOT set body to overflow-x: hidden + overflow-y: visible — spec forces overflow-y to compute * to auto, so both html and body become scroll containers (double vertical scrollbars). */ html.index-can-scroll { overflow-x: hidden; overflow-y: auto; height: auto; width: 100%; max-width: 100%; min-height: 100%; /* Dynamic viewport: keeps document height in sync when the URL bar shows/hides (iOS) or on rotate */ min-height: 100vh; min-height: 100dvh; /* Wheel + section snap fight with global smooth scroll; nav uses explicit behavior: smooth */ scroll-behavior: auto; /* Reduces horizontal layout shift when scrollbar appears/disappears on rotate */ scrollbar-gutter: stable; } body.index-can-scroll { overflow: visible; height: auto; width: 100%; max-width: 100%; min-height: 100%; min-height: 100vh; min-height: 100dvh; } body { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); height: 100%; max-width: 100%; overflow: hidden; /* no scroll unless index-can-scroll */ cursor: auto; } body.using-mouse .cursor, body.using-mouse .cursor-follower { opacity: 0; } a, button { cursor: pointer; } /* ---- Custom cursor (disabled) ---- */ .cursor, .cursor-follower { display: none; } /* ---- Splash / ring loader ---- */ .splash { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; transition: opacity 0.65s ease, visibility 0s linear 0.65s; } .splash.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .splash--ring-loader { background-color: #dbeafe; background-image: radial-gradient(ellipse 140% 90% at 50% -30%, rgba(255, 255, 255, 0.75) 0%, transparent 50%), radial-gradient(ellipse 80% 60% at 100% 100%, rgba(147, 197, 253, 0.45) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 0% 80%, rgba(186, 230, 253, 0.5) 0%, transparent 50%), linear-gradient(168deg, #e0f2fe 0%, #bfdbfe 38%, #dbeafe 72%, #f0f9ff 100%); } /* Contrast on light splash: text + ring track */ .splash--ring-loader .ring-loader__pct { color: #0f2744; } .splash--ring-loader .ring-loader__status { color: rgba(15, 39, 68, 0.58); } .splash--ring-loader .ring-loader__track { stroke: rgba(15, 55, 95, 0.14); } .splash--ring-loader .ring-loader__dot { background: rgba(15, 55, 95, 0.2); } .ring-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .ring-loader__wrap { position: relative; /* Larger ring than before; logo stays old visual size via fixed .ring-loader__logo */ width: 300px; height: 300px; } .ring-loader__logo { position: absolute; left: 50%; top: 50%; /* Above SVG ring so progress stroke never paints over the GLB */ z-index: 2; /* 72% of former 220px wrap ≈ same on-screen logo size as before */ width: 158px; height: 158px; transform: translate(-50%, -50%); pointer-events: none; } .ring-loader__logo canvas { display: block; width: 100%; height: 100%; } .ring-loader__logo-fallback { display: none; object-fit: contain; } .bar-loader__track { display: none; width: 80vw; max-width: 300px; height: 4px; background: rgba(15, 55, 95, 0.14); border-radius: 2px; overflow: hidden; margin-bottom: 4px; } .bar-loader__fill { height: 100%; width: 0%; background: var(--color-ocean, #378add); border-radius: 2px; transition: width 0.05s linear; } .ring-loader__svg { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; } .ring-loader__track { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 7; } .ring-loader__arc { fill: none; stroke: var(--color-ocean, #378add); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 0.05s linear; } .ring-loader__pct { margin-top: 14px; font-size: 22px; font-weight: 500; color: #f2eeea; font-family: var(--font-sans); line-height: 1.2; } .ring-loader__status { margin-top: 12px; font-size: 13px; color: rgba(242, 238, 234, 0.65); font-family: var(--font-sans); letter-spacing: 0.02em; min-height: 18px; transition: opacity 0.3s ease; } .ring-loader__dots { display: flex; gap: 6px; margin-top: 10px; } .ring-loader__dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); transition: background 0.3s ease; } .ring-loader__dot.active { background: var(--color-ocean, #378add); } /* ---- App (main site) ---- */ .app { position: relative; width: 100%; max-width: 100%; min-height: 100vh; min-height: 100dvh; opacity: 0; visibility: hidden; transition: opacity 1.15s cubic-bezier(0.22, 0.82, 0.28, 1) 0.08s; } .app.visible { opacity: 1; visibility: visible; } /* When index is scrollable: fixed gradient matches ocean-fill so transparent areas never “switch” bands */ body.index-can-scroll { background-color: #152f3c; background-image: linear-gradient( to bottom, #0f2430 0%, #152f3c 18%, #1a4b5a 38%, #174a5a 58%, #143d4d 78%, #0a1e28 100% ); background-attachment: fixed; background-size: 100% 100%; } body.index-can-scroll .app { background: transparent; } /* ---- Explore overlay (zoomed-in model + place indicators) ---- */ .model-explore-overlay { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease-out), visibility 0.4s; } .model-explore-overlay.visible { opacity: 1; visibility: visible; /* Let clicks reach home scroll content (clients, footer, links). Children that need hits (reset button) keep their own pointer-events: auto. */ pointer-events: none; } .explore-back-btn { position: absolute; top: 1.5rem; left: 1.5rem; z-index: 52; padding: 0.5rem 1rem; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--color-text); border-radius: 999px; color: var(--color-text); cursor: pointer; pointer-events: auto; transition: background 0.2s, color 0.2s; } .explore-back-btn:hover { background: var(--color-text); color: var(--color-bg); } .explore-reset-btn { position: absolute; top: 1.5rem; left: 7rem; z-index: 52; padding: 0.5rem 1rem; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--color-text); border-radius: 999px; color: var(--color-text); cursor: pointer; pointer-events: auto; opacity: 0; visibility: hidden; transform: translateX(-10px); transition: background 0.2s, color 0.2s, opacity 0.3s, visibility 0.3s, transform 0.3s var(--ease-out); } .explore-reset-btn.visible { opacity: 1; visibility: visible; transform: translateX(0); } .explore-reset-btn:hover { background: var(--color-text); color: var(--color-bg); } /* ---- Hero expertise: pin-anchored panels (discipline → slide carousel) ---- */ .hero-expertise-root { position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease-out), visibility 0.35s; } .hero-expertise-root.is-visible { opacity: 1; visibility: visible; } /* Section title: below main nav, above 3D (active expertise track) */ .hero-expertise-scene-title { position: fixed; left: 50%; transform: translateX(-50%); top: clamp(5.35rem, 10.5vh, 6.85rem); z-index: 56; pointer-events: none; text-align: center; max-width: min(94vw, 40rem); padding: 0 clamp(0.75rem, 3vw, 1.5rem); } .hero-expertise-scene-title-headline { margin: 0; font-family: var(--font-sans); font-size: clamp(1rem, 2.5vw, 1.45rem); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.45; } /* Active expertise: ENGINEERING (3D ship / platform views) */ .hero-expertise-scene-title-label { display: inline-block; color: #fff; -webkit-text-stroke: 0.04em rgba(0, 30, 48, 0.88); paint-order: stroke fill; text-shadow: 0 0 1px rgba(0, 0, 0, 0.95), 0 0 24px rgba(0, 212, 255, 0.45), 0 2px 4px rgba(0, 0, 0, 0.75), 1px 1px 0 rgba(0, 0, 0, 0.6), -1px -1px 0 rgba(0, 0, 0, 0.55); transition: opacity 0.25s ease; } .hero-expertise-model-nav { position: fixed; top: 50%; z-index: 57; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 4rem; padding: 0.35rem 0.5rem; margin: 0; cursor: pointer; pointer-events: auto; color: #ffffff; background: transparent; border: none; border-radius: 0; box-shadow: none; transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s var(--ease-out); } .hero-expertise-model-nav--prev { left: clamp(0.35rem, 2vw, 1.1rem); } .hero-expertise-model-nav--next { right: clamp(0.35rem, 2vw, 1.1rem); } .hero-expertise-model-nav-icon { display: block; width: clamp(1.35rem, 4.2vw, 2rem); height: auto; overflow: visible; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45)); transition: filter 0.2s ease; } .hero-expertise-model-nav:hover:not(:disabled), .hero-expertise-model-nav:focus-visible:not(:disabled) { color: #ffffff; transform: translateY(-50%) scale(1.06); outline: none; } .hero-expertise-model-nav:hover:not(:disabled) .hero-expertise-model-nav-icon { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.75)) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)); } .hero-expertise-model-nav:focus-visible:not(:disabled) { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 5px rgba(0, 20, 40, 0.45); border-radius: 4px; } .hero-expertise-model-nav:disabled { opacity: 0.42; cursor: default; pointer-events: none; color: #ffffff; } .hero-expertise-panels { position: absolute; inset: 0; pointer-events: none; } .hero-expertise-pin-panel { position: fixed; width: min(450px, 72vw); max-height: min(510px, 72vh); overflow-y: auto; padding: 0.85rem 1rem 1rem; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.11); background: rgba(8, 12, 20, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); pointer-events: auto; text-align: left; z-index: 56; scrollbar-width: thin; transition: opacity 0.2s ease, visibility 0.2s ease; } .hero-expertise-pin-panel--carousel { width: min(820px, 94vw); max-height: min(920px, 90vh); z-index: 58; } .hero-expertise-pin-panel--carousel .hero-expertise-phase--pick { display: flex !important; flex-direction: column; gap: 0.2rem; pointer-events: none; user-select: none; } .hero-expertise-pin-panel--carousel .hero-expertise-pin-kicker { padding-bottom: 0.1rem; margin: 0; } .hero-expertise-pin-panel--carousel .hero-expertise-discipline-btn { cursor: default; pointer-events: none; width: auto; margin: 0; margin-top: 0; padding: 0; border: none; border-radius: 0; border-bottom: none; background: transparent; box-shadow: none; color: rgba(255, 255, 255, 0.96); font-size: clamp(0.78rem, 2.1vw, 0.95rem); font-weight: 800; letter-spacing: 0.1em; line-height: 1.25; text-align: left; -webkit-text-stroke: 0.04em rgba(0, 18, 32, 0.88); paint-order: stroke fill; text-shadow: 0 0 1px rgba(0, 0, 0, 0.85), 0 0 18px rgba(0, 212, 255, 0.22); } .hero-expertise-pin-panel--carousel .hero-expertise-discipline-btn:hover, .hero-expertise-pin-panel--carousel .hero-expertise-discipline-btn:focus-visible { background: transparent; box-shadow: none; outline: none; } .hero-expertise-pin-panel--carousel .hero-expertise-phase--slide { position: static; pointer-events: auto; } .hero-expertise-pin-panel--carousel .hero-expertise-slide-close { top: 0.5rem; right: 0.55rem; z-index: 12; } .hero-expertise-slide-close { position: absolute; top: 0.15rem; right: 0.1rem; z-index: 3; display: flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: rgba(12, 18, 28, 0.55); color: rgba(255, 255, 255, 0.92); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; } .hero-expertise-slide-close-icon { font-family: var(--font-sans); font-size: 1.35rem; font-weight: 300; line-height: 1; margin-top: -0.08em; } .hero-expertise-slide-close:hover, .hero-expertise-slide-close:focus-visible { background: rgba(196, 90, 42, 0.45); border-color: rgba(0, 212, 255, 0.4); color: #fff; outline: none; box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.22); } .hero-expertise-pin-panel--carousel .hero-expertise-slide-body { padding-right: 0; } /* Collapsed: pill chip + discipline title; slide carousel (incl. Next) must stay hidden — `.hero-expertise-phase { display:flex }` can override the native [hidden] attribute. */ .hero-expertise-phase.hero-expertise-phase--pick[hidden] { display: none !important; } .hero-expertise-phase.hero-expertise-phase--slide[hidden] { display: none !important; } .hero-expertise-pin-panel--title-only .hero-expertise-phase--slide { display: none !important; } /* Collapsed: pill border, 50% opacity fill (same tone as expanded card). */ .hero-expertise-pin-panel--title-only { width: max-content; max-width: min(48rem, calc(100vw - 1.25rem)); padding: 0.45rem 1.1rem; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(8, 12, 20, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18); overflow: visible; max-height: none; } .hero-expertise-pin-panel--title-only .hero-expertise-pin-kicker { display: none; } .hero-expertise-pin-panel--title-only .hero-expertise-phase.hero-expertise-phase--pick { gap: 0; } .hero-expertise-pin-panel--title-only .hero-expertise-discipline-btn { width: auto; max-width: none; margin: 0; padding: 0.12rem 0; border: none; border-radius: 0; border-bottom: none; background: transparent; color: rgba(255, 255, 255, 0.94); font-size: clamp(0.72rem, 2vw, 1rem); white-space: nowrap; font-weight: 800; letter-spacing: 0.1em; line-height: 1.3; text-align: left; -webkit-text-stroke: 0.045em rgba(0, 24, 40, 0.9); paint-order: stroke fill; text-shadow: 0 0 1px rgba(0, 0, 0, 0.88), 0 0 20px rgba(0, 212, 255, 0.28), 1px 1px 0 rgba(0, 0, 0, 0.52); box-shadow: none; } .hero-expertise-pin-panel--title-only .hero-expertise-discipline-btn:hover, .hero-expertise-pin-panel--title-only .hero-expertise-discipline-btn:focus-visible { background: rgba(255, 255, 255, 0.06); box-shadow: none; outline: none; } /* T&I pin 4: “Design installation aids & bidding” — keep on one line (same chip style as other pins) */ .hero-expertise-pin-panel--title-only[data-pin-index='4'] { width: max-content; max-width: min(48rem, calc(100vw - 1.25rem)); } .hero-expertise-pin-panel--title-only[data-pin-index='4'] .hero-expertise-discipline-btn { white-space: nowrap; max-width: none; } .hero-expertise-pin-panel.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .hero-expertise-pin-panel.is-suppressed { opacity: 0; visibility: hidden; pointer-events: none; } /* One discipline expanded: remove other pin chips from layout (not only invisible). */ .hero-expertise-root--solo-carousel .hero-expertise-pin-panel:not(.hero-expertise-pin-panel--carousel) { display: none !important; } .hero-expertise-phase { display: flex; flex-direction: column; gap: 0.45rem; } /* Pick step: long T&I kicker wraps — need clear band before discipline title */ .hero-expertise-phase.hero-expertise-phase--pick { gap: 0.85rem; } .hero-expertise-pin-kicker { margin: 0; padding-bottom: 0.35rem; font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(0, 212, 255, 0.85); line-height: 1.45; flex-shrink: 0; } .hero-expertise-discipline-btn { display: block; width: 100%; margin: 0; margin-top: 0.1rem; padding: 0.7rem 0.6rem 0.65rem; border: none; border-radius: 10px; border-bottom: 2px solid #c45a2a; background: rgba(196, 90, 42, 0.12); color: #fff; font-family: var(--font-sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; line-height: 1.35; cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .hero-expertise-discipline-btn:hover, .hero-expertise-discipline-btn:focus-visible { background: rgba(196, 90, 42, 0.28); outline: none; box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.35); } .hero-expertise-slide-body { display: flex; flex-direction: column; gap: 0.4rem; } /* FEED · SURF: text-only detail (no image carousel / Next) */ .hero-expertise-slide-body--bullet-list { padding: 0.35rem 0.5rem 0.5rem; max-height: min(360px, 52vh); overflow-y: auto; } .hero-expertise-slide-body--bullet-list .hero-expertise-slide-frame--bullet-list { margin-bottom: 0.45rem; min-height: 0; max-height: min(200px, 32vh); } .hero-expertise-slide-body--bullet-list .hero-expertise-slide-img--bullet-list { max-height: min(200px, 32vh); } .hero-expertise-slide-bullets { margin: 0; padding: 0 0 0 1.15rem; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.45; color: rgba(255, 255, 255, 0.92); text-align: left; } .hero-expertise-slide-bullets li { margin: 0 0 0.4rem; padding-left: 0.2rem; } .hero-expertise-slide-bullets li:last-child { margin-bottom: 0; } /* IT Infrastructure: list hidden on desktop (GIF carousel); shown on narrow screens */ .hero-expertise-slide-mobile-bullets { display: none; margin: 0.35rem 0 0; padding: 0 0 0 1.15rem; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.45; color: rgba(255, 255, 255, 0.92); text-align: left; } .hero-expertise-slide-mobile-bullets li { margin: 0 0 0.4rem; padding-left: 0.2rem; } .hero-expertise-slide-mobile-bullets li:last-child { margin-bottom: 0; } .hero-expertise-slide-title { margin: 0; padding: 0 0.25rem; font-family: var(--font-sans); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.95); line-height: 1.35; text-align: center; } /* Space between image block and caption when an image is shown */ .hero-expertise-slide-body > .hero-expertise-slide-frame:not([hidden]) ~ .hero-expertise-slide-title { margin-top: 0.35rem; } .hero-expertise-slide-frame { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); background: #0a1018; min-height: 320px; display: flex; align-items: center; justify-content: center; } .hero-expertise-slide-frame[hidden] { display: none !important; } .hero-expertise-slide-img { display: block; width: 100%; height: auto; max-height: min(580px, 62vh); object-fit: contain; } .hero-expertise-slide-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.25rem; } .hero-expertise-slide-count { margin: 0; font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.65); } .hero-expertise-slide-next { padding: 0.45rem 1rem; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: rgba(196, 90, 42, 0.45); color: #fff; font-family: var(--font-sans); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; } .hero-expertise-slide-next:hover, .hero-expertise-slide-next:focus-visible { background: rgba(196, 90, 42, 0.65); border-color: rgba(0, 212, 255, 0.45); outline: none; box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.25); } @media (max-width: 768px) { .hero-expertise-pin-panel { width: min(420px, 94vw); max-height: min(480px, 70vh); font-size: 0.98em; } .hero-expertise-pin-panel--carousel { width: min(680px, 96vw); max-height: min(820px, 88vh); } .hero-expertise-slide-img { max-height: min(480px, 58vh); } .hero-expertise-pin-panel[data-mobile-slide-bullets='1'] .hero-expertise-slide-frame { display: none !important; } .hero-expertise-pin-panel[data-mobile-slide-bullets='1'] .hero-expertise-slide-mobile-bullets { display: block; } .hero-expertise-pin-panel[data-mobile-slide-bullets='1'] .hero-expertise-slide-body { max-height: min(560px, 74vh); overflow-y: auto; padding-bottom: 0.35rem; } /* Carousel replaced by full bullet list: hide slide chrome */ .hero-expertise-pin-panel[data-mobile-slide-bullets='1'] .hero-expertise-slide-title, .hero-expertise-pin-panel[data-mobile-slide-bullets='1'] .hero-expertise-slide-footer { display: none !important; } /* PMC (and any bullet-list with optional image): text-only on small screens */ .hero-expertise-slide-body--bullet-list .hero-expertise-slide-frame--bullet-list { display: none !important; } } .explore-nav { position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 9999; margin: 0; display: flex; gap: 2.5rem; padding: 1rem 2.5rem; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); pointer-events: auto; overflow: visible; } /* Home: appearance toggle (sundawn / dusk scene = dark mode; light mode wiring TBD) */ .home-theme-toggle { position: fixed; top: max(1.5rem, env(safe-area-inset-top, 0px)); left: max(1.5rem, env(safe-area-inset-left, 0px)); z-index: 9998; display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.55rem 0.95rem; box-sizing: border-box; font-family: var(--font-hero-tagline); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); cursor: pointer; pointer-events: auto; user-select: none; -webkit-user-select: none; transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .page-index.active .home-theme-toggle { pointer-events: auto; } .home-theme-toggle:hover { border-color: rgba(255, 255, 255, 0.42); color: #ffffff; box-shadow: 0 4px 28px rgba(0, 212, 255, 0.18); transform: translateY(-1px); } .home-theme-toggle:focus-visible { outline: 2px solid rgba(0, 212, 255, 0.55); outline-offset: 3px; } .home-theme-toggle__icon { display: flex; width: 1rem; height: 1rem; flex-shrink: 0; opacity: 0.92; } .home-theme-toggle__icon svg { display: block; width: 100%; height: 100%; } html:has(.hero-expertise-root.is-visible) .home-theme-toggle, body.hero-expertise-open .home-theme-toggle, body.hero-pin-zoom-active .home-theme-toggle { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s; } @media (max-width: 768px), (orientation: landscape) and (max-height: 520px) and (max-width: 932px) { .home-theme-toggle { display: none !important; visibility: hidden; pointer-events: none; } } .explore-nav-link { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .explore-nav-link:hover { color: #ffffff; transform: translateY(-2px); text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } .explore-nav-link.active { color: #00d4ff; text-shadow: 0 0 15px rgba(0, 212, 255, 0.6); } /* ABOUT / EXPERTISE — dropdown anchored under its trigger (positioning context) */ .explore-nav-item--dropdown { position: relative; display: flex; align-items: center; } .explore-nav-link--dropdown-trigger::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 0.35em; vertical-align: 0.15em; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.65; transition: transform 0.2s var(--ease-out), opacity 0.2s; } .explore-nav-item--dropdown:hover .explore-nav-link--dropdown-trigger::after, .explore-nav-item--dropdown:focus-within .explore-nav-link--dropdown-trigger::after { transform: rotate(180deg); opacity: 0.9; } /* Second row: default = under trigger; .explore-nav-dropdown--about = centered on full .explore-nav pill */ .explore-nav-dropdown { position: absolute; left: 50%; top: calc(100% + 0.5rem); transform: translateX(-50%); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem 1.15rem; box-sizing: border-box; width: max-content; max-width: min(94vw, 920px); padding: 0.65rem 1.35rem; margin: 0; list-style: none; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.94); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s var(--ease-out), visibility 0.22s; z-index: 10002; isolation: isolate; } .explore-nav-item--dropdown:not(.explore-nav-item--dropdown-about):hover .explore-nav-dropdown, .explore-nav-item--dropdown:not(.explore-nav-item--dropdown-about):focus-within .explore-nav-dropdown, .explore-nav-item--dropdown:not(.explore-nav-item--dropdown-about) .explore-nav-dropdown:hover, .explore-nav-item--dropdown:not(.explore-nav-item--dropdown-about) .explore-nav-dropdown:focus-within, .explore-nav-item--dropdown-about:hover ~ .explore-nav-dropdown--about, .explore-nav-item--dropdown-about:focus-within ~ .explore-nav-dropdown--about, .explore-nav-dropdown--about:hover, .explore-nav-dropdown--about:focus-within, .explore-nav-item--dropdown-expertise:hover ~ .explore-nav-dropdown--expertise, .explore-nav-item--dropdown-expertise:focus-within ~ .explore-nav-dropdown--expertise, .explore-nav-dropdown--expertise:hover, .explore-nav-dropdown--expertise:focus-within, .explore-nav-dropdown.is-open { opacity: 1; visibility: visible; pointer-events: auto; } /* Links match .explore-nav-link: no inner pills, glow on hover/active only */ .explore-nav-dropdown-link { display: block; flex: 0 0 auto; padding: 0.35rem 0.15rem; font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; white-space: nowrap; color: rgba(255, 255, 255, 0.88); text-decoration: none; text-shadow: none; border: none; border-radius: 0; background: transparent; -webkit-font-smoothing: antialiased; transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease; } .explore-nav-dropdown-link:hover { color: #ffffff; transform: translateY(-1px); text-shadow: 0 0 10px rgba(255, 255, 255, 0.45); background: transparent; } .explore-nav-dropdown-link:focus-visible { outline: 2px solid rgba(0, 212, 255, 0.5); outline-offset: 3px; color: #ffffff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.45); background: transparent; } .explore-nav-dropdown-link.active { color: #00d4ff; text-shadow: 0 0 14px rgba(0, 212, 255, 0.55); } .explore-nav-item--dropdown:hover .explore-nav-link--dropdown-trigger:not(.active), .explore-nav-item--dropdown:focus-within .explore-nav-link--dropdown-trigger:not(.active) { color: #ffffff; } @media (max-width: 768px) { .explore-nav { gap: 1.2rem; padding: 0.8rem 1.5rem; flex-wrap: wrap; justify-content: center; max-width: 95vw; } .explore-nav-link { font-size: 0.75rem; letter-spacing: 0.1em; } } @media (max-width: 480px) { .explore-nav { gap: 0.5rem; padding: 0.4rem 0.8rem; } .explore-nav-link { font-size: 0.6rem; } } /* ---- Mobile drawer navigation (phones + compact tablet/landscape — matches extended mobile hero bundle) ---- */ .mobile-nav-toggle, .mobile-nav-overlay, .mobile-nav-drawer { display: none; } @media (max-width: 768px), (orientation: landscape) and (max-height: 520px) and (max-width: 932px) { .explore-nav { display: none !important; } .mobile-nav-toggle { display: flex; align-items: center; justify-content: center; position: fixed; top: max(1rem, env(safe-area-inset-top, 0px)); left: max(1rem, env(safe-area-inset-left, 0px)); z-index: 10002; width: 48px; height: 48px; padding: 0; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 12px; background: rgba(10, 15, 25, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } .mobile-nav-bars { position: relative; display: block; width: 20px; height: 2px; background: #e8f4f8; border-radius: 1px; transition: background 0.2s; } .mobile-nav-bars::before, .mobile-nav-bars::after { content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 2px; background: #e8f4f8; border-radius: 1px; transition: transform 0.25s var(--ease-out); } .mobile-nav-bars::before { transform: translateY(-6px); } .mobile-nav-bars::after { transform: translateY(6px); } body.mobile-nav-open .mobile-nav-bars { background: transparent; } body.mobile-nav-open .mobile-nav-bars::before { transform: translateY(0) rotate(45deg); } body.mobile-nav-open .mobile-nav-bars::after { transform: translateY(0) rotate(-45deg); } .mobile-nav-overlay { display: block; position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease-out), visibility 0.35s; pointer-events: none; } body.mobile-nav-open .mobile-nav-overlay { opacity: 1; visibility: visible; pointer-events: auto; } .mobile-nav-drawer { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 1rem)); max-width: 100%; overflow-x: hidden; box-sizing: border-box; z-index: 10001; background: rgba(10, 15, 25, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-right: 1px solid rgba(0, 212, 255, 0.2); box-shadow: 8px 0 40px rgba(0, 0, 0, 0.45); transform: translateX(-100%); transition: transform 0.4s var(--ease-out); padding: 0; } /* Drawer above stray high z-index UI; toggle above drawer so the menu control stays tappable */ body.mobile-nav-open .mobile-nav-drawer { transform: translateX(0); z-index: 10003; } /* Hide the fixed hamburger while open — it animates to an X and duplicated the drawer close control */ body.mobile-nav-open .mobile-nav-toggle { visibility: hidden; opacity: 0; pointer-events: none; } .mobile-nav-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; z-index: 2; } .mobile-nav-drawer-brand { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; color: #00d4ff; } .mobile-nav-drawer-close { flex-shrink: 0; width: 44px; height: 44px; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #e8f4f8; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; pointer-events: auto; touch-action: manipulation; position: relative; z-index: 3; } .mobile-nav-drawer-nav { display: flex; flex-direction: column; padding: 1rem 0.75rem 2rem; gap: 0.25rem; min-width: 0; max-width: 100%; box-sizing: border-box; } .mobile-nav-drawer-label { margin: 0.75rem 1rem 0.15rem; padding: 0 0.25rem; font-family: var(--font-sans); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(0, 212, 255, 0.75); } .mobile-nav-drawer-link { display: block; padding: 1rem 1rem; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.88); text-decoration: none; border-radius: 10px; border-left: 3px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s; max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .mobile-nav-drawer-link:hover, .mobile-nav-drawer-link:focus-visible { background: rgba(0, 212, 255, 0.1); color: #fff; } .mobile-nav-drawer-link.active { color: #00d4ff; border-left-color: #00d4ff; background: rgba(0, 212, 255, 0.08); } body.mobile-nav-open { overflow: hidden; touch-action: none; } /* Custom cursor nodes must never sit above the drawer hit target (invisible layers still steal clicks). */ body.mobile-nav-open .cursor, body.mobile-nav-open .cursor-follower { pointer-events: none !important; display: none !important; } html.mobile-nav-open { overflow: hidden; } /* Default `auto` keeps finger scrolling natural; `smooth` made `scrollTo({behavior:'auto'})` follow CSS and land short/long of section tops on mobile browsers. */ body.index-can-scroll { scroll-behavior: auto; } } .explore-tooltip { position: fixed; z-index: 60; padding: 0.6rem 0.9rem; background: rgba(10, 10, 10, 0.94); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s; max-width: 220px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } .explore-tooltip.visible { opacity: 1; visibility: visible; } .explore-tooltip-title { display: block; font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; color: #fff; margin-bottom: 0.25rem; } .explore-tooltip-desc { display: block; font-size: 0.8rem; color: rgba(255, 255, 255, 0.8); line-height: 1.35; } .btn-explore { border: 2px solid var(--color-text); background: transparent; font-family: var(--font-sans); font-size: 1rem; font-weight: 500; color: var(--color-text); padding: 0.75rem 1.5rem; border-radius: 999px; cursor: pointer; transition: background 0.3s, color 0.3s, transform 0.2s; } .btn-explore:hover { background: var(--color-text); color: var(--color-bg); transform: scale(1.02); } /* Page content visible during scroll, hidden when scrolled down */ .page-index-content, .hint-drag { transition: opacity 0.4s var(--ease-out); } /* ---- Header (removed from DOM; styles kept for reference) ---- */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; mix-blend-mode: difference; color: #fff; } .logo { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 500; text-decoration: none; color: inherit; letter-spacing: 0.02em; } .nav { display: flex; align-items: center; gap: 2rem; } .nav-link { font-size: 0.9rem; font-weight: 500; text-decoration: none; color: inherit; position: relative; padding: 0.35rem 0.9rem; border-radius: 999px; transition: background 0.3s var(--ease-out), color 0.3s; } /* Unseen-style pill background on hover/active */ .nav-link::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.28); opacity: 0; transition: opacity 0.3s var(--ease-out); z-index: -1; } .nav-link:hover::before, .nav-link.active::before { opacity: 1; } .menu-toggle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; background: transparent; display: flex; align-items: center; justify-content: center; gap: 4px; transition: transform 0.3s, background 0.3s; } .menu-toggle:hover { background: rgba(255,255,255,0.1); } .menu-dot { width: 4px; height: 4px; background: currentColor; border-radius: 50%; transition: opacity 0.2s; } .menu-toggle.open .menu-dot { opacity: 0; } .menu-toggle.open { position: relative; } .menu-toggle.open::before, .menu-toggle.open::after { content: ''; position: absolute; width: 18px; height: 2px; background: currentColor; top: 50%; left: 50%; transition: transform 0.3s var(--ease-out); } .menu-toggle.open::before { transform: translate(-50%, -50%) rotate(45deg); } .menu-toggle.open::after { transform: translate(-50%, -50%) rotate(-45deg); } /* ---- Menu overlay ---- */ .menu-overlay { position: fixed; inset: 0; z-index: 200; background: var(--color-menu-bg); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease-out), visibility 0.4s; } .menu-overlay.open { opacity: 1; visibility: visible; } .menu-overlay.open .menu-link { opacity: 1; transform: translateY(0); } .menu-inner { text-align: center; width: 100%; max-width: 900px; padding: 2rem; } .menu-nav { display: flex; flex-direction: column; gap: 0.5rem; } .menu-link { font-family: var(--font-sans); font-size: clamp(2rem, 6vw, 4rem); font-weight: 700; text-decoration: none; color: var(--color-text); display: block; padding: 0.2em 0; opacity: 0; transform: translateY(24px); transition: color 0.2s, opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .menu-link:nth-child(1) { transition-delay: 0.05s; } .menu-link:nth-child(2) { transition-delay: 0.1s; } .menu-link:nth-child(3) { transition-delay: 0.15s; } .menu-link:nth-child(4) { transition-delay: 0.2s; } .menu-link:hover { color: var(--color-accent); } .menu-num { font-family: var(--font-sans); font-size: 0.35em; font-weight: 500; margin-right: 0.3em; opacity: 0.7; } .menu-footer { margin-top: 4rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; font-size: 0.9rem; } .menu-footer a { color: var(--color-text-muted); text-decoration: none; transition: color 0.2s; } .menu-footer a:hover { color: var(--color-text); } /* ---- 3D Canvas ---- */ .canvas-3d { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: auto; transition: opacity 0.45s var(--ease-out), visibility 0.45s; } body.contact-page-ui-only .canvas-3d, body.contact-page-ui-only #canvas-3d { opacity: 0; visibility: hidden; pointer-events: none; } /* About, Contact & Expertise (mobile): same hero ocean / vessel / platform as home, drawn at 30% opacity over the page backdrop */ body.contact-page-ui-only.about-route .canvas-3d, body.contact-page-ui-only.about-route #canvas-3d, body.contact-page-ui-only.expertise-route .canvas-3d, body.contact-page-ui-only.expertise-route #canvas-3d, body.contact-page-ui-only.contact-route .canvas-3d, body.contact-page-ui-only.contact-route #canvas-3d { opacity: 0.3; visibility: visible; pointer-events: none; } body.contact-page-ui-only { background: #0a0a0a; } body.contact-page-ui-only.about-route .page-about-full { background: transparent; } /* Expertise on mobile: ocean shows through (desktop keeps solid gradient over interior room) */ @media (max-width: 768px) { body.contact-page-ui-only.expertise-route .page-expertise-page { background: transparent; } } body.contact-page-ui-only.contact-route .page-contact { background: transparent; } /* When index page is scrollable, canvas scrolls with the page (model + water move with scroll) */ body.index-can-scroll .canvas-3d { position: absolute; left: 0; right: 0; width: 100%; max-width: 100%; height: 100vh; /* Long soft fade into #1a4b5a (ocean fill) — avoids a hard “split line” vs the CSS sea */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 36%, rgba(0, 0, 0, 0.92) 48%, rgba(0, 0, 0, 0.72) 58%, rgba(0, 0, 0, 0.42) 68%, rgba(0, 0, 0, 0.18) 78%, rgba(0, 0, 0, 0.05) 88%, transparent 96%, transparent 100% ); mask-image: linear-gradient(to bottom, #000 0%, #000 36%, rgba(0, 0, 0, 0.92) 48%, rgba(0, 0, 0, 0.72) 58%, rgba(0, 0, 0, 0.42) 68%, rgba(0, 0, 0, 0.18) 78%, rgba(0, 0, 0, 0.05) 88%, transparent 96%, transparent 100% ); } /* Transition overlay - disabled */ .ocean-transition-overlay { display: none; pointer-events: none; } /* Ocean fill: from waterline (top sea) down into deep sea – only when index scrollable */ .ocean-fill { display: none; pointer-events: none; } body.index-can-scroll .ocean-fill { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; z-index: -1; pointer-events: none; /* Same palette as body (fixed) but drawn in document space — smooth stops, no stepped “stripes” */ background: linear-gradient( to bottom, #0f2430 0%, #152f3c 14%, #1a4b5a 32%, #194f5f 52%, #164555 72%, #0d2834 92%, #051018 100% ); } /* Lighter scrollable-ocean band when home hero is in light (midday) appearance */ body.hero-appearance-light.index-can-scroll .ocean-fill { background: linear-gradient( to bottom, #1a4a62 0%, #1e5a72 14%, #246a82 32%, #2a7a90 52%, #256a82 72%, #1a4a5a 92%, #0f3040 100% ); } /* Animated ripple at water surface (looking up from underwater) */ .ocean-surface-ripple { position: absolute; top: 0; left: -10%; right: -10%; height: 15vh; background: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(100, 180, 200, 0.15) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 60% 0%, rgba(120, 200, 220, 0.12) 0%, transparent 45%), radial-gradient(ellipse 70% 45% at 85% 0%, rgba(80, 160, 180, 0.1) 0%, transparent 40%); animation: surfaceRipple 6s ease-in-out infinite; pointer-events: none; } @keyframes surfaceRipple { 0%, 100% { transform: translateX(0) scaleY(1); opacity: 0.8; } 33% { transform: translateX(2%) scaleY(1.1); opacity: 1; } 66% { transform: translateX(-1%) scaleY(0.95); opacity: 0.9; } } /* ---- Pages ---- */ .page { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 6rem 2rem 4rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.6s var(--ease-out), visibility 0.6s; } .page.active { opacity: 1; visibility: visible; pointer-events: auto; } /* Hero glass routes: skip page-level opacity fade. Parent opacity below 1 stacks with rgba + backdrop-filter on cards and reads as see-through then solid after the transition ends. */ .page.page-contact, .page.page-about-full { transition: opacity 0s linear, visibility 0s linear; } /* Non-home → Projects: outgoing page dissolves before route commits (see setPage in main.js) */ .page.active.page--fading-out { opacity: 0; pointer-events: none; transition: opacity 0.92s var(--ease-out); } /* Index: let clicks pass through to canvas (3D selection points) except on interactive content */ .page-index.active { pointer-events: none; } .page-index.active .page-index-content, .page-index.active .page-index-content *, .page-index.active .btn-primary, .page-index.active .hint-drag { pointer-events: auto; } /* Index (Hero) – center content in the middle of the page */ .page-index { flex-direction: column; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; /* Full-bleed children use negative margins; clip sub-pixel overflow (no horizontal scrollbar). */ overflow-x: hidden; } .page-index-content { text-align: center; max-width: 800px; } .page-index-content .page-index-label, .page-index-content .page-index-headline, .page-index-content .btn-primary { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .page-index.active .page-index-content .page-index-label { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } .page-index.active .page-index-content .page-index-headline { opacity: 1; transform: translateY(0); transition-delay: 0.25s; } .page-index.active .page-index-content .btn-primary { opacity: 1; transform: translateY(0); transition-delay: 0.45s; } .page-index-label { font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--color-text-muted); } .page-index-headline { font-size: clamp(2.5rem, 8vw, 5rem); line-height: 1.1; margin-bottom: 1.5rem; font-weight: 400; } .headline-serif { font-family: var(--font-sans); font-style: normal; } .headline-sans { font-family: var(--font-sans); font-weight: 600; } .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 500; background: transparent; border: 2px solid var(--color-text); border-radius: 999px; color: var(--color-text); text-decoration: none; transition: background 0.3s, color 0.3s, transform 0.2s; } .btn-primary:hover { background: var(--color-text); color: var(--color-bg); transform: scale(1.02); } /* Home hero — top-left / east; top nudged down so headline band aligns with the GLB “T” crossbar (3D logo sits mid-sky). */ .hero-sky-block { position: fixed; top: clamp(10.25rem, 25.5vh, 14.25rem); left: clamp(3.25rem, 8vw, 6.5rem); right: auto; transform: none; z-index: 54; max-width: min(30rem, min(94vw, calc(50vw - 2rem))); margin: 0; padding: 0; padding-left: env(safe-area-inset-left, 0); display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } /* Only on Home: fixed layer ignores inactive .page visibility — remove from layout on all other routes */ .page-index:not(.active) .hero-sky-block { display: none !important; visibility: hidden !important; pointer-events: none !important; } .page-index.active .hero-sky-block:not(.hero-sky-block--below-fold) { opacity: 1; } .hero-sky-block.hero-sky-block--below-fold { opacity: 0 !important; visibility: hidden; transition-duration: 0.2s; } /* Home hero — right side; same type scale as left block, content left-aligned in this column */ .hero-sky-block--east { left: auto; right: clamp(3.25rem, 8vw, 6.5rem); padding-left: 0; padding-right: env(safe-area-inset-right, 0); align-items: flex-start; } .hero-sky-block--east .hero-sky-tagline { align-items: flex-start; } .hero-sky-block--east .hero-sky-tagline__row--top, .hero-sky-block--east .hero-sky-tagline__row--bottom { justify-content: flex-start; } .hero-sky-block--east .hero-learn-more-btn { align-self: flex-start; } /* Hero expertise keeps #index + .page-index.active — hide sky headline (CSS :has + body class from main.js). */ /* Home pin zoom (vessel/platform red pins): same hide; body class cleared by Reset View (main.js). */ html:has(.hero-expertise-root.is-visible) .hero-sky-block, body.hero-expertise-open .hero-sky-block, body.hero-pin-zoom-active .hero-sky-block { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition-duration: 0.2s; } .hero-sky-tagline { display: flex; flex-direction: column; align-items: flex-end; margin: 0; padding: 0; font-family: var(--font-hero-tagline); font-weight: 600; font-synthesis: none; text-transform: uppercase; text-rendering: geometricPrecision; line-height: 1.05; color: #646668; text-shadow: none; filter: none; } .hero-sky-rule { display: block; align-self: stretch; width: auto; max-width: none; height: 2px; margin: 0.55rem 0 0.65rem; padding: 0; border: none; background: #ffffff; opacity: 0.92; } .hero-learn-more-btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; margin: 0; padding: 0.5rem 1.35rem; font-family: var(--font-hero-tagline); font-size: clamp(0.68rem, 1.15vw, 0.8125rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 2px; cursor: pointer; pointer-events: auto; transition: border-color 0.22s ease, color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease; } .hero-learn-more-btn:hover { color: #f4f6f7; border-color: rgba(74, 76, 78, 0.95); background-color: rgba(100, 102, 104, 0.78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } .hero-learn-more-btn:active { color: #ffffff; background-color: rgba(74, 76, 78, 0.88); border-color: rgba(58, 60, 62, 0.98); } .hero-learn-more-btn:focus-visible { outline: 2px solid rgba(100, 102, 104, 0.9); outline-offset: 3px; } .hero-learn-more-btn:focus-visible:hover { color: #f4f6f7; background-color: rgba(100, 102, 104, 0.78); border-color: rgba(74, 76, 78, 0.95); } .hero-sky-tagline__row { display: block; } .hero-sky-tagline__row--top { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: flex-end; gap: 0.3em; font-size: clamp(1.2rem, 2.50vw, 1.8rem); font-weight: 600; letter-spacing: 0.16em; line-height: 1.08; color: #fdfeff; } .hero-sky-tagline__row--bottom { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: flex-end; gap: 0.32em; margin-top: 0; font-size: clamp(1.55rem, 4.25vw, 2.65rem); font-weight: 700; letter-spacing: 0.085em; line-height: 1.05; color: #c41e3a; } .hero-sky-tagline__for, .hero-sky-tagline__a, .hero-sky-tagline__powerful, .hero-sky-tagline__future, .hero-sky-tagline__driving, .hero-sky-tagline__horizon { white-space: nowrap; color: inherit; font: inherit; text-shadow: none; filter: none; background: none; -webkit-text-fill-color: currentColor; } /* Light hero (3D): white headline band → black for contrast on bright sky */ body.hero-appearance-light .hero-sky-tagline__row--top { color: #0a0a0a; } body.hero-appearance-light .hero-sky-rule { background: #0a0a0a; opacity: 1; } body.hero-appearance-light .hero-learn-more-btn { color: #0a0a0a; border-color: #0a0a0a; } body.hero-appearance-light .hero-learn-more-btn:hover { color: #0a0a0a; border-color: #1a1a1a; background-color: rgba(0, 0, 0, 0.07); box-shadow: none; } body.hero-appearance-light .hero-learn-more-btn:active { color: #0a0a0a; background-color: rgba(0, 0, 0, 0.12); border-color: #0a0a0a; } body.hero-appearance-light .hero-learn-more-btn:focus-visible { outline: 2px solid rgba(0, 0, 0, 0.5); outline-offset: 3px; } body.hero-appearance-light .hero-learn-more-btn:focus-visible:hover { color: #0a0a0a; border-color: #0a0a0a; background-color: rgba(0, 0, 0, 0.07); } .hint-drag { position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%); font-size: 0.8rem; mix-blend-mode: difference; color: #fff; opacity: 0; transition: opacity 0.8s var(--ease-out) 0.6s; white-space: nowrap; } .hint-scroll { opacity: 0.85; } .hint-arrow { display: inline-block; animation: hintBounce 1.6s ease-in-out infinite; } @keyframes hintBounce { 0%, 100% { transform: translateY(0); opacity: 0.85; } 50% { transform: translateY(5px); opacity: 1; } } .page-index.active .hint-drag { opacity: 1; } /* Home: “Scroll” moved to top-left Learn more — hide bottom hint on desktop */ @media (min-width: 769px) { .page-index.active .hint-drag { display: none; } } /* Index page: scrollable area before clicking Explore (spacer gives scroll height) */ body.index-can-scroll .page-index { min-height: auto; align-items: center; padding-top: 0; /* .page uses padding-bottom: 4rem — removes gap/teal band below the footer */ padding-bottom: 0; justify-content: flex-start; display: flex; flex-direction: column; } /* Sticky document footer: fill viewport when content is short; scroll to see footer when long */ body.index-can-scroll .page-index.active { min-height: 100vh; min-height: 100dvh; } body.index-can-scroll .page-index .site-footer { pointer-events: auto; width: 100%; flex-shrink: 0; } /* Home: clients + footer edge-to-edge — .page uses horizontal padding (2rem) which inset these; break out to full viewport */ body.index-can-scroll .page-index > .page-clients-section, body.index-can-scroll .page-index > .site-footer { width: calc(100% + 4rem); max-width: none; margin-left: -2rem; margin-right: -2rem; box-sizing: border-box; } .page-index-spacer { flex: 0 0 auto; min-height: 100vh; min-height: 100dvh; width: 100%; pointer-events: none; } /* ================================================================ SLIDE TRANSITION OVERLAY — diving bubbles ================================================================ */ .slide-overlay { position: fixed; inset: 0; z-index: 800; pointer-events: none; overflow: hidden; } .slide-overlay::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 70%, rgba(14, 54, 82, 0.96) 0%, rgba(8, 38, 62, 0.97) 45%, rgba(4, 24, 42, 0.98) 100% ); opacity: 0; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .slide-overlay.dive-in::before { opacity: 1; } .slide-overlay.dive-out::before { opacity: 0; transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.08s; } /* Bubble wrapper: handles the vertical rise */ .dive-wrap { position: absolute; left: var(--x, 50%); bottom: calc(-1 * var(--size, 24px) - 30px); width: var(--size, 24px); height: var(--size, 24px); pointer-events: none; z-index: 801; opacity: 0; } /* The visible bubble sphere */ .dive-wrap .dive-bubble { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.9) 0%, rgba(230, 245, 255, 0.45) 18%, rgba(180, 220, 245, 0.18) 45%, rgba(120, 190, 220, 0.06) 72%, transparent 100% ); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset -1px -2px 5px rgba(80, 160, 210, 0.1), inset 1px 1px 3px rgba(255, 255, 255, 0.35); } /* Specular highlight dot on bubble */ .dive-wrap .dive-bubble::after { content: ''; position: absolute; top: 18%; left: 26%; width: 22%; height: 16%; border-radius: 50%; background: rgba(255, 255, 255, 0.65); filter: blur(1px); } /* Vertical rise: smooth deceleration (bubbles slow near surface) */ @keyframes diveRiseY { 0% { transform: translateY(0); opacity: 0; } 3% { opacity: var(--peak, 0.8); } 65% { opacity: calc(var(--peak, 0.8) * 0.7); } 88% { opacity: calc(var(--peak, 0.8) * 0.2); } 100% { transform: translateY(-130vh); opacity: 0; } } /* Horizontal wobble: smooth sine-wave sway */ @keyframes diveWobble { 0% { transform: translateX(0); } 16% { transform: translateX(var(--w1, 10px)); } 33% { transform: translateX(calc(var(--w2, -8px) * 0.4)); } 50% { transform: translateX(var(--w2, -8px)); } 66% { transform: translateX(calc(var(--w1, 10px) * 0.3)); } 83% { transform: translateX(var(--w1, 10px)); } 100% { transform: translateX(0); } } /* Scale pulse: bubbles expand as they rise (less pressure) */ @keyframes diveScale { 0% { transform: scale(0.45); } 15% { transform: scale(0.75); } 40% { transform: scale(0.92); } 70% { transform: scale(1.0); } 100% { transform: scale(1.06); } } .dive-wrap.active { animation: diveRiseY var(--dur, 1.5s) cubic-bezier(0.15, 0, 0.35, 1) var(--delay, 0ms) both; } .dive-wrap.active .dive-bubble { animation: diveWobble var(--wobble-dur, 1.1s) ease-in-out var(--delay, 0ms) infinite, diveScale var(--dur, 1.5s) ease-out var(--delay, 0ms) both; } /* ================================================================ SECTION ENTRANCE ANIMATION KEYFRAMES ================================================================ */ @keyframes revealUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } @keyframes revealLine { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } @keyframes revealFade { from { opacity: 0; } to { opacity: 1; } } /* Divider lines start collapsed (can't use inline style on ::before) */ .page-about-section::before, .page-expertise-section::before, .page-clients-section::before { transform-origin: center; transform: scaleX(0); opacity: 0; } /* Remove whole-section fade — inner elements handle their own animation */ body.index-can-scroll .page-about-section, body.index-can-scroll .page-expertise-section, body.index-can-scroll .page-clients-section { opacity: 1; transform: none; transition: none; } /* ---- About section revealed ---- */ .page-about-section.section-revealed::before { animation: revealLine 0.65s var(--ease-out) 0.08s both; } .page-about-section.section-revealed .page-about-label { animation: revealUp 0.65s var(--ease-out) 0.22s both; } .page-about-section.section-revealed .page-about-headline { animation: revealUp 0.7s var(--ease-out) 0.38s both; } .page-about-section.section-revealed .page-about-body { animation: revealUp 0.65s var(--ease-out) 0.53s both; } /* Second paragraph — general sibling combinator */ .page-about-section.section-revealed .page-about-body ~ .page-about-body { animation: revealUp 0.65s var(--ease-out) 0.67s both; } /* ---- Expertise section revealed ---- */ .page-expertise-section.section-revealed::before { animation: revealLine 0.65s var(--ease-out) 0.08s both; } .page-expertise-section.section-revealed .page-expertise-label { animation: revealUp 0.65s var(--ease-out) 0.2s both; } .page-expertise-section.section-revealed .page-expertise-headline { animation: revealUp 0.7s var(--ease-out) 0.34s both; } .page-expertise-section.section-revealed .page-expertise-pillar { animation: revealUp 0.65s var(--ease-out) 0.48s both; } .page-expertise-section.section-revealed .expertise-block-heading { animation: revealUp 0.6s var(--ease-out) 0.42s both; } .page-expertise-section.section-revealed .expertise-card { animation: revealUp 0.55s var(--ease-out) 0.55s both; } /* ---- Clients section revealed ---- */ .page-clients-section.section-revealed::before { animation: revealLine 0.65s var(--ease-out) 0.08s both; } .page-clients-section.section-revealed .page-clients-label { animation: revealUp 0.65s var(--ease-out) 0.22s both; } .page-clients-section.section-revealed .page-clients-headline { animation: revealUp 0.7s var(--ease-out) 0.38s both; } .page-clients-section.section-revealed .clients-react-mount { animation: revealFade 0.8s var(--ease-out) 0.53s both; } /* ---- Disable animations when scrolling UP (instant reveal) ---- */ .page-about-section.no-scroll-animation::before, .page-about-section.no-scroll-animation .page-about-label, .page-about-section.no-scroll-animation .page-about-headline, .page-about-section.no-scroll-animation .page-about-body, .page-clients-section.no-scroll-animation::before, .page-clients-section.no-scroll-animation .page-clients-label, .page-clients-section.no-scroll-animation .page-clients-headline, .page-clients-section.no-scroll-animation .clients-react-mount, .page-expertise-section.no-scroll-animation::before, .page-expertise-section.no-scroll-animation .page-expertise-label, .page-expertise-section.no-scroll-animation .page-expertise-headline, .page-expertise-section.no-scroll-animation .page-expertise-pillar, .page-expertise-section.no-scroll-animation .expertise-block-heading, .page-expertise-section.no-scroll-animation .expertise-card { animation: none !important; opacity: 1 !important; transform: none !important; } /* ---- About / Solutions section (underwater scroll area on index) ---- */ .page-about-section { position: relative; z-index: 5; width: 100%; max-width: 780px; margin: 0 auto; padding: 4rem 2rem 6rem; text-align: center; pointer-events: auto; opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); flex-shrink: 0; /* Fill the viewport so clients section starts below the fold */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; } body.index-can-scroll .page-about-section { opacity: 1; transform: translateY(0); transition-delay: 0.15s; } .page-about-label { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(160, 210, 230, 0.75); margin-bottom: 1.25rem; } .page-about-headline { font-family: var(--font-sans); font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 700; line-height: 1.15; color: #e8f4f8; margin-bottom: 2.5rem; } .page-about-headline em { font-style: italic; color: rgba(200, 235, 245, 0.9); } .page-about-body { font-family: var(--font-sans); font-size: clamp(1.05rem, 1.8vw, 1.2rem); line-height: 1.85; color: rgba(200, 225, 235, 0.85); max-width: 660px; margin: 0 auto 1.6rem; } .page-about-body:last-child { margin-bottom: 0; } /* Decorative divider line above the section */ .page-about-section::before { content: ''; display: block; width: 48px; height: 1px; background: rgba(160, 210, 230, 0.4); margin: 0 auto 3rem; align-self: center; flex-shrink: 0; } /* ---- Expertise section (underwater scroll area) ---- */ .page-expertise-section { position: relative; z-index: 5; width: 100%; max-width: 1180px; margin: 0 auto; padding: 4rem 2rem 5rem; text-align: center; pointer-events: auto; opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); flex-shrink: 0; scroll-margin-top: 5rem; } body.index-can-scroll .page-expertise-section { opacity: 1; transform: translateY(0); transition-delay: 0.28s; } .page-expertise-section::before { content: ''; display: block; width: 60%; max-width: 480px; height: 1px; background: rgba(160, 210, 230, 0.18); margin: 0 auto 3rem; } .page-expertise-label { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(160, 210, 230, 0.75); margin-bottom: 1rem; } .page-expertise-headline { font-family: var(--font-sans); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; line-height: 1.15; color: #e8f4f8; margin-bottom: 2.25rem; } .page-expertise-headline em { font-style: italic; color: rgba(200, 235, 245, 0.92); } .page-expertise-pillar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.65rem 1rem; margin: 0 auto 2.75rem; max-width: 920px; padding: 1rem 1.35rem; font-family: var(--font-sans); font-size: clamp(0.68rem, 1.35vw, 0.78rem); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.45; color: #f5f9fb; background: linear-gradient(135deg, rgba(196, 92, 38, 0.92) 0%, rgba(160, 72, 32, 0.95) 100%); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .page-expertise-pillar-item abbr { text-decoration: none; font-weight: 700; letter-spacing: 0.08em; opacity: 0.95; } .page-expertise-pillar-divider { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); flex-shrink: 0; } .page-expertise-pillar--single { max-width: 720px; } .page-expertise-pillar-item--full { letter-spacing: 0.1em; } .expertise-block { margin-bottom: 3.5rem; } .expertise-block:last-child { margin-bottom: 0; } .expertise-block-heading { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(160, 210, 230, 0.85); margin-bottom: 1.25rem; } .expertise-block-lede { font-size: 0.95rem; line-height: 1.6; color: rgba(220, 232, 240, 0.86); max-width: 40rem; margin: 0; } .expertise-grid { display: grid; gap: 1.25rem; text-align: left; } .expertise-grid--four { grid-template-columns: repeat(4, 1fr); } .expertise-grid--six { grid-template-columns: repeat(3, 1fr); } .expertise-card { display: flex; flex-direction: column; min-height: 100%; background: rgba(12, 32, 42, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 12px; border: 1px solid rgba(160, 210, 230, 0.2); overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out); } .expertise-card:hover { border-color: rgba(196, 92, 38, 0.45); box-shadow: 0 20px 56px rgba(0, 0, 0, 0.24); transform: translateY(-3px); } .expertise-card-title { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #f8fbfc; margin: 0; padding: 1rem 1.15rem; background: linear-gradient(90deg, rgba(196, 92, 38, 0.95), rgba(170, 78, 34, 0.98)); border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .expertise-card-list { list-style: none; margin: 0; padding: 1.15rem 1.15rem 1.25rem 1.35rem; font-family: var(--font-sans); font-size: 0.84rem; line-height: 1.55; color: rgba(210, 232, 240, 0.88); } .expertise-card-list li { position: relative; padding-left: 0.85rem; margin-bottom: 0.55rem; } .expertise-card-list li:last-child { margin-bottom: 0; } .expertise-card-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 1px; background: var(--color-accent); opacity: 0.85; } /* ---- Our Clients section (underwater scroll area) ---- */ .page-clients-section { position: relative; z-index: 5; width: 100%; padding: 4rem 0 7rem; margin-top: 2rem; text-align: center; pointer-events: auto; opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); flex-shrink: 0; } body.index-can-scroll .page-clients-section { opacity: 1; transform: translateY(0); transition-delay: 0.4s; } .page-clients-section::before { content: ''; display: block; width: 60%; max-width: 480px; height: 1px; background: rgba(160, 210, 230, 0.18); margin: 0 auto 4rem; } .page-clients-label { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(160, 210, 230, 0.75); margin-bottom: 0.75rem; } .page-clients-headline { font-family: var(--font-sans); font-size: clamp(2rem, 5.5vw, 3.5rem); font-weight: 700; color: #e8f4f8; margin-bottom: 3rem; } /* --- React clients grid (mobile 3×4; desktop 7×3 flip cards) mount ---- */ .clients-react-mount { width: 100%; position: relative; padding: 1rem 0 1.25rem; transition: opacity 0.45s var(--ease-out), visibility 0.45s; min-height: 12rem; pointer-events: auto; } /* “See more” — text + icon only (no pill); global class so it works outside Tailwind scope */ .clients-see-more-link { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.25rem 0; font-family: var(--font-sans); font-size: clamp(0.92rem, 2.35vw, 1.08rem); font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; text-decoration: none; color: rgba(158, 239, 255, 0.95); background: none; border: none; border-radius: 0; box-shadow: none; cursor: pointer; transition: color 0.25s var(--ease-out), opacity 0.25s var(--ease-out); } .clients-see-more-link:hover { color: #fff; } .clients-see-more-link:focus-visible { outline: 2px solid rgba(0, 212, 255, 0.75); outline-offset: 4px; border-radius: 2px; } .clients-see-more-icon { font-size: 1.18em; font-weight: 500; opacity: 0.9; transform: translateY(-0.5px); } /* ---- Under-ocean effects: only in the ocean (below waterline) ---- */ .ocean-bubbles { position: fixed; top: 50%; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.8s var(--ease-out), visibility 0.8s; overflow: hidden; } /* Light rays from surface */ .ocean-bubbles::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 60vh; background: linear-gradient( 175deg, rgba(120, 200, 220, 0.08) 0%, transparent 40% ), linear-gradient( 165deg, rgba(100, 180, 200, 0.06) 0%, transparent 35% ), linear-gradient( 185deg, rgba(80, 160, 180, 0.05) 0%, transparent 45% ); z-index: 0; animation: lightRays 8s ease-in-out infinite; } @keyframes lightRays { 0%, 100% { opacity: 0.6; transform: translateX(0); } 50% { opacity: 1; transform: translateX(2%); } } /* Depth fog overlay */ .ocean-bubbles::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 0%, rgba(10, 40, 56, 0.1) 30%, rgba(7, 29, 42, 0.25) 60%, rgba(4, 19, 28, 0.4) 100% ); z-index: 0; pointer-events: none; } body.index-can-scroll .ocean-bubbles { opacity: 1; visibility: visible; } body.index-can-scroll.slide-hero .ocean-bubbles { display: none !important; } body.index-can-scroll.slide-hero .ocean-fill { display: none !important; } body.index-can-scroll.slide-hero .canvas-3d { -webkit-mask-image: none; mask-image: none; } /* Disable the ::before and ::after that were causing visual lines */ body.index-can-scroll .ocean-bubbles::before, body.index-can-scroll .ocean-bubbles::after { display: none; } .ocean-bubbles .bubble { position: absolute; z-index: 1; bottom: -15px; left: var(--x, 50%); width: var(--size, 8px); height: var(--size, 8px); border-radius: 50%; background: radial-gradient( circle at 30% 30%, rgba(180, 220, 240, 0.5) 0%, rgba(120, 180, 200, 0.3) 40%, rgba(80, 140, 160, 0.15) 100% ); box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.3), 0 0 6px rgba(100, 180, 200, 0.2); animation: bubbleRise var(--dur, 4s) ease-in-out var(--delay, 0s) infinite; } /* Bubbles rise naturally with slight wobble */ @keyframes bubbleRise { 0% { transform: translateY(0) translateX(0) scale(0.8); opacity: 0; } 5% { opacity: 0.7; transform: translateY(-5vh) translateX(3px) scale(0.9); } 25% { transform: translateY(-25vh) translateX(-5px) scale(1); opacity: 0.6; } 50% { transform: translateY(-50vh) translateX(6px) scale(1.05); opacity: 0.5; } 75% { transform: translateY(-75vh) translateX(-4px) scale(1); opacity: 0.35; } 95% { opacity: 0.15; } 100% { transform: translateY(-100vh) translateX(2px) scale(0.85); opacity: 0; } } /* Operations (Projects) — longer fade so Three.js zoom can blend into this layer */ .page.page-operations { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; /* Full-bleed: override .page 2rem side padding; no bottom padding so footer sits flush (avoids gap strip) */ padding: 5rem 0 0; background: linear-gradient(180deg, #0a0a0a 0%, #0d1520 50%, #0a1628 100%); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; z-index: 50; transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1), visibility 1.05s; } /* Home canvas: gentle fade once Projects owns the screen (avoids a hard cut at route change) */ #canvas-3d { transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1); } body.tri-on-projects #canvas-3d { opacity: 0; pointer-events: none; } /* Fills space under the globe so the footer sits at the viewport bottom — no extra 100vh scroll gap */ .page-operations-footer-spacer { flex: 1 1 auto; min-height: 0; width: 100%; pointer-events: none; } .page-operations .site-footer--layer { position: relative; z-index: 1002; flex-shrink: 0; } /* Desktop: fixed footer over globe only — panels end above the footer so list/button are never covered */ @media (min-width: 769px) { .page.page-operations { /* Reserve at least the real footer stack (grid + legal); clamp handles zoom / wrap */ --operations-footer-h: clamp(118px, 22vmin, 205px); } .page-operations-footer-spacer { flex: 0 0 0; min-height: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; } .page-operations .site-footer--layer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1005; } .page-operations .cesium-control-panel { top: 100px; bottom: calc(var(--operations-footer-h) + 12px); max-height: none; padding-bottom: 24px; } .page-operations .cesium-detail-panel { top: 100px; bottom: calc(var(--operations-footer-h) + 12px); max-height: none; } .page-operations .cesium-detail-panel-inner { max-height: none; flex: 1 1 auto; min-height: 0; padding-bottom: 22px; box-sizing: border-box; } .page-operations .cesium-credits { bottom: calc(var(--operations-footer-h) + 12px); } .page-operations .cesium-status-bar { bottom: calc(var(--operations-footer-h) + 32px); } } /* Cesium 3D Globe Projects Section */ .cesium-globe-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity; } .cesium-globe-container.cesium-globe--visible { opacity: 1; } .cesium-globe-container .cesium-viewer, .cesium-globe-container .cesium-widget { width: 100%; height: 100%; } .cesium-control-panel { position: absolute; top: 100px; left: 20px; background: rgba(10, 15, 25, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 24px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); z-index: 1000; width: 360px; max-height: calc(100vh - 180px); display: flex; flex-direction: column; overflow: hidden; } .cesium-project-list::-webkit-scrollbar { width: 8px; } .cesium-project-list::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } .cesium-project-list::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.4); border-radius: 4px; transition: background 0.3s; } .cesium-project-list::-webkit-scrollbar-thumb:hover { background: rgba(0, 212, 255, 0.6); } .cesium-panel-title { color: #e8f4f8; margin-bottom: 8px; font-size: 1.5rem; font-family: var(--font-sans); font-weight: 400; flex-shrink: 0; } .cesium-panel-subtitle { color: rgba(160, 210, 230, 0.75); font-size: 0.85rem; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(160, 210, 230, 0.25); flex-shrink: 0; } .cesium-project-list { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(0, 212, 255, 0.4) rgba(255, 255, 255, 0.05); } /* Wrapper: mobile = horizontal carousel row; desktop = column flex (see min-width rule) */ .cesium-project-carousel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } .cesium-project-carousel-btn { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: auto; min-width: 2.25rem; padding: 0.35rem 0.2rem; border-radius: 0; border: none; background: transparent; color: rgba(200, 225, 235, 0.92); font-size: 1.85rem; font-weight: 300; line-height: 1; cursor: pointer; font-family: var(--font-sans); -webkit-tap-highlight-color: transparent; transition: color 0.2s var(--ease-out), opacity 0.2s var(--ease-out); } .cesium-project-carousel-btn:focus-visible { outline: 2px solid rgba(0, 212, 255, 0.55); outline-offset: 3px; } .cesium-project-carousel-btn:hover:not(:disabled) { color: #00d4ff; } .cesium-project-carousel-btn:disabled { opacity: 0.35; cursor: not-allowed; } .cesium-project-carousel-count { display: none; margin: 0; text-align: center; font-size: 0.78rem; color: rgba(160, 210, 230, 0.75); letter-spacing: 0.06em; } @media (min-width: 769px) { .cesium-project-carousel-btn, .cesium-project-carousel-count { display: none !important; } } .cesium-project-item { background: rgba(255, 255, 255, 0.06); padding: 16px; border-radius: 12px; cursor: pointer; border-left: 4px solid rgba(0, 212, 255, 0.5); transition: all 0.3s var(--ease-out); border: 1px solid rgba(255, 255, 255, 0.08); } .cesium-project-item:hover { background: rgba(0, 212, 255, 0.12); border-left-color: #00d4ff; transform: translateX(5px); box-shadow: 0 4px 20px rgba(0, 212, 255, 0.15); } .cesium-project-item.active { background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 150, 200, 0.15) 100%); border-left-color: #00d4ff; border-color: rgba(0, 212, 255, 0.3); } .cesium-project-item.active .cesium-project-name, .cesium-project-item.active .cesium-project-location { color: white; } .cesium-project-name { font-weight: 600; color: #e8f4f8; font-size: 0.95rem; margin-bottom: 5px; } .cesium-project-number { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%); color: #0a0f19; width: 24px; height: 24px; border-radius: 50%; font-size: 0.75rem; font-weight: 700; margin-right: 10px; } .cesium-project-item.active .cesium-project-number { background: linear-gradient(135deg, #00d4ff 0%, #00ffcc 100%); box-shadow: 0 0 12px rgba(0, 212, 255, 0.5); } .cesium-project-location { color: rgba(200, 225, 235, 0.7); font-size: 0.8rem; margin-bottom: 4px; padding-left: 34px; } .cesium-project-item--pending { border-left-color: rgba(255, 200, 120, 0.55); } .cesium-project-soon { margin: 0; padding-left: 34px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 210, 150, 0.95); } .cesium-project-item.active .cesium-project-soon { color: rgba(255, 230, 190, 1); } .cesium-btn-reset { width: 100%; padding: 14px; margin-top: 18px; flex-shrink: 0; background: transparent; color: rgba(200, 225, 235, 0.8); border: 1px solid rgba(160, 215, 238, 0.35); border-radius: 999px; cursor: pointer; font-size: 0.9rem; font-weight: 500; font-family: var(--font-sans); letter-spacing: 0.04em; transition: all 0.3s var(--ease-out); } .cesium-btn-reset:hover { background: rgba(0, 212, 255, 0.15); border-color: #00d4ff; color: #e8f4f8; transform: scale(1.02); } /* Right project detail panel (matches control panel glass / cyan accent) */ .cesium-detail-panel { position: absolute; top: 100px; right: 20px; width: clamp(260px, calc(100vw - 400px), 400px); max-height: calc(100vh - 180px); z-index: 1000; display: flex; flex-direction: column; background: rgba(10, 15, 25, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(12px); transition: opacity 0.35s var(--ease-out), visibility 0.35s, transform 0.35s var(--ease-out); } .cesium-detail-panel.cesium-detail-panel--open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); } /* Narrow / split viewports: keep glass panel inside the scrollport (avoids horizontal overflow). */ @media (max-width: 900px) { .cesium-detail-panel { width: min(400px, calc(100vw - 2.5rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); right: max(12px, env(safe-area-inset-right, 0px)); } } .cesium-detail-panel-inner { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px; max-height: calc(100vh - 180px); min-height: 0; overflow: hidden; } .cesium-detail-header { flex-shrink: 0; padding-bottom: 12px; border-bottom: 1px solid rgba(160, 210, 230, 0.25); } .cesium-detail-eyebrow { margin: 0 0 6px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(0, 212, 255, 0.75); font-weight: 600; } .cesium-detail-title { margin: 0; font-family: var(--font-sans); font-size: 1.15rem; font-weight: 500; line-height: 1.35; color: #e8f4f8; } .cesium-detail-gallery { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; } .cesium-detail-gallery-frame { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.35); aspect-ratio: 16 / 10; } .cesium-detail-gallery-img { display: block; width: 100%; height: 100%; object-fit: cover; } .cesium-detail-gallery--pending .cesium-detail-gallery-img { display: none; } .cesium-detail-gallery-pending { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; padding: 1rem 1.25rem; text-align: center; font-size: 0.92rem; line-height: 1.45; font-weight: 500; color: rgba(230, 240, 248, 0.88); background: linear-gradient(145deg, rgba(26, 58, 92, 0.55) 0%, rgba(13, 33, 55, 0.75) 100%); } .cesium-detail-gallery-pending[hidden] { display: none !important; } .cesium-detail-soon-banner { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-align: center; color: rgba(255, 224, 190, 0.98); background: rgba(255, 200, 120, 0.12); border: 1px solid rgba(255, 200, 120, 0.28); } .cesium-detail-gallery-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cesium-detail-nav-btn { flex: 0 0 auto; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(160, 215, 238, 0.35); background: rgba(255, 255, 255, 0.06); color: rgba(200, 225, 235, 0.95); font-size: 0.8rem; font-weight: 500; font-family: var(--font-sans); letter-spacing: 0.03em; cursor: pointer; transition: all 0.25s var(--ease-out); } .cesium-detail-nav-btn:hover:not(:disabled) { background: rgba(0, 212, 255, 0.15); border-color: #00d4ff; color: #e8f4f8; } .cesium-detail-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; } .cesium-detail-gallery-count { font-size: 0.78rem; color: rgba(160, 200, 220, 0.65); font-variant-numeric: tabular-nums; white-space: nowrap; } .cesium-detail-info { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(0, 212, 255, 0.4) rgba(255, 255, 255, 0.05); } .cesium-detail-info::-webkit-scrollbar { width: 6px; } .cesium-detail-info::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } .cesium-detail-info::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.35); border-radius: 4px; } .cesium-detail-lead { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: rgba(0, 212, 255, 0.08); border-left: 3px solid rgba(0, 212, 255, 0.55); font-size: 0.82rem; line-height: 1.55; color: rgba(220, 235, 245, 0.92); } .cesium-detail-section { margin-bottom: 18px; } .cesium-detail-section:last-child { margin-bottom: 0; } .cesium-detail-section-title { margin: 0 0 10px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #00d4ff; } .cesium-detail-subsection { margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); } .cesium-detail-subsection:last-child { margin-bottom: 0; } .cesium-detail-subtitle { margin: 0 0 8px; font-size: 0.8rem; font-weight: 600; color: rgba(200, 225, 235, 0.95); } .cesium-detail-text { margin: 0; font-size: 0.85rem; line-height: 1.55; color: rgba(200, 220, 235, 0.88); } .cesium-detail-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: baseline; font-size: 0.85rem; line-height: 1.5; color: rgba(200, 220, 235, 0.88); } .cesium-detail-kv dt { margin: 0; font-weight: 600; color: rgba(160, 200, 220, 0.75); font-size: 0.78rem; } .cesium-detail-kv dd { margin: 0; } .cesium-detail-list { margin: 0; padding-left: 1.1rem; font-size: 0.82rem; line-height: 1.5; color: rgba(200, 220, 235, 0.88); } .cesium-detail-list li { margin-bottom: 6px; } .cesium-detail-list li:last-child { margin-bottom: 0; } .cesium-detail-placeholder, .cesium-detail-error { margin: 0; font-size: 0.85rem; color: rgba(160, 200, 220, 0.65); line-height: 1.5; } .cesium-detail-error { color: rgba(255, 160, 140, 0.9); } .cesium-credits { position: absolute; bottom: 10px; right: 10px; background: rgba(10, 15, 25, 0.85); backdrop-filter: blur(10px); padding: 10px 18px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8rem; z-index: 1000; color: rgba(200, 225, 235, 0.7); } .cesium-credits strong { color: #00d4ff; } .cesium-status-bar { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(0, 212, 255, 0.15); backdrop-filter: blur(15px); border: 1px solid rgba(0, 212, 255, 0.3); color: #e8f4f8; padding: 12px 30px; border-radius: 999px; font-size: 0.9rem; font-weight: 500; z-index: 1000; opacity: 0; transition: opacity 0.3s var(--ease-out); pointer-events: none; } .cesium-status-bar.visible { opacity: 1; } /* Hide default Cesium credits for cleaner look */ .cesium-viewer-bottom { display: none !important; } /* Cesium viewer overrides for dark theme */ .cesium-viewer .cesium-widget-credits { display: none !important; } /* Mobile Hero Section (hidden on desktop) */ .mobile-hero { display: none; } /* Desktop / tablet wide: stack is layout-transparent so fixed hero columns behave as before */ .page-index-mobile-hero-stack { display: contents; } /* * Touch / tablet / fold home hero: static images/background.png instead of Three.js ocean + GLB. * - Phones, tablets, iPad (incl. Pro ~1366px landscape), foldables (dual viewport / spanning) * - Main canvas stays available on About / Contact / Expertise (dimmed) per rules below * - Projects uses Cesium in its own container */ @media (max-width: 1366px), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (spanning: single-fold-vertical), (spanning: single-fold-horizontal) { /* Hide 3D canvas and related elements on mobile home */ .canvas-3d, #canvas-3d, canvas.canvas-3d { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; } body.about-route .canvas-3d, body.about-route #canvas-3d, body.about-route canvas.canvas-3d, body.contact-route .canvas-3d, body.contact-route #canvas-3d, body.contact-route canvas.canvas-3d, body.expertise-route .canvas-3d, body.expertise-route #canvas-3d, body.expertise-route canvas.canvas-3d { display: block !important; visibility: visible !important; opacity: 0.3 !important; width: 100% !important; height: 100% !important; } .page-index-spacer { min-height: 10vh; } /* Page fill below the photo hero (Who we are, clients, …) */ .page-index { background: linear-gradient(180deg, #1a4b5a 0%, #164255 30%, #123a4b 60%, #0e3041 100% ) !important; } /* Photo hero: full viewport width (break out of .page horizontal padding), bright image, sit above page fill */ .page-index-mobile-hero-stack { /* Parent .page-index is align-items:center — without this, width:100% stays content-narrow and gutters stay visible */ align-self: stretch; display: flex; flex-direction: column; align-items: stretch; min-width: 0; width: calc(100% + var(--page-pad-x, 1.1rem) + var(--page-pad-x-right, 1.1rem)); max-width: none; margin-left: calc(-1 * var(--page-pad-x, 1.1rem)); margin-right: calc(-1 * var(--page-pad-x-right, 1.1rem)); box-sizing: border-box; position: relative; z-index: 5; isolation: isolate; overflow: hidden; pointer-events: auto; /* Fill first screen under fixed nav — svh last would leave a gap when the visible viewport is taller */ min-height: calc(100vh - 4.75rem - env(safe-area-inset-top, 0px)); min-height: calc(100dvh - 4.75rem - env(safe-area-inset-top, 0px)); min-height: calc(100lvh - 4.75rem - env(safe-area-inset-top, 0px)); background-color: #1a3d4d; background-image: linear-gradient( 180deg, transparent 0%, transparent 70%, rgba(8, 28, 40, 0.14) 100% ), url('../images/background.png'); background-size: cover; /* Wide art (~2:1): center focal logo on phones / portrait tablets */ background-position: center center; background-repeat: no-repeat; } @media (orientation: landscape) and (min-width: 600px) { .page-index-mobile-hero-stack { background-position: center 52%; } } .page-index-mobile-hero-stack .hero-sky-tagline__powerful, .page-index-mobile-hero-stack .hero-sky-tagline__future { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 4px 24px rgba(0, 0, 0, 0.55); } .page-index-mobile-hero-stack .mobile-hero-title { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 4px 28px rgba(0, 0, 0, 0.5); } /* Hide model explore overlay on mobile */ .model-explore-overlay { display: none !important; } /* Hide ocean effects on mobile */ .ocean-fill, .ocean-bubbles, .ocean-transition-overlay { display: none !important; } /* Adjust hint text for mobile */ .hint-drag { display: none; } /* Desktop-only: fixed left/right hero headlines + CTAs — hidden on mobile (photo + title only) */ .page-index-mobile-hero-stack > .hero-sky-block, .hero-sky-block--east { display: none !important; visibility: hidden !important; pointer-events: none !important; } .hero-sky-tagline { align-items: center; } .hero-sky-tagline__row--top, .hero-sky-tagline__row--bottom { justify-content: center; } .hero-learn-more-btn { align-self: center; } .page-index.active .hero-sky-block:not(.hero-sky-block--below-fold) { transition-delay: 0.15s; } .hero-sky-rule { max-width: min(28rem, 94vw); height: 2px; margin-left: auto; margin-right: auto; } .hero-sky-tagline__row--top { font-size: clamp(0.82rem, 3.6vw, 1.1rem); letter-spacing: 0.14em; } .hero-sky-tagline__row--bottom { font-size: clamp(1.4rem, 7.5vw, 2.35rem); letter-spacing: 0.07em; } /* Mobile Hero (photo sits on .page-index-mobile-hero-stack) */ .mobile-hero { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex: 1 1 auto; min-height: 0; text-align: center; padding: 0 1.5rem; position: relative; z-index: 1; } .mobile-hero-main { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: min(48vh, 22rem); padding: 0.5rem 0 1rem; } .mobile-hero-title { font-family: var(--font-sans); font-size: clamp(2.5rem, 12vw, 4rem); font-weight: 400; color: #e8f4f8; margin-bottom: 0; line-height: 1.1; } .mobile-hero-title span { font-size: 0.5em; vertical-align: super; color: rgba(0, 212, 255, 0.8); } } /* Mobile: Projects = vertical page — globe band → project list → details → footer (desktop unchanged) */ @media (max-width: 768px) { .page.page-operations { /* Space for fixed “Reset Globe” above home indicator / thumb zone */ padding-bottom: calc(4.85rem + env(safe-area-inset-bottom, 0px)); } .page.page-operations .cesium-globe-container { position: relative; top: auto; left: auto; width: 100%; height: clamp(280px, 52vh, 440px); flex-shrink: 0; z-index: 0; /* Clip Cesium canvas/widgets so WebGL does not paint over the list + detail below */ overflow: hidden; isolation: isolate; } .page.page-operations .cesium-globe-container .cesium-viewer, .page.page-operations .cesium-globe-container .cesium-widget, .page.page-operations .cesium-globe-container .cesium-widget canvas { max-height: 100%; } .page.page-operations .cesium-control-panel { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: 100%; max-width: none; max-height: none; margin: 0; padding: 1.1rem max(1rem, env(safe-area-inset-right, 0px)) 1.2rem max(1rem, env(safe-area-inset-left, 0px)); padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); border-radius: 0; border: none; border-top: 1px solid rgba(0, 212, 255, 0.18); box-shadow: none; z-index: 2; overflow: visible; } .page.page-operations .cesium-control-panel::before { display: none; } .page.page-operations .cesium-panel-title { font-size: clamp(1.15rem, 4.2vw, 1.35rem); margin-top: 0; margin-bottom: 0.35rem; } .page.page-operations .cesium-panel-subtitle { font-size: 0.78rem; margin-bottom: 1rem; padding-bottom: 0.85rem; } .page.page-operations .cesium-project-carousel { flex-direction: row; align-items: stretch; gap: 0.45rem; flex: 0 0 auto; min-height: 0; overflow: visible; width: 100%; margin-bottom: 0.65rem; } .page.page-operations .cesium-project-carousel-btn { display: inline-flex; align-self: center; min-width: 2.5rem; padding: 0.45rem 0.15rem; } .page.page-operations .cesium-project-carousel-count { display: block; margin: 0.35rem 0 2.35rem; } .page.page-operations .cesium-project-list { flex: 1 1 auto; min-width: 0; min-height: 0; flex-direction: row; flex-wrap: nowrap; gap: 0.65rem; padding-bottom: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; } .page.page-operations .cesium-project-list::-webkit-scrollbar { display: none; width: 0; height: 0; } .page.page-operations .cesium-project-item { flex: 0 0 100%; min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0.85rem 1rem; scroll-snap-align: center; } .page.page-operations .cesium-project-item:hover { transform: none; } .page.page-operations .cesium-project-name { font-size: 0.9rem; } .page.page-operations .cesium-project-location { font-size: 0.78rem; padding-left: 34px; } .page.page-operations .cesium-project-number { width: 22px; height: 22px; font-size: 0.68rem; } .page.page-operations .cesium-btn-reset { display: block; position: fixed; left: 50%; right: auto; transform: translateX(-50%); bottom: calc(1.45rem + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100vw - 2rem); margin: 0; padding: 0.4rem 0.6rem; z-index: 1006; border: none; border-radius: 0; box-shadow: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: rgba(160, 215, 238, 0.88); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; text-align: center; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .page.page-operations .cesium-btn-reset:hover { transform: translateX(-50%); background: transparent; border: none; color: #00d4ff; text-decoration: underline; text-underline-offset: 0.22em; } .page.page-operations .cesium-btn-reset:focus-visible { outline: 2px solid rgba(0, 212, 255, 0.55); outline-offset: 4px; transform: translateX(-50%); } .page.page-operations .cesium-detail-panel { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: 100%; max-width: none; max-height: none; margin: 0; transform: none; border-radius: 0; border: none; border-top: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; z-index: 3; opacity: 1; visibility: visible; pointer-events: none; } .page.page-operations .cesium-detail-panel:not(.cesium-detail-panel--open) { display: none !important; } .page.page-operations .cesium-detail-panel.cesium-detail-panel--open { display: flex !important; flex-direction: column; pointer-events: auto; overflow: visible; opacity: 1 !important; visibility: visible !important; background: rgba(7, 11, 20, 0.97); scroll-margin-top: calc(4.25rem + env(safe-area-inset-top, 0px)); } .page.page-operations .cesium-detail-panel-inner { flex: 0 0 auto; width: 100%; max-height: none; min-height: 0; overflow: visible; padding: 1.15rem max(1rem, env(safe-area-inset-right, 0px)) 1.5rem max(1rem, env(safe-area-inset-left, 0px)); padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); gap: 0.9rem; } .page.page-operations .cesium-detail-info { flex: none; flex-grow: 0; flex-shrink: 0; min-height: auto; max-height: none; overflow: visible; padding-right: 0; } .page.page-operations .cesium-detail-title { font-size: clamp(1.05rem, 4vw, 1.2rem); } .page.page-operations .cesium-detail-nav-btn { padding: 0.55rem 0.9rem; font-size: 0.74rem; } .page.page-operations .cesium-credits { position: absolute; bottom: 0.5rem; right: max(0.5rem, env(safe-area-inset-right, 0px)); left: auto; font-size: 0.58rem; padding: 5px 8px; z-index: 2; } .page.page-operations .cesium-status-bar { position: fixed; left: 50%; right: auto; transform: translateX(-50%); bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px)); top: auto; z-index: 1004; font-size: 0.78rem; padding: 0.55rem 1.15rem; max-width: calc(100vw - 2rem); text-align: center; pointer-events: none; } .page.page-operations .page-operations-footer-spacer { flex: 0 0 0; min-height: 0; height: 0; overflow: hidden; } } .project-popup-desc { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); line-height: 1.5; margin: 0; } /* Custom marker styling */ .custom-marker { background: #00d4ff; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 4px 15px rgba(0, 212, 255, 0.5); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .custom-marker:hover { transform: scale(1.2); box-shadow: 0 6px 25px rgba(0, 212, 255, 0.7); } /* Leaflet controls styling for dark theme */ .leaflet-control-zoom a { background: rgba(10, 15, 25, 0.9) !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.2) !important; } .leaflet-control-zoom a:hover { background: rgba(0, 212, 255, 0.8) !important; color: #0a0a0a !important; } .leaflet-control-attribution { background: rgba(10, 15, 25, 0.8) !important; color: rgba(255, 255, 255, 0.5) !important; } .leaflet-control-attribution a { color: rgba(255, 255, 255, 0.7) !important; } /* Projects List Section */ .projects-list-section { max-width: 1400px; margin: 0 auto; padding: 2rem 2rem 4rem; } .projects-list-title { font-family: var(--font-sans); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: #fff; text-align: center; margin-bottom: 1.5rem; } /* Override filter bar for dark background */ .page-operations .filter-bar { margin-bottom: 2rem; } .page-operations .filter-pill { border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.8); } .page-operations .filter-pill:hover, .page-operations .filter-pill.active { background: #00d4ff; border-color: #00d4ff; color: #0a0a0a; } /* Override operation cards for dark theme */ .page-operations .operation-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); } .page-operations .operation-card:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(0, 212, 255, 0.3); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } .page-operations .operation-card-title { color: #fff; } .page-operations .operation-card-desc { color: rgba(255, 255, 255, 0.6); } @media (max-width: 768px) { .projects-globe-container { height: 50vh; min-height: 300px; } .globe-info-panel { top: auto; bottom: 3rem; right: 50%; transform: translateX(50%); width: calc(100% - 2rem); max-width: 320px; } .globe-info-panel.active { transform: translateX(50%) translateY(0); } .projects-list-section { padding: 1.5rem 1rem 3rem; } } .page-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; text-align: center; margin-bottom: 1.5rem; opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .page-operations .page-title { color: #fff; } .page-operations.active .page-title { opacity: 1; transform: translateY(0); transition-delay: 0s; } .page-operations .filter-bar { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .page-operations.active .filter-bar { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } .filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; } .filter-pill { padding: 0.5rem 1rem; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; background: transparent; border: 1px solid var(--color-text); border-radius: 999px; color: var(--color-text); transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), transform 0.2s; } .filter-pill:hover { transform: scale(1.02); } .filter-pill:hover, .filter-pill.active { background: var(--color-text); color: var(--color-bg); } .filter-count { opacity: 0.8; margin-left: 0.25rem; } .operations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; } /* Unseen-style stagger when page becomes active */ .operation-card { opacity: 0; transform: translateY(40px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), box-shadow 0.4s, filter 0.3s; } .page-operations.active .operation-card { opacity: 1; transform: translateY(0); } .page-operations.active .operation-card:nth-child(1) { transition-delay: 0.05s; } .page-operations.active .operation-card:nth-child(2) { transition-delay: 0.12s; } .page-operations.active .operation-card:nth-child(3) { transition-delay: 0.19s; } .page-operations.active .operation-card:nth-child(4) { transition-delay: 0.26s; } .page-operations.active .operation-card:nth-child(5) { transition-delay: 0.33s; } .page-operations.active .operation-card:nth-child(6) { transition-delay: 0.4s; } .operation-card { text-decoration: none; color: inherit; display: block; background: var(--color-cream); border-radius: 8px; overflow: hidden; transition: transform 0.4s var(--ease-out), box-shadow 0.4s, opacity 0.4s; } .operation-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); } .operation-card-image { aspect-ratio: 16/10; overflow: hidden; background: var(--color-ocean); } .operation-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); } .operation-card:hover .operation-card-image img { transform: scale(1.05); } .operation-card-title { font-family: var(--font-sans); font-size: 1.35rem; font-weight: 600; padding: 1rem 1.25rem 0.25rem; } .operation-card-desc { font-size: 0.85rem; color: var(--color-text-muted); padding: 0 1.25rem 1.25rem; } /* Contact – full viewport layer; visual theme matches Projects / underwater sections (dark marine + glass + cyan ice) */ .page-contact { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; /* Stack above canvas (z-index 0) like About; helps backdrop-filter sample the hero */ z-index: 55; /* Full-bleed: override .page side + bottom padding */ padding: 5.5rem 0 0; background: linear-gradient(180deg, #0a0a0a 0%, #0d1520 50%, #0a1628 100%); } /* Form + info only; global footer is a flex sibling after this block (see main.js attachGlobalSiteFooter). */ .page-contact-main { --contact-pad-x: clamp(1.25rem, 4vw, 2rem); --contact-pad-x-right: clamp(1.25rem, 4vw, 2rem); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; box-sizing: border-box; /* Grow to fill viewport when content is short; scroll when content is tall */ flex: 1 0 auto; padding: clamp(2.25rem, 5vh, 4rem) var(--contact-pad-x) clamp(1.75rem, 4vh, 3rem); } .page-contact-footer-spacer { flex: 0 0 0; height: 0; width: 0; overflow: hidden; visibility: hidden; pointer-events: none; margin: 0; padding: 0; } /* Direct child of .page-contact: full width, no negative margins (main holds horizontal padding only). */ .page-contact .site-footer--layer { flex-shrink: 0; align-self: stretch; box-sizing: border-box; position: relative; z-index: 5; width: 100%; max-width: none; margin: 0; padding-top: clamp(1.35rem, 3.5vh, 2.25rem); } .page-contact .contact-col-form, .page-contact .contact-col-info { padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.85rem); /* 50% dark tint — large blur stacks with dark backdrop and reads as solid; keep blur modest so the ocean/sky stays visible */ background: rgba(10, 15, 25, 0.5); backdrop-filter: blur(4px) saturate(1.15); -webkit-backdrop-filter: blur(4px) saturate(1.15); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22); } /* Transform-only entrance: never animate opacity on glass columns — it multiplies background alpha and fights backdrop-filter. */ .page-contact-content > * { opacity: 1; transform: translateY(20px); transition: transform 0.6s var(--ease-out); } .page-contact.active .page-contact-content > *:nth-child(1) { transform: translateY(0); transition-delay: 0.05s; } .page-contact.active .page-contact-content > *:nth-child(2) { transform: translateY(0); transition-delay: 0.14s; } .page-contact.active .page-contact-content > *:nth-child(3) { transform: translateY(0); transition-delay: 0.23s; } .page-contact.active .page-contact-content > *:nth-child(4) { transform: translateY(0); transition-delay: 0.32s; } .page-contact.active .page-contact-content > *:nth-child(5) { transform: translateY(0); transition-delay: 0.41s; } .page-contact.active .page-contact-content > *:nth-child(6) { transform: translateY(0); transition-delay: 0.5s; } .page-contact.active .page-contact-content > *:nth-child(7), .page-contact.active .page-contact-content > *:nth-child(8) { transform: translateY(0); transition-delay: 0.59s; } .page-contact.active .page-contact-content > *:nth-child(n+9) { transform: translateY(0); transition-delay: 0.68s; } .page-contact-content { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; width: 100%; max-width: 1040px; margin: 0 auto; text-align: left; } .page-contact .contact-block-title { font-family: var(--font-sans); font-size: clamp(1.65rem, 3.5vw, 2.35rem); font-weight: 700; font-style: normal; margin-bottom: 0.4rem; color: #e8f4f8; line-height: 1.15; } .page-contact .contact-block-lead { font-size: 0.9rem; color: rgba(160, 210, 230, 0.8); margin-bottom: 1.35rem; line-height: 1.55; max-width: 36ch; } .contact-form { display: flex; flex-direction: column; gap: 1.1rem; } .contact-field { display: flex; flex-direction: column; gap: 0.4rem; } .page-contact .contact-label { font-size: 0.72rem; font-weight: 600; color: rgba(160, 210, 230, 0.85); letter-spacing: 0.14em; text-transform: uppercase; } .page-contact .contact-input { width: 100%; padding: 0.75rem 0.9rem; font-family: var(--font-sans); font-size: 0.95rem; color: #e8f4f8; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .page-contact .contact-input::placeholder { color: rgba(160, 200, 220, 0.45); } .page-contact .contact-input:hover { border-color: rgba(160, 215, 238, 0.28); background: rgba(255, 255, 255, 0.07); } .page-contact .contact-input:focus { outline: none; border-color: rgba(0, 212, 255, 0.55); box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15); } .contact-textarea { min-height: 8rem; resize: vertical; } .page-contact .contact-submit { width: 100%; margin-top: 0.25rem; padding: 0.9rem 1.25rem; font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.06em; color: #0a1628; background: #00d4ff; border: 1px solid rgba(0, 212, 255, 0.6); border-radius: 999px; cursor: pointer; transition: background 0.25s, transform 0.2s var(--ease-out), box-shadow 0.25s; box-shadow: 0 0 20px rgba(0, 212, 255, 0.25); } .page-contact .contact-submit:hover { background: #33ddff; transform: translateY(-1px); box-shadow: 0 0 28px rgba(0, 212, 255, 0.4); } .page-contact .contact-submit:active { transform: translateY(0); } .page-contact .contact-col-info .contact-block-lead { max-width: 42ch; } .page-contact .contact-legal-name { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; color: #e8f4f8; margin-top: 1rem; line-height: 1.4; } .page-contact .contact-map-caption { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(160, 210, 230, 0.75); margin-bottom: 0.5rem; margin-top: 1.25rem; } .page-contact .contact-map-wrap { position: relative; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); aspect-ratio: 16 / 10; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.06); } .contact-map-frame { display: block; width: 100%; height: calc(100% + 40px); border: 0; margin-bottom: -24px; } .page-contact .contact-address-inline { font-size: 0.82rem; color: rgba(200, 225, 235, 0.82); margin-top: 0.65rem; line-height: 1.45; } .page-contact .contact-map-wrap + .contact-address-inline { margin-top: 1rem; } .page-contact .contact-phone { font-size: 0.88rem; color: rgba(200, 225, 235, 0.9); margin-top: 0.75rem; } .page-contact .contact-phone a { color: #00d4ff; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .page-contact .contact-phone a:hover { color: #66e5ff; border-bottom-color: rgba(0, 212, 255, 0.5); } .page-contact .contact-hours { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid rgba(160, 210, 230, 0.2); } .page-contact .contact-hours-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(160, 210, 230, 0.8); margin-bottom: 0.45rem; } .page-contact .contact-hours-line { font-size: 0.85rem; color: rgba(200, 225, 235, 0.78); line-height: 1.5; margin: 0; } .contact-quick-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-top: 0.85rem; font-size: 0.88rem; } .page-contact .contact-email-inline { color: rgba(200, 225, 235, 0.88); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .page-contact .contact-email-inline:hover { color: #00d4ff; border-bottom-color: rgba(0, 212, 255, 0.45); } .page-contact .contact-quick-sep { color: rgba(160, 200, 220, 0.45); user-select: none; } @media (max-width: 880px) { .page-contact-main { align-items: flex-start; justify-content: flex-start; padding-top: clamp(1.35rem, 3.5vh, 2.25rem); } .page-contact-content { grid-template-columns: 1fr; max-width: min(36rem, 100%); width: 100%; gap: clamp(1.35rem, 4vw, 2rem); margin-left: auto; margin-right: auto; } .contact-col-info { padding-bottom: 1rem; } .page-contact .contact-col-form, .page-contact .contact-col-info { padding: clamp(1.15rem, 3.5vw, 1.65rem) clamp(1.1rem, 3.2vw, 1.5rem); } } .page-contact .contact-address { font-size: 0.85rem; color: rgba(200, 225, 235, 0.82); margin-top: 1rem; } /* ---- Site footer (single DOM node from #site-footer-global-template; re-parented per route in main.js) ---- */ .site-footer { --footer-bg-deep: #071428; --footer-bg-mid: #0c1f3d; --footer-accent: #4dd4e8; --footer-accent-soft: rgba(77, 212, 232, 0.22); --footer-text: rgba(255, 255, 255, 0.9); --footer-muted: rgba(165, 188, 214, 0.58); font-family: var(--font-sans); position: relative; z-index: 4; color: var(--footer-text); background: radial-gradient(120% 80% at 50% -20%, rgba(77, 212, 232, 0.12), transparent 55%), linear-gradient(165deg, var(--footer-bg-mid) 0%, var(--footer-bg-deep) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .site-footer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 45% at 20% 100%, rgba(77, 212, 232, 0.07), transparent 50%); pointer-events: none; } .site-footer-inner { position: relative; max-width: min(1200px, 100%); margin: 0 auto; padding: clamp(1.25rem, 2.8vw, 1.65rem) clamp(1.15rem, 3.5vw, 2rem) clamp(0.9rem, 2.2vw, 1.2rem); } .site-footer-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr) auto; gap: clamp(1rem, 2.5vw, 1.65rem); align-items: start; } .site-footer-col { display: flex; flex-direction: column; gap: 0.5rem; } .site-footer-col--brand { gap: 0.55rem; max-width: 22rem; } .site-footer-logo { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--footer-text); line-height: 1.15; } .site-footer-logo:hover { color: var(--footer-accent); } .site-footer-reg { font-size: 0.5em; vertical-align: super; letter-spacing: 0; } .site-footer-company-tree { display: flex; flex-direction: column; gap: 0.45rem; } .site-footer-group-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-decoration: none; color: var(--footer-accent); line-height: 1.35; } .site-footer-group-title:hover { color: #7ee8f7; } .site-footer-subsidiaries { list-style: none; margin: 0; padding: 0.35rem 0 0; display: flex; flex-direction: column; gap: 0.28rem; } .site-footer-subsidiaries li { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.04em; color: var(--footer-muted); line-height: 1.45; padding-left: 0.85rem; position: relative; } .site-footer-subsidiaries li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 4px; height: 4px; border-radius: 50%; background: var(--footer-accent-soft); box-shadow: 0 0 0 3px rgba(77, 212, 232, 0.08); } .site-footer-col--links { padding: 0.15rem 0; gap: 0.4rem; } .site-footer-link { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: rgba(255, 255, 255, 0.78); transition: color 0.2s ease, transform 0.2s ease; width: fit-content; } .site-footer-link:hover { color: var(--footer-accent); transform: translateX(2px); } .site-footer-col--social { padding: 0.15rem 0; align-items: flex-start; } .site-footer-follow { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--footer-muted); margin-bottom: 0.2rem; } .site-footer-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; } .site-footer-icon { color: var(--footer-accent); display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255, 255, 255, 0.04); transition: color 0.2s ease, transform 0.2s ease, background 0.2s ease; } .site-footer-icon:hover { color: #fff; background: var(--footer-accent-soft); transform: translateY(-2px); } .site-footer-icon svg { display: block; width: 17px; height: 17px; } .site-footer-legal { margin-top: clamp(1rem, 2.5vw, 1.35rem); padding-top: 0; text-align: center; } .site-footer-legal p { font-size: 0.64rem; color: var(--footer-muted); letter-spacing: 0.06em; line-height: 1.65; max-width: 36rem; margin: 0 auto; } .site-footer-legal a { color: rgba(190, 210, 232, 0.72); text-decoration: none; transition: color 0.2s ease; } .site-footer-legal a:hover { color: var(--footer-accent); } @media (max-width: 1100px) and (min-width: 901px) { .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; } .site-footer-col--brand { grid-column: 1 / -1; max-width: none; } } @media (max-width: 900px) { .site-footer-grid { grid-template-columns: 1fr; gap: 1.1rem; } .site-footer-col--social { width: 100%; padding-top: 0.25rem; } .site-footer-col--links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.25rem; } } /* ---- Expertise: tablet ---- */ @media (max-width: 1024px) { .expertise-grid--four, .expertise-grid--six { grid-template-columns: repeat(2, 1fr); } } /* * Engineering scroll route: one combined ENGINEERING grid (#expertise). * Legacy #expertise/engineering|feed|transport normalizes to #expertise in JS. */ body.expertise-route:not(.expertise-mobile-engineering-only) .expertise-block--engineering-mobile { display: none !important; } body.expertise-route.expertise-mobile-engineering-only .expertise-block--engineering-mobile { display: block !important; } body.expertise-route.expertise-mobile-engineering-only .expertise-block--feed, body.expertise-route.expertise-mobile-engineering-only .expertise-block--transport, body.expertise-route.expertise-mobile-engineering-only .expertise-block--pmc, body.expertise-route.expertise-mobile-engineering-only .expertise-block--survey, body.expertise-route.expertise-mobile-engineering-only .expertise-block--it { display: none !important; } /* Desktop/tablet: match mobile cyan glass cards for engineering-only (no orange pillar headers). */ @media (min-width: 769px) { body.expertise-route.expertise-mobile-engineering-only .page-expertise-page .expertise-card { background: rgba(10, 15, 25, 0.52); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; backdrop-filter: blur(5px) saturate(1.12); -webkit-backdrop-filter: blur(5px) saturate(1.12); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28); } body.expertise-route.expertise-mobile-engineering-only .page-expertise-page .expertise-card:hover { border-color: rgba(0, 212, 255, 0.22); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32); transform: translateY(-2px); } body.expertise-route.expertise-mobile-engineering-only .page-expertise-page .expertise-card-title { background: linear-gradient(180deg, rgba(52, 58, 68, 0.98) 0%, rgba(38, 42, 50, 0.99) 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } body.expertise-route.expertise-mobile-engineering-only .page-expertise-page .expertise-card-list { color: rgba(200, 220, 235, 0.88); } body.expertise-route.expertise-mobile-engineering-only .page-expertise-page .expertise-card-list li::before { background: rgba(0, 212, 255, 0.78); opacity: 1; } body.expertise-route.expertise-mobile-engineering-only .page-expertise-page .expertise-block-heading { color: rgba(0, 212, 255, 0.82); text-align: center; } body.expertise-route.expertise-mobile-engineering-only .page-expertise-page .page-expertise-label { color: rgba(0, 212, 255, 0.85); font-weight: 600; } body.expertise-route.expertise-mobile-engineering-only .page-expertise-page .page-expertise-headline { color: #e8f4f8; } body.expertise-route.expertise-mobile-engineering-only .page-expertise-page .page-expertise-headline em { color: rgba(200, 235, 245, 0.95); } } /* ---- Expertise: mobile ---- */ @media (max-width: 768px) { .page-expertise-section { padding: 3rem 1.25rem 4rem; } .page-expertise-section::before { margin-bottom: 2rem; } .page-expertise-headline { font-size: clamp(1.5rem, 6vw, 1.95rem); margin-bottom: 1.5rem; } .page-expertise-pillar { flex-direction: column; text-align: center; padding: 1.1rem 1rem; gap: 0.5rem; margin-bottom: 2rem; } .page-expertise-pillar-divider { width: 28px; height: 1px; border-radius: 0; opacity: 0.5; } .expertise-grid { grid-template-columns: 1fr; gap: 1rem; } .expertise-card-title { font-size: 0.68rem; padding: 0.85rem 1rem; } .expertise-card-list { font-size: 0.82rem; padding: 1rem 1rem 1.1rem 1.2rem; } /* Mobile expertise: same hero ocean + glass cards as About */ body.expertise-route .page-expertise-page .page-expertise-label { color: rgba(0, 212, 255, 0.85); font-weight: 600; } body.expertise-route .page-expertise-page .page-expertise-headline { color: #e8f4f8; } body.expertise-route .page-expertise-page .page-expertise-headline em { color: rgba(200, 235, 245, 0.95); } body.expertise-route .page-expertise-page .page-expertise-section::before { width: min(72px, 22vw); height: 2px; max-width: none; background: linear-gradient(90deg, transparent, #00d4ff, rgba(90, 98, 110, 0.95), transparent); border-radius: 1px; } body.expertise-route .page-expertise-page .expertise-block-heading { color: rgba(0, 212, 255, 0.82); } body.expertise-route .page-expertise-page .expertise-card { background: rgba(10, 15, 25, 0.52); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; backdrop-filter: blur(5px) saturate(1.12); -webkit-backdrop-filter: blur(5px) saturate(1.12); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28); } body.expertise-route .page-expertise-page .expertise-card:hover { border-color: rgba(0, 212, 255, 0.22); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32); transform: translateY(-2px); } body.expertise-route .page-expertise-page .expertise-card-title { background: linear-gradient(180deg, rgba(52, 58, 68, 0.98) 0%, rgba(38, 42, 50, 0.99) 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } body.expertise-route .page-expertise-page .expertise-card-list { color: rgba(200, 220, 235, 0.88); } body.expertise-route .page-expertise-page .expertise-card-list li::before { background: rgba(0, 212, 255, 0.78); opacity: 1; } body.expertise-route .page-expertise-page .page-expertise-pillar { background: linear-gradient(145deg, rgba(56, 62, 72, 0.96) 0%, rgba(40, 44, 52, 0.99) 100%); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* Mobile: one category per route (legacy feed/transport split kept for any stale class) */ body.expertise-mobile-feed-only .expertise-block--transport { display: none !important; } body.expertise-mobile-transport-only .expertise-block--feed { display: none !important; } body.expertise-mobile-transport-only .page-expertise-label, body.expertise-mobile-transport-only .page-expertise-headline { display: none; } body.expertise-mobile-transport-only .page-expertise-section { padding-top: 2.5rem; } body.expertise-mobile-transport-only .expertise-block--transport .expertise-block-heading { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; font-weight: 600; text-align: center; margin-bottom: 0.75rem; color: rgba(248, 250, 252, 0.88); } body.expertise-mobile-pmc-only .expertise-block--feed, body.expertise-mobile-pmc-only .expertise-block--transport, body.expertise-mobile-pmc-only .expertise-block--engineering-mobile, body.expertise-mobile-pmc-only .expertise-block--survey, body.expertise-mobile-pmc-only .expertise-block--it { display: none !important; } body.expertise-mobile-survey-only .expertise-block--feed, body.expertise-mobile-survey-only .expertise-block--transport, body.expertise-mobile-survey-only .expertise-block--engineering-mobile, body.expertise-mobile-survey-only .expertise-block--pmc, body.expertise-mobile-survey-only .expertise-block--it { display: none !important; } body.expertise-mobile-it-only .expertise-block--feed, body.expertise-mobile-it-only .expertise-block--transport, body.expertise-mobile-it-only .expertise-block--engineering-mobile, body.expertise-mobile-it-only .expertise-block--pmc, body.expertise-mobile-it-only .expertise-block--survey { display: none !important; } } /* Undo mobile split when viewport is wider (e.g. rotate device) so all blocks stay visible */ @media (min-width: 769px) { body.expertise-mobile-feed-only .expertise-block--transport, body.expertise-mobile-transport-only .expertise-block--feed, body.expertise-mobile-pmc-only .expertise-block--feed, body.expertise-mobile-pmc-only .expertise-block--transport, body.expertise-mobile-pmc-only .expertise-block--engineering-mobile, body.expertise-mobile-pmc-only .expertise-block--survey, body.expertise-mobile-pmc-only .expertise-block--it, body.expertise-mobile-survey-only .expertise-block--feed, body.expertise-mobile-survey-only .expertise-block--transport, body.expertise-mobile-survey-only .expertise-block--engineering-mobile, body.expertise-mobile-survey-only .expertise-block--pmc, body.expertise-mobile-survey-only .expertise-block--it, body.expertise-mobile-it-only .expertise-block--feed, body.expertise-mobile-it-only .expertise-block--transport, body.expertise-mobile-it-only .expertise-block--engineering-mobile, body.expertise-mobile-it-only .expertise-block--pmc, body.expertise-mobile-it-only .expertise-block--survey { display: block !important; } body.expertise-mobile-transport-only .page-expertise-label, body.expertise-mobile-transport-only .page-expertise-headline { display: block; } body.expertise-mobile-transport-only .expertise-block--transport .expertise-block-heading { text-transform: none; letter-spacing: normal; font-size: inherit; font-weight: inherit; text-align: inherit; margin-bottom: inherit; color: inherit; } body.expertise-mobile-transport-only .page-expertise-section { padding-top: inherit; } } /* ---- About section: mobile overrides ---- */ @media (max-width: 768px) { .page-about-section { padding: 3rem 1.5rem 4rem; min-height: auto; display: block; } .page-about-section::before { margin-bottom: 2rem; } .page-about-headline { font-size: clamp(1.6rem, 7vw, 2rem); margin-bottom: 1.25rem; } .page-about-body { font-size: 1rem; line-height: 1.75; } } /* ---- Clients section: mobile overrides ---- */ @media (max-width: 768px) { .page-clients-section { padding: 3rem 0 4rem; margin-top: 1rem; } .page-clients-section::before { margin-bottom: 2rem; } .page-clients-label, .page-clients-headline { display: block; padding-left: 1.25rem; padding-right: 1.25rem; } .page-clients-headline { font-size: clamp(1.5rem, 6vw, 1.9rem); margin-bottom: 1.5rem; } /* Full width of parent only — avoid 100vw + negative margins (scrollbar / rotate horizontal scroll). */ .clients-react-mount { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; padding: 0.5rem 0 0.75rem; } } /* ---- Mobile: disable ALL section animations for smooth scrolling ---- */ @media (max-width: 768px), (orientation: landscape) and (max-height: 520px) and (max-width: 932px) { /* Force all section content to be visible immediately without animation */ .page-about-section, .page-about-section::before, .page-about-section .page-about-label, .page-about-section .page-about-headline, .page-about-section .page-about-body, .page-clients-section, .page-clients-section::before, .page-clients-section .page-clients-label, .page-clients-section .page-clients-headline, .page-clients-section .clients-react-mount { animation: none !important; opacity: 1 !important; transform: none !important; visibility: visible !important; transition: none !important; } /* Ensure section-revealed class doesn't trigger animations on mobile */ .page-about-section.section-revealed, .page-about-section.section-revealed::before, .page-about-section.section-revealed .page-about-label, .page-about-section.section-revealed .page-about-headline, .page-about-section.section-revealed .page-about-body, .page-clients-section.section-revealed, .page-clients-section.section-revealed::before, .page-clients-section.section-revealed .page-clients-label, .page-clients-section.section-revealed .page-clients-headline, .page-clients-section.section-revealed .clients-react-mount { animation: none !important; opacity: 1 !important; transform: none !important; } } /* Responsive: show default cursor and simplify nav */ @media (max-width: 768px) { body { cursor: auto; } .cursor, .cursor-follower { display: none; } a, button { cursor: pointer; } .header { mix-blend-mode: normal; color: var(--color-text); background: rgba(232,228,223,0.9); } .nav { gap: 1rem; } .nav-link { font-size: 0.85rem; } .hint-drag { color: var(--color-text-muted); mix-blend-mode: normal; } .operations-grid { grid-template-columns: 1fr; } .about-stat-row { flex-direction: column; } } /* ---- About us (full route #about — Tri Ocean theme) ---- */ .page-about-full { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: hidden; /* Full-bleed: reset .page horizontal + bottom padding (was leaving 2rem stripes + body visible at edges) */ padding: 5rem 0 0; z-index: 55; background: linear-gradient(180deg, #0a0a0a 0%, #0d1520 45%, #0a1628 100%); } .page-about-full .about-page-scroll { flex: 1 1 auto; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; min-height: 0; } /* Short pages: pin footer to bottom of scrollport; long pages: footer follows content */ .page-about-full .about-page-scroll > .site-footer { margin-top: auto; flex-shrink: 0; } /* Expertise route (#expertise) — same shell as About: fixed layer + inner scroll */ .page-expertise-page { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: hidden; padding: 5rem 0 0; z-index: 55; background: linear-gradient(180deg, #0a0a0a 0%, #0d1520 45%, #0a1628 100%); } .page-expertise-page .expertise-page-scroll { flex: 1 1 auto; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; min-height: 0; } .page-expertise-page .expertise-page-scroll > .site-footer { margin-top: auto; flex-shrink: 0; } .page-expertise-page .expertise-page-scroll .site-footer--layer { position: relative; z-index: 5; } .page-expertise-page .page-expertise-section { opacity: 1; transform: none; transition: none; } /* ---- All clients (#clients) — full static grid, same shell as About / Expertise ---- */ .page-clients-all { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: hidden; padding: 5rem 0 0; z-index: 55; background: linear-gradient(180deg, #0a0a0a 0%, #0d1520 45%, #0a1628 100%); } .page-clients-all .clients-all-scroll { flex: 1 1 auto; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; min-height: 0; } .page-clients-all .clients-all-scroll > .site-footer { margin-top: auto; flex-shrink: 0; } .page-clients-all .clients-all-scroll .site-footer--layer { position: relative; z-index: 5; } .clients-all-header { position: relative; flex-shrink: 0; padding: 0.5rem 1.25rem 1.25rem; max-width: 1200px; width: 100%; margin: 0 auto; box-sizing: border-box; } .clients-all-back { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 1.25rem; padding: 0.45rem 1.1rem 0.45rem 0.65rem; font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(158, 239, 255, 0.95); background: rgba(10, 18, 32, 0.72); border: 1px solid rgba(0, 212, 255, 0.42); border-radius: 999px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 8px 28px rgba(0, 0, 0, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); } .clients-all-back:hover { color: #fff; border-color: rgba(0, 212, 255, 0.78); background: rgba(0, 212, 255, 0.1); box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.12), 0 10px 32px rgba(0, 212, 255, 0.08); } .clients-all-back:focus-visible { outline: 2px solid rgba(0, 212, 255, 0.85); outline-offset: 3px; } .clients-all-back-chevron { flex-shrink: 0; opacity: 0.9; } .clients-all-heading-block { text-align: center; padding: 0 0.5rem; } .clients-all-eyebrow { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0, 212, 255, 0.85); margin-bottom: 0.6rem; } .clients-all-title { font-family: var(--font-sans); font-size: clamp(1.85rem, 4.5vw, 2.85rem); font-weight: 700; font-style: normal; color: #e8f4f8; line-height: 1.12; margin-bottom: 0.75rem; } .clients-all-title-line { width: 72px; height: 2px; margin: 0 auto 0; background: linear-gradient(90deg, transparent, #00d4ff, rgba(196, 92, 38, 0.9), transparent); border-radius: 1px; } .clients-all-react-mount { width: 100%; flex: 0 1 auto; } .clients-all-page-inner { /* Wide enough for 7×168px logo discs + gutters; same card size as before */ max-width: min(1480px, 100%); margin: 0 auto; padding: 0 1.25rem 2.5rem; box-sizing: border-box; overflow-x: auto; -webkit-overflow-scrolling: touch; } .clients-all-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; justify-items: center; } @media (min-width: 480px) { .clients-all-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem 1.15rem; } } @media (min-width: 768px) { .clients-all-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 1.25rem; } } @media (min-width: 1100px) { .clients-all-grid { /* Fixed 168px tracks — card size unchanged vs 5-col layout; page scrolls horizontally if needed */ grid-template-columns: repeat(7, 168px); gap: 1.65rem 1.35rem; justify-content: center; } } /* All clients (See more): phones — 3 columns + rounded-rect logo tiles */ @media (max-width: 768px) { .page-clients-all .clients-all-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 0.65rem; justify-items: stretch; } .page-clients-all .clients-all-cell { max-width: none; } .page-clients-all .clients-all-disc { border-radius: clamp(10px, 3.5vw, 14px); } .page-clients-all .clients-all-disc-link:focus-visible { border-radius: clamp(10px, 3.5vw, 14px); } } .clients-all-cell { width: 100%; max-width: 168px; } .clients-all-disc-link { display: block; text-decoration: none; color: inherit; } .clients-all-disc-link:focus-visible { outline: 2px solid rgba(160, 215, 238, 0.9); outline-offset: 4px; border-radius: 50%; } .clients-all-disc { aspect-ratio: 1 / 1; width: 100%; border-radius: 50%; background: #fff; border: 2px solid rgba(160, 215, 238, 0.5); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); display: flex; align-items: center; justify-content: center; padding: 18%; box-sizing: border-box; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } .clients-all-disc:hover, .clients-all-disc-link:hover .clients-all-disc { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38); } .clients-all-disc img { width: 100%; height: 100%; object-fit: contain; } .about-panel { display: none; animation: aboutFadeUp 0.55s var(--ease-out) both; } .about-panel.active { display: block; } @keyframes aboutFadeUp { from { transform: translateY(16px); } to { transform: translateY(0); } } .about-page-header { text-align: center; padding: 1.5rem 1.25rem 1.25rem; } .about-eyebrow { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0, 212, 255, 0.85); margin-bottom: 0.75rem; } .about-title { font-family: var(--font-sans); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; font-style: normal; color: #e8f4f8; line-height: 1.12; margin-bottom: 1rem; } .about-header-line { width: 72px; height: 2px; margin: 0 auto 1rem; background: linear-gradient(90deg, transparent, #00d4ff, rgba(196, 92, 38, 0.9), transparent); border-radius: 1px; } .about-lead { font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.65; color: rgba(160, 200, 220, 0.82); max-width: 36rem; margin: 0 auto; } .about-lead-code { font-family: ui-monospace, "Cascadia Code", monospace; font-size: 0.82em; color: rgba(0, 212, 255, 0.95); word-break: break-all; } .about-container { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem 3rem; } .about-container--ppe-wide { max-width: min(1360px, 100%); } .about-vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 0.5rem; } @media (max-width: 768px) { .page-about-full .about-vm-grid { grid-template-columns: 1fr; gap: clamp(1rem, 3.5vw, 1.35rem); } .page-about-full .about-vm-card { padding: 1.5rem 1.35rem; } .page-about-full .about-vm-title { font-size: clamp(1.2rem, 5vw, 1.35rem); } .page-about-full .about-vm-text { font-size: 0.92rem; line-height: 1.72; } } .about-vm-card { position: relative; background: rgba(10, 15, 25, 0.5); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; padding: 2rem 1.75rem; overflow: hidden; /* Light blur so 50% fill stays visible over the dimmed hero (heavy blur reads as solid) */ backdrop-filter: blur(4px) saturate(1.15); -webkit-backdrop-filter: blur(4px) saturate(1.15); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22); transition: transform 0.35s var(--ease-out), box-shadow 0.35s; } .about-vm-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32); } .about-vm-corner { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-top: 1px solid rgba(0, 212, 255, 0.35); border-right: 1px solid rgba(0, 212, 255, 0.35); border-radius: 0 6px 0 0; opacity: 0.4; } .about-vm-card--mission .about-vm-corner { border-color: rgba(196, 92, 38, 0.45); } .about-vm-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; background: rgba(0, 212, 255, 0.1); border: 1px solid rgba(0, 212, 255, 0.28); } .about-vm-icon .about-icon { width: 26px; height: 26px; color: #00d4ff; } .about-vm-icon--gold .about-icon { color: rgba(255, 200, 140, 0.95); } .about-vm-icon--gold { background: rgba(196, 92, 38, 0.15); border-color: rgba(196, 92, 38, 0.35); } .about-vm-label { font-family: var(--font-sans); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0, 212, 255, 0.9); margin-bottom: 0.5rem; } .about-vm-label--gold { color: rgba(230, 180, 120, 0.95); } .about-vm-title { font-family: var(--font-sans); font-size: 1.35rem; font-weight: 600; color: #f5f9fb; margin-bottom: 1rem; } .about-vm-text { font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.75; color: rgba(200, 225, 235, 0.88); } .about-accent-cyan { color: #66e5ff; font-weight: 600; } .about-accent-gold { color: rgba(255, 200, 140, 0.95); font-weight: 600; } .about-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.25rem; } .about-tag { font-family: var(--font-sans); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #00d4ff; border: 1px solid rgba(0, 212, 255, 0.28); border-radius: 6px; padding: 0.25rem 0.55rem; background: rgba(0, 212, 255, 0.06); } .about-tag--gold { color: rgba(255, 200, 150, 0.95); border-color: rgba(196, 92, 38, 0.35); background: rgba(196, 92, 38, 0.08); } .about-stat-row { display: flex; gap: 1rem; margin-top: 1.75rem; } .about-stat-pill { flex: 1; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: rgba(10, 15, 25, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; backdrop-filter: blur(4px) saturate(1.15); -webkit-backdrop-filter: blur(4px) saturate(1.15); } .about-stat-emoji { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex-shrink: 0; } .about-stat-emoji .about-icon { width: 1.75rem; height: 1.75rem; color: #00d4ff; } .about-stat-emoji--gold .about-icon { color: rgba(230, 180, 120, 0.95); } .about-stat-k { font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0, 212, 255, 0.85); margin-bottom: 0.2rem; } .about-stat-k--gold { color: rgba(230, 180, 120, 0.9); } .about-stat-v { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; color: #e8f4f8; } .about-cv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 0.5rem; } .about-cv-card { position: relative; text-align: center; padding: 1.75rem 1.25rem; background: rgba(10, 15, 25, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; backdrop-filter: blur(4px) saturate(1.15); -webkit-backdrop-filter: blur(4px) saturate(1.15); transition: transform 0.3s var(--ease-out), box-shadow 0.3s; } .about-cv-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0, 212, 255, 0.12); } .about-cv-num { position: absolute; top: 0.65rem; right: 0.85rem; font-family: var(--font-sans); font-size: 2rem; font-weight: 600; color: rgba(0, 212, 255, 0.1); line-height: 1; } .about-cv-emoji { display: flex; justify-content: center; line-height: 0; margin-bottom: 0.75rem; } .about-cv-emoji .about-icon { width: 1.75rem; height: 1.75rem; color: rgba(0, 212, 255, 0.92); } .about-cv-name { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #00d4ff; margin-bottom: 0.5rem; } .about-cv-desc { font-family: var(--font-sans); font-size: 0.86rem; line-height: 1.6; color: rgba(160, 200, 220, 0.85); text-align: left; } .about-title-ppe { font-family: var(--font-sans); font-size: 0.55em; font-weight: 600; letter-spacing: 0.08em; color: rgba(0, 212, 255, 0.85); vertical-align: 0.15em; } .about-op-ppe { margin-top: 0.5rem; display: flex; flex-direction: column; align-items: stretch; gap: clamp(1.25rem, 3vw, 1.85rem); width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; } .about-op-phase--plan { align-self: center; width: 100%; max-width: min(680px, 100%); } /* Prepare | diagram | Execute — three columns (side cards share row height) */ .about-op-middle-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(0.75rem, 2.2vw, 1.5rem); align-items: stretch; width: 100%; } .about-op-middle-row .about-op-phase--prepare, .about-op-middle-row .about-op-phase--execute { min-width: 0; height: 100%; display: flex; flex-direction: column; } .about-op-diagram { margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-start; width: 100%; flex-shrink: 0; align-self: start; } .about-op-diagram-img { display: block; width: min(360px, 34vw); max-width: 100%; height: auto; object-fit: contain; } @media (min-width: 1100px) { .about-op-diagram-img { width: min(400px, 38vw); } } .about-op-phase { padding: 1.35rem 1.2rem; background: rgba(10, 15, 25, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; backdrop-filter: blur(4px) saturate(1.15); -webkit-backdrop-filter: blur(4px) saturate(1.15); transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; } .about-op-phase:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); } .about-op-phase-title { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #00d4ff; margin: 0 0 0.85rem; padding-bottom: 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .about-op-phase-list { margin: 0; padding: 0 0 0 1.15rem; font-family: var(--font-sans); font-size: 0.82rem; line-height: 1.55; color: rgba(160, 200, 220, 0.9); } .about-op-phase-list li { margin-bottom: 0.55rem; } .about-op-phase-list li:last-child { margin-bottom: 0; } .about-op-commitment { font-family: var(--font-sans); font-size: clamp(0.78rem, 1.8vw, 0.9rem); font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: #e8f4f8; margin: 0; padding: 1.25rem 1rem; background: rgba(10, 15, 25, 0.5); border-radius: 12px; border: 1px solid rgba(255, 80, 80, 0.25); backdrop-filter: blur(4px) saturate(1.15); -webkit-backdrop-filter: blur(4px) saturate(1.15); } .about-op-commitment-safety { font-weight: 800; color: #ff6b6b; } /* ---- About: Milestones (horizontal journey) ---- */ .about-ms-outer { max-width: min(1480px, 94vw); } /* Milestones need more runway than other About tabs; beat .about-container 1080px cap */ .about-container.about-ms-outer { max-width: min(1480px, 94vw); } .about-ms-journey-head { text-align: center; padding: 1.25rem 0.5rem 1.5rem; } .about-ms-journey-kicker { font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0, 212, 255, 0.45); margin: 0 0 0.65rem; } .about-ms-journey-eyebrow { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: #00d4ff; margin: 0 0 0.5rem; } .about-ms-journey-title { font-family: var(--font-sans); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.02em; color: #f2f8fc; margin: 0 0 0.75rem; line-height: 1.1; } .about-ms-journey-lead { font-family: var(--font-sans); font-size: 0.88rem; line-height: 1.55; color: rgba(140, 175, 200, 0.88); max-width: 28rem; margin: 0 auto; } .about-ms-journey-lead__mobile { display: none; } /* Standalone on page background — no card shell */ .about-ms-journey { position: relative; background: none; border: none; border-radius: 0; padding: 1.25rem 0 1.25rem; overflow: visible; box-shadow: none; } .about-ms-journey-decor { display: none; } .about-ms-journey-orb { position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.35; animation: aboutMsOrbDrift 14s ease-in-out infinite alternate; } .about-ms-journey-orb--a { width: 220px; height: 220px; background: radial-gradient(circle, rgba(0, 212, 255, 0.45) 0%, transparent 70%); top: -80px; right: -40px; animation-delay: -3s; } .about-ms-journey-orb--b { width: 180px; height: 180px; background: radial-gradient(circle, rgba(196, 92, 38, 0.35) 0%, transparent 70%); bottom: -60px; left: -30px; animation-delay: -7s; } @keyframes aboutMsOrbDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-12px, 8px) scale(1.08); } } .about-ms-scroll-outer { position: relative; margin: 0.5rem 0 0; z-index: 1; } .about-ms-scroll-fade { display: none; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 3; pointer-events: none; } .about-ms-scroll-fade--left { left: 0; background: linear-gradient(90deg, rgba(10, 22, 40, 0.97) 0%, transparent 100%); } .about-ms-scroll-fade--right { right: 0; background: linear-gradient(270deg, rgba(10, 22, 40, 0.97) 0%, transparent 100%); } .about-ms-scroll { overflow-x: hidden; overflow-y: hidden; scroll-snap-type: none; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding: 0.5rem 1.25rem 1.25rem; transition: box-shadow 0.35s ease; } .about-ms-scroll::-webkit-scrollbar { display: none; } .about-ms-scroll:focus-visible { outline: 2px solid rgba(0, 212, 255, 0.55); outline-offset: 4px; border-radius: 12px; } .about-ms-track { position: relative; display: flex; flex-direction: column; min-height: 300px; width: 100%; min-width: 0; max-width: 100%; margin-left: auto; margin-right: auto; } .about-ms-hline { position: absolute; left: 2.5rem; right: 2.5rem; top: 50%; height: 2px; margin-top: -1px; z-index: 0; border-radius: 2px; overflow: hidden; } .about-ms-hline-core { position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(0, 212, 255, 0.25) 8%, rgba(0, 212, 255, 0.65) 50%, rgba(0, 212, 255, 0.25) 92%, transparent 100% ); opacity: 0.9; } .about-ms-hline-shimmer { position: absolute; inset: 0; width: 40%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.35), transparent ); animation: aboutMsShimmer 4.5s ease-in-out infinite; transform: translateX(-100%); } @keyframes aboutMsShimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } } .about-ms-cols { position: relative; z-index: 2; display: flex; flex: 1; align-items: stretch; justify-content: space-between; gap: clamp(0.28rem, 0.9vw, 0.75rem); width: 100%; min-width: 0; max-width: 100%; margin: 0 auto; padding: 0 0.35rem; } .about-ms-node-btn { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; padding: 0 clamp(0.15rem, 0.5vw, 0.35rem) 0.5rem; border: none; background: transparent; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; align-items: center; text-align: center; scroll-snap-align: unset; border-radius: 12px; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease; } .about-ms-node-btn:focus-visible { outline: 2px solid rgba(0, 212, 255, 0.65); outline-offset: 6px; } .about-ms-node-btn:hover { background: rgba(0, 212, 255, 0.04); } .about-ms-node-btn:hover .about-ms-node-headline { color: #ffffff; } .about-ms-node-btn:hover .about-ms-node-year { color: #ffc896; } .about-ms-node-up { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.45rem; padding-bottom: 1.35rem; } .about-ms-node-year { font-family: var(--font-sans); font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 700; color: rgba(255, 190, 130, 0.92); letter-spacing: 0.04em; transition: color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .about-ms-node-headline { font-family: var(--font-sans); font-size: clamp(0.58rem, 0.35vw + 0.52rem, 0.72rem); font-weight: 700; line-height: 1.35; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(245, 250, 255, 0.95); max-width: 100%; overflow-wrap: break-word; transition: color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .about-ms-node-mid { flex: 0 0 auto; height: 28px; display: flex; align-items: center; justify-content: center; } .about-ms-node-ring { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0, 212, 255, 0.45); background: rgba(5, 12, 22, 0.85); box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.12), 0 0 16px rgba(0, 212, 255, 0.22); transition: border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .about-ms-node-btn--active .about-ms-node-year { color: #ffb366; transform: scale(1.04); } .about-ms-node-btn--active .about-ms-node-headline { color: #ffffff; } .about-ms-node-btn--active .about-ms-node-ring { border-color: #00e5ff; box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15), 0 0 22px rgba(0, 212, 255, 0.45); transform: scale(1.12); } .about-ms-node-down { flex: 1; padding-top: 1.35rem; display: flex; justify-content: flex-start; align-items: flex-start; } .about-ms-node-summary { font-family: var(--font-sans); font-size: clamp(0.6rem, 0.3vw + 0.52rem, 0.7rem); line-height: 1.45; color: rgba(130, 165, 190, 0.88); max-width: 100%; overflow-wrap: break-word; transition: color 0.35s ease; } .about-ms-node-btn--active .about-ms-node-summary { color: rgba(170, 205, 225, 0.95); } /* Desktop: wider track + zig-zag (even items: summary above line, year/title below) */ @media (min-width: 769px) { .about-ms-track { min-height: 372px; } .about-ms-cols { gap: clamp(0.35rem, 1.15vw, 0.95rem); padding: 0 0.6rem; } .about-ms-node-btn:nth-child(even) .about-ms-node-down { order: 1; justify-content: flex-end; align-items: center; text-align: center; padding-top: 0; padding-bottom: 1.35rem; } .about-ms-node-btn:nth-child(even) .about-ms-node-mid { order: 2; } .about-ms-node-btn:nth-child(even) .about-ms-node-up { order: 3; justify-content: flex-start; padding-top: 1.35rem; padding-bottom: 0; } } .about-ms-expand { position: relative; z-index: 2; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1); padding: 0 1.25rem; } .about-ms-expand.about-ms-expand--open { grid-template-rows: 1fr; } .about-ms-expand-sizer { min-height: 0; overflow: hidden; } .about-ms-expand-panel { border-top: 1px solid rgba(0, 212, 255, 0.12); margin-top: 0.25rem; padding: 1.35rem 1rem 0.25rem; opacity: 0; transform: translateY(14px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.06s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.06s; } .about-ms-expand--open .about-ms-expand-panel { opacity: 1; transform: translateY(0); } .about-ms-expand-inner { max-width: 40rem; margin: 0 auto; text-align: left; } .about-ms-expand-meta { margin-bottom: 1rem; } .about-ms-expand-year { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 180, 120, 0.95); display: block; margin-bottom: 0.35rem; } .about-ms-expand-headline { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.04em; color: #f0f7fb; margin: 0; line-height: 1.25; } .about-ms-expand-body { font-family: var(--font-sans); font-size: 0.88rem; line-height: 1.7; color: rgba(155, 190, 210, 0.92); } .about-ms-expand-body p { margin: 0 0 0.85rem; } .about-ms-expand-body p:last-child { margin-bottom: 0; } @keyframes aboutMsBodyEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .about-ms-expand-body--enter { animation: aboutMsBodyEnter 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .about-ms-expand-link { color: #5cefff; text-decoration: underline; text-underline-offset: 3px; transition: color 0.25s ease; } .about-ms-expand-link:hover { color: #9ff6ff; } @media (prefers-reduced-motion: reduce) { .about-ms-journey-orb, .about-ms-hline-shimmer { animation: none !important; } .about-ms-journey-orb { opacity: 0.22; } .about-ms-expand, .about-ms-expand-panel, .about-ms-node-btn, .about-ms-node-year, .about-ms-node-headline, .about-ms-node-ring, .about-ms-node-summary { transition-duration: 0.01ms !important; } .about-ms-node-btn--active .about-ms-node-year, .about-ms-node-btn--active .about-ms-node-ring { transform: none; } .about-ms-expand-body--enter { animation: none; } } @media (max-width: 768px) { /* Core values: one card per row (base grid is 3 columns and overwrote earlier mobile rules) */ .page-about-full .about-cv-grid { grid-template-columns: 1fr; gap: 1rem; } .page-about-full .about-cv-card { padding: 1.5rem 1.2rem; } .page-about-full .about-cv-desc { font-size: 0.9rem; line-height: 1.65; } /* Operating principles: stack Prepare, diagram, Execute */ .page-about-full .about-op-middle-row { grid-template-columns: 1fr; gap: 1.15rem; } .page-about-full .about-op-phase--plan { max-width: 100%; } .page-about-full .about-op-phase { padding: 1.15rem 1rem; } .page-about-full .about-op-diagram-img { width: min(300px, 88vw); margin-left: auto; margin-right: auto; } .page-about-full .about-op-commitment { padding: 1rem 0.85rem; font-size: clamp(0.72rem, 2.8vw, 0.82rem); } /* Milestones: vertical zig-zag timeline (desktop stays horizontal) */ .about-ms-journey-lead__desktop { display: none; } .about-ms-journey-lead__mobile { display: inline; } .page-about-full .about-ms-journey-head { padding: 1rem 0.75rem 1.25rem; } .page-about-full .about-ms-journey-lead { font-size: 0.84rem; padding: 0 0.25rem; } .page-about-full .about-ms-scroll-outer { margin-top: 0.35rem; } .page-about-full .about-ms-scroll-fade { display: none; } .page-about-full .about-ms-scroll { overflow: visible; padding: 0.25rem 0.5rem 0.75rem; scroll-snap-type: none; } .page-about-full .about-ms-track { min-width: 0; width: 100%; min-height: 0; } .page-about-full .about-ms-hline { display: none; } .page-about-full .about-ms-cols { position: relative; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0; min-width: 0; width: 100%; margin: 0; padding: 0.5rem 0 0.25rem; } /* Vertical spine */ .page-about-full .about-ms-cols::before { content: ''; position: absolute; left: 50%; top: 0.75rem; bottom: 0.75rem; width: 2px; transform: translateX(-50%); z-index: 0; border-radius: 2px; background: linear-gradient( 180deg, transparent 0%, rgba(0, 212, 255, 0.35) 6%, rgba(0, 212, 255, 0.72) 50%, rgba(0, 212, 255, 0.35) 94%, transparent 100% ); pointer-events: none; } .page-about-full .about-ms-node-btn { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0.4rem 0.65rem; align-items: start; width: 100%; max-width: none; min-width: 0; flex: none; margin: 0; padding: 1.1rem 0; text-align: left; scroll-snap-align: unset; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: transparent; } .page-about-full .about-ms-node-btn:last-child { border-bottom: none; } .page-about-full .about-ms-node-up { display: flex; flex-direction: column; gap: 0.35rem; padding: 0; min-width: 0; } .page-about-full .about-ms-node-mid { grid-row: 1 / span 2; grid-column: 2; align-self: center; justify-self: center; height: auto; padding: 0; } /* Odd rows: copy on the left (align toward center rail) */ .page-about-full .about-ms-node-btn:nth-child(odd) .about-ms-node-up { grid-column: 1; grid-row: 1; width: 100%; align-items: flex-end; text-align: right; } .page-about-full .about-ms-node-btn:nth-child(odd) .about-ms-node-down { grid-column: 1; grid-row: 2; width: 100%; justify-content: flex-end; align-items: flex-end; text-align: right; } /* Even rows: copy on the right */ .page-about-full .about-ms-node-btn:nth-child(even) .about-ms-node-up { grid-column: 3; grid-row: 1; width: 100%; align-items: flex-start; text-align: left; } .page-about-full .about-ms-node-btn:nth-child(even) .about-ms-node-down { grid-column: 3; grid-row: 2; width: 100%; justify-content: flex-start; align-items: flex-start; text-align: left; } .page-about-full .about-ms-node-year { font-size: clamp(1.05rem, 4vw, 1.25rem); } .page-about-full .about-ms-node-headline { font-size: clamp(0.68rem, 2.8vw, 0.78rem); max-width: none; line-height: 1.3; } .page-about-full .about-ms-node-summary { font-size: 0.78rem; line-height: 1.55; max-width: none; color: rgba(145, 180, 205, 0.92); } .page-about-full .about-ms-node-down { padding-top: 0; min-width: 0; } .page-about-full .about-ms-expand { padding: 0 0.65rem; margin-top: 0.25rem; } .page-about-full .about-ms-expand-panel { padding: 1.15rem 0.35rem 0.35rem; } } .about-page-strip { text-align: center; font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0, 212, 255, 0.35); padding: 1.25rem 1rem 2rem; border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 0.5rem; } .page-about-full .about-page-scroll .site-footer--layer { position: relative; z-index: 5; }