/* Millennium Associates — hand-written stylesheet (no framework). See .foreman/SPEC.md §5 & §9. */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; padding: 0; } img { border: 0; } a { color: inherit; } button { font: inherit; } /* The imported WordPress content carries ~1,000 inline font-family declarations (helvetica / arial / georgia) that would otherwise punch through the site font. Content text is preserved verbatim, so they are overridden here rather than edited out of the pages. */ [style*="font-family"], [style*="font-family"] * { font-family: var(--font) !important; } /* ---------- Base ---------- */ :root { --navy: #04305c; --menu-active: #0060bf; --text: #2e2d2d; --link: #0958a8; --h1-color: #525151; --h2-color: #212121; --hr: #d9d9d9; --panel-bg: #f5f5f5; --panel-text: #3d3c3c; --btn-bg: #306bc9; --btn-hover: #d9f6ff; --back-btn-bg: #0d80d8; --font: 'Outfit', 'Segoe UI', Verdana, Arial, sans-serif; --footer-text: #fff; --footer-link: #fff; } html, body { height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; background: #fff; font-family: var(--font); font-size: 17.5px; line-height: 25px; letter-spacing: .005em; color: var(--text); overflow-wrap: break-word; } main { flex: 1 0 auto; } footer { flex-shrink: 0; } h1, h2, h3, h4, h5 { font-family: var(--font); margin: 0 0 10px; color: var(--text); } h6 { font-family: var(--font); font-weight: 500; font-size: 16px; line-height: 23px; margin: 0 0 10px; } h1 { font-size: 40px; line-height: 47px; font-weight: 300; } h2 { font-size: 29px; line-height: 36px; font-weight: 700; } h3 { font-size: 22px; line-height: 29px; font-weight: 700; } h4 { font-size: 22px; line-height: 30px; font-weight: 700; } h5 { font-size: 16px; line-height: 23px; font-weight: 700; } a { text-decoration: none; } main a { color: var(--link); } main a:hover { text-decoration: underline; } .container { max-width: 1170px; margin: 0 auto; padding: 0 20px; } img { max-width: 100%; height: auto; } hr { border: none; border-top: 1px solid var(--hr); width: 90%; margin: 0 0 20px; } .skip-link { position: absolute; left: -999px; top: 0; background: #fff; color: var(--navy); padding: 10px 16px; z-index: 1000; } .skip-link:focus { left: 10px; top: 10px; } /* A2: visible focus styles (native outlines elsewhere are left alone). */ a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid #0060bf; outline-offset: 2px; } #menu-wrapper a:focus-visible, .menu-toggle:focus-visible { outline-color: #fff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------- Header ---------- */ #first-header { background: #fff; padding: 18px 20px 20px; } #first-header .container { padding: 0; max-width: 1170px; } #logo { float: left; } /* The header used to be a 600px wordmark PNG set in a typeface that matched neither the logo nor the site. It is now the full name as live text in Outfit — no "M" mark beside it (that art is the favicon). */ #logo a { display: inline-block; color: var(--navy); } .logo-word { font-family: var(--font); font-weight: 300; font-size: 41px; line-height: 1; letter-spacing: .13em; text-transform: uppercase; color: var(--navy); white-space: nowrap; } #first-header::after { content: ""; display: block; clear: both; } /* ---------- Menu ---------- */ /* #menu-wrapper is a direct flex child of (column flex) and stays transparent + full width; its nested .container (an ordinary block, not a flex item) carries the navy background and the 1170px centering, so the bar reads as container-width with white page margins at >=1200px and full width once .container itself goes fluid under 768px. */ #menu-wrapper { background: transparent; } #menu-wrapper > .container { background: var(--navy); max-width: 1170px; padding: 0 20px; min-height: 60px; } #top_menu { list-style: none; display: flex; align-items: center; min-height: 60px; flex-wrap: wrap; } #top_menu .menu-item a { display: block; padding: 0 20px; line-height: 60px; font-family: var(--font); font-size: 13px; font-weight: 400; color: #fff; text-transform: uppercase; white-space: nowrap; } #top_menu .menu-item a:hover, #top_menu .menu-item.current-menu-item a { background: var(--menu-active); text-decoration: none; } #top_menu .menu-pipe { color: gray; font-size: 8px; font-family: Arial, sans-serif; line-height: 60px; } .menu-toggle { display: none; } /* ---------- Page heading ---------- */ /* Same flex-item auto-margin caveat as #menu-wrapper above: no max-width/margin here, the nested .container centers it. */ #page-heading { margin-bottom: 30px; padding: 20px 0; } #page-heading h1 { font-family: var(--font); font-weight: 800; font-size: 24px; line-height: 31px; color: var(--h1-color); margin: 0 0 6px; } #page-heading h2 { font-family: var(--font); font-weight: 300; font-size: 16px; line-height: 23px; color: var(--h2-color); margin: 0; } /* ---------- Body wrapper / content ---------- */ #main { padding-bottom: 40px; } .row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .row::after { content: ""; display: block; clear: both; } .ozy-page-content { margin: 15px 0 40px; padding: 0 15px; min-width: 0; } .span12 { width: 100%; } .row.has-sidebar .span8 { width: 66.6667%; } .right-sidebar.span4 { width: 33.3333%; padding: 0 15px; margin-top: 15px; } .ozy-page-content p { margin: 0; } .ozy-page-content .alignleft { float: left; margin: 0 20px 15px 0; } .ozy-page-content .alignright { float: right; margin: 0 0 15px 20px; } .ozy-page-content .aligncenter { display: block; margin: 0 auto 15px; } .ozy-page-content .alignnone { display: block; } .ozy-page-content h1.post-title { font-family: var(--font); font-weight: 800; font-size: 22px; line-height: 30px; margin: 0 0 10px; } /* H1: content h1s demoted to h2.content-h1 (build.py) when the page already has a #page-heading h1 — styled identically to the theme's content h1 so nothing changes visually. */ .ozy-page-content .content-h1 { font-family: var(--font); font-weight: 300; font-size: 40px; line-height: 47px; margin: 0 0 10px; color: var(--text); } .wp-caption { max-width: 100%; } .wp-caption img { max-width: 100%; height: auto; } .ozy-page-content iframe, .ozy-page-content table { max-width: 100%; } .ozy-page-content table { display: block; overflow-x: auto; } /* ---------- Sidebar widget ---------- */ .sidebar-widget { background: var(--panel-bg); padding: 20px; margin-bottom: 1px; } .sidebar-widget h6 { padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #e0e0e0; text-transform: none; } .sidebar-widget input[type="search"] { border: 1px solid #d4d4d4; width: 100%; padding: 5px 8px; line-height: 28px; margin: 10px 0; font-family: var(--font); font-size: 15px; } /* ---------- Blog meta bar / tag bar ---------- */ .blog-info-bar-details { margin: 15px 0 10px; text-transform: uppercase; font-size: 10px; } .blog-info-bar-details a { font-size: 10px; color: var(--link); } .blog-info-bar-details svg { vertical-align: -1px; margin-left: 8px; margin-right: 2px; } .blog-post .tag-bar { display: inline-block; margin-top: 20px; clear: both; font-size: 13px; } .blog-post .tag-bar svg { vertical-align: -1px; margin-right: 4px; } .blog-post .tag-bar a { color: var(--link); } p.nocomments { margin-top: 20px !important; font-style: italic; color: #777; } /* ---------- Blog listing (archives) ---------- */ .blog-listing .blog-post { margin-bottom: 35px; padding-bottom: 30px; border-bottom: 1px solid var(--hr); } .blog-listing .blog-post:last-child { border-bottom: 0; } .blog-post-title { font-family: var(--font); font-weight: 800; font-size: 22px; line-height: 29px; margin: 0 0 8px; } .blog-post-title a { color: var(--link); } .blog-listing .excerpt { margin: 0 0 8px !important; } .blog-listing .read-more a { font-weight: 700; } /* ---------- VC grid (Visual Composer) ---------- */ .wpb_row { margin-left: -15px; margin-right: -15px; } .wpb_row::after { content: ""; display: block; clear: both; } .wpb_row, .wpb_content_element, ul.wpb_thumbnails-fluid > li, .wpb_thumbnails > li, .wpb_button { margin-bottom: 35px; } .wpb_row .wpb_column { margin-bottom: 35px; float: left; padding: 0 15px; position: relative; min-height: 1px; } .wpb_row > :last-child, .wpb_row > :last-child > .wpb_column { margin-bottom: 0; } .wpb_column > .wpb_wrapper *:last-child, .wpb_text_column *:last-child { margin-bottom: 0; } .vc_span3 { width: 25%; } .vc_span4 { width: 33.3333%; } .vc_span6 { width: 50%; } .vc_span9 { width: 75%; } .vc_span12 { width: 100%; } .wpb_single_image img { height: auto; max-width: 100%; } .wpb_single_image.vc_align_center { text-align: center; } .vc_box_border, .vc_box_border_grey { padding: 6px; border: none; border-radius: 0; background-color: #ebebeb; display: inline-block; max-width: 100%; } .vc_separator { display: table; width: 100%; margin-bottom: 35px; } .vc_sep_holder { display: table-cell; height: 1px; width: 50%; } .vc_sep_line { display: block; height: 1px; border-top: 1px solid #ebebeb; } /* ---------- Tabs (/our-clients/) ---------- */ .wpb_tabs_nav { list-style: none; } .wpb_tabs_nav::after { content: ""; display: block; clear: both; } .wpb_tabs_nav li { float: left; margin: 0 1px 0 0; background: #ccc; } .wpb_tabs_nav li.ui-tabs-active { background: var(--panel-bg); } .wpb_tabs_nav a { display: block; padding: .5em 1em; text-decoration: none; color: #545454; font-family: var(--font); font-weight: 800; font-size: 16px; line-height: 23px; } .wpb_tab { background: var(--panel-bg); padding: 15px; } .wpb_tab.wpb_ui-tabs-hide { display: none; } .wpb_tab .wpb_content_element, .wpb_tab .wpb_content_element * { color: var(--panel-text); font-family: var(--font); font-size: 17px; line-height: 20px; } .wpb_tab .wpb_row { margin-bottom: 0; } .wpb_tab .wpb_single_image img { background: #fff; } /* ---------- Accordion (/newsroom/) ---------- */ details.acc { margin: 0 0 1px; background: var(--panel-bg); position: relative; } details.acc summary { display: block; padding: .5em 1em; color: #545454; font-family: var(--font); font-weight: 800; font-size: 16px; line-height: 23px; cursor: pointer; list-style: none; position: relative; padding-right: 2.2em; } details.acc summary::-webkit-details-marker { display: none; } details.acc summary::after { content: "+"; position: absolute; right: .7em; top: 50%; transform: translateY(-50%); font-size: 16px; color: #545454; } details.acc[open] summary::after { content: "\2013"; } details.acc .acc-body { background: var(--panel-bg); padding: 0 1em 1em; } details.acc .acc-body, details.acc .acc-body * { color: var(--panel-text); font-family: var(--font); font-size: 17px; line-height: 20px; } details.acc .acc-body p:not(:last-child) { margin-bottom: 10px; } /* ---------- Buttons ---------- */ .wpb_button { display: inline-block; padding: 4px 10px; font-size: 13px; line-height: 18px; text-align: center; border-radius: 0; } .wpb_button_a { text-decoration: none; } .wpb_button_a .wpb_button.wpb_btn-primary { background: var(--back-btn-bg); color: #fff; font-family: var(--font); font-size: 11px; padding: 6px 12px; } .wpb_button_a:hover .wpb_button.wpb_btn-primary { background: var(--btn-hover); color: var(--navy); } /* ---------- Client / logo grid (our-clients tab panel) ---------- */ .wpb_tab .vc_span3 .wpb_single_image { text-align: center; } .wpb_tab .vc_box_border_grey { width: 100%; } .wpb_tab .vc_box_border_grey img { width: 100%; background: #fff; } /* ---------- Teaser grid (/insights/) ---------- */ ul.wpb_thumbnails, ul.wpb_thumbnails-fluid { list-style: none; margin: 0; padding: 0; } ul.wpb_thumbnails li, ul.wpb_thumbnails-fluid li { margin-bottom: 30px !important; float: none !important; width: 100% !important; position: static !important; } h2.post-title { margin: 0 0 8px !important; } h2.post-title a.link_title { font-family: var(--font); font-weight: 500; font-size: 24px; line-height: 32px; color: var(--link); } .entry-content p { margin: 0 !important; } /* Wide floated image + `.float-col` (build.py): the div is a block formatting context, so the copy beside a big float stays in its own column instead of sliding under the image when the float ends. */ .float-col { overflow: hidden; min-width: 0; } /* ---------- Generated listings (/insights/, /press-releases/) ---------- */ .listing-crosslink { margin: 0 0 18px !important; text-align: right; font-size: 15px; } .listing-crosslink a { font-weight: 500; } /* Compact rows (press releases): date column + title on one line. */ ul.wpb_thumbnails li.listing-compact { display: flex; gap: 16px; align-items: baseline; margin-bottom: 14px !important; padding-bottom: 14px; border-bottom: 1px solid #f0f0f0; } ul.wpb_thumbnails li.listing-compact:last-child { border-bottom: 0; } .listing-compact .listing-date { flex: 0 0 128px; font-size: 13px; line-height: 22px; color: #8a8a8a; letter-spacing: .02em; } .listing-compact h2.post-title { margin: 0 !important; } .listing-compact h2.post-title a.link_title { font-size: 19px; line-height: 26px; } @media (max-width: 600px) { ul.wpb_thumbnails li.listing-compact { display: block; } .listing-compact .listing-date { display: block; margin-bottom: 1px; } } /* ---------- Pagination ---------- */ .pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; padding-top: 22px; border-top: 1px solid var(--hr); } .pagination .page-num, .pagination .page-arrow { display: inline-block; padding: 7px 13px; font-size: 15px; line-height: 20px; border: 1px solid #d9d9d9; color: var(--link); text-decoration: none; } .pagination a:hover { background: var(--navy); border-color: var(--navy); color: #fff; text-decoration: none; } .pagination .current { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 500; } .pagination .disabled { color: #b3b3b3; border-color: #ededed; } .pagination .page-arrow { font-size: 14px; } @media (max-width: 600px) { .pagination .page-arrow { width: 100%; text-align: center; } .pagination { gap: 5px; } .pagination .page-num { padding: 6px 11px; } } /* ---------- Search page ---------- */ .search-form { margin: 15px 0 25px; } .search-form input[type="search"] { width: 100%; max-width: 420px; border: 1px solid #d4d4d4; padding: 8px 10px; font-size: 16px; font-family: var(--font); } #search-results .result-item { margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid var(--hr); } #search-results .result-item h2 { font-family: var(--font); font-size: 22px; margin: 0 0 6px; } #search-results .result-item h2 a { color: var(--link); } #search-results .result-date { font-size: 12px; text-transform: uppercase; color: #888; margin-bottom: 6px; } .search-status { color: #777; } .link-list { list-style: none; margin: 20px 0 0; } .link-list li { margin-bottom: 10px; } /* ---------- Footer ---------- */ #footer-wrapper { background: var(--navy); } .footer-sidebar { padding: 10px 20px; } .footer-sidebar p { font-family: var(--font); font-size: 15px; line-height: 22px; color: var(--footer-text); } .footer-sidebar a { color: var(--footer-link); font-size: 15px; text-decoration: underline; } .footer-sidebar a:hover { text-decoration: none; } /* ---------- Google map / gmaps widget ---------- */ .wpb_gmaps_widget .wpb_wrapper { background: #f7f7f7; padding: 5px; } .vc_map_responsive .wpb_map_wraper, .wpb_gmaps_widget .wpb_wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .vc_map_responsive .wpb_map_wraper iframe, .wpb_gmaps_widget iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ---------- Responsive ---------- */ @media (max-width: 1199px) { .container, #menu-wrapper { max-width: 940px; } } @media (max-width: 979px) { .container, #menu-wrapper { max-width: 100%; } } @media (max-width: 767px) { #top_menu { display: none; } #top_menu.open { display: block; } #top_menu .menu-item { width: 100%; border-bottom: 1px solid var(--menu-active); } #top_menu .menu-item a { padding-left: 30px; line-height: 50px; } #top_menu .menu-pipe { display: none; } .menu-toggle { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--navy); color: #fff; border: 0; text-align: left; padding-left: 30px; height: 60px; font-size: 16.9px; font-family: var(--font); text-transform: uppercase; cursor: pointer; } #logo { float: none; text-align: center; } .logo-word { font-size: 21px; letter-spacing: .12em; } .row.has-sidebar .span8, .right-sidebar.span4 { width: 100%; } .right-sidebar.span4 { padding: 0; } .wpb_row .wpb_column, .vc_span3, .vc_span4, .vc_span6, .vc_span9, .vc_span12 { width: 100%; float: none; margin-left: 0; } .wpb_tabs_nav li { float: none; } h1 { font-size: 30px; line-height: 36px; } } /* /our-clients/ logo grid (inside the tab panel only): 4-up >=768px (default .vc_span3 25% above), 2-up from 360-767px, 1-up only below 360px. */ @media (max-width: 767px) { .wpb_tab .vc_span3 { width: 50%; float: left; margin-left: 0; } } @media (max-width: 359px) { .wpb_tab .vc_span3 { width: 100%; float: none; } /* the wordmark is the widest thing on the page at this size */ .logo-word { font-size: 16px; letter-spacing: .08em; } } /* Floated content images un-float on mobile so text doesn't wrap around a tiny column, EXCEPT .img-small (<=200px wide, e.g. the home doodle and the 165px who-we-are portraits) which keeps its float + margin. */ @media (max-width: 600px) { .ozy-page-content .alignleft, .ozy-page-content .alignright { float: none; display: block; margin: 0 auto 15px; } .ozy-page-content .alignleft.img-small { float: left; display: inline; margin: 0 15px 15px 0; } .ozy-page-content .alignright.img-small { float: right; display: inline; margin: 0 0 15px 15px; } } /* ---------- Home page (single-screen hero) ---------- */ /* The old home page was one wide PNG with the headline baked in (front4.png): unreadable to search engines and unreadable on a phone. The background art is now text-free (/assets/img/home-hero-*.jpg) and the headline is live text on top of it. The page is sized to fit one viewport height with no scrolling: #main is the only flexible row, everything else keeps its natural height, and the type scales off both vw and vh so it never outgrows the box. */ body.home { min-height: 100svh; } body.home #main { display: flex; flex-direction: column; padding-bottom: 0; min-height: 0; } body.home #main > .container { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-height: 0; } .home-hero { flex: 1 1 auto; min-height: clamp(88px, 20vh, 300px); display: flex; align-items: center; justify-content: center; margin: clamp(8px, 1.6vh, 15px) 0 clamp(10px, 2vh, 18px); padding: clamp(14px, 3vh, 40px) clamp(14px, 4vw, 60px); background: #eef1f5 url("/assets/img/home-hero-wide.jpg") center / cover no-repeat; } .home-hero__title { margin: 0; max-width: 22ch; font-family: var(--font); font-weight: 500; font-size: clamp(1.25rem, min(6.4vw, 6.6vh), 3.25rem); line-height: 1.18; letter-spacing: .01em; text-align: center; text-transform: uppercase; text-wrap: balance; color: var(--navy); text-shadow: 0 1px 2px rgba(255, 255, 255, .7); } .home-services { margin: 0 0 clamp(10px, 1.8vh, 18px) !important; text-align: center; font-family: var(--font); color: #808080; font-size: clamp(10px, min(1.4vw, 1.9vh), 16px); line-height: 1.5; letter-spacing: .01em; } .home-rule { width: 90%; margin: 0 auto clamp(8px, 1.6vh, 18px); } /* row-reverse keeps the doodle on the right (as on the old page) while the DOM order stays figure-image-then-caption. */ .home-quote { display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: center; gap: clamp(8px, 1.5vw, 16px); margin: 0 0 clamp(10px, 2vh, 24px); } .home-quote__doodle { display: block; line-height: 0; } .home-quote__doodle img { width: clamp(46px, 7vh, 76px); height: auto; display: block; } .home-quote__text { text-align: right; font-family: var(--font); color: var(--text); font-size: clamp(12px, 1.8vh, 15px); line-height: 1.45; } .home-quote__by { font-size: .8em; } @media (max-width: 640px) { .home-hero { background-image: url("/assets/img/home-hero-portrait.jpg"); } } /* Short/landscape screens: give the headline the room and keep everything on one screen by trimming the surrounding chrome. */ @media (max-height: 520px) { #first-header { padding: 8px 20px 10px; } .logo-word { font-size: 22px; } #menu-wrapper > .container, #top_menu, #top_menu .menu-item a { min-height: 44px; line-height: 44px; } .menu-toggle { height: 44px; } .home-hero { min-height: 64px; margin: 6px 0 8px; padding: 8px 16px; } .home-services { margin-bottom: 6px !important; } .home-rule { margin-bottom: 6px; } .home-quote { margin-bottom: 6px; } .home-quote__doodle img { width: 40px; } .footer-sidebar { padding: 6px 20px; } .footer-sidebar p, .footer-sidebar a { font-size: 13px; line-height: 18px; } }