/* Theme Name: IT Next Door Theme URI: https://itnextdoor.com Author: IT Next Door Author URI: https://itnextdoor.com Description: Custom marketing theme for IT Next Door — managed IT support & cybersecurity, Singapore. Faithful build of the approved design: Home, IT Support, Managed SOC, Awareness, Capabilities, Work, Contact, and an Insights section (10 articles). Version: 2.8.1 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: itnextdoor */ /* ---- Base / reset (mirrors the design's helmet styles) ---- */ html, body { margin: 0; padding: 0; background: #F6F4F0; } * { box-sizing: border-box; } body { font-family: 'Public Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #1B2A4A; background: #F6F4F0; min-height: 100vh; } a { color: #1B2A4A; text-decoration: none; } a:hover { color: #0E7A93; } ::selection { background: #1DAED8; color: #0B1526; } img { max-width: 100%; } /* Clickable elements converted from the design's onClick spans/divs */ [role="link"] { cursor: pointer; } [role="link"]:focus-visible { outline: 2px solid #1DAED8; outline-offset: 2px; border-radius: 3px; } /* Full-bleed sections keep their own background while the inner container stays capped at 1180px — matches the design exactly. */ /* ---- Responsive: the design is built for ~1180px. Collapse the multi-column grids on smaller screens so nothing overflows on tablet / mobile. ---- */ @media (max-width: 1000px) { .itnd-page section > div[style*="grid-template-columns"], .itnd-page div[style*="grid-template-columns: repeat(4"], .itnd-page div[style*="grid-template-columns: repeat(3"], .itnd-page div[style*="grid-template-columns: minmax"], .itnd-page div[style*="grid-template-columns: 1fr auto"], .itnd-page div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } .itnd-page section { padding-left: 22px !important; padding-right: 22px !important; } } @media (max-width: 760px) { .itnd-header nav { display: none !important; } .itnd-header .itnd-menu-toggle { display: inline-flex !important; } .itnd-page h1 { font-size: clamp(34px, 9vw, 46px) !important; } } /* Mobile menu (progressive enhancement; hidden on desktop) */ .itnd-header .itnd-menu-toggle { display: none; } .itnd-mobile-nav { display: none; flex-direction: column; gap: 4px; padding: 8px clamp(20px, 3vw, 40px) 16px; background: rgba(246,244,240,0.98); border-bottom: 1px solid #E0DCD4; } .itnd-mobile-nav.open { display: flex; } .itnd-mobile-nav a { font-size: 15px; font-weight: 500; color: #4A5A78; padding: 10px 0; border-bottom: 1px solid #EDE9E1; } /* ---- Fluent Forms — style to match the design's form controls ---- */ .itnd-form .ff-el-group { margin-bottom: 18px; } .itnd-form .ff-el-input--label label { font-size: 13.5px; font-weight: 600; color: #1B2A4A; margin-bottom: 8px; } .itnd-form .ff-el-form-control { font-family: 'Public Sans', system-ui, sans-serif; font-size: 15px; color: #1B2A4A; padding: 13px 14px; border: 1px solid #C9C3B8; border-radius: 3px; background: #fff; width: 100%; } .itnd-form textarea.ff-el-form-control { resize: vertical; min-height: 130px; } .itnd-form .ff-el-form-control:focus { border-color: #0E7A93; outline: none; box-shadow: none; } .itnd-form .ff-btn-submit, .itnd-form button[type="submit"] { font-family: 'Public Sans', system-ui, sans-serif; cursor: pointer; font-size: 15px; font-weight: 600; background: #1B2A4A; color: #F6F4F0; padding: 15px 30px; border: none; border-radius: 3px; } .itnd-form .ff-btn-submit:hover, .itnd-form button[type="submit"]:hover { background: #0E7A93; } /* ---- Sitewide M365 notice bar ---- */ /* No-flash: if dismissed on a prior page, gets this class before paint. */ html.itnd-notice-dismissed .itnd-notice { display: none !important; } /* ---- M365 Security Health Check landing page ---- */ .itnd-m365 input, .itnd-m365 select, .itnd-m365 textarea { font-family: 'Public Sans', system-ui, sans-serif; width: 100%; min-width: 0; } .itnd-m365 input[type="checkbox"] { width: 17px; } .itnd-m365 label { min-width: 0; } .itnd-m365 input::placeholder, .itnd-m365 textarea::placeholder { color: #9AA6BC; } .itnd-m365 input:focus, .itnd-m365 select:focus, .itnd-m365 textarea:focus { outline: none; border-color: #0E7A93; } /* Collapse the landing page's multi-column grids on tablet / mobile. The consent row (auto 1fr) is deliberately left intact. */ @media (max-width: 1000px) { .itnd-m365 [style*="repeat(3"], .itnd-m365 [style*="1fr 1fr"], .itnd-m365 [style*="minmax(0, 1.15fr)"], .itnd-m365 [style*="minmax(200px"], .itnd-m365 [style*="minmax(0, 1.5fr)"], .itnd-m365 [style*="190px 1fr"] { grid-template-columns: 1fr !important; } } @media (max-width: 760px) { .itnd-m365 h1 { font-size: clamp(34px, 9vw, 46px) !important; } }