/** * Base — Almutaheda Pack * * Reset, global element defaults, typography scale, * container/grid utilities, and RTL foundations. * Must be loaded after tokens.css. */ /* ─── Box-sizing reset ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* ─── Document ────────────────────────────────────────────────────── */ html { font-size: 100%; /* respect user browser preference */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--alm-font-arabic); font-size: var(--alm-text-base); font-weight: var(--alm-weight-regular); line-height: var(--alm-leading-normal); color: var(--alm-color-text-primary); background-color: var(--alm-color-surface-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* RTL direction — WordPress sets dir="rtl" on for Arabic */ [dir="rtl"] body { text-align: start; } /* ─── Media defaults ─────────────────────────────────────────────── */ img, video, svg { display: block; max-width: 100%; } img { height: auto; } /* ─── Typography — headings ──────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { margin-block-start: 0; margin-block-end: var(--alm-space-4); font-family: var(--alm-font-arabic); font-weight: var(--alm-weight-bold); line-height: var(--alm-leading-tight); color: var(--alm-color-text-primary); } h1 { font-size: var(--alm-text-3xl); } h2 { font-size: var(--alm-text-2xl); } h3 { font-size: var(--alm-text-xl); } h4 { font-size: var(--alm-text-lg); } h5 { font-size: var(--alm-text-md); } h6 { font-size: var(--alm-text-base);} @media (min-width: 768px) { h1 { font-size: var(--alm-text-4xl); } h2 { font-size: var(--alm-text-3xl); } h3 { font-size: var(--alm-text-2xl); } } /* ─── Typography — body elements ─────────────────────────────────── */ p { margin-block-start: 0; margin-block-end: var(--alm-space-4); } a { color: var(--alm-color-text-link); text-decoration: underline; text-underline-offset: 3px; transition: color var(--alm-duration-base) var(--alm-easing-standard); } a:hover { color: var(--alm-color-text-link-hover); } /* Reset list styles when used as layout constructs */ ul, ol { margin-block-start: 0; margin-block-end: var(--alm-space-4); padding-inline-start: var(--alm-space-6); } li { margin-block-end: var(--alm-space-1); } strong, b { font-weight: var(--alm-weight-bold); } small { font-size: var(--alm-text-sm); } /* ─── Horizontal rule ────────────────────────────────────────────── */ hr { border: none; border-top: var(--alm-border-standard); margin-block: var(--alm-space-6); } /* ─── Tables ─────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; font-size: var(--alm-text-sm); } th, td { padding: var(--alm-space-3) var(--alm-space-4); text-align: start; border-bottom: var(--alm-border-standard); } th { font-weight: var(--alm-weight-semibold); color: var(--alm-color-text-secondary); background-color: var(--alm-color-surface-subtle); } /* ─── Code ───────────────────────────────────────────────────────── */ code, kbd, pre, samp { font-family: var(--alm-font-mono); font-size: 0.9em; } code { background-color: var(--alm-color-navy-primary-10); padding: var(--alm-space-0-5) var(--alm-space-1); border-radius: var(--alm-radius-sm); } pre { background-color: var(--alm-color-navy-primary); color: var(--alm-color-white); padding: var(--alm-space-4); border-radius: var(--alm-radius-md); overflow-x: auto; margin-block-end: var(--alm-space-4); } pre code { background: none; padding: 0; border-radius: 0; } /* ─── Blockquote ─────────────────────────────────────────────────── */ blockquote { border-inline-start: 4px solid var(--alm-color-sand); margin-inline: 0; padding-inline-start: var(--alm-space-6); color: var(--alm-color-text-secondary); font-size: var(--alm-text-md); font-style: italic; } /* ─── Typography utility classes ─────────────────────────────────── */ .alm-text-xs { font-size: var(--alm-text-xs); } .alm-text-sm { font-size: var(--alm-text-sm); } .alm-text-base { font-size: var(--alm-text-base); } .alm-text-md { font-size: var(--alm-text-md); } .alm-text-lg { font-size: var(--alm-text-lg); } .alm-text-xl { font-size: var(--alm-text-xl); } .alm-text-2xl { font-size: var(--alm-text-2xl); } .alm-text-3xl { font-size: var(--alm-text-3xl); } .alm-weight-regular { font-weight: var(--alm-weight-regular); } .alm-weight-medium { font-weight: var(--alm-weight-medium); } .alm-weight-semibold { font-weight: var(--alm-weight-semibold); } .alm-weight-bold { font-weight: var(--alm-weight-bold); } .alm-text-primary { color: var(--alm-color-text-primary); } .alm-text-secondary { color: var(--alm-color-text-secondary); } .alm-text-muted { color: var(--alm-color-text-muted); } .alm-text-inverse { color: var(--alm-color-text-inverse); } .alm-text-success { color: var(--alm-color-success); } .alm-text-warning { color: var(--alm-color-warning); } .alm-text-error { color: var(--alm-color-error); } .alm-text-start { text-align: start; } .alm-text-end { text-align: end; } .alm-text-center { text-align: center; } /* ─── Container ──────────────────────────────────────────────────── */ .alm-container { width: 100%; max-width: var(--alm-container-xl); margin-inline: auto; padding-inline: var(--alm-container-padding-x); } .alm-container--sm { max-width: var(--alm-container-sm); } .alm-container--md { max-width: var(--alm-container-md); } .alm-container--lg { max-width: var(--alm-container-lg); } .alm-container--xl { max-width: var(--alm-container-xl); } .alm-container--2xl { max-width: var(--alm-container-2xl); } .alm-container--full { max-width: none; } /* ─── Grid ───────────────────────────────────────────────────────── */ .alm-grid { display: grid; gap: var(--alm-grid-gap); } /* Column count helpers */ .alm-grid--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .alm-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .alm-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .alm-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Responsive auto-fill grid */ .alm-grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .alm-grid--auto-md { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } /* Sidebar layout: content + aside */ .alm-grid--sidebar { grid-template-columns: 1fr; } @media (min-width: 1024px) { .alm-grid--sidebar { grid-template-columns: 1fr 320px; } [dir="rtl"] .alm-grid--sidebar { grid-template-columns: 320px 1fr; } } /* Gap overrides */ .alm-gap-2 { gap: var(--alm-space-2); } .alm-gap-4 { gap: var(--alm-space-4); } .alm-gap-6 { gap: var(--alm-space-6); } .alm-gap-8 { gap: var(--alm-space-8); } /* ─── Flex utilities ─────────────────────────────────────────────── */ .alm-flex { display: flex; } .alm-flex--center { display: flex; align-items: center; justify-content: center; } .alm-flex--between{ display: flex; align-items: center; justify-content: space-between; } .alm-flex--wrap { flex-wrap: wrap; } .alm-flex--col { flex-direction: column; } .alm-items-center { align-items: center; } .alm-items-start { align-items: flex-start; } .alm-items-end { align-items: flex-end; } .alm-justify-start { justify-content: flex-start; } .alm-justify-end { justify-content: flex-end; } .alm-justify-center{ justify-content: center; } .alm-gap-x-2 { column-gap: var(--alm-space-2); } .alm-gap-x-4 { column-gap: var(--alm-space-4); } .alm-gap-y-4 { row-gap: var(--alm-space-4); } /* ─── Section spacing ────────────────────────────────────────────── */ .alm-section { padding-block: var(--alm-space-12); } @media (min-width: 768px) { .alm-section { padding-block: var(--alm-space-20); } } /* ─── Display utilities ──────────────────────────────────────────── */ .alm-hidden { display: none !important; } .alm-block { display: block; } .alm-inline { display: inline; } .alm-inline-block { display: inline-block; } /* ─── Spacing helpers ────────────────────────────────────────────── */ .alm-mt-0 { margin-block-start: 0; } .alm-mt-4 { margin-block-start: var(--alm-space-4); } .alm-mt-8 { margin-block-start: var(--alm-space-8); } .alm-mb-0 { margin-block-end: 0; } .alm-mb-4 { margin-block-end: var(--alm-space-4); } .alm-mb-8 { margin-block-end: var(--alm-space-8); } /* ─── Surface utilities ──────────────────────────────────────────── */ .alm-bg-page { background-color: var(--alm-color-surface-page); } .alm-bg-subtle { background-color: var(--alm-color-surface-subtle); } .alm-bg-navy { background-color: var(--alm-color-navy-primary); color: var(--alm-color-text-inverse); } .alm-bg-sand { background-color: var(--alm-color-sand); } /* ─── Border utilities ───────────────────────────────────────────── */ .alm-border { border: var(--alm-border-standard); } .alm-border-top { border-top: var(--alm-border-standard); } .alm-border-bottom { border-bottom: var(--alm-border-standard); } .alm-rounded-sm { border-radius: var(--alm-radius-sm); } .alm-rounded-md { border-radius: var(--alm-radius-md); } .alm-rounded-lg { border-radius: var(--alm-radius-lg); } .alm-rounded-full { border-radius: var(--alm-radius-full); } /* ═══════════════════════════════════════════════════════════════════ BRAND FOUNDATION REFRESH — 2026 ══════════════════════════════════════════════════════════════════ */ body { min-width: 320px; background: linear-gradient(180deg, var(--alm-color-surface-page) 0%, #FFFFFF 28rem); text-rendering: optimizeLegibility; } main { display: block; } ::selection { background: var(--alm-color-sand-light); color: var(--alm-color-navy-primary); } h1, h2, h3 { letter-spacing: -0.018em; text-wrap: balance; } p { text-wrap: pretty; } a { text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); } a:hover { text-decoration-color: currentColor; } button, input, select, textarea { font: inherit; } button, [role="button"], input[type="submit"], input[type="button"] { touch-action: manipulation; } .alm-container { max-width: min(var(--alm-container-xl), calc(100% - 2 * var(--alm-container-padding-x))); padding-inline: 0; } .alm-section { padding-block: var(--alm-section-space); } .alm-section--compact { padding-block: var(--alm-section-space-sm); } .alm-section--spacious { padding-block: var(--alm-section-space-lg); } .alm-prose { max-width: var(--alm-content-readable); } @media (max-width: 47.99rem) { h1 { font-size: clamp(2rem, 9vw, 2.75rem); } h2 { font-size: clamp(1.625rem, 7vw, 2.125rem); } h3 { font-size: clamp(1.25rem, 5vw, 1.625rem); } .alm-container { max-width: calc(100% - 2rem); } } @media (min-width: 48rem) { .alm-container { max-width: min(var(--alm-container-xl), calc(100% - 4rem)); } } @media (min-width: 90rem) { .alm-container { max-width: var(--alm-container-xl); } }