/* ============================================================ HEADER — ported from lusion-replica (bar + full-screen menu), rebranded to Nestify and adapted to native page scrolling. ============================================================ */ .site-header { position: fixed; left: 0; top: 0; z-index: 52; width: 100%; padding: clamp(20px, 2.6vw, 34px) max(5vw, 32px); font-size: clamp(1rem, 1vw, 1.5rem); color: var(--nes-ink); transition: color .4s, font-size .45s var(--ease-out), padding .45s var(--ease-out), transform .55s var(--ease-out); pointer-events: none; } /* over the dark hero the whole bar flips to white */ html.is-dark-bg .site-header { color: #fff; } /* ---------- scroll behaviour (zipline.com) ---------- Past the first screenful the bar condenses: everything inside is sized in em off the header's own font-size, so one step down scales the wordmark and both pills together. Keep scrolling down and it leaves entirely; scroll back up and it returns still condensed, only expanding again once you're actually back at the top. */ html.is-hd-compact .site-header { font-size: clamp(.8125rem, .82vw, 1.125rem); padding-top: clamp(11px, 1.3vw, 17px); padding-bottom: clamp(11px, 1.3vw, 17px); } html.is-hd-hidden .site-header { transform: translateY(-135%); } /* (`html.is-menu-open .site-header { transform: none }` lived here — the bar had to come back when the sheet opened onto it. No sheet, no rule; see the note at the foot of this file.) */ /* 🔴 GRID, not space-between. The nav has to be centred on the VIEWPORT, not on whatever is left between a wordmark and three pills — those two are different widths, so space-between would park it off-centre and it would drift every time a button's label changed. `1fr auto 1fr` makes the middle column independent of both sides. (zipline's, measured: their nav spans 531→893, centre 712, against a viewport centre of 720.) */ .hd__row { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .hd__right { grid-column: 3; justify-self: end; } .hd__logo { display: block; color: inherit; pointer-events: auto; transition: color .5s; } /* the dot on the i keeps its place — what it hands over is its COLOUR. While the intro's drop is out on the page the logo wears a plain one (currentColor, so it reads white on the video and ink further down); it takes the blue back once the drop has left the frame. */ .hd__logo svg circle { transition: fill .5s ease; } html.is-dot-lent .hd__logo svg circle { fill: currentColor; } .hd__logo svg { width: 7.2em; height: auto; display: block; } .hd__right { position: relative; display: flex; align-items: center; gap: .75em; } .hd__btn { position: relative; display: flex; align-items: center; justify-content: center; height: 2.8em; padding: 0 1.2em; /* hollow, and the ball fills it — swapped with "Try it now" over the film, which now wears the solid pill these used to have */ background: transparent; border: 1.5px solid currentColor; border-radius: 6.25em; /* 🔴 `em`, so the pill rides the header's own clamp and shrinks with the bar when it condenses. It was briefly an absolute token shared with the page's "Meet Nestify" — see the note there. The two are not a pair: this is chrome, set in caps at 14px, and that is a hero CTA set in sentence case at nearly 19. Sharing a type spec made both worse. */ font: inherit; font-family: var(--font--ui); font-size: .875em; font-weight: 700; /* 🔴 ALL CAPS, AND THE TRACKING IS PART OF IT — the two ship together or not at all. Caps jam without the extra sidebearing, because a face's built-in spacing is drawn for lowercase, where ascenders and descenders do half the separating. .04em is what buys it back. So if the transform is ever dropped again, .04em must go with it: lowercase set that loose reads as a mistake rather than a decision. They were removed as a pair once and restored as a pair. The markup stays sentence case (Device, Menu, Close) — the shouting is presentation, so a screen reader is not handed DEVICE to spell out. */ text-transform: uppercase; letter-spacing: .04em; overflow: hidden; cursor: pointer; pointer-events: auto; } /* ---------- the frame is always on ---------- 🔴 THE PILLS ARE FRAMED ON THE FIRST SCREEN TOO, and the rule that hid them is gone: html.is-hd-top .hd__btn { border-color: transparent; } Its argument was about the home page's opener specifically — on the film the button is a WORD over a picture, not a control drawn on top of it, and a stroked pill in the corner of a full-bleed film reads as a sticker. That is true of the film and it was generalised to every page that has a first screen, which is all of them. The device page opens on a pale ground with a product floating in the middle of it; there is no picture for the pill to sit on top of, so all the rule did there was leave two unframed words in the corner with nothing holding them — which is the exact failure the same note goes on to describe for the scrolled state. 🔴 html.is-hd-top IS STILL SET by header.js and is still read by the compact/hide behaviour above. Only this one declaration went; the class is not dead and must not be removed from the script. 🔴 If the film ever wants its unframed corner back, the rule returns scoped to the page that has a film — `html.is-hd-top body.is-intro .hd__btn` or similar — rather than to every page that has a top. */ /* ---------- hover: the ball opens from the middle ---------- The same move "Try it now" makes over the film (.intro__cta::after in intro.css), brought up here so the two CTAs behave alike: a round fill wider than the pill, grown from dead centre, so the ENDS arrive last and it reads as liquid rather than as a bar sliding across. Sized off the width, not a fixed em: 120% of the width as a circle clears the height of any pill on the bar, at any of its sizes — the bar condenses on scroll and the pills shrink with it. 🔴 scale(0), not a small scale. A tenth of a ball this size is still a visible dot parked in the middle of the label. 🔴 120% is not free headroom: a centred circle of diameter 1.2w covers the pill only while h ≤ 0.66w. Measured at 1440 and 850 — GET THE APP 142×45 needs 75, has 85 DEVICE 99×45 needs 54, has 59 MENU 88×45 needs 50, has 53 ← the tight one A shorter label or a taller pill eats that margin and leaves the corners showing the pill's own colour. Re-check these two numbers if either changes. */ .hd__fill { position: absolute; z-index: 0; /* the pointer's entry point, and 240% to reach the far corner from it — see the note on .btn-disc::after in styles.css for both numbers */ left: var(--disc-x, 50%); top: var(--disc-y, 50%); width: 240%; aspect-ratio: 1; height: auto; border-radius: 50%; background: var(--hd-fill, var(--nes-ink)); transform: translate(-50%, -50%) scale(0); transition: transform .55s var(--ease-out); pointer-events: none; } .hd__btn:hover .hd__fill { transform: translate(-50%, -50%) scale(1); } /* everything readable rides above the disc */ .hd__cta-inner { position: relative; z-index: 1; } /* primary. Hollow like the others now, so the hierarchy is carried by the ORDER and by the arrow that only this one has — not by a filled shape. */ /* (.hd__cta — "Get the app" — lived here, with its own hover colour and the stretched that made the whole pill clickable. The bar carries one button now: Device. The .hd__cta-inner / .hd__cta-text spans below are NOT part of it — the Device button is built out of the same two, which is why they are still here.) */ .hd__cta-inner { display: flex; align-items: center; justify-content: center; gap: .625em; white-space: nowrap; } /* the only dark slide is now brand blue, so a blue pill would vanish — invert to a white one. The hover disc is --bead-blue: the same ink the drop pours into the slogan right under this button, so over the intro the pill fills with the blue already on screen. */ html.is-dark-bg .hd__cta { color: #fff; --hd-fill: #fff; } html.is-dark-bg .hd__cta:hover { color: var(--nes-ink); } /* secondary destination: same disc hover as the CTA — same blue, same timing — on the tan pill, so the hierarchy is carried by the RESTING state ("Get the app" is the dark pill, these are tan) and hovering any of the three answers in one voice. */ .hd__device { color: var(--nes-ink); --hd-fill: var(--nes-ink); text-decoration: none; transition: border-color .4s, color .2s; } .hd__device:hover { color: var(--nes-cream); } /* over the intro it takes --bead-blue, exactly as the CTA does: that is the blue already on screen in the logo's dot */ html.is-dark-bg .hd__device { color: #fff; --hd-fill: #fff; } html.is-dark-bg .hd__device:hover { color: var(--nes-ink); } /* 🔴 the label may not recolour before the disc is under it. Both change at once and the disc needs .52s to arrive, so a straight .4s colour tween spends most of the hover painting the new label on the OLD pill — white on tan, which is close to unreadable (visible for ~400ms). So: delayed and quick on the way in, immediate on the way out — the disc collapses from full size, so the label is uncovered the instant the cursor leaves and must be back to its resting colour by then. */ .hd__device:hover { border-color: transparent; transition-delay: 0s, .18s; /* border-color, color */ } /* ============================================================ THE MENU IS GONE — one button in the bar, at every width. What was here: .hd__menu-btn (the Menu/Close pill), .hd__backdrop and .hd__panel (the blue full-screen sheet), .hd__link + .hd__link-inner (Home / Features / Families / Privacy, each a two-copy roll on hover), .hd__news (the newsletter field at the foot of the sheet), and the `html.is-menu-open` states that drove all of them — including the `overflow: hidden` scroll lock on . 🔴 It was never a menu the whole site had. Two queries sat at the foot of this file and between them they cut the bar into three: ≥ 901px .hd__menu-btn display:none → Device only 768–900px both → Device + Menu ≤ 767px .hd__device display:none → MENU ONLY So a phone was the one width with no Device button in the bar, and the only way to the device page was through a sheet that also carried the site's only newsletter field. Removing the burger without deleting that `.hd__device { display: none }` would have left a phone with an empty bar, which is why the 767 query went with it rather than being edited. 🔴 The newsletter field went with the sheet and has no replacement — the footer has the app-store links and the Company/Socials columns, but no email capture. If one is wanted back, the footer is where it belongs now; there is no longer a panel to hold it. In-page navigation went the same way. The four anchors it carried (#hero, #features, #family-feel, #privacy) are still real sections on index.html — this page just no longer offers a jump list to them. ============================================================ */