/* ========================================================================== Header and footer -- the shared chrome, on every page. Both live in the markup of every page and are styled by Global.css, which 115+ pages load. Everything here is scoped to `.qfc-page` -- a class on THIS page's and nowhere else -- so the homepage can be reviewed before any of it reaches the rest of the site. Rolling it out later means dropping the `.qfc-page ` prefix and moving the block into Global.css AND Global.scss. ========================================================================== */ .qfc-page { --qfc-surface: #121216; --qfc-surface-2: #0D0D10; --qfc-line: rgba(255, 255, 255, 0.09); --qfc-text: #F5F5F7; --qfc-dim: #A9A9B4; --qfc-mute: #74747F; --qfc-pink: #EA396E; --qfc-fill: #D73465; --qfc-soft: #F2A0B8; --qfc-grad: linear-gradient(90deg, #FBDA39 0%, #F89833 28%, #EA396E 59.5%, #8B3A8C 90%); --qfc-gutter: clamp(20px, 4.4vw, 64px); --qfc-max: 1440px; } /* --- header ------------------------------------------------------------- */ /* Only the bar's own furniture is cleared; the mega-menu panels that also live inside .navbar_header keep the opaque backgrounds they already have. */ .qfc-page .navbar_header > nav, .qfc-page .navbar_header > nav .logo, .qfc-page .navbar_header > nav .logo a, .qfc-page .navbar_header > nav > ul, .qfc-page .navbar_header > nav > ul > li, .qfc-page .navbar_header > nav > ul > li > a { background-color: transparent; } .qfc-page .navbar_header { background-color: transparent; border-bottom: 1px solid var(--qfc-line); } .qfc-page .navbar_header > nav, .qfc-page .content { background-color: rgba(8, 8, 10, 0.93); background-image: none; -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); } .qfc-page .contentDiv { position: static; background-color: transparent; } /* The bar is a single row at every width. Global.css leaves the links wrapping and the type fixed at 18px, so "Who we are" and "What we do" break over three lines and the bar's height swings between 78px and 114px as the window changes. Hold the row on one line and let the type scale instead. */ .qfc-page .navbar_header > nav { height: auto; min-height: 74px; padding-block: 10px; gap: clamp(12px, 1.6vw, 30px); } .qfc-page .navbar_header > nav > ul { flex: 0 0 auto; flex-wrap: nowrap; gap: clamp(10px, 1.5vw, 26px); } .qfc-page .navbar_header > nav > ul > li { flex: 0 0 auto; margin: 0; } .qfc-page .navbar_header > nav > ul > li > a { font-weight: 700; font-size: clamp(13.5px, 1.08vw, 17px); white-space: nowrap; transition: color 0.2s ease, background-color 0.2s ease; } /* the wordmark scales with the bar rather than dictating its height */ .qfc-page .navbar_header > nav .logo img { width: auto; max-width: clamp(130px, 12vw, 190px); height: auto; } /* Every nav link carries an inline style="color: white", and an inline declaration outranks any selector -- !important is the only way to reach these. Fixing the markup instead would mean touching 115 pages. */ .qfc-page .navbar_header > nav > ul > li:hover > a, .qfc-page .navbar_header > nav > ul > li > a:hover { color: var(--qfc-soft) !important; } /* Current page. .qfc-home is on the homepage only, so this marks Home there and nowhere else -- every other page carries .qfc-page alone. */ .qfc-home .navbar_header > nav > ul > li:first-child > a { position: relative; } .qfc-home .navbar_header > nav > ul > li:first-child > a::after { content: ""; position: absolute; right: 0; bottom: -7px; left: 0; height: 2px; border-radius: 2px; background-image: var(--qfc-grad); transition: opacity 0.2s ease; } /* While a menu is open that menu is what the reader is on, so the marker under Home would be a second answer to the same question. */ .qfc-home .navbar_header:has(.content[style*="block"]) > nav > ul > li:first-child > a::after { opacity: 0; } /* Contact reads as the one action in the bar. Global.css carries `nav * { background: transparent !important }`, which outranks any selector here, so the fill has to be !important as well. */ .qfc-page .navbar_header > nav > ul > li:last-child > a { padding: 9px 20px; border-radius: 999px; background-color: var(--qfc-fill) !important; } .qfc-page .navbar_header > nav > ul > li:last-child > a:hover { background-color: #C02D59 !important; color: #fff !important; } /* The floating contact button sits on every page beside the nav's own Contact pill, but paints itself a brighter magenta gradient. Two different pinks for the same action reads as a mistake -- match the pill. */ .qfc-page #contact_lead_btn_primary { background-image: none; background-color: var(--qfc-fill); border-radius: 999px; color: #FFFFFF; } .qfc-page #contact_lead_btn_primary:hover, .qfc-page #contact_lead_btn_primary:focus { background-image: none; background-color: #C02D59; color: #FFFFFF; } /* --- mega menu ---------------------------------------------------------- The dropdown panel is flat black with grey rules and a forced 360px floor, so it reads as a separate window rather than part of the header, and sits two-thirds empty. Give it the header's own surface, align it to the page gutter, and let its height follow its content. ------------------------------------------------------------------------ */ .qfc-page .content { position: relative; z-index: 9998; border: 0; box-shadow: none; } .qfc-page .contentDiv { border: 0; max-width: none; min-height: 0; margin-inline: auto; padding: clamp(20px, 2.4vw, 32px) var(--qfc-gutter) clamp(24px, 2.8vw, 38px); gap: clamp(28px, 4vw, 64px); border-bottom: 1px solid var(--qfc-line); } .qfc-page .contentDiv > * { position: relative; } .qfc-page .contentDiv ul, .qfc-page .contentDiv li, .qfc-page .contentDiv p, .qfc-page .contentDiv h1, .qfc-page .contentDiv h2, .qfc-page .contentDiv h3, .qfc-page .contentDiv h4 { background-color: transparent; } .qfc-page .contentDiv .contentDiv_menu ul { margin: 0; padding-left: 0; } .qfc-page .contentDiv .contentDiv_menu { flex: 0 0 auto; min-width: 232px; padding: 0; background-color: transparent; } /* --- the left rail --- */ .qfc-page .contentDiv .contentDiv_menu .contentDiv_menu_li { position: relative; line-height: 1.4; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 4px; border: 0; border-bottom: 1px solid var(--qfc-line); border-radius: 0; background-color: transparent; font-size: 19px; font-weight: 400; letter-spacing: -0.01em; color: var(--qfc-dim); cursor: pointer; transition: color 0.2s ease, padding-left 0.25s ease; } /* the brand rule that slides in under the entry you are on */ .qfc-page .contentDiv .contentDiv_menu .contentDiv_menu_li::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background-image: none; background-color: rgba(255, 255, 255, 0.9); transition: width 0.3s ease; } .qfc-page .contentDiv .contentDiv_menu .contentDiv_menu_li:hover { padding-left: 10px; color: var(--qfc-text); } .qfc-page .contentDiv .contentDiv_menu .contentDiv_menu_li:hover::after { width: 100%; } .qfc-page .contentDiv .contentDiv_menu .contentDiv_menu_li .iicons { font-size: 11px; color: var(--qfc-mute); background-color: transparent; } .qfc-page .contentDiv .contentDiv_menu .contentDiv_menu_li:hover .iicons { color: var(--qfc-pink); } .qfc-page .contentDiv .contentDiv_menu .contentDiv_menu_li a { color: inherit; background-color: transparent; } /* --- the right pane --- */ .qfc-page .contentDiv .contentDiv_menu_submenu { flex: 1 1 auto; min-width: 0; padding: 0; border-left: 1px solid var(--qfc-line); padding-left: clamp(24px, 3vw, 46px); background-color: transparent; } .qfc-page .contentDiv .contentDiv_menu_submenu .contentDiv_menu_submenu_content { background-color: transparent; } .qfc-page .contentDiv .contentDiv_menu_submenu .contentDiv_menu_submenu_content p { background-color: transparent; } .qfc-page .contentDiv .contentDiv_menu_submenu .contentDiv_menu_submenu_content { animation: qfc-pane-in 0.32s ease both; } @keyframes qfc-pane-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .qfc-page .contentDiv .contentDiv_menu_submenu .contentDiv_menu_submenu_content { animation: none; } } .qfc-page .contentDiv .contentDiv_menu_submenu .contentDiv_menu_submenu_content .paraText { max-width: 46ch; margin-bottom: 14px; font-size: 32px; font-weight: 400; line-height: 1.2; letter-spacing: -0.022em; color: var(--qfc-text); } .qfc-page .contentDiv .contentDiv_menu_submenu .contentDiv_menu_submenu_content p:not(.paraText) { max-width: 86ch; font-size: 15px; font-weight: 300; line-height: 1.72; color: var(--qfc-dim); } /* --- mega menu: the link grid ------------------------------------------- Each entry was a bare row with a full-width white rule under it, laid out in CSS columns so the reading order ran down rather than across. Make them tiles in a real grid that respond to the pointer. ------------------------------------------------------------------------ */ .qfc-page .contentDiv .contentDiv_menu_submenu .contentDiv_menu_submenu_content .two-column-list { display: grid; columns: auto; -webkit-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; width: 100%; margin: 4px 0 0; padding-left: 0; } @media (max-width: 1100px) { .qfc-page .contentDiv .contentDiv_menu_submenu .contentDiv_menu_submenu_content .two-column-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .qfc-page .contentDiv .contentDiv_menu_submenu .contentDiv_menu_submenu_content .two-column-list li { position: relative; width: auto; margin-bottom: 0; padding: 0; border: 0; border-bottom: 1px solid var(--qfc-line); border-radius: 0; background-color: transparent; font-size: 17.5px; font-weight: 400; letter-spacing: 0; } .qfc-page .contentDiv .contentDiv_menu_submenu .contentDiv_menu_submenu_content .two-column-list li::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; border-radius: 2px; background-color: rgba(255, 255, 255, 0.9); transition: width 0.3s ease; } .qfc-page .contentDiv .contentDiv_menu_submenu .contentDiv_menu_submenu_content .two-column-list li:hover::after { width: 100%; } .qfc-page .contentDiv .contentDiv_menu_submenu .contentDiv_menu_submenu_content .two-column-list li a { display: block; padding: 14px 4px; font-size: 17.5px; font-weight: 400; line-height: 1.4; background-color: transparent; color: var(--qfc-dim) !important; transition: color 0.2s ease, padding-left 0.25s ease; } .qfc-page .contentDiv .contentDiv_menu_submenu .contentDiv_menu_submenu_content .two-column-list li:hover a { padding-left: 10px; color: var(--qfc-text) !important; } /* the pane's own heading, above the grid */ .qfc-page .contentDiv .contentDiv_menu_submenu .contentDiv_menu_submenu_content h3, .qfc-page .contentDiv .contentDiv_menu_submenu .contentDiv_menu_submenu_content h4 { margin-bottom: 12px; font-size: 25px; font-weight: 500; letter-spacing: -0.015em; color: var(--qfc-text); } /* --- mobile header ------------------------------------------------------ The stock menu draws 25px links on flat black with hairline rules -- it reads as a wall of text and swamps a phone screen. Smaller type, a panel that matches the rest of the theme, touchable rows, and Contact pulled out as the one action. ------------------------------------------------------------------------ */ .qfc-page .nav_bar_mobile { background-color: rgba(8, 8, 10, 0.88); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--qfc-line); } .qfc-page .mobile-nav { display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 8px 18px; } .qfc-page .logo_mbl img { width: auto; max-width: 148px; height: auto; } /* a real touch target rather than a bare glyph */ .qfc-page .mbl_nav_btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--qfc-line); border-radius: 12px; background-color: rgba(255, 255, 255, 0.05); } .qfc-page .mbl_nav_btn i { font-size: 17px; color: var(--qfc-text); } /* --- the panel --- */ /* A drawer from the thumb side rather than a full-screen takeover sliding in from the left: the page stays visible behind a scrim, so it is obvious the menu is a layer you can dismiss rather than a new screen. */ .qfc-page .nav_bar_mobile .nav_container_mbl { top: 72px; left: 14px; right: auto; z-index: 1002; width: min(88vw, 328px); min-height: 0; height: auto; max-height: calc(100dvh - 92px); padding: 15px 12px 16px; overflow-y: auto; transform: translateX(calc(-100% - 22px)); border: 1px solid var(--qfc-line); border-radius: 18px; background-color: rgba(16, 16, 20, 0.97); -webkit-backdrop-filter: saturate(150%) blur(18px); backdrop-filter: saturate(150%) blur(18px); box-shadow: 0 26px 70px rgba(0, 0, 0, 0.66); overscroll-behavior: contain; } .qfc-page .nav_bar_mobile .nav_container_mbl.toggle { transform: translateX(0); } /* the scrim -- nav_anim.js already puts an id on while the menu is open, so the state is there to hang it off */ .qfc-page#doc_body::after { content: ""; position: fixed; z-index: 1001; inset: 0; background-color: rgba(4, 4, 6, 0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); pointer-events: none; } /* a quiet label so the drawer reads as a menu, not a stray list */ .qfc-page .nav_container_mbl::before { content: "Menu"; display: block; margin: 0 12px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--qfc-mute); } .qfc-page .nav_container_mbl > li { padding: 0; margin-bottom: 4px; border: 0; background-color: transparent; box-shadow: none; } .qfc-page .nav_container_mbl > li > a { position: relative; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 18px; border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--qfc-text) !important; background-color: rgba(255, 255, 255, 0.035); transition: background-color 0.2s ease; } /* the marker that runs down the side of the entry you are on */ .qfc-page .nav_container_mbl > li > a::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: 7px; width: 3px; border-radius: 3px; background-image: var(--qfc-grad); opacity: 0; transition: opacity 0.2s ease; } .qfc-page .nav_container_mbl > li > a:active, .qfc-page .nav_container_mbl > li > a:hover { background-color: rgba(255, 255, 255, 0.075); color: var(--qfc-soft) !important; } .qfc-page .nav_container_mbl > li > a:active::before, .qfc-page .nav_container_mbl > li > a:hover::before { opacity: 1; } .qfc-page .nav_container_mbl > li > a i { flex: 0 0 auto; background-color: transparent; font-size: 13px; color: var(--qfc-mute); transition: transform 0.25s ease; } /* Contact reads as the one action in the sheet, in the same flat pink as the desktop nav's pill -- a compact button, not a full-width gradient slab. */ .qfc-page .nav_container_mbl > li:last-child { display: block; margin-top: 12px; } .qfc-page .nav_container_mbl > li:last-child > a { display: flex; width: 100%; justify-content: center; padding: 10px 26px; border-radius: 999px; background-color: var(--qfc-fill); background-image: none; font-weight: 700; color: #FFFFFF !important; } .qfc-page .nav_container_mbl > li:last-child > a::before { display: none; } .qfc-page .nav_container_mbl > li:last-child > a:active, .qfc-page .nav_container_mbl > li:last-child > a:hover { background-color: #C02D59; color: #FFFFFF !important; } /* --- submenus inside the panel --- */ .qfc-page .nav_container_mbl ul { padding-left: 12px; margin-bottom: 6px; } .qfc-page .nav_container_mbl ul li a { display: block; border: 0; background-color: transparent; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--qfc-dim) !important; } .qfc-page .nav_container_mbl ul li a:active, .qfc-page .nav_container_mbl ul li a:hover { background-color: rgba(255, 255, 255, 0.04); color: var(--qfc-text) !important; } /* --- footer ------------------------------------------------------------- */ /* Global.css paints this with a grey gradient, so background-image has to be cleared before a flat colour will show. */ .qfc-page .footer { position: relative; padding: 0 !important; padding-bottom: 0 !important; background-image: none; background-color: var(--qfc-surface-2); border-top: 1px solid var(--qfc-line); } .qfc-page .footer::before { content: ""; position: absolute; top: 0; right: 0; left: 0; z-index: 3; height: 2px; background-image: var(--qfc-grad); } /* Line the footer up with the page above it: same max width, same gutter. */ .qfc-page .footer .footer_brand_logo, .qfc-page .footer .footer_container { width: 100%; max-width: var(--qfc-max); margin-inline: auto; padding-inline: var(--qfc-gutter); background-color: transparent; } .qfc-page .footer .footer_brand_logo { padding-block: clamp(30px, 3.4vw, 46px) clamp(18px, 2vw, 26px); } .qfc-page .footer .footer_brand_logo img { width: auto; max-width: 190px; height: auto; } .qfc-page .footer .footer_container .f_row .footer_col { background-color: transparent; } .qfc-page .footer .footer_container .f_row .footer_col h3 { margin-bottom: 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--qfc-mute); } .qfc-page .footer .footer_container .f_row .footer_col a { display: block; padding-block: 5px; font-size: 13.5px; line-height: 1.5; color: var(--qfc-dim); text-decoration: none; transition: color 0.2s ease; } .qfc-page .footer .footer_container .f_row .footer_col a:hover { color: var(--qfc-soft); } .qfc-page .footer .hz_line, .qfc-page .footer .hz_line_footer { border-color: var(--qfc-line); background-color: var(--qfc-line); opacity: 1; } /* Global.css reaches these through .footer .footer_container .footer_copy-right .row_qf .f-bottom .scoial_footer ... which scores (0,7,1); the overrides mirror that chain so the extra .qfc-page class is what decides. */ .qfc-page .footer .footer_container .footer_copy-right { padding-block: clamp(14px, 1.6vw, 20px) clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--qfc-line); margin-top: clamp(18px, 2.2vw, 28px); } .qfc-page .footer .footer_container .footer_copy-right .row_qf .f-bottom .scoial_footer { padding-block: 14px 10px; } .qfc-page .footer .footer_container .footer_copy-right .row_qf .f-bottom .scoial_footer a img { height: 28px; filter: grayscale(1); opacity: 0.6; transition: opacity 0.2s ease, filter 0.2s ease; } .qfc-page .footer .footer_container .footer_copy-right .row_qf .f-bottom .scoial_footer a img:hover { filter: grayscale(0); opacity: 1; } .qfc-page .footer .footer_container .footer_copy-right .row_qf .f-bottom .info_sec a { color: var(--qfc-dim); transition: color 0.2s ease; } .qfc-page .footer .footer_container .footer_copy-right .row_qf .f-bottom .info_sec a svg { fill: var(--qfc-pink); } .qfc-page .footer .footer_container .footer_copy-right .row_qf .f-bottom .info_sec a span { font-size: 13.5px; color: inherit; } .qfc-page .footer .footer_container .footer_copy-right .row_qf .f-bottom .info_sec a:hover { color: var(--qfc-text); } .qfc-page .footer .footer_container .di-3 .scoial_footer p, .qfc-page .footer .footer_container .di-3 .scoial_footer span, .qfc-page .footer .footer_container .di-3 p, .qfc-page .footer .footer_container .di-3 span { font-size: 12.5px; color: var(--qfc-mute); } /* --- scroll reveal ------------------------------------------------------ The hidden state only exists once the script at the foot of the homepage has added .qfc-anim to , and it only does that when it has an IntersectionObserver to un-hide things with. No script, no observer, or reduced motion: the class is never added and everything renders normally. The movement uses `translate`, not `transform`, so it cannot collide with the hover lifts on the cards. ------------------------------------------------------------------------ */ .qfc-anim .qfc-reveal { opacity: 0; translate: 0 18px; transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--d, 0s); } .qfc-anim .qfc-reveal.is-in { opacity: 1; translate: none; } @media (prefers-reduced-motion: reduce) { .qfc-anim .qfc-reveal { opacity: 1; translate: none; transition: none; } }