/* Yagyanam marketing — Minta-inspired cinematic dark theme. * * Typography: * - Inter (modern grotesque, weights 400–700) for display + UI labels. * Loaded from Google Fonts in . * - Fedra Sans Std (Book / Medium / Bold) for body. Self-hosted. * * Composition: * - Section-led editorial layout. Each section has an Inter eyebrow * label with a small pill prefix, a display headline, optional * lede, and content. Heavy use of photography (mountain in hero, * hand in manifesto, diagonal streak in feature section). * - Glass cards used sparingly — for offer, audience, purohit aside * and the form card only. Everything else is type + photography. */ /* ── @font-face ─────────────────────────────────────────────── */ /* Inter (display + UI) loaded via Google Fonts in . * Fedra Sans (body) self-hosted below. */ @font-face { font-family: "Fedra Sans"; src: url("/about/fonts/FedraSansStd-Book.otf?v=20260514a") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Fedra Sans"; src: url("/about/fonts/FedraSansStd-Medium.otf?v=20260514a") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Fedra Sans"; src: url("/about/fonts/FedraSansStd-Bold.otf?v=20260514a") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Brand palette — earth-toned warmth. * Body bg pushed deeper (#0F0D0B vs the original #1A1714) to * match the Minta reference's near-black charcoal feel. Every * gradient that used to stop at `rgba(15, 13, 11, …)` has been * updated to `rgba(15, 13, 11, …)` so the photo veils and * section blends still terminate at the page background colour * exactly — no visible seams introduced by the colour shift. */ --bg: #0F0D0B; /* Deep Charcoal (matches Minta) */ --bg-deep: #07060A; /* used sparingly for elevation contrast */ --surface: #1A1714; /* Warm Concrete */ --surface-elevated: #23201C; --border-strong: #2D2925; /* Stone Border */ --cream: #E8E2D6; /* Linen White */ --cream-soft: #C9C2B5; --cream-mute: #A89F90; /* Muted Taupe */ --amber: #D4A574; /* Amber Glow */ --ember: #B8703D; /* Ember Orange */ --ember-deep: #8C5328; --sage: #7A8471; /* Misty Sage */ --gold: #D4A574; --mark: #D4A574; /* Glass surface tokens — barely-there tint. */ --glass-bg: rgba(232, 226, 214, 0.02); --glass-bg-strong: rgba(232, 226, 214, 0.04); --glass-border: rgba(232, 226, 214, 0.14); --glass-border-strong: rgba(232, 226, 214, 0.24); /* Motion tokens — 300-400ms with cubic-bezier ease-out. */ --motion-quick: 180ms; --motion-base: 300ms; --motion-slow: 480ms; --ease-liquid: cubic-bezier(0.32, 0.72, 0.2, 1); --ease-spring: cubic-bezier(0.5, 1.4, 0.4, 1); --focus-ring: 0 0 0 3px rgba(212, 165, 116, 0.5); /* Font families */ --display: "Inter", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --body: "Fedra Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--cream); font-family: var(--body); font-weight: 400; font-size: 16px; line-height: 1.55; letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overscroll-behavior-y: contain; background-attachment: fixed; overflow-x: clip; } html { overflow-x: clip; background: var(--bg); } /* ── Accessibility — focus rings ───────────────────────────── */ :focus-visible { outline: none; box-shadow: var(--focus-ring); } button:focus-visible, a:focus-visible, .tab:focus-visible { border-radius: 14px; } :focus:not(:focus-visible) { outline: none; box-shadow: none; } /* ── Entrance animations ───────────────────────────────────── * * IMPORTANT: the topbar uses a TRANSFORM-FREE fade because any * non-`none` `transform` on a parent after the animation completes * leaves a containing block on it, which kills `backdrop-filter` * sampling on its descendants — the header pills would end up * seeing only the topbar's own (transparent) content instead of * the photo behind. The hero lede and stats keep their lift-fade * because they have no descendants relying on backdrop-filter. */ @keyframes lift-fade { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes topbar-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .topbar { animation: topbar-fade var(--motion-slow) var(--ease-liquid) both; animation-delay: 40ms; } .hero-content { animation: lift-fade var(--motion-slow) var(--ease-liquid) both; animation-delay: 120ms; } .stats { animation: lift-fade var(--motion-slow) var(--ease-liquid) both; animation-delay: 200ms; } } @keyframes ember-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(122, 132, 113, 0.22); } 50% { box-shadow: 0 0 0 6px rgba(122, 132, 113, 0.08); } } @media (prefers-reduced-motion: no-preference) { .chip .dot { animation: ember-pulse 2.6s var(--ease-liquid) infinite; } } /* ── Atmospheric backdrop ──────────────────────────────────── */ .bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--bg); } /* ── Grain overlay (disabled) ───────────────────────────────── * Setting `display: none` rather than removing the element so the * markup hook stays in place if film grain is ever wanted back. * * History: this overlay was tried at z-index 1, 49, and 200 with * `mix-blend-mode: overlay` and opacity 0.13–0.55. Every position * created a different visible seam: * – z-index 1 (below .shell): grain showed through the stats * section (no bg) but was blocked by the hero photo's opaque * veil → visible texture line at the hero/stats boundary. * – z-index 49 (inside .shell, above main): grain's overlay * blend mode dramatically brightened pure-dark areas like * the stats section, turning it gray while the textured hero * stayed dark → an even more visible seam. * – z-index 200 (above topbar): broke `backdrop-filter` on the * header pills via a WebKit interaction with blend-mode layers * above filtered elements. * * The cleanest match to the Minta reference is no grain at all — * uniform dark across every section, no texture mismatch. */ .grain { display: none; } /* ── Hero scroll fade ───────────────────────────────────────── * Two implementations, both targeting .hero-content: * * 1. CSS scroll-timeline (Safari 17.4+, Chrome 115+). * Pure GPU. Runs every frame the scroller moves. We tie the * animation range to the hero-section element so fading is * anchored to the section's own height, not viewport pixels. * * 2. JS fallback in index.html — sets inline opacity on scroll. * The JS is harmless when scroll-timeline is also running * (inline style wins, so the JS is the source of truth on * older Safari). * * The transition smooths the JS path; scroll-timeline path * already paints every frame so the transition is invisible. */ .hero-content { transition: opacity 80ms linear, transform 80ms linear; will-change: opacity, transform; } @keyframes hero-fade-out { to { opacity: 0; transform: translate3d(0, -24px, 0); } } @supports (animation-timeline: scroll()) { .hero-section { view-timeline-name: --hero; view-timeline-axis: block; } .hero-content { animation: hero-fade-out linear both; animation-timeline: --hero; animation-range: exit-crossing 0% exit-crossing 60%; } } /* ── Shell + layout ──────────────────────────────────────── */ .shell { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); } main { flex: 1; width: 100%; } /* ── Typography ────────────────────────────────────────────── */ a { color: var(--amber); text-decoration: none; border-bottom: 1px solid rgba(212, 165, 116, 0.35); transition: color var(--motion-base), border-color var(--motion-base); } a:hover { color: var(--cream); border-color: var(--cream); } h1, h2, h3, h4 { font-family: var(--display); color: var(--cream); font-weight: 500; letter-spacing: -0.015em; margin: 0 0 0.6rem; } h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.04; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; } h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.06; font-weight: 500; letter-spacing: -0.022em; text-wrap: balance; } h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.012em; } p { margin: 0 0 1em; color: var(--cream-soft); } strong { font-weight: 500; color: var(--cream); } /* ── Eyebrow label (used in every section) ─────────────────── */ .eyebrow { display: inline-flex; align-items: center; font-family: var(--display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cream-mute); margin: 0 0 1.4rem; } .eyebrow-pill { display: inline-block; width: 14px; height: 5px; border-radius: 999px; background: var(--cream-mute); margin-right: 0.6rem; vertical-align: middle; flex-shrink: 0; } /* Section-level lede (used in offer / journey / etc.) */ .section-lede { font-size: 1rem; line-height: 1.62; color: var(--cream-soft); margin: 0.8rem 0 0; max-width: 56ch; } /* ── Sticky top bar ────────────────────────────────────────── * Grid layout: [logo+wordmark | nav | cta] on desktop. On mobile * (≤720px) it morphs into three discrete iOS-26-Liquid-Glass * pills — the same three-bubble pattern as Safari's bottom * toolbar (back · URL · options). The header itself stays * background-transparent so the hand photo bleeds through; * only the three pills carry surface treatment. */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; /* Three pills clustered in the centre of the viewport on every * size, with a hamburger replacing the inline nav. Flex is the * cleanest container for "centred cluster" — justify-content * center keeps them at natural width with a small gap. * * The mobile media query (≤720px) overrides this to span edge- * to-edge with the wordmark stretching to fill the middle. */ display: flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.85rem 1.5rem; padding-top: max(0.85rem, env(safe-area-inset-top, 0)); width: 100%; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; } /* Inline nav links and Enquire CTA are retired in favour of the * hamburger menu on every viewport. They stay in the DOM (used as * fallback navigation for older browsers / screen readers) but * never render as separate header pills any more. */ .topbar-nav, .topbar-cta { display: none; } /* (Burger visibility / glass styling is defined on the * `.topbar-burger` rule itself, below — kept all in one block * so the cascade order is unambiguous.) */ /* Desktop left: logo pill + wordmark pill, both glass. */ .topbar-logo { position: relative; isolation: isolate; grid-column: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; border-radius: 999px; color: var(--cream); text-decoration: none; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(115%); backdrop-filter: blur(28px) saturate(190%) brightness(115%); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px -6px rgba(0, 0, 0, 0.35); transition: opacity var(--motion-base), transform var(--motion-base) var(--ease-spring); } .topbar-logo::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(140% 80% at 50% -30%, rgba(255, 255, 255, 0.18) 0%, transparent 55%); z-index: 1; } .topbar-logo > svg { position: relative; z-index: 2; width: 100%; height: 100%; display: block; } .topbar-logo:hover { transform: translateY(-1px); } .topbar-wordmark { position: relative; isolation: isolate; grid-column: 2; display: inline-flex; align-items: center; height: 44px; padding: 0 1.1rem; border-radius: 999px; font-family: var(--display); font-size: 0.98rem; font-weight: 600; letter-spacing: -0.012em; color: var(--cream); text-decoration: none; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(115%); backdrop-filter: blur(28px) saturate(190%) brightness(115%); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px -6px rgba(0, 0, 0, 0.35); transition: opacity var(--motion-base), transform var(--motion-base) var(--ease-spring); } .topbar-wordmark::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(140% 80% at 50% -30%, rgba(255, 255, 255, 0.18) 0%, transparent 55%); z-index: 1; } .topbar-wordmark > * { position: relative; z-index: 2; } .topbar-wordmark:hover { transform: translateY(-1px); } /* `.topbar-nav` and `.topbar-cta` are hidden on every viewport * (declared `display: none` near the top of this section). Their * children are still in the DOM as semantic fallback navigation * but they never render as header pills any more — those links * appear only inside the hamburger dropdown card. The old elaborate * glass-pill styling for these two elements was deleted because * later `display: flex / inline-flex` declarations were silently * overriding the `display: none`, making them reappear on screen. */ /* Hamburger — visible on every viewport now. Same glass-pill * recipe as `.topbar-logo` / `.topbar-wordmark` so the three * header pills share one material. The mobile @media query below * tweaks size + blur values for narrow screens. */ .topbar-burger { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 0; cursor: pointer; color: var(--cream); background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(115%); backdrop-filter: blur(28px) saturate(190%) brightness(115%); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px -6px rgba(0, 0, 0, 0.35); transition: transform var(--motion-base) var(--ease-spring), box-shadow var(--motion-base) var(--ease-liquid); } .topbar-burger::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(140% 80% at 50% -30%, rgba(255, 255, 255, 0.18) 0%, transparent 55%); z-index: 1; } .topbar-burger > svg { position: relative; z-index: 2; width: 22px; height: 22px; display: block; overflow: visible; } .topbar-burger:hover { transform: translateY(-1px); } /* Burger ↔ close (X) icon transition. * * The two SVG lines start at y=9 and y=15 (a hamburger). When the * button gains `.is-open`, line 1 translates down to y=12 (centre) * AND rotates +45°; line 2 translates up to y=12 AND rotates -45°. * Net effect: they cross to form an X. `transform-box: fill-box` * makes each line's transform origin its own centre, so rotation * pivots in place. Spring easing gives the snap. */ .topbar-burger svg line { transform-origin: center; transform-box: fill-box; transition: transform 360ms var(--ease-spring); } .topbar-burger.is-open svg line:nth-child(1) { transform: translateY(3px) rotate(45deg); } .topbar-burger.is-open svg line:nth-child(2) { transform: translateY(-3px) rotate(-45deg); } /* Mobile drop-down card — a compact glass pill that drops out of * the burger button with a bouncy spring. Same glass recipe as * the header pills so the whole UI shares one material. * * Animation: * – Closed state: scale 0.85, translateY -10px, opacity 0, * transform-origin top-right (anchored to the burger). * – Open state: scale 1, translateY 0, opacity 1. * – Easing: cubic-bezier(0.5, 1.55, 0.4, 1) — overshoots ~10% * then settles, the iOS bouncy-pop feel. * – Duration: 380ms transform, 220ms opacity (faster fade so * the card is visible while it's still bouncing into place). * – Reverse on close runs the same transition the other way. * * Visibility: * – Always in DOM (no `hidden` attribute toggle) so the open * and close transitions both play. * – `pointer-events: none` while closed so the invisible card * can't catch taps. */ .mobile-menu { position: fixed; /* Sits ~14px below the topbar's bottom edge so there's a clear * breathing gap between the header pills and the dropdown card. */ top: calc(74px + env(safe-area-inset-top, 0)); /* Desktop: centred horizontally below the centred burger pill. * The mobile @media query (below) right-anchors it instead. */ left: 50%; z-index: 60; width: min(260px, calc(100vw - 1.8rem)); padding: 0.45rem; border-radius: 22px; display: flex; flex-direction: column; gap: 0.15rem; color: var(--cream); background: rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: blur(16px) saturate(160%) brightness(110%); backdrop-filter: blur(16px) saturate(160%) brightness(110%); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 20px 48px -10px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.28); /* The translate(-50%, …) keeps the card horizontally centred at * its `left: 50%` anchor while the open/close transform animates * scale + Y-offset. transform-origin sits at the TOP CENTRE of * the card so it springs out from the burger pill above it. */ transform-origin: 50% 0%; transform: translate(-50%, -10px) scale(0.85); opacity: 0; pointer-events: none; transition: transform 380ms cubic-bezier(0.5, 1.55, 0.4, 1), opacity 220ms var(--ease-liquid); } .mobile-menu.is-open { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; } /* Specular dome — same wet-glass top sheen as the header pills. */ .mobile-menu::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(110% 65% at 50% -10%, rgba(255, 255, 255, 0.22) 0%, transparent 55%), radial-gradient(60% 40% at 50% 110%, rgba(255, 255, 255, 0.06) 0%, transparent 60%); } .mobile-menu a { position: relative; z-index: 1; font-family: var(--display); font-size: 0.95rem; font-weight: 500; color: var(--cream); text-decoration: none; border: 0; padding: 0.78rem 1rem; border-radius: 14px; transition: background 180ms ease, transform 180ms var(--ease-spring); } .mobile-menu a:active { background: rgba(255, 255, 255, 0.08); transform: scale(0.98); } /* The Enquire row inside the card — slightly emphasised. */ .mobile-menu .mobile-menu-cta { margin-top: 0.25rem; text-align: center; background: rgba(255, 255, 255, 0.10); font-weight: 600; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.25); } /* On narrow screens the burger sits at the RIGHT edge of the * topbar, so anchor the dropdown card there too instead of the * centre. The card's transform-origin moves to its top-right * corner so the bouncy entrance springs from the burger above. */ @media (max-width: 720px) { .mobile-menu { left: auto; right: 0.9rem; transform-origin: 92% 0%; transform: translateY(-10px) scale(0.85); } .mobile-menu.is-open { transform: translateY(0) scale(1); } } /* The old `.chip` (For corporates) stays available as the hero * eyebrow, but is no longer rendered in the topbar. */ /* ──────────────────────────────────────────────────────────── SECTION 01 — HERO with hand photograph (Minta layout) Full viewport (100vh). Photo covers entire section, text is anchored to the BOTTOM (flex-end) — like Minta does. Sticky header floats over the photo at the top. ──────────────────────────────────────────────────────────── */ .hero-section { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; /* text at the bottom, not the middle */ padding: 7rem 1.5rem 2.5rem; padding-top: calc(7rem + env(safe-area-inset-top, 0)); padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0)); overflow: hidden; isolation: isolate; text-align: center; } .hero-photo { position: absolute; inset: 0; z-index: 0; } .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } /* Veil — light at the top (where the image's light streak lives) so * the hand photo can breathe, and progressively darker toward the * bottom where the headline + CTA sit. The veil reaches FULLY * solid `var(--bg)` at 82% of the height and stays solid through * 100%, so the bottom ~18% of the hero section is pixel-identical * to the page background. That eliminates the warm/orange tint * bleed-through that used to peek under the gradient and create * a visible horizontal seam where the hero ended and the stats * section began. The dark slice still appears like part of the * photo's natural shadow, but it's pure #1A1714, so the transition * into the next section reads as a single continuous canvas. */ .hero-photo-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 13, 11, 0.45) 0%, rgba(15, 13, 11, 0.0) 22%, rgba(15, 13, 11, 0.18) 48%, rgba(15, 13, 11, 0.6) 68%, rgba(15, 13, 11, 1) 82%, rgba(15, 13, 11, 1) 100%); } .hero-content { position: relative; z-index: 1; max-width: 640px; text-align: center; } /* Soft dark text-shadow on hero headline + lede so they read against * any luminance area of the hand photo. Two-layer shadow: tight inner * for sharp readability + wide outer for ambient legibility. */ .hero-content h1 { margin: 0 0 1rem; font-size: clamp(1.65rem, 3.6vw, 2.6rem); line-height: 1.12; letter-spacing: -0.022em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 4px 24px rgba(0, 0, 0, 0.45); } .hero-content .lede { font-family: var(--body); font-size: 0.94rem; line-height: 1.55; color: var(--cream-soft); margin: 0 auto 1.5rem; max-width: 46ch; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 16px rgba(0, 0, 0, 0.4); } /* Hero CTA — Minta-style subtle dark glass pill. Cream text on a * near-black translucent surface with a thin hairline border. The * earlier warm-gradient orange button was reading as "generic SaaS * CTA"; this reads as "considered, in-palette". */ .cta-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.88rem 1.5rem; border-radius: 999px; background: rgba(20, 18, 16, 0.6); color: var(--cream); font-family: var(--display); font-size: 0.94rem; font-weight: 500; text-decoration: none; border: 1px solid rgba(232, 226, 214, 0.2); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: inset 0 1px 0 rgba(232, 226, 214, 0.08); transition: background var(--motion-base) var(--ease-liquid), border-color var(--motion-base) var(--ease-liquid), transform var(--motion-base) var(--ease-spring); } .cta-primary svg { width: 16px; height: 16px; } .cta-primary:hover { background: rgba(20, 18, 16, 0.78); border-color: rgba(232, 226, 214, 0.32); transform: translateY(-1px); } .cta-primary:hover svg { transform: translateY(1px); } .cta-primary svg { transition: transform var(--motion-base) var(--ease-spring); } /* ──────────────────────────────────────────────────────────── SECTION 02 — STATS (Minta-style — no eyebrow, no icons, clean Inter sans numerals, 2-column on mobile) ──────────────────────────────────────────────────────────── */ .stats { padding: 5rem 1.5rem 5rem; max-width: 1100px; margin: 0 auto; text-align: center; position: relative; } .stats-head { margin: 0 auto 3rem; max-width: 560px; } .stats-head h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 500; letter-spacing: -0.018em; line-height: 1.15; margin: 0 0 0.5rem; } .stats-subhead { font-family: var(--display); font-size: clamp(1rem, 2.4vw, 1.3rem); font-weight: 400; color: var(--cream-mute); margin: 0; line-height: 1.3; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem 1.5rem; } .stat { display: flex; flex-direction: column; align-items: center; text-align: center; } .stat-num { /* Inter sans for clean Minta-style numerals — light weight, slight * negative tracking, tabular numerals for consistent width. */ font-family: var(--display); font-size: clamp(2.8rem, 6vw, 4.4rem); font-weight: 400; letter-spacing: -0.028em; color: var(--cream); line-height: 1; font-feature-settings: "tnum" 1; } .stat-label { font-family: var(--display); font-size: 0.92rem; font-weight: 400; color: var(--cream-mute); margin-top: 0.8rem; letter-spacing: 0; line-height: 1.4; } /* ──────────────────────────────────────────────────────────── SECTION 03 — WHAT WE OFFER (3 cards on streak) The streak photograph runs FULL BLEED edge-to-edge of the viewport (not contained in a rounded box) and fades into the page background at both its top and bottom edges, so the section reads as a cinematic atmospheric band running across the whole site rather than a card-shaped panel. The three pillar cards float on top with a lighter, more transparent glass treatment than the heavy default `.glass` recipe. ──────────────────────────────────────────────────────────── */ .offer { position: relative; padding: 6rem 1.5rem 6rem; max-width: 1200px; margin: 0 auto; /* `overflow: visible` so the streak ::before / ::after fades * can paint over the .offer's own padding area. The streak * itself escapes via 100vw width, so it's not clipped here. */ overflow: visible; isolation: isolate; /* Minimum 80vh on every viewport so the cinematic streak band * gets enough vertical breathing room and the cards float in * the middle of an atmospheric stretch, the way Minta's * "What does" section does. Content stays centred vertically * inside the band via flex. */ min-height: 80vh; display: flex; flex-direction: column; justify-content: center; } /* Streak photo breaks OUT of its constrained parent to span the * full viewport width. `left: 50%; transform: translateX(-50%); * width: 100vw` is the standard "full-bleed inside a centred * container" trick. No border-radius — edge-to-edge cinematic. */ .offer-streak { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; z-index: 0; pointer-events: none; overflow: hidden; } .offer-streak img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.5; mix-blend-mode: screen; } /* Top and bottom fades — much taller now (45% each side) so the * streak dissolves gradually into `var(--bg)` instead of having * a faint but visible horizontal edge where the gradient ends. * 45% top + 45% bottom = 10% bright middle band, which gives the * dramatic "shaft of light" diagonal you can see in Minta. The * fade starts solid `var(--bg)` and trails through 35% opacity * at the midpoint to make the curve feel softer than a straight * 100% → 0% interpolation. */ .offer-streak::before, .offer-streak::after { content: ""; position: absolute; left: 0; right: 0; height: 45%; pointer-events: none; z-index: 1; } .offer-streak::before { top: 0; background: linear-gradient(180deg, rgba(15, 13, 11, 1) 0%, rgba(15, 13, 11, 0.85) 30%, rgba(15, 13, 11, 0.35) 70%, rgba(15, 13, 11, 0) 100%); } .offer-streak::after { bottom: 0; background: linear-gradient(0deg, rgba(15, 13, 11, 1) 0%, rgba(15, 13, 11, 0.85) 30%, rgba(15, 13, 11, 0.35) 70%, rgba(15, 13, 11, 0) 100%); } .offer-head { position: relative; z-index: 1; max-width: 700px; margin: 0 auto 3.6rem; text-align: left; } .offer-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } /* Minta-style glassmorphic pillar cards — flat, minimal, no * backdrop blur. Just a slight body tint + thin hairline border + * subtle top-rim highlight. The streak photo passes through the * card without being smeared by a blur, which preserves the * "card on a cinematic photo" aesthetic Minta uses. */ .offer-card.glass { padding: 2rem 1.7rem; border-radius: 20px; background: rgba(15, 13, 11, 0.42); border: 1px solid rgba(255, 255, 255, 0.07); /* NO backdrop-filter — keeps the streak crisp underneath. */ -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 28px -8px rgba(0, 0, 0, 0.35); transition: transform var(--motion-base) var(--ease-liquid), background var(--motion-base) var(--ease-liquid), border-color var(--motion-base) var(--ease-liquid), box-shadow var(--motion-base) var(--ease-liquid); } .offer-card.glass:hover { transform: translateY(-2px); background: rgba(15, 13, 11, 0.55); border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 38px -10px rgba(0, 0, 0, 0.45); } /* The old `.offer-card-icon` rule is retired — the cards now use * an icon inlined into the bottom label (`.offer-card-label`) * rather than a coloured tile at the top, matching Minta's * "small monoline glyph + uppercase eyebrow" pattern. The old * `.offer-card h3` / `.offer-card p` rules are also retired — * heading/copy live on the new `.offer-card-label` and * `.offer-card-copy` elements below. */ /* ── Offer-card content — Minta-style three-section recipe ─── * * Each card has the same shape: * 1. `.offer-card-visual` — top visual demo (~58% of card * height, flex column). * 2. `.offer-card-label` — small icon + uppercase eyebrow, * acts as the section heading. * 3. `.offer-card-copy` — body paragraph below. * * The visuals are pure CSS/SVG mockups that read as a UI peek * into the service: a hero number + pill + input + cta for the * sankalpa demo, three transaction-style rows for the samagri * inventory, a labelled celestial-arc chart for the muhurat. */ .offer-card-visual { display: flex; flex-direction: column; align-items: stretch; gap: 0.65rem; min-height: 280px; margin: 0 0 1.6rem; } /* ─── Card 1 — Sankalpa demo ─────────────────────────────── */ .offer-card-bignum { font-family: var(--display); font-size: 3.4rem; font-weight: 400; letter-spacing: -0.035em; color: var(--cream); text-align: center; margin: 1rem 0 0.4rem; line-height: 1; } .offer-card-pill { display: inline-flex; align-items: center; gap: 0.5rem; align-self: center; padding: 0.45rem 0.9rem; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); font-family: var(--display); font-size: 0.78rem; font-weight: 500; color: var(--cream-soft); margin: 0 0 0.5rem; } .offer-card-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px rgba(212, 165, 116, 0.4); } .offer-card-pill svg { width: 12px; height: 12px; color: var(--cream-mute); } .offer-card-input, .offer-card-cta { padding: 0.7rem 1rem; border-radius: 999px; font-family: var(--display); font-size: 0.84rem; text-align: center; border: 1px solid rgba(255, 255, 255, 0.07); } .offer-card-input { background: rgba(255, 255, 255, 0.04); color: var(--cream-mute); } .offer-card-cta { background: rgba(255, 255, 255, 0.10); color: var(--cream); font-weight: 500; } /* ─── Card 2 — Samagri rows ──────────────────────────────── */ .offer-card-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.85rem; border-radius: 14px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06); } .offer-card-row-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--cream); color: #1A1714; display: flex; align-items: center; justify-content: center; } .offer-card-row-icon svg { width: 17px; height: 17px; } .offer-card-row-text { flex: 1; min-width: 0; } .offer-card-row-name { font-family: var(--display); font-size: 0.86rem; font-weight: 500; color: var(--cream); line-height: 1.2; } .offer-card-row-meta { font-family: var(--display); font-size: 0.72rem; color: var(--cream-mute); margin-top: 2px; } .offer-card-row-amount { text-align: right; flex-shrink: 0; font-family: var(--display); } .offer-card-row-amount > div:first-child { font-size: 0.86rem; font-weight: 500; color: var(--cream); line-height: 1.2; } .offer-card-row-amount-sub { font-size: 0.72rem; color: var(--cream-mute); margin-top: 2px; } /* ─── Card 3 — Muhurat chart ─────────────────────────────── */ .offer-card-chart-card { align-self: flex-start; padding: 0.7rem 0.9rem; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); min-width: 168px; } .offer-card-chart-year { font-family: var(--display); font-size: 0.7rem; color: var(--cream-mute); margin: 0 0 2px; } .offer-card-chart-label { display: flex; align-items: center; gap: 0.45rem; font-family: var(--display); font-size: 0.84rem; font-weight: 500; color: var(--cream); } .offer-card-chart-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--cream); } .offer-card-chart { width: 100%; height: 150px; margin-top: auto; display: block; } /* ─── Shared bottom label + body copy ────────────────────── */ .offer-card-label { display: flex; align-items: center; gap: 0.5rem; font-family: var(--display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-soft); margin: 0 0 0.85rem; } .offer-card-label svg { width: 16px; height: 16px; stroke-width: 1.5; color: var(--cream-soft); } .offer-card-copy { font-size: 0.86rem; font-weight: 400; line-height: 1.65; color: var(--cream-soft); margin: 0; } /* SECTION 04 — MANIFESTO: removed. * The mountain pull-quote section was deleted from the markup; * its rules are retired here too. Keeping the comment as a marker * so future readers see the section numbering jump from 03 to 05. */ /* ──────────────────────────────────────────────────────────── SECTION 05 — PUROHITS (Minta-style "MINTA AI" layout) 80vh tall, centred head (eyebrow + headline + sub), then a two-column grid: tall visual card on the left, content panel (lead + 3 features + CTA) on the right. Stacks vertically on ≤900px viewports via the existing media query. ──────────────────────────────────────────────────────────── */ .purohits { padding: 4rem 1.5rem; max-width: 1200px; margin: 0 auto; min-height: 80vh; display: flex; flex-direction: column; justify-content: center; } .purohits-head { margin: 0 auto 3rem; max-width: 760px; text-align: center; } .purohits-head .eyebrow { justify-content: center; } .purohits-head h2 { margin: 0 0 0.9rem; } .purohits-subhead { font-family: var(--display); font-size: 0.95rem; font-weight: 400; color: var(--cream-mute); margin: 0; letter-spacing: 0; } .purohits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: stretch; } /* ─── Left: visual card (avatar centred on a streak overlay) ─ */ .purohits-visual { position: relative; isolation: isolate; border-radius: 22px; background: rgba(15, 13, 11, 0.5); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 32px -12px rgba(0, 0, 0, 0.4); overflow: hidden; min-height: 440px; display: flex; align-items: center; justify-content: center; } /* Subtle streak photo running behind the avatar — same visual * vocabulary as the offer section's full-bleed streak band. */ .purohits-visual-streak { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .purohits-visual-streak img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.32; mix-blend-mode: screen; } .purohits-visual-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; } .purohits-visual-icon { width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; color: var(--cream); } .purohits-visual-icon svg { width: 32px; height: 32px; } .purohits-visual-label { font-family: var(--display); font-size: 0.95rem; font-weight: 500; color: var(--cream); letter-spacing: -0.005em; } /* ─── Right: content panel ──────────────────────────────────── */ .purohits-content { display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; padding: 0.4rem 0; } .purohits-content-lede { font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--cream-soft); margin: 0; } .purohits-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.3rem; } .purohits-feature { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; } .purohits-feature-icon { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--cream); margin-top: 1px; } .purohits-feature-icon svg { width: 20px; height: 20px; } .purohits-feature-title { font-family: var(--display); font-size: 0.95rem; font-weight: 500; color: var(--cream); margin: 0 0 0.22rem; letter-spacing: -0.005em; } .purohits-feature-desc { font-size: 0.86rem; font-weight: 400; line-height: 1.55; color: var(--cream-soft); margin: 0; } /* CTA pill button — same glass-pill recipe as the header. */ .purohits-cta { align-self: flex-start; display: inline-flex; align-items: center; padding: 0.7rem 1.35rem; margin-top: 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--cream); font-family: var(--display); font-size: 0.88rem; font-weight: 500; text-decoration: none; transition: background var(--motion-base) var(--ease-liquid), border-color var(--motion-base) var(--ease-liquid), transform var(--motion-base) var(--ease-spring); } .purohits-cta:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.22); transform: translateY(-1px); } /* ──────────────────────────────────────────────────────────── SECTION 06 — PROCESS / Journey (Minta "Getting Started" layout) 100vh on desktop. Centred head, then a single canvas that contains an SVG S-curve plus four absolutely-positioned step blocks. Step `top` / `left` are PERCENTAGES of the canvas so they scale with viewport — and the SVG path uses `preserveAspectRatio="none"` so the curve scales identically. That keeps step labels anchored to the same points on the curve regardless of viewport width. ──────────────────────────────────────────────────────────── */ .journey { position: relative; padding: 4rem 1.5rem; max-width: 1200px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; text-align: center; } .journey-head { margin: 0 auto 3rem; max-width: 720px; } .journey-head .eyebrow { justify-content: center; } .journey-head h2 { margin: 0 0 0.9rem; } .journey-subhead { font-family: var(--display); font-size: 0.95rem; font-weight: 400; color: var(--cream-mute); margin: 0; letter-spacing: 0; } .journey-canvas { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; aspect-ratio: 11 / 7; /* matches the SVG viewBox 1100×700 */ min-height: 460px; } .journey-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .journey-steps { position: absolute; inset: 0; } .journey-step { position: absolute; max-width: 200px; text-align: left; padding-left: 0.95rem; } /* Dashed ember indicator on the LEFT of each step. A dedicated * pseudo-element so we can give it an explicit height (32px) — * extends slightly below the step number, matching Minta's * "marker tick that extends past the title baseline" look. */ .journey-step::before { content: ""; position: absolute; left: 0; top: 2px; width: 0; height: 38px; border-left: 2px dashed var(--ember); } .journey-step .journey-num { font-family: var(--display); font-size: 0.78rem; font-weight: 600; color: var(--cream); margin: 0 0 0.4rem; letter-spacing: -0.005em; line-height: 1.2; } .journey-step h3 { font-family: var(--display); font-size: 0.92rem; font-weight: 500; letter-spacing: -0.008em; color: var(--cream); margin: 0 0 0.35rem; } .journey-step p { font-size: 0.78rem; font-weight: 400; line-height: 1.5; color: var(--cream-mute); margin: 0; } /* Step positions — each `left` / `top` percentage maps onto a * point that lies ON the SVG curve. Because the SVG uses * preserveAspectRatio="none", curve and steps scale identically, * so the dashed marker stays mounted on the line at every * viewport width. * step-1 at (24%, 36%) ↔ curve anchor (264, 252) * step-2 at (34%, 56%) ↔ curve anchor (374, 392) * step-3 at (51%, 68%) ↔ curve anchor (561, 476) * step-4 at (69%, 78%) ↔ curve anchor (759, 546) */ .journey-step.step-1 { left: 24%; top: 36%; } .journey-step.step-2 { left: 34%; top: 56%; } .journey-step.step-3 { left: 51%; top: 68%; } .journey-step.step-4 { left: 69%; top: 78%; } /* ──────────────────────────────────────────────────────────── SECTION 07 — AUDIENCE ──────────────────────────────────────────────────────────── */ .audience { padding: 4rem 1.5rem 5rem; max-width: 1200px; margin: 0 auto; } .audience-head { margin: 0 auto 3rem; max-width: 700px; text-align: center; } .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .audience-card { padding: 2.2rem 1.9rem; border-radius: 24px; } .audience-card-tag { display: inline-flex; align-items: center; padding: 0.32rem 0.7rem; border-radius: 999px; font-family: var(--display); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); background: rgba(122, 132, 113, 0.16); border: 1px solid rgba(122, 132, 113, 0.32); margin: 0 0 1.2rem; } .audience-card-tag.is-soon { color: var(--amber); background: rgba(212, 165, 116, 0.12); border-color: rgba(212, 165, 116, 0.28); } .audience-card h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.014em; color: var(--cream); margin: 0 0 0.7rem; } .audience-card p { font-size: 0.96rem; line-height: 1.6; color: var(--cream-soft); margin: 0; } .audience-card.is-soon { opacity: 0.88; } /* ── Liquid glass primitive ───────────────────────────────── */ .glass { position: relative; isolation: isolate; transform: translateZ(0); background: linear-gradient(180deg, rgba(232, 226, 214, 0.07) 0%, transparent 40%, rgba(0, 0, 0, 0.04) 100%), var(--glass-bg); -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(108%); backdrop-filter: blur(40px) saturate(180%) brightness(108%); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: inset 0 1px 0 rgba(232, 226, 214, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.4), 0 24px 60px -24px rgba(0, 0, 0, 0.55); } .glass::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(120% 70% at 15% -20%, rgba(232, 226, 214, 0.18) 0%, transparent 55%); border-radius: inherit; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(18, 12, 8, 0.86); } } /* ──────────────────────────────────────────────────────────── SECTION 08 — Form card (preserved) ──────────────────────────────────────────────────────────── */ .form-card { padding: 2.4rem 1.8rem 1.8rem; margin: 2rem auto; max-width: 760px; width: calc(100% - 3rem); } .form-card .eyebrow { margin-bottom: 1rem; } .form-card h2 { margin: 0 0 0.3rem; } .form-card .sub { font-size: 0.96rem; line-height: 1.55; color: var(--cream-mute); margin: 0 0 1.8rem; max-width: 56ch; } form { display: grid; gap: 0.9rem; } .row { display: grid; gap: 0.9rem; grid-template-columns: 1fr 1fr; } @media (max-width: 600px) { .row { grid-template-columns: 1fr; } } label { display: flex; flex-direction: column; gap: 0.35rem; } label.full { grid-column: 1 / -1; } label > span { font-family: var(--display); font-size: 0.78rem; color: var(--cream-mute); font-weight: 500; letter-spacing: 0.01em; } input, select, textarea { font: inherit; font-family: var(--body); color: var(--cream); background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); border: 1px solid var(--glass-border); border-radius: 14px; padding: 0.85rem 1rem; width: 100%; min-height: 44px; transition: border-color var(--motion-base) var(--ease-liquid), box-shadow var(--motion-base) var(--ease-liquid), background var(--motion-base) var(--ease-liquid); -webkit-appearance: none; appearance: none; box-shadow: inset 0 1px 0 rgba(232, 226, 214, 0.06); } input::placeholder, textarea::placeholder { color: rgba(168, 159, 144, 0.55); } input:hover, select:hover, textarea:hover { border-color: rgba(232, 226, 214, 0.24); } input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(212, 165, 116, 0.7); background: rgba(0, 0, 0, 0.45); box-shadow: 0 0 0 4px rgba(184, 112, 61, 0.22), inset 0 1px 0 rgba(232, 226, 214, 0.1); } select { background-image: linear-gradient(45deg, transparent 50%, var(--cream-soft) 50%), linear-gradient(135deg, var(--cream-soft) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; } select option { background: #14100c; color: var(--cream); } textarea { resize: vertical; min-height: 110px; } .submit-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.4rem; flex-wrap: wrap; } button[type="submit"] { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.95rem 1.5rem; border-radius: 999px; font: inherit; font-family: var(--display); font-weight: 500; font-size: 0.95rem; color: #0F0D0B; background: linear-gradient(180deg, var(--amber) 0%, var(--ember) 100%); border: 1px solid rgba(212, 165, 116, 0.45); box-shadow: inset 0 1px 0 rgba(255, 240, 220, 0.45), 0 12px 28px -10px rgba(184, 112, 61, 0.55); cursor: pointer; min-height: 44px; transition: transform var(--motion-base) var(--ease-spring), filter var(--motion-base) var(--ease-liquid), box-shadow var(--motion-base) var(--ease-liquid); } button[type="submit"] svg { width: 16px; height: 16px; transition: transform var(--motion-base) var(--ease-spring); } button[type="submit"]:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06) saturate(108%); box-shadow: inset 0 1px 0 rgba(255, 240, 220, 0.55), 0 22px 42px -14px rgba(184, 112, 61, 0.65); } button[type="submit"]:hover:not(:disabled) svg { transform: translateX(2px); } button[type="submit"]:active:not(:disabled) { transform: translateY(0) scale(0.985); transition-duration: var(--motion-quick); } button[type="submit"]:disabled { opacity: 0.55; cursor: progress; } .reassure { font-family: var(--display); font-size: 0.85rem; color: var(--cream-mute); display: inline-flex; align-items: center; gap: 0.4rem; } .reassure svg { width: 14px; height: 14px; color: var(--cream-mute); } #formStatus { margin: 0.4rem 0 0; font-size: 0.95rem; } #formStatus.ok { color: #B5C0A8; background: rgba(122, 132, 113, 0.14); border: 1px solid rgba(122, 132, 113, 0.32); padding: 0.7rem 0.95rem; border-radius: 14px; } #formStatus.err { color: #E8C5A8; background: rgba(184, 112, 61, 0.12); border: 1px solid rgba(184, 112, 61, 0.32); padding: 0.7rem 0.95rem; border-radius: 14px; } /* ── Tabbar ────────────────────────────────────────────────── */ .tabbar-wrap { display: flex; justify-content: center; max-width: 100%; padding: 0 1rem; } .tabbar { margin: 1.5rem auto 2.5rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem; border-radius: 22px; background: linear-gradient(180deg, rgba(232, 226, 214, 0.12), transparent 60%), var(--glass-bg-strong); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(232, 226, 214, 0.28), 0 18px 40px -18px rgba(0, 0, 0, 0.55); max-width: 100%; overflow: hidden; } .tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.95rem; border-radius: 14px; border: 1px solid transparent; color: var(--cream-soft); font-family: var(--display); font-size: 0.86rem; font-weight: 500; text-decoration: none; cursor: pointer; min-height: 40px; transition: background var(--motion-base), color var(--motion-base), border-color var(--motion-base); } .tab:hover { color: var(--cream); background: rgba(232, 226, 214, 0.06); border-color: var(--glass-border); } .tab.primary { background: linear-gradient(180deg, rgba(232, 226, 214, 0.1), rgba(232, 226, 214, 0.03)); border-color: var(--glass-border-strong); color: var(--cream); } .tab svg { width: 17px; height: 17px; stroke-width: 1.5; } .tab-label { display: inline-block; white-space: nowrap; } /* ── Footer ──────────────────────────────────────────────── */ footer { padding: 1.6rem 1.5rem 2.2rem; text-align: center; font-family: var(--display); font-size: 0.86rem; color: var(--cream-mute); } footer a { color: var(--cream-soft); border-color: rgba(214, 203, 182, 0.35); } footer a:hover { color: var(--cream); border-color: var(--cream); } /* ──────────────────────────────────────────────────────────── Legal page ──────────────────────────────────────────────────────────── */ .legal { max-width: 760px; /* Top margin clears the fixed `.topbar` (≈72px) so the H1 isn't * hidden under the floating glass pills. Increased from 1rem * when /about/legal adopted the unified hamburger header. */ margin: 5rem auto 0; padding: 1rem 1.5rem 3rem; position: relative; z-index: 2; } .legal-card { padding: 2.4rem 1.8rem; } .legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 500; letter-spacing: -0.022em; margin-bottom: 0.3rem; line-height: 1.06; } .legal .updated { font-family: var(--display); color: var(--cream-mute); font-size: 0.88rem; margin-bottom: 1.6rem; } .legal h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--glass-border); } .legal h3 { margin-top: 1.5rem; color: var(--cream); font-size: 1.08rem; } .legal p, .legal li { font-family: var(--body); color: var(--cream-soft); line-height: 1.72; max-width: 66ch; font-size: 0.98rem; } .legal ul, .legal ol { padding-left: 1.3rem; max-width: 66ch; } .legal li { margin-bottom: 0.45rem; } .legal .back { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--display); font-size: 0.86rem; margin: 1.4rem 0; color: var(--cream-soft); border: 1px solid var(--glass-border); background: var(--glass-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 0.55rem 1rem; border-radius: 999px; text-decoration: none; transition: color var(--motion-base), transform var(--motion-base) var(--ease-spring); } .legal .back:hover { color: var(--cream); transform: translateX(-2px); } /* ──────────────────────────────────────────────────────────── Mobile tuning ──────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .offer-grid, .audience-grid { grid-template-columns: 1fr; gap: 1.2rem; } .purohits-grid { grid-template-columns: 1fr; gap: 2rem; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 1.5rem; } /* Journey: collapse the curve canvas to a simple vertical * stack on narrow viewports. Hide the SVG curve and let the * four steps lay out in document order with consistent spacing. */ .journey { min-height: auto; } .journey-line { display: none; } .journey-canvas { aspect-ratio: auto; min-height: auto; height: auto; } .journey-steps { position: relative; inset: auto; display: flex; flex-direction: column; gap: 2.2rem; height: auto; text-align: left; } .journey-step { position: relative; max-width: 100%; top: auto; left: auto; } } /* ── Topbar mobile — three Liquid Glass pills ──────────────── * Below 720px the header morphs into three independent floating * glass bubbles, like Safari's iOS toolbar: * * [ logo-pill ] [ ····· wordmark-pill ····· ] [ menu-pill ] * * Each pill carries the full iOS-26 Liquid Glass treatment: * – `backdrop-filter: url(#pill-glass) blur() saturate() brightness()` * where the SVG filter does real geometric refraction (light * bending) on the hand photo behind, not just blur. * – Multi-stop radial-gradient ::before for the specular dome * highlight you get on a wet glass droplet (bright at top, * dim at bottom). * – Triple box-shadow: top inner-highlight + bottom inner-shadow * + soft outer drop, the classic recipe for "embossed glass". * – Hairline border with white-alpha for the etched edge. * Falls back to plain blur on browsers that ignore url() inside * backdrop-filter (Firefox, old Chromium). */ @media (max-width: 720px) { .topbar { /* Override the desktop flex centring: on mobile the three pills * span the full width of the screen, with the wordmark * stretching to fill the middle. justify-content: space-between * pins logo to the left edge and burger to the right edge, and * the wordmark in the middle flex-grows between them. */ justify-content: space-between; gap: 0.55rem; padding: 0.7rem 0.9rem; padding-top: max(0.7rem, env(safe-area-inset-top, 0)); } .topbar-wordmark { flex: 1 1 auto; } .topbar-nav, .topbar-cta { display: none; } /* `grid-column` declarations below are inert under flex; kept * for documentation only. */ .topbar-logo { grid-column: 1; } .topbar-wordmark { grid-column: 2; } .topbar-burger { grid-column: 3; } /* Three pills — Mikhail Bespalov recipe, minimal chrome. * * The visual identity is doing ONE thing: real backdrop refraction. * Everything else is restrained so the refraction reads. * * – Body: 6% white tint, barely there. * – Rim: a SINGLE 0.5px inner hairline (no outer ring at all), * plus a 1px inner-top brighter line for the wet meniscus. * No 1.5px outer halo — that was reading as a chunky bezel. * – Drop shadow: subtle, just enough to lift the pill off the photo. * – Backdrop filter: url(#pill-glass), applied directly with no * @supports gate. Engines that ignore url() in backdrop-filter * will simply render without refraction (acceptable fallback). * – NO extra blur/saturate/brightness stacked on top — the SVG * filter contains its own feGaussianBlur and stacking would * smear the displacement back into nothing. */ .topbar-logo, .topbar-wordmark, .topbar-burger { position: relative; isolation: isolate; margin-left: 0; height: 46px; border-radius: 999px; color: var(--cream); background: rgba(255, 255, 255, 0.06); border: 0; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px -6px rgba(0, 0, 0, 0.35); /* Light frosted-glass blur — translucent enough to read what's * behind, blurred enough that the pill looks like an iOS Safari * toolbar bubble (not a soaped-up shower door). * * Tuning notes: * – blur(14px): photo behind is softened but recognisable. * Earlier we ran 32px which read as opaque. * – saturate(160%): subtle colour pop through the glass. * – brightness(108%): gentle lift over the dark hand photo * so the pill has presence without going milky-white. * * No `url()` filter chained on — see earlier note about iOS * Safari silently dropping the whole declaration when the SVG * filter graph fails. Plain filter functions only. */ -webkit-backdrop-filter: blur(8px) saturate(140%) brightness(104%); backdrop-filter: blur(8px) saturate(140%) brightness(104%); transition: transform 220ms var(--ease-spring), box-shadow 240ms var(--ease-liquid); } /* Wet meniscus — a faint top-edge sheen. Subtle (0.18) because * the refraction is doing the visual work; this just adds the * "top of a glass droplet has light on it" cue. */ .topbar-logo::before, .topbar-wordmark::before, .topbar-burger::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(140% 80% at 50% -30%, rgba(255, 255, 255, 0.18) 0%, transparent 55%); z-index: 1; } /* Inner content stays above the meniscus. */ .topbar-logo > svg, .topbar-wordmark, .topbar-burger > svg { position: relative; z-index: 2; } /* Per-pill sizing. */ .topbar-logo { grid-column: 1; width: 46px; height: 46px; padding: 11px; } .topbar-logo svg { width: 100%; height: 100%; } .topbar-wordmark { grid-column: 2; justify-self: stretch; justify-content: center; align-items: center; margin-left: 0; padding: 0 1rem; font-size: 1rem; letter-spacing: -0.012em; } .topbar-burger { display: inline-flex; grid-column: 3; justify-self: end; width: 46px; height: 46px; } /* Press feedback — gentle squish, no recolour. */ .topbar-logo:active, .topbar-wordmark:active, .topbar-burger:active { transform: scale(0.96); } /* ── Scroll-reactive water-ripple state ─────────────────── * `.is-scrolled` → permanent state once user has moved past 40px. * Outer rim brightens — pills "wake up" visually. * `.is-scrolling` → set while the user is ACTIVELY scrolling * (debounced 220ms). Swaps the displacement filter to * `#pill-glass-active` (scale 0.9 vs 0.5) so the photo visibly * "wobbles" through the glass. The transition between filters * is not CSS-animatable, so we just swap — the ramp from rest * to wobble happens instantly on first scroll tick, and back * to rest happens 220ms after the last scroll event. */ .topbar.is-scrolled .topbar-logo, .topbar.is-scrolled .topbar-wordmark, .topbar.is-scrolled .topbar-burger { background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 28px -6px rgba(0, 0, 0, 0.45); } /* Active scroll state — slightly more saturation and brightness * so the pills visibly "wake up" while the user is moving, but * the blur stays the same so the glass doesn't change thickness * mid-scroll. */ .topbar.is-scrolling .topbar-logo, .topbar.is-scrolling .topbar-wordmark, .topbar.is-scrolling .topbar-burger { -webkit-backdrop-filter: blur(8px) saturate(170%) brightness(112%); backdrop-filter: blur(8px) saturate(170%) brightness(112%); } } @media (max-width: 600px) { .hero-section { min-height: 100vh; min-height: 100svh; padding: 6rem 1.2rem 2rem; padding-bottom: max(2rem, env(safe-area-inset-bottom, 0)); } .hero-content h1 { font-size: clamp(1.55rem, 7vw, 2rem); } .hero-content .lede { font-size: 0.9rem; max-width: 42ch; } .stats { padding: 4rem 1.2rem; } .offer { padding: 4rem 1.2rem; } /* (no `.offer-streak { border-radius }` override — keep the * full-bleed edge-to-edge streak on mobile too) */ /* (.manifesto rules removed — section is gone.) */ .purohits, .journey, .audience { padding: 4rem 1.2rem; } .form-card { padding: 2rem 1.4rem 1.5rem; width: calc(100% - 2rem); } input, select, textarea { font-size: 16px; } /* prevent iOS zoom */ .glass { border-radius: 20px; } .glass, .tabbar, .chip { -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); } .tab { padding: 0.6rem 0.85rem; gap: 0.4rem; font-size: 0.82rem; } .tabbar { gap: 0.3rem; padding: 0.45rem; } } @media (max-width: 380px) { .tab-label { display: none; } .tab { padding: 0.65rem 0.7rem; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ── Site-wide footer ────────────────────────────────────────── * Mirrored from the React app's globals.css (.yg-footer-* rules) * so the static /about + /about/legal pages render the SAME foot * the dynamic / homepage does. Keep these two definitions in * sync — they're intentionally redundant because the static * pages can't import the Next.js global stylesheet. Variables * map to the cream palette already declared in :root above. */ .yg-footer { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 3rem 1.5rem 2rem; margin-top: 3rem; color: var(--cream-mute); font-family: var(--display); } .yg-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; } .yg-footer-brand { font-family: var(--display); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.012em; color: var(--cream); margin: 0 0 0.3rem; } .yg-footer-tag { font-size: 0.85rem; color: var(--cream-mute); margin: 0; } .yg-footer-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; } .yg-footer-nav a { font-size: 0.86rem; color: var(--cream-soft); font-weight: 500; text-decoration: none; border: 0; transition: color 200ms; } .yg-footer-nav a:hover { color: var(--cream); } .yg-footer-copy { max-width: 1200px; margin: 2.5rem auto 0; font-size: 0.78rem; color: var(--cream-mute); text-align: left; }