/* Site-wide horizontal-overflow guard. Any single element that's ever slightly wider than the viewport (a stray fixed-width box, an overflowing flex row, etc.) creates a right-side gap you can scroll into on mobile. This clips that at the document level so it can never happen, on any page, without needing to hunt down every individual culprit. */ html, body { max-width: 100%; overflow-x: hidden; } /** * Six Eye Market — Dark Mode overrides. * Applied whenever is set (see sem-theme.js). * Targets the common, repeated utility/component classes used across the * whole site, so switching themes works everywhere without editing every * page's markup individually. */ html[data-theme="dark"] { color-scheme: dark; } /* Fix for the mobile "transparent flash" when overscrolling/bouncing past the end of the page — some pages set a fixed height:100% on , which can leave the overscroll area uncovered on iOS/Android. This makes sure the background always matches, in both light and dark mode. */ html { background-color: #EBFFF3; min-height: 100%; } html[data-theme="dark"] { background-color: #0F1712; } html[data-theme="dark"] body, html[data-theme="dark"] .bg-\[\#EBFFF3\], html[data-theme="dark"] .bg-honeydew { background-color: #0F1712 !important; } html[data-theme="dark"] .bg-white, html[data-theme="dark"] .inner-card, html[data-theme="dark"] .field-input, html[data-theme="dark"] .form-input { background-color: #1A241E !important; border-color: #2B3830 !important; } html[data-theme="dark"] .text-eerieBlack, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] p, html[data-theme="dark"] span, html[data-theme="dark"] label, html[data-theme="dark"] li { color: #E8F0EA; } html[data-theme="dark"] .text-gray-400 { color: #8A9A8E !important; } html[data-theme="dark"] .text-gray-500 { color: #9FAEA3 !important; } html[data-theme="dark"] .text-gray-600, html[data-theme="dark"] .text-gray-700 { color: #C3D0C6 !important; } html[data-theme="dark"] .border-gray-100, html[data-theme="dark"] .border-gray-200 { border-color: #2B3830 !important; } html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-gray-100 { background-color: #22302A !important; } html[data-theme="dark"] header.bg-white, html[data-theme="dark"] .side-link { background-color: #141D18 !important; color: #E8F0EA; } html[data-theme="dark"] .side-link:hover, html[data-theme="dark"] .side-link.active { background-color: rgba(72,108,38,0.25) !important; } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #1A241E !important; color: #E8F0EA !important; border-color: #2B3830 !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6B7A70 !important; } html[data-theme="dark"] .status-pill.bg-gray-100 { background-color: #2B3830 !important; } /* Mobile header spacing fix: the header row uses equal 32px padding on both sides, but the right side needs to fit more content (bell, post ad, hamburger) than the left (just the logo) — so on mobile, ease the left padding back and tighten the right so both sides balance out. */ @media (max-width: 767px) { header > div.px-8 { padding-left: 16px !important; padding-right: 10px !important; } header .shrink-0.gap-4, header div.flex.items-center.gap-4.shrink-0 { gap: 8px !important; } /* Hide these synchronously via CSS (not just JS after DOM-ready) so there's no flash of an overflowing header — this matters most right after login, when the account/bell/message icons are all present at once. */ header a[href="/my-profile/"], header a[href="/notifications/"], header a[href="/messages/"] { display: none !important; } }