/* Autopoiesis Sciences - landing page */ @font-face { font-family: "Helvetica Now Display"; src: url("assets/fonts/HelveticaNowDisplay-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Now Display"; src: url("assets/fonts/HelveticaNowDisplay-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Now Display"; src: url("assets/fonts/HelveticaNowDisplay-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Equip"; src: url("assets/fonts/Equip-W04-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* colors */ --bg-body: #101010; --bg-page: #191a1b; --border-subtle: #2b2c2d; --border-default: #3e4042; --text-primary: #fcfcfc; --text-secondary: #b8bbbe; --text-tertiary: #868a8e; --text-link: #fcfcfc; --text-accent: #fcfcfc; /* spacing */ --sp-2xs: 4px; --sp-xs: 8px; --sp-sm: 12px; --sp-md: 16px; --sp-md-plus: 20px; --sp-lg: 24px; --sp-2xl: 40px; --sp-xlg: 32px; --sp-3xl: 48px; --sp-4xl: 64px; /* type sizes */ --fs-label: 14px; --fs-body: 16px; --fs-body-sm: 14px; --fs-title: 20px; /* fonts - Helvetica Now Display is the primary typeface across the site */ --font-sans: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif; /* labels/roles (formerly Neue Plak) now use Helvetica Now Display too */ --font-extended: var(--font-sans); --font-serif: "PlebiaSemiSerif", Georgia, "Times New Roman", serif; --font-angel: "Equip", "Helvetica Neue", Helvetica, Arial, sans-serif; --column-width: 661px; } * { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } /* anchor targets settle a little below the top edge */ :target { scroll-margin-top: 48px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Native cross-document transitions: browser cross-fades between pages (including back/forward navigation) where supported. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* Gentle fade-in on first paint (opacity only, so no transform lingers on — a transformed ancestor would break the sticky header). */ @keyframes page-enter { from { opacity: 0; } to { opacity: 1; } } body { margin: 0; background: var(--bg-body); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; display: flex; flex-direction: column; align-items: center; gap: 128px; min-height: 100vh; padding-bottom: 0; animation: page-enter 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @media (prefers-reduced-motion: reduce) { body { animation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } a { color: inherit; text-decoration: none; } /* ---------- Header ---------- */ .site-header { width: 100%; position: sticky; top: 0; z-index: 100; background: var(--bg-body); transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } /* hidden when scrolling down; slides back in on scroll up */ .site-header--hidden { transform: translateY(-100%); } @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } } .nav { display: flex; gap: var(--sp-lg); align-items: center; justify-content: flex-end; padding: var(--sp-md-plus) var(--sp-xlg); } .nav-link { display: inline-flex; align-items: center; gap: var(--sp-xs); font-size: var(--fs-label); line-height: 1.3; color: var(--text-primary); white-space: nowrap; } .nav-link--active .nav-label { text-decoration: underline; text-underline-position: from-font; } .nav-dot { width: 4px; height: 4px; flex: 0 0 auto; background: var(--text-link); } /* ---------- Content column ---------- */ .content { width: var(--column-width); max-width: calc(100% - 48px); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4xl); } .brand { margin: 0; display: flex; align-items: center; line-height: 0; } .brand-logo { display: block; height: 64px; width: auto; max-width: 100%; } .sections { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3xl); } .section { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-md); width: 100%; } .section--center { align-items: center; } .eyebrow { margin: 0; width: 100%; font-weight: 400; font-size: var(--fs-title); line-height: 1.3; color: var(--text-tertiary); } .body { margin: 0; width: 100%; font-size: var(--fs-body); line-height: 1.6; color: var(--text-primary); } .inline-link { color: var(--text-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .team-name > span:last-child { transition: none; } } /* subtle easter egg: reads as plain text, underline draws in on hover */ .aristotle-egg { color: inherit; text-decoration: none; cursor: pointer; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } .aristotle-egg:hover { background-size: 100% 1px; } @media (prefers-reduced-motion: reduce) { .aristotle-egg { transition: none; } } /* ---------- Team ---------- */ .team-block { display: flex; flex-direction: column; gap: var(--sp-lg); width: 100%; } .team-names { display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: center; } .team-name { display: inline-flex; align-items: center; gap: var(--sp-2xs); height: 26px; padding: 7px 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; background: none; border: 0; cursor: pointer; color: var(--text-secondary); white-space: nowrap; transition: color 0.35s ease; } .team-name:hover { color: var(--text-primary); } /* animated underline on the name text (draws in on hover, stays on active) */ .team-name > span:last-child { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } .team-name:hover > span:last-child, .team-name--active > span:last-child { background-size: 100% 1px; } .team-name .nav-dot { display: none; } .team-name--active { color: var(--text-accent); } .team-name--active:hover { color: var(--text-accent); } .team-name--active .nav-dot { display: block; } .team-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-sm); width: 100%; padding: var(--sp-lg); background: var(--bg-page); border: 1px solid var(--border-subtle); border-radius: var(--sp-2xs); /* clip content while the box morphs height (animation driven in script.js) */ overflow: hidden; } .team-role { margin: 0; font-family: var(--font-extended); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; color: var(--text-secondary); } .team-bio { margin: 0; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--text-primary); } @media (prefers-reduced-motion: reduce) { .team-card, .team-role, .team-bio { transition: none; } } /* ---------- Investors ---------- */ .investors { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28.425px; width: 100%; max-width: 757px; padding: var(--sp-md) 0; overflow: hidden; } .investors-main { display: flex; align-items: center; justify-content: center; gap: 31.675px; flex-wrap: wrap; } .investor-logo { display: block; flex: 0 0 auto; } .investor-logo--informed { width: 148.268px; height: 41.582px; } .investor-logo--alpaca { width: 160.669px; height: 55.036px; } .investor-logo--vitalstage { width: 105.055px; height: 105.055px; } .investor-logo--gsr { width: auto; height: 42px; } /* angel investor marquee */ .marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient( to right, transparent 0, #000 12%, #000 88%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 12%, #000 88%, transparent 100% ); } .marquee-track { display: flex; width: max-content; will-change: transform; } .marquee-group { display: flex; align-items: center; gap: 37.9px; padding: 14.213px 0; padding-right: 37.9px; flex: 0 0 auto; } .angel { display: inline-flex; align-items: center; gap: 7.963px; color: #fff; white-space: nowrap; } .angel--serif { font-family: var(--font-angel); font-size: 12.548px; } .angel--icon { font-family: "Inter", var(--font-sans); font-weight: 500; font-size: 11.325px; letter-spacing: 0.02em; } .angel--icon img { width: 23.752px; height: 23.752px; display: block; } /* ---------- Our work ---------- */ .work-name { margin: 0; font-size: var(--fs-title); line-height: 1.3; color: var(--text-primary); } /* ---------- Advisory board ---------- */ .advisor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); width: 100%; } .advisor-card { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-xs); padding: var(--sp-md); background: var(--bg-page); border: 1px solid var(--border-subtle); border-radius: var(--sp-2xs); } .advisor-name { margin: 0; font-family: var(--font-extended); font-size: 14px; line-height: 1.6; letter-spacing: 0.02em; color: var(--text-secondary); } .advisor-affil { display: flex; flex-direction: column; justify-content: center; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--text-primary); } .advisor-affil p { margin: 0; } .advisor-bio { font-family: var(--font-extended); font-size: 14px; line-height: 1.6; color: var(--text-secondary); } /* ---------- Footer ---------- */ .site-footer { width: 100%; display: flex; gap: var(--sp-lg); align-items: center; justify-content: center; padding: var(--sp-md-plus) var(--sp-xlg); font-size: var(--fs-label); line-height: 1.3; color: var(--text-primary); white-space: nowrap; } .site-footer p { margin: 0; } .footer-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-primary); } /* ---------- Blog ---------- */ .page-title { margin: 0; font-weight: 400; font-size: 32px; line-height: 1.15; letter-spacing: 0.2px; color: var(--text-primary); } .post-list { width: 100%; display: flex; flex-direction: column; } .post { display: flex; gap: var(--sp-2xl); align-items: flex-start; width: 100%; padding: var(--sp-lg) 0; border-bottom: 1px solid var(--border-subtle); } .post:first-child { padding-top: 0; } .post-date { flex: 0 0 120px; width: 120px; margin: 0; font-family: var(--font-extended); font-size: var(--fs-body-sm); line-height: 1; color: var(--text-secondary); white-space: nowrap; } .post-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-md); } .post-title { margin: 0; font-size: var(--fs-title); line-height: 1.3; color: var(--text-primary); } .post-desc { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text-secondary); } /* posts as links: subtle lift on hover, no color shift */ a.post { text-decoration: none; transition: opacity 0.2s ease; } a.post:hover { opacity: 0.7; } /* ---------- Blog post (article) ---------- */ .back-link { display: inline-flex; align-items: center; gap: var(--sp-xs); font-size: var(--fs-body); line-height: 1.6; color: var(--text-secondary); transition: color 0.2s ease; } .back-link:hover { color: var(--text-primary); } .back-link svg { width: 16px; height: 16px; flex: 0 0 auto; display: block; } /* article page: tighten the gap between the header and the body (the divider already separates them; 64px felt too airy) */ .content--article { gap: var(--sp-3xl); } .post-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-lg); width: 100%; border-bottom: 1px solid var(--border-default); } /* blog cover: fixed 16:9 frame; any image fills it via object-fit cover */ .post-cover { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--sp-2xs); background: var(--bg-page); } .post-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .post-header .page-title { width: 100%; } .post-meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-md); width: 100%; padding-bottom: var(--sp-lg); } .post-lede { margin: 0; font-size: var(--fs-title); line-height: 1.3; color: var(--text-primary); } .post-published { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text-secondary); } .post-article { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3xl); } /* pull quote + attribution */ .post-quote { margin: 0; display: flex; flex-direction: column; gap: var(--sp-sm); padding-left: var(--sp-lg); border-left: 2px solid var(--border-default); } .post-cite { margin: 0; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--text-secondary); } /* image / small notes */ .post-caption { margin: 0; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--text-tertiary); } /* ---------- Responsive ---------- */ @media (max-width: 720px) { body { gap: 72px; } .brand-logo { height: 44px; } .advisor-grid { grid-template-columns: 1fr; } .footer-dot { display: none; } .site-footer { flex-wrap: wrap; white-space: normal; } .post { flex-direction: column; gap: var(--sp-xs); } .post-date { flex-basis: auto; width: auto; white-space: normal; } }