/* * NOLIMITALGO Dashboard — theme.css * Vanilla CSS only. No frameworks. Colors are driven by CSS custom * properties set inline in from NOLIMITALGO → Appearance * (see functions.php: nla_output_color_variables()). */ /* ----------------------------------------------------------------- * 1. Reset * --------------------------------------------------------------- */ html, body { margin: 0; padding: 0; width: 100%; max-width: 100%; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } body { background: var( --nla-bg, #ffffff ); color: var( --nla-secondary, #111111 ); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect( 1px, 1px, 1px, 1px ); white-space: nowrap; } .nla-skip-link.screen-reader-text:focus { position: fixed; top: 0; left: 0; width: auto; height: auto; clip: auto; z-index: 10000; background: #fff; color: #000; padding: 10px 16px; } /* ----------------------------------------------------------------- * 2. Header / Top Navigation * --------------------------------------------------------------- */ .nla-header { position: sticky; top: 0; z-index: 500; background: var( --nla-nav-bg, #111111 ); color: var( --nla-nav-text, #ffffff ); box-shadow: 0 1px 0 rgba( 255, 255, 255, 0.06 ); } .nla-header-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nla-brand { display: flex; align-items: center; flex-shrink: 0; } .nla-brand-text { font-weight: 700; font-size: 18px; letter-spacing: 0.03em; color: var( --nla-nav-text, #ffffff ); } .nla-brand img { max-height: 40px; width: auto; } .nla-nav { flex: 1; display: flex; justify-content: flex-end; } .nla-nav-menu { list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; } .nla-nav-link { display: inline-block; padding: 10px 14px; border-radius: 6px; font-size: 14px; font-weight: 600; color: var( --nla-nav-text, #ffffff ); opacity: 0.85; transition: opacity 0.15s ease, background-color 0.15s ease; } .nla-nav-link:hover, .nla-nav-link:focus { opacity: 1; background-color: rgba( 255, 255, 255, 0.08 ); } .nla-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 42px; height: 42px; background: transparent; border: 1px solid rgba( 255, 255, 255, 0.2 ); border-radius: 6px; cursor: pointer; flex-shrink: 0; } .nla-hamburger-bar { display: block; width: 20px; height: 2px; background: var( --nla-nav-text, #ffffff ); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .nla-hamburger[aria-expanded="true"] .nla-hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nla-hamburger[aria-expanded="true"] .nla-hamburger-bar:nth-child(2) { opacity: 0; } .nla-hamburger[aria-expanded="true"] .nla-hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ----------------------------------------------------------------- * 3. Dashboard (front page) * --------------------------------------------------------------- */ .nla-main { display: block; width: 100%; max-width: 100%; } .nla-mobile-dashboard { display: block !important; width: 100% !important; max-width: 100% !important; min-height: var( --nla-desktop-h, 1100px ); overflow: visible; } .nla-mobile-dashboard iframe { display: block !important; visibility: visible !important; width: 100% !important; height: var( --nla-desktop-h, 1100px ) !important; min-height: 100vh; border: 0; } @media ( max-width: 768px ) { .nla-mobile-dashboard, .nla-mobile-dashboard iframe { height: var( --nla-mobile-h, 1400px ) !important; min-height: var( --nla-mobile-h, 1400px ) !important; } } .nla-dashboard-fallback { width: 100%; min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; background: linear-gradient( 180deg, rgba( 0, 0, 0, 0.02 ), rgba( 0, 0, 0, 0 ) ); } .nla-dashboard-fallback-inner h1 { font-size: 22px; margin: 0 0 10px; } .nla-dashboard-fallback-inner p { margin: 0; opacity: 0.7; } /* ----------------------------------------------------------------- * 4. Footer * --------------------------------------------------------------- */ .nla-footer { background: var( --nla-footer-bg, #111111 ); color: var( --nla-footer-text, #ffffff ); padding: 24px 20px; } .nla-footer-inner { max-width: 1400px; margin: 0 auto; text-align: center; } .nla-footer-menu { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 0; margin: 0 0 10px; padding: 0; font-size: 13px; } .nla-footer-item { display: flex; align-items: center; } .nla-footer-item:not( :last-child )::after { content: "|"; margin: 0 10px; opacity: 0.35; } .nla-footer-link { color: var( --nla-footer-text, #ffffff ); opacity: 0.85; } .nla-footer-link:hover, .nla-footer-link:focus { opacity: 1; text-decoration: underline; } .nla-copyright { margin: 0; font-size: 12px; opacity: 0.6; } @media ( max-width: 600px ) { .nla-footer-menu { flex-direction: column; gap: 8px; } .nla-footer-item:not( :last-child )::after { content: ""; margin: 0; } } /* ----------------------------------------------------------------- * 5. Standard internal pages (Expert Advisor, Guide, legal pages...) * --------------------------------------------------------------- */ .nla-standard-main { min-height: 50vh; } .nla-content-wrap { max-width: 860px; margin: 0 auto; padding: 48px 20px 80px; } .nla-page-title { font-size: 30px; margin: 0 0 20px; color: var( --nla-secondary, #111111 ); } .nla-page-content { font-size: 16px; line-height: 1.7; } .nla-page-content img { border-radius: 8px; margin: 20px 0; } /* ----------------------------------------------------------------- * 6. 404 page * --------------------------------------------------------------- */ .nla-error-main { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 40px 20px; } .nla-error-wrap { text-align: center; max-width: 480px; } .nla-error-code { font-size: 72px; font-weight: 800; color: var( --nla-primary, #ff6a00 ); margin: 0; line-height: 1; } .nla-error-title { font-size: 24px; margin: 12px 0 8px; } .nla-error-text { opacity: 0.7; margin: 0 0 24px; } .nla-error-button { display: inline-block; padding: 12px 24px; border-radius: 6px; background: var( --nla-primary, #ff6a00 ); color: #ffffff; font-weight: 700; font-size: 14px; } .nla-error-button:hover, .nla-error-button:focus { opacity: 0.9; } /* ----------------------------------------------------------------- * 7. Mobile navigation * --------------------------------------------------------------- */ @media ( max-width: 860px ) { .nla-hamburger { display: flex; } .nla-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var( --nla-nav-bg, #111111 ); max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .nla-nav.nla-nav-open { max-height: 500px; } .nla-nav-menu { flex-direction: column; align-items: stretch; width: 100%; gap: 0; padding: 8px 0 16px; } .nla-nav-item { width: 100%; } .nla-nav-link { width: 100%; border-radius: 0; padding: 12px 20px; } .nla-header-inner { position: relative; } }