/* css/b2b.css - Contractam's own rules for the business site, on top of the template's stylesheets: the header (one-row nav, full-width Platform panel, logo sizes), the footer, and the Insight article pieces (byline, author card, CTA, legal note). Hand-written - edit here. Link it AFTER the template stylesheets (after insight.css on an Insight page): several rules tie with style.css on specificity and only win on source order. For now only resources/insights/blog-template.html links this file; the other B2B pages still carry the header rules inline and are to move here in their own pass. */ /* Sit the logo on the header's own gutter (template default is margin-left: 12px). The nav gets its room from the wider bar below, so the logo no longer has to be pulled off-grid. */ #header .desktoplogo { margin-left: 0; } /* Trimmed logo: cap height so the nav stays on one row. Beats .desktoplogo .logo-black img { max-height: 85px } */ #header .desktoplogo .logo-white img, #header .desktoplogo .logo-black img { max-height: 42px; width: auto; } @media (min-width: 992px) { /* The logo (224px) plus the nav (930px) need 1154px, but the template caps the header bar at 1140px - so the nav wrapped onto a second row under the logo. Widen the bar to the page's container width and tighten the item spacing, so the nav sits on one row to the right of the logo. */ #header .wsmainwp { max-width: 1320px; } #header .wsmenu > .wsmenu-list > li > a.h-link { padding-left: 12px; padding-right: 12px; } /* The template floats the whole nav right, which dumps every spare pixel into one gap between the logo and the first item. Lay the bar out instead: logo, then the menu next to it, with Log in + the CTA pushed to the right edge. */ #header .wsmainwp { display: flex; align-items: center; } #header .desktoplogo { float: none; flex: 0 0 auto; } #header nav.wsmenu { float: none; flex: 1 1 auto; min-width: 0; margin-left: 100px; } #header .wsmenu > .wsmenu-list { display: flex; align-items: center; float: none; width: 100%; } #header .wsmenu > .wsmenu-list > li { float: none; flex: 0 0 auto; } /* Everything from "Log in" onwards sits hard right */ #header .wsmenu > .wsmenu-list > li.reg-fst-link { margin-left: auto; } } /* Small laptops: the bar is viewport-bound here, so trim the logo and the item spacing further to hold the single row all the way down to the 992px drawer breakpoint. */ @media (min-width: 992px) and (max-width: 1199px) { #header .desktoplogo .logo-white img, #header .desktoplogo .logo-black img { max-height: 34px; } #header .wsmenu > .wsmenu-list > li > a.h-link { padding-left: 8px; padding-right: 8px; font-size: 0.9375rem; } } @media (min-width: 992px) { /* The template drops every panel 62px from the nav wrapper, which assumes a 62px-tall bar. This page's header is taller than that, so the panels landed on top of the nav row. Anchor the small dropdowns to their own nav item instead. */ #header .wsmenu > .wsmenu-list > li.has-dropdown { position: relative; } #header .wsmenu > .wsmenu-list > li.has-dropdown > ul.sub-menu { top: 100%; } /* The template pins dropdowns to a 200px box, which wrapped the longer labels ("Compliance updates"). Size them to their content instead and keep every item on one line. */ #header .wsmenu > .wsmenu-list > li.has-dropdown > ul.sub-menu { width: max-content; max-width: none; } #header .wsmenu > .wsmenu-list > li.has-dropdown > ul.sub-menu > li > a { white-space: nowrap; } /* Full-viewport Platform panel, dropping from the bottom of the bar. Taking the positioning context off the nav item and the 1320px wrapper lets it span edge to edge. */ #header .wsmainfull { position: relative; } #header .wsmainwp { position: static; } #header .wsmenu > .wsmenu-list > li.mg_link { position: static; } #header .wsmenu > .wsmenu-list > li.mg_link > .wsmegamenu.mm-platform { top: 100%; left: 0; right: 0; width: 100%; max-width: none; padding: 34px 0 38px; border: none; border-radius: 0; background-color: var(--white); box-shadow: 0 18px 40px rgba(18, 0, 54, 0.10); } /* The panel hangs off the bar, not off the nav item, so the bar's padding left a dead strip between "Platform" and the panel. Crossing it dropped li:hover and shut the menu. This invisible bridge belongs to the panel, so the hover survives the trip down. It is only live while the panel is open, since a hidden parent takes its children with it. */ #header .wsmenu > .wsmenu-list > li.mg_link > .wsmegamenu.mm-platform::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* Hold the panel's columns on the same grid as the page */ #header .wsmegamenu.mm-platform > .container-fluid { max-width: 1320px; margin: 0 auto; padding: 0 15px; } #header .wsmegamenu.mm-platform p.title { margin: 0 0 18px 14px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gray); } #header .wsmegamenu.mm-platform ul.link-list > li > a { line-height: 1.35; padding: 12px 14px; } #header .wsmegamenu.mm-platform ul.link-list > li > a:hover { padding: 12px 14px; } } /* Descriptor line under each module name */ #header .wsmegamenu .mm-desc { display: block; margin-top: 3px; font-family: var(--base-font); font-size: 0.8125rem; font-weight: 400; line-height: 1.4; color: var(--gray); } /* The accordion is tight on mobile - names only */ @media (max-width: 991px) { #header .wsmegamenu .mm-desc { display: none; } } /* Bottom strip of the mega-menu */ #header .wsmegamenu .mm-foot { margin: 14px 13px 0; padding-top: 12px; border-top: 1px solid var(--tra-gray); } #header .wsmegamenu .mm-foot a { font-size: 0.9375rem; font-weight: 600; color: #111; } /* Mega-menu and sub-menu links hover black. style.css only ships this rule for its coloured nav themes, not nav-black. */ .wsmenu > .wsmenu-list.nav-black > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-black > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-black > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-black > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: #111; } /* Footer route to the B2C site */ .foo-individuals a { color: var(--gray); } .foo-individuals a:hover { color: #111; } /* ---- Logos +20% ---- Scoped to this page so the /individual/ pages keep the template's original sizing. Each value is the size that applied before, multiplied by 1.2 and rounded. */ /* Header, desktop: was 42px (set above) */ #header .desktoplogo .logo-white img, #header .desktoplogo .logo-black img { max-height: 50px; } /* Small laptops: was 34px. This has to be restated after the rule above, because that one is unconditional and would otherwise win on source order inside the media query - which is what let the bar overflow between 992px and the container width. */ @media (min-width: 992px) and (max-width: 1199px) { #header .desktoplogo .logo-white img, #header .desktoplogo .logo-black img { max-height: 41px; } #header nav.wsmenu { margin-left: 40px; } } /* Tightest tier, just above the 992px drawer breakpoint: the CTA was still running past the gutter here. */ @media (min-width: 992px) and (max-width: 1099px) { #header .desktoplogo .logo-white img, #header .desktoplogo .logo-black img { max-height: 36px; } #header nav.wsmenu { margin-left: 18px; } } /* Header, mobile burger bar: was 45px */ .wsmobileheader .smllogo img { max-height: 54px; } /* Footer: was 66px, stepping down to 60/56/50 on smaller screens. #page beats the template's class-only media rules. */ #page .footer-logo { max-height: 79px; } @media (max-width: 1199.98px) { #page .footer-logo { max-height: 72px; } } @media (max-width: 991.98px) { #page .footer-logo { max-height: 67px; } } @media (max-width: 320.98px) { #page .footer-logo { max-height: 60px; } } /* ================================================================ SINGLE INSIGHT ================================================================ */ /* The post title is the page h1 here. style.css only sets the spacing on the h2 the template shipped with. */ .single-post-title h1 { margin-bottom: 45px; line-height: 1.15; } /* ---- Taylor's avatar ---- The picture wrapper still lets style.css's ".author-avatar img" rules through, but it is inline by default and left a baseline gap under the circle. */ .author-avatar picture, .author-info-avatar picture { display: block; } .author-avatar img, .author-info-avatar img { object-fit: cover; } /* Byline: "Taylor" then the role, rather than a follow link */ .post-meta .post-author .post-role { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--tra-gray); font-family: var(--base-font); font-size: 0.9375rem; font-weight: 400; color: var(--gray); } @media (max-width: 575.98px) { .post-meta .post-author .post-role { display: block; margin: 8px 0 0; padding-left: 0; border-left: none; } } /* ---- Author card ---- No follow button, so the text can use the full width of the card instead of stopping short of it. */ .author-info-txt .author-role { margin-bottom: 14px; font-size: 0.9375rem; font-weight: 500; color: var(--gray); } .author-info-txt .author-link { display: inline-block; margin-top: 14px; font-weight: 600; color: #111; } .author-info-txt .author-link:hover { text-decoration: underline; } /* ---- CTA button ---- Same black as the homepage hero buttons. Hover flips it to the outline version of that same button. */ .post-cta .post-cta-btn { background-color: #111; border: 1px solid #111; border-radius: 4px; padding: 15px 28px; font-size: 0.9375rem; font-weight: 600; color: #fff !important; } .post-cta .post-cta-btn:hover, .post-cta .post-cta-btn:focus { background-color: transparent; border-color: #111; color: #111 !important; } /* ---- Tables in an insight ---- Bootstrap's .table draws row rules only. A table inside an article gets a thin full grid, so the columns read as columns. */ .single-post-txt .table { margin: 0 0 30px; font-size: 0.9375rem; border-collapse: collapse; border: 1px solid var(--silver); } .single-post-txt .table th, .single-post-txt .table td { padding: 10px 14px; /* style.css strips every cell border with "border: none !important", so the grid has to carry the same weight to be drawn at all. */ border: 1px solid var(--silver) !important; vertical-align: middle; background-color: transparent; } .single-post-txt .table thead th { font-family: var(--main-font); font-weight: 600; color: var(--header-color); background-color: var(--white-smoke); } .single-post-txt .table td { color: var(--text-color); } /* ---- Standing legal note ---- Every insight carries it, so it lives in the template. */ .post-disclaimer { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--silver); } .post-disclaimer p { margin-bottom: 0; font-size: 0.875rem; color: var(--gray); } .post-disclaimer a { color: var(--gray); text-decoration: underline; } .post-disclaimer a:hover { color: #111; } /* ================================================================ HEADING TAGS The outline is h1 title > h2 sections > h3 sub-sections, nothing else. The theme styled by tag, so two things need restating here: the article headings that moved from h5 / h6 to h2 / h3, and the labels that are plain paragraphs now (byline, "Written by", the mega-menu column titles, the footer column titles). Every value is the one style.css / responsive.css gave the old tag, per breakpoint. ================================================================ */ /* Article section headings: were h5.fs-24 and h6.fs-18. The line-height is pinned because responsive.css gives a bare h2 1.3 to 1.35 below 480px (a hero-heading rule); the old h5 kept Bootstrap's 1.2. */ .single-post-txt h2.fs-24 { margin-top: 30px; margin-bottom: 30px; line-height: 1.2; } .single-post-txt h2 span { display: block; } .single-post-txt h3 { margin-bottom: 18px; } @media (min-width: 992px) and (max-width: 1199.95px) { .single-post-txt h2.fs-24 { margin-top: 25px; margin-bottom: 25px; } .single-post-txt h3 { margin-bottom: 12px; } } @media (max-width: 991.98px) { .single-post-txt h2.fs-24 { margin-top: 20px; margin-bottom: 20px; } .single-post-txt h3 { margin-bottom: 12px; } } @media (max-width: 320.98px) { .single-post-txt h2.fs-24 { margin-top: 17px; margin-bottom: 17px; } } /* The heading look, for the labels that are paragraphs now (style.css h1-h6 rule plus Bootstrap's heading reset) */ .post-meta .post-author, .author-info-txt .author-name, .wsmegamenu p.title, .footer .foo-title { font-family: var(--main-font); color: var(--header-color); font-weight: 700; letter-spacing: 0; line-height: 1.2; margin: 0; } /* Byline: was h6.fs-16 (.post-meta h6). Restated per breakpoint because .post-meta p now reaches it and would otherwise win on specificity. */ .post-meta .post-author { font-size: 1rem; font-weight: 600; line-height: 1; margin-bottom: 11px; padding-right: 0; } .post-meta .post-author span { margin-left: 8px; } @media (min-width: 480px) and (max-width: 1199.95px) { .post-meta .post-author { font-size: 1.0625rem; } } @media (max-width: 479.98px) { .post-meta .post-author { font-size: 1.125rem; } } @media (max-width: 320.98px) { .post-meta .post-author { margin-bottom: 8px; } } /* Author card title: was h5.fs-20 (.author-info-txt h5) */ .author-info-txt .author-name { margin-bottom: 8px; } .author-info-txt .author-name span { display: inline-block; font-weight: 500; } /* Mega-menu column titles: were h6.title (.wsmegamenu h6.title). The !important flags are the theme's own: they beat menu.css's mobile .wsmegamenu .title rule, which is more specific. */ .wsmegamenu p.title { font-size: 0.975rem; line-height: 1; margin: 12px 0 12px 13px; } @media (min-width: 992px) and (max-width: 1199.95px) { .wsmegamenu p.title { font-size: 0.975rem; margin-left: 14px; } } @media (min-width: 768px) and (max-width: 991.98px) { .wsmegamenu p.title { color: var(--header-color) !important; font-size: 1.25rem !important; margin: 5px 0 0 14px; } } @media (max-width: 767px) { .wsmegamenu p.title { color: var(--header-color) !important; font-size: 1.1625rem !important; margin: 6px 0 0 10px; } } @media (min-width: 390px) and (max-width: 767.98px) { .wsmegamenu p.title { font-size: 1.175rem !important; margin: 8px 0 0 12px; } } @media (max-width: 389.98px) { .wsmegamenu p.title { font-size: 1.175rem !important; margin: 8px 0 0 10px; } } /* Footer column titles and "Follow Contractam": were h6 (.footer h6) */ .footer .foo-title { font-size: 1.0815rem; line-height: 1; margin-bottom: 25px; } @media (min-width: 992px) and (max-width: 1199.95px) { .footer .foo-title { margin-bottom: 20px; } } @media (min-width: 768px) and (max-width: 991.98px) { .footer .foo-title { font-size: 1.21323rem; margin-bottom: 16px; } } @media (min-width: 480px) and (max-width: 767.98px) { .footer .foo-title { font-size: 1.25rem; } } @media (min-width: 321px) and (max-width: 479.98px) { .footer .foo-title { font-size: 1.1875rem; } } @media (max-width: 320.98px) { .footer .foo-title { font-size: 1.21428rem; margin-bottom: 20px; } } /* Mobile footer accordion: was .footer h6.m-title / h6.d-title. custom.js toggles .expanded on the .m-title element. */ .footer .m-title { display: none; position: relative; } .footer .m-title::after { font-family: Flaticon; font-weight: 300; content: "\f143"; position: absolute; font-size: 0.9rem; top: 5px; right: 5px; } .footer .m-title.expanded::after { content: "\f142"; } @media (max-width: 767px) { .footer .m-title { display: block; margin-bottom: 0 !important; } .footer .d-title { display: none !important; } } @media (min-width: 480px) and (max-width: 767.98px) { .footer .m-title::after { font-size: 1.125rem; top: 3px; } } /* ================================================================ BREADCRUMB Small and grey, above the title. It is above the fold, and this file is render-blocking, so it is styled on the first paint. ================================================================ */ .post-breadcrumb { margin-bottom: 18px; } .post-breadcrumb ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-family: var(--base-font); font-size: 0.875rem; line-height: 1.5; color: var(--gray); } .post-breadcrumb li + li::before { content: "/"; margin: 0 8px; color: var(--silver); } .post-breadcrumb a { color: var(--gray); } .post-breadcrumb a:hover { color: #111; text-decoration: underline; } /* ---- Mobile nav toggle ---- A