/* ─────────────────────────────────────── SubmitX — Shared site styles navbar, footer, mobile menu, utilities, theme ─────────────────────────────────────── */ /* ─── Prevent horizontal scroll sitewide ─── */ html,body{overflow-x:hidden} :root{ --sx-orange:#FF6B2C; --sx-orange-50:#FFF0E5; --sx-orange-100:#FFD1B5; --sx-orange-d:#E55520; --sx-ink:#111827; --sx-ink-2:#1B2B3E; --sx-muted:#6B7280; --sx-muted-2:#9CA3AF; --sx-line:#E5E7EB; --sx-line-2:#F0F0EE; --sx-bg:#FFFFFF; --sx-bg-2:#F7F7F5; --sx-bg-3:#F9FAFB; --sx-surface:#FFFFFF; --sx-shadow:rgba(17,24,39,.08); color-scheme:light; } /* ─── DARK THEME (opt-in via [data-theme="dark"] on ) ─── */ :root[data-theme="dark"]{ --sx-orange:#FF6B2C; --sx-orange-50:rgba(255,107,44,.14); --sx-orange-100:rgba(255,107,44,.28); --sx-orange-d:#FF7B40; --sx-ink:#F3F4F6; --sx-ink-2:#E5E7EB; --sx-muted:#9CA3AF; --sx-muted-2:#6B7280; --sx-line:#2A2A2A; --sx-line-2:#222222; --sx-bg:#0F0F0F; --sx-bg-2:#161616; --sx-bg-3:#1A1A1A; --sx-surface:#161616; --sx-shadow:rgba(0,0,0,.5); color-scheme:dark; } /* Generic dark fallback so any page (even not yet fully themed) stays coherent */ :root[data-theme="dark"] body{background:var(--sx-bg);color:var(--sx-ink)} /* Dark logo PNG is near-invisible on dark bg → lighten it while keeping the orange accent. Same treatment for the footer logo so it matches the header (was showing white artifacts). */ :root[data-theme="dark"] .sx-nav .sx-logo img, :root[data-theme="dark"] .sx-footer-brand img{filter:invert(1) hue-rotate(180deg) saturate(1.15)} /* ─── NAVBAR (canonical) ─── */ .sx-nav{ position:sticky;top:0;z-index:200; height:68px; background:var(--sx-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--sx-line); display:flex;align-items:center; padding:0 40px; transition:box-shadow .2s,background .2s,border-color .2s; font-family:'Inter','Inter',system-ui,sans-serif; } .sx-nav.scrolled{box-shadow:0 2px 10px var(--sx-shadow)} .sx-nav .sx-logo{ display:flex;align-items:center; text-decoration:none;flex-shrink:0;margin-right:32px; } /* CSS text logo — replaces logo.png (no white background issue) */ .sx-li{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:9px; background:#FF6B2C;color:#fff; font-family:'Inter',sans-serif;font-size:14px;font-weight:900; letter-spacing:-.5px;line-height:1; box-shadow:0 3px 10px rgba(255,107,44,.35); flex-shrink:0; } .sx-ln{ font-family:'Inter',sans-serif;font-size:18px;font-weight:800; color:var(--sx-ink);letter-spacing:-.4px;line-height:1; margin-left:10px; } .sx-lx{color:#FF6B2C} /* PNG logo img */ .sx-nav .sx-logo img{height:42px;width:auto;display:block} /* Footer brand logo same style */ .sx-footer-brand .sx-li{width:32px;height:32px;font-size:13px} .sx-footer-brand .sx-ln{font-size:17px;color:var(--sx-ink)} .sx-nav .sx-links{ display:flex;list-style:none; flex:1;justify-content:center;gap:2px; margin:0;padding:0; } .sx-nav .sx-links a{ font-size:14px;font-weight:500;color:var(--sx-muted); text-decoration:none;padding:8px 13px;border-radius:8px; transition:color .15s,background .15s;white-space:nowrap; } .sx-nav .sx-links a:hover{color:var(--sx-ink);background:var(--sx-bg-2)} .sx-nav .sx-links a.active{color:var(--sx-orange);background:var(--sx-orange-50)} .sx-nav .sx-right{ display:flex;align-items:center;gap:10px; flex-shrink:0;margin-left:32px; } .sx-nav .sx-login{ font-size:14px;font-weight:500;color:var(--sx-ink); text-decoration:none;padding:9px 18px; border:1.5px solid var(--sx-line);border-radius:8px; transition:border-color .15s;white-space:nowrap; } .sx-nav .sx-login:hover{border-color:var(--sx-muted)} .sx-nav .sx-cta{ font-family:'Inter','Inter',system-ui,sans-serif; font-size:14px;font-weight:700; background:var(--sx-orange);color:#fff; padding:10px 22px;border-radius:9px; border:none;cursor:pointer; text-decoration:none;white-space:nowrap; box-shadow:0 4px 14px rgba(255,107,44,.32); transition:background .15s, transform .15s; } .sx-nav .sx-cta:hover{background:var(--sx-orange-d);transform:translateY(-1px)} /* ─── THEME + LANGUAGE controls (injected by seo.js) ─── */ .sx-prefs{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:14px} .sx-theme-toggle{ width:38px;height:38px;border-radius:9px; border:1.5px solid var(--sx-line);background:transparent;color:var(--sx-ink); display:inline-flex;align-items:center;justify-content:center; cursor:pointer;transition:border-color .15s,background .15s,color .15s; } .sx-theme-toggle:hover{border-color:var(--sx-muted);background:var(--sx-bg-2)} .sx-theme-toggle svg{width:18px;height:18px;display:block} .sx-theme-toggle .sx-sun{display:none} :root[data-theme="dark"] .sx-theme-toggle .sx-moon{display:none} :root[data-theme="dark"] .sx-theme-toggle .sx-sun{display:block} .sx-lang-toggle{display:inline-flex;align-items:center;border:1.5px solid var(--sx-line);border-radius:9px;overflow:hidden} .sx-lang-toggle button{ border:none;background:transparent;cursor:pointer; font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700; color:var(--sx-muted);padding:8px 11px;line-height:1; transition:background .15s,color .15s; } .sx-lang-toggle button:hover{color:var(--sx-ink)} .sx-lang-toggle button.active{background:var(--sx-orange);color:#fff} /* mobile menu toggle (hidden on desktop) */ .sx-nav .sx-burger{display:none;background:none;border:none;cursor:pointer;width:40px;height:40px;align-items:center;justify-content:center;color:var(--sx-ink);margin-left:auto} .sx-nav .sx-burger svg{width:24px;height:24px} @media (max-width:1280px){ .sx-nav{padding:0 24px} .sx-nav .sx-links{gap:0} .sx-nav .sx-links a{padding:8px 9px;font-size:13px} .sx-nav .sx-login{display:none} .sx-nav .sx-cta{padding:9px 14px;font-size:13px} } /* ─── MOBILE NAV — full-screen overlay ─── */ @media (max-width:1024px){ /* Top bar: logo + prefs + burger only */ .sx-nav .sx-right{display:none} .sx-prefs{margin-left:auto;margin-right:4px;gap:6px} .sx-theme-toggle{width:36px;height:36px} .sx-lang-toggle button{padding:7px 9px;font-size:12px} .sx-nav .sx-burger{display:flex;order:3;margin-left:4px} /* Overlay: slides in from right, covers full screen */ .sx-nav .sx-links{ position:fixed; top:68px;left:0;right:0;bottom:0; flex-direction:column; background:var(--sx-bg); padding:0;gap:0; overflow-y:auto;-webkit-overflow-scrolling:touch; z-index:200; transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); border-bottom:none;box-shadow:none; } .sx-nav.menu-open .sx-links{transform:translateX(0)} /* Nav rows */ .sx-nav .sx-links li{list-style:none;margin:0;padding:0} .sx-nav .sx-links li a{ padding:19px 24px; font-size:16.5px;font-weight:600; color:var(--sx-ink); display:flex;align-items:center;justify-content:space-between; border-bottom:1px solid var(--sx-line); border-radius:0; transition:background .15s,color .15s; text-decoration:none; } .sx-nav .sx-links li a::after{ content:"›";font-size:22px;color:var(--sx-muted-2);font-weight:300; flex-shrink:0;margin-left:8px; transition:color .15s,transform .15s; } .sx-nav .sx-links li a:hover, .sx-nav .sx-links li a.active{color:var(--sx-orange);background:var(--sx-orange-50)} .sx-nav .sx-links li a:hover::after, .sx-nav .sx-links li a.active::after{color:var(--sx-orange);transform:translateX(4px)} /* Mobile menu footer — injected by JS */ .sx-m-footer{padding:28px 20px calc(28px + env(safe-area-inset-bottom,0px))} .sx-m-cta{ display:flex;align-items:center;justify-content:center;gap:10px; background:var(--sx-orange);color:#fff; font-size:16px;font-weight:700; padding:17px 24px;border-radius:13px; text-decoration:none;width:100%;box-sizing:border-box; box-shadow:0 6px 20px rgba(255,107,44,.38); transition:background .15s; } .sx-m-cta:hover{background:var(--sx-orange-d)} .sx-m-login{ display:block;text-align:center; margin-top:14px; font-size:14px;font-weight:500; color:var(--sx-muted);text-decoration:none; padding:6px 0; } .sx-m-login:hover{color:var(--sx-ink)} /* Semi-transparent backdrop */ .sx-backdrop{ position:fixed;inset:0;top:68px; background:rgba(0,0,0,.45); z-index:199; display:none; } .sx-backdrop.open{display:block;animation:sxFadeIn .25s forwards} @keyframes sxFadeIn{from{opacity:0}to{opacity:1}} } @media (max-width:480px){.sx-nav{padding:0 16px}} /* ─── FOOTER (light cream) ─── */ .sx-footer{ background:var(--sx-bg-2);color:var(--sx-muted); padding:72px 40px 32px; font-family:'Inter','Inter',system-ui,sans-serif; font-size:13.5px;line-height:1.6; border-top:1px solid var(--sx-line); } .sx-footer-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:36px} .sx-footer-brand img{height:42px;display:block;margin-bottom:18px} .sx-footer-brand p{font-size:13.5px;color:var(--sx-muted);max-width:280px;margin:0 0 18px;line-height:1.55} .sx-footer-brand .sx-locale{display:inline-flex;gap:8px;align-items:center;background:var(--sx-bg);border:1px solid var(--sx-line);padding:7px 12px;border-radius:20px;color:var(--sx-ink-2);font-size:12px;font-weight:600} .sx-footer-brand .sx-locale::before{content:"⚜";color:var(--sx-orange);font-size:14px} .sx-footer-col h4{font-family:'Inter','Inter',system-ui,sans-serif;color:var(--sx-ink);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin:0 0 18px} .sx-footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px} .sx-footer-col a{color:var(--sx-muted);text-decoration:none;font-size:13.5px;transition:color .15s} .sx-footer-col a:hover{color:var(--sx-orange)} .sx-footer-bottom{max-width:1280px;margin:48px auto 0;padding-top:24px;border-top:1px solid var(--sx-line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:12.5px;color:var(--sx-muted-2)} .sx-footer-bottom .sx-socials{display:flex;gap:10px} .sx-footer-bottom .sx-socials a{width:34px;height:34px;border-radius:8px;border:1px solid var(--sx-line);background:var(--sx-bg);display:flex;align-items:center;justify-content:center;color:var(--sx-muted);transition:all .15s} .sx-footer-bottom .sx-socials a:hover{background:var(--sx-orange);border-color:var(--sx-orange);color:#fff} .sx-footer-bottom .sx-socials svg{width:16px;height:16px} @media (max-width:1100px){ .sx-footer-inner{grid-template-columns:1.2fr repeat(3,1fr);gap:32px} .sx-footer-brand{grid-column:1/-1} } @media (max-width:900px){ .sx-footer-inner{grid-template-columns:1fr 1fr;gap:32px} .sx-footer-brand{grid-column:1/-1} } @media (max-width:560px){ .sx-footer{padding:48px 20px 24px} .sx-footer-inner{grid-template-columns:1fr} .sx-footer-bottom{flex-direction:column;text-align:center} } /* ─── floating assistant launcher ─── */ .sx-asst-fab{ position:fixed;bottom:24px;right:24px;z-index:160; width:60px;height:60px;border-radius:50%; background:var(--sx-orange);color:#fff; border:none;cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:0 12px 28px rgba(255,107,44,.45); transition:transform .15s, box-shadow .15s; } .sx-asst-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 16px 36px rgba(255,107,44,.55)} .sx-asst-fab svg{width:26px;height:26px} .sx-asst-fab .sx-pulse{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--sx-orange);opacity:.4;animation:sxPulse 2s infinite} @keyframes sxPulse{0%{transform:scale(.95);opacity:.5}70%{transform:scale(1.15);opacity:0}100%{transform:scale(.95);opacity:0}} /* skip to main */ .sx-skip{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:8px 14px;border-radius:0 0 8px 0;z-index:9999;font-weight:600} .sx-skip:focus{left:0}