@font-face {
font-family: 'Bebas';
src: url('../fonts/BebasNeue_bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Bebasregular';
src: url('../fonts/BebasNeue_regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
/* --- 1. SINGLE ARTICLE LAYOUT & TYPOGRAPHY (ISOLATED) --- */
/* Page container for article: align with main site container */
.is-blog .com-content-article.item-page {
max-width: var(--aq-container, 1366px) !important;
margin: 0 auto !important;
padding: 40px 24px 60px !important;
background-color: #fff !important;
font-family: var(--font-base, "Manrope"), sans-serif !important;
}
/* Constrain article reading content and headings for premium editorial look */
.is-blog .com-content-article .page-header,
.is-blog .com-content-article__body {
max-width: 1000px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Remove Hero space and add neat padding */
.is-blog .com-content-article .site-main,
.is-blog .com-content-article {
background-color: #fff;
}
/* Headings */
.is-blog .com-content-article h1,
.is-blog .com-content-article h2,
.is-blog .aq-article__heading--h1,
.is-blog .aq-article__heading--h2,
.is-blog .aq-article__heading {
font-family: var(--font-base, "Manrope"), sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
font-size: 32px !important;
line-height: 1.3 !important;
margin-top: 40px !important;
margin-bottom: 24px !important;
color: var(--aq-text, #1b2935) !important;
}
.is-blog .com-content-article h3,
.is-blog .com-content-article h4,
.is-blog .com-content-article h5,
.is-blog .aq-article__heading--h3,
.is-blog .aq-article__heading--h4,
.is-blog .aq-article__heading--h5 {
font-family: var(--font-base, "Manrope"), sans-serif !important;
font-weight: 700 !important;
text-transform: none !important; /* Standard case */
font-size: 24px !important;
line-height: 1.4 !important;
margin-top: 32px !important;
margin-bottom: 16px !important;
color: var(--aq-text, #1b2935) !important;
}
/* Paragraphs and general text */
.is-blog .com-content-article p,
.is-blog .aq-article__text,
.is-blog .aq-article__lead {
font-family: var(--font-base, "Manrope"), sans-serif !important;
font-size: 20px !important;
margin-bottom: 20px !important;
line-height: 1.6 !important;
color: var(--aq-text, #1b2935) !important;
}
/* Establish base typography for all elements in article reading area, including raw text blocks */
.is-blog .com-content-article__body,
.is-blog #center {
font-family: var(--font-base, "Manrope"), sans-serif !important;
font-size: 20px !important;
line-height: 1.6 !important;
color: var(--aq-text, #1b2935) !important;
}
/* Make sure strong/b is bold */
.is-blog .com-content-article p b,
.is-blog .com-content-article p strong {
font-weight: 700 !important;
}
/* Links */
.is-blog .com-content-article a,
.is-blog .aq-article a {
color: var(--aq-blue, #00aeee) !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: color 0.2s ease;
}
.is-blog .com-content-article a:hover,
.is-blog .aq-article a:hover {
color: var(--aq-red, #e6334e) !important;
text-decoration: underline !important;
}
/* Images */
.is-blog .com-content-article figure,
.is-blog .aq-article__figure {
margin: 40px auto !important;
text-align: center !important;
max-width: 100% !important;
}
.is-blog .com-content-article img,
.is-blog .aq-article__img {
max-width: 100% !important;
height: auto !important;
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
display: block;
margin: 0 auto;
}
.is-blog .com-content-article figcaption,
.is-blog .aq-article__figcaption {
font-size: 16px !important;
color: #666 !important;
margin-top: 8px !important;
font-style: italic !important;
}
/* Responsive 16:9 Videos and IFrames */
.is-blog .com-content-article__body iframe,
.is-blog .aq-article__video-iframe,
.is-blog .aq-article__video-wrapper iframe,
.is-blog #center iframe {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
height: auto !important;
border-radius: 12px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
display: block !important;
margin: 40px auto !important;
}
/* Lists */
.is-blog .com-content-article ul,
.is-blog .com-content-article ol,
.is-blog .aq-article ul,
.is-blog .aq-article ol {
margin-bottom: 24px !important;
padding-left: 30px !important;
}
.is-blog .com-content-article li,
.is-blog .aq-article li {
margin-bottom: 10px !important;
font-size: 20px !important;
}
/* =========================================================================
AQUATEC-ARTICLE.CSS - Centered Article & Beautiful Card Grid
========================================================================= */
/* --- 2. BLOG CATEGORY GRID (CARDS) --- */
/* Standard site container wrapping */
.blog-featured,
.com-content-category-blog {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 30px !important;
max-width: var(--aq-container, 1366px) !important;
margin: 0 auto !important;
padding: 40px 24px 60px !important;
background-color: var(--aq-bg, #ffffff) !important; /* Premium responsive theme background */
}
/* Bypass Joomla's nested items wrapper to flow all cards seamlessly in the same grid */
.blog-featured .items-leading,
.blog-featured .blog-items,
.com-content-category-blog .items-leading,
.com-content-category-blog .blog-items {
display: contents !important;
}
/* Styling for all card previews with distinct premium floating shadows and card curves */
.blog-featured .blog-item,
.com-content-category-blog .blog-item {
background: var(--aq-card-bg, #ffffff) !important;
border-radius: 20px !important; /* Modern soft corners */
border: 1px solid var(--aq-card-border, #eef2f5) !important;
box-shadow: 0 15px 35px rgba(27, 41, 53, 0.06), 0 5px 15px rgba(0,0,0,0.02) !important; /* Premium floating shadow */
overflow: hidden !important;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
display: flex !important;
flex-direction: column !important;
height: 560px !important; /* Strict card height to prevent overlaps and align footers */
position: relative !important;
}
.blog-featured .blog-item:hover,
.com-content-category-blog .blog-item:hover {
transform: translateY(-8px) !important; /* Sleek elegant lift */
box-shadow: 0 25px 50px rgba(27, 41, 53, 0.14), 0 8px 24px rgba(0,0,0,0.04) !important; /* Rich immersive drop shadow */
border-color: var(--aq-blue, #00aeee) !important; /* Action accent borders on hover */
}
/* Card Content Area - Natural flow with block container and bottom space for footer */
.blog-featured .blog-item .item-content,
.com-content-category-blog .blog-item .item-content {
padding: 24px 24px 80px 24px !important; /* Leaves space at the bottom for absolute footer spacing + 24px padding */
height: 100% !important; /* Spans full card height */
box-sizing: border-box !important;
overflow: hidden !important;
position: relative !important;
display: block !important; /* Block layout completely prevents image squishing/deforming */
font-family: var(--font-base, "Manrope"), sans-serif !important;
font-size: 16px !important;
line-height: 1.6 !important;
color: var(--aq-text, #1b2935) !important;
}
/* Force standard 18px size for all article card headings everywhere (RU and UA lists) */
.blog-featured .blog-item h1,
.blog-featured .blog-item h2,
.blog-featured .blog-item h3,
.blog-featured .blog-item h4,
.blog-featured .blog-item .item-title,
.com-content-category-blog .blog-item h1,
.com-content-category-blog .blog-item h2,
.com-content-category-blog .blog-item h3,
.com-content-category-blog .blog-item h4,
.com-content-category-blog .blog-item .item-title {
font-size: 18px !important;
font-weight: 800 !important;
line-height: 1.35 !important;
margin: 0 0 16px 0 !important;
text-transform: uppercase !important;
font-family: var(--font-base, "Manrope"), sans-serif !important;
}
.blog-featured .blog-item h1 a,
.blog-featured .blog-item h2 a,
.blog-featured .blog-item h3 a,
.blog-featured .blog-item h4 a,
.blog-featured .blog-item .item-title a,
.com-content-category-blog .blog-item h1 a,
.com-content-category-blog .blog-item h2 a,
.com-content-category-blog .blog-item h3 a,
.com-content-category-blog .blog-item h4 a,
.com-content-category-blog .blog-item .item-title a {
color: var(--aq-text, #1b2935) !important;
text-decoration: none !important;
font-size: 18px !important;
font-weight: 800 !important;
transition: color 0.2s ease !important;
}
.blog-featured .blog-item h1 a:hover,
.blog-featured .blog-item h2 a:hover,
.blog-featured .blog-item h3 a:hover,
.blog-featured .blog-item h4 a:hover,
.blog-featured .blog-item .item-title a:hover,
.com-content-category-blog .blog-item h1 a:hover,
.com-content-category-blog .blog-item h2 a:hover,
.com-content-category-blog .blog-item h3 a:hover,
.com-content-category-blog .blog-item h4 a:hover,
.com-content-category-blog .blog-item .item-title a:hover {
color: var(--aq-blue, #00aeee) !important;
}
/* Card Image: Perfectly centered floating photo inside the card with margin and custom roundings */
.blog-featured .blog-item .aq-article__figure,
.com-content-category-blog .blog-item .aq-article__figure {
margin: 0 0 20px 0 !important; /* Elegant vertical margin */
width: 100% !important;
padding: 0 !important;
border-radius: 12px !important;
overflow: hidden !important;
aspect-ratio: 16/10 !important;
}
.blog-featured .blog-item .aq-article__img,
.com-content-category-blog .blog-item .aq-article__img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
transition: transform 0.4s ease !important;
}
.blog-featured .blog-item:hover .aq-article__img,
.com-content-category-blog .blog-item:hover .aq-article__img {
transform: scale(1.03) !important;
}
/* Hide figure captions inside grid cards */
.blog-featured .blog-item .aq-article__figcaption,
.com-content-category-blog .blog-item .aq-article__figcaption {
display: none !important;
}
/* Hide article metadata details in category grid view */
.blog-featured .article-info,
.com-content-category-blog .article-info {
display: none !important;
}
/* Elegant responsive fade-out gradient overlay anchored right above the readmore footer */
.blog-featured .blog-item .item-content::after,
.com-content-category-blog .blog-item .item-content::after {
content: "" !important;
position: absolute !important;
bottom: 56px !important; /* Anchored exactly above the absolute bottom readmore footer bar */
left: 0 !important;
right: 0 !important;
height: 60px !important;
background: linear-gradient(to top, var(--aq-card-bg, #ffffff) 0%, rgba(255,255,255,0) 100%) !important;
pointer-events: none !important;
z-index: 2 !important;
}
/* Absolute positioned "Read More" actions zone anchored at the absolute bottom of the card */
.blog-featured .blog-item .readmore,
.com-content-category-blog .blog-item .readmore,
.blog-featured .blog-item .item-content p.readmore,
.com-content-category-blog .blog-item .item-content p.readmore {
position: absolute !important; /* Absolute layout anchors it at the absolute bottom */
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 56px !important;
margin: 0 !important;
margin-bottom: 0 !important; /* Explicitly overrides generic p margin-bottom to clear gaps */
padding: 0 !important;
background: linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%) !important; /* Light slate sharp gray gradient */
border-top: 1px solid var(--aq-card-border, #eef2f5) !important;
border-bottom-left-radius: 20px !important; /* Seamlessly matches card bottom left roundings */
border-bottom-right-radius: 20px !important; /* Seamlessly matches card bottom right roundings */
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 5 !important;
}
/* Hide standard text, transform the whole footer zone into a centered action circle carrying arrow icon */
.blog-featured .blog-item .readmore a,
.com-content-category-blog .blog-item .readmore a {
font-size: 0 !important; /* Complete drop of button text */
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
color: var(--aq-blue, #00aeee) !important;
text-decoration: none !important;
transition: all 0.25s ease !important;
}
/* The beautiful white action circle container */
.blog-featured .blog-item .readmore a .icon-angle-right,
.blog-featured .blog-item .readmore a .icon-chevron-right,
.com-content-category-blog .blog-item .readmore a .icon-angle-right,
.com-content-category-blog .blog-item .readmore a .icon-chevron-right {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: var(--aq-card-bg, #ffffff) !important;
border: 1px solid var(--aq-card-border, #e2e8f0) !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
position: relative !important;
}
/* Beautiful inline SVG blue arrow styled inside the circle container */
.blog-featured .blog-item .readmore a .icon-angle-right::before,
.blog-featured .blog-item .readmore a .icon-chevron-right::before,
.com-content-category-blog .blog-item .readmore a .icon-angle-right::before,
.com-content-category-blog .blog-item .readmore a .icon-chevron-right::before {
content: "" !important; /* Hide default icon character completely */
width: 18px !important;
height: 18px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* Hover transition effect for the action circle and inline SVG arrow */
.blog-featured .blog-item:hover .readmore a .icon-angle-right,
.blog-featured .blog-item:hover .readmore a .icon-chevron-right,
.com-content-category-blog .blog-item:hover .readmore a .icon-angle-right,
.com-content-category-blog .blog-item:hover .readmore a .icon-chevron-right {
transform: scale(1.1) !important;
background: var(--aq-blue, #00aeee) !important;
border-color: var(--aq-blue, #00aeee) !important;
box-shadow: 0 4px 12px rgba(0, 174, 238, 0.25) !important;
}
.blog-featured .blog-item:hover .readmore a .icon-angle-right::before,
.blog-featured .blog-item:hover .readmore a .icon-chevron-right::before,
.com-content-category-blog .blog-item:hover .readmore a .icon-angle-right::before,
.com-content-category-blog .blog-item:hover .readmore a .icon-chevron-right::before {
background-image: url("data:image/svg+xml;utf8,") !important;
transform: translateX(2px) !important; /* Elegant arrow sliding micro-animation */
}
/* Grid Layout items at the bottom: Span full width */
.blog-featured .items-more,
.blog-featured .w-100,
.blog-featured .pagination__wrapper,
.com-content-category-blog .items-more,
.com-content-category-blog .w-100,
.com-content-category-blog .pagination__wrapper {
grid-column: 1 / -1 !important;
width: 100% !important;
margin-top: 24px !important;
}
/* Pagination center alignment */
.blog-featured .pagination__wrapper,
.com-content-category-blog .pagination__wrapper {
display: flex !important;
justify-content: center !important;
}
/* Responsive Grid Breakdown */
@media (max-width: 1199px) {
.blog-featured,
.com-content-category-blog {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 767px) {
.blog-featured,
.com-content-category-blog {
grid-template-columns: 1fr !important;
padding: 40px 16px 60px !important;
}
}
/* Reset p styles inside blog items to keep them neat in the card */
.blog-featured .blog-item .item-content p,
.com-content-category-blog .blog-item .item-content p {
font-size: 16px !important;
line-height: 1.6 !important;
margin-bottom: 12px !important;
color: var(--aq-text, #1b2935) !important;
}
/* --- 3. BLOG GRID: HIDE BREADCRUMBS, ADJUST BANNER, HIDE LINKS, FIX PAGINATION --- */
/* Hide breadcrumbs on blog pages */
.is-blog nav.mod-breadcrumbs__wrapper {
display: none !important;
}
/* Dynamic header matching banner - styled as a clean 50px-ish strip below the sticky header */
.is-blog .inner-banner {
background: linear-gradient(135deg, #1b2935 0%, #243a52 50%, #2d5273 100%) !important;
height: 130px !important; /* Visible height increased exactly to 50px below the 80px header */
min-height: 130px !important;
margin: -80px -24px 0 !important;
padding: 80px 0 0 0 !important; /* Top padding clears sticky header space */
box-sizing: border-box !important;
}
/* Standalone Bebas page title block below the blue banner */
.is-blog .blog-page-header {
max-width: var(--aq-container, 1366px) !important;
margin: 0 auto !important;
padding: 40px 24px 10px !important;
background-color: var(--aq-bg, #ffffff) !important;
text-align: center !important; /* Center the title container */
}
.is-blog .blog-page-title {
font-family: "Bebas", "Bebas Neue", sans-serif !important;
font-size: 48px !important;
color: var(--aq-text, #1b2935) !important;
margin: 0 auto !important; /* Centered layout */
padding: 0 !important;
text-transform: uppercase !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
line-height: 1.15 !important;
display: inline-block !important;
}
/* Hide the text links at the bottom of the blog grid */
.blog-featured .items-more,
.com-content-category-blog .items-more {
display: none !important;
}
/* Fix pagination layout and center alignment */
.blog-featured .pagination,
.com-content-category-blog .pagination {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 auto !important;
justify-content: center !important;
}
.blog-featured .pagination li,
.com-content-category-blog .pagination li {
margin: 0 !important;
padding: 0 !important;
}
/* Square page-link button formatting */
.blog-featured .pagination li a,
.blog-featured .pagination li span,
.com-content-category-blog .pagination li a,
.com-content-category-blog .pagination li span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 40px !important;
height: 40px !important;
padding: 0 14px !important;
border-radius: 8px !important;
background: var(--aq-card-bg, #ffffff) !important;
color: var(--aq-text, #1b2935) !important;
font-weight: 600 !important;
text-decoration: none !important;
border: 1px solid var(--aq-card-border, #e2e8f0) !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
font-size: 15px !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}
/* Hover effects for interactive pagination buttons */
.blog-featured .pagination li a:hover,
.com-content-category-blog .pagination li a:hover {
background: var(--aq-blue, #00aeee) !important;
color: #ffffff !important;
border-color: var(--aq-blue, #00aeee) !important;
box-shadow: 0 4px 12px rgba(0, 174, 238, 0.2) !important;
transform: translateY(-1px) !important;
}
/* Active pagination page formatting with premium gradient background */
.blog-featured .pagination li.active a,
.blog-featured .pagination li.active span,
.com-content-category-blog .pagination li.active a,
.com-content-category-blog .pagination li.active span {
background: linear-gradient(135deg, var(--aq-blue, #00aeee) 0%, #0087c4 100%) !important;
color: #ffffff !important;
border-color: var(--aq-blue, #00aeee) !important;
box-shadow: 0 4px 12px rgba(0, 174, 238, 0.3) !important;
font-weight: 700 !important;
}
/* Muted disabled buttons style for boundary page items (like first/prev on page 1) */
.blog-featured .pagination li.disabled a,
.blog-featured .pagination li.disabled span,
.com-content-category-blog .pagination li.disabled a,
.com-content-category-blog .pagination li.disabled span {
background: var(--aq-bg-soft, #f8fafc) !important;
color: #cbd5e1 !important;
border-color: var(--aq-card-border, #e2e8f0) !important;
cursor: not-allowed !important;
opacity: 0.6 !important;
box-shadow: none !important;
}
/* Start/End buttons: prominent orange buttons */
.is-blog .pagination li:has(.icon-angle-double-left) a,
.is-blog .pagination li:has(.icon-angle-double-left) span,
.is-blog .pagination li:has(.icon-angle-double-right) a,
.is-blog .pagination li:has(.icon-angle-double-right) span {
background: var(--aq-orange, #f37e21) !important;
color: #ffffff !important;
border-color: var(--aq-orange, #f37e21) !important;
box-shadow: 0 4px 10px rgba(243, 126, 33, 0.2) !important;
}
.is-blog .pagination li:has(.icon-angle-double-left) a:hover,
.is-blog .pagination li:has(.icon-angle-double-right) a:hover {
background: var(--aq-red, #e6334e) !important;
border-color: var(--aq-red, #e6334e) !important;
box-shadow: 0 4px 12px rgba(230, 51, 78, 0.3) !important;
}
/* Prev/Next buttons: beautiful brand green/teal buttons */
.is-blog .pagination li:has(.icon-angle-left) a,
.is-blog .pagination li:has(.icon-angle-left) span,
.is-blog .pagination li:has(.icon-angle-left) a,
.is-blog .pagination li:has(.icon-angle-left) span,
.is-blog .pagination li:has(.icon-angle-right) a,
.is-blog .pagination li:has(.icon-angle-right) span {
background: #01b1b0 !important;
color: #ffffff !important;
border-color: #01b1b0 !important;
box-shadow: 0 4px 10px rgba(1, 177, 176, 0.15) !important;
}
.is-blog .pagination li:has(.icon-angle-left) a:hover,
.is-blog .pagination li:has(.icon-angle-right) a:hover {
background: #00807f !important;
border-color: #00807f !important;
box-shadow: 0 4px 12px rgba(0, 128, 127, 0.25) !important;
}
/* Disabled override for styled first/prev/next/last icon links */
.is-blog .pagination li.disabled:has(.icon-angle-double-left) span,
.is-blog .pagination li.disabled:has(.icon-angle-double-right) span,
.is-blog .pagination li.disabled:has(.icon-angle-left) span,
.is-blog .pagination li.disabled:has(.icon-angle-right) span {
background: var(--aq-bg-soft, #f8fafc) !important;
color: #cbd5e1 !important;
border-color: var(--aq-card-border, #e2e8f0) !important;
box-shadow: none !important;
opacity: 0.6 !important;
}
/* Custom glyph replacements for standard pagination arrow icon fonts */
.blog-featured .pagination .icon-angle-double-left::before,
.com-content-category-blog .pagination .icon-angle-double-left::before {
content: "\00ab" !important;
font-family: inherit !important;
font-weight: 700 !important;
font-style: normal !important;
}
.blog-featured .pagination .icon-angle-left::before,
.com-content-category-blog .pagination .icon-angle-left::before {
content: "\2039" !important;
font-family: inherit !important;
font-weight: 700 !important;
font-style: normal !important;
}
.blog-featured .pagination .icon-angle-right::before,
.com-content-category-blog .pagination .icon-angle-right::before {
content: "\203a" !important;
font-family: inherit !important;
font-weight: 700 !important;
font-style: normal !important;
}
.blog-featured .pagination .icon-angle-double-right::before,
.com-content-category-blog .pagination .icon-angle-double-right::before {
content: "\00bb" !important;
font-family: inherit !important;
font-weight: 700 !important;
font-style: normal !important;
}
/* --- 4. DARK MODE FULL THEME ADAPTATIONS --- */
[data-theme="dark"] body.inner {
background: var(--aq-bg-soft, #141d26) !important;
}
[data-theme="dark"] body.inner .site-main {
background: var(--aq-bg, #0d1419) !important;
}
[data-theme="dark"] .is-blog .com-content-article.item-page {
background-color: var(--aq-card-bg, #1a2530) !important;
}
[data-theme="dark"] .is-blog .com-content-article h1,
[data-theme="dark"] .is-blog .com-content-article h2,
[data-theme="dark"] .is-blog .com-content-article h3,
[data-theme="dark"] .is-blog .com-content-article h4,
[data-theme="dark"] .is-blog .com-content-article h5,
[data-theme="dark"] .is-blog .com-content-article p,
[data-theme="dark"] .is-blog .com-content-article li,
[data-theme="dark"] .is-blog .com-content-article__body {
color: var(--aq-text, #e8edf3) !important;
}
[data-theme="dark"] .is-blog .com-content-article {
background-color: var(--aq-card-bg, #1a2530) !important;
}
/* Standalone Page Title Dark Theme Override */
[data-theme="dark"] .is-blog .blog-page-header {
background-color: var(--aq-bg, #0d1419) !important;
}
[data-theme="dark"] .is-blog .blog-page-title {
color: var(--aq-text, #e8edf3) !important;
}
/* Neumorphic Dark Shadows */
[data-theme="dark"] .blog-featured .blog-item,
[data-theme="dark"] .com-content-category-blog .blog-item {
background: var(--aq-card-bg, #1a2530) !important;
border-color: rgba(255, 255, 255, 0.05) !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.15) !important;
}
[data-theme="dark"] .blog-featured .blog-item:hover,
[data-theme="dark"] .com-content-category-blog .blog-item:hover {
border-color: var(--aq-blue, #00aeee) !important;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}
[data-theme="dark"] .blog-featured .blog-item .item-content::after,
[data-theme="dark"] .com-content-category-blog .blog-item .item-content::after {
background: linear-gradient(to top, var(--aq-card-bg, #1a2530) 0%, rgba(26, 37, 48, 0) 100%) !important;
}
[data-theme="dark"] .blog-featured .blog-item .readmore,
[data-theme="dark"] .com-content-category-blog .blog-item .readmore,
[data-theme="dark"] .blog-featured .blog-item .item-content p.readmore,
[data-theme="dark"] .com-content-category-blog .blog-item .item-content p.readmore {
background: linear-gradient(180deg, #374151 0%, #111827 100%) !important; /* Even deeper charcoal gradient */
border-top-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .blog-featured .blog-item .readmore a .icon-angle-right,
[data-theme="dark"] .blog-featured .blog-item .readmore a .icon-chevron-right,
[data-theme="dark"] .com-content-category-blog .blog-item .readmore a .icon-angle-right,
[data-theme="dark"] .com-content-category-blog .blog-item .readmore a .icon-chevron-right {
background: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .blog-featured .blog-item:hover .readmore a .icon-angle-right,
[data-theme="dark"] .blog-featured .blog-item:hover .readmore a .icon-chevron-right,
[data-theme="dark"] .com-content-category-blog .blog-item:hover .readmore a .icon-angle-right,
[data-theme="dark"] .com-content-category-blog .blog-item:hover .readmore a .icon-chevron-right {
background: var(--aq-blue, #00aeee) !important;
border-color: var(--aq-blue, #00aeee) !important;
}