/* * brand-energy.css — Energypoint (UAE energy authority + publication). * Ported from progress/energypoint-home-mockup.html (revised). Loads AFTER base.css. * * Archetype: "Gulf energy house meets BloombergNEF terminal" — corporate-first * energy authority that also publishes data-forward intelligence. Deliberately * NOT the Symbol broadsheet and NOT the Roksolana magazine. Bright white/light * canvas, confident bright-blue masthead, amber kickers, hard geometric rules, * monospace numerics. No serifs, no paper texture. * * RTL: layout uses CSS logical properties (margin/padding/border-inline, inset-*, * text-align:start) so mirrors the whole page for Arabic (ar). * Intrinsically-LTR tokens (GW/GWh figures, prices) carry dir="ltr" inline. * * (a) re-skins the shared --sy-* tokens so article/archive/page inherit the * light blue/amber palette; (b) adds Energypoint-only components under .ep-*. */ /* ---------- Token re-skin + brand tokens ---------- */ :root { --blue: #1F6FE5; --blue-700: #164FA6; --blue-050: #EAF1FC; --amber: #F5A623; --amber-050: #FEF3E0; --ink: #0E1726; --slate: #4A576B; --mute: #5C6879; --line: #DEE4EC; --line-2: #EAEEF4; --bg: #FFFFFF; --bg-soft: #F5F7FA; --bg-soft-2: #EFF2F7; --ok: #12A76A; --sans: "Helvetica Neue", "Arial Nova", Arial, "Segoe UI", Roboto, sans-serif; --mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", "Consolas", monospace; --r: 10px; /* re-skin shared engine tokens -> Energypoint light palette (articles inherit) */ --sy-ink: #0E1726; --sy-indigo: #0E1726; /* headings render as dark ink (sans) */ --sy-indigo-deep: #0E1726; --sy-teal: #1F6FE5; /* links blue */ --sy-teal-deep: #164FA6; --sy-gold: #F5A623; /* amber accent */ --sy-bg: #FFFFFF; --sy-paper: #FFFFFF; --sy-gray: #4A576B; --sy-mist: #DEE4EC; --font-serif: var(--sans); /* Energypoint has no serif */ --font-sans: var(--sans); --wrap: 1240px; } /* ---------- Base refinements ---------- */ body { background: radial-gradient(1200px 460px at 82% -8%, var(--blue-050), transparent 60%), var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--sans); color: var(--ink); letter-spacing: -.01em; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* Two-tone focus ring: blue outline (>=7.8:1 on the light canvas, and unclipped by the tab-strip scroll container) + a white halo so it stays visible on the blue masthead and dark utility bar. Amber alone failed WCAG 1.4.11 (~2:1 on white). */ :focus-visible { outline: 3px solid var(--blue-700); outline-offset: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,.9); border-radius: 4px; } /* ---------- Utility bar ---------- */ .ep-util { background: var(--ink); color: #C9D3E2; font-size: 12px; } .ep-util .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 18px; min-height: 38px; padding-block: 4px; } .ep-util .date { letter-spacing: .02em; } .ep-util .spacer { flex: 1; } .ep-live { display: inline-flex; align-items: center; gap: 7px; color: #E6ECF5; } .ep-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(245,166,35,.6); animation: ep-pulse 2.4s infinite; } @keyframes ep-pulse { 0% { box-shadow: 0 0 0 0 rgba(245,166,35,.55); } 70% { box-shadow: 0 0 0 7px rgba(245,166,35,0); } 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); } } .ep-lang { display: inline-flex; border: 1px solid #33415A; border-radius: 999px; overflow: hidden; } .ep-lang a, .ep-lang span { font: inherit; font-size: 12px; background: transparent; color: #9FB0C7; border: 0; padding: 8px 14px; } .ep-lang a:hover { color: #fff; text-decoration: none; } .ep-lang [aria-current="true"] { background: var(--blue); color: #fff; } /* ---------- Masthead ---------- */ .ep-mast { background: var(--blue); background-image: linear-gradient(115deg, var(--blue-700), var(--blue) 55%, #2E7DF0); color: #fff; position: relative; overflow: hidden; } .ep-mast::after { content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); background-size: 44px 100%; } .ep-mast .wrap { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; min-height: 96px; padding-block: 14px; } .ep-brand { display: flex; align-items: center; gap: 14px; } .ep-logo { height: 54px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.22)); } .ep-name { font-weight: 800; font-size: 25px; letter-spacing: -.02em; line-height: 1; } .ep-name b { color: var(--amber); font-weight: 800; } .ep-tag { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #BFD4F5; margin-block-start: 5px; } /* Dark translucent plate behind the live chips so small-text labels clear WCAG AA (4.5:1) — the bright blue masthead gradient can't reach it otherwise. */ .ep-idx { margin-inline-start: auto; display: flex; gap: 24px; align-items: center; background: rgba(9,18,38,.36); padding: 8px 16px; border-radius: 12px; } .ep-chip { text-align: start; } .ep-chip .k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #DCE7FA; } .ep-chip .v { font-family: var(--mono); font-size: 16px; font-weight: 600; margin-block-start: 2px; } .ep-chip .v span { color: #C4F2DD; font-size: 12px; margin-inline-start: 4px; } .ep-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; border-radius: 8px; padding: 11px 18px; transition: .16s; border: 1px solid transparent; white-space: nowrap; } .ep-btn-amber { background: var(--amber); color: #241703; border-color: #e0961a; } .ep-btn-amber:hover { background: #ffb838; transform: translateY(-1px); color: #241703; text-decoration: none; } .ep-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .ep-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; } .ep-btn-blue { background: var(--blue); color: #fff; border-color: var(--blue-700); } .ep-btn-blue:hover { background: #2E7DF0; transform: translateY(-1px); color: #fff; text-decoration: none; } .ep-btn-line { background: #fff; color: var(--ink); border-color: var(--line); } .ep-btn-line:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; } .ep-mast .cta { margin-inline-start: auto; } @media (max-width: 1040px) { .ep-mast .ep-idx { display: none; } .ep-mast .cta { margin-inline-start: auto; } } @media (max-width: 560px) { .ep-mast .wrap { min-height: 0; gap: 12px 16px; } .ep-name { font-size: 22px; } .ep-mast .cta { margin-inline-start: auto; padding: 10px 15px; } } /* ---------- Nav (hybrid: contained tab-strip + burger drawer on mobile) ---------- */ .ep-nav { background: #fff; border-block-end: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .ep-nav .wrap { display: flex; align-items: center; gap: 6px; height: 52px; } /* Tab strip: the ONLY horizontal scroller; min-width:0 keeps it inside the row so the header can never push the page wider than the viewport. */ .ep-nav__tabs { display: flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; } .ep-nav__tabs::-webkit-scrollbar { display: none; } .ep-nav__tabs a { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--slate); padding: 11px 14px; border-radius: 7px; white-space: nowrap; transition: .15s; } .ep-nav__tabs a:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; } .ep-nav__tabs a.on { color: var(--blue); } .ep-nav__tabs a.on::after { content: ""; display: block; height: 2px; background: var(--amber); margin-block-start: 6px; border-radius: 2px; } .ep-nav .grow { flex: 1; } .ep-nav .search { font: inherit; font-size: 13px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; transition: .15s; } .ep-nav .search::placeholder { color: var(--mute); } .ep-nav .search:hover { border-color: var(--blue); } .ep-nav .search:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-050); } .ep-search--inline { display: inline-flex; } /* Icon tools (search + burger) — only shown on mobile when JS can operate them */ .ep-nav__tools { display: flex; align-items: center; gap: 2px; flex: none; } .ep-nav__icon { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; border-radius: 8px; color: var(--slate); cursor: pointer; transition: .15s; } .ep-nav__icon:hover { background: var(--bg-soft); color: var(--ink); } .ep-nav__icon[aria-expanded="true"] { background: var(--blue-050); color: var(--blue); } /* Burger drawer — overlays the content below the sticky nav */ .ep-nav__drawer { position: absolute; inset-inline: 0; top: 100%; background: #fff; border-block-end: 1px solid var(--line); box-shadow: 0 20px 44px -26px rgba(14,23,38,.55); padding: 14px 24px 18px; max-height: calc(100vh - 100%); overflow-y: auto; z-index: 30; } .ep-nav__drawer[hidden] { display: none; } .ep-nav__drawer .ep-search--drawer { display: flex; margin-block-end: 8px; } .ep-nav__drawer .search { width: 100%; font-size: 16px; padding: 12px 16px; } .ep-nav__list { display: flex; flex-direction: column; } .ep-nav__list a { display: block; padding: 13px 8px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink); border-block-end: 1px solid var(--line-2); } .ep-nav__list a:last-child { border-block-end: 0; } .ep-nav__list a:hover { color: var(--blue); text-decoration: none; } .ep-nav__list a.on { color: var(--blue); } @media (max-width: 760px) { .ep-nav__tabs { flex: 1 1 auto; } .ep-nav .grow { display: none; } .ep-search--inline { display: none; } .ep-js .ep-nav__icon { display: inline-flex; } } @media (min-width: 761px) { .ep-nav__drawer { display: none; } } /* ---------- Kicker ---------- */ .ep-kick { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); } .ep-kick::before { content: ""; width: 22px; height: 3px; background: var(--amber); border-radius: 2px; } .ep-amberk { color: #8A5A0C; } /* ---------- Corporate hero ---------- */ .ep-chero { position: relative; overflow: hidden; border-block-end: 1px solid var(--line); background: linear-gradient(180deg, #fff, #F7F9FC); } .ep-chero .wrap { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding-block: 56px 60px; } @media (max-width: 880px) { .ep-chero .wrap { grid-template-columns: 1fr; gap: 30px; padding-block: 40px 44px; } } .ep-chero h1 { font-size: 44px; line-height: 1.08; letter-spacing: -.025em; font-weight: 800; margin: 16px 0 18px; } .ep-chero h1 u { text-decoration: none; color: var(--blue); } @media (max-width: 560px) { .ep-chero h1 { font-size: 33px; } } .ep-chero .sub { font-size: 17px; color: var(--slate); max-width: 44ch; margin: 0 0 26px; } .ep-chero .actions { display: flex; flex-wrap: wrap; gap: 12px; } .ep-chero .stats { display: flex; gap: 26px; margin-block-start: 32px; flex-wrap: wrap; } .ep-chero .stats .s .n { font-family: var(--mono); font-size: 23px; font-weight: 700; color: var(--ink); letter-spacing: -.03em; } .ep-chero .stats .s .n b { color: var(--blue); font-weight: 700; } .ep-chero .stats .s .l { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--mute); margin-block-start: 3px; } .ep-hviz { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px -34px rgba(20,79,166,.55); background: #0E2A57; } .ep-hviz .label { position: absolute; inset-block-end: 12px; inset-inline-start: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: #fff; background: rgba(14,23,38,.5); border: 1px solid rgba(255,255,255,.22); padding: 5px 10px; border-radius: 6px; } /* ---------- What we do band ---------- */ .ep-wwd { background: var(--ink); color: #E6ECF5; } .ep-wwd .wrap { padding-block: 44px 46px; } .ep-wwd .hd { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .ep-wwd .hd .ep-kick { color: #7FB0F5; } .ep-wwd .hd .cred { font-size: 12px; color: #8FA0BC; letter-spacing: .04em; } .ep-wwd .hd .cred b { color: #fff; font-weight: 700; } .ep-wwd .ep-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-block-start: 26px; } @media (max-width: 760px) { .ep-wwd .ep-cols { grid-template-columns: 1fr; } } .ep-wwd .ep-col { border: 1px solid #26375B; border-radius: 12px; padding: 22px 22px 24px; background: #16213A; transition: .18s; } .ep-wwd .ep-col:hover { border-color: var(--blue); transform: translateY(-3px); } .ep-wwd .ep-col .no { font-family: var(--mono); font-size: 12px; color: var(--amber); letter-spacing: .1em; } .ep-wwd .ep-col h3 { font-size: 18px; margin: 12px 0 8px; font-weight: 700; color: #fff; letter-spacing: -.01em; } .ep-wwd .ep-col p { font-size: 13.5px; color: #AEBCD2; margin: 0; line-height: 1.55; } .ep-wwd .ep-col .bar { height: 3px; width: 34px; background: var(--amber); border-radius: 2px; margin-block-end: 16px; } /* ---------- Insights lead + wire ---------- */ .ep-insint { padding-block: 34px 30px; } .ep-insint .ihd { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .ep-insint .ihd h2 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; margin: 0; font-weight: 800; } .ep-insint .ihd .ep-note { font-size: 12.5px; color: var(--mute); } .ep-lead-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 30px; align-items: stretch; margin-block-start: 18px; } @media (max-width: 900px) { .ep-lead-grid { grid-template-columns: 1fr; } } .ep-lead { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(14,23,38,.02); } .ep-lead .ep-art { position: relative; aspect-ratio: 16/8.4; background: #0E1726; } .ep-lead .ep-art img { width: 100%; height: 100%; object-fit: cover; } .ep-lead .ep-art .label { position: absolute; inset-block-end: 12px; inset-inline-start: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: #fff; background: rgba(14,23,38,.55); border: 1px solid rgba(255,255,255,.22); padding: 5px 10px; border-radius: 6px; } .ep-lead .body { padding: 22px 24px 24px; } .ep-lead h3.head { font-size: 30px; line-height: 1.14; letter-spacing: -.02em; margin: 12px 0 10px; font-weight: 800; } .ep-lead p.dek { color: var(--slate); font-size: 15.5px; margin: 0; } .ep-lead .by { margin-block-start: 16px; font-size: 12.5px; color: var(--mute); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .ep-lead .by b { color: var(--ink); } .ep-callout { display: grid; grid-template-columns: repeat(3, 1fr); border-block-start: 1px solid var(--line); margin-block-start: 20px; } .ep-callout .st { padding: 16px 18px; border-inline-start: 1px solid var(--line-2); } .ep-callout .st:first-child { border-inline-start: 0; } .ep-callout .st .n { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: -.03em; color: var(--blue); } .ep-callout .st .n small { font-size: 13px; color: var(--slate); font-weight: 600; margin-inline-start: 2px; } .ep-callout .st .l { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-block-start: 4px; } .ep-callout .st.acc .n { color: #C77E12; } @media (max-width: 620px) { .ep-callout { grid-template-columns: 1fr; } .ep-callout .st { border-inline-start: 0; border-block-start: 1px solid var(--line-2); padding-inline: 0; } .ep-callout .st:first-child { border-block-start: 0; } } .ep-rail { border: 1px solid var(--line); border-radius: var(--r); background: #fff; display: flex; flex-direction: column; } .ep-rail .rhd { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-block-end: 1px solid var(--line); } .ep-rail .rhd .t { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .ep-rail .rhd .t span { color: var(--amber); } .ep-rail ol { list-style: none; margin: 0; padding: 6px 0; } .ep-rail li { display: flex; gap: 14px; padding: 14px 18px; border-block-end: 1px solid var(--line-2); } .ep-rail li:last-child { border-block-end: 0; } .ep-rail li .rn { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--blue); min-width: 20px; } .ep-rail li a { font-size: 14.5px; font-weight: 600; line-height: 1.3; } .ep-rail li a:hover { color: var(--blue); text-decoration: none; } .ep-rail li .m { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--amber); margin-block-start: 5px; font-weight: 600; } .ep-rail li .m em { color: var(--mute); font-style: normal; } /* ---------- Sections ---------- */ .ep-divide { border-block-start: 2px solid var(--ink); margin-block-start: 8px; } .ep-secthd { display: flex; align-items: baseline; justify-content: space-between; padding-block: 22px 6px; } .ep-secthd h2 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin: 0; font-weight: 800; } .ep-secthd .ep-more { font-size: 12px; font-weight: 700; color: var(--blue); } .ep-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-block: 6px 34px; } @media (max-width: 900px) { .ep-cards { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .ep-cards { grid-template-columns: 1fr; } } .ep-card { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: .18s; } .ep-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(14,23,38,.4); border-color: #CBD6E4; } .ep-card .ep-art { aspect-ratio: 16/9; position: relative; background: #0E1726; } .ep-card .ep-art img { width: 100%; height: 100%; object-fit: cover; } .ep-card .ep-art .label { position: absolute; inset-block-end: 10px; inset-inline-start: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: #fff; background: rgba(14,23,38,.5); border: 1px solid rgba(255,255,255,.2); padding: 4px 8px; border-radius: 5px; } .ep-card .c { padding: 16px 17px 18px; display: flex; flex-direction: column; flex: 1; } .ep-card h3 { font-size: 17px; line-height: 1.25; letter-spacing: -.01em; margin: 9px 0 0; font-weight: 700; } .ep-card:hover h3 { color: var(--blue); } .ep-card .metric { margin-block-start: auto; padding-block-start: 14px; display: flex; align-items: baseline; gap: 8px; } .ep-card .metric .n { font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--ink); } .ep-card .metric .u { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); } .ep-band { background: var(--bg-soft); border-block: 1px solid var(--line); } .ep-band .ep-secthd h2 { color: var(--ink); } .ep-eff { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; padding-block: 8px 36px; } @media (max-width: 820px) { .ep-eff { grid-template-columns: 1fr; } } .ep-feat { border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; display: flex; } @media (max-width: 520px) { .ep-feat { flex-direction: column; } } .ep-feat .ep-art { width: 44%; min-height: 180px; position: relative; background: #0E1726; flex: none; } .ep-feat .ep-art img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 520px) { .ep-feat .ep-art { width: 100%; aspect-ratio: 16/9; } } .ep-feat .ep-art .label { position: absolute; inset-block-end: 10px; inset-inline-start: 10px; font-family: var(--mono); font-size: 10px; color: #fff; background: rgba(14,23,38,.5); border: 1px solid rgba(255,255,255,.2); padding: 4px 8px; border-radius: 5px; } .ep-feat .c { padding: 20px 22px; display: flex; flex-direction: column; } .ep-feat h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.01em; margin: 10px 0 8px; font-weight: 800; } .ep-feat p { color: var(--slate); font-size: 14px; margin: 0; } .ep-mini { display: flex; flex-direction: column; gap: 14px; } .ep-mini .row { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 15px 16px; display: flex; gap: 14px; align-items: center; transition: .15s; } .ep-mini .row:hover { border-color: #CBD6E4; transform: translateX(3px); } html[dir="rtl"] .ep-mini .row:hover { transform: translateX(-3px); } .ep-mini .row .big { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--blue); line-height: 1; min-width: 70px; } .ep-mini .row .big small { display: block; font-size: 10px; letter-spacing: .1em; color: var(--mute); margin-block-start: 4px; font-weight: 600; } .ep-mini .row .tx { font-size: 14px; font-weight: 600; line-height: 1.3; } /* ---------- Footer ---------- */ .ep-footer { background: var(--ink); color: #B9C4D6; margin-block-start: 10px; } .ep-footer .wrap { padding-block: 40px 30px; } .ep-ftop { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; justify-content: space-between; border-block-end: 1px solid #24324A; padding-block-end: 26px; } .ep-fb { display: flex; align-items: center; gap: 12px; } .ep-fb .name { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.02em; } .ep-fb .name b { color: var(--amber); } .ep-fcols { display: flex; gap: 44px; flex-wrap: wrap; } .ep-fcols .ep-col h4 { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #7E8DA6; margin: 0 0 12px; } .ep-fcols .ep-col a { display: block; font-size: 13.5px; color: #C7D2E2; padding-block: 5px; margin-block-end: 2px; } .ep-fcols .ep-col a:hover { color: #fff; text-decoration: none; } .ep-fbot { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding-block-start: 22px; font-size: 12.5px; color: #8494AC; } .ep-trust { display: inline-flex; align-items: center; gap: 9px; background: #16213A; border: 1px solid #263754; border-radius: 999px; padding: 8px 15px; color: #D3DEEE; font-size: 12px; } .ep-trust .vd { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); } /* ---------- Article / archive / page — light data-forward treatment ---------- */ .article-title, .page-title { font-family: var(--sans); font-weight: 800; color: var(--ink); letter-spacing: -.02em; } .article-dek { font-family: var(--sans); color: var(--slate); } .breadcrumbs { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--mute); } .breadcrumbs li::after { color: var(--amber); } .article-body { font-family: var(--sans); } .article-body a { color: var(--blue); border-bottom: 1px solid var(--line); } .article-body blockquote { border-inline-start: 3px solid var(--blue); font-style: normal; color: var(--ink); } .byline__avatar { background: var(--blue); font-family: var(--sans); } .author-box { background: var(--bg-soft); border-inline-start: 3px solid var(--amber); } .related { border-block-start: 2px solid var(--ink); } .section-head { border-block-end-color: var(--ink); } .section-head::after { background: var(--amber); } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); } .card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(14,23,38,.4); border-color: #CBD6E4; } .card__title a { color: var(--ink); } .card__title a:hover { color: var(--blue); } .pagination .page-numbers { border: 1px solid var(--line); color: var(--ink); border-radius: 7px; background: #fff; } .pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; } .pagination a.page-numbers:hover { border-color: var(--blue); color: var(--blue); } .btn { background: var(--blue); border-radius: 8px; } .btn:hover { background: var(--blue-700); } .page-header { border-block-end: 2px solid var(--ink); } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .ep-dot { animation: none !important; } .ep-card:hover, .ep-wwd .ep-col:hover, .ep-mini .row:hover, .ep-btn:hover, .ep-chero .ep-btn-blue:hover, .ep-btn-amber:hover { transform: none !important; } } /* ============================================================================ * ENE-D1 DESIGN-FIX (2026-07-17) — internal-page consistency + RTL polish. * Loads last, overrides only; fully reversible (delete this block to revert). * All spatial rules use CSS logical properties so /ar/ (dir="rtl") mirrors. * Verified in EN 1440 / EN 390 / AR 390 (+ AR 1440). * ========================================================================== */ /* ---- 1. Spacing scale (8-point) + article measure as CSS variables --------- * Single source of vertical/horizontal rhythm — no more scattered magic numbers. */ :root { --ep-space-1: 4px; --ep-space-2: 8px; --ep-space-3: 12px; --ep-space-4: 16px; --ep-space-5: 24px; --ep-space-6: 32px; --ep-space-7: 48px; --ep-space-8: 64px; --ep-space-9: 96px; --ep-measure: 760px; /* centred article/text column (~66ch at 17.9px) */ } /* ---- 2. Arabic web font (A1): self-hosted IBM Plex Sans Arabic (OFL-1.1) ---- * Subset to Arabic Unicode blocks via unicode-range, so Latin glyphs (GW, $, * dates) still fall back to the Energypoint sans. Mirrors the theme's existing * self-hosted-font convention (Playfair for Roksolana). */ @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0660-0669, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0660-0669, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0660-0669, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } /* Prepend the Arabic face to the sans stack for the whole RTL document; the * unicode-range keeps it Arabic-only, so Latin runs keep the Helvetica stack. */ html[dir="rtl"], html[lang="ar"] { --sans: "IBM Plex Sans Arabic", "Helvetica Neue", "Arial Nova", Arial, "Segoe UI", Roboto, sans-serif; line-height: 1.7; /* Arabic needs more leading than Latin */ } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { line-height: 1.3; } /* ---- 3. Article/page composition (E1, E2, A5): centre the measure ---------- * base.css .wrap--narrow (720) is overridden by this brand's .wrap (1240), which * left the article body 720px hugging the start edge with a dead half opposite. * Re-assert the narrow measure with .wrap.wrap--narrow (higher specificity) so * head / body / translation-note become one centred column; full-bleed hero and * related stay at container width for a deliberate wide-hero editorial rhythm. */ .wrap.wrap--narrow { max-width: var(--ep-measure); } /* E2: unify header widths — title + dek fill the column instead of 22ch vs 60ch. * text-wrap balances multi-line headlines / pretty-wraps the dek (no orphan word), * tightening the ragged left composition the audit flagged. */ .article-title, .article-dek { max-width: none; } .article-title, .page-title { text-wrap: balance; } .article-dek { text-wrap: pretty; } /* ---- 4. Article vertical rhythm (E3 partial, spacing scale) ---------------- */ .article-head { padding-block: var(--ep-space-6) var(--ep-space-4); } .article-hero { margin-block: var(--ep-space-6); } .article-hero figcaption { margin-block-start: var(--ep-space-3); color: var(--mute); } .article-body, .entry-content { line-height: 1.6; } .article-body p { margin-block: 0 var(--ep-space-5); } .article-body h2 { margin-block: var(--ep-space-8) var(--ep-space-4); } .article-body h3 { margin-block: var(--ep-space-6) var(--ep-space-3); } .article-body figure { margin-block: var(--ep-space-6); } .article-body ul, .article-body ol { margin-block: 0 var(--ep-space-5); } .article-body blockquote { margin-block: var(--ep-space-6); } html[dir="rtl"] .article-body, html[dir="rtl"] .entry-content { line-height: 1.85; } /* Related: clear separation from the end of the article body (was ~18px). */ .related { margin-block-start: var(--ep-space-8); padding-block-start: var(--ep-space-6); } /* ---- 5. E5: trim the doubled nav -> breadcrumb gap on page/archive/index ---- * .section already supplies top air; the page-header need not add its own. */ .page-header { padding-block-start: 0; } /* ---- 6. E6: homepage "Latest insights" rail — kill the empty stretched frame */ .ep-lead-grid { align-items: start; } /* ---- 7. E7: one label carrier per card — drop the on-photo badge, keep the * amber kicker above the title (the hero schematic label is left untouched). */ .ep-card .ep-art .label, .ep-lead .ep-art .label, .ep-feat .ep-art .label { display: none; } /* ---- 8. E8: footer mass balance — tagline gives the left block content mass -- */ .ep-fb { align-items: flex-start; } .ep-fb__text { display: flex; flex-direction: column; gap: var(--ep-space-1); } .ep-fb .ep-tagline { margin: 0; font-size: 12.5px; color: #8FA0BC; letter-spacing: .02em; line-height: 1.5; max-width: 34ch; } /* ---- 9. A2: RTL card sequence numbers align to the logical start ------------ * The inline dir="ltr" is removed in home-energy.php for the pure-digit 01/02/03 * (.no) and wire numbers (.rn); this belt-and-braces keeps them start-aligned. */ html[dir="rtl"] .ep-wwd .no, html[dir="rtl"] .ep-rail li .rn { text-align: start; }