/* ============================================================ AVENAS — HYPERION™ passive-cooling materials · landing (v5) Near-black ground + a single violet accent, heavy grotesque display over a neutral body face. No cards, no shadows — hairlines and type do the structural work. ============================================================ */ :root { /* Avenas brand system. Teal is the ONLY primary accent. Heat orange appears sparingly — heat/problem only. Everything else is navy + ice/muted text on hairline structure. */ --ground: #0F1D2B; /* Midnight navy */ --ground-2: #132434; /* banded sections */ --panel: #16283A; /* Surface — cards / panels */ --panel-2: #1B3145; --line: #2A3E52; /* Hairline */ --line-2: #3A5268; --ink: #DCE7EE; /* Ice */ --ink-dim: #A9BCC9; --muted: #8497A6; /* Muted slate */ --accent: #1FC08F; /* Avenas teal — primary accent */ --accent-2: #45D6A6; /* hover / lift */ --accent-deep: #0E8F6B; /* Deep teal — secondary */ --accent-soft: rgba(31,192,143,0.10); --heat: #E8622D; /* Heat orange — sparing: heat/problem only */ --signal: #1FC08F; /* cooled / heat-reduced */ --screen: #0A1622; /* instrument-screen panel */ --shadow: none; /* hairlines, not shadows */ --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --display: "Archivo", "Instrument Sans", system-ui, sans-serif; --maxw: 1180px; --gutter: clamp(20px, 5vw, 56px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); } /* Display: heavy grotesque, tight — the headline IS the design. */ h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; line-height: 0.98; } h1 { font-size: clamp(3rem, 7.4vw, 6rem); letter-spacing: -0.045em; } h2 { font-size: clamp(2.1rem, 4.8vw, 3.6rem); letter-spacing: -0.04em; } h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } p { margin: 0; } a { color: inherit; text-decoration: none; } /* NB: inside a .section-head the 46ch measure wins — this 60ch only applies to leads outside one (e.g. the hero). Change .section-head to retune section line length. */ .lead { font-size: clamp(1.05rem, 1.55vw, 1.26rem); color: var(--ink-dim); max-width: 60ch; line-height: 1.55; } .muted { color: var(--muted); } .btn { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; padding: 0.85em 1.5em; border-radius: 3px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 0.6em; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease; } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { border-color: var(--ink-dim); background: rgba(24,20,42,0.04); } .btn .arrow { transition: transform .2s ease; } .btn:hover .arrow { transform: translateX(3px); } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; } header.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ground) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; } .brand { display: flex; align-items: center; gap: 0.6em; } .brand .mark { width: 30px; height: 30px; display: block; flex: none; background: url("data:image/png;base64,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") center / contain no-repeat; } .brand .wm { font-weight: 700; letter-spacing: 0.22em; font-size: 1.02rem; } .nav-links { display: flex; align-items: center; gap: 2rem; } .nav-links a { font-size: 0.9rem; color: var(--ink-dim); transition: color .2s ease; } .nav-links a:hover { color: var(--ink); } /* --- Mobile nav ---------------------------------------------------- Below 900px the inline links can't fit beside the brand and the CTA, so they collapse into a panel under the header. ⚠️ The hiding is scoped to .js and the toggle is hidden by default. Without JS the links simply stay visible and wrap — the button never appears, so a failed script can't strand navigation behind a control that doesn't respond. Same doctrine as the .motion-failed failsafe: CSS may only hide what CSS itself can still reveal. This used to be a bare `display: none` with nothing in its place, which orphaned team.html entirely on phones — the nav was its only inbound link once "Full bios →" was removed. */ .navtoggle { display: none; } @media (max-width: 900px) { /* Script-less fallback. With nav.js absent the links stay inline, and inline links + brand + CTA are wider than a phone — which produced a horizontally scrolling page. So the bar is allowed to grow and wrap. .nav-js puts the fixed 66px bar back, because there the links have moved into the absolutely-positioned panel and take up no row. */ .nav-inner { flex-wrap: wrap; height: auto; padding-block: 10px; row-gap: 0.5rem; } .nav-links { flex-wrap: wrap; gap: 1.1rem; width: 100%; } .nav-js .nav-inner { flex-wrap: nowrap; height: 66px; padding-block: 0; } .nav-js .nav-links { width: auto; } .nav-js .nav-links { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: var(--ground-2); border-bottom: 1px solid var(--line); padding: 0.5rem 0 0.9rem; /* Collapsed: clipped to nothing rather than display:none, so the open/close can transition and the links stay focusable-in-order. */ max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: max-height .32s cubic-bezier(.16,1,.3,1), opacity .2s ease, visibility .32s; } .nav-js .nav-inner { position: relative; } .nav-js header.nav.nav-open .nav-links { max-height: 70vh; overflow-y: auto; visibility: visible; opacity: 1; } .nav-js .nav-links a { padding: 0.85rem var(--gutter); font-size: 1rem; border-bottom: 1px solid var(--line); } .nav-js .nav-links a:last-child { border-bottom: 0; } /* The desktop underline grows from a ::after that would sit under a full-width row here; the row's own border does that job instead. */ .nav-js .nav-links a::after { display: none; } .nav-js .nav-links a.on { color: var(--accent); } .nav-js .navtoggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; color: var(--ink-dim); } .navtoggle-bars, .navtoggle-bars::before, .navtoggle-bars::after { content: ""; display: block; width: 20px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .18s ease; } .navtoggle-bars { position: relative; } .navtoggle-bars::before { position: absolute; top: -6px; } .navtoggle-bars::after { position: absolute; top: 6px; } .nav-open .navtoggle { color: var(--ink); } .nav-open .navtoggle-bars { background: transparent; } .nav-open .navtoggle-bars::before { top: 0; transform: rotate(45deg); } .nav-open .navtoggle-bars::after { top: 0; transform: rotate(-45deg); } /* Keep the one CTA on screen at every width — it's the site's single conversion action, so it shrinks rather than disappears. */ .nav-inner .btn-primary { font-size: 0.85rem; padding: 0.7em 1em; } } @media (max-width: 900px) and (prefers-reduced-motion: reduce) { .nav-js .nav-links { transition: none; } .navtoggle-bars, .navtoggle-bars::before, .navtoggle-bars::after { transition: none; } } @media (max-width: 380px) { .nav-inner .btn-primary { font-size: 0.8rem; padding: 0.65em 0.8em; } .brand .wm { font-size: 0.95rem; letter-spacing: 0.14em; } } section { padding-block: clamp(46px, 6.5vw, 82px); position: relative; } .section-head { display: flex; flex-direction: column; gap: 0.9rem; max-width: 46ch; margin-bottom: clamp(26px, 3.6vw, 42px); } .band { background: var(--ground-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .hero { padding-top: clamp(40px, 5.5vw, 68px); padding-bottom: clamp(44px, 6vw, 76px); overflow: hidden; position: relative; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(520px 520px at var(--hx, 22%) var(--hy, 34%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%); transition: opacity .4s ease; } .hero .wrap { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .hero::before { display: none; } } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 66px); align-items: center; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } } .hero h1 { margin-top: 1.1rem; } .hero .lead { margin-top: 1.5rem; } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; } .hero-meta { display: flex; gap: 2.2rem; margin-top: 2.6rem; flex-wrap: wrap; } .hero-meta .item { display: flex; flex-direction: column; gap: 0.25rem; } .hero-meta .k { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .hero-meta .v { font-size: 0.96rem; color: var(--ink-dim); font-weight: 500; } .signature { position: relative; border: 1px solid var(--line-2); border-radius: 8px; background: var(--screen); overflow: hidden; aspect-ratio: 1 / 1; min-height: 320px; box-shadow: var(--shadow); } .signature canvas { display: block; width: 100%; height: 100%; } .signature .readout { position: absolute; left: 14px; top: 12px; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: #C9C3DA; display: flex; gap: 1.1em; align-items: center; } .signature .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 0.4em; vertical-align: middle; } .signature .legend { position: absolute; right: 14px; bottom: 12px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8B84A0; text-align: right; line-height: 1.7; } .swatch { display:inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 0.5em; vertical-align: middle; } .ph { border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); border-radius: 5px; padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; } .ph .tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2); } .ph .tag::before { content: "◺ ADD"; } .ph .what { font-size: 0.98rem; color: var(--ink-dim); } .ph .hint { font-size: 0.82rem; color: var(--muted); } .grid { display: grid; gap: 1.1rem; } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 860px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 1.55rem 1.5rem; display: flex; flex-direction: column; gap: 0.65rem; box-shadow: var(--shadow); transition: border-color .25s ease, transform .25s ease; } .card:hover { border-color: var(--line-2); transform: translateY(-2px); } .card .ic { width: 26px; height: 26px; color: var(--accent); } .card .big { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; } .card h3 { color: var(--ink); } .card p { font-size: 0.94rem; color: var(--muted); line-height: 1.55; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } @media (max-width: 760px) { .split { grid-template-columns: 1fr; } } .domain { border: 1px solid var(--line); border-radius: 7px; padding: clamp(1.6rem,3vw,2.3rem); background: var(--panel); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1rem; } /* The Problem section is the one sanctioned use of heat orange. */ .domain .kicker { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--heat); } .domain h3 { font-size: 1.4rem; } .domain p { color: var(--muted); font-size: 0.96rem; } .sector { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 1.35rem 1.4rem 1.45rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.5rem; transition: transform .25s ease, border-color .25s ease; } .sector:hover { transform: translateY(-2px); border-color: var(--line-2); } .sector .ic { width: 24px; height: 24px; color: var(--signal); margin-bottom: 0.3rem; } .sector h3 { font-size: 1.02rem; } .sector p { font-size: 0.85rem; color: var(--muted); line-height: 1.5; } .expand { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); margin-top: 1.5rem; } .expand b { color: var(--ink-dim); font-weight: 600; } /* animated sector ribbon + thermal cursor-spotlight */ .sx-stage { position: relative; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; box-shadow: var(--shadow); padding: 26px 0; overflow: hidden; } .sx-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(160px 160px at var(--mx, -300px) var(--my, 50%), color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%); opacity: 0; transition: opacity .35s ease; mix-blend-mode: screen; } .sx-stage:hover::after { opacity: 1; } .mrow { overflow: hidden; padding: 6px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .mrow + .mrow { margin-top: 12px; } .marquee { display: flex; gap: 12px; width: max-content; will-change: transform; animation: scrollx var(--dur, 46s) linear infinite; } .marquee.rev { animation-direction: reverse; } .sx-stage:hover .marquee { animation-play-state: paused; } @keyframes scrollx { from { transform: translateX(0); } to { transform: translateX(-50%); } } .chip { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 11px 17px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); transition: transform .2s ease, border-color .2s ease, background .2s ease; } .chip:hover { border-color: var(--accent); background: var(--panel-2); transform: translateY(-2px); } .chip .nm { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); } .chip .tg { font-size: 0.72rem; color: var(--muted); white-space: nowrap; } .sx-count { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6em; } .sx-count b { color: var(--accent-2); font-size: 0.9rem; } @media (prefers-reduced-motion: reduce) { .marquee { animation: none; } .mrow { overflow-x: auto; } .sx-stage::after { display: none; } } .valuebar { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; margin-top: 1.1rem; box-shadow: var(--shadow); } @media (max-width: 700px) { .valuebar { grid-template-columns: repeat(2,1fr); } } .valuebar div { background: var(--panel); padding: 1.15rem 1.3rem; font-size: 0.92rem; color: var(--ink-dim); display: flex; align-items: center; gap: 0.6em; } .valuebar div::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } .person { display: flex; flex-direction: column; gap: 0.8rem; } .person .avatar { width: 100%; aspect-ratio: 1/1; border-radius: 7px; display: block; object-fit: cover; object-position: center top; border: 1px solid var(--line); background: var(--panel-2); box-shadow: var(--shadow); filter: saturate(0.94) contrast(1.02); transition: filter .3s ease, transform .3s ease; } .person:hover .avatar { filter: saturate(1) contrast(1.02); transform: translateY(-2px); } .person .nm { font-weight: 650; font-size: 1.05rem; } .person .rl { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); } .person .bio { font-size: 0.86rem; color: var(--muted); line-height: 1.5; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } @media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } } .audience { border: 1px solid var(--line-2); border-radius: 8px; padding: clamp(1.8rem, 3.5vw, 2.6rem); background: var(--panel); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } .audience.investor { background: linear-gradient(180deg, var(--panel), var(--accent-soft)); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .audience .kicker { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--signal); } .audience.investor .kicker { color: var(--accent-2); } .audience h3 { font-size: 1.35rem; } .audience p { color: var(--muted); font-size: 0.96rem; } .contact-row { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink-dim); margin-top: 2rem; } .contact-row a { color: var(--ink-dim); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; } .contact-row a:hover { color: var(--accent-2); border-color: var(--accent); } footer { border-top: 1px solid var(--line); padding-block: 40px; background: var(--ground-2); } .foot-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .foot-inner .small { font-size: 0.8rem; color: var(--muted); } .social { display: inline-flex; align-items: center; gap: 0.5em; color: var(--muted); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; transition: color .2s ease; } .social svg { width: 17px; height: 17px; display: block; } .social:hover { color: var(--accent); } .disclaimer { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--accent-2); text-transform: uppercase; } .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } .mock-note { background: var(--accent-soft); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); text-align: center; padding: 8px 16px; } /* ============================================================ v6 — investor / partner landing. Hero is typographic only, proof carries the real thermography, one CTA: the deck. ============================================================ */ /* Hero — nothing above the fold but the line, the sub, the button. */ /* Hero heat field — the one piece of ambient motion on the site. A warm mass that never quite wins against the teal: heat being held off, which is the whole product. Weighted to the RIGHT half so it fills the space the thermography used to occupy and never sits under the headline. .hero::before is already the cursor spotlight, so this rides on ::after. Both layers sit under .hero .wrap (z-index 1). */ .hero::after { content: ""; position: absolute; inset: -35%; z-index: 0; pointer-events: none; background: radial-gradient(34% 40% at 72% 30%, color-mix(in srgb, var(--heat) 40%, transparent), transparent 70%), radial-gradient(46% 52% at 84% 64%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 72%), radial-gradient(30% 34% at 54% 18%, color-mix(in srgb, var(--accent-deep) 46%, transparent), transparent 70%); filter: blur(34px); will-change: transform, opacity; animation: heat-drift 28s ease-in-out infinite alternate; } /* Rotating the whole field is what keeps it organic — the three masses slide past each other instead of pulsing in place. */ @keyframes heat-drift { 0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1.06); opacity: 0.68; } 50% { transform: translate3d( 2%, 3%, 0) rotate(6deg) scale(1.16); opacity: 0.92; } 100% { transform: translate3d( 4%, -3%, 0) rotate(-4deg) scale(1.09); opacity: 0.62; } } /* Reduced motion keeps the atmosphere, drops the movement. */ @media (prefers-reduced-motion: reduce) { .hero::after { animation: none; opacity: 0.5; transform: scale(1.08); } } /* NB: .hero-solo sits on the .wrap element — never constrain its width here or it overrides --maxw and the whole hero drifts to centre. Constrain the children instead. */ .hero-solo h1 { margin: 0; max-width: 9ch; } .hero-sub { max-width: 44ch; margin-top: 1.1rem; font-size: clamp(1.12rem, 1.9vw, 1.42rem); color: var(--ink-dim); } .hero-sub em { font-style: normal; color: var(--ink); } .hero-solo .hero-cta { margin-top: 2rem; } .quiet-link { display: inline-block; margin-top: 1.15rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: color .2s ease, border-color .2s ease; } .quiet-link:hover { color: var(--ink); border-color: var(--ink-dim); } /* The problem — the one place heat orange is allowed to speak. */ .problem .lead strong { color: var(--heat); font-weight: 600; } /* Problem / proof / model are headline-and-lead only — no content follows, so the section-head's trailing margin would just hang as dead space. These three are also the "statement" sections, so they're the ones that swing RIGHT. Everything with content under it (tech cards, sector ribbon, team) stays left so its grid still reads left-to-right. The result is a zigzag down the page: hero L · problem R · tech L · proof R · sectors L · model R · team L · contact split. */ section > .wrap > .section-head:only-child { margin-bottom: 0; margin-left: auto; /* swing the column right … */ align-items: stretch; /* … but keep one shared left edge inside it */ text-align: left; } /* Narrow screens: there's no room for a zigzag, and right-ragged body text is harder to read. Everything goes back to left. */ @media (max-width: 720px) { section > .wrap > .section-head:only-child { margin-left: 0; align-items: flex-start; text-align: left; } } /* The curiosity hand-off line under a section. */ .tease { margin-top: 2rem; font-size: 1.05rem; color: var(--muted); } .tease a { color: var(--accent); font-weight: 600; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding-bottom: 1px; transition: color .2s ease, border-color .2s ease; } .tease a:hover { color: var(--accent-2); border-color: var(--accent-2); } .tease a .arrow { display: inline-block; transition: transform .2s ease; } .tease a:hover .arrow { transform: translateX(3px); } /* Team on the landing page — names carry it, no avatars here. */ #team .person { display: flex; flex-direction: column; gap: 0.3rem; } #team .person .nm { font-family: var(--display); font-weight: 700; font-size: 1.18rem; letter-spacing: -0.02em; color: var(--ink); } #team .person .rl { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } #team .person .bio { margin-top: 0.35rem; color: var(--ink-dim); font-size: 0.97rem; line-height: 1.55; } /* CTA + lead capture — every scroll above funnels here. */ .cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; } .cta-grid .section-head { margin: 0; } .small-note { margin-top: 1.4rem; font-size: 0.92rem; } .small-note a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .small-note a:hover { color: var(--accent-2); } @media (max-width: 860px) { .cta-grid { grid-template-columns: 1fr; } } .lead-form { display: flex; flex-direction: column; gap: 1.05rem; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: clamp(22px, 3.4vw, 34px); } .field { display: flex; flex-direction: column; gap: 0.4rem; } .field label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .field .opt { text-transform: none; letter-spacing: 0.04em; opacity: 0.7; } .field input, .field select, .field textarea { /* ⚠️ Must not drop below 16px. iOS Safari zooms the whole page in on any focused control smaller than that and never zooms back out, so the old 0.98rem (15.7px) put the form into a zoomed viewport on the first tap. Keep this at 1rem or larger. */ font-family: var(--sans); font-size: 1rem; color: var(--ink); background: var(--screen); border: 1px solid var(--line); border-radius: 3px; padding: 0.72em 0.85em; width: 100%; transition: border-color .2s ease, background .2s ease; } .field textarea { resize: vertical; min-height: 84px; } .field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 19px) center, calc(100% - 13px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.4em; } .field select:invalid { color: var(--muted); } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-2); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--screen)); } .lead-form .btn { justify-content: center; margin-top: 0.3rem; } .lead-form .btn:disabled { opacity: 0.55; cursor: default; transform: none; } .form-msg { font-size: 0.9rem; line-height: 1.5; color: var(--muted); min-height: 1.2em; } .form-msg.ok { color: var(--accent-2); } .form-msg.err { color: var(--heat); } footer .foot-inner .small a { color: var(--ink-dim); border-bottom: 1px solid var(--line-2); } footer .foot-inner .small a:hover { color: var(--accent); border-color: var(--accent); } /* ------------------------------------------------------------------ Directional reveals. The right-swung statement sections slide in FROM the right; everything else keeps the default rise. Ties the motion to the zigzag instead of decorating on top of it. Specificity note: these must out-rank `.reveal.in { transform:none }`, so the `.in` state is restated at matching weight. ------------------------------------------------------------------ */ .js .duo > .section-head.reveal { transform: translate3d(30px, 14px, 0); } .duo > .section-head.reveal.in { transform: none; } /* Cards and people arrive as a sequence, not a slab. */ .grid > .reveal:nth-child(2) { transition-delay: 90ms; } .grid > .reveal:nth-child(3) { transition-delay: 180ms; } .grid > .reveal:nth-child(4) { transition-delay: 270ms; } @media (max-width: 720px) { /* No zigzag on mobile, so no sideways entrance either. */ .duo > .section-head.reveal { transform: translateY(18px); } } @media (prefers-reduced-motion: reduce) { .duo > .section-head.reveal, .duo > .section-head.reveal.in { transform: none; } .grid > .reveal { transition-delay: 0s !important; } } /* ================================================================== v7 — craft over copy. Roy wanted it to stop reading like a deck without adding text, so the page earns its life through motion and response instead of paragraphs. ================================================================== */ /* --- Headlines rise word by word out of a mask --------------------- Split by WORD, not line: a word keeps its own mask wherever it happens to wrap, so this survives any viewport. JS adds .w/.wi and the per-word delay; without JS the text just sits there, unstyled and perfectly readable. */ .w { display: inline-block; overflow: hidden; vertical-align: top; /* descenders (g, y, p) would clip against the mask without this */ padding-bottom: 0.14em; margin-bottom: -0.14em; } .wi { display: inline-block; } .js .wi { transform: translateY(110%); transition: transform 0.85s cubic-bezier(.16,1,.3,1); } .words-in .wi, .reveal.in .wi { transform: none; } /* --- Cards answer the cursor -------------------------------------- A teal edge wipes in from the left on hover. Cheap, but it's the difference between a slide and an interface. */ .card { position: relative; overflow: hidden; } .card::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.16,1,.3,1); } .card:hover::after, .card:focus-within::after { transform: scaleX(1); } .card:hover { border-color: var(--line-2); transform: translateY(-3px); } /* --- Nav responds to scroll --------------------------------------- Condensing on scroll is a small thing that reads as "website". .is-scrolled is set from JS. */ header.nav { transition: background .3s ease, border-color .3s ease; } .nav-inner { transition: height .3s cubic-bezier(.16,1,.3,1); } header.nav.is-scrolled { background: color-mix(in srgb, var(--ground) 94%, transparent); border-bottom-color: var(--line-2); } header.nav.is-scrolled .nav-inner { height: 54px; } /* --- Nav links get an underline that grows ------------------------- */ .nav-links a { position: relative; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.16,1,.3,1); } .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } @media (prefers-reduced-motion: reduce) { .wi { transform: none !important; transition: none; } .card::after, .nav-links a::after { transition: none; } .nav-inner { transition: none; } } /* ================================================================== v8 — thermal comparison + magnetic buttons ================================================================== */ /* --- Abstract thermal panel (proof section) ----------------------- Replaces the removed camera capture. Drawn, not photographed, so it matches the brand instead of fighting it. The proof section keeps its right-swung text; the panel fills the left, which is the slot the zigzag left open. */ /* The text column is pinned to the same 46ch measure as every other .section-head — with a plain 1fr/1fr split its lines ran shorter than the rest of the page and the rhythm read ragged. The panel takes whatever is left. */ /* Shared two-column layout for the three statement sections (problem, proof, model). Companion visual left, text right — the text column keeps the same 46ch measure as every other section. Adding a companion is what stops these sections reading as isolated text islands. */ .duo { display: grid; grid-template-columns: 1fr minmax(0, 46ch); gap: clamp(28px, 5vw, 72px); align-items: center; } /* The head is no longer :only-child, so the zigzag rule stops applying — restate the right alignment explicitly to keep the rhythm. */ /* The head is no longer :only-child once a companion exists, so the zigzag rule stops applying — restate the right swing explicitly. POSITION right, but ALIGN left. Right-aligned body text gives every line a different starting x — the model paragraph's lines spanned 468px, which is what reads as "not aligned". `stretch` makes the headline and paragraph fill the same column so they share one clean left edge; the column itself still sits on the right, so the zigzag survives. */ .duo > .section-head { margin: 0 0 0 auto; align-items: stretch; text-align: left; } .thermal { margin: 0; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .plate { position: relative; aspect-ratio: 3 / 4; border-radius: 6px; border: 1px solid var(--line); overflow: hidden; display: flex; align-items: flex-end; padding: 14px; } .plate::before { content: ""; position: absolute; inset: 0; } /* Hot plate: heat pooling and breathing. This and the hero field are the only sanctioned uses of heat orange. */ .plate-hot::before { background: radial-gradient(70% 55% at 50% 62%, color-mix(in srgb, var(--heat) 92%, #FFD9A0), transparent 72%), radial-gradient(95% 80% at 50% 55%, color-mix(in srgb, var(--heat) 55%, transparent), transparent 78%), var(--screen); animation: plate-breathe 6s ease-in-out infinite alternate; } /* Cool plate: the same energy, held down to a teal floor. */ .plate-cool::before { background: radial-gradient(70% 55% at 50% 62%, color-mix(in srgb, var(--accent) 48%, transparent), transparent 74%), radial-gradient(95% 80% at 50% 55%, color-mix(in srgb, var(--accent-deep) 34%, transparent), transparent 80%), var(--screen); animation: plate-breathe 6s ease-in-out infinite alternate; animation-delay: -3s; /* offset so the two never pulse in lockstep */ } @keyframes plate-breathe { from { transform: scale(1); opacity: 0.88; } to { transform: scale(1.06); opacity: 1; } } .plate-label { position: relative; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); text-shadow: 0 1px 6px rgba(0,0,0,0.55); } .thermal-delta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink); background: color-mix(in srgb, var(--ground) 88%, transparent); border: 1px solid var(--line-2); border-radius: 3px; padding: 5px 9px; white-space: nowrap; } @media (max-width: 860px) { .duo { grid-template-columns: 1fr; } .duo > .section-head { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .plate-hot::before, .plate-cool::before { animation: none; } } /* --- Magnetic buttons --------------------------------------------- JS writes the translate; this only supplies the easing for the snap-back. Transform is excluded from the transition while the pointer drives it, or it lags behind the cursor. */ .btn-primary { transition: background .2s ease, border-color .2s ease, color .2s ease, transform .35s cubic-bezier(.16,1,.3,1); } .btn-primary:hover { transform: none; } /* the base rule's -1px would fight the magnet */ /* ------------------------------------------------------------------ FAILSAFE. Set by the inline script when motion.js hasn't checked in within 2.5s (404, blocked, stale cache). Everything the animation system hides is forced back into view — a static page beats an invisible one. Never remove this without also moving the hiding out of CSS. ------------------------------------------------------------------ */ .motion-failed .reveal, .motion-failed .wi, .motion-failed .duo > .section-head.reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* ================================================================== v9 — companion visuals for the two isolated sections Both are abstract and aria-hidden: they carry no claim the text doesn't already make. Neither has a hidden resting state, so if the reveal never fires they simply sit there finished rather than invisible — no failsafe entry needed. ================================================================== */ .viz { margin: 0; position: relative; } /* --- Problem: cooling demand climbing ---------------------------- The sanctioned home for heat orange — this IS the heat/problem section. Bars warm as they rise. */ .viz-load { display: flex; align-items: flex-end; gap: clamp(6px, 1.1vw, 12px); height: clamp(150px, 20vw, 230px); } .viz-load .bar { flex: 1; border-radius: 3px 3px 0 0; height: var(--h); background: linear-gradient(180deg, color-mix(in srgb, var(--heat) var(--warm), var(--accent-deep)), color-mix(in srgb, var(--accent-deep) 70%, transparent)); transform-origin: bottom; } /* `backwards` holds the from-state through the stagger delay; without .in the bars are simply at full height already. */ .viz-load.in .bar { animation: bar-rise 0.9s cubic-bezier(.16,1,.3,1) backwards; } @keyframes bar-rise { from { transform: scaleY(0.06); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } /* --- Model: the ingredient inside --------------------------------- Concentric shells with a teal core — "we make the thing inside it", stated as a mark rather than as more words. */ .viz-inside { display: grid; place-items: center; height: clamp(160px, 21vw, 250px); } .viz-inside span { position: absolute; border-radius: 22%; border: 1px solid var(--line-2); } .viz-inside .s1 { width: 72%; aspect-ratio: 1; } .viz-inside .s2 { width: 50%; aspect-ratio: 1; border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .viz-inside .core { width: 26%; aspect-ratio: 1; border: none; background: radial-gradient(circle at 50% 45%, var(--accent), var(--accent-deep) 70%); animation: core-pulse 5s ease-in-out infinite alternate; } @keyframes core-pulse { from { transform: scale(1); opacity: 0.82; } to { transform: scale(1.1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .viz-load.in .bar { animation: none; } .viz-inside .core { animation: none; } } /* ================================================================== v10 — hero particle barrier (canvas) ================================================================== */ /* Sits above the CSS heat field (::after, z-index 0) but below the copy (.hero .wrap, z-index 1). The mask is load-bearing, not decoration: it erases the canvas across the left of the hero so nothing can ever render behind the headline. */ .hero-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 54%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 54%, #000 100%); } /* On narrow screens the copy spans the full width, so the barrier drops back to a faint texture rather than competing with the text. */ @media (max-width: 720px) { .hero-canvas { opacity: 0.5; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%); } } /* Canvas running? Let the ambient field step back so the two don't fight. Class is added by JS only on success, so a failure keeps the full field. */ .hero.canvas-on::after { opacity: 0.42; animation-duration: 40s; } @media (prefers-reduced-motion: reduce) { .hero-canvas { display: none; } } /* ================================================================== Touch ergonomics (added 2026-07-19) Keyed to the POINTER, not the viewport: a 900px tablet needs the bigger targets and a 700px-wide desktop window does not. Everything here only grows hit areas and type - no layout moves - so the desktop composition is untouched. Lives at the end of the file on purpose: several of the rules it raises (.plate-label, .thermal-delta) are declared later than the responsive block and would otherwise win on source order at equal specificity. ================================================================== */ @media (hover: none), (pointer: coarse) { /* 44px is the floor Apple and Google both publish. These measured 17-30px; the footer mail link and the LinkedIn row were the worst. */ .quiet-link, .social, .tease a, footer .foot-inner .small a { min-height: 44px; display: inline-flex; align-items: center; } /* Padding, not min-height: .brand is already a flex row inside a fixed 66px bar, and a min-height there would stretch the bar. */ .brand { padding-block: 7px; } /* Mono microcopy set at 0.6-0.72rem renders 9.9-11.5px, under the ~12px floor where tracked-out uppercase stops being legible at arm's length on a phone. */ .chip .tg { font-size: 0.78rem; } .sx-count { font-size: 0.75rem; } .plate-label { font-size: 0.7rem; } .thermal-delta { font-size: 0.78rem; } .quiet-link { font-size: 0.78rem; } .social { font-size: 0.76rem; } .disclaimer { font-size: 0.68rem; } /* No cursor to move, so the ribbon can't be paused or explored and the hint would be instructing something impossible. */ .fine-only { display: none; } }