/* ============================================================ Alwenna — landing page styles Reuses the app token system; theme via [data-theme] on . ============================================================ */ /* Montserrat, not Poppins: Poppins ships no Cyrillic glyphs, so Russian text fell back to a system font. Montserrat is the closest geometric match with full Cyrillic + Latin, keeping one consistent typeface across both scripts. */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap'); *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; } /* ---------- LIGHT LAVENDER (default) ---------- */ :root, [data-theme="light"] { --bg-top: #efe7fb; --bg-bot: #f7f5fe; --page: #f6f2fe; --surface: #ffffff; --surface-sunk: #f4f1fb; --text: #2b2350; --text-soft: #6c6394; --text-mut: #9b91bb; --primary: #25b7ea; --primary-2: #2ec8e6; --primary-ink: #fff; --primary-soft: #e4f6fd; --hero-a: #6c43d8; --hero-b: #8a5cf0; --hero-ink: #fff; --hero-sub: #e2d6fb; --sky:#d8ecf9; --sky-ink:#2b6f9e; --mint:#d9f1e4; --mint-ink:#2f8c63; --pink:#fcdfe8; --pink-ink:#b8567c; --lilac:#eae1fb; --lilac-ink:#6e4fb8; --peach:#fdecdc; --peach-ink:#b87a45; --good:#34c389; --tough:#ef7a9e; --line: rgba(110,90,170,.13); --line-2: rgba(110,90,170,.07); --chip-bg:#f1ecfb; --chip-ink:#6c6394; --shadow-sm: 0 4px 14px rgba(85,60,160,.08); --shadow-md: 0 14px 34px rgba(85,60,160,.13); --shadow-lg: 0 30px 70px rgba(70,45,140,.22); --shadow-hero: 0 26px 60px rgba(96,60,210,.36); --star: rgba(108,67,216,.5); --r-card: 26px; --r-lg: 34px; } [data-theme="dark"] { --bg-top:#1b1540; --bg-bot:#120e2c; --page:#100b26; --surface:#221a47; --surface-sunk:#1a1338; --text:#f3eeff; --text-soft:#c4b9ec; --text-mut:#8d82b8; --primary:#3fc6f2; --primary-2:#57d6e8; --primary-ink:#06243a; --primary-soft:rgba(63,198,242,.16); --hero-a:#7d5cff; --hero-b:#b07bff; --hero-ink:#fff; --hero-sub:#e0d4ff; --sky:rgba(72,160,220,.2); --sky-ink:#9fd6f4; --mint:rgba(60,190,140,.18); --mint-ink:#8fe6bd; --pink:rgba(235,120,160,.2); --pink-ink:#f6b2cb; --lilac:rgba(150,110,240,.22); --lilac-ink:#cbb5ff; --peach:rgba(225,150,90,.2); --peach-ink:#f3c79b; --good:#4cd6a0; --tough:#f78bab; --line: rgba(170,150,240,.16); --line-2: rgba(170,150,240,.08); --chip-bg: rgba(150,120,240,.14); --chip-ink:#c4b9ec; --shadow-sm: 0 4px 14px rgba(0,0,0,.3); --shadow-md: 0 14px 34px rgba(0,0,0,.4); --shadow-lg: 0 30px 70px rgba(0,0,0,.55); --shadow-hero: 0 26px 60px rgba(70,40,160,.6); --star: rgba(210,195,255,.85); } [data-theme="warm"] { --bg-top:#f7e9e4; --bg-bot:#fbf4ee; --page:#fbf4ec; --surface:#fffaf6; --surface-sunk:#f5ece4; --text:#3c2c33; --text-soft:#7a6258; --text-mut:#a9928a; --primary:#2bb6dd; --primary-2:#36c7d6; --primary-ink:#fff; --primary-soft:#e2f4f8; --hero-a:#b5527a; --hero-b:#e07a64; --hero-ink:#fff7f2; --hero-sub:#f7d8cc; --sky:#dcecf3; --sky-ink:#4d7e98; --mint:#e0eedd; --mint-ink:#5b8a5a; --pink:#fbdfd9; --pink-ink:#c06a5f; --lilac:#ece0ef; --lilac-ink:#8a5e8f; --peach:#fbe6d2; --peach-ink:#bc7a45; --good:#5eb87e; --tough:#e58a7b; --line: rgba(150,100,80,.14); --line-2: rgba(150,100,80,.07); --chip-bg:#f3e7df; --chip-ink:#7a6258; --shadow-sm: 0 4px 14px rgba(150,90,70,.1); --shadow-md: 0 14px 34px rgba(150,90,70,.15); --shadow-lg: 0 30px 70px rgba(140,80,60,.24); --shadow-hero: 0 26px 60px rgba(190,90,90,.36); --star: rgba(181,82,122,.5); } body { font-family: 'Montserrat', -apple-system, system-ui, sans-serif; background: var(--page); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.55; transition: background .4s, color .4s; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; } .sec { padding: 96px 0; position: relative; } /* eyebrow */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--chip-bg); color: var(--hero-b); padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .3px; } .eyebrow svg { display:block; } h1,h2,h3 { margin: 0; color: var(--text); letter-spacing: -.5px; } h1 { font-size: clamp(40px, 6vw, 66px); font-weight: 800; line-height: 1.05; } h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; line-height: 1.12; } h3 { font-size: 20px; font-weight: 700; } p { margin: 0; } a { color: inherit; text-decoration: none; } .lead { font-size: clamp(16px,1.5vw,19px); color: var(--text-soft); line-height: 1.6; } .sec-head { text-align: center; max-width: 660px; margin: 0 auto 56px; } .sec-head p { margin-top: 16px; } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: none; cursor: pointer; font-family: inherit; font-weight: 600; border-radius: 999px; padding: 16px 28px; font-size: 16px; text-decoration: none; transition: transform .15s, box-shadow .2s, background .2s; white-space: nowrap; } .btn:active { transform: scale(.97); } .btn-primary { background: linear-gradient(180deg,var(--primary-2),var(--primary)); color: var(--primary-ink); box-shadow: 0 14px 30px rgba(37,183,234,.4); } .btn-hero { background: linear-gradient(120deg,var(--hero-a),var(--hero-b)); color: var(--hero-ink); box-shadow: var(--shadow-hero); } .btn-soft { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } .btn-ghost { background: transparent; color: var(--text-soft); } .btn-lg { padding: 18px 34px; font-size: 17px; } /* The enlarged sample-download CTA. Allowed to wrap and capped to its container so a long label (e.g. "Download the sample Book (PDF)") never overflows narrow screens. */ .btn-download { font-size: 20px; padding: 24px 52px; gap: 12px; white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; } /* nav */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); background: color-mix(in srgb, var(--page) 78%, transparent); border-bottom: 1px solid var(--line-2); } .nav-in { display: flex; align-items: center; gap: 18px; height: 72px; } .brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 21px; letter-spacing: .2px; } .brand-mark { width: 40px; height: 40px; border-radius: 13px; background: linear-gradient(135deg,var(--hero-a),var(--hero-b)); display: grid; place-items: center; box-shadow: var(--shadow-hero); } .nav-links { display: flex; gap: 30px; margin-left: 22px; } .nav-links a { font-size: 15px; font-weight: 500; color: var(--text-soft); transition: color .2s; } .nav-links a:hover { color: var(--text); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } /* The language + theme switchers (.menu / .sw) are styled by the shared nav-kit (apps/shared/nav-kit.css), concatenated into this stylesheet at build time. */ /* hero */ .hero { position: relative; overflow: hidden; padding-top: 70px; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; } .hero h1 { margin: 22px 0 0; } .hero .lead { margin: 22px 0 32px; max-width: 480px; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .hero-note { display: flex; align-items: center; gap: 18px; margin-top: 26px; font-size: 13.5px; color: var(--text-mut); flex-wrap: wrap; } .hero-note .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-mut); } .avatars { display: flex; } .avatars span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--page); margin-left: -10px; } .avatars span:first-child { margin-left: 0; } /* phone mockup */ .phone { position: relative; width: 300px; margin: 0 auto; border-radius: 46px; background: #0c0a1a; padding: 12px; box-shadow: var(--shadow-lg), 0 0 0 2px rgba(255,255,255,.04) inset; } .phone-screen { border-radius: 36px; overflow: hidden; background: var(--bg-bot); position: relative; height: 600px; } .phone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; background: #0c0a1a; border-radius: 999px; z-index: 5; } .phone-float { position: absolute; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-md); border: 1px solid var(--line-2); } /* stars layer */ .stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; z-index: 0; } /* logos / trust strip */ .trust { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; opacity: .8; } .trust .stat { text-align: center; } .trust .stat b { display: block; font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -.5px; } .trust .stat span { font-size: 13.5px; color: var(--text-mut); font-weight: 500; } .trust .vr { width: 1px; height: 42px; background: var(--line); } /* flagship */ .flagship { background: linear-gradient(135deg,var(--hero-a),var(--hero-b)); border-radius: var(--r-lg); padding: 56px; position: relative; overflow: hidden; box-shadow: var(--shadow-hero); } .flagship h2, .flagship p { color: var(--hero-ink); } .flagship .lead { color: var(--hero-sub); } .flag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; position: relative; z-index: 1; } .flag-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.18); color: var(--hero-ink); padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 700; } .score-card { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 26px; padding: 26px; backdrop-filter: blur(6px); } .score-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .score-bar { flex: 1; height: 10px; background: rgba(255,255,255,.2); border-radius: 999px; overflow: hidden; } .score-bar > div { height: 100%; background: #fff; border-radius: 999px; } /* feature cards */ .feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .feat { background: var(--surface); border-radius: var(--r-card); padding: 28px; box-shadow: var(--shadow-md); border: 1px solid var(--line-2); transition: transform .2s, box-shadow .2s; } .feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .feat-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 18px; } .feat h3 { margin-bottom: 9px; } .feat p { font-size: 14.5px; color: var(--text-soft); } /* steps */ .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; counter-reset: s; } .step { position: relative; padding-top: 12px; } .step-num { width: 46px; height: 46px; border-radius: 14px; background: var(--chip-bg); color: var(--hero-b); display: grid; place-items: center; font-weight: 800; font-size: 19px; margin-bottom: 18px; } .step h3 { margin-bottom: 8px; } .step p { font-size: 14.5px; color: var(--text-soft); } /* testimonials */ .quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .quote { background: var(--surface); border-radius: var(--r-card); padding: 26px; box-shadow: var(--shadow-sm); border: 1px solid var(--line-2); } .quote .stars-row { color: #f4b740; font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; } .quote p { font-size: 15px; color: var(--text); line-height: 1.6; } .quote .who { display: flex; align-items: center; gap: 11px; margin-top: 18px; } .quote .who .ava { width: 38px; height: 38px; border-radius: 50%; } .quote .who b { font-size: 14px; font-weight: 700; display: block; } .quote .who span { font-size: 12.5px; color: var(--text-mut); } /* pricing */ .price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items: stretch; } .plan { background: var(--surface); border-radius: var(--r-lg); padding: 34px 30px; box-shadow: var(--shadow-md); border: 1px solid var(--line-2); display: flex; flex-direction: column; position: relative; } .plan.featured { background: linear-gradient(160deg,var(--hero-a),var(--hero-b)); box-shadow: var(--shadow-hero); transform: scale(1.04); } .plan.featured h3, .plan.featured .price, .plan.featured .price small, .plan.featured li { color: var(--hero-ink); } .plan.featured .plan-sub { color: var(--hero-sub); } .plan-tag { position: absolute; top: 20px; right: 22px; background: rgba(255,255,255,.22); color: var(--hero-ink); font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; } /* "Soon" tag for not-yet-live paid plans — solid so it reads on both the white and the gradient (featured) cards. */ .plan-tag.soon { background: var(--hero-b); color: #fff; } /* Disabled CTA for those plans: looks like a button but isn't a link. */ .btn.is-soon { opacity: .5; cursor: default; box-shadow: none; } .plan h3 { font-size: 19px; } .plan-sub { font-size: 13.5px; color: var(--text-mut); margin-top: 4px; } .price { font-size: 42px; font-weight: 800; margin: 20px 0 4px; letter-spacing: -1px; } .price small { font-size: 15px; font-weight: 500; color: var(--text-mut); } .plan ul { list-style: none; padding: 0; margin: 22px 0 26px; display: flex; flex-direction: column; gap: 12px; } .plan li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--text-soft); } .plan li svg { flex: none; margin-top: 2px; } .plan .btn { margin-top: auto; } /* faq */ .faq { max-width: 760px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; background: none; border: none; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; text-align: left; font-size: 17px; font-weight: 600; color: var(--text); } .faq-q svg { flex: none; transition: transform .25s; } .faq-item.open .faq-q svg { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s; } .faq-item.open .faq-a { max-height: 220px; padding: 0 4px 22px; } .faq-a p { font-size: 15px; color: var(--text-soft); line-height: 1.6; } /* final cta */ .cta-band { text-align: center; background: linear-gradient(135deg,var(--lilac),var(--surface)); border-radius: var(--r-lg); padding: 72px 40px; position: relative; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line-2); } .cta-band h2 { position: relative; z-index: 1; } .cta-band p { position: relative; z-index: 1; } /* footer */ .footer { padding: 64px 0 40px; border-top: 1px solid var(--line-2); margin-top: 40px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } .footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-mut); margin: 0 0 16px; } .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; } .footer a { font-size: 14.5px; color: var(--text-soft); } .footer a:hover { color: var(--text); } .footer .lead { font-size: 14.5px; max-width: 280px; margin-top: 14px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--text-mut); flex-wrap: wrap; gap: 14px; } .footer-credit { font-size: 13px; font-weight: 600; color: var(--text-soft); } .footer-credit:hover { color: var(--text); } .footer-disclaimer { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-mut); max-width: 820px; } /* reveal animation */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } * { animation: none !important; } } /* responsive */ @media (max-width: 920px) { .hero-grid, .flag-grid { grid-template-columns: 1fr; } .hero-phone-col { order: -1; } .feat-grid, .steps, .quotes, .price-grid { grid-template-columns: 1fr; } .plan.featured { transform: none; } .nav-links { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; } .sec { padding: 64px 0; } .flagship { padding: 34px; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .trust { gap: 22px; } .trust .vr { display: none; } /* Phone nav: section links are hidden ≤920px and the theme switcher now lives in the footer, so brand + language + CTA fit; tighten the cluster and shrink the brand a touch. */ .nav .brand { font-size: 17px; gap: 8px; } .nav .brand-mark { width: 32px; height: 32px; } .nav-in { gap: 10px; } .nav .wrap { padding: 0 14px; } .nav-right { gap: 8px; } .nav-right .btn { padding: 10px 14px; font-size: 13.5px; } /* Full-width, smaller so the label fits within the viewport (border-box keeps padding in). */ .btn-download { width: 100%; padding: 16px 22px; font-size: 15.5px; } } /* ============================================================ Alwenna nav-kit — the shared language + theme switchers. Used by both the landing (apps/landing) and the blog (apps/blog); each build concatenates this into its own fingerprinted stylesheet. Relies on the host page's theme tokens (--surface, --text, --line, --hero-a/b, …), which both sites define identically per [data-theme]. ============================================================ */ /* compact dropdown menus — language + theme. Native
; no JS to open. */ .menu { position: relative; } .menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; background: var(--surface); color: var(--text-soft); border: 1px solid var(--line-2); padding: 8px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-sm); transition: color .2s, border-color .2s; } .menu > summary::-webkit-details-marker { display: none; } .menu > summary::marker { content: ""; } .menu > summary:hover, .menu[open] > summary { color: var(--text); border-color: var(--line); } .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .55; } .menu-pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 60; } .menu-pop a, .menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text-soft); text-align: left; padding: 9px 12px; border-radius: 10px; transition: background .15s, color .15s; } .menu-pop a:hover, .menu-pop button:hover { background: var(--surface-sunk); color: var(--text); } .menu-pop a[aria-current="true"] { color: var(--text); font-weight: 700; } /* theme swatches */ .sw { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--line-2) inset; } .sw-light { background: linear-gradient(135deg,#efe7fb,#8a5cf0); } .sw-dark { background: linear-gradient(135deg,#221a47,#7d5cff); } .sw-warm { background: linear-gradient(135deg,#f7e9e4,#e07a64); } .sw-active { background: linear-gradient(135deg,var(--hero-a),var(--hero-b)); box-shadow: none; } /* theme switcher — inline row for the footer (reuses .sw swatches + data-theme-btn) */ .theme-control { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .theme-control-label { font-size: 13px; font-weight: 700; color: var(--text-mut); } .theme-opt { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-soft); background: var(--surface); border: 1px solid var(--line-2); padding: 7px 13px; border-radius: 999px; transition: color .15s, border-color .15s, background .15s; } .theme-opt:hover { color: var(--text); border-color: var(--line); } .theme-opt.is-active { color: var(--text); border-color: transparent; background: var(--surface-sunk); box-shadow: var(--shadow-sm); } /* pagination — reusable, icon + number only (apps/shared/nav-kit.mjs → pagination()) */ .pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 44px 0 4px; flex-wrap: wrap; } .pager-nums { display: flex; align-items: center; gap: 4px; } .pager-btn, .pager-num { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 7px; box-sizing: border-box; border-radius: 13px; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; color: var(--text-soft); border: 1px solid var(--line); background: var(--surface); transition: background .15s, color .15s, border-color .15s, transform .1s; } .pager-btn svg { width: 20px; height: 20px; display: block; } .pager-btn:hover, .pager-num:hover { color: var(--text); border-color: var(--line); background: var(--surface-sunk); } .pager-btn:active, .pager-num:active { transform: translateY(1px); } .pager-num.is-current { color: var(--hero-ink); border-color: transparent; cursor: default; background: linear-gradient(135deg, var(--hero-a), var(--hero-b)); box-shadow: var(--shadow-sm); } .pager-btn.is-disabled { opacity: .32; cursor: default; pointer-events: none; } .pager-gap { min-width: 26px; text-align: center; color: var(--text-mut); font-weight: 700; user-select: none; }