/* ===================================================================== * Header — ONE rule, replacing 9 competing ones. * * WHY FIXED, NOT STICKY * `position: sticky` was declared three times and never worked, because * design-system.css sets `overflow-x: clip` and this file sets * `overflow-x: hidden` on . Any overflow value other than visible * on an ancestor turns it into the scroll container, so a sticky child * sticks to THAT box rather than the viewport - the header scrolled away. * We are not touching overflow in this round (per instruction), so fixed * is the correct answer: it positions against the viewport regardless. * * WHY NO !important AND NO JS * RC68-71 escalated: fixed !important, then a .tadreep-header-persistent * class with z-index 2147483000 added by JavaScript. That was a fight * between rules, not a fix. With the nine competing rules deleted there * is nothing left to out-rank, so plain declarations suffice and the * header no longer depends on JS to stay put. * * BODY OFFSET * A fixed header leaves the normal flow, so needs top padding * equal to the header height or the first content sits underneath it. * The values match the min-height rules kept further up this file * (72px desktop, 62px below 960px, 58px below 768px). * ================================================================== */ .tadreep-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; background: var(--color-white, #fff); border-block-end: 1px solid var(--color-border, #e8edf5); } body.tadreep-site { padding-block-start: 72px; } /* WordPress admin bar sits above the header for logged-in users. */ body.admin-bar .tadreep-header { inset-block-start: 32px; } @media (max-width: 959px) { body.tadreep-site { padding-block-start: 62px; } } @media (max-width: 782px) { /* Below 782px WordPress renders the admin bar 46px tall. */ body.admin-bar .tadreep-header { inset-block-start: 46px; } } @media (max-width: 767px) { body.tadreep-site { padding-block-start: 58px; } } .tadreep-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); } .tadreep-header-nav { display: none; align-items: center; gap: var(--space-6); } .tadreep-header-nav a { font-weight: 600; color: var(--color-text-primary); font-size: var(--text-sm); } .tadreep-header-nav a:hover, .tadreep-header-nav a.is-active { color: var(--color-turquoise-600); } .tadreep-header-account { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; } .tadreep-mobile-toggle { display: inline-flex; background: none; border: none; padding: var(--space-2); cursor: pointer; color: var(--color-navy-800); } .tadreep-mobile-nav { display: none; flex-direction: column; gap: var(--space-1); padding-block: var(--space-3); border-block-start: 1px solid var(--color-border); } .tadreep-mobile-nav.is-open { display: flex; } .tadreep-mobile-nav a { padding: var(--space-3); font-weight: 600; color: var(--color-text-primary); border-radius: var(--radius-sm); } .tadreep-mobile-nav a:hover { background: var(--color-bg); } .tadreep-mobile-nav-auth { display: flex; gap: var(--space-2); padding: var(--space-3); } @media (min-width: 960px) { .tadreep-header-nav { display: flex; } .tadreep-mobile-toggle { display: none; } .tadreep-mobile-nav { display: none; } } .tadreep-header-inner { min-height: 68px; padding-block: 10px; } .tadreep-header-nav { gap: clamp(12px, 1.35vw, 22px); flex: 1 1 auto; justify-content: center; min-width: 0; } .tadreep-header-nav > .tadreep-nav-link, .tadreep-nav-dropdown > .tadreep-nav-link { white-space: nowrap; font-size: 14px; } .tadreep-header-nav .tadreep-nav-link { padding-block: 8px; } .tadreep-nav-dropdown { position: relative; display: inline-flex; align-items: center; } .tadreep-nav-dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; display: none; padding: 8px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 12px 30px rgba(15, 23, 42, .12); } .tadreep-nav-dropdown-menu a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; } .tadreep-nav-dropdown-menu a:hover, .tadreep-nav-dropdown-menu a:focus-visible { background: var(--color-bg); } .tadreep-nav-dropdown:hover .tadreep-nav-dropdown-menu, .tadreep-nav-dropdown:focus-within .tadreep-nav-dropdown-menu { display: block; } .tadreep-header-auth { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } /* Keep the header visible while the page scrolls; no hide-on-scroll rule. */ .tadreep-header, .tadreep-header-inner { transform: none; } @media (min-width: 960px) { .tadreep-header-nav { display: flex; } } @media (max-width: 1199px) and (min-width: 960px) { .tadreep-header-inner { gap: 12px; } .tadreep-header-nav { gap: 10px; } .tadreep-header-nav > .tadreep-nav-link, .tadreep-nav-dropdown > .tadreep-nav-link { font-size: 13px; } .tadreep-header-auth .tadreep-btn { padding-inline: 10px; } } @media (max-width: 959px) { .tadreep-header-inner { min-height: 58px; } .tadreep-header-logo { flex: 0 0 auto; } .tadreep-header-auth { margin-inline-start: auto; } .tadreep-mobile-nav { max-height: calc(100vh - 58px); overflow-y: auto; background: var(--color-white); } } /* ===== Footer ===== */ .tadreep-footer { background: var(--color-navy-950); color: rgba(255,255,255,0.75); padding-block: var(--space-10); margin-block-start: var(--space-16); } .tadreep-footer a { color: rgba(255,255,255,0.75); } .tadreep-footer a:hover { color: var(--color-turquoise-500); } .tadreep-footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 640px) { .tadreep-footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .tadreep-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .tadreep-footer-logo img { height: 32px; margin-block-end: var(--space-3); } .tadreep-footer-desc { font-size: var(--text-sm); line-height: 1.6; } .tadreep-footer-col h4 { color: var(--color-white); font-size: var(--text-sm); margin-block-end: var(--space-3); } .tadreep-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .tadreep-footer-col ul li a { font-size: var(--text-sm); } .tadreep-footer-bottom { margin-block-start: var(--space-8); padding-block-start: var(--space-6); border-block-start: 1px solid rgba(255,255,255,0.1); text-align: center; font-size: var(--text-xs); color: rgba(255,255,255,0.5); } /* ------------------------------------------------------------------------- * Standard web navigation refinement — STAGE6-RC6. * Web remains a conventional desktop website; icons improve recognition * without turning the desktop header into an app-style bottom navigation. * ---------------------------------------------------------------------- */ .tadreep-header-nav .tadreep-nav-link { display: inline-flex; align-items: center; gap: .42rem; padding-block: .45rem; text-decoration: none; } .tadreep-nav-icon, .tadreep-account-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .tadreep-nav-icon { width: 19px; height: 19px; } .tadreep-nav-icon svg { width: 100%; height: 100%; } .tadreep-header-nav a.is-active .tadreep-nav-icon { transform: translateY(-1px); } .tadreep-header-account { text-decoration: none; color: var(--color-text-primary); } .tadreep-header-account:hover { color: var(--color-turquoise-600); } .tadreep-account-icon { width: 22px; height: 22px; } .tadreep-account-icon svg { width: 100%; height: 100%; } .tadreep-mobile-nav .tadreep-nav-link { display: flex; align-items: center; gap: .65rem; } /* Mobile menu keeps web navigation behavior; icons are compact and touch-safe. */ @media (max-width: 959px) { .tadreep-mobile-nav .tadreep-nav-icon { width: 20px; height: 20px; } } /* ------------------------------------------------------------------------- * Responsive Mobile Web App-like shell — STAGE6-RC7. * This remains the same website; only the mobile presentation changes. * ---------------------------------------------------------------------- */ .tadreep-mobile-bottom-nav { display:none; } @media (max-width: 767px) { body { padding-bottom: 78px; } .tadreep-mobile-bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 99999; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); min-height: 70px; padding: 5px 8px max(5px, env(safe-area-inset-bottom)); box-sizing: border-box; background: rgba(255,255,255,.98); border-top: 1px solid #e2e8f0; box-shadow: 0 -8px 26px rgba(15,23,42,.10); backdrop-filter: blur(10px); } .tadreep-mobile-bottom-link { min-width:0; min-height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:5px 2px; color:#64748b; text-decoration:none; font-size:.68rem; font-weight:700; line-height:1.2; -webkit-tap-highlight-color:transparent; } .tadreep-mobile-bottom-link:active { transform:scale(.96); } .tadreep-mobile-bottom-link.is-active { color:#2563eb; } .tadreep-mobile-bottom-icon { display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; } .tadreep-mobile-bottom-icon svg { width:100%; height:100%; } .tadreep-header-nav, .tadreep-mobile-nav { display:none; } .tadreep-header { min-height:58px; } .tadreep-header-account, .tadreep-header-menu-toggle { min-width:44px; min-height:44px; } .tadreep-container { width:min(100% - 24px,720px); margin-inline:auto; } } @media (min-width:768px) { .tadreep-mobile-bottom-nav { display:none; } } /* Mobile web visual polish — STAGE6-RC8 */ @media (max-width: 767px) { html, body { max-width:100%; overflow-x:hidden; } .tadreep-mobile-bottom-nav { min-height:72px; padding:5px 7px max(5px, env(safe-area-inset-bottom)); background:#fff; border-top:1px solid #dfe6f0; box-shadow:0 -8px 28px rgba(15,23,42,.10); } .tadreep-mobile-bottom-link { position:relative; min-height:60px; gap:4px; color:#51627b; font-size:.67rem; font-weight:800; } .tadreep-mobile-bottom-icon { width:25px; height:25px; padding:0; } .tadreep-mobile-bottom-icon svg { width:24px; height:24px; stroke-width:1.7; } .tadreep-mobile-bottom-link.is-active { color:#2463e8; } .tadreep-mobile-bottom-link.is-active::before { content:""; position:absolute; top:2px; width:24px; height:3px; border-radius:99px; background:#2463e8; } .tadreep-mobile-bottom-link:active { transform:none; } .tadreep-header { min-height:62px; } .tadreep-header .tadreep-header-inner { min-height:62px; } } .tadreep-header-nav .tadreep-nav-icon { width:18px; height:18px; } @media (max-width:1100px) and (min-width:768px) { .tadreep-header-nav { gap:12px; } } @media (max-width:767px) { .tadreep-header { min-height:58px; } .tadreep-header .tadreep-header-inner { min-height:58px; } .tadreep-mobile-bottom-nav { min-height:68px; } .tadreep-mobile-bottom-link { min-height:56px; font-size:.66rem; } .tadreep-mobile-bottom-icon { width:23px; height:23px; } .tadreep-mobile-bottom-icon svg { width:22px; height:22px; } } /* --------------------------------------------------------------------- * Mobile header density, driven by the phone screenshots. * * At 390px the header carried a hamburger plus TWO full-size auth * buttons, consuming roughly a third of the visible height before any * page content appeared. The bottom navigation already offers a "دخول" * entry, so the header duplicated it. * * Rather than remove either control (both are reachable and expected), * the buttons are made compact below 768px: smaller padding and type, * while keeping the 44px touch target the project requires. Nothing is * hidden, so no navigation path is lost. * ------------------------------------------------------------------ */ /* Very narrow phones: the secondary button becomes icon-tight text so both still fit on one line without wrapping. */ /* --------------------------------------------------------------------- * Bottom navigation polish (from the annotated phone screenshot). * * The icons were drawn at stroke-width 1.8 with default square caps, * which at 22px reads as heavy and slightly ragged. Thinner rounded * strokes at a consistent size make the row look like one icon set * rather than five separate drawings. Markup is unchanged apart from the * stroke attributes and a distinct two-person glyph for المدربون, which * previously used almost the same single-person shape as دخول. * ------------------------------------------------------------------ */ .tadreep-mobile-bottom-nav { border-block-start: 1px solid #e8edf5; background: #fff; padding-block: 0.25rem; } .tadreep-mobile-bottom-link { gap: 0.2rem; color: #64748b; padding-block: 0.35rem; } .tadreep-mobile-bottom-link.is-active { color: #041e52; } .tadreep-mobile-bottom-icon svg { stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Slightly smaller, evenly weighted labels so five items fit at 320px without the text crowding the icon above it. */ @media (max-width: 767px) { .tadreep-mobile-bottom-link { font-size: 0.68rem; font-weight: 500; letter-spacing: 0; } .tadreep-mobile-bottom-icon, .tadreep-mobile-bottom-icon svg { width: 22px; height: 22px; } } /* --------------------------------------------------------------------- * Header auth buttons. * * Two full-size buttons plus the menu toggle dominated the top of a * 390px screen. Below 768px the primary keeps its filled treatment while * the secondary becomes a lighter outline, so the pair reads as one * compact group instead of two competing blocks. Both stay above the * 44px touch target. * ------------------------------------------------------------------ */ /* Active bottom-nav item: coloured icon, label and a short top rule, as in the approved mockup. The rule is drawn with a pseudo-element so no markup changes and no layout shift when the state changes. */ .tadreep-mobile-bottom-link { position: relative; } .tadreep-mobile-bottom-link.is-active { color: #2563eb; font-weight: 600; } .tadreep-mobile-bottom-link.is-active::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-50%); inline-size: 26px; block-size: 3px; border-radius: 0 0 3px 3px; background: #2563eb; } .tadreep-mobile-nav-share { display: none; } @media (max-width: 959px) { /* The drawer is controlled only by .is-open; never hide that state with * so the JS toggle can reliably reveal it on every page. */ .tadreep-mobile-nav { display: none; position: absolute; inset-inline: 0; inset-block-start: 100%; max-height: calc(100vh - 62px); overflow-y: auto; background: #fff; box-shadow: 0 14px 32px rgba(15,23,42,.12); border-block-start: 1px solid #e5eaf2; padding: 12px 16px 18px; } .tadreep-mobile-nav.is-open { display: flex; } .tadreep-mobile-nav .tadreep-nav-link { min-height: 50px; padding: 12px 10px; font-size: 1rem; } .tadreep-mobile-nav-share { display: block; margin-block-start: 10px; padding-block-start: 16px; border-block-start: 1px solid #e8edf5; text-align: center; } .tadreep-mobile-nav-share-title { display: block; font-size: .9rem; font-weight: 700; color: #334155; margin-block-end: 10px; } .tadreep-mobile-nav-share-links { display: flex; align-items: center; justify-content: center; gap: 14px; } .tadreep-mobile-nav-share-links a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; background: #f1f5f9; color: #041e52; text-decoration: none; } .tadreep-mobile-nav-share-links a svg { width: 22px; height: 22px; } .tadreep-mobile-nav-share-links a:hover { background: #e2e8f0; } .tadreep-mobile-toggle { width: 44px; height: 44px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } } @media (max-width: 767px) { .tadreep-header-inner { min-height: 68px; padding-block: 8px; } .tadreep-mobile-nav { max-height: calc(100dvh - 68px); } } /* Disable page zoom on supported mobile browsers; the viewport meta tag in * header.php provides the corresponding browser-level restriction. */ @media (pointer: coarse) { html { touch-action: manipulation; } } /* --------------------------------------------------------------------- * Header logo — ONE rule set, replacing 4 conflicting ones. * * The previous build had .tadreep-header-logo img declared three times * (40px, then 44px ×4, then the same 44px repeated inside a * mobile query), so the "mobile logo" never actually differed from * desktop. Which file loads is now decided by