/* ============================================================================ * BABYLON ARTICLE BLOCKS * Reusable styles for editorial content: paragraphs, lists, quotes, callouts, * step-by-step instructions, FAQ accordions, tables (mobile-friendly), * stat numbers, figures. * * USAGE * 1. Include this file in your OR enqueue via wp_enqueue_style(). * 2. In the WordPress editor, use a "Custom HTML" block and paste the markup * examples shown in the comments above each section. * 3. To rebrand, override the CSS variables in :root (orange accent, fonts). * * Class prefix: `bart-` (Babylon ARTicle). Picks no fights with theme styles. * * Mobile-first. No JavaScript. Native HTML semantics throughout (

, * ,

,
). * ============================================================================ */ :root { --bart-accent: #f37020; --bart-accent-dk: #d65a0e; --bart-text: #222222; --bart-text-2: #444444; --bart-text-muted: #8a8a8a; --bart-bg: #ffffff; --bart-bg-soft: #f3f3f3; --bart-rule: #e8e8e8; --bart-rule-2: #d0d0d0; --bart-navy: #1a2540; --bart-success: #1f8a4c; --bart-warn: #c2410c; --bart-danger: #b91c1c; --bart-info: #1e6fb0; --bart-font-sans: 'Montserrat', system-ui, -apple-system, sans-serif; --bart-font-mono: 'Montserrat', system-ui, -apple-system, sans-serif; } /* =========================================================================== * 1. PARAGRAPH & INLINE TEXT * --------------------------------------------------------------------------- *
Lead paragraph that sets up the article.
*
Article body with a drop-cap initial.
*
Text with a highlighted phrase here.
*
Inline code: wp option get siteurl.
*
Keyboard key: press Ctrl + F5.
* *
*
TL;DR
*
One sentence summary of the article so readers can skim and decide.
*
* =========================================================================== */ .bart-lead { font-size: 1.2rem; line-height: 1.55; color: var(--bart-text); margin: 0 0 1.4em; font-weight: 400; } .bart-dropcap::first-letter { float: left; font-size: 4.5em; line-height: 0.85; margin: 0.05em 0.12em 0 0; font-weight: 700; color: var(--bart-accent); font-family: var(--bart-font-sans); } .bart-mark { background: linear-gradient(transparent 60%, rgba(243,112,32,0.28) 0); padding: 0 2px; color: inherit; } .bart-kbd, .bart-code { font-family: var(--bart-font-mono); background: var(--bart-bg-soft); border: 1px solid var(--bart-rule); border-radius: 4px; padding: 2px 7px; font-size: 0.88em; color: var(--bart-text); } .bart-kbd { box-shadow: 0 1px 0 var(--bart-rule-2); font-weight: 600; } .bart-tldr { background: var(--bart-bg-soft); border-left: 4px solid var(--bart-accent); padding: 18px 22px; margin: 24px 0; border-radius: 0 8px 8px 0; } .bart-tldr-label { display: inline-block; font-family: var(--bart-font-mono); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--bart-accent); text-transform: uppercase; font-weight: 600; margin-bottom: 6px; } .bart-tldr p { margin: 0; } .bart-tldr p + p { margin-top: 0.6em; } /* =========================================================================== * 2. LISTS * --------------------------------------------------------------------------- * Bullet list (orange chevron): *
*
First item.
*
Second item.
*
* * Numbered list (orange counter, leading zero): *
*
Step one.
*
Step two.
*
* * Checklist (green checks, dashed separators): *
*
Item completed.
*
Another item.
*
* * Pros / cons two-column grid (collapses to one column on mobile): *
*
*
Pros
*
*
Long battery life.
*
Compact size.
*
*
*
*
Cons
*
*
Expensive in the UAE.
*
Limited flavour range.
*
*
*
* =========================================================================== */ .bart-list { list-style: none; padding: 0; margin: 1em 0; } .bart-list li { position: relative; padding: 0 0 0.6em 1.7em; line-height: 1.6; } .bart-list li::before { content: "›"; position: absolute; left: 0.45em; top: -0.05em; color: var(--bart-accent); font-weight: 700; font-size: 1.15em; line-height: 1.5; } .bart-numbered { counter-reset: bart-counter; list-style: none; padding: 0; margin: 1em 0; } .bart-numbered li { counter-increment: bart-counter; position: relative; padding: 0 0 0.9em 2.6em; line-height: 1.55; } .bart-numbered li::before { content: counter(bart-counter, decimal-leading-zero); position: absolute; left: 0; top: 0.1em; color: var(--bart-accent); font-family: var(--bart-font-mono); font-size: 0.85em; font-weight: 600; letter-spacing: 0.05em; } .bart-checklist { list-style: none; padding: 0; margin: 1em 0; } .bart-checklist li { position: relative; padding: 10px 0 10px 2em; line-height: 1.5; border-top: 1px dashed var(--bart-rule); } .bart-checklist li:first-child { border-top: 0; padding-top: 0; } .bart-checklist li::before { content: "✓"; position: absolute; left: 0.2em; top: 10px; color: var(--bart-success); font-weight: 700; font-size: 1.05em; } .bart-checklist li:first-child::before { top: 0; } .bart-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.4em 0; } .bart-proscons-col { background: var(--bart-bg-soft); border-radius: 10px; padding: 18px 22px; } .bart-pros { border-top: 3px solid var(--bart-success); } .bart-cons { border-top: 3px solid var(--bart-danger); } .bart-proscons-title { font-family: var(--bart-font-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 10px; } .bart-pros .bart-proscons-title { color: var(--bart-success); } .bart-cons .bart-proscons-title { color: var(--bart-danger); } .bart-proscons ul { list-style: none; padding: 0; margin: 0; } .bart-proscons li { padding: 7px 0 7px 24px; position: relative; font-size: 0.95rem; line-height: 1.5; border-top: 1px dashed var(--bart-rule); } .bart-proscons li:first-child { border-top: 0; padding-top: 0; } .bart-proscons li:first-child::before { top: 0; } .bart-pros li::before { content: "+"; position: absolute; left: 0; top: 7px; color: var(--bart-success); font-weight: 700; font-size: 1.1em; } .bart-cons li::before { content: "−"; position: absolute; left: 0; top: 7px; color: var(--bart-danger); font-weight: 700; font-size: 1.1em; } /* =========================================================================== * 3. QUOTES * --------------------------------------------------------------------------- * Standard side-bar quote: *
*
The price of shisha in JBR doubled in two years.
* Dubai Hospitality Report, 2025 *
* * Centered pull-quote: *
A short, memorable line you want the reader to remember.
* =========================================================================== */ .bart-quote { border: 0; border-left: 4px solid var(--bart-accent); padding: 10px 0 10px 22px; margin: 1.4em 0; font-size: 1.2rem; line-height: 1.5; color: var(--bart-text); font-weight: 500; } .bart-quote p { margin: 0 0 0.4em; } .bart-quote p:last-child { margin-bottom: 0; } .bart-quote-cite { display: block; margin-top: 12px; font-size: 0.82rem; color: var(--bart-text-muted); font-weight: 500; font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; } .bart-quote-cite::before { content: "— "; color: var(--bart-accent); } .bart-pullquote { text-align: center; margin: 2em auto; padding: 28px 0; border-top: 1px solid var(--bart-accent); border-bottom: 1px solid var(--bart-accent); max-width: 38ch; font-family: var(--bart-font-sans); font-size: 1.5rem; line-height: 1.35; color: var(--bart-navy); font-weight: 600; } /* =========================================================================== * 4. CALLOUTS / NOTICE BOXES * --------------------------------------------------------------------------- * Five variants: info (default), tip, warn, important, source. * *
*
i
*
*
Quick note
*
Body text explaining the point.
*
*
* * Variants — change the outer class: *
...
(green check) *
...
(orange !) *
...
(red, soft red bg) *
...
(neutral citation) * * Inside .bart-callout-icon you can put any character: i, !, ✓, ?, ★, etc. * =========================================================================== */ .bart-callout { background: var(--bart-bg-soft); border-left: 4px solid var(--bart-info); padding: 18px 22px; margin: 1.4em 0; border-radius: 0 10px 10px 0; display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; } .bart-callout-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--bart-info); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; font-family: var(--bart-font-sans); flex-shrink: 0; line-height: 1; } .bart-callout-body { font-size: 0.96rem; line-height: 1.6; } .bart-callout-body > *:first-child { margin-top: 0; } .bart-callout-body > *:last-child { margin-bottom: 0; } .bart-callout-title { font-weight: 700; color: var(--bart-text); display: block; margin-bottom: 4px; font-size: 0.96rem; } .bart-callout--tip { border-left-color: var(--bart-success); } .bart-callout--tip .bart-callout-icon { background: var(--bart-success); } .bart-callout--warn { border-left-color: var(--bart-warn); } .bart-callout--warn .bart-callout-icon { background: var(--bart-warn); } .bart-callout--important { border-left-color: var(--bart-danger); background: rgba(185,28,28,0.05); } .bart-callout--important .bart-callout-icon { background: var(--bart-danger); } .bart-callout--source { background: var(--bart-bg); border: 1px solid var(--bart-rule); border-left: 4px solid var(--bart-text-muted); } .bart-callout--source .bart-callout-icon { background: var(--bart-text-muted); } /* =========================================================================== * 5. STEP-BY-STEP INSTRUCTIONS * --------------------------------------------------------------------------- * Auto-numbered ordered list with big orange circles. * *
*
*
Open the device
*
*
Press the side button for three seconds until the LED blinks white.
*
*
*
*
Insert the Heets stick
*
*
Push the stick gently until the line on the stick meets the holder.
*
*
*
* * Variant with a connecting vertical line between circles: *
...
* =========================================================================== */ .bart-steps { list-style: none; padding: 0; margin: 1.4em 0; counter-reset: bart-steps-counter; } .bart-steps > li { counter-increment: bart-steps-counter; position: relative; padding: 18px 0 18px 64px; border-top: 1px solid var(--bart-rule); } .bart-steps > li:first-child { border-top: 0; padding-top: 0; } .bart-steps > li:first-child::before { top: 0; } .bart-steps > li::before { content: counter(bart-steps-counter); position: absolute; left: 0; top: 18px; width: 44px; height: 44px; border-radius: 50%; background: var(--bart-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--bart-font-sans); font-weight: 700; font-size: 1.05rem; } .bart-step-title { font-family: var(--bart-font-sans); font-size: 1.1rem; font-weight: 700; color: var(--bart-navy); margin: 0 0 6px; } .bart-step-body { color: var(--bart-text-2); font-size: 0.96rem; line-height: 1.6; } .bart-step-body > *:first-child { margin-top: 0; } .bart-step-body > *:last-child { margin-bottom: 0; } .bart-steps-line { position: relative; } .bart-steps-line::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--bart-rule-2); z-index: 0; } .bart-steps-line > li::before { z-index: 1; } .bart-steps-line > li { border-top: 0; padding-top: 14px; padding-bottom: 14px; } .bart-steps-line > li:first-child { padding-top: 0; } .bart-steps-line > li:first-child::before { top: 0; } /* =========================================================================== * 6. FAQ ACCORDION * --------------------------------------------------------------------------- * Native
/
, no JavaScript. * *
*
*
Is shisha allowed in Dubai malls?
*
*
Only in designated areas inside specific licensed cafes.
*
*
*
*
What is the legal age?
*
18+ under Federal Law No. 15 of 2009.
*
*
* * If you also want Google FAQPage rich-result schema, add a JSON-LD block * alongside (see Babylon docs/yoast-seo-meta.md for the JSON shape). * =========================================================================== */ .bart-faq { border-top: 1px solid var(--bart-rule); margin: 1.4em 0; } .bart-faq-item { border-bottom: 1px solid var(--bart-rule); } .bart-faq-item summary { padding: 18px 44px 18px 0; cursor: pointer; font-family: var(--bart-font-sans); font-size: 1.05rem; font-weight: 600; color: var(--bart-navy); list-style: none; position: relative; transition: color .15s ease; line-height: 1.4; } .bart-faq-item summary::-webkit-details-marker { display: none; } .bart-faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--bart-accent); font-weight: 300; line-height: 1; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } .bart-faq-item[open] summary::after { content: "−"; } .bart-faq-item summary:hover { color: var(--bart-accent); } .bart-faq-answer { padding: 0 0 22px; color: var(--bart-text-2); font-size: 0.96rem; line-height: 1.65; } .bart-faq-answer > *:first-child { margin-top: 0; } .bart-faq-answer > *:last-child { margin-bottom: 0; } /* =========================================================================== * 7. TABLES (mobile-friendly, two strategies) * --------------------------------------------------------------------------- * Strategy A: horizontal scroll on small screens. Default. Always works, * stays as a table on mobile inside a scrollable wrapper. * *
*

* * * * * *

Model	Price (AED)	Battery
IQOS Iluma One	199	20 sessions
IQOS Iluma Prime	649	2 sessions per holder

* * * Strategy B: collapse to stacked cards on mobile. Each shows its header * label via `data-label` attribute. Add class `bart-table-mobile` to the table. * *

* * * * * * * * * *

Model	Price	Battery
IQOS Iluma One	AED 199	20 sessions

* * Comparison-style table (first column is the row-label, sticky look): * ...

* * Cell highlight: Yes * No * =========================================================================== */ .bart-table-wrap { overflow-x: auto; margin: 1.4em 0; border-radius: 10px; border: 1px solid var(--bart-rule); -webkit-overflow-scrolling: touch; } .bart-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.5; background: var(--bart-bg); } .bart-table th, .bart-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--bart-rule); vertical-align: top; } .bart-table th { background: var(--bart-bg-soft); font-family: var(--bart-font-sans); font-weight: 700; color: var(--bart-navy); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .bart-table tr:last-child td { border-bottom: 0; } .bart-table tbody tr:nth-child(even) td { background: rgba(243,243,243,0.45); } .bart-table .bart-table-good { color: var(--bart-success); font-weight: 600; } .bart-table .bart-table-bad { color: var(--bart-danger); font-weight: 600; } .bart-table--compare th:first-child, .bart-table--compare td:first-child { font-weight: 700; color: var(--bart-text); background: var(--bart-bg-soft); border-right: 1px solid var(--bart-rule); } @media (max-width: 720px) { .bart-table-mobile { font-size: 0.95rem; } .bart-table-mobile thead { display: none; } .bart-table-mobile, .bart-table-mobile tbody, .bart-table-mobile tr, .bart-table-mobile td { display: block; width: 100%; } .bart-table-mobile tr { border-bottom: 1px solid var(--bart-rule); padding: 14px 16px; background: var(--bart-bg); } .bart-table-mobile tr:nth-child(even) { background: rgba(243,243,243,0.4); } .bart-table-mobile tr:last-child { border-bottom: 0; } .bart-table-mobile td { padding: 6px 0; border: 0; background: transparent !important; text-align: left; display: grid; grid-template-columns: 38% 62%; gap: 12px; align-items: baseline; } .bart-table-mobile td::before { content: attr(data-label); font-family: var(--bart-font-mono); font-size: 0.7rem; color: var(--bart-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; } .bart-table-mobile td:empty::before { display: none; } } /* =========================================================================== * 8. BIG-NUMBER STATS * --------------------------------------------------------------------------- * Use to highlight key figures. Auto-fits 1-4 per row on desktop. * *

100%

UAE excise tax on tobacco

18+

Minimum age to buy

150 m

Distance from schools

* =========================================================================== */ .bart-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin: 1.4em 0; } .bart-stat { padding: 22px 24px; border-left: 3px solid var(--bart-accent); background: var(--bart-bg-soft); border-radius: 0 10px 10px 0; } .bart-stat-value { display: block; font-family: var(--bart-font-sans); font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--bart-navy); letter-spacing: -0.02em; margin-bottom: 8px; } .bart-stat-label { display: block; font-family: var(--bart-font-mono); font-size: 0.72rem; color: var(--bart-text-muted); text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4; } /* =========================================================================== * 9. FIGURE WITH CAPTION * --------------------------------------------------------------------------- *

* **Photo:** The bar at Timeless, Al Habtoor City. * Credit: Vendor. *

* =========================================================================== */ .bart-figure { margin: 1.6em 0; } .bart-figure img { width: 100%; height: auto; border-radius: 12px; display: block; } .bart-figure figcaption { font-family: var(--bart-font-sans); font-size: 0.85rem; color: var(--bart-text-muted); margin-top: 10px; line-height: 1.5; text-align: center; padding: 0 12px; } .bart-figure figcaption strong { color: var(--bart-text); font-weight: 600; } /* =========================================================================== * 10. MOBILE OVERRIDES * --------------------------------------------------------------------------- * Sub-720px tweaks. Tables collapse rule lives in section 7. * =========================================================================== */ @media (max-width: 720px) { .bart-lead { font-size: 1.08rem; } .bart-dropcap::first-letter { font-size: 3.5em; } .bart-pullquote { font-size: 1.2rem; padding: 20px 0; max-width: 100%; } .bart-quote { font-size: 1.05rem; padding-left: 18px; } .bart-proscons { grid-template-columns: 1fr; gap: 12px; } .bart-callout { grid-template-columns: 24px 1fr; padding: 14px 18px; gap: 10px; } .bart-callout-icon { width: 24px; height: 24px; font-size: 0.85rem; } .bart-steps > li { padding-left: 54px; padding-top: 14px; padding-bottom: 14px; } .bart-steps > li::before { width: 36px; height: 36px; font-size: 0.95rem; top: 14px; } .bart-steps > li:first-child::before { top: 0; } .bart-steps-line::before { left: 17px; top: 17px; bottom: 17px; } .bart-stat-value { font-size: 1.8rem; } .bart-stat { padding: 16px 18px; } .bart-tldr { padding: 14px 18px; } .bart-faq-item summary { font-size: 1rem; padding-right: 36px; } }