/* ============================================ SNAPDO - ZEN LATTE Premium Editorial Design System Warm Paper · Espresso Ink · Organic Light ============================================ */ /* Google Fonts moved to HTML for performance (#16) */ /* See engine.js renderArticle for the tags */ /* ============ DESIGN TOKENS ============ */ :root { /* === WARM PAPER PALETTE === */ --bg-base: #FBF7F4; /* Warm off-white */ --bg-paper: #FFFFFF; /* Pure card white */ --bg-subtle: #F7F2EE; /* Barely-there warm grey */ --bg-section: #F4EDE8; /* Section separator */ /* === ESPRESSO INK === */ --ink-dark: #1E120A; /* Darkest espresso */ --ink-main: #2D1B14; /* Main body text */ --ink-muted: #6B524A; /* Secondary text */ --ink-faint: #A08880; /* Placeholder / muted */ /* === LATTE ACCENT === */ --latte: #9B7B65; /* Primary accent */ --latte-light: #C4A898; /* Hover / light accent */ --latte-soft: #EDE0D8; /* Soft background accent */ --latte-border: #DDD0C8; /* Accent border */ /* === ORGANIC BORDERS === */ --border: #EDE5DF; --border-soft: #F4EDE8; --border-strong: #D8CCC6; /* === ZEN SHADOWS (Premium Multi-layered Ambient) === */ /* 5-layer shadows for soft, realistic depth */ --shadow-sm: 0 1px 2px rgba(45, 27, 20, 0.04), 0 0 0 1px rgba(45, 27, 20, 0.02); --shadow-md: 0 2px 4px rgba(45, 27, 20, 0.02), 0 4px 8px rgba(45, 27, 20, 0.02), 0 8px 16px rgba(45, 27, 20, 0.02), 0 16px 32px rgba(45, 27, 20, 0.02), 0 0 0 1px rgba(45, 27, 20, 0.02); --shadow-lg: 0 2px 4px rgba(45, 27, 20, 0.02), 0 4px 8px rgba(45, 27, 20, 0.03), 0 8px 16px rgba(45, 27, 20, 0.03), 0 16px 32px rgba(45, 27, 20, 0.03), 0 32px 64px rgba(45, 27, 20, 0.03), 0 0 0 1px rgba(45, 27, 20, 0.02); --shadow-card: 0 0 0 1px rgba(45, 27, 20, 0.03), 0 2px 4px rgba(45, 27, 20, 0.02), 0 12px 24px -4px rgba(45, 27, 20, 0.06); --shadow-hover: 0 0 0 1px rgba(45, 27, 20, 0.05), 0 20px 40px -12px rgba(45, 27, 20, 0.12), 0 10px 20px -8px rgba(45, 27, 20, 0.08); --shadow-ambient: 0 0 0 1px rgba(45, 27, 20, 0.04), 0 4px 16px -4px rgba(45, 27, 20, 0.08); --shadow-floating: 0 0 0 1px rgba(139, 115, 85, 0.15), 0 8px 32px -8px rgba(45, 27, 20, 0.14), 0 0 0 4px rgba(139, 115, 85, 0.06); /* === CATEGORY MUTED TONES === */ --cat-coding: #4A7FA5; /* Muted slate blue */ --cat-trading: #4A8C6A; /* Muted sage green */ --cat-ai: #8A6FA8; /* Muted plum */ --cat-tools: #7A65A5; /* Muted mauve */ --cat-osint: #4F7F78; /* Muted teal */ --cat-fix: #A56B55; /* Muted clay */ --cat-life: #7B9361; /* Muted moss */ --cat-passive: #B08A4A; /* Muted gold */ --cat-tips: #A5824A; /* Muted amber */ /* === GLASSMORPISM (Premium Polish) === */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.5); --glass-blur: blur(20px) saturate(1.8); /* === SPACING & RHYTHM === */ --section-gap: 8rem; --content-max: 1200px; --container-max: 1300px; --article-max: 780px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 40px; /* More rounded for premium feel */ } /* ============ RESET ============ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============ BASE ============ */ html, body { overflow-x: clip !important; /* Changed from hidden to clip to allow sticky positioning to work */ width: 100%; position: relative; box-sizing: border-box; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--bg-base); background-image: radial-gradient(circle at top center, rgba(255, 255, 255, 0.9) 0%, transparent 70%), radial-gradient(circle at 80% 20%, rgba(155, 123, 101, 0.08) 0%, transparent 40%); background-attachment: fixed; color: var(--ink-main); line-height: 1.8; /* Refined premium editorial spacing */ font-size: 1.05rem; letter-spacing: -0.011em; /* Modern editorial tracking */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } /* ============ LAYOUT UTILITIES ============ */ .container { max-width: var(--content-max); margin: 0 auto; padding: 0 2.5rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 768px) { .container { padding: 0 1.5rem; } } /* ============ TYPOGRAPHY ============ */ h1, h2, h3, h4, h5 { font-family: 'Lora', Georgia, serif; color: var(--ink-dark); line-height: 1.25; letter-spacing: -0.02em; } h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); /* Slightly reduced for better fit */ font-weight: 700; } h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 600; } h3 { font-size: clamp(1.15rem, 2.5vw, 1.4rem); font-weight: 600; } h4 { font-size: 1.1rem; font-weight: 500; } p { margin-bottom: 1.5rem; color: var(--ink-muted); line-height: 1.85; } p:last-child { margin-bottom: 0; } a { color: var(--latte); text-decoration: none; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } a:hover { color: var(--ink-dark); } strong { color: var(--ink-main); font-weight: 600; } pre, code { font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 0.88rem; } pre { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.75rem; overflow-x: auto; margin: 2rem 0; line-height: 1.7; } code { background: var(--latte-soft); padding: 0.15em 0.5em; border-radius: 4px; color: var(--ink-main); } pre code { background: none; padding: 0; } blockquote { border-left: 4px solid var(--latte); /* Thicker for prominence */ margin: 3.5rem 0; padding: 2rem 2.5rem; background: var(--bg-subtle); border-radius: 4px var(--radius-lg) var(--radius-lg) 4px; font-style: italic; color: var(--ink-main); line-height: 1.8; } ul, ol { padding-left: 1.5rem; margin-bottom: 1.5rem; } li { margin-bottom: 0.5rem; color: var(--ink-muted); } ::selection { background: var(--latte-soft); color: var(--ink-dark); } /* ============ SCROLLBAR ============ */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--latte-border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--latte); } /* ============ CODE BLOCKS & COPY BUTTON ============ */ .code-wrapper { position: relative; margin: 1.5rem 0; border-radius: var(--radius-lg); background: var(--bg-paper); border: 1px solid var(--border); overflow: hidden; } .code-wrapper pre { margin: 0 !important; padding: 1.5rem !important; background: transparent !important; border: none !important; } .copy-code-btn { position: absolute; top: 0.75rem; right: 0.75rem; padding: 0.4rem 0.8rem; background: rgba(45, 27, 20, 0.05); backdrop-filter: blur(8px); border: 1px solid rgba(45, 27, 20, 0.1); border-radius: 8px; color: var(--ink-faint); font-size: 0.75rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 10; } /* #V.A.T Mission #2: Optimized for mobile ergonomics */ @media (max-width: 768px) { .copy-code-btn { padding: 0.6rem 1.1rem; font-size: 0.85rem; top: 0.5rem; right: 0.5rem; } .copy-code-btn svg { width: 16px; height: 16px; } } .copy-code-btn svg { width: 14px; height: 14px; } .copy-code-btn:hover { background: rgba(45, 27, 20, 0.1); color: var(--latte); transform: scale(1.05); } .copy-code-btn.copied { background: var(--cat-tips); color: white; border-color: transparent; } /* Scrollbar styling for pre */ pre::-webkit-scrollbar { height: 6px; } pre::-webkit-scrollbar-track { background: transparent; } pre::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; } pre::-webkit-scrollbar-thumb:hover { background: var(--latte-border); } /* ============ HEADER / NAV ============ */ header:not(.category-header) { position: sticky; top: 0; z-index: 1000; background: rgba(251, 247, 244, 0.88); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); border-bottom: 1px solid var(--border); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } header:not(.category-header).scrolled { box-shadow: 0 4px 24px rgba(45, 27, 20, 0.08); } nav { max-width: var(--container-max); margin: 0 auto; padding: 0.6rem 2.5rem; /* Reduced padding for more compact header */ display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; } /* ── Logo ── */ .logo a { font-family: 'Lora', Georgia, serif; font-size: 2rem; /* Restored prominent logo size */ font-weight: 700; line-height: 1; /* Explicitly lock height to prevent nav blooming */ color: var(--ink-dark); letter-spacing: -0.05em; text-decoration: none; display: flex; align-items: baseline; gap: 0; transition: opacity 0.2s ease; } .logo a:hover { opacity: 0.82; } .logo span { font-weight: 500; font-style: italic; color: var(--latte); opacity: 1; letter-spacing: -0.03em; } /* ── Nav Links ── */ .nav-links { display: flex; list-style: none; gap: 0; /* Use padding on links for touch targets */ align-items: center; margin: 0; padding: 0; flex-wrap: nowrap; /* Prevent wrapping at all costs */ } .nav-links li { margin: 0; padding: 0; } .nav-links a { position: relative; color: var(--ink-muted); text-decoration: none; font-size: 0.78rem; /* Slightly smaller for better fit */ font-weight: 600; /* Bolder for readability at smaller size */ padding: 0.5rem 0.75rem; /* Balanced padding */ border-radius: var(--radius-sm); transition: all 0.25s ease; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; } /* Animated underline on hover */ .nav-links a::after { content: ''; position: absolute; bottom: 4px; left: 1rem; right: 1rem; height: 1.5px; background: var(--latte); transform: scaleX(0); transform-origin: center; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; } .nav-links a:hover { color: var(--ink-dark); } .nav-links a:hover::after { transform: scaleX(1); } /* Active state — solid dot + underline */ .nav-links a.active { color: var(--ink-dark); font-weight: 600; } .nav-links a.active::after { transform: scaleX(1); background: var(--latte); opacity: 0.7; } .categories-list li a:hover { color: var(--latte); background: var(--bg-subtle); } /* Sidebar Category Colors */ .cat-link.coding { --cat-accent: var(--cat-coding); } .cat-link.trading { --cat-accent: var(--cat-trading); } .cat-link.ai-agents { --cat-accent: var(--cat-ai); } .cat-link.tools { --cat-accent: var(--cat-tools); } .cat-link.osint { --cat-accent: var(--cat-osint); } .cat-link.troubleshooting { --cat-accent: var(--cat-fix); } .cat-link.life-skills { --cat-accent: var(--cat-life); } .cat-link.passive-income { --cat-accent: var(--cat-passive); } .cat-link.tips { --cat-accent: var(--cat-tips); } .cat-link.coding:hover { background: color-mix(in srgb, var(--cat-coding) 8%, white); color: var(--cat-coding); } .cat-link.trading:hover { background: color-mix(in srgb, var(--cat-trading) 8%, white); color: var(--cat-trading); } .cat-link.ai-agents:hover { background: color-mix(in srgb, var(--cat-ai) 8%, white); color: var(--cat-ai); } .cat-link.tools:hover { background: color-mix(in srgb, var(--cat-tools) 8%, white); color: var(--cat-tools); } .cat-link.osint:hover { background: color-mix(in srgb, var(--cat-osint) 8%, white); color: var(--cat-osint); } .cat-link.troubleshooting:hover { background: color-mix(in srgb, var(--cat-fix) 8%, white); color: var(--cat-fix); } .cat-link.life-skills:hover { background: color-mix(in srgb, var(--cat-life) 8%, white); color: var(--cat-life); } .cat-link.passive-income:hover { background: color-mix(in srgb, var(--cat-passive) 8%, white); color: var(--cat-passive); } .cat-link.tips:hover { background: color-mix(in srgb, var(--cat-tips) 8%, white); color: var(--cat-tips); } /* ── Hamburger ── */ .hamburger { display: none; flex-direction: column; justify-content: space-between; width: 26px; height: 18px; cursor: pointer; background: none; border: none; padding: 0; z-index: 2000; } .hamburger span { display: block; width: 100%; height: 2px; background: var(--ink-main); border-radius: 2px; transition: all 0.3s ease; } /* ============ CATEGORY PILLARS ============ */ .pillars { max-width: var(--content-max); margin: 0 auto var(--section-gap); padding: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; /* Glassmorphism background — gives depth behind the glass cards */ background: linear-gradient(135deg, var(--latte-soft) 0%, var(--bg-subtle) 50%, var(--bg-section) 100%); border-radius: var(--radius-xl); position: relative; } @media (max-width: 1024px) { .pillars { grid-template-columns: repeat(2, 1fr); padding: 2rem; } } @media (max-width: 640px) { .pillars { grid-template-columns: 1fr; padding: 1.5rem; } } /* New Premium Background with Fade */ .hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../img/hero-bg.webp') no-repeat center top; background-size: cover; opacity: 0.45; z-index: 0; /* Elegant Fade Out */ -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%); pointer-events: none; } /* Original Pulse Animation (Moved to ::after) */ .hero::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 0%, transparent 50%); animation: pulse 15s infinite alternate ease-in-out; pointer-events: none; z-index: 0; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.2); opacity: 0.8; } } .hero h1 { font-size: clamp(3.5rem, 10vw, 6.5rem); font-weight: 700; color: var(--ink-dark); margin-bottom: 1.5rem; line-height: 1; letter-spacing: -0.05em; position: relative; z-index: 1; } .hero p { color: var(--ink-muted); font-size: 1.4rem; margin-bottom: 0; font-style: italic; font-family: 'Lora', serif; position: relative; z-index: 1; opacity: 0.85; } .hero .subtitle { display: block; margin-top: 2rem; color: var(--ink-faint); font-size: 0.95rem; font-family: 'Inter', sans-serif; font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; position: relative; z-index: 1; } /* ============ HERO ============ */ .hero { text-align: center; padding: 3rem 2rem 4.25rem; /* Adjusted top padding after removing sticky nav */ position: relative; overflow: hidden; background: var(--bg-base); } .pillar-card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: var(--radius-xl); padding: 2.5rem 2rem; border: 1px solid var(--glass-border); box-shadow: var(--shadow-card); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.4s ease, border-color 0.3s ease; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; } .pillar-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: var(--shadow-hover); border-color: var(--latte-light); background: var(--bg-paper); } /* ============ REVEAL ANIMATIONS (Safety Fallback) ============ */ .reveal { opacity: 1; /* Fallback: visible by default */ transform: translateY(0); } /* Only apply hidden state if JS is active */ .js .reveal { opacity: 0; transform: translateY(20px); transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); } .js .reveal.active { opacity: 1; transform: translateY(0); } .reveal:nth-child(2) { transition-delay: 0.1s; } .reveal:nth-child(3) { transition-delay: 0.2s; } .reveal:nth-child(4) { transition-delay: 0.3s; } .pillar-card .icon { font-size: 2.5rem; margin-bottom: 0.5rem; display: block; } .pillar-card h2 { font-size: 1.15rem; font-weight: 600; color: var(--ink-dark); margin-bottom: 0.25rem; } .pillar-card p { font-size: 0.875rem; color: var(--ink-muted); line-height: 1.65; margin-bottom: 0.5rem; min-height: 4.4rem; } .pillar-card a { font-size: 0.8rem; font-weight: 600; color: var(--latte); letter-spacing: 0.05em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--border); width: 100%; justify-content: center; transition: all 0.2s ease; } .pillar-card a:hover { color: var(--ink-dark); gap: 0.65rem; } /* ============ SECTION LABEL ============ */ .section-label { max-width: var(--content-max); margin: 0 auto 3rem; padding: 0 2.5rem; display: flex; align-items: center; gap: 1rem; } /* ============ CATEGORY HEADER ============ */ .category-header { padding: 3rem 0 4.25rem; /* Slashed from 7rem */ text-align: center; background: var(--bg-section); background-size: cover; background-position: center; background-blend-mode: overlay; border-bottom: 1px solid var(--border); margin-bottom: 4rem; position: relative; overflow: hidden; } .category-header-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251, 247, 244, 0.6) 0%, rgba(45, 27, 20, 0.8) 100%); backdrop-filter: blur(4px); z-index: 1; } .category-header h1 { font-size: clamp(3rem, 10vw, 5rem); font-weight: 700; margin-bottom: 1rem; position: relative; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .category-header p { font-size: 1.2rem; color: rgba(255, 255, 255, 0.9); font-family: 'Lora', serif; font-style: italic; max-width: 680px; margin: 0 auto; position: relative; line-height: 1.6; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } /* Removed duplicate rules */ @media (max-width: 768px) { .category-header { padding: 3rem 1.5rem 3rem; } } .section-label h2 { font-size: 1.8rem; font-weight: 600; color: var(--ink-dark); } .section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ============ POST CARDS ============ */ .latest-posts { max-width: var(--content-max); margin: 0 auto var(--section-gap); padding: 0 2.5rem; } .latest-posts>h2 { font-size: 1.8rem; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); color: var(--ink-dark); } .post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } .post-card { background: var(--bg-paper); border-radius: var(--radius-lg); padding: 2.25rem; border: 1px solid var(--border); box-shadow: var(--shadow-card); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); display: flex; flex-direction: column; cursor: pointer; position: relative; overflow: hidden; background-size: cover; background-position: center; min-height: 320px; } .post-card::before { content: ''; position: absolute; inset: 0; backdrop-filter: blur(1px) saturate(1.15); -webkit-backdrop-filter: blur(1px) saturate(1.15); background: linear-gradient(to bottom, rgba(251, 247, 244, 0.15) 0%, rgba(251, 247, 244, 0.55) 40%, rgba(251, 247, 244, 0.88) 100%); z-index: 0; transition: background 0.4s ease, backdrop-filter 0.4s ease; } .post-card:hover::before { backdrop-filter: blur(0px) saturate(1.2); -webkit-backdrop-filter: blur(0px) saturate(1.2); background: linear-gradient(to bottom, rgba(251, 247, 244, 0.05) 0%, rgba(251, 247, 244, 0.42) 40%, rgba(251, 247, 244, 0.82) 100%); } /* ============ POST CARD IMAGE THUMBNAIL ============ */ .post-card-image { height: 185px; background-size: cover; background-position: center; background-color: var(--bg-subtle); /* fallback if image fails */ border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0; margin: -2.25rem -2.25rem 1.5rem -2.25rem; flex-shrink: 0; transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); overflow: hidden; } .post-card:hover .post-card-image { transform: scale(1.04); } .post-card-content { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; } .post-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--latte); transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease; } .post-card:hover::after { transform: scaleX(1); transform-origin: left; } /* Make entire post-card clickable via stretched-link */ .post-card { position: relative; } .post-card .card-link { position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-lg); } /* Keep category tag, h3, p, date above the link overlay */ .post-card-content>* { position: relative; z-index: 3; } .post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: var(--latte-border); } .empty-state-card { min-height: 280px; cursor: default; justify-content: center; border-style: dashed; } .empty-state-card::before { background: linear-gradient(to bottom, rgba(251, 247, 244, 0.92) 0%, rgba(251, 247, 244, 0.98) 100%); backdrop-filter: none; -webkit-backdrop-filter: none; } .empty-state-card::after { display: none; } .empty-state-card:hover { transform: none; box-shadow: var(--shadow-card); border-color: var(--latte-border); } .empty-state-card .post-card-content { align-items: flex-start; } .empty-state-card h3 { font-size: 1.35rem; margin-bottom: 0.5rem; } .empty-state-card p { max-width: 42rem; color: var(--ink-muted); } .post-card h3 { font-size: 1.05rem; font-weight: 600; color: var(--ink-dark); margin: 0.75rem 0; line-height: 1.45; transition: color 0.2s; } .post-card:hover h3 { color: var(--latte); } .post-card p { font-size: 0.875rem; color: var(--ink-muted); line-height: 1.7; flex: 1; margin-bottom: 1.25rem; } .post-card a { text-decoration: none; color: inherit; } /* ============ CATEGORY TAGS ============ */ .category, .article-category { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: white; background: var(--latte); /* fallback */ align-self: flex-start; } /* Category colour map - muted, not neon */ .category.coding, .article-category.coding { background: var(--cat-coding); } .category.trading, .article-category.trading { background: var(--cat-trading); } .category.ai-agents, .article-category.ai-agents { background: var(--cat-ai); } .category.tools, .article-category.tools { background: var(--cat-tools); } .category.osint, .article-category.osint { background: var(--cat-osint); } .category.troubleshooting, .article-category.troubleshooting { background: var(--cat-fix); } .category.life-skills, .article-category.life-skills { background: var(--cat-life); } .category.passive-income, .article-category.passive-income { background: var(--cat-passive); } .category.tips, .article-category.tips { background: var(--cat-tips); } .date, .article-date, .read-time { font-size: 0.8rem; color: var(--ink-faint); font-weight: 400; } /* ============ ARTICLE LAYOUT ============ */ .article-wrapper { max-width: var(--content-max); margin: 1.25rem auto 3.5rem auto; /* Slashed top margin from 4rem to 1.25rem */ padding: 0 2.5rem; display: grid; grid-template-columns: 1fr 300px; gap: 3rem; align-items: flex-start; } .article-main { min-width: 0; /* Prevents CSS Grid blowout */ } .article-content { width: 100%; min-width: 0; } .article-page { background: var(--bg-paper); border-radius: var(--radius-xl); padding: 0 2.5rem 2.5rem; /* Reduced masive padding */ border: 1px solid var(--border); box-shadow: var(--shadow-lg); min-width: 0; overflow: visible; /* Ensure hero card and ads are not clipped */ } /* Article Header */ .article-header { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); } .article-hero-card { margin: 0 -2.5rem 2.25rem; /* Match the article-page padding exactly */ border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* Add radius here since overflow is removed */ overflow: hidden; /* Clip the banner image inside this card instead */ } .article-header-banner { position: relative; min-height: 320px; display: flex; align-items: flex-end; padding: 3.25rem 3.5rem 2.75rem; background-position: center; background-size: cover; background-repeat: no-repeat; border-bottom: 1px solid var(--border); } .article-header-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251, 247, 244, 0.08) 0%, rgba(251, 247, 244, 0.18) 32%, rgba(251, 247, 244, 0.72) 100%), radial-gradient(circle at 20% 20%, rgba(255, 237, 214, 0.52), transparent 45%), radial-gradient(circle at 80% 18%, rgba(209, 229, 236, 0.42), transparent 42%), radial-gradient(circle at 80% 80%, rgba(195, 170, 157, 0.34), transparent 35%); backdrop-filter: blur(5px) saturate(1.03); -webkit-backdrop-filter: blur(5px) saturate(1.03); } .article-header-inner { position: relative; z-index: 1; max-width: 680px; } .article-header h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); /* Prevent blowout */ font-weight: 700; line-height: 1.15; margin: 0 0 1rem; color: var(--ink-dark); text-shadow: 0 2px 15px rgba(251, 247, 244, 0.4); } .article-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .article-meta .article-date, .article-meta .read-time { font-size: 0.85rem; color: var(--ink-faint); text-shadow: 0 1px 10px rgba(251, 247, 244, 0.32); } .article-meta .read-time::before { content: "\00B7"; margin-right: 1rem; color: var(--border-strong); } /* Article Body */ .article-content h2 { margin-top: 4rem; /* More breathing room */ margin-bottom: 1.5rem; font-size: 1.75rem; color: var(--ink-dark); padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-soft); } .article-content h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1.2rem; color: var(--ink-main); } .article-content p { font-size: 1.05rem; /* Slightly larger for long reads */ line-height: 1.85; color: var(--ink-muted); margin-bottom: 2rem; } .article-content ul, .article-content ol { margin-bottom: 1.75rem; padding-left: 1.75rem; } /* ============ FIGURES & IMAGES (canonical — merged) ============ */ .article-content figure { margin: 2.5rem 0; text-align: center; } .article-content img { display: block; max-width: 100%; height: auto; width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--border-soft); margin: 0 auto; opacity: 1; transform: none; transition: box-shadow 0.4s ease, opacity 0.6s ease, transform 0.6s ease; } /* JS adds .visible — no-op now since images start visible, but kept for legacy */ .article-content img.visible { opacity: 1; transform: none; } .article-content img:hover { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); } /* Banner images — wide aspect ratio */ .article-content img.banner { aspect-ratio: 21 / 9; object-fit: cover; } .article-content figcaption { margin-top: 1rem; font-size: 0.875rem; color: var(--ink-faint); font-style: italic; font-family: 'Inter', sans-serif; padding: 0 1rem; } /* Table of Contents - Zen Latte Refinement */ .table-of-contents { background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.75rem; /* Reduced masive padding */ margin: 2rem 0 3rem; /* Tightened gaps */ box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .table-of-contents::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--latte); opacity: 0.7; } .toc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .table-of-contents h4 { font-size: 0.85rem; color: var(--latte); margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .table-of-contents ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .table-of-contents li { display: flex; align-items: flex-start; } .table-of-contents li::before { content: "—"; margin-right: 1rem; color: var(--border-strong); opacity: 0.4; } .table-of-contents a { color: var(--ink-muted); text-decoration: none; font-size: 1rem; font-weight: 500; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); line-height: 1.5; } .table-of-contents a:hover { color: var(--latte); transform: translateX(8px); } .disclaimer { margin-top: 4rem; padding: 1rem 1.5rem; background: var(--latte-soft); border-radius: var(--radius-md); font-size: 0.75rem; color: var(--ink-muted); font-style: italic; line-height: 1.6; text-align: center; border: 1px solid var(--latte-border); } .disclaimer strong { font-style: normal; text-transform: uppercase; letter-spacing: 0.05em; color: var(--latte); margin-right: 0.5rem; } /* ============ SIDEBAR — Unified Rules ============ */ /* These classes match exactly what rebuild-all.js generates */ .sidebar { display: flex; flex-direction: column; gap: 1.5rem; max-width: 300px; /* Force strict width */ /* overflow-x: hidden removed to prevent accidental vertical scrollbar */ } .sidebar-widget { background: var(--bg-paper); border-radius: var(--radius-md); padding: 1.5rem; border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); transition: transform 0.3s ease, box-shadow 0.3s ease; } .sidebar-widget:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .sidebar-widget h3 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.25rem; font-family: 'Inter', sans-serif; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-soft); } /* Related Articles List */ .related-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .related-list li { padding: 0.75rem 0; border-bottom: 1px solid var(--border-soft); margin: 0; } .related-list li:last-child { border-bottom: none; padding-bottom: 0; } .related-list a { font-size: 0.875rem; font-weight: 500; color: var(--ink-main); line-height: 1.4; display: block; text-decoration: none; transition: color 0.2s; } .related-list a:hover { color: var(--latte); } .related-list .post-category { font-size: 0.7rem; color: var(--ink-faint); display: block; margin-top: 0.2rem; font-weight: 400; } /* Article Footer Navigation */ .article-footer-nav { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border-soft); } .back-to-library { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; background: var(--bg-paper); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--ink-muted); font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .back-to-library:hover { background: var(--latte-soft); border-color: var(--latte-border); color: var(--latte); transform: translateX(-5px); } .back-to-library svg { transition: transform 0.3s ease; } .back-to-library:hover svg { transform: translateX(-3px); } /* Category List */ .category-list, .categories-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; } .article-wrapper .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cat-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.75rem 0.85rem; border-radius: 14px; font-size: 0.875rem; font-weight: 600; color: var(--ink-main); text-decoration: none; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease; border: 1px solid rgba(220, 200, 185, 0.5); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(252, 247, 242, 0.88)); position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 8px 20px rgba(95, 62, 38, 0.04); } .cat-link::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cat-accent, var(--latte)); opacity: 0.95; box-shadow: 0 0 10px color-mix(in srgb, var(--cat-accent, var(--latte)) 35%, transparent); } .cat-link .cat-label { min-width: 0; line-height: 1.35; padding-left: 0.35rem; letter-spacing: 0.01em; } .cat-link .cat-count { color: #8a6b52; font-size: 0.74rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 2rem; height: 2rem; padding: 0 0.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 233, 223, 0.9)); border: 1px solid rgba(216, 194, 176, 0.7); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 4px 10px rgba(122, 92, 63, 0.06); } .cat-link:hover { transform: translateY(-1px); border-color: rgba(200, 170, 150, 0.7); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 28px rgba(95, 62, 38, 0.08); } .cat-link:hover .cat-count { background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 238, 229, 0.95)); } /* Search Widget — Integrated search bar design */ .search-widget .search-form { display: flex; position: relative; } .search-form input { flex: 1; width: 100%; background: var(--bg-subtle); border: 1px solid var(--border); padding: 0.7rem 2.75rem 0.7rem 1rem; /* right padding for button space */ border-radius: var(--radius-md); color: var(--ink-main); font-size: 0.875rem; font-family: 'Inter', sans-serif; transition: border-color 0.2s, box-shadow 0.2s; outline: none; min-height: 42px; } .search-form input:focus { border-color: var(--latte); box-shadow: 0 0 0 3px var(--latte-soft); } /* Button sits INSIDE the input at the right */ .search-form button { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--ink-faint); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--radius-sm); transition: color 0.2s, background 0.2s; padding: 0; } .search-form button svg { stroke: currentColor; display: block; width: 16px; height: 16px; } .search-form button:hover { color: var(--latte); background: var(--latte-soft); transform: translateY(-50%); /* keep vertical centered on hover */ } /* Sidebar Ad */ .sidebar-ad { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0; overflow: visible; border-radius: var(--radius-md); max-height: none; } .sidebar-ad .ad-slot { width: 100%; display: flex; flex-direction: column; align-items: center; } .sidebar-ad img, .sidebar-ad iframe { max-width: 100%; border-radius: var(--radius-md); display: block; margin: 0 auto; } /* ============ SEARCH HERO ============ */ .search-hero { text-align: center; padding: 2.5rem 2.5rem; background: var(--bg-section); border-bottom: 1px solid var(--border); } /* ============ ABOUT / BRAND STRIP ============ */ .about { background: var(--bg-section); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6rem 2.5rem; text-align: center; margin: var(--section-gap) 0; } .about-inner { max-width: 680px; margin: 0 auto; } .about h2 { font-size: 2rem; margin-bottom: 1rem; } .about p { font-size: 1.05rem; color: var(--ink-muted); } /* ============ CODE BLOCKS (canonical — merged) ============ */ .code-wrapper { position: relative; margin: 1.5rem 0; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-subtle); border: 1px solid var(--border); max-width: 100%; box-sizing: border-box; } .code-wrapper pre { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0; padding: 1.25rem 1.5rem; padding-top: 2.75rem; /* room for copy button */ background: transparent; border: none; } .code-wrapper code { font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 0.875rem; line-height: 1.7; color: var(--ink-dark); white-space: pre; background: none; padding: 0; } .copy-code-btn { position: absolute; top: 0.6rem; right: 0.75rem; background: var(--bg-paper); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.3rem 0.65rem; display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 500; color: var(--ink-muted); cursor: pointer; transition: all 0.2s; font-family: 'Inter', sans-serif; } .copy-code-btn svg { width: 13px; height: 13px; } .copy-code-btn:hover, .copy-code-btn.copied { background: var(--latte-soft); border-color: var(--latte-border); color: var(--latte); } .copy-code-btn svg { width: 13px; height: 13px; } /* ============ FOOTER ============ */ footer { background: var(--bg-section); border-top: 1px solid var(--border); padding: 5rem 2.5rem 2rem; } .footer-inner { max-width: var(--content-max); margin: 0 auto 3.5rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; } .footer-brand .logo-text { font-family: 'Lora', Georgia, serif; font-size: 1.75rem; font-weight: 700; color: var(--ink-dark); letter-spacing: -0.05em; display: block; margin-bottom: 0.75rem; text-decoration: none; } .footer-brand .logo-text span { font-weight: 500; font-style: italic; color: var(--latte); } .footer-brand p { font-size: 0.875rem; color: var(--ink-muted); line-height: 1.75; margin-bottom: 1.25rem; margin-top: 0; } .footer-brand .footer-telegram { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--latte); text-decoration: none; transition: opacity 0.2s; } .footer-brand .footer-telegram:hover { opacity: 0.75; } .footer-col h4 { font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); margin: 0 0 1rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; } .footer-col li { margin: 0; } .footer-col a { font-size: 0.875rem; color: var(--ink-muted); text-decoration: none; transition: color 0.2s, transform 0.2s; display: inline-block; } .footer-col a:hover { color: var(--latte); transform: translateX(3px); } .footer-bottom { max-width: var(--content-max); margin: 0 auto; border-top: 1px solid var(--border); padding-top: 1.75rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; } footer p { font-size: 0.85rem; color: var(--ink-faint); margin: 0; line-height: 1.6; } footer a { color: var(--ink-muted); font-weight: 500; transition: color 0.2s; text-decoration: none; } footer a:hover { color: var(--ink-dark); } @media (max-width: 960px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 600px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; } footer { padding: 3rem 1.5rem 1.5rem; } .footer-bottom { flex-direction: column; text-align: center; gap: 0.5rem; } } /* ============ STATIC LAYOUT ============ */ .static-layout { max-width: 800px; margin: 4rem auto; padding: 0 1.5rem; min-height: 60vh; } /* ============ LEGAL PAGES ============ */ .legal-page { padding: 4rem; background: var(--bg-paper); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-card); } .legal-page h1 { font-size: 2.4rem; margin-bottom: 0.5rem; color: var(--ink-dark); } .last-updated { font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); display: block; } .legal-page h2 { font-size: 1.3rem; margin: 2.5rem 0 0.75rem; } .legal-page p { font-size: 1rem; color: var(--ink-muted); } /* ============ CONTACT PAGE ============ */ .contact-page { padding: 4rem; background: var(--bg-paper); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-card); text-align: center; } .contact-page h1 { font-size: 2.4rem; margin-bottom: 1rem; color: var(--ink-dark); } .contact-page p { font-size: 1.05rem; color: var(--ink-muted); margin-bottom: 2.5rem; } .contact-links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .contact-btn { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1.75rem; background: var(--bg-paper); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--ink-main); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: all 0.25s ease; box-shadow: var(--shadow-sm); } .contact-btn:hover { background: var(--bg-subtle); border-color: var(--latte-border); color: var(--ink-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* ============ 404 PAGE ============ */ .error-page { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 2rem; } .error-page h1 { font-size: 6rem; margin-bottom: 1rem; } .error-page p { font-size: 1.1rem; color: var(--ink-muted); } /* ============ ARTICLE SUB-COMPONENTS ============ */ /* Disclaimer box */ .disclaimer-box { background: var(--latte-soft); border-left: 3px solid var(--latte); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 1rem 1.5rem; margin-bottom: 2.5rem; font-size: 0.95rem; } .disclaimer-box p { margin: 0; color: var(--ink-muted); font-size: 0.95rem; line-height: 1.6; } /* Images & figures — canonical rules above (~line 748) */ /* Author box */ .author-box { display: flex; align-items: center; gap: 1.5rem; margin-top: 4rem; padding: 2rem; background: var(--bg-paper); border-radius: var(--radius-lg); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); } .author-avatar { font-size: 2.5rem; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--latte-soft); border-radius: 50%; flex-shrink: 0; } .author-info h4 { font-size: 0.95rem; font-weight: 600; color: var(--ink-dark); margin-bottom: 0.35rem; } .author-info p { font-size: 0.875rem; color: var(--ink-faint); margin: 0; line-height: 1.5; } /* HR divider in articles */ .article-content hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; } /* Ad slots in articles */ .ad-slot { margin: 2rem 0; text-align: center; width: 100%; max-width: 100%; /* #V.A.T: Essential for mobile safety */ overflow: visible; /* Keep ad frames visible inside their containers */ } .ad-slot-label { display: block; margin-bottom: 0.6rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } .ad-slot-group { width: 100%; overflow: visible; } .ad-slot-desktop-only { display: block !important; } .ad-slot-mobile-only { display: none !important; } .ad-native-inline { width: 100%; min-height: 250px; background: var(--bg-subtle); border: none; border-radius: var(--radius-md); padding: 1.5rem 0; margin: 2rem 0; display: flex; align-items: center; justify-content: center; overflow: visible; } .ad-slot iframe { max-width: 100% !important; height: auto !important; margin: 0 auto; display: block; } .ad-slot-in-content { min-height: 250px; background: rgba(45, 27, 20, 0.02); /* Very subtle ivory */ padding: 1.5rem 0; margin: 2rem 0; display: block; overflow: visible; } .ad-slot-bottom { min-height: 90px; background: rgba(45, 27, 20, 0.02); padding: 1.25rem 0; margin: 2rem 0; display: flex; justify-content: center; align-items: center; max-width: 100%; overflow: visible; } .ad-slot-bottom iframe { display: block; } .ad-slot-sidebar { width: 100%; min-height: 250px; background: var(--bg-subtle); border-radius: var(--radius-md); padding: 1.5rem 0; display: block; text-align: center; overflow: visible; } .ad-slot-sidebar-bottom { width: 100%; min-height: 250px; background: var(--bg-subtle); border-radius: var(--radius-md); padding: 1.5rem 0; display: block; text-align: center; overflow: visible; } /* Mobile Ad Padding Adjustments */ @media (max-width: 850px) { .ad-slot-bottom, .ad-slot-in-content { margin: 1.5rem 0; } } /* Legal page lists */ .legal-page ul, .legal-page ol { padding-left: 1.5rem; margin: 0.5rem 0 1.5rem; } .legal-page li { font-size: 1rem; color: var(--ink-muted); margin-bottom: 0.45rem; line-height: 1.65; } .legal-page h3 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; color: var(--ink-main); } .legal-page blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; font-size: 0.95rem; } /* ============ ZEN BG (UNUSED, still safe) ============ */ .zen-bg { display: none; } .animated-bg { display: none; } .aurora { display: none; } .particles { display: none; } .particle { display: none; } /* Share section */ .share-section { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 3rem 0; padding: 1.5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border-soft); } .share-section::before { content: 'Share Tutorial:'; font-size: 0.75rem; font-weight: 600; color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase; width: 100%; margin-bottom: 0.5rem; } .share-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.2rem; border-radius: 99px; font-size: 0.85rem; font-weight: 500; text-decoration: none; border: 1px solid var(--border); background: var(--bg-paper); color: var(--ink-muted); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .share-btn svg { width: 16px; height: 16px; } .share-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--ink-dark); } .share-telegram:hover { background: #f0f7ff; border-color: #b3d7ff; color: #0088cc; } .share-whatsapp:hover { background: #f0fff4; border-color: #b2f5ea; color: #25d366; } .share-twitter:hover { background: #f5f5f5; border-color: #e2e8f0; color: #000000; } .share-copy:hover { background: var(--latte-soft); border-color: var(--latte-border); color: var(--latte); } @media (max-width: 480px) { .share-btn { flex: 1 1 calc(50% - 0.75rem); justify-content: center; font-size: 0.8rem; padding: 0.5rem 0.75rem; } } @media (max-width: 1024px) { .pillars { grid-template-columns: repeat(3, 1fr); } .post-list { grid-template-columns: repeat(2, 1fr); } .sidebar { /* Sticky removed */ } .article-wrapper { grid-template-columns: minmax(0, 1fr) 280px; gap: 2rem; } /* #V.A.T Mission #2: Tablet Readability Boost */ .article-content p { line-height: 1.88; font-size: 1rem; } } @media (max-width: 1150px) { .hamburger { display: flex; } /* Mobile / Tablet Adjustments */ .article-wrapper { margin-top: 1rem; padding-top: 0; } .nav-links { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(251, 247, 244, 0.96); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); flex-direction: column; justify-content: flex-start; align-items: center; padding-top: 5rem; /* Reduced from 8rem to fit more links */ padding-bottom: 3rem; gap: 0.5rem; /* Tighter gap */ overflow-y: auto; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1500; } .nav-links.active { transform: translateX(0); } .nav-links a { font-size: 1.05rem; padding: 0.55rem 1rem; } .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .article-wrapper { grid-template-columns: 1fr; } .sidebar { position: static; max-width: none; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .sidebar > .sidebar-ad { grid-column: 1 / -1; } } /* ============ READING PROGRESS BAR ============ */ .reading-progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: transparent; z-index: 2100; } .reading-progress-bar { height: 100%; background: var(--latte); width: 0%; box-shadow: 0 0 8px rgba(155, 123, 101, 0.4); transition: width 0.1s linear; } /* ============ BREADCRUMBS ============ */ .breadcrumbs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; /* Force left alignment */ gap: 0.6rem; font-size: 0.75rem; font-weight: 500; color: var(--ink-faint); margin-bottom: -1rem; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.4; } .breadcrumbs a { color: var(--ink-muted); text-decoration: none; transition: color 0.2s; } .breadcrumbs a:hover { color: var(--latte); } .breadcrumbs .sep { color: var(--border-strong); font-weight: 300; } .breadcrumbs .current { color: var(--ink-faint); pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; /* increased for better visibility */ } /* Image animations — merged into canonical rule above (~line 753) */ /* ============ RESPONSIVE: 768px ============ */ @media (max-width: 768px) { :root { --section-gap: 5rem; } nav { padding: 1.25rem 1.5rem; } .hero { padding: 2.5rem 1.25rem 3.5rem; } .pillars { grid-template-columns: 1fr !important; padding: 0 1.5rem; gap: 1.5rem !important; } .pillar-card { padding: 1.75rem 1.25rem; border-radius: var(--radius-lg); } .post-list { grid-template-columns: 1fr; } .latest-posts { padding: 0 1.5rem; } .article-wrapper { padding: 0 1.25rem; margin: 1.5rem auto 2.5rem; } .sidebar { grid-template-columns: 1fr; gap: 1rem; } .article-page { padding: 0 1rem 1.75rem; } .article-hero-card { margin: 0 -1rem 1.75rem; } .article-header-banner { min-height: 250px; padding: 1.75rem 1.25rem 1.5rem; } .article-header h1 { font-size: clamp(1.8rem, 7vw, 2.8rem); /* Slightly smaller on mobile to avoid cutoff */ line-height: 1.2; } /* #V.A.T Mission: Mobile Gap Fixing */ .ad-slot-in-content, .ad-slot-bottom { padding: 0.5rem 0 !important; margin: 1.5rem 0 !important; } .ad-slot-in-content { min-height: 290px !important; } .ad-slot-bottom { min-height: 60px !important; } .ad-slot-desktop-only { display: none !important; } .ad-slot-mobile-only { display: block !important; } #ad-article-mobile-300, #ad-sidebar-bottom-mobile-native, #ad-sidebar-top, #ad-bottom-mobile { display: block !important; width: 100% !important; max-width: 100% !important; } #ad-article-mobile-300 { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: var(--radius-md); } .ad-slot-in-content iframe, .ad-slot-sidebar iframe { min-height: 250px !important; height: 250px !important; width: 300px !important; max-width: 100% !important; display: block !important; margin: 0 auto !important; } #ad-bottom-mobile iframe { min-height: 50px !important; height: 50px !important; width: 320px !important; max-width: 100% !important; display: block !important; margin: 0 auto !important; } #ad-article-mobile-300 iframe, #ad-sidebar-bottom-mobile-native iframe, #ad-bottom-responsive iframe, #ad-sidebar-top iframe { max-width: 100% !important; height: auto !important; margin: 0 auto; } .sidebar-ad { display: block; } .legal-page, .contact-page { padding: 2rem 1.5rem; margin: 3rem 1.5rem; } } /* ---- Ad Animation & Stability ---- */ .ad-slot { opacity: 0; transition: opacity 0.8s ease-in-out; display: flex; flex-direction: column; align-items: center; width: 100%; overflow: visible; } .ad-slot.ad-loaded { opacity: 1; } .ad-preview-box { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.35rem; width: 100%; min-width: 220px; min-height: 180px; padding: 1rem; box-sizing: border-box; border: 1px dashed rgba(139, 115, 85, 0.32); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(251, 246, 240, 0.92)), radial-gradient(circle at top, rgba(227, 212, 199, 0.45), transparent 65%); color: var(--ink-muted); text-align: center; overflow: hidden; } .ad-preview-title { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); } .ad-preview-size { font-size: 1rem; font-weight: 700; color: var(--ink-dark); } .ad-preview-note { max-width: 18rem; font-size: 0.82rem; line-height: 1.45; } .ad-provider-slot { width: 100%; } .ad-slot-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); margin-bottom: 0.75rem; font-weight: 600; width: 100%; text-align: center; } .ad-slot.ad-empty, .ad-slot-group.ad-empty, .sidebar-ad.ad-empty { display: none !important; } /* ============ RESPONSIVE: 480px ============ */ @media (max-width: 480px) { :root { --section-gap: 4rem; } .pillars { grid-template-columns: 1fr; } .hero h1 { font-size: 2.2rem; } } /* ============ BACK TO TOP BUTTON (#11) ============ */ #back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 44px; border-radius: 50%; background: var(--latte); color: white; border: none; font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(155, 123, 101, 0.35); opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; z-index: 1000; } #back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } #back-to-top:hover { background: var(--latte-light); transform: translateY(-2px); } /* ============ NAV SEARCH ICON (#20) ============ */ .nav-search-icon { display: flex; align-items: center; padding: 0.4rem !important; margin-left: 0.5rem; border-radius: 50% !important; background: var(--bg-subtle) !important; } .nav-search-icon:hover { background: var(--latte-soft) !important; color: var(--latte) !important; } .nav-search-icon svg { stroke: var(--ink-muted); transition: stroke 0.2s; } .nav-search-icon:hover svg { stroke: var(--latte); } /* ============ NAV SPACING FIX (#21) ============ */ @media (min-width: 1200px) { nav { padding: 1.25rem 4rem; } .nav-links { gap: 0.25rem; } } /* ============ AD TABLET FIX ============ */ /* At narrow widths: allow iframe to scale down naturally */ @media (max-width: 1159px) { .ad-slot iframe, .ad-provider-slot iframe { max-width: 100% !important; height: auto !important; margin: 0 auto; } } /* Duplicate reveal rules removed for consolidation (merged with line 759) */ .float { animation: zenFloat 8s ease-in-out infinite; } @keyframes zenFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .card-hover { transition: all 0.4s ease; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 15px 45px rgba(45, 27, 20, 0.08); } .btn-press { transition: transform 0.2s ease; } .btn-press:active { transform: scale(0.96); } /* ============ ARTICLE OVERRIDES (Consolidated) ============ */ .article-header.universal-header-bg { position: relative; padding: 4rem; margin: 0 0 3rem 0; /* #V.A.T: Removed legacy negative margins to fix mobile overflow */ background: url('../img/universal-banner.webp') no-repeat center center; /* #V.A.T: Using WebP */ background-size: cover; border-bottom: 1px solid var(--border); } .article-header.universal-header-bg::before { content: ''; position: absolute; inset: 0; backdrop-filter: blur(3px) saturate(1.18); -webkit-backdrop-filter: blur(3px) saturate(1.18); background: linear-gradient(to bottom, rgba(251, 247, 244, 0.14) 0%, rgba(251, 247, 244, 0.74) 100%); z-index: 0; } .article-header.universal-header-bg h1, .article-header.universal-header-bg .article-meta { position: relative; z-index: 1; } @media (max-width: 500px) { .pillars { grid-template-columns: 1fr !important; gap: 1rem !important; } } /* ============ SEARCH PAGE PREMIUM STYLING ============ */ .search-page main { padding-top: 4rem; padding-bottom: 8rem; min-height: 70vh; } .search-hero { text-align: center; margin-bottom: 4rem; } .search-hero h1 { font-size: 3.5rem; margin-bottom: 1rem; color: var(--ink-dark); } .search-hero h1 span { color: var(--latte); font-family: 'Lora', serif; font-style: italic; font-weight: 500; } .search-container { max-width: 700px; margin: 3rem auto 0; } .search-form-large { display: flex; gap: 0.75rem; background: var(--bg-paper); padding: 0.6rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-ambient); border: 1px solid var(--border-soft); transition: all 0.3s ease; } .search-form-large:focus-within { box-shadow: var(--shadow-floating); border-color: var(--latte-soft); transform: translateY(-2px); } .search-form-large input { flex: 1; border: none; background: transparent; padding: 0.8rem 1.5rem; font-family: 'Inter', sans-serif; font-size: 1.1rem; color: var(--ink-dark); outline: none; } .search-form-large button { background: var(--latte); color: white; border: none; padding: 0.8rem 2.5rem; border-radius: var(--radius-md); font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .search-form-large button:hover { background: var(--ink-dark); transform: translateY(-1px); } .search-status { text-align: center; margin-bottom: 3rem; font-size: 0.95rem; color: var(--ink-muted); font-style: italic; } @media (max-width: 768px) { .search-hero { margin-bottom: 3rem; } .search-hero h1 { font-size: 2.5rem; } .search-form-large { flex-direction: column; padding: 1rem; } .search-form-large button { width: 100%; } } /* --- SOCIAL SHARE BUTTONS (ZEN LATTE PREMIUM) --- */ .share-buttons { margin: 1.75rem 0 1.5rem; padding: 0.9rem 0 0; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; background: transparent; box-shadow: none; } .share-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 0.75rem; } .share-icons { display: flex; justify-content: flex-start; gap: 0.5rem; flex-wrap: wrap; } .share-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 92px; height: 38px; padding: 0 0.9rem; border-radius: 999px; background: rgba(255, 255, 255, 0.72); color: var(--ink-muted); border: 1px solid var(--border-soft); transition: all 0.22s ease; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); gap: 0.45rem; text-decoration: none; font-size: 0.84rem; font-weight: 600; white-space: nowrap; } .share-btn svg { width: 17px; height: 17px; } .share-btn span { line-height: 1; } .share-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.85); border-color: var(--border); color: var(--ink-dark); box-shadow: var(--shadow-sm); } .share-btn.x:hover { color: #000000; } .share-btn.telegram:hover { color: #0088cc; } .share-btn.linkedin:hover { color: #0077b5; } .share-btn.copy:hover { color: #2e7d32; } @media (max-width: 768px) { .share-buttons { margin: 1.75rem 0 1.5rem; flex-direction: column; align-items: flex-start; } .share-icons { justify-content: flex-start; } .share-btn { min-width: 0; width: auto; height: 34px; padding: 0 0.75rem; } .share-btn span { display: inline; } } /* Compact share block kept intentionally light to match article spacing */