/* unvessel.ai — the single-screen home and the small about page. The home starts as paper-on-ink; at the instant the vessel breaks the world inverts to ink-on-paper and stays there. Colors flow through the --page-* variables so the flip is one class on . */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { /* pre-break: the dark world */ --page-bg: var(--ink); --page-fg: var(--paper); --page-soft: var(--grey-mid); --page-faint: var(--ink-soft); margin: 0; background: var(--page-bg); color: var(--page-fg); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; transition: background-color 220ms linear, color 220ms linear; } /* post-break: the inverted world (also the no-JS and about-page state) */ body.is-inverted, html.no-js body, body.about { --page-bg: var(--paper); --page-fg: var(--ink); --page-soft: var(--ink-soft); --page-faint: #9a9a9a; } h1, h2, p { margin: 0; } a { color: inherit; } :focus-visible { outline: var(--bracket-stroke) solid currentColor; outline-offset: 3px; } /* ---------- home: one screen, no scroll ---------- */ .home { overflow: hidden; } .stage { position: relative; height: 100svh; display: flex; align-items: center; justify-content: center; } .stage__vessel { position: absolute; inset: 0; width: 100%; height: 100%; } .stage__content { position: relative; max-width: 30rem; padding: 0 var(--space-3); text-align: center; } /* --- staged entrance, keyed off body.is-settled (set when the break lands): letters rise → the line unmasks → links and legal follow --- */ .stage__wordmark { font-size: clamp(1.2rem, 3.4vw, 2rem); font-weight: 500; letter-spacing: var(--tracking-wide); } .stage__wordmark span { display: inline-block; opacity: 0; transform: translateY(0.45em); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); transition-delay: calc(var(--i) * 45ms); } body.is-settled .stage__wordmark span { opacity: 1; transform: none; } .stage__line { margin-top: var(--space-3); font-size: clamp(1.05rem, 2.4vw, 1.5rem); letter-spacing: 0.02em; clip-path: inset(0 100% 0 0); transition: clip-path 550ms var(--ease-out) 520ms; } body.is-settled .stage__line { clip-path: inset(0 0 0 0); } .home .stage__products, .home .stage__about, .home .stage__foot { opacity: 0; transform: translateY(10px); transition: opacity 650ms var(--ease-out) 1150ms, transform 650ms var(--ease-out) 1150ms, background-color 220ms linear, color 220ms linear; } body.is-settled .stage__products, body.is-settled .stage__about, body.is-settled .stage__foot { opacity: 1; transform: none; } /* without JS (or with reduced motion) everything is simply there */ html.no-js .stage__wordmark span, html.no-js .stage__products, html.no-js .stage__about, html.no-js .stage__foot { opacity: 1; transform: none; } html.no-js .stage__line { clip-path: none; } @media (prefers-reduced-motion: reduce) { .stage__wordmark span, .stage__line, .stage__products, .stage__about, .stage__foot { transition-duration: 1ms; transition-delay: 0ms; } } /* the products area — grows as offerings are added */ .stage__products { margin-top: var(--space-4); } .stage__products-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--page-faint); margin-bottom: var(--space-2); } .stage__products ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3) var(--space-4); font-size: var(--text-sm); letter-spacing: 0.04em; } .stage__products a { text-decoration: none; border-bottom: 1px solid var(--page-faint); padding-bottom: 3px; transition: border-color var(--dur-fast), color var(--dur-fast); } .stage__products a:hover { color: var(--page-fg); border-bottom-color: var(--accent); } /* about tucked into the corner */ .stage__about { position: absolute; top: var(--space-3); right: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; text-decoration: none; color: var(--page-faint); transition: color var(--dur-fast); } .stage__about:hover { color: var(--page-fg); } .stage__foot { position: absolute; left: 0; right: 0; bottom: var(--space-3); text-align: center; font-size: var(--text-xs); color: var(--page-faint); } .stage__foot a { color: inherit; text-decoration: none; } .stage__foot a:hover { color: var(--page-soft); } @media (max-height: 460px) { .home { overflow: auto; } /* tiny landscape screens may scroll */ } /* ---------- about: a short quiet page, ink on paper ---------- */ .about { overflow: auto; } .about__page { max-width: var(--measure); margin: 0 auto; padding: var(--space-5) var(--page-pad) var(--space-6); } .about__back { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; text-decoration: none; color: var(--page-faint); margin-bottom: var(--space-5); } .about__back:hover { color: var(--page-fg); } .about__page h1 { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4); } .about__page p { margin-top: var(--space-3); color: var(--page-soft); } .about__page p:first-of-type { color: var(--page-fg); } .cjk { font-family: var(--font-cjk-serif); font-size: 1.3em; color: var(--accent); } .about__founder { margin-top: var(--space-4); border-left: var(--bracket-stroke) solid var(--page-fg); padding-left: var(--space-3); } .about__founder h2 { font-size: var(--text-md); letter-spacing: var(--tracking-tight); } .about__founder p { margin-top: var(--space-1); } .about__contact { margin-top: var(--space-4); } .about__contact a { color: var(--page-fg); } .about__contact a:hover { color: var(--accent); } .stage__foot--static { position: static; padding: var(--space-3) 0 var(--space-4); }