/* * Blimae — site styles. * * Palette, type and gradients come from the app's own tokens * (src/design/tokens.ts): Lora for display, Nunito for text, the same pink and * violet, the same funnel wash. A landing page in a different typeface than the * app it sells is the first thing that makes a small product look assembled * rather than made. * * The page sells; it does not discuss how it sells. An earlier draft argued its * own honesty on the page — a sourcing table, a section explaining why there * were no reviews — which draws the eye to what is missing and reads as apology. * Honesty is a constraint on what may be written here, not the subject: no * invented counts, no fabricated testimonials, no store badge pointing at a * listing that does not resolve. Everything else is written to make her want it. */ :root { --pink-700: #b8408a; --pink-600: #da57a5; --pink-500: #f060b5; --pink-200: #f8b6dd; --pink-100: #facee8; --pink-50: #feeff8; --violet-700: #5a56ac; --violet-500: #7f79f2; --violet-50: #f2f2fe; --ink: #171717; --ink-soft: #55505c; --ink-mute: #8a8a8a; --line: #ececef; --bg: #ffffff; --bg-soft: #fbf9fc; --dark: #17141a; --wash: linear-gradient(150deg, #e7d3f2 0%, #f6d5cb 60%, #f4c9e2 100%); --cta: linear-gradient(96.8deg, #f0a9d3 0%, #f9dee3 50.5%, #9691f2 100%); --radius: 26px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; } /* * `height: auto` is not decoration. * * The markup carries width/height attributes so the browser reserves the right * box before the file arrives. Without this line those attributes also FIX the * rendered height — aspect-ratio cannot override an explicit height — and a * feature image rendered 1200px tall inside a 360px slot. Measured, not guessed. */ img { max-width: 100%; height: auto; display: block; } a { color: var(--pink-700); text-decoration-color: color-mix(in srgb, var(--pink-700) 32%, transparent); text-underline-offset: 3px; } a:hover { text-decoration-color: currentColor; } h1, h2, h3 { font-family: Lora, Georgia, serif; font-weight: 600; line-height: 1.12; letter-spacing: -0.018em; margin: 0; } h1 { font-size: clamp(3rem, 6.4vw, 5.2rem); } h2 { font-size: clamp(1.85rem, 3.5vw, 2.9rem); } h3 { font-size: 1.16rem; letter-spacing: -0.01em; } p { margin: 0 0 1.05em; } .wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; } .kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink-600); margin: 0 0 16px; } .kicker-light { color: var(--pink-200); } /* ------------------------------------------------------------ scroll reveal */ /* * Only armed once the script has confirmed motion is wanted. Without * `.has-reveal` on these rules never apply, so a reader with reduced * motion — or with JS off — gets the finished page rather than a blank one. */ .has-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .has-reveal .reveal.is-in { opacity: 1; transform: none; } /* ------------------------------------------------------------------ header */ .site-head { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.78); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); } .site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; } .brand { font-family: Lora, Georgia, serif; font-weight: 600; font-size: 1.4rem; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; } .nav { display: flex; gap: 28px; font-size: 0.94rem; } .nav a { color: var(--ink-soft); text-decoration: none; } .nav a:hover { color: var(--ink); } /* -------------------------------------------------------------------- hero */ .hero { position: relative; background: var(--wash); padding: clamp(56px, 8vw, 104px) 0 0; overflow: hidden; } /* * One soft bloom behind the phones. * * A single light source reads as art direction; three stacked blurred blobs read * as a template. It sits under the content and never over it. */ .hero-glow { position: absolute; right: -8%; top: 4%; width: 62%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0)); pointer-events: none; } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 4vw, 56px); align-items: center; } .hero-copy { padding-bottom: clamp(56px, 7vw, 96px); } .lede { max-width: 42ch; margin-top: 22px; font-size: clamp(1.05rem, 1.5vw, 1.24rem); color: #3b3442; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .cta-centre { justify-content: center; } .btn { display: inline-block; padding: 16px 32px; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; border: 1px solid transparent; transition: transform 0.18s ease, box-shadow 0.18s ease; } .btn-primary { background: var(--cta); color: #241f28; box-shadow: 0 10px 30px rgba(150, 145, 242, 0.32); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(150, 145, 242, 0.4); } .btn-ghost { background: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.95); color: #3b3442; } .btn-ghost:hover { background: #fff; } .note { margin-top: 20px; font-size: 0.88rem; color: #5d5566; } /* * The hero shot: one real screen, with the readout breaking out of its bezel. * * Overhanging the frame is the one device from the reference teardown worth * borrowing — Cal AI floats its itemised calories outside the phone so the * mechanic is legible in a glance. The same trick, with the artefact this * product actually makes. */ .hero-shot { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 460px; padding-top: 20px; } .hero-shot .phone { margin: 0; width: 72%; max-width: 268px; transform: translateX(14%); } /* ---------------------------------------------------------------- readout */ /* * The signature. * * A concern, a track, a figure — the shape of the thing the app hands back. It * is live HTML rather than a crop so the bars can fill on load and the numbers * can sit in Geist Mono, which is the app's own rule for every figure it * prints. Nothing else on the page is allowed to be this loud. */ .readout { position: absolute; left: 0; bottom: 12%; width: min(300px, 76%); padding: 20px 20px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 24px 60px rgba(60, 40, 90, 0.2); z-index: 2; } .readout-head { margin: 0 0 14px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--pink-600); } .readout ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; } .readout li { display: grid; grid-template-columns: 1fr 44px auto; align-items: center; gap: 10px; font-size: 0.84rem; color: #3b3442; } /* The track. `--v` is the score, so the fill and the printed figure cannot drift apart — one value drives both. */ .readout i { position: relative; height: 4px; border-radius: 99px; background: var(--pink-100); overflow: hidden; } .readout i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: 99px; background: var(--cta); } .readout b { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; font-weight: 500; font-size: 0.86rem; color: var(--ink); } .readout-foot { margin: 14px 0 0; font-size: 0.72rem; color: var(--ink-mute); } /* The bars draw themselves once, on entry. Skipped entirely under reduced motion, where the final width is already correct. */ .has-reveal .reveal.is-in .readout i::after { animation: fill 1s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes fill { from { width: 0; } } /* -------------------------------------------------------- phones, generally */ /* * The frame is drawn in CSS around a real screenshot rather than composited into * a hardware mock-up PNG: it stays crisp at any size, and a re-capture drops * straight in with nothing to re-render. */ .phone img { width: 100%; border-radius: 34px; border: 9px solid #17141a; background: #17141a; box-shadow: 0 26px 60px rgba(60, 40, 90, 0.22); } figure.phone { margin: 0; max-width: 290px; justify-self: center; } /* ---------------------------------------------------------------- features */ .feature { padding: clamp(72px, 9vw, 128px) 0; } .feature-soft { background: var(--bg-soft); border-block: 1px solid var(--line); } .feature-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(32px, 6vw, 80px); align-items: center; } /* Alternate which side the screen sits on, so four feature blocks in a row do not read as one template repeated. */ .feature-flip .feature-copy { order: 2; } .feature-copy p { color: var(--ink-soft); font-size: 1.06rem; max-width: 46ch; } .feature-copy h2 { margin-bottom: 20px; } .chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 28px 0 0; padding: 0; list-style: none; } .chips li { padding: 9px 17px; border-radius: 999px; background: var(--pink-50); border: 1px solid var(--pink-200); font-size: 0.92rem; font-weight: 600; color: #6b2b52; } /* The one dark feature block: contrast where the argument turns to proof. */ .dark { background: var(--dark); color: #f3edf2; padding: clamp(72px, 9vw, 128px) 0; } .dark h2 { color: #fff; } .dark .feature-copy p { color: #c3bac9; } /* ------------------------------------------------------------------- trust */ .trust-grid { display: grid; grid-template-columns: 1fr 0.8fr; gap: clamp(32px, 6vw, 72px); align-items: center; } .trust-grid p { color: var(--ink-soft); font-size: 1.06rem; max-width: 48ch; } .trust-art { margin: 0; } .trust-art img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; } /* ------------------------------------------------------------------- price */ .price-wrap { text-align: center; } .price-wrap .kicker { margin-bottom: 14px; } .plans { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 44px; } .plan { position: relative; flex: 1 1 260px; max-width: 320px; padding: 34px 28px 30px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); text-align: center; } /* The recommended plan carries the brand gradient as its border, painted with two backgrounds clipped differently so the ring itself is the gradient rather than a coloured box sitting behind a white one. */ .plan-best { background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--cta) border-box; border: 2px solid transparent; box-shadow: 0 18px 44px rgba(150, 145, 242, 0.18); } .plan-flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--pink-500); color: #fff; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; white-space: nowrap; } .plan h3 { color: var(--ink-soft); font-family: Nunito, sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .plan-price { font-family: Lora, Georgia, serif; font-size: 2.9rem; line-height: 1.1; margin: 14px 0 4px; } .plan-price small { font-family: Nunito, sans-serif; font-size: 0.92rem; color: var(--ink-mute); margin-left: 6px; } .plan-sub { margin: 0; color: var(--ink-soft); font-size: 0.95rem; } .plan-terms { max-width: 58ch; margin: 34px auto 0; color: var(--ink-mute); font-size: 0.92rem; } /* ----------------------------------------------------------------- closing */ .closing { background: var(--wash); padding: clamp(76px, 10vw, 132px) 0; text-align: center; } .closing h2 { max-width: 18ch; margin: 0 auto; } .closing p { margin-top: 20px; color: #3b3442; font-size: 1.08rem; } /* ------------------------------------------------------------------ footer */ .site-foot { border-top: 1px solid var(--line); padding: 44px 0; font-size: 0.92rem; color: var(--ink-mute); } .site-foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: space-between; } .foot-links { display: flex; flex-wrap: wrap; gap: 22px; } .site-foot a { color: var(--ink-soft); text-decoration: none; } .site-foot a:hover { color: var(--ink); text-decoration: underline; } /* --------------------------------------------------------------- documents */ .doc { padding: clamp(52px, 7vw, 88px) 0 96px; } .doc .wrap { max-width: 760px; } .doc h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); } .doc h2 { font-size: 1.35rem; margin: 2.2em 0 0.6em; } .doc h2:first-of-type { margin-top: 1.6em; } .doc p, .doc li { color: #33303a; } .doc ul { padding-left: 22px; } .doc li { margin-bottom: 0.5em; } .doc .updated { color: var(--ink-mute); font-size: 0.92rem; } /* * Three encarts carry what the policy wants read even when skimmed: the * summary, the sentence about the photo, and the honest limit on erasure. */ .doc .card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 22px 0; } .doc .card p:first-child { margin-top: 0; } .doc .card p:last-child { margin-bottom: 0; } /* * The policy carries the only table on the site: four columns of long text. * Without a scrollable container it pushes the page wider than the viewport * on a phone — on the very page the reviewer opens. */ .doc .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px 0; } .doc table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.94rem; } .doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } .doc th { color: var(--ink); font-weight: 600; } .doc td { color: var(--ink-soft); } .doc code { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; } /* ------------------------------------------------------------- responsive */ @media (max-width: 900px) { .hero { padding-top: 48px; } .hero-grid, .feature-grid, .trust-grid { grid-template-columns: 1fr; } /* Order is reset so the screen always follows its copy on a phone; the alternating layout only means anything when the two sit side by side. */ .feature-flip .feature-copy { order: 0; } .hero-copy { padding-bottom: 8px; } .hero-shot { min-height: 0; padding-top: 28px; } .hero-shot .phone { width: 62%; max-width: 230px; transform: translateX(18%); } .readout { bottom: 6%; width: min(280px, 66%); } } @media (max-width: 560px) { .nav { gap: 16px; font-size: 0.86rem; } /* Four labels do not fit a narrow bar; the two that describe the product win. */ .nav a:nth-child(3), .nav a:nth-child(4) { display: none; } .btn { width: 100%; text-align: center; } } /* ---------------------------------------------------------------- library */ /* * Insight is shown as a shelf, not as a fifth phone. * * Four consecutive copy-and-screenshot blocks is one template repeated, and * alternating which side the phone sits on does not fix it — the eye reads the * rhythm, not the mirror. A library has spines, so this one gets covers, titles * and reading times: the shape of the thing itself. */ .lib-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: end; } .lib-lede { margin: 0; color: var(--ink-soft); font-size: 1.06rem; max-width: 46ch; } .guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; margin-top: clamp(36px, 5vw, 56px); } .guide { margin: 0; } .guide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; } .guide-meta { margin: 16px 0 8px; font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem; color: var(--pink-600); } .guide h3 { font-size: 1.18rem; line-height: 1.25; } /* ------------------------------------------------------------------- band */ /* * The breath. Full bleed, nothing over it. * * Sized in vw rather than px so it stays a band on a phone instead of becoming * a square: an image this wide, cropped to a tall box, loses the very negative * space it was shot for. */ .band { height: clamp(200px, 24vw, 380px); background-image: url('/assets/img/hero.jpg'); background-size: cover; background-position: center 55%; } @media (max-width: 780px) { .lib-head { grid-template-columns: 1fr; gap: 18px; } }