@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); /* IMSI Design overrides — loaded by Helix3 after template.css */ /* The logo is sized in ONE place - search "THE logo size" below. Three separate caps used to live in this file (30px here, 26px in the header block, 22px in the responsive block) and which one won depended on source order, so the rendered size kept coming out wrong. */ #sp-header .logo a { display: inline-flex; align-items: center; } /* ========================================================================== Footer — one module per column (bottom1..bottom4) + legal bar (footer1) ========================================================================== */ #sp-bottom { background: #081115; padding: 62px 0 34px; } #sp-bottom .sp-module { margin-bottom: 0; } .imsi-fbrand .imsi-flogo { max-width: 200px; height: auto; margin-bottom: 18px; } .imsi-fbrand p { font-size: 13.5px; line-height: 1.65; color: #7E939E; margin: 0; } .imsi-fcol h4 { font-family: IBM Plex Mono, SFMono-Regular, Consolas, monospace; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #FFFFFF; margin: 0 0 14px; font-weight: 500; } ul.imsi-flinks { list-style: none; margin: 0; padding: 0; } ul.imsi-flinks li { margin: 0; } ul.imsi-flinks a { color: #93A6B0; font-size: 13.5px; line-height: 2.05; text-decoration: none; } ul.imsi-flinks a:hover { color: #22A9E1; } #sp-footer { background: #081115; padding: 0 0 40px; } #sp-footer .container-inner { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; } .imsi-flegal { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: nowrap; } /* one row: copyright left, legal links right */ .imsi-flegal-links { flex-shrink: 0; white-space: nowrap; } .imsi-flegal span { font-size: 12.5px; color: #5C7480; } .imsi-flegal-links a { color: #8FA3AD; font-size: 12px; margin-left: 24px; text-decoration: none; } .imsi-flegal-links a:first-child { margin-left: 0; } .imsi-flegal-links a:hover { color: #22A9E1; } /* Flex ships its own copyright line; the Legal module replaces it */ #sp-footer .sp-copyright, #sp-footer .footer1 .sp-module + .sp-copyright { display: none; } @media (max-width: 768px) { #sp-bottom { padding: 44px 0 24px; } #sp-bottom .sp-module { margin-bottom: 28px; } .imsi-flegal { flex-direction: column; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .imsi-flegal-links { white-space: normal; } .imsi-flegal-links a { margin: 0 18px 0 0; } } /* Flex renders its own copyright line; the Footer - Legal module replaces it */ .sp-copyright { display: none !important; } /* ========================================================================== /* ========================================================================== Header — transparent, overlaid on the hero The hero is dark on every page, so the header sits on top of it rather than forming a separate grey band above it. TWO THINGS FIGHT US HERE, and the earlier version of this file lost to both: 1. The logo lives in #sp-logo, NOT in "#sp-header .logo". template.css ships `#sp-logo .sp-default-logo { max-height: 100% }` at specificity (1,1,0), which beat every `.sp-default-logo` rule written here. The logo rendered at its natural 2x size - 500x56 - overflowed its 190px column by 310px and covered the first menu item. 2. Helix3 writes `#sp-header, .transparent-wrapper { height: 90px }` into an inline