/* * Challenger landing pages - program template. * * Lifted verbatim from the Great Exposure handoff (Oxford PCP Barrie LP v1.dc.html) * so the design stays pixel-faithful. Two deliberate changes from the original: * * 1. The mobile hero photo, which was hardcoded into a media query, now reads * --lp-hero-mobile so a single stylesheet serves all eight program pages. * 2. Nothing else. Inline styles remain on the elements, as delivered. * * The [data-energy] and [data-urgency] blocks are the designer's tweak knobs. * The templates emit the shipped defaults (Cinematic / Standard); the other * variants are kept so those levers stay available without a redesign. */ html,body{margin:0;padding:0;background:#f2f7fa;color:#22303a;font-family:'Figtree',system-ui,sans-serif;-webkit-font-smoothing:antialiased} a{color:#1a4a63;text-decoration:none}a:hover{color:#c78a12} *{box-sizing:border-box} input,select,textarea,button{font-family:'Figtree',system-ui,sans-serif} @keyframes ekgTravel{to{stroke-dashoffset:-100}} @keyframes ekgScan{to{stroke-dashoffset:-480}} @keyframes vitalBlink{0%,55%{opacity:1}75%,100%{opacity:.15}} @keyframes bannerShine{0%{transform:translateX(-120%) skewX(-14deg);opacity:0}8%{opacity:1}38%{opacity:1}46%{transform:translateX(320%) skewX(-14deg);opacity:0}100%{transform:translateX(320%) skewX(-14deg);opacity:0}} @keyframes calWiggle{0%,84%,100%{transform:rotate(0)}87%{transform:rotate(-10deg)}90%{transform:rotate(9deg)}93%{transform:rotate(-6deg)}96%{transform:rotate(3deg)}} @keyframes formIn{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}} @keyframes haloBloom{from{opacity:0}to{opacity:.75}} @keyframes chipFlash{0%{box-shadow:0 0 0 0 rgba(224,164,32,.75)}70%{box-shadow:0 0 0 15px rgba(224,164,32,0)}100%{box-shadow:0 0 0 0 rgba(224,164,32,0)}} @keyframes sirenGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(246,132,31,0))}50%{filter:drop-shadow(0 0 10px rgba(246,132,31,.9))}} @keyframes btnBreathe{0%,86%,100%{transform:scale(1)}93%{transform:scale(1.045)}} @keyframes lightsSweep{0%{transform:translateX(-140%);opacity:0}6%{opacity:.55}26%{opacity:.55}34%{transform:translateX(360%);opacity:0}100%{transform:translateX(360%);opacity:0}} @keyframes ekgDraw{0%{stroke-dashoffset:700;opacity:0}10%{opacity:1}65%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}} #mobile-cta{display:none} #hero-mobile-img{display:none} /* * Clearance for the sticky mobile bar comes from the footer's own * padding-bottom (104px, below) -- the bar measures 69px, so the footer already * reserves more than enough. The page carried another 180px on top of that, * which was 180px of empty navy under the footer and nothing else. If the * footer padding ever shrinks below the bar height, put the difference here. */ @media (max-width:760px){#form-head{font-size:17px !important;line-height:1.28 !important;padding-right:0 !important;max-width:none !important;letter-spacing:.2px !important}} @media (min-width:761px) and (max-width:1120px){ #hero-scrim{background:linear-gradient(90deg,rgba(5,13,24,.96) 0%,rgba(5,13,24,.88) 34%,rgba(5,13,24,.55) 60%,rgba(5,13,24,.35) 80%,rgba(5,13,24,.5) 100%) !important} } @media (max-width:760px){ #hero-photo,#hero-scrim{display:none !important} #mobile-cta{display:flex !important} header img{height:28px !important} header>div{padding:10px 14px !important;gap:8px !important;flex-wrap:nowrap !important} header>div>div{gap:8px !important;flex-wrap:nowrap !important} [data-m="phone-label"]{display:none !important} [data-m="phone-link"]{display:none !important} [data-m="header-cta"]{padding:10px 15px !important;font-size:13px !important;white-space:nowrap;flex-shrink:0} [data-m="cta-full"]{display:none !important} [data-m="cta-short"]{display:inline !important} [data-m="door-star"]{display:none !important} [data-m="hero-stats"]{flex-direction:column !important;gap:16px !important} [data-m="stat-div"]{display:none !important} [data-m="stat"]{display:flex !important;align-items:center !important;gap:14px !important;padding:0 !important} [data-m="stat"] svg{margin-bottom:0 !important;flex-shrink:0} [data-m="stat"]>div{margin-top:0 !important} main{padding:34px 20px 30px !important} [data-m="privacy"]{justify-self:start !important} footer{padding-bottom:104px !important} #hero-mobile-img{display:block !important;position:relative;height:240px;background:#081525 var(--lp-hero-mobile,none) 64% 20%/cover no-repeat;background-size:auto 118%;overflow:hidden} #hero-mobile-img::after{content:'';position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(180deg,rgba(8,21,37,0),rgba(8,21,37,.72) 62%,#081525)} #hero-mobile-img .bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#f6841f,#ff5a3c 45%,#e0a420);z-index:2} /* 1 — never let the form card force horizontal scroll on 360px phones */ #lead-form{min-width:0 !important;flex:1 1 auto !important;width:100% !important} /* 2 — shorter photo band so the headline and form arrive sooner */ #hero-mobile-img{height:240px !important} /* 3 — three trust points, not five */ [data-m="gear"]{margin-bottom:26px !important} [data-m="gear"]>div:nth-child(n+4){display:none !important} /* 4 — stats become one compact row instead of three stacked lines */ [data-m="hero-stats"]{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:12px !important;flex-direction:row !important} [data-m="stat"]{display:block !important;text-align:center;min-width:0 !important;padding:0 !important} [data-m="stat"] svg{display:block !important;width:20px !important;height:20px !important;margin:0 auto 7px !important} [data-m="stat"]>div{font-size:19px !important} [data-m="stat"]>div+div{font-size:9px !important;letter-spacing:.8px !important;line-height:1.45 !important} /* 5 — tighten the intake break */ [data-m="intake-break"]{padding:34px 20px 30px !important} /* 7 — the Ontario map is unreadable at phone width */ [data-m="map-card"]{display:none !important} } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;animation-delay:0ms !important;transition-duration:.001ms !important} #hero-mobile-img{animation:none !important} } @keyframes heroSweep{0%{left:-45%}55%{left:105%}100%{left:105%}} @keyframes heroFade{from{opacity:0}to{opacity:1}} @keyframes heroDrift{from{background-position:64% 20%;background-size:auto 118%}to{background-position:52% 34%;background-size:auto 140%}} @keyframes starBurst{0%{transform:translateY(-50%) scale(.15);opacity:0}18%{opacity:1}100%{transform:translateY(-50%) scale(2.6);opacity:0}} @keyframes formHalo{0%,100%{opacity:.75}50%{opacity:1}} @keyframes rollDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}} /* Uniform hero band — pin photo to the centered 1320px column so the crop is * identical on every desktop width. Program pages only: this cancels the * inline translateX(-7%) scale(1.15) on that template's hero. The home * template shares this stylesheet but ships its own untransformed crop * (background-position:center 40%), which these !important rules would * otherwise overwrite -- hence the :not([data-lp-home]) guard. */ body:not([data-lp-home]) #hero-photo{left:50% !important;right:auto !important;transform:translate(-59%,0) scale(1) !important;transform-origin:top center;width:min(100%,1320px) !important;background-position:58% 22% !important} /* The card is the tall half of the hero grid, so the hero -- and the photo that fills it -- is only ever as tall as the card. --lp-card-lock is the height the card starts at, written by lockCardHeight() in js/lp-program.js so that steps two and three, which carry less, cannot shrink the hero out from under the photo. It stays a floor, never a ceiling, and with no JS this reads exactly as the 662px it always did. */ @media (min-width:761px){#hero-main{min-height:750px}#lead-card{min-height:max(662px,var(--lp-card-lock,0px)) !important}} /* ---- Tweak: hero energy ---- */ [data-energy="Composed"] #hero-photo>div{display:none} [data-energy="Composed"] #hero-scrim{background:linear-gradient(90deg,rgba(5,13,24,.93) 0%,rgba(5,13,24,.82) 32%,rgba(5,13,24,.5) 60%,rgba(5,13,24,.3) 78%,rgba(5,13,24,.45) 100%) !important} [data-energy="Composed"] #hero-mobile-img{height:240px !important;animation:none !important} [data-energy="Composed"] #hero-mobile-img .bar{height:2px;background:rgba(246,132,31,.7)} [data-energy="Adrenaline"] #hero-photo>div{animation-duration:5.5s !important;animation-delay:1s !important;width:46%;filter:blur(5px)} [data-energy="Adrenaline"] #hero-scrim{background:linear-gradient(90deg,rgba(5,13,24,.92) 0%,rgba(5,13,24,.66) 26%,rgba(5,13,24,.06) 54%,rgba(255,70,40,.07) 76%,rgba(5,13,24,.4) 100%) !important} [data-energy="Adrenaline"] #hero-mobile-img{height:420px !important} [data-energy="Adrenaline"] #hero-mobile-img .bar{height:6px} /* ---- Tweak: urgency ---- */ [data-urgency="Quiet"] [data-m="intake-banner"]{background:#194963 !important} [data-urgency="Quiet"] [data-m="intake-sweep"]{display:none} [data-urgency="Quiet"] [data-m="intake-banner"] svg{animation:none !important} [data-urgency="Pressing"] [data-m="intake-banner"]{background:linear-gradient(90deg,#f6841f,#ff5a3c) !important} [data-urgency="Pressing"] [data-m="intake-sweep"]{animation-duration:3.4s !important} [data-urgency="Pressing"] #mobile-cta button{animation:btnBreathe 3s ease-in-out infinite} [data-urgency="Pressing"] [data-m="header-cta"]{animation:btnBreathe 4.2s ease-in-out infinite} /* --------------------------------------------------------------------------- * Component states. * * The handoff carried these as inline style strings recomputed by React on * every render ({{ t.bg }}, {{ cy.bd }}, {{ ctaBarT }}). Server-rendered markup * cannot do that, so the states live here and JS only flips a data attribute. * ------------------------------------------------------------------------ */ .lp-input{padding:12px;border:1px solid #cfdae1;border-radius:12px;font-size:15px;width:100%;color:#22303a;background:#fff} .lp-input::placeholder{color:#8b9aa6} .lp-input:focus{outline:2px solid #f6841f;outline-offset:1px;border-color:#f6841f} .lp-chip{border:1.5px solid #e3e9ee;background:#fff;box-shadow:0 3px 0 #c6d2da,0 6px 12px -4px rgba(0,0,0,.35)} .lp-chip[data-on="1"]{border-color:#f6841f;background:#fdeedd;box-shadow:0 3px 0 #e0740f,0 6px 12px -4px rgba(0,0,0,.35)} .lp-chip:hover{transform:translateY(-1px)} .lp-chip:active{transform:translateY(2px);box-shadow:0 1px 0 #c6d2da,0 2px 5px -2px rgba(0,0,0,.3)} .lp-yn{border:1.5px solid #cfdae1;background:#fff} .lp-yn[data-on="1"]{border-color:#f6841f;background:#fdeedd} button[data-lp-next]:hover,button[data-lp-submit]:hover,[data-m="header-cta"]:hover,[data-lp-scroll-form]:hover{background:#e0740f} button[data-lp-submit][disabled]{opacity:.65;cursor:default} #mobile-cta[data-on="0"]{transform:translateY(120%)} #mobile-cta[data-on="1"]{transform:translateY(0)} /* Pills in the navy card under the overview timeline. A class, not inline styles, because the lit state below has to be able to win -- an inline background would beat any stylesheet rule. `is-on` is the statically lit pill (P/OTA's Toronto campus); `data-active` is the one lp-program.js lights because it is the next intake, and it also fills [data-lp-pill-tag] with the day countdown. */ .lp-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#cfdae4;border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:700;letter-spacing:1px;} .lp-pill.is-on,[data-lp-intake-pill][data-active="1"]{background:#e0a420;color:#1d2a35;border-color:transparent;font-weight:800;padding:8px 16px} /* Reveal-on-scroll sections. Visible by default so the page still reads with JS disabled or blocked -- a paid-traffic page must never render blank. */ [data-lp-reveal]{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease} .js [data-lp-reveal]:not([data-revealed]){opacity:0;transform:translateY(24px)} .lp-prose p{margin:0 0 16px;line-height:1.7} .lp-prose h3{font-size:19px;font-weight:700;color:#1c4966;margin:0 0 8px} .lp-prose strong{color:#13253a} .lp-prose a{color:#1a4a63} /* -------------------------------------------------------------------------- * Homepage field-of-study cards. * * Two states out of one markup: expanded while the visitor is choosing, and a * compact row once a field is picked so the program list has room. Each card * carries its own palette as custom properties set inline by the template. * ------------------------------------------------------------------------ */ [data-lp-fac-grid]{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;background:rgba(9,25,43,.35);padding:12px;border-radius:16px;box-shadow:inset 0 2px 10px rgba(0,0,0,.35)} /* Any author `display` outranks the browser's [hidden] rule, so every block that script hides has to say so itself. Missing one of these is why a step or a panel renders when it should not. */ [data-lp-fac-grid][hidden], [data-lp-prog-panel][hidden], [data-lp-progress][hidden], [data-lp-campus][hidden], [data-lp-message][hidden], /* .lp-prog was the one that got missed. Its display:flex below beat [hidden], so the field of study never actually narrowed the list: picking Healthcare left all twenty-two programs on screen and clicking one of the other thirteen chose a program the list did not offer. */ .lp-prog[hidden]{display:none !important} .lp-fac{position:relative;display:flex;min-width:0} .lp-fac-glow{position:absolute;inset:4px;border-radius:18px;background:var(--fc-glow);filter:blur(20px);z-index:0;pointer-events:none;transition:opacity .25s} .lp-fac-card{position:relative;z-index:1;flex:1;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:11px;border:2px solid #ffffff;background:var(--fc-card);color:#16324e;border-radius:15px;padding:16px 14px;font-family:inherit;font-size:17px;font-weight:800;cursor:pointer;text-align:left;min-width:0;line-height:1.2;box-shadow:0 14px 28px -10px rgba(0,0,0,.5);transition:.25s} .lp-fac-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 24px 44px -12px rgba(0,0,0,.6),0 0 0 4px rgba(246,132,31,.2)} .lp-fac-accent{position:absolute;top:0;left:0;right:0;height:4px;background:var(--fc-icon)} .lp-fac-icon{width:46px;height:46px;border-radius:50%;background:var(--fc-circle);color:var(--fc-icon);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.25s} .lp-fac-icon svg{width:23px;height:23px;transition:.25s} .lp-fac-body{display:flex;flex-direction:column;gap:4px;min-width:0} .lp-fac-name{overflow:hidden;text-overflow:ellipsis} .lp-fac-tag{font-size:11.5px;font-weight:600;color:#55636d;line-height:1.4} .lp-fac-pill{align-self:flex-start;background:var(--fc-pill-bg);color:var(--fc-pill-c);border-radius:999px;padding:3px 8px;font-size:10px;font-weight:800;margin-top:3px} /* Program list. */ /* The scrolling window onto the list. Its height lives here rather than inline so the dialog can give it the room it has -- an inline max-height would outrank the override below. */ .lp-prog-list{max-height:264px;overflow-y:auto} .lp-prog{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#ffffff;border:none;border-bottom:1px solid #eef3f7;padding:11px 14px;font-family:inherit;font-size:13.5px;font-weight:700;color:#16324e;cursor:pointer;transition:filter .15s} .lp-prog:hover{filter:brightness(.96)} .lp-prog-dot{width:18px;height:18px;border-radius:50%;border:2px solid #cfdae1;background:#ffffff;display:flex;align-items:center;justify-content:center;flex-shrink:0} .lp-prog-dot svg{display:none} .lp-prog-body{flex:1;min-width:0;display:grid;gap:2px} .lp-prog-name{line-height:1.3} .lp-prog-sub{font-size:11px;font-weight:700;color:#6b7f8e;line-height:1.35} .lp-prog-arrow{font-size:15px;font-weight:800;color:#b9c7d2;line-height:1} .lp-prog[aria-pressed="true"]{background:#fdeedd} .lp-prog[aria-pressed="true"] .lp-prog-dot{border-color:#f6841f;background:#f6841f} .lp-prog[aria-pressed="true"] .lp-prog-dot svg{display:block} .lp-prog[aria-pressed="true"] .lp-prog-arrow{color:#e0740f} @media (max-width:760px){ [data-lp-fac-grid]{gap:8px;padding:8px} .lp-fac-card{padding:12px 11px;font-size:15px} .lp-fac-pill{display:none} } /* The panel's own display must live here, not inline: an inline display beats the [hidden] rule and the program list would show before a field is picked. */ .lp-prog-panel{display:grid;gap:10px;margin:16px 0} .lp-prog-panel[hidden]{display:none} /* In the stepped layout the list is a step of its own and the step stack does the spacing, so that margin would only pad the top of the dialog. The single-form layout keeps it: there the list still follows the field grid. */ [data-lp-step="2"]>.lp-prog-panel{margin:0} /* The close control belongs to focus mode; without this it sits over the banner on every page load. */ #focus-x{display:none} #lead-form[data-focus="on"] #focus-x{display:flex} /* -------------------------------------------------------------------------- * Focus mode. * * Past step one the form leaves the hero and becomes a centred dialog over a * dimmed page -- the delivered card does this off `step > 1`, not off a * separate control. Desktop only: on a phone the card already fills the width. * * The two templates lift different things, and the difference matters. The * homepage lifts the whole column. The program pages lift only #lead-card and * leave the column standing, because there the card is the tall half of the * hero: take it out of the flow and the photo collapses at the exact moment * the visitor commits to the form -- the jump --lp-card-lock exists to stop. * ------------------------------------------------------------------------ */ @keyframes focusZoom{from{opacity:0;transform:scale(.82) translateY(18px)}to{opacity:1;transform:scale(1) translateY(0)}} @keyframes focusDim{from{opacity:0}to{opacity:1}} /* The centring translate has to ride along inside the keyframe: the program card is centred with a transform, and a zoom that animated `transform` on its own would drop it into the bottom-right corner for the length of the animation. */ @keyframes cardZoom{from{opacity:0;transform:translate(-50%,-50%) scale(.86)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} @media (min-width:761px){ /* ---- homepage: the whole column becomes the dialog ---- */ [data-lp-home] #lead-form[data-focus="on"]{position:fixed !important;inset:0 !important;z-index:200 !important;flex:none !important;min-width:0 !important;display:flex;align-items:center;justify-content:center;padding:28px} [data-lp-home] #lead-form[data-focus="on"]::before{content:'';position:fixed;inset:0;background:rgba(4,12,22,.74);backdrop-filter:blur(7px);animation:focusDim .35s ease both} /* The card is the only div in here; #focus-x is a button, so it is safe to target by element rather than by position the way the handoff does. */ [data-lp-home] #lead-form[data-focus="on"]>.lp-card{position:relative;z-index:1;width:min(760px,92vw);max-height:92vh;overflow:auto;transform-origin:center;animation:focusZoom .42s cubic-bezier(.2,.9,.25,1.08) both;box-shadow:0 50px 120px -30px rgba(0,0,0,.9)} [data-lp-home] #lead-form[data-focus="on"] form{padding:26px 46px 34px !important} [data-lp-home] #lead-form[data-focus="on"] [data-lp-question]{font-size:30px !important;max-width:28ch !important} /* Step two is nothing but the program list, and the dialog has far more room than the hero card did -- 264px there scrolls for no reason. */ [data-lp-home] #lead-form[data-focus="on"] .lp-prog-list{max-height:min(52vh,460px)} /* ---- program pages: only the card is lifted ---- */ body:not([data-lp-home]) #lead-form[data-focus="on"]::before{content:'';position:fixed;inset:0;z-index:200;background:rgba(4,12,22,.74);backdrop-filter:blur(7px);animation:focusDim .35s ease both} /* The emptied column holds the height the card measured into it, so the hero keeps its shape around the gap. --lp-card-lock is written here rather than on the card for exactly this reason; the card still reads it by inheritance, so its own floor above is unchanged. */ body:not([data-lp-home]) #lead-form[data-focus="on"]{min-height:max(662px,var(--lp-card-lock,0px))} /* Everything this card carries inline -- its position, its overflow, the min-height:100% and its entrance animation -- has to be beaten outright. The transform is the one that must NOT be !important: an important declaration outranks a running animation, so marking it would hold the card still and leave cardZoom animating nothing but opacity. Plain, it is the resting value the keyframes animate to. */ body:not([data-lp-home]) #lead-form[data-focus="on"] #lead-card{position:fixed !important;top:50%;left:50%;transform:translate(-50%,-50%);width:min(560px,92vw);max-height:92vh;min-height:0 !important;overflow:auto !important;z-index:201;animation:cardZoom .42s cubic-bezier(.2,.9,.25,1.08) both !important;box-shadow:0 50px 120px -30px rgba(0,0,0,.9)} /* A blurred orange halo around a column with nothing in it reads as a hole. */ body:not([data-lp-home]) #lead-form[data-focus="on"] [data-m="form-glow"]{opacity:0} } /* Step containers: display lives here, never inline. An inline display wins over [hidden] and every step would render at once. */ .lp-step{display:grid;gap:12px} .lp-step[hidden]{display:none} /* The sticky header steps aside for the mobile CTA bar: the two are driven from one scroll computation, so the header is never up while the bar is down. Desktop keeps its header -- the delivered card hides it there too, but that was not what was asked for. */ [data-lp-header]{transition:transform .28s ease} @media (max-width:760px){ [data-lp-header][data-hidden="1"]{transform:translateY(-110%)} /* * Mobile layering, bottom to top: the sticky CTA bar (50), the form card * (55), the header (60 here, 80 on the homepage). * * The card has to win over the bar. Both carry the same "Request Program * Details" button, and the bar's copy riding over the card's own put two of * the same button in one screen, which reads as two different actions. * * It has to keep losing to the header, though -- lift it over that and * scrolling the card up paints it across the sticky nav. Hence a rung * between the two rather than simply raising the card. */ #lead-form{z-index:55} } /* -------------------------------------------------------------------------- * Closing pitch (#bottom-pitch). * * The section closes on a second copy of the form card's opening step, and * that card is desktop only. Below 761px it comes out and the pitch column's * orange button takes its place, scrolling to the hero card -- as delivered. * * Both displays live here rather than inline, because inline would beat the * media query and leave the phone with either two cards or no call to action * at all. * ------------------------------------------------------------------------ */ [data-m="pitch-btn"]{display:none} @media (max-width:760px){ #lead-form-2{display:none !important} [data-m="pitch-btn"]{display:inline-flex !important} #bottom-pitch{padding:48px 20px !important} #bottom-pitch h2{font-size:28px !important} } /* Above the phone breakpoint but below the width the two columns need -- a tablet held portrait is the real case -- they stack, and the delivered flex-basis leaves a 440px card sitting in the left half of a 780px row with nothing beside it. Once it is on a row of its own it should have the row. Important because the basis it is beating is inline on the column. */ @media (min-width:761px) and (max-width:900px){ #lead-form-2{flex:1 1 100% !important;min-width:0 !important} }