| |
| :root { --ease-out: cubic-bezier(.2,.75,.25,1); } |
| .site-header { gap:24px; height:82px; } |
| .site-header .brand { margin-right:auto; } |
| .site-header nav { gap:23px; order:2; } |
| .motion-control { order:3; display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 0 8px 17px; background:none; border-left:1px solid var(--line); font-size:10px; white-space:nowrap; color:var(--muted); } |
| .motion-control>span:first-child { font-size:15px; line-height:1; color:var(--coral); } |
| .motion-control:disabled { opacity:1; } |
| .hero { gap:35px; grid-template-columns:.94fr 1.06fr; padding-top:50px; padding-bottom:48px; min-height:710px; } |
| .hero-copy { padding-bottom:10px; } |
| .hero h1 { font-size:clamp(58px,5.5vw,80px); letter-spacing:-2.7px; line-height:1.04; } |
| .hero-copy .eyebrow { font-size:9px; letter-spacing:1.9px; } |
| .hero-copy .eyebrow i { box-shadow:0 0 0 5px #b754350b; } |
| .hero-atlas-link { margin-top:32px; } |
| .hero-atlas-points i { animation:atlas-spark 4s ease-in-out infinite; } |
| .hero-atlas-points i:nth-child(3n) { animation-delay:-1.3s; } |
| .hero-atlas-points i:nth-child(3n + 1) { animation-delay:-2.6s; } |
| .hero-scene { container-type:inline-size; position:relative; min-width:0; width:100%; border:1px solid #d9dbcf; border-radius:18px; background:radial-gradient(ellipse at 62% 40%,#e9e3d376,transparent 58%),#f4f3ec; box-shadow:0 22px 64px -36px #56664c40; animation:hero-arrive 1s .12s var(--ease-out) both; } |
| .scene-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:20px 23px 0; color:var(--muted); } |
| .scene-topline .micro { font-size:8px; letter-spacing:1.45px; } |
| .scene-indicator { display:flex; gap:6px; align-items:center; font:7px var(--mono); letter-spacing:.5px; } |
| .scene-indicator i,.scene-provenance i { display:inline-block; width:5px; height:5px; background:#788e73; border-radius:50%; } |
| .scene-stage-art { position:relative; aspect-ratio:600/470; width:100%; isolation:isolate; } |
| .scene-grid { position:absolute; inset:2% 3%; z-index:-1; background-image:radial-gradient(#74836c2b .7px,transparent .7px); background-size:18px 18px; mask-image:radial-gradient(ellipse,#000 15%,transparent 70%); } |
| .scene-paths { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; } |
| .scene-orbit { stroke:#c3c7b95e; stroke-width:.8; } |
| .scene-orbit.outer { stroke-dasharray:2 9; transform-origin:340px 238px; animation:scene-orbit-turn 100s linear infinite; } |
| .path-base { stroke-width:1.1; opacity:.5; } |
| .path-stream { stroke-width:2.5; stroke-linecap:round; stroke-dasharray:10 200; animation:path-travel 7s linear infinite; } |
| .describe-path .path-stream { animation-delay:-2.3s; } |
| .design-path,.describe-path { transition:opacity .5s; } |
| .path-caption { position:absolute; font:italic 23px var(--serif); color:var(--coral); letter-spacing:.2px; transition:opacity .5s; } |
| .path-caption span { font:16px var(--sans, sans-serif); } |
| .design-caption { top:8.5%; left:41%; } |
| .describe-caption { bottom:5.5%; left:42%; color:var(--blue); } |
| .scene-molecule { position:absolute; left:26%; right:0; top:12%; height:70%; } |
| .scene-molecule .molecule { height:100%; } |
| .scene-language { position:absolute; left:4%; top:35%; width:36%; padding:16px 17px; background:#f4f8f4f5; border:1px solid #cbd8d4; border-radius:8px; box-shadow:0 8px 28px #304a4409; animation:card-drift 9s ease-in-out infinite; } |
| .scene-card-label { display:flex; align-items:center; gap:8px; font-size:7px; font-weight:600; letter-spacing:1px; color:var(--blue); white-space:nowrap; } |
| .scene-card-label>span:first-child { font:21px var(--serif); letter-spacing:-1px; } |
| .scene-language p { font:clamp(21px,4.8cqw,30px)/1.15 var(--serif); color:#365b70; margin:14px 0 16px; } |
| .scene-card-note { display:block; font:6.5px var(--mono); letter-spacing:1px; color:var(--muted); } |
| .language-spectrum { display:flex; align-items:end; height:13px; gap:3px; margin-bottom:12px; } |
| .language-spectrum i { background:#93aaa7; width:13px; height:4px; border-radius:1px; animation:language-wave 2.6s ease-in-out infinite alternate; transform-origin:bottom; } |
| .language-spectrum i:nth-child(2n) { height:9px; animation-delay:-1.7s; } |
| .language-spectrum i:nth-child(3n) { height:13px; animation-delay:-.8s; } |
| .scene-sequence { position:absolute; width:43%; left:52%; top:68%; border:1px solid #dcc4ad; border-radius:7px; background:#fcf5eafa; padding:12px 14px; box-shadow:0 8px 25px #8463400a; animation:card-drift 9s -4.5s ease-in-out infinite; } |
| .scene-sequence .scene-card-label { color:var(--coral); } |
| .scene-sequence .scene-card-label>span:first-child { font-size:22px; line-height:17px; } |
| .scene-residues { display:flex; flex-wrap:wrap; gap:3px; font:10px var(--mono); color:#8b5036; margin:10px 0; max-width:190px; } |
| .scene-residues>span { border-radius:2px; padding:2px; background:#f0e0cd; animation:residue-signal 5s var(--residue-delay) ease infinite; } |
| .scene-center-label { position:absolute; left:49%; top:54%; display:flex; align-items:center; gap:7px; font-size:6px; letter-spacing:1.2px; color:#69735e; pointer-events:none; } |
| .scene-center-label>span { font-size:20px; color:var(--coral); } |
| .scene-controls { position:relative; display:flex; gap:3px; background:#e6e8de; padding:4px; border:1px solid #dedfd2; border-radius:7px; margin:14px 24px 0; } |
| .scene-controls button { flex:1; padding:10px 6px; border-radius:4px; font-size:10px; background:none; transition:background .3s,box-shadow .3s,color .3s; white-space:nowrap; } |
| .scene-controls button[aria-pressed=true] { background:#fffdf6; box-shadow:0 1px 5px #26343312; color:var(--coral); } |
| .scene-controls button:hover { color:var(--coral); } |
| .scene-caption { min-height:43px; display:grid; place-content:center; margin:0 15px; text-align:center; color:var(--muted); font-size:9px; line-height:1.5; } |
| .scene-provenance { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:13px 20px; border-top:1px solid #dedfd2; font-size:8px; line-height:1.6; color:var(--muted); } |
| .scene-provenance>span { display:flex; align-items:center; gap:7px; } |
| .scene-provenance a { white-space:nowrap; color:var(--coral); } |
| .hero-scene[data-direction=design] .describe-path,.hero-scene[data-direction=design] .describe-caption,.hero-scene[data-direction=describe] .design-path,.hero-scene[data-direction=describe] .design-caption { opacity:.16; } |
| .hero-scene[data-direction=design] .scene-sequence { border-color:#b75435; box-shadow:0 0 0 4px #b7543508; } |
| .hero-scene[data-direction=describe] .scene-language { border-color:#3e6b88; box-shadow:0 0 0 4px #3e6b8808; } |
| .hero-scene[data-running=false] *,[data-in-view=false] *,html[data-motion=paused] *,html[data-motion=paused] *::before,html[data-motion=paused] *::after { animation-play-state:paused!important; } |
| html[data-motion=paused] { scroll-behavior:auto; } |
| |
| html[data-motion=paused] .hero-copy,html[data-motion=paused] .hero-scene,html[data-motion=paused] .key-case-example { animation:none; } |
| html[data-motion=paused] .scroll-reveal .section-heading,html[data-motion=paused] .scroll-reveal .atlas-intro,html[data-motion=paused] .scroll-reveal>h2 { opacity:1; transform:none; transition:none; } |
| .intro-strip { gap:0; padding:25px 0; } |
| .intro-strip>p { padding-right:24px; align-self:center; } |
| .intro-strip>a { position:relative; padding:6px 24px 6px 30px; transition:background .3s; } |
| .intro-strip>a:hover { background:#ebece256; } |
| .intro-strip>a>span { font-family:var(--mono); } |
| .intro-strip>a>small b { display:inline-block; transition:transform .3s; } |
| .intro-strip>a:hover b { transform:translate(3px,-3px); } |
| .section { padding-top:104px; } |
| .section-heading { position:relative; padding-top:22px; border-top:1px solid var(--line); } |
| .section-heading .eyebrow { margin-bottom:24px; } |
| .section-heading .eyebrow>span { display:inline-flex; width:25px; height:25px; border:1px solid #ddd5c5; border-radius:50%; align-items:center; justify-content:center; margin-right:4px; font-size:9px; } |
| .section-heading h2 { font-size:58px; } |
| .section-deck { border-left:1px solid var(--line); padding-left:23px; max-width:350px; } |
| .dual-experience { border-radius:12px; } |
| .dual-toolbar { flex-direction:column; align-items:stretch; gap:18px; padding:23px 30px 0; background:#f4f4ec; border-bottom:0; } |
| .dual-tour { justify-content:space-between; } |
| .dual-toolbar .segmented { padding:0; gap:0; background:none; border-radius:0; } |
| .dual-toolbar .segmented button { position:relative; display:flex; justify-content:center; align-items:center; gap:10px; border:0; border-bottom:2px solid #d9ded0; border-radius:0; padding:16px 12px; flex:1; font-size:12px; background:none; overflow:hidden; } |
| .dual-toolbar .segmented button[aria-pressed=true] { background:#fdfbf4; box-shadow:none; border-bottom-color:var(--coral); color:var(--coral); } |
| .tour-step-number { font:9px var(--mono); opacity:.65; } |
| .tour-step-progress { position:absolute; bottom:0; left:0; width:100%; height:2px; background:var(--coral); transform:scaleX(0); transform-origin:left; } |
| [data-tour-running=true] .segmented button[aria-pressed=true] .tour-step-progress { animation:tour-progress 6.5s linear infinite; } |
| .dual-diagram { position:relative; padding:40px 64px 35px; background-image:radial-gradient(#26343312 .65px,transparent .65px); background-size:19px 19px; } |
| .model-node { border-radius:7px; transition:opacity .4s,box-shadow .4s,transform .4s; } |
| .mode-t2p .node-text-encoder,.mode-t2p .node-protein-decoder,.mode-p2t .node-protein-encoder,.mode-p2t .node-text-decoder { transform:translateY(-3px); box-shadow:0 8px 25px #ba77581a; } |
| .flow path { stroke-width:1.5; } |
| .flow-particle { filter:drop-shadow(0 0 4px currentColor); } |
| .dual-explanation { padding:28px 36px; min-height:184px; } |
| .dual-explanation>div:first-child { animation:soft-arrive .4s var(--ease-out) both; } |
| .recorded-demo-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:25px 30px 0; border-top:1px solid var(--line); } |
| .recorded-demo-heading .micro { color:var(--coral); font-size:8px; } |
| .recorded-demo-heading p { font:25px var(--serif); } |
| .recorded-demo-heading>span:last-child { font-size:9px; color:var(--muted); } |
| .core-demo { padding-top:22px; } |
| .dual-experience>.pair-source { padding-bottom:25px; } |
| .dual-takeaways { gap:30px; } |
| .dual-takeaways>div { padding-top:16px; border-top:1px solid var(--line); } |
| |
| .section.is-visible .bar-track>span { animation:chart-grow 1s var(--ease-out) both; transform-origin:left; } |
| .section.is-visible .scale-bar-space i { animation:chart-rise 1s var(--ease-out) both; transform-origin:bottom; } |
| .section.is-visible .bar-row:nth-child(2) .bar-track>span { animation-delay:.06s; } |
| .section.is-visible .bar-row:nth-child(3) .bar-track>span { animation-delay:.12s; } |
| .section.is-visible .bar-row:nth-child(4) .bar-track>span { animation-delay:.18s; } |
| .section.is-visible .bar-row:nth-child(5) .bar-track>span { animation-delay:.24s; } |
| .scroll-reveal .atlas-intro { opacity:0; transform:translateY(22px); transition:opacity .8s,transform .9s var(--ease-out); } |
| .scroll-reveal.is-visible .atlas-intro { opacity:1; transform:none; } |
| .atlas-case { transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s; } |
| .atlas-case:hover { transform:translateY(-5px); box-shadow:0 12px 25px #3d4d3510; } |
| .atlas-case img { transition:transform .6s var(--ease-out); } |
| .atlas-case:hover img { transform:scale(1.05); } |
| .closing { position:relative; isolation:isolate; padding:85px 20px 55px; margin-top:110px; border-top:1px solid var(--line); overflow:hidden; } |
| .closing-loop { position:absolute; z-index:-1; font:340px/.8 var(--serif); color:#b4b8a215; left:50%; top:30px; transform:translateX(-50%); user-select:none; } |
| .closing .eyebrow { justify-content:center; color:var(--coral); } |
| .closing h2 { font-size:clamp(38px,4.4vw,64px); margin:22px 0 30px; } |
| .closing-actions { display:flex; justify-content:center; align-items:center; gap:28px; } |
| .closing-top { display:inline-block; margin-top:50px; font-size:10px; color:var(--muted); } |
| @keyframes path-travel { to { stroke-dashoffset:-420; } } |
| @keyframes scene-orbit-turn { to { transform:rotate(360deg); } } |
| @keyframes card-drift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } } |
| @keyframes language-wave { to { transform:scaleY(.35); opacity:.45; } } |
| @keyframes residue-signal { 0%,60%,100% { background:#f0e0cd; } 20% { background:#dcb68f; } } |
| @keyframes atlas-spark { 0%,100% { transform:scale(1); } 50% { transform:scale(.6); opacity:.4; } } |
| @keyframes tour-progress { to { transform:scaleX(1); } } |
| @keyframes chart-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } } |
| @keyframes chart-rise { from { transform:scaleY(0); } to { transform:scaleY(1); } } |
| @media (min-width:1600px) { .hero { min-height:755px; padding-top:65px; padding-bottom:60px; } } |
| @media (max-width:1200px) { |
| .site-header { gap:16px; } .site-header nav { gap:17px; font-size:12px; } |
| .motion-control>span:last-child { display:none; } |
| .hero { gap:25px; } .hero h1 { font-size:62px; } |
| .scene-topline { padding:18px 17px 0; } .scene-indicator { font-size:6px; } |
| .scene-card-label { font-size:6px; gap:6px; } .scene-language { padding:12px; } |
| .scene-sequence { padding:10px; } .scene-residues { font-size:8px; } |
| .scene-provenance { font-size:7px; padding:12px 15px; } |
| .scene-center-label { font-size:5px; } |
| .scene-controls { margin:12px 17px 0; } |
| .intro-strip>a { padding-left:20px; padding-right:15px; } |
| .dual-diagram { padding:32px 30px; } |
| } |
| @media (max-width:960px) and (min-width:781px) { |
| .site-header { padding:0 28px; gap:13px; } .site-header .brand { font-size:21px; gap:6px; } |
| .site-header nav { gap:13px; font-size:11px; } .nav-cta { padding:10px; gap:7px; } |
| .motion-control { padding-left:10px; } |
| .hero { gap:20px; padding:35px; min-height:625px; } |
| .hero h1 { font-size:53px; letter-spacing:-1.6px; } .hero-copy .eyebrow { font-size:7px; letter-spacing:1.2px; } |
| .hero-actions { flex-wrap:wrap; } .hero-atlas-link { margin-top:24px; } |
| .scene-topline .micro { font-size:6px; } .scene-indicator { font-size:5px; gap:4px; } |
| .scene-language p { font-size:22px; } .scene-card-label { font-size:5px; letter-spacing:.5px; } |
| .scene-card-note { font-size:5px; letter-spacing:.6px; } .scene-sequence { top:67%; } |
| .scene-provenance { flex-wrap:wrap; } .scene-controls button { font-size:9px; } |
| .scene-caption { font-size:8px; } .path-caption { font-size:19px; } |
| .scene-center-label { display:none; } |
| .intro-strip>a>strong { font-size:12px; } .intro-strip>a>small { font-size:9px; } |
| .recorded-demo-heading p { font-size:22px; } .recorded-demo-heading>span:last-child { display:none; } |
| } |
| @media (max-width:780px) { |
| .site-header { height:72px; position:sticky; top:0; z-index:30; gap:16px; padding:0 24px; } |
| .site-header nav { top:72px; padding:22px 24px; gap:20px; font-size:13px; max-height:calc(100dvh - 72px); overflow-y:auto; box-shadow:0 15px 20px #2634330a; } |
| .menu-toggle { order:4; } .motion-control { border-left:0; padding:10px 0; } |
| .hero { padding:38px 24px 32px; gap:30px; align-items:stretch; } |
| .hero-copy { padding:0; } .hero h1 { font-size:clamp(50px,10.5vw,76px); letter-spacing:-1.8px; margin:22px 0; } |
| .hero-copy .eyebrow { font-size:8px; letter-spacing:1.4px; } |
| .hero-actions { margin-top:25px; } .hero-atlas-link { max-width:none; margin-top:24px; padding:15px 0; } |
| .hero-scene { max-width:550px; align-self:center; border-radius:12px; } |
| .scene-topline { padding:17px 15px 0; } .scene-topline .micro { font-size:7px; letter-spacing:1px; } |
| .scene-indicator { font-size:6px; letter-spacing:0; } |
| .scene-language { padding:12px; left:4%; width:38%; } |
| .scene-language p { font-size:clamp(21px,5.2cqw,28px); margin:10px 0 12px; } |
| .scene-card-label { font-size:6px; letter-spacing:.6px; } |
| .scene-card-label>span:first-child { font-size:17px; } |
| .scene-card-note { font-size:5.5px; letter-spacing:.6px; } |
| .scene-sequence { top:68%; padding:10px; width:43%; } |
| .scene-residues { font-size:8px; gap:2px; margin:7px 0; } |
| .scene-residues>span { padding:1px 2px; } |
| .language-spectrum { height:9px; margin-bottom:10px; } .language-spectrum i { width:9px; } |
| .scene-center-label { left:49%; font-size:4.5px; gap:4px; letter-spacing:.6px; } |
| .scene-center-label>span { font-size:16px; } |
| .path-caption { font-size:20px; } .path-caption span { font-size:13px; } |
| .scene-controls { margin:16px 14px 0; } .scene-controls button { font-size:9px; padding:11px 3px; } |
| .scene-caption { font-size:8px; min-height:42px; margin:0 15px; } |
| .scene-provenance { font-size:7px; padding:12px 14px; gap:5px; } |
| .scene-provenance>span { gap:5px; } |
| .intro-strip { padding:0; margin-top:0; gap:0 20px; } |
| .intro-strip>p { padding:20px 0; font-size:23px; } |
| .intro-strip>a { padding:20px 0; } .intro-strip>a:nth-child(2) { border-top:0; } |
| .intro-strip>a>strong { font-size:12px; } .intro-strip>a>small { font-size:9px; } |
| .section { padding-top:72px; } .section-heading { padding-top:20px; } |
| .section-heading h2 { font-size:45px; } .section-deck { border:0; padding:0; } |
| .dual-toolbar { padding:18px 14px 0; gap:12px; } |
| .dual-tour .micro { font-size:6.5px; letter-spacing:.75px; } |
| .dual-tour .text-button { font-size:9px; } |
| .dual-toolbar .segmented button { font-size:9px; gap:5px; padding:13px 2px; } |
| .tour-step-number { font-size:7px; } |
| .dual-diagram { padding:25px 14px; } |
| .model-node { padding:14px 8px; } |
| .model-node strong { font-size:10px; } |
| .modality-title h3 { font-size:12px; } |
| .dual-explanation { padding:22px 18px; min-height:0; } |
| .dual-explanation h3 { font-size:17px; } .dual-explanation p { font-size:11px; } |
| .recorded-demo-heading { padding:23px 18px 0; display:block; } |
| .recorded-demo-heading p { font-size:24px; margin-top:9px; } |
| .recorded-demo-heading>span:last-child { display:block; margin-top:8px; font-size:8px; } |
| .dual-experience>.pair-source { padding-bottom:20px; } |
| .closing { padding:62px 0 40px; margin-top:75px; } |
| .closing h2 { font-size:38px; line-height:1.12; } |
| .closing-actions { gap:22px; flex-wrap:wrap; } |
| .closing-top { margin-top:38px; } |
| } |
| @media (max-width:370px) { |
| .site-header { gap:12px; padding:0 18px; } .site-header .brand { font-size:20px; } |
| .hero { padding-left:18px; padding-right:18px; } .hero h1 { font-size:47px; } |
| .hero-copy .eyebrow { font-size:6.5px; } |
| .scene-topline { padding:14px 12px 0; } .scene-topline .micro { font-size:6px; } |
| .scene-indicator { font-size:5px; } .scene-indicator i { width:4px; height:4px; } |
| .scene-language { padding:9px; } .scene-language p { font-size:20px; } |
| .scene-card-label { font-size:5px; } .scene-card-note { font-size:5px; } |
| .scene-residues { font-size:7px; } .scene-center-label { display:none; } |
| .scene-provenance { flex-wrap:wrap; font-size:7px; } |
| .scene-controls button { font-size:8px; } .path-caption { font-size:18px; } |
| .tour-step-number { display:none; } .dual-toolbar .segmented button { font-size:8px; } |
| .section-heading h2 { font-size:40px; } .recorded-demo-heading p { font-size:22px; } |
| .scene-language .language-spectrum { display:none; } |
| } |
| @media (prefers-reduced-motion:reduce) { |
| .hero-scene *, .hero-atlas-points i { animation:none!important; } |
| .scroll-reveal .atlas-intro { opacity:1; transform:none; } |
| .atlas-case:hover,.atlas-case:hover img,.model-node { transform:none!important; } |
| } |
| |
| html[data-motion=paused] .section .bar-track>span,html[data-motion=paused] .section .scale-bar-space i,html[data-motion=paused] .dual-explanation>div:first-child { animation:none; } |
| html[data-motion=paused] .section.is-visible .section-heading,html[data-motion=paused] .section.is-visible .atlas-intro { transition:none; } |
| .dual-tour { flex-direction:row; align-items:center; } |
| .scene-center-label { top:83%; left:6%; font-size:7px; letter-spacing:.8px; } |
| @media (min-width:1201px) { .hero-scene { max-width:620px; justify-self:end; } } |
| @media (max-width:780px) { |
| .scene-language .language-spectrum { display:none; } |
| .scene-language { top:34%; } |
| .scene-language p { font-size:clamp(20px,5.2cqw,27px); } |
| .describe-caption { left:29%; bottom:4%; } |
| .scene-center-label { display:none; } |
| .scene-sequence { top:65%; } |
| .motion-control { min-width:36px; min-height:40px; } |
| } |
| .atlas-page-header .motion-control { margin-left:18px; } |
| .atlas-page-header>a:nth-child(2) { margin-left:auto; } |
| @media (max-width:780px) { |
| .atlas-page-header { flex-wrap:wrap; gap:12px; } |
| .atlas-page-header .motion-control { margin-left:0; } |
| .atlas-page-header>a:nth-child(2) { font-size:10px; } |
| } |
|
|
