@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/inter-v20-latin-regular.woff2") format("woff2"); } @font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/inter-v20-latin-500.woff2") format("woff2"); } @font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/inter-v20-latin-600.woff2") format("woff2"); } @font-face{ font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/inter-v20-latin-700.woff2") format("woff2"); } @font-face{ font-family:"Noto Serif Georgian"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/noto-serif-georgian-v29-georgian-500.woff2") format("woff2"); } @font-face{ font-family:"Noto Serif Georgian"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/noto-serif-georgian-v29-georgian-700.woff2") format("woff2"); } :root{ --bg: #fbfaf7; --paper: #ffffff; --ink: #121214; --ink2:#1a1a1d; --muted: rgba(18,18,20,.68); --muted2: rgba(18,18,20,.54); --accent:#b81f3a; --accentSoft: rgba(184,31,58,.10); --accentLine: rgba(184,31,58,.24); --line: rgba(18,18,20,.12); --line2: rgba(18,18,20,.08); --shadowS: 0 10px 22px rgba(0,0,0,.07); --shadowM: 0 18px 54px rgba(0,0,0,.10); --r10: 10px; --r12: 12px; --r14: 14px; --r18: 18px; --max: 1200px; --read: 920px; --serif: "Noto Serif Georgian", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --ease: cubic-bezier(.2,.8,.2,1); --step--1: 12px; --step-0: 14px; --step-1: 16px; --step-2: 18px; --step-3: 22px; --step-4: 28px; --step-5: 40px; --s1: 6px; --s2: 10px; --s3: 14px; --s4: 18px; --s5: 24px; --s6: 34px; --s7: 44px; --focus: rgba(184,31,58,.32); --fieldBg: rgba(255,255,255,.98); --fieldBorder: rgba(18,18,20,.14); --cta: #b81f3a; --cta-hover: #a41833; --cta-press: #8f132b; --glass: rgba(255,255,255,.78); --glassHi: rgba(255,255,255,.92); --surface: linear-gradient(180deg, rgba(184,31,58,.045), rgba(255,255,255,.965)); --hdrH: 78px; --hdrH-sm: 66px; --safeB: env(safe-area-inset-bottom, 0px); --safeT: env(safe-area-inset-top, 0px); } *, *::before, *::after{ box-sizing: border-box; } html, body { height: 100%; } html{ text-size-adjust: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } body{ margin: 0; color: var(--ink); background: radial-gradient(1100px 520px at 18% -6%, rgba(184,31,58,.085), transparent 55%), radial-gradient(900px 520px at 88% 6%, rgba(0,0,0,.04), transparent 60%), var(--bg); font-family: var(--sans); font-size: var(--step-1); line-height: 1.66; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; font-synthesis: none; font-feature-settings: "kern" 1, "liga" 1; } img{ max-width: 100%; display: block; height: auto; } a{ color: inherit; text-decoration: none; } button, input, textarea, select{ font: inherit; } ::selection{ background: rgba(184,31,58,.20); color: var(--ink); } .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0,0,0,0); white-space:nowrap; border:0; } .heroTitle, .featureTitle, .cardTitle, .stripTitle, .latestTitle, .miniTitle, .postTitle{ word-break: normal; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 12px; } .skip{ position:absolute; left:-999px; top:10px; padding:10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r12); } .skip:focus{ left:10px; z-index: 9999; } .wrap{ width: min(var(--max), calc(100% - 44px)); margin-inline: auto; } .read{ width: min(var(--read), calc(100% - 44px)); margin-inline: auto; } .muted{ color: var(--muted); } hr{ border: 0; height: 1px; background: var(--line2); margin: var(--s5) 0; } .h2{ margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(20px, 2.1vw, 28px); line-height: 1.18; } .sub{ margin: var(--s2) 0 0; color: var(--muted); max-width: 74ch; font-size: var(--step-0); line-height: 1.75; } .mutedLink{ color: var(--muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .18s var(--ease); } .mutedLink:hover{ color: rgba(18,18,20,.86); } .pill, .tag{ display:inline-flex; align-items:center; gap: 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.88); font-size: var(--step--1); font-weight: 750; letter-spacing: .22px; text-transform: uppercase; user-select: none; } .pill{ padding: 6px 12px; } .tag{ padding: 4px 10px; } .section{ padding: var(--s6) 0 var(--s2); } .prose{ font-size: 16px; line-height: 1.85; } .prose p{ margin: 0 0 12px; } .prose p:last-child{ margin-bottom: 0; } .sectionHead{ display:flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .sectionHead > div{ min-width: 0; } .sectionHead .mutedLink{ flex: 0 0 auto; white-space: nowrap; align-self: flex-start; } .siteHeader{ position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line2); background: rgba(251,250,247,.90); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .25s var(--ease), border-color .25s var(--ease); } .headerWrap{ display:flex; align-items:center; justify-content: space-between; gap: var(--s4); padding: 18px 0; min-height: var(--hdrH); transition: padding .22s var(--ease), min-height .22s var(--ease); } .siteHeader.isShrink .headerWrap{ padding: 12px 0; min-height: var(--hdrH-sm); } .brand{ display:flex; align-items:center; gap: 12px; min-width: 0; line-height: 0; } .brandLogo{ height: 36px; width: auto; display:block; } .siteHeader.isShrink .brandLogo{ height: 32px; } .nav{ display:flex; align-items:center; gap: 10px; } .navLink{ position: relative; min-height: 44px; display:flex; align-items:center; padding: 10px 12px; border-radius: 999px; color: rgba(18,18,20,.82); font-weight: 850; font-size: 15px; letter-spacing: .14px; text-transform: uppercase; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); will-change: transform; } .navLink:hover{ background: rgba(255,255,255,.92); color: rgba(18,18,20,.94); transform: translateY(-1px); } .navLink.isActive{ color: rgba(18,18,20,.96); } .navLink.isActive::after{ content:""; position:absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 99px; background: var(--accent); } .hdrActions{ display:flex; align-items:center; gap: 10px; } .iconBtn{ width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.92); cursor: pointer; display:grid; place-items:center; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); will-change: transform; } .iconBtn:hover{ transform: translateY(-1px); box-shadow: var(--shadowS); background: rgba(255,255,255,.98); } .navToggle{ display:none; } @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){ .siteHeader{ background: rgba(251,250,247,.96); } } .footerCard, .surface{ border-radius: var(--r18); border: 1px solid var(--line); background: var(--surface); padding: 14px; box-shadow: var(--shadowS); } .footerCard .footerCard, .surface .surface{ background: rgba(255,255,255,.90); box-shadow: none; } .miniBtn{ height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(18,18,20,.14); background: var(--ink); color: #fff; font-weight: 950; letter-spacing: .16px; text-transform: uppercase; font-size: 12.5px; cursor: pointer; display:inline-flex; align-items:center; justify-content:center; gap: 10px; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease); will-change: transform; } .miniBtn:hover{ transform: translateY(-1px); box-shadow: var(--shadowS); background: #0f0f12; } .miniBtn:active{ transform: translateY(0); } .miniBtn.isBrand{ background: var(--cta); border-color: rgba(0,0,0,.08); box-shadow: 0 10px 26px rgba(184,31,58,.18), 0 2px 10px rgba(0,0,0,.06); } .miniBtn.isBrand:hover{ background: var(--cta-hover); box-shadow: 0 14px 34px rgba(184,31,58,.22), 0 6px 18px rgba(0,0,0,.08); } .miniBtn.isBrand:active{ background: var(--cta-press); } .miniBtn.isBrand:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(184,31,58,.22), 0 14px 34px rgba(184,31,58,.22), 0 6px 18px rgba(0,0,0,.08); } .miniForm{ margin-top: 12px; display:grid; grid-template-columns: 1fr auto; gap: 10px; } .miniInput{ width: 100%; height: 44px; border-radius: 999px; border: 1px solid var(--fieldBorder); background: var(--fieldBg); padding: 0 14px; font-weight: 650; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); } .miniInput::placeholder{ color: rgba(18,18,20,.45); } .miniInput:focus{ border-color: rgba(184,31,58,.30); box-shadow: 0 0 0 4px rgba(184,31,58,.10); } textarea.miniInput{ height: auto; min-height: 120px; padding: 12px 14px; border-radius: 18px; line-height: 1.75; resize: vertical; } .hero{ padding: var(--s5) 0 4px; } .heroGrid{ display:grid; grid-template-columns: 1.45fr .55fr; gap: var(--s4); align-items: start; } .heroCard{ overflow:hidden; border-radius: var(--r18); border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadowM); } .heroLink{ position: relative; display:block; border-radius: inherit; } .heroLink:focus-visible{ outline: 3px solid var(--focus); outline-offset: 4px; } .heroMedia{ position: relative; aspect-ratio: 16 / 9; overflow:hidden; background: #eee; } .heroMedia img{ width:100%; height:100%; object-fit: cover; transform: scale(1.02); transition: transform .55s var(--ease); filter: saturate(1.02) contrast(1.03); } .heroCard:hover .heroMedia img{ transform: scale(1.06); } .heroShade{ position:absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,.80) 100%), radial-gradient(900px 520px at 22% 75%, rgba(184,31,58,.14), transparent 60%); pointer-events:none; z-index: 1; } .heroBody{ position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 20px; border-radius: 0 0 var(--r18) var(--r18); color: #fff; z-index: 2; pointer-events: none; } .heroBody > *{ pointer-events: auto; position: relative; z-index: 2; } .heroBody::before{ content:""; position:absolute; inset: 0; border-radius: inherit; pointer-events:none; z-index: 0; background: radial-gradient(1200px 360px at 22% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 58%), radial-gradient(900px 340px at 82% 18%, rgba(184,31,58,.10), rgba(184,31,58,0) 62%), linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.20) 22%, rgba(0,0,0,.44) 58%, rgba(0,0,0,.66) 100%); } .heroMeta, .heroTitle, .heroExcerpt, .cta{ max-width: 760px; } .heroMeta{ display:flex; align-items:center; gap: 10px; color: rgba(255,255,255,.88); } .heroBody .pill{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.10); color: rgba(255,255,255,.92); } .heroTitle{ margin: 12px 0 10px; font-family: var(--serif); font-weight: 700; line-height: 1.06; font-size: clamp(28px, 3.1vw, 48px); text-shadow: 0 1px 2px rgba(0,0,0,.25); display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden; } .heroExcerpt{ margin: 0 0 14px; color: rgba(255,255,255,.86); font-size: var(--step-0); line-height: 1.75; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden; } .cta{ display:inline-flex; align-items:center; justify-content:center; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.10); color: rgba(255,255,255,.96); font-weight: 950; letter-spacing: .18px; text-transform: uppercase; font-size: 12px; transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease); will-change: transform; } .heroCard:hover .cta{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); transform: translateY(-1px); } .cta:active{ transform: translateY(0); } .latest{ border-radius: var(--r18); border: 1px solid var(--line); background: rgba(255,255,255,.94); box-shadow: var(--shadowS); overflow:hidden; display:flex; flex-direction: column; min-height: 0; } .latestHead{ display:flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: var(--s3) var(--s3) var(--s2); border-bottom: 1px solid var(--line2); } .latestList{ flex: 1; max-height: 360px; overflow:auto; padding: 8px; scroll-behavior: smooth; overscroll-behavior: contain; } .latestItem{ display:grid; gap: 6px; padding: 12px 12px; border-radius: var(--r12); border: 1px solid transparent; transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); will-change: transform; } .latestItem:hover{ background: rgba(184,31,58,.055); border-color: rgba(184,31,58,.14); transform: translateY(-1px); } .latestTag{ font-size: 11px; font-weight: 950; letter-spacing: .24px; text-transform: uppercase; color: var(--accent); } .latestTitle{ font-weight: 950; line-height: 1.22; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .latestTime{ font-size: 12px; color: var(--muted2); } .latestList::-webkit-scrollbar{ width: 10px; } .latestList::-webkit-scrollbar-thumb{ background: rgba(18,18,20,.10); border-radius: 999px; border: 3px solid rgba(255,255,255,0); background-clip: padding-box; } .latestList::-webkit-scrollbar-thumb:hover{ background: rgba(18,18,20,.18); } .miniSubscribe{ margin-top: 14px; } .miniSubscribe .anonCtaBtn{ width: 100%; justify-content: center; height: 46px; font-size: 14px; } .grid4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .card{ border-radius: var(--r14); border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadowS); overflow:hidden; transition: transform .22s var(--ease), box-shadow .22s var(--ease); will-change: transform; } .card:hover{ transform: translateY(-2px); box-shadow: var(--shadowM); } .cardMedia{ aspect-ratio: 4 / 3; overflow:hidden; background: #eee; } .cardMedia img{ width:100%; height:100%; object-fit: cover; transition: transform .55s var(--ease); filter: saturate(1.03) contrast(1.02); } .card:hover .cardMedia img{ transform: scale(1.06); } .cardBody{ padding: 12px 12px 14px; } .cardMeta{ display:flex; align-items:center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .cardTitle{ margin: 0; font-size: 15px; line-height: 1.28; font-weight: 950; letter-spacing: .05px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .card--pro{ position: relative; } .cardMedia--pro{ position: relative; } .cardChip{ position:absolute; left: 12px; top: 12px; z-index: 2; pointer-events: none; } .cardChipInner{ display:inline-flex; align-items:center; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 11px; font-weight: 950; letter-spacing: .18px; text-transform: uppercase; color: rgba(255,255,255,.96); background: rgba(18,18,20,.55); border: 1px solid rgba(255,255,255,.20); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 22px rgba(0,0,0,.10); } .cardExcerpt{ margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .strip{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .stripCard{ border-radius: var(--r14); overflow:hidden; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadowS); transition: transform .22s var(--ease), box-shadow .22s var(--ease); will-change: transform; } .stripCard:hover{ transform: translateY(-2px); box-shadow: var(--shadowM); } .stripMedia{ aspect-ratio: 16 / 10; overflow:hidden; background: #eee; } .stripMedia img{ width:100%; height:100%; object-fit: cover; transition: transform .55s var(--ease); filter: saturate(1.03) contrast(1.02); } .stripCard:hover .stripMedia img{ transform: scale(1.06); } .stripBody{ padding: 12px 12px 14px; } .stripTitle{ margin: 6px 0 0; font-size: 16px; line-height: 1.25; font-weight: 950; letter-spacing: .05px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .anonCta{ display:grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; padding: 18px; } .anonCtaText{ min-width: 0; } .anonCtaTitle{ font-size: clamp(20px, 2.0vw, 28px); } .anonCtaSub{ margin-top: 6px; max-width: 72ch; } .anonCtaBtn{ height: 40px; padding: 0 16px; font-size: 13px; border-radius: 999px; white-space: nowrap; background: var(--cta); border: 1px solid rgba(0,0,0,.08); color: #fff; font-weight: 900; letter-spacing: .14px; text-transform: uppercase; box-shadow: 0 10px 26px rgba(184,31,58,.18), 0 2px 10px rgba(0,0,0,.06); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); cursor: pointer; display:inline-flex; align-items:center; justify-content:center; will-change: transform; } .anonCtaBtn:hover{ background: var(--cta-hover); transform: translateY(-1px); box-shadow: 0 14px 34px rgba(184,31,58,.22), 0 6px 18px rgba(0,0,0,.08); } .anonCtaBtn:active{ background: var(--cta-press); transform: translateY(0); } .anonCtaBtn:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(184,31,58,.22), 0 14px 34px rgba(184,31,58,.22), 0 6px 18px rgba(0,0,0,.08); } .post{ padding-top: var(--s5); } .postTop{ display:flex; align-items:center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .postBack{ display:inline-flex; align-items:center; gap: 10px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(18,18,20,.10); background: rgba(255,255,255,.72); color: rgba(18,18,20,.92); transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease); will-change: transform; } .postBack:hover{ transform: translateY(-1px); background: rgba(255,255,255,.92); border-color: rgba(184,31,58,.22); box-shadow: var(--shadowS); } .postBackIco{ font-size: 18px; line-height: 1; } .postBackTxt{ font-weight: 800; letter-spacing: .12px; } .postHead{ margin-bottom: 14px; } .postTitle{ margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.22; max-width: 42ch; word-break: normal; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; } @media (max-width: 720px){ .postTitle{ font-size: clamp(20px, 5.2vw, 24px); line-height: 1.25; max-width: 100%; } } .postHero{ padding: 0; overflow: hidden; margin: 0; } .postHeroMedia{ position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 460px; overflow: hidden; background: rgba(18,18,20,.06); } .postHeroImg{ width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.01); filter: saturate(1.02) contrast(1.03); } .postHeroShade{ position:absolute; inset:0; background: radial-gradient(800px 300px at 18% 18%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,.16) 100%); pointer-events:none; } .postBody{ margin-top: 14px; padding: 18px; } .postProse{ max-width: 78ch; margin-inline: auto; font-size: 16px; line-height: 1.9; color: rgba(18,18,20,.92); } .postProse p{ margin: 0 0 14px; } .postProse p:last-child{ margin-bottom: 0; } .postBottom{ margin-top: 14px; } .postBottomInner{ display:flex; align-items:center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .shareBtn{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.78); color: rgba(18,18,20,.92); box-shadow: 0 8px 20px rgba(0,0,0,.06); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); will-change: transform; } .shareBtn svg{ display:block; fill: var(--accent); } .shareBtn:hover{ transform: translateY(-1px); background: #fff; border-color: rgba(184,31,58,.28); box-shadow: 0 14px 30px rgba(0,0,0,.08); } .shareBtn:active{ transform: translateY(0); } .shareBtn:focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(184,31,58,.20), 0 14px 30px rgba(0,0,0,.08); } .footer{ margin-top: 36px; border-top: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .footerGrid{ padding: 22px 0; display:grid; grid-template-columns: 1.1fr .9fr; gap: 14px; align-items: start; } .footerCol{ display:grid; gap:10px; min-width: 0; } .footerBrand{ display:inline-flex; align-items:center; line-height:0; margin-bottom: 6px; font-family: var(--serif); font-weight: 800; font-size: 18px; letter-spacing: .2px; } .footerLogo{ height: 28px; width: auto; display:block; } .footerText{ margin-top: 2px; color: var(--muted); max-width: 60ch; font-size: var(--step-0); line-height: 1.75; } .footerLinks{ margin-top: 10px; display:flex; flex-wrap: wrap; gap: 10px 14px; } .footerLinks a{ color: rgba(18,18,20,.72); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .18s var(--ease); } .footerLinks a:hover{ color: rgba(18,18,20,.92); } .footerLinks--meta{ margin-top: 6px; opacity: .95; } .footerLinks--meta a{ font-size: 13px; color: rgba(18,18,20,.62); } .footerLinks--meta a:hover{ color: rgba(18,18,20,.86); } .footerAdmin{ opacity:.60; } .footerCardTitle{ margin: 0; font-family: var(--serif); font-weight: 800; font-size: 16px; letter-spacing: .18px; } .footerCardText{ margin: 6px 0 0; color: var(--muted); line-height: 1.65; font-size: 14px; } .footerNote{ margin-top:10px; font-size:12px; line-height:1.6; } .footerBottom{ padding: 14px 0 18px; border-top: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; } .footerBottomLeft{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; } .footerBottomRight{ font-style: normal; } .footerBottomRight a{ color: rgba(18,18,20,.72); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .footerBottomRight a:hover{ color: rgba(18,18,20,.92); } @media (max-width: 980px){ .heroGrid{ grid-template-columns: 1fr; } .latestList{ max-height: 280px; } .grid4{ grid-template-columns: repeat(2, 1fr); } .strip{ grid-template-columns: 1fr; } .footerGrid{ grid-template-columns: 1fr; } } @media (max-width: 720px){ .wrap{ width: min(var(--max), calc(100% - 28px)); } .read{ width: min(var(--read), calc(100% - 28px)); } .siteHeader{ position: sticky; top: 0; } .nav{ display:none; position: absolute; left: 14px; right: 14px; top: calc(var(--hdrH) - 6px); padding: 10px; border-radius: var(--r18); border: 1px solid var(--line); background: rgba(255,255,255,.98); box-shadow: var(--shadowM); flex-direction: column; align-items: stretch; gap: 6px; z-index: 60; } .siteHeader.isShrink .nav{ top: calc(var(--hdrH-sm) - 6px); } .nav.isOpen{ display:flex; } .navLink{ padding: 12px 12px; border-radius: 14px; } .navToggle{ display:grid; } .grid4{ grid-template-columns: 1fr; } .heroMedia{ aspect-ratio: 4 / 5; } .heroBody{ padding: 14px 14px 12px; } .heroMeta{ gap: 8px; font-size: 12px; } .heroTitle{ font-size: clamp(18px, 5.4vw, 24px); line-height: 1.12; margin: 10px 0 10px; -webkit-line-clamp: 2; } .heroExcerpt{ font-size: 12.5px; line-height: 1.55; margin: 0 0 10px; -webkit-line-clamp: 1; opacity: .88; } .heroBody .cta{ width: 100%; justify-content: center; height: 42px; font-size: 12px; } .anonCta{ grid-template-columns: 1fr; } .anonCtaBtn{ width: 100%; justify-content: center; height: 44px; } .postBottomInner{ flex-direction: column; align-items: stretch; } .postBottomInner .miniBtn, .postBottomInner .shareBtn{ width: 100%; justify-content: center; } .miniForm{ grid-template-columns: 1fr; } .miniBtn{ width: 100%; } .footer{ padding-bottom: calc(8px + var(--safeB)); } .brandLogo{ height: 32px; } .siteHeader.isShrink .brandLogo{ height: 30px; } .footerLogo{ height: 26px; } } @media (hover: none){ .heroMedia img, .cardMedia img, .stripMedia img{ transition: none; } .card:hover, .stripCard:hover{ transform: none; box-shadow: var(--shadowS); } .navLink:hover{ transform: none; } .iconBtn:hover{ transform: none; box-shadow: none; } } @media (prefers-reduced-motion: reduce){ *{ scroll-behavior: auto !important; } .card, .stripCard, .iconBtn, .navLink, .heroMedia img, .cardMedia img, .stripMedia img, .miniBtn, .cta, .shareBtn, .anonCtaBtn, .postBack{ transition: none !important; } } .forumHero{ padding: 18px; } .forumHeroTop{ display:flex; align-items:flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .forumHeroTitle{ font-size: clamp(26px, 2.6vw, 36px); line-height: 1.06; letter-spacing: .1px; } .forumHeroSub{ margin-top: 8px; max-width: 74ch; } /* Badges */ .forumBadges{ margin-top: 12px; display:flex; gap: 8px; flex-wrap: wrap; } .forumBadge{ display:inline-flex; align-items:center; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.86); font-size: 12px; font-weight: 850; letter-spacing: .12px; } .forumHeroActions{ display:flex; align-items:center; gap: 12px; flex-wrap: wrap; } .forumHeroActions .miniBtn{ text-decoration:none; } .forumRules{ margin-top: 12px; font-size: 12px; line-height: 1.65; } .flash{ margin: 12px 0; } .flash--ok{ border-color: rgba(16,185,129,.22); background: linear-gradient(180deg, rgba(16,185,129,.06), rgba(255,255,255,.94)); } .flash--err{ border-color: rgba(220,38,38,.25); background: linear-gradient(180deg, rgba(220,38,38,.06), rgba(255,255,255,.94)); } .forumComposer{ padding: 16px; } .forumH{ font-size: 18px; line-height: 1.15; } .forumForm{ display:grid; gap: 12px; margin-top: 10px; } .forumLabel{ display:grid; gap: 6px; } .forumLabelTxt{ font-size: 12px; letter-spacing: .06px; } .forumInput{ width:100%; } .forumTextarea{ min-height: 160px; border-radius: 18px; padding: 12px 14px; line-height: 1.75; resize: vertical; } .forumComposerRow{ display:flex; align-items:center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 2px; } .forumHint{ font-size: 12px; line-height: 1.6; max-width: 72ch; } .forumFeed{ padding: 16px; } .forumFeedHead{ display:flex; align-items:baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .forumFeedNote{ font-size: 12px; } .forumFeedList{ display:grid; gap: 10px; margin-top: 12px; } .forumItem{ border: 1px solid rgba(18,18,20,.08); background: rgba(255,255,255,.78); box-shadow: 0 8px 18px rgba(0,0,0,.05); } .latestItem.forumItem:hover{ background: rgba(255,255,255,.92); border-color: rgba(184,31,58,.18); box-shadow: 0 14px 30px rgba(0,0,0,.07); } .forumExcerpt{ font-size: 13px; line-height: 1.6; } .forumEmpty{ border: 1px dashed var(--line); border-radius: var(--r14); padding: 14px; background: rgba(255,255,255,.70); color: var(--muted); line-height: 1.7; } @media (max-width: 720px){ .forumHero{ padding: 16px; } .forumComposer{ padding: 14px; } .forumFeed{ padding: 14px; } .forumHeroActions{ width: 100%; justify-content: space-between; } .forumHeroActions .miniBtn{ width: 100%; justify-content: center; } }