, so no `>` child combinator is used — these match at any depth. Excluded: our own background layer and skip link, and #wpadminbar, which precedes everything and must stay visible while you are logged in. JavaScript additionally walks the full ancestor chain, covering nesting depths these two selectors cannot express. Scoped to .itam-hide-legacy so it only applies where we asked for it, and only on our own templates. Every other page on the site is untouched. */ body.itam-modern.itam-hide-legacy *:has(~ .itam-header):not(.itam-bgfx):not(.itam-screen-reader-text):not(#wpadminbar), body.itam-modern.itam-hide-legacy *:has(~ * .itam-header):not(.itam-bgfx):not(.itam-screen-reader-text):not(#wpadminbar) { display: none !important; } /* The same theme also prints its own footer and back-to-top button BELOW ours, which is what left ~132px of dead scroll space under the footer on mobile. These two IDs were identified from the live site — kept as a belt-and-suspenders match alongside the generic rule below. */ body.itam-modern.itam-hide-legacy #edupro-footer-section, body.itam-modern.itam-hide-legacy #scrollTop, body.itam-modern.itam-hide-legacy .goToTop { display: none !important; } /* NOTE: an earlier version of this file also had a generic CSS rule here — `:has(.itam-footer) ~ *` — meant to blanket-hide ANYTHING printed after our footer, at any nesting depth, on the theory that it was always leftover legacy chrome. It was reverted: on a real WordPress site, "something appended after the page wrapper" also describes an Elementor popup, a WPForms modal, a cookie-consent dialog, or any other on-demand overlay — legitimate features whose CONTENT happens to sit in the DOM the whole time, hidden until triggered. A blanket display:none rule can't tell those apart from actual legacy junk, and hiding the dialog while its backdrop still shows is exactly what produces a page-covering overlay that blocks every click. Content safety matters more here than catching every possible legacy element, so this is JavaScript's job now (see trimTrailingSpace() in main.js) — it can check whether an element is genuinely empty before ever touching it, which CSS cannot. */ /* ---- Header / nav ---- */ .itam-header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(14px); background: rgba(5, 7, 13, 0.7); border-bottom: 1px solid var(--itam-border); } .itam-navwrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; max-width: var(--itam-maxw); margin: 0 auto; } .itam-brand { display: flex; align-items: center; gap: 10px; font-family: var(--itam-font-head); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--itam-text); } .itam-brand__mark { width: 32px; height: 32px; flex-shrink: 0; display: block; } .itam-brand__word { line-height: 1.1; } .itam-brand__logo { max-height: 42px; width: auto; } .itam-nav { display: flex; align-items: center; gap: 4px; } .itam-nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .itam-nav li { position: relative; } .itam-nav a { display: block; padding: 10px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--itam-dim); transition: color 0.15s ease, background 0.15s ease; } .itam-nav a:hover { color: var(--itam-text); background: rgba(255, 255, 255, 0.05); } .itam-nav .current-menu-item > a, .itam-nav .current_page_item > a, .itam-nav a.itam-active { color: var(--itam-text); background: rgba(255, 255, 255, 0.07); } /* Sub-menus */ .itam-nav ul ul { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; flex-direction: column; align-items: stretch; background: rgba(14, 20, 36, 0.98); border: 1px solid var(--itam-border-strong); border-radius: 12px; padding: 8px; box-shadow: var(--itam-shadow-sm); } .itam-nav li:hover > ul, .itam-nav li:focus-within > ul { display: flex; } .itam-navcta { display: flex; align-items: center; gap: 10px; } .itam-navtoggle { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--itam-border-strong); background: rgba(255, 255, 255, 0.03); color: var(--itam-text); font-size: 18px; line-height: 1; align-items: center; justify-content: center; cursor: pointer; } @media (max-width: 900px) { .itam-nav { display: none; } .itam-navtoggle { display: flex; } .itam-nav.itam-open { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: rgba(6, 9, 17, 0.98); border-bottom: 1px solid var(--itam-border); padding: 12px; } .itam-nav.itam-open ul { flex-direction: column; align-items: stretch; width: 100%; } .itam-nav.itam-open a { padding: 14px 16px; } .itam-nav.itam-open ul ul { position: static; display: flex; border: none; box-shadow: none; padding-left: 12px; } } /* ---- Sections ---- */ .itam-section { padding: 88px 0; } .itam-hero { padding: 96px 0 80px; text-align: center; } .itam-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); margin: 22px 0 20px; } .itam-hero__lead { max-width: 640px; margin: 0 auto 36px; color: var(--itam-dim); font-size: 18px; } .itam-hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; } .itam-stats { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; padding-top: 36px; border-top: 1px solid var(--itam-border); } .itam-stats b { display: block; font-family: var(--itam-font-head); font-size: 28px; background: linear-gradient(100deg, var(--itam-accent), var(--itam-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .itam-stats span { color: var(--itam-faint); font-size: 13px; } .itam-pagehero { padding: 64px 0 20px; text-align: center; } .itam-pagehero h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-top: 18px; } .itam-pagehero p { color: var(--itam-dim); max-width: 560px; margin: 14px auto 0; } .itam-sechead { max-width: 640px; margin: 0 auto 52px; text-align: center; } .itam-sechead h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top: 16px; } .itam-sechead p { color: var(--itam-dim); margin-top: 14px; font-size: 16.5px; } /* ---- Cards / grid ---- */ .itam-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)); border: 1px solid var(--itam-border); border-radius: var(--itam-radius); padding: 28px; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .itam-card:hover { transform: translateY(-4px); border-color: var(--itam-border-strong); box-shadow: var(--itam-shadow-sm); } .itam-card p { color: var(--itam-dim); font-size: 15px; margin: 8px 0 0; } .itam-grid { display: grid; gap: 22px; } .itam-grid--3 { grid-template-columns: repeat(3, 1fr); } .itam-grid--2 { grid-template-columns: repeat(2, 1fr); } .itam-grid--split { grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; } @media (max-width: 860px) { .itam-grid--3, .itam-grid--2, .itam-grid--split { grid-template-columns: 1fr; } } .itam-iconbadge { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(52, 230, 196, 0.1); border: 1px solid rgba(52, 230, 196, 0.25); color: var(--itam-accent); margin-bottom: 18px; flex-shrink: 0; } /* ---- Curriculum timeline ---- */ .itam-timeline { position: relative; max-width: 820px; margin: 0 auto; } .itam-timeline::before { content: ""; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--itam-accent), var(--itam-accent-2)); opacity: 0.35; } .itam-tl__item { position: relative; padding: 0 0 40px 76px; } .itam-tl__item:last-child { padding-bottom: 0; } .itam-tl__num { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 14px; background: var(--itam-panel); border: 1px solid var(--itam-border-strong); display: grid; place-items: center; font-family: var(--itam-font-mono); font-weight: 700; color: var(--itam-accent); z-index: 1; } .itam-tl__item h3 { font-size: 19px; margin-bottom: 8px; } .itam-tl__item p { color: var(--itam-dim); font-size: 15px; margin: 0; } /* ---- Cohort cards ---- */ .itam-cohort { background: var(--itam-panel); border: 1px solid var(--itam-border); border-radius: var(--itam-radius); overflow: hidden; } .itam-cohort__head { padding: 26px 28px; background: linear-gradient(120deg, rgba(52, 230, 196, 0.12), rgba(108, 139, 255, 0.08)); border-bottom: 1px solid var(--itam-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .itam-cohort__badge { font-family: var(--itam-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--itam-accent); } .itam-cohort__head h3 { font-size: 24px; } .itam-cohort__start { font-family: var(--itam-font-mono); color: var(--itam-dim); font-size: 13px; } .itam-cohort__body { padding: 26px 28px; } .itam-session { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--itam-border); font-size: 15px; color: var(--itam-dim); } .itam-session:last-of-type { border-bottom: none; } .itam-session__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--itam-accent); flex-shrink: 0; } .itam-session b { color: var(--itam-text); font-weight: 600; } .itam-cohort__note { margin: 16px 0 0; color: var(--itam-faint); font-size: 13.5px; } /* ---- Payment ---- */ .itam-pay { max-width: 560px; margin: 0 auto; background: var(--itam-panel); border: 1px solid var(--itam-border-strong); border-radius: 20px; padding: 40px; text-align: center; box-shadow: var(--itam-shadow-lg); } .itam-pay__label { font-family: var(--itam-font-mono); color: var(--itam-faint); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; } .itam-pay__price { font-family: var(--itam-font-head); font-size: 52px; margin: 10px 0 6px; } .itam-pay__price span { font-size: 18px; color: var(--itam-faint); font-weight: 400; } .itam-pay__sub { color: var(--itam-dim); font-size: 14.5px; margin: 0; } .itam-pay__plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; } .itam-plan { border: 1px solid var(--itam-border); border-radius: 12px; padding: 16px 8px; font-family: var(--itam-font-mono); } .itam-plan b { display: block; font-size: 20px; color: var(--itam-accent); } .itam-plan span { font-size: 11.5px; color: var(--itam-faint); } .itam-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; color: var(--itam-faint); font-size: 13px; } .itam-fineprint { max-width: 560px; margin: 32px auto 0; color: var(--itam-faint); font-size: 13px; text-align: center; } .itam-link { color: var(--itam-accent); } .itam-fineprint a { color: #fff; font-weight: 700; text-decoration: underline; } /* ---- Forms (Contact Form 7 lives inside .itam-formwrap) ---- */ .itam-formwrap label { display: block; font-size: 13px; color: var(--itam-dim); margin-bottom: 8px; font-family: var(--itam-font-mono); letter-spacing: 0.03em; } .itam-formwrap input[type="text"], .itam-formwrap input[type="email"], .itam-formwrap input[type="tel"], .itam-formwrap input[type="url"], .itam-formwrap input[type="number"], .itam-formwrap input[type="date"], .itam-formwrap select, .itam-formwrap textarea { width: 100%; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--itam-border-strong); border-radius: var(--itam-radius-sm); padding: 13px 16px; color: var(--itam-text); font-family: var(--itam-font-body); font-size: 15px; transition: border-color 0.2s ease, background 0.2s ease; } .itam-formwrap input::placeholder, .itam-formwrap textarea::placeholder { color: var(--itam-faint); } .itam-formwrap input:focus, .itam-formwrap textarea:focus, .itam-formwrap select:focus { outline: none; border-color: var(--itam-accent); background: rgba(52, 230, 196, 0.04); } .itam-formwrap textarea { resize: vertical; min-height: 130px; } .itam-formwrap input[type="submit"], .itam-formwrap button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: 22px; font-family: var(--itam-font-body); font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: 999px; border: none; cursor: pointer; background: linear-gradient(100deg, var(--itam-accent), var(--itam-accent-2)); color: #04101a; box-shadow: 0 10px 30px -8px rgba(52, 230, 196, 0.45); transition: transform 0.2s ease, box-shadow 0.2s ease; } .itam-formwrap input[type="submit"]:hover, .itam-formwrap button[type="submit"]:hover { transform: translateY(-2px); } /* CF7 status messages */ .itam-formwrap .wpcf7-not-valid-tip { color: #ff6b6b; font-size: 13px; margin-top: 6px; } .itam-formwrap .wpcf7-response-output { border-radius: var(--itam-radius-sm) !important; border-color: var(--itam-border-strong) !important; color: var(--itam-dim); font-size: 14px; margin: 20px 0 0 !important; padding: 12px 16px !important; } .itam-formwrap .wpcf7-spinner { filter: invert(1) hue-rotate(180deg); } .itam-formnotice { border: 1px dashed var(--itam-border-strong); border-radius: 10px; padding: 14px 16px; color: var(--itam-faint); font-size: 13.5px; } /* ---- Contact info ---- */ .itam-info { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--itam-border); } .itam-info:last-of-type { border-bottom: none; } .itam-info .itam-iconbadge { margin-bottom: 0; } .itam-info h4 { font-size: 15px; margin-bottom: 4px; } .itam-info p, .itam-info a { color: var(--itam-dim); font-size: 14.5px; margin: 0; } .itam-info a:hover { color: var(--itam-accent); } /* ---- CTA banner ---- */ .itam-cta { background: linear-gradient(120deg, rgba(52, 230, 196, 0.12), rgba(108, 139, 255, 0.1)); border: 1px solid var(--itam-border-strong); border-radius: 24px; padding: 56px; text-align: center; } .itam-cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 14px; } .itam-cta p { color: var(--itam-dim); margin: 0 0 28px; } .itam-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ---- Footer ---- */ .itam-footer { border-top: 1px solid var(--itam-border); padding: 56px 0 28px; margin-top: 40px; background: var(--itam-bg-alt); } .itam-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; } @media (max-width: 800px) { .itam-footer__grid { grid-template-columns: 1fr 1fr; } } .itam-footer__grid h5 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--itam-faint); margin: 0 0 16px; font-family: var(--itam-font-mono); } .itam-footer__grid ul { list-style: none; margin: 0; padding: 0; } .itam-footer__grid a, .itam-footer__grid p { color: var(--itam-dim); font-size: 14.5px; display: block; margin-bottom: 10px; } .itam-footer__grid a:hover { color: var(--itam-accent); } .itam-footer__blurb { max-width: 280px; margin-top: 14px !important; } .itam-social { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; } .itam-social a { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--itam-border-strong); display: grid; place-items: center; color: var(--itam-dim); margin: 0; font-size: 14px; } .itam-social a:hover { color: var(--itam-accent); border-color: var(--itam-accent); } .itam-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--itam-border); color: var(--itam-faint); font-size: 13px; } .itam-footer__bottom a { color: var(--itam-faint); } .itam-footer__bottom a:hover { color: var(--itam-accent); } /* ---- Cookie banner (optional — off unless enabled in the Customizer) ---- */ #itam-cookie { position: fixed; left: 20px; right: 20px; bottom: 20px; max-width: 640px; margin: 0 auto; background: rgba(14, 20, 36, 0.97); border: 1px solid var(--itam-border-strong); border-radius: 16px; padding: 20px 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: var(--itam-shadow-lg); z-index: 200; backdrop-filter: blur(12px); } #itam-cookie p { font-size: 13.5px; color: var(--itam-dim); flex: 1 1 260px; margin: 0; } #itam-cookie .itam-cookie__actions { display: flex; gap: 10px; } #itam-cookie.itam-hidden { display: none; } /* ---- Long-form content (legal pages, articles) ---- */ .itam-prose { max-width: 760px; margin: 0 auto; } .itam-prose h2 { font-size: 22px; margin: 36px 0 14px; } .itam-prose h3 { font-size: 18px; margin: 28px 0 12px; } .itam-prose p, .itam-prose li { color: var(--itam-dim); margin-bottom: 14px; font-size: 15.5px; } .itam-prose ul, .itam-prose ol { padding-left: 20px; } .itam-prose ul { list-style: disc; } .itam-prose ol { list-style: decimal; } .itam-prose strong { color: var(--itam-text); } .itam-prose a { color: var(--itam-accent); text-decoration: underline; } .itam-prose img { border-radius: var(--itam-radius); margin: 24px 0; } .itam-prose blockquote { border-left: 3px solid var(--itam-accent); padding-left: 20px; margin: 24px 0; color: var(--itam-dim); font-style: italic; } .itam-prose table { width: 100%; border-collapse: collapse; margin: 24px 0; } .itam-prose th, .itam-prose td { border: 1px solid var(--itam-border); padding: 10px 14px; text-align: left; color: var(--itam-dim); font-size: 14.5px; } .itam-prose th { color: var(--itam-text); background: rgba(255, 255, 255, 0.03); } /* ---- Reveal on scroll (progressive enhancement) ---- Content is visible by default. Only once JS confirms it is running (html.itam-js) do we hide elements ahead of their animation, so no-JS users, crawlers and slow connections always see the full page. */ .itam-reveal { transition: opacity 0.7s ease, transform 0.7s ease; } html.itam-js .itam-reveal { opacity: 0; transform: translateY(24px); } html.itam-js .itam-reveal.itam-in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.itam-js .itam-reveal { opacity: 1; transform: none; } body.itam-modern * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ---- Print ---------------------------------------------------------------- Gradient text is painted by clipping a background to the glyphs, and browsers drop backgrounds when printing — so the highlighted words in the headline vanish from a printout or "Save as PDF". Give them a solid colour instead, and drop the dark canvas so printouts stay legible. */ @media print { body.itam-modern { background: #fff !important; color: #111 !important; } .itam-bgfx, .itam-navtoggle, #itam-cookie { display: none !important; } body.itam-modern .itam-gradient, body.itam-modern .itam-stats b { background: none !important; -webkit-text-fill-color: #0b7f6a !important; color: #0b7f6a !important; } body.itam-modern h1, body.itam-modern h2, body.itam-modern h3, body.itam-modern h4, body.itam-modern p, body.itam-modern li, body.itam-modern .itam-card p { color: #111 !important; } .itam-card, .itam-cohort, .itam-pay { border-color: #bbb !important; background: none !important; } html.itam-js .itam-reveal { opacity: 1 !important; transform: none !important; } } /* ---- Utilities ---- */ .itam-mono { font-family: var(--itam-font-mono); } .itam-center { text-align: center; } .itam-mt { margin-top: 40px; } .itam-muted { color: var(--itam-faint); } .itam-screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }