/* * MITS Ad Manager - Public-Facing Styles * * This file contains the positioning and visibility rules for the ad containers. * All classes are prefixed with 'mits-' to prevent conflicts. */ /* --- Default Ad Container State --- */ /* * By default, hide all ad wrappers. They will only be displayed * if they have either .mits-show-on-desktop or .mits-show-on-mobile * and the corresponding media query is met. */ .mits-ad-wrapper { display: none; z-index: 99998; /* High z-index to appear above most content, but below things like admin bar or pop-ups */ overflow: hidden; /* Prevents ad content from spilling out */ background-color: transparent; /* Or a placeholder color like #f0f0f0 during testing */ } /* --- Positioning for Each Ad Slot --- */ /* 1. Top Header Ad (Sticky) */ .mits-top-header-banner { position: sticky; top: 0; left: 0; width: 100%; height: 90px; /* Standard height for 728x90 banner */ display: flex; /* Using flex to easily center the ad content */ justify-content: center; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); background-color: inherit; /* A light background color can help prevent layout shift issues */ } /* 2. Left Sidebar Ad (Fixed) */ .mits-sidebar-left { position: fixed; top: 58%; left: 8px; /* Adjust horizontal spacing from the edge */ width: 160px; height: 600px; transform: translateY(-50%); /* Vertically center the ad */ } /* 3. Right Sidebar Ad (Fixed) */ .mits-sidebar-right { position: fixed; top: 58%; right: 8px; /* Adjust horizontal spacing from the edge */ width: 160px; height: 600px; transform: translateY(-50%); } /* 4. Bottom Banner Ad (Fixed) */ .mits-bottom-banner { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; display: flex; justify-content: center; align-items: center; box-shadow: 0 -2px 5px rgba(0,0,0,0.1); background-color: inherit; } /* --- Device Visibility Logic (Media Queries) --- */ /* This is the breakpoint for distinguishing mobile vs. desktop */ /* You can adjust 1024px if needed, but it's a common tablet/desktop threshold */ @media (min-width: 1180px) { /* On desktop screens, show elements with the .mits-show-on-desktop class */ .mits-show-on-desktop { /* display: block; or flex depending on the ad type */ display: flex; /* Using flex for the banner ads to center content */ } .mits-top-header-banner.mits-show-on-mobile{ display: none !important; } .mits-bottom-banner.mits-show-on-mobile{ display: none !important; } /* For sidebars, which don't need flex centering */ .mits-sidebar-left.mits-show-on-desktop, .mits-sidebar-right.mits-show-on-desktop { display: block; } } @media (max-width: 1180px) { /* On mobile screens, show elements with the .mits-show-on-mobile class */ .mits-show-on-mobile { display: flex; } /* Sidebars are often hidden on mobile to save space, but this logic supports showing them */ .mits-sidebar-left.mits-show-on-mobile, .mits-sidebar-right.mits-show-on-mobile { /* The fixed positioning might be problematic on small screens. You could override this here if needed, but for now we'll just show/hide. */ display: block; } /* Specifically hide the fixed sidebars on very small screens to prevent overlap with content */ /* This is an extra safeguard for usability. Adjust the width as needed. */ @media (max-width: 1179px) { .mits-sidebar-left, .mits-sidebar-right { display: none !important; } } } /* --- Push Down Content for Top Header Ad --- */ /* * This CSS should be added to ensure the top ad doesn't cover your site's header. * We'll use JS to add a class to the tag if the top ad is active and visible. * This is more reliable than just adding margin/padding to body. */ body.mits-top-ad-active { /* Adjust this value based on the top ad's height + any margins */ padding-top: 0px; } /* If you have a sticky header, you might need to adjust its 'top' value instead */ /* body.mits-top-ad-active .your-sticky-header-class { top: 90px; } */