/* ========================================================================== BLOG — Designed to feel like a seamless extension of the healing site. Shares the site's palette, type, gradient language and easing curves. Light + Dark theme. RTL-first, LTR-safe. Polished hovers + micro-motion. Theme is driven by `data-theme="dark"|"light"` on . ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); /* ===== Mode-agnostic tokens + Light theme (default) ===== Light palette mirrors the main site (styles.css) for one coherent brand. */ /* ===== THEME SYSTEM — TWO AXES (mirrors styles.css) ===== gender: data-gender="girl"(default)|"boy" × light/dark: data-theme="dark" Non-colour tokens (motion/geometry) live in the base :root; each of the 4 colour blocks is self-contained. Tints use rgb(from var(--blog-tint-*) …) so they re-hue per combo. Order: girl-light, boy-light, girl-dark, boy-dark. */ /* ---------- Shared non-colour tokens + GIRL · LIGHT (default) — lavender/orchid ---------- */ :root, :root[data-gender="girl"] { /* Motion */ --blog-ease: cubic-bezier(0.4, 0, 0.2, 1); --blog-ease-reveal: cubic-bezier(0.22, 1, 0.36, 1); --blog-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --blog-t: 0.32s; --blog-t-slow: 0.5s; /* Geometry */ --blog-font: 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif; --blog-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; --blog-radius-sm: 12px; --blog-radius: 22px; --blog-radius-lg: 28px; --blog-radius-pill: 999px; --blog-max-width: 1200px; --blog-article-width: 760px; /* Brand — girl light */ --blog-primary: #9333EA; --blog-rose: #DB2777; --blog-tint-primary: #C084FC; /* hue source for translucent washes/glows */ --blog-tint-accent: #F472B6; --blog-pill-ink: #7355A0; /* brand ink on the white CTA pill */ --blog-pill-ink-hover: #5A3D85; --blog-gradient: linear-gradient(135deg, #9333EA 0%, #DB2777 100%); --blog-gradient-soft: linear-gradient(135deg, rgb(from var(--blog-tint-primary) r g b / 0.08), rgb(from var(--blog-tint-accent) r g b / 0.10)); --blog-gradient-text: linear-gradient(120deg, #9333EA 0%, #DB2777 100%); /* Surfaces */ --blog-bg: #F8F4FF; --blog-surface: #FFFFFF; --blog-surface-2: #EFE5FE; --blog-surface-hover: #EFE5FE; --blog-card-bg: #FFFFFF; --blog-border: #E6D8F7; --blog-border-strong: #C9B3E0; /* Text */ --blog-text: #4C1D95; --blog-text-secondary: #6E5398; --blog-text-muted: #8B7BA6; --blog-heading: #3B1576; /* Code */ --blog-code-bg: rgb(from var(--blog-tint-primary) r g b / 0.10); --blog-code-text: #6D28D9; --blog-toc-bg: rgba(255, 255, 255, 0.7); /* Header */ --blog-header-bg: rgba(248, 244, 255, 0.85); --blog-header-border: rgba(230, 216, 247, 0.8); /* Shadows */ --blog-shadow-sm: 0 4px 18px rgba(42, 31, 54, 0.07), 0 1px 3px rgba(42, 31, 54, 0.04); --blog-shadow-md: 0 10px 30px rgba(42, 31, 54, 0.11), 0 2px 6px rgba(42, 31, 54, 0.06); --blog-shadow-lg: 0 24px 48px rgba(42, 31, 54, 0.18); --blog-shadow-cta: 0 6px 20px rgb(from var(--blog-tint-primary) r g b / 0.28); --blog-shadow-glow: 0 10px 40px rgb(from var(--blog-tint-primary) r g b / 0.18), 0 4px 18px rgb(from var(--blog-tint-accent) r g b / 0.16); /* Ambient blobs */ --blog-blob-opacity: 0.32; --blog-blob-purple: rgb(from var(--blog-tint-primary) r g b / 0.30); --blog-blob-rose: rgb(from var(--blog-tint-accent) r g b / 0.26); --blog-header-shadow: 0 6px 24px rgba(42, 31, 54, 0.08); --blog-input-bg: rgba(255, 255, 255, 0.55); --blog-tint-soft: rgb(from var(--blog-tint-primary) r g b / 0.08); } /* ---------- BOY · LIGHT — sky/cyan ---------- */ :root[data-gender="boy"] { --blog-primary: #2563EB; --blog-rose: #0891B2; --blog-tint-primary: #3B82F6; --blog-tint-accent: #06B6D4; --blog-pill-ink: #1D4ED8; --blog-pill-ink-hover: #1E40AF; --blog-gradient: linear-gradient(135deg, #2563EB 0%, #0891B2 100%); --blog-gradient-soft: linear-gradient(135deg, rgb(from var(--blog-tint-primary) r g b / 0.08), rgb(from var(--blog-tint-accent) r g b / 0.10)); --blog-gradient-text: linear-gradient(120deg, #2563EB 0%, #0891B2 100%); --blog-bg: #EFF5FF; --blog-surface: #FFFFFF; --blog-surface-2: #DCE9FB; --blog-surface-hover: #DCE9FB; --blog-card-bg: #FFFFFF; --blog-border: #CFE0F6; --blog-border-strong: #A9C5EC; --blog-text: #0F172A; --blog-text-secondary: #475569; --blog-text-muted: #64748B; --blog-heading: #0B1220; --blog-code-bg: rgb(from var(--blog-tint-primary) r g b / 0.10); --blog-code-text: #1D4ED8; --blog-toc-bg: rgba(255, 255, 255, 0.7); --blog-header-bg: rgba(239, 245, 255, 0.85); --blog-header-border: rgba(207, 224, 246, 0.8); --blog-shadow-sm: 0 4px 18px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05); --blog-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.07); --blog-shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.18); --blog-shadow-cta: 0 6px 20px rgb(from var(--blog-tint-primary) r g b / 0.28); --blog-shadow-glow: 0 10px 40px rgb(from var(--blog-tint-primary) r g b / 0.18), 0 4px 18px rgb(from var(--blog-tint-accent) r g b / 0.16); --blog-blob-opacity: 0.32; --blog-blob-purple: rgb(from var(--blog-tint-primary) r g b / 0.30); --blog-blob-rose: rgb(from var(--blog-tint-accent) r g b / 0.26); --blog-header-shadow: 0 6px 24px rgba(15, 23, 42, 0.08); --blog-input-bg: rgba(255, 255, 255, 0.55); --blog-tint-soft: rgb(from var(--blog-tint-primary) r g b / 0.08); } /* ---------- GIRL · DARK — night lavender (also the default dark fallback) ---------- */ :root[data-gender="girl"][data-theme="dark"], :root[data-theme="dark"] { --blog-primary: #B895E0; --blog-rose: #F0AFC6; --blog-tint-primary: #B895E0; --blog-tint-accent: #F0AFC6; --blog-pill-ink: #7355A0; --blog-pill-ink-hover: #5A3D85; --blog-gradient: linear-gradient(135deg, #B895E0 0%, #F0AFC6 100%); --blog-gradient-soft: linear-gradient(135deg, rgb(from var(--blog-tint-primary) r g b / 0.14), rgb(from var(--blog-tint-accent) r g b / 0.16)); --blog-gradient-text: linear-gradient(120deg, #B895E0 0%, #F0AFC6 100%); --blog-bg: #14101A; --blog-surface: #1E1828; --blog-surface-2: #2A2236; --blog-surface-hover: #2D2438; --blog-card-bg: #1F1928; --blog-border: #342B43; --blog-border-strong: #4A3E5C; --blog-text: #E8E0F0; --blog-text-secondary: #B0A4BD; --blog-text-muted: #7E7290; --blog-heading: #FFFFFF; --blog-code-bg: rgb(from var(--blog-tint-primary) r g b / 0.12); --blog-code-text: #D4B8F0; --blog-toc-bg: rgba(31, 25, 40, 0.65); --blog-header-bg: rgba(20, 16, 26, 0.78); --blog-header-border: rgba(74, 62, 92, 0.6); --blog-shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25); --blog-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3); --blog-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6); --blog-shadow-cta: 0 6px 20px rgb(from var(--blog-tint-primary) r g b / 0.40); --blog-shadow-glow: 0 10px 40px rgb(from var(--blog-tint-primary) r g b / 0.32), 0 4px 18px rgb(from var(--blog-tint-accent) r g b / 0.22); --blog-blob-opacity: 0.5; --blog-blob-purple: rgb(from var(--blog-tint-primary) r g b / 0.40); --blog-blob-rose: rgb(from var(--blog-tint-accent) r g b / 0.32); --blog-header-shadow: 0 6px 24px rgba(0, 0, 0, 0.55); --blog-input-bg: rgba(255, 255, 255, 0.04); --blog-tint-soft: rgb(from var(--blog-tint-primary) r g b / 0.10); } /* ---------- BOY · DARK — deep slate / electric blue ---------- */ :root[data-gender="boy"][data-theme="dark"] { --blog-primary: #60A5FA; --blog-rose: #22D3EE; --blog-tint-primary: #60A5FA; --blog-tint-accent: #22D3EE; --blog-pill-ink: #1D4ED8; --blog-pill-ink-hover: #1E40AF; --blog-gradient: linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%); --blog-gradient-soft: linear-gradient(135deg, rgb(from var(--blog-tint-primary) r g b / 0.14), rgb(from var(--blog-tint-accent) r g b / 0.16)); --blog-gradient-text: linear-gradient(120deg, #60A5FA 0%, #22D3EE 100%); --blog-bg: #0F172A; --blog-surface: #1E293B; --blog-surface-2: #273449; --blog-surface-hover: #2F3E55; --blog-card-bg: #1E293B; --blog-border: #334155; --blog-border-strong: #475569; --blog-text: #F8FAFC; --blog-text-secondary: #CBD5E1; --blog-text-muted: #94A3B8; --blog-heading: #FFFFFF; --blog-code-bg: rgb(from var(--blog-tint-primary) r g b / 0.14); --blog-code-text: #93C5FD; --blog-toc-bg: rgba(30, 41, 59, 0.65); --blog-header-bg: rgba(15, 23, 42, 0.80); --blog-header-border: rgba(51, 65, 85, 0.6); --blog-shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30); --blog-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35); --blog-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65); --blog-shadow-cta: 0 6px 20px rgb(from var(--blog-tint-primary) r g b / 0.40); --blog-shadow-glow: 0 10px 40px rgb(from var(--blog-tint-primary) r g b / 0.32), 0 4px 18px rgb(from var(--blog-tint-accent) r g b / 0.22); --blog-blob-opacity: 0.5; --blog-blob-purple: rgb(from var(--blog-tint-primary) r g b / 0.40); --blog-blob-rose: rgb(from var(--blog-tint-accent) r g b / 0.32); --blog-header-shadow: 0 6px 24px rgba(0, 0, 0, 0.6); --blog-input-bg: rgba(255, 255, 255, 0.05); --blog-tint-soft: rgb(from var(--blog-tint-primary) r g b / 0.10); } /* ===== Reset ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--blog-font); font-size: 17px; line-height: 1.7; color: var(--blog-text); background: var(--blog-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--blog-t-slow) var(--blog-ease), color var(--blog-t-slow) var(--blog-ease); overflow-x: hidden; position: relative; min-height: 100vh; } /* Soft ambient halo blobs in the background — same atmospheric feel as the site */ body::before, body::after { content: ''; position: fixed; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: 0; will-change: transform; transition: opacity var(--blog-t-slow) var(--blog-ease); } body::before { width: 520px; height: 520px; background: radial-gradient(circle, var(--blog-blob-purple) 0%, transparent 70%); top: -180px; inset-inline-end: -160px; animation: blogDriftA 32s ease-in-out infinite alternate; opacity: var(--blog-blob-opacity); } body::after { width: 460px; height: 460px; background: radial-gradient(circle, var(--blog-blob-rose) 0%, transparent 70%); bottom: -180px; inset-inline-start: -140px; animation: blogDriftB 38s ease-in-out infinite alternate-reverse; opacity: var(--blog-blob-opacity); } @keyframes blogDriftA { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, 40px) scale(1.12); } } @keyframes blogDriftB { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-40px, -50px) scale(1.18); } } img { max-width: 100%; height: auto; display: block; } a { color: var(--blog-primary); text-decoration: none; transition: color var(--blog-t) var(--blog-ease); } a:hover { color: var(--blog-rose); } :focus-visible { outline: 3px solid rgb(from var(--blog-tint-primary) r g b / 0.4); outline-offset: 2px; border-radius: 6px; } ::selection { background: rgb(from var(--blog-tint-primary) r g b / 0.25); color: var(--blog-heading); } /* ===== Container ===== */ .blog-container { max-width: var(--blog-max-width); margin-inline: auto; padding: 0 1.5rem; position: relative; z-index: 1; } /* ===== Reading-progress bar ===== */ .blog-progress { position: fixed; top: 0; inset-inline-start: 0; z-index: 200; height: 3px; width: 0%; background: var(--blog-gradient); box-shadow: 0 0 14px rgb(from var(--blog-tint-accent) r g b / 0.55); transition: width 0.1s linear; pointer-events: none; } /* ============================================================ HEADER ============================================================ */ .blog-header { position: sticky; top: 0; z-index: 100; background: var(--blog-header-bg); backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%); border-bottom: 1px solid var(--blog-header-border); transition: background var(--blog-t-slow) var(--blog-ease), box-shadow var(--blog-t-slow) var(--blog-ease), border-color var(--blog-t-slow) var(--blog-ease); } .blog-header.scrolled { box-shadow: var(--blog-header-shadow); } .blog-header-inner { display: flex; align-items: center; gap: 1.5rem; height: 72px; } .blog-logo { display: inline-flex; align-items: center; gap: 12px; font-size: 1.18rem; font-weight: 700; color: var(--blog-heading); white-space: nowrap; letter-spacing: -0.005em; flex-shrink: 0; transition: color var(--blog-t) var(--blog-ease), transform var(--blog-t) var(--blog-ease); } .blog-logo::before { content: ''; width: 64px; height: 64px; border-radius: 9px; background: url('/_uploads/IMG_1808.webp') center/cover no-repeat; flex-shrink: 0; } .blog-logo:hover { color: var(--blog-primary); transform: translateY(-1px); } .blog-nav { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; flex: 1; overflow: hidden; } .blog-nav a { position: relative; padding: 8px 14px; border-radius: var(--blog-radius-pill); font-size: 0.94rem; font-weight: 600; color: var(--blog-text-secondary); white-space: nowrap; transition: color var(--blog-t) var(--blog-ease), background var(--blog-t) var(--blog-ease); } .blog-nav a::after { content: ''; position: absolute; inset-inline-start: 14px; inset-inline-end: 14px; bottom: 4px; height: 2px; background: var(--blog-gradient); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform var(--blog-t) var(--blog-ease); } .blog-nav a:hover { color: var(--blog-text); } .blog-nav a:hover::after, .blog-nav a.active::after { transform: scaleX(1); } .blog-nav a.active { color: var(--blog-primary); } .blog-header-actions { display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0; } /* Search */ .blog-search { display: flex; align-items: center; background: var(--blog-input-bg); border: 1.5px solid var(--blog-border); border-radius: var(--blog-radius-pill); overflow: hidden; transition: border-color var(--blog-t) var(--blog-ease), box-shadow var(--blog-t) var(--blog-ease), background var(--blog-t) var(--blog-ease); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .blog-search:focus-within { border-color: var(--blog-primary); box-shadow: 0 0 0 4px rgb(from var(--blog-tint-primary) r g b / 0.14); } .blog-search-input { border: none; outline: none; background: none; padding: 0.5rem 1rem; font-size: 0.92rem; color: var(--blog-text); width: 200px; font-family: inherit; } .blog-search-input::placeholder { color: var(--blog-text-muted); } .blog-search-btn { background: none; border: none; padding: 0.5rem 0.85rem; color: var(--blog-text-secondary); cursor: pointer; display: flex; align-items: center; transition: color var(--blog-t) var(--blog-ease), background var(--blog-t) var(--blog-ease); } .blog-search-btn:hover { color: var(--blog-primary); } /* Theme toggle — pill style, matches mobile toggle in proportions, sun/moon icon swap */ .blog-theme-toggle { background: var(--blog-input-bg); border: 1.5px solid var(--blog-border); width: 40px; height: 40px; color: var(--blog-text-secondary); border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color var(--blog-t) var(--blog-ease), background var(--blog-t) var(--blog-ease), border-color var(--blog-t) var(--blog-ease), transform var(--blog-t) var(--blog-ease); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .blog-theme-toggle:hover { color: var(--blog-primary); border-color: var(--blog-primary); transform: translateY(-1px); } .blog-theme-toggle:active { transform: translateY(0); } .blog-theme-toggle .icon-sun, .blog-theme-toggle .icon-moon { transition: opacity var(--blog-t) var(--blog-ease), transform var(--blog-t) var(--blog-ease); } /* Light mode (default) shows the moon (click → switch to dark) */ .blog-theme-toggle .icon-moon { display: inline-block; } .blog-theme-toggle .icon-sun { display: none; } /* Dark mode shows the sun (click → switch to light) */ [data-theme="dark"] .blog-theme-toggle .icon-moon { display: none; } [data-theme="dark"] .blog-theme-toggle .icon-sun { display: inline-block; } /* Mobile toggle */ .blog-mobile-toggle { display: none; background: var(--blog-input-bg); border: 1.5px solid var(--blog-border); width: 40px; height: 40px; color: var(--blog-text); border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; transition: all var(--blog-t) var(--blog-ease); } .blog-mobile-toggle:hover { border-color: var(--blog-primary); color: var(--blog-primary); } @media (max-width: 880px) { .blog-mobile-toggle { display: inline-flex; } .blog-nav { position: fixed; inset-inline-start: 0; inset-inline-end: 0; top: 72px; background: var(--blog-header-bg); backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%); border-bottom: 1px solid transparent; flex-direction: column; align-items: stretch; gap: 0; max-height: 0; overflow: hidden; padding: 0 1.5rem; transition: max-height 0.4s var(--blog-ease), padding 0.4s var(--blog-ease), border-color 0.4s var(--blog-ease); } .blog-nav.open { max-height: 80vh; padding: 0.5rem 1.5rem 1.5rem; border-bottom-color: var(--blog-border); box-shadow: var(--blog-shadow-md); } .blog-nav a { padding: 14px 0; border-bottom: 1px solid var(--blog-border); border-radius: 0; font-size: 1.02rem; opacity: 0; transform: translateY(-8px); transition: opacity 0.3s var(--blog-ease), transform 0.3s var(--blog-ease), color var(--blog-t) var(--blog-ease); } .blog-nav a::after { display: none; } .blog-nav.open a { opacity: 1; transform: translateY(0); } .blog-nav.open a:nth-child(1) { transition-delay: 0.05s; } .blog-nav.open a:nth-child(2) { transition-delay: 0.09s; } .blog-nav.open a:nth-child(3) { transition-delay: 0.13s; } .blog-nav.open a:nth-child(4) { transition-delay: 0.17s; } .blog-nav.open a:nth-child(5) { transition-delay: 0.21s; } .blog-nav.open a:nth-child(6) { transition-delay: 0.25s; } .blog-nav.open a:nth-child(7) { transition-delay: 0.29s; } .blog-search-input { width: 140px; } } @media (max-width: 560px) { .blog-search-input { width: 110px; } .blog-header-inner { gap: 0.6rem; } } /* ============================================================ MAIN ============================================================ */ .blog-main { min-height: calc(100vh - 72px - 120px); padding: 3rem 0 4rem; position: relative; z-index: 1; } /* ============================================================ GRID — article cards ============================================================ */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.75rem; } @media (max-width: 768px) { .blog-grid { grid-template-columns: 1fr; } } /* ===== Card ===== */ .blog-card { position: relative; background: var(--blog-card-bg); border: 1px solid var(--blog-border); border-radius: var(--blog-radius); overflow: hidden; box-shadow: var(--blog-shadow-sm); transition: transform 0.45s var(--blog-ease-reveal), box-shadow 0.45s var(--blog-ease-reveal), border-color 0.45s var(--blog-ease-reveal); isolation: isolate; } .blog-card::before { /* gradient ring on hover */ content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--blog-gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.45s var(--blog-ease-reveal); pointer-events: none; z-index: 2; } .blog-card:hover { transform: translateY(-6px); box-shadow: var(--blog-shadow-md); border-color: transparent; } .blog-card:hover::before { opacity: 1; } .blog-card-image { aspect-ratio: 16/9; overflow: hidden; background: var(--blog-gradient-soft); position: relative; } .blog-card-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(42, 31, 54, 0.25) 100%); opacity: 0; transition: opacity 0.45s var(--blog-ease); pointer-events: none; } .blog-card:hover .blog-card-image::after { opacity: 1; } .blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--blog-ease-reveal); } .blog-card:hover .blog-card-image img { transform: scale(1.07); } .blog-card-image--placeholder { display: flex; align-items: center; justify-content: center; color: rgb(from var(--blog-tint-primary) r g b / 0.4); background: radial-gradient(circle at 30% 30%, rgb(from var(--blog-tint-accent) r g b / 0.30) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgb(from var(--blog-tint-primary) r g b / 0.30) 0%, transparent 60%), var(--blog-gradient-soft); } .blog-card-image--placeholder svg { width: 56px; height: 56px; opacity: 0.6; } .blog-card-body { padding: 1.5rem 1.5rem 1.4rem; } .blog-card-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.85rem; font-size: 0.78rem; } .blog-card-category { display: inline-block; background: rgb(from var(--blog-tint-primary) r g b / 0.10); color: var(--blog-primary); padding: 0.25rem 0.7rem; border-radius: var(--blog-radius-pill); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; transition: all var(--blog-t) var(--blog-ease); } .blog-card-category:hover { background: var(--blog-primary); color: #fff; } .blog-card-featured { display: inline-flex; align-items: center; gap: 4px; background: var(--blog-gradient); color: #fff; padding: 0.25rem 0.7rem; border-radius: var(--blog-radius-pill); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: 0 4px 14px rgb(from var(--blog-tint-primary) r g b / 0.35); } .blog-card-featured::before { content: '★'; font-size: 0.8em; line-height: 1; } .blog-card-date { color: var(--blog-text-muted); font-weight: 500; } .blog-card-title { font-size: 1.22rem; font-weight: 700; line-height: 1.35; color: var(--blog-heading); letter-spacing: -0.005em; margin-bottom: 0.65rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-card-title a { color: inherit; background-image: linear-gradient(120deg, var(--blog-primary), var(--blog-rose)); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.4s var(--blog-ease-reveal), color var(--blog-t) var(--blog-ease); } .blog-card:hover .blog-card-title a { background-size: 100% 2px; color: var(--blog-primary); } .blog-card-excerpt { font-size: 0.96rem; color: var(--blog-text-secondary); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 1rem; } .blog-card-footer { display: flex; align-items: center; gap: 0.9rem; font-size: 0.8rem; color: var(--blog-text-muted); padding-top: 0.9rem; border-top: 1px dashed var(--blog-border); font-weight: 500; } .blog-card-reading, .blog-card-views { display: inline-flex; align-items: center; gap: 6px; } .blog-card-reading::before, .blog-card-views::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--blog-rose); } .blog-card-reading::before { background: var(--blog-primary); } /* ===== Filter Bar ===== */ .blog-filter-bar { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1.3rem; background: var(--blog-gradient-soft); border: 1px solid rgb(from var(--blog-tint-primary) r g b / 0.18); border-radius: var(--blog-radius-pill); margin-bottom: 2rem; font-size: 0.95rem; color: var(--blog-text); box-shadow: var(--blog-shadow-sm); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .blog-filter-label { font-weight: 700; color: var(--blog-primary); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; } .blog-filter-bar strong { color: var(--blog-heading); font-weight: 700; } .blog-filter-clear { margin-inline-start: auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.05); color: var(--blog-text-secondary); font-size: 1.15rem; line-height: 1; border: 1px solid var(--blog-border); cursor: pointer; transition: all var(--blog-t) var(--blog-ease); } .blog-filter-clear:hover { background: var(--blog-primary); color: #fff; transform: rotate(90deg); border-color: var(--blog-primary); } /* ===== Empty / 404 ===== */ .blog-empty { text-align: center; padding: 5rem 2rem; color: var(--blog-text-muted); background: var(--blog-surface); border: 1px dashed var(--blog-border); border-radius: var(--blog-radius-lg); } /* ===== Pagination ===== */ .blog-pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem; flex-wrap: wrap; } .blog-page-btn { min-width: 42px; height: 42px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--blog-radius-pill); font-size: 0.9rem; font-weight: 600; color: var(--blog-text-secondary); background: var(--blog-surface); border: 1.5px solid var(--blog-border); transition: all var(--blog-t) var(--blog-ease); } .blog-page-btn:hover { border-color: var(--blog-primary); color: var(--blog-primary); transform: translateY(-1px); } .blog-page-btn.active { background: var(--blog-gradient); color: #fff; border-color: transparent; box-shadow: var(--blog-shadow-cta); } /* ============================================================ ARTICLE PAGE ============================================================ */ .blog-article { max-width: var(--blog-article-width); margin: 0 auto; } /* Article header */ .blog-article-header { text-align: center; margin-bottom: 2.5rem; padding-bottom: 0.5rem; position: relative; } .blog-article-meta { display: flex; align-items: center; justify-content: center; gap: 0.85rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--blog-text-muted); margin-bottom: 1.4rem; } .blog-article-meta > * { display: inline-flex; align-items: center; gap: 6px; } .blog-article-meta time::before, .blog-article-reading::before, .blog-article-views::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--blog-text-muted); margin-inline-end: 4px; opacity: 0.7; } .blog-article-meta a { background: rgb(from var(--blog-tint-primary) r g b / 0.10); color: var(--blog-primary); padding: 0.3rem 0.85rem; border-radius: var(--blog-radius-pill); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; transition: all var(--blog-t) var(--blog-ease); } .blog-article-meta a:hover { background: var(--blog-primary); color: #fff; } .blog-article-title { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.12; color: var(--blog-heading); letter-spacing: -0.02em; margin-bottom: 0.85rem; max-width: 24ch; margin-inline: auto; } .blog-article-title em { font-style: italic; font-weight: 700; background: var(--blog-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .blog-article-author { font-size: 0.96rem; color: var(--blog-text-secondary); font-weight: 500; } .blog-article-author::after { content: ''; display: block; width: 60px; height: 2px; background: var(--blog-gradient); border-radius: 2px; margin: 1.2rem auto 0; opacity: 0.75; } /* Featured marker */ .blog-article.is-featured .blog-article-title::before { content: '✦ Featured'; display: inline-block; font-size: 0.74rem; font-weight: 700; color: var(--blog-primary); background: rgb(from var(--blog-tint-primary) r g b / 0.10); padding: 6px 14px; border-radius: var(--blog-radius-pill); letter-spacing: 0.16em; text-transform: uppercase; font-style: normal; margin-bottom: 1.2rem; -webkit-text-fill-color: var(--blog-primary); } /* Hero image */ .blog-article-image-wrap { margin-bottom: 3rem; border-radius: var(--blog-radius-lg); overflow: hidden; box-shadow: var(--blog-shadow-md); position: relative; isolation: isolate; } .blog-article-image-wrap:empty { display: none; } .blog-article-image-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgba(42, 31, 54, 0.10) 100%); pointer-events: none; } .blog-article-image { width: 100%; aspect-ratio: 21/9; object-fit: cover; transition: transform 1.2s var(--blog-ease-reveal); } .blog-article-image-wrap:hover .blog-article-image { transform: scale(1.03); } /* Article layout w/ TOC */ .blog-article-layout { position: relative; } /* ============================================================ TOC ============================================================ */ .blog-toc { display: none; } @media (min-width: 1100px) { .blog-article { max-width: 1180px; } .blog-article-layout { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; } .blog-toc { display: block; position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; padding: 1.3rem 1.2rem; background: var(--blog-toc-bg); border-radius: var(--blog-radius); border: 1px solid var(--blog-border); box-shadow: var(--blog-shadow-sm); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } } .blog-toc-title { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--blog-primary); margin-bottom: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--blog-border); } .blog-toc nav a { display: block; padding: 0.45rem 0.85rem; margin-bottom: 2px; font-size: 0.86rem; color: var(--blog-text-secondary); line-height: 1.4; border-inline-start: 2px solid transparent; border-radius: 0 8px 8px 0; transition: all var(--blog-t) var(--blog-ease); } [dir="ltr"] .blog-toc nav a { border-radius: 8px 0 0 8px; } .blog-toc nav a:hover { color: var(--blog-primary); background: rgb(from var(--blog-tint-primary) r g b / 0.06); border-color: var(--blog-rose); } .blog-toc nav a.active { color: var(--blog-primary); background: rgb(from var(--blog-tint-primary) r g b / 0.10); border-color: var(--blog-primary); font-weight: 600; } .blog-toc nav a.toc-h3 { padding-inline-start: 1.6rem; font-size: 0.82rem; color: var(--blog-text-muted); } .blog-toc nav a.toc-h3.active { color: var(--blog-primary); } /* ============================================================ ARTICLE CONTENT ============================================================ */ .blog-article-content { font-size: 1.08rem; line-height: 1.85; color: var(--blog-text); } .blog-article-content > *:first-child { margin-top: 0; } .blog-article-content h2 { font-size: clamp(1.5rem, 2.4vw, 1.85rem); font-weight: 700; color: var(--blog-heading); margin: 3rem 0 1rem; letter-spacing: -0.01em; line-height: 1.25; position: relative; scroll-margin-top: 100px; } .blog-article-content h2::before { content: ''; display: block; width: 42px; height: 3px; background: var(--blog-gradient); border-radius: 999px; margin-bottom: 0.8rem; opacity: 0.85; } .blog-article-content h3 { font-size: 1.3rem; font-weight: 700; color: var(--blog-heading); margin: 2.2rem 0 0.85rem; line-height: 1.3; scroll-margin-top: 100px; } .blog-article-content h4 { font-size: 1.1rem; font-weight: 700; color: var(--blog-heading); margin: 1.8rem 0 0.7rem; scroll-margin-top: 100px; } .blog-article-content p { margin-bottom: 1.3rem; color: var(--blog-text); } .blog-article-content > p:first-of-type::first-letter { font-size: 3.2em; font-weight: 700; line-height: 0.95; float: inline-start; margin: 0.05em 0.12em 0 0; background: var(--blog-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: 6px; } [dir="rtl"] .blog-article-content > p:first-of-type::first-letter { margin: 0.05em 0 0 0.12em; } .blog-article-content img { border-radius: var(--blog-radius); margin: 1.8rem 0; box-shadow: var(--blog-shadow-sm); } .blog-article-content ul, .blog-article-content ol { margin-bottom: 1.3rem; padding-inline-start: 1.6rem; } .blog-article-content ul { list-style: none; padding-inline-start: 0.6rem; } .blog-article-content ul li { position: relative; padding-inline-start: 1.4rem; margin-bottom: 0.55rem; line-height: 1.7; } .blog-article-content ul li::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.65em; width: 8px; height: 8px; border-radius: 50%; background: var(--blog-gradient); box-shadow: 0 0 0 3px rgb(from var(--blog-tint-primary) r g b / 0.10); } .blog-article-content ol li { margin-bottom: 0.55rem; line-height: 1.7; } .blog-article-content ol li::marker { color: var(--blog-primary); font-weight: 700; } .blog-article-content blockquote { position: relative; border-inline-start: 4px solid transparent; background: linear-gradient(var(--blog-surface), var(--blog-surface)) padding-box, var(--blog-gradient) border-box; padding: 1.4rem 1.6rem 1.4rem 2.2rem; margin: 2rem 0; border-radius: 0 var(--blog-radius) var(--blog-radius) 0; color: var(--blog-text); font-style: italic; font-size: 1.08rem; line-height: 1.7; box-shadow: var(--blog-shadow-sm); } [dir="ltr"] .blog-article-content blockquote { border-radius: var(--blog-radius) 0 0 var(--blog-radius); padding: 1.4rem 2.2rem 1.4rem 1.6rem; } .blog-article-content blockquote::before { content: '"'; position: absolute; top: 0; inset-inline-start: 0.85rem; font-family: Georgia, 'Times New Roman', serif; font-size: 3.4rem; line-height: 1; color: var(--blog-primary); opacity: 0.35; font-style: normal; } .blog-article-content blockquote p { margin-bottom: 0.5rem; } .blog-article-content blockquote p:last-child { margin-bottom: 0; } .blog-article-content code { font-family: var(--blog-mono); font-size: 0.88em; padding: 0.18em 0.5em; border-radius: 6px; background: var(--blog-code-bg); color: var(--blog-code-text); font-weight: 500; } .blog-article-content pre { position: relative; background: var(--blog-code-bg); border: 1px solid var(--blog-border); border-radius: var(--blog-radius); padding: 1.4rem 1.6rem; overflow-x: auto; margin: 1.8rem 0; box-shadow: var(--blog-shadow-sm); } .blog-article-content pre code { background: none; padding: 0; font-size: 0.88rem; color: var(--blog-text); } .blog-article-content a { color: var(--blog-primary); text-decoration: underline; text-decoration-color: rgb(from var(--blog-tint-primary) r g b / 0.35); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: text-decoration-color var(--blog-t) var(--blog-ease), color var(--blog-t) var(--blog-ease); } .blog-article-content a:hover { color: var(--blog-rose); text-decoration-color: var(--blog-rose); } .blog-article-content table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-size: 0.95rem; border-radius: var(--blog-radius-sm); overflow: hidden; box-shadow: var(--blog-shadow-sm); } .blog-article-content th, .blog-article-content td { padding: 0.85rem 1.2rem; border-bottom: 1px solid var(--blog-border); text-align: start; } .blog-article-content th { background: var(--blog-gradient-soft); font-weight: 700; color: var(--blog-heading); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; } .blog-article-content tr:last-child td { border-bottom: none; } .blog-article-content tr:hover td { background: rgb(from var(--blog-tint-primary) r g b / 0.04); } .blog-article-content hr { border: none; height: 1px; background: linear-gradient(to right, transparent, var(--blog-border), transparent); margin: 2.5rem 0; position: relative; } .blog-article-content hr::after { content: '✦'; position: absolute; inset-inline-start: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--blog-primary); background: var(--blog-bg); padding: 0 12px; font-size: 0.85rem; opacity: 0.7; } /* Code copy button */ .blog-code-copy { position: absolute; top: 0.6rem; inset-inline-end: 0.6rem; background: var(--blog-surface); border: 1px solid var(--blog-border); border-radius: var(--blog-radius-pill); padding: 0.3rem 0.85rem; font-size: 0.74rem; font-weight: 600; color: var(--blog-text-secondary); font-family: var(--blog-font); cursor: pointer; opacity: 0; transition: opacity 0.2s, color var(--blog-t), border-color var(--blog-t); } .blog-article-content pre:hover .blog-code-copy { opacity: 1; } .blog-code-copy:hover { color: var(--blog-primary); border-color: var(--blog-primary); } .blog-code-copy.copied { color: var(--blog-primary); border-color: var(--blog-primary); } /* ============================================================ ARTICLE FOOTER ============================================================ */ .blog-article-footer { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--blog-border); position: relative; } .blog-article-footer::before { content: ''; position: absolute; top: -1px; inset-inline-start: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--blog-gradient); border-radius: 999px; } /* Tags */ .blog-article-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 2.5rem; justify-content: center; } .blog-article-tags:empty { display: none; } .blog-tag { display: inline-block; padding: 0.4rem 1rem; border-radius: var(--blog-radius-pill); font-size: 0.84rem; font-weight: 600; background: var(--blog-surface); color: var(--blog-text-secondary); border: 1.5px solid var(--blog-border); transition: all var(--blog-t) var(--blog-ease); } .blog-tag::before { content: '#'; color: var(--blog-primary); margin-inline-end: 2px; opacity: 0.7; } .blog-tag:hover { border-color: var(--blog-primary); color: var(--blog-primary); background: rgb(from var(--blog-tint-primary) r g b / 0.06); transform: translateY(-1px); } /* Share */ .blog-share { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin: 0 0 3rem; padding: 1.4rem 1.6rem; background: var(--blog-gradient-soft); border: 1px solid rgb(from var(--blog-tint-primary) r g b / 0.15); border-radius: var(--blog-radius); flex-wrap: wrap; } .blog-share-label { font-size: 0.78rem; font-weight: 700; color: var(--blog-primary); letter-spacing: 0.16em; text-transform: uppercase; } .blog-share-buttons { display: flex; gap: 0.55rem; } .blog-share-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--blog-card-bg); border: 1.5px solid var(--blog-border); color: var(--blog-text-secondary); cursor: pointer; transition: all 0.35s var(--blog-ease-spring); } .blog-share-btn:hover { transform: translateY(-3px) scale(1.08); border-color: transparent; background: var(--blog-gradient); color: #fff; box-shadow: var(--blog-shadow-cta); } /* CTA band */ .blog-cta { text-align: center; margin: 3rem 0; padding: 3rem 2rem; position: relative; /* Use --blog-cta-bg (mode-aware) instead of --blog-gradient. The dark-mode brand gradient is intentionally brighter for text/icon contrast on dark surfaces, but as a large CTA background it looks washed out under the white overlays — so dark mode gets a richer, deeper 3-stop gradient defined below. */ background: var(--blog-cta-bg, var(--blog-gradient)); border-radius: var(--blog-radius-lg); overflow: hidden; isolation: isolate; box-shadow: var(--blog-shadow-glow); } .blog-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 22%, var(--blog-cta-shine-1, rgba(255, 255, 255, 0.35)) 0%, transparent 45%), radial-gradient(circle at 82% 78%, var(--blog-cta-shine-2, rgba(255, 255, 255, 0.28)) 0%, transparent 50%); z-index: -1; } .blog-cta::after { content: ''; position: absolute; inset: 1px; border-radius: inherit; border: 1px dashed var(--blog-cta-border, rgba(255, 255, 255, 0.35)); pointer-events: none; } /* Dark-mode CTA — deeper, richer base so the white highlights read as shine instead of wash. Also boosts the outer glow shadow. */ [data-theme="dark"] .blog-cta { --blog-cta-bg: linear-gradient(135deg, #5F3F88 0%, #8E5FB7 45%, #C97A98 100%); --blog-cta-shine-1: rgba(255, 255, 255, 0.22); --blog-cta-shine-2: rgba(255, 255, 255, 0.16); --blog-cta-border: rgba(255, 255, 255, 0.30); box-shadow: 0 18px 50px rgb(from var(--blog-tint-primary) r g b / 0.45), 0 6px 18px rgb(from var(--blog-tint-accent) r g b / 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18); } /* Boy · dark gets a deep-blue 3-stop CTA base (shine/border/glow inherited above) */ :root[data-gender="boy"][data-theme="dark"] .blog-cta { --blog-cta-bg: linear-gradient(135deg, #1E3A6B 0%, #2563EB 45%, #0E7490 100%); } .blog-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: rgba(255, 255, 255, 0.98); /* Hardcoded brand purple — the white pill is the same in both modes, so text must use the darker brand color to keep contrast regardless of which palette --blog-primary points to. */ color: var(--blog-pill-ink); font-family: inherit; font-weight: 700; font-size: 1.02rem; letter-spacing: 0.005em; border-radius: var(--blog-radius-pill); border: 1.5px solid transparent; box-shadow: 0 14px 40px rgba(42, 31, 54, 0.25); transition: all 0.4s var(--blog-ease-spring); } .blog-cta-btn::after { content: '←'; font-weight: 700; transition: transform var(--blog-t) var(--blog-ease); } [dir="ltr"] .blog-cta-btn::after { content: '→'; } .blog-cta-btn:hover { transform: translateY(-2px); background: #fff; color: var(--blog-pill-ink-hover); box-shadow: 0 22px 50px rgba(42, 31, 54, 0.35); } .blog-cta-btn:hover::after { transform: translateX(-4px); } [dir="ltr"] .blog-cta-btn:hover::after { transform: translateX(4px); } /* Prev/Next */ .blog-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; } @media (max-width: 600px) { .blog-prevnext { grid-template-columns: 1fr; } } .blog-prevnext-link { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.2rem 1.4rem; border-radius: var(--blog-radius); border: 1.5px solid var(--blog-border); background: var(--blog-surface); transition: all 0.3s var(--blog-ease); position: relative; overflow: hidden; } .blog-prevnext-link::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; width: 0; height: 3px; background: var(--blog-gradient); transition: width 0.4s var(--blog-ease-reveal); } .blog-prevnext-link:hover { border-color: transparent; background: var(--blog-card-bg); transform: translateY(-2px); box-shadow: var(--blog-shadow-md); } .blog-prevnext-link:hover::after { width: 100%; } .blog-prev { text-align: start; } .blog-next { text-align: end; } .blog-prevnext-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--blog-primary); font-weight: 700; } .blog-prevnext-label::before { content: '←'; margin-inline-end: 5px; } [dir="ltr"] .blog-prev .blog-prevnext-label::before { content: '←'; } .blog-next .blog-prevnext-label::before { content: ''; margin: 0; } .blog-next .blog-prevnext-label::after { content: '→'; margin-inline-start: 5px; } [dir="rtl"] .blog-next .blog-prevnext-label::after { content: '←'; } [dir="rtl"] .blog-prev .blog-prevnext-label::before { content: '→'; } .blog-prevnext-title { font-size: 0.98rem; font-weight: 700; color: var(--blog-heading); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ REACTIONS ============================================================ */ .blog-reactions { margin: 2.5rem 0; padding: 1.6rem 1.2rem; border-top: 1px solid var(--blog-border); border-bottom: 1px solid var(--blog-border); text-align: center; } .blog-reactions-label { font-size: 0.76rem; color: var(--blog-primary); font-weight: 700; margin-bottom: 1rem; letter-spacing: 0.18em; text-transform: uppercase; } .blog-reactions-buttons { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; } .blog-reactions-buttons button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; background: var(--blog-surface); border: 1.5px solid var(--blog-border); border-radius: var(--blog-radius-pill); color: var(--blog-text); font-size: 0.92rem; cursor: pointer; transition: all 0.3s var(--blog-ease-spring); font-family: inherit; } .blog-reactions-buttons button:hover { background: var(--blog-card-bg); border-color: var(--blog-primary); transform: translateY(-2px); box-shadow: var(--blog-shadow-sm); } .blog-reactions-buttons button .emoji { font-size: 1.15rem; line-height: 1; } .blog-reactions-buttons button .count { font-weight: 700; color: var(--blog-text-secondary); font-variant-numeric: tabular-nums; font-size: 0.86rem; } .blog-reactions-buttons button.acted { background: rgb(from var(--blog-tint-primary) r g b / 0.12); border-color: var(--blog-primary); box-shadow: 0 0 0 3px rgb(from var(--blog-tint-primary) r g b / 0.12); } .blog-reactions-buttons button.acted .count { color: var(--blog-primary); } /* ============================================================ AUTHOR BIO ============================================================ */ .blog-author-bio { margin: 3rem 0; padding: 2rem; background: var(--blog-surface); border: 1px solid var(--blog-border); border-radius: var(--blog-radius-lg); display: flex; gap: 1.3rem; align-items: flex-start; box-shadow: var(--blog-shadow-sm); position: relative; overflow: hidden; } .blog-author-bio::before { content: ''; position: absolute; top: -40px; inset-inline-start: -40px; width: 120px; height: 120px; background: var(--blog-gradient); border-radius: 50%; filter: blur(50px); opacity: 0.25; pointer-events: none; } .blog-author-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--blog-gradient); display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 800; color: #fff; box-shadow: 0 8px 24px rgb(from var(--blog-tint-primary) r g b / 0.35); border: 3px solid var(--blog-card-bg); position: relative; z-index: 1; } .blog-author-avatar--placeholder { text-transform: uppercase; } .blog-author-text { flex: 1; min-width: 0; position: relative; z-index: 1; } .blog-author-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--blog-primary); font-weight: 700; margin-bottom: 0.25rem; } .blog-author-name { font-size: 1.15rem; font-weight: 700; color: var(--blog-heading); margin: 0 0 0.5rem; } .blog-author-desc { font-size: 0.96rem; color: var(--blog-text-secondary); line-height: 1.7; margin: 0; } /* ============================================================ NEWSLETTER ============================================================ */ .blog-newsletter { margin: 3rem 0 1rem; padding: 2.5rem 2rem; background: radial-gradient(circle at 18% 20%, rgb(from var(--blog-tint-primary) r g b / 0.10), transparent 55%), radial-gradient(circle at 82% 80%, rgb(from var(--blog-tint-accent) r g b / 0.14), transparent 55%), var(--blog-surface); border: 1px solid var(--blog-border); border-radius: var(--blog-radius-lg); text-align: center; position: relative; overflow: hidden; box-shadow: var(--blog-shadow-sm); } .blog-newsletter-title { font-size: 1.5rem; font-weight: 700; color: var(--blog-heading); margin: 0 0 0.7rem; letter-spacing: -0.005em; } .blog-newsletter-intro { color: var(--blog-text-secondary); font-size: 1rem; line-height: 1.65; margin: 0 auto 1.6rem; max-width: 480px; } .blog-newsletter-form { display: flex; gap: 0.6rem; max-width: 480px; margin: 0 auto; flex-wrap: wrap; } .blog-newsletter-input { flex: 1 1 220px; min-width: 0; padding: 0.85rem 1.2rem; background: var(--blog-card-bg); border: 1.5px solid var(--blog-border); border-radius: var(--blog-radius-pill); color: var(--blog-text); font-size: 0.98rem; font-family: inherit; transition: all var(--blog-t) var(--blog-ease); } .blog-newsletter-input:focus { outline: none; border-color: var(--blog-primary); box-shadow: 0 0 0 4px rgb(from var(--blog-tint-primary) r g b / 0.14); } .blog-newsletter-btn { padding: 0.85rem 1.8rem; background: var(--blog-primary); color: #fff; border: 1.5px solid transparent; border-radius: var(--blog-radius-pill); font-size: 0.98rem; font-weight: 600; cursor: pointer; transition: all var(--blog-t) var(--blog-ease); font-family: inherit; box-shadow: var(--blog-shadow-cta); } .blog-newsletter-btn:hover:not(:disabled) { background: var(--blog-gradient); transform: translateY(-1px); box-shadow: 0 10px 28px rgb(from var(--blog-tint-primary) r g b / 0.45); } .blog-newsletter-btn:disabled { opacity: 0.55; cursor: not-allowed; } .blog-newsletter-msg { margin-top: 1rem; font-size: 0.92rem; color: var(--blog-text-secondary); min-height: 1.25rem; } .blog-newsletter-msg.success { color: var(--blog-primary); font-weight: 700; } /* ============================================================ RELATED ============================================================ */ .blog-related { margin: 3.5rem 0 2rem; } .blog-related-title { font-size: 1.5rem; font-weight: 700; color: var(--blog-heading); margin: 0 0 1.3rem; padding-bottom: 0.7rem; position: relative; letter-spacing: -0.005em; } .blog-related-title::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; width: 60px; height: 3px; background: var(--blog-gradient); border-radius: 999px; } .blog-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; } .blog-related-card { display: flex; flex-direction: column; background: var(--blog-card-bg); border: 1px solid var(--blog-border); border-radius: var(--blog-radius); overflow: hidden; color: inherit; transition: transform 0.35s var(--blog-ease-reveal), box-shadow 0.35s var(--blog-ease-reveal), border-color 0.35s var(--blog-ease-reveal); text-decoration: none; } .blog-related-card:hover { transform: translateY(-4px); box-shadow: var(--blog-shadow-md); color: inherit; border-color: var(--blog-primary); } .blog-related-image { aspect-ratio: 16/9; background: var(--blog-gradient-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; } .blog-related-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--blog-ease-reveal); } .blog-related-card:hover .blog-related-image img { transform: scale(1.06); } .blog-related-body { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; } .blog-related-cat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--blog-primary); font-weight: 700; } .blog-related-heading { font-size: 1rem; font-weight: 700; color: var(--blog-heading); margin: 0; line-height: 1.35; } .blog-related-excerpt { font-size: 0.86rem; color: var(--blog-text-secondary); margin: 0; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ 404 + state cards ============================================================ */ .blog-404 { text-align: center; padding: 6rem 2rem; max-width: 560px; margin: 0 auto; } .blog-404 h2 { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; color: var(--blog-heading); margin-bottom: 1rem; letter-spacing: -0.015em; } .blog-404 h2 em { font-style: italic; background: var(--blog-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .blog-404 p { color: var(--blog-text-secondary); font-size: 1.05rem; margin-bottom: 2rem; line-height: 1.65; } .blog-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--blog-primary); color: #fff; border-radius: var(--blog-radius-pill); font-weight: 600; font-size: 1rem; border: 1.5px solid transparent; transition: all var(--blog-t) var(--blog-ease); box-shadow: var(--blog-shadow-cta); cursor: pointer; font-family: inherit; } .blog-btn:hover { background: var(--blog-gradient); transform: translateY(-1px); color: #fff; box-shadow: 0 10px 28px rgb(from var(--blog-tint-primary) r g b / 0.45); } .blog-card-state { text-align: center; max-width: 540px; margin: 4rem auto; padding: 3rem 2.2rem; background: var(--blog-surface); border: 1px solid var(--blog-border); border-radius: var(--blog-radius-lg); box-shadow: var(--blog-shadow-sm); position: relative; overflow: hidden; } .blog-card-state::before { content: ''; position: absolute; top: -60px; inset-inline-start: 50%; transform: translateX(-50%); width: 200px; height: 200px; background: var(--blog-gradient); border-radius: 50%; filter: blur(60px); opacity: 0.18; pointer-events: none; } .blog-card-state-icon { font-size: 3.2rem; margin-bottom: 1rem; position: relative; z-index: 1; } .blog-card-state h1 { font-size: 1.55rem; margin: 0 0 0.85rem; color: var(--blog-heading); letter-spacing: -0.01em; position: relative; z-index: 1; } .blog-card-state p { color: var(--blog-text-secondary); font-size: 1rem; line-height: 1.7; margin: 0 auto 1.8rem; max-width: 380px; position: relative; z-index: 1; } .blog-card-state .blog-btn { position: relative; z-index: 1; } /* ============================================================ FOOTER ============================================================ */ .blog-footer { border-top: 1px solid var(--blog-border); padding: 3.5rem 0 1.75rem; margin-top: 4rem; color: var(--blog-text-muted); font-size: 0.9rem; background: var(--blog-surface); position: relative; z-index: 1; } .blog-footer p { margin: 0; } .blog-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.6rem; } .blog-footer-brand img { height: 44px; width: 44px; border-radius: 12px; margin-bottom: 14px; display: block; } .blog-footer-brand p { color: var(--blog-text-muted); font-size: 0.94rem; line-height: 1.7; max-width: 320px; } .blog-footer-hotline { background: rgb(from var(--blog-tint-accent) r g b / 0.14); border-radius: 14px; padding: 14px 16px; border: 1px solid rgb(from var(--blog-tint-accent) r g b / 0.4); margin-top: 14px; } .blog-footer-hotline strong { color: var(--blog-heading); display: block; margin-bottom: 2px; } .blog-footer-hotline span { font-size: 0.88rem; color: var(--blog-text-muted); display: block; } .blog-footer-col h4 { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blog-heading); margin: 0 0 1rem; font-weight: 700; } .blog-footer-col ul { list-style: none; padding: 0; margin: 0; } .blog-footer-col li { margin-bottom: 10px; } .blog-footer-col a { color: var(--blog-text-muted); font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: color var(--blog-t) var(--blog-ease); } .blog-footer-col a:hover { color: var(--blog-primary); } .blog-footer-bottom { padding-top: 22px; border-top: 1px solid var(--blog-border); text-align: center; } .blog-footer-privacy { font-size: 0.84rem; color: var(--blog-text-muted); margin-bottom: 10px !important; } .blog-footer-meta { font-size: 0.82rem; color: var(--blog-text-muted); margin-bottom: 8px !important; opacity: 0.85; } .blog-footer-signature { margin-top: 0.4rem !important; font-size: 0.78rem; opacity: 0.75; } .blog-footer-signature a { color: var(--blog-primary); text-decoration: none; border-bottom: 1px dotted currentColor; transition: color var(--blog-t) var(--blog-ease); } .blog-footer-signature a:hover { color: var(--blog-rose); } @media (max-width: 800px) { .blog-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .blog-footer-brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .blog-footer-grid { grid-template-columns: 1fr; gap: 1.75rem; } } /* ============================================================ COPY TOOLTIP ============================================================ */ .blog-copied-tooltip { position: fixed; bottom: 2rem; inset-inline-start: 50%; transform: translateX(-50%) translateY(10px); background: var(--blog-heading); color: var(--blog-bg); padding: 0.6rem 1.2rem; border-radius: var(--blog-radius-pill); font-size: 0.88rem; font-weight: 600; opacity: 0; transition: all 0.35s var(--blog-ease-reveal); pointer-events: none; z-index: 1000; box-shadow: var(--blog-shadow-lg); } .blog-copied-tooltip.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ SCROLLBAR ============================================================ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--blog-border-strong), var(--blog-border)); border-radius: 999px; border: 2px solid var(--blog-bg); } ::-webkit-scrollbar-thumb:hover { background: var(--blog-gradient); } * { scrollbar-width: thin; scrollbar-color: var(--blog-border-strong) transparent; } /* ============================================================ ANIMATIONS — card stagger ============================================================ */ @keyframes blogFadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .blog-card { animation: blogFadeIn 0.55s var(--blog-ease-reveal) both; } .blog-card:nth-child(1) { animation-delay: 0.02s; } .blog-card:nth-child(2) { animation-delay: 0.06s; } .blog-card:nth-child(3) { animation-delay: 0.10s; } .blog-card:nth-child(4) { animation-delay: 0.14s; } .blog-card:nth-child(5) { animation-delay: 0.18s; } .blog-card:nth-child(6) { animation-delay: 0.22s; } .blog-card:nth-child(7) { animation-delay: 0.26s; } .blog-card:nth-child(8) { animation-delay: 0.30s; } .blog-card:nth-child(9) { animation-delay: 0.34s; } /* ============================================================ RESPONSIVE TWEAKS ============================================================ */ @media (max-width: 768px) { .blog-article-title { font-size: clamp(1.7rem, 6vw, 2.4rem); } .blog-article-content { font-size: 1.04rem; } .blog-share { gap: 0.8rem; padding: 1.1rem 1.2rem; } .blog-cta { padding: 2.2rem 1.4rem; } .blog-newsletter { padding: 2rem 1.2rem; } } @media (max-width: 640px) { .blog-author-bio { flex-direction: column; text-align: center; align-items: center; padding: 1.6rem; } .blog-newsletter-form { flex-direction: column; } .blog-newsletter-input, .blog-newsletter-btn { width: 100%; } .blog-main { padding: 1.5rem 0 2.5rem; } .blog-card-body { padding: 1.2rem; } .blog-share-buttons { gap: 0.4rem; } .blog-share-btn { width: 38px; height: 38px; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } .blog-card { animation: none; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ============================================================ GENDER PALETTE CHOOSER — overlay + header toggle (blog) Injected by script.js; mirrors the main site using --blog-* tokens. ============================================================ */ html.needs-gender { overflow: hidden; } html.needs-gender body::before { content: ""; position: fixed; inset: 0; z-index: 1999; background: radial-gradient(circle at 28% 22%, rgb(from var(--blog-tint-primary) r g b / 0.22), transparent 58%), radial-gradient(circle at 78% 80%, rgb(from var(--blog-tint-accent) r g b / 0.18), transparent 58%), var(--blog-bg); } .gender-toggle { background: var(--blog-input-bg); border: 1.5px solid var(--blog-border); width: 40px; height: 40px; color: var(--blog-primary); border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color var(--blog-t) var(--blog-ease), background var(--blog-t) var(--blog-ease), border-color var(--blog-t) var(--blog-ease), transform var(--blog-t) var(--blog-ease); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .gender-toggle:hover { color: var(--blog-primary); border-color: var(--blog-primary); transform: translateY(-1px); } .gender-toggle:active { transform: translateY(0); } .gender-toggle svg { width: 20px; height: 20px; display: block; } .gender-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.32s var(--blog-ease), visibility 0s linear 0.32s; background: radial-gradient(circle at 26% 18%, rgb(from var(--blog-tint-primary) r g b / 0.30), transparent 55%), radial-gradient(circle at 82% 84%, rgb(from var(--blog-tint-accent) r g b / 0.24), transparent 55%), rgba(8, 6, 18, 0.62); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); } .gender-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.32s var(--blog-ease); } .gender-card { position: relative; width: min(480px, 100%); background: var(--blog-surface); color: var(--blog-text); border: 1px solid var(--blog-border); border-radius: var(--blog-radius-lg); box-shadow: var(--blog-shadow-lg); padding: clamp(28px, 5vw, 44px); text-align: center; transform: translateY(14px) scale(0.96); transition: transform 0.42s var(--blog-ease-reveal); animation: none; } .gender-overlay.is-open .gender-card { transform: none; } .gender-card-emblem { width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 18px; overflow: hidden; box-shadow: var(--blog-shadow-cta); } .gender-card-emblem img { width: 100%; height: 100%; display: block; object-fit: cover; } .gender-card-title { font-size: clamp(1.4rem, 3.4vw, 1.85rem); font-weight: 800; line-height: 1.25; margin-bottom: 8px; color: var(--blog-heading); text-align: center; } .gender-card-sub { color: var(--blog-text-secondary); font-size: 1rem; line-height: 1.6; margin: 0 auto 26px; max-width: 34ch; text-align: center; } .gender-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 420px) { .gender-choices { grid-template-columns: 1fr; } } .gender-choice { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 16px; border-radius: var(--blog-radius); border: 1.5px solid var(--blog-border); background: var(--blog-surface-2); color: var(--blog-text); cursor: pointer; font: inherit; transition: transform var(--blog-t) var(--blog-ease), border-color var(--blog-t) var(--blog-ease), box-shadow var(--blog-t) var(--blog-ease), background var(--blog-t) var(--blog-ease); } .gender-choice:hover, .gender-choice:focus-visible { transform: translateY(-3px); box-shadow: var(--blog-shadow-md); border-color: var(--blog-primary); outline: none; } .gender-choice-art { width: 80px; height: 80px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.16)); transition: transform var(--blog-t) var(--blog-ease-reveal); } .gender-choice-art svg { width: 100%; height: 100%; display: block; } .gender-choice:hover .gender-choice-art, .gender-choice:focus-visible .gender-choice-art { transform: scale(1.06) rotate(-2deg); } .gender-choice-label { font-weight: 700; font-size: 1.05rem; } .gender-choice[aria-pressed="true"] { border-color: var(--blog-primary); background: var(--blog-surface); box-shadow: 0 0 0 3px rgb(from var(--blog-primary) r g b / 0.30); } .gender-card-close { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--blog-border); background: var(--blog-surface-2); color: var(--blog-text-muted); font-size: 20px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; transition: color var(--blog-t) var(--blog-ease), border-color var(--blog-t) var(--blog-ease), transform var(--blog-t) var(--blog-ease); } .gender-overlay.can-dismiss .gender-card-close { display: inline-flex; } .gender-card-close:hover { color: var(--blog-primary); border-color: var(--blog-primary); transform: rotate(90deg); } html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color var(--blog-t) var(--blog-ease), border-color var(--blog-t) var(--blog-ease), color var(--blog-t) var(--blog-ease), box-shadow var(--blog-t) var(--blog-ease), fill var(--blog-t) var(--blog-ease), stroke var(--blog-t) var(--blog-ease) !important; } @media (prefers-reduced-motion: reduce) { html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; } .gender-overlay, .gender-card { transition: opacity 0.001s !important; } }