/** * site.css — the small amount of CSS that belongs to this static build rather * than to the original theme. Loaded last so it wins. * * Keep theme fixes out of the other stylesheets: those are copied from the * WordPress theme and are easier to re-sync if they stay untouched. */ /* The old page printed two inline rules from the WP customiser. */ section.blockchain.white-section { background: #f9f9f9; } .footer_section { margin-top: -1em; } /* Success panel. The theme only ever toggled this with inline jQuery, so the visible state needs a rule of its own here. */ .success_popup { display: none; } .success_popup.show { display: block; } /* Case-study and whitepaper cards fall back to a flat tint when an entry has no image yet, instead of showing a broken background URL. */ .focus_img, .white_paper_menu .image_box, .news-image { background-color: #1b1e23; background-position: center; background-size: cover; background-repeat: no-repeat; } /* Keyboard focus. The theme styles hover only, and several controls are divs. */ #contact_btn:focus-visible, .cert_flip:focus-visible, .banner_arrow:focus-visible, .menu_links_wrap a:focus-visible, .page_links_div a:focus-visible { outline: 2px solid #e8112d; outline-offset: 3px; } /* Case study detail pages. main.css locks body scrolling for the full-page templates; the live case study pages ship an inline `body{overflow:unset}` to undo it. Same rule, kept here rather than inlined on all 38 pages. */ body.cs_page:not(.cs_page--index) { overflow: unset !important; } /* The MP4s that replaced the animated GIFs sit where used to, and the rules around them all name img: max-width from the theme, and the 2px frame WordPress draws on gallery images. Without these the videos rendered at their full 1700px, overflowing the column, and lost the frame their neighbours have. */ .bl_content video { max-width: 100%; height: auto; } .bl_content .gallery video { border: 2px solid #cfcfcf; } /* Page loader. The WordPress theme printed these rules inline in every page's , so the rebuild's shared preloader partial had no styling at all: the overlay rendered as an unstyled in-flow block — a white band pushing the page down — until the script hid it. Fixed rather than the theme's absolute, so it still covers the viewport if the browser restores a scroll position. */ .preloader_wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 2000; text-align: center; } .preloader_wrap .img { width: 150px; padding: 0 30px; position: absolute; top: 50%; left: 50%; margin-left: -75px; margin-top: -40px; box-sizing: border-box; } .preloader_wrap img { width: 100%; } /* --------------------------------------------------------------------------- Drawer menu. The theme shipped the markup for sub-menus and the CSS to animate them, but also `display: none` on the sub-list with nothing to undo it, so a sub-menu could never appear. These rules make SERVICES and CASE STUDIES open, give the page links a heading, and hang each link's icon off the markup rather than off :nth-child. --------------------------------------------------------------------------- */ /* A column, so an opening sub-menu takes its room from the panel below rather than shoving it off the bottom of the drawer. If both open at once - which takes a keyboard, since a mouse can only hover one - the drawer scrolls rather than clipping the links. The drawer's own padding is named here because the links panel has to cancel it to stay full-bleed. Three rules set it and all three are mirrored below rather than guessed: main.css `20px 30px`, main.css `20px` under 1100px, and footer.css `1.28vw 1.92vw` between 1452px and 4000px. */ .menu_links_wrap { --drawer-pad-x: 30px; --drawer-pad-y: 20px; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; } @media only screen and (max-width: 1100px) { .menu_links_wrap { --drawer-pad-x: 20px; } } @media only screen and (min-width: 1452px) and (max-width: 4000px) { .menu_links_wrap { --drawer-pad-x: 1.92vw; --drawer-pad-y: 1.28vw; } } /* The scroll container reserves a 15px classic scrollbar even when nothing overflows, which ate the same 15px off the links panel's right edge. Hidden, as the theme already does for .blog_menu; the wheel and keyboard still scroll it. */ .menu_links_wrap { scrollbar-width: none; } .menu_links_wrap::-webkit-scrollbar { display: none; } .menu_links_wrap > ul { flex: 0 0 auto; } /* Back into the flow, and still full-bleed: the negative margins cancel the drawer's padding exactly, so the panel's own 8% inset stays where the theme put it. Grows to fill the drawer when the menu is short, never shrinks below its own links. */ .page_links { position: relative; left: auto; flex: 1 0 auto; width: auto; height: auto; min-height: 0; margin: 12px calc(-1 * var(--drawer-pad-x)) calc(-1 * var(--drawer-pad-y)); } /* Sub-menus ------------------------------------------------------------- */ .menu_links_wrap ul li ul.menu_sub { display: block; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.45s ease, opacity 0.3s ease; } .menu_links_wrap ul li:hover > ul.menu_sub, .menu_links_wrap ul li:focus-within > ul.menu_sub { max-height: 260px; opacity: 1; } /* The theme indents sub-items by 30px and draws a rule on hover from the far left; at this indent the rule sat under the label. */ .menu_open .menu_links_wrap ul li ul.menu_sub li { padding-left: 22px; } .menu_links_wrap ul li ul.menu_sub li:after { left: 0; top: 13px; } .menu_links_wrap ul li ul.menu_sub li a { font-size: 10px; letter-spacing: 0.2px; transition: color 0.25s ease, transform 0.25s ease; } .menu_links_wrap ul li ul.menu_sub li:hover a, .menu_links_wrap ul li ul.menu_sub li a:focus-visible { color: #121315; transform: translateX(3px); } /* A chevron on the two items that open, turning as they do. */ .menu_links_wrap ul > li.has_children > a { position: relative; padding-right: 24px; } .menu_links_wrap ul > li.has_children > a:after { content: ''; position: absolute; right: 10px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); opacity: 0.5; transition: transform 0.35s ease, opacity 0.35s ease; } .menu_links_wrap ul > li.has_children:hover > a:after, .menu_links_wrap ul > li.has_children:focus-within > a:after { transform: rotate(-135deg); margin-top: -1px; opacity: 1; } /* Resources and Updates ------------------------------------------------- */ .page_links_head { margin: 0 0 10px; padding: 0 8%; font-family: montserrat_light, sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #8b8b8b; } .page_links_div a { padding: 3px 0; border-radius: 4px; transition: background-color 0.25s ease; } .page_links_div a:hover, .page_links_div a:focus-visible { background-color: #f8f8f8; } /* The icon is inline SVG from nav.json now, so the theme's :nth-child background images have nothing left to paint. */ .page_links div .page_link_inner { background-image: none; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; color: #ef0d33; transition: background-color 0.25s ease; } .page_links_div a:hover .page_link_inner { background-color: #fff; } .page_link_inner svg { width: 17px; height: 17px; } .page_link_p { padding-top: 0; line-height: 1.3; } /* Honeypot in the enquiry form. Off-screen rather than display:none, because some bots skip fields that are not rendered at all. */ .hp_field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }