/* ========================================================================== RatingEcho marketing site -------------------------------------------------------------------------- Static HTML/CSS, deliberately NOT Flutter. The app paints into a canvas, which means zero text in the DOM for crawlers and screen readers — the old index.html even said so in a comment ("a separate statically-rendered marketing page would rank considerably better"). This is that page. Effects are hand-ported from the three libraries this was modelled on, because none of them can run inside a Flutter canvas app: - lenis → real library, vendored at /lenis.min.js - inspira-ui → aurora background, spotlight card, border beam, marquee - animate-ui → number ticker, gradient/shimmer text, motion buttons Everything animated below is transform / opacity / background-position so it stays on the compositor thread. Anything that would animate layout is deliberately absent. ========================================================================== */ /* Self-hosted Poppins (latin subset only — this site is English-only), swapped in for the Google Fonts CDN link. That link was render-blocking: the browser had to fetch fonts.googleapis.com's CSS, then chase it to fonts.gstatic.com for the actual files, before any text could paint. Lighthouse measured ~2.5s of the page's LCP going to that round trip alone. Serving the four weights from this origin removes the extra DNS/TLS hops and the CSS fetch entirely. font-display: swap keeps text visible with a fallback font while these load, same behavior as the old &display=swap query param. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-400.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-500.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-600.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2'); } :root { --brand: #4f46e5; --brand-deep: #4338ca; --brand-press: #3730a3; --brand-soft: #eef2ff; --brand-line: #c7d2fe; /* Two golds, because one colour cannot do both jobs. --gold is the star glyph: amber is what a rating star is, and darkening it to satisfy a contrast rule would make it read as brown. It sits on the white phone mockup as an icon whose meaning comes from filled-vs-unfilled, not from the hue alone. --gold-text is for the same idea rendered as words or figures, where it is text and 1.4.3 applies. #f59e0b measures 2.15:1 on white — less than half the 4.5:1 floor — so the dashboard's gold stat was failing outright. This is amber-700 at 5.02:1, still unmistakably amber. */ --gold: #f59e0b; --gold-text: #b45309; --ink: #0b0f1c; --ink-2: #111827; --text: #1f2430; --muted: #6b7280; --line: #e5e7eb; --line-soft: #f3f4f6; --fill: #f9fafb; --canvas: #ffffff; --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --radius-xl: 30px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1); --shadow: 0 10px 30px -12px rgba(16, 24, 40, .18); --shadow-lg: 0 30px 70px -25px rgba(16, 24, 40, .35); --glow: 0 18px 45px -12px rgba(79, 70, 229, .55); /* 1160 left ~380px of empty page either side of the content on a 1920 monitor, which read as the site being narrower than the window rather than as generous margins. Widening this is safe in a way it would not be on a text layout: the one thing that must not grow with it is line length, and nothing here takes its measure from the wrap — .section-head is capped at 42rem, .hero-sub at 33rem, .foot-brand p at 22rem. What actually widens is the grids: guide tiles, plan cards, the bento and the hero's two columns. */ --maxw: 1320px; --ease: cubic-bezier(.22, 1, .36, 1); } *, *::before, *::after { box-sizing: border-box; } html.mode-site, html.mode-site body { margin: 0; padding: 0; } html.mode-site { -webkit-text-size-adjust: 100%; scroll-behavior: auto; /* Lenis owns scrolling; native smooth would fight it */ } .mode-site body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text); background: var(--canvas); line-height: 1.6; overflow-x: hidden; } /* Lenis drives scroll off rAF; these two are from its own stylesheet. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } .mode-site img { max-width: 100%; display: block; } /* :not(.btn) matters. As a plain `.mode-site a` this rule (0,1,1) outranked every `.btn*` colour rule (0,1,0), so buttons inherited their parent's colour instead — which painted the white CTA button's label white on white and made it read as an empty pill. */ .mode-site a:not(.btn) { color: inherit; } .mode-site a { text-decoration: none; } .mode-site h1, .mode-site h2, .mode-site h3, .mode-site h4 { margin: 0; line-height: 1.12; letter-spacing: -.022em; font-weight: 700; color: var(--ink); } .mode-site p { margin: 0; } .mode-site ul { margin: 0; padding: 0; list-style: none; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ── Type scale ─────────────────────────────────────────────────────────── */ .h-display { font-size: clamp(2.5rem, 6.2vw, 4.4rem); font-weight: 700; letter-spacing: -.034em; } .h-section { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -.028em; } .h-card { font-size: 1.16rem; letter-spacing: -.014em; } .lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--muted); } .eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); } /* Gradient text — animate-ui's gradient-text, as a background sweep. */ .grad { background: linear-gradient(100deg, #818cf8 0%, #ffffff 32%, #c7d2fe 55%, #ffffff 78%, #a5b4fc 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: sweep 7s linear infinite; } .grad-ink { background: linear-gradient(100deg, var(--brand) 0%, #7c3aed 45%, var(--brand) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: sweep 8s linear infinite; } @keyframes sweep { to { background-position: -220% 0; } } /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn { --btn-bg: var(--brand); display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 999px; border: 0; font: inherit; font-weight: 600; font-size: .97rem; cursor: pointer; background: var(--btn-bg); color: #fff; white-space: nowrap; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .2s; box-shadow: var(--glow); will-change: transform; } .btn:hover { transform: translateY(-2px); background: var(--brand-deep); } .btn:active { transform: translateY(0); background: var(--brand-press); } .btn svg { width: 17px; height: 17px; } .btn-ghost { background: transparent; color: var(--ink); box-shadow: none; border: 1px solid var(--line); } .btn-ghost:hover { background: var(--fill); border-color: var(--brand-line); } .btn-on-dark { background: #fff; color: var(--ink); box-shadow: 0 18px 45px -14px rgba(0, 0, 0, .6); } .btn-on-dark:hover { background: #fff; } .btn-outline-dark { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: none; border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); } .btn-outline-dark:hover { background: rgba(255, 255, 255, .13); } .btn-lg { padding: 16px 32px; font-size: 1.02rem; } /* ── Nav ────────────────────────────────────────────────────────────────── */ /* Transparent while the hero is still under it, frosted white the moment you scroll. The earlier all-transparent version failed for a concrete reason: with nothing behind it, page content slid under the bar and the hero's floating cards overlapped the links outright — "FAQ" was unreadable behind a review card. A bar has to be opaque to be a bar. z-index sits above the hero's floating cards for the same reason. */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 200; background: transparent; transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease); border-bottom: 1px solid transparent; } .nav.is-stuck { background: rgba(255, 255, 255, .88); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom-color: rgba(16, 24, 40, .08); box-shadow: 0 10px 30px -22px rgba(16, 24, 40, .55); } .nav-inner { display: flex; align-items: center; gap: 28px; height: 74px; transition: height .35s var(--ease); } .nav.is-stuck .nav-inner { height: 64px; } .nav .brand, .nav .nav-links a, .nav .nav-signin, .nav .btn, .nav .nav-burger, .nav .nav-burger span { transition: color .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } /* Over dark sections */ .nav.on-dark .brand { color: #fff; } .nav.on-dark .nav-links a { color: rgba(255, 255, 255, .78); } .nav.on-dark .nav-links a:hover { color: #fff; } .nav.on-dark .nav-signin { color: rgba(255, 255, 255, .92); } .nav.on-dark .re-mark { --echo: rgba(255, 255, 255, .85); } /* Inverted CTA: a white pill reads as the brightest thing on a dark field. */ .nav.on-dark .btn { background: #fff; color: var(--ink); box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .9); } .nav.on-dark .btn:hover { background: #fff; } .nav.on-dark .nav-burger { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); } .nav.on-dark .nav-burger span { background: #fff; } /* Over light sections */ .nav.on-light .brand { color: var(--ink); } .nav.on-light .nav-links a { color: var(--muted); } .nav.on-light .nav-links a:hover { color: var(--brand); } .nav.on-light .nav-signin { color: var(--ink); } .nav.on-light .re-mark { --echo: var(--brand); } .nav.on-light .btn { background: var(--brand); color: #fff; box-shadow: 0 12px 26px -14px rgba(79, 70, 229, .9); } .nav.on-light .btn:hover { background: var(--brand-deep); } .nav.on-light .nav-burger { border-color: var(--line); background: rgba(255, 255, 255, .7); } .nav.on-light .nav-burger span { background: var(--ink); } .brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 1.12rem; color: #fff; letter-spacing: -.02em; } .nav.is-stuck .brand { color: var(--ink); } /* ── Brand mark ───────────────────────────────────────────────────────── The RatingEcho speech bubble — indigo circle, "REcho" set in the same serif as web/favicon.svg, a tail pointing down, wrapped in the "amplified" echo ripple. The ripple is a direct port of _EchoPainter in lib/widgets/ratingecho_mark.dart so the web and the app pulse identically: 3 rings, one 2800ms cycle, radius 0.98 → 1.45, opacity peaking at 0.5 mid-cycle. Ring thickness is left constant rather than animated (the Flutter painter thins it from 2.6 to 1.1) because animating border-width would relayout every frame; transform+opacity stay on the compositor. ───────────────────────────────────────────────────────────────────────── */ /* display:inline-block matters — this is a , and an inline box ignores width/height entirely, which collapses the circle to nothing and leaves the letters spilling out as bare text. */ .re-mark { position: relative; display: inline-block; flex: none; width: var(--m, 32px); height: var(--m, 32px); } /* The lettering is an inline SVG carrying BrandGeometry's own coordinates (lib/widgets/brand_mark.dart) — letters at their own x on one shared baseline of 713, in the 240 unit box the circle occupies. It used to be three text spans in a centred flexbox, which is what made this bubble read differently from the app's: align-items:center centres every letter independently, so the small "cho" floated at mid-height instead of sitting on the R's baseline, justify-content:center ignored the x positions entirely, and a letter-spacing the app does not have was applied to the lavender letters only. Coordinates cannot drift the way flex centring did. Poppins comes from the page's own webfont, which is why this works here and not in web/favicon.svg — an SVG favicon cannot load a font. */ .re-bubble { position: absolute; inset: 0; border-radius: 50%; z-index: 2; background: var(--brand); box-shadow: 0 calc(var(--m) * .13) calc(var(--m) * .29) rgba(79, 70, 229, .3); } .re-bubble svg { position: absolute; inset: 0; width: 100%; height: 100%; font-family: 'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 700; } /* The tail belongs to the splash animation alone — see BrandGeometry. Kept hidden rather than stripped from the markup so the generated MARK string and gen_home.py do not need touching. */ .re-tail { display: none; } .re-echo { position: absolute; inset: 0; border-radius: 50%; z-index: 0; border: 2px solid var(--echo, var(--brand)); opacity: 0; transform: scale(.98); animation: re-echo 2800ms cubic-bezier(.5, 1, .89, 1) infinite; will-change: transform, opacity; } .re-echo:nth-of-type(2) { animation-delay: 933ms; } .re-echo:nth-of-type(3) { animation-delay: 1866ms; } @keyframes re-echo { 0% { transform: scale(.98); opacity: 0; } 50% { opacity: .5; } 100% { transform: scale(1.45); opacity: 0; } } /* Over the dark hero and footer the indigo ring disappears; go white there. */ .hero .re-mark, footer .re-mark, .mobile-menu .re-mark, .cta .re-mark { --echo: rgba(255, 255, 255, .85); } .nav.is-stuck .re-mark { --echo: var(--brand); } .nav-links { display: flex; gap: 26px; margin-left: 12px; } .nav-links a { font-size: .93rem; font-weight: 500; color: rgba(255, 255, 255, .78); position: relative; padding: 4px 0; transition: color .2s; } .nav.is-stuck .nav-links a { color: var(--muted); } .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); } .nav-links a:hover { color: #fff; } .nav.is-stuck .nav-links a:hover { color: var(--brand); } .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } .nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; } .nav-signin { font-size: .93rem; font-weight: 600; color: rgba(255, 255, 255, .9); padding: 9px 4px; } .nav.is-stuck .nav-signin { color: var(--ink); } .nav .btn { padding: 11px 22px; font-size: .92rem; box-shadow: none; } /* 44px, not the 34px this was. It only appears below 980px, which means it is the entire navigation on a phone — and 34px is under both Apple's 44pt and Android's 48dp minimum for something a thumb has to hit. The glyph inside is unchanged; only the tap area grew, so it looks the same and misses less. */ .nav-burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); cursor: pointer; padding: 0; place-items: center; } .nav.is-stuck .nav-burger { border-color: var(--line); background: #fff; } /* 14px lines with 2.6px of margin either side leaves 5.2px of air between them — wider than the lines are long is tall, so the mark read as three loose strokes rather than one icon. Every stock hamburger sits at roughly a 2:1 gap-to-stroke ratio; this is 16px lines at 1.6px with 4px between. */ .nav-burger span { display: block; width: 16px; height: 1.6px; background: #fff; margin: 2px auto; border-radius: 2px; transition: .3s var(--ease); } .nav.is-stuck .nav-burger span { background: var(--ink); } .mobile-menu { position: fixed; inset: 0; z-index: 55; background: rgba(11, 15, 28, .97); backdrop-filter: blur(14px); padding: 84px 22px 28px; display: flex; flex-direction: column; gap: 6px; opacity: 0; pointer-events: none; transform: translateY(-8px); /* visibility, not just opacity. opacity:0 hides a thing from eyes and from nothing else: the seven links in here stayed in the tab order at every width, so a keyboard user tabbing the desktop page — where the burger that opens this is display:none — walked through seven invisible links before reaching the hero. visibility:hidden takes them out of the tab order, and delaying it until the fade finishes keeps the animation. pointer-events alone never fixed this; it only ever governed the mouse. */ visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; } .mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: none; visibility: visible; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s; } /* .mode-site prefix is load-bearing: `.mode-site a:not(.btn)` (0,2,1) outranks a bare `.mobile-menu a` (0,1,1), so these links inherited the body's dark text and rendered near-invisible on the dark panel. Same cascade trap as the footer headings and the CTA button. */ .mode-site .mobile-menu a { color: #fff; font-size: 1.06rem; font-weight: 600; padding: 13px 2px; border-bottom: 1px solid rgba(255, 255, 255, .09); } .mode-site .mobile-menu a:last-of-type { border-bottom: 0; } .mode-site .mobile-menu a.btn { color: #fff; } .mobile-menu .btn { margin-top: 18px; padding: 13px 22px; font-size: .95rem; } /* ── Hero ───────────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: #fff; padding: 152px 0 108px; } /* Fade into the white body below. A straight linear ramp of white over a near-black ground goes grey almost immediately and reads as a hard band across the hero — the stops below hold the wash back until the last third, so the transition lands as atmosphere rather than a seam. */ .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 220px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .03) 34%, rgba(255, 255, 255, .14) 56%, rgba(255, 255, 255, .46) 76%, rgba(255, 255, 255, .85) 91%, #fff 100%); z-index: 3; pointer-events: none; } /* inspira-ui Aurora Background: slow drifting radial blooms. */ /* Opacity held well down — at .85 with near-opaque blooms this read as a saturated purple wall rather than atmosphere. */ .aurora { position: absolute; inset: -30% -10%; z-index: 0; filter: blur(96px); opacity: .55; } .aurora i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; will-change: transform; } .aurora i:nth-child(1) { width: 46vw; height: 46vw; left: 4%; top: 6%; background: radial-gradient(circle, rgba(79, 70, 229, .62), transparent 64%); animation: drift1 28s ease-in-out infinite; } .aurora i:nth-child(2) { width: 40vw; height: 40vw; right: 2%; top: 0; background: radial-gradient(circle, rgba(109, 91, 214, .42), transparent 64%); animation: drift2 34s ease-in-out infinite; } .aurora i:nth-child(3) { width: 34vw; height: 34vw; left: 34%; bottom: 0; background: radial-gradient(circle, rgba(62, 127, 184, .34), transparent 64%); animation: drift3 40s ease-in-out infinite; } /* Frozen below 900px. The blooms are 34-46vw circles under a 96px blur that drift on 28-40s loops, so the hero is still visually changing long after it has finished loading. Lighthouse scores Speed Index on how quickly the viewport becomes visually stable, and against a 40s cycle it never does: mobile measured 16.5s against a 1.1s First Contentful Paint, while desktop — unthrottled, absorbing the compositing — measured 0.9s. Holding them still keeps the exact colours and composition and drops only the motion, which is the part least perceptible on a phone-sized hero anyway. Desktop keeps it. */ @media (max-width: 900px) { .aurora i { animation: none; } } @keyframes drift1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(7vw, 4vh, 0) scale(1.14); } } @keyframes drift2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); } 50% { transform: translate3d(-6vw, 6vh, 0) scale(.92); } } @keyframes drift3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(.95); } 50% { transform: translate3d(4vw, -5vh, 0) scale(1.16); } } /* The grid lines and film grain that used to sit here are gone on purpose: at any real viewport they read as visible square blocks over the gradient rather than as texture. A deep vignette does the same job — stopping the gradient looking flat — without putting hard edges on screen. */ .hero-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(129, 140, 248, .18), transparent 60%), radial-gradient(ellipse 120% 80% at 50% 100%, rgba(11, 15, 28, .75), transparent 70%); } .grain { display: none; } .hero .wrap { position: relative; z-index: 4; } .hero-grid-2col { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 56px; align-items: center; } /* A pill that wraps stops being a pill: the badge sits alone on line one and the tail hangs under it as loose text. So it never breaks — the type shrinks to fit the line instead. Every internal length is in em for that reason, so padding, gap and badge shrink with the label and the shape stays a shape. */ .pill { display: inline-flex; align-items: center; gap: .686em; white-space: nowrap; padding: .534em 1.144em .534em .61em; border-radius: 999px; margin-bottom: 26px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); font-size: .82rem; font-weight: 500; color: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); } .pill b { background: linear-gradient(120deg, var(--brand), #a78bfa); color: #fff; padding: .229em .762em; border-radius: 999px; font-size: .878em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } /* The hero's copy column is the pill's real constraint, not the viewport: between 561 and 980 the mock takes 44% of the row, so a vw-based size would still wrap the line there while claiming there was room. Hence a container. The whole pill measures ~28.7× its font-size, so 3.35cqi keeps it inside the column with a few percent to spare, and min() means it only ever shrinks — at 428px and up it is the .82rem it always was. */ .hero-grid-2col > div:first-child { container-type: inline-size; } .hero-grid-2col .pill { font-size: min(.82rem, 3.35cqi); } /* The H1 carries the app name and what the product does, ahead of the slogan — Google's OAuth review reads the headline for exactly that, and a slogan on its own satisfies neither half. Two spans so the descriptive line can be typeset small without leaving the heading. */ .hero-h1 { margin: 0 0 22px; } /* Quiet enough not to compete with the display line under it — at 600 weight and .82 alpha it read as a second headline and the eye had nowhere to land first. */ .h1-lead { display: block; font-size: .86rem; font-weight: 500; line-height: 1.45; letter-spacing: 0; color: rgba(255, 255, 255, .58); margin-bottom: 14px; max-width: 32rem; } .h1-display { display: block; font-size: clamp(2.1rem, 4.9vw, 3.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; color: #fff; } .policy-links { margin-top: 18px; font-size: .86rem; color: rgba(255, 255, 255, .5); } .policy-links a { color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: 3px; } .policy-links a:hover { color: #fff; } .policy-links span { margin: 0 8px; } .inline-link { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; } /* Plain, selectable text stating what the product is — Google's OAuth review reads the homepage for exactly this, and the stylised wordmark in the nav does not extract as "RatingEcho". */ .purpose { font-size: .92rem; color: rgba(255, 255, 255, .76); max-width: 33rem; margin: -8px 0 18px; line-height: 1.55; } .hero h1 { color: #fff; } .mode-site .hero-sub { font-size: .92rem; color: rgba(255, 255, 255, .7); max-width: 33rem; margin-bottom: 30px; line-height: 1.55; } .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; } .hero-note { margin-top: 20px; font-size: .87rem; color: rgba(255, 255, 255, .64); display: flex; align-items: flex-start; gap: 8px; } .hero-note svg { width: 15px; height: 15px; color: #6ee7b7; flex: none; margin-top: 3px; } /* ── Hero device mock ───────────────────────────────────────────────────── */ /* 496px is not a taste call — it is the width this column had when --maxw was 1160, and every float-card offset below is a percentage of it. The cards are positioned against .mock while the phone inside is a flat min(310px, 78%), so widening the page widened the stage without moving the device: the column went to 571px, left:-8% became 46px instead of 40, and the cards slid out from under the phone until they were merely next to it. Pinning the stage to the geometry the offsets were tuned against keeps the overlap identical at any page width, and the extra column width becomes air around it. Both narrow bands reset this — see the ≤980 and ≤560 blocks. */ /* width, not max-width: auto margins in a grid item's inline axis override the default stretch, so max-width + auto margins let the box fall back to shrink-to-fit — 422px here, which overshot the other way and buried more of the phone than the cards ever did. An explicit width holds the stage at 496 and lets min() hand the column back whenever it is narrower than that. */ .mock { position: relative; perspective: 1400px; width: min(100%, 496px); margin: 0 auto; } /* A pool of light under the device, so the phone sits in the gradient rather than on top of it. Behind everything in the mock (z-index 0). */ .mock::before { content: ''; position: absolute; z-index: 0; pointer-events: none; left: 50%; top: 50%; width: 132%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(129, 140, 248, .22), transparent 62%); filter: blur(28px); } .mock-tilt { transform-style: preserve-3d; transition: transform .5s var(--ease); will-change: transform; } .phone { position: relative; z-index: 2; width: min(310px, 78%); margin: 0 auto; background: #fff; border-radius: 38px; padding: 11px; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .1); } .phone-screen { background: #fff; border-radius: 28px; overflow: hidden; } .phone-top { height: 24px; display: grid; place-items: center; } .phone-notch { width: 78px; height: 5px; border-radius: 99px; background: #e5e7eb; } .phone-body { padding: 6px 18px 22px; text-align: center; } .phone-logo-wrap { display: flex; justify-content: center; margin: 4px auto 16px; } .phone-q { font-size: 1.02rem; font-weight: 700; color: var(--ink); line-height: 1.3; } .phone-hint { font-size: .74rem; color: var(--muted); margin: 5px 0 15px; } .stars { display: flex; justify-content: center; gap: 5px; margin-bottom: 16px; } .stars svg { width: 27px; height: 27px; color: #e5e7eb; transition: color .25s var(--ease), transform .35s var(--ease); } .stars svg.on { color: var(--gold); transform: scale(1.08); } .rowlet { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: .78rem; color: var(--text); } .rowlet .mini { display: flex; gap: 2.5px; } .rowlet .mini svg { width: 12px; height: 12px; color: var(--gold); } .phone-cta { margin-top: 15px; background: var(--brand); color: #fff; border-radius: 12px; padding: 11px; font-size: .84rem; font-weight: 600; } .float-card { position: absolute; z-index: 5; background: rgba(255, 255, 255, .97); border-radius: 15px; padding: 12px 14px; width: 216px; /* A hairline ring in ink, not white — against the white phone behind them the old white border vanished and the two surfaces fused into one shape. */ box-shadow: 0 28px 56px -20px rgba(0, 0, 0, .62), 0 0 0 1px rgba(15, 23, 42, .06); border: 0; animation: bob 7s ease-in-out infinite; } .float-card .fc-top { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .float-card .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .float-card .fc-label { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .float-card .fc-text { font-size: .8rem; color: var(--text); line-height: 1.45; } .float-card .fc-text b { color: var(--ink); } /* The cards frame the phone from its corners rather than covering its screen: fc-1 peeks off the top-left, above the "How was your experience" header; fc-2 sits off the bottom-right near the submit button. Positions verified against real screenshots at 1180px and 1440px, not guessed — earlier values put fc-1 over the header text and pushed fc-2 past the viewport edge (clipped by .hero's overflow:hidden). pointer-events:none because they are decoration and must never eat a click meant for the CTA behind them. */ /* The layered/overlapping look: cards float over the phone's edges rather than tucked to the corners, which is the depth effect that reads as a living product shot. Positions verified against screenshots so they overlap the phone but stay inside the viewport and don't bury the header. */ /* Three cards floating around the phone: review top-left, live order on the right, loyalty bottom-left — a loose triangle that reads as a live product shot. Positions verified against screenshots so all three overlap the phone's edges but stay in the viewport and clear the header + submit button. fc-3 is a touch smaller so the bottom-left corner doesn't crowd. */ /* Positions are the difference between a product shot and a pile-up. Each card overlaps the phone's ROUNDED EDGE only — never the screen content. The earlier values put fc-2 across the Food/Service rating rows and left fc-3 half-buried under the phone body, which is what made the hero look broken. Checked against 1440 / 1180 / 900 screenshots, not guessed. */ /* Positions are the difference between a product shot and a pile-up. The phone is only 310px wide inside a 496px column, so a 216px card can never sit fully clear of it horizontally — which means the placement has to be chosen VERTICALLY, against the two bands of the screen that carry no text: the header strip above the question (y 161–260 at 1440) and the padding below the submit button (y 510–542). Both cards overlap the phone's rounded edge there and occlude nothing. The measured screen bands are, top to bottom: logo 210–256, question 265–305, hint 311–330, stars 330–357, the two rating rows 373–451, CTA 466–510. Anything landing in that range covers content — which is exactly what the previous `bottom: 30%` did to the Food and Service rows. */ .float-card { pointer-events: none; } .fc-1 { top: 1%; left: -17%; animation-delay: -1s; } .fc-2 { top: 92%; right: -13%; animation-delay: -3.5s; } .fc-3 { bottom: 1%; left: -17%; width: 194px; animation-delay: -5s; } /* Between the mobile breakpoint and ~1260 the wrap has stopped growing but the viewport has not: the outward offsets above run past the edge and .hero's overflow:hidden slices the cards. Tuck them in. Overlapping the phone more is safe here — the vertical bands they sit in are empty either way. */ @media (max-width: 1260px) { .float-card { width: 196px; } .fc-1 { left: -8%; } .fc-2 { right: -4%; } .fc-3 { left: -8%; width: 182px; } } /* Cards stay visible down to phones — the per-breakpoint rules below size and reposition them so they overlap the (now centred) phone without clipping. */ @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } } /* ── Marquee (inspira-ui) ───────────────────────────────────────────────── */ .strip { border-bottom: 1px solid var(--line); background: #fff; padding: 30px 0; } /* A wider fade at both ends — at 12% the items were still near full opacity when they hit the edge, so words got sliced mid-letter instead of dissolving. */ .marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); } .marquee-track { display: flex; gap: 46px; width: max-content; animation: slide 34s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-item { display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 500; color: var(--muted); white-space: nowrap; } .marquee-item svg { width: 17px; height: 17px; color: var(--brand); flex: none; } @keyframes slide { to { transform: translateX(-50%); } } /* ── Sections ───────────────────────────────────────────────────────────── */ .section { padding: 104px 0; } .section-head { max-width: 42rem; margin: 0 auto 56px; text-align: center; } .section-head .eyebrow { display: block; margin-bottom: 14px; } .section-head p { margin-top: 16px; } /* ── Stats ──────────────────────────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stat { text-align: center; padding: 30px 16px; border-radius: var(--radius); background: linear-gradient(180deg, #fff, var(--fill)); border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; } .stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-line); } .stat-n { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; color: var(--ink); letter-spacing: -.03em; } .stat-n .suf { color: var(--brand); } .stat-l { font-size: .84rem; color: var(--muted); margin-top: 4px; } /* ── Bento + spotlight (inspira-ui) ─────────────────────────────────────── */ /* Six columns, so every card's span must sum to a multiple of six or the last row orphans. It did: 4+2 / 2+2+2 / 3+3 / 2 came to twenty, leaving the final card alone against four columns of dead space. Now 4+2 / 2+2+2 / 2+2+2 — eighteen, three full rows. Adding a card here means re-checking that sum. */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } .card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; will-change: transform; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-line); } /* Mouse-follow spotlight; --mx/--my are written by site.js. */ .card::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(79, 70, 229, .1), transparent 62%); } .card:hover::before { opacity: 1; } .card-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); margin-bottom: 18px; } .card-icon svg { width: 22px; height: 22px; } .card h3 { margin-bottom: 9px; } .card p { font-size: .93rem; color: var(--muted); } .c-4 { grid-column: span 4; } .c-3 { grid-column: span 3; } .c-2 { grid-column: span 2; } /* Featured card: dark, with inspira-ui's rotating border beam. */ .card-dark { background: var(--ink); border-color: transparent; color: #fff; } .card-dark h3 { color: #fff; } .card-dark p { color: rgba(255, 255, 255, .68); } .card-dark .card-icon { background: rgba(255, 255, 255, .1); color: #a5b4fc; } .card-dark::before { background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(129, 140, 248, .22), transparent 60%); } .beam { position: relative; } /* A long, soft sweep. The old 62%→78% window was a short hard-edged segment that parked on one side of the card and read as a stray blue line rather than as light travelling round the border. */ .beam::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.25px; background: conic-gradient(from var(--angle, 0deg), transparent 40%, rgba(129, 140, 248, .35) 58%, #a5b4fc 72%, #c4b5fd 78%, rgba(129, 140, 248, .35) 88%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-beam 5.5s linear infinite; pointer-events: none; } @property --angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes spin-beam { to { --angle: 360deg; } } /* ── Language showcase ──────────────────────────────────────────────────── */ .langs { background: var(--fill); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .lang-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 54px; align-items: center; } .lang-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .chip { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .84rem; font-weight: 500; color: var(--muted); cursor: default; transition: all .3s var(--ease); } .chip.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 8px 20px -10px rgba(79, 70, 229, .9); } .lang-demo { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); } .demo-row { display: flex; gap: 13px; align-items: flex-start; padding: 15px 0; } .demo-row + .demo-row { border-top: 1px solid var(--line-soft); } .avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: #fff; background: linear-gradient(140deg, var(--brand), #7c3aed); } .avatar.rest { background: linear-gradient(140deg, #059669, #10b981); } .demo-who { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .demo-txt { font-size: .98rem; color: var(--ink); line-height: 1.5; min-height: 1.5em; } .demo-txt.typing::after { content: '▌'; color: var(--brand); animation: caret 1s steps(2) infinite; } @keyframes caret { 50% { opacity: 0; } } .demo-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 7px; } .demo-foot svg { width: 14px; height: 14px; color: var(--brand); } /* ── Steps ──────────────────────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; } /* A rule through the centre of the three markers, so the steps read as one sequence instead of three unrelated paragraphs. Sits behind the (opaque) markers and fades out at both ends rather than butting into the column edge. Centre line = .step padding-top (8) + half the 44px marker. */ .steps::before { content: ''; position: absolute; z-index: 0; top: 30px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); } .step { position: relative; z-index: 1; padding-top: 8px; } .step-n { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #1e1b3a, var(--ink)); color: #fff; font-weight: 700; font-size: .96rem; margin-bottom: 18px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8), 0 0 0 6px #fff; } .step h3 { margin-bottom: 8px; } .step p { font-size: .94rem; color: var(--muted); } /* ── Pricing ────────────────────────────────────────────────────────────── */ .toggle { display: inline-flex; padding: 4px; background: var(--fill); border: 1px solid var(--line); border-radius: 999px; margin: 0 auto 44px; } .toggle button { border: 0; background: transparent; font: inherit; font-size: .88rem; font-weight: 600; color: var(--muted); padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: .3s var(--ease); } .toggle button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); } .toggle .save { color: var(--brand); font-size: .76rem; margin-left: 5px; } /* stretch, not start — with align-items:start each card sized to its own feature list and the three bottom edges landed at three different heights. */ /* ── Pricing watermark ────────────────────────────────────────────────── Thermal slips drifting behind the plans, because this is the section where a reader is deciding whether to pay for a thing that prints them. overflow:hidden on the section is what makes the scatter safe: slips are placed past the edges on purpose so they read as a pattern continuing off the page rather than eight objects arranged inside a box, and without the clip they would widen the document and produce a horizontal scrollbar. The stacking is explicit. The section gets no z-index of its own — giving it one would put the whole thing in front of the sticky nav — so the layer sits at z-index 0 and the .wrap that holds the cards is lifted to 1. ───────────────────────────────────────────────────────────────────────── */ #pricing { position: relative; overflow: hidden; } #pricing > .wrap { position: relative; z-index: 1; } .slips { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .slips .slip { position: absolute; color: var(--ink); opacity: .055; width: 118px; height: auto; } /* Hand-placed, not random: each one sits in a margin or a gap between cards, since a slip behind an opaque white card is a slip nobody sees. The rotations are all different and none is a round number — a scatter with four things at 15deg reads as a grid that slipped. */ .slips .s1 { top: 4%; left: -2%; transform: rotate(-13deg); } .slips .s2 { top: 26%; left: 6%; transform: rotate(9deg); width: 92px; opacity: .04; } .slips .s3 { top: 62%; left: -3%; transform: rotate(21deg); width: 134px; } .slips .s4 { top: 8%; right: 3%; transform: rotate(17deg); } .slips .s5 { top: 44%; right: -2%; transform: rotate(-8deg); width: 146px; opacity: .05; } .slips .s6 { bottom: 3%; right: 8%; transform: rotate(-24deg); width: 96px; opacity: .04; } .slips .s7 { bottom: -4%; left: 28%; transform: rotate(6deg); width: 104px; opacity: .035; } .slips .s8 { top: -3%; left: 46%; transform: rotate(-19deg); width: 88px; opacity: .035; } /* Below 900 the cards go full width and there are no margins left to put a slip in, so every one of them would be behind a card doing nothing. */ @media (max-width: 900px) { .slips { display: none; } } @media (prefers-reduced-motion: no-preference) { .slips .slip { will-change: auto; } } .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; } .plan { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; position: relative; transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .plan.featured { border-color: var(--brand); box-shadow: var(--shadow-lg); } .plan-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; } .plan-name { font-size: 1.06rem; font-weight: 700; color: var(--ink); } .plan-for { font-size: .84rem; color: var(--muted); margin-top: 3px; min-height: 2.4em; } /* Fixed height and line-height, so the three CTAs land on one line. "Free" has no rupee glyph and no descender, so left to itself it set a shorter box than "₹2,499" and pushed the Basic column's button 6px out of step with the other two. */ .plan-price { display: flex; align-items: baseline; gap: 5px; margin: 20px 0 3px; min-height: 2.9rem; } .plan-price .amt { font-size: 2.5rem; line-height: 1.1; font-weight: 700; color: var(--ink); letter-spacing: -.035em; } .plan-price .per { font-size: .88rem; color: var(--muted); } /* min-height must match the height one line actually occupies, or the plans that have a line here (Basic's "During our launch period") sit taller than the ones that don't and the row of CTAs steps down. */ .plan-inr { font-size: .8rem; color: var(--muted); line-height: 1.5; min-height: 1.5em; } .plan .btn { width: 100%; margin: 22px 0; } .plan ul li { display: flex; gap: 10px; font-size: .9rem; color: var(--text); padding: 7px 0; } .plan ul svg { width: 17px; height: 17px; color: #059669; flex: none; margin-top: 3px; } .plan-foot { font-size: .78rem; color: var(--muted); text-align: center; margin-top: 52px; } /* The reset `.mode-site p { margin: 0 }` is specificity 0,1,1 and outranks a single class, so the margin above never applied on any page that carries mode-site — which at runtime is all of them, since site.js adds the class to the landing page too. The footnote has been sitting flush against the pricing cards whatever number was written here. */ .mode-site .plan-foot { margin-top: 52px; } /* ── FAQ ────────────────────────────────────────────────────────────────── */ .faq { max-width: 47rem; margin: 0 auto; } .qa { border-bottom: 1px solid var(--line); } .qa button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; padding: 22px 0; font-weight: 600; font-size: 1.02rem; color: var(--ink); } .qa button:hover { color: var(--brand); } .qa .ic { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; flex: none; transition: .35s var(--ease); position: relative; } .qa .ic::before, .qa .ic::after { content: ''; position: absolute; background: var(--ink); border-radius: 2px; transition: .35s var(--ease); } .qa .ic::before { width: 11px; height: 1.6px; } .qa .ic::after { width: 1.6px; height: 11px; } .qa.open .ic { background: var(--brand); border-color: var(--brand); transform: rotate(135deg); } .qa.open .ic::before, .qa.open .ic::after { background: #fff; } .qa .a { overflow: hidden; height: 0; transition: height .4s var(--ease); } .qa .a p { padding: 0 0 22px; font-size: .96rem; color: var(--muted); max-width: 40rem; } /* ── CTA + footer ───────────────────────────────────────────────────────── */ .cta { position: relative; overflow: hidden; background: var(--ink); color: #fff; text-align: center; padding: 104px 0; isolation: isolate; } .cta h2 { color: #fff; margin-bottom: 16px; } .cta p { color: rgba(255, 255, 255, .7); max-width: 34rem; margin: 0 auto 32px; } .cta .hero-actions { justify-content: center; } footer { background: var(--ink-2); color: rgba(255, 255, 255, .62); padding: 62px 0 34px; font-size: .9rem; } .foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; margin-bottom: 44px; } /* .mode-site prefix is load-bearing: as a bare `footer h4` (0,0,2) this lost to `.mode-site h4` (0,1,1) up top, which paints headings ink — invisible on the dark footer. */ .mode-site footer h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 15px; font-weight: 600; } footer a { display: block; padding: 5px 0; color: rgba(255, 255, 255, .62); transition: color .2s; } footer a:hover { color: #fff; } .foot-brand { color: #fff; } .foot-brand p { margin-top: 12px; max-width: 22rem; color: rgba(255, 255, 255, .55); font-size: .88rem; } /* .45 alpha computed to 4.47:1 against the footer's #111827, just under the 4.5:1 WCAG AA floor for text this size. .55 clears it with room to spare. */ .foot-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .84rem; color: rgba(255, 255, 255, .55); } /* ── Scroll reveal ──────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease), transform .75s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ── Focus ────────────────────────────────────────────────────────────────── The page had no focus styles at all, so anyone navigating by keyboard had no idea where they were — and because nothing here suppressed the default outline, what they actually got was the browser's, drawn in whatever colour it fancied against a dark hero it was never designed for. :focus-visible rather than :focus, so a clicked button does not keep a ring the mouse user never asked for. Every browser this site supports has it. The ring colour follows the section's own tone. Sections already declare data-tone for the nav's colour-inversion observer, so the same attribute drives this: indigo reads 8.6:1 on white, and would nearly vanish against the near-black hero, where white reads 19:1. Both clear the 3:1 that WCAG 2.4.11 asks of a focus indicator against what sits next to it. Outline, not box-shadow. Half the interactive elements here already carry a shadow for depth (.btn, .plan) and a focus box-shadow would replace it, making the control jump at the moment attention lands on it. Outline is painted outside the border box, follows border-radius in every current browser, and takes part in no layout. ────────────────────────────────────────────────────────────────────────── */ .mode-site { --focus-ring: var(--brand); } /* The dark half of the page: hero, dashboard showcase, CTA, footer, the nav before it sticks, and the mobile menu — which carries no data-tone because it is a fixed overlay rather than a section. */ .mode-site [data-tone="dark"], .mode-site .mobile-menu, .mode-site .nav:not(.is-stuck) { --focus-ring: #fff; } .mode-site a:focus-visible, .mode-site button:focus-visible, .mode-site summary:focus-visible, .mode-site input:focus-visible, /* Negative tabindex excluded: those are programmatic focus targets — the hero the skip link lands on — and a ring drawn round a whole section is noise, not guidance. The user is looking at where they arrived, not hunting for it. */ .mode-site [tabindex]:not([tabindex="-1"]):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; } /* Underline bars and lifts are hover affordances; a keyboard user arriving at the same link should get the same affordance, not just the ring. */ .mode-site .nav-links a:focus-visible::after { transform: scaleX(1); transform-origin: left; } /* Skip link. The nav, the hero and its floating cards sit ahead of the real content, so reaching the page by keyboard meant tabbing past all of it on every single load. Off-screen until focused, which is the one time it is needed — and it must not be display:none, or it would never be reachable to focus in the first place. */ .skip-link { position: absolute; left: 12px; top: -100px; z-index: 200; background: var(--brand); color: #fff; padding: 12px 18px; border-radius: var(--radius-sm); font-weight: 600; font-size: .95rem; text-decoration: none; transition: top .2s var(--ease); } .skip-link:focus-visible { top: 12px; outline: 3px solid #fff; outline-offset: 2px; } /* ── Responsive ─────────────────────────────────────────────────────────── */ /* ── On your phone ──────────────────────────────────────────────────────── */ /* Namespaced pk-* rather than reusing the hero's .phone: that one is tilted, carries floating cards and is sized against the hero grid. Sharing the class would tie two mockups with different jobs to one set of rules. */ .pocket-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 54px; align-items: center; } /* A notch smaller than the site's shared .lead. This column runs long — a paragraph plus three bullets plus a footnote — and at the full lead size it set the height of the whole section. Scoped rather than changing .lead, which the languages and dashboard sections also use at their own lengths. */ .pocket .lead { font-size: clamp(.95rem, 1.3vw, 1.06rem); } .pocket-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; } .pocket-list li { position: relative; padding-left: 24px; color: var(--muted); line-height: 1.58; font-size: .89rem; } .pocket-list li::before { content: ''; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); } .pocket-list b { color: var(--ink); font-weight: 650; } .pocket-foot { margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--line-soft); font-size: .77rem; color: var(--muted); display: flex; align-items: center; gap: 8px; } .pocket-foot svg { width: 15px; height: 15px; color: var(--brand); flex: none; } /* A soft brand wash behind the device. Without it the phone is a narrow object marooned in a wide column, which is what makes a mockup look pasted on. */ .pocket-stage { position: relative; display: grid; place-items: center; } .pocket-stage::before { content: ''; position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(79, 70, 229, .14), rgba(79, 70, 229, 0) 68%); } .pk-phone { position: relative; width: min(268px, 100%); aspect-ratio: 9 / 18.6; padding: 9px; border-radius: 42px; background: linear-gradient(155deg, #303a5c, #0e1320); box-shadow: 0 36px 72px -30px rgba(15, 20, 34, .6), inset 0 1px 0 rgba(255, 255, 255, .22); } .pk-island { position: absolute; z-index: 4; top: 21px; left: 50%; transform: translateX(-50%); width: 64px; height: 18px; border-radius: 999px; background: #0b0f1c; } /* The app's own canvas colour, so the white modules read as cards sitting on a page rather than as panels floating on nothing. */ .pk-screen { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: var(--fill); } /* ── Splash ── The page's own boot splash, reused rather than reinvented: same .rp-logo lockup as #rp-splash, same classes, so the phone shows what the app actually shows. Those sub-classes are global, not scoped to the id, which is the only reason this works — scale is the one thing overridden, since the real one is sized for a full screen. Hidden at rest and only animated once the stage scrolls into view. With scripting off .in never lands and the phone simply shows the dashboard, rather than a logo sitting there forever. */ .pk-splash { position: absolute; inset: 0; z-index: 3; opacity: 0; visibility: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #fff 0%, #f4f5fa 78%, #eceef6 100%); } .pk-splash .rp-logo { transform: scale(.62); } /* The lockup's own rules, ported from index.html's inline