/* Shared styling for the 12 product pages. Mirrors the main site's tokens (Psitech Website.dc.html) so pages read as one system. Dark is default; .ps-light on flips to the light palette. */ * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } :root{ --bg:#080A08; --bg2:#0A0C09; --surf:#0C120A; --text:#F2F6EC; --text2:#C5CDB6; --text3:#A4AA88; --navbg:rgba(8,10,8,0.72); --line:rgba(91,119,66,0.16); --line2:rgba(91,119,66,0.28); } html.ps-light{ --bg:#EDF0E4; --bg2:#E2E7D5; --surf:#F5F8EE; --text:#161C10; --text2:#39452A; --text3:#5B6743; --navbg:rgba(237,240,228,0.82); --line:rgba(91,119,66,0.22); --line2:rgba(91,119,66,0.36); } /* Only the colour changes between themes, so transition the longhands rather than the `background` shorthand. */ body{ background:var(--bg); color:var(--text); font-family:'Roboto',sans-serif; -webkit-font-smoothing:antialiased; transition:background-color 0.3s, color 0.3s; } a{ color:#7A9A56; text-decoration:none; } a:hover{ color:#9BBD6E; } ::selection{ background:rgba(91,119,66,0.4); color:var(--text); } ::-webkit-scrollbar{ width:8px; } ::-webkit-scrollbar-track{ background:var(--bg); } ::-webkit-scrollbar-thumb{ background:#2B411C; } .mono{ font-family:'Roboto Mono',monospace; } /* ===== NAV ===== */ .p-nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 40px; background:var(--navbg); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .p-logo{ height:56px; object-fit:contain; } .logo-light{ display:none; } html.ps-light .logo-dark{ display:none; } html.ps-light .logo-light{ display:inline-block; } .p-navlinks{ display:flex; align-items:center; gap:32px; } .p-navlinks a{ font-family:'Roboto Mono',monospace; font-size:13px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text); transition:color 0.18s; } .p-navlinks a:hover{ color:#9BBD6E; } .p-cta{ font-family:'Roboto Mono',monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:#0A0A0A !important; background:#5B7742; padding:11px 20px; border-radius:2px; font-weight:700; transition:background 0.18s; } .p-cta:hover{ background:#7A9A56; color:#0A0A0A !important; } .p-toggle{ position:relative; flex:0 0 auto; width:52px; height:27px; border-radius:999px; background:rgba(91,119,66,0.22); border:1px solid rgba(91,119,66,0.5); cursor:pointer; padding:0; transition:background 0.22s; } html.ps-light .p-toggle{ background:#5B7742; } .p-toggle .knob{ position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%; background:#F0F9E0; box-shadow:0 1px 3px rgba(0,0,0,0.45); transition:left 0.22s cubic-bezier(0.22,1,0.36,1); } html.ps-light .p-toggle .knob{ left:27px; } .p-hamb{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:11px; background:rgba(91,119,66,0.12); border:1px solid rgba(91,119,66,0.4); border-radius:3px; cursor:pointer; } .p-hamb span{ display:block; height:2px; width:100%; background:var(--text); border-radius:2px; } /* ===== HERO ===== */ .p-hero{ position:relative; padding:150px 40px 70px; overflow:hidden; border-bottom:1px solid var(--line); } .p-hero::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(91,119,66,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(91,119,66,0.05) 1px,transparent 1px); background-size:44px 44px; pointer-events:none; } .p-hero-inner{ position:relative; max-width:1100px; margin:0 auto; } .p-crumb{ font-family:'Roboto Mono',monospace; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:#5B7742; margin-bottom:26px; } .p-crumb a{ color:#5B7742; } .p-crumb a:hover{ color:#9BBD6E; } .p-icon{ font-family:'Material Symbols Outlined'; font-size:44px; line-height:1; color:#7A9A56; display:block; margin-bottom:20px; } .p-tag{ font-family:'Roboto Mono',monospace; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:#7A9A56; } .p-title{ font-family:'Michroma',sans-serif; font-size:clamp(28px,5vw,54px); line-height:1.08; letter-spacing:-0.01em; color:var(--text); margin:14px 0 24px; max-width:18ch; } .p-lead{ font-size:clamp(16px,2vw,19px); line-height:1.7; color:var(--text3); max-width:60ch; } .p-num-watermark{ position:absolute; top:120px; right:40px; font-family:'Michroma',sans-serif; font-size:clamp(80px,16vw,200px); line-height:1; color:rgba(91,119,66,0.07); pointer-events:none; user-select:none; } /* ===== PRODUCT VIDEO ===== */ /* Plain autoplaying loop. Drop a clip at assets/products/.mp4; pages with no clip yet show the labelled placeholder instead. */ .p-video{ background:#050704; border-bottom:1px solid var(--line); } .p-video-inner{ position:relative; } /* Label floats over the footage so the video keeps the full viewport. */ .p-video-label{ position:absolute; top:26px; left:40px; z-index:2; font-family:'Roboto Mono',monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(155,189,110,0.9); text-shadow:0 1px 8px rgba(0,0,0,0.8); pointer-events:none; } .p-video-frame{ position:relative; height:100vh; background:#050704; overflow:hidden; } /* Video sits above the placeholder; a page with no clip yet renders an empty (transparent) video box, so the placeholder simply shows through. No JS. */ .p-video-frame video{ position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; } .p-video-placeholder{ position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:32px; color:var(--text3); } .p-video-placeholder .icn{ font-family:'Material Symbols Outlined'; font-size:52px; color:#5B7742; } .p-video-placeholder code{ font-family:'Roboto Mono',monospace; font-size:13px; color:#7A9A56; background:rgba(91,119,66,0.1); padding:4px 10px; border-radius:3px; } /* ===== VALUE ===== */ .p-value{ padding:100px 40px; border-bottom:1px solid var(--line); } .p-value-inner{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; } .p-kicker{ font-family:'Roboto Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#5B7742; margin-bottom:16px; } .p-value h2{ font-family:'Michroma',sans-serif; font-size:clamp(22px,3vw,34px); line-height:1.15; color:var(--text); } .p-value p{ font-size:17px; line-height:1.8; color:var(--text2); } .p-desc{ font-size:16px; line-height:1.8; color:var(--text3); margin-top:18px; } /* ===== CTA / FOOTER ===== */ .p-cta-band{ padding:90px 40px; text-align:center; } .p-cta-band h2{ font-family:'Michroma',sans-serif; font-size:clamp(20px,2.6vw,30px); color:var(--text); margin-bottom:26px; } .p-btn{ display:inline-block; font-family:'Roboto Mono',monospace; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; padding:15px 30px; border-radius:2px; margin:6px; } .p-btn-solid{ background:#5B7742; color:#0A0A0A !important; } .p-btn-solid:hover{ background:#7A9A56; color:#0A0A0A !important; } .p-btn-ghost{ border:1px solid rgba(91,119,66,0.4); color:var(--text3) !important; } .p-btn-ghost:hover{ border-color:#7A9A56; color:var(--text) !important; } .p-footer{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:36px 40px; border-top:1px solid var(--line); font-family:'Roboto Mono',monospace; font-size:12px; color:var(--text3); } .p-prevnext{ display:flex; gap:22px; } @media (max-width:880px){ .p-nav{ padding:12px 18px; } .p-hamb{ display:flex; } .p-navlinks{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--bg2); box-shadow:0 24px 50px rgba(0,0,0,0.55); backdrop-filter:blur(16px); border-bottom:1px solid rgba(91,119,66,0.2); padding:6px 18px 16px; } .p-navlinks.open{ display:flex; } .p-navlinks a{ font-size:13px; padding:15px 4px; border-bottom:1px solid rgba(91,119,66,0.12); } .p-logo{ height:42px; } .p-hero{ padding:120px 20px 56px; } .p-value{ padding:70px 20px; } .p-value-inner{ grid-template-columns:1fr; gap:28px; } .p-num-watermark{ display:none; } .p-video-label{ left:20px; top:20px; font-size:10px; letter-spacing:0.14em; } /* Portrait phones: a 100vh 16:9 crop throws most of the frame away. */ .p-video-frame{ height:auto; aspect-ratio:16/9; } } /* ===== CESIUM GLOBE ===== */ .p-globe{ position:absolute; inset:0; z-index:1; background:#050704; } /* Cesium injects its own widget shell; strip the border/rounding so it sits flush in the full-bleed frame. */ .p-globe .cesium-widget, .p-globe .cesium-widget canvas{ width:100%; height:100%; display:block; } /* Credit bar hidden: this globe uses no Cesium ion assets — imagery is the public-domain Natural Earth II bundled with the Apache-2.0 build. Restore this if an Ion token is ever added; Ion's terms require the attribution. */ .p-globe .cesium-viewer-bottom, .p-globe .cesium-widget-credits{ display:none !important; } /* Copernicus field selector */ .p-globe-panel{ position:absolute; z-index:3; left:40px; bottom:36px; display:flex; flex-direction:column; gap:10px; padding:16px 18px; background:rgba(8,10,8,0.72); backdrop-filter:blur(8px); border:1px solid rgba(91,119,66,0.34); } .p-globe-panel-head{ font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:#7A9A56; } .p-globe-btns{ display:flex; gap:8px; flex-wrap:wrap; } .p-globe-btns button{ display:flex; align-items:baseline; gap:7px; cursor:pointer; font-family:'Roboto Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; padding:8px 12px; color:#5B7742; background:transparent; border:1px solid rgba(91,119,66,0.3); transition:background 0.18s, color 0.18s, border-color 0.18s; } .p-globe-btns button:hover{ color:#F0F9E0; border-color:#7A9A56; } .p-globe-btns button.is-on{ color:#F0F9E0; background:rgba(91,119,66,0.28); border-color:#7A9A56; } .p-globe-btns button .u{ font-size:9px; color:#7A9A56; letter-spacing:0.06em; text-transform:none; } .p-globe-status{ font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:#9BBD6E; } .p-globe-status[data-err]{ color:#D9814F; } .p-globe-credit{ font-size:9px; letter-spacing:0.08em; color:#3D5828; } /* ----- Ocean module: docked inset player ----- */ /* Fixed size, bottom-right. Nothing scales and nothing overlays the globe, so it can't collide with the Surface Field panel or get clipped by the nav. */ .p-ocean{ position:absolute; z-index:5; right:40px; bottom:36px; width:446px; display:flex; flex-direction:column; gap:10px; padding:16px 18px; background:rgba(8,10,8,0.78); backdrop-filter:blur(8px); border:1px solid rgba(91,119,66,0.34); opacity:0; pointer-events:none; transition:opacity 0.4s ease; } .p-ocean.is-on{ opacity:1; pointer-events:auto; } .p-ocean-head{ font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:#7A9A56; } /* object-fit:contain — these are plotted fields, cover would crop the data away. Qualified past `.p-video-frame video`, which otherwise wins and forces cover. */ .p-video-frame video.p-ocean-feed{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:#050704; border:1px solid rgba(91,119,66,0.22); } .p-ocean-cap{ font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:#9BBD6E; } .p-ocean-hint{ position:absolute; z-index:3; right:40px; bottom:36px; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:#5B7742; transition:opacity 0.45s ease; } .p-ocean-hint[data-off]{ opacity:0; } @media (max-width:880px){ /* A 392px dock doesn't fit a phone frame, so the player sits under the globe. */ .p-ocean{ position:static; width:auto; opacity:1; pointer-events:auto; } .p-ocean-hint{ display:none; } .p-globe-panel{ left:20px; right:20px; bottom:20px; padding:12px 14px; } .p-globe-btns button{ font-size:10px; padding:7px 10px; } } /* ===== SCROLL STORY EXTENSION ===== */ .p-preloader { position: fixed; inset: 0; background: var(--bg); z-index: 1000; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.5s ease, visibility 0.5s ease; } .p-preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loader-bar-bg { width: 280px; height: 4px; background: var(--line); border-radius: 2px; margin-top: 24px; overflow: hidden; } .loader-bar-fill { width: 0%; height: 100%; background: #7A9A56; transition: width 0.1s linear; } .p-scroll-track { position: relative; height: 450vh; background: #050704; } .p-sticky-view { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .p-story-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; touch-action: pan-y; /* canvas must never eat vertical scroll */ } .p-hud-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 40px 40px 40px; background: linear-gradient(100deg, rgba(8, 10, 8, 0.92) 0%, rgba(8, 10, 8, 0.5) 40%, transparent 70%); } .hud-captions-container { position: relative; max-width: 500px; height: 240px; /* reserve space to prevent shifting */ z-index: 20; } .hud-caption { position: absolute; bottom: 0; left: 0; opacity: 0; transform: translateY(30px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .hud-caption.active { opacity: 1; transform: translateY(0); pointer-events: auto; } .hud-caption-num { color: #7A9A56; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; margin-bottom: 12px; display: block; text-shadow: 0 1px 8px rgba(0,0,0,0.9); } .hud-caption h2 { font-size: clamp(22px, 3.5vw, 32px); font-weight: 800; color: #F2F6EC; line-height: 1.15; margin-bottom: 12px; letter-spacing: -0.01em; text-shadow: 0 2px 24px rgba(0,0,0,0.85); } .hud-caption p { color: #C5CDB6; font-size: 15px; line-height: 1.6; margin-bottom: 16px; text-shadow: 0 1px 12px rgba(0,0,0,0.9); } .hud-spec-pill-group { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; letter-spacing: 0.06em; color: #A4AA88; text-shadow: 0 1px 8px rgba(0,0,0,0.9); } .hud-spec-pill-group span { background: rgba(91, 119, 66, 0.15); border: 1px solid rgba(91, 119, 66, 0.3); padding: 3px 8px; border-radius: 3px; } .hud-badge { font-size: 12px; letter-spacing: 0.04em; color: #A4AA88; display: flex; gap: 24px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); margin-top: 24px; } .drag-inspect-hint { position: absolute; top: 100px; right: 40px; z-index: 15; background: rgba(10, 12, 9, 0.8); border: 1px solid var(--line2); border-radius: 999px; padding: 8px 18px; font-size: 12px; font-weight: 500; color: #C5CDB6; display: flex; align-items: center; gap: 8px; pointer-events: none; letter-spacing: 0.04em; } /* Drag-scrub is pointer-only; on touch, scrolling is the scrub. */ @media (hover: none) { .drag-inspect-hint { display: none; } } @media (max-width: 880px) { .p-hud-overlay { padding: 0 20px 20px 20px; background: linear-gradient(0deg, rgba(8, 10, 8, 0.96) 0%, rgba(8, 10, 8, 0.7) 60%, transparent 100%); } .hud-captions-container { max-width: 100%; height: 280px; } .drag-inspect-hint { top: 90px; right: 20px; font-size: 11px; padding: 6px 14px; } }