/* ========================================================================= Al Dhaheri Holding — theme.css RTL base, Arabic type overrides, utility classes carried from the design handoff, header/footer, and the animation layer (scroll reveal, counters, marquee, hover). Colors/spacing/components come from design-system.css. ========================================================================= */ :root{ --font-heading:"Reem Kufi","IBM Plex Sans Arabic",system-ui,sans-serif; --font-body:"IBM Plex Sans Arabic",system-ui,sans-serif; --font-mono:"IBM Plex Sans Arabic",ui-monospace,monospace; --kah-maxw:1280px; } /* Direction comes from the attribute (set per language), so the layout flips automatically: RTL for Arabic, LTR for English. */ html{ overflow-x:hidden; max-width:100%; } body{ margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); overflow-x:hidden; max-width:100%; position:relative; } /* Latin (English / LTR) typography — swap the Arabic display fonts for the design system's Barlow pairing, and flip the directional arrows. */ [dir="ltr"]{ --font-heading:"Barlow Condensed","Barlow",system-ui,sans-serif; --font-body:"Barlow",system-ui,sans-serif; --font-mono:"Barlow",ui-monospace,monospace; } [dir="ltr"] .kah-arrow{ transform:scaleX(-1); } /* Long-form content is bidi-smart via dir="auto" on each block (added in PHP), so paragraphs self-align by their own text. text-align:start lets that per-paragraph direction drive the alignment. */ .kah-prose p, .kah-prose h1, .kah-prose h2, .kah-prose h3, .kah-prose h4, .kah-prose li, .kah-prose blockquote{ text-align:start; } h1,h2,h3,h4,h5,h6{ font-family:var(--font-heading); letter-spacing:0; } a{ color:var(--color-accent-700); text-decoration:none; } a:hover{ color:var(--color-accent-900); } img{ max-width:100%; height:auto; } * { box-sizing:border-box; } .kah-container{ max-width:var(--kah-maxw); margin:0 auto; padding-inline:28px; } /* Accessibility: visually-hidden helper + skip link */ .screen-reader-text{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .screen-reader-text:focus{ position:fixed!important; top:8px; right:8px; width:auto; height:auto; clip:auto; padding:10px 16px; background:var(--color-accent-900); color:#fff; z-index:1000; } .mono{ font-family:var(--font-mono); letter-spacing:0.06em; } .vline{ writing-mode:vertical-rl; transform:rotate(180deg); } /* invert corner marks on dark fields */ .dark .blueprint > .corner{ color:color-mix(in srgb, #f2f2f3 70%, transparent); } .grid-lines{ background-image: linear-gradient(to right, color-mix(in srgb, currentColor 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, currentColor 6%, transparent) 1px, transparent 1px); background-size:80px 80px; } .hover-ghost{ transition:background .18s ease, transform .18s ease; } .hover-ghost:hover{ background:color-mix(in srgb, var(--color-accent) 6%, transparent); } .card-hover{ transition:transform .3s ease, box-shadow .3s ease; } .card-hover:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); } /* Image slot replacement — a duotone-treated media frame that fills its box */ .kah-media{ position:relative; width:100%; height:100%; overflow:hidden; } .kah-media img{ width:100%; height:100%; object-fit:cover; display:block; } /* Softer duotone wash for portraits (e.g. the chairman) so the face stays clear. Lower the value for even less tint; 0 = full-color photo. */ .kah-soft-tone.duotone::after{ opacity:0.3; } .kah-media-empty{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:16px; font-family:var(--font-mono); font-size:12px; line-height:1.6; color:var(--color-accent-700); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-accent) 8%, transparent) 0 10px, transparent 10px 20px), var(--color-surface); } /* ========================================================================= Header / Footer ========================================================================= */ .kah-topbar{ border-bottom:1px solid var(--color-divider); } .kah-topbar .kah-container{ display:flex; justify-content:space-between; align-items:center; padding-block:8px; font-size:11px; color:var(--color-neutral-700); } .kah-topbar .kah-topbar-right{ display:flex; gap:16px; } .kah-header .kah-container{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:22px; } .kah-brand{ display:flex; align-items:center; gap:14px; } .kah-brand-mark{ width:38px; height:38px; background:var(--color-accent-900); color:#f2f2f3; display:grid; place-items:center; font-family:var(--font-heading); font-weight:700; font-size:16px; text-decoration:none; } .kah-brand-mark span{ font-size:11px; margin-right:1px; } .kah-brand-name{ font-family:var(--font-heading); font-weight:600; font-size:17px; line-height:1; color:var(--color-text); } .kah-brand-sub{ font-family:var(--font-mono); font-size:10px; color:var(--color-neutral-600); margin-top:3px; } .kah-nav{ display:flex; align-items:center; gap:36px; } .kah-nav a{ color:var(--color-text); font-size:14px; } .kah-nav a:hover{ color:var(--color-accent-700); } .kah-nav ul{ display:flex; align-items:center; gap:36px; list-style:none; margin:0; padding:0; } .kah-nav-toggle{ display:none; background:none; border:1px solid var(--color-divider); padding:8px 10px; cursor:pointer; color:var(--color-text); } /* Mobile drawer close button + backdrop (shown only when the drawer is open) */ .kah-nav-close{ display:none; position:absolute; top:14px; inset-inline-end:14px; background:none; border:0; padding:6px; cursor:pointer; color:var(--color-text); line-height:0; } .kah-nav-backdrop{ position:fixed; inset:0; background:rgba(15,22,30,.5); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; z-index:89; cursor:pointer; } body.kah-nav-open .kah-nav-backdrop{ opacity:1 !important; visibility:visible !important; } @media (min-width:769px){ .kah-nav-backdrop{ display:none; } } .kah-footer{ background:var(--color-accent-900); color:#f2f2f3; padding:64px 0 32px; margin-top:0; } .kah-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid color-mix(in srgb, #f2f2f3 20%, transparent); } .kah-footer a{ color:#f2f2f3; font-size:13.5px; opacity:0.8; } .kah-footer a:hover{ opacity:1; } .kah-footer-heading{ font-family:var(--font-mono); font-size:11px; color:var(--color-accent-300); letter-spacing:0.15em; margin-bottom:16px; } .kah-footer-col-links{ display:flex; flex-direction:column; gap:10px; } .kah-footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; gap:16px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px; opacity:0.55; } /* ========================================================================= Section scaffolding used by front page / widgets ========================================================================= */ .kah-section{ max-width:var(--kah-maxw); margin:0 auto; padding:140px 28px 0; } .kah-section-num{ font-family:var(--font-heading); font-size:180px; line-height:0.85; color:var(--color-accent-700); font-weight:500; } .kah-kicker{ font-family:var(--font-mono); font-size:12px; color:var(--color-accent-700); letter-spacing:0.15em; margin-bottom:14px; } .kah-h2{ font-size:48px; line-height:1.1; margin:0; font-weight:500; } /* Companies grid */ .kah-companies-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; } .kah-company-card{ display:flex; flex-direction:column; padding:0; overflow:hidden; } .kah-company-card .kah-media{ aspect-ratio:4/3; border-bottom:1px solid var(--color-divider); } .kah-company-body{ padding:22px 20px 24px; display:flex; flex-direction:column; flex:1; } /* ========================================================================= ANIMATION LAYER ========================================================================= */ @media (prefers-reduced-motion: no-preference){ /* Pure-CSS entrance animation. `both` fill-mode holds opacity:0 only during the short delay, then animates to opacity:1 and HOLDS it — so content always ends fully visible with zero dependency on JavaScript. Nothing sets opacity:0 outside this animation, so a blank page is impossible. */ .kah-reveal{ animation: kah-reveal-in .75s cubic-bezier(.2,.7,.2,1) both; } @keyframes kah-reveal-in{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } } .kah-reveal-delay-1{ animation-delay:.08s; } .kah-reveal-delay-2{ animation-delay:.16s; } .kah-reveal-delay-3{ animation-delay:.24s; } .kah-reveal-delay-4{ animation-delay:.32s; } .kah-reveal-delay-5{ animation-delay:.40s; } /* subtle scale-in for framed media */ .kah-zoom{ overflow:hidden; } .kah-zoom img{ animation: kah-zoom-in 1.4s cubic-bezier(.2,.7,.2,1) both; } @keyframes kah-zoom-in{ from{ transform:scale(1.06); } to{ transform:scale(1); } } } /* Marquee (subsidiaries ticker) */ .kah-marquee{ overflow:hidden; position:relative; } .kah-marquee-track{ display:flex; gap:32px; align-items:center; width:max-content; animation:kah-marquee 32s linear infinite; } .kah-marquee:hover .kah-marquee-track{ animation-play-state:paused; } .kah-marquee-item{ font-family:var(--font-heading); font-size:15px; color:color-mix(in srgb, #f2f2f3 82%, transparent); white-space:nowrap; } .kah-marquee-sep{ color:color-mix(in srgb, #f2f2f3 30%, transparent); } @keyframes kah-marquee{ from{ transform:translateX(0); } to{ transform:translateX(50%); } } @media (prefers-reduced-motion: reduce){ .kah-marquee-track{ animation:none; } } /* Counter number */ .kah-counter{ font-variant-numeric:tabular-nums; } /* ========================================================================= Responsive Inline styles from the section markup win over stylesheet rules, so the collapse rules that target inline grids use !important on purpose. ========================================================================= */ /* Laptop / small desktop */ @media (max-width:1100px){ .kah-companies-grid{ grid-template-columns:repeat(3,1fr); } } /* Tablet landscape */ @media (max-width:1024px){ .kah-footer-grid{ grid-template-columns:1fr 1fr; } .kah-companies-grid{ grid-template-columns:repeat(2,1fr); } .kah-section{ padding-top:110px; } } /* Tablet — collapse every two-column layout to a single column */ @media (max-width:900px){ .kah-2col, .kah-2col-side, .kah-contact-grid, .kah-hero-inner, .kah-single-grid{ grid-template-columns:1fr !important; } .kah-hero-inner{ min-height:auto !important; padding-top:96px !important; gap:28px !important; align-items:start !important; } .kah-hero-inner > div{ padding-bottom:0 !important; } /* Decorative vertical spec labels read as noise once stacked */ .kah-decor{ display:none !important; } /* Featured company card: media on top, text below (drop the side border) */ .kah-featured > div:first-of-type{ min-height:260px !important; } .kah-featured > div[style*="border-inline-start"]{ border-inline-start:0 !important; border-top:1px solid var(--color-divider) !important; padding:32px 28px !important; } /* Chairman portrait shouldn't tower on a phone */ .kah-chairman-portrait{ aspect-ratio:16/10 !important; max-width:460px; } /* Float badge would overflow — pin it into flow */ .kah-float-badge{ position:static !important; inset:auto !important; margin-top:16px; max-width:none !important; } } /* Tablet portrait — 3-up rows become 2-up */ @media (max-width:820px){ .kah-3col{ grid-template-columns:1fr 1fr !important; } .kah-timeline{ grid-template-columns:1fr 1fr !important; } } /* Mobile */ @media (max-width:768px){ .kah-nav{ position:fixed; top:0; bottom:0; width:min(82vw,320px); max-width:320px; background:var(--color-bg); flex-direction:column; align-items:flex-start; padding:80px 28px; transition:transform .3s ease, visibility .3s ease; visibility:hidden; z-index:90; box-shadow:var(--shadow-lg); overflow-y:auto; } /* Drawer slides in from the reading-start side: right for Arabic, left for English */ html[dir="rtl"] .kah-nav{ right:0; left:auto; transform:translateX(100%); } html[dir="ltr"] .kah-nav{ left:0; right:auto; transform:translateX(-100%); } .kah-nav ul{ flex-direction:column; align-items:flex-start; gap:20px; } body.kah-nav-open .kah-nav{ transform:translateX(0) !important; visibility:visible !important; } .kah-nav-toggle{ display:inline-flex; } .kah-nav-close{ display:block; } .kah-footer-grid{ grid-template-columns:1fr; gap:32px; } .kah-h2{ font-size:34px; } /* Tame the huge inline section top paddings */ .kah-section{ padding-top:72px !important; } #approach, #companies, #about{ padding-top:72px !important; } #contact{ padding-top:72px !important; padding-bottom:56px !important; } .kah-chairman-sec{ margin-top:72px !important; padding:64px 0 !important; } /* Approach steps: uniform padding + top rules when stacked */ #approach .kah-3col > div{ padding:24px 0 !important; border-inline-end:0 !important; border-top:1px solid var(--color-divider) !important; } /* Header: drop the CTA (contact lives in the menu) + shrink brand sub */ .kah-header-cta{ display:none !important; } .kah-header .kah-container{ padding-block:16px; } /* Top utility bar wraps instead of overflowing */ .kah-topbar .kah-container{ flex-direction:column; align-items:flex-start; gap:2px; font-size:10px; } .kah-topbar .kah-topbar-right{ gap:12px; } /* Marquee a touch faster/tighter on small screens */ .kah-marquee-track{ gap:22px; } } /* Small phones */ @media (max-width:560px){ .kah-container{ padding-inline:18px; } .kah-companies-grid{ grid-template-columns:1fr; } .kah-3col{ grid-template-columns:1fr !important; } .kah-timeline{ grid-template-columns:1fr !important; } .kah-form-grid{ grid-template-columns:1fr !important; } .kah-featured > div[style*="border-inline-start"]{ padding:28px 20px !important; } /* Company grid header number + heading tighten */ #companies > div:first-child{ gap:16px !important; } }