/* QZ Infomatics — rules written for the WordPress build. Everything in base/header/footer/float/components is generated from the static demo by scratchpad/split_theme_css.py and is overwritten on every regeneration. Anything hand-written belongs here, where the generator cannot reach it. Loaded last, so it also wins any tie against the generated files. */ /* ---- Elementor wrappers ---- A widget arrives inside .e-con > .elementor-widget > .elementor-widget-container. Our sections are full-bleed and own their own .wrap, so those three boxes must contribute no width, padding, margin or flex behaviour of their own. */ .elementor .e-con, .elementor .e-con-inner{--content-width:100%;--padding-top:0;--padding-right:0;--padding-bottom:0;--padding-left:0;--gap:0px;--row-gap:0px;--column-gap:0px;max-width:100%;width:100%} .qz-widget{width:100%;max-width:100%;margin:0;padding:0} .qz-widget>.elementor-widget-container{height:auto;margin:0;padding:0} .qz-widget>.elementor-widget-container>section{width:100%} /* ------------------------------------------------------------------ * * Source order the split lost. * * The demo is one stylesheet; the theme is six. Rules of equal * specificity are decided by source order, and splitting them across * files reorders them. Both of these lost that way — the hero image * came out a third taller than the design, and mobile sections 10px * tighter. Re-asserting the demo's winner here, last, restores it. * * `node scratchpad/cascadeCheck.js ` resolves both * stylesheets against the real DOM and proves there are no others. * ------------------------------------------------------------------ */ .imgph{aspect-ratio:16/9;margin:0 0 20px} /* and the rules the demo places after it, in the same order, so re-asserting the base above does not steal their override back */ .pc__img{margin:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:var(--white)} .cap__img{margin:0;width:100%;aspect-ratio:4/3;border-radius:var(--r)} .idd__img{margin:0;width:100%;aspect-ratio:4/3;border-radius:var(--r);background:rgba(23,132,126,.07);box-shadow:0 30px 66px -44px rgba(14,27,30,.4)} /* A band showing a logo sits it on white with a hairline; a band showing a photograph tints the box behind it. Both pages wrote `.idd__img`, so the difference is scoped by the modifier the markup already carries. */ .idd__img.has-logo{background:var(--white);border:1px solid var(--line);box-shadow:none} @media (max-width:1080px){ .idd__img{aspect-ratio:16/9} } @media (max-width:640px){ .sect{padding:66px 0} .hero__img{aspect-ratio:3/2} .logoph{height:auto} } /* Two sections of the same tone that read as one block: the lower one drops its top padding so the gap between them is a single rhythm, not a double one. After the block above, which re-asserts .sect at the same specificity. */ .sect--flush{padding-top:0} /* ------------------------------------------------------------------ * * Cross-page class collisions. * * Merging 26 page stylesheets brings some classes in twice with two * different intents, and source order then decides silently. Scope them * by section tone instead, which is the rule the design already follows: * tinted cards on a white section, white cards on a tinted one. * ------------------------------------------------------------------ */ /* The careers page tints its role facts; the legal pages set the same chip on white. Scoped by the section each one actually appears in. */ .jobs .job__m span{background:var(--teal-soft)} .sect--wash .comp__i{background:var(--grad-card)} .sect--grad .comp__i{background:var(--white)} /* ------------------------------------------------------------------ * * Cards that do not follow the section rule. * * The four hub pages invert it: tinted accreditation cards on a tinted * section, white onward-link cards on a white one. Rather than let the * merged stylesheet pick a winner, the widget says which it wants. * ------------------------------------------------------------------ */ .comp.cards--white .comp__i, .rel.cards--white a{background:var(--white)} .comp.cards--tinted .comp__i, .rel.cards--tinted a{background:var(--grad-card)} /* Six pages set the article heading at 2.85rem and the calculator alone at 2.7rem; the merge kept the calculator's. Restore the common one and let that page opt down. */ .hero__kw--art{font-size:clamp(1.85rem,4vw,2.85rem)} .hero__kw--art.hero__kw--sm{font-size:clamp(1.85rem,4vw,2.7rem)} /* The case study pages set their chips as bordered pills; the author pages leave the same markup as plain links. Merging the two stylesheets applied the pill everywhere, so the widget now says which it wants. */ .chips a{background:none;border:0;color:inherit;padding:0;border-radius:0;font-size:inherit;font-weight:inherit} .chips--pill a{background:var(--white);border:1px solid var(--line);color:var(--ink);padding:7px 15px; border-radius:100px;font-size:.79rem;font-weight:600} /* The key-facts list inside an article sets its own type; the merge left the generic .prose dt/dd winning over it. */ .prose dl.kf,.kf{gap:1px;margin:0 0 28px} .kf dt{font-size:.64rem;color:var(--muted)} .kf dd{font-size:.9rem;color:var(--ink)} /* The author bio paragraph is also the page's answer block, and the design lets the answer's size win. The merge had reversed them. */ .ai-summary{font-size:1.06rem} /* The careers page tightens the job actions on a phone. A second copy of .job__a from another page's sheet lands after that media query in the merge and takes the gap back to the desktop value. */ @media (max-width:640px){.job__a{gap:10px}} /* The jump rail's column count and minimum stop width are per page, so the widget passes them as custom properties. Written as a finished grid-template-columns inline they beat the 1080px media query, and the rail squashed on a phone instead of scrolling. */ .isel__in{grid-template-columns:repeat(var(--isel-cols,4),minmax(0,1fr))} @media (max-width:1080px){ .isel__in{grid-template-columns:repeat(var(--isel-cols,4),minmax(var(--isel-min,170px),1fr))} } /* The jump rail is sticky in the demo because