/* ============================================================ Younalize marketing landing page Mobile first. Dark → warm light → dark. Lime is the accent. ============================================================ */ /* Self-hosted fonts (GDPR-safe, no third-party request) */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap; src:url('assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap; src:url('assets/fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Inter Tight'; font-style:normal; font-weight:500 800; font-display:swap; src:url('assets/fonts/inter-tight-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Inter Tight'; font-style:normal; font-weight:500 800; font-display:swap; src:url('assets/fonts/inter-tight-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root{ /* surfaces */ --ink: #0C0C0D; --ink-2: #141417; --ink-3: #1B1B1F; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.06); --fog: #9E9EA6; /* brand */ --lime: #B8F048; --lime-2: #EAFF50; --lime-dim: rgba(184,240,72,.14); --orange: #FF5A1F; /* warm light zone */ --sand: #F5F2EA; --sand-2: #EBE6D9; --coal: #131312; --coal-2: #5D5A52; /* motion */ --ease-out: cubic-bezier(.23,1,.32,1); --ease-in-out: cubic-bezier(.77,0,.175,1); --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --hdr-h: 62px; } *,*::before,*::after{ box-sizing:border-box; } /* overflow-x on as well as : the ticker track and the hero glow deliberately run wider than the viewport, and clipping only on lets the initial containing block grow, which stretches the fixed header and the sticky CTA past the screen edge on mobile. */ html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 12px); -webkit-text-size-adjust:100%; overflow-x:hidden; } body{ margin:0; background:var(--ink); color:#fff; font-family:'Inter','Noto Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans Devanagari','Nirmala UI',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3{ font-family:'Inter Tight','Inter','Noto Sans','PingFang SC','Noto Sans Devanagari',system-ui,sans-serif; font-weight:700; letter-spacing:-.032em; line-height:1.05; margin:0; } p{ margin:0; } ol,ul{ margin:0; padding:0; list-style:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } :focus-visible{ outline:2px solid var(--lime); outline-offset:3px; border-radius:6px; } .skip{ position:absolute; left:12px; top:-60px; z-index:200; background:var(--lime); color:#111; padding:10px 16px; border-radius:10px; font-weight:600; transition:transform 180ms var(--ease-out); } .skip:focus{ transform:translateY(72px); } .wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:20px; } .wrap--narrow{ max-width:760px; } /* ── scroll reveal ─────────────────────────────────────────── */ .anim{ transition:opacity 620ms var(--ease-out), transform 620ms var(--ease-out); } html.js .anim:not(.in){ opacity:0; transform:translateY(16px); } .anim.in{ opacity:1; transform:translateY(0); } [data-anim="2"]{ transition-delay:70ms } [data-anim="3"]{ transition-delay:140ms } [data-anim="4"]{ transition-delay:210ms } [data-anim="5"]{ transition-delay:280ms } [data-anim="6"]{ transition-delay:350ms } /* ── buttons ───────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 22px; border-radius:999px; font-weight:600; font-size:15px; letter-spacing:-.01em; white-space:nowrap; transition:transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease; } .btn:active{ transform:scale(.97); } .btn--sm{ padding:9px 16px; font-size:14px; } .btn--lg{ padding:16px 28px; font-size:16.5px; } .btn--lime{ background:linear-gradient(180deg,var(--lime-2),var(--lime)); color:#101208; box-shadow:0 8px 26px -12px rgba(184,240,72,.75); } .btn--ghost{ border:1px solid var(--line); color:#fff; background:rgba(255,255,255,.02); } .btn--dark{ background:var(--coal); color:#fff; } @media (hover:hover) and (pointer:fine){ .btn--lime:hover{ background:var(--lime-2); } .btn--ghost:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); } .btn--dark:hover{ background:#2a2a28; } } /* ── header ────────────────────────────────────────────────── */ .hdr{ position:fixed; inset:0 0 auto 0; z-index:100; background:rgba(12,12,13,.72); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid transparent; transition:border-color 240ms ease, background-color 240ms ease; } .hdr.is-stuck{ border-bottom-color:var(--line-2); background:rgba(12,12,13,.9); } .hdr__in{ max-width:1180px; margin-inline:auto; padding:0 20px; height:var(--hdr-h); display:flex; align-items:center; gap:16px; } .brand{ display:flex; align-items:center; gap:9px; margin-right:auto; } .brand__mark{ width:22px; height:23px; flex:none; } .brand__word{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:17.5px; letter-spacing:-.03em; } .hdr__nav{ display:none; gap:26px; font-size:14.5px; color:var(--fog); } .hdr__nav a{ transition:color 180ms ease; } @media (hover:hover) and (pointer:fine){ .hdr__nav a:hover{ color:#fff; } } .hdr__right{ display:flex; align-items:center; gap:10px; } .hdr__right .btn--lime{ display:none; } /* language switcher */ .lang{ position:relative; } .lang__btn{ display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; border:1px solid var(--line); font-size:13px; font-weight:600; letter-spacing:.02em; transition:transform 160ms var(--ease-out), background-color 200ms ease; } .lang__btn:active{ transform:scale(.97); } @media (hover:hover) and (pointer:fine){ .lang__btn:hover{ background:rgba(255,255,255,.06); } } .lang__globe,.lang__chev{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.75; } .lang__chev{ width:13px; height:13px; transition:transform 200ms var(--ease-out); } .lang__btn[aria-expanded="true"] .lang__chev{ transform:rotate(180deg); } .lang__menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:10; min-width:172px; padding:6px; background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:0 24px 60px -24px rgba(0,0,0,.9); transform-origin:top right; opacity:0; transform:scale(.96) translateY(-4px); pointer-events:none; transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out); } .lang.is-open .lang__menu{ opacity:1; transform:scale(1) translateY(0); pointer-events:auto; } .lang__menu li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:11px; font-size:14.5px; cursor:pointer; transition:background-color 160ms ease; } .lang__menu li[aria-selected="true"]{ color:var(--lime); } .lang__menu li::after{ content:''; width:7px; height:7px; border-radius:50%; background:var(--lime); opacity:0; transition:opacity 160ms ease; } .lang__menu li[aria-selected="true"]::after{ opacity:1; } @media (hover:hover) and (pointer:fine){ .lang__menu li:hover{ background:rgba(255,255,255,.06); } } .burger{ width:34px; height:34px; display:grid; place-content:center; gap:5px; } .burger span{ display:block; width:18px; height:1.8px; background:#fff; border-radius:2px; transition:transform 220ms var(--ease-out), opacity 160ms ease; } .burger[aria-expanded="true"] span:first-child{ transform:translateY(3.4px) rotate(45deg); } .burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.4px) rotate(-45deg); } .hdr__drawer{ display:grid; grid-template-rows:0fr; border-top:1px solid transparent; transition:grid-template-rows 300ms var(--ease-out), border-color 300ms ease; } .hdr__drawer-in{ overflow:hidden; min-height:0; display:grid; padding-inline:20px; } .hdr.is-open .hdr__drawer{ grid-template-rows:1fr; border-top-color:var(--line-2); } .hdr__drawer a{ font-size:16.5px; color:var(--fog); padding:14px 0; border-bottom:1px solid var(--line-2); } .hdr__drawer .btn{ margin:16px 0 20px; justify-self:start; color:#101208; border-bottom:0; padding:12px 22px; } @media (min-width:900px){ :root{ --hdr-h:70px; } .hdr__nav{ display:flex; } .hdr__right .btn--lime{ display:inline-flex; } .burger{ display:none; } .hdr__drawer{ display:none; } } /* ── shared section furniture ──────────────────────────────── */ .sec{ padding:68px 0; position:relative; } .sec--tight{ padding-top:0; } .sec--dark{ background:var(--ink); color:#fff; } .sec--light{ background:var(--sand); color:var(--coal); } .sec--light + .sec--light{ padding-top:0; } .sec__head{ max-width:660px; margin-bottom:38px; } .eyebrow{ display:inline-flex; align-items:baseline; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--fog); margin-bottom:14px; } .sec--light .eyebrow{ color:var(--coal-2); } .eyebrow--lime{ color:var(--lime); } .dot{ width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px var(--lime-dim); } .h2{ font-size:clamp(29px,6.4vw,46px); } .h2 em{ font-style:normal; color:var(--lime); } .sec--light .h2 em{ color:#4E7A05; } .lede{ margin-top:16px; font-size:17px; color:var(--fog); max-width:56ch; } .sec--light .lede{ color:var(--coal-2); } .pip{ width:9px; height:9px; border-radius:50%; flex:none; } .pip--good{ background:var(--lime); box-shadow:0 0 0 4px rgba(184,240,72,.18); } .pip--warn{ background:var(--orange); box-shadow:0 0 0 4px rgba(255,90,31,.18); } /* ── phone frame ───────────────────────────────────────────── */ .phone{ position:relative; padding:7px; border-radius:40px; background:linear-gradient(160deg,#3a3a40,#0e0e10 40%,#000 100%); box-shadow:0 2px 0 rgba(255,255,255,.09) inset, 0 40px 80px -34px rgba(0,0,0,.95); } .phone img{ border-radius:33px; } .phone__island{ position:absolute; top:16px; left:50%; transform:translateX(-50%); width:31%; height:22px; border-radius:999px; background:#000; z-index:2; } .phone--sm{ padding:6px; border-radius:32px; } .phone--sm img{ border-radius:26px; aspect-ratio:1125/2280; object-fit:cover; object-position:top center; } /* hero story loop: choose, film, feedback */ .phone__frames{ position:relative; aspect-ratio:1125/2436; overflow:hidden; border-radius:33px; } .phone__frames .phone__frame{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; border-radius:0; opacity:0; filter:blur(2px); transition:opacity 600ms ease, filter 600ms ease; } .phone__frames .phone__frame.is-on{ opacity:1; filter:blur(0); } /* ── hero ──────────────────────────────────────────────────── */ .hero{ position:relative; overflow:hidden; padding:calc(var(--hdr-h) + 30px) 0 54px; } .hero__glow{ position:absolute; top:-28%; left:50%; transform:translateX(-50%); width:min(1100px,150%); aspect-ratio:1.5; background:radial-gradient(50% 50% at 50% 50%, rgba(184,240,72,.20), rgba(184,240,72,.05) 45%, transparent 70%); pointer-events:none; } .hero__in{ position:relative; display:grid; gap:34px; } .hero__title{ font-size:clamp(34px,8.9vw,66px); font-weight:800; } .hero__title em{ font-style:normal; background:linear-gradient(96deg,var(--lime-2),var(--lime)); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero__sub{ margin-top:16px; font-size:16.5px; color:var(--fog); max-width:48ch; } .hero__cta{ margin-top:24px; display:flex; flex-wrap:wrap; gap:11px; } .hero__cta .btn{ flex:1 1 auto; min-width:150px; } .hero__note{ margin-top:16px; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--fog); } .hero__note + .hero__note{ margin-top:9px; } .hero__note--proof{ color:#B9B9C0; } .ic-check{ width:16px; height:16px; flex:none; fill:none; stroke:var(--lime); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; } .stores{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; } .store{ display:flex; align-items:center; gap:10px; padding:9px 17px 9px 14px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03); transition:transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease; } .store:active{ transform:scale(.97); } @media (hover:hover) and (pointer:fine){ .store:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); } } .store__ic{ width:21px; height:21px; fill:currentColor; flex:none; } .store span{ display:grid; line-height:1.15; } .store small{ font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; opacity:.6; } .store b{ font-size:14.5px; font-weight:600; letter-spacing:-.01em; } .stores--dark .store{ border-color:rgba(0,0,0,.16); background:rgba(0,0,0,.06); color:var(--coal); } @media (hover:hover) and (pointer:fine){ .stores--dark .store:hover{ background:rgba(0,0,0,.12); border-color:rgba(0,0,0,.3); } } .stores--desktop{ display:none; } @media (min-width:900px){ .stores--desktop{ display:flex; } } .hero__art{ position:relative; justify-self:center; width:min(300px,78vw); } .hero__chip{ position:absolute; z-index:3; display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:13px; background:rgba(24,24,27,.82); border:1px solid var(--line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:12.5px; font-weight:500; white-space:nowrap; box-shadow:0 18px 40px -20px rgba(0,0,0,.9); } .hero__chip--a{ top:16%; left:-7%; } .hero__chip--b{ top:52%; right:-9%; } .hero__chip--c{ bottom:7%; left:-5%; gap:6px; } .hero__chip--c b{ color:var(--lime); font-family:'Inter Tight',sans-serif; font-size:15px; } .hero__chip--c span{ opacity:.65; } html.js .hero__chip{ opacity:0; transform:translateY(6px); transition:opacity 320ms var(--ease-out), transform 320ms var(--ease-out); } .hero__art.show-chips .hero__chip{ opacity:1; transform:translateY(0); } .hero__art.show-chips .hero__chip--b{ transition-delay:120ms; } .hero__art.show-chips .hero__chip--c{ transition-delay:240ms; } @media (min-width:900px){ .hero{ padding:calc(var(--hdr-h) + 64px) 0 92px; } .hero__in{ grid-template-columns:1.08fr .92fr; align-items:center; gap:40px; } .hero__art{ width:min(330px,100%); } .hero__cta .btn{ flex:0 0 auto; } .hero__chip--a{ left:-14%; } .hero__chip--b{ right:-16%; } .hero__chip--c{ left:-13%; } } /* ── ticker ────────────────────────────────────────────────── */ .ticker{ background:linear-gradient(90deg,var(--lime),var(--lime-2)); color:#101208; overflow:hidden; padding:11px 0; border-block:1px solid rgba(0,0,0,.12); } .ticker__track{ display:flex; width:max-content; animation:marquee 38s linear infinite; } .ticker__track span{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:13.5px; letter-spacing:.1em; text-transform:uppercase; padding:0 22px; display:flex; align-items:center; gap:22px; } .ticker__track span::after{ content:''; width:5px; height:5px; border-radius:50%; background:rgba(0,0,0,.45); } @keyframes marquee{ to{ transform:translateX(-50%); } } /* ── proof / demo ──────────────────────────────────────────── */ .demo{ margin-top:8px; } .demo__stage{ position:relative; width:min(292px,74vw); margin-inline:auto; } .demo .phone{ position:relative; z-index:1; } .demo__status{ position:absolute; z-index:4; top:-18px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; border-radius:999px; background:rgba(22,22,25,.94); border:1px solid var(--line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:13px; font-weight:500; white-space:nowrap; box-shadow:0 18px 44px -22px rgba(0,0,0,1); } .ring{ width:26px; height:26px; flex:none; transform:rotate(-90deg); } .ring circle{ fill:none; stroke-width:4.5; } .ring__bg{ stroke:rgba(255,255,255,.12); } .ring__fg{ stroke:var(--lime); stroke-linecap:round; stroke-dasharray:119.4; stroke-dashoffset:119.4; } .demo.is-running .ring__fg{ transition:stroke-dashoffset 1500ms linear; stroke-dashoffset:0; } .demo__label{ position:relative; display:grid; } .demo__label > span{ grid-area:1/1; transition:opacity 260ms ease, filter 260ms ease; } .demo__label-b{ opacity:0; filter:blur(3px); color:var(--lime); } .demo.is-done .demo__label-a{ opacity:0; filter:blur(3px); } .demo.is-done .demo__label-b{ opacity:1; filter:blur(0); } .fcard{ position:absolute; z-index:5; width:270px; padding:14px 16px; border-radius:16px; background:rgba(26,26,29,.93); border:1px solid var(--line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 26px 60px -26px rgba(0,0,0,1); opacity:0; transform:translateY(10px) scale(.96); transition:opacity 420ms var(--ease-out), transform 420ms var(--ease-out); } .fcard header{ display:flex; align-items:center; gap:9px; margin-bottom:6px; } .fcard h3{ font-size:15.5px; letter-spacing:-.02em; } .fcard p{ font-size:13.2px; line-height:1.5; color:var(--fog); } .fcard--good{ top:24%; left:-16%; } .fcard--warn{ bottom:12%; right:-16%; } .demo.is-done #fcard1{ opacity:1; transform:translateY(0) scale(1); } .demo.is-done #fcard2{ opacity:1; transform:translateY(0) scale(1); transition-delay:110ms; } .replay{ margin:34px auto 0; display:flex; align-items:center; gap:8px; padding:9px 17px; border-radius:999px; border:1px solid var(--line); font-size:13.5px; color:var(--fog); transition:transform 160ms var(--ease-out), color 200ms ease, border-color 200ms ease; } .replay:active{ transform:scale(.97); } .replay svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } @media (hover:hover) and (pointer:fine){ .replay:hover{ color:#fff; border-color:rgba(255,255,255,.26); } } @media (max-width:719px){ .demo__stage{ width:min(280px,72vw); margin-bottom:0; padding-bottom:0; } .fcard--good, .fcard--warn{ display:block; top:auto; bottom:-2%; left:50%; right:auto; width:min(300px,86vw); transform:translate(-50%,14px) scale(.96); } .demo.is-done #fcard1{ transform:translate(-50%,0) scale(1); } .demo.is-done #fcard2{ opacity:0; transform:translate(-50%,14px) scale(.96); transition-delay:0ms; } .demo.is-done.is-done2 #fcard1{ opacity:0; transform:translate(-50%,-8px) scale(.98); } .demo.is-done.is-done2 #fcard2{ opacity:1; transform:translate(-50%,0) scale(1); } .demo__stage{ padding-bottom:88px; } } @media (min-width:720px){ .demo__stage{ width:min(300px,60vw); } .fcard{ width:250px; } .fcard--good{ left:-64%; } .fcard--warn{ right:-64%; bottom:6%; } } @media (min-width:1000px){ .fcard{ width:320px; } .fcard--good{ left:-92%; top:20%; } .fcard--warn{ right:-92%; bottom:16%; } } /* ── ambassador quote ──────────────────────────────────────── */ .quote{ margin:0; position:relative; padding:30px 24px 24px; border-radius:var(--r-lg); background:linear-gradient(150deg,rgba(184,240,72,.09),rgba(255,255,255,.02) 45%); border:1px solid var(--line); } .quote__badge{ position:absolute; top:-11px; left:24px; padding:4px 11px; border-radius:999px; background:var(--ink-3); border:1px dashed rgba(184,240,72,.55); color:var(--lime); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; } .quote blockquote{ margin:0; font-family:'Inter Tight',sans-serif; font-weight:600; font-size:clamp(20px,4.3vw,29px); line-height:1.28; letter-spacing:-.028em; } .quote figcaption{ margin-top:22px; display:flex; align-items:center; gap:13px; } .quote__av{ width:44px; height:44px; border-radius:50%; flex:none; background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 6px,rgba(255,255,255,.03) 6px 12px); border:1px dashed var(--line); } .quote figcaption span{ display:grid; } .quote figcaption b{ font-size:15px; font-weight:600; } .quote figcaption small{ font-size:13px; color:var(--fog); } .quote__note{ margin-top:20px; padding-top:16px; border-top:1px dashed var(--line); font-size:12.5px; color:#8A8A92; font-style:italic; } @media (min-width:720px){ .quote{ padding:38px 36px 30px; max-width:880px; margin-inline:auto; } } /* ── steps ─────────────────────────────────────────────────── */ .steps{ display:grid; gap:44px; } .step{ display:grid; gap:22px; align-items:center; } .step__art{ width:min(200px,55vw); justify-self:center; } .step__n{ display:grid; place-content:center; width:34px; height:34px; margin-bottom:14px; border-radius:50%; background:var(--coal); color:var(--lime); font-family:'Inter Tight',sans-serif; font-weight:700; font-size:16px; } .step__txt h3{ font-size:clamp(21px,4.6vw,27px); } .step__txt p{ margin-top:10px; font-size:16px; color:var(--coal-2); max-width:46ch; } @media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); gap:32px; align-items:start; } .step{ gap:26px; } .step__art{ width:100%; max-width:220px; justify-self:start; } } /* ── why cards ─────────────────────────────────────────────── */ .grid4{ display:grid; gap:14px; } .card{ padding:22px 20px 24px; border-radius:var(--r-lg); background:#fff; border:1px solid rgba(0,0,0,.07); box-shadow:0 1px 2px rgba(0,0,0,.04); } .card__ic{ display:grid; place-content:center; width:40px; height:40px; margin-bottom:16px; border-radius:12px; background:var(--coal); } .card__ic svg{ width:20px; height:20px; fill:none; stroke:var(--lime); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .card h3{ font-size:18.5px; letter-spacing:-.025em; } .card p{ margin-top:9px; font-size:15px; color:var(--coal-2); } @media (min-width:640px){ .grid4{ grid-template-columns:repeat(2,1fr); gap:16px; } } @media (min-width:1040px){ .grid4{ grid-template-columns:repeat(4,1fr); } } /* ── players / clubs ───────────────────────────────────────── */ .grid2{ display:grid; gap:16px; } .pane{ padding:30px 26px 32px; border-radius:var(--r-lg); background:#fff; border:1px solid rgba(0,0,0,.07); display:flex; flex-direction:column; align-items:flex-start; } .pane--dark{ background:var(--ink); border-color:transparent; color:#fff; position:relative; overflow:hidden; } .pane--dark::after{ content:''; position:absolute; inset:auto -20% -55% auto; width:75%; aspect-ratio:1; background:radial-gradient(50% 50% at 50% 50%, rgba(184,240,72,.20), transparent 70%); pointer-events:none; } .pane h3{ font-size:clamp(21px,4.4vw,26px); margin-top:14px; } .pane p{ margin:12px 0 22px; font-size:15.5px; color:var(--coal-2); } .pane--dark p{ color:var(--fog); } .pane .btn{ margin-top:auto; position:relative; z-index:1; } .pane__mail{ margin-top:12px; font-size:13.5px; color:var(--coal-2); } .pane__mail a{ text-decoration:underline; text-underline-offset:3px; } .pane__list{ display:grid; gap:9px; margin-bottom:22px; } .pane__list li{ position:relative; padding-left:22px; font-size:14.5px; line-height:1.5; color:var(--coal-2); } .pane__list li::before{ content:''; position:absolute; left:2px; top:.5em; width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px var(--lime-dim); } .pane--dark .pane__list li{ color:var(--fog); } .pane .pane__list{ margin-top:-8px; } .tag{ padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; background:var(--lime-dim); color:var(--lime); } .tag--dark{ background:rgba(0,0,0,.07); color:var(--coal-2); } @media (min-width:820px){ .grid2{ grid-template-columns:1fr 1fr; gap:20px; } .pane{ padding:38px 34px 38px; } } /* ── statement ─────────────────────────────────────────────── */ .become{ position:relative; overflow:hidden; background:var(--ink); color:#fff; padding:88px 0 96px; border-block:1px solid var(--line-2); } .become::before{ content:''; position:absolute; inset:auto auto -60% -18%; width:70%; aspect-ratio:1; background:radial-gradient(50% 50% at 50% 50%, rgba(184,240,72,.16), transparent 70%); pointer-events:none; } .become__in{ position:relative; } .become__title{ font-size:clamp(33px,7.6vw,58px); font-weight:800; letter-spacing:-.035em; max-width:15ch; } .become__title em{ font-style:normal; background:linear-gradient(96deg,var(--lime-2),var(--lime)); -webkit-background-clip:text; background-clip:text; color:transparent; } .become__sub{ margin-top:16px; font-family:'Inter Tight',sans-serif; font-weight:600; font-size:13px; letter-spacing:.15em; text-transform:uppercase; color:var(--fog); } .become__player{ position:absolute; right:-9%; bottom:-14%; width:min(230px,44vw); opacity:.9; pointer-events:none; filter:drop-shadow(0 26px 44px rgba(0,0,0,.55)); } .become__title{ position:relative; z-index:1; } @media (min-width:900px){ .become{ padding:110px 0 118px; } .become__player{ right:3%; bottom:-16%; width:340px; } } /* ── pricing ───────────────────────────────────────────────── */ .prices{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } .price{ padding:20px 18px; border-radius:var(--r-md); background:var(--ink-2); border:1px solid var(--line-2); display:grid; gap:3px; } .price--free{ border-color:rgba(184,240,72,.4); background:linear-gradient(180deg,rgba(184,240,72,.09),var(--ink-2)); } .price__name{ font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fog); } .price--free .price__name{ color:var(--lime); } .price__amt{ font-family:'Inter Tight',sans-serif; font-size:clamp(24px,5.2vw,30px); font-weight:700; letter-spacing:-.035em; } .price__unit{ font-size:13.5px; color:var(--fog); } .prices__note{ margin-top:18px; font-size:13.5px; color:#8A8A92; } @media (min-width:820px){ .prices{ grid-template-columns:repeat(4,1fr); gap:16px; } .price{ padding:26px 22px; } } /* ── faq ───────────────────────────────────────────────────── */ .faq{ border-top:1px solid var(--line-2); } .faq__item{ border-bottom:1px solid var(--line-2); } .faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:19px 2px; text-align:left; font-family:'Inter Tight',sans-serif; font-weight:600; font-size:17px; letter-spacing:-.02em; transition:color 180ms ease; } .faq__q svg{ width:17px; height:17px; flex:none; fill:none; stroke:var(--lime); stroke-width:2.2; stroke-linecap:round; transition:transform 240ms var(--ease-out); } .faq__item.is-open .faq__q svg{ transform:rotate(45deg); } @media (hover:hover) and (pointer:fine){ .faq__q:hover{ color:var(--lime); } } .faq__a{ height:0; overflow:hidden; transition:height 260ms var(--ease-out); } .faq__a p{ padding:0 2px 20px; font-size:15.5px; color:var(--fog); max-width:62ch; } /* ── final cta ─────────────────────────────────────────────── */ .cta{ background:linear-gradient(150deg,var(--lime-2),var(--lime) 60%,#9FDB33); color:#101208; padding:64px 0 66px; text-align:center; position:relative; overflow:hidden; } .cta::before{ content:''; position:absolute; inset:0; background:url('assets/younalize-cta.svg') center/cover no-repeat; opacity:.9; pointer-events:none; } .cta__in{ position:relative; display:grid; justify-items:center; } .cta__title{ font-size:clamp(31px,7.2vw,52px); font-weight:800; } .cta__title em{ font-style:normal; text-decoration:underline; text-decoration-thickness:.09em; text-underline-offset:.1em; } .cta__sub{ margin-top:14px; font-size:17px; max-width:44ch; opacity:.72; } .cta .stores{ justify-content:center; margin-top:28px; } .cta__note{ margin-top:14px; font-size:13.5px; color:rgba(16,18,8,.65); } /* ── footer ────────────────────────────────────────────────── */ .ftr{ background:var(--ink); padding:44px 0 calc(44px + env(safe-area-inset-bottom)); border-top:1px solid var(--line-2); } .ftr__in{ display:grid; gap:22px; } .ftr__brand{ display:flex; align-items:center; gap:11px; } .ftr__brand p{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:15px; letter-spacing:-.02em; color:var(--fog); } .ftr__brand .brand__mark{ width:24px; height:25px; } .ftr__links{ display:flex; flex-wrap:wrap; gap:20px; font-size:14.5px; color:var(--fog); } .ftr__links a{ transition:color 180ms ease; } @media (hover:hover) and (pointer:fine){ .ftr__links a:hover{ color:#fff; } } .ftr__copy{ font-size:13px; color:#85858D; } @media (min-width:820px){ .ftr__in{ grid-template-columns:1fr auto 1fr; align-items:center; } .ftr__copy{ justify-self:end; } } /* ── sticky mobile cta ─────────────────────────────────────── */ .sticky{ position:fixed; z-index:90; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 9px 9px 18px; border-radius:999px; background:rgba(20,20,23,.92); border:1px solid var(--line); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 20px 50px -20px rgba(0,0,0,1); transform:translateY(calc(100% + 24px)); transition:transform 340ms var(--ease-out); } .sticky.is-on{ transform:translateY(0); } .sticky__txt{ font-size:13.5px; font-weight:500; } @media (min-width:900px){ .sticky{ display:none; } } /* ── script-specific typography ──────────────────────────────── Latin display tracking (-.032em, line-height 1.05) crushes Devanagari matras and CJK glyphs. Loosen both per language. */ html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] .hero__title, html[lang="hi"] .h2, html[lang="hi"] .cta__title{ line-height:1.34; letter-spacing:0; } html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3, html[lang="zh"] .hero__title, html[lang="zh"] .h2, html[lang="zh"] .cta__title{ line-height:1.22; letter-spacing:0; } html[lang="hi"] .eyebrow, html[lang="zh"] .eyebrow, html[lang="hi"] .become__sub, html[lang="zh"] .become__sub{ letter-spacing:.05em; text-transform:none; } html[lang="hi"] .tag, html[lang="zh"] .tag, html[lang="hi"] .price__name, html[lang="zh"] .price__name, html[lang="hi"] .quote__badge, html[lang="zh"] .quote__badge{ letter-spacing:.04em; text-transform:none; } html[lang="hi"] .quote blockquote{ line-height:1.5; letter-spacing:0; } html[lang="zh"] .quote blockquote{ line-height:1.42; letter-spacing:0; } html[lang="hi"] .ticker__track span, html[lang="zh"] .ticker__track span{ letter-spacing:.04em; text-transform:none; } /* ── reduced motion ────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .anim{ transform:none; transition:opacity 300ms ease; } html.js .anim:not(.in){ transform:none; } .ticker__track{ animation:none; } .fcard{ transform:none; transition:opacity 300ms ease; } .demo.is-done #fcard1,.demo.is-done #fcard2{ transform:none; } @media (max-width:719px){ .fcard--good,.fcard--warn{ transform:translateX(-50%); } .demo.is-done #fcard1,.demo.is-done #fcard2{ transform:translateX(-50%); } .demo.is-done.is-done2 #fcard1,.demo.is-done.is-done2 #fcard2{ transform:translateX(-50%); } } .demo.is-running .ring__fg{ transition:none; } .lang__menu{ transform:none; transition:opacity 160ms ease; } .lang.is-open .lang__menu{ transform:none; } .sticky{ transform:none; opacity:0; pointer-events:none; transition:opacity 240ms ease; } .sticky.is-on{ opacity:1; pointer-events:auto; } .btn:active,.store:active,.replay:active,.lang__btn:active{ transform:none; } html.js .hero__chip{ opacity:1; transform:none; transition:none; } .phone__frames .phone__frame{ transition:none; } } /* ── theme toggle button ───────────────────────────────────── */ .theme{ display:grid; place-content:center; width:34px; height:34px; flex:none; border:1px solid var(--line); border-radius:50%; transition:transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease; } .theme:active{ transform:scale(.94); } @media (hover:hover) and (pointer:fine){ .theme:hover{ background:rgba(255,255,255,.06); } } .theme svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .theme__moon{ display:none; } html.theme-light .theme__sun{ display:none; } html.theme-light .theme__moon{ display:block; } /* ── light theme ─────────────────────────────────────────────── Default is the dark brand look. Light mode follows the visitor's prefers-color-scheme or the header toggle (stored per visitor). Lime stays for fills (buttons, ticker, CTA band); lime-as-text becomes deep green for contrast on paper. */ html.theme-light body{ background:#F7F5EF; color:#161613; } /* header */ html.theme-light .hdr{ background:rgba(247,245,239,.8); } html.theme-light .hdr.is-stuck{ background:rgba(247,245,239,.94); border-bottom-color:rgba(0,0,0,.08); } html.theme-light .hdr__nav{ color:#5D5A52; } @media (hover:hover) and (pointer:fine){ html.theme-light .hdr__nav a:hover{ color:#161613; } } html.theme-light .burger span{ background:#161613; } html.theme-light .hdr__drawer a{ color:#5D5A52; border-bottom-color:rgba(0,0,0,.08); } html.theme-light .hdr.is-open .hdr__drawer{ border-top-color:rgba(0,0,0,.08); } html.theme-light .lang__btn, html.theme-light .theme{ border-color:rgba(0,0,0,.16); } @media (hover:hover) and (pointer:fine){ html.theme-light .lang__btn:hover, html.theme-light .theme:hover{ background:rgba(0,0,0,.05); } } html.theme-light .lang__menu{ background:#fff; border-color:rgba(0,0,0,.1); box-shadow:0 24px 60px -28px rgba(30,30,20,.35); } html.theme-light .lang__menu li[aria-selected="true"]{ color:#4E7A05; } @media (hover:hover) and (pointer:fine){ html.theme-light .lang__menu li:hover{ background:rgba(0,0,0,.05); } } /* dark zones become paper */ html.theme-light .sec--dark{ background:transparent; color:#161613; } html.theme-light .eyebrow{ color:#6B685F; } html.theme-light .eyebrow--lime{ color:#4E7A05; } html.theme-light .h2 em{ color:#4E7A05; } html.theme-light .lede{ color:#5D5A52; } /* hero */ html.theme-light .hero__glow{ opacity:.55; } html.theme-light .hero__title em{ background-image:linear-gradient(96deg,#5F8F0A,#4E7A05); } html.theme-light .hero__sub, html.theme-light .hero__note{ color:#5D5A52; } html.theme-light .hero__note--proof{ color:#6B685F; } html.theme-light .btn--ghost{ border-color:rgba(0,0,0,.2); color:#161613; background:rgba(0,0,0,.02); } @media (hover:hover) and (pointer:fine){ html.theme-light .btn--ghost:hover{ background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.32); } } html.theme-light .store{ border-color:rgba(0,0,0,.16); background:rgba(0,0,0,.04); color:#161613; } @media (hover:hover) and (pointer:fine){ html.theme-light .store:hover{ background:rgba(0,0,0,.09); border-color:rgba(0,0,0,.3); } } html.theme-light .hero__chip{ background:rgba(255,255,255,.92); border-color:rgba(0,0,0,.1); color:#161613; box-shadow:0 14px 30px -18px rgba(30,30,20,.4); } html.theme-light .hero__chip--c b{ color:#4E7A05; } html.theme-light .phone{ box-shadow:0 2px 0 rgba(255,255,255,.09) inset, 0 34px 64px -30px rgba(30,30,20,.5); } /* ticker */ html.theme-light .ticker{ border-block-color:rgba(0,0,0,.14); } /* ambassador quote */ html.theme-light .quote{ background:linear-gradient(150deg,rgba(110,160,20,.09),rgba(0,0,0,.02) 45%); border-color:rgba(0,0,0,.1); } html.theme-light .quote__badge{ background:#F7F5EF; border-color:rgba(110,160,20,.65); color:#4E7A05; } html.theme-light .quote__av{ background:repeating-linear-gradient(45deg,rgba(0,0,0,.07) 0 6px,rgba(0,0,0,.03) 6px 12px); border-color:rgba(0,0,0,.18); } html.theme-light .quote figcaption small{ color:#5D5A52; } html.theme-light .quote__note{ color:#6F6C62; border-top-color:rgba(0,0,0,.12); } /* analysis demo */ html.theme-light .demo__status{ background:rgba(255,255,255,.96); border-color:rgba(0,0,0,.1); box-shadow:0 14px 34px -18px rgba(30,30,20,.4); } html.theme-light .ring__bg{ stroke:rgba(0,0,0,.12); } html.theme-light .demo__label-b{ color:#4E7A05; } html.theme-light .fcard{ background:rgba(255,255,255,.97); border-color:rgba(0,0,0,.1); box-shadow:0 20px 44px -22px rgba(30,30,20,.45); } html.theme-light .fcard p{ color:#5D5A52; } html.theme-light .replay{ color:#5D5A52; border-color:rgba(0,0,0,.16); } @media (hover:hover) and (pointer:fine){ html.theme-light .replay:hover{ color:#161613; border-color:rgba(0,0,0,.3); } } /* statement band */ html.theme-light .become{ background:#EFEBDF; border-block-color:rgba(0,0,0,.07); } html.theme-light .become__title em{ background-image:linear-gradient(96deg,#5F8F0A,#4E7A05); } html.theme-light .become__sub{ color:#6B685F; } /* pricing */ html.theme-light .price{ background:#fff; border-color:rgba(0,0,0,.08); } html.theme-light .price--free{ border-color:rgba(110,160,20,.5); background-image:linear-gradient(180deg,rgba(184,240,72,.16),#fff); background-color:#fff; } html.theme-light .price__name{ color:#6B685F; } html.theme-light .price--free .price__name{ color:#4E7A05; } html.theme-light .price__unit{ color:#5D5A52; } html.theme-light .prices__note{ color:#6F6C62; } /* faq */ html.theme-light .faq, html.theme-light .faq__item{ border-color:rgba(0,0,0,.1); } html.theme-light .faq__q svg{ stroke:#4E7A05; } @media (hover:hover) and (pointer:fine){ html.theme-light .faq__q:hover{ color:#4E7A05; } } html.theme-light .faq__a p{ color:#5D5A52; } /* footer + sticky */ html.theme-light .ftr{ background:transparent; border-top-color:rgba(0,0,0,.08); } html.theme-light .ftr__brand p, html.theme-light .ftr__links{ color:#5D5A52; } @media (hover:hover) and (pointer:fine){ html.theme-light .ftr__links a:hover{ color:#161613; } } html.theme-light .ftr__copy{ color:#6F6C62; } html.theme-light .sticky{ background:rgba(255,255,255,.95); border-color:rgba(0,0,0,.12); color:#161613; box-shadow:0 18px 44px -20px rgba(30,30,20,.5); } /* players / clubs */ html.theme-light .pane__list li{ color:var(--coal-2); }