:root{ --iq-navy:#2D4C6B; /* Primary background */ --iq-navy-2:#0B141C; /* Ebony */ --iq-light:#f4f7fb; --iq-white:#ffffff; --iq-accent:#6C9FC2; /* Glacier */ --iq-accent-2:#6C9FC2; /* Glacier */ --iq-mojo:#CA4948; /* Mojo red */ --iq-text:#1a1f24; --iq-muted:#5b6a76; --iq-radius:14px; --iq-shadow:0 10px 25px rgba(0,0,0,.08); --iq-max:1100px; --iq-pad:22px; --iq-font:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } *{box-sizing:border-box} html,body{margin:0;padding:0} /* ========================================================= STICKY FOOTER (ALL PAGES) Make the whole page a vertical stack: header (top) | content (stretches) | footer (bottom) ========================================================= */ body{ min-height:100vh; display:flex; flex-direction:column; } /* WordPress admin bar pushes the page down with html {margin-top:32px/46px} so adjust the full-height math when logged in */ body.admin-bar{ min-height:calc(100vh - 32px); } @media (max-width: 782px){ body.admin-bar{ min-height:calc(100vh - 46px); } } /* These are the common “middle” wrappers in your theme. At least ONE of these will exist on every page. Whichever exists will stretch and push the footer down. */ #page, .site, #content, .site-content, .iq-page, main{ flex:1 0 auto; min-height:0; } /* Footer always sits at the end */ .iq-site-footer{ margin-top:auto; flex:0 0 auto; } /* ========================================================= STICKY FOOTER (works even when logged-in admin bar exists) ========================================================= */ /* Make the page a vertical “stack”: header, main grows, footer */ body{ font-family:var(--iq-font); color:var(--iq-text); background:var(--iq-light); line-height:1.55; /* sticky footer core */ min-height:100vh; display:flex; flex-direction:column; } /* When logged in, WordPress adds a top margin to . Adjust our “full height” so the footer still reaches the bottom. */ body.admin-bar{ min-height:calc(100vh - 32px); } @media (max-width: 782px){ body.admin-bar{ min-height:calc(100vh - 46px); } } /* main is the stretchy middle */ main{ flex:1 0 auto; min-height:0; /* prevents weird overflow sizing */ } /* footer stays at the bottom on short pages */ .iq-site-footer{ margin-top:auto; flex:0 0 auto; } a{color:var(--iq-accent-2);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%;height:auto} .iq-container{max-width:var(--iq-max);margin:0 auto;padding:0 var(--iq-pad)} .iq-card{ background:var(--iq-white); border-radius:var(--iq-radius); box-shadow:var(--iq-shadow); padding:28px; } .iq-page{padding:34px 0 70px} .iq-page .iq-title{font-size:34px;margin:0 0 10px} .iq-page .iq-subtitle{color:var(--iq-muted);margin:0 0 26px} .iq-content h2{margin-top:28px} .iq-content p{margin:0 0 14px} .iq-content ul{margin:0 0 14px 18px} .iq-sr{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap} /* Header */ .iq-site-header{ background:var(--iq-navy); color:#fff; } .iq-site-header .iq-top{ display:flex;align-items:center;gap:18px; padding:14px 0; } .iq-brand{ display:flex;align-items:center;gap:12px;min-width:240px; } .iq-brand .custom-logo{display:block;height:34px;width:auto} .iq-brand-name{font-weight:700;letter-spacing:.8px;text-transform:uppercase;font-size:14px} .iq-brand-name span{color:var(--iq-accent)} .iq-nav-wrap{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:16px} .iq-nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:flex-end;margin:0;padding:0;list-style:none} .iq-nav a{color:#fff;font-weight:600;font-size:14px} .iq-nav .current-menu-item>a,.iq-nav .current_page_item>a{opacity:.9;text-decoration:underline} /* Submenus: hide until hover */ .iq-nav .menu-item-has-children{position:relative} .iq-nav .sub-menu{ display:none; position:absolute; top:100%; left:0; min-width:220px; padding:10px; margin:10px 0 0; list-style:none; background:rgba(11,20,28,.95); border:1px solid rgba(255,255,255,.14); border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,.35); z-index:50; } .iq-nav .sub-menu li{margin:0} .iq-nav .sub-menu a{display:block;padding:8px 10px;border-radius:10px;font-weight:600;white-space:nowrap} .iq-nav .sub-menu a:hover{background:rgba(255,255,255,.10)} .iq-nav li:hover > .sub-menu{display:block} .iq-lang{ display:flex;gap:8px;align-items:center } .iq-pill{ background:var(--iq-accent); border:1px solid rgba(255,255,255,.18); color:#fff; padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700; } .iq-donate-btn{ background:var(--iq-mojo); color:#ffffff; padding:9px 14px;border-radius:10px;font-weight:800;font-size:13px; border:1px solid rgba(255,255,255,.18); } .iq-donate-btn:hover{text-decoration:none;filter:brightness(1.03)} .iq-mobile-toggle{display:none} /* Hero */ .iq-hero{ background:var(--iq-navy); padding:24px 0 36px; } /* Optical centering (matches the original static mock) */ .iq-hero .iq-container{padding-left:0;} .iq-hero-grid{ display:grid; /* Left is for the square logo + tagline, right stays landscape-friendly */ grid-template-columns: 420px minmax(0, 1fr); gap:28px; align-items:stretch; } .iq-hero-left{ display:flex;flex-direction:column;gap:16px; } .iq-hero-left .iq-big-logo{ background:#fff;border-radius:18px;overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.16); padding:14px; } .iq-hero-tagline{ color:#fff; font-size:22px; font-weight:700; } .iq-hero-tagline small{ display:block; margin-top:8px; font-weight:600; opacity:.9; font-size:14px; } .iq-hero-right{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:hidden; /* Keep the slider naturally in a landscape shape */ aspect-ratio: 16 / 9; } .iq-hero-right .iq-hero-inner{ height:100%; display:flex; align-items:center; justify-content:center; padding:18px; color:rgba(255,255,255,.9); text-align:center; } /* Page hero (About) */ .iq-hero-banner{ background:var(--iq-navy); color:#fff; padding:30px 0; } .iq-hero-banner h1{margin:0;font-size:34px} .iq-hero-banner p{margin:8px 0 0;opacity:.92} /* Footer */ .iq-site-footer{ background:var(--iq-navy); color:#fff; padding:26px 0; } .iq-footer-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap:24px; align-items:start; } .iq-footer-brand .iq-footer-logo{ display:flex;align-items:center;gap:10px;margin-bottom:10px } .iq-footer-brand .custom-logo{height:34px;width:auto} .iq-footer-brand .iq-footer-name{font-weight:800;letter-spacing:.6px;text-transform:uppercase;font-size:13px} .iq-footer-actions .iq-footer-btn{ display:inline-block; background:var(--iq-accent); color:#0f2230; padding:9px 14px;border-radius:10px;font-weight:800;font-size:13px; } .iq-footer-actions .iq-footer-btn:hover{text-decoration:none} .iq-social{display:flex;gap:10px;margin-top:10px} .iq-social a{ width:28px;height:28px;display:grid;place-items:center; border-radius:999px;border:1px solid rgba(255,255,255,.25); color:#fff;font-weight:900;font-size:13px; text-decoration:none } .iq-footer-menu a{color:#fff} .iq-footer-menu{list-style:none;margin:0;padding:0} .iq-footer-menu li{margin:0 0 6px} .iq-signup{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px} .iq-signup label{display:block;font-weight:800;font-size:13px;margin-bottom:8px} .iq-signup .iq-signup-row{display:flex;gap:10px} .iq-signup input[type=email]{flex:1;border-radius:8px;border:0;padding:10px 12px} .iq-signup button{border:0;border-radius:8px;background:var(--iq-accent);padding:10px 12px;font-weight:900} .iq-signup small{display:block;margin-top:8px;opacity:.88} /* Blog / News */ .iq-post-grid{display:grid;grid-template-columns:1fr;gap:18px} @media (min-width: 860px){ .iq-post-grid{grid-template-columns:1fr 1fr} } .iq-post-card{background:#fff;border-radius:14px;box-shadow:var(--iq-shadow);padding:18px} .iq-post-card h2{margin:0 0 8px;font-size:20px} .iq-post-meta{color:var(--iq-muted);font-size:13px;margin-bottom:8px} .iq-post-excerpt{margin:0} .iq-post-card a.iq-readmore{display:inline-block;margin-top:10px;font-weight:800} /* Events */ .iq-event-item{display:flex;gap:16px;align-items:flex-start} .iq-event-thumb{width:140px;flex:0 0 140px;border-radius:12px;overflow:hidden;background:#e9eef5} .iq-event-body h3{margin:0 0 6px;font-size:18px} .iq-event-meta{color:var(--iq-muted);font-size:13px;margin-bottom:8px} /* Responsive */ @media (max-width: 860px){ .iq-hero-grid{grid-template-columns:1fr} .iq-hero .iq-container{padding-left:18px;} .iq-brand{min-width:auto} .iq-nav-wrap{justify-content:flex-end} .iq-footer-grid{grid-template-columns:1fr} } .iq-nav li{list-style:none;margin:0;padding:0} /* Smart Slider: ensure full-bleed hero image and visible prev/next arrows */ .iq-hero-right .n2-ss-slider, .iq-hero-right .n2-ss-slider-1, .iq-hero-right .n2-ss-slider-2, .iq-hero-right .n2-ss-slider-3{height:100% !important;} .iq-hero-right .n2-ss-slide-background{background-size:cover !important;background-position:center center !important;} .iq-hero-right .n2-ss-arrow{opacity:1 !important;visibility:visible !important;z-index:60 !important;} .iq-hero-title{color:#fff;} /* ========================================================= STICKY FOOTER — FINAL OVERRIDE (ALL TEMPLATES) Works whether your layout is: - body > header/main/footer OR - body > #page/.site > header/content/footer ========================================================= */ html, body { height: 100%; } body{ min-height: 100vh; display: flex; flex-direction: column; } /* admin bar reduces usable viewport height */ body.admin-bar{ min-height: calc(100vh - 32px); } @media (max-width: 782px){ body.admin-bar{ min-height: calc(100vh - 46px); } } /* If the theme uses a wrapper (common WP pattern), make it a page-shell too */ #page, .site{ flex: 1 0 auto; min-height: 0; display: flex; flex-direction: column; } /* Stretch the “content area” on any template that uses these wrappers */ #content, .site-content, .iq-page, main{ flex: 1 0 auto; min-height: 0; } /* Footer always at the bottom of whichever shell it’s in */ .iq-site-footer{ margin-top: auto; flex: 0 0 auto; } /* ========================================================= STICKY FOOTER — ADMIN BAR SAFE WP already offsets the viewport by pushing HTML down (html { margin-top: 32px/46px }), so DO NOT subtract again. ========================================================= */ html, body { height: 100%; } body{ min-height: 100vh; display: flex; flex-direction: column; } /* CRITICAL: override any earlier "admin-bar min-height calc(...)" rules */ body.admin-bar{ min-height: 100vh !important; } /* Make the main content area grow, so footer gets pushed to bottom */ main, .iq-page, #content, .site-content{ flex: 1 0 auto; min-height: 0; } /* Footer sits at bottom */ .iq-site-footer{ margin-top: auto; } /* ========================================================= STICKY FOOTER (HARD OVERRIDE) — works across templates Put this at the VERY END of main.css ========================================================= */ html { height: 100%; } body { min-height: 100vh; } /* Force the entire page to be a flex column no matter what other CSS says */ body{ display: flex !important; flex-direction: column !important; } /* Make sure the "middle" area can actually grow. We target common WP wrappers AND your theme wrappers. */ body > main, body > #page, body > .site, body > .wp-site-blocks, body > .site-content, #page, .site, .wp-site-blocks, .site-content, #content, main, .iq-page{ flex: 1 0 auto !important; min-height: 0 !important; } /* Footer always pushed to the bottom */ footer, .iq-site-footer{ margin-top: auto !important; } /* IMPORTANT: WordPress already offsets for the admin bar by adding html margin-top. Do NOT shrink body height further. */ body.admin-bar{ min-height: 100vh !important; }