/*
* ============================================================
* TOP 1 OIL — BLOG ARCHIVE PAGE
* File: assets/css/pages/blog.css
* Version: 1.0
* Depends on: tokens.css, global.css
*
* PRELOAD HINTS:
* Elementor → Custom Code →
* Condition: All archives
* ============================================================ */
/* ============================================================
BLOG HERO HTML WIDGET CODE
Paste into Elementor HTML widget inside the Hero container
(add CSS class "t1-hero t1-hero-dark" to the container)
============================================================
PRELOAD HINTS — Elementor → Custom Code →
Condition: All archives
============================================================
============================================================ */
/* ============================================================
BLOG HERO CSS
The blog hero uses t1-hero-dark modifier because the
image is more complex than the pale About Us sky.
Add both classes to the Hero container: t1-hero t1-hero-dark
============================================================ */
/*
No additional CSS rules needed here — global.css handles
the full .t1-hero pattern including .t1-hero-dark overlay.
Add blog-specific overrides below only if needed, e.g:
*/
/* Uncomment to adjust image focal point for blog hero:
.e-con.t1-hero .t1-hero-bg img {
object-position: center 40%;
}
*/
/* ============================================================
R2 IMAGE REFERENCE
Files at: top1-media.awservices.io/website-images/hero/blog/
┌─────────────────────────────────────────────────────────┐
│ hero-blog-mobile.webp 390×700 10.54 KB (65% q) │
│ hero-blog-tablet.webp 768×500 18.86 KB (70% q) │
│ hero-blog-desktop.webp 1440×675 39.13 KB (75% q) │
│ hero-blog-retina.webp 1920×900 64.70 KB (75% q) │
└─────────────────────────────────────────────────────────┘
============================================================ */