/* Landing page — shares the palette in style.css. */ /* The hero's glow and its kinetic grid are deliberately wider than the page so they have no visible edge. Clipped rather than hidden, so the page keeps scrolling normally on the axis that matters and never gains a sideways one. It has to be said on the root as well as the body. The scroll container is the root element, so clipping only the body leaves the page still able to scroll sideways — by exactly the width of the vertical scrollbar, because 100vw counts it and the space the page actually gets does not. */ html:has(body.home){overflow-x:clip} /* No overflow-y override here: the home page no longer loads the application stylesheet, so there is no body{overflow:hidden} to undo. Leaving one in made its own scroll container, which pinned window.scrollY at 0 and pushed ScrollTrigger onto a fallback that trailed the real scroll position. */ body.home{ display:block; background:var(--bg); font:15px/1.65 var(--ui); color:var(--fg); overflow-x:clip; } body.home ::selection{background:rgba(74,168,255,.3)} /* Jump targets sit under a 60px sticky nav; without this the band's top border and the first few pixels of its label land behind it. */ body.home :target, body.home #how, body.home #value, body.home #proof, body.home #checks, body.home #outputs, body.home #routes, body.home #showcase{scroll-margin-top:76px} .nav{ display:flex; align-items:center; gap:24px; padding:0 26px; height:60px; border-bottom:1px solid var(--line); background:rgba(18,21,26,.86); backdrop-filter:blur(10px); position:sticky; top:0; z-index:20; } /* The brand is one image now: the name is drawn inside it, so there is no text beside it to align to. */ .nav-brand{display:flex; align-items:center; text-decoration:none} .nav-brand img{display:block; height:44px; width:auto} .nav-links{display:flex; gap:20px; margin-left:auto} .nav-links a{color:var(--fg2); text-decoration:none; font-size:13.5px} .nav-links a:hover{color:var(--accent)} /* The menu button only exists below the breakpoint where the links collapse. */ .nav-toggle{ display:none; margin-left:auto; align-items:center; justify-content:center; width:38px; height:38px; padding:0; cursor:pointer; background:transparent; border:1px solid var(--line2); border-radius:9px; color:var(--fg2); } .nav-toggle:hover{color:var(--accent); border-color:var(--accent2)} .nav-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .nav .btn{text-decoration:none} /* ─────────────────── interactive hover button (magic ui) ─────────────────── */ .interactive-hover-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 20px; border-radius: 9999px; border: 1px solid var(--line2); background: rgba(18, 22, 29, 0.90); color: var(--fg); font-size: 13.5px; font-weight: 550; text-decoration: none; cursor: pointer; overflow: hidden; box-sizing: border-box; backdrop-filter: blur(8px); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; user-select: none; } .interactive-hover-btn:hover { border-color: var(--accent); box-shadow: 0 0 18px rgba(74, 168, 255, 0.32); transform: translateY(-1px); } .interactive-hover-btn:active { transform: translateY(0); } /* Default label (visible at rest, slides right and vanishes on hover) */ .interactive-hover-btn .btn-text-default { display: inline-block; transform: translateX(4px); color: var(--fg); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; white-space: nowrap; z-index: 1; } .interactive-hover-btn:hover .btn-text-default { transform: translateX(36px); opacity: 0; } /* Hover revealed label + ArrowRight (hidden at rest, slides in smoothly on hover) */ .interactive-hover-btn .btn-text-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 7px; color: #ffffff; transform: translateX(32px); opacity: 0; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; white-space: nowrap; pointer-events: none; } .interactive-hover-btn:hover .btn-text-hover { transform: translateX(0); opacity: 1; } .interactive-hover-btn .btn-icon { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; flex-shrink: 0; transition: transform 0.3s ease; } .interactive-hover-btn:hover .btn-icon { transform: translateX(2px); } /* The expanding primary dot that blossoms to fill the button */ .interactive-hover-btn .btn-dot { position: absolute; left: 14px; top: 50%; width: 7px; height: 7px; transform: translateY(-50%) scale(1); border-radius: 9999px; background: var(--accent); box-shadow: 0 0 6px var(--accent); transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1), top 0.32s cubic-bezier(0.4, 0, 0.2, 1), width 0.32s cubic-bezier(0.4, 0, 0.2, 1), height 0.32s cubic-bezier(0.4, 0, 0.2, 1), transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.32s ease, background 0.32s ease; z-index: 2; pointer-events: none; } .interactive-hover-btn:hover .btn-dot { left: 0; top: 0; width: 100%; height: 100%; transform: scale(2.2); border-radius: 9999px; background: linear-gradient(135deg, var(--accent) 0%, #2b6fb5 100%); } main{max-width:1140px; margin:0 auto; padding:0 26px} /* ─────────────────── hero ─────────────────── */ .hero{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); align-items:center; column-gap:56px; row-gap:0; padding:84px 0 54px; } /* A single soft light behind the headline, so the section has a centre of gravity without a background image to load. */ .hero-glow{ /* Kept inside the page box. The gradients fade to nothing well before the edges, so the light still has no visible boundary without the element itself hanging off the side and giving the page a sideways scrollbar. */ position:absolute; inset:-20% 0 auto 0; height:520px; pointer-events:none; z-index:0; background: radial-gradient(56% 58% at 16% 40%, rgba(74,168,255,.16), transparent 70%), radial-gradient(46% 50% at 78% 20%, rgba(197,140,255,.11), transparent 72%); filter:blur(6px); } /* The kinetic grid sits under the glow, which washes over it, and both sit under the words. Full-bleed rather than confined to the 1140px column: a lattice that stops at the text margin reads as a panel behind the headline instead of as the ground the page is standing on. The body already clips the horizontal axis for the glow, so 100vw costs no sideways scrollbar. It takes no pointer events. The script listens on the window and converts, so the buttons and links in front of it stay clickable. */ .hero-grid{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:100%; z-index:0; pointer-events:none; display:block; /* Faded out at every edge so the lattice has no boundary of its own — it arrives out of the page background and returns to it. */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%), linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); -webkit-mask-composite:source-in; mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%), linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-composite:intersect; } .hero-text,.hero-art{position:relative; z-index:1; min-width:0} .hero-badges{ grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.07); z-index:1; position:relative; } .badge-chip{ display:inline-flex; align-items:center; justify-content:center; text-align:center; flex:1 1 0; font-size:11.5px; font-weight:550; color:var(--fg2); background:rgba(18,22,29,.72); border:1px solid var(--line2); padding:8px 12px; border-radius:999px; letter-spacing:.2px; white-space:nowrap; backdrop-filter:blur(8px); transition:border-color .25s, color .25s, background .25s, transform .25s, box-shadow .25s; } .badge-chip:hover{ border-color:var(--accent); color:#fff; background:rgba(74,168,255,.1); transform:translateY(-1px); box-shadow:0 4px 14px rgba(74,168,255,.18); } @media (max-width:1024px){ .hero-badges{ flex-wrap:wrap; justify-content:center; gap:10px; } .badge-chip{ flex:0 1 auto; white-space:normal; } } .eyebrow{ display:inline-flex; align-items:center; gap:8px; margin-bottom:20px; padding:5px 12px 5px 9px; border:1px solid var(--line2); border-radius:999px; background:var(--bg2); color:var(--fg2); font-size:12px; letter-spacing:.2px; } .eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(94,214,154,.16); } .hero h1{ font-size:clamp(34px,5vw,58px); line-height:1.04; margin:0 0 20px; letter-spacing:-1.6px; font-weight:660; } /* The second line carries the colour; the first stays plain so the contrast does the emphasis rather than the weight. */ .hero h1 em{ font-style:normal; background:linear-gradient(96deg,var(--accent) 6%,#8ec9ff 44%,var(--curv) 96%); -webkit-background-clip:text; background-clip:text; color:transparent; } .lede{font-size:17.5px; color:var(--fg2); margin:0 0 16px; max-width:56ch; line-height:1.6} .sub{font-size:14.5px; color:var(--fg3); margin:0 0 22px; max-width:56ch} .cta{display:flex; gap:12px; flex-wrap:wrap} .btn.big{padding:12px 22px; font-size:14.5px; border-radius:8px; text-decoration:none; display:inline-block; font-weight:550} .btn.primary.big{box-shadow:0 8px 26px rgba(43,111,181,.34)} .btn.big.ghost{background:transparent; border-color:var(--line2)} .btn.big.ghost:hover{background:var(--bg2); border-color:var(--accent2)} .meta{font-size:12.5px; color:var(--fg3); margin:10px 0 0; max-width:52ch; line-height:1.6} /* ---- the drawing ---- */ .hero-art svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 22px 52px rgba(0,0,0,.5)); } .art-panel rect{fill:var(--bg2); stroke:var(--line)} .art-grid path{stroke:rgba(255,255,255,.045); stroke-width:1; fill:none} .art-tag{ fill:var(--fg3); font:600 9px var(--ui); letter-spacing:1.2px; } .art-note{fill:var(--fg3); font:9.5px var(--mono)} .art-tag.end{text-anchor:end} .art-leg{fill:none; stroke:var(--fg3); stroke-width:1; stroke-dasharray:3 4; opacity:.75} .art-ip{fill:var(--accent)} .art-tp circle{fill:var(--bg2); stroke:var(--fg2); stroke-width:1.5} .art-earth{fill:url(#earth); stroke:none} .art-ground{fill:none; stroke:var(--ground); stroke-width:2; stroke-linecap:round} .hero-art .ln{fill:none; stroke-width:3.4; stroke-linecap:round} .hero-art .s1,.hero-art .s2{stroke:var(--straight)} .hero-art .t1,.hero-art .t2{stroke:var(--spiral)} .hero-art .arc{stroke:var(--arc)} .hero-art .rail{stroke:var(--rail); stroke-width:2.6} /* Drawn on once, in the order a surveyor would set it out. pathLength normalises every element to 100 so one duration suits them all. */ @keyframes artDraw{to{stroke-dashoffset:0}} @keyframes artFade{to{opacity:1}} .hero-art .ln,.art-ground{ stroke-dasharray:100; stroke-dashoffset:100; animation:artDraw .9s ease-out forwards; } .art-ground{animation-duration:1.1s} .hero-art .t1{animation-delay:.34s} .hero-art .arc{animation-delay:.42s} .hero-art .t2{animation-delay:.62s} .hero-art .s2{animation-delay:.7s} .hero-art .rail{animation-delay:.5s} .art-tp circle,.art-ip,.art-leg,.art-earth,.art-note{ opacity:0; animation:artFade .5s ease-out 1.05s forwards; } .art-earth{animation-delay:.95s} /* A moving line is decoration; nobody should have to watch it to read the page. */ @media (prefers-reduced-motion:reduce){ .hero-art .ln,.art-ground{stroke-dashoffset:0; animation:none} .art-tp circle,.art-ip,.art-leg,.art-earth,.art-note{opacity:1; animation:none} /* The grid draws one still frame and never starts; this is the belt to that script's braces. */ .hero-grid{opacity:.7} } @media (max-width:900px){ .hero{grid-template-columns:1fr; gap:36px; padding:56px 0 48px} .hero-art{max-width:460px} /* The hero is two or three times taller once it stacks, and a lattice run the whole way down it crosses every line of body text. Capped into a band behind the headline, where the type is large and white enough not to care, and faded out well above the paragraph that follows. */ .hero-grid{ height:min(100%,380px); -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 34%, transparent 100%); -webkit-mask-composite:source-over; mask-image:linear-gradient(to bottom, #000 0%, #000 34%, transparent 100%); mask-composite:add; } } /* stat strip */ .strip{ display:flex; gap:8px; border:1px solid var(--line); border-radius:11px; background:var(--bg2); padding:4px; margin-bottom:22px; } .stat{flex:1; text-align:center; padding:15px 8px; border-radius:8px} .stat b{display:block; font-size:23px; font-family:var(--mono); color:var(--accent); line-height:1.2} .stat span{font-size:11px; color:var(--fg3); text-transform:uppercase; letter-spacing:.7px} /* bands */ .band{padding:56px 0; border-top:1px solid var(--line)} .band.alt{background:linear-gradient(180deg,rgba(255,255,255,.014),transparent)} .band h2{font-size:26px; margin:0 0 10px; letter-spacing:-.5px; font-weight:640} .body{color:var(--fg2); max-width:66ch; margin:0 0 14px} .body.wide{max-width:80ch} .closing{text-align:center} .closing .body{margin:0 auto 22px} .closing .btn{text-decoration:none} /* steps */ .steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:18px; margin-top:26px} .step{position:relative; padding-top:6px} .step i{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; background:var(--bg4); color:var(--accent); font-style:normal; font-weight:700; font-size:12.5px; font-family:var(--mono); margin-bottom:11px; } .step h3{font-size:15px; margin:0 0 7px; font-weight:600} .step p{font-size:13.5px; color:var(--fg2); margin:0; line-height:1.6} /* two-column feature */ .two{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start} blockquote{ margin:16px 0; padding:13px 16px; background:var(--bg2); border-left:3px solid var(--err); border-radius:0 7px 7px 0; font-size:13.5px; color:var(--fg2); font-family:var(--mono); line-height:1.6; } .panel{background:var(--bg2); border:1px solid var(--line); border-radius:11px; overflow:hidden} .panel-head{ padding:10px 14px; border-bottom:1px solid var(--line); font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--fg3); font-weight:600; } .fake-pills{display:flex; gap:8px; padding:14px} .fake-pills div{ flex:1; text-align:center; padding:9px 4px; border-radius:7px; background:var(--bg3); border:1px solid var(--line); } .fake-pills b{display:block; font-size:20px; font-family:var(--mono); line-height:1.2} /* Coloured by what the pill counts, not by where it sits: as position-based rules these painted a non-zero error count in the "all clear" green. */ .fake-pills .err b{color:var(--err)} .fake-pills .warn b{color:var(--warn)} .fake-pills .note b{color:var(--info)} .fake-pills span{font-size:10px; color:var(--fg3); text-transform:uppercase; letter-spacing:.5px} .fake-issue{ display:flex; gap:10px; margin:0 14px 10px; padding:10px 12px; border-radius:7px; background:var(--bg3); border-left:3px solid var(--line2); align-items:flex-start; } .fake-issue.warn{border-left-color:var(--warn)} .fake-issue.err{border-left-color:var(--err)} .fake-issue i{font-style:normal; font-size:12px; line-height:1.4} .fake-issue.warn i{color:var(--warn)} .fake-issue.err i{color:var(--err)} .fake-issue div{flex:1; min-width:0} .fake-issue p{margin:0; font-size:12.5px; line-height:1.5; color:var(--fg)} .fake-issue em{display:block; margin-top:5px; font-size:10.5px; color:var(--fg3); font-family:var(--mono); font-style:normal} .fake-issue button{ background:var(--bg4); border:1px solid var(--accent2); color:var(--accent); border-radius:5px; padding:3px 9px; font-size:11px; cursor:default; flex:0 0 auto; } /* cards */ .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:16px; margin-top:24px} .card2{ background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:17px 19px; } .card2 h3{font-size:15px; margin:0 0 8px; font-weight:600} .card2 p{font-size:13px; color:var(--fg2); margin:0; line-height:1.6} a.card2.link{text-decoration:none; color:inherit; display:block; transition:border-color .14s, transform .14s} a.card2.link:hover{border-color:var(--accent2); transform:translateY(-2px)} a.card2.link.warn:hover{border-color:var(--warn)} .pill-tag{ display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:3px 7px; border-radius:4px; margin-bottom:9px; } .pill-tag.auto{background:rgba(94,214,154,.15); color:var(--ok)} .pill-tag.bad{background:rgba(255,107,107,.15); color:var(--err)} .std-card{position:relative} .std-flag{font-size:22px; display:inline-block; margin-bottom:8px; line-height:1} /* limits */ .limits{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; max-width:88ch} .limits li{ padding:13px 16px; background:var(--bg2); border:1px solid var(--line); border-radius:8px; font-size:13.5px; color:var(--fg2); line-height:1.6; } .limits b{color:var(--fg)} /* footer */ .foot{ border-top:1px solid var(--line); margin-top:40px; padding:26px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; max-width:1140px; margin-left:auto; margin-right:auto; } .foot>div:first-child{display:flex; align-items:center; font-size:13px; color:var(--fg2)} /* Quieter than the bar at the top: a footer mark should sign the page, not announce it again. */ /* Signed, not announced. The mono artwork draws itself in currentColor, which an cannot inherit — so it arrives black and is turned to off-white here, flat, with no colour left in it. */ .foot-mark{ display:block; height:30px; width:auto; filter:brightness(0) invert(1); opacity:.5; transition:opacity .25s; } .foot-mark:hover{opacity:.8} .foot-links{display:flex; gap:16px; margin-left:auto} .foot-links a{color:var(--fg2); text-decoration:none; font-size:13px} .foot-links a:hover{color:var(--accent)} .foot-note{width:100%; font-size:11.5px; color:var(--fg3)} /* --- Section heads --- */ .band-head{margin-bottom:6px} .band-head h2{ font-size:28px; font-weight:660; letter-spacing:-.6px; margin:0 0 10px; background:linear-gradient(96deg,var(--fg) 30%,var(--fg2) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .band-head .body{color:var(--fg2); max-width:72ch; margin:0 0 6px; font-size:15px; line-height:1.6} .m{font-family:var(--mono); font-size:.94em; color:var(--fg)} .band h3{color:var(--fg)} @media (max-width:840px){ .hero{flex-direction:column-reverse; align-items:flex-start; gap:26px; padding:44px 0 36px} .hero-art img{width:130px; height:130px} .two{grid-template-columns:1fr; gap:26px} .hydro-widget{grid-template-columns:1fr} .sheets-showcase-grid{grid-template-columns:1fr} /* The section links become a sheet under the bar rather than disappearing: without this there was no way to reach them at all on a phone. The bar has to give up its fixed 60px height, or the sheet spills out of the background that is supposed to be behind it. */ .nav{ flex-wrap:wrap; height:auto; min-height:60px; align-content:center; column-gap:12px; row-gap:0; padding:8px 26px; } .nav-toggle{display:inline-flex; order:3; flex:0 0 auto} /* Brand, call to action and menu button have to share one 390px row, so the button gives up the padding it does not need at this size. */ .nav .interactive-hover-btn{ order:2; margin-left:auto; padding:0 12px 0 24px; font-size:12.5px; height:36px; } /* Keep the dot clear of the label now that the left padding is tighter. */ .nav .interactive-hover-btn .btn-dot{left:10px} .nav-brand{flex:0 0 auto} .nav-brand img{width:120px; height:auto} .nav-links{ display:none; order:4; flex-basis:100%; flex-direction:column; gap:0; margin:8px 0 0; padding:0; border-top:1px solid var(--line); } .nav-links.open{display:flex} .nav-links a{padding:14px 2px; font-size:15px; border-bottom:1px solid var(--line)} .nav-links a:last-child{border-bottom:none} .strip{flex-wrap:wrap} .stat{min-width:40%} } /* ─────────────────── Hydrology 2D Simulation Widget ─────────────────── */ .hydro-widget{ display:grid; grid-template-columns:1.15fr 1fr; gap:28px; margin-top:28px; background:linear-gradient(145deg, var(--bg2) 0%, rgba(23,27,34,.92) 100%); border:1px solid var(--line); border-radius:16px; padding:24px; align-items:center; position:relative; box-shadow:0 8px 40px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.03) inset; } /* Corner glow mirroring the comp widget */ .hydro-widget::before{ content:''; position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; border-radius:17px; pointer-events:none; background:linear-gradient(135deg, rgba(74,168,255,.1) 0%, transparent 35%, transparent 65%, rgba(94,214,154,.06) 100%); z-index:0; opacity:.6; } .hydro-widget>*{position:relative; z-index:1} .hydro-canvas-wrap{ position:relative; background:linear-gradient(180deg,var(--bg) 0%,rgba(18,21,26,.85) 100%); border:1px solid var(--line2); border-radius:12px; overflow:hidden; } /* Scan-line texture (matches comp visual box) */ .hydro-canvas-wrap::after{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:12px; background:repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(255,255,255,.008) 2px, rgba(255,255,255,.008) 4px ); z-index:2; } #hydroCanvas{display:block; width:100%; height:auto; position:relative; z-index:1} .hydro-overlay-badge{ position:absolute; top:12px; right:12px; z-index:3; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; background:rgba(18,21,26,.88); backdrop-filter:blur(8px); border:1px solid rgba(74,168,255,.25); color:var(--accent); padding:5px 10px; border-radius:6px; box-shadow:0 0 16px rgba(74,168,255,.1); animation:hydroBadgePulse 3s ease-in-out infinite; } @keyframes hydroBadgePulse{ 0%,100%{box-shadow:0 0 16px rgba(74,168,255,.1)} 50%{box-shadow:0 0 24px rgba(74,168,255,.2)} } /* --- Controls panel --- */ .hydro-controls h3{ font-size:19px; margin:0 0 18px; font-weight:650; letter-spacing:-.2px; background:linear-gradient(96deg,var(--fg) 40%,var(--fg2) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .hydro-field{margin-bottom:16px} .hydro-field label{ display:block; font-size:12.5px; color:var(--fg2); margin-bottom:8px; font-weight:500; letter-spacing:.1px; } .hydro-field label b{color:var(--accent); font-weight:700} /* Range slider */ .hydro-field input[type=range]{ width:100%; height:6px; -webkit-appearance:none; appearance:none; background:linear-gradient(90deg, var(--accent), var(--bg3)); border-radius:3px; outline:none; cursor:pointer; margin:10px 0; } .hydro-field input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid var(--bg2); box-shadow:0 0 10px rgba(74,168,255,.35); cursor:grab; margin-top:-6px; transition:box-shadow .2s, transform .2s; } .hydro-field input[type=range]::-webkit-slider-thumb:hover{ box-shadow:0 0 18px rgba(74,168,255,.5); transform:scale(1.12); } .hydro-field input[type=range]::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.05); } .hydro-field input[type=range]::-webkit-slider-runnable-track{ height:6px; border-radius:3px; } .hydro-field input[type=range]::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--accent); border:3px solid var(--bg2); box-shadow:0 0 10px rgba(74,168,255,.35); cursor:grab; } .hydro-field input[type=range]::-moz-range-track{ height:6px; background:var(--bg3); border-radius:3px; border:none; } /* Select dropdown */ .hydro-field select{ width:100%; font-size:13px; padding:10px 36px 10px 14px; border-radius:8px; background:var(--bg3); border:1px solid var(--line2); color:var(--fg); font-family:var(--ui); cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2395a1b3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:12px; transition:border-color .2s, box-shadow .2s; } .hydro-field select:hover{border-color:var(--accent2)} .hydro-field select:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(74,168,255,.12)} /* --- Result stat cards --- */ .hydro-results{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px} .hydro-stat{ background:linear-gradient(160deg,var(--bg3) 0%,rgba(29,34,43,.7) 100%); border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; transition:border-color .2s, box-shadow .2s, transform .2s; } .hydro-stat:hover{ border-color:var(--line2); transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,.2); } .hydro-stat.full{ grid-column:1 / -1; background:linear-gradient(160deg,rgba(74,168,255,.08) 0%,rgba(94,214,154,.04) 100%); border-color:rgba(74,168,255,.22); box-shadow:0 0 20px rgba(74,168,255,.06); } .hydro-stat.full:hover{ border-color:rgba(74,168,255,.35); box-shadow:0 4px 24px rgba(74,168,255,.12); } .hydro-stat .lbl{ font-size:9.5px; color:var(--fg3); text-transform:uppercase; letter-spacing:.7px; font-weight:600; } .hydro-stat .val{ font-size:17px; font-weight:700; font-family:var(--mono); color:var(--fg); letter-spacing:-.3px; } .hydro-stat .val.highlight{ color:var(--ok); font-size:15px; text-shadow:0 0 20px rgba(94,214,154,.2); } .hydro-stat .formula{font-size:9.5px; color:var(--fg3); font-family:var(--mono); opacity:.7} .hydro-stat .sub{font-size:11px; color:var(--fg2); margin-top:2px; line-height:1.45} /* ═══════════════════════════════════════════════════════════════════ Landing rebuild — scroll motion, section rhythm, ROI, bento, routes. Everything below overrides the older, denser layout above it. ═══════════════════════════════════════════════════════════════════ */ /* ---- scroll reveal ---- One class, one observer. Children of a revealed group stagger off --i so a grid arrives as a wave rather than all at once. */ .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1); transition-delay:calc(var(--i,0) * 70ms); will-change:opacity, transform; } .reveal.in{opacity:1; transform:none} /* ---- section rhythm ---- More air and a lighter rule, so bands read as chapters rather than rows of a table. */ .lp .band{padding:96px 0 84px; border-top:none; position:relative} .lp .band::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--line2) 22%,var(--line2) 78%,transparent); } .lp .band.alt{ background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0) 62%); } .sec-label{ display:inline-flex; align-items:center; gap:9px; margin-bottom:16px; font:600 10.5px/1 var(--mono); letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); } .sec-label::before{ content:''; width:26px; height:1px; background:linear-gradient(90deg,var(--accent),transparent); } /* The page's one voice for a section title: large, tight, with the second clause carrying the gradient exactly as the hero does. */ .lp .band h2,.lp .band-head h2,.lp .closing h2{ font-size:clamp(29px,3.7vw,46px); line-height:1.08; letter-spacing:-1.2px; font-weight:660; margin:0 0 14px; color:var(--fg); background:none; -webkit-background-clip:border-box; background-clip:border-box; } .lp .band h2 em,.lp .closing h2 em{ font-style:normal; background:linear-gradient(96deg,var(--accent) 4%,#8ec9ff 46%,var(--curv) 98%); -webkit-background-clip:text; background-clip:text; color:transparent; } .lp .band-head{margin-bottom:34px; max-width:62ch} .lp .band-head .body,.lp .band .body{font-size:16px; color:var(--fg2); margin:0; max-width:56ch} .sub-head{margin:52px 0 20px} .sub-head h3{font-size:20px; font-weight:640; letter-spacing:-.4px; margin:0 0 5px} .sub-head p{margin:0; color:var(--fg3); font-size:14.5px} /* ---- stat strip ---- */ .lp .strip{ display:flex; gap:6px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,var(--bg2),rgba(23,27,34,.6)); padding:6px; margin:0 0 8px; box-shadow:0 10px 40px rgba(0,0,0,.28); } .lp .stat b{ font-size:clamp(22px,2.6vw,30px); letter-spacing:-.5px; font-variant-numeric:tabular-nums; } .lp .stat span{font-size:10.5px} /* ---- 01 · flow ---- A single hairline running behind the three steps, drawn left to right when the group scrolls in — the same stroke-dash trick the hero uses. */ .flow{position:relative; padding-top:8px} .flow-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:30px; position:relative; } /* The connector belongs to the step it leaves, so it always lands on the next badge whatever the grid does with the columns — and there is none after the last one, which would otherwise run off into nothing. */ .step{position:relative} .step::after{ content:''; position:absolute; top:19px; left:52px; right:-32px; height:1px; background:linear-gradient(90deg,var(--accent2),var(--line2)); transform:scaleX(0); transform-origin:left; transition:transform .8s cubic-bezier(.16,.8,.3,1); transition-delay:calc(var(--i,0) * 220ms + 200ms); } .flow.in .step::after{transform:scaleX(1)} .step:last-child::after{display:none} @media (max-width:740px){.step::after{display:none}} .step i{ width:38px; height:38px; border-radius:11px; font-size:13px; background:var(--bg3); border:1px solid var(--line2); color:var(--accent); margin-bottom:16px; box-shadow:0 0 0 6px var(--bg); transition:border-color .3s, box-shadow .3s, color .3s; } .step:hover i{border-color:var(--accent); color:#fff; box-shadow:0 0 0 6px var(--bg), 0 0 22px rgba(74,168,255,.28)} .step h3{font-size:19px; margin:0 0 8px; font-weight:640; letter-spacing:-.3px} .step p{font-size:14.5px; line-height:1.6; max-width:34ch} /* ---- 02 · ROI ---- */ .roi{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:linear-gradient(145deg,var(--bg2) 0%,rgba(23,27,34,.9) 100%); box-shadow:0 18px 60px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.03) inset; } .roi-controls{ padding:28px; border-right:1px solid var(--line); background:linear-gradient(160deg,rgba(74,168,255,.05),transparent 55%); } .roi-out{padding:28px; display:flex; flex-direction:column; justify-content:center} .roi-field{margin-bottom:22px} .roi-field label{ display:block; font-size:12.5px; color:var(--fg2); margin-bottom:10px; font-weight:500; } .roi-field label b{color:var(--accent); font-weight:700; font-family:var(--mono)} .roi-field input[type=range]{ width:100%; height:6px; -webkit-appearance:none; appearance:none; background:linear-gradient(90deg,var(--accent),var(--bg3)); border-radius:3px; outline:none; cursor:pointer; margin:4px 0; } .roi-field input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid var(--bg2); box-shadow:0 0 10px rgba(74,168,255,.35); cursor:grab; margin-top:-6px; transition:box-shadow .2s, transform .2s; } .roi-field input[type=range]::-webkit-slider-thumb:hover{ box-shadow:0 0 18px rgba(74,168,255,.5); transform:scale(1.12); } .roi-field input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:3px} .roi-field input[type=range]::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--accent); border:3px solid var(--bg2); box-shadow:0 0 10px rgba(74,168,255,.35); cursor:grab; } .roi-field input[type=range]::-moz-range-track{ height:6px; background:var(--bg3); border-radius:3px; border:none; } .roi-scale{ display:flex; justify-content:space-between; margin-top:6px; font:10px var(--mono); color:var(--fg3); } .roi-field select{ width:100%; font-size:13px; padding:10px 36px 10px 14px; border-radius:8px; background:var(--bg3); border:1px solid var(--line2); color:var(--fg); font-family:var(--ui); cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2395a1b3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:12px; transition:border-color .2s, box-shadow .2s; } .roi-field select:hover{border-color:var(--accent2)} .roi-field select:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(74,168,255,.12)} .roi-kpis{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:26px} .roi-kpi{ background:var(--bg3); border:1px solid var(--line); border-radius:11px; padding:13px 15px; display:flex; flex-direction:column; gap:3px; } .roi-kpi .lbl{ font-size:9.5px; color:var(--fg3); text-transform:uppercase; letter-spacing:.7px; font-weight:600; } .roi-kpi .val{ font:700 20px/1.2 var(--mono); color:var(--fg); letter-spacing:-.4px; font-variant-numeric:tabular-nums; } .roi-kpi.hero-kpi{ grid-column:1 / -1; background:linear-gradient(150deg,rgba(94,214,154,.12),rgba(74,168,255,.05)); border-color:rgba(94,214,154,.3); box-shadow:0 0 28px rgba(94,214,154,.08); } .roi-kpi.hero-kpi .val.big{ font-size:clamp(28px,3.4vw,40px); color:var(--ok); text-shadow:0 0 30px rgba(94,214,154,.25); } .roi-kpi .sub{font-size:11px; color:var(--fg3); margin-top:2px} .roi-bar-row{margin-bottom:22px} .roi-bar-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; flex-wrap:wrap; } .roi-bar-head .who{font-size:13px; color:var(--fg2); font-weight:550} .roi-bar-head .who .tick{color:var(--accent); font-style:normal; margin-left:2px} .roi-bar-head .num{ font:700 14px var(--mono); color:var(--fg); font-variant-numeric:tabular-nums; } .roi-track{ height:14px; border-radius:8px; background:var(--bg); overflow:hidden; border:1px solid var(--line); } .roi-fill{ height:100%; width:0; border-radius:7px; transition:width .7s cubic-bezier(.16,.8,.3,1); } .roi-fill.conv{background:linear-gradient(90deg,rgba(255,107,107,.55),var(--err))} .roi-fill.rad{ background:linear-gradient(90deg,var(--accent2),var(--ok)); box-shadow:0 0 18px rgba(94,214,154,.3); } .roi-bar-foot{margin-top:7px; font-size:12px; color:var(--fg3)} .roi-wins{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:26px 0 20px; padding-top:22px; border-top:1px solid var(--line); } .win b{ display:block; font:700 17px/1.25 var(--mono); color:var(--accent); letter-spacing:-.3px; margin-bottom:3px; } .win span{font-size:11.5px; color:var(--fg3); line-height:1.45; display:block} .roi-model{border-top:1px solid var(--line); padding-top:14px} .roi-model summary{ cursor:pointer; font-size:12px; color:var(--fg3); list-style:none; display:flex; align-items:center; gap:7px; user-select:none; } .roi-model summary::-webkit-details-marker{display:none} .roi-model summary::before{content:'▸'; font-size:10px; transition:transform .2s} .roi-model[open] summary::before{transform:rotate(90deg)} .roi-model summary:hover{color:var(--accent)} .roi-model-body{margin-top:12px; font-size:12px; color:var(--fg3); line-height:1.6} .roi-model-body p{margin:0 0 10px} .roi-model-body b{color:var(--fg2)} .roi-model-body ul{ list-style:none; padding:0; margin:0 0 12px; font-family:var(--mono); font-size:11px; } .roi-model-body li{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-top:1px solid rgba(255,255,255,.04); } .roi-model-body li b{color:var(--accent); font-weight:600} /* ---- 04 · checks ---- */ .lp .two{gap:52px; align-items:center} .lp .two .btn{margin-top:6px} .lp blockquote{font-size:13px} /* ---- 05 · bento ---- */ .bento{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .tile{ position:relative; display:flex; flex-direction:column; overflow:hidden; background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:22px 24px 20px; text-decoration:none; color:inherit; transition:border-color .25s, transform .25s, box-shadow .25s, background .25s; } .tile.wide{grid-column:span 2; grid-row:span 2} /* A light that only appears on approach — the tile lifts out of the page rather than merely changing its border. */ .tile::after{ content:''; position:absolute; inset:0; border-radius:14px; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(120% 80% at 12% 0%, rgba(74,168,255,.13), transparent 62%); } .tile:hover{ border-color:var(--accent2); transform:translateY(-4px); box-shadow:0 16px 44px rgba(0,0,0,.4); } .tile:hover::after{opacity:1} .tile-chips{display:flex; gap:6px; margin-bottom:13px; flex-wrap:wrap} .tile-chips span{ font:700 9.5px var(--mono); letter-spacing:.8px; text-transform:uppercase; color:var(--accent); background:rgba(74,168,255,.1); border:1px solid rgba(74,168,255,.22); padding:4px 8px; border-radius:5px; } .tile h3{font-size:17px; margin:0 0 7px; font-weight:640; letter-spacing:-.3px} .tile.wide h3{font-size:22px; letter-spacing:-.6px} .tile p{margin:0; font-size:13.5px; color:var(--fg2); line-height:1.55} /* The sheet the tile is describing, drawn rather than photographed: plan strip above, L-Section and its data bands below, title block in the corner. */ .tile-art{ display:block; width:100%; height:auto; margin:20px 0 4px; border-radius:8px; background:var(--bg); border:1px solid var(--line); } .tile-art .edge{fill:none; stroke:var(--line2); stroke-width:1; stroke-dasharray:4 4} .tile-art .trk{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.2s ease-out .25s; } .tile-art .pl circle{fill:var(--bg); stroke:var(--spiral); stroke-width:1.5} .tile-art .sep{stroke:var(--line); stroke-width:1} .tile-art .gnd{ fill:none; stroke:var(--ground); stroke-width:1.6; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.2s ease-out .4s; } .tile-art .frm{ fill:none; stroke:var(--rail); stroke-width:1.8; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.2s ease-out .55s; } .tile-art .bands path{stroke:rgba(255,255,255,.07); stroke-width:1; fill:none} .tile-art .tb{fill:var(--bg3); stroke:var(--line2); stroke-width:1} .tile-art .tbl{stroke:var(--line2); stroke-width:1; fill:none} .reveal.in .tile-art .trk, .reveal.in .tile-art .gnd, .reveal.in .tile-art .frm{stroke-dashoffset:0} .tile-go{ margin-top:auto; padding-top:16px; font-size:12.5px; color:var(--accent); font-weight:550; opacity:.75; transition:opacity .25s, transform .25s; } .tile:hover .tile-go{opacity:1; transform:translateX(3px)} .tile-note{ margin-top:auto; padding-top:16px; font:11px var(--mono); color:var(--fg3); line-height:1.5; } /* ---- 06 · standards wall ---- */ .std-wall{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px} .std{ display:flex; flex-direction:column; gap:4px; padding:18px 20px; background:var(--bg2); border:1px solid var(--line); border-radius:12px; transition:border-color .25s, transform .25s, background .25s; } .std:hover{border-color:var(--accent2); transform:translateY(-3px); background:var(--bg3)} .std .fl{font-size:24px; line-height:1; margin-bottom:8px} .std b{font-size:14.5px; font-weight:640; letter-spacing:-.2px} .std em{font:11.5px var(--mono); color:var(--fg3); font-style:normal} /* ---- 07 · routes ---- */ .route-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:14px} .route{ display:flex; flex-direction:column; padding:20px 22px; text-decoration:none; color:inherit; background:var(--bg2); border:1px solid var(--line); border-radius:13px; transition:border-color .25s, transform .25s, box-shadow .25s; } .route:hover{border-color:var(--accent2); transform:translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,.36)} .route.bad:hover{border-color:var(--err)} .route-tag{ align-self:flex-start; font:700 9.5px var(--mono); letter-spacing:.7px; text-transform:uppercase; padding:4px 8px; border-radius:5px; margin-bottom:11px; } .route-tag.ghats{background:rgba(255,193,77,.14); color:var(--warn)} .route-tag.highspeed{background:rgba(74,168,255,.14); color:var(--accent)} .route-tag.coast{background:rgba(94,214,154,.14); color:var(--ok)} .route-tag.metro{background:rgba(197,140,255,.14); color:var(--curv)} .route-tag.broken{background:rgba(255,107,107,.14); color:var(--err)} .route h3{font-size:18px; margin:0 0 10px; font-weight:640; letter-spacing:-.35px} .route ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px; font:11.5px/1.5 var(--mono); color:var(--fg3); } .route ul li::before{content:'· '; color:var(--accent)} .route ul b{color:var(--fg2)} .route-go{ margin-top:16px; font-size:12.5px; color:var(--accent); font-weight:550; opacity:.7; transition:opacity .25s, transform .25s; } .route:hover .route-go{opacity:1; transform:translateX(3px)} /* ---- close ---- */ .lp .closing{text-align:center; padding-bottom:96px} .lp .closing .body{margin:0 auto 26px} .lp .closing h2{max-width:18ch; margin-left:auto; margin-right:auto} .honest{ margin:30px auto 0; max-width:56ch; font-size:12.5px; color:var(--fg3); line-height:1.65; } .honest a{color:var(--fg2); text-decoration:none; border-bottom:1px solid var(--line2)} .honest a:hover{color:var(--accent); border-color:var(--accent)} /* ---- responsive ---- */ @media (max-width:980px){ .std-wall{grid-template-columns:repeat(2,minmax(0,1fr))} .roi{grid-template-columns:1fr} .roi-controls{border-right:none; border-bottom:1px solid var(--line)} .bento{grid-template-columns:repeat(2,minmax(0,1fr))} .tile.wide{grid-column:span 2} } @media (max-width:640px){ .lp .band{padding:64px 0 56px} .std-wall{grid-template-columns:1fr} .tile.wide{grid-row:span 1} .bento{grid-template-columns:1fr} .tile.wide{grid-column:span 1} .roi-kpis{grid-template-columns:1fr} .roi-wins{grid-template-columns:1fr; gap:14px} .lp .strip{flex-wrap:wrap} .lp .stat{min-width:44%} } /* Motion is decoration. With it turned down, everything is simply present. */ @media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} .step::after{transform:scaleX(1); transition:none} .tile-art .trk,.tile-art .gnd,.tile-art .frm{stroke-dashoffset:0; transition:none} .roi-fill{transition:none} .tile:hover,.route:hover,.std:hover{transform:none} } /* ═══════════════════════════════════════════════════════════════════ The problem carousel. Five problems, one stage. The rail keeps all five named while only one is open, because a section that shows three things is read as a tool that does three things — which was the fault of what stood here before. ═══════════════════════════════════════════════════════════════════ */ .carousel{ display:grid; grid-template-columns:minmax(0,236px) minmax(0,1fr); gap:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:linear-gradient(145deg,var(--bg2) 0%,rgba(23,27,34,.92) 100%); box-shadow:0 18px 60px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.03) inset; } /* ---- the rail ---- */ .car-rail{ display:flex; flex-direction:column; padding:10px; gap:2px; border-right:1px solid var(--line); background:linear-gradient(170deg,rgba(74,168,255,.05),transparent 60%); } .car-item{ position:relative; display:flex; align-items:center; gap:11px; text-align:left; padding:13px 14px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--fg3); font:inherit; font-size:13px; cursor:pointer; overflow:hidden; transition:color .22s, background .22s, border-color .22s; } .car-item i{ font:700 10px var(--mono); font-style:normal; letter-spacing:.5px; color:var(--fg3); flex:0 0 auto; transition:color .22s; } .car-item span{line-height:1.35} .car-item:hover{color:var(--fg); background:rgba(255,255,255,.035)} .car-item.is-active{ color:#fff; font-weight:600; background:linear-gradient(120deg,rgba(74,168,255,.15),rgba(142,201,255,.05)); border-color:rgba(74,168,255,.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .car-item.is-active i{color:var(--accent)} /* How long the open slide has left, when it is advancing on its own. */ .car-prog{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:linear-gradient(90deg,var(--accent),var(--curv)); transform:scaleX(0); transform-origin:left; } .car-item.is-active .car-prog{transform:scaleX(1); transition:transform 9s linear} .carousel.is-paused .car-item.is-active .car-prog, .carousel.is-manual .car-item.is-active .car-prog{transition:none; transform:scaleX(0)} /* ---- the stage ---- */ .car-stage{position:relative; overflow:hidden; min-height:430px} .car-track{display:flex; height:100%; transition:transform .55s cubic-bezier(.16,.8,.3,1)} .slide{ flex:0 0 100%; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:26px; padding:26px 28px 54px; align-items:center; opacity:.25; transition:opacity .45s; } .slide.is-active{opacity:1} .slide-art{ background:linear-gradient(180deg,var(--bg) 0%,rgba(18,21,26,.86) 100%); border:1px solid var(--line2); border-radius:12px; overflow:hidden; position:relative; } /* The same scan-line texture the hydrology canvas carries, so the two widgets in this band read as one instrument. */ .slide-art::after{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:12px; background:repeating-linear-gradient(0deg,transparent,transparent 2px, rgba(255,255,255,.006) 2px,rgba(255,255,255,.006) 4px); } .slide-art svg{display:block; width:100%; height:auto} .slide-badge{ display:inline-flex; align-items:center; width:fit-content; margin-bottom:12px; font:700 10px var(--mono); text-transform:uppercase; letter-spacing:.9px; color:var(--accent); background:rgba(74,168,255,.08); border:1px solid rgba(74,168,255,.2); padding:5px 10px; border-radius:6px; } .slide-text h3{ font-size:22px; line-height:1.22; letter-spacing:-.5px; font-weight:650; margin:0 0 12px; color:var(--fg); } .slide-p{font-size:13.5px; line-height:1.62; color:var(--fg2); margin:0 0 16px} .slide-facts{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0; font:11.5px/1.5 var(--mono); color:var(--fg3); } .slide-facts li{ display:flex; gap:8px; padding:8px 0; border-top:1px solid rgba(255,255,255,.05); } .slide-facts li::before{ content:''; flex:0 0 auto; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.65; margin-top:6px; } .slide-facts b{color:var(--fg2); font-weight:600} /* ---- controls ---- */ .car-nav{ position:absolute; bottom:14px; width:32px; height:32px; border-radius:9px; background:var(--bg3); border:1px solid var(--line2); color:var(--fg2); font-size:18px; line-height:1; cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center; transition:border-color .2s, color .2s, background .2s; } .car-nav:hover{border-color:var(--accent); color:var(--accent); background:var(--bg4)} .car-nav.prev{right:62px} .car-nav.next{right:22px} .car-dots{position:absolute; bottom:23px; left:28px; display:flex; gap:7px; z-index:2} .car-dots b{ width:7px; height:7px; border-radius:50%; background:var(--line2); transition:background .25s, width .25s, border-radius .25s; } .car-dots b.is-active{width:20px; border-radius:4px; background:var(--accent)} /* ═══ the drawings ═══ Each scene animates only while its slide is open, so nothing runs off screen and every slide replays when it comes back round. */ .slide svg text{font:9.5px var(--mono); fill:var(--fg3)} .slide .grid path,.slide .contours path{fill:none; stroke:rgba(255,255,255,.06); stroke-width:1} .slide .ax{fill:var(--fg3); letter-spacing:.9px; font-weight:600} .slide .ax.sm{font-size:8.5px} .slide .ob-t{fill:var(--fg3); font-size:8.5px; letter-spacing:1px} /* 01 · realistic autonomous routing */ .slide .topo-bg .topo-contour{fill:none; stroke:rgba(255,255,255,.07); stroke-width:1.2; stroke-dasharray:3 3} .slide .topo-bg .topo-label{fill:rgba(255,255,255,.22); font-size:8px; font-family:var(--mono); letter-spacing:.05em} /* Zone Buffers & Constraint Rings */ .slide .zone-buffer{fill:none; stroke-width:1.2; stroke-dasharray:4 3; opacity:.85} .slide .zone-err{stroke:rgba(239,68,68,.55); fill:rgba(239,68,68,.05)} .slide .zone-water{stroke:rgba(56,189,248,.55); fill:rgba(56,189,248,.05)} .slide .zone-quarry{stroke:rgba(245,158,11,.55); fill:rgba(245,158,11,.05)} .slide .zone-tag{font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.1em} .slide .tag-town{fill:#f87171} .slide .tag-water{fill:#38bdf8} .slide .tag-quarry{fill:#fbbf24} /* Village Road & 3D Architectural Buildings */ .slide .village-road{fill:none; stroke:#334155; stroke-width:3; stroke-linecap:round; opacity:.7} .slide .bldg-wall{fill:#1e293b; stroke:#475569; stroke-width:1} .slide .bldg-roof{stroke-width:1} .slide .roof-red{fill:#b91c1c; stroke:#ef4444} .slide .roof-slate{fill:#334155; stroke:#64748b} .slide .roof-terracotta{fill:#c2410c; stroke:#ea580c} .slide .bldg-win{fill:#fef08a; opacity:.85} /* Reservoir Bathymetry & Water */ .slide .res-body{stroke:#38bdf8; stroke-width:1.5; filter:drop-shadow(0 0 8px rgba(2,132,199,.4))} .slide .res-depth-1{fill:none; stroke:rgba(255,255,255,.22); stroke-width:1; stroke-dasharray:3 3} .slide .res-depth-2{fill:none; stroke:rgba(255,255,255,.16); stroke-width:1; stroke-dasharray:2 2} .slide .res-ripple{fill:none; stroke:rgba(255,255,255,.45); stroke-width:1.2; stroke-linecap:round} /* Stepped Terraced Quarry Pit */ .slide .q-bench-1{fill:#78350f; stroke:#d97706; stroke-width:1.2} .slide .q-bench-2{fill:#92400e; stroke:#b45309; stroke-width:1} .slide .q-bench-3{fill:#292524; stroke:#78716c; stroke-width:.8} .slide .q-haul-road{fill:none; stroke:#eab308; stroke-width:1.4; stroke-dasharray:2 2; opacity:.8} /* Obstacle Badges */ .slide .badge-pill rect{fill:rgba(15,23,42,.88); stroke-width:1} .slide .badge-pill text{font-family:var(--mono); font-size:7.5px; font-weight:700; letter-spacing:.05em} .slide .pill-settlement rect{stroke:#ef4444} .slide .pill-settlement text{fill:#fca5a5} .slide .pill-reservoir rect{stroke:#38bdf8} .slide .pill-reservoir text{fill:#bae6fd} .slide .pill-quarry rect{stroke:#f59e0b} .slide .pill-quarry text{fill:#fde68a} /* Naive Route & Clashes */ .slide .naive-group{opacity:0} .slide .naive-line{stroke:#ef4444; stroke-width:2.4; stroke-dasharray:6 5; stroke-linecap:round} .slide .clash-pulse{fill:none; stroke:#ef4444; stroke-width:1.5; animation:clashRing 1.5s ease-out infinite} @keyframes clashRing{0%{r:4; opacity:1} 100%{r:18; opacity:0}} .slide .clash-core{fill:#ef4444} .slide .clash-sym{fill:#ffffff; font-size:8.5px; font-weight:900; font-family:var(--mono)} .slide .naive-alert-card rect{fill:rgba(220,38,38,.25); stroke:#ef4444; stroke-width:1} .slide .naive-alert-card text{fill:#fca5a5; font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:.05em} /* Routed Railway Track */ .slide .routed-group{opacity:0} .slide .routed-ballast{fill:none; stroke:#1e293b; stroke-width:9; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100} .slide .routed-sleepers{fill:none; stroke:#475569; stroke-width:7; stroke-dasharray:2 4; stroke-linecap:butt; stroke-dashoffset:100} .slide .routed-rail-left,.slide .routed-rail-right{fill:none; stroke:#38bdf8; stroke-width:1.2; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100} .slide .routed-core{fill:none; stroke:#22c55e; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; filter:drop-shadow(0 0 6px rgba(34,197,94,.8))} /* Curvature HUD Callout */ .slide .curve-hud{opacity:0} .slide .hud-leader{fill:none; stroke:#22c55e; stroke-width:1.2} .slide .hud-dot{fill:#22c55e} .slide .hud-card{fill:rgba(15,23,42,.92); stroke:#22c55e; stroke-width:1} .slide .hud-text{fill:#86efac; font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:.04em} /* Success Badge */ .slide .success-badge{opacity:0} .slide .success-badge rect{fill:rgba(34,197,94,.18); stroke:#22c55e; stroke-width:1} .slide .success-badge text{fill:#86efac; font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:.05em} /* Survey Pins */ .slide .survey-pin{opacity:0} .slide .pin-ring{fill:none; stroke:#38bdf8; stroke-width:1.5; animation:pinRadar 2.2s ease-out infinite} @keyframes pinRadar{0%{r:4; opacity:1} 100%{r:16; opacity:0}} .slide .pin-core{fill:#0ea5e9; stroke:#fff; stroke-width:1.5} .slide .pin-cross{stroke:#38bdf8; stroke-width:1; opacity:.6} .slide .pin-lbl{fill:#38bdf8; font-family:var(--mono); font-size:7.5px; font-weight:700; letter-spacing:.05em} /* Timeline Animations on Active Slide */ .slide.is-active .survey-pin{animation:fadeIn .4s ease-out forwards} .slide.is-active .naive-group{animation:fadeIn .4s ease-out .15s forwards, dimOut .5s ease-out 1.7s forwards} @keyframes dimOut{to{opacity:.3}} .slide.is-active .routed-group{animation:fadeIn .3s ease-out .8s forwards} .slide.is-active .routed-ballast, .slide.is-active .routed-sleepers, .slide.is-active .routed-rail-left, .slide.is-active .routed-rail-right, .slide.is-active .routed-core{animation:draw 1.3s cubic-bezier(.2,.8,.3,1) .8s forwards} .slide.is-active .curve-hud{animation:fadeIn .4s ease-out 1.8s forwards} .slide.is-active .success-badge{animation:fadeIn .4s ease-out 2.1s forwards} /* 02 · earthwork */ .slide .ground{fill:none; stroke:var(--ground); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100} .slide .rail-l{fill:none; stroke:var(--rail); stroke-width:2.6} .slide .cut-a{fill:url(#cutH); stroke:none; opacity:0} .slide .fill-a{fill:url(#fillH); stroke:none; opacity:0} .slide .k-cut{fill:url(#cutH); stroke:rgba(255,107,107,.5); stroke-width:1} .slide .k-fill{fill:url(#fillH); stroke:rgba(90,169,230,.5); stroke-width:1} .slide .key{opacity:0} .slide .ew-badge rect{fill:rgba(94,214,154,.14); stroke:rgba(94,214,154,.4); stroke-width:1} .slide .ew-badge text{fill:var(--ok); font-weight:700} .slide .ew-move{transform:translateY(-26px); opacity:0} .slide .ax.fillx{fill:var(--fill)} .slide .ax.note{font-size:8.5px; letter-spacing:.4px; font-weight:400; text-anchor:middle} .slide.is-active .ground{animation:draw 1s ease-out .1s forwards} /* The line drops onto the balance point rather than appearing at it. */ .slide.is-active .ew-move{animation:settle 1.4s cubic-bezier(.3,1.3,.5,1) .6s forwards} .slide.is-active .cut-a,.slide.is-active .fill-a, .slide.is-active .key{animation:fadeIn .5s ease-out 1.6s forwards} @keyframes settle{from{transform:translateY(-26px); opacity:0} to{transform:translateY(0); opacity:1}} /* 03 · compliance */ .slide .ln-bad{fill:none; stroke:var(--err); stroke-width:3; stroke-linecap:round} .slide .ln-ok{fill:none; stroke:var(--ok); stroke-width:3; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100} .slide .mk circle{fill:var(--bg2); stroke-width:2} .slide .mk path{fill:none; stroke-width:2; stroke-linecap:round} .slide .mk.err circle{stroke:var(--err)} .slide .mk.err path{stroke:var(--err)} .slide .mk.ok circle{stroke:var(--ok)} .slide .mk.ok path{stroke:var(--ok)} .slide .chip rect{stroke-width:1} .slide .err-chip rect{fill:rgba(255,107,107,.12); stroke:rgba(255,107,107,.4)} .slide .err-chip text{fill:var(--err); font-weight:700} .slide .ok-chip rect{fill:rgba(94,214,154,.12); stroke:rgba(94,214,154,.4)} .slide .ok-chip text{fill:var(--ok); font-weight:700} .slide .fixbtn rect{fill:var(--bg4); stroke:var(--accent2); stroke-width:1} .slide .fixbtn text{fill:var(--accent); font-weight:700} .slide .ln-bad{stroke-dasharray:7 5} .slide .ov path{fill:none; stroke:var(--err); stroke-width:1.2} .slide .ov .ovbar{stroke-width:2} .slide .ov-t{fill:var(--err); font-size:9px; font-weight:700} .slide .ok-ov path{stroke:var(--ok)} .slide .ov-t.ok-t{fill:var(--ok)} .slide .after{opacity:0} /* The broken geometry does not leave — it dims and stays underneath, so the comparison survives after the animation has run. */ .slide .before{opacity:1; transition:opacity .5s} .slide.is-active .fixbtn{animation:press .5s ease-out 1.1s both} .slide.is-active .before{animation:ghost .6s ease-out 1.5s forwards} .slide.is-active .after{animation:fadeIn .6s ease-out 1.7s forwards} .slide.is-active .ln-ok{animation:draw 1.1s ease-out 1.7s forwards} @keyframes ghost{to{opacity:.34}} @keyframes press{0%,60%{transform:none} 72%{transform:translateY(2px) scale(.97)} 100%{transform:none}} /* 04 · crossings */ .slide .hiway{fill:none; stroke:var(--fg3); stroke-width:3; opacity:.7} .slide .railline{fill:none; stroke:var(--accent); stroke-width:3} .slide .rail-t{fill:var(--accent); opacity:.8} .slide .lane path{fill:none; stroke:var(--fg3); stroke-width:1.4; opacity:.75} .slide .lane rect{fill:rgba(255,107,107,.14); stroke:rgba(255,107,107,.45); stroke-width:1} .slide .lane text{fill:var(--err); font-size:7.5px; font-weight:700} .slide .service{fill:none; stroke:var(--warn); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100} .slide .svc-t{fill:var(--warn); font-size:8.5px; letter-spacing:1px; opacity:0} .slide .stubs path{fill:none; stroke:var(--fg3); stroke-width:1.2; opacity:0} .slide .master{fill:none; stroke:var(--ok); stroke-width:3; stroke-dasharray:100; stroke-dashoffset:100} .slide .rubmark rect{fill:rgba(94,214,154,.14); stroke:rgba(94,214,154,.45); stroke-width:1} .slide .rubmark text{fill:var(--ok); font-weight:700; font-size:10px} .slide .rubmark{opacity:0} .slide .cnt{font-size:11px; fill:var(--err); font-weight:700; letter-spacing:.3px} .slide .cnt.to{fill:var(--fg3)} .slide .cnt.ok-t{fill:var(--ok); font-size:13px} .slide .cnt.to,.slide .cnt.ok-t{opacity:0} /* The eight fade out one after another, which reads as consolidation rather than as a scene being swapped for a different one. */ .slide.is-active .lane{animation:fadeOut .4s ease-out forwards; animation-delay:calc(1.2s + var(--n) * 90ms)} .slide.is-active .stubs path{animation:stub .4s ease-out 1.9s forwards} @keyframes stub{to{opacity:.45}} .slide.is-active .service{animation:draw 1s ease-out 1.5s forwards} .slide.is-active .svc-t{animation:fadeIn .4s ease-out 2s forwards} .slide.is-active .master{animation:draw .6s ease-out 2.3s forwards} .slide.is-active .rubmark{animation:fadeIn .45s ease-out 2.6s forwards} .slide.is-active .cnt.to,.slide.is-active .cnt.ok-t{animation:fadeIn .4s ease-out 2.8s forwards} /* 05 · yard */ .slide .ground2{fill:none; stroke:var(--ground); stroke-width:2.2; stroke-dasharray:100; stroke-dashoffset:100} .slide .grade-was{fill:none; stroke:var(--fg3); stroke-width:1.5; stroke-dasharray:5 4; opacity:0} .slide .grade-now{fill:none; stroke:var(--rail); stroke-width:2.8; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100} .slide .plat rect{fill:rgba(94,214,154,.1); stroke:rgba(94,214,154,.42); stroke-width:1} .slide .plat text{fill:var(--ok); font-weight:700; font-size:8.5px; letter-spacing:.7px} .slide .plat{opacity:0} .slide .ax.gr{font-size:8.5px; fill:var(--fg3); font-weight:400} .slide .yard .main{fill:none; stroke:var(--accent); stroke-width:2.6} .slide .yard .loop{fill:none; stroke:var(--straight); stroke-width:2; stroke-dasharray:100; stroke-dashoffset:100} .slide .plat2 rect{fill:var(--bg4); stroke:var(--line2); stroke-width:1; opacity:0} .slide .tno circle{fill:var(--bg); stroke:var(--spiral); stroke-width:2; opacity:0} .slide.is-active .ground2{animation:draw .9s ease-out .1s forwards} .slide.is-active .grade-was{animation:ghost2 .4s ease-out .5s forwards} @keyframes ghost2{to{opacity:.55}} .slide.is-active .grade-now{animation:draw 1s ease-out .9s forwards} .slide.is-active .plat{animation:fadeIn .5s ease-out 1.7s forwards} .slide.is-active .yard .loop{animation:draw .9s ease-out 2s forwards} .slide.is-active .plat2 rect,.slide.is-active .tno circle{ animation:fadeIn .4s ease-out 2.5s forwards} @keyframes draw{to{stroke-dashoffset:0}} @keyframes fadeIn{to{opacity:1}} @keyframes fadeOut{to{opacity:0}} @media (max-width:900px){ /* The rail becomes a strip along the top; the numbers keep it countable. */ .carousel{grid-template-columns:1fr} .car-rail{ flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line); scrollbar-width:none; } .car-rail::-webkit-scrollbar{display:none} .car-item{flex:0 0 auto; white-space:nowrap; padding:11px 13px; font-size:12.5px} .slide{grid-template-columns:1fr; padding:20px 20px 56px; gap:20px} .car-stage{min-height:0} .slide-text h3{font-size:19px} } /* With motion turned down the drawings are simply finished, and the carousel never moves on its own. */ @media (prefers-reduced-motion:reduce){ .car-track{transition:none} .slide{opacity:1} .car-prog{display:none} .slide .naive,.slide .tag.bad,.slide .pins circle,.slide .cut-a,.slide .fill-a, .slide .ew-move,.slide .svc-t,.slide .stubs path,.slide .rubmark,.slide .plat, .slide .plat2 rect,.slide .tno circle,.slide .grade-was,.slide .after, .slide .cnt.to,.slide .cnt.ok-t{opacity:1; animation:none} .slide .ew-move{transform:none} .slide .before{opacity:.34; animation:none} .slide .key{opacity:1; animation:none} .slide .lane{opacity:0; animation:none} .slide .routed,.slide .ground,.slide .ln-ok,.slide .service,.slide .master, .slide .ground2,.slide .grade-now,.slide .yard .loop{ stroke-dashoffset:0; animation:none; } } /* ---- the mark, catching the light now and then ---- * * The lockup is a raster, so there is nothing inside it to animate. Instead a * highlight is swept across a copy of it, masked to the artwork's own alpha so * the light travels over the letterforms rather than over a rectangle around * them. The sweep occupies the first sixth of the cycle and the rest is still, * which is what makes it occasional rather than a thing that flickers in the * corner of the eye all day. */ .nav-brand{position:relative; overflow:hidden} .nav-brand::after{ content:''; position:absolute; inset:0; pointer-events:none; /* The band is kept narrower than the box on purpose: a background image wider than its element makes percentage positions count against a negative remainder, and the sweep simply never crosses. */ background-image:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.72) 50%, transparent 100%); background-size:52% 100%; background-repeat:no-repeat; background-position:-70% 0; -webkit-mask-image:url(../assets/rad-lockup-dark.png); mask-image:url(../assets/rad-lockup-dark.png); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:left center; mask-position:left center; animation:markSheen 14s ease-in-out infinite; } @keyframes markSheen{ 0%{background-position:-70% 0} 15%{background-position:175% 0} 100%{background-position:175% 0} } /* A logo glinting at someone is decoration, and a poor trade for anybody who asked the browser to stop things moving. */ @media (prefers-reduced-motion:reduce){ .nav-brand::after{animation:none; opacity:0} } /* ─────────────────── Platform Innovation Showcase Carousel ─────────────────── */ .showcase-section { position: relative; padding: 100px 24px 90px; background: radial-gradient(circle at 50% 12%, rgba(56, 189, 248, 0.08) 0%, transparent 60%), var(--bg); border-bottom: 1px solid var(--line); overflow: hidden; } .showcase-inner { max-width: 1240px; margin: 0 auto; } .showcase-header { text-align: center; margin-bottom: 44px; } .showcase-header .sec-label { display: inline-block; font-size: 11px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 12px; background: rgba(74, 168, 255, 0.08); border: 1px solid rgba(74, 168, 255, 0.22); padding: 4px 12px; border-radius: 20px; } .showcase-header h2 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 750; letter-spacing: -0.03em; color: #fff; margin: 0 0 16px; line-height: 1.1; } .text-gradient { background: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .showcase-subtitle { font-size: 16px; color: var(--fg2); max-width: 660px; margin: 0 auto; line-height: 1.6; } /* Main Showcase Card Container */ .showcase-container { position: relative; display: flex; flex-direction: column; gap: 28px; } .showcase-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 380px; max-height: 680px; border-radius: 20px; overflow: hidden; background: #090c10; border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 25px 65px -15px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; } .showcase-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.02); transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; display: flex; align-items: center; justify-content: center; } .showcase-slide.active { opacity: 1; transform: scale(1); pointer-events: auto; z-index: 2; } .showcase-slide > picture { display: block; width: 100%; height: 100%; } .showcase-slide-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; user-select: none; -webkit-user-drag: none; } /* Slide controls. These sit below the stage rather than floating on it: every screenshot has its own HUD panels baked into the corners, so any in-image position collides with one slide or another. */ .showcase-arrows { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: -14px; } .showcase-arrow { width: 44px; height: 44px; border-radius: 50%; background: rgba(15, 20, 28, 0.78); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #cbd5e1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.22s ease; outline: none; } .showcase-arrow:hover { background: rgba(56, 189, 248, 0.22); border-color: rgba(56, 189, 248, 0.6); color: #ffffff; transform: scale(1.06); box-shadow: 0 0 20px rgba(56, 189, 248, 0.35); } .showcase-arrow:active { transform: scale(0.96); } /* Multi-column Bottom Tab Navigation */ .showcase-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; width: 100%; } .showcase-tab { position: relative; background: transparent; border: none; padding: 14px 4px 10px; cursor: pointer; text-align: left; outline: none; transition: all 0.25s ease; display: flex; flex-direction: column; } .showcase-tab-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; } .showcase-tab-progress { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, #38bdf8, #818cf8); border-radius: 2px; box-shadow: 0 0 10px rgba(56, 189, 248, 0.7); } .showcase-tab-category { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg3); margin-bottom: 6px; transition: color 0.22s ease; } .showcase-tab-title { font-size: 12.5px; font-weight: 550; color: var(--fg2); line-height: 1.4; transition: color 0.22s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .showcase-tab:hover .showcase-tab-category { color: var(--fg2); } .showcase-tab:hover .showcase-tab-title { color: #fff; } .showcase-tab.active .showcase-tab-category { color: #38bdf8; } .showcase-tab.active .showcase-tab-title { color: #ffffff; font-weight: 650; } /* Responsive Media Queries */ @media (max-width: 1080px) { .showcase-tabs { grid-template-columns: repeat(3, 1fr); row-gap: 20px; } } @media (max-width: 768px) { .showcase-section { padding: 60px 16px 50px; } .showcase-stage { min-height: 240px; border-radius: 14px; } .showcase-tabs { grid-template-columns: repeat(2, 1fr); gap: 12px; } .showcase-tab-title { font-size: 11.5px; } .showcase-arrows { justify-content: center; margin-top: -6px; } .showcase-arrow { width: 36px; height: 36px; } } /* ═══════════════ the scroll-driven cinematic ═══════════════ Moved here from style.css: it is home-page only, and it was the single largest reason index.html had to load the whole application stylesheet. */ /* ─────────────── Cinematic Section ─────────────── */ /* Reduced motion: one screen holding one finished frame, no scrub distance. home-cinematic.js adds this class and renders a single still. */ .cinematic-container.cinematic-static { height: 100vh; } .cinematic-container.cinematic-static .cinematic-text { transition: none; } .cinematic-container { height: 420vh; /* Smooth, cinematic scrub duration */ background: var(--bg); /* Exactly matches page and hero background */ position: relative; width: 100vw; left: 50%; transform: translateX(-50%); margin-left: 0; margin-right: 0; overflow: clip; z-index: 2; } .cinematic-sticky { position: sticky; top: 0; height: 100vh; width: 100vw; overflow: hidden; background: var(--bg); /* Exactly matches page and hero background */ display: flex; align-items: center; justify-content: center; perspective: 1400px; } /* Deep, seamless atmospheric blend into Hero above and Proof strip below */ .cinematic-vignette-top { position: absolute; top: 0; left: 0; width: 100%; height: 260px; background: linear-gradient(to bottom, var(--bg) 0%, rgba(18, 21, 26, 0.96) 25%, rgba(18, 21, 26, 0.75) 55%, rgba(18, 21, 26, 0.25) 82%, transparent 100%); pointer-events: none; z-index: 15; } .cinematic-vignette-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 260px; background: linear-gradient(to top, var(--bg) 0%, rgba(18, 21, 26, 0.96) 25%, rgba(18, 21, 26, 0.75) 55%, rgba(18, 21, 26, 0.25) 82%, transparent 100%); pointer-events: none; z-index: 15; } .cinematic-scene { width: 100vw; height: 100vh; transform-style: preserve-3d; transform-origin: center 60%; display: flex; align-items: center; justify-content: center; z-index: 2; /* Seamless atmospheric fade at top and bottom edges */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%); } #cinematic-canvas { width: 120vw; height: 120vh; position: absolute; top: -10vh; left: -10vw; display: block; } .cinematic-overlay { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: flex-start; /* Sits high up in upper margin */ justify-content: center; padding-top: 5vh; z-index: 25; } .cinematic-text { position: absolute; margin: 0; top: 18.5vh; /* Moved lower nearer to center, clear of curve details & badges */ color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; opacity: 0; text-align: center; text-shadow: 0 4px 28px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.95); transform: translateY(15px); max-width: 900px; line-height: 1.15; padding: 0 20px; } .cinematic-text em { font-style: italic; color: #38bdf8; text-shadow: 0 0 25px rgba(56, 189, 248, 0.5); } .cinematic-logo-reveal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.92); opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; } .cinematic-logo-reveal img { width: 280px; height: auto; filter: drop-shadow(0 0 35px rgba(56, 189, 248, 0.35)); } .cinematic-logo-tagline { color: #94a3b8; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); } @media (max-width: 768px) { .cinematic-text { font-size: 1.75rem; top: 13vh; } .cinematic-logo-reveal img { width: 200px; } .cinematic-logo-tagline { font-size: 0.65rem; letter-spacing: 0.16em; } #cinematic-canvas { width: 140vw; left: -20vw; } }