/* ============================================================ Alwenna blog — reuses the app/landing token system. Theme via [data-theme] on . ============================================================ */ /* Montserrat, not Poppins: Poppins ships no Cyrillic glyphs (latin + latin-ext + devanagari only), so Russian text fell back to a system font and looked off next to Latin. Montserrat is the closest geometric match that carries full Cyrillic, so RU and EN render in one consistent typeface. */ @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; } :root, [data-theme="light"] { --bg-top:#efe7fb; --bg-bot:#f7f5fe; --page:#f6f2fe; --surface:#fff; --surface-sunk:#f4f1fb; --text:#2b2350; --text-soft:#6c6394; --text-mut:#9b91bb; --hero-a:#6c43d8; --hero-b:#8a5cf0; --hero-ink:#fff; --lilac:#eae1fb; --lilac-ink:#6e4fb8; --primary:#25b7ea; --line: rgba(110,90,170,.13); --line-2: rgba(110,90,170,.07); --chip-bg:#f1ecfb; --code-bg:#f1ecfb; --shadow-sm: 0 4px 14px rgba(85,60,160,.08); --shadow-md: 0 14px 34px rgba(85,60,160,.13); --shadow-hero: 0 18px 40px rgba(96,60,210,.34); --r-card: 22px; } [data-theme="dark"] { --bg-top:#1b1540; --bg-bot:#120e2c; --page:#100b26; --surface:#221a47; --surface-sunk:#1a1338; --text:#f3eeff; --text-soft:#c4b9ec; --text-mut:#8d82b8; --hero-a:#7d5cff; --hero-b:#b07bff; --hero-ink:#fff; --lilac:rgba(150,110,240,.22); --lilac-ink:#cbb5ff; --primary:#3fc6f2; --line: rgba(170,150,240,.16); --line-2: rgba(170,150,240,.08); --chip-bg: rgba(150,120,240,.14); --code-bg: rgba(150,120,240,.18); --shadow-sm: 0 4px 14px rgba(0,0,0,.3); --shadow-md: 0 14px 34px rgba(0,0,0,.4); --shadow-hero: 0 18px 40px rgba(70,40,160,.6); } [data-theme="warm"] { --bg-top:#f7e9e4; --bg-bot:#fbf4ee; --page:#fbf4ec; --surface:#fffaf6; --surface-sunk:#f5ece4; --text:#3c2c33; --text-soft:#7a6258; --text-mut:#a9928a; --hero-a:#b5527a; --hero-b:#e07a64; --hero-ink:#fff7f2; --lilac:#ece0ef; --lilac-ink:#8a5e8f; --primary:#2bb6dd; --line: rgba(150,100,80,.14); --line-2: rgba(150,100,80,.07); --chip-bg:#f3e7df; --code-bg:#f3e7df; --shadow-sm: 0 4px 14px rgba(150,90,70,.1); --shadow-md: 0 14px 34px rgba(150,90,70,.15); --shadow-hero: 0 18px 40px rgba(190,90,90,.34); } body { font-family: 'Montserrat', -apple-system, system-ui, sans-serif; background: var(--page); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.65; transition: background .4s, color .4s; } a { color: inherit; text-decoration: none; } .wrap { max-width: 720px; margin: 0 auto; padding: 0 22px; } /* nav */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); background: color-mix(in srgb, var(--page) 80%, transparent); border-bottom: 1px solid var(--line-2); } .nav .wrap { max-width: 980px; } .nav-in { display: flex; align-items: center; gap: 16px; height: 68px; } .brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 20px; } .brand-mark { display: grid; place-items: center; color: var(--text); } display: grid; place-items: center; box-shadow: var(--shadow-hero); } .brand-sub { font-weight: 600; font-size: 14px; color: var(--text-mut); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .btn { display: inline-flex; align-items: center; border: none; cursor: pointer; font-family: inherit; font-weight: 600; border-radius: 999px; padding: 11px 18px; font-size: 14.5px; transition: transform .15s; white-space: nowrap; } .btn:active { transform: scale(.97); } .btn-hero { background: linear-gradient(120deg,var(--hero-a),var(--hero-b)); color: var(--hero-ink); box-shadow: var(--shadow-hero); } /* The language + theme switchers (.menu / .sw) come from the shared nav-kit (apps/shared/nav-kit.css), concatenated into this stylesheet at build time. */ /* a post written in a given language is tagged so it reads clearly under any UI locale */ .lang-chip { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--lilac-ink); background: var(--chip-bg); padding: 2px 8px; border-radius: 999px; vertical-align: middle; } /* index */ .blog-head { padding: 56px 0 32px; } .blog-head h1 { margin: 0; font-size: clamp(32px,5vw,46px); font-weight: 800; letter-spacing: -.5px; } .lead { font-size: 18px; color: var(--text-soft); margin: 12px 0 0; } .post-list { display: flex; flex-direction: column; gap: 18px; padding-bottom: 64px; } .post-card { display: block; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 24px 26px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; } .post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .post-card time { font-size: 13px; color: var(--text-mut); font-weight: 600; } .post-card h2 { margin: 8px 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.3px; } .post-card p { margin: 0; color: var(--text-soft); font-size: 15px; } .post-card .read { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 14px; color: var(--lilac-ink); } /* post */ .post { padding: 44px 0 72px; } .post .back { font-size: 14px; font-weight: 600; color: var(--lilac-ink); } .post time { display: block; margin: 22px 0 6px; font-size: 13.5px; color: var(--text-mut); font-weight: 600; } .post h1 { margin: 0 0 24px; font-size: clamp(30px,5vw,42px); font-weight: 800; line-height: 1.12; letter-spacing: -.5px; } .prose { font-size: 17px; color: var(--text); } .prose h2 { font-size: 25px; font-weight: 700; margin: 38px 0 12px; letter-spacing: -.3px; } .prose h3 { font-size: 20px; font-weight: 700; margin: 28px 0 10px; } .prose p { margin: 0 0 18px; } .prose ul, .prose ol { margin: 0 0 18px; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; } .prose a { color: var(--lilac-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .prose strong { font-weight: 700; } .prose code { background: var(--code-bg); padding: 2px 7px; border-radius: 7px; font-size: .9em; } .prose blockquote { margin: 0 0 18px; padding: 4px 18px; border-left: 3px solid var(--hero-b); color: var(--text-soft); font-style: italic; } .post .cta { display: inline-block; margin-top: 34px; background: linear-gradient(120deg,var(--hero-a),var(--hero-b)); color: var(--hero-ink); padding: 14px 24px; border-radius: 999px; font-weight: 600; box-shadow: var(--shadow-hero); } /* footer */ .footer { border-top: 1px solid var(--line-2); padding: 28px 0 44px; } .footer .wrap { max-width: 980px; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 13.5px; color: var(--text-mut); flex-wrap: wrap; } .footer a { color: var(--text-soft); } /* Phone: with the theme switcher moved to the footer, the nav row is just brand + language + the CTA, which fits comfortably; tighten gaps and padding a touch and drop only the "Blog" sub-label. */ @media (max-width: 560px) { .brand-sub { display: none; } .brand { font-size: 17px; gap: 8px; } .brand-mark svg { width: 30px; height: 30px; } .nav .wrap { padding: 0 14px; } .nav-in { gap: 10px; } .nav-right { gap: 8px; } .btn { padding: 10px 15px; font-size: 13.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; }