/* ============================================================ jeanius.ai v4 · prototype: the hero (your counter, in depth) and card 02 (the phone). Phone first. Brand kept: emerald / off-white / icy blue / melon, the logo, Poppins + Instrument Serif italic + JetBrains Mono. ============================================================ */ /* self-hosted (latin subset, SIL OFL): no third party sees visitors, and the hero headline wraps the same on first paint */ @font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("assets/fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("assets/fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } :root { --ink: #F6F5F3; --ink2: rgba(246,245,243,.74); --ink3: rgba(246,245,243,.5); --ice: #A0D4E4; --ice3: #C6E6F0; --melon: #FC6C85; --e900: #001A00; --e800: #002500; --night: #0b0c08; --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --serif: "Instrument Serif", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --ease: cubic-bezier(.22, 1, .36, 1); --gut: clamp(20px, 4vw, 56px); --S: var(--stage, 100svh); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overflow-x: clip; background: var(--night); color-scheme: dark; } a, button, label, summary { touch-action: manipulation; } body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--night); overflow-x: clip; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } h1, h2, p, ol, figure { margin: 0; } ol { padding: 0; list-style: none; } em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; } a { color: inherit; } .mono { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; } .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } :focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 6px; } .skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ice); color: var(--e900); padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; } .skip:focus { top: 12px; } .wrap { max-width: 1400px; margin: 0 auto; padding-inline: var(--gut); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 999px; font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background .26s var(--ease), box-shadow .26s var(--ease); } .btn .ic { transition: transform .26s var(--ease); } .btn:hover .ic { transform: translateX(3px); } .btn-ice { background: var(--ice); color: var(--e900); } .btn-ice:hover { background: var(--ice3); box-shadow: 0 12px 40px -12px rgba(160,212,228,.6); } .btn-sm { height: 40px; padding: 0 18px; font-size: 14px; } /* ---------- nav: logo, links, and the one ask, always there ---------- */ .nav { position: fixed; z-index: 50; top: 12px; left: 12px; right: 12px; height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 20px; border-radius: 999px; background: rgba(10, 12, 8, .62); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(246,245,243,.09); max-width: 1180px; margin: 0 auto; } .nav-logo img { height: 21px; width: auto; } .nav-links { display: flex; gap: 2px; margin-left: auto; } .nav-links a { font-size: 14px; font-weight: 500; text-decoration: none; padding: 9px 13px; border-radius: 999px; color: var(--ink2); } .nav-links a:hover { color: var(--ink); background: rgba(246,245,243,.07); } .nav .btn { margin-left: 4px; } .show-s { display: none; } /* ---------- the stage: one sticky screen per scene ---------- */ .stage { position: relative; height: var(--S); overflow: hidden; isolation: isolate; } html.motion .stage { position: sticky; top: 0; } .grain { position: absolute; inset: -50%; z-index: 20; pointer-events: none; opacity: .09; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; } .lyr { position: absolute; inset: 0; will-change: transform; } .lyr img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .back { transform: translate3d(calc(var(--mx, 0) * -7px), calc(var(--my, 0) * -5px), 0) scale(calc(1.03 + var(--hp, 0) * .07 * var(--hz, 1))); } .front { z-index: 2; transform-origin: 50% 100%; transform: translate3d(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 6px), 0) scale(calc(1.03 + var(--hp, 0) * .1 * var(--hz, 1))); } .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,4,.62) 0%, rgba(5,7,4,.28) 30%, rgba(5,7,4,0) 52%); } .floor { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(0deg, rgba(9,10,7,.94) 0%, rgba(9,10,7,.7) 20%, rgba(9,10,7,0) 46%); } .hero .stage::after { content: ""; position: absolute; inset: 0; z-index: 30; background: #000; opacity: calc(var(--cover, 0) * .55); pointer-events: none; } /* the headline sits between the shop and the counter: the monitor and lamp overlap it */ .title { position: absolute; z-index: 1; left: max(var(--gut), calc(var(--ix, 0px) + var(--iw, 100vw) * var(--tl))); top: calc(var(--iy, 0px) + var(--ih, 100vh) * var(--tt)); font-size: calc(var(--iw, 100vw) * var(--tf)); font-weight: 600; line-height: .9; letter-spacing: -0.052em; color: var(--ink); text-shadow: 0 .01em .008em rgba(0,0,0,.5), calc(.03em - var(--mx, 0) * .015em) .045em .02em rgba(0,0,0,.5), calc(.07em - var(--mx, 0) * .03em) .1em .07em rgba(0,0,0,.4), calc(.12em - var(--mx, 0) * .04em) .2em .2em rgba(0,0,0,.35); transform: translate3d(calc(var(--mx, 0) * 7px), calc(var(--hp, 0) * -1 * var(--tup, 0px)), 0); --tl: .052; --tt: .148; --tf: .076; } .title .ln { display: block; } /* lines wrap to the width main.js measures */ .title .ln > span { display: inline-block; } .tfront .title { z-index: 3; } .title em { color: var(--ice); font-size: 1.1em; letter-spacing: -0.03em; } html.motion .title .ln > span { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity 1s var(--ease), transform 1.2s var(--ease); } html.motion.ready .title .ln > span { opacity: 1; transform: none; } html.motion.ready .title .ln:nth-child(1) > span:nth-child(2) { transition-delay: .08s; } html.motion.ready .title .ln:nth-child(2) > span:nth-child(1) { transition-delay: .16s; } html.motion.ready .title .ln:nth-child(2) > span:nth-child(2) { transition-delay: .24s; } .hero-ui { position: absolute; z-index: 5; inset: 0; display: flex; flex-wrap: wrap; align-content: flex-end; align-items: flex-end; transform: translateY(calc(var(--hp, 0) * 14vh)); opacity: calc(1 - var(--hp, 0) * 1.7); justify-content: space-between; gap: 18px 40px; padding: 0 var(--gut) clamp(22px, 4vh, 44px); pointer-events: none; } .hero-ui > * { pointer-events: auto; } .lede { max-width: 33ch; font-size: clamp(1rem, 1.25vw, 1.15rem); color: var(--ink2); text-wrap: pretty; } .cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .micro { color: var(--ink3); font-size: 10.5px; } .built { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 0; color: var(--ink3); font-size: 10.5px; } .built b { color: var(--ice); font-weight: 500; margin-right: 14px; } .built span + span::before { content: "·"; margin: 0 10px; color: rgba(246,245,243,.3); } html.motion .hero-ui > * { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease) .45s, transform 1.1s var(--ease) .45s; } html.motion.ready .hero-ui > * { opacity: 1; transform: none; } /* desktop: lede + ask on the left, proof along the bottom */ @media (orientation: landscape) { .hero-ui { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; align-content: end; } .hero-ui .lede { grid-column: 1; } .hero-ui .cta-row { grid-column: 1; } .hero-ui .built { grid-column: 1 / -1; } } /* tall screens: the tall plate, a four-line headline over the shop window */ .hero-eyebrow { display: none; } @media (orientation: portrait) { /* tall screens: the whole tall photo, anchored to the counter; the headline sits on the window and its last line tucks behind the monitor (size + position computed in main.js) */ .lyr img { object-position: 50% var(--opy, 100%); } .title { left: var(--gut); top: var(--ttpx, 96px); font-size: var(--tfpx, 13vw); line-height: .93; } .floor { opacity: 0; transition: opacity .7s var(--ease); background: linear-gradient(0deg, rgba(9,10,7,.94) 0px, rgba(9,10,7,.82) calc(var(--fl, 220px) - 30px), rgba(9,10,7,.45) calc(var(--fl, 220px) + 30px), rgba(9,10,7,0) calc(var(--fl, 220px) + 110px)); } .hero-eyebrow { display: flex; justify-content: center; position: absolute; z-index: 4; left: 0; right: 0; bottom: max(58px, calc(env(safe-area-inset-bottom) + 30px)); font-size: 10px; letter-spacing: .16em; text-shadow: 0 1px 8px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); transition: opacity .5s var(--ease); } .hero-eyebrow .cue { color: var(--ice); } .lede { font-size: 15px; max-width: 36ch; color: rgba(246,245,243,.88); } .cta-row { width: 100%; } .cta-row .btn { flex: 1; } .built { font-size: 9.5px; letter-spacing: .1em; } .built span + span::before { margin: 0 7px; } /* the pitch rises in on the first scroll, so your counter is never covered at first glance */ html.motion .hero-ui { transform: translateY(40px); opacity: 0; transition: opacity .7s var(--ease), transform .9s var(--ease); pointer-events: none; } html.motion .hero-ui > * { opacity: 1; transform: none; transition: none; } html.motion .hero.lede-in .hero-ui { transform: none; opacity: 1; pointer-events: auto; } html.motion .hero.lede-in .floor { opacity: 1; } html.motion .hero.lede-in .hero-eyebrow { opacity: 0; } html:not(.motion) .floor { opacity: 1; } html:not(.motion) .hero-eyebrow { display: none; } } /* ============================================================ CARD 01 · THE WEBSITE: the counter's old monitor runs a 2004 desktop; it updates, glitches, and a modern browser lifts out of the glass with real client work scrolling inside ============================================================ */ .card.c-web { z-index: 1; } .c-web .c-bg::before { background: rgba(0, 40, 12, .62); } .crt-body { position: relative; } .crt::before { content: ""; position: absolute; left: 18%; right: 18%; bottom: 1%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.7), rgba(0,0,0,0)); filter: blur(6px); transform: translateY(40%); } /* the glass: the live screen sits exactly on the photo's tube (measured: 11.94 / 11.35 / 72.09 / 52.45 %) */ .glass { position: absolute; z-index: 2; left: 11.94%; top: 11.35%; width: 72.09%; height: 52.45%; border-radius: 3.4% / 4.6%; overflow: hidden; background: #0a0b0a; will-change: transform; } .glass .xp { position: absolute; inset: 0; min-height: 0; filter: saturate(.82) contrast(1.04) brightness(.92); } html.motion .c-web .stage:not(.is-b) .glass .xp { animation: crt 5s steps(1) infinite; } @keyframes crt { 0%, 100% { opacity: 1; } 31% { opacity: .93; } 32% { opacity: 1; } 77% { opacity: .96; } 78% { opacity: 1; } } .gl-noise { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; } .glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(55% 45% at 24% 14%, rgba(255,255,255,.16), rgba(255,255,255,0) 62%), repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 3px), radial-gradient(130% 120% at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,.6) 100%); box-shadow: inset 0 0 18px rgba(0,0,0,.7); border-radius: inherit; } /* the update box: big enough to read on the small screen */ .glass .xp .xp-update { left: 50%; top: 44%; right: auto; bottom: auto; width: 64%; translate: -50% -50%; transform: none; transition: none; opacity: var(--xu, 0); font-size: 26px; } .glass .xp .xp-balloon { font-size: 26px; padding: 18px 22px; border-radius: 14px; border-width: 2px; } .glass .xp .xp-install { padding: 22px 26px; border-width: 2px; border-radius: 10px; } .glass .xp .xp-install p { margin-bottom: 12px; font-size: 30px; } .glass .xp .xp-bar { height: 44px; padding: 5px; border-width: 2px; } .glass .xp .xp-bar i { background: repeating-linear-gradient(90deg, #2fb32f 0 22px, transparent 22px 27px); } .glass .xp .xp-step { font-size: 24px !important; margin-top: 12px !important; } /* the new site: a modern browser (FLIP from the glass to its place) */ .wb { position: absolute; z-index: 6; left: var(--wx, 0px); top: var(--wy, 0px); width: var(--ww, 600px); height: var(--wh, 420px); display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #0d0f0c; box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(246,245,243,.1); transform-origin: 0 0; opacity: var(--wo, 0); transform: translate(var(--wtx, 0px), var(--wty, 0px)) scale(var(--wsx, 1), var(--wsy, 1)); pointer-events: none; will-change: transform; } .is-b .wb { pointer-events: auto; } .wb-bar { flex: none; height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #1b1d19; border-bottom: 1px solid rgba(246,245,243,.08); opacity: var(--wbo, 1); } .wb-bar > i { width: 10px; height: 10px; border-radius: 50%; background: rgba(246,245,243,.2); } .wb-url { flex: 1; min-width: 0; margin-left: 10px; display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 12px; border-radius: 999px; background: rgba(246,245,243,.07); font-size: 11.5px; letter-spacing: .02em; text-transform: none; color: var(--ink2); white-space: nowrap; overflow: hidden; } .wb-url svg { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; } .wb-view { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #000; } .wb-view img { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; will-change: transform, opacity; } .wb-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; } .wb-cap { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px; background: #121410; font-size: 13.5px; opacity: var(--wbo, 1); } .wb-cap b { flex: none; font-weight: 600; color: var(--ink); } .wb-what { flex: 1 1 auto; min-width: 0; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wb-kind { flex: none; padding: 4px 8px; border-radius: 999px; font-size: 9px; background: rgba(160,212,228,.14); color: var(--ice); } .wb-kind.pre { background: rgba(246,245,243,.08); color: var(--ink2); } .wb-link { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--ice); text-decoration: none; font-weight: 500; } .wb-link .ic { width: 14px; height: 14px; } .wb-link:hover { text-decoration: underline; } @media (orientation: portrait) { .wb { border-radius: 16px; } .wb-bar { height: 34px; } .wb-cap { font-size: 12.5px; padding: 9px 12px; gap: 8px; } } html:not(.motion) .wb { position: relative; left: auto; top: auto; width: auto; height: 70vh; opacity: 1; transform: none; pointer-events: auto; } html:not(.motion) .c-web .obj { display: none; } /* the 2004 desktop on the glass (ported from the opening archive; scoped to .xp, laid out on a fixed 1100-px canvas) */ .xp { position: relative; overflow: hidden; color: #000; font: 13px/1.35 Tahoma, Verdana, 'Segoe UI', sans-serif; min-height: 560px; } .xp .xp-wall { position: absolute; inset: 0; z-index: 0; background: radial-gradient(140% 60% at 30% 108%, #6fbf3a 0 38%, #4f9d26 52%, transparent 53%), radial-gradient(120% 55% at 85% 112%, #5aae2e 0 40%, transparent 41%), radial-gradient(40% 18% at 22% 24%, rgba(255,255,255,.75), transparent 70%), radial-gradient(30% 12% at 70% 16%, rgba(255,255,255,.6), transparent 70%), linear-gradient(#2f6fd6, #6aa8f0 55%, #b9dcff); } .xp .xp-screen { position: absolute; left: 0; top: 0; width: 1100px; height: var(--xph, 797px); transform-origin: 0 0; transform: scale(var(--xps, 1)); z-index: 1; } .xp .xp-icons { position: absolute; left: 1.2%; top: 3%; display: flex; flex-direction: column; gap: 26px; z-index: 1; } .xp .xp-icons span { display: flex; flex-direction: column; align-items: center; width: 84px; text-align: center; color: #fff; font-size: 12px; text-shadow: 1px 1px 1px #000; } .xp .xi { display: block; width: 40px; height: 40px; margin-bottom: 5px; filter: drop-shadow(1px 2px 2px rgba(0,0,0,.4)); } .xp .xi-pc { background: linear-gradient(#f4f7fb, #aebdd0); border-radius: 4px; box-shadow: inset 0 -10px 0 #8fa3bb; } .xp .xi-folder { background: linear-gradient(#ffe38a, #e9b93c); border-radius: 3px 8px 4px 4px; } .xp .xi-web { background: radial-gradient(circle at 35% 30%, #c9f0ff, #2a8be0 55%, #0b4a9c); border-radius: 50%; } .xp .xi-im { background: radial-gradient(circle at 50% 30%, #ffe36b, #f4b400 60%, #b57d00); border-radius: 50%; } .xp .xi-bin { background: linear-gradient(#f2f6fb, #b9c7d6); border-radius: 4px 4px 9px 9px; } .xp .win { position: absolute; z-index: 2; background: #ece9d8; border: 1px solid #0831d9; border-radius: 8px 8px 0 0; box-shadow: 3px 4px 12px rgba(0,0,0,.45); overflow: hidden; display: flex; flex-direction: column; } .xp .win-bar { flex: none; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 5px 0 9px; color: #fff; font: bold 14px/1 'Trebuchet MS', Tahoma, sans-serif; text-shadow: 1px 1px 0 #0f1089; background: linear-gradient(#0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #0662e8 92%, #0049c6); white-space: nowrap; overflow: hidden; } .xp .win-bar-lime { background: linear-gradient(#7fd84a, #3c9b13 45%, #2f8a0c); text-shadow: 1px 1px 0 #1d4f07; } .xp .win-bar-gold { color: #3b2a00; text-shadow: none; background: linear-gradient(#ffe97a, #f2c21b 50%, #d9a400); } .xp .win-ico { width: 17px; height: 17px; flex: none; border-radius: 50%; } .xp .win-btns { margin-left: auto; display: flex; gap: 2px; } .xp .win-btns b { position: relative; width: 22px; height: 22px; border: 1px solid #fff; border-radius: 3px; background: linear-gradient(#5a9bff, #1a5fea 55%, #1150d8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); } .xp .win-btns b.mn::before { content: ""; position: absolute; left: 5px; bottom: 5px; width: 8px; height: 3px; background: #fff; } .xp .win-btns b.mx::before { content: ""; position: absolute; left: 4px; top: 4px; right: 4px; bottom: 4px; border: 2px solid #fff; border-top-width: 3px; } .xp .win-bar-gold .win-btns b:not(.x), .xp .win-bar-lime .win-btns b:not(.x) { background: linear-gradient(#5a9bff, #1a5fea 55%, #1150d8); } .xp .win-btns b.x { background: linear-gradient(#e87b5f, #c9361a); position: relative; } .xp .win-btns b.x::before, .xp .win-btns b.x::after { content: ""; position: absolute; left: 5px; right: 5px; top: 9px; height: 2px; background: #fff; transform: rotate(45deg); } .xp .win-btns b.x::after { transform: rotate(-45deg); } /* the browser dominates, like the real thing */ .xp .win-browser { left: 12.5%; top: 3.5%; width: 69%; height: 63%; } .xp .br-menu, .xp .br-tools, .xp .br-addr { flex: none; display: flex; gap: 14px; align-items: center; padding: 3px 10px; border-bottom: 1px solid #c9c5b2; white-space: nowrap; overflow: hidden; font-size: 13px; } .xp .br-tools { gap: 4px; padding: 3px 8px; } .xp .xtb { display: flex; align-items: center; gap: 4px; padding: 2px 5px; border: 1px solid transparent; border-radius: 3px; } .xp .xtb svg { display: block; flex: none; } .xp .xtb-lbl { padding-right: 8px; } .xp .dd { width: 0; height: 0; border: 4px solid transparent; border-top: 5px solid #333; border-bottom: 0; margin-left: 2px; } .xp .br-links { padding-left: 8px; border-left: 1px solid #b9b49e; color: #333; } .xp .br-sep { width: 1px; height: 24px; background: #b9b49e; } .xp .br-addr em { flex: 1; display: flex; align-items: center; gap: 6px; font-style: normal; background: #fff; border: 1px solid #7f9db9; padding: 3px 8px; } .xp .br-addr em i { width: 15px; height: 15px; border-radius: 50%; } .xp .br-go { display: flex; align-items: center; gap: 4px; } .xp .br-go i { width: 18px; height: 18px; border-radius: 3px; background: linear-gradient(#5cc04a, #2f8a1d); } .xp .br-page { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #fff; font: 14px/1.4 Verdana, Tahoma, sans-serif; } .xp .site-head { flex: none; display: flex; align-items: center; gap: 24px; padding: 8px 22px; background: linear-gradient(180deg, #0a1f6b, #1d3fa3); border-bottom: 2px solid #f2c21b; } .xp .site-title { margin: 0; font: italic 900 40px/1 'Arial Black', Impact, sans-serif; letter-spacing: -.01em; color: #ffcf1f; -webkit-text-stroke: 1px #7a4b00; text-shadow: 3px 3px 0 #0a1440; position: relative; } .xp .site-title span { color: #fff; } .xp .site-title::after { content: ""; position: absolute; left: -8px; right: -14px; bottom: -6px; height: 10px; border-bottom: 3px solid #ff9d1a; border-radius: 0 0 50% 50%; transform: rotate(-2deg); } .xp .site-tag { margin: 0 0 0 auto; color: #d8e4ff; font: bold 13px/1.35 Verdana, sans-serif; text-align: right; } .xp .site-top { flex: none; display: flex; justify-content: center; gap: 30px; padding: 5px 0; background: #0b1a55; } .xp .site-top a { color: #fff; text-decoration: none; font: bold 14px Verdana, sans-serif; } .xp .site-top a:first-child { color: #ffcf1f; } .xp .site-body { flex: 1; display: grid; grid-template-columns: 200px 1fr; min-height: 0; } .xp .site-nav { display: flex; flex-direction: column; gap: 0; padding: 8px; background: linear-gradient(#e8eefc, #c9d6f2); border-right: 2px groove #b9c6f2; } .xp .site-nav a { display: flex; justify-content: space-between; padding: 7px 10px; margin-bottom: 4px; color: #0b2a8a; font: bold 13px Verdana, sans-serif; background: linear-gradient(#ffffff, #dde6fb); border: 1px solid #9fb2e0; text-decoration: none; } .xp .site-nav a::after { content: "\25B8"; } .xp .site-counter { display: none; margin: auto 0 0; font: 11px Arial, sans-serif; } .xp .lcd { display: inline-block; background: #000; color: #7CFF9B; font: bold 13px/1 'Courier New', monospace; padding: 3px 5px; letter-spacing: .18em; border: 2px inset #808080; } .xp .site-hero { position: relative; padding: 18px 28px; overflow: hidden; background: radial-gradient(40% 30% at 70% 30%, rgba(255,255,255,.9), transparent 70%), radial-gradient(35% 25% at 30% 20%, rgba(255,255,255,.8), transparent 70%), linear-gradient(#5f9be8, #a9cdf7 70%, #6fbf3a 70.5%, #4f9d26); } .xp .site-h { margin: 0 0 8px; font: bold 30px/1.1 'Trebuchet MS', Verdana, sans-serif; color: #0b1f6b; text-shadow: 0 1px 0 rgba(255,255,255,.6); } .xp .site-sub { margin: 0 0 14px; font: 15px Verdana, sans-serif; color: #0b1f6b; } .xp .site-cta { margin: 0; } .xp .site-cta span { display: inline-block; padding: 10px 26px; font: bold 16px Verdana, sans-serif; color: #111; border: 1px solid #000; background: linear-gradient(#ffd400, #ffd400) padding-box, repeating-linear-gradient(-45deg, #111 0 12px, #ffd400 12px 24px) border-box; border: 8px solid transparent; } .xp .br-status { flex: none; display: flex; justify-content: space-between; padding: 3px 10px; border-top: 1px solid #c9c5b2; color: #333; font-size: 12px; } /* buddy list */ .xp .win-buddy { left: 79.5%; top: 9%; width: 19%; height: 54%; z-index: 3; } .xp .bud-menu { flex: none; display: flex; gap: 14px; padding: 4px 10px; background: #fff3b8; border-bottom: 1px solid #d9c26a; font-size: 13px; } .xp .bud-tree { list-style: none; margin: 0; padding: 6px 10px; background: #fff; flex: 1; overflow: hidden; font-size: 14px; } .xp .bud-tree li { padding: 3px 0 3px 20px; position: relative; } .xp .bud-tree .bud-grp { padding-left: 0; font-weight: bold; color: #222; margin-top: 4px; } .xp .bud-tree .on::before, .xp .bud-tree .away::before, .xp .bud-tree .off::before { content: ""; position: absolute; left: 3px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a6f08a, #2bb300); } .xp .bud-tree .away::before { background: radial-gradient(circle at 35% 30%, #ffe08a, #ffb400); } .xp .bud-tree .off { color: #888; } .bud-tree .off::before { background: radial-gradient(circle at 35% 30%, #eee, #aaa); } .xp .bud-tree small { color: #777; font-size: 11px; } /* IM + downloads */ .xp .win-chat { left: 55%; top: 62%; width: 37%; height: 28.5%; z-index: 4; } .xp .chat-log { flex: 1; background: #fff; padding: 6px 10px; overflow: hidden; font: 14px/1.4 Arial, sans-serif; } .xp .chat-log p { margin: 0 0 2px; } .xp .chat-log .them { color: #1a3ccc; } .chat-log .me { color: #d40000; } .xp .chat-input { flex: none; display: flex; gap: 8px; padding: 7px; } .xp .chat-input span { flex: 1; height: 30px; background: #fff; border: 1px solid #7f9db9; } .xp .chat-input b { padding: 6px 18px; border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(#fff, #ece9d8); font-weight: normal; } .xp .win-dl { left: 4%; top: 64%; width: 49%; z-index: 3; } .xp .ps-tabs { display: flex; gap: 2px; padding: 5px 8px 0; background: #dfe9d0; border-bottom: 1px solid #9cb57a; font-size: 12px; } .xp .ps-tabs span { padding: 4px 12px; border: 1px solid #9cb57a; border-bottom: 0; border-radius: 4px 4px 0 0; background: #eef4e4; } .xp .ps-tabs .on { background: #fff; font-weight: bold; } .xp .dl th { text-align: left; font-weight: normal; padding: 3px 6px; background: linear-gradient(#fff, #e6e3d3); border-bottom: 1px solid #bbb; border-right: 1px solid #ddd; font-size: 12px; } .xp .dl .dead td { color: #999; text-decoration: line-through; } /* mail notice + update balloon + taskbar */ .xp .xp-update { position: absolute; right: 1.5%; bottom: 7.5%; z-index: 6; width: 310px; opacity: 0; transform: translateY(8px); transition: opacity .26s, transform .26s; pointer-events: none; } .xp .xp-update.show { opacity: 1; transform: none; } .xp .xp-balloon { margin: 0 0 6px; padding: 10px 12px; background: #ffffe1; border: 1px solid #000; border-radius: 8px; font-size: 13px; box-shadow: 2px 2px 6px rgba(0,0,0,.35); } .xp .xp-balloon b { display: block; margin-bottom: 2px; } .xp .xp-install { padding: 10px 12px; background: #ece9d8; border: 1px solid #0831d9; border-radius: 6px; box-shadow: 2px 3px 10px rgba(0,0,0,.45); } .xp .xp-install p { margin: 0 0 6px; } .xp .xp-bar { height: 18px; border: 1px solid #686868; border-radius: 3px; background: #fff; padding: 2px; } .xp .xp-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #2fb32f 0 8px, transparent 8px 10px); } .xp .xp-step { margin-top: 6px !important; color: #333; font-size: 12px; } .xp .xp-task { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; z-index: 7; display: flex; align-items: center; gap: 6px; background: linear-gradient(#3168d5, #4993e6 6%, #2157d7 14%, #2663e0 82%, #1941a5); } .xp .xp-start { height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 26px 0 14px; margin-right: 8px; color: #fff; font: italic bold 22px 'Trebuchet MS', sans-serif; text-shadow: 1px 1px 2px #1e5e14; border-radius: 0 14px 14px 0; background: linear-gradient(#3c9e3c, #45b545 15%, #2f8f2f 85%, #1d6a1d); } .xp .xp-start i { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #8fe07a 40%, #2b8c1d); } .xp .xp-tb { display: flex; align-items: center; gap: 7px; max-width: 230px; padding: 7px 12px; border-radius: 3px; color: #fff; background: linear-gradient(#3c81f3, #2a68dc); border: 1px solid #1a4fb8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .xp .xp-tb i { width: 16px; height: 16px; flex: none; border-radius: 50%; } .xp .xp-tray { white-space: nowrap; margin-left: auto; height: 100%; display: flex; align-items: center; gap: 7px; padding: 0 14px; color: #fff; font-size: 13px; background: linear-gradient(#0c59b9, #139ee9 8%, #18b9ff 12%, #1083d8 85%, #0e66c7); border-left: 1px solid #092e7c; } .xp .xp-tray i { width: 16px; height: 16px; border-radius: 3px; background: rgba(255,255,255,.65); } /* the old site = a cheapened 2004 version of the jeanius brand (emerald → lime, WordArt mark, mint buttons, hot-pink spark) */ .xp .site-head { position: relative; background: linear-gradient(180deg, #0f7a37, #0a4f24) !important; border-bottom: 3px solid #a6ff4d !important; } .xp .site-title { font: italic 900 44px/1 'Arial Black', Impact, sans-serif !important; color: #e8fff0 !important; -webkit-text-stroke: 1.5px #06331a !important; text-shadow: 3px 3px 0 #59c9ef, 5px 5px 0 #06331a !important; display: flex; align-items: center; } .xp .site-title span { color: #a6ff4d !important; } .xp .site-title::after { border-bottom-color: #59c9ef !important; } .xp .site-new { position: absolute; left: 335px; top: 6px; width: 62px; height: 62px; display: grid; place-items: center; color: #fff; font: italic 900 15px 'Arial Black', sans-serif; transform: rotate(-14deg); text-shadow: 1px 1px 0 #7a0033; background: #ff3d8b; clip-path: polygon(50% 0,61% 18%,82% 10%,80% 32%,100% 40%,84% 55%,96% 75%,74% 76%,68% 98%,50% 84%,32% 98%,26% 76%,4% 75%,16% 55%,0 40%,20% 32%,18% 10%,39% 18%); } .xp .site-tag { color: #d9ffe6 !important; } .xp .site-top { background: #064021 !important; } .xp .site-top a:first-child { color: #a6ff4d !important; } .xp .site-nav { background: linear-gradient(#e6fff0, #bff0d2) !important; border-right-color: #8fd9ad !important; } .xp .site-nav a { color: #075a2a !important; background: linear-gradient(#ffffff, #c9f5da) !important; border-color: #6fcf96 !important; } .xp .site-hero { background: radial-gradient(40% 30% at 72% 28%, rgba(255,255,255,.95), transparent 70%), radial-gradient(35% 25% at 30% 18%, rgba(255,255,255,.85), transparent 70%), linear-gradient(#59c9ef, #b8ecff 68%, #4fd06a 68.5%, #23a347) !important; } .xp .site-h { color: #064021 !important; } .xp .site-sub { color: #064021 !important; } .xp .site-cta span { color: #fff !important; border: 3px outset #ff8fbd !important; background: linear-gradient(#ff6aa6, #e01f6e) !important; padding: 12px 28px !important; text-shadow: 1px 1px 0 #7a0033; } .xp .chat-sys { color: #888; font-style: italic; margin-top: 4px !important; } /* the bolt IS the "i": a real letter keeps the spacing, the bolt is drawn over it */ .xp .bolt-i { position: relative; color: transparent !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; } .xp .bolt-i svg { position: absolute; left: 50%; top: 0; width: 0.56em; height: 0.98em; transform: translateX(-38%) skewX(-12deg); filter: drop-shadow(3px 3px 0 #59c9ef) drop-shadow(2px 2px 0 #06331a); } /* ============================================================ CARD 02 · THE PHONE ============================================================ */ .card { position: relative; z-index: 2; background: #021208; border-radius: 28px 28px 0 0; overflow: clip; box-shadow: 0 -34px 90px rgba(0,0,0,.72), 0 -6px 18px rgba(0,0,0,.45); } /* the leading edge of each card: a lit lip so you see a new card arrive over the last one */ .card::before { content: ""; position: absolute; z-index: 40; left: 0; right: 0; top: 0; height: 64px; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(246,245,243,.22), inset 0 2px 0 rgba(160,212,228,.06); background: linear-gradient(180deg, rgba(246,245,243,.05), rgba(246,245,243,0)); } html.motion .card { margin-top: calc(var(--S) * -1); } .c-brain { z-index: 5; } .c-clock { z-index: 6; } .c-books { z-index: 4; } .c-cal { z-index: 3; } .card .stage::after { content: ""; position: absolute; inset: 0; z-index: 30; background: #000; opacity: calc(var(--cover, 0) * .55); pointer-events: none; } .c-bg { position: absolute; inset: -4%; background: url("assets/scene/counter-blur.jpg") center 60% / cover; transform: scale(calc(1.08 - var(--ph, 0) * .06)); } .c-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 40, 12, .62); mix-blend-mode: multiply; } .c-bg::after { z-index: 2; content: ""; position: absolute; inset: 0; background: radial-gradient(110% 70% at 50% 105%, rgba(2,18,8,0) 0%, rgba(2,18,8,.4) 75%), linear-gradient(180deg, rgba(2,18,8,.72) 0%, rgba(2,18,8,.2) 38%, rgba(2,18,8,.38) 100%); } .c-glow { position: absolute; left: var(--ox, 50%); top: var(--oy, 40%); width: 120vmax; height: 120vmax; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(160,212,228,.22), rgba(160,212,228,.06) 45%, rgba(160,212,228,0) 70%); opacity: var(--ob, 0); pointer-events: none; } .c-tag { position: absolute; z-index: 6; top: 96px; left: var(--gut); display: flex; align-items: center; gap: 10px; color: var(--ice); } .c-tag .ic { width: 20px; height: 20px; stroke-width: 1.5; } .c-titles { position: absolute; z-index: 3; top: 150px; left: var(--gut); right: var(--gut); transform-origin: 0 0; transform: scale(var(--ts, 1)); } .c-title { position: absolute; top: 0; left: 0; font-size: clamp(3.2rem, 14.6vw, 8.6rem); font-weight: 600; line-height: .92; letter-spacing: -0.05em; } .c-title .ln { display: block; } .c-title .ln > span { display: block; transition: transform .9s var(--ease), opacity .6s var(--ease); } .c-title em { color: var(--ice); font-size: 1.08em; letter-spacing: -0.02em; } .c-title.a .ln > span { transform: none; opacity: 1; } .c-title.b .ln > span { transform: translateY(.35em); opacity: 0; } .is-b .c-title.a .ln > span { transform: translateY(-.25em); opacity: 0; } .is-b .c-title.b .ln > span { transform: none; opacity: 1; } .c-title .ln:nth-child(2) > span { transition-delay: .06s; } .c-title .ln:nth-child(3) > span { transition-delay: .12s; } .c-end { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); top: var(--ey, 52%); opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform 1s var(--ease); pointer-events: none; } .is-end .c-end { opacity: 1; transform: none; } /* upright screens with room to spare: the finished state sits centred (fillEnd sets --ec) */ @media (orientation: portrait) { .c-titles, .c-end { translate: 0 0; transition-property: translate, opacity, transform; transition-duration: .9s; transition-timing-function: var(--ease); } .is-end .c-titles, .is-end .c-end { translate: 0 var(--ec, 0px); } } .checks { list-style: none; margin: calc(var(--ck-mt, 20px) * var(--es, 1)) 0 0; padding: 0; display: grid; gap: calc(var(--ck-gap, 9px) * var(--es, 1)); } .checks li { display: flex; align-items: center; gap: 12px; font-size: calc(var(--fs-ck, 15px) * var(--es, 1)); line-height: 1.35; color: var(--ink); transition: opacity .45s var(--ease); } .checks .ic { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--ice); color: var(--e900); stroke-width: 2.4; transition: background .35s, color .35s, box-shadow .35s; } .c-cta { margin-top: calc(var(--cta-mt, 24px) * var(--es, 1)); pointer-events: auto; } .c-end { pointer-events: none; } .is-b .c-end, .is-end .c-end { pointer-events: auto; } .c-sub { max-width: 34ch; font-size: calc(var(--fs-sub, clamp(16px, 1.3vw, 19px)) * var(--es, 1)); color: var(--ink2); text-wrap: pretty; } /* phase A: what the old way costs, under the first title (the column is never empty) */ .c-old { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); top: var(--oly, 52%); max-width: 36ch; font-size: clamp(15px, 1.4vw, 20px); line-height: 1.5; color: var(--ink2); text-wrap: pretty; transition: opacity .5s var(--ease), transform .8s var(--ease); } .is-b .c-old { opacity: 0; transform: translateY(-10px); pointer-events: none; } .chips.done { justify-content: flex-start; margin-top: 18px; } .chips.done li { animation: none; transition: opacity .45s var(--ease), background .45s, box-shadow .45s; } .chips.done li .ic { transition: opacity .3s, transform .45s var(--ease); } .caps .chips { display: none; } /* desktop: the left column explains while the work plays, and each check ticks when it happens */ @media (orientation: landscape) { .is-b .c-end { opacity: 1; transform: none; } .checks li:not(.on) { opacity: .42; } .checks li:not(.on) .ic { background: transparent; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(246,245,243,.3); } } /* the voice: a sphere of light that talks */ .orb { position: absolute; z-index: 2; left: var(--ox, 50%); top: var(--oy, 40%); width: var(--osz, 76vw); height: var(--osz, 76vw); translate: -50% -50%; opacity: var(--ob, 0); transform: scale(calc(.7 + var(--ob, 0) * .3)); pointer-events: none; } .caps { position: absolute; z-index: 4; left: var(--cx, var(--gut)); right: var(--cr, var(--gut)); top: var(--cy, 58%); text-align: center; opacity: var(--cb, 0); pointer-events: none; } .cap-prev { font-size: 13.5px; color: var(--ink3); min-height: 1.5em; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cap-now .who { display: block; margin-bottom: 8px; font-size: 10px; color: var(--ink3); } .cap-now .who.agent { color: var(--ice); } .cap-now .line { display: block; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 500; line-height: 1.28; letter-spacing: -0.02em; min-height: 2.6em; text-wrap: balance; } .cap-now .w { opacity: .18; transition: opacity .18s linear; } .cap-now .w.on { opacity: 1; } .chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; min-height: 40px; } .chips li { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(160,212,228,.12); box-shadow: inset 0 0 0 1px rgba(160,212,228,.3); font-size: 13px; font-weight: 500; animation: chipIn .6s var(--ease) both; } .chips li .ic { width: 16px; height: 16px; color: var(--ice); } @keyframes chipIn { from { opacity: 0; transform: translateY(8px) scale(.96); } } /* the old phone, cut from your counter */ .obj { position: absolute; z-index: 5; container-type: inline-size; width: var(--pw, 94vw); left: var(--px, 50%); top: var(--py, 47%); translate: -50% 0; opacity: var(--oa, 1); transform: translate(calc(var(--pm, 0) * var(--pdx, 0px)), calc(var(--pm, 0) * var(--pdy, 0px))) scale(calc((1 - var(--pm, 0) * var(--pds, 0)) * var(--osc, 1))); transform-origin: 50% 50%; } .obj img { width: 100%; height: auto; filter: drop-shadow(0 34px 34px rgba(0,0,0,.55)) drop-shadow(0 8px 10px rgba(0,0,0,.4)); } .phone img, .phone canvas { filter: none; } .paper { z-index: 3; } .phone-body { position: relative; } .obj .has3d img + canvas.d3, .obj canvas.d3 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; filter: drop-shadow(0 30px 30px rgba(0,0,0,.5)) drop-shadow(0 6px 8px rgba(0,0,0,.35)); } .obj .has3d img { visibility: hidden; } .phone::before { content: ""; position: absolute; left: 12%; right: 6%; bottom: 3%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,0)); filter: blur(6px); transform: translateY(40%); } .obj .has3d img { visibility: hidden; } .led { transition: opacity .25s; } .ringing .phone-body { animation: ring 1.6s infinite; transform-origin: 40% 80%; } @keyframes ring { 0%, 34%, 100% { transform: none; } 2%, 10%, 18%, 26% { transform: rotate(-1.6deg) translateX(-2px); } 6%, 14%, 22%, 30% { transform: rotate(1.6deg) translateX(2px); } } .rings { position: absolute; left: 4%; top: -16%; width: 32%; overflow: visible; fill: none; stroke: var(--ice); stroke-width: 3; stroke-linecap: round; opacity: 0; } .ringing .rings { opacity: 1; } .ringing .rings path { animation: wave 1.6s infinite; } .rings path:nth-child(2) { animation-delay: .12s !important; } .rings path:nth-child(3) { animation-delay: .24s !important; } @keyframes wave { 0%, 40%, 100% { opacity: 0; } 8% { opacity: 1; } 30% { opacity: 0; } } /* the LED: we drive the display ourselves (99 → 0). A 1000×250 panel mapped onto the four corners of the phone's glass with matrix3d, so the text sits IN the screen, in its perspective. */ .led { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .led-text { font-family: var(--mono); font-weight: 500; letter-spacing: 1px; fill: #ff3b2e; filter: url(#ledGlow); } .ringing .led-text { animation: blink 1.1s steps(1) infinite; } .led.zero .led-text { fill: #ff5a46; } @keyframes blink { 50% { opacity: .25; } } .transcript { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* desktop / landscape layout of the phone card */ @media (orientation: landscape) { .c-tag { top: var(--tgy, 104px); } .c-titles { top: var(--tty, 140px); right: auto; width: 46%; } .c-old { right: auto; width: 40%; } .checks { --ck-gap: 11px; --fs-ck: clamp(15px, 1.15vw, 17px); } .c-title { font-size: clamp(3.4rem, 7.4vw, 8.4rem); } .c-end { right: auto; width: 40%; top: var(--ey, 360px); } .c-title { font-size: calc(clamp(3rem, min(7vw, 11vh), 8.4rem) * var(--tz, 1) * var(--tw, 1)); } } /* ============================================================ CARD 03 · THE CALENDAR ============================================================ */ .c-cal .c-bg { background-image: url("assets/scene/wall-blur.jpg"); background-position: center 30%; } .c-cal .c-bg::before { background: rgba(0, 40, 12, .62); } /* the paper calendar hangs: a slow sway from its hooks until the system takes over */ .paper .paper-body { position: relative; transform-origin: 50% -11.66%; } /* the cord and nail sit above the paper, in the image's own coordinates (viewBox y -170 → 30) */ .hang { position: absolute; z-index: 3; left: 0; width: 100%; aspect-ratio: 1100 / 200; bottom: calc(100% - 30 / 1201 * 100%); overflow: visible; pointer-events: none; } html.motion .c-cal .stage:not(.is-b) .paper-body { animation: sway 6s ease-in-out infinite; } @keyframes sway { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } } .marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .marks .m rect { fill: rgba(160,212,228,.2); stroke: #A0D4E4; stroke-width: 7; } .marks .m circle { fill: #A0D4E4; } .marks .m path { fill: none; stroke: #0b1a10; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; } .marks .m { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.9); transition: opacity .45s var(--ease), transform .6s var(--ease); } .marks .m.on { opacity: 1; transform: none; } /* the digital calendar */ .dcal { position: absolute; z-index: 4; left: var(--dx, var(--gut)); top: var(--dy, 30%); width: var(--dw, calc(100% - 2 * var(--gut))); padding: 16px 14px 12px; border-radius: 22px; background: linear-gradient(180deg, rgba(20,26,21,.94), rgba(10,14,11,.96)); box-shadow: inset 0 0 0 1px rgba(246,245,243,.08), 0 40px 80px -30px rgba(0,0,0,.8); opacity: var(--ob, 0); transform: translateY(calc((1 - var(--ob, 0)) * 30px + var(--de, 0) * var(--ddy, 0px))) scale(calc((.96 + var(--ob, 0) * .04) * (1 - var(--de, 0) * var(--dds, 0)))); transform-origin: 50% 0; } .dc-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; } .dc-head b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } .dc-sync { display: inline-flex; align-items: center; gap: 7px; font-size: 9.5px; color: var(--ice); } .dc-sync i { width: 6px; height: 6px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 8px var(--ice); } .dc-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0 0 6px; font-size: 8.5px; color: var(--ink3); text-align: center; letter-spacing: .08em; } .dc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .dc-day { position: relative; min-width: 0; height: var(--ch, 40px); padding: 4px 4px 3px; border-radius: 8px; background: rgba(246,245,243,.035); display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .dc-day .n { font-size: 10px; font-weight: 500; color: var(--ink3); line-height: 1; } .dc-day.has .n { color: var(--ink); } .ev { display: block; height: 5px; border-radius: 3px; background: rgba(160,212,228,.55); font-size: 0; transform-origin: 0 50%; animation: evIn .5s var(--ease) both; transition: background .4s; } .ev.still { animation: none; } .ev.named { background: var(--ice); } .ev.cx { background: var(--melon); } .ev.cx.re { background: var(--ice); } @keyframes evIn { from { transform: scaleX(0); opacity: 0; } } .dc-day { transition: box-shadow .35s, background .35s; } .dc-day.flash { box-shadow: inset 0 0 0 1.5px var(--ice); background: rgba(160,212,228,.1); } .dc-feed { display: grid; gap: 6px; margin-top: 12px; min-height: var(--fh, 36px); } .dc-feed li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 10px; background: rgba(160,212,228,.08); font-size: 13px; animation: chipIn .5s var(--ease) both; } .dc-feed li .d { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--ink3); text-transform: uppercase; } .dc-feed li .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .dc-feed li .s { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ice); white-space: nowrap; } .dc-feed li.still { animation: none; } .dc-feed li.cx .s { color: var(--melon); } .dc-feed li.cx .t { text-decoration: line-through; text-decoration-color: rgba(252,108,133,.7); } /* desktop: wider cells carry a label */ @media (orientation: landscape) { .c-cal .stage { --dx: 52%; --dy: 15%; --dw: 42%; --ch: 64px; --fh: 120px; } .dc-day { padding: 6px 6px 4px; gap: 3px; } .dc-day .n { font-size: 11px; } .ev { height: auto; padding: 2px 5px; font-size: 9.5px; line-height: 1.3; font-weight: 500; color: #071410; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 4px; } .ev:not(.named) { height: 6px; padding: 0; font-size: 0; } .dc-feed li { height: 34px; } } /* ============================================================ CARD 04 · THE RECEIPTS ============================================================ */ .c-books .c-bg::before { background: rgba(0, 40, 12, .62); } .books { position: absolute; z-index: 4; left: var(--dx, var(--gut)); top: var(--dy, 30%); width: var(--dw, calc(100% - 2 * var(--gut))); padding: 16px 14px 14px; border-radius: 22px; background: linear-gradient(180deg, rgba(20,26,21,.95), rgba(10,14,11,.97)); box-shadow: inset 0 0 0 1px rgba(246,245,243,.08), 0 40px 80px -30px rgba(0,0,0,.8); opacity: var(--ob, 0); transform: translateY(calc((1 - var(--ob, 0)) * 30px + var(--de, 0) * var(--ddy, 0px))) scale(calc((.96 + var(--ob, 0) * .04) * (1 - var(--de, 0) * var(--dds, 0)))); transform-origin: 50% 0; } .bk-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; } .bk-head b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; } .bk-scan { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(246,245,243,.035); } .rc { position: relative; overflow: hidden; padding: 10px 9px 12px; background: #f4efe4; color: #2a2722; font-family: var(--mono); font-size: 8.5px; line-height: 1.5; letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 10px 20px -8px rgba(0,0,0,.6); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 8px 6px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 8px 6px repeat-x; } .rc p { margin: 0; } .rc-v { font-weight: 500; font-size: 10px; text-align: center; } .rc-m { text-align: center; color: #6b665c; margin-bottom: 6px !important; } .rc-l, .rc-t { display: flex; justify-content: space-between; } .rc-t { font-weight: 500; border-top: 1px dashed #9a948a; margin-top: 4px !important; padding-top: 4px; font-size: 9.5px; } .rc-beam { position: absolute; left: 0; right: 0; top: calc(var(--rb, 0) * 100%); height: 26px; margin-top: -13px; background: linear-gradient(transparent, rgba(160,212,228,.6) 50%, transparent); border-bottom: 1.5px solid #79BDD2; opacity: var(--rbo, 0); } .rc.in { animation: rcIn .5s var(--ease) both; } @keyframes rcIn { from { opacity: 0; transform: translateY(-14px) rotate(-3deg); } } .bk-fields { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .bk-fields li { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; background: rgba(160,212,228,.08); box-shadow: inset 0 0 0 1px rgba(160,212,228,.18); opacity: .15; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .4s var(--ease); } .bk-fields li.on { opacity: 1; transform: none; } .bk-fields small { font-size: 8.5px; color: var(--ink3); letter-spacing: .1em; } .bk-fields span { font-size: 13.5px; font-weight: 600; } .bk-rows { display: grid; align-content: start; gap: 4px; margin: 12px 0 0; min-height: calc(var(--rn, 3) * 34px); } .bk-rows li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; height: 30px; padding: 0 10px; border-radius: 9px; background: rgba(246,245,243,.035); font-size: 12.5px; animation: chipIn .5s var(--ease) both; } .bk-rows li.still { animation: none; } .bk-rows .d { font-family: var(--mono); font-size: 9.5px; color: var(--ink3); letter-spacing: .06em; } .bk-rows .v { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-rows .c { font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: rgba(160,212,228,.12); color: var(--ice); } .bk-rows .a { font-variant-numeric: tabular-nums; font-weight: 500; } .bk-foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; padding: 10px 4px 0; border-top: 1px solid rgba(246,245,243,.08); } .bk-foot .mono { font-size: 9.5px; color: var(--ink3); } .bk-foot b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .bk-bars { display: flex; height: 8px; gap: 3px; margin-top: 8px; border-radius: 4px; overflow: hidden; } .bk-bars i { display: block; height: 100%; background: var(--ice); opacity: .9; transition: flex-grow .6s var(--ease); } .bk-bars i:nth-child(2n) { opacity: .55; } .bk-bars i:nth-child(3n) { opacity: .75; } @media (orientation: landscape) { .bk-scan { grid-template-columns: 150px minmax(0, 1fr); } .rc { font-size: 10px; } .rc-v { font-size: 12px; } .bk-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (orientation: landscape) and (max-width: 1240px) { .bk-fields { grid-template-columns: 1fr; gap: 4px; } .bk-fields li { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 5px 10px; } .bk-rows li { height: 34px; font-size: 13.5px; } } /* ============================================================ CARD 05 · THE PAPERWORK → one connected system ============================================================ */ .c-brain .c-bg::before { background: rgba(0, 40, 12, .62); } .brain { position: absolute; z-index: 4; left: var(--dx, var(--gut)); top: var(--dy, 30%); width: var(--dw, calc(100% - 2 * var(--gut))); padding: 16px 14px 12px; border-radius: 22px; background: radial-gradient(90% 70% at 50% 45%, rgba(160,212,228,.08), transparent 70%), linear-gradient(180deg, rgba(16,24,22,.95), rgba(8,13,11,.97)); box-shadow: inset 0 0 0 1px rgba(246,245,243,.08), 0 40px 80px -30px rgba(0,0,0,.8); opacity: var(--ob, 0); transform: translateY(calc((1 - var(--ob, 0)) * 30px)) scale(calc(.96 + var(--ob, 0) * .04)); transform-origin: 50% 0; pointer-events: none; } .is-b .brain { pointer-events: auto; } .br-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 10px; } .br-head b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; } .br-search { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 12px; background: rgba(246,245,243,.06); font-size: 14px; color: var(--ink); } .br-search .ic { width: 16px; height: 16px; color: var(--ink3); } .br-search [data-q]:empty::before { content: "Search clients, jobs, invoices…"; color: var(--ink3); } .br-search .caret { width: 1.5px; height: 16px; background: var(--ice); margin-left: -8px; animation: blink 1s steps(1) infinite; } .br-cv { display: block; width: 100%; height: var(--bh, 300px); cursor: grab; touch-action: pan-y; } .br-cv:active { cursor: grabbing; } .br-doc { display: grid; gap: 4px; margin: 0; min-height: 34px; } .br-doc li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 9px; background: rgba(160,212,228,.08); font-size: 12.5px; animation: chipIn .45s var(--ease) both; } .br-doc li.still { animation: none; } .br-doc .k { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: rgba(160,212,228,.14); color: var(--ice); } .br-doc .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .br-doc .s { font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; color: var(--ink3); text-transform: uppercase; } .br-foot { display: flex; justify-content: space-between; padding: 10px 4px 0; font-size: 9.5px; color: var(--ink3); } /* ============================================================ CARD 06 · THE CLOCK → your time back ============================================================ */ .c-clock .c-bg::before { background: rgba(0, 40, 12, .62); } .clock-body { position: relative; } .hands { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .hands [data-h] { transform-origin: 502px 503.7px; transform-box: view-box; } .tb { margin-top: 18px; padding: 16px 16px 14px; border-radius: 18px; background: rgba(246,245,243,.04); box-shadow: inset 0 0 0 1px rgba(246,245,243,.09); max-width: 440px; } .tb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; margin-bottom: 12px; font-size: 14px; color: var(--ink2); cursor: pointer; } .tb-row output { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .tb-row input { grid-column: 1 / -1; width: 100%; height: 22px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; } .tb-row input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ice) var(--v, 20%), rgba(246,245,243,.15) var(--v, 20%)); } .tb-row input::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(246,245,243,.15); } .tb-row input::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--ice); } .tb-row input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--ow, #F6F5F3); box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 0 4px rgba(160,212,228,.25); } .tb-row input::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #F6F5F3; } .tb-out { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(246,245,243,.1); } .tb-out b { font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--ice); font-variant-numeric: tabular-nums; } .tb-out span { font-size: 15px; color: var(--ink); } .tb-year { margin-top: 6px; font-size: 10.5px; color: var(--ink2); } .tb-note { margin-top: 10px; font-size: 9px; line-height: 1.6; letter-spacing: .04em; text-transform: none; color: var(--ink3); } @media (orientation: landscape) and (max-height: 800px) { .calc .c-sub .more { display: none; } .tb-row { margin-bottom: 5px !important; } .tb-note { margin-top: 6px; line-height: 1.45; } .tb-out b { font-size: 32px !important; } } @media (orientation: landscape) and (max-height: 960px) { .calc .c-sub { font-size: 15px; } .tb { margin-top: 12px; padding: 12px 14px 10px; } .tb-row { margin-bottom: 8px; font-size: 13px; } .tb-out b { font-size: 36px; } } /* ============================================================ NEXT (placeholder for the rest of the page) ============================================================ */ /* ============================================================ NO MOTION: everything readable, nothing pinned ============================================================ */ html:not(.motion):not(.play) .c-title.a, html:not(.motion) .orb, html:not(.motion) .caps, html:not(.motion) .c-glow { display: none; } html:not(.motion) .c-title.b .ln > span { transform: none; opacity: 1; } /* every story's states show at once, finished: the old way, the fix, every check ticked */ html:not(.motion) .c-old { opacity: 1 !important; transform: none !important; pointer-events: auto; max-width: 52ch; } html:not(.motion):not(.play) .c-old::after { display: none; } html:not(.motion) .c-end { transform: none !important; pointer-events: auto; } html:not(.motion):not(.play) .checks li { opacity: 1 !important; } html:not(.motion):not(.play) .checks li .ic { background: var(--ice) !important; color: var(--e900, #002500) !important; box-shadow: none !important; } html:not(.motion) .sctl:not(.fctl) { display: none; } html:not(.motion) .obj { opacity: 1 !important; } /* the panels already show these lists; keep them for screen readers only (the call transcript and the sites list stay visible) */ html:not(.motion) #calList, html:not(.motion) #booksList, html:not(.motion) #brainList { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html:not(.motion) .card .stage { height: auto; padding: 96px var(--gut) 60px; display: flex; flex-direction: column; gap: 28px; } html:not(.motion) .c-tag, html:not(.motion) .c-titles, html:not(.motion) .c-title, html:not(.motion) .c-sub, html:not(.motion) .c-end, html:not(.motion) .dcal, html:not(.motion) .books, html:not(.motion) .brain, html:not(.motion) .obj { position: relative; top: auto; left: auto; right: auto; translate: none; transform: none; } html:not(.motion) .c-sub { opacity: 1; } html:not(.motion) .c-old { position: relative; top: auto; left: auto; right: auto; width: auto; } html:not(.motion) .obj { width: min(80vw, 420px); } html:not(.motion) .c-end, html:not(.motion) .dcal, html:not(.motion) .books, html:not(.motion) .brain { opacity: 1; width: auto; } html:not(.motion) .transcript { position: relative; width: auto; height: auto; clip: auto; display: grid; gap: 10px; } html:not(.motion) .transcript li { font-size: 15px; color: var(--ink2); } html:not(.motion) .transcript b { color: var(--ice); font-weight: 500; } html:not(.motion) .hero .stage { height: 100svh; } /* phones on their side: the hero is a column (headline, then the pitch) that grows to fit, never stacked by absolute positions. Safari's toolbar makes 100lvh and 100svh differ by ~100px here, so nothing may depend on --tb. */ html.flat .hero .stage { height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 84px var(--gut) 20px; } html.flat .hero .title { position: relative; left: auto; top: auto; width: auto !important; font-size: clamp(30px, 5.4vw, 52px) !important; transform: none; z-index: 6; } html.flat .hero .title .ln { display: inline; } html.flat .hero-ui { position: relative; inset: auto; z-index: 6; padding: 0 !important; transform: none !important; opacity: 1 !important; } html.flat .hero .floor { opacity: 1; background: linear-gradient(0deg, rgba(9,10,7,.92) 0%, rgba(9,10,7,.7) 55%, rgba(9,10,7,.25) 100%); } /* wide screens without motion (phones on their side, reduced motion on a computer): words on the left, the finished demo on the right, one screen-ish per card */ @media (orientation: landscape) { html:not(.motion) .card:not(.c-over) .stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto auto auto auto 1fr; column-gap: clamp(24px, 5vw, 80px); row-gap: 18px; align-items: start; padding: 92px var(--gut) 56px; } html:not(.motion) .card:not(.c-over) .stage > .c-tag { grid-area: 1 / 1; } html:not(.motion) .card:not(.c-over) .stage > .c-titles { grid-area: 2 / 1; width: auto; } html:not(.motion) .card:not(.c-over) .stage > .c-end { width: auto; } html:not(.motion) .card:not(.c-over) .stage > .c-old { grid-area: 3 / 1; } html:not(.motion) .card:not(.c-over) .stage > .c-end { grid-area: 4 / 1; } html:not(.motion) .card:not(.c-over) .stage > .transcript { grid-area: 5 / 1; } html:not(.motion) #webStage > .wb, html:not(.motion) #phoneStage > .obj, html:not(.motion) #autoStage > .auto, html:not(.motion) #calStage > .dcal, html:not(.motion) #booksStage > .books, html:not(.motion) #brainStage > .brain, html:not(.motion) #clockStage > .obj { grid-area: 1 / 2 / 6 / 3; align-self: center; justify-self: center; width: 100%; max-width: 560px; } html:not(.motion) #autoStage > .obj, html:not(.motion) #calStage > .obj, html:not(.motion) #booksStage > .obj, html:not(.motion) #brainStage > .obj, html:not(.motion) #phoneStage > .transcript, html:not(.motion) #webStage > .transcript { display: none; } html:not(.motion) .c-title { font-size: clamp(30px, 4.6vw, 64px); } html:not(.motion) .c-title .ln > span { white-space: nowrap; } html:not(.motion) .ov { flex-direction: column; align-items: flex-start; } html:not(.motion) .ov-img { display: block; width: 100%; height: clamp(90px, 22vh, 180px); } html:not(.motion) .over { padding-top: 0; padding-bottom: 32px; justify-content: flex-start; } /* each written line stays one line; main.js shrinks it to fit */ html:not(.motion) .c-sub { --fs-sub: clamp(15px, 1.3vw, 19px); } html:not(.motion) .checks { --fs-ck: clamp(14px, 1.15vw, 17px); --ck-gap: 8px; } } @media (max-width: 900px), (pointer: coarse) and (orientation: landscape) and (max-height: 520px) { /* the nav breakpoint: same query in main.js NAVQ (phones on their side too) */ .nav-links, .hide-s { display: none; } .show-s { display: inline; } .nav { height: 56px; padding: 0 8px 0 18px; } .nav .btn { margin-left: auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* card layout variables (phone vs landscape) */ .c-cal .stage { --px: 50%; --py: 40%; --pw: min(80vw, 46vh); --pdx: 24vw; --pdy: 24vh; --pds: .62; } .c-phone .stage { --ox: 50%; --oy: 40%; --osz: min(88vw, 50vh); --cy: 58%; --ey: 36%; --px: 50%; --py: 45%; --pw: min(94vw, 58vh); --pdx: 22vw; --pdy: 21vh; --pds: .56; } @media (orientation: landscape) { .c-cal .stage { --px: 70%; --py: 14%; --pw: min(36vw, 66vh); --pdx: -55vw; --pdy: 42vh; --pds: .55; } .c-phone .stage { --ox: 69%; --oy: 44%; --osz: min(46vw, 70vh); --cx: 46%; --cr: 6%; --cy: 76%; --px: 64%; --py: 17%; --pw: min(46vw, 78vh); --pdx: -42vw; --pdy: 36vh; --pds: .5; } .caps { text-align: center; } } /* short laptop screens: keep the whole pitch on screen */ @media (orientation: landscape) and (max-height: 760px) { .c-old { font-size: 16px; } .c-title { font-size: calc(clamp(2.8rem, min(6.4vw, 10vh), 7rem) * var(--tz, 1) * var(--tw, 1)); } .c-sub { --fs-sub: 15px; } .checks { --ck-mt: 14px; --ck-gap: 6px; --fs-ck: 14px; } .checks .ic { width: 19px; height: 19px; } .c-cta { --cta-mt: 16px; } } @media (orientation: portrait) { .calc .c-sub { font-size: 14px; line-height: 1.45; } .calc .tb { margin-top: 12px; padding: 12px 12px 10px; } .calc .tb-row { margin-bottom: 6px; font-size: 13px; } .calc .tb-row input { height: 20px; } .calc .tb-out { margin-top: 2px; padding-top: 8px; } .calc .tb-out b { font-size: 34px; } .calc .tb-year { margin-top: 4px; } .calc .tb-note { margin-top: 6px; font-size: 8.5px; line-height: 1.5; } .calc .c-cta { margin-top: 14px; } } /* short phones (iPhone SE and similar): keep every pitch screen whole */ @media (orientation: portrait) and (max-height: 640px) { .c-title { font-size: clamp(2.6rem, 12.4vw, 3.4rem); } .c-sub { --fs-sub: 13.5px; line-height: 1.42; } .c-old { font-size: 14px; line-height: 1.42; } .checks { --ck-mt: 12px; --ck-gap: 5px; --fs-ck: 13.5px; } .checks .ic { width: 19px; height: 19px; } .c-cta { --cta-mt: 14px; } .calc .c-sub { display: none; } } /* ============================================================ THE COUNTER INDEX: the six things on the counter, so you always know where you are and can jump. Desktop: a glass bar at the bottom. Phones: it takes the label's place under the nav. ============================================================ */ .cidx { position: fixed; z-index: 60; left: 50%; bottom: 18px; translate: -50% 0; display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(14,16,12,.62); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(246,245,243,.1); opacity: 0; transform: translateY(14px); transition: opacity .52s var(--ease), transform .52s var(--ease); pointer-events: none; } .cidx.on, .cidx:focus-within { opacity: 1; transform: none; pointer-events: auto; } .cidx a { display: inline-flex; align-items: center; gap: 0; height: 36px; padding: 0 10px; border-radius: 999px; color: var(--ink3); text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; transition: color .26s, background .26s, gap .52s var(--ease); } .cidx a span { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .52s var(--ease), opacity .26s; } .cidx a .ic { flex: none; width: 18px; height: 18px; stroke-width: 1.5; } .cidx a:hover { color: var(--ink); } .cidx a:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; } .cidx a.cur { gap: 8px; padding: 0 14px 0 12px; color: var(--e900); background: var(--ice); } .cidx a.cur span { max-width: 120px; opacity: 1; } /* the narrowest phones (≤350 px): the current pill shows its icon only, so all seven fit; its name stays for screen readers */ @media (max-width: 350px) { html .cidx a.cur { gap: 0; padding: 0 9px; } html .cidx a.cur span { position: absolute; width: 1px; height: 1px; max-width: none; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } @media (orientation: portrait) { .cidx { bottom: auto; top: 78px; left: var(--gut); translate: none; padding: 3px; } .cidx a { height: 30px; padding: 0 8px; font-size: 12px; } .cidx a .ic { width: 16px; height: 16px; } .cidx a.cur { padding: 0 11px 0 9px; gap: 7px; } html.motion .card .c-tag { visibility: hidden; } } html:not(.motion) .cidx { display: none; } @media (prefers-reduced-motion: reduce) { .cidx, .cidx a, .cidx a span { transition: none; } } /* ============================================================ THE LIVING COUNTER: the hero photo, alive. Everything sits in the photo's own pixel space (an SVG / box laid over the cover-fitted plate) and lives inside the layer it belongs to, so it moves with that layer and never looks pasted on. ============================================================ */ .live { position: absolute; left: var(--ix, 0); top: var(--iy, 0); width: var(--iw, 100%); height: var(--ih, 100%); overflow: visible; pointer-events: none; } /* placed by script after the first paint: hidden until then, or the move counts as a layout shift (CLS was 0.77). The title is only hidden under .motion, where its words already wait at opacity 0 for .ready */ #heroStage:not([style*="--iw"]) .live, html.motion #heroStage:not([style*="--iw"]) .title, .steam:not([style*="left"]) { visibility: hidden; } .lv-led { opacity: 0; } html.motion .lv-led { animation: lvBlink 1.1s steps(1) infinite; } @keyframes lvBlink { 0%, 62% { opacity: 0; } 63%, 100% { opacity: 1; } } .lv-ink { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; fill: rgb(17, 7, 1); mix-blend-mode: multiply; } .steam { position: absolute; left: 0; top: 0; pointer-events: none; } /* the old monitor runs the 2004 desktop: mapped onto the glass corners with a perspective matrix */ /* the little screen in the hero photo: a still of the desktop in a box --hf of 1100x825 (placeLive picks the size it is actually shown at), so Safari never holds a full-size layer for a ~150 px screen (pinch-zoom ran it out of memory) */ .hcrt { --hf: 1; position: absolute; left: 0; top: 0; width: calc(1100px * var(--hf)); height: calc(825px * var(--hf)); transform-origin: 0 0; border-radius: calc(34px * var(--hf)) / calc(30px * var(--hf)); overflow: hidden; background: #050605; visibility: hidden; box-shadow: 0 0 calc(60px * var(--hf)) calc(6px * var(--hf)) rgba(120, 175, 255, .16); } .hcrt.on { visibility: visible; } .hcrt-in { position: absolute; inset: 0; } .hcrt-in img { display: block; width: 100%; height: 100%; } .hcrt-in .xp { position: absolute; inset: 0; min-height: 0; --xps: 1; --xph: 825px; filter: saturate(.8) contrast(1.05) brightness(.8); } .hcrt-in .xp-update { display: none; } .hcrt::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background: radial-gradient(60% 50% at 26% 16%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%), repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 calc(1.5px * var(--hf)), rgba(0,0,0,0) calc(1.5px * var(--hf)) calc(4px * var(--hf))), radial-gradient(120% 115% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.72) 100%); box-shadow: inset 0 0 calc(40px * var(--hf)) calc(10px * var(--hf)) rgba(0,0,0,.75); } html.pinch .hcrt { visibility: hidden; } /* zoomed in with two fingers: the decorative screen steps out, nothing else re-renders bigger */ html.motion .hcrt.on .hcrt-in { animation: hcrtFlick 6s steps(1) infinite; } @keyframes hcrtFlick { 0%, 100% { opacity: 1; } 41% { opacity: .92; } 42% { opacity: 1; } 83% { opacity: .95; } 84% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .lv-led, .hcrt-in { animation: none !important; } } @media (orientation: portrait) { @keyframes sway { 0%, 100% { transform: rotate(-1.8deg); } 50% { transform: rotate(1.8deg); } } } /* ============================================================ AFTER THE COUNTER: the page brightens into now. Off-white paper, emerald ink, icy accents. Calm, readable, fast: no heavy 3D here. ============================================================ */ .now { --paper: #F6F5F3; --paper2: #ECEBE6; --inkE: #002500; --inkE2: rgba(0,37,0,.74); --inkE3: rgba(0,37,0,.66); --teal: #2f6f80; --line: rgba(0,37,0,.13); position: relative; z-index: 7; margin-top: -28px; color: var(--inkE); } /* each section is its own card in its own colour; it slides over the one before, which stays pinned */ .pcard { position: sticky; top: var(--st, 0px); border-radius: 28px 28px 0 0; box-shadow: 0 -30px 80px rgba(0,0,0,.42), 0 -1px 0 rgba(255,255,255,.08); } .pc-paper { background: var(--paper); } .pc-ice { background: #A0D4E4; --teal: #00402a; --line: rgba(0,37,0,.16); --paper: #A0D4E4; --paper2: rgba(246,245,243,.45); } .pc-emerald { background: var(--e800); color: var(--ink); --inkE: var(--ink); --inkE2: var(--ink2); --inkE3: var(--ink3); --teal: var(--ice); --line: rgba(246,245,243,.14); --paper: var(--e800); } .pc-melon { background: var(--melon); --teal: #001A00; --inkE2: rgba(0,26,0,.82); --line: rgba(0,26,0,.18); } .sec { padding: clamp(76px, 9vw, 140px) 0 clamp(84px, 10vw, 150px); } .eyebrow { color: var(--teal); margin-bottom: 18px; } .h2 { font-size: clamp(2.3rem, 5.6vw, 5.2rem); font-weight: 600; line-height: .98; letter-spacing: -0.045em; max-width: 16ch; text-wrap: balance; } .h2 em { color: var(--teal); font-size: 1.04em; } .lead { max-width: 52ch; margin-top: 22px; font-size: clamp(16px, 1.3vw, 19px); color: var(--inkE2); text-wrap: pretty; } .now .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 9.5px; letter-spacing: .1em; background: var(--inkE); color: var(--ice); } .now .tag.pre { background: transparent; color: var(--inkE2); box-shadow: inset 0 0 0 1px var(--line); } /* the work: real homepages in a browser frame */ .tiles { list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); } .tile { grid-column: span var(--sp, 4); } /* --sp per tile from main.js: every row fills the width */ .tile a { display: block; height: 100%; text-decoration: none; color: inherit; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 var(--line), 0 18px 40px -26px rgba(0,37,0,.35); overflow: hidden; transition: transform .52s var(--ease), box-shadow .52s var(--ease); } .tile a:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--line), 0 30px 60px -28px rgba(0,37,0,.45); } .tile a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .tile-shot { position: relative; display: block; aspect-ratio: 16 / 10.6; overflow: hidden; background: linear-gradient(160deg, #EDECE7, #DEDCD5); } /* the same site on a computer and on a phone, side by side: the whole desktop screen on the left, the phone standing at its right edge (it only ever overlaps the desktop's outer edge, never a headline) */ .tile-dk { position: absolute; left: 5%; top: 50%; width: 70%; aspect-ratio: 1000 / 637; translate: 0 -50%; border-radius: 6px; overflow: hidden; background: #0d0f0c; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 18px 34px -16px rgba(0,30,0,.45); } .tile-dk::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 7px; background: #1b1d19; } /* the window's top bar */ .tile-dk img { position: absolute; left: 0; top: 7px; width: 100%; height: calc(100% - 7px); object-fit: cover; object-position: 50% 0; transition: transform 1.2s var(--ease); } .tile a:hover .tile-dk img { transform: scale(1.03); } .tile-ph { position: absolute; z-index: 2; right: 5%; top: 50%; height: 80%; aspect-ratio: 506 / 1088; padding: 3px; border-radius: 11px; translate: 0 -50%; background: #0d0f0c; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 18px 30px -12px rgba(0,30,0,.55); transition: transform .52s var(--ease); } .tile-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 8px; } .tile a:hover .tile-ph { transform: translateY(-4px); } .tile-cap { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n go" "w tag"; gap: 4px 12px; align-items: center; padding: 14px 16px 16px; } .tile-cap b { grid-area: n; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .tile-what { grid-area: w; font-size: 13.5px; color: var(--inkE3); } .tile-cap .tag { grid-area: tag; justify-self: end; } .tile-go { grid-area: go; justify-self: end; color: var(--teal); } .tile-go .ic { width: 18px; height: 18px; transition: transform .26s var(--ease); } .tile a:hover .tile-go .ic { transform: translate(2px, -2px); } .legend { margin-top: 22px; color: var(--inkE3); font-size: 10px; text-transform: none; letter-spacing: .04em; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* how it works: three real steps, joined by a line */ .steps { list-style: none; margin: clamp(40px, 5vw, 68px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); counter-reset: s; } .step { position: relative; padding-top: 30px; border-top: 1px solid var(--line); } .step-n { position: absolute; top: -1px; left: 0; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); color: var(--teal); box-shadow: inset 0 0 0 1px var(--line); font: italic 400 26px/1 var(--serif); color: var(--teal); } .step h3 { margin: 18px 0 10px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -0.02em; } .step p { margin: 0; font-size: 15.5px; color: var(--inkE2); text-wrap: pretty; } .ahead { margin-top: clamp(32px, 4vw, 56px); padding: clamp(22px, 2.6vw, 34px); border-radius: 20px; background: var(--paper2); display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; align-items: baseline; } .ahead .mono { grid-column: 1; color: var(--teal); font-size: 10px; } .ahead h3 { grid-column: 1; margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } .ahead p:last-child { grid-column: 2; grid-row: 1 / span 2; margin: 0; max-width: 62ch; color: var(--inkE2); font-size: 15.5px; } /* about */ .about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: center; } .about-photo { margin: 0; position: relative; max-width: 460px; justify-self: center; width: 100%; } .about-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 30%; border-radius: 24px; box-shadow: 0 30px 70px -40px rgba(0,37,0,.55); } .about-photo figcaption { position: absolute; left: 16px; bottom: 16px; display: grid; padding: 10px 14px; border-radius: 14px; color: #002500; background: rgba(246,245,243,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .about-photo figcaption b { font-size: 15px; font-weight: 600; } .about-photo figcaption span { font-size: 12.5px; color: rgba(0,37,0,.55); } .about-copy .h2 { margin-bottom: 26px; } .about-copy p:not(.eyebrow) { max-width: 56ch; margin: 0 0 16px; font-size: clamp(16px, 1.25vw, 18px); color: var(--inkE2); text-wrap: pretty; } /* apply: the one emerald moment */ .apply-panel { position: relative; } .apply-panel .h2 { max-width: 13ch; font-size: clamp(2.6rem, 7vw, 6.4rem); } .apply-panel .h2 em { color: #001A00; } .apply-panel > p { max-width: 50ch; margin: 24px 0 36px; font-size: clamp(16px, 1.35vw, 20px); color: var(--inkE2); } .pc-melon .btn-ice { background: #001A00; color: var(--ink); } .pc-melon .btn-ice:hover { background: var(--e800); box-shadow: 0 14px 40px -14px rgba(0,26,0,.6); } .pc-melon .micro { color: rgba(0,26,0,.7); } .apply-panel .cta-row { position: relative; } /* footer */ .foot { background: var(--e900); color: var(--ink2); padding: clamp(56px, 7vw, 96px) 0 28px; } .foot-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; } .foot-brand img { width: 150px; height: auto; margin-bottom: 16px; } .foot-brand p { max-width: 30ch; font-size: 14px; } .foot-h { color: var(--ice); margin-bottom: 14px; font-size: 10.5px; } .foot p { margin: 0 0 8px; font-size: 14px; } .foot a { color: var(--ink2); text-decoration: none; transition: color .26s; } .foot a:hover { color: var(--ink); } .foot-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(246,245,243,.1); font-size: 12.5px; color: var(--ink3); } .foot-base p { margin: 0; } /* reveal: rise + fade as each piece arrives */ html.motion .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); } html.motion .rv.in { opacity: 1; transform: none; } @media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile { grid-column: auto; } .tiles.odd .tile:last-child { order: -1; grid-column: 1 / -1; } .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } } /* tablets: the full-width tile becomes a banner, so it leads the grid without outweighing it */ @media (min-width: 600px) and (max-width: 1000px) { .tiles.odd .tile:last-child .tile-shot { aspect-ratio: 16 / 7.4; } .tiles.odd .tile:last-child .tile-dk { width: 58%; left: 8%; } .tiles.odd .tile:last-child .tile-ph { right: 10%; height: 84%; } } @media (max-width: 760px) { .tiles { gap: 12px; } .tile a { border-radius: 14px; } .tile-dk { border-radius: 4px; } .tile-dk::before { height: 4px; } .tile-dk img { top: 4px; height: calc(100% - 4px); } .tile-ph { padding: 2px; border-radius: 7px; } .tile-ph img { border-radius: 5px; } .tile-cap { grid-template-areas: "n n" "w w" "tag go"; padding: 10px 11px 12px; } .tile-cap b { font-size: 14px; } .tile-what { font-size: 12px; } .tile-cap .tag { justify-self: start; margin-top: 4px; } .legend { font-size: 9px; } .steps { grid-template-columns: 1fr; gap: 0; } .step { padding: 0 0 30px 64px; border-top: 0; border-left: 1px solid var(--line); margin-left: 22px; } .step:last-child { padding-bottom: 6px; } .step-n { left: -23px; top: 0; translate: 0 0; } .step h3 { margin-top: 8px; } .ahead { grid-template-columns: 1fr; } .ahead p:last-child { grid-column: 1; grid-row: auto; margin-top: 8px; } .about-grid { grid-template-columns: 1fr; } .about-photo { max-width: 360px; } .apply-panel .cta-row .btn { flex: 1; } .foot-base { flex-direction: column; } } .sec-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; } .sec-head .lead { margin: 0; } @media (max-width: 760px) { .sec-head { grid-template-columns: 1fr; } .about-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .about-copy { display: contents; } .about-copy .eyebrow { order: 1; } .about-copy .h2 { order: 2; margin-bottom: 22px; } .about-photo { order: 3; max-width: 62%; margin: 0 0 24px; justify-self: auto; } .about-photo img { border-radius: 18px; } .about-photo figcaption { left: 10px; bottom: 10px; padding: 7px 10px; border-radius: 10px; } .about-photo figcaption b { font-size: 13px; } .about-photo figcaption span { font-size: 11px; } .about-copy p:not(.eyebrow) { order: 4; } } /* stop points: each card holds its finished state; a flick stops there (phones) */ /* phones: the hero is first seen with Safari's toolbar showing, so its pitch sits above it */ html.touch .hero-ui { padding-bottom: calc(clamp(22px, 4vh, 44px) + var(--tb, 0px)); } @media (orientation: portrait) { html.touch .hero-ui { padding-bottom: max(64px, calc(env(safe-area-inset-bottom) + 34px)); row-gap: 24px; } /* the headline stays put under the nav while the counter comes closer */ .title { transform-origin: 0 0; transform: translate3d(0, calc(var(--hp, 0) * -1 * var(--tup, 0px)), 0) scale(calc(1 - var(--hp, 0) * .06 * var(--hz, 1))); } } /* colour options for the cards after the counter (review: ?pc=a | ?pc=b) */ /* A · paper and accents: every card is paper (two tones alternate), colour lives in the details */ html[data-pc="a"] .pc-ice { background: #ECEBE6; --paper: #ECEBE6; --paper2: #F6F5F3; --teal: #2f6f80; --line: rgba(0,37,0,.13); } html[data-pc="a"] .pc-ice .step-n { background: #A0D4E4; color: #002500; box-shadow: none; } html[data-pc="a"] .pc-emerald { background: #F6F5F3; color: #002500; --inkE: #002500; --inkE2: rgba(0,37,0,.74); --inkE3: rgba(0,37,0,.66); --teal: #2f6f80; --line: rgba(0,37,0,.13); --paper: #F6F5F3; } html[data-pc="a"] .pc-emerald .about-photo img { box-shadow: 18px 18px 0 #002500; } html[data-pc="a"] .pc-melon { background: #ECEBE6; } html[data-pc="a"] .pc-melon .apply-panel { padding: clamp(40px, 7vw, 110px) clamp(24px, 6vw, 96px); border-radius: 28px; background: #002500; color: #F6F5F3; --inkE2: rgba(246,245,243,.74); } html[data-pc="a"] .pc-melon .apply-panel .h2 em { color: #FC6C85; } html[data-pc="a"] .pc-melon .btn-ice { background: #A0D4E4; color: #001A00; } html[data-pc="a"] .pc-melon .micro { color: rgba(246,245,243,.6); } /* B · soft tints: each card a quiet tint of the palette; one deep emerald finale with a melon spark */ html[data-pc="b"] .pc-ice { background: #DDEFF5; --paper: #DDEFF5; --paper2: rgba(246,245,243,.6); --teal: #2f6f80; --line: rgba(0,37,0,.13); } html[data-pc="b"] .pc-emerald { background: #E4EBE3; color: #002500; --inkE: #002500; --inkE2: rgba(0,37,0,.74); --inkE3: rgba(0,37,0,.66); --teal: #2f6f80; --line: rgba(0,37,0,.13); --paper: #E4EBE3; } html[data-pc="b"] .pc-melon { background: #002500; color: #F6F5F3; --inkE2: rgba(246,245,243,.74); --line: rgba(246,245,243,.14); } html[data-pc="b"] .pc-melon .apply-panel .h2 em { color: #FC6C85; } html[data-pc="b"] .pc-melon .btn-ice { background: #A0D4E4; color: #001A00; } html[data-pc="b"] .pc-melon .micro { color: rgba(246,245,243,.6); } /* phones: the counter only creeps closer, so it never swallows the headline */ @media (orientation: portrait) { .front { transform: translate3d(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 6px), 0) scale(calc(1.03 + var(--hp, 0) * .05)); } } /* melon = the problem, icy = the fix: a small melon label over each card's old-way copy */ .c-old .way { display: block; margin-bottom: 10px; color: var(--melon); font-size: 10.5px; } /* the Apply card and the footer sit together; the footer follows instead of sliding over */ .pcard.apply, .pcard.foot { position: relative; top: auto; } .pcard.foot { border-radius: 0; box-shadow: none; } /* phones: the story plays itself once a card lands, so a card needs little scroll room */ /* scroll lengths: 2 screens of mechanics (pin + cover) + the dwell + the story itself (--sp) */ html.motion .card { --sp: 1; height: calc(var(--S) * (2 + var(--dw, 0) + var(--sp))); } html.motion .card.c-web { --sp: 1.5; } html.motion.touch .card { --sp: .85; } html.motion.touch .card.c-web { --sp: 1.3; } html.motion .hero { height: calc(var(--S) * (2 + var(--hs, .35) + var(--dw, 0))); } html.motion .now { margin-top: calc(var(--S) * -1); } /* footer: a card, like every section */ .pcard.foot { border-radius: 28px 28px 0 0; margin-top: -28px; box-shadow: 0 -24px 60px rgba(0,0,0,.25); } /* phones: the counter comes closer again as you scroll (depth), the headline is kept clear of it */ @media (orientation: portrait) { .front { transform-origin: 50% 0%; transform: translate3d(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 6px + var(--hp, 0) * var(--crt-y, 30vh) * -.16 * var(--hz, 1)), 0) scale(calc(1.03 + var(--hp, 0) * .16 * var(--hz, 1))); } } /* ============================================================ CHAPTER 3 OPENER · AUTOMATION: eight things every business does by hand, scattered, snap into one connected system (one module at a time, as you scroll) ============================================================ */ .c-auto { z-index: 2; } .c-auto .c-bg { background-image: url("assets/scene/counter-blur.jpg"); } .auto { position: absolute; z-index: 4; left: var(--dx, var(--gut)); top: var(--ay, 40%); width: var(--dw, calc(100% - 2 * var(--gut))); padding: 16px 14px 14px; border-radius: 22px; transform-origin: 50% 0; transform: scale(var(--as, 1)); opacity: var(--aa, 1); background: linear-gradient(180deg, rgba(20,26,21, calc(var(--ob, 0) * .95)), rgba(10,14,11, calc(var(--ob, 0) * .97))); box-shadow: inset 0 0 0 1px rgba(246,245,243, calc(var(--ob, 0) * .08)); } .auto-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; opacity: var(--ob, 0); } .auto-head b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; } .mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mod { --k: 0; position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px 12px; border-radius: 14px; background: rgba(246,245,243, calc(.05 + var(--k) * .02)); box-shadow: inset 0 0 0 1px rgba(160,212,228, calc(var(--k) * .45)); transform: translate(calc((1 - var(--k)) * var(--mx0, 0px)), calc((1 - var(--k)) * var(--my0, 0px))) rotate(calc((1 - var(--k)) * var(--mr0, 0deg))); transition: background .4s, box-shadow .4s; } .mod-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(246,245,243,.07); color: rgba(246,245,243,.55); transition: background .4s, color .4s; } .mod.on .mod-ic { background: var(--ice); color: var(--e900); } .mod-ic .ic { width: 18px; height: 18px; stroke-width: 1.6; } .mod-t { display: grid; min-width: 0; } .mod-t b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mod-old, .mod-new { grid-area: 2 / 1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .35s; } .mod-old { color: var(--melon); opacity: .9; } .mod-new { color: var(--ink3); opacity: 0; } .mod.on .mod-old { opacity: 0; } .mod.on .mod-new { opacity: 1; } .mod-dot { position: absolute; right: 10px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px rgba(160,212,228,.8); opacity: 0; transition: opacity .35s; } .mod.on .mod-dot { opacity: 1; } .auto-foot { margin: 12px 4px 0; font-size: 13px; line-height: 1.45; color: var(--ink3); opacity: var(--ob, 0); text-wrap: pretty; } @media (orientation: portrait) { .mods { gap: 6px; } .mod { padding: 9px 9px; gap: 8px; border-radius: 12px; } .mod-ic { width: 28px; height: 28px; border-radius: 8px; } .mod-ic .ic { width: 15px; height: 15px; } .mod-t b { font-size: 12.5px; } .mod-old, .mod-new { font-size: 10.5px; } .auto-head b { font-size: 16px; } .auto-foot { font-size: 11.5px; } .auto { padding: 12px 10px 10px; } } html:not(.motion) .auto { position: relative; top: auto; left: auto; transform: none; width: auto; } html:not(.motion):not(.play) .auto { --ob: 1; } html:not(.motion):not(.play) .mod { --k: 1; } /* the index: three chapters, the automation examples grouped under theirs */ .cidx-grp { display: inline-flex; gap: 2px; padding: 0 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(246,245,243,.08); } .cidx a.sub .ic { width: 15px; height: 15px; } /* the tools strip: the stack behind every build, running inside the How it works card */ .tools { margin-top: clamp(40px, 5vw, 64px); } .tools .eyebrow { margin-bottom: 18px; } .tools-run { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .tools-track { flex: none; display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); margin: 0; padding: 0 0 0 clamp(40px, 5vw, 72px); list-style: none; animation: toolsRun 46s linear infinite; } .tools-track li { flex: none; display: flex; align-items: center; gap: 10px; color: var(--inkE, #002500); opacity: .8; font-size: clamp(15px, 1.2vw, 17px); font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; } .tools-track li::before { content: ""; flex: none; width: clamp(22px, 2vw, 26px); aspect-ratio: var(--r); background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; } .tools-run:hover .tools-track { animation-play-state: paused; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } @keyframes toolsRun { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .tools-track { animation: none; flex-wrap: wrap; row-gap: 22px; } .tools-track[aria-hidden] { display: none; } .tools-run { mask-image: none; -webkit-mask-image: none; } } /* each light card holds at its end for a beat before the next slides over (same rule as the counter) */ html.motion .pcard + .pcard:not(.foot) { margin-top: 38vh; } html.motion.touch .pcard + .pcard:not(.foot) { margin-top: 30vh; } /* ============================================================ THE FINALE: the logo in real-time 3D. The page holds for a moment while it assembles. It opens the footer card (same green), so the two read as one. ============================================================ */ .fin { position: relative; z-index: 7; margin-top: -28px; background: var(--e900); border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px rgba(0,0,0,.25); } /* a band at the top of the footer card: the logo builds as the footer rises into view */ .fin-stage { position: relative; height: clamp(220px, 34vh, 400px); overflow: hidden; display: grid; place-items: center; } @media (orientation: portrait) { .fin-stage { height: clamp(150px, 42vw, 260px); } } .fin-gl { position: absolute; inset: 0; touch-action: pan-y; } .fin-gl canvas { display: block; width: 100%; height: 100%; } .fin-gl.grab { cursor: grabbing; } @media (pointer: fine) { .fin-gl { cursor: grab; } } .fin-glow { position: absolute; left: 50%; top: 50%; width: min(70vw, 900px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(160,212,228,.5), rgba(160,212,228,.08) 50%, rgba(160,212,228,0)); opacity: 0; pointer-events: none; } .fin-still { width: auto; max-width: min(86vw, 1100px); height: auto; max-height: calc(100% - 24px); opacity: 0; } /* whole logo incl. the j's tail at any height */ html:not(.motion) .fin-still, .fin.nogl .fin-still { opacity: 1; } .fin.ready .fin-still { display: none; } .fin-hint { position: absolute; bottom: 4%; left: 50%; translate: -50% 0; color: var(--ink3); font-size: 10px; opacity: 0; transition: opacity .8s var(--ease); } @media (pointer: fine) { .fin.ready .fin-hint { opacity: .8; } } .pcard.foot { border-radius: 0; margin-top: 0; box-shadow: none; } /* every light card fills the screen, so the next one never shows below a short one */ html.motion .pcard:not(.foot) { min-height: var(--S); display: flex; flex-direction: column; justify-content: center; } html.motion .pcard:not(.foot) > .wrap { width: 100%; } .fin + .foot { padding-top: clamp(8px, 2vw, 28px); } /* phones + upright tablets: the whole sign-off (3D logo + footer) fits one screen under the nav at the very bottom. The links flow in short lines; main.js sizes the logo's stage to the room that is left (fitFin). */ @media (orientation: portrait) and (max-width: 900px) { .fin + .foot { padding: 4px 0 calc(18px + env(safe-area-inset-bottom)); } .foot-grid { grid-template-columns: 1fr 1fr; gap: 16px 20px; } .foot-brand { grid-column: 1 / -1; } .foot-brand p { font-size: 13.5px; } .foot-grid > div:nth-child(3) { grid-column: 1 / -1; grid-row: 2; } .foot-grid > div:nth-child(3) p:not(.foot-h) { display: inline-block; margin: 0 18px 6px 0; } .foot-h { margin-bottom: 8px; } .foot p { font-size: 13.5px; margin-bottom: 6px; } .foot-base { flex-direction: row; align-items: center; margin-top: 18px; padding-top: 14px; } .foot-base a { white-space: nowrap; } } /* the old way of the back office: a stack of hand-labelled floppy disks; the system replaces it */ .disks-body { position: relative; } .c-auto .auto { opacity: calc(var(--ob, 0) * var(--aa, 1)); } /* ============================================================ MENU: a button in the nav opens every section, one tap away ============================================================ */ .nav-menu { display: none; flex: none; width: 44px; height: 44px; margin-left: 2px; border: 0; border-radius: 999px; background: rgba(246,245,243,.08); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; } .nav-menu .ic { width: 22px; height: 22px; stroke-width: 1.5; } .nav-menu path { transition: transform .32s var(--ease), opacity .2s; transform-origin: 12px 12px; } .nav-menu[aria-expanded="true"] .m1 { transform: translateY(5px) rotate(45deg); } .nav-menu[aria-expanded="true"] .m2 { opacity: 0; } .nav-menu[aria-expanded="true"] .m3 { transform: translateY(-5px) rotate(-45deg); } .nav-menu:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; } @media (max-width: 900px), (pointer: coarse) and (orientation: landscape) and (max-height: 520px) { .nav-menu { display: inline-flex; } .nav .btn { margin-left: auto; } } .msheet { position: fixed; z-index: 45; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: rgba(4, 8, 5, .9); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); opacity: 0; transition: opacity .26s var(--ease); } .msheet.open { opacity: 1; } .msheet[hidden] { display: none; } .msheet-in { display: flex; flex-direction: column; gap: 4px; max-width: 520px; margin: 0 auto; padding: 96px var(--gut) calc(40px + env(safe-area-inset-bottom)); transform: translateY(12px); transition: transform .52s var(--ease); } .msheet.open .msheet-in { transform: none; } .msheet-eye { color: var(--ice); margin: 18px 0 6px; } .msheet-eye:first-child { margin-top: 0; } .msheet a { text-decoration: none; } .mi { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 4px; border-bottom: 1px solid rgba(246,245,243,.08); color: var(--ink2); font-size: 15px; } .mi .ic { width: 20px; height: 20px; stroke-width: 1.5; color: var(--ice); flex: none; } .mi.big { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .mi:hover, .mi:focus-visible { color: var(--ink); } .msub, .mrow { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 12px 34px; border-bottom: 1px solid rgba(246,245,243,.08); } .mrow { padding-left: 0; border: 0; } .msub a, .mrow a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(246,245,243,.07); color: var(--ink); font-size: 14px; font-weight: 500; } .mrow a { font-size: 15px; min-height: 44px; padding: 0 16px; } .msub a:focus-visible, .mrow a:focus-visible, .mi:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; } .mapply { margin-top: 26px; width: 100%; } @media (prefers-reduced-motion: reduce) { .msheet, .msheet-in { transition: none; } } /* ============================================================ WHAT I BUILD: the three services on one screen; each opens its demo ============================================================ */ .c-over { z-index: 1; } html.motion .card.c-over { --sp: 0; } .over { position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; justify-content: center; max-width: 1180px; margin: 0 auto; padding: 110px var(--gut) calc(40px + env(safe-area-inset-bottom)); } .over .eyebrow { color: var(--ice); margin-bottom: 14px; } .over-h { font-size: clamp(30px, 4.4vw, 58px); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; max-width: 16ch; } .over-h em { color: var(--ice); font-size: 1.06em; } .over-list { list-style: none; margin: clamp(22px, 4vh, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ov { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 18px 18px 20px; border-radius: 22px; text-decoration: none; background: rgba(246,245,243,.05); box-shadow: inset 0 0 0 1px rgba(246,245,243,.1); transition: background .26s var(--ease), box-shadow .26s var(--ease), transform .52s var(--ease); } .ov:hover { background: rgba(246,245,243,.08); box-shadow: inset 0 0 0 1px rgba(160,212,228,.35); transform: translateY(-3px); } .ov:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; } .ov-img { position: relative; display: block; height: clamp(110px, 20vh, 210px); } .ov-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0,0,0,.55)); } .ov-t { display: flex; flex-direction: column; gap: 6px; } .ov-t b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; } .ov-t span { color: var(--ink2); font-size: 14.5px; line-height: 1.5; } .ov > .ic { position: absolute; right: 18px; top: 18px; width: 20px; height: 20px; stroke-width: 1.5; color: var(--ice); } .over-note { margin-top: 22px; color: var(--ink3); } /* phones: three rows, picture on the left (tablets keep the three columns) */ @media (max-width: 760px) { .over { justify-content: flex-start; padding-top: calc(var(--ct, 130px) - 10px); } .over-h { font-size: clamp(28px, 8vw, 40px); } .over-list { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; } .ov { flex-direction: row; align-items: center; gap: 14px; padding: 12px 40px 12px 12px; border-radius: 18px; } .ov-img { flex: none; width: 76px; height: 76px; } .ov-t b { font-size: 16.5px; } .ov-t span { font-size: 13.5px; line-height: 1.42; } .ov > .ic { top: 50%; translate: 0 -50%; right: 14px; } .over-note { margin-top: 16px; } } /* short phones held upright (SE 375x667, Safari's page on a 393 phone): everything incl. the button must fit one screen */ @media (max-width: 760px) and (max-height: 820px) and (orientation: portrait) { .over-list { gap: 8px; margin-top: 14px; } .ov { gap: 12px; padding: 10px 36px 10px 10px; border-radius: 16px; } .ov-img { width: 52px; height: 52px; } .ov-t { gap: 3px; } .ov-t b { font-size: 15.5px; } .ov-t span { font-size: 13px; line-height: 1.36; } .over .over-out { margin-top: 14px; gap: 6px 18px; } .over .over-note { display: none; } } .over.fit1 .over-skip { display: none; } /* set by fitOver(): no room; scrolling does the same */ .over.fit2 .ov-img { display: none; } .over.fit2 .ov { padding-left: 14px; } .over.fit2 .over-h { font-size: 26px; } /* iPhone SE 1st gen */ .over.fit3 .eyebrow { display: none; } .over.fit3 { padding-top: calc(var(--ct, 130px) - 52px); } .over.fit3 .over-list { margin-top: 10px; gap: 6px; } .over.fit3 .over-out { margin-top: 10px; } /* tablets held upright: What I build fills the screen as three big rows (pictures large enough to read as objects) */ @media (orientation: portrait) and (min-width: 700px) { .over { justify-content: center; padding-top: 120px; } .over-h { font-size: clamp(44px, 7vw, 76px); } .over-list { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; } .ov { flex-direction: row; align-items: center; gap: 28px; padding: 18px 72px 18px 18px; border-radius: 24px; } .ov-img { flex: none; width: clamp(130px, 14vh, 200px); height: clamp(130px, 14vh, 200px); } .ov-t { gap: 8px; } .ov-t b { font-size: clamp(22px, 3vw, 28px); } .ov-t span { font-size: clamp(16px, 2.1vw, 19px); line-height: 1.45; } .ov > .ic { top: 50%; translate: 0 -50%; right: 26px; width: 26px; height: 26px; } .over .over-out { margin-top: 26px; } .over-sub { font-size: 19px; } /* About: photo and story side by side, both filling their half (Jean: photo-on-top left the right side empty) */ .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 48px); align-items: center; } .about-photo img { aspect-ratio: 3 / 4; } .about-photo { max-width: none; justify-self: stretch; } .about-copy .h2 { font-size: clamp(44px, 6.4vw, 68px); } .about-copy p:not(.eyebrow) { font-size: clamp(17px, 2.1vw, 21px); line-height: 1.6; } } html:not(.motion) .over { position: relative; } html.menu-open .cidx { opacity: 0; pointer-events: none; } html.menu-open .nav { z-index: 60; } .msheet { z-index: 55; } /* short screens (phones on their side): three tiles in a row, no pictures */ @media (max-height: 520px) and (orientation: landscape) { .over { justify-content: flex-start; padding-top: 84px; padding-bottom: 16px; } .over-h { font-size: 26px; max-width: none; } .over .eyebrow { margin-bottom: 8px; } .over-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .ov { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 34px 14px 14px; border-radius: 16px; } .ov-img { display: none; } .ov-t b { font-size: 15px; } .ov-t span { font-size: 12.5px; line-height: 1.4; } .ov > .ic { top: 14px; translate: none; right: 12px; } .over-note { margin-top: 12px; } } /* ============================================================ CARDS MODE (phones + tablets): pure CSS sticky cards, Safari owns the scroll, stories play by time ============================================================ */ html.motion.cards .card { height: calc(var(--S) * 2.1); } /* lands, holds ~0.1 screen, the next slides over */ html.cards .now { position: relative; } html.snap { scroll-snap-type: y proximity; } .snapm { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; visibility: hidden; } html.snap .snapm { scroll-snap-align: start; scroll-snap-stop: always; } .snapm.hero-m { top: calc(var(--S) * (var(--hs, .5) + var(--dw, .25) * .5)); } /* the story's controls: pause, show the fix, replay */ .sctl { display: none; } html.cards .sctl { display: flex; position: absolute; z-index: 35; right: 14px; bottom: calc(100lvh - 100svh + 16px); gap: 8px; align-items: center; } .sctl button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; min-width: 38px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(10, 14, 10, .72); color: var(--ink); font: 500 13px/1 var(--sans); box-shadow: inset 0 0 0 1px rgba(246,245,243,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .sctl .sc-pause { padding: 0; width: 38px; } .sctl .sc-fix { color: var(--ice); } .sctl .ic { width: 16px; height: 16px; stroke-width: 1.8; } .sctl button[hidden] { display: none; } .sctl button:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; } /* a jump cuts behind a quick fade */ .veil { position: fixed; inset: 0; z-index: 70; background: #021208; opacity: 0; pointer-events: none; transition: opacity .16s var(--ease); } .veil.on { opacity: 1; } /* menu rows carry an arrow on the right */ .mi.big { justify-content: space-between; min-height: 60px; font-size: 24px; } .mi.big .ic { color: var(--ice); } /* the overview's way out */ .over-out { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 20px; } .over-skip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--ice); font-size: 15px; font-weight: 500; text-decoration: none; } .over-skip .ic { width: 18px; height: 18px; stroke-width: 1.5; } .over-skip:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 6px; } @media (max-height: 520px) and (orientation: landscape) { .over-out { margin-top: 10px; } .over-note { display: none; } } /* mandatory snapping: every resting place is a card's landing, the hero, or inside a section after the counter (those sections are snap areas themselves; taller than the screen, they scroll freely inside) */ html.snap.mand { scroll-snap-type: y mandatory; } html.snap.mand .now > .pcard, html.snap.mand .now > footer { scroll-snap-align: start; } /* a jump moves focus to the section heading for screen readers; no visible box */ [tabindex="-1"]:focus { outline: none; } /* the old way holds ~4 s before its story plays: a line fills under the text */ html.cards .c-old { position: relative; max-width: min(36ch, calc(100% - 2 * var(--gut))); } /* narrow phones: 36ch is wider than the column */ html.cards .c-old::after { content: ""; position: absolute; left: 0; bottom: -12px; height: 2px; width: 100%; border-radius: 2px; transform-origin: 0 50%; transform: scaleX(var(--rp, 0)); background: var(--ice); opacity: .7; } html.cards .stage:not(.st-wait) .c-old::after { opacity: 0; transition: opacity .3s; } .stage.ctl-tight .sc-replay { display: none; } /* colour option C (review): the counter's dark carries into Work (the sites glow), then icy How it works, then warm paper About */ html[data-pc="c"] .work { background: #0B1A11; color: var(--ink); --inkE: var(--ink); --inkE2: var(--ink2); --inkE3: var(--ink3); --teal: var(--ice); --line: rgba(246,245,243,.14); --paper: #0B1A11; --paper2: #13261A; } html[data-pc="c"] .pc-emerald { background: #F6F5F3; color: #002500; --inkE: #002500; --inkE2: rgba(0,37,0,.74); --inkE3: rgba(0,37,0,.66); --teal: #2f6f80; --line: rgba(0,37,0,.13); --paper: #F6F5F3; } html[data-pc="c"] .work .tile a { background: #13261A; box-shadow: inset 0 0 0 1px rgba(246,245,243,.1), 0 22px 50px -26px rgba(0,0,0,.7); } html[data-pc="c"] .work .tile a:hover { box-shadow: inset 0 0 0 1px rgba(160,212,228,.4), 0 30px 60px -28px rgba(0,0,0,.8); } html[data-pc="c"] .work .tag { background: var(--ice); color: #002500; } html[data-pc="c"] .work .tag.pre { background: transparent; color: var(--ink2); box-shadow: inset 0 0 0 1px rgba(246,245,243,.25); } /* the hero pushes in harder on tall screens (phones, tablets upright): Jean 2026-10-15; desktop keeps its gentle move */ @media (orientation: portrait) { :root:not([style*="--hz"]) { --hz: 2.6; } } /* ============================================================ COPY v1 (2026-10-16): the plain service line is the page's H1, under the display headline ============================================================ */ .h1line { margin: 0; font-size: clamp(18px, 1.55vw, 24px); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); max-width: 30ch; text-wrap: balance; text-shadow: 0 1px 14px rgba(0,0,0,.55); } @media (orientation: landscape) { .hero-ui .h1line { grid-column: 1; } } @media (orientation: portrait) { .h1line { font-size: clamp(18px, 5vw, 22px); max-width: 24ch; } /* phones: the service line is on screen from the first second; the paragraph and button rise in on the first scroll */ html.motion .hero-ui { opacity: 1; transform: translateY(var(--pitchh, 0px)); pointer-events: none; transition: transform .9s var(--ease); } html.motion .hero-ui .lede, html.motion .hero-ui .cta-row { opacity: 0; transition: opacity .6s var(--ease); } html.motion .hero.lede-in .hero-ui { transform: none; pointer-events: auto; } html.motion .hero.lede-in .hero-ui .lede, html.motion .hero.lede-in .hero-ui .cta-row { opacity: 1; } html.motion .floor { opacity: .7; } html.motion .hero-eyebrow { display: none; } } /* phones on their side (≤460 tall): the pitch is compact and wide so the headline keeps its own room above it */ @media (max-height: 460px) and (orientation: landscape) { .hero-ui { row-gap: 8px; } html.touch .hero-ui { padding-bottom: calc(14px + var(--tb, 0px)); } .hero-ui .h1line { font-size: 15px; max-width: 44ch; } .hero-ui .lede { font-size: 13px; line-height: 1.45; max-width: 58ch; color: var(--ink); text-shadow: 0 1px 10px rgba(0,0,0,.7); } html.motion .cidx { display: none; } /* no room under the card copy; the nav and each card's label carry the place */ .hero-ui .cta-row .btn { min-height: 40px; padding-block: 8px; font-size: 14px; } } .over-sub { margin-top: 10px; color: var(--ink2); font-size: clamp(15px, 1.3vw, 18px); } @media (max-height: 520px) and (orientation: landscape) { .over-sub { display: none; } } /* How it works: four steps */ @media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 761px) and (max-width: 1099px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* FAQ: questions open on tap */ .faq-list { margin-top: clamp(26px, 4vw, 44px); display: grid; border-top: 1px solid var(--line); max-width: 860px; } .faq-list details { border-bottom: 1px solid var(--line); } .faq-list summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 14px 0; cursor: pointer; font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -0.01em; color: var(--inkE); } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary .ic { flex: none; width: 22px; height: 22px; stroke-width: 1.6; color: var(--teal); transition: transform .26s var(--ease); } .faq-list details[open] summary .ic { transform: rotate(45deg); } .faq-list summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; } .faq-list details p { margin: 0 0 18px; max-width: 62ch; color: var(--inkE2); font-size: 16px; line-height: 1.6; } /* the ending: the same counter, cleared, in the present */ .pcard.endc { position: relative; overflow: hidden; min-height: var(--S, 100vh); background: #0a120c; color: var(--ink); display: flex; } .endc .end-bg, .endc .end-bg img { position: absolute; inset: 0; width: 100%; height: 100%; } .endc .end-bg img { object-fit: cover; object-position: 50% 62%; } .endc .end-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,10,6,.84) 0%, rgba(4,10,6,.55) 36%, rgba(4,10,6,0) 60%); } .endc .end-in { position: relative; z-index: 2; align-self: flex-start; padding-top: clamp(100px, 15vh, 160px); display: grid; gap: 14px; justify-items: start; } .endc .eyebrow { color: var(--ice); margin: 0; } .endc .h2 { color: var(--ink); max-width: 14ch; text-shadow: 0 2px 30px rgba(0,0,0,.5); } .endc .h2 em { color: var(--melon); } .endc .end-p { max-width: 36ch; color: rgba(246,245,243,.88); font-size: clamp(15px, 1.3vw, 18px); text-shadow: 0 1px 12px rgba(0,0,0,.6); } .endc .cta-row { margin-top: 8px; } .endc .end-or { font-size: 14px; color: rgba(246,245,243,.78); } .endc .end-or a { color: var(--ice); } @media (orientation: portrait) { .endc .end-bg img { object-position: 58% 100%; } .endc .end-shade { background: linear-gradient(180deg, rgba(4,10,6,.9) 0%, rgba(4,10,6,.78) 40%, rgba(4,10,6,.35) 56%, rgba(4,10,6,0) 68%); } .endc .end-in { padding-top: 96px; } } /* ============================================================ the inquiry: three short steps (v75) No JS: a plain section, every step shown. With JS (html.inq-js): a sheet over the page, one step at a time, opened by any link to #inquiry. ============================================================ */ .btn-ghost { background: rgba(246,245,243,.08); color: var(--ink); } .btn-ghost:hover { background: rgba(246,245,243,.14); } .inq { position: relative; z-index: 3; background: #0a120c; padding: clamp(56px, 9vw, 120px) var(--gut); } .inq-panel { max-width: 560px; margin: 0 auto; } .inq-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .inq-top .eyebrow { color: var(--ice); margin: 0; } .inq-x { width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 999px; background: rgba(246,245,243,.08); color: var(--ink); display: grid; place-items: center; cursor: pointer; } .inq-x .ic { width: 20px; height: 20px; } .inq-prog, .inq-count { display: none; } .inq-form { margin: 0; } .inq-step { border: 0; margin: 0; padding: 0; min-width: 0; } .inq-step + .inq-step { margin-top: 44px; } .inq-h { display: block; padding: 0; margin: 18px 0 6px; font-size: clamp(27px, 4.4vw, 38px); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } .inq-h em { color: var(--ice); } .inq-line { margin: 0 0 22px; color: var(--ink2); font-size: 16px; } .inq-chips { display: grid; gap: 10px; margin-bottom: 26px; } .chip { position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 12px 18px; border-radius: 16px; background: rgba(246,245,243,.06); border: 1.5px solid rgba(246,245,243,.12); font-size: 16px; font-weight: 500; cursor: pointer; transition: background .26s var(--ease), border-color .26s var(--ease), transform .14s var(--ease); -webkit-tap-highlight-color: transparent; } .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; } .chip::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid rgba(246,245,243,.4); background: transparent no-repeat center / 16px 16px; transition: background-color .26s var(--ease), border-color .26s var(--ease); } .chip:has(input:checked) { background: rgba(160,212,228,.13); border-color: var(--ice); } .chip:has(input:checked)::before { border-color: var(--ice); background-color: var(--ice); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001A00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } .chip:has(input:focus-visible) { outline: 2px solid var(--ice); outline-offset: 3px; } .chip:active { transform: scale(.985); } .field { display: grid; gap: 8px; margin-bottom: 20px; } .field label { font-size: 15px; font-weight: 600; color: var(--ink); } .field .opt { font-weight: 400; color: var(--ink3); } .field input { width: 100%; height: 56px; padding: 0 18px; border-radius: 14px; border: 1.5px solid rgba(246,245,243,.16); background: rgba(246,245,243,.05); color: var(--ink); font: 400 16px/1 var(--sans); transition: border-color .26s var(--ease), background .26s var(--ease); -webkit-appearance: none; appearance: none; } .field input::placeholder { color: rgba(246,245,243,.36); } .field input:focus { outline: none; border-color: var(--ice); background: rgba(160,212,228,.07); } .field input[aria-invalid="true"], .inq-chips[aria-invalid="true"] .chip { border-color: var(--melon); } .inq-err { margin: 0; color: var(--melon); font-size: 14px; } .inq-cf { min-height: 65px; margin-top: 6px; } /* "Verify you are human": space held so nothing jumps when it loads */ .inq-chips + .inq-err { margin: -14px 0 22px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .inq-fail { margin: 4px 0 18px; padding: 14px 16px; border-radius: 14px; background: rgba(252,108,133,.12); color: var(--ink); font-size: 15px; } .inq-fail a { color: var(--ice); } .inq-bar { display: flex; gap: 10px; margin-top: 30px; } .inq-bar .btn { flex: 1; cursor: pointer; border: 0; } .inq-bar .inq-back { flex: 0 0 auto; } .inq-bar .btn[disabled] { opacity: .6; cursor: progress; } .inq-done { padding: 22px 0 8px; outline: none; } .inq-done .inq-h { margin-top: 18px; } .inq-tick { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; background: var(--ice); } .inq-tick svg { width: 32px; height: 32px; fill: none; stroke: var(--e900); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; } .inq-note { color: var(--ink3); margin: -8px 0 22px; } .inq-done .btn { cursor: pointer; border: 0; } /* the sheet (JS on) */ html.inq-js .inq { position: fixed; inset: 0; z-index: 70; padding: 0; background: rgba(4, 8, 5, .72); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); overflow-y: auto; overscroll-behavior: contain; display: none; opacity: 0; transition: opacity .26s var(--ease); } html.inq-js .inq.on { display: block; } html.inq-js .inq.open { opacity: 1; } html.inq-js .inq-panel { position: relative; min-height: 100%; max-width: none; padding: calc(18px + env(safe-area-inset-top)) var(--gut) 0; background: #0c150e; display: flex; flex-direction: column; transform: translateY(24px); transition: transform .52s var(--ease); } html.inq-js .inq.open .inq-panel { transform: none; } html.inq-js .inq-x { display: grid; } html.inq-js .inq-prog { display: block; height: 4px; margin: 16px 0 10px; border-radius: 4px; background: rgba(246,245,243,.1); overflow: hidden; } html.inq-js .inq-prog span { display: block; height: 100%; width: calc(var(--p, 1) / 3 * 100%); border-radius: 4px; background: var(--ice); transition: width .52s var(--ease); } html.inq-js .inq-count { display: block; margin: 0; color: var(--ink3); } html.inq-js .inq-count b { color: var(--ink); font-weight: 500; } html.inq-js .inq-form { flex: 1; display: flex; flex-direction: column; } html.inq-js .inq-step { display: none; } html.inq-js .inq-step.cur { display: block; animation: inqIn .52s var(--ease) both; } html.inq-js .inq-step.cur.back { animation-name: inqBack; } html.inq-js .inq-step + .inq-step { margin-top: 0; } html.inq-js .inq-bar { position: sticky; bottom: 0; margin: auto calc(-1 * var(--gut)) 0; padding: 14px var(--gut) calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(12,21,14,0), #0c150e 28%); } html.inq-js .inq-done { flex: 1; padding-top: 12vh; } html.inq-js .inq-done:not([hidden]) .inq-tick { animation: inqPop .52s var(--ease) both; } html.inq-js .inq-done:not([hidden]) .inq-tick svg { animation: inqDraw .6s .2s var(--ease) both; } @keyframes inqIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } } @keyframes inqBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } } @keyframes inqPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes inqDraw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } } /* wider screens: a centred panel over the page */ @media (min-width: 700px) and (min-height: 560px) { html.inq-js .inq-panel { min-height: 0; max-width: 600px; margin: max(5vh, 40px) auto; padding: 28px 40px 0; border-radius: 28px; border: 1px solid rgba(246,245,243,.08); box-shadow: 0 40px 120px -30px rgba(0,0,0,.7); } html.inq-js .inq-form, html.inq-js .inq-done { min-height: 470px; } html.inq-js .inq-bar { margin-inline: -40px; padding: 18px 40px 28px; border-radius: 0 0 28px 28px; } html.inq-js .inq-done { padding: 20px 0 36px; min-height: 0; } } @media (prefers-reduced-motion: reduce) { html.inq-js .inq, html.inq-js .inq-panel, html.inq-js .inq-prog span { transition: none; } html.inq-js .inq-step.cur, html.inq-js .inq-done .inq-tick, html.inq-js .inq-done .inq-tick svg { animation: none; } } .inq [hidden] { display: none !important; } /* FAQ on wide screens: heading left (stays in view), questions right, like About (Jean 2026-10-16: too much empty space) */ .faq-cta { display: none; } @media (min-width: 1000px) { .faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); align-items: start; } .faq-head { position: sticky; top: 120px; } .faq-head .h2 { font-size: clamp(2.8rem, 4.6vw, 4.8rem); } .faq-grid .faq-list { margin-top: 6px; max-width: none; } .faq-cta { display: inline-flex; margin-top: 30px; background: #002500; color: var(--ink); } .faq-cta:hover { background: #0b3a14; box-shadow: none; } } /* ending: the words must read over any photo (Jean 2026-10-16: hard to read, esp. over the floor) */ .endc .end-shade { background: linear-gradient(180deg, rgba(4,10,6,.94) 0%, rgba(4,10,6,.82) 34%, rgba(4,10,6,.5) 52%, rgba(4,10,6,0) 72%); } .endc .end-p { color: #F6F5F3; font-size: clamp(16px, 1.35vw, 19px); text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 2px 18px rgba(0,0,0,.6); } .endc .end-or { color: rgba(246,245,243,.9); text-shadow: 0 1px 2px rgba(0,0,0,.7); } @media (orientation: portrait) { .endc .end-shade { background: linear-gradient(180deg, rgba(4,10,6,.95) 0%, rgba(4,10,6,.88) 44%, rgba(4,10,6,.55) 60%, rgba(4,10,6,0) 76%); } } /* ============================================================ PHONES + TABLETS: the pinch-zoom memory budget (Jean 2026-10-16: "A problem repeatedly occurred" on zoom, and zoomed images went blurry). iOS redraws every filter / backdrop-filter / blend into its own buffer at the ZOOMED size, and will-change layers stay rasterised at 1x (blurry). Rule from G&G (website-build-standard): on touch, no backdrop-filter, no decorative filters, no blend modes, no will-change, no oversized grain layers. ============================================================ */ @media (pointer: coarse) { .nav, .msheet, .sctl button, .about-photo figcaption, html.inq-js .inq, .cidx { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .nav { background: rgba(10, 12, 8, .9); } .cidx { background: rgba(14,16,12,.94); } .sctl button { background: rgba(10, 14, 10, .9); } .msheet { background: rgba(4, 8, 5, .98); } html.inq-js .inq { background: rgba(4, 8, 5, .9); } .about-photo figcaption { background: rgba(246,245,243,.96); } .grain { display: none; } .glass, .wb-view img { will-change: auto !important; } /* the hero .lyr layers keep theirs: the 2.6x push-in would otherwise re-rasterise them at 2.6x */ .crt::before, .phone::before, .glass .xp, .hcrt-in .xp, .xp .xi, .xp .bolt-i svg, .obj img, .obj canvas.d3, .obj .has3d img + canvas.d3, .ov-img img, .led-text { filter: none !important; } .c-bg::before { mix-blend-mode: normal; background: rgba(0, 18, 6, .5); } .lv-ink { mix-blend-mode: normal; } } /* ============================================================ ENDING, rebuilt (Jean 2026-10-16: "what's the gradient for?"). One rule: the shade sits exactly where the words are, and nowhere else. Wide screens: words on the left, shade from the left edge. Tall screens: words at the top under the nav, shade from the top that ends just below the last line (--eb, measured by main.js). ============================================================ */ .pcard.endc { padding: 0; align-items: center; } .endc .end-in { margin: 0 auto; width: 100%; padding-top: 110px; padding-bottom: 90px; align-self: center; } .endc .end-in > * { max-width: min(520px, 38vw); } .endc .end-shade { background: linear-gradient(90deg, rgba(4,10,6,.92) 0%, rgba(4,10,6,.8) 24%, rgba(4,10,6,.4) 42%, rgba(4,10,6,0) 58%); } @media (orientation: portrait) { .pcard.endc, html.motion .pcard.endc { justify-content: flex-start; } /* every paper card centres its column; the ending's words sit at the top */ .endc .end-in { align-self: flex-start; padding-top: 104px; padding-bottom: 0; } .endc .end-in > * { max-width: none; } .endc .end-shade { background: linear-gradient(180deg, rgba(4,10,6,.93) 0%, rgba(4,10,6,.86) calc(var(--eb, 60%) - 60px), rgba(4,10,6,.35) calc(var(--eb, 60%) + 40px), rgba(4,10,6,0) calc(var(--eb, 60%) + 130px)); } } /* DESKTOP HERO (Jean 2026-10-16: the lamp swallowed "like", and the headline barely moved). The foreground grows from its top-left corner (the lamp side), so it never climbs over the headline (website-build-standard: grow the foreground from the edge nearest the headline). The headline rises ~a fifth of the screen and fades out before it would pass under the nav. */ @media (orientation: landscape) { .front { transform-origin: 12% 0%; } } @media (orientation: portrait) and (min-width: 600px) { .endc .end-in > * { max-width: 600px; } .endc .cta-row .btn { flex: 0 0 auto; } } /* desktop: headline sink + push-in run on --hq (the longer run, to when the next card passes mid-screen) */ @media (orientation: landscape) { .back { transform: translate3d(calc(var(--mx, 0) * -7px), calc(var(--my, 0) * -5px), 0) scale(calc(1.03 + var(--hq, 0) * .1)); } .front { transform: translate3d(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 6px), 0) scale(calc(1.03 + var(--hq, 0) * .14)); } .title { transform: translate3d(calc(var(--mx, 0) * 7px), calc(var(--hq, 0) * -1 * var(--tup, 0px)), 0); } } /* ?sink=1 preview on tall screens: the headline sinks behind the counter on the long run (--hq), like desktop */ @media (orientation: portrait) { html.sink .title { transform: translate3d(0, calc(var(--hq, 0) * -1 * var(--tup, 0px)), 0); } } /* ending with the customer-side photo (.e4): wide screens split, so the words never sit on the laptop: words on a dark panel at the left, the photo fills the right two-thirds and fades in from its left edge */ @media (orientation: landscape) { .endc.e4 { background: #080d09; } .endc.e4 .end-bg { left: 33%; width: 67%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); } .endc.e4 .end-bg img { object-position: 64% 62%; } .endc.e4 .end-shade { background: linear-gradient(90deg, rgba(8,13,9,1) 0%, rgba(8,13,9,.9) 30%, rgba(8,13,9,0) 46%); } .endc.e4 .end-in > * { max-width: min(500px, 34vw); } } @media (orientation: portrait) { .endc.e4 .end-bg img { object-position: 50% 100%; } } @media (orientation: landscape) and (max-width: 1180px) { .endc.e4 .end-bg { left: 38%; width: 62%; } .endc.e4 .end-bg img { object-position: 40% 62%; } /* keeps the laptop + sticker clear of the fade-in edge */ .endc.e4 .end-in > * { max-width: 34vw; } } /* ending, widened photo (.e5): wide screens are full-bleed like the hero. No panel: the picture runs edge to edge and only a soft pool of shade sits behind the words (Jean 2026-10-16: "no hard black gradient") */ @media (orientation: landscape) { .endc.e5 .end-bg img { object-position: 60% 70%; } .endc.e5 .end-shade { background: radial-gradient(ellipse 48% 72% at 20% 52%, rgba(6,10,7,.66) 0%, rgba(6,10,7,.42) 48%, rgba(6,10,7,0) 78%); } .endc.e5 .end-in > * { max-width: min(520px, 36vw); } .endc.e5 .h2 { text-shadow: 0 2px 4px rgba(0,0,0,.45), 0 6px 40px rgba(0,0,0,.55); } } @media (orientation: portrait) { .endc.e5 .end-bg img { object-position: 50% 100%; } } /* the ending's live clock + steam (ending.js): small canvases placed on the photo, under the shade */ .end-live { position: absolute; inset: 0; pointer-events: none; } .end-live canvas { position: absolute; } /* ending on tall screens, lighter (Jean 2026-10-16: "almost pitch black"): the hero's way, a light veil plus the hero headline's layered shadow, so the shop (and the clock) still shows through */ @media (orientation: portrait) { .endc.e5 .end-shade { background: linear-gradient(180deg, rgba(4,10,6,.5) 0%, rgba(4,10,6,.36) calc(var(--eb, 60%) - 80px), rgba(4,10,6,.14) calc(var(--eb, 60%) + 10px), rgba(4,10,6,0) calc(var(--eb, 60%) + 90px)); } } .endc.e5 .h2 { text-shadow: 0 .01em .008em rgba(0,0,0,.5), .03em .045em .02em rgba(0,0,0,.5), .07em .1em .07em rgba(0,0,0,.4), .12em .2em .2em rgba(0,0,0,.35); } .endc.e5 .end-p, .endc.e5 .end-or { text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 16px rgba(0,0,0,.7); } /* DESKTOP, shorter screens (Jean 2026-10-16: How it works / About pinned with their heading under the nav). The paper cards are tightened to fit the screen, so each one pins whole, heading in view, under the nav. */ @media (orientation: landscape) and (max-height: 1000px) and (min-width: 761px) { .pcard.sec.how, .pcard.sec.about, .pcard.sec.faq { padding-top: 96px; padding-bottom: 44px; } .how .h2, .about .h2, .faq .h2 { font-size: clamp(2.2rem, min(4.6vw, 7.4vh), 4.6rem); } .how .steps { margin-top: clamp(22px, 3.4vh, 44px); } .how .step { padding-top: 20px; } .how .step h3 { margin: 12px 0 8px; font-size: clamp(18px, 1.6vw, 23px); } .how .step p { font-size: 15px; line-height: 1.5; } .how .ahead { margin-top: clamp(18px, 3vh, 36px); padding: 18px 24px; } .how .tools { margin-top: clamp(18px, 3vh, 40px); } .about .about-photo { max-width: min(460px, 62vh); } .about .about-copy p { line-height: 1.55; } } /* short phones: the time calculator stays clear of the story controls */ @media (orientation: portrait) and (max-height: 720px) { .calc .tb { margin-top: 10px; padding: 10px 12px 8px; } .calc .tb-row { margin-bottom: 2px; } .calc .tb-out b { font-size: 28px; } .calc .c-cta { margin-top: 10px; } } /* phones on their side, stories playing (html.play, set in the head): the upright phone's story on a scrolling page. Left: the old-way title + line, then the fix title + copy (same spot, they cross-fade). Right: the old object, then the fix (same spot), pinned beside the words; Pause / See the fix / Replay under the picture. main.js: flatP + fitFlat. */ .fctl { display: none; } @media (orientation: landscape) { html.play .c-title.a { display: block; } html.play .c-titles { display: grid; } html.play .c-titles > .c-title { grid-area: 1 / 1; } html.play .c-title.b .ln > span { transform: translateY(.35em); opacity: 0; } html.play .is-b .c-title.b .ln > span { transform: none; opacity: 1; } html.play .is-b .c-title.a .ln > span { transform: translateY(-.25em); opacity: 0; } html.play .card:not(.c-over) .stage > .c-old, html.play .card:not(.c-over) .stage > .c-end { grid-area: 3 / 1; align-self: start; } html.play .c-old { opacity: 1 !important; transform: none !important; transition: opacity .5s var(--ease); } html.play .is-b .c-old { opacity: 0 !important; pointer-events: none; } html.play .stage:not(.is-b) .c-end { opacity: 0; pointer-events: none; } html.play .is-b .c-end { opacity: 1; pointer-events: auto; transition: opacity .7s var(--ease); } html.play .checks li:not(.on) { opacity: .42 !important; } html.play .checks li:not(.on) .ic { background: transparent !important; color: transparent !important; box-shadow: inset 0 0 0 1.5px rgba(246,245,243,.3) !important; } html.play .c-old::after { display: block; content: ""; position: absolute; left: 0; bottom: -12px; height: 2px; width: 100%; border-radius: 2px; transform-origin: 0 50%; transform: scaleX(var(--rp, 0)); background: var(--ice); opacity: .7; } html.play .stage:not(.st-wait) .c-old::after { opacity: 0; transition: opacity .3s; } html.play .obj { opacity: var(--oa, 1) !important; } html.play .dcal, html.play .books, html.play .brain { opacity: var(--ob, 0); } html.play .c-auto .auto { opacity: calc(var(--ob, 0) * var(--aa, 1)) !important; } html.play .wb { transform: none !important; opacity: var(--wo, 0); } html.play .fvis { grid-area: 1 / 2 / 6 / 3; align-self: start; position: sticky; top: 80px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 10px; } html.play .fpic { display: grid; width: 100%; justify-items: center; align-items: start; } html.play .fpic > * { grid-area: 1 / 1; position: relative !important; left: auto !important; top: auto !important; right: auto; translate: none; margin: 0; align-self: start; } html.play .fpic > .obj { display: block; width: min(100%, 380px); max-width: 380px; z-index: 2; pointer-events: none; } html.play #webStage .fpic > .obj { width: min(100%, 420px); max-width: 420px; } html.play .fpic > :is(.wb, .dcal, .books, .brain, .auto) { width: 100%; z-index: 1; } html.play .fcall { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; } html.play .fcall > .orb { display: block; position: relative; left: auto; top: auto; translate: none; width: var(--fo, 200px); height: var(--fo, 200px); } html.play .fcall > .caps { display: block; position: relative; left: auto; right: auto; top: auto; width: 100%; } html.play .fcall .cap-prev { display: none; } html.play .fcall .cap-now .line { font-size: clamp(17px, 2.4vw, 22px); min-height: 2.6em; } html.play .fctl { display: flex; position: static; gap: 8px; align-items: center; } } /* phones on their side (flat page): each story's picture stays in view beside the words while they are read, sized by main.js (fitFlat) to the screen height that is left under the nav */ @media (orientation: landscape) { html.flat .card:not(.c-over) .stage > :is(.obj, .wb, .dcal, .books, .brain, .auto) { position: sticky; top: 80px; align-self: start; } html.flat .card:not(.c-over) .stage { overflow: clip; } /* hidden would make the stage a scroll box and stop the pinning */ } /* tablets held upright: the FAQ fills its card (Jean, 13" iPad: empty bands above and below) */ @media (orientation: portrait) and (min-width: 700px) { .faq-grid { display: block; } .faq-head { position: static; } .faq .h2, .faq-head .h2 { font-size: clamp(52px, 7.4vw, 80px); } .faq-grid .faq-list { margin-top: 40px; } .faq-list { margin-top: 40px; max-width: none; } .faq-list summary { min-height: clamp(76px, 8.4vh, 104px); font-size: clamp(20px, 2.6vw, 25px); } .faq-list details p { font-size: clamp(17px, 2.1vw, 20px); } .faq-cta { display: inline-flex; margin-top: 36px; background: #002500; color: var(--ink); } } /* phones on their side: the menu fills the screen under the nav: five sections + the button as a 3 x 2 grid of big tiles, on a solid backdrop (the page must not show through) */ @media (orientation: landscape) and (max-height: 520px) { .msheet, .msheet.open { background: #050906 !important; } .msheet-in { max-width: none; height: 100%; box-sizing: border-box; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 12px; padding: 84px var(--gut) calc(14px + env(safe-area-inset-bottom)); } .msheet .mi.big { min-height: 0; height: 100%; padding: 0 22px; border-radius: 18px; border: 0; background: rgba(246,245,243,.06); box-shadow: inset 0 0 0 1px rgba(246,245,243,.1); font-size: clamp(20px, 3vw, 28px); } .msheet .mapply { grid-column: auto; width: 100%; height: 100%; min-height: 0; margin: 0; justify-content: space-between; gap: 12px; padding: 0 22px; border-radius: 18px; font-size: clamp(16px, 2.2vw, 20px); white-space: normal; text-align: left; line-height: 1.25; } } /* phones on their side: the fix panels lose their secondary rows so they show near full size (readable) in ~290px */ @media (orientation: landscape) and (max-height: 520px) { html.flat .dcal .dc-feed, html.flat .auto .auto-foot, html.flat .brain .br-foot { display: none; } html.flat .books .bk-rows > li:nth-child(n+7) { display: none; } html.flat .brain .br-doc > li:nth-child(n+2) { display: none; } html.flat .brain .br-cv { height: 150px !important; } } /* touch targets: a transparent ::before grows the hit area to 44px without moving a visible pixel (build standard). The stacked footer links sit 26px apart, so theirs grows to ~25px (WCAG 2.5.8) and never overlaps the next one */ .nav-logo, .btn-sm, .over-skip, .sctl button, .foot a { position: relative; } .nav-logo::before, .btn-sm::before, .over-skip::before, .sctl button::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); translate: -50% -50%; } .foot a::before { content: ""; position: absolute; inset: -3px -6px; } /* the call, out loud: one control under the captions while the call plays, one under the checks at the end */ .callplay { pointer-events: auto; display: inline-flex; align-items: center; gap: 9px; height: 44px; margin-top: 14px; padding: 0 18px 0 14px; border: 1px solid rgba(160, 212, 228, .38); border-radius: 999px; background: rgba(160, 212, 228, .1); color: var(--ink); font: 500 14px/1 var(--sans); cursor: pointer; transition: background-color .26s var(--ease), border-color .26s var(--ease); } .callplay:hover { background: rgba(160, 212, 228, .2); border-color: var(--ice); } .callplay .ic { color: var(--ice); } .callplay small { font-size: 11px; color: var(--ink3); } .callplay[data-state="playing"] small, .callplay[data-state="paused"] small { display: none; } .callplay.cap.off { visibility: hidden; } .c-end .callplay { margin-top: 18px; } /* the end of the card: the call and the inquiry button as one row, same height, centred on one line */ .c-acts { display: grid; grid-template-columns: max-content; justify-content: start; align-items: center; gap: 12px; margin-top: calc(var(--cta-mt, 24px) * var(--es, 1)); pointer-events: auto; } .c-acts .c-cta, .c-acts .callplay { margin: 0; width: 100%; justify-content: center; white-space: nowrap; } .c-acts .callplay { height: 40px; } /* one line naming whose receptionist the call is, right above the button that plays it */ .c-note { margin: calc(var(--cta-mt, 24px) * var(--es, 1)) 0 0; font-size: 13.5px; line-height: 1.4; color: var(--inkE3, var(--ink3)); } .c-note + .c-acts { margin-top: 10px; } .call-tight .c-note { display: none; } .c-end .c-note { visibility: hidden; } .is-end .c-end .c-note, html:not(.motion) .c-end .c-note { visibility: visible; } @media (orientation: landscape) { .is-b .c-end .c-note { visibility: visible; } } /* side by side where the column has room for both; stacked at one shared width where it doesn't (never ragged) */ .c-end { container-type: inline-size; } @container (min-width: 480px) { .c-acts { grid-template-columns: max-content max-content; } } /* phones held upright (cards): the call button joins Pause and See the fix in the one control bar at the bottom */ html.cards .sctl.has-call { left: 14px; } .sctl.has-call .callplay { margin: 0 auto 0 0; height: 38px; padding: 0 14px 0 11px; font-size: 13.5px; } .sctl button, .sctl .callplay { white-space: nowrap; } @media (max-width: 389px) { .sctl.has-call .callplay small { display: none; } } @media (max-width: 345px) { html.cards .sctl { gap: 6px; } .sctl button { padding: 0 11px; gap: 6px; } .sctl.has-call .callplay { padding: 0 11px 0 9px; gap: 6px; } } @media (max-width: 300px) { .sctl .sc-fix .ic { display: none; } .c-acts .c-cta { padding: 0 14px; font-size: 13px; gap: 6px; } } .transcript li.now { color: var(--ink); } .transcript li.now b { color: var(--ice); } html:not(.motion):not(.play) #phoneStage.calling > .transcript { display: grid; } html.flat .callplay.cap, html:not(.motion) .callplay.cap { display: none; } @media (orientation: landscape) { .callplay.cap { display: none; } } /* the end block's button is only reachable when its block is showing (it fades to opacity 0, which keeps focus) */ .c-end .callplay { visibility: hidden; } .is-end .c-end .callplay, html:not(.motion) .c-end .callplay { visibility: visible; } @media (orientation: landscape) { .is-b .c-end .callplay { visibility: visible; } } .call-tight .c-end .callplay { display: none; } /* decorative pictures never take a tap: their transparent areas sat over the closing text and buttons in the finished state on phones ("Hear the call" and "Tell me about your business" did nothing). Only the browser window's Visit link stays tappable. */ .stage .obj, .stage .obj * { pointer-events: none; } #wb, #wb * { pointer-events: none; } #wb .wb-link { pointer-events: auto; } .stage .books, .stage .books *, .stage .dcal, .stage .dcal *, .stage .auto, .stage .auto * { pointer-events: none; } /* the records web can be dragged to turn it, until the card shows its finished text (then its button sits under it) */ .stage.is-end .brain, .stage.is-end .brain * { pointer-events: none; }