/* Ad Landing Page — paid-ad landing page content type Author: Edwin M Date: 2026-10-19 Mobile-first: unprefixed rules below are the mobile/base layout. @media (min-width: ...) blocks add desktop-only overrides. Scoped under .page-type-ad_landing_page since global-styling loads unconditionally site-wide (same precedent as programs.css). */ /* ── Horizontal-overflow guard ──────────────────────────────────────────── The full-bleed `100vw` technique below is measured against the viewport including any space-reserving (non-overlay) scrollbar gutter, while the page's actual centering math resolves against document.documentElement.clientWidth, which excludes it. On a system with a reserving scrollbar that mismatch leaves the full-bled elements a few px wider than the real scrollable area — confirmed live (scrollWidth 1360 vs clientWidth 1353), which was enough to surface an actual horizontal scrollbar, not just a theoretical one. The 7px is pure background/image edge, not content, so clipping it is safe. */ .page-type-ad_landing_page { overflow-x: hidden; } /* ── Breadcrumb removal ─────────────────────────────────────────────────── CSS-only, scoped by body class. A negated entity_bundle:node block visibility condition looked like the Drupal-native way to do this, but core's BlockAccessControlHandler denies the block on ANY route with a missing node context (every non-node page — /directory, /programs, taxonomy pages, etc.) *before* negate is ever evaluated, so it blanked the breadcrumb site-wide instead of just on this bundle. Hiding the rendered region here avoids that entirely. Targets #block-breadcrumbs specifically, not the whole .region-breadcrumb — that region also carries the "Edit This Page" block (no visibility restriction of its own) and a legacy ?info=thankyou confirmation block, both of which should keep working here. Zeroing the region's own margin-bottom (adminimal_upei.css: 36px) keeps the hero flush under the header for the common case where neither of those other blocks renders. Also zeroing padding: mobile960.css gives the region its own `padding:20px 20px` at ≤991px (adminimal_upei.css's desktop rule only pads the left side, so this was mobile-only) — that padding applies to the region div itself regardless of whether any block inside it is visible, so it was still reserving ~40px of vertical white space above the hero on real mobile even with the breadcrumb block hidden (confirmed on an actual phone, not just a resized desktop browser). */ .page-type-ad_landing_page .region-breadcrumb #block-breadcrumbs { display: none; } .page-type-ad_landing_page .region-breadcrumb { margin-bottom: 0; padding: 0; } /* mobile960.css gives .pagecontainer itself padding:20px on all sides at ≤991px (it has none at all on desktop, so this is mobile-only). That sits above everything inside it, including the hero — the horizontal full-bleed breakout on .landing-hero-band doesn't touch this ancestor's own vertical padding, so it was still leaving a gap under the header on real mobile. Only the top edge needs to go; left/right/bottom still give the rest of the page's mobile content its normal breathing room. */ .page-type-ad_landing_page .pagecontainer { padding-top: 0; } /* ── Hero band ──────────────────────────────────────────────────────────── field_group "html element" wrapper (group_ad_hero) renders as div.landing-hero-band around preheader/header/body/cta. field_hero_photo_media sits directly below it, outside the group. Full-bleed note: `width:100vw; left:50%; margin-left:-50vw` only centers at x=0 when its containing block is itself horizontally centered in the viewport. Here the containing block is .innerpagecontent, which IS centered overall (nested inside the centered .pagecontainer) but is inset asymmetrically within it — a floated .pagecontent (940px/740px) inside .pagecontainer (1180px/1000px), with a 40px/73px left/right margin on top (adminimal_upei.min.css) — so the left:50% trick's own math doesn't cancel out there. That leaves a constant ~137px/147px gap depending on breakpoint (confirmed live via getBoundingClientRect()). Below 991px .pagecontainer/.pagecontent/.innerpagecontent collapse to a symmetrically-inset 100% width (mobile960.css: 20px padding each side), which the left:50%/margin-left:-50vw math does cancel out to exactly 0 — no override needed under 992px. Above 991px, skip the left:50% trick (it depends on the containing block's own width, so it can't null out an off-center ancestor) and position purely via margin-left, solved directly against this theme's fixed container math per breakpoint (Lcb = containing block's left edge in viewport coordinates; margin-left = -Lcb lands the box at 0): ≥1241px: pagecontainer 1180px, left-inset 40px → Lcb = V/2 - 550 992–1240px: pagecontainer 1000px, left-inset 40px → Lcb = V/2 - 460 The first query below has no upper bound (overridden by the second past 1240px) so there's no fractional-width gap at the 1240/1241 boundary. */ .page-type-ad_landing_page .landing-hero-band { position: relative; width: 100vw; left: 50%; margin-left: -50vw; background: #5c8727; color: #fff; padding: 24px 20px; } /* Centers the band's text against the viewport, which is NOT the same as lining it up with the body-content column below (.innerpagecontent, 827px/627px, itself offset within its own centered ancestor — see the full-bleed note above). Confirmed live: naive viewport-centering left the headline ~40px off from the hero photo/lead-form at desktop, and the two breakpoints' exact offsets differ, hence the explicit width+margin-left pair below rather than max-width+auto margins. */ .page-type-ad_landing_page .landing-hero-band > .field { margin-left: 0; margin-right: 0; } @media only screen and (min-width: 992px) { .page-type-ad_landing_page .landing-hero-band > .field { width: 627px; margin-left: calc(50vw - 480px); } } @media only screen and (min-width: 1241px) { .page-type-ad_landing_page .landing-hero-band > .field { width: 827px; margin-left: calc(50vw - 570px); } } .page-type-ad_landing_page .landing-hero-band .field--name-field-hero-preheader { color: #fbb040; text-transform: uppercase; font-weight: 700; font-family: 'Open Sans'; letter-spacing: 0.5px; margin-bottom: 8px; } /* Same type treatment as .adtextsection-header ("Where a Business degree can take you" etc.) — size/family/spacing only; color stays white here (inherited from .landing-hero-band) since this sits on the green band, not a white section background. */ .page-type-ad_landing_page .landing-hero-band .field--name-field-hero-header { font-family: 'Adelle'; font-size: 39px; line-height: 1em; margin-bottom: 25px; } .page-type-ad_landing_page .landing-hero-band .field--name-field-hero-body { font-family: 'Open Sans'; font-size: 1rem; margin-bottom: 16px; } .page-type-ad_landing_page .landing-hero-band .field--name-field-hero-cta a { display: inline-block; background-color: #fbb040; color: #192a36; text-decoration: none; text-transform: uppercase; font-weight: 700; padding: 12px 24px; border-radius: 5px; } .page-type-ad_landing_page .landing-hero-band .field--name-field-hero-cta a:hover { background-color: #e89f32; } /* Not full-bleed — stays at the normal body-content column width (same as the text sections further down the page), with a gap separating it from the green band above. */ .page-type-ad_landing_page .field--name-field-hero-photo-media { margin-top: 32px; margin-bottom: 32px; } .page-type-ad_landing_page .field--name-field-hero-photo-media img { display: block; width: 100%; } /* See the full-bleed note above .landing-hero-band: above 991px the containing block is off-center relative to this trick's own math, so the left:50% approach needs replacing with a margin solved against this theme's known container math at each breakpoint. Only .landing-hero-band needs this — the hero photo is no longer full-bleed. No upper bound on the first query: it's overridden by the second past 1240px, so there's no fractional-width gap at that boundary. */ @media only screen and (min-width: 992px) { .page-type-ad_landing_page .landing-hero-band { left: 0; margin-left: calc(-50vw + 460px); } } @media only screen and (min-width: 1241px) { .page-type-ad_landing_page .landing-hero-band { left: 0; margin-left: calc(-50vw + 550px); } } /* Gap below the top lead form block before the first text section (CAREERS). */ .page-type-ad_landing_page .block-upeileadformad { margin-bottom: 32px; } /* ── Repeated text sections (views.view.ad_landing_page_content:block_1, 1207 "Student Experience Section", 1482 "Programs Section") ─────────── Plain Views field output. Each field's rendered value is wrapped in .adtextsection-preheader/-header/-body (the view's own element_wrapper_class setting) — NOT .views-field-field-section-*. Those WERE the correct classes before this branch renamed the fields (generic ad_text_section's field_section_* → per-section field_careers_*/field_programs_*/field_student_exp_*) and switched to explicit element_wrapper_class values; they went stale as part of that rename, not before it. Styling matches /programs/acadian-studies' segment header treatment (adminimal_upei.css: .anchorpage .views-field-field-segment-header / .views-field-field-short-title-1), reimplemented with a flex+border line instead of that page's background-image (sepline.png) + floated-white-box trick — same look, no extra nested markup or image asset required. */ .page-type-ad_landing_page .adtextsectionlist .views-row { margin-bottom: 24px; } .page-type-ad_landing_page .adtextsectionlist .adtextsection-preheader { display: flex; align-items: center; font-size: 19px; text-transform: uppercase; color: #5c8727; font-family: 'Open Sans'; font-weight: 700; margin-bottom: 18px; } .page-type-ad_landing_page .adtextsectionlist .adtextsection-preheader::after { content: ''; flex: 1 1 auto; margin-left: 16px; border-top: 1px solid #dcdcdc; } .page-type-ad_landing_page .adtextsectionlist .adtextsection-header { font-family: 'Adelle'; font-size: 39px; line-height: 1em; margin-bottom: 25px; } .page-type-ad_landing_page .adtextsectionlist .adtextsection-body { font-size: 1rem; } .page-type-ad_landing_page .adtextsectionlist .adtextsection-body ul { margin: 0; padding-left: 20px; } @media (min-width: 700px) { .page-type-ad_landing_page .adtextsectionlist .adtextsection-body ul { column-count: 2; column-gap: 32px; } } /* Gap above the 2nd/3rd text sections, which each directly follow a different block (Testimonials, then the Slider) rather than another text section, so they need their own top margin instead of relying on .views-row's margin-bottom above. */ .page-type-ad_landing_page .block-views-blockad-landing-page-content-block-4, .page-type-ad_landing_page .block-views-blockad-landing-page-content-block-5 { margin-top: 40px; } /* ── Testimonials (views.view.ad_landing_page_content:block_2) ──────────── Reuses the home page's actual Spotlights markup/classes verbatim (spotlightmoreimage/spotlightmoreinfo/dateandcategory/headlinetitle via a composed "nothing" field, css_class "frontpagespotlight morespotlight") so the layout, fonts, colors, and circle-crop image treatment are byte-for-byte the same CSS as the home page Spotlights list — not a reimplementation. See adminimal_upei.min.css for the shared rules this inherits (float-based photo-left/text-right layout, 92px circle crop, Open Sans/Adelle fonts). Two small overrides below: the shared .frontpagespotlight.morespotlight rule carries a 53px left margin that only makes sense in the home page's sidebar layout; this page has no sidebar, so that's neutralized here while keeping a top gap after the CAREERS text section above it. */ .page-type-ad_landing_page .adtestimoniallist.frontpagespotlight.morespotlight { margin: 48px 0 0 0; position: relative; padding: 32px 0; } /* Full-bleed #f0f0f0 background behind just this section, matching the home page's Spotlights section background — painted on a pseudo rather than making .adtestimoniallist itself full-bleed, so the testimonial rows inside keep their normal column position/width untouched; only the backdrop needs to span the viewport. Same breakout math as .landing-hero-band above (see its comment for the full derivation): base rule is correct below 992px because the containing block collapses to a symmetrically-inset, centered 100% width there; above that it's off-center relative to this trick, so margin-left is solved directly against the theme's known container widths per breakpoint instead. */ .page-type-ad_landing_page .adtestimoniallist.frontpagespotlight.morespotlight::before { content: ''; position: absolute; top: 0; bottom: 0; width: 100vw; left: 50%; margin-left: -50vw; background: #f0f0f0; z-index: -1; } @media only screen and (min-width: 992px) { .page-type-ad_landing_page .adtestimoniallist.frontpagespotlight.morespotlight::before { left: 0; margin-left: calc(-50vw + 460px); } } @media only screen and (min-width: 1241px) { .page-type-ad_landing_page .adtestimoniallist.frontpagespotlight.morespotlight::before { left: 0; margin-left: calc(-50vw + 550px); } } /* The shared .spotlightmoreimage width:12% is sized for the home page's ~827px desktop column; at mobile widths (≤991px) the home page itself bumps this to 25%/66% (mobile960.css) but only for .path-frontpage, so this page was still rendering the desktop 12% — noticeably small in a narrow mobile column. Mirrors the home page's own mobile ratio. */ @media only screen and (max-width: 991px) { .page-type-ad_landing_page .adtestimoniallist.frontpagespotlight.morespotlight .spotlightmoreimage { width: 25%; } .page-type-ad_landing_page .adtestimoniallist.frontpagespotlight.morespotlight .spotlightmoreinfo { width: 66%; } } /* ── Image + text slider (views.view.ad_landing_page_content:block_3) ───── Stacked at every width per spec: text panel above, full-width photo below, as two separate non-overlapping blocks. views_slideshow_cycle's fixed_height was 1 (every slide forced to the same height as the tallest one), which looked fine on the long-copy slide but left a visible gap — with the bottom-anchored prev/next controls floating in it — under any shorter slide (confirmed live by paging to the 2nd slide). Set to 0 in the view so jQuery Cycle resizes the container to each slide's own natural height instead; combined with min-height (not height) below, this also means longer slide copy grows the green panel rather than clipping. */ .page-type-ad_landing_page .adlandingslidelist { margin-top: 40px; } .page-type-ad_landing_page .adlandingslidelist .adlandingslide { display: flex; flex-direction: column; } .page-type-ad_landing_page .adlandingslide-text { background: #5c8727; color: #fff; padding: 24px; /* min-height, not height, so longer slide copy never clips. */ min-height: 220px; } /* Same type treatment as .adtextsection-header ("More than just the classroom" etc.) — size/family/spacing only; color stays white here (inherited from .adlandingslide-text) since this sits on the green panel, not a white section background. */ .page-type-ad_landing_page .adlandingslide-header { font-family: 'Adelle'; font-size: 39px; line-height: 1em; margin-bottom: 25px; } .page-type-ad_landing_page .adlandingslide-body { font-family: 'Open Sans'; font-size: 1rem; } .page-type-ad_landing_page .adlandingslide-image img { display: block; width: 100%; } /* ── Slideshow prev/next controls ────────────────────────────────────── Exact clone of the home page's own working mechanism — confirmed by reading its actual CSS (modules/contrib/views_slideshow ships no positioning CSS of its own; it's 100% these two theme rules): .frontpageprograms .view-content { position: relative; } .frontpageprograms .views_slideshow_controls_text { position: absolute; bottom: 70px; left: 10px; z-index: 200; } The mechanism: .view-content wraps both the image area and the controls as normal-flow children. Once the controls are taken OUT of flow via position:absolute, they no longer contribute to .view-content's height — so .view-content's box becomes exactly the image/text area's own height, with nothing else padding it out. "bottom:Npx" then reliably lands near the image's real edge regardless of any JS-injected sizing on inner slideshow elements. (Two earlier attempts positioned against a made-up ".skin-default" ancestor and a negative-margin pull — both guessed rather than checking what the home page's CSS actually targets.) */ .page-type-ad_landing_page .adlandingslidelist .view-content { position: relative; } .page-type-ad_landing_page .adlandingslidelist .views_slideshow_controls_text { position: absolute; bottom: 16px; left: 16px; z-index: 200; } .page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-next-processed, .page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-previous-processed { font-size: 0; display: inline-block; width: 87px; height: 87px; background-color: #5d8828; background-position: center center; background-repeat: no-repeat; } .page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-next-processed a, .page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-previous-processed a { color: transparent; text-decoration: none; } .page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-next-processed a:hover, .page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-previous-processed a:hover { text-decoration: none; } .page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-previous-processed { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAYCAYAAADKx8xXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANNJREFUeNqc0z8KwjAUBvCg0NKhB9B7uErBqUNO0isEHHoUt0CWzEInpx5DtyRQpxYcnpEipfRP3us3hAz5Qcj7smfIJEnChBDnqqquAOBQKI5jJqXMPHhCnxqFtNYXf/gNQ5ot6Be7BS3DAJqHCDSFSDSGBDTAKIooqIdpmjKlVEZAPSzL8uQ3L6DFMr8IoMfuiqK4tW37YFuS5/mh67qadNV/OOdHAh4XgICnlUPi+ZIj8PK3CmC7+tor2AZHtYAtas4zuCGVxDl39+hjjFFfAQYA0cHswRoKIzAAAAAASUVORK5CYII=); } .page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-next-processed { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAYCAYAAADKx8xXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQdJREFUeNpi6OjoEP///3/Lq1ev6mVlZbkYiAVATZuB+A8Q/z969OgsUVFRDmI1ooALFy6skpaW5iZZIwhcvXp1o4KCAh/JGkHg9u3b21VUVARJ1ggC9+/f36ulpSVCskYQePLkyRF9fX0JkjWCwMuXL0+amprKkKwRBN6+fXve2tpagWSNIPDx48erjo6OqiRrBIGvX7/ecnV11WAEcRhIBEBnXyBLIwgwkaMJaONqcvy4GehHblJDdQ0wVDlIjcelwHhkJTXlzAOmHGZS0+p0YFplJDV3TADmDpLzYwcwP5JcAjQCSwCSy5wqYJlDOBWcPXu2A6j+PRB/BpZyWcBSjqjUAxBgAEdLuXmdu655AAAAAElFTkSuQmCC); } .page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-pause-processed { display: none; }