/* The ONLY stylesheet this migration authors. Everything else under * site/public/styles/ is Duda's own cascade, ported byte-for-byte. * * Three rule groups, all of them serving markup that build-pages.py emits and * that has no counterpart on live: * * .mg-only-d / -t / -m per-device widget variants. Duda builds * .dmPhotoGallery client-side and it genuinely differs * between the three documents on / (3/2/1 columns, * -300h vs -400w crop) and /outreach-for-schools * (3/3/4 columns). We ship one body, so all three * variants are in the document and the two that are not * this band's are hidden. Without these rules all three * render at once, stacked. * * .mg-hp the honeypot that replaces the reCAPTCHA we remove. * Off-screen rather than display:none, because bots skip * obviously-hidden fields; out of flow so it costs no * layout for a pixel diff to measure. The same * declarations are ALSO inlined on the input itself, so * a missing or mis-ordered sheet cannot turn it into a * visible empty text box at the top of all five forms. * * The media queries match __mg's band split exactly (m <=767, t 768-1024, * d >=1025); a mismatch here would show two variants at one width. * * Loaded LAST in , after the 140 ported sheets, so !important is not needed * for .mg-hp and is used for the widget gating only because Duda's own * `display:block`/`display:flex` widget rules are themselves specific. */ /* SPECIFICITY IS LOAD-BEARING HERE, AND A BARE CLASS IS NOT ENOUGH. * Duda's own per-element rule for the widget we are gating is * * #dm .dmBody div.u_1729911806 { width: calc(100% + 0px) !important; * display: block !important } * * — an id + two classes + a type. `.mg-only-t{display:none!important}` is a * single class, so with !important on BOTH sides specificity decides and Duda * wins: measured at 1440, all three gallery variants computed display:block and * rendered stacked, making / 2600px too tall (48.8% at 1440, 50.9% at 768). * Being last in the cascade does not help — order only breaks a TIE. * * The selectors below repeat the class (`.mg-only-t.mg-only-t`) to land strictly * above that rule rather than merely tying with it, so this keeps working if the * sheet order ever changes. */ @media (max-width: 767px) { #dm .dmBody div.mg-only-d.mg-only-d, #dm .dmBody div.mg-only-t.mg-only-t, .mg-only-d, .mg-only-t { display: none !important; } } @media (min-width: 768px) and (max-width: 1024px) { #dm .dmBody div.mg-only-d.mg-only-d, #dm .dmBody div.mg-only-m.mg-only-m, .mg-only-d, .mg-only-m { display: none !important; } } @media (min-width: 1025px) { #dm .dmBody div.mg-only-t.mg-only-t, #dm .dmBody div.mg-only-m.mg-only-m, .mg-only-t, .mg-only-m { display: none !important; } } .mg-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }