/* ========================================================================== Deon Energy — main stylesheet Tokens verified from Figma file rSeK3CgUNdzwAoa8LHSpfc (2026-06-24). Revised 2026-07 per client change log v1 (Revised_Website_Change_Log_v1): 4-colour palette, Plus Jakarta Sans display face, tightened type + spacing. ========================================================================== */ :root { /* Color — client palette (Color.png): #F29020 / #FFFFFF / #1D1B20 / #fbf9f5 */ --color-bg: #fbf9f5; /* off-white page background */ --color-bg-warm: #fbf9f5; /* alias — alternates against --color-surface */ --color-surface: #ffffff; /* cards, header */ --color-ink: #1d1b20; /* headings */ --color-ink-dark: #1d1b20; /* card headings */ --color-ink-soft: #444748; /* body text */ --color-dark: #1d1b20; /* dark surfaces (footer, dark strips) */ --color-dark-soft: #2a2830; /* raised rows on dark surfaces */ --color-on-dark: #ffffff; /* text on dark surfaces */ --color-on-dark-soft: #a7a4ad; /* muted text on dark surfaces */ --color-accent: #f29020; /* primary orange */ --color-accent-deep: #d97d0e; /* hover orange */ --color-border: #c4c7c7; /* main hairline borders */ --color-divider: #e5e5e5; /* card internal dividers */ --color-icon-bg: #efeeea; /* icon background squares */ /* Header dropdown (dark panel — reference §B) */ --nav-panel: #1d1b20; /* dark dropdown surface */ --nav-panel-hover: #2a2830; /* row hover on dark panel */ --nav-icon-bg: rgba(242, 144, 32, 0.14); /* orange icon tile tint */ --nav-title: #ffffff; /* dropdown item title on dark */ --nav-desc: #a7a4ad; /* dropdown item description on dark */ /* Type — Plus Jakarta Sans (display) + Inter (body). No serif face. */ --font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Type scale — desktop caps cut ~25% vs. v0.5 (client: "site looks zoomed") */ --fs-hero: clamp(30px, 3.6vw, 48px); /* page H1 / hero heading */ --fs-h2: clamp(24px, 2.6vw, 34px); /* section heading */ --fs-h3: clamp(19px, 1.7vw, 22px); /* card heading */ --fs-lead: clamp(15px, 1.2vw, 17px); /* hero / section intro copy */ --fs-body: 15px; /* body + card copy */ --fs-eyebrow: 13px; /* uppercase section labels */ /* Layout */ --container-max: 1280px; --gutter: clamp(20px, 5vw, 64px); --section-pad: clamp(40px, 4.4vw, 64px); --header-h: 72px; /* sticky header: 71px min-height + 1px border */ } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { /* `clip` not `hidden`: hidden would make a scroll container and kill position:sticky on the header. Guards against any full-bleed child overhanging the viewport (client issue A.2 — horizontal scrollbar). */ overflow-x: clip; max-width: 100%; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; color: var(--color-ink-soft); background: var(--color-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } /* Tailwind v4 emits its utilities inside `@layer utilities`, and this file is unlayered — an unlayered rule beats ANY layered rule regardless of specificity. So the `height: auto` above silently overrode `.h-full` / `.w-full` on every Phase 2 image that fills a fixed-ratio box (the project story-video poster rendered square and pushed the photo out of the 16:9 crop). Re-assert the three sizing utilities for images only. */ img.w-full { width: 100%; } img.h-full { height: 100%; } img.object-cover { object-fit: cover; } /* Same root cause on