/* ── Theme FOUC prevention ────────────────────────────────────────────── The head preload script sets an inline style on ONLY when the user has chosen light mode (via localStorage). This rule makes match that state immediately — before the body-start script adds the class — so the page never briefly flashes dark on navigation. This is a blocking stylesheet so it applies before the first paint. ─────────────────────────────────────────────────────────────────────── */ html[style*="background"] body:not(.shoug-light-mode) { background-color: #f8f6ff !important; color: #21152f !important; } html, body { max-width: 100%; } body { overflow-x: hidden; } .layout-wrapper, .app-layout, .content-area, .page-content, .content-scroll-area, .embed-area-wrapper, .embed-container, main, section, article { max-width: 100%; min-width: 0; } img, svg, video, canvas, iframe { max-width: 100%; } .shoug-header-menu-btn, .shoug-directory-btn { min-width: 34px; height: 34px; display: none; align-items: center; justify-content: center; border: 1px solid rgba(184, 41, 234, 0.45); background: rgba(184, 41, 234, 0.08); color: #f8f7fb; font-family: "JetBrains Mono", monospace; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } .shoug-header-menu-btn:hover, .shoug-directory-btn:hover { border-color: rgba(184, 41, 234, 0.7); background: rgba(184, 41, 234, 0.16); } body.shoug-light-mode .shoug-header-menu-btn, body.shoug-light-mode .shoug-directory-btn { color: #16111f; background: rgba(255, 255, 255, 0.72); } .shoug-header-backdrop { display: none; } @media (max-width: 760px) { .shoug-site-header { min-height: 68px !important; height: auto !important; } .shoug-header-inner { width: calc(100% - 28px) !important; min-height: 68px !important; flex-wrap: nowrap !important; gap: 8px !important; padding: 8px 0 !important; } .shoug-header-logo { max-width: 38vw !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 0.74rem !important; letter-spacing: 0.12em !important; } .shoug-header-menu-btn { display: inline-flex !important; } body:has(.academic-sidebar) .shoug-directory-btn { display: inline-flex !important; } .shoug-header-actions { gap: 6px !important; margin-left: auto !important; } .shoug-icon-btn, .shoug-lang-btn, .shoug-theme-btn { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; } .shoug-contact-btn { height: 32px !important; padding-inline: 10px !important; font-size: 0.58rem !important; letter-spacing: 0.12em !important; } .shoug-header-nav { position: fixed !important; left: 14px !important; right: 14px !important; top: 74px !important; z-index: 10020 !important; width: auto !important; max-height: calc(100vh - 96px) !important; display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; overflow: auto !important; padding: 10px !important; border: 1px solid rgba(184, 41, 234, 0.38) !important; background: rgba(5, 5, 8, 0.98) !important; box-shadow: 0 22px 70px rgba(0, 0, 0, 0.62) !important; opacity: 0 !important; pointer-events: none !important; transform: translateY(-8px) !important; transition: opacity 160ms ease, transform 160ms ease !important; } body.mobile-nav-open .shoug-header-nav { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; } body.shoug-light-mode .shoug-header-nav { background: rgba(246, 244, 251, 0.98) !important; } /* User account dropdown — anchor to viewport instead of the small avatar button, otherwise its right:0 + min-width pushes it off-screen left. */ .shoug-user-dropdown { position: fixed !important; top: 74px !important; left: 14px !important; right: 14px !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: calc(100vh - 96px) !important; overflow: auto !important; z-index: 10020 !important; } .shoug-header-nav a { min-height: 44px !important; display: flex !important; align-items: center !important; padding: 0 14px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; font-size: 0.76rem !important; } .shoug-header-nav a:last-child { border-bottom: 0 !important; } .shoug-header-backdrop { position: fixed; inset: 68px 0 0; z-index: 10010; background: rgba(0, 0, 0, 0.54); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } body.mobile-nav-open .shoug-header-backdrop, body.sidebar-open .shoug-header-backdrop { display: block; } .layout-wrapper, .app-layout { width: 100% !important; overflow-x: hidden !important; } .content-area, .page-content, .content-scroll-area { width: 100% !important; overflow-x: hidden !important; } .top-bar, .content-topbar, .breadcrumb { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .page-header, .content-header, .content-section, .embed-area-wrapper { padding-left: 16px !important; padding-right: 16px !important; } .embed-container { width: 100% !important; overflow: hidden !important; } .embed-container iframe, .embed-frame { width: 100% !important; min-height: 72vh !important; height: 72vh !important; } .hero { min-height: auto !important; padding-top: clamp(72px, 18vh, 132px) !important; padding-left: 24px !important; padding-right: 24px !important; overflow: hidden !important; } .hero-bg-glow { left: 0 !important; width: 100vw !important; max-width: 100vw !important; overflow: hidden !important; } .ticker-wrap { max-width: 100vw !important; overflow: hidden !important; contain: paint; } .ticker-content { width: 100% !important; max-width: 100% !important; overflow: hidden !important; } .hero-ctas, .action-buttons, .filter-bar, .sub-nav, .content-tabs { flex-wrap: wrap !important; } .work-grid, .projects-grid, .project-grid, .explore-grid, .panels-grid, .proof, [class*="cards-grid"], [class*="card-grid"] { grid-template-columns: 1fr !important; } .work-card, .project-card, .card, [class*="-card"] { max-width: 100% !important; min-width: 0 !important; overflow-wrap: anywhere; } /* About page: display-name ("SHOUG FAWAZ" at 4rem = 64px) overflows on narrow screens */ .display-name { font-size: clamp(2rem, 9vw, 4rem) !important; word-break: break-word !important; } /* Hero ghost text: clip so it never overflows on narrow screens */ .hero-ghost { white-space: nowrap; overflow: hidden !important; max-width: 100% !important; } /* Workshops dossier-card: switch from 3-col grid to single-column flex */ .dossier-card { display: flex !important; flex-direction: column !important; gap: 20px !important; padding: 24px !important; } .card-badge-container { width: 64px !important; height: 64px !important; } /* Academics hub grid: stack to single column */ .hub-grid { grid-template-columns: 1fr !important; } .hub-grid::after { display: none !important; } .track-card { padding: 2rem !important; min-height: auto !important; } .card-title { font-size: clamp(1.4rem, 6vw, 2.2rem) !important; max-width: 100% !important; } table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 640px) { .shoug-header-logo { max-width: 32vw !important; } .shoug-header-actions a[aria-label="GitHub"], .shoug-header-actions a[aria-label="LinkedIn"], .shoug-header-actions a[aria-label="جيت هب"], .shoug-header-actions a[aria-label="لينكدإن"] { display: none !important; } }