/* AI Growth Kit homepage, "Aegean" v3 (19 Oct 2026: Viggo's iPad review, dark Owner HQ). Mercury's structure and motion, our style. Each section paints its own background and text colours from its data-theme (round 3, 20 Oct: the shared background that glided from dark to light left grey, low-contrast frames mid-way, Cowork 11; no fade between dark and light can keep text at 4.5:1 in every frame). The change happens at the sections' edge as it scrolls by. The .transition-theme wrapper takes the theme of the section under the header, at once, for the header, the menu and the browser bar. Progressive: without JavaScript, or with reduced motion, the page is a plain readable document (the hero shows the dashboard, static, under the headline). The `js` and `film` classes on come from the inline script in the page head. Tokens: DESIGN.md, "Aegean". */ @font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans-Variable.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } /* The theme variables interpolate, so everything that uses them glides. */ @property --bg { syntax: ""; inherits: true; initial-value: #F4EEE3; } @property --fg { syntax: ""; inherits: true; initial-value: #14201F; } @property --muted { syntax: ""; inherits: true; initial-value: #4F5A57; } @property --line { syntax: ""; inherits: true; initial-value: #DCD2BF; } @property --accent { syntax: ""; inherits: true; initial-value: #136B80; } @property --chrome { syntax: ""; inherits: true; initial-value: rgba(244, 238, 227, .86); } @property --gold-ink { syntax: ""; inherits: true; initial-value: #8A6420; } /* the bottom safe area as a length film.js can read (round 6) */ @property --safe-bottom { syntax: ""; inherits: true; initial-value: 0px; } :root { --sand: #F4EEE3; --shell: #FBF8F2; --lagoon: #136B80; --lagoon-hover: #0E5869; --shallows: #5EE3D6; --reef: #0A3346; --reef-fg: #EAF3F6; --night: #0A3346; --gold: #B8893A; --ink: #14201F; --missed: #C4462B; --booked: #2E8B57; --ink-muted: #4F5A57; --reef-muted: #A6C2CE; --booked-ink: #1F6B44; --missed-ink: #A93A22; --booked-wash: #E3F0E7; --missed-wash: #F7E4DE; --lagoon-wash: #DCEBF0; --hair: #E2D9C8; --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display: var(--sans); --ease: cubic-bezier(0, 0, .2, 1); --ease-theme: cubic-bezier(0, 0, .6, 1); --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-live: cubic-bezier(.22, 1, .36, 1); --wrap: 1240px; /* Round 5 (Viggo on his iPhone, full screen in the Claude app: the header sat under the status bar). The page has viewport-fit=cover, so the header and the hero pad themselves for the safe areas. --header-h is the bar itself; --header-total adds the status bar above it. */ --safe-top: env(safe-area-inset-top, 0px); --gutter: max(clamp(20px, 4vw, 48px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --header-h: 68px; --header-total: calc(var(--header-h) + var(--safe-top)); --safe-bottom: env(safe-area-inset-bottom, 0px); /* round 6b (Viggo's iPhone, in the Claude app: a band of page under the pinned film once he scrolled): in an app's web view 100lvh can be shorter than the window, so the film's height is the larger of the two (film.js sets --ih to the window's own height) */ --lvh: 100vh; --film-vh: max(var(--lvh), var(--ih, 0px)); --r-tile: 22px; background: var(--sand); } @supports (height: 100lvh) { :root { --lvh: 100lvh; } } .transition-theme { min-height: 100vh; background-color: var(--bg); color: var(--fg); } .theme-sand, html:not(.blend) main > [data-theme="sand"] { --bg: #F4EEE3; --fg: #14201F; --muted: #4F5A57; --line: #DCD2BF; --accent: #136B80; --chrome: rgba(244, 238, 227, .86); --gold-ink: #8A6420; } .theme-shell, html:not(.blend) main > [data-theme="shell"] { --bg: #FBF8F2; --fg: #14201F; --muted: #4F5A57; --line: #E2D9C8; --accent: #136B80; --chrome: rgba(251, 248, 242, .88); --gold-ink: #8A6420; } .theme-reef, html:not(.blend) main > [data-theme="reef"] { --bg: #0A3346; --fg: #EAF3F6; --muted: #A6C2CE; --line: rgba(226, 240, 246, .16); --accent: #5EE3D6; --chrome: rgba(10, 51, 70, .86); --gold-ink: #D8B46A; } .theme-night, html:not(.blend) main > [data-theme="night"], html:not(.blend) .site-footer { --bg: #0A3346; --fg: #EAF3F6; --muted: #A6C2CE; --line: rgba(226, 240, 246, .14); --accent: #5EE3D6; --chrome: rgba(10, 51, 70, .86); --gold-ink: #D8B46A; } html:not(.blend) main > [data-theme], html:not(.blend) .site-footer { background-color: var(--bg); color: var(--fg); } /* The Aegean blue-teal (Viggo, 19 Oct, round 2 colour change: "a bit more teal focused so it doesn't keep that AGK colour"): the dark sections are deep #0A3346 with a #1A7F95 glow from their top right, fading into it. At its brightest the glow is 36% #1A7F95, so muted text keeps 4.88:1 and gold 4.63:1 even there. Round 3: each dark section paints its own glow (the glow used to be fixed to the window and fade with the shared theme). */ .transition-theme { position: relative; isolation: isolate; } /* Round 6 (Viggo, 21 Oct: the colour blocks read as hard boxes; Mercury's change is seamless). With JavaScript (html.blend) no section paints a colour: the wrapper paints one, which aegean.js sets from the scroll position, with the text colours to match (blend.js holds each at 4.5:1 or more in every frame). The dark colour's glow from the top right is one layer fixed to the window (.page-glow, added by aegean.js), as strong as the colour is dark, and only once the film has left the screen (where the veil meets Services it would be a seam, round 3b). Cards keep their own surfaces. The rules above (each section its own colour) are for a page without JavaScript. */ /* the page colour and the glow, each on its own layer fixed behind the page (a colour or an opacity changing there repaints nothing else); the colour layer runs past the window's edges, so the iOS toolbar sliding never uncovers an edge */ html.blend .transition-theme { background-color: transparent; } .page-colour { position: fixed; inset: -120px 0; z-index: -2; pointer-events: none; background-color: #F4EEE3; } .page-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(75% 65% at 100% 0%, rgba(26, 127, 149, .36), rgba(26, 127, 149, 0) 72%); opacity: 0; will-change: opacity; } html:not(.blend) main > [data-theme="night"], html:not(.blend) main > [data-theme="reef"] { background-image: radial-gradient(min(1100px, 95vw) min(760px, 80vh) at 100% 0%, rgba(26, 127, 149, .36), rgba(26, 127, 149, 0) 72%); background-repeat: no-repeat; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-total) + 16px); } body { margin: 0; background: var(--sand); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } @media (min-width: 900px) { body { font-size: 1.125rem; } } img, video, svg, canvas { display: block; max-width: 100%; } a { color: inherit; } p, h1, h2, h3, ul, ol, dl, dd, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } button { font: inherit; color: inherit; } em { font-style: normal; } .icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } .num, .tabular { font-variant-numeric: tabular-nums; } /* a phone number or a price never breaks across lines (round 2d) */ .num { white-space: nowrap; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; box-shadow: 0 0 0 4px transparent, 0 0 0 7px var(--fg); border-radius: 6px; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--shell); padding: 10px 16px; border-radius: 999px; text-decoration: none; } .skip-link:focus { top: 12px; } /* ---------- Type: one family, Instrument Sans ---------- */ /* One family everywhere (Viggo, 23 Oct 2026: no serif, and the font never switches). Headlines and statements are Instrument Sans at its heaviest, 600, set a little tighter; a word or two carries the accent in brass, upright. */ h1, h2, h3 { font-weight: 480; letter-spacing: -.02em; text-wrap: balance; } h1, .statement, .big, .display { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; } h1 { font-size: clamp(2.1rem, 1.7rem + 1.7vw, 3rem); line-height: 1.06; } .statement { font-size: clamp(1.7rem, 1.4rem + 1.25vw, 2.45rem); line-height: 1.1; max-width: 22em; } .statement.wide { max-width: 24em; } .statement.center { margin-inline: auto; text-align: center; } .big { font-size: clamp(2.15rem, 1.55rem + 2.6vw, 3.6rem); line-height: 1.06; } h1 em, h2 em, h3 em, .statement em, .big em { font-style: normal; color: var(--gold-ink); } h3 { font-size: 1.125rem; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; } .lede { color: var(--muted); max-width: 36em; text-wrap: pretty; } .eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 14px; } .note, .small-print { font-size: .8125rem; color: var(--muted); } /* the chip is outlined, not tinted (round 6): on the page colour mid-way between light and dark a gold tint under the text took it below 4.5:1 */ .soon { display: inline-flex; vertical-align: middle; margin-left: 6px; font: 500 .75rem/1.5 var(--sans); letter-spacing: 0; padding: 2px 9px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(184, 137, 58, .7); color: var(--fg); white-space: nowrap; font-style: normal; } /* ---------- Pills ---------- */ .pill { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font: 500 1rem/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .16s var(--ease-out); -webkit-tap-highlight-color: transparent; } @media (min-width: 760px) { .pill { height: 46px; } } .pill:focus-visible { border-radius: 999px; } .pill:active { transform: scale(.97); } .pill .icon { width: 18px; height: 18px; position: relative; z-index: 2; pointer-events: none; } .pill .label { position: relative; z-index: 2; pointer-events: none; } .pill-primary { background: var(--lagoon); color: #fff; } .pill-primary .label { text-shadow: 0 1px 2px rgba(4, 40, 38, .35); } .pill-primary:hover, .pill-primary:active { background: var(--lagoon-hover); } .pill-ghost { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 50%, transparent); } .pill-ghost:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); border-color: var(--fg); } .pill-sm { height: 40px; padding: 0 18px; font-size: .9375rem; } /* in the header the colours swap at once with the theme (round 3: a fade there left grey frames); hover still eases its background */ .site-header .pill { transition: background-color .3s var(--ease), transform .16s var(--ease-out); } /* The smoke (public/assets/js/smoke.js): a canvas behind the label, screen blended; the glow is the fallback. Both sit in the smoke's own layer (round 4b): the pill's fill, inherited, clipped to the pill's shape. The pill's overflow alone is not enough: WebKit does not clip a composited child (the WebGL canvas) to a rounded overflow, so on the iPad the smoke showed as a rectangle round the pill. The clip-path clips it, and the screen blend lands on the layer's own fill, so the smoke looks the same on every pill, over the film or the page. */ .smoke-clip { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; isolation: isolate; background-color: inherit; -webkit-clip-path: inset(0 round 999px); clip-path: inset(0 round 999px); pointer-events: none; } .smoke-canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; } .smoke-glow { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); background: radial-gradient(140px 70px at var(--mx, 50%) var(--my, 50%), rgba(94, 227, 214, .5), transparent 70%); } .pill.no-gl.is-lit .smoke-glow { opacity: 1; } .text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 500; text-decoration: none; padding: 4px 0; } .text-link .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); } .text-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .text-link:hover .icon { transform: translateX(2px); } /* ---------- Header: follows the theme ---------- */ /* the header swaps colours at once with the section under it (round 3: a fade would leave grey frames) */ .site-header { position: fixed; inset: 0 0 auto; z-index: 50; box-sizing: border-box; height: var(--header-total); padding-top: var(--safe-top); color: var(--fg); transition: box-shadow .3s var(--ease); } .site-header .wrap { height: 100%; display: flex; align-items: center; gap: 28px; max-width: none; padding: 0 max(clamp(16px, 3vw, 36px), env(safe-area-inset-right, 0px)) 0 max(clamp(16px, 3vw, 36px), env(safe-area-inset-left, 0px)); } .site-header.is-solid, html:not(.film) .site-header { background: var(--chrome); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 1px 0 color-mix(in srgb, var(--fg) 10%, transparent); } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; flex: none; } .brand img { width: 32px; height: 32px; border-radius: 8px; } .nav { display: none; gap: 4px; margin-right: auto; } .nav a { text-decoration: none; font-size: .9688rem; font-weight: 500; padding: 8px 12px; border-radius: 999px; transition: background-color .3s var(--ease); } .nav a:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); } .header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .header-actions .btn-call { display: none; } .menu-toggle { width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; display: grid; place-content: center; gap: 5px; cursor: pointer; } .menu-toggle span { display: block; width: 20px; height: 1.75px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease); } .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.4px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.4px) rotate(-45deg); } .mobile-menu { position: fixed; inset: var(--header-total) 0 auto; z-index: 49; background: var(--shell); color: var(--ink); border-bottom: 1px solid var(--hair); box-shadow: 0 20px 40px rgba(20, 32, 31, .12); } .mobile-menu .wrap { display: grid; padding-top: 8px; padding-bottom: 20px; } .mobile-menu a { text-decoration: none; font-size: 1.125rem; font-weight: 500; padding: 14px 0; border-bottom: 1px solid var(--hair); } .mobile-menu a:last-child { border-bottom: 0; } .mobile-menu[hidden] { display: none; } @media (min-width: 1000px) { .nav { display: flex; } .menu-toggle, .mobile-menu { display: none !important; } .header-actions { margin-left: 0; } .header-actions .btn-call { display: inline-flex; } } @media (max-width: 359px) { .brand span { display: none; } } /* small phones (375): the trial pill and the menu fit beside the name (round 2d) */ @media (max-width: 399px) { .site-header .wrap { gap: 8px; } .header-actions { gap: 4px; } .header-actions .pill-sm { padding: 0 12px; } } /* ---------- 01 The film ---------- */ .hero { position: relative; overflow-anchor: none; } .hero-copy { position: relative; z-index: 3; text-align: center; display: grid; justify-items: center; gap: 16px; padding: calc(var(--header-total) + clamp(24px, 5vh, 56px)) var(--gutter) 0; } .hero-copy h1 { max-width: 13em; } .hero-copy h1 > span { display: inline-block; } /* Phones: each half of the headline stays on one line (two lines in all), so it scales with the width there. */ @media (max-width: 479px) { .hero-copy h1 { font-size: min(2.25rem, calc((100vw - 2 * var(--gutter)) / 11.6)); } } .hero-copy .lede { color: var(--ink); max-width: 30em; } .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; } /* Wide, short screens (laptops at 1366 x 768 and the like): the laptop in the film sits high, so the copy is tighter and keeps clear of it. */ @media (orientation: landscape) and (max-height: 900px) and (min-width: 700px) { .hero-copy { gap: 12px; padding-top: calc(var(--header-total) + 2.4vh); } .hero-copy h1 { font-size: min(clamp(2.1rem, 1.7rem + 1.7vw, 3rem), 6vh); } .hero-copy .lede { max-width: 46em; font-size: 1rem; } .hero-actions { margin-top: 4px; } } /* Short phones in portrait (375 x 667, round 5): the laptop's screen sits just under the pills, and the copy fades before the screen reaches it, so it never showed at all. The headline says what the lede says; the lede goes, and the copy keeps clear of the screen. */ /* phones in portrait: less room above the headline, so the status bar's height (up to 59 px) never pushes the pills down onto the laptop's screen */ @media (orientation: portrait) and (max-width: 479px) { .hero-copy { padding-top: calc(var(--header-total) + clamp(16px, 3vh, 32px)); } } @media (orientation: portrait) and (max-height: 700px) { .hero-copy { gap: 12px; padding-top: calc(var(--header-total) + 16px); } .hero-copy .lede { display: none; } .hero-actions { margin-top: 2px; gap: 10px; } } /* The dashboard: a 2x still of Owner HQ Today at 1440 x 900 CSS px (round 3: no recording on the laptop). In the film the same picture is baked into every frame (scripts/film/bake-screen.py); this still covers it exactly from the last frame on (film.js adds .on and its matrix3d), so the zoom scales a sharp still. Without the film it is shown whole, scaled to the page. */ .screen-pin { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; z-index: 2; backface-visibility: hidden; background: #0B1417; } .screen-still { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } html.film .screen-pin { visibility: hidden; } html.film .screen-pin.on { visibility: visible; } .film-frame { position: relative; overflow: hidden; } .film-frame .still, .film-frame .still img, .film-frame .film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .film-frame .film-canvas { opacity: 0; } .film-frame .film-canvas.ready { opacity: 1; } /* once the canvas shows (it is opaque and covers the frame), the still under it is hidden, so the screen does not composite a picture nobody sees (round 4b) */ html.film .film-frame.canvas-on .still { visibility: hidden; } html:not(.film) .film-canvas { display: none; } /* The hand-over (round 2, after Mercury): after the zoom the night of the product section covers the film around the dashboard (film.js sets the opacity), so the laptop screen becomes the dark section below. No white, no hard edge at the un-pin. */ .film-veil { display: none; } html.film .film-veil { display: block; position: absolute; inset: 0; z-index: 1; background: radial-gradient(75% 65% at 100% 0%, rgba(26, 127, 149, .36), rgba(26, 127, 149, 0) 72%), #0A3346; opacity: 0; pointer-events: none; } html.film .screen-pin { overflow: hidden; } /* The pin. The stage takes the large viewport height (100lvh, so the iOS toolbar sliding away never opens a gap under it), and film.js measures progress against the stage's own height. Round 6 (Viggo, iPad and iPhone in the Claude app: a sand band under the pinned film): it also runs under the bottom safe area (the home bar), with no padding, so the film goes to the very bottom edge; film.js keeps the zoom and the hand-over to the part of it above that. */ html.film .hero { height: calc(100vh + 230vh + var(--handover-extra, 0px)); height: calc(var(--film-vh) + var(--safe-bottom) + 230vh + var(--handover-extra, 0px)); } @media (max-width: 760px), (orientation: portrait) { html.film .hero { height: calc(100vh + 190vh + var(--handover-extra, 0px)); height: calc(var(--film-vh) + var(--safe-bottom) + 190vh + var(--handover-extra, 0px)); } } html.film .hero-stage { position: sticky; top: 0; height: 100vh; height: calc(var(--film-vh) + var(--safe-bottom)); overflow: hidden; background: var(--bg); } html.film .film-frame { position: absolute; left: 0; top: 0; transform-origin: 0 0; } html.film .hero-copy { position: absolute; inset: 0 0 auto; } html.film .hero-copy::before { content: ""; position: absolute; inset: -20vh 0 -14vh; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 72% at 50% 34%, rgba(244, 238, 227, .92) 0%, rgba(244, 238, 227, .8) 46%, rgba(244, 238, 227, 0) 78%); } .hero-actions .pill-ghost { background: rgba(251, 248, 242, .82); border-color: rgba(20, 32, 31, .35); color: var(--ink); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .hero-actions .pill-ghost:hover { background: rgba(251, 248, 242, .96); border-color: var(--ink); } @media (orientation: portrait) { /* round 5 (Viggo: the photo "looks washed out", a white haze at first open): a smaller, lighter scrim, with a soft halo round the letters doing the work the haze did, so the text keeps its contrast */ html.film .hero-copy::before { inset: -8vh -6vw -4vh; background: radial-gradient(ellipse 74% 54% at 50% 46%, rgba(244, 238, 227, .9) 0%, rgba(244, 238, 227, .82) 50%, rgba(244, 238, 227, 0) 82%); } html.film .hero-copy h1, html.film .hero-copy .lede { text-shadow: 0 0 2px #F4EEE3, 0 0 6px rgba(244, 238, 227, .95), 0 0 16px rgba(244, 238, 227, .9), 0 0 32px rgba(244, 238, 227, .6); } } /* Static hero: the end state, under the headline. */ html:not(.film) .hero { padding-bottom: clamp(48px, 7vw, 96px); } html:not(.film) .hero-stage { display: grid; gap: clamp(32px, 5vw, 56px); } html:not(.film) .film-frame { width: min(100% - 2 * var(--gutter), 1240px); margin: 0 auto; aspect-ratio: 1440 / 900; border-radius: 16px; box-shadow: 0 0 0 10px #041620, 0 40px 80px -30px rgba(10, 51, 70, .55); background: #0A3346; --k: .24; } html:not(.film) .film-frame .still { display: none; } html:not(.film) .screen-pin { transform: scale(var(--k)); } @media (min-width: 420px) { html:not(.film) .film-frame { --k: .27; } } @media (min-width: 600px) { html:not(.film) .film-frame { --k: .38; } } @media (min-width: 800px) { html:not(.film) .film-frame { --k: .52; } } @media (min-width: 1000px) { html:not(.film) .film-frame { --k: .63; } } @media (min-width: 1200px) { html:not(.film) .film-frame { --k: .76; } } @media (min-width: 1400px) { html:not(.film) .film-frame { --k: .86; } } /* portrait: the 960 x 600 layout (film.js sets the exact scale) */ @media (orientation: portrait) { html:not(.film) .film-frame { --k: .36; } } @media (orientation: portrait) and (min-width: 600px) { html:not(.film) .film-frame { --k: .58; } } @media (orientation: portrait) and (min-width: 800px) { html:not(.film) .film-frame { --k: .78; } } /* ---------- Owner HQ: the dark tokens and the chips the call story shares. The dashboard itself is a recording now (round 2b, public/assets/aegean/ demo/, made by scripts/record-ohq-demo.mjs from scripts/ohq-demo/). ---------- */ .call-story, .su, .screen-pin, .pd-frame { --o-bg: #0A3346; --o-card: #0F3F52; --o-card2: #144A5F; --o-line: rgba(226, 240, 246, .08); --o-line2: rgba(226, 240, 246, .14); --o-fg: #EAF3F6; --o-muted: #A6C2CE; --o-faint: #8FAAB6; --o-reef: #3DBFB2; --o-shallows: #5EE3D6; --o-gold: #D8B46A; --o-good: #6CD39A; --o-bad: #F08A72; --o-hi: inset 0 1px 0 rgba(255, 255, 255, .05); --o-ease: cubic-bezier(.23, 1, .32, 1); } .ohq-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: rgba(61, 191, 178, .14); color: var(--o-shallows, #5EE3D6); } .ohq-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ohq-pill.good { background: rgba(108, 211, 154, .13); color: var(--o-good, #6CD39A); } .ohq-pill.bad { background: rgba(240, 138, 114, .13); color: var(--o-bad, #F08A72); } .ohq-pill.gold { background: rgba(216, 180, 106, .14); color: var(--o-gold, #D8B46A); } .ohq-pill.faint { background: rgba(226, 240, 246, .07); color: var(--o-muted, #A6C2CE); } .ohq-mark { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-content: center; color: var(--o-shallows, #5EE3D6); background: linear-gradient(145deg, #175A70, #0C3A4F); box-shadow: inset 0 0 0 1px rgba(94, 227, 214, .22), 0 6px 16px rgba(0, 0, 0, .35); } .ohq-mark .icon { width: 20px; height: 20px; stroke-width: 2; } .ohq-mark.sm { width: 28px; height: 28px; border-radius: 9px; } .ohq-mark.sm .icon { width: 15px; height: 15px; } @media (orientation: portrait) { .screen-pin { width: 960px; height: 600px; } } /* ---------- Blocks ---------- */ /* Space between sections: two paddings meet, so 112 to 160px of shared background between one section's content and the next (Mercury's rhythm). */ .block { padding: clamp(56px, 6vw, 80px) 0; } .block > .wrap > .cards.two:first-child { margin-top: 0; } .section-head { display: grid; gap: 16px; margin-bottom: clamp(40px, 6vw, 64px); } .section-head .eyebrow { margin-bottom: -4px; } .js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .js [data-reveal].in { opacity: 1; transform: none; } /* ---------- 04 Phone answering: the call story (dark tokens) ---------- */ .call-story { position: relative; width: 100%; min-width: 0; margin: 0; justify-self: stretch; background: linear-gradient(180deg, #0E3E54, #0A3346 70%); border: 1px solid rgba(226, 240, 246, .1); border-radius: 24px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05); padding: clamp(14px, 2vw, 22px); color: var(--o-fg); font-size: 14px; line-height: 1.45; } @media (min-width: 1180px) { .call-story { max-width: 720px; } } .cs-grid { display: grid; gap: 12px; } @media (min-width: 640px) { .cs-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 14px; } } .cs-call, .cs-out { display: grid; gap: 10px; align-content: start; min-width: 0; } .cs-strip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--o-card); border: 1px solid var(--o-line); box-shadow: var(--o-hi); } .cs-strip b { display: block; font-weight: 600; font-size: 14px; } .cs-ring { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-content: center; background: rgba(216, 180, 106, .14); color: var(--o-gold); flex: none; } .cs-ring .icon { width: 17px; height: 17px; } .cs-status { display: block; font-size: 12.5px; color: var(--o-muted); } .cs-status .s-ring { display: none; } .cs-wave { display: flex; align-items: center; gap: 2px; height: 24px; margin-left: auto; flex: none; } .cs-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--o-shallows); opacity: .85; transform: scaleY(.25); animation: cs-wave 1.1s ease-in-out infinite; animation-delay: calc(var(--bar) * -.09s); } .cs-log { display: grid; gap: 7px; padding: 12px 14px; border-radius: 14px; background: rgba(15, 63, 82, .6); border: 1px solid var(--o-line); } .cs-line { font-size: 13px; color: var(--o-fg); } .cs-line span { display: inline-block; min-width: 46px; margin-right: 6px; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--o-shallows); } .cs-line.caller span { color: var(--o-gold); } .cs-fields { display: grid; gap: 6px; } .cs-fields > div { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--o-card); border: 1px solid var(--o-line); } .cs-fields dt { font-size: 12px; color: var(--o-muted); } .cs-fields dd { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 13.5px; } .cs-fields dd .icon { width: 16px; height: 16px; color: var(--o-good); stroke-width: 2.2; flex: none; } .cs-booked { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(108, 211, 154, .13); color: var(--o-good); font-weight: 650; box-shadow: inset 0 0 0 1px rgba(108, 211, 154, .3); } .cs-booked .icon { width: 18px; height: 18px; stroke-width: 2.2; } .cs-link { position: relative; height: 22px; display: flex; justify-content: center; } .cs-link::before { content: ""; width: 2px; height: 100%; background: linear-gradient(rgba(226, 240, 246, .14), var(--o-reef)); } .cs-link i { position: absolute; top: 0; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--o-shallows); box-shadow: 0 0 10px rgba(94, 227, 214, .7); opacity: 0; } .cs-cal { padding: 12px 14px; border-radius: 14px; background: var(--o-card); border: 1px solid var(--o-line); } .cs-cal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; } .cs-cal-head b { font-size: 14px; font-weight: 600; } .cs-cal-head span { font-size: 12px; color: var(--o-muted); } .cs-cal-grid { display: grid; grid-template-columns: 42px 1fr; row-gap: 5px; align-items: center; font-size: 12px; } .cs-cal-grid > span { color: var(--o-muted); } .cs-cal-grid .slot { position: relative; height: 32px; border-radius: 9px; background: rgba(10, 51, 70, .55); overflow: hidden; } .cs-cal-grid .slot i { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 10px; font-style: normal; border-radius: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-cal-grid .slot i.busy { background: rgba(226, 240, 246, .07); color: var(--o-muted); } .cs-cal-grid .slot i.new { background: rgba(61, 191, 178, .2); color: var(--o-fg); box-shadow: inset 3px 0 0 var(--o-shallows); } .cs-cal-grid .slot i.new b { font-weight: 650; margin-right: 4px; } .cs-owner { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(61, 191, 178, .14), rgba(15, 63, 82, .9)); border: 1px solid rgba(94, 227, 214, .22); } .cs-owner > div { min-width: 0; } .cs-owner b { display: block; font-size: 13px; font-weight: 600; } .cs-owner div span { display: block; font-size: 12px; color: #D2E2E9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-owner .ohq-pill { font-size: 12px; padding: 3px 9px; } .cs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 12.5px; color: var(--o-muted); } .cs-sample { font-weight: 600; color: var(--o-gold); } .cs-controls { display: flex; gap: 8px; } .cs-pause, .cs-replay { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--o-line2); background: rgba(226, 240, 246, .06); color: var(--o-fg); cursor: pointer; font-size: 13px; font-weight: 500; } .cs-pause { flex: none; width: 34px; padding: 0; } /* flex: none (round 6d): on a phone it was squeezed to 27 px */ .cs-pause .icon, .cs-replay .icon { width: 14px; height: 14px; pointer-events: none; } .cs-pause .icon { fill: currentColor; stroke: none; } .cs-pause .i-play, .call-story.paused .cs-pause .i-pause { display: none; } .call-story.paused .cs-pause .i-play { display: block; } .cs-pause:hover, .cs-replay:hover { background: rgba(226, 240, 246, .12); } html:not(.js) .cs-controls { display: none; } /* The playthrough: aegean.js adds .cs-play, then s2 ... s6 as the call goes. Without it (no JavaScript, reduced motion) the whole call shows at once. */ .js .call-story.cs-play .cs-line, .js .call-story.cs-play .cs-fields > div, .js .call-story.cs-play .cs-booked, .js .call-story.cs-play .cs-cal .slot i.new, .js .call-story.cs-play .cs-owner { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--o-ease), transform .5s var(--o-ease); } .js .call-story.cs-play:not(.s2) .cs-wave i { animation: none; transform: scaleY(.18); opacity: .4; } .js .call-story.cs-play:not(.s2) .cs-status .s-live { display: none; } .js .call-story.cs-play:not(.s2) .cs-status .s-ring { display: inline; } .js .call-story.cs-play:not(.s2) .cs-ring .icon { animation: cs-shake .7s var(--o-ease) infinite; } .js .call-story.cs-play:not(.s2) .cs-ring::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--o-gold); animation: cs-pulse 1.4s var(--o-ease) infinite; } .js .call-story.s2 .cs-line.l1, .js .call-story.s2 .cs-line.l2 { opacity: 1; transform: none; } .js .call-story.s2 .cs-line.l2 { transition-delay: .7s; } /* round 3 (Cowork 12): while it rings the transcript box says what is happening, so the first frame is never an empty box */ .cs-pre { color: var(--o-muted); } .cs-pre span { color: var(--o-gold); } .call-story:not(.cs-play) .cs-pre, .js .call-story.cs-play.s2 .cs-pre { display: none; } .js .call-story.cs-play:not(.s2) .cs-pre { opacity: 1; transform: none; } .js .call-story.s3 .cs-fields > div { opacity: 1; transform: none; } .js .call-story.s3 .cs-fields > div:nth-child(2) { transition-delay: .35s; } .js .call-story.s3 .cs-fields > div:nth-child(3) { transition-delay: .7s; } .js .call-story.s4 .cs-line.l3, .js .call-story.s4 .cs-booked { opacity: 1; transform: none; } .js .call-story.s4 .cs-booked { transition-delay: .5s; } .js .call-story.s5 .cs-cal .slot i.new { opacity: 1; transform: none; transition-delay: .6s; } .js .call-story.s5 .cs-link:first-of-type i { animation: cs-travel 1s var(--o-ease) 1 both; } .js .call-story.s6 .cs-owner { opacity: 1; transform: none; transition-delay: .6s; } .js .call-story.s6 .cs-link:last-of-type i { animation: cs-travel 1s var(--o-ease) 1 both; } .js .call-story.s6 .cs-owner::after { content: ""; position: absolute; inset: -1px; border-radius: 14px; border: 1.5px solid var(--o-shallows); opacity: 0; animation: cs-glow 1.6s var(--o-ease) .9s 2; pointer-events: none; } .call-story.paused *, .call-story.paused *::before, .call-story.paused *::after { animation-play-state: paused !important; } @keyframes cs-wave { 0%, 100% { transform: scaleY(.25); } 45% { transform: scaleY(1); } 75% { transform: scaleY(.5); } } @keyframes cs-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(6deg); } } @keyframes cs-pulse { 0% { transform: scale(.94); opacity: .8; } 100% { transform: scale(1.3); opacity: 0; } } @keyframes cs-travel { 0% { top: 0; opacity: 0; } 25% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } } @keyframes cs-glow { 0% { opacity: 0; transform: scale(1); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.03); } } @media (max-width: 420px) { .cs-wave { display: none; } } /* ---------- 03 / 09 Product cards: our own UI on Aegean surfaces ---------- */ /* No film stills and no photos (Viggo, 19 Oct): every card shows the product itself, built in HTML on a sand, shell, reef or night surface. */ .cards { display: grid; gap: 32px; } .cards.two { margin-top: clamp(40px, 6vw, 72px); } @media (min-width: 900px) { .cards.two { grid-template-columns: 1fr 1fr; gap: 24px; } } .card { display: grid; gap: 14px; align-content: start; text-decoration: none; color: inherit; } .tile { position: relative; border-radius: var(--r-tile); overflow: hidden; aspect-ratio: 4 / 3.1; isolation: isolate; } @media (max-width: 600px) { .tile { aspect-ratio: 4 / 4.4; } } .tile-surface.shell { background: radial-gradient(110% 90% at 88% 0%, rgba(94, 227, 214, .2), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(184, 137, 58, .16), transparent 58%), #FBF8F2; box-shadow: inset 0 0 0 1px var(--hair); } .tile-surface.reef { background: radial-gradient(100% 80% at 100% 0%, rgba(26, 127, 149, .42), rgba(26, 127, 149, 0) 62%), radial-gradient(90% 70% at 0% 100%, rgba(216, 180, 106, .14), transparent 60%), #0A3346; } .tile-surface.deep { background: radial-gradient(110% 70% at 100% 0%, rgba(61, 191, 178, .24), transparent 58%), radial-gradient(90% 70% at 0% 100%, rgba(216, 180, 106, .1), transparent 60%), linear-gradient(165deg, #0E4258, #0A3346 75%); } .tile-surface.sand-deep { background: radial-gradient(110% 80% at 100% 0%, rgba(94, 227, 214, .18), transparent 55%), radial-gradient(100% 80% at 0% 100%, rgba(184, 137, 58, .2), transparent 60%), #EDE4D3; box-shadow: inset 0 0 0 1px var(--hair); } .card-title { font-size: 1.125rem; font-weight: 500; margin-top: 4px; display: flex; align-items: center; gap: 8px; } .card-title .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); } a.card:hover .card-title .icon { transform: translateX(3px); } a.card .tile { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); } @media (any-hover: hover) { a.card:hover .tile { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); } } .card-line { color: var(--muted); max-width: 34em; } /* the 9 PM story, on the shell surface */ .story { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(86%, 430px); background: #fff; color: var(--ink); border-radius: 18px; padding: 16px; display: grid; gap: 10px; box-shadow: 0 30px 60px -28px rgba(20, 32, 31, .4), 0 0 0 1px rgba(8, 36, 50, .06); font-size: 14px; } .ring { display: flex; align-items: center; gap: 12px; } .ring-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-content: center; background: var(--ink); color: var(--shell); flex: none; } .ring-icon .icon { width: 16px; height: 16px; } .ring b { display: block; font-weight: 600; font-size: 15px; } .ring span { color: var(--ink-muted); font-size: 13px; } .story-between { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); font-size: 12px; } .story-between::before, .story-between::after { content: ""; height: 1px; flex: 1; background: #D6CCB8; } /* round 3 (Cowork 12): the rows still to come take no room, so the card is never an empty box under the incoming call; each grows in as it plays */ .js .story .story-step { max-height: 120px; transition: opacity .5s var(--ease), transform .5s var(--ease), max-height .5s var(--ease), margin .5s var(--ease); } .js .story[data-state="idle"] .story-missed, .js .story[data-state="idle"] .story-between, .js .story[data-state="idle"] .story-booked, .js .story[data-state="ringing"] .story-missed, .js .story[data-state="ringing"] .story-between, .js .story[data-state="ringing"] .story-booked, .js .story[data-state="missed"] .story-between, .js .story[data-state="missed"] .story-booked, .js .story[data-state="answered"] .story-booked { opacity: 0; transform: translateY(8px); max-height: 0; margin-top: -10px; overflow: hidden; } .js .story[data-state="ringing"] .ring-icon { animation: ring 1s var(--ease) infinite; } @keyframes ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } } .ui-band { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; font-weight: 600; font-size: 14px; } .ui-band .icon { width: 18px; height: 18px; flex: none; } .ui-band.booked { background: var(--booked-wash); color: var(--booked-ink); } .ui-band.missed { background: var(--missed-wash); color: var(--missed-ink); justify-content: flex-start; } .replay, .scene-pause { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(251, 248, 242, .94); color: var(--ink); cursor: pointer; font-weight: 500; font-size: .875rem; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35), 0 0 0 1px rgba(8, 36, 50, .08); } .scene-pause { width: 38px; padding: 0; justify-content: center; } /* "Play again" shows once the story has played (round 3, Cowork 12): the attribute must win over the display above */ .replay[hidden], .cs-replay[hidden] { display: none; } .replay .icon, .scene-pause .icon { width: 15px; height: 15px; pointer-events: none; } .scene-pause .icon { fill: currentColor; stroke: none; } .scene-pause .i-play { display: none; } .paused .scene-pause .i-play { display: block; } .paused .scene-pause .i-pause { display: none; } html:not(.js) .scene-pause { display: none; } /* the calendar card, on the reef surface: a booking lands, on a loop */ .float-cal { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(84%, 380px); background: #FBF8F2; color: var(--ink); border-radius: 18px; padding: 16px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); font-size: 13px; } .fc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; } .fc-head b { font-size: 16px; font-weight: 600; } .fc-head span { color: var(--ink-muted); font-size: 12px; } .fc-grid { display: grid; grid-template-columns: 46px 1fr; row-gap: 6px; align-items: center; } .fc-grid > span { color: var(--ink-muted); font-size: 12px; } .fc-slot { height: 36px; border-radius: 9px; background: #EEE7DA; position: relative; overflow: hidden; } .fc-slot i { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 12px; font-style: normal; border-radius: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fc-busy { background: #E1D7C4; color: #3F4A47; font-weight: 500; } .fc-new { background: var(--booked-wash); color: var(--booked-ink); font-weight: 500; box-shadow: inset 3px 0 0 var(--booked); animation: land 6s var(--ease) infinite; } .fc-new b { font-weight: 650; margin-right: 4px; } .fc-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--booked-ink); font-weight: 500; } .fc-foot .icon { width: 15px; height: 15px; stroke-width: 2.2; } /* round 6c (Cowork's audit: mid-fade the booking read at 2.8 to 3.7:1): it slides into its slot from the top edge and out at the bottom, clipped by the slot, never faded, so its text is at full contrast in every frame */ @keyframes land { 0%, 10% { transform: translateY(-100%); } 20%, 86% { transform: none; } 95%, 100% { transform: translateY(100%); } } .paused .fc-new, .offscreen .fc-new { animation-play-state: paused; } html:not(.js) .fc-new { animation: none; } /* ---------- 09 The two products, as products ---------- */ .tile.product-tile { aspect-ratio: auto; min-height: 560px; padding: clamp(20px, 3vw, 30px); display: grid; align-content: start; gap: 14px; } .tile-label { font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 1.45rem + 1.9vw, 2.7rem); line-height: 1.05; letter-spacing: -.03em; color: #EAF3F6; margin-bottom: 6px; } .lister-tile .tile-label { color: var(--ink); } .tile-sample { position: absolute; right: 18px; top: 22px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(10, 51, 70, .62); color: #D8B46A; box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .35); } .lister-tile .tile-sample { color: #6B4D17; background: rgba(184, 137, 58, .18); box-shadow: inset 0 0 0 1px rgba(150, 112, 47, .35); } .pc-summary { width: min(100%, 420px); background: #FBF8F2; color: var(--ink); border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6); font-size: 13.5px; } .pc-k { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-muted); } .pc-k .icon { width: 15px; height: 15px; color: var(--lagoon); } .pc-t { font-size: 22px; font-weight: 600; letter-spacing: -.02em; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13.5px; } .kv dt { color: var(--ink-muted); } .kv dd { font-weight: 500; } .pc-widget { justify-self: end; width: min(92%, 340px); margin-top: -34px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(8, 36, 50, .06); position: relative; } .widget-head { background: var(--reef); color: var(--reef-fg); display: flex; align-items: center; gap: 10px; padding: 11px 14px; } .widget-head .mono { width: 28px; height: 28px; border-radius: 50%; background: var(--lagoon); display: grid; place-content: center; font-weight: 600; font-size: .8125rem; color: #fff; } .widget-head b { display: block; font-weight: 600; font-size: 13.5px; } .widget-head small { color: var(--reef-muted); font-size: 12px; } .widget-body { background: var(--shell); padding: 12px; display: grid; gap: 7px; } .msg { max-width: 86%; padding: 8px 11px; border-radius: 13px; font-size: 13px; line-height: 1.4; } .msg.bot { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--hair); justify-self: start; border-bottom-left-radius: 4px; } .msg.user { background: var(--lagoon); color: #fff; justify-self: end; border-bottom-right-radius: 4px; } .msg.booked-msg { display: flex; gap: 6px; align-items: flex-start; background: var(--booked-wash); color: var(--booked-ink); box-shadow: none; font-weight: 500; } .msg.booked-msg .icon { width: 15px; height: 15px; margin-top: 2px; stroke-width: 2.2; } /* Lister: photos in, a full draft out, waiting for your OK */ .lr-photos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lr-photos .ph { position: relative; width: 66px; height: 80px; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #EFE9DC, #DED3BE); box-shadow: 0 10px 22px -12px rgba(20, 32, 31, .45), 0 0 0 1px rgba(8, 36, 50, .08); } .lr-in { display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--ink); background: #FBF8F2; padding: 6px 12px; border-radius: 999px; box-shadow: 0 0 0 1px var(--hair); } .lr-in .icon { width: 15px; height: 15px; color: var(--lagoon); } .lr-draft { width: 100%; background: #fff; color: var(--ink); border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px; box-shadow: 0 30px 60px -28px rgba(20, 32, 31, .5), 0 0 0 1px rgba(8, 36, 50, .06); font-size: 13px; } .lr-cat { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #7A5A22; } .lr-ready { font-size: 11px; letter-spacing: 0; text-transform: none; padding: 3px 9px; border-radius: 999px; background: #B8893A; color: #1E1608; } .lr-title { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.18; letter-spacing: -.02em; } .lr-price { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--lagoon-wash); } .lr-price .lr-k { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lagoon-hover); } .lr-price strong { font-family: var(--display); font-weight: 600; font-size: 1.4rem; line-height: 1.1; letter-spacing: -.02em; } .lr-price p { font-size: 12.5px; color: #304F5B; } .lr-specs { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; } .lr-specs dt { color: var(--ink-muted); } .lr-specs dd { font-weight: 500; } .lr-desc { color: var(--ink-muted); } .lr-actions { display: flex; gap: 8px; flex-wrap: wrap; } .lr-approve, .lr-change { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 10px; font-weight: 600; font-size: 13px; } .lr-approve { background: #B07F2F; color: #1E1608; } .lr-approve .icon { width: 15px; height: 15px; stroke-width: 2.4; } .lr-post { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; } .lr-post .soon { margin-left: 0; color: #14201F; background: rgba(184, 137, 58, .22); } .lr-copy { margin: 0; font-size: 12px; color: #4F5A57; } .lr-change { box-shadow: inset 0 0 0 1px rgba(8, 36, 50, .18); color: var(--ink); } /* ---------- 04 The founder: the live site's card, Aegean colours ---------- */ .founder .team { display: grid; gap: 26px; max-width: 720px; } .founder-quote p { font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 1.12rem + .8vw, 1.7rem); line-height: 1.3; letter-spacing: -.015em; color: var(--fg); text-wrap: balance; } .person { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; padding: 26px; background: #FBF8F2; border: 1px solid var(--hair); border-radius: 16px; box-shadow: 0 1px 2px rgba(20, 32, 31, .04), 0 20px 40px -28px rgba(20, 32, 31, .25); max-width: 620px; color: var(--ink); } .person img { width: 96px; height: 120px; object-fit: cover; border-radius: 10px; box-shadow: 0 6px 16px -8px rgba(20, 32, 31, .4); } .person > div { min-width: 0; } .person h3 { font-family: var(--display); font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; } .person .role { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: #7A5A22; margin: 6px 0 10px; } .person p:not(.role) { font-size: .9688rem; color: var(--ink-muted); margin-bottom: 12px; } .person a { font-size: .9375rem; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid #B8893A; padding-bottom: 1px; overflow-wrap: anywhere; } .person a:hover { border-bottom-color: var(--ink); } @media (max-width: 420px) { .person { grid-template-columns: 1fr; } } /* ---------- 07 Stats and the privacy trio (night) ---------- */ .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 20px; text-align: center; margin-top: clamp(48px, 7vw, 88px); } @media (min-width: 960px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat strong { display: block; text-wrap: balance; font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.75rem); font-weight: 460; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; } .stat dd > span { display: block; margin-top: 10px; color: var(--muted); font-size: 1rem; } /* The short version, one beat (round 3, Viggo 7; aegean.js). Before it plays the stats wait, lowered and clear; then they rise 120 ms apart. */ .stat strong { position: relative; } .st-v { display: inline-flex; align-items: baseline; justify-content: center; white-space: nowrap; } .js .stats.st-wait .stat { opacity: 0; transform: translateY(18px); } .js .stats.st-go .stat { transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 120ms); } .st-last { display: inline-block; animation: st-settle .55s cubic-bezier(.3, 1.45, .55, 1) both; } @keyframes st-settle { from { transform: translateY(.32em); opacity: .35; } } /* 14-day: the digits roll like an odometer */ .odo-col { display: inline-block; height: 1.05em; overflow: hidden; vertical-align: top; } .odo-strip { display: flex; flex-direction: column; transform: translateY(calc(var(--to) * -1.05em)); } .odo-strip > span { height: 1.05em; line-height: 1.05; } .js .stats.st-wait .odo-strip { transform: none; } .js .stats.st-go .odo-strip { transition: transform 1.5s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 120ms + .25s); } /* $0: the old fee is struck through, then flips to $0 */ .flip { position: relative; display: inline-grid; perspective: 400px; } .flip > span { grid-area: 1 / 1; backface-visibility: hidden; transform-origin: 50% 60%; } .flip .was { color: var(--muted); position: relative; transform: rotateX(90deg); opacity: 0; } .flip .was::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: .07em; min-height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; } .js .stats.st-wait .flip .was, .js .stats.st-go:not(.st-flipped) .flip .was { transform: none; opacity: 1; } .js .stats.st-wait .flip .now, .js .stats.st-go:not(.st-flipped) .flip .now { transform: rotateX(-90deg); opacity: 0; } .js .stats.st-go .flip .was::after { transform: scaleX(1); transition: transform .5s var(--ease) calc(var(--i, 0) * 120ms + .35s); } .js .stats.st-go .flip > span { transition: transform .45s var(--ease), opacity .3s var(--ease); } .js .stats.st-flipped .flip .now { transition-delay: .12s; } /* Day and night (round 4, Viggo: "a half circle ... shapes put together"): one drawing. A full sun travels a dotted arc, cools past the top and becomes a crescent moon (one disc masked by a second, offset one), and stars come out. aegean.js moves it (skyAt); without that it is the moon. */ .st-sky { display: block; width: 120px; height: 36px; margin: 6px auto -4px; overflow: visible; } .st-path { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 0 4.2; opacity: .75; } .st-stars circle { fill: #CFE3EA; } @media (prefers-reduced-motion: reduce) { .stats .stat, .stats .odo-strip, .stats .flip > span, .stats .flip .was::after, .st-last { transition: none !important; animation: none !important; } } html.motion-off .stats .stat, html.motion-off .stats .odo-strip, html.motion-off .stats .flip > span { transition: none !important; animation: none !important; } .trio { display: grid; gap: 28px; margin-top: clamp(80px, 10vw, 140px); } @media (min-width: 860px) { .trio { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .trio > div { padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 8px; align-content: start; } .trio .icon { width: 22px; height: 22px; color: var(--accent); } .trio p { color: var(--muted); font-size: 1rem; } .trio .text-link { color: var(--accent); } /* ---------- 08 Pricing and FAQ (shell) ---------- */ /* The live site's pricing look (Viggo, 19 Oct): a featured dark card with a Best value badge, big prices, check lists, a call per card, and a lift on hover; in the Aegean palette. */ .plans { display: grid; gap: 18px; } .plan { position: relative; display: grid; gap: 14px; align-content: start; padding: 28px; background: #fff; color: var(--ink); border: 1px solid var(--hair); border-radius: 18px; box-shadow: 0 1px 2px rgba(20, 32, 31, .05), 0 12px 28px -18px rgba(20, 32, 31, .22); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); } .plan-name { font-weight: 600; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .plan-tag { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; } .plan-tag.live { color: var(--lagoon-hover); background: var(--lagoon-wash); } .plan-tag.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lagoon); box-shadow: 0 0 0 0 rgba(19, 107, 128, .45); animation: live-dot 2.2s ease-out infinite; } .plan-tag.best { color: #E3C27E; background: rgba(216, 180, 106, .14); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .45); } .plan-label { margin-top: -8px; font-size: .875rem; color: var(--reef-muted); } .plan-price { display: flex; align-items: baseline; gap: 8px; } .plan-price strong { font-family: var(--display); font-size: clamp(2.6rem, 2.3rem + 1.1vw, 3.25rem); font-weight: 600; letter-spacing: -.035em; line-height: 1; } .plan-price span { color: var(--ink-muted); font-size: .9375rem; } .plan-setup { font-size: .875rem; font-weight: 500; color: var(--lagoon-hover); } .plan ul { display: grid; gap: 9px; padding-top: 16px; border-top: 1px dashed #D9CFBC; font-size: .9375rem; } .plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: #2F3B39; } .plan li .icon { width: 17px; height: 17px; margin-top: 3px; color: var(--booked); stroke-width: 2.2; } .plan .pill { width: 100%; margin-top: 4px; } .plan .pill-ghost { color: var(--ink); border-color: rgba(20, 32, 31, .45); } .plan .note { text-align: center; color: var(--ink-muted); } .plan-featured { background: radial-gradient(120% 70% at 100% 0%, rgba(26, 127, 149, .2), rgba(26, 127, 149, 0) 58%), linear-gradient(170deg, #0E3E54, #0A3346 80%); color: #EAF3F6; border-color: rgba(226, 240, 246, .08); box-shadow: 0 30px 60px -26px rgba(10, 51, 70, .7), inset 0 1px 0 rgba(255, 255, 255, .06); } .plan-featured .plan-price span, .plan-featured .note { color: #A6C2CE; } .plan-featured .plan-setup { color: #5EE3D6; } .plan-featured ul { border-top-color: rgba(226, 240, 246, .16); } .plan-featured li { color: #DCE9EF; } .plan-featured li .icon { color: #6CD39A; } .plan-featured :focus-visible { box-shadow: 0 0 0 4px transparent, 0 0 0 7px #EAF3F6; } @media (any-hover: hover) { .plan:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(20, 32, 31, .06), 0 28px 50px -24px rgba(20, 32, 31, .35); } } @media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; padding-top: 12px; } .plan-featured { transform: translateY(-12px); } } @media (min-width: 900px) and (any-hover: hover) { .plan-featured:hover { transform: translateY(-16px); box-shadow: 0 40px 70px -26px rgba(10, 51, 70, .8), inset 0 1px 0 rgba(255, 255, 255, .06); } } @keyframes live-dot { 0% { box-shadow: 0 0 0 0 rgba(19, 107, 128, .45); } 100% { box-shadow: 0 0 0 8px rgba(19, 107, 128, 0); } } .risk { margin-top: 22px; display: grid; gap: 22px; padding: clamp(24px, 3vw, 36px); background: #fff; border: 1px solid var(--hair); border-radius: 18px; color: var(--ink); box-shadow: 0 1px 2px rgba(20, 32, 31, .05); } .risk .eyebrow { color: #7A5A22; margin-bottom: 10px; } .risk-head h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.05rem); line-height: 1.12; letter-spacing: -.025em; } .risk-head h3 em { color: #7A5A22; } .risk-points { display: grid; gap: 18px; font-size: .9688rem; color: var(--ink-muted); } .risk-points li { display: flex; gap: 12px; align-items: flex-start; } .risk-points .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--lagoon); } .risk-points b { color: var(--ink); font-weight: 600; } @media (min-width: 800px) { .risk-points { grid-template-columns: 1fr 1fr; gap: 20px 32px; } } @media (min-width: 1000px) { .risk { grid-template-columns: .8fr 2fr; gap: 40px; align-items: start; } } .setup-offer { margin-top: 16px; padding: clamp(28px, 4vw, 48px); border-radius: 18px; background: radial-gradient(90% 80% at 100% 0%, rgba(94, 227, 214, .2), transparent 58%), var(--reef); color: var(--reef-fg); display: grid; gap: 14px; justify-items: start; border: 0; } .setup-offer .eyebrow { color: #D8B46A; margin: 0; } .setup-offer h3 { font-family: var(--display); font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.5rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; } .setup-offer h3 em { color: #D8B46A; } .setup-offer p:not(.eyebrow) { color: var(--reef-muted); max-width: 46em; font-size: 1rem; } .setup-offer .trial-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .setup-offer .pill-ghost { color: var(--reef-fg); border-color: rgba(226, 240, 246, .5); } .setup-offer :focus-visible { box-shadow: 0 0 0 4px transparent, 0 0 0 7px var(--reef-fg); } .pricing-fine { margin-top: 24px; font-size: .875rem; color: var(--muted); max-width: 60em; } .faq { display: grid; gap: 32px; margin-top: clamp(96px, 12vw, 160px); } @media (min-width: 960px) { .faq { grid-template-columns: 1fr 1.6fr; gap: 80px; } } .faq .lede { margin-top: 14px; } .faq-list { border-top: 1px solid var(--line); } .faq-list details { border-bottom: 1px solid var(--line); } .faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 0; font-size: 1.0625rem; font-weight: 500; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary .icon { width: 20px; height: 20px; color: var(--accent); transition: transform .3s var(--ease); } .faq-list details[open] summary .icon { transform: rotate(45deg); } .faq-list details p { padding: 0 0 20px; color: var(--muted); max-width: 40em; font-size: 1rem; } /* ---------- 09 Closing (night) ---------- */ .closing-head { display: grid; justify-items: center; gap: 22px; text-align: center; } .closing-head p { color: var(--muted); max-width: 36em; } /* The closing band's call button (round 6, Viggo: the live site's animated "Call our AI" button, in place of the big number). Ported from release (public/assets/redesign.css, .btn-brass.btn-call.pulse): a gold fill, two gold rings that keep rippling out from its edge 1.3 s apart, and the phone icon rings on hover. v3 tokens: our gold #B8893A and pill shape; ink on gold is 5.3:1, and on hover white on our gold ink #8A6420 is 5.35:1 (the live hover is #96702F, 4.5:1). The rings are drawn outside the button, so it is not a .pill (a pill clips its smoke to its shape). Reduced motion and Motion off: no rings, no ring (the rules at the end). */ .call-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 0 30px 0 26px; border-radius: 999px; background: var(--gold); color: var(--ink); text-decoration: none; font: 600 clamp(1.0625rem, .95rem + .5vw, 1.3125rem)/1.2 var(--sans); white-space: nowrap; box-shadow: 0 10px 28px -8px rgba(184, 137, 58, .55); transition: background-color .25s, color .25s, transform .3s var(--ease-live), box-shadow .3s; -webkit-tap-highlight-color: transparent; } .call-pill .icon { width: 1.15em; height: 1.15em; stroke-width: 2; } .call-pill .num { font-variant-numeric: tabular-nums; letter-spacing: .01em; } .call-pill::before, .call-pill::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--gold); opacity: 0; pointer-events: none; animation: call-ring 2.6s var(--ease-live) infinite; } .call-pill::after { animation-delay: 1.3s; } @media (any-hover: hover) { .call-pill:hover { background: #8A6420; color: #fff; transform: translateY(-2px); } } .call-pill:active { transform: scale(.97); } .call-pill:focus-visible { border-radius: 999px; } @media (max-width: 420px) { .call-pill { width: 100%; padding-inline: 18px; font-size: 1rem; gap: 10px; } } @keyframes call-ring { 0% { transform: scale(.96); opacity: .7; } 100% { transform: scale(1.12); opacity: 0; } } .closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } /* The rings grow to 112% of the button. Under 420px the button is full width, so they reached past the screen and the page scrolled a few pixels sideways while they played (390 x 844, 21 Oct). The band clips them at its own edges instead; nothing else in it is meant to reach outside. */ .closing { overflow-x: clip; } .big-cards { margin-top: clamp(72px, 9vw, 120px); } /* ---------- 10 Footer (night) ---------- */ /* 96px at the bottom (21 Oct 2026): the chat bubble's corner (22px + 58px, plus the home indicator). At 1024 the Motion toggle sat under the bubble at the very end of the page; phones already had their own 104px below. */ .site-footer { padding: clamp(48px, 5vw, 64px) 0 calc(96px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); } .footer-grid { display: grid; gap: 40px 24px; grid-template-columns: 1fr 1fr; } @media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.6fr repeat(5, 1fr); } } .footer-brand { grid-column: 1 / -1; display: grid; gap: 14px; align-content: start; } @media (min-width: 1100px) { .footer-brand { grid-column: auto; } } .footer-brand p { color: var(--muted); font-size: .9375rem; max-width: 22em; } .footer-call { font-weight: 500; text-decoration: none; color: var(--accent); } .footer-col h2 { font-size: .875rem; font-weight: 600; letter-spacing: 0; margin-bottom: 12px; } .footer-col ul { display: grid; gap: 2px; } .footer-col a { text-decoration: none; color: var(--muted); font-size: .9375rem; display: inline-block; padding: 5px 0; } .footer-col a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .footer-base { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: 1fr; font-size: .8125rem; color: var(--muted); } @media (min-width: 900px) { .footer-base { grid-template-columns: 1fr auto auto; align-items: center; gap: 24px; } } .footer-base p { max-width: 70em; } .motion-toggle { justify-self: start; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: .875rem; color: var(--fg); } html:not(.js) .motion-toggle { display: none; } @media (max-width: 760px) { .site-footer { padding-bottom: 104px; } } /* ---------- 02 The product, the Mercury way (night) ---------- */ /* The laptop screen hands over into this section: the film's veil turns the page night, the dashboard leaves with the page, and here is the same Owner HQ, live. Left, the headline, a rule and the accordion; right, the UI, bleeding to the right edge with its edges fading into the night. */ .pd { position: relative; padding: clamp(40px, 5vw, 88px) 0 clamp(56px, 6vw, 88px); overflow-x: clip; } /* after the hand-over the dashboard ends just under the header; Services follows it closely (round 3, Cowork 8) */ html.film .pd { padding-top: clamp(20px, 2.5vw, 40px); margin-top: calc(-1 * var(--handover-gap, 0px)); } /* round 3b (Cowork's check of 20 Oct): where Services rises under the dashboard it meets the film's veil, which is flat deep there; its own glow would start at that edge as a visible seam, so it fades in below it */ html.film:not(.blend) main > .pd { background-image: linear-gradient(#0A3346, rgba(10, 51, 70, 0) min(360px, 45vh)), radial-gradient(min(1100px, 95vw) min(760px, 80vh) at 100% 0%, rgba(26, 127, 149, .36), rgba(26, 127, 149, 0) 72%); } .pd-grid { display: grid; gap: clamp(36px, 5vw, 56px); padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; } .pd-copy { display: grid; gap: 22px; align-content: start; min-width: 0; } .pd .statement > span { display: block; } .pd-rule { border: 0; border-top: 1px solid var(--line); margin: 2px 0 0; width: 100%; } .pd-ui { position: relative; min-width: 0; } .pd-frame { position: relative; padding-bottom: 56px; } .pd-note { font-size: .8125rem; color: var(--muted); margin-top: 14px; position: relative; } /* Side by side from 900 px (round 4c; it was 1180, and on an iPad in landscape the open step and its recording were a screen apart): the steps left, the recording right, sticky, so it stays in view while the steps play through. Below 900 the player sits in the open step instead (clips.js, aegean.js inlineCard). */ @media (min-width: 900px) { .pd-grid { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); align-items: start; } .pd-copy { padding-top: 12px; } .pd-ui { position: sticky; top: calc(var(--header-total) + 24px); } .pd-frame { padding: 0 0 24px; } } /* 900 to 1099: the column is too narrow for the wide recording, so the compact one, sized to fit the window under the header with its note */ @media (min-width: 900px) and (max-width: 1099.98px) { .pd-frame { width: min(100%, calc((100vh - var(--header-total) - 132px) * 1280 / 1440)); width: min(100%, calc((100svh - var(--header-total) - 132px) * 1280 / 1440)); } } @media (min-width: 1180px) { .pd-grid { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); padding-right: 0; padding-left: max(var(--gutter), calc((100vw - 1240px) / 2)); max-width: none; } .pd-frame { padding: 0 0 48px; } .pd-frame .clips { border-radius: 20px 0 0 20px; } /* Mercury's soft edges: the UI runs to the right edge of the screen and fades into the night at the top, the right and the bottom. The fades cover the recording's own margin, not its text. */ .clips { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%), linear-gradient(to right, #000 calc(100% - 18px), transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%), linear-gradient(to right, #000 calc(100% - 18px), transparent 100%); mask-composite: intersect; } } @media (min-width: 1280px) { .pd-grid { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); } } @media (max-width: 1179px) { .clips { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%); } } /* Round 2d: touch. Hover effects answer any pointer that can hover (a mouse, or an iPad's trackpad: any-hover, not the device). A finger gets its own, per tap (aegean.js, pointerType "touch"): pills press in with a ripple from the tap and the smoke bursts (smoke.js); cards lift and settle; steps, chips and links press in. */ .pill:active, .pill.is-pressed { transform: translateY(-1px) scale(.98); } .pill.is-pressed { box-shadow: 0 0 0 4px rgba(94, 227, 214, .28); } .tap-ripple { position: absolute; z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(255, 255, 255, .42); pointer-events: none; animation: tap-ripple .65s var(--ease) forwards; } .pill-ghost .tap-ripple { background: rgba(19, 107, 128, .22); } @keyframes tap-ripple { to { transform: scale(22); opacity: 0; } } .plan.is-pressed { transform: translateY(-4px) scale(.995); box-shadow: 0 2px 4px rgba(20, 32, 31, .06), 0 28px 50px -24px rgba(20, 32, 31, .35); transition-duration: .15s; } @media (min-width: 900px) { .plan-featured.is-pressed { transform: translateY(-16px) scale(.995); } } a.card.is-pressed .tile { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); } .acc-btn.is-pressed, .chip.is-pressed, .text-link.is-pressed, .acc-play.is-pressed { transform: scale(.98); } .clip-toggle.is-pressed, .cs-pause.is-pressed, .cs-replay.is-pressed { transform: scale(.94); } @media (prefers-reduced-motion: reduce) { .tap-ripple { display: none; } } html.motion-off .tap-ripple { display: none; } /* Round 2c: CSS loops (rings, pulses, live dots, waves) wait in any section that is off screen (aegean.js toggles .is-off), so nothing below the fold moves before the visitor gets there. */ .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; } /* ---------- The recorded demos (round 2b, clips.js): Owner HQ as screen recordings, one per accordion item, cross-fading with a soft blur like Mercury's views. "wide" recordings (16:9) from 1280 px windows, "compact" (8:9) below. The poster is underneath; the video shows once it plays. */ .clips { position: relative; aspect-ratio: 1280 / 1440; border-radius: 20px; overflow: hidden; background: #0A3346; box-shadow: 0 0 0 1px rgba(226, 240, 246, .1), 0 40px 90px -40px rgba(0, 0, 0, .7); } @media (min-width: 760px) and (max-width: 899.98px), (min-width: 1100px) { .clips { aspect-ratio: 2240 / 1260; } } .clip { position: absolute; inset: 0; opacity: 0; filter: blur(8px); transition: opacity .45s var(--ease), filter .45s var(--ease); pointer-events: none; } .clip.on { opacity: 1; filter: none; z-index: 2; } /* round 3 (Cowork 10): the outgoing recording stays whole underneath, paused on its frame, until the incoming one has faded in over it */ .clip.under { opacity: 1; filter: none; z-index: 1; transition: none; } .clip-poster, .clip-poster img, .clip video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .clip video { opacity: 0; transition: opacity .3s var(--ease); } .clip.has-video video { opacity: 1; } .clip[data-mode="frames"] video { display: none; } /* Pause and Play: a round glass button on the recording */ .clips-wrap { position: relative; } .clip-toggle { position: absolute; right: 30px; bottom: 44px; z-index: 3; display: inline-grid; place-content: center; width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid rgba(226, 240, 246, .22); background: rgba(10, 51, 70, .78); color: #EAF3F6; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .2s var(--ease), transform .2s var(--ease); } .clip-toggle:hover { background: rgba(10, 51, 70, .92); transform: translateY(-1px); } .clip-toggle:focus-visible { outline: 2px solid #5EE3D6; outline-offset: 2px; } .clip-toggle .icon { width: 15px; height: 15px; fill: currentColor; stroke: none; pointer-events: none; } .clip-toggle .i-play, .clip-toggle.is-paused .i-pause { display: none; } .clip-toggle.is-paused .i-play { display: block; } .clip-toggle[hidden], html:not(.js) .clip-toggle { display: none; } /* bottom left: the chat bubble has the bottom right */ @media (prefers-reduced-motion: reduce) { .clip, .clip video { transition: none; } } html.motion-off .clip, html.motion-off .clip video { transition: none; } .pd .products { display: grid; gap: 18px 40px; margin-top: clamp(28px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9375rem; } .pd .products h3 { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .pd .products .panel-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .pd .products strong { font-family: var(--display); font-weight: 600; font-size: 2rem; line-height: 1.1; color: var(--fg); letter-spacing: -.02em; } .pd .products .text-link { padding: 0; } @media (min-width: 760px) { .pd .products { grid-template-columns: repeat(3, auto); justify-content: start; } } /* ---------- Mercury's accordion (product section and the rows) ---------- */ .acc { border-top: 1px solid var(--line); } .pd .acc { border-top: 0; } .acc-item { border-bottom: 1px solid var(--line); } .acc-h { margin: 0; font: inherit; } .acc-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 14px 0; background: none; border: 0; color: var(--muted); font: 500 1.0625rem/1.35 var(--sans); letter-spacing: -.005em; text-align: left; cursor: pointer; transition: color .25s var(--ease); -webkit-tap-highlight-color: transparent; } .acc-btn:hover, .acc-item.on .acc-btn { color: var(--fg); } .acc-item.on .acc-btn { font-weight: 600; } .acc-btn .soon { margin-left: auto; } .acc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .3s var(--ease), box-shadow .3s var(--ease); } .acc-item.on .acc-dot { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } html:not(.js) .acc-dot { background: var(--accent); box-shadow: none; } .acc-panel > div { display: grid; gap: 10px; justify-items: start; padding: 0 0 20px 20px; } .acc-panel > div > p { color: var(--muted); max-width: 34em; font-size: 1rem; margin: 0; } .acc-panel > div > .text-link { padding: 0; } /* a narrow column (1180): the link wraps before the number, never inside it or before its icon (round 2d) */ .acc-panel > div > .text-link { flex-wrap: wrap; row-gap: 2px; } .tel-end { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .acc-js .acc-item.on .acc-panel > div { animation: acc-in .45s var(--ease) both; } /* Round 4c: the card in the open step (aegean.js inlineCard), under its paragraph. The step's text eases in; the card itself does not blink. */ .acc-js .acc-item.on .acc-panel > div.acc-holds { animation: none; } .acc-js .acc-item.on .acc-panel > div.acc-holds > :not(.acc-card) { animation: acc-in .45s var(--ease) both; } .acc-card { justify-self: stretch; width: 100%; margin: 6px 0 4px; } .acc-card.pd-frame { padding: 0; } .acc-card.mx-card { min-height: 0; } .acc-inline .pd-ui { display: none; } /* the steps change height as the card moves; the page never scrolls to follow them */ .acc-inline .acc { overflow-anchor: none; } @keyframes acc-in { from { opacity: 0; transform: translateY(-4px); } } /* Round 2d: the accordion plays through (aegean.js autoplay). A thin bar under the open step fills over its time; Pause / Play sits under the list. */ .acc-h { position: relative; } .acc-bar { display: none; pointer-events: none; } /* round 6d: a tap at the step's bottom edge reaches the step */ .acc-auto .acc-item.on .acc-bar { display: block; position: absolute; left: 20px; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 10%, transparent); overflow: hidden; } .acc-auto .acc-item.on .acc-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; } .acc-auto .acc-item.on .acc-panel > div { padding-top: 10px; } .acc-play { justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 7px 13px 7px 11px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--muted); font: 500 .8125rem/1 var(--sans); cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease); } .acc-play:hover { color: var(--fg); border-color: var(--fg); } .acc-play:focus-visible { outline: 2px solid var(--gold, #B8893A); outline-offset: 3px; } .acc-play .icon { width: 12px; height: 12px; fill: currentColor; stroke: none; } .acc-play .i-play, .acc-play.is-paused .i-pause { display: none; } .acc-play.is-paused .i-play { display: block; } .acc-play[hidden] { display: none; } .acc-last { display: flex; align-items: center; gap: 10px; padding: 16px 0 4px; color: var(--fg); font-weight: 600; text-decoration: none; } .acc-last .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); } .acc-last:hover .icon { transform: translateX(3px); } /* ---------- Mercury rows: a big card and a headline with the accordion ---------- */ .mx-row { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; } @media (min-width: 1024px) { .mx-row { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } .mx-row.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); } .mx-row.flip > .mx-card { order: 2; } } .mx { padding: clamp(64px, 8vw, 112px) 0; } /* the call needs the room: its card takes the wider column */ @media (min-width: 1024px) { #phone .mx-row { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); } } .mx-copy { display: grid; gap: 18px; align-content: center; min-width: 0; } .mx-copy .eyebrow { margin-bottom: -6px; } .mx-lede { color: var(--muted); max-width: 32em; } .mx-card { position: relative; isolation: isolate; border-radius: 28px; padding: clamp(18px, 3.4vw, 44px); min-height: clamp(440px, 46vw, 620px); display: grid; place-items: center; overflow: hidden; } .mx-reef { background: radial-gradient(100% 80% at 100% 0%, rgba(26, 127, 149, .42), rgba(26, 127, 149, 0) 64%), radial-gradient(90% 70% at 0% 100%, rgba(216, 180, 106, .1), transparent 60%), #0A3346; } .mx-shell { background: radial-gradient(110% 90% at 88% 0%, rgba(94, 227, 214, .2), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(184, 137, 58, .16), transparent 58%), #FBF8F2; box-shadow: inset 0 0 0 1px var(--hair); } .mx-sand { background: radial-gradient(110% 80% at 100% 0%, rgba(94, 227, 214, .18), transparent 55%), radial-gradient(100% 80% at 0% 100%, rgba(184, 137, 58, .2), transparent 60%), #EDE4D3; box-shadow: inset 0 0 0 1px var(--hair); } .mx-card .call-story { max-width: 640px; } @media (max-width: 600px) { .mx-card { border-radius: 22px; padding: 14px; min-height: 0; } } /* the live site's rings, behind the call (ring-out) */ .rings { position: absolute; left: 50%; top: 50%; width: min(78%, 560px); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; } .rings i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(216, 180, 106, .38); opacity: 0; animation: ring-out 7s linear infinite; } .rings i:nth-child(2) { animation-delay: 2.3s; } .rings i:nth-child(3) { animation-delay: 4.6s; } .mx-card.offscreen .rings i { animation-play-state: paused; } @keyframes ring-out { 0% { transform: scale(.55); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } } /* ---------- Website chat: the live site's "pick a business" ---------- */ .cw { display: grid; gap: 14px; width: min(100%, 520px); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { min-height: 40px; padding: 6px 15px; border-radius: 999px; border: 1px solid rgba(20, 32, 31, .24); background: rgba(255, 255, 255, .55); color: var(--ink); font: 500 .875rem/1.2 var(--sans); cursor: pointer; transition: transform .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); -webkit-tap-highlight-color: transparent; } @media (any-hover: hover) { .chip:hover { transform: translateY(-1px); border-color: var(--ink); } } .chip[aria-pressed="true"] { background: var(--ink); color: #FBF8F2; border-color: var(--ink); } .chatwin { position: relative; background: #FBF8F2; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(10, 51, 70, .4), 0 0 0 1px rgba(20, 32, 31, .08); overflow: hidden; } .chatwin-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #EEE6D8; background: #fff; } .monogram { width: 32px; height: 32px; border-radius: 50%; display: grid; place-content: center; background: #0A3346; color: #fff; font-weight: 600; font-size: .875rem; flex: none; } .chatwin-top strong { display: block; font-size: .9375rem; font-weight: 600; color: var(--ink); } .chatwin-top div span { display: block; font-size: .8125rem; color: #4F5A57; } .tag { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .chatwin-top .tag { margin-left: auto; } .tag-live { color: #0F5A6C; background: rgba(19, 107, 128, .1); } .tag-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #136B80; animation: live-dot 2.2s ease-out infinite; } /* round 5: the body and the space under it are one surface, the window's own (a band of white showed under the chat on a phone, and dimming the body for the lead-sheet step made another) */ .chat-body { display: grid; gap: 8px; padding: 14px; min-height: 252px; align-content: start; background: transparent; } .msg { max-width: 86%; margin: 0; padding: 9px 12px; border-radius: 14px; font-size: .875rem; line-height: 1.42; transition: opacity .5s var(--ease), transform .6s var(--ease), box-shadow .3s var(--ease); } .msg.assistant { justify-self: start; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px #E8DFCE; border-bottom-left-radius: 4px; } .msg.visitor { justify-self: end; background: #136B80; color: #fff; border-bottom-right-radius: 4px; } .js .msg.wait, .js .record.wait { opacity: 0; transform: translateY(8px); } .chat-body { position: relative; } /* the chat's first frame, while it waits for the visitor (round 3b) */ .chat-pre { position: absolute; left: 14px; right: 14px; top: 14px; margin: 0; font-size: .875rem; line-height: 1.42; color: #4F5A57; } .chat-pre span { margin-right: 6px; color: #8A6420; font-weight: 600; font-variant-numeric: tabular-nums; } .msg.typing { position: absolute; left: 14px; display: inline-flex; gap: 4px; align-items: center; padding: 12px 13px; } .msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: #7C8986; animation: typing-dot 1.1s var(--ease) infinite; } .msg.typing i:nth-child(2) { animation-delay: .15s; } .msg.typing i:nth-child(3) { animation-delay: .3s; } @keyframes typing-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } } .record { margin: 0 14px 14px; padding: 10px 12px; border-radius: 12px; background: #EAF3F6; box-shadow: inset 0 0 0 1px #CFE3EA; font-size: .8125rem; color: var(--ink); transition: opacity .5s var(--ease), transform .6s var(--ease), box-shadow .3s var(--ease); } .record-head { display: flex; gap: 6px; align-items: center; font-weight: 600; color: #1F6B44; margin-bottom: 6px; } .record-head .icon { width: 15px; height: 15px; } .record dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; } .record dt { color: #4F5A57; font-size: .75rem; } .record dd { margin: 0; font-weight: 600; } .install { display: none; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 14px 14px; padding: 10px 12px; border-radius: 12px; background: #0A3346; color: #EAF3F6; font-size: .75rem; } .install code { font: 500 .75rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #5EE3D6; word-break: break-all; } .install span { color: #A6C2CE; } .js .cw[data-focus="book"] .msg:not(.book), .js .cw[data-focus="sheet"] .chat-body, .js .cw[data-focus="install"] .chat-body, .js .cw[data-focus="install"] .record { opacity: .42; } .js .cw[data-focus="book"] .msg.book { box-shadow: 0 0 0 1px #E8DFCE, 0 0 0 4px rgba(19, 107, 128, .22); } .js .cw[data-focus="sheet"] .record { box-shadow: inset 0 0 0 1px #CFE3EA, 0 0 0 4px rgba(31, 107, 68, .2); } .js .cw[data-focus="install"] .install { display: flex; } .cw-note { font-size: .8125rem; color: #4F5A57; } /* ---------- Lister: photos in, a draft out, priced from sold comps ---------- */ .lq { width: min(100%, 560px); background: #FBF8F2; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(10, 51, 70, .45), 0 0 0 1px rgba(20, 32, 31, .08); overflow: hidden; color: var(--ink); } .lq-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #EEE6D8; } .lq-top b { font-weight: 600; } .lq-chip { margin-left: auto; font-size: .75rem; font-weight: 600; color: #6B4D17; background: rgba(184, 137, 58, .18); padding: 3px 10px; border-radius: 999px; } .lq-body { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 14px; } .lq-photos { display: grid; gap: 8px; align-content: start; } .lq-photos .ph { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; background: linear-gradient(160deg, #EFE9DC, #DED3BE); overflow: hidden; box-shadow: 0 8px 18px -10px rgba(20, 32, 31, .4); } /* round 3 (Viggo 5): the item's real photos, not colour blocks */ .ph picture, .ph img { display: block; width: 100%; height: 100%; object-fit: cover; } .lq-photos .ph { aspect-ratio: 4 / 5; } .ph-3 img, .ph-tag img { object-position: 50% 35%; } .lq-photos p { display: flex; gap: 4px; align-items: center; margin: 0; font-size: .75rem; color: #4F5A57; } .lq-photos p .icon { width: 13px; height: 13px; } .lq-draft { display: grid; gap: 8px; align-content: start; min-width: 0; } .lq-cat { margin: 0; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: #4F5A57; font-weight: 600; } .lq-title { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.125rem; line-height: 1.22; letter-spacing: -.02em; } .lq-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 0; font-size: .8125rem; } .lq-specs dt { color: #4F5A57; font-size: .6875rem; } .lq-specs dd { margin: 0; font-weight: 600; } .lq-desc { margin: 0; font-size: .8125rem; color: #3E4846; } .lq-price { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px 14px; border-radius: 12px; background: #EAF3F6; box-shadow: inset 0 0 0 1px #CFE3EA; } .lq-range { margin: 0; } .lq-range span { display: block; font-size: .6875rem; color: #3A5560; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .lq-range strong { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; } .lq-comps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: .75rem; } .lq-comps li { display: flex; justify-content: space-between; gap: 8px; color: #3E4846; } .lq-comps b { color: var(--ink); } .lq-actions { grid-column: 1 / -1; display: flex; gap: 8px; } .lq-approve { padding: 8px 18px; border-radius: 999px; background: #136B80; color: #fff; font-weight: 600; font-size: .875rem; } .lq-ask { padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(20, 32, 31, .28); font-size: .875rem; } /* round 6c (Cowork's audit: at .42 the parts not in focus read at 1.9 to 2.6:1): they stay readable, a little faded and with less colour */ .lq-photos, .lq-draft, .lq-price, .lq-actions, .lq-post { transition: opacity .4s var(--ease), filter .4s var(--ease), box-shadow .3s var(--ease); } /* round 4: after Approve, posted to eBay (Coming soon), copy-ready elsewhere */ .lq-post { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid #EEE6D8; } .lq-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: .8125rem; font-weight: 600; color: var(--ink); } .lq-status .soon { margin-left: 0; color: #14201F; background: rgba(184, 137, 58, .22); } .lq-dot { width: 9px; height: 9px; border-radius: 50%; background: #9AA6A3; flex: none; } .lq-s1, .lq-s2 { display: none; } .lq[data-post="posting"] .lq-s0, .lq[data-post="live"] .lq-s0, .lq[data-post="live"] .lq-s1 { display: none; } .lq[data-post="posting"] .lq-s1, .lq[data-post="live"] .lq-s2 { display: inline; } .lq[data-post="posting"] .lq-dot { background: #136B80; animation: lq-ping 1s var(--ease) infinite; } .lq[data-post="live"] .lq-dot { background: #1F7A4D; box-shadow: 0 0 0 3px rgba(31, 122, 77, .18); } @keyframes lq-ping { 50% { opacity: .35; } } .lq-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: .75rem; color: #4F5A57; } .lq-copy b { font-weight: 600; color: var(--ink); padding: 3px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(20, 32, 31, .22); background: #fff; } .js .lq.lq-anim[data-post="live"] .lq-copy b { animation: lq-rise .5s var(--ease) both; } .js .lq.lq-anim[data-post="live"] .lq-copy b:nth-of-type(2) { animation-delay: .12s; } .js .lq.lq-anim[data-post="live"] .lq-copy b:nth-of-type(3) { animation-delay: .24s; } .js .lq.lq-anim[data-post="live"] .lq-copy b:nth-of-type(4) { animation-delay: .36s; } .js .lq[data-focus="photos"] :is(.lq-draft, .lq-price, .lq-actions), .js .lq[data-focus="draft"] :is(.lq-photos, .lq-price, .lq-actions), .js .lq[data-focus="price"] :is(.lq-photos, .lq-draft, .lq-actions), .js .lq[data-focus="photos"] .lq-post, .js .lq[data-focus="draft"] .lq-post, .js .lq[data-focus="price"] .lq-post, .js .lq[data-focus="approve"] :is(.lq-photos, .lq-draft, .lq-price, .lq-post), .js .lq[data-focus="post"] :is(.lq-photos, .lq-draft, .lq-price) { opacity: .72; filter: saturate(.35); } .js .lq[data-focus="price"] .lq-price { box-shadow: inset 0 0 0 1px #CFE3EA, 0 0 0 4px rgba(19, 107, 128, .2); } .js .lq[data-focus="approve"] .lq-approve { animation: btn-pulse 2.2s var(--ease) infinite; } @keyframes btn-pulse { 0% { box-shadow: 0 0 0 0 rgba(19, 107, 128, .45); } 100% { box-shadow: 0 0 0 12px rgba(19, 107, 128, 0); } } /* Round 2d: the draft builds itself as the accordion plays (aegean.js adds .lq-anim on each step): photos arrive, the draft writes itself, the sold prices fill in, Approve is pressed. */ @keyframes lq-rise { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes lq-write { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes lq-press { 0%, 100% { transform: none; } 40% { transform: scale(.94); box-shadow: 0 0 0 6px rgba(19, 107, 128, .22); } } .js .lq.lq-anim[data-focus="photos"] .lq-photos .ph { animation: lq-rise .55s var(--ease) both; } .js .lq.lq-anim[data-focus="photos"] .lq-photos .ph-2 { animation-delay: .35s; } .js .lq.lq-anim[data-focus="photos"] .lq-photos .ph-3 { animation-delay: .7s; } .js .lq.lq-anim[data-focus="draft"] :is(.lq-cat, .lq-title, .lq-specs, .lq-desc) { animation: lq-write .7s var(--ease) both; } .js .lq.lq-anim[data-focus="draft"] .lq-title { animation-delay: .3s; } .js .lq.lq-anim[data-focus="draft"] .lq-specs { animation-delay: .9s; } .js .lq.lq-anim[data-focus="draft"] .lq-desc { animation-delay: 1.5s; } .js .lq.lq-anim[data-focus="price"] .lq-comps li { animation: lq-rise .45s var(--ease) both; } .js .lq.lq-anim[data-focus="price"] .lq-comps li:nth-child(2) { animation-delay: .35s; } .js .lq.lq-anim[data-focus="price"] .lq-comps li:nth-child(3) { animation-delay: .7s; } .js .lq.lq-anim[data-focus="price"] .lq-range { animation: lq-rise .5s var(--ease) 1.1s both; } .js .lq .lq-approve.is-pressed { animation: lq-press .5s var(--ease) 1; } @media (max-width: 480px) { .lq-body { grid-template-columns: 76px minmax(0, 1fr); } .lq-specs { grid-template-columns: 1fr; } } /* ---------- How it works: the live site's steps, as a checklist ---------- */ /* Round 2c (Viggo: "a bit off, I think we can make that section look better"): one calm night card, no texture and no gold bars. A vertical timeline: each step a row on a hairline, its marker on a connector line; a done step's marker turns shallows and its tick draws in. Day labels are small muted chips; a thin track fills with the steps; "Your assistant is live" ends it as a pill. The ticks play when the card is in view. */ .mx-night { background: radial-gradient(90% 70% at 100% 0%, rgba(26, 127, 149, .45), rgba(26, 127, 149, 0) 62%), #0A3346; box-shadow: inset 0 0 0 1px rgba(226, 240, 246, .07); } #how .mx-card { min-height: 0; place-items: stretch; padding: clamp(16px, 3vw, 32px); } .su { width: 100%; max-width: 560px; justify-self: center; background: var(--o-card); border: 1px solid rgba(226, 240, 246, .09); border-radius: 20px; padding: clamp(18px, 2.6vw, 26px); color: var(--o-fg); box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .6), var(--o-hi); font-size: 14px; -webkit-font-smoothing: antialiased; } .su-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .su-top b { font-weight: 600; font-size: 15px; } .su-chip { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--o-gold); background: rgba(216, 180, 106, .12); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .3); padding: 3px 10px; border-radius: 999px; } .su-bar { height: 3px; border-radius: 3px; background: rgba(226, 240, 246, .1); margin-bottom: 6px; overflow: hidden; } .su-bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 1)); background: var(--o-shallows); transition: transform .9s var(--ease); } .su[data-step="0"] .su-bar i { --p: 0; } .su[data-step="1"] .su-bar i { --p: .3333; } .su[data-step="2"] .su-bar i { --p: .6667; } .su-steps { display: grid; margin: 0; padding: 0; list-style: none; } .su-steps li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--o-line); } .su-steps li:first-child { border-top: 0; } /* the connector, from this marker to the next, filling as the step is done */ .su-steps li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 46px; bottom: -10px; width: 2px; border-radius: 2px; background: rgba(226, 240, 246, .12); } .su-steps li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 46px; bottom: -10px; width: 2px; border-radius: 2px; background: var(--o-shallows); transform: scaleY(0); transform-origin: 50% 0; transition: transform .7s var(--ease) .2s; } .su-mark { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-content: center; background: var(--o-card); box-shadow: inset 0 0 0 1.5px rgba(226, 240, 246, .26); color: #0A3346; transition: background-color .35s var(--ease), box-shadow .35s var(--ease); } .su-mark .icon { width: 15px; height: 15px; stroke-width: 2.6; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .45s var(--ease) .15s; } .su-steps b { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.35; padding-top: 3px; } .su-steps li > div > span { display: block; font-size: 12.5px; color: var(--o-muted); margin-top: 2px; } .su-steps time { justify-self: end; margin-top: 3px; font-size: 11.5px; font-weight: 500; color: var(--o-muted); background: rgba(226, 240, 246, .06); box-shadow: inset 0 0 0 1px rgba(226, 240, 246, .08); padding: 2px 9px; border-radius: 999px; white-space: nowrap; } .su[data-step="1"] li[data-n="1"] .su-mark, .su[data-step="2"] li:is([data-n="1"], [data-n="2"]) .su-mark, .su[data-step="3"] li .su-mark { background: var(--o-shallows); box-shadow: none; } .su[data-step="1"] li[data-n="1"] .su-mark .icon, .su[data-step="2"] li:is([data-n="1"], [data-n="2"]) .su-mark .icon, .su[data-step="3"] li .su-mark .icon { stroke-dashoffset: 0; } .su[data-step="1"] li[data-n="1"]::after, .su[data-step="2"] li:is([data-n="1"], [data-n="2"])::after, .su[data-step="3"] li::after { transform: scaleY(1); } .su-live { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 6px 13px 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--o-good); background: rgba(108, 211, 154, .1); box-shadow: inset 0 0 0 1px rgba(108, 211, 154, .28); opacity: 0; transform: translateY(4px); transition: opacity .5s var(--ease) .35s, transform .5s var(--ease) .35s; } .su[data-step="3"] .su-live { opacity: 1; transform: none; } .su-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--o-good); animation: live-dot-good 2.2s ease-out infinite; } @media (max-width: 480px) { .su-steps li { grid-template-columns: 28px minmax(0, 1fr); } .su-steps time { grid-column: 2; justify-self: start; margin-top: 0; } .su-steps li:not(:last-child)::before, .su-steps li:not(:last-child)::after { top: 46px; } } @keyframes live-dot-good { 0% { box-shadow: 0 0 0 0 rgba(108, 211, 154, .5); } 100% { box-shadow: 0 0 0 8px rgba(108, 211, 154, 0); } } /* ---------- The live site's animations, ported (round 2) ---------- */ /* the hero headline rises line by line (redesign.js revealLines) */ .hero-copy h1 .hl { display: inline-block; overflow: hidden; padding: 0 .06em .1em; margin: 0 -.06em -.1em; vertical-align: top; } .hero-copy h1 .hl > span { display: inline-block; } .js:not(.motion-off) .hero-copy h1 .hl > span { animation: hl-in 1s cubic-bezier(.22, 1, .36, 1) both; } .js:not(.motion-off) .hero-copy h1 .hl + .hl > span { animation-delay: .12s; } @keyframes hl-in { from { transform: translateY(108%); opacity: .2; } } /* buttons lift on hover; the call buttons ring and pulse */ @media (any-hover: hover) { .pill:hover { transform: translateY(-2px); } } .btn-call:hover .icon { animation: ring-shake .7s var(--ease) 1; } .pulse { animation: pulse-ring 2.6s var(--ease) infinite; } /* round 3 (Viggo: nothing in the hero moves before the first scroll): the hero's call pill starts its pulse once the visitor has scrolled */ html.film:not(.has-scrolled) .hero .pulse { animation: none; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(184, 137, 58, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(184, 137, 58, 0); } } @keyframes ring-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(6deg); } } /* the nav underline */ .nav a { position: relative; } .nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: currentColor; opacity: .55; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav a:hover::after { transform: scaleX(1); } /* groups rise one after another, 90 ms apart (translate, so a card's own transform, like the featured plan's lift, is left alone) */ .js [data-reveal-group] > * { transition: opacity .7s var(--ease) calc(var(--i, 0) * 90ms), translate .8s var(--ease) calc(var(--i, 0) * 90ms), transform .4s var(--ease-out), box-shadow .4s var(--ease-out); } .js [data-reveal-group]:not(.in) > :not([data-reveal]) { opacity: 0; translate: 0 18px; } /* ---------- Reduced motion and Motion off ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; } .transition-theme { transition: none; } .js [data-reveal], .js [data-reveal-group] > * { opacity: 1; transform: none; translate: none; } .scene-pause { display: none; } } html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation: none !important; transition-duration: 0s !important; } html.motion-off [data-reveal], html.motion-off [data-reveal-group] > * { opacity: 1 !important; transform: none !important; translate: none !important; } html.motion-off .scene-pause { display: none; } @media (prefers-reduced-transparency: reduce) { .site-header.is-solid, html:not(.film) .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* Round 6d (Cowork, after Viggo's reference video on phone layouts): on a touch screen every link, button and chip can be hit across at least 44 x 44 px. The small pills, the chips and the Motion button grow to 44; footer links get 44 px rows. Everything else keeps its look and gets a clear hit box round it (::after, 45 px each way, a pixel spare for rounding, and never smaller than the element), so the text and the line rhythm do not move. A mouse or trackpad (pointer: fine) keeps the desktop density: nothing here applies (test/aegean-in-view.test.js). Last in the file, so it wins over each element's own size. */ @media (pointer: coarse) { .pill-sm, .motion-toggle { height: 44px; } .chip { min-height: 44px; } .footer-col a { padding: 10px 0; min-width: 44px; } .brand, .text-link, .footer-call, .acc-play, .cs-pause, .cs-replay, .founder a { position: relative; } :is(.brand, .text-link, .footer-call, .acc-play, .cs-pause, .cs-replay, .founder a, .replay, .scene-pause, .clip-toggle)::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22.5px)); } }