/* ========================================================================= assets/css/style.css Global styles shared by every page of the Macromend Technologies site. Page-specific animation/hover rules live inline in each page's so every page keeps its own exact look and feel. ========================================================================= */ *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } ::selection{ background:#16a34a; color:#fff; } /* Scroll-reveal animation (progressive enhancement, shared by all pages) */ .mm-anim-ready [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } .mm-anim-ready [data-reveal].mm-in{ opacity:1; transform:none; } /* Shared card hover treatment (used on Home + IT Solutions service cards) */ .mm-card{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .mm-card:hover{ transform:translateY(-7px); box-shadow:0 24px 44px -20px rgba(15,35,80,.28); border-color:#c9d8f5 !important; } /* ========================================================================= HEADER / NAVIGATION (shared across every page via header.php) ========================================================================= */ .mm-nav a{ white-space:nowrap; } .mm-navlink{ position:relative; } .mm-navlink::after{ content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:#16a34a; transition:right .25s ease; border-radius:2px; } .mm-navlink:hover{ color:#16a34a !important; } .mm-navlink:hover::after{ right:0; } .mm-navlink[data-active="true"]{ color:#16a34a !important; } .mm-navlink[data-active="true"]::after{ right:0; } .mm-drop{ position:relative; } .mm-drop-panel{ opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease, visibility .2s; pointer-events:none; } .mm-drop:hover .mm-drop-panel{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; } .mm-drop-item{ transition:background .15s, color .15s, padding-left .15s; } .mm-drop-item:hover{ background:#f1f6ff; color:#2563eb !important; padding-left:22px !important; } .mm-quote{ transition:transform .2s ease, box-shadow .2s ease; } .mm-quote:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(37,99,235,.55); } .mm-quote:hover .mm-qarrow{ transform:translateX(4px); } /* ========================================================================= FOOTER (shared across every page via footer.php) ========================================================================= */ .mm-flink{ transition:color .15s, padding-left .15s; } .mm-flink:hover{ color:#22c55e !important; padding-left:5px; } .mm-social{ transition:transform .2s ease, background .2s ease; } .mm-social:hover{ transform:translateY(-3px); background:#2563eb !important; } .mm-top{ transition:transform .2s ease, box-shadow .2s ease; } .mm-top:hover{ transform:translateY(-3px); box-shadow:0 12px 22px -8px rgba(22,163,74,.6); } .mm-legal{ transition:color .15s; } .mm-legal:hover{ color:#22c55e !important; } /* ========================================================================= MOBILE NAVIGATION (hamburger + slide-down panel) Hidden on desktop/laptop, shown below 900px. ========================================================================= */ .mm-burger{ display:none; flex-direction:column; justify-content:center; align-items:center; width:38px; height:38px; background:transparent; border:none; cursor:pointer; padding:0; flex-shrink:0; -webkit-tap-highlight-color:transparent; } .mm-burger span{ display:block; width:22px; height:2px; background:#0f2350; border-radius:2px; margin:3px 0; transition:transform .25s ease, opacity .2s ease; } .mm-burger.mm-open span:nth-child(1){ transform:translateY(5px) rotate(45deg); } .mm-burger.mm-open span:nth-child(2){ opacity:0; } .mm-burger.mm-open span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); } .mm-mobile-panel{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-top:1px solid #eef2f7; box-shadow:0 24px 44px -20px rgba(15,35,80,.28); padding:6px 24px 22px; flex-direction:column; z-index:999; max-height:calc(100vh - 80px); overflow-y:auto; } .mm-mobile-panel.mm-open{ display:flex; } .mm-mobile-panel a{ padding:14px 2px; border-bottom:1px solid #f1f3f7; color:#0f2350; text-decoration:none; font-family:'Poppins',sans-serif; font-size:15px; font-weight:500; } .mm-mobile-panel a.mm-mobile-phone{ color:#2563eb; font-weight:600; } .mm-mobile-panel a.mm-mobile-cta{ margin-top:14px; text-align:center; background:#2563eb; color:#fff; border:none; border-radius:9px; font-weight:600; padding:14px 2px; } @media (max-width: 900px){ .mm-nav{ display:none !important; } .mm-header-phone{ display:none !important; } .mm-quote{ display:none !important; } .mm-burger{ display:flex !important; } } @media (min-width: 901px){ .mm-mobile-panel{ display:none !important; } } /* ========================================================================= RESPONSIVE LAYOUT UTILITIES These classes are added alongside pages' existing inline styles. Because inline styles win over normal stylesheet rules, every override below uses !important so the responsive rule can take precedence at each breakpoint without having to rewrite every inline style on every page. ========================================================================= */ /* Reduce the horizontal breathing room on every
as the viewport narrows, instead of the fixed 32px used on desktop. */ @media (max-width: 900px){ section{ padding-left:24px !important; padding-right:24px !important; } } @media (max-width: 640px){ section{ padding-left:18px !important; padding-right:18px !important; } } /* Large hero / section headlines scale down so they don't wrap awkwardly or blow out the viewport height on small screens. */ @media (max-width: 900px){ .mm-h1{ font-size:34px !important; } .mm-h2-xl{ font-size:28px !important; } } @media (max-width: 640px){ .mm-h1{ font-size:27px !important; line-height:1.3 !important; } .mm-h2-xl{ font-size:22px !important; line-height:1.35 !important; } } /* Two-column "hero" / "split" layouts (text + illustration, text + form, etc.) collapse to a single column on tablets and phones. */ @media (max-width: 900px){ .mm-hero-grid, .mm-grid-2{ grid-template-columns:1fr !important; } .mm-banner-grid{ grid-template-columns:1fr !important; text-align:center; } } /* Card/feature grids: 4 or 5 columns -> 2 columns on tablets/small laptops, -> 1 column on phones. 7-column process grid -> 4, then 2. 3-column grids (offices, case studies) -> 2, then 1. */ @media (max-width: 1024px){ .mm-grid-4, .mm-grid-5{ grid-template-columns:repeat(2,1fr) !important; } .mm-grid-7{ grid-template-columns:repeat(4,1fr) !important; } .mm-grid-3{ grid-template-columns:repeat(2,1fr) !important; } } @media (max-width: 640px){ .mm-grid-3, .mm-grid-4, .mm-grid-5{ grid-template-columns:1fr !important; } .mm-grid-7{ grid-template-columns:repeat(2,1fr) !important; } } /* Form field pairs (name/email, phone/company) stay 2-across down to tablet, then stack on phones. */ @media (max-width: 560px){ .mm-form-row{ grid-template-columns:1fr !important; } } /* Office-hours / map split module: fixed-width left column -> full width stacked layout on tablets and phones. */ @media (max-width: 800px){ .mm-map-grid{ grid-template-columns:1fr !important; } .mm-map-grid > div{ min-height:220px; } } /* Rows of stat numbers / quick-info blurbs wrap instead of overflowing, and their thin divider bars disappear once wrapped (they only make sense in a single unbroken row). */ .mm-flex-wrap-row{ flex-wrap:wrap; } @media (max-width: 640px){ .mm-flex-wrap-row{ gap:18px !important; row-gap:18px !important; } .mm-stat-divider{ display:none !important; } } /* Technology logo strip: single row on desktop, wraps into multiple rows on smaller screens instead of squeezing every logo down to nothing. */ @media (max-width: 900px){ .mm-tech-row{ flex-wrap:wrap !important; row-gap:24px !important; justify-content:space-around !important; } .mm-tech-row .mm-tech{ width:22% !important; } } @media (max-width: 480px){ .mm-tech-row .mm-tech{ width:30% !important; } } /* Section header rows that pair a heading on the left with a link/blurb on the right stack vertically once space gets tight. */ @media (max-width: 700px){ .mm-split-row{ flex-direction:column !important; align-items:flex-start !important; gap:18px !important; } .mm-split-row > *{ text-align:left !important; max-width:100% !important; } } /* Button rows wrap instead of overflowing on narrow screens. */ @media (max-width: 480px){ .mm-btn-row{ flex-wrap:wrap !important; } .mm-btn-row > a{ width:100%; justify-content:center; } } /* Bordered stat/value cells (used where several stats sit side by side with a vertical divider line) swap the vertical divider for a horizontal one once the grid drops to a single column. */ @media (max-width: 640px){ .mm-stat-cell{ border-right:none !important; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:20px !important; margin-bottom:20px !important; } .mm-stat-cell:last-child{ border-bottom:none !important; margin-bottom:0 !important; padding-bottom:0 !important; } .mm-value{ border-right:none !important; border-bottom:1px solid #eef2f7; padding-bottom:20px !important; margin-bottom:20px !important; } .mm-value:last-child{ border-bottom:none !important; margin-bottom:0 !important; padding-bottom:0 !important; } } /* The dashed connector line under the 7-step "solution process" only makes sense as a single unbroken row; hide it once the grid wraps. */ @media (max-width: 1024px){ .mm-process-line{ display:none !important; } } /* Purely decorative illustrations/graphics are hidden on phones so the page stays short and content-first; they remain visible on tablets and up. */ @media (max-width: 640px){ .mm-hide-mobile{ display:none !important; } } /* Footer: 5-column layout -> 2 columns on tablets -> 1 column on phones. */ @media (max-width: 900px){ .mm-footer-grid{ grid-template-columns:repeat(2,1fr) !important; } .mm-footer-container{ padding-left:24px !important; padding-right:24px !important; } } @media (max-width: 560px){ .mm-footer-grid{ grid-template-columns:1fr !important; } .mm-footer-bottom{ flex-direction:column !important; align-items:flex-start !important; gap:14px !important; } .mm-top{ right:20px !important; bottom:24px !important; } .mm-footer-container{ padding-left:18px !important; padding-right:18px !important; } }