/* ============================================================ Edumarshal responsive layer The desktop design is authored with inline styles; these rules adapt it for every smaller device class. Breakpoints: <=1024 small laptops / large tablets : 4- and 3-col grids -> 2 <=900 tablets and below : single column, rows stack <=600 phones : type scale, tighter padding <=420 small phones : timelines / collages unstack ============================================================ */ /* scroll-reveal stagger (applied by JS via classes, never inline styles) */ .rvl-d0{transition-delay:0ms}.rvl-d1{transition-delay:85ms}.rvl-d2{transition-delay:170ms} .rvl-d3{transition-delay:255ms}.rvl-d4{transition-delay:340ms}.rvl-d5{transition-delay:425ms} img{max-width:100%;height:auto} /* ---------- <=1024: small laptops ---------- */ @media (max-width:1024px){ [style*="grid-template-columns:repeat(3"]{grid-template-columns:repeat(2,1fr) !important} [style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr) !important} } /* ---------- <=900: tablets and below ---------- */ @media (max-width:900px){ /* every layout grid becomes one column (mockup interiors exempted below) */ [style*="grid-template-columns"]{grid-template-columns:1fr !important} [style*="grid-column"]{grid-column:auto !important} [style*="grid-row"]{grid-row:auto !important} /* flex rows may wrap; children must be allowed to shrink */ /* only ROW-direction flex may wrap. Wrapping a column-direction flex creates extra columns (e.g. chart bar labels jumping beside their bar). */ [style*="display:flex"]:not([style*="flex-direction:column"]){flex-wrap:wrap} [style*="display:inline-flex"]{flex-wrap:wrap;max-width:100%} [style*="display:flex"] > *,[style*="display:grid"] > *{min-width:0} [style*="min-width:260px"]{min-width:0 !important} /* icon + text rows must stay side by side */ [style*="display:flex"][style*="align-items:flex-start"]{flex-wrap:nowrap !important} /* nothing may exceed its column */ [style*="width:"]{max-width:100% !important} /* section gutters: 48px -> 20px (covers "64px 48px", "0 48px", "7px 48px", ...) */ [style*="px 48px"],[style*="padding:0 48px"]{padding-left:20px !important;padding-right:20px !important} [style*="padding:52px 52px"],[style*="padding:52px;display:grid"]{padding:30px 22px !important} /* full-width promo card: CTA pill drops under the text instead of clipping */ [style*="justify-content:space-between"][style*="grid-column"]{flex-direction:column !important;align-items:flex-start !important} /* fixed-height CTA pills wrap their label */ span[style*="height:44px"][style*="border-radius:99px"]{height:auto !important;min-height:44px;padding-top:10px !important;padding-bottom:10px !important} /* "how it works" flow rows: stack, connector arrows rotate */ [style*="display:flex;align-items:stretch;gap:14px"]{flex-direction:column !important} [style*="display:flex;align-items:stretch;gap:14px"] > div[style*="flex-shrink:0"]{align-self:center;justify-content:center;transform:rotate(90deg)} /* blog search form and its fixed-width input */ form[style*="display:flex"][style*="flex-shrink:0"]{flex-shrink:1 !important;min-width:0 !important;width:100% !important;max-width:100% !important;flex-wrap:wrap !important} input[style*="width:280px"]{width:100% !important;max-width:100% !important;min-width:0 !important;flex:1 1 auto !important} /* decorative pieces that only work at desktop scale */ [style*="emBob"]{display:none !important} [style*="position:absolute"][style*="font-size:52px"][style*="line-height:1"]{display:none !important} [style*="position:absolute"][style*="width:4"]:not([style*="border-radius:99"]):not([style*="filter:blur"]):not([style*="radial-gradient"]){position:static !important;width:100% !important;margin:10px 0 !important;transform:none !important} /* stakeholder hub circle centres in the stacked flow */ [style*="width:132px"][style*="height:132px"]{margin:14px auto !important;justify-self:center} /* footer link lists stay 3-up */ [style*="repeat(3,1fr)"][style*="align-content:start"]{grid-template-columns:repeat(3,1fr) !important} /* nowrap+ellipsis labels keep truncating gracefully, but may shrink */ [style*="white-space:nowrap"][style*="text-overflow:ellipsis"]{min-width:0 !important} /* JS-scaled mockup canvases keep their internal desktop grids */ #dashslides [style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(4,1fr) !important} #dashslides [style*="grid-template-columns:1.6fr 1fr .8fr .7fr"]{grid-template-columns:1.6fr 1fr .8fr .7fr !important} #dashslides [style*="grid-template-columns:1.4fr 1fr"]{grid-template-columns:1.4fr 1fr !important} #dashslides [style*="grid-template-columns:1.3fr 1fr"]{grid-template-columns:1.3fr 1fr !important} #dashslides [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr 1fr !important} .lslide [style*="grid-template-columns:1.7fr"]{grid-template-columns:1.7fr .5fr .55fr .4fr .35fr !important} .lslide [style*="grid-template-columns:1.9fr"]{grid-template-columns:1.9fr .5fr .5fr .3fr .3fr !important} } /* ---------- <=600: phones ---------- */ @media (max-width:600px){ [style*="font-size:40px"]{font-size:29px !important} [style*="font-size:38px"]{font-size:28px !important} [style*="font-size:36px"]{font-size:27px !important} [style*="font-size:33px"]{font-size:25px !important} [style*="font-size:32px"]{font-size:25px !important} [style*="font-size:31px"]{font-size:24px !important} [style*="font-size:30px"]{font-size:24px !important} [style*="font-size:27px"]{font-size:22px !important} [style*="padding:14px 26px"],[style*="padding:14px 22px"]{padding:10px 12px !important} } /* ---------- <=420: small phones ---------- */ @media (max-width:420px){ /* journey timelines stack; their connector lines hide */ [style*="display:flex;justify-content:space-between;align-items:flex-start"]{flex-direction:column !important;align-items:center !important;gap:28px !important} [style*="align-items:flex-start;justify-content:space-between;gap:6px"]{flex-direction:column !important;align-items:center !important;gap:26px !important} /* geofencing device collage un-positions */ [style*="height:500px"]{height:auto !important} [style*="width:880px;height:392px"]{position:static !important;transform:none !important;height:auto !important} [style*="position:absolute"][style*="width:262px;height:472px"]{position:static !important;transform:none !important;margin:16px auto 0 !important} } /* ---------- oversized display type scales with the viewport ---------- */ @media (max-width:1100px){ div[style*="font-size:150px"]{font-size:11vw !important} } /* ---------- targeted overflow fixes found by the device scan ---------- */ @media (max-width:1100px){ /* fixed-width side panels inside bento cards may shrink */ [style*="width:170px"][style*="flex-shrink:0"]{width:auto !important;flex-shrink:1 !important;min-width:0 !important} } @media (max-width:600px){ /* long words in display headings break instead of spilling */ h1,h2,h3,[style*="font-weight:800"]{overflow-wrap:break-word} /* miniature chart bars may shrink */ [style*="background:#ffb000;animation-delay"],[style*="background:#2c5aa0;animation-delay"]{min-width:0 !important} } /* ---------- class-based layouts (defined in page stylesheets, not inline) ---------- */ @media (max-width:1024px){ .bento{grid-template-columns:repeat(3,1fr) !important;grid-auto-rows:auto !important} } @media (max-width:900px){ .bento{grid-template-columns:repeat(2,1fr) !important;grid-auto-rows:auto !important} .bento .tile{grid-column:auto !important;grid-row:auto !important} } @media (max-width:900px){ /* mini bar-chart value labels drop out so the bars fit */ [style*="font-size:8px"][style*="margin-bottom:3px"]{display:none !important} } @media (max-width:600px){ .bento{grid-template-columns:1fr !important} /* long addresses/emails break rather than spill */ a[href^="mailto"],a[href^="tel"],[style*="color:#ffd47e"]{overflow-wrap:anywhere} /* mini bar-chart value labels drop out so the bars fit */ [style*="font-size:8px"][style*="margin-bottom:3px"]{display:none !important} } @media (max-width:900px){ /* fixed-width side panels wrap under the content they sit beside */ [style*="flex-shrink:0"][style*="width:170px"],[style*="flex-shrink:0"][style*="width:210px"]{flex-basis:100% !important;width:100% !important;max-width:100% !important} } @media (min-width:901px) and (max-width:1100px){ /* laptop: let them shrink rather than wrap */ [style*="flex-shrink:0"][style*="width:170px"],[style*="flex-shrink:0"][style*="width:210px"]{flex-shrink:1 !important;min-width:0 !important} } @media (max-width:600px){ /* stat rows inside dark summary cards stack rather than clip */ [style*="flex:1"][style*="border-radius:18px"][style*="padding:28px 26px"]{flex-basis:100% !important} /* text buttons may shrink instead of pushing past their container */ a[style*="flex-shrink:0"][style*="padding:"]{flex-shrink:1 !important;min-width:0 !important} } /* ---------- decorative flow connectors & mockup interiors ---------- */ @media (max-width:900px){ /* Horizontal rails that join step-flows left-to-right: once the steps stack vertically the rail connects nothing, so it is hidden. */ /* Step-flow connector rails: on desktop they run left-to-right between the steps. Once the steps stack we turn each rail into a vertical spine (same colours, gradient rotated 90deg) so the flow still reads as connected. Bars anchored at left:0 are card accents / progress tracks - untouched. */ [style*="position:absolute"][style*="right:"][style*="height:2px"]:not([style*="left:0"]), [style*="position:absolute"][style*="right:"][style*="height:3px"]:not([style*="left:0"]), [style*="position:absolute"][style*="right:"][style*="height:4px"]:not([style*="left:0"]){ left:50% !important;right:auto !important;top:0 !important;bottom:0 !important; height:auto !important;transform:translateX(-50%) !important; opacity:.38 !important;z-index:0 !important; } [style*="left:30px;right:30px;top:28px"]{width:3px !important;background:linear-gradient(180deg,#ffb000,#2c5aa0 55%,#5dcf8b) !important} [style*="left:30px;right:30px;top:29px"]{width:3px !important;background:linear-gradient(180deg,#5dcf8b,#ffb000 55%,#7fb2ff) !important} [style*="left:44px;right:44px;top:33px"]{width:3px !important;background:linear-gradient(180deg,#ffb000,#2c5aa0 50%,#5dcf8b) !important} [style*="left:78px;right:78px;top:26px"]{width:4px !important;background:linear-gradient(180deg,#ffb000,#2c5aa0 55%,#0a387c,#ffb000) !important;background-size:100% 220% !important} [style*="top:23px;left:10%;right:10%"]{width:4px !important} [style*="top:23px;left:10%;right:10%"][style*="emShimmer"]{background:linear-gradient(180deg,transparent,rgba(255,255,255,.7),transparent) !important;background-size:100% 200% !important} [style*="top:22px;left:10%;right:10%"]{width:2px !important;background:linear-gradient(180deg,#ffb000,#2c5aa0 52%,#2e7d32) !important} [style*="top:32px;left:9%;right:9%"]{width:2px !important;background:repeating-linear-gradient(180deg,#ffb000 0 10px,transparent 10px 20px) !important} [style*="top:36px;left:10%;right:10%"]{width:3px !important} /* placement journey: the amber "progress so far" fill becomes the top segment of the spine */ [style*="top:36px;left:10%;width:40%"]{left:50% !important;top:0 !important;width:3px !important;height:40% !important;transform:translateX(-50%) !important;background:linear-gradient(180deg,#ffb000,#ffd47e) !important;opacity:.55 !important;z-index:0 !important} /* step content must paint above the spine */ [style*="grid-template-columns:1fr 96px 1fr"]{position:relative;z-index:1} /* Vertical centre spines (and their end caps) behind alternating timelines: the cards are full-width on small screens, so the spine would strike through them. */ [style*="position:absolute"][style*="left:50%"][style*="width:3px"], [style*="position:absolute"][style*="left:50%"][style*="width:16px"][style*="border-radius:99px"]{z-index:0 !important} /* Product mockups marked role="img" are pictures - never reflow their interior. */ [role="img"][style*="grid-template-columns:96px 1fr"]{grid-template-columns:96px 1fr !important} } @media (max-width:900px){ /* alternating day-timeline rows: stack, and always show the time badge above its card (desktop alternates card/time left-right) */ [style*="grid-template-columns:1fr 96px 1fr"]{display:flex !important;flex-direction:column !important;align-items:stretch !important} [style*="grid-template-columns:1fr 96px 1fr"] > *:nth-child(2){order:-1 !important;margin-bottom:10px} } @media (max-width:900px){ /* UMS exam-flow cards are translucent (rgba(255,255,255,.06) over #0a2043), so the spine showed through the text. Opaque equivalent = same colour, computed as the blend, so the card looks identical but hides the line. */ .excard{background:#192d4e !important} } @media (max-width:600px){ /* The college ERP mockup is a fixed-proportion product screenshot: on a phone the 96px sidebar would eat 36% of the frame and squash the dashboard, so we scale the whole frame (chrome bar included) instead of reflowing it. */ div:has(> [role="img"][aria-label="college erp dashboard"]){zoom:.62} } /* ---------- hero: lift the product visual up under the headline ---------- Desktop heroes are [text | visual]. Stacked naively the visual lands below the whole text block (badge, headline, paragraphs, CTAs, stats), so a phone shows a wall of text first. `display:contents` flattens the text column into the hero flex container so the visual can be ordered between the headline and the supporting copy. DOM order is untouched, so the H1 is still first in the markup for SEO/screen readers. */ @media (max-width:900px){ .emhero{display:flex !important;flex-direction:column !important;gap:0 !important;align-items:stretch !important} .emhero > .emhero-t{display:contents !important} .emhero > .emhero-t > *{order:4} .emhero > .emhero-t > *:first-child{order:1} .emhero > .emhero-t > h1{order:2} .emhero > .emhero-v{order:3;margin:24px 0 6px;width:100%} } @media (max-width:900px){ /* Homepage only: its hero visual carries an inline margin:0, which beat the shared .emhero-v rule and left the mockup touching the headline. */ .herogrid > .emhero-v{margin-top:30px !important} } @media (max-width:900px){ /* LMS "how it flows": the rail's two end-cap dots are pinned to desktop coordinates and strand themselves once the rail turns vertical */ #pipeline > span[style*="top:20px"]{display:none !important} /* its steps are bare centred text, so the spine would strike through them - give each step the section's own background to hide the line behind it */ #pipeline [style*="text-align:center"][style*="emFadeUp"]{background:#f5f8fd;padding:10px 6px;border-radius:12px} } @media (max-width:600px){ /* Cloudflare Turnstile refuses to render narrower than 300px - below that it spills straight out of the card. It is otherwise perfectly fluid: on the live ads landing pages it measures 300/318/348/370px at 320/360/390/412px viewports, matching its container every time. So the defect is ours, not the widget's - we were spending 154px of a 390px screen on four nested paddings and leaving it 236px. The landing pages make the opposite trade (20px on the wrapper, 0 on the form), which is why they never break. */ form[data-em-lead]{padding-left:14px !important;padding-right:14px !important} /* two inline spellings reach these sections: "64px 48px" and "0 48px 60px" - the latter has no literal "px 48px" in it, so it needs its own selector */ div:has(form[data-em-lead])[style*="px 48px"], div:has(form[data-em-lead])[style*="padding:0 48px"]{padding-left:12px !important;padding-right:12px !important} /* Homepage + LMS wrap their form in one extra card the others lack. At 360px there is not enough width for both this card's inset AND the form's own padding, so the card keeps its inset for the heading, copy and stats, and only the form breaks back out to full width. Zeroing the card's padding outright would strip the inset from its text too. */ [style*="padding:52px 52px"]{padding-left:14px !important;padding-right:14px !important} [style*="padding:52px 52px"] > div:has(> form[data-em-lead]){margin-left:-14px !important;margin-right:-14px !important} } @media (max-width:900px){ /* Footer link columns: the global 1fr collapse would stack all 23 links into one very long ribbon. Two columns keeps the footer scannable. The selector only matches the four-column footer, so nothing else is affected. */ [style*="repeat(4,1fr)"][style*="align-content:start"]{grid-template-columns:repeat(2,1fr) !important;gap:22px 18px !important} } @media (max-width:359px){ /* 300px + any padding cannot fit a 320px phone, so shrink the widget rather than let it hang outside the card. Transform is visual only - the form layout, and the click target mapping, are unaffected. */ form[data-em-lead] .cf-turnstile{transform:scale(.86);transform-origin:left top} } @media (max-width:560px){ /* Multi-campus blog cover: Campus A - link - ERP - link - Campus B is a 504px row, so below ~544px the shared flex-wrap rule breaks it after the ERP node and strands the second connector alone on line two. Stack it and stand the connectors up, the same way the other rails turn vertical on phones. */ /* :has() keeps this off the other 37 posts, whose covers are a plain image inside the very same 340px box and must stay exactly as they are */ [style*="position:relative;height:340px"]:has(> [style*="gap:34px"]){height:auto !important;padding:34px 0 !important} [style*="position:relative;height:340px"] > [style*="gap:34px"]{flex-direction:column !important;gap:14px !important} [style*="position:relative;height:340px"] > [style*="gap:34px"] > div:nth-child(2), [style*="position:relative;height:340px"] > [style*="gap:34px"] > div:nth-child(4){width:2px !important;height:26px !important} [style*="position:relative;height:340px"] > [style*="gap:34px"] > div:nth-child(2){background:linear-gradient(180deg,transparent,#ffb000) !important} [style*="position:relative;height:340px"] > [style*="gap:34px"] > div:nth-child(4){background:linear-gradient(180deg,#ffb000,transparent) !important} } /* ---- multi-campus diagram (school-erp-modules/campus-management-system) -------------- Chip column -> arrow -> "One platform" card. Measured: the row is a single line down to 601px and wraps at exactly 600px, where the shared flex-wrap rule drops the card onto its own line while the chips and arrow stay together - so the arrow ends up above the card while still pointing RIGHT, at empty space. Stack the row and turn the arrow downwards. Scoped with :has() to the one row that contains an #ffb000 connector, so no other flex row on the site is affected. */ @media (max-width:600px){ [style*="display:flex;align-items:center;gap:20px"]:has(> div[style*="color:#ffb000"]){flex-direction:column !important;align-items:stretch !important} [style*="display:flex;align-items:center;gap:20px"]:has(> div[style*="color:#ffb000"]) > div[style*="color:#ffb000"]{align-self:center !important} [style*="display:flex;align-items:center;gap:20px"]:has(> div[style*="color:#ffb000"]) > div[style*="color:#ffb000"] > span{transform:rotate(90deg)} [style*="display:flex;align-items:center;gap:20px"]:has(> div[style*="color:#ffb000"]) > div[style*="color:#ffb000"] > div{height:24px !important} } /* H1 size ladder above 40px. The <=600px block higher up scales 27-40px inline sizes, but stops there - so every H1 declared at 42px or more rendered at full desktop size on a phone (the /about/ hero was 62px over five lines, 316px tall, pushing both CTAs below the fold). Scoped to h1 deliberately: 46px and 52px are mostly decorative corner-number spans that must keep their size. */ @media (max-width:600px){ h1[style*="font-size:62px"]{font-size:32px !important} h1[style*="font-size:52px"]{font-size:30px !important} h1[style*="font-size:51px"]{font-size:30px !important} h1[style*="font-size:50px"]{font-size:29px !important} h1[style*="font-size:48px"]{font-size:29px !important} h1[style*="font-size:46px"]{font-size:28px !important} h1[style*="font-size:44px"]{font-size:28px !important} h1[style*="font-size:42px"]{font-size:27px !important} h1[style*="font-size:39px"]{font-size:28px !important} } /* Three sizes the <=600px ladder skipped. It lists literal values (27,30,31,32,33,36,38,40), so 29, 34 and 37 fell between the rungs and kept their desktop size on a phone - 34px alone is a section heading on 13 pages. The oversized decorative numerals (76px .ghost, 96px .spot-qm, 140px .gnum) are deliberately left alone: they are 5-45% opacity watermarks that already fit the viewport. */ @media (max-width:600px){ [style*="font-size:37px"]{font-size:27px !important} [style*="font-size:34px"]{font-size:26px !important} [style*="font-size:29px"]{font-size:23px !important} } /* LMS flow: the three summary cards are content-sized, so stacked on a phone they came out 240 / 289 / 253px wide - visibly ragged. Equal width once they stack. */ @media (max-width:600px){ #pipeline-stats > div > *{flex:1 1 100% !important;min-width:0 !important} }