/* ========================================================================== NutriLog AI — marketing site Palette is the app's own: indigo #6366F1 (splash + adaptive icon background), green #22C55E (the logo dot and the calorie ring), on a night-indigo ground. ========================================================================== */ :root { /* brand */ --indigo: #6366F1; --indigo-2: #818CF8; --violet: #A78BFA; --green: #22C55E; --green-2: #4ADE80; --amber: #F59E0B; --rose: #F43F5E; --sky: #38BDF8; /* ground */ --bg: #0B1020; --bg-2: #0E1428; --card: rgba(255,255,255,.045); --card-2: rgba(255,255,255,.07); --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); /* ink */ --fg: #F4F6FF; --fg-2: #B9C0DA; --fg-3: #8A93B4; /* type */ --display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; /* spacing — spacious scale (density 3/10) */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 40px; --s-5: 64px; --s-6: 96px; --s-7: 128px; --r-sm: 12px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --ease: cubic-bezier(.2,.7,.3,1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* The aurora blobs, the phone's glow and the floating chips all deliberately sit outside the viewport edge. `overflow-x` must be clipped on the ROOT — setting it on alone does not work, because the root propagates its own overflow and keeps the horizontal scrollbar. `clip` rather than `hidden` so this never becomes a scroll container (which would break `position: sticky` on the nav). */ overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; } a { color: inherit; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--indigo); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--indigo-2); outline-offset: 3px; border-radius: 6px; } .wrap { width: min(1180px, calc(100% - 2 * var(--s-3))); margin-inline: auto; } .wrap--narrow { width: min(760px, calc(100% - 2 * var(--s-3))); } /* ── ambient aurora ──────────────────────────────────────────────────────── */ .aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(1200px 700px at 80% -10%, rgba(99,102,241,.20), transparent 60%), radial-gradient(900px 600px at 5% 10%, rgba(167,139,250,.14), transparent 60%), var(--bg); } .aurora__blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; } .aurora__blob--1 { width: 46vw; height: 46vw; left: -8vw; top: -6vw; background: rgba(99,102,241,.42); } .aurora__blob--2 { width: 38vw; height: 38vw; right: -6vw; top: 22vh; background: rgba(167,139,250,.30); } .aurora__blob--3 { width: 34vw; height: 34vw; left: 28vw; top: 62vh; background: rgba(34,197,94,.16); } /* ── nav ─────────────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: rgba(11,16,32,.55); border-bottom: 1px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease); } .nav.is-stuck { background: rgba(11,16,32,.86); border-bottom-color: var(--line); } .nav__inner { display: flex; align-items: center; gap: var(--s-3); height: 72px; } .nav__links { display: flex; gap: var(--s-3); margin-left: auto; font-size: 15px; font-weight: 500; } /* min-height 44px on every nav/footer link: they are text-sized, and a 25px tall tap target is the accessibility rule this design would otherwise miss */ .nav__links a { color: var(--fg-2); text-decoration: none; transition: color .2s var(--ease); display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; } .nav__links a:hover { color: var(--fg); } .nav__progress { height: 2px; width: 0%; background: linear-gradient(90deg, var(--indigo), var(--violet), var(--green)); } /* ── compact menu (< 1025px, where .nav__links is hidden) ─────────────────── */ .menu { display: none; position: relative; } .menu__btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); color: var(--fg-2); background: rgba(255,255,255,.03); transition: color .2s var(--ease), border-color .2s var(--ease); } .menu__btn::-webkit-details-marker { display: none; } /* Safari draws a triangle */ .menu__btn svg { width: 22px; height: 22px; } .menu__btn:hover, .menu[open] .menu__btn { color: var(--fg); border-color: var(--indigo-2); } .menu__btn path { transition: transform .25s var(--ease), opacity .18s var(--ease); transform-origin: 12px 12px; } .menu[open] .menu__l1 { transform: translateY(5px) rotate(45deg); } .menu[open] .menu__l2 { opacity: 0; } .menu[open] .menu__l3 { transform: translateY(-5px) rotate(-45deg); } .menu__panel { position: absolute; right: 0; top: calc(100% + 10px); display: flex; flex-direction: column; min-width: 210px; padding: 8px; border-radius: 16px; border: 1px solid var(--line); background: rgba(13,18,38,.97); backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgba(0,0,0,.55); } .menu__panel a { color: var(--fg-2); text-decoration: none; display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 15px; font-weight: 500; transition: color .2s var(--ease), background .2s var(--ease); } .menu__panel a:hover, .menu__panel a:focus-visible { color: var(--fg); background: rgba(255,255,255,.06); } /* `.menu__panel a` above is (0,2,0); a bare `.menu__cta` is (0,1,0) and loses, so the CTA showed at every width instead of only where the header CTA is hidden. Match the specificity. */ .menu__panel a.menu__cta { display: none; margin: 8px 6px 4px; padding: 0 18px; } .menu__panel a.menu__cta:hover, .menu__panel a.menu__cta:focus-visible { color: #fff; background: none; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--indigo-2); min-height: 44px; } .brand__mark { width: 30px; height: 30px; flex: none; } .brand__text { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--fg); letter-spacing: -.02em; } .brand__ai { color: var(--indigo-2); } /* ── buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--body); font-weight: 600; text-decoration: none; border-radius: 999px; border: 1px solid transparent; cursor: pointer; padding: 12px 22px; font-size: 15px; transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); min-height: 44px; } .btn--sm { padding: 10px 18px; font-size: 14px; min-height: 44px; } .btn--lg { padding: 16px 30px; font-size: 16.5px; min-height: 52px; } .btn--primary { background: linear-gradient(135deg, var(--indigo), #7C6CF6 55%, var(--violet)); color: #fff; box-shadow: 0 8px 30px -10px rgba(99,102,241,.9), inset 0 1px 0 rgba(255,255,255,.22); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(99,102,241,1), inset 0 1px 0 rgba(255,255,255,.3); } .btn--ghost { background: var(--card); color: var(--fg); border-color: var(--line-2); } .btn--ghost:hover { background: var(--card-2); border-color: rgba(255,255,255,.28); transform: translateY(-2px); } .btn:active { transform: translateY(0); } /* ── shared type ─────────────────────────────────────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); background: var(--card); border: 1px solid var(--line); padding: 8px 16px; border-radius: 999px; margin: 0 0 var(--s-3); } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.18); } .kicker { font-family: var(--display); font-size: 13.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo-2); margin: 0 0 var(--s-2); } .kicker--on-card { color: var(--violet); } .h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.1; margin: 0 0 var(--s-2); } .h2--sm { font-size: clamp(26px, 3.2vw, 36px); } .lede { font-size: clamp(17px, 1.5vw, 19.5px); color: var(--fg-2); max-width: 62ch; margin: 0 0 var(--s-5); } .grad { background: linear-gradient(100deg, var(--indigo-2) 0%, var(--violet) 45%, var(--green-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .ico { width: 17px; height: 17px; flex: none; } .section { padding: clamp(64px, 7.5vw, 104px) 0; } /* the nav is sticky at 72px — without this, every in-page anchor lands with its heading tucked underneath it */ section[id] { scroll-margin-top: 88px; } /* ── hero ────────────────────────────────────────────────────────────────── */ .hero { padding: clamp(48px, 8vw, 104px) 0 var(--s-6); } .hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-5); align-items: center; } .hero__title { font-family: var(--display); font-weight: 800; letter-spacing: -.038em; font-size: clamp(40px, 5.4vw, 66px); line-height: 1.06; margin: 0 0 var(--s-3); text-wrap: balance; } .hero__sub { font-size: clamp(17px, 1.6vw, 20px); color: var(--fg-2); max-width: 54ch; margin: 0 0 var(--s-4); } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: var(--s-3); } .hero__note { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--fg-3); margin: 0; } .hero__note .ico { color: var(--green); } /* ── phone ───────────────────────────────────────────────────────────────── */ .hero__device { position: relative; display: flex; justify-content: center; } .phone { position: relative; width: min(330px, 82vw); will-change: transform; } .phone__glow { position: absolute; inset: -14% -18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(99,102,241,.55), transparent 72%); filter: blur(38px); z-index: 0; } .phone__frame { position: relative; z-index: 1; border-radius: 46px; padding: 11px; background: linear-gradient(160deg, #2B3154, #141A32 55%, #0D1226); box-shadow: 0 46px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.16); } .phone__screen { border-radius: 36px; overflow: hidden; background: #F4F6FB; aspect-ratio: 9 / 18.6; } /* the in-phone app UI */ .app { padding: 20px 15px; font-size: 11.5px; color: #0F172A; height: 100%; } .app__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 13px; } .app__hi { font-family: var(--display); font-weight: 700; font-size: 16px; margin: 0; letter-spacing: -.02em; } .app__date { margin: 1px 0 0; color: #64748B; font-size: 11px; font-weight: 500; } .app__streak { display: inline-flex; align-items: center; gap: 5px; background: #FFE4E6; color: #BE123C; font-weight: 700; font-size: 10px; padding: 5px 9px; border-radius: 999px; white-space: nowrap; } .flame { width: 6px; height: 6px; border-radius: 50%; background: #F43F5E; } .app__card { background: #fff; border-radius: 18px; padding: 14px; margin-bottom: 11px; box-shadow: 0 3px 14px rgba(15,23,42,.06); } .app__ring-card { position: relative; text-align: center; padding-top: 16px; } .ring { width: 148px; height: 148px; transform: rotate(-90deg); display: block; margin: 0 auto; } .ring__track { fill: none; stroke: #EDF0F7; stroke-width: 15; } /* stroke-dasharray / stroke-dashoffset live as ATTRIBUTES on the , not here. Motion animates them as SVG attributes, and any CSS rule for the same property outranks a presentation attribute — so declaring them in this file silently pins the ring at its starting value while the attribute animates correctly underneath. */ .ring__value { fill: none; stroke: var(--green); stroke-width: 15; stroke-linecap: round; } .ring__label { position: absolute; top: 84px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; } .ring__num { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.03em; } .ring__cap { font-size: 9px; font-weight: 700; letter-spacing: .12em; color: #64748B; margin-top: 3px; } .app__split { display: flex; margin-top: 12px; border-top: 1px solid #EEF1F7; padding-top: 11px; } .app__split div { flex: 1; } .app__split div + div { border-left: 1px solid #EEF1F7; } .app__split b { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; } .app__split span { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; color: #64748B; } .app__macros .macro + .macro { margin-top: 10px; } .macro__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; } .macro__row span { color: #475569; font-weight: 600; } .macro__row b { font-weight: 700; font-size: 12px; } .macro__row i { color: #64748B; font-style: normal; font-weight: 600; } .bar { height: 7px; border-radius: 999px; background: #EDF0F7; overflow: hidden; } .bar__fill { display: block; height: 100%; width: var(--pct); border-radius: 999px; background: var(--c); transform-origin: left center; } .app__tip { display: flex; align-items: center; gap: 9px; background: #DCFCE7; color: #14532D; border-radius: 14px; padding: 11px 12px; font-weight: 600; line-height: 1.4; margin-bottom: 11px; } .app__tip-ico { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--green); color: #fff; display: grid; place-items: center; } .app__tip-ico svg { width: 15px; height: 15px; } .app__quick { display: flex; gap: 8px; } .app__quick span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; color: #475569; } .app__quick i { width: 100%; aspect-ratio: 1; max-width: 46px; border-radius: 14px; background: var(--c); color: #fff; display: grid; place-items: center; } .app__quick i svg { width: 20px; height: 20px; } .float-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: rgba(18,24,45,.86); border: 1px solid var(--line-2); backdrop-filter: blur(12px); padding: 10px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--fg); box-shadow: 0 16px 40px -16px rgba(0,0,0,.9); white-space: nowrap; } .float-chip b { font-family: var(--display); color: var(--green-2); } .float-chip .ico { color: var(--indigo-2); } .float-chip--a { left: -6%; top: 20%; } .float-chip--b { right: -4%; bottom: 22%; } /* ── stat strip ──────────────────────────────────────────────────────────── */ .strip { padding: var(--s-4) 0; border-block: 1px solid var(--line); background: rgba(255,255,255,.02); } .strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); } .strip__grid > div { display: flex; flex-direction: column; gap: 4px; } .strip__grid b { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.03em; line-height: 1; background: linear-gradient(120deg, var(--indigo-2), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; } .strip__grid span { font-size: 14px; color: var(--fg-3); line-height: 1.45; } /* ── steps ───────────────────────────────────────────────────────────────── */ .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); counter-reset: s; } .steps li { position: relative; padding: var(--s-4) var(--s-3) var(--s-3); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); } .steps__n { position: absolute; top: -20px; left: var(--s-3); width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 19px; color: #fff; background: linear-gradient(135deg, var(--indigo), var(--violet)); box-shadow: 0 12px 28px -12px rgba(99,102,241,.95); } .steps h3 { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; } .steps p { margin: 0; color: var(--fg-2); font-size: 15.5px; } /* ── bento ───────────────────────────────────────────────────────────────── */ .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); } .bento__card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-3); transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } .bento__card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px 200px at 12% 0%, var(--accent-glow, rgba(99,102,241,.20)), transparent 70%); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; } .bento__card:hover { transform: translateY(-4px); border-color: var(--line-2); background: var(--card-2); } .bento__card:hover::before { opacity: 1; } .bento__card--wide { grid-column: span 2; } .bento__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--accent-bg, rgba(99,102,241,.14)); color: var(--accent, var(--indigo-2)); border: 1px solid var(--accent-line, rgba(99,102,241,.28)); margin-bottom: var(--s-2); } .bento__ico svg { width: 23px; height: 23px; } .bento__card h3 { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; } .bento__card p { margin: 0; color: var(--fg-2); font-size: 15.5px; } .bento__card b { color: var(--fg); font-weight: 700; } .accent-indigo { --accent: var(--indigo-2); --accent-bg: rgba(99,102,241,.14); --accent-line: rgba(99,102,241,.30); --accent-glow: rgba(99,102,241,.22); } .accent-violet { --accent: var(--violet); --accent-bg: rgba(167,139,250,.14); --accent-line: rgba(167,139,250,.30); --accent-glow: rgba(167,139,250,.20); } .accent-green { --accent: var(--green-2); --accent-bg: rgba(34,197,94,.13); --accent-line: rgba(34,197,94,.30); --accent-glow: rgba(34,197,94,.18); } .accent-sky { --accent: var(--sky); --accent-bg: rgba(56,189,248,.13); --accent-line: rgba(56,189,248,.30); --accent-glow: rgba(56,189,248,.18); } .accent-amber { --accent: var(--amber); --accent-bg: rgba(245,158,11,.13); --accent-line: rgba(245,158,11,.30); --accent-glow: rgba(245,158,11,.18); } .accent-rose { --accent: var(--rose); --accent-bg: rgba(244,63,94,.13); --accent-line: rgba(244,63,94,.30); --accent-glow: rgba(244,63,94,.18); } /* ── pro ─────────────────────────────────────────────────────────────────── */ .pro { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-xl); border: 1px solid rgba(167,139,250,.26); background: radial-gradient(700px 320px at 88% 0%, rgba(167,139,250,.20), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); } .pro__body p { color: var(--fg-2); margin: 0 0 var(--s-2); } .pro__hon { border-left: 2px solid var(--violet); padding-left: 16px; color: var(--fg-3) !important; font-size: 15.5px; margin-bottom: 0 !important; } .pro__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; align-self: center; } .pro__list li { display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--fg-2); background: rgba(255,255,255,.04); border: 1px solid var(--line); padding: 11px 16px; border-radius: var(--r-sm); } .pro__list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--violet); box-shadow: 0 0 0 4px rgba(167,139,250,.16); } /* ── privacy ─────────────────────────────────────────────────────────────── */ .privacy { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin-top: var(--s-4); } .privacy > div { padding: var(--s-3); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); } .privacy h3 { font-family: var(--display); font-size: 18.5px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; } .privacy p { margin: 0; color: var(--fg-2); font-size: 15.5px; } .disclaimer { margin: var(--s-4) 0 0; padding: var(--s-3); border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--fg-3); font-size: 14.5px; line-height: 1.6; } .disclaimer b { color: var(--fg-2); } /* ── faq ─────────────────────────────────────────────────────────────────── */ .faq { display: flex; flex-direction: column; gap: 10px; margin-top: var(--s-4); } .faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); overflow: hidden; transition: border-color .25s var(--ease), background .25s var(--ease); } .faq details[open] { border-color: var(--line-2); background: var(--card-2); } .faq summary { cursor: pointer; list-style: none; padding: 18px 22px; font-family: var(--display); font-weight: 600; font-size: 17.5px; letter-spacing: -.015em; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 44px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; width: 10px; height: 10px; flex: none; border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3); transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); } .faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); } .faq p { margin: 0; padding: 0 22px 20px; color: var(--fg-2); font-size: 15.5px; } .faq a { color: var(--indigo-2); } /* ── cta ─────────────────────────────────────────────────────────────────── */ .cta { padding: clamp(64px, 7.5vw, 104px) 0; text-align: center; } .cta__inner { max-width: 720px; margin-inline: auto; padding: var(--s-5) var(--s-3); border-radius: var(--r-xl); border: 1px solid var(--line-2); background: radial-gradient(600px 300px at 50% 0%, rgba(99,102,241,.26), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); } .cta p { color: var(--fg-2); max-width: 48ch; margin: 0 auto var(--s-3); } .cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; } .cta__badge { display: inline-flex; align-items: center; gap: 9px; border: 1px dashed var(--line-2); border-radius: 999px; padding: 14px 22px; font-size: 14.5px; font-weight: 600; color: var(--fg-3); } .cta__fine { font-size: 13.5px; color: var(--fg-3); margin: var(--s-3) auto 0 !important; } /* ── footer ──────────────────────────────────────────────────────────────── */ .footer { border-top: 1px solid var(--line); padding: var(--s-5) 0 var(--s-4); background: rgba(0,0,0,.20); } .footer__inner { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; align-items: center; } .footer__brand { display: flex; align-items: center; gap: 13px; color: var(--indigo-2); } .footer__brand .brand__mark { width: 34px; height: 34px; } .footer__name { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--fg); margin: 0; } .footer__tag { margin: 2px 0 0; font-size: 13.5px; color: var(--fg-3); } .footer__links { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: 14.5px; } .footer__links a { color: var(--fg-2); text-decoration: none; transition: color .2s var(--ease); display: inline-flex; align-items: center; min-height: 44px; } .footer__links a:hover { color: var(--fg); text-decoration: underline; } .footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: space-between; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); } .footer__legal p { margin: 0; font-size: 13px; color: var(--fg-3); } /* ── reveal ────────────────────────────────────────────────────────────── Scoped to .js — a class an inline script sets. Without it the page renders fully visible, so a script that never loads costs the animation, not the content. site.js also force-reveals if Motion is missing. ───────────────────────────────────────────────────────────────────────── */ .js [data-reveal], .js [data-reveal-device], .js .app [data-macro], .js [data-float] { opacity: 0; } .js .bar__fill { transform: scaleX(0); } /* ── responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .hero__grid { grid-template-columns: 1fr; gap: var(--s-5); } .hero__copy { text-align: center; } .hero__sub { margin-inline: auto; } .hero__cta, .hero__note { justify-content: center; } .eyebrow { margin-inline: auto; } .bento { grid-template-columns: repeat(2, 1fr); } .bento__card--wide { grid-column: span 2; } .pro { grid-template-columns: 1fr; padding: var(--s-4); } .strip__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-3); } .nav__links { display: none; } /* .nav__links carried the margin-left:auto that pushed the right-hand group over; with it hidden the CTA has to take that job over. */ .menu { display: block; } /* the link row above is gone — this replaces it */ .nav__inner > .btn { margin-left: auto; } .section { padding: var(--s-6) 0; } } @media (max-width: 720px) { body { font-size: 16px; } .steps { grid-template-columns: 1fr; gap: var(--s-4); } .privacy { grid-template-columns: 1fr; } .bento { grid-template-columns: 1fr; } .bento__card--wide { grid-column: span 1; } .float-chip--a { left: -2%; top: 8%; } .float-chip--b { right: -2%; bottom: 12%; } .float-chip { font-size: 12.5px; padding: 9px 13px; } .cta__inner { padding: var(--s-4) var(--s-3); } .footer__inner { flex-direction: column; align-items: flex-start; } } /* Under ~560px the brand, a 44px menu button and a two-word CTA cannot share one 72px row: "Get early access" wrapped to two lines and took the header's height with it. The CTA moves into the menu, and the wordmark is stopped from wrapping. */ @media (max-width: 560px) { .nav__inner > .btn { display: none; } .menu { margin-left: auto; } .menu__panel a.menu__cta { display: inline-flex; } .brand__text { white-space: nowrap; } } @media (max-width: 400px) { .float-chip--a, .float-chip--b { display: none; } .strip__grid { grid-template-columns: 1fr; } } /* ── motion preferences ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal], .js [data-reveal-device], .js .app [data-macro], .js [data-float] { opacity: 1 !important; transform: none !important; } .js .bar__fill { transform: scaleX(1) !important; } .ring__value { stroke-dashoffset: 161; } * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }