/* ===== Blog & Content Pages Styles ===== */ /* ===== Pagination Styles ===== */ .pagination-container { display: flex; flex-direction: row-reverse; gap: var(--sp-4); } [dir="rtl"] .pagination-container { flex-direction: row; } .pagination-link { align-items: center; text-decoration: none; font-weight: bold; transition: all var(--transition-normal); padding: var(--sp-1) var(--sp-4); border-radius: var(--border-radius); background-color: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; text-align: center; overflow: hidden; text-overflow: ellipsis; max-width: var(--sp-64); position: relative; border: 1px solid var(--border); vertical-align: middle; display: inline-flex; justify-content: center; } .pagination-link span { -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; white-space: normal; align-items: center; margin: 0 10px; text-decoration: none; direction: rtl; } .pagination-link:hover, .pagination-link:focus { color: var(--accent); background-color: var(--surface-3); transform: translateY(-2px); box-shadow: var(--shadow); } .pagination-link:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .pagination-link svg { width: 24px; height: 24px; fill: currentColor; transition: transform var(--transition-normal); } .pagination-link.prev svg { margin-right: var(--sp-2); } .pagination-link.next svg { margin-left: var(--sp-2); } .pagination-link:hover svg { transform: scale(1.1); } .pagination-link svg { fill: #0052B8; vertical-align: middle; } .pagination-link.next { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 30 30"><path fill="%23808080" d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M19.707,15.707l-6,6 C13.512,21.902,13.256,22,13,22s-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414L17.586,15l-5.293-5.293 c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0l6,6C20.098,14.684,20.098,15.316,19.707,15.707z"></path></svg>'); background-repeat: no-repeat; background-size: 40px 40px; background-position: right 8px center; padding-right: var(--sp-12); } .pagination-link.prev { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 30 30"><path fill="%23ff9607" d="M15,27c6.627,0,12-5.373,12-12c0-6.627-5.373-12-12-12S3,8.373,3,15C3,21.627,8.373,27,15,27z M10.293,14.293l6-6 C16.488,8.098,16.744,8,17,8s0.512,0.098,0.707,0.293c0.391,0.391,0.391,1.023,0,1.414L12.414,15l5.293,5.293 c0.391,0.391,0.391,1.023,0,1.414s-1.023,0.391-1.414,0l-6-6C9.902,15.316,9.902,14.684,10.293,14.293z"></path></svg>'); background-repeat: no-repeat; background-size: 40px 40px; background-position: left 8px center; fill: var(--accent); padding-left: var(--sp-12); } /* ===== Blog Layout ===== */ main { display: flex; gap: 0; max-width: 100%; margin: 0 auto !important; padding: 0; margin-right: 400px; margin-left: var(--sp-12); justify-content: center; background-color: unset; box-shadow: unset; margin-inline: calc(50% - 50vw); } .main-content { flex: 1; margin-top: var(--sp-6); width: 100%; transition: margin-right var(--transition-normal); } /* ===== Aside/TOC Panel Styling ===== */ #toc { display: none; position: fixed; top: var(--header-height); left: -330px; /* Hide off-screen initially */ width: 330px; background-color: var(--surface); padding: var(--sp-6); box-shadow: var(--shadow-md); transition: right var(--transition-normal); overflow-y: auto; z-index: 10; border-radius: var(--border-radius); border: 1px solid var(--border); /* max-height: calc(100vh - var(--header-height) - var(--sp-8)); */ } /* Hover area for TOC */ .hover-area { position: fixed; left: 0; top: 0; width: 20px; height: calc(100vh - var(--header-height)); background: transparent; cursor: pointer; } /* Fix for TOC hover behavior */ .hover-area:hover + #toc { left: 0; } #toc:hover { left: 0; } [dir="rtl"] #toc { right: -330px; left: auto; } [dir="rtl"] .hover-area { right: 0; left: auto; } [dir="rtl"] .hover-area:hover + #toc { right: 0; } [dir="rtl"] #toc:hover { right: 0; } /* Table of Contents Styling */ #toc h2 { margin-top: 0; font-size: 1.2rem; margin-bottom: var(--sp-3); color: var(--text); font-family: var(--font-display); } /* Unordered List Styling */ .toc, .toc ul { list-style-type: none; padding-right: 0; margin-right: 0; } .toc ul { padding-right: var(--sp-6); } /* List Item Styling */ .toc li { margin-bottom: var(--sp-2); } /* Link Styling */ .toc a { color: var(--text-secondary); text-decoration: none; display: inline-block; padding: var(--sp-1) 0; transition: all var(--transition-fast); font-size: 0.95rem; } .toc a:hover { color: var(--primary); } /* Active Link Styling */ .toc a.active { color: var(--primary); font-weight: 600; } /* Nested Level Indicators */ .toc > li > a::before { content: "•"; color: var(--primary); display: inline-block; width: 1em; margin-right: var(--sp-2); } .toc > li > ul > li > a { display: block; } .toc > li > ul > li > a::before { content: "◦"; color: var(--text-secondary); } .toc > li > ul > li > ul > li > a::before { content: "▪"; color: var(--text-tertiary); font-size: 0.8em; } /* ===== Hover Indicator Arrow ===== */ .hint-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; animation: pulse 1.5s infinite alternate; opacity: 0.7; transition: opacity var(--transition-normal); z-index: 11; color: var(--primary); transform: rotate(180deg); } [dir="rtl"] .hint-arrow { transform: translateY(-50%) scaleX(-1); } /* Arrow animation */ @keyframes pulse { 0% { transform: translateY(-50%) translateX(0); opacity: 0.5; } 100% { transform: translateY(-50%) translateX(5px); opacity: 1; } } /* Hide arrow when TOC is shown */ .hover-area:hover .hint-arrow, #toc:hover ~ .hint-arrow { display: none; } /* ===== Blog Content Styling ===== */ section:not(.blog-hero) { max-width: min(100%, 800px); margin: 0 auto; padding: var(--sp-6); background-image: linear-gradient(to top, var(--surface-2) 0, transparent 90%); border-radius: var(--border-radius); } /* Typography for blog content */ section p { margin-bottom: var(--sp-4); line-height: 1.8; font-size: 1.05rem; color: var(--text); } section h1 { font-size: 2.5rem; margin: var(--sp-8) 0 var(--sp-6); color: var(--text); font-family: var(--font-display); line-height: 1.2; } section h2 { font-size: 2rem; margin: var(--sp-8) 0 var(--sp-4); color: var(--text); font-family: var(--font-display); /* border-bottom: 2px solid var(--border); */ padding-bottom: var(--sp-2); } section h3 { font-size: 1.5rem; margin: var(--sp-6) 0 var(--sp-3); color: var(--text); font-family: var(--font-display); } section h4 { font-size: 1.25rem; margin: var(--sp-4) 0 var(--sp-2); color: var(--text); font-family: var(--font-display); } section h5, section h6 { font-size: 1.1rem; margin: var(--sp-4) 0 var(--sp-2); color: var(--text); font-family: var(--font-display); } section ul, section ol { margin: 0 0 var(--sp-6) var(--sp-6); padding-right: var(--sp-4); } section li { margin-bottom: var(--sp-2); line-height: 1.7; } section blockquote { margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-6); border-left: 4px solid var(--primary); background: var(--surface-2); border-radius: var(--border-radius); font-style: italic; } section blockquote p { margin-bottom: var(--sp-3); } section blockquote p:last-child { margin-bottom: 0; } section code { font-family: monospace; background: var(--surface-2); padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; } section pre { margin: var(--sp-6) 0; padding: var(--sp-4); border-radius: var(--border-radius); background: var(--surface-2); overflow-x: auto; } section pre code { background: transparent; padding: 0; border-radius: 0; } section a { color: var(--primary); text-decoration: underline; text-decoration-color: rgba(0, 112, 243, 0.4); text-underline-offset: 2px; transition: all var(--transition-fast); } section a:hover { color: var(--primary-dark); text-decoration-color: var(--primary); } section hr { margin: var(--sp-8) 0; border: none; height: 1px; background-color: var(--border); } /* Images in blog posts */ section img:not(.blog-hero-image img) { max-width: 100%; margin: 0 auto; display: block; border-radius: var(--border-radius); box-shadow: var(--shadow); } section figure { margin: var(--sp-8) 0; } section figcaption { text-align: center; margin-top: var(--sp-2); font-size: 0.9rem; color: var(--text-secondary); } /* Tables in blog posts */ section table { width: 100%; border-collapse: collapse; margin: var(--sp-6) 0; border-radius: var(--border-radius); overflow: hidden; } section th { background-color: var(--surface-2); padding: var(--sp-3); text-align: left; font-weight: 600; color: var(--text); border-bottom: 2px solid var(--border); } section td { padding: var(--sp-3); border-bottom: 1px solid var(--border); } section tr:last-child td { border-bottom: none; } section tr:nth-child(even) { background-color: var(--surface-2); } /* ===== Menu Styles ===== */ #mainMenu > li > a { text-decoration: none; border-radius: var(--border-radius); transition: all var(--transition-normal); position: relative; font-weight: 500; } #mainMenu > li > a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 50%; background-color: var(--accent); transition: all var(--transition-normal); } #mainMenu > li > a:hover::after { width: 100%; left: 0; } #mainMenu > li > a:not(#logo):hover { color: var(--accent); transform: translateY(-2px); } #menuControls { display: flex; align-items: center; gap: var(--sp-4); } #toggleMenu { background: none; border: none; cursor: pointer; padding: var(--sp-2); border-radius: 50%; transition: background-color var(--transition-fast); } #toggleMenu:hover { background-color: var(--surface-2); } /* Submenu Styling */ #mainMenu > li { position: relative; /* To position submenu relative to parent */ } #mainMenu > li > a { display: block; text-decoration: none; } main .submenu { list-style: none; display: none; /* Hidden by default */ position: absolute; top: 100%; /* Position below the parent menu */ left: 0; background-color: var(--surface); box-shadow: var(--shadow-md); padding: 0; margin: 0; min-width: 150px; z-index: var(--z-dropdown); border-radius: var(--border-radius); border: 1px solid var(--border); /* avoid too long lists out of the screen */ max-height: 90vh; overflow-y: auto; } main .submenu li { border-bottom: 1px solid var(--border); } main .submenu li:last-child { border-bottom: none; } main .submenu li a { display: block; padding: var(--sp-3) var(--sp-4); text-decoration: none; color: var(--text); white-space: nowrap; /* Prevent text wrapping */ transition: all var(--transition-fast); } main .submenu li a:hover { background-color: var(--surface-2); color: var(--primary); } /* Show submenu on hover */ #mainMenu > li:hover .submenu { display: block; } /* Fix for code blocks in RTL context */ pre[class*=language-] { direction: ltr !important; } /* ===== Dark Mode Styles ===== */ @media (prefers-color-scheme: dark) { .pagination-link:hover, .pagination-link:focus { color: var(--accent); background-color: var(--surface-3); } #toc { background-color: var(--surface); border-color: var(--border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } .toc a:hover { color: var(--accent); } .toc a.active { color: var(--accent); } .toc > li > a::before { color: var(--accent); } .hint-arrow { opacity: 0.5; color: var(--accent); filter: invert(1); } section { background-image: linear-gradient(to bottom, var(--surface-2) 0, transparent 90%); } section blockquote { border-left-color: var(--accent); background: var(--surface-2); } section a { color: var(--accent); text-decoration-color: rgba(0, 199, 183, 0.4); } section a:hover { color: var(--accent); text-decoration-color: var(--accent); } section th { background: linear-gradient(to right, var(--surface-3), var(--surface-2)); color: var(--text); } #toggleMenu:hover { background-color: var(--surface-2); } main .submenu li a:hover { background-color: var(--surface-2); color: var(--accent); } } [dir="rtl"] .toc, [dir="rtl"] .toc ul { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } [dir="rtl"] .toc ul { padding-left: 0; padding-right: var(--sp-6); } [dir="rtl"] .toc > li > a::before { margin-right: 0; margin-left: var(--sp-2); } /* Keep TOC sidebar on the right for RTL - just adjust internal alignments */ [dir="rtl"] .toc { text-align: right; } [dir="rtl"] .hint-arrow { transform: translateY(-50%) scaleX(-1); } [dir="rtl"] section:not(.blog-hero) { text-align: right; background-image: linear-gradient(to top, var(--surface-2) 0, transparent 90%); } @media (prefers-color-scheme: dark) { [dir="rtl"] section { background-image: linear-gradient(to bottom, var(--surface-2) 0, transparent 90%); } } [dir="rtl"] section blockquote { border-left: none; border-right: 4px solid var(--primary); } @media (prefers-color-scheme: dark) { [dir="rtl"] section blockquote { border-right-color: var(--accent); } } [dir="rtl"] section ul, [dir="rtl"] section ol { margin: 0 var(--sp-6) var(--sp-6) 0; padding-left: var(--sp-4); padding-right: 0; } [dir="rtl"] #mainMenu > li > a::after { left: auto; right: 50%; } [dir="rtl"] #mainMenu > li > a:hover::after { width: 100%; right: 0; } [dir="rtl"] .submenu { left: auto; right: 0; } [dir="rtl"] section th { text-align: right; } /* RTL gradient direction optimization */ [dir="rtl"] section h2::after { background: linear-gradient(to left, var(--primary), transparent); } @media (prefers-color-scheme: dark) { [dir="rtl"] section h2::after { background: linear-gradient(to left, var(--accent), transparent); } } [dir="rtl"] section th { background: linear-gradient(to left, var(--primary), transparent 95%); } @media (prefers-color-scheme: dark) { [dir="rtl"] section th { background: linear-gradient(to left, var(--accent), transparent 95%); } } @media (prefers-color-scheme: dark) { [dir="rtl"] section pre { background: linear-gradient(to left, var(--surface-2), var(--surface-3)); } } /* ===== Responsive Adjustments ===== */ @media screen and (min-width: 1820px) { #toc { left: 0; width: 18rem; } .hover-area { display: none; } section:not(.blog-hero) { max-width: 900px !important; padding: var(--sp-8) !important; } [dir="rtl"] .main-content { margin-right: 0; } [dir="rtl"] #toc { right: 0; left: auto; } } @media screen and (max-width: 1330px) { main { margin-inline: var(--sp-6); } } @media screen and (max-width: 780px) { main { flex-direction: column; margin: 0 auto !important; overflow: hidden; } .main-content { margin-left: 0; } #toc { position: static; width: 100%; padding: var(--sp-4); height: auto; overflow-y: visible; right: 0; border-radius: 0; } .hover-area { display: none !important; } } @media (max-width: 768px) { .pagination-container { flex-direction: column; /* align-items: stretch; */ margin-top: var(--sp-6); flex-direction: column; gap: 16px; margin: 0 auto; } .pagination-link { width: 100%; max-width: 90%; text-align: center !important; margin: 0 auto; min-height: 54px; padding-left: var(--sp-12); padding-right: var(--sp-12); } [dir="rtl"] .pagination-container { flex-direction: column; } /* .pagination-link.prev, .pagination-link.next { text-align: center; padding: var(--sp-3) var(--sp-4); } */ section { padding: var(--sp-4); } } /* ===== Premium Content Enhancements ===== */ /* Improved typography with better spacing */ section p { font-size: clamp(1rem, 1.1vw, 1.1rem); line-height: 1.8; letter-spacing: 0.01em; } /* Premium Blockquote Style */ section blockquote { border-left: none; border-radius: var(--border-radius-lg); background: linear-gradient(120deg, var(--surface-2), var(--surface-3)); box-shadow: var(--shadow-sm); padding: var(--sp-6) var(--sp-8); position: relative; border-left: 4px solid var(--primary); } [dir="rtl"] section blockquote { border-left: none; border-right: 4px solid var(--primary); } section blockquote::before { content: '"'; position: absolute; top: -0.5rem; left: 1rem; font-size: 4rem; color: var(--primary); opacity: 0.2; font-family: var(--font-display); } [dir="rtl"] section blockquote::before { left: auto; right: 1rem; } @media (prefers-color-scheme: dark) { section blockquote { background: linear-gradient(120deg, var(--surface-2), var(--surface-3)); border-left-color: var(--accent); } [dir="rtl"] section blockquote { border-right-color: var(--accent); } section blockquote::before { color: var(--accent); } } /* Premium Code Block Styling */ section pre { border-radius: var(--border-radius-lg); box-shadow: var(--shadow); border: 1px solid var(--border); background: linear-gradient(to right, var(--surface-2), var(--surface)); } @media (prefers-color-scheme: dark) { section pre { background: linear-gradient(to right, var(--surface-2), var(--surface-3)); } } /* Premium Heading Styles */ section h2 { position: relative; overflow: hidden; padding-bottom: var(--sp-3); } section h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, var(--primary), transparent); } @media (prefers-color-scheme: dark) { section h2::after { background: linear-gradient(to right, var(--accent), transparent); } } /* Premium Image Styles */ section img { box-shadow: var(--shadow-lg); transition: transform 0.3s ease, box-shadow 0.3s ease; } /* section img:hover { transform: scale(1.02); box-shadow: var(--shadow-xl); } */ /* Premium Table Styling */ section table { box-shadow: var(--shadow); border: 1px solid var(--border); border-radius: var(--border-radius-lg); overflow: hidden; } section th { background: linear-gradient(to right, var(--primary), transparent 95%); color: white; border-bottom: none; padding: var(--sp-4); } @media (prefers-color-scheme: dark) { section th { background: linear-gradient(to right, var(--accent), transparent 95%); } } /* Improved link styling */ section a { position: relative; text-decoration: none; font-weight: 500; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size 0.3s; } section a:hover { background-size: 100% 2px; } /* Premium TOC styling */ #toc { border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); } @media (prefers-reduced-motion: reduce) { .pagination-link, section img, .hint-arrow, #toc { transition: none !important; animation: none !important; } .pagination-link:hover, .pagination-link:focus { transform: none; } section img:hover { transform: none; } } /* ===== Clean Blog Hero Section ===== */ :root { --hero-accent: var(--primary); --hero-height: minmax(380px, 45vh); --hero-text: #333333; --hero-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); --hero-image-border: 1px solid rgba(0, 0, 0, 0.08); --hero-transition: all 0.3s ease; --hero-bg-image: none; --hero-bg-overlay: rgba(0, 0, 0, 0.197); --hero-content-bg: rgba(255, 255, 255, 0.9); --hero-text-secondary: #555555; } @media (prefers-color-scheme: dark) { :root { --hero-text: #f0f0f0; --hero-text-secondary: #d0d0d0; --hero-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); --hero-image-border: 1px solid rgba(255, 255, 255, 0.05); --hero-bg-overlay: rgba(0, 0, 0, 0.814); --hero-content-bg: rgba(17, 25, 39, 0.85); } } .hero { padding-top: var(--sp-6); } /* Main hero container */ .blog-hero { position: relative; min-height: var(--hero-height); display: flex; align-items: center; justify-content: center; background-color: var(--surface); box-shadow: var(--hero-shadow); text-align: center; /* padding: var(--sp-6) var(--sp-3); */ background-size: cover; background-position: center; background-repeat: no-repeat; transition: background var(--hero-transition); box-shadow: var(--shadow); width: 100%; } /* Main content container - simplified */ .blog-hero-container { width: min(100%, 1520px); margin: 0 auto; position: relative; z-index: 2; display: flex; flex-direction: row-reverse; align-items: center; padding: var(--sp-6); gap: var(--sp-6); max-width: 100%; } /* Content area - simplified for text-centric layout */ .blog-hero-content { /* background-color: var(--hero-content-bg); */ /* backdrop-filter: blur(5px); */ /* border-radius: var(--border-radius); */ width: 100%; /* box-shadow: var(--shadow); border: 1px solid var(--border); */ } .hero-image { aspect-ratio: unset; } .hero-image { position: relative; width: 100%; border-radius: var(--border-radius-lg); overflow: hidden; transform: perspective(1000px) rotateY(-5deg) rotateX(5deg); transition: transform 0.5s ease; box-shadow: var(--shadow-lg); } [dir="rtl"] .hero-image { transform: perspective(1000px) rotateY(5deg) rotateX(5deg); } .hero-image:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); } /* Category badge */ .blog-category-badge { font-size: 0.85rem; font-weight: 700; display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-4); background: var(--hero-accent); color: white; border-radius: 6px; margin-bottom: var(--sp-4); letter-spacing: 0.05em; box-shadow: var(--shadow-sm); } /* Title styling */ .blog-hero-title { font-family: var(--font-display); /* font-size: clamp(2rem, 4vw, 3rem); */ font-weight: 800; line-height: 1.2; color: var(--hero-text); margin-bottom: var(--sp-4); } /* Subtitle styling */ .blog-hero-subtitle { font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 500; color: var(--hero-text-secondary); margin-bottom: var(--sp-4); line-height: 1.5; max-width: 720px; margin-left: auto; margin-right: auto; } /* Metadata items */ .blog-hero-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); font-size: 0.95rem; color: var(--hero-text-secondary); } .blog-meta-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: 4px; background: rgba(0, 0, 0, 0.04); color: var(--hero-accent); font-weight: 500; } .blog-meta-item svg { color: var(--hero-accent); } /* Description */ .blog-hero-description { font-size: 1rem; line-height: 1.6; color: var(--hero-text-secondary); margin: var(--sp-4) auto; max-width: 700px; padding-top: var(--sp-4); border-top: 1px solid rgba(0, 0, 0, 0.1); } /* CTA Buttons */ .blog-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); } .blog-cta { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; font-size: 1rem; padding: 0.75rem 1.5rem; border-radius: 6px; transition: all 0.3s ease; } .blog-cta.primary { background: var(--hero-accent); color: white; } .blog-cta.primary:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .blog-cta.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .blog-cta.secondary:hover { background: var(--surface-3); transform: translateY(-2px); } .blog-cta.outline { background: transparent; color: var(--hero-accent); border: 1px solid var(--hero-accent); } .blog-cta.outline:hover { background: rgba(var(--hero-accent-rgb, 0, 112, 243), 0.1); transform: translateY(-2px); } /* No background image variant */ .blog-hero.no-bg-image .blog-hero-content { background: rgb(236 236 236 / 91%); backdrop-filter: blur(4px); } @media(prefers-color-scheme: dark) { .blog-hero.no-bg-image .blog-hero-content { background: rgba(0, 0, 0, 0.76); } } .blog-hero.no-bg-image .blog-hero-title { color: var(--text); } .blog-hero.no-bg-image .blog-hero-subtitle, .blog-hero.no-bg-image .blog-hero-description, .blog-hero.no-bg-image .blog-meta-item { color: var(--hero-text); font-weight: 500; } /* Dark mode adjustments */ @media (prefers-color-scheme: dark) { .blog-meta-item { background: rgba(255, 255, 255, 0.08); color: var(--accent); } .blog-hero-description { border-top-color: rgba(255, 255, 255, 0.1); } .blog-cta.secondary { background: var(--surface-2); color: var(--text); } .blog-cta.secondary:hover { background: var(--surface-3); } .blog-cta.outline { border-color: var(--hero-accent); color: var(--hero-accent); } .blog-cta.outline:hover { background: rgba(var(--hero-accent-rgb, 0, 112, 243), 0.15); } .blog-hero-title { color: var(--hero-text); } .blog-hero-subtitle, .blog-hero-description { color: var(--hero-text-secondary); } } /* Convert RGB color for opacity use */ /* .blog-hero { --hero-accent-rgb: 0, 112, 243; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; transition: background-image var(--hero-transition); } */ .blog-hero[style*="--hero-accent"] { --hero-accent-rgb: var(--hero-accent-computed, 0, 112, 243); } /* Responsive adjustments */ @media (max-width: 768px) { .blog-hero { padding: var(--sp-2) var(--sp-1); } .blog-hero-container { flex-direction: column-reverse; align-items: center; text-align: center; padding-inline: var(--sp-4); } .blog-hero-image { width: 100%; max-width: 100%; height: auto; margin-bottom: var(--sp-4); border-radius: var(--border-radius); box-shadow: var(--shadow); } .blog-hero-content { padding: var(--sp-4); } .blog-cta { font-size: 0.9rem !important; } /* .blog-hero-actions { flex-direction: column; width: 100%; } .blog-cta { width: 100%; justify-content: center; } */ .blog-hero-title { font-size: clamp(1.8rem, 6vw, 2.5rem); } .blog-hero-subtitle { font-size: 1rem; } .blog-hero-meta { flex-direction: column; gap: var(--sp-2); } /* #toc { border-radius: 0; } */ } @media (max-width: 480px) { .blog-hero { min-height: auto; /* padding: var(--sp-6) var(--sp-3); */ } .blog-meta-item { font-size: 0.8rem; width: 100%; justify-content: center; } .blog-cta { font-size: 0.9rem; padding: 0.5rem 1rem; width: 100%; text-align: center; align-items: center; justify-content: center; } .blog-hero-description { font-size: 0.95rem; line-height: 1.5; } .blog-hero-title { font-size: clamp(1.8rem, 6vw, 2.5rem); } .blog-hero-subtitle { font-size: 0.95rem; } } /* ===== Video Content Styling ===== */ .video-container { position: relative; width: 100%; margin: var(--sp-8) 0; border-radius: var(--border-radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; aspect-ratio: 16/9; background-color: var(--surface-3); } .video-container:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } /* Video placeholder image */ .video-placeholder { width: 100%; height: 100%; object-fit: cover; border-radius: var(--border-radius-lg); transition: transform 0.5s ease, filter 0.3s ease; position: relative; z-index: 1; } .video-container:hover .video-placeholder { transform: scale(1.02); filter: brightness(0.8); } /* Play button overlay */ .video-container::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background-color: rgba(255, 255, 255, 0.9); border-radius: 50%; z-index: 2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230070f3' width='24' height='24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 55% center; background-size: 30px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .video-container:hover::after { background-color: var(--primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='24' height='24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); } /* Decorative gradient overlay */ .video-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%); pointer-events: none; z-index: 1; opacity: 0.7; transition: opacity 0.3s ease; } .video-container:hover::before { opacity: 1; } /* Video duration label */ .video-duration { position: absolute; bottom: 15px; right: 15px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 3px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 500; z-index: 2; } /* Active state when video is playing */ .video-container.playing::after { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } .video-container.playing::before { opacity: 0; } .video-container.playing { cursor: default; } /* Video element styling */ .video-container video { width: 100%; height: 100%; object-fit: cover; border-radius: var(--border-radius-lg); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.4s ease; z-index: 0; } .video-container.playing video { opacity: 1; z-index: 3; } /* Video loading state */ .video-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: var(--primary); animation: spin 1s infinite linear; z-index: 4; opacity: 0; } .video-container.loading .video-loading { opacity: 1; } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } /* Multiple videos arrangement */ section .video-container + .video-container { margin-top: var(--sp-6); } /* Custom video controls */ .video-controls { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); display: flex; align-items: center; padding: 0 15px; opacity: 0; transition: opacity 0.3s ease; z-index: 5; border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg); } .video-container.playing:hover .video-controls { opacity: 1; } .video-progress { flex: 1; height: 4px; background-color: rgba(255, 255, 255, 0.3); border-radius: 2px; margin: 0 10px; position: relative; cursor: pointer; } .video-progress-bar { position: absolute; top: 0; left: 0; height: 100%; background-color: var(--primary); border-radius: 2px; width: 0%; } .video-control-button { background: transparent; border: none; color: white; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; opacity: 0.8; transition: opacity 0.3s ease; } .video-control-button:hover { opacity: 1; } /* Video gallery styles */ .video-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-6); margin: var(--sp-8) 0; } .video-gallery .video-container { margin: 0; } /* Dark mode adjustments */ @media (prefers-color-scheme: dark) { .video-container::after { background-color: rgba(26, 32, 44, 0.9); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300c7b7' width='24' height='24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); } .video-container:hover::after { background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111927' width='24' height='24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); } .video-progress-bar { background-color: var(--accent); } } /* Mobile responsiveness */ @media (max-width: 768px) { .video-container::after { width: 60px; height: 60px; background-size: 24px; } .video-gallery { grid-template-columns: 1fr; } .blog-meta-item { margin: 0 auto; padding: var(--sp-2) var(--sp-4); justify-content: center; } } @media (max-width: 480px) { .video-container::after { width: 50px; height: 50px; background-size: 20px; } .video-controls { height: 36px; } } /* Accessibility considerations */ @media (prefers-reduced-motion: reduce) { .video-container, .video-placeholder, .video-container::after, .video-container::before, .video-loading { transition: none !important; animation: none !important; } .video-container:hover { transform: none; } .video-container:hover .video-placeholder { transform: none; } .video-container:hover::after { transform: translate(-50%, -50%); } }