/* ============================================================= Noxfolio Child — UI/UX Fixes Author: Mohamed Chami Issues addressed: 1. Full-width layout (remove boxed side margins) 2. Smooth sticky header across all devices 3. Dark / Light mode via CSS custom properties ============================================================= */ /* ───────────────────────────────────────────────────────────── FIX 1 — FULL-WIDTH LAYOUT Overrides the boxed layout that constrains .noxfolio-body-content to --noxfolio-boxed-width (1530 px) with dark outer margins. The primary fix is setting Site Layout → Full Width in Theme Panel. This is a CSS safety net that works regardless of that setting. ───────────────────────────────────────────────────────────── */ .noxfolio-boxed-layout .noxfolio-body-content { max-width: 100% !important; margin: 0 !important; } /* Also remove the 20 px white site border if enabled */ .noxfolio-site-border .noxfolio-body-content { border: none !important; } /* ───────────────────────────────────────────────────────────── FIX 2 — STICKY HEADER Extends the theme's existing noxfolio-sticky system. The theme sets z-index: 2 — far too low. Raised to 999. .header-scrolled class is added by custom-ui-fixes.js after the user scrolls 80 px, triggering the frosted-glass effect. ───────────────────────────────────────────────────────────── */ /* --- Elementor-section sticky (primary approach) --- */ .noxfolio-sticky.noxfolio-sticky-active { z-index: 999 !important; transition: background-color 0.35s ease, box-shadow 0.35s ease !important; } .noxfolio-sticky.noxfolio-sticky-active.header-scrolled { background-color: rgba(19, 19, 19, 0.92) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); } /* --- Default (non-Elementor) header --- */ .site-header { position: sticky !important; top: 0; z-index: 999; transition: background-color 0.35s ease, box-shadow 0.35s ease; will-change: transform; } .site-header.header-scrolled { background-color: rgba(19, 19, 19, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); } /* Admin bar offset — both sticky types */ .admin-bar .noxfolio-sticky.noxfolio-sticky-active, .admin-bar .site-header { top: 32px !important; } @media screen and (max-width: 782px) { .admin-bar .noxfolio-sticky.noxfolio-sticky-active, .admin-bar .site-header { top: 46px !important; } } /* Mobile: guarantee full viewport width */ @media (max-width: 767px) { .noxfolio-sticky.noxfolio-sticky-active { width: 100vw !important; left: 0 !important; } } /* ───────────────────────────────────────────────────────────── FIX 3 — DARK / LIGHT MODE The theme writes all 8 color tokens to :root at PHP runtime (class-assets.php:160-166). Dark mode is the default. Light mode overrides every token under [data-theme="light"] on , set by custom-ui-fixes.js + anti-FOUC snippet. ───────────────────────────────────────────────────────────── */ /* --- Light mode token overrides --- */ [data-theme="light"] { --noxfolio-dark-color: #f0f0f0; /* outer/page bg */ --noxfolio-dark-light-color: #ffffff; /* content bg */ --noxfolio-headline-color: #0d0d0d; /* headings */ --noxfolio-body-color: #444444; /* body text */ --noxfolio-border-color: #dddddd; /* borders/dividers */ --noxfolio-secondary-color: #e8e8e8; /* secondary surface */ --noxfolio-white-color: #0d0d0d; /* inverted utility */ /* --noxfolio-primary-color kept as lime #c9f31d — works on both modes */ } /* --- Smooth transition on theme swap --- */ body, .noxfolio-body-content { transition: background-color 0.3s ease, color 0.3s ease; } /* Merge with FIX 2's box-shadow transition so neither overwrites the other */ .site-header, .noxfolio-sticky { transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.3s ease; } /* --- Logo: invert white-on-transparent PNG in light mode --- Remove or comment out if your logo is already dark or is an SVG */ [data-theme="light"] .site-logo img, [data-theme="light"] .header-logo img, [data-theme="light"] .custom-logo { filter: invert(1); } /* --- Nav link contrast in light mode --- */ [data-theme="light"] .primary-menu > li > a, [data-theme="light"] .slide-panel-menu a { color: var(--noxfolio-headline-color); } [data-theme="light"] .primary-menu > li > a:hover { color: var(--noxfolio-primary-color); } /* ───────────────────────────────────────────────────────────── DARK/LIGHT TOGGLE BUTTON — header nav bar Sits in .noxfolio-theme-toggle-wrapper inside .header-navigation. Shows a moon icon in dark mode and a sun icon in light mode. Icon visibility is driven by [data-theme] on . ───────────────────────────────────────────────────────────── */ /* Wrapper: flex-align with the rest of the nav row */ .noxfolio-theme-toggle-wrapper { display: flex; align-items: center; margin-left: 16px; margin-right: 4px; flex-shrink: 0; } /* The button itself */ .noxfolio-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--noxfolio-border-color); background: transparent; color: var(--noxfolio-headline-color); cursor: pointer; transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease, transform 0.2s ease; position: relative; overflow: hidden; padding: 0; line-height: 1; } .noxfolio-theme-toggle:hover { border-color: var(--noxfolio-primary-color); color: var(--noxfolio-primary-color); background: rgba(201, 243, 29, 0.08); /* primary color at 8% */ transform: scale(1.08); } .noxfolio-theme-toggle:focus-visible { outline: 2px solid var(--noxfolio-primary-color); outline-offset: 3px; } /* Icons inside the toggle */ .noxfolio-theme-toggle .toggle-icon { position: absolute; font-size: 16px; transition: opacity 0.25s ease, transform 0.35s ease; } /* ── Dark mode (default): show moon, hide sun ── */ html:not([data-theme="light"]) .toggle-icon-moon, [data-theme="dark"] .toggle-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } html:not([data-theme="light"]) .toggle-icon-sun, [data-theme="dark"] .toggle-icon-sun { opacity: 0; transform: rotate(90deg) scale(0.6); } /* ── Light mode: show sun, hide moon ── */ [data-theme="light"] .toggle-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="light"] .toggle-icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); } /* Mobile: hide toggle on very small screens if needed (remove to keep it) */ @media (max-width: 480px) { .noxfolio-theme-toggle-wrapper { margin-left: 8px; margin-right: 0; } }