/* ============================================================ Cloudberrix — "Ante Daylight" web Warm paper, ink, two accents: studio copper & first-release amber. Light-only by doctrine (our products are daylight-first). Hero is a monument that owns the whole first frame: header + hero = one viewport, type at full scale, closed by the studio register (coordinates · copper→amber rail · entry Nº 001). ============================================================ */ :root { color-scheme: light; /* ground + surfaces */ --bone: #F7F5F0; --recessed: #F1EFE9; --sheet: #FFFFFF; --sheet-hi: #FBFAF7; --hairline: #E3E0D8; /* ink */ --ink: #1A1B21; --ink-soft: #5C5D68; --ink-faint: #8E8F9A; /* company: copper · first release: amber (cloudberries ripen copper → gold) */ --copper: #BC5A32; --copper-deep: #9A4526; --copper-wash: rgba(188, 90, 50, 0.065); --amber: #C79A2A; --amber-deep: #8F6E14; --amber-wash: rgba(199, 154, 42, 0.09); /* type — SF-style: Inter everywhere, SF Pro itself on Apple devices */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; /* shape + elevation (mirrors our apps: 16 / 14 / 13 / pill) */ --r-card: 16px; --r-control: 14px; --r-row: 13px; --lift: 0 1px 2px rgba(26, 27, 33, 0.05), 0 8px 28px rgba(26, 27, 33, 0.04); --lift-hover: 0 2px 4px rgba(26, 27, 33, 0.06), 0 14px 40px rgba(26, 27, 33, 0.07); --shell: 1240px; --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); } /* ------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bone); color: var(--ink); font-family: var(--font-body); font-size: 17px; letter-spacing: -0.008em; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- the ground is lit. Bone is not flat: a fixed field of copper and amber light sits behind every page with a fine grain over it, so scrolling moves content through light rather than past it. Both layers are pseudo-elements on , so all three pages get them with no extra markup. */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(58% 44% at 14% 6%, rgba(188, 90, 50, 0.085) 0%, rgba(188, 90, 50, 0) 68%), radial-gradient(52% 40% at 92% 62%, rgba(199, 154, 42, 0.075) 0%, rgba(199, 154, 42, 0) 70%), radial-gradient(46% 38% at 50% 104%, rgba(188, 90, 50, 0.055) 0%, rgba(188, 90, 50, 0) 72%), var(--bone); } /* paper, not screen */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.19; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44MiIgbnVtT2N0YXZlcz0iNCIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTgwIiBoZWlnaHQ9IjE4MCIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+"); background-size: 180px 180px; } img, svg, video { display: block; max-width: 100%; height: auto; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: var(--copper-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; } strong { font-weight: 600; } :focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 4px; } .shell { max-width: var(--shell); margin-inline: auto; padding-inline: clamp(20px, 4vw, 36px); } .skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; text-decoration: none; transition: top 0.2s var(--ease-out); } .skip-link:focus-visible { top: 12px; } /* ------------------------------------------------ type voices */ h1, h2, h3 { font-family: var(--font-display); font-weight: 650; line-height: 1.08; letter-spacing: -0.022em; margin: 0; text-wrap: balance; } .eyebrow { font-family: var(--font-mono); font-weight: 600; font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 18px; } /* ------------------------------------------------ header */ .site-head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bone) 72%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .site-head.is-scrolled { border-bottom-color: var(--hairline); box-shadow: 0 6px 30px rgba(26, 27, 33, 0.04); } .head-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; height: 64px; } .head-logo { flex: none; display: inline-flex; align-items: center; } .head-logo img { width: 164px; height: auto; } .head-nav { display: flex; gap: clamp(18px, 3vw, 34px); } .head-nav a { font-family: var(--font-display); font-weight: 560; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; } .head-nav a:hover { color: var(--copper-deep); border-bottom-color: var(--copper); } /* ------------------------------------------------ hero — the statement */ /* The monument stands off centre. The eye enters top-left at the eyebrow, falls down the headline, and lands bottom-right on the sentence — a diagonal, not a stack. Header (64px) + hero still own the first frame exactly, so nothing of the next chapter shows before a scroll. */ .hero { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: calc(100vh - 64px); /* fallback for pre-svh engines */ min-height: calc(100svh - 64px); } /* (width:100% because .shell's auto margins beat flex `stretch` and would collapse it to content width.) */ .hero .shell { position: relative; z-index: 1; width: 100%; } .hero-stack { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); grid-template-rows: auto auto; align-content: center; column-gap: clamp(24px, 4vw, 64px); text-align: left; padding-block: clamp(40px, 6vh, 96px) clamp(28px, 4vh, 56px); } .hero-stack .eyebrow { grid-column: 1 / -1; color: var(--copper-deep); font-size: clamp(11.5px, 0.85vw, 13.5px); margin-bottom: clamp(18px, 2.6vh, 30px); } /* sized to fill the stage at every width — a monument, not a laptop layout */ .hero-title { grid-column: 1 / -1; font-size: clamp(2.9rem, 8.6vw, 8.2rem); font-weight: 690; letter-spacing: -0.042em; line-height: 0.94; max-width: 13ch; margin: 0; } /* the sentence lands under the headline's right shoulder */ .hero-lede { grid-column: 2 / -1; justify-self: end; max-width: 24em; margin: clamp(26px, 4vh, 52px) 0 0; font-size: clamp(1.02rem, 1.35vw, 1.28rem); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; } /* the mark at watermark scale, bleeding off the right edge and turning slowly the whole way down the page (site.js drives the rotation) */ .hero-mark { position: absolute; right: -13vw; top: 50%; width: min(62vw, 860px); height: auto; opacity: 0.055; transform: translateY(-50%); transform-origin: 50% 50%; pointer-events: none; z-index: 0; } /* ---------- the register that closes the first frame. The rail runs studio copper into first-release amber. It also does the peeking chapter's old job: it says there is more below. */ .hero-base { position: relative; display: flex; align-items: baseline; justify-content: space-between; padding-top: 18px; margin-bottom: clamp(22px, 3.5vh, 36px); } .hero-base::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--copper) 0%, var(--amber) 100%); } .hero-coord { font-family: var(--font-mono); font-weight: 600; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--ink-faint); } /* the one affordance the opening frame was missing: a way down */ .hero-down { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-weight: 600; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; color: var(--ink-faint); text-decoration: none; transition: color 0.25s var(--ease-out); } .hero-down:hover { color: var(--copper-deep); } .hero-down span { display: inline-block; animation: nudge 2.4s var(--ease-out) infinite; } @keyframes nudge { 0%, 62%, 100% { transform: translateY(0); opacity: 0.75; } 78% { transform: translateY(4px); opacity: 1; } } /* ---------- products: the ledger and the stage */ /* No product is named and none is shown. Words left, picture right — and the picture runs off the right edge of the page rather than floating in the middle of a void. The crop is the point: there is more software than fits in the frame. */ .product { overflow: hidden; } .product-head { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: clamp(32px, 5vw, 84px); align-items: center; } .product-head h2 { font-size: clamp(2.3rem, 5.2vw, 4.3rem); line-height: 0.98; letter-spacing: -0.035em; max-width: 8ch; } .product-ledger { margin: clamp(26px, 3.6vh, 40px) 0 0; border-top: 1px solid var(--hairline); } .ledger-row { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 17px 0; border-bottom: 1px solid var(--hairline); } .ledger-row dt { font-family: var(--font-display); font-weight: 640; font-size: 1.06rem; letter-spacing: -0.012em; color: var(--ink); } .ledger-row dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); } /* ---------- the first release, entered in the ledger it belongs to. A row, not a banner: the ledger above still says what kinds of software the studio builds, and this says what it has shipped. Amber, because on this site amber is the release accent and nothing else uses it. */ .release { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(12px, 1.3vw, 17px); margin-top: 20px; padding: 14px 17px 15px 15px; border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--lift); text-decoration: none; color: inherit; overflow: hidden; transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out); } /* the studio rail, drawn down the edge as the row is reached for */ .release::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--copper) 0%, var(--amber) 100%); transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.4s var(--ease-out); } .release:hover, .release:focus-visible { border-color: color-mix(in srgb, var(--amber) 52%, var(--hairline)); box-shadow: var(--lift-hover); transform: translateY(-1px); } .release:hover::before, .release:focus-visible::before { transform: scaleY(1); } .release-icon { width: clamp(42px, 4vw, 50px); height: auto; border-radius: 22.4%; box-shadow: 0 1px 2px rgba(26, 27, 33, 0.10), inset 0 0 0 1px rgba(26, 27, 33, 0.06); } .release-body { display: block; min-width: 0; } .release-eyebrow { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-deep); } .release-name { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 3px; font-family: var(--font-display); font-weight: 640; font-size: 1.06rem; letter-spacing: -0.014em; color: var(--ink); } .release-name i { font-style: normal; font-size: 15px; color: var(--ink-faint); transition: transform 0.25s var(--ease-out), color 0.25s var(--ease-out); } .release:hover .release-name i, .release:focus-visible .release-name i { transform: translateX(3px); color: var(--copper-deep); } .release-sub { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); } /* ---------- the stage: three kinds of screen in one picture. --sw is the stage's own measured width (site.js writes it), so every frame is a fraction of the stage and the composition scales as one picture. The three read as a diagonal — laptop grounded at the left, phone rising through the middle, browser floating clear at the top right. They overlap only where overlap means depth, never where it would hide what a screen is showing. The column's right edge is pulled onto the viewport edge at every width, so the browser's crop is a constant property of the composition rather than an accident of the window. */ .stage-col { margin-right: calc(-1 * ((100vw - min(1240px, 100vw)) / 2 + clamp(20px, 4vw, 36px))); } .product-stage { position: relative; margin-top: clamp(12px, 2vh, 26px); aspect-ratio: 1.25; /* fallback until site.js measures; keeps the frames sane without JS */ --sw: min(700px, 58vw); } /* the horizon the laptop stands on */ .product-stage::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hairline); } /* one wash of studio copper behind the climb — amber stays reserved for first-release accents, and nothing on this stage is a release */ .product-stage::after { content: ''; position: absolute; z-index: 0; left: 4%; top: -4%; width: 86%; aspect-ratio: 1.45; background: radial-gradient(closest-side, rgba(188, 90, 50, 0.13) 0%, rgba(188, 90, 50, 0.065) 46%, rgba(188, 90, 50, 0) 74%); pointer-events: none; transform: translateY(var(--wy, 0px)); } .stage-fig { position: absolute; margin: 0; } .fig-desktop { left: 0; bottom: 0; z-index: 1; } .fig-mobile { left: 44%; bottom: 0; z-index: 3; } .fig-web { left: 68%; top: 3%; z-index: 2; } .fig-mobile .phone { --phone-w: calc(var(--sw) * 0.26); } /* captions hang under their frames like annotations */ .stage-cap { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); margin: 0; font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--ink-faint); } /* ---------- the hand-built device frame */ /* True iPhone proportions: 9:19.5 screen, even bezels, side buttons. Every interior metric scales with the frame: --p is one "design pixel" (the 304px-wide reference frame = 1.0), so the screen reads identically at whatever size the stage sets — no fixed-px content rattling inside a larger frame. */ .phone { --phone-w: min(304px, 78vw); --p: calc(var(--phone-w) / 304); position: relative; width: var(--phone-w); background: var(--ink); border-radius: 15.5% / 7.15%; padding: calc(var(--p) * 10); box-shadow: 0 2px 6px rgba(26, 27, 33, 0.18), 0 24px 70px rgba(26, 27, 33, 0.16), inset 0 0 0 1.5px rgba(255, 255, 255, 0.09); } /* power (right) */ .phone::before { content: ''; position: absolute; right: calc(var(--p) * -2.5); top: 29%; width: calc(var(--p) * 2.5); height: calc(var(--p) * 62); background: #33343d; border-radius: 0 2px 2px 0; } /* volume rocker (left) — second bar via box-shadow */ .phone::after { content: ''; position: absolute; left: calc(var(--p) * -2.5); top: 24%; width: calc(var(--p) * 2.5); height: calc(var(--p) * 36); background: #33343d; border-radius: 2px 0 0 2px; box-shadow: 0 calc(var(--p) * 48) 0 #33343d; } .phone-screen { position: relative; display: flex; flex-direction: column; aspect-ratio: 9 / 19.5; background: var(--bone); border-radius: calc(var(--p) * 38); padding: calc(var(--p) * 12) calc(var(--p) * 18) calc(var(--p) * 10); overflow: hidden; } /* dynamic island */ .phone-screen::before { content: ''; position: absolute; top: calc(var(--p) * 11); left: 50%; transform: translateX(-50%); width: calc(var(--p) * 90); height: calc(var(--p) * 26); background: var(--ink); border-radius: 999px; } .p-status { display: flex; justify-content: space-between; align-items: center; height: calc(var(--p) * 26); padding: 0 calc(var(--p) * 8) 0 calc(var(--p) * 14); color: var(--ink); } .p-time { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-weight: 600; font-size: calc(var(--p) * 14); letter-spacing: 0.01em; } .p-glyphs { display: inline-flex; align-items: center; gap: calc(var(--p) * 5); } .p-glyphs svg:nth-child(1) { width: calc(var(--p) * 17); } .p-glyphs svg:nth-child(2) { width: calc(var(--p) * 16); } .p-glyphs svg:nth-child(3) { width: calc(var(--p) * 25); } /* ---------- the phone's screen: a generic app. No product — an anonymous interface greeked in the site's own component language: bone ground, sheet cards, hairline borders, pill bars for text, one copper moment (the primary button). */ .p-ui { flex: 1; display: flex; flex-direction: column; gap: calc(var(--p) * 12); padding-top: calc(var(--p) * 16); min-height: 0; } /* greeked text: a pill bar wherever type would sit */ .g { height: calc(var(--p) * 5); border-radius: 999px; background: color-mix(in srgb, var(--ink) 13%, transparent); } .g-ink { background: color-mix(in srgb, var(--ink) 72%, transparent); } .p-ttl { width: 54%; height: calc(var(--p) * 14); } .p-sub { width: 36%; margin-top: calc(var(--p) * -5); } .p-duo { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--p) * 8); } .p-card { background: var(--sheet); border: 1px solid var(--hairline); border-radius: calc(var(--p) * 13); padding: calc(var(--p) * 9); box-shadow: 0 1px 2px rgba(26, 27, 33, 0.04); display: flex; flex-direction: column; gap: calc(var(--p) * 6); } .p-card .g:first-child { width: 58%; height: calc(var(--p) * 4.5); } .p-card .g-ink { width: 40%; height: calc(var(--p) * 9); } .p-rows { display: flex; flex-direction: column; gap: calc(var(--p) * 7); } /* the tall middle is a detail panel, so the screen reads full */ .p-panel { flex: 1; min-height: 0; background: var(--sheet); border: 1px solid var(--hairline); border-radius: calc(var(--p) * 13); box-shadow: 0 1px 2px rgba(26, 27, 33, 0.04); padding: calc(var(--p) * 12) calc(var(--p) * 11); display: flex; flex-direction: column; justify-content: space-between; } .p-panel .g { height: calc(var(--p) * 4.5); } .p-panel .g:nth-child(1) { width: 44%; height: calc(var(--p) * 6); background: color-mix(in srgb, var(--ink) 55%, transparent); } .p-panel .g:nth-child(2) { width: 96%; } .p-panel .g:nth-child(3) { width: 88%; } .p-panel .g:nth-child(4) { width: 92%; } .p-panel .g:nth-child(5) { width: 74%; } .p-panel .g:nth-child(6) { width: 36%; height: calc(var(--p) * 6); background: color-mix(in srgb, var(--ink) 55%, transparent); } .p-panel .g:nth-child(7) { width: 90%; } .p-panel .g:nth-child(8) { width: 84%; } .p-panel .g:nth-child(9) { width: 52%; } .p-row { display: flex; align-items: center; gap: calc(var(--p) * 9); background: var(--sheet); border: 1px solid var(--hairline); border-radius: calc(var(--p) * 12); padding: calc(var(--p) * 9) calc(var(--p) * 10); box-shadow: 0 1px 2px rgba(26, 27, 33, 0.04); } .p-row i { flex: none; width: calc(var(--p) * 17); height: calc(var(--p) * 17); border-radius: calc(var(--p) * 6); background: var(--recessed); border: 1px solid var(--hairline); } .p-row.is-live i { background: var(--copper-wash); border-color: color-mix(in srgb, var(--copper) 30%, var(--hairline)); } .p-row div { flex: 1; display: flex; flex-direction: column; gap: calc(var(--p) * 4); } .p-row .g:first-child { width: 64%; background: color-mix(in srgb, var(--ink) 55%, transparent); } .p-row .g:last-child { width: 42%; height: calc(var(--p) * 4); } /* the phone's one copper moment */ .p-go { flex: none; height: calc(var(--p) * 30); border-radius: 999px; background: var(--copper); display: flex; align-items: center; justify-content: center; } .p-go .g { width: 32%; background: rgba(255, 255, 255, 0.85); } .p-home { align-self: center; width: calc(var(--p) * 108); height: calc(var(--p) * 5); border-radius: 999px; background: var(--ink); opacity: 0.9; margin-top: calc(var(--p) * 10); } /* ---------- the laptop: --l is one design pixel of a 380px-wide reference */ .laptop { --lw: calc(var(--sw) * 0.34); --l: calc(var(--lw) / 380); width: var(--lw); } .lap-lid { position: relative; background: var(--ink); border-radius: calc(var(--l) * 14) calc(var(--l) * 14) calc(var(--l) * 5) calc(var(--l) * 5); padding: calc(var(--l) * 12) calc(var(--l) * 11) calc(var(--l) * 12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.09), 0 2px 6px rgba(26, 27, 33, 0.16), 0 20px 60px rgba(26, 27, 33, 0.12); } /* camera */ .lap-lid::before { content: ''; position: absolute; top: calc(var(--l) * 4.5); left: 50%; transform: translateX(-50%); width: calc(var(--l) * 4); height: calc(var(--l) * 4); border-radius: 50%; background: #33343d; } .lap-screen { display: flex; flex-direction: column; aspect-ratio: 16 / 10; background: var(--bone); border-radius: calc(var(--l) * 5); overflow: hidden; } /* a generic desktop app fills it: titlebar · sidebar · toolbar · cards */ .lap-titlebar { display: flex; align-items: center; gap: calc(var(--l) * 5); height: calc(var(--l) * 17); padding: 0 calc(var(--l) * 8); background: var(--sheet-hi); border-bottom: 1px solid var(--hairline); } .lap-titlebar i { width: calc(var(--l) * 4.5); height: calc(var(--l) * 4.5); border-radius: 50%; background: var(--hairline); } .lap-work { flex: 1; display: flex; min-height: 0; } .lap-side { width: calc(var(--l) * 88); background: var(--recessed); border-right: 1px solid var(--hairline); padding: calc(var(--l) * 8) calc(var(--l) * 7); display: flex; flex-direction: column; gap: calc(var(--l) * 8); } .lap-side .g { height: calc(var(--l) * 5); } .lap-side .g:nth-child(2) { width: 74%; } .lap-side .g:nth-child(3) { width: 58%; } .lap-side .g:nth-child(4) { width: 66%; } .lap-side .g:nth-child(5) { width: 48%; } /* the active item wears the studio's wash */ .lap-active { position: relative; height: calc(var(--l) * 14); border-radius: calc(var(--l) * 4); background: var(--copper-wash); border: 1px solid color-mix(in srgb, var(--copper) 25%, transparent); } .lap-active::after { content: ''; position: absolute; left: calc(var(--l) * 5); top: 50%; transform: translateY(-50%); width: 56%; height: calc(var(--l) * 5); border-radius: 999px; background: color-mix(in srgb, var(--copper-deep) 70%, transparent); } .lap-main { flex: 1; min-width: 0; padding: calc(var(--l) * 9); display: flex; flex-direction: column; gap: calc(var(--l) * 8); } .lap-toolbar { display: flex; align-items: center; gap: calc(var(--l) * 6); } .lap-toolbar .g-ttl { width: calc(var(--l) * 76); height: calc(var(--l) * 7); } .lap-toolbar .g-btn { margin-left: auto; width: calc(var(--l) * 34); height: calc(var(--l) * 12); border-radius: 999px; background: var(--copper); } .lap-cards { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: calc(var(--l) * 8); } .lap-card { background: var(--sheet); border: 1px solid var(--hairline); border-radius: calc(var(--l) * 6); box-shadow: 0 1px 2px rgba(26, 27, 33, 0.04); padding: calc(var(--l) * 8); display: flex; flex-direction: column; gap: calc(var(--l) * 6); min-height: 0; } .lap-card .g { width: 46%; height: calc(var(--l) * 4.5); } .lap-card .g-ink { width: 32%; height: calc(var(--l) * 8); } /* the tall card charts something, quietly */ .lap-chart { grid-row: 1 / 3; } .lap-chart svg { flex: 1; width: 100%; height: auto; min-height: 0; } /* the base, a little wider than the lid, with the trackpad notch */ .lap-base { position: relative; margin: 0 calc(var(--l) * -20); height: calc(var(--l) * 11); background: linear-gradient(#3b3c46, #2a2b33); border-radius: 0 0 calc(var(--l) * 9) calc(var(--l) * 9); box-shadow: 0 5px 16px rgba(26, 27, 33, 0.12); } .lap-base::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: calc(var(--l) * 62); height: calc(var(--l) * 3.5); background: #4e4f5a; border-radius: 0 0 999px 999px; } /* ---------- the browser window: --w is one design pixel of a 280px-wide reference */ .win { --ww: calc(var(--sw) * 0.245); --w: calc(var(--ww) / 280); width: var(--ww); background: var(--sheet); border: 1px solid var(--hairline); border-radius: calc(var(--w) * 12); box-shadow: var(--lift); overflow: hidden; } .win-bar { display: flex; align-items: center; gap: calc(var(--w) * 10); height: calc(var(--w) * 34); padding: 0 calc(var(--w) * 12); background: var(--sheet-hi); border-bottom: 1px solid var(--hairline); } .win-dots { display: flex; gap: calc(var(--w) * 6); } .win-dots i { width: calc(var(--w) * 9); height: calc(var(--w) * 9); border-radius: 50%; background: var(--hairline); } .win-url { flex: 1; height: calc(var(--w) * 18); border-radius: 999px; background: var(--recessed); border: 1px solid var(--hairline); } .win-body { display: flex; flex-direction: column; aspect-ratio: 16 / 10; background: var(--bone); } /* the site's own home page, in miniature — the one screen whose content is real, headline and all */ .win-mini-head { display: flex; align-items: center; justify-content: space-between; height: calc(var(--w) * 22); padding: 0 calc(var(--w) * 10); border-bottom: 1px solid var(--hairline); } .win-mini-head img { width: calc(var(--w) * 56); height: auto; } .win-mini-nav { display: flex; gap: calc(var(--w) * 6); } .win-mini-nav .g { width: calc(var(--w) * 14); height: calc(var(--w) * 3.5); } .win-mini-hero { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--w) * 6); padding: calc(var(--w) * 6) calc(var(--w) * 14) 0; text-align: center; } .win-mini-hero .g-eyebrow { width: 20%; height: calc(var(--w) * 3); border-radius: 999px; background: color-mix(in srgb, var(--copper-deep) 40%, transparent); } .win-mini-title { margin: 0; font-family: var(--font-display); font-weight: 690; font-size: calc(var(--w) * 13); line-height: 1.06; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; } .win-mini-hero .g-lede { width: 56%; height: calc(var(--w) * 4); } /* the register that closes the real hero, at 1:5 */ .win-mini-rail { margin: calc(var(--w) * 10) calc(var(--w) * 12) calc(var(--w) * 12); height: calc(var(--w) * 2); border-radius: 999px; background: linear-gradient(90deg, var(--copper) 0%, var(--amber) 100%); } /* ------------------------------------------------ the spine A fixed index down the left edge: what the page contains, and where you are in it. The fill runs copper into amber — the same rail the hero closes with. It carries real information, so it earns its place. Home page only; there is no markup for it on the legal pages. */ .spine { position: fixed; left: 30px; top: 50%; transform: translateY(-50%); height: min(52vh, 440px); width: 12px; z-index: 40; pointer-events: none; } .spine-track { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--ink) 14%, transparent); } .spine-fill { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: linear-gradient(180deg, var(--copper) 0%, var(--amber) 100%); } .spine a { position: absolute; left: 9px; transform: translateY(-50%); writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--font-mono); font-weight: 600; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: color-mix(in srgb, var(--ink) 32%, transparent); pointer-events: auto; transition: color 0.3s var(--ease-out); } .spine a::before { content: ''; position: absolute; left: -9px; top: 50%; width: 5px; height: 1px; background: currentColor; } .spine a.is-here { color: var(--copper-deep); } .spine a:hover { color: var(--ink); } @media (max-width: 1180px) { .spine { display: none; } } /* ------------------------------------------------ chapters */ /* The chapters ride on the lit ground, so they no longer paint their own. A chapter opens with a short copper mark at the content column's edge — a mark, not a rule across the page. */ .chapter { position: relative; padding-block: clamp(72px, 10vh, 128px); scroll-margin-top: 64px; /* anchor jumps land below the sticky header */ } .chapter::before { content: ''; position: absolute; top: 0; left: max(clamp(20px, 4vw, 36px), calc(50% - 620px + clamp(20px, 4vw, 36px))); width: clamp(64px, 9vw, 132px); height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--copper) 0%, color-mix(in srgb, var(--copper) 0%, transparent) 100%); } /* ---------- about — the creed as a manifesto, not body copy */ .about-grid { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr); gap: clamp(28px, 5vw, 88px); align-items: start; } .about-head { text-align: left; } /* the heading steps back to a margin note; the creed is the statement */ .about-title { font-size: clamp(1.05rem, 1.3vw, 1.22rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1.4; color: var(--ink-soft); max-width: 18em; margin: 14px 0 0; } /* Two sentences are the whole section, so they are set the way the site means them: display voice, left. The grey carries the setup, ink carries the words with weight, and the last three words are the one copper moment — the studio's accent closing its own creed. */ .creed { margin-top: 0; text-align: left; } .creed p { max-width: 17em; margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.95rem); font-weight: 600; letter-spacing: -0.028em; line-height: 1.2; color: var(--ink-soft); text-wrap: balance; } .creed .creed-ink { color: var(--ink); font-weight: 640; } .creed .creed-goal { color: var(--copper-deep); font-weight: 640; } /* the old creed rule, distilled: one copper breath between the statements, drawn in when the second statement lands */ .creed p + p::before { content: ''; display: block; width: 52px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--copper) 0%, color-mix(in srgb, var(--copper) 0%, transparent) 100%); margin: clamp(26px, 3.6vh, 42px) 0; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease-out) 0.2s; } .creed .reveal.revealed + .reveal.revealed::before { transform: scaleX(1); } /* ---------- contact The page opens with a monument and closes with one: the address set at headline scale, because it is the only thing on the page anyone is asked to act on. */ .contact-stack { text-align: left; } .contact-title { font-size: clamp(1.6rem, 2.9vw, 2.4rem); letter-spacing: -0.028em; margin: 0 0 16px; } .contact-lede { font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.55; color: var(--ink-soft); max-width: 30em; margin: 0 0 clamp(30px, 4.5vh, 52px); text-wrap: balance; } .contact-mail { position: relative; display: inline-block; max-width: 100%; font-family: var(--font-display); font-weight: 660; font-size: clamp(1.65rem, 5.4vw, 4.35rem); letter-spacing: -0.038em; line-height: 1; color: var(--copper-deep); text-decoration: none; } /* the address draws its own underline as it arrives */ .contact-mail::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.14em; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--copper) 0%, var(--amber) 100%); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease-out) 0.15s; } .contact-mail.revealed::after { transform: scaleX(1); } /* ------------------------------------------------ inner pages (legal) */ /* A recessed masthead gives every inner page the same opening beat the home page uses for its chapters, and separates the title from the reading. */ .page-head { background: var(--recessed); border-bottom: 1px solid var(--hairline); padding-block: clamp(52px, 8vh, 92px) clamp(46px, 7vh, 80px); } .page-head h1 { font-size: clamp(2.15rem, 4.6vw, 3.2rem); letter-spacing: -0.028em; margin-bottom: 20px; max-width: 15em; } .page-lede { font-size: clamp(1.04rem, 1.45vw, 1.2rem); line-height: 1.62; color: var(--ink-soft); max-width: 34em; margin: 0 0 26px; } .page-stamp { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); margin: 0; } .legal { padding-block: clamp(48px, 7vh, 78px) clamp(64px, 9vh, 104px); } .legal-body { max-width: 38em; counter-reset: clause; } /* Clauses number themselves, so the headings stay plain language and the numbering can never drift out of step with the document. */ .legal-body h2 { counter-increment: clause; font-size: clamp(1.28rem, 2.1vw, 1.55rem); letter-spacing: -0.018em; margin: 52px 0 14px; } .legal-body h2::before { content: counter(clause, decimal-leading-zero); display: block; font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; color: var(--copper); margin-bottom: 10px; } /* headings outside the numbered run (support page) opt out */ .legal-body h2.unnumbered { counter-increment: none; } .legal-body h2.unnumbered::before { content: none; } .legal-body h3 { font-family: var(--font-display); font-weight: 620; font-size: 1.02rem; letter-spacing: -0.012em; margin: 26px 0 8px; } .legal-body p { color: var(--ink-soft); margin: 0 0 15px; } .legal-body ul { color: var(--ink-soft); margin: 0 0 15px; padding-left: 1.15em; } .legal-body li { margin-bottom: 9px; } .legal-body li::marker { color: var(--copper); } .legal-body strong { color: var(--ink); font-weight: 600; } /* company particulars, set as a table rather than a list of stray lines */ .legal-body dl { margin: 0 0 15px; border-top: 1px solid var(--hairline); } .legal-body dt { font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); padding-top: 14px; } .legal-body dd { margin: 4px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); color: var(--ink-soft); } /* the standout summary card at the top of a legal page */ .key-card { background: var(--sheet); border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--lift); padding: clamp(24px, 3.2vw, 34px); overflow: hidden; } /* the copper→amber mark the home page's chapters carry */ .key-card::before { content: ''; display: block; width: 44px; height: 3px; border-radius: 999px; margin-bottom: 18px; background: linear-gradient(90deg, var(--copper) 0%, var(--amber) 100%); } .key-card .key-line { font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px; } .key-card ul { margin: 0; padding-left: 1.15em; color: var(--ink); } .key-card li { margin-bottom: 10px; } .key-card li:last-child { margin-bottom: 0; } .key-card li::marker { color: var(--copper); } /* callout for the safety / verify-your-results clause. Copper, not amber — amber stays reserved for first-release accents. */ .note-card { background: var(--copper-wash); border: 1px solid color-mix(in srgb, var(--copper) 32%, var(--hairline)); border-radius: var(--r-control); padding: 20px 22px; margin: 0 0 15px; } .note-card p { margin: 0; color: var(--ink); } /* ------------------------------------------------ footer */ .site-foot { border-top: 1px solid var(--hairline); background: transparent; padding: 56px 0 48px; } .foot-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 30px; } .foot-logo { width: 148px; opacity: 0.88; } .foot-contact { font-style: normal; font-size: 14.5px; color: var(--ink-soft); text-align: right; line-height: 1.8; } .foot-links { display: flex; flex-wrap: wrap; gap: 10px 26px; border-top: 1px solid var(--hairline); padding-top: 22px; margin-bottom: 20px; } .foot-links a { font-family: var(--font-display); font-weight: 560; font-size: 14.5px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } .foot-links a:hover { color: var(--copper-deep); text-decoration: underline; text-underline-offset: 4px; } /* company particulars — required of an Estonian company, and what a verifier (Apple, D&B, a customer) checks the site against. */ .imprint { display: flex; flex-wrap: wrap; gap: 2px 20px; margin: 0 0 14px; font-size: 12.5px; line-height: 1.7; color: var(--ink-faint); } .imprint > span { white-space: nowrap; } .imprint .imprint-addr { white-space: normal; } .imprint b { font-weight: 500; color: var(--ink-soft); } .foot-legal { border-top: 1px solid var(--hairline); padding-top: 22px; } .foot-legal p { margin: 0 0 6px; font-size: 13px; color: var(--ink-soft); max-width: 72ch; } /* ------------------------------------------------ motion */ /* page-load rise (hero only) */ .js .rise { opacity: 0; transform: translateY(16px); animation: rise 0.75s var(--ease-out) forwards; } .js .rise.d1 { animation-delay: 0.08s; } .js .rise.d2 { animation-delay: 0.16s; } .js .rise.d3 { animation-delay: 0.24s; } @keyframes rise { to { opacity: 1; transform: none; } } /* scroll reveals */ .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--d, 0s); } .js .reveal.revealed { opacity: 1; transform: none; } /* ------------------------------------------------ reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .rise, .js .reveal { opacity: 1; transform: none; animation: none; transition: none; } /* the drawn lines arrive already drawn; the arrow stops nudging. site.js also stops driving every scroll transform. */ .creed p + p::before, .contact-mail::after { transform: scaleX(1); transition: none; } .hero-down span { animation: none; } .release, .release::before, .release-name i { transition: none; } .release::before { transform: scaleY(1); } } /* ------------------------------------------------ responsive */ @media (max-width: 1000px) { /* words over picture; the stage column still reaches the page edge */ .product-head { grid-template-columns: 1fr; gap: 34px; } .stage-col { margin-right: calc(-1 * clamp(20px, 4vw, 36px)); } .about-grid { grid-template-columns: 1fr; gap: 26px; } } @media (max-width: 900px) { /* the hero stacks; the watermark falls back behind the type */ .hero-stack { grid-template-columns: 1fr; } .hero-lede { grid-column: 1 / -1; justify-self: start; } .hero-title { font-size: clamp(2.7rem, 12.4vw, 4.4rem); max-width: 100%; } .hero-mark { right: -34vw; width: 92vw; opacity: 0.05; } .creed p { max-width: 100%; font-size: clamp(1.4rem, 6vw, 2rem); } /* the stage folds into a tight cluster: phone grounded front-centre, laptop behind its left shoulder, browser behind its right. The ledger just above names all three, so the captions rest. */ .product-stage { aspect-ratio: 0.95; margin-top: 28px; } .product-stage::after { left: 2%; top: 4%; width: 92%; aspect-ratio: 1.1; } .fig-desktop { left: 0; bottom: 0; } .laptop { --lw: calc(var(--sw) * 0.56); } .fig-mobile { left: 35%; bottom: 0; } .fig-mobile .phone { --phone-w: calc(var(--sw) * 0.37); } .fig-web { left: auto; right: 0; top: 0; } .win { --ww: calc(var(--sw) * 0.44); } .stage-cap { display: none; } } @media (max-width: 640px) { body { font-size: 16px; } .head-row { gap: 10px; } .head-logo img { width: 102px; } .head-nav { gap: 10px; } .head-nav a { font-size: 12.5px; } .eyebrow { font-size: 10.5px; letter-spacing: 0.12em; } .hero-stack { padding-block: 36px 28px; } .hero-base { flex-wrap: wrap; gap: 8px 16px; padding-top: 15px; margin-bottom: 22px; } .hero-coord { font-size: 10px; letter-spacing: 0.11em; } .ledger-row { grid-template-columns: 6.4em minmax(0, 1fr); gap: 12px; } /* sized to hold one line at 320px — an address that breaks mid-word reads as a bug, not a monument */ .contact-mail { font-size: clamp(1.05rem, 6.6vw, 1.72rem); letter-spacing: -0.03em; } .foot-contact { text-align: left; } .legal-body h2 { margin-top: 38px; } .imprint { gap: 2px 14px; } .imprint > span { white-space: normal; } } /* Four nav items don't fit beside the wordmark on a handset — below 430px the