/** * course-sections.css — the shared course-section component styles. * * Single source for the section components rendered by the shared parts * (parts/courses/*): careers + progression, entry requirements, modules, * assessment, facilities list, testimonial, advisers, apply, plus the section * scaffolding (.container, .section__header/__eyebrow) and the reveal animation. * Loaded on BOTH course templates, after the template sheet, so it is the single * definition; courses-v2.css keeps only V2-only chrome (hero, gallery, media * grid, age notice, scroll progress, buttons, base resets) and courses-legacy.css * the default hero/prose/fees. The component vars are aliased onto brand tokens * in the :root block below (course pages only). Reveal is driven by * js/course-reveal.js on both templates. */ /* Reveal-on-scroll. js/course-reveal.js (loaded on both course templates) adds .revealed as elements enter view, and reveals all immediately under reduced-motion / no IntersectionObserver, so content can't be left hidden. */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .reveal.revealed { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } /* Component var aliases onto brand tokens. On the V2 template these come from the inline :root remap in single-courses-fe.php; the legacy template has no such block, so scope the same aliases to the careers sections here. */ /* Component var aliases -> brand tokens for the sections copied from courses-v2.css. This sheet only loads on course pages, and nothing else on them uses --primary/--secondary, so :root is safe and covers every section. */ :root { /* SHEET-PRIVATE CUSTOM PROPERTIES. Every name is --cs-* prefixed and that prefix is load-bearing. This block used to declare bare names on :root, which IS , the same element the theme's own tokens resolve on. Template sheets load last in dncg_enqueue_cascade(), so those declarations won the whole page, not just this template. Course pages render the shared header and footer, so the chrome was inside the blast radius. Pure aliases (a value that was exactly a single global token reference) are deleted and their references now point straight at the global. Values are otherwise unchanged. Do not reintroduce an unprefixed name in this file. */ --cs-font-size-base: 1.2rem; --cs-font-size-sm: 1.2rem; --cs-font-size-lg: 1.35rem; --cs-font-size-xl: 1.5rem; --cs-radius-md: 12px; --cs-radius-xl: 24px; --cs-radius-2xl: 32px; --cs-radius-full: 9999px; --cs-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1); --cs-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); --cs-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); --cs-shadow-2xl: 0 25px 50px -12px rgba(var(--shadow-rgb), 0.25); --cs-growth-bg: linear-gradient(135deg, var(--success-tint) 0%, var(--success-tint-2) 100%); --cs-shadow-xl: 0 20px 25px -5px rgba(var(--shadow-rgb), 0.1); --cs-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --cs-font-size-2xl: 1.875rem; } /* ---- layout container ---- */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 2rem; } /* ---- section header ---- */ .section__header { text-align: center; margin-bottom: 4rem; } .section__header p { margin: 1rem auto 0; color: var(--text-muted); font-size: var(--cs-font-size-lg); } .section__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--cs-font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue); margin-bottom: 0.75rem; } .section__eyebrow svg { width: 16px; height: 16px; } /* ---- careers + progression (copied from courses-v2.css 1403-1990) ---- */ .progression-section { padding: 6rem 0; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); position: relative; overflow: hidden; } .progression-section::before { content: ""; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(var(--navy-rgb), 0.15) 0%, transparent 70%); pointer-events: none; } .progression-section .section__header { position: relative; z-index: 1; } .progression-section .section__header h2 { color: var(--white); } .progression-section .section__header p { color: rgba(var(--overlay-light-rgb), 0.7); } .progression-section .section__eyebrow { color: var(--accent-on-dark); } /* Career Paths Grid (2-column variant from Aviation) */ /* Career-path overview cards (navy band) — matched to the LMI .career-card look so both career-destination methods read the same: transparent, on-dark hairline + accent-on-dark left edge, white title, teal accents. */ .career-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-bottom: 2.4rem; position: relative; z-index: 1; } @media (max-width: 768px) { .career-paths { grid-template-columns: 1fr; } } .career-path { background: transparent; border: 1px solid rgba(var(--on-dark-rgb), .24); border-left: var(--card-edge) solid var(--accent-on-dark); border-radius: var(--radius-sm); padding: 1.8rem 1.9rem; } .career-path__header { margin-bottom: .7rem; } .career-path__title { font-size: 1.75rem; color: var(--white); margin-bottom: .2rem; } .career-path__subtitle { font-size: var(--fs-min); color: var(--accent-on-dark); } .career-path__desc { font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .82); margin-bottom: 1rem; line-height: 1.6; max-width: none; } .career-path__roles { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0; } .career-path__role { display: flex; align-items: baseline; gap: .5rem; font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .88); line-height: 1.3; } .career-path__role::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; background: var(--accent-on-dark); border-radius: 50%; margin-top: .45rem; } .career-path__note { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(var(--on-dark-rgb), .2); font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .82); display: flex; align-items: flex-start; gap: .6rem; } .career-path__note svg { width: 20px; height: 20px; color: var(--accent-on-dark); flex-shrink: 0; margin-top: 2px; } /* ======================================== Career Cards (salary-style from travel template) ======================================== */ .careers-section { padding: 6rem 0; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); position: relative; overflow: hidden; } .careers-section::before { content: ""; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(var(--blue-rgb), 0.2) 0%, transparent 70%); pointer-events: none; } .careers-section::after { content: ""; position: absolute; bottom: 200px; left: -150px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(var(--navy-rgb), 0.15) 0%, transparent 70%); pointer-events: none; } .careers-section .section__header { position: relative; z-index: 1; } .careers-section .section__header h2 { color: var(--white); font-family: var(--font-display); font-size: clamp(2.5rem, 5.5vw, 4rem); } .careers-section .section__header p { color: rgba(var(--overlay-light-rgb), 0.7); } .careers-section .section__eyebrow { color: var(--accent-on-dark); } /* Career-destination cards (navy band) — prototype: 2-up, on-dark hairline + accent-on-dark left edge, title + salary. */ .careers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-bottom: 2.4rem; position: relative; z-index: 1; } @media (max-width: 768px) { .careers-grid { grid-template-columns: 1fr; } } .career-card { background: transparent; border: 1px solid rgba(var(--on-dark-rgb), .24); border-left: var(--card-edge) solid var(--accent-on-dark); border-radius: var(--radius-sm); padding: 1.8rem 1.9rem; } .career-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; margin-bottom: .3rem; } .career-card__title { color: var(--white); font-size: 1.75rem; } .career-card__salary-value { flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; font-size: 1.4375rem; color: var(--accent-on-dark); font-variant-numeric: tabular-nums; } .career-card__salary-label { display: block; font-size: var(--fs-min); color: var(--accent-on-dark); margin-bottom: .6rem; } .career-card__desc { font-size: var(--fs-min); line-height: 1.6; color: rgba(var(--on-dark-rgb), .82); max-width: none; } /* Progression pathway — prototype process-step cards. 1–3 cards (pre / current / post) sharing the width via flex, with a dashed progress line + arrows through. */ .progression-wrapper { position: relative; z-index: 1; } .progression__title { color: var(--white); font-size: 1.75rem; margin-bottom: 1.2rem; } .progression__track { position: relative; display: flex; align-items: stretch; gap: 2.4rem; } /* Dashed connector lives ONLY in the gap between cards. The old full-width line spanned the whole track and, because the cards are translucent, showed through them and struck through the eyebrow text. */ .progression__step:not(:last-child)::before { content: ""; position: absolute; left: 100%; width: 2.4rem; top: 2.6rem; height: 2px; background: repeating-linear-gradient(90deg, rgba(var(--on-dark-rgb), .32) 0 9px, transparent 9px 17px); z-index: 0; } .progression__step { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; } .progression__step:not(:last-child)::after { content: "\2192"; position: absolute; right: -1.65rem; top: 2.6rem; transform: translateY(-50%); font-size: 1.5rem; line-height: 1; color: var(--accent-on-dark); z-index: 2; } .progression__card { height: 100%; display: flex; flex-direction: column; gap: .55rem; background: rgba(var(--on-dark-rgb), .04); border: 1px solid rgba(var(--on-dark-rgb), .22); border-top: var(--card-edge) solid var(--accent-on-dark); border-radius: var(--radius-sm); padding: 1.5rem 1.6rem; text-decoration: none; } .progression__step--current .progression__card { border-top-color: var(--white); background: rgba(var(--on-dark-rgb), .09); } a.progression__card:hover { background: rgba(var(--on-dark-rgb), .1); } .progression__eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-on-dark); } .progression__level { font-size: var(--fs-min); font-weight: 700; color: var(--accent-on-dark); } .progression__name { font-family: var(--font-display); font-weight: 800; font-size: 1.4375rem; line-height: 1.12; color: var(--white); } .progression__hints { display: flex; flex-direction: column; gap: .3rem; margin-top: .4rem; } .progression__hint { font-size: var(--fs-min); color: var(--accent-on-dark); text-decoration: none; line-height: 1.35; } .progression__hint:hover { text-decoration: underline; } @media (max-width: 768px) { .progression__track { flex-direction: column; gap: 1.6rem; } .progression__step:not(:last-child)::before { display: none; } .progression__step:not(:last-child)::after { content: "\2193"; left: 50%; right: auto; top: auto; bottom: -1.25rem; transform: translateX(-50%); } } /* ======================================== DSA Banner ======================================== */ .dsa-banner { background: rgba(var(--overlay-light-rgb), 0.1); backdrop-filter: blur(10px); border-radius: var(--cs-radius-xl); padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: center; gap: 1.5rem; border: 1px solid rgba(var(--overlay-light-rgb), 0.2); position: relative; z-index: 1; } .dsa-banner__icon { width: 48px; height: 48px; background: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--navy); flex-shrink: 0; } .dsa-banner__icon svg { width: 24px; height: 24px; } .dsa-banner__text { text-align: left; } .dsa-banner__title { font-weight: 700; color: var(--white); margin-bottom: 0.25rem; } .dsa-banner__desc { font-size: var(--cs-font-size-sm); color: rgba(var(--overlay-light-rgb), 0.7); } /* ==== Entry requirements + modules (copied from courses-v2.css, shared with the default template; .reveal is visible here via the rule above). ==== */ .entry-section { padding: 6rem 0 8rem; background: linear-gradient(180deg, var(--white) 0%, rgba(var(--blue-rgb), 0.03) 100%); } .entry-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; } .entry-grid--full { grid-template-columns: 1fr; max-width: 760px; } /* Entry-requirements — the "What You'll Need" column reads flush, not boxed: no panel ground/border/padding, just the heading, check list and note. */ .entry-card { background: none; border: 0; border-radius: 0; padding: 0; } .entry-card__header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; } .entry-card__icon { flex: 0 0 auto; width: 26px; height: 26px; color: var(--em-color); } .entry-card__icon svg { width: 100%; height: 100%; } .entry-card__header h3 { font-size: 2rem; margin: 0; } .requirements-list { list-style: none; display: flex; flex-direction: column; gap: .9rem; border-top: 1px solid var(--line); padding-top: 1.2rem; margin: 0; } .requirements-list__item { display: flex; align-items: flex-start; gap: .9rem; font-size: calc(var(--fs-min) * 1.5); line-height: 1.55; } .requirements-list__item:last-child { border-bottom: 0; } .requirements-list__check { flex: 0 0 auto; color: var(--em-color); display: flex; margin-top: .15rem; } .requirements-list__check svg { width: 28px; height: 28px; } .entry-note { margin-top: 1.4rem; background: var(--light); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.2rem 1.4rem; font-size: calc(var(--fs-min) * 1.5); line-height: 1.55; color: var(--navy); } .entry-note strong { color: var(--navy); } /* Pathways Card */ .pathways-card { background: linear-gradient(135deg, var(--light-grey) 0%, rgba(var(--blue-rgb), 0.05) 100%); border-radius: var(--cs-radius-2xl); padding: 2rem; height: fit-content; border: 2px solid rgba(var(--blue-rgb), 0.1); } .pathways-card__title { margin-bottom: 0.75rem; } .pathways-card__intro { font-size: var(--cs-font-size-base); color: var(--text-muted); margin-bottom: 1.5rem; } .pathway-option { display: block; background: var(--white); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1rem; border: 2px solid transparent; transition: all var(--cs-transition-fast); text-decoration: none; box-shadow: var(--shadow-sm); } .pathway-option:hover { border-color: var(--blue); transform: translateX(8px); box-shadow: var(--shadow-lg); } .pathway-option__title { font-weight: 600; color: var(--navy); margin-bottom: 0.25rem; } .pathway-option__desc { font-size: var(--cs-font-size-sm); color: var(--text-muted); } .pathway-option--highlight { border-color: var(--navy); background: linear-gradient(135deg, rgba(var(--navy-rgb), 0.1) 0%, var(--white) 100%); } .pathway-option--highlight .pathway-option__badge { display: inline-block; background: var(--navy); color: var(--navy); font-size: 1.1rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: var(--cs-radius-full); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; } /* ======================================== What You'll Learn Section (3-column) ======================================== */ .learn-section { padding: 3.6rem 0 3.2rem; background: var(--white); position: relative; } .learn-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 1.6rem; align-items: start; } /* Marketing Copy Column */ .learn-copy { padding-right: 1rem; } .learn-copy__eyebrow { display: inline-flex; align-items: center; gap: .75rem; font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: .8rem; } .learn-copy__eyebrow svg { width: 20px; height: 20px; color: var(--em-color); } .learn-copy__title { margin-bottom: 1.2rem; line-height: 1.1; font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 2.9rem); color: var(--text-heading); } .learn-copy__text { font-size: var(--fs-min); color: var(--ink); line-height: 1.7; margin-bottom: 1.1rem; max-width: 62ch; } .learn-copy__highlight { background: var(--blue); background-image: linear-gradient(135deg, rgba(var(--shadow-rgb), 0.15) 0%, rgba(var(--overlay-light-rgb), 0.1) 100%); padding: 0.15em 0.5em; border-radius: 6px; font-weight: 700; color: var(--white); box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.15); box-decoration-break: clone; } .learn-copy__callout { background: linear-gradient( 135deg, rgba(var(--blue-rgb), 0.08) 0%, rgba(var(--blue-rgb), 0.04) 100% ); border-radius: var(--radius-lg); padding: 1.5rem; border-left: 4px solid var(--blue); margin-top: 1.5rem; } .learn-copy__callout-title { font-weight: 700; color: var(--navy); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .learn-copy__callout-title svg { width: 20px; height: 20px; color: var(--blue); } .learn-copy__callout-text { font-size: var(--cs-font-size-sm); color: var(--text-muted); line-height: 1.6; } /* Units columns — prototype: white card, top accent edge, dot bullets. */ .units-card { background: var(--white); border: 1px solid var(--line); border-top: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); padding: 1.7rem 1.8rem; height: fit-content; } .units-card--core { border-top-color: var(--accent); } .units-card--practical { border-top-color: var(--em-color); } .units-card__header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; } .units-card__title { font-size: 1.5rem; color: var(--text-heading); margin: 0; } .units-card__count { flex: 0 0 auto; background: var(--light); padding: .35rem .8rem; border-radius: var(--radius-pill); font-size: var(--fs-min); font-weight: 700; color: var(--em-color); } .units-list { list-style: none; display: flex; flex-direction: column; gap: .7rem; margin: 0; } .units-list__item { display: flex; align-items: flex-start; gap: .75rem; font-size: var(--fs-min); line-height: 1.5; } .units-list__bullet { flex: 0 0 auto; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; margin-top: .55rem; } .units-card--practical .units-list__bullet { background: var(--em-color); } /* Units card — note/description text */ .units-card__note { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: var(--fs-min); line-height: 1.6; color: var(--muted); } .units-card__note p { margin: 0 0 .5rem; max-width: none; } .units-card__note p:last-child { margin-bottom: 0; } .units-card__note a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } .units-card__note a:hover { color: var(--link-hover); } /* ==== Assessment support cards (copied from courses-v2.css). ==== */ /* Assessment / parent-support cards — prototype: simple feature-card with a per-section accent edge (dblue for assessment, aud-parents for parents). */ .support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1.3rem; margin-bottom: 2rem; } .support-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.6rem 1.7rem; display: flex; flex-direction: column; gap: .5rem; } .support-card__icon { width: 40px; height: 40px; color: var(--em-color); margin-bottom: .3rem; } .support-card__icon svg { width: 100%; height: 100%; } .support-card__title { font-size: 1.4375rem; font-weight: 700; color: var(--text-heading); line-height: 1.12; } .support-card__desc { font-size: var(--fs-min); color: var(--muted); line-height: 1.6; flex-grow: 1; } .support-card__link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--link); font-size: var(--fs-min); margin-top: .4rem; } .support-card__link svg { width: 16px; height: 16px; } #assessment .support-card { border-left: var(--card-edge) solid var(--dblue); } #parents .support-card { border-top: var(--card-edge) solid var(--aud-parents); } /* ==== Facilities (copied from courses-v2.css) ==== */ .facilities-list { list-style: none; } .facilities-list__item { display: flex; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(var(--shadow-rgb), 0.05); transition: all var(--cs-transition-fast); } .facilities-list__item:hover { padding-left: 0.5rem; } .facilities-list__item:last-child { border-bottom: none; } .facilities-list__icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 20px rgba(var(--blue-rgb), 0.3); transition: all var(--cs-transition-spring); color: var(--white); } .facilities-list__icon svg { width: 28px; height: 28px; } .facilities-list__emoji { display: block; font-size: 28px; line-height: 1; font-style: normal; } .facilities-list__item:hover .facilities-list__icon { transform: scale(1.1) rotate(-5deg); } .facilities-list__title { font-weight: 700; color: var(--navy); margin-bottom: 0.25rem; } .facilities-list__desc { font-size: var(--cs-font-size-sm); color: var(--text-muted); } /* ==== Testimonial (copied from courses-v2.css; incl. parents-header, harmless/unused on the default template) ==== */ /* Standalone student testimonial — kept as a feature block, rebuilt on the design system: a navy panel with a portrait + name/course badge, a display-face quote, and an accent CTA. (Retired the rotating dashed ring, radial glow and speech bubble.) Shared by both course templates. */ .testimonial-section { padding: 3.6rem 0; } .testimonial-layout { display: grid; grid-template-columns: .85fr 1.25fr; gap: 2.6rem; align-items: center; background: var(--surface-dark); border-radius: var(--radius-lg); padding: 2.4rem 2.6rem; } .testimonial-visual { position: relative; min-width: 0; } .testimonial-image-wrapper { position: relative; max-width: 280px; margin-inline: auto; } .testimonial-circle { display: none; } .testimonial-image { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; } .testimonial-image img { width: 100%; height: 100%; object-fit: cover; } .testimonial-author-badge { position: absolute; left: 12px; bottom: 12px; background: var(--white); border-radius: var(--radius-sm); padding: .6rem .9rem; line-height: 1.15; } .testimonial-author__name { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-min); color: var(--navy); } .testimonial-author__course { font-size: var(--fs-min); color: var(--muted); } .testimonial-content { min-width: 0; } .testimonial-eyebrow { display: inline-block; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: 1rem; } .testimonial-quote { position: relative; } .testimonial-quote__icon { display: block; font-family: var(--font-display); font-weight: 800; font-size: 4rem; line-height: .7; color: var(--accent-on-dark); margin-bottom: .4rem; } .testimonial-quote__text { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.4; color: var(--white); margin: 0 0 1.4rem; max-width: none; } .testimonial-cta { margin-top: .4rem; } .testimonial-cta__link { display: inline-flex; align-items: center; gap: .5rem; color: var(--accent-on-dark); font-weight: 700; font-size: var(--fs-min); text-decoration: none; } /* typography.css has `a:hover { color: var(--link-hover) }` at (0,1,1), which beat the (0,1,0) rule above and repainted this link in the light-ground link colour on its navy panel (1.63:1). Hold the on-dark colour through hover. */ .testimonial-cta__link:hover { color: var(--accent-on-dark); text-decoration: underline; } .testimonial-cta__link svg { width: 18px; height: 18px; } @media (max-width: 64em) { .testimonial-layout { grid-template-columns: 1fr; } } /* ======================================== Parents Section ======================================== */ .parents-section { padding: 6rem 0; background: var(--light-grey); position: relative; } .parents-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, var(--aud-parents), var(--aud-parents-dark), var(--aud-parents)); } .parents-header { text-align: center; margin-bottom: 3.5rem; } .parents-header .section__eyebrow { color: var(--aud-parents); } .parents-header p { max-width: 600px; margin: 1rem auto 0; } /* ==== Advisers (copied from courses-v2.css) ==== */ .advisers-section { padding: 6rem 0; background: var(--white); position: relative; } .advisers-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, var(--aud-advisers), var(--aud-advisers-dark), var(--aud-advisers)); } .advisers-header { text-align: center; margin-bottom: 3rem; } .advisers-header .section__eyebrow { color: var(--aud-advisers); } /* Advisers — key facts cards */ .advisers-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 2.5rem; max-width: 900px; margin-left: auto; margin-right: auto; } .advisers-fact { background: var(--neutral-100); border-radius: 14px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 110px; padding: 1.25rem 0.75rem 1rem; } .advisers-fact__value { font-size: clamp(1.2rem, 1.1vw, 1.25rem); /* phase 2.5: floor raised (was min 0.85rem) */ font-weight: 800; color: var(--aud-advisers-dark); margin: 0 0 0.3rem; line-height: 1.25; } .advisers-fact__label { font-size: 1.1rem; color: var(--muted); margin: 0; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; } @media (max-width: 768px) { .advisers-facts { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .advisers-facts { grid-template-columns: repeat(2, 1fr); } } .advisers-progression { background: linear-gradient( 135deg, rgba(var(--aud-advisers-rgb), 0.08) 0%, rgba(var(--aud-advisers-rgb), 0.04) 100% ); border-radius: var(--radius-lg); padding: 1.5rem 2rem; margin-bottom: 2rem; border-left: 4px solid var(--aud-advisers); } .advisers-progression__label { font-weight: 700; color: var(--navy); margin-bottom: 0.5rem; } .advisers-progression__path { font-size: var(--cs-font-size-base); color: var(--text-muted); margin-bottom: 0.5rem; } .advisers-progression__path:last-child { margin-bottom: 0; } .advisers-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } /* ==== Apply (copied from courses-v2.css) ==== */ /* Apply CTA band — prototype: navy-deep ground, left-aligned, horizontal stripe. */ .apply-section { padding: 3.8rem 0; background: var(--navy-deep); color: var(--white); position: relative; overflow: hidden; } .apply-content { position: relative; max-width: 70ch; margin-inline: auto; text-align: center; z-index: 1; } .apply-content h2 { color: var(--white); margin-bottom: .8rem; font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.125rem); line-height: 1; } .apply-content > p { color: rgba(var(--on-dark-rgb), .85); margin-bottom: 1.8rem; font-size: 1.3125rem; line-height: 1.6; max-width: none; } .apply-actions { display: flex; gap: .875rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1.4rem; } .apply-section .btn--outline, .apply-section .btn--white-outline { color: var(--white); border-color: rgba(var(--on-dark-rgb), .6); } .apply-contact { color: rgba(var(--on-dark-rgb), .8); font-size: var(--fs-min); max-width: none; } .apply-contact a { color: var(--accent-on-dark); font-weight: 700; } .apply-contact a:hover { text-decoration: underline; } /* ==== Facilities reuses the split_panel block; course-only tweaks. ==== */ .split-panel .facilities-list { margin-top: 2rem; } .facilities__caption { margin-top: 0.9rem; display: flex; align-items: center; gap: 0.55rem; font-size: var(--fs-min); font-style: italic; color: var(--text-muted); } .facilities__caption::before { content: ""; flex: 0 0 auto; width: 18px; height: 2px; border-radius: 999px; background: var(--accent); } /* ============================================================================ Course hero (unified — both templates). Reskinned to the course-template prototypes: page-title band, 1.4fr/1fr grid, audience-rule eyebrow, meta, intro, actions and a stats strip; aside "Key Information" card + footer panel. ============================================================================ */ .hero-courses { position: relative; overflow: hidden; background: var(--page-title-bg); } .hero-courses__bg { position: absolute; inset: 0; opacity: var(--page-title-media-opacity); } .hero-courses__bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(1) brightness(.45); } .hero-courses__bg-stripe { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(var(--on-dark-rgb), .10) 0 14px, rgba(var(--on-dark-rgb), .03) 14px 28px); } .hero-courses__tint { position: absolute; inset: 0; background: var(--hero-tint); mix-blend-mode: color; opacity: .9; } .hero-courses__scrim { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(var(--tint-rgb), .94) 0%, rgba(var(--tint-rgb), .62) 100%); } .hero-courses__grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.8rem; align-items: start; padding-block: 3.6rem 3.2rem; } .hero-courses__text { min-width: 0; } .hero-courses__eyebrow { color: var(--page-title-eyebrow); margin-bottom: 1rem; } .hero-courses__eyebrow a { color: var(--page-title-eyebrow); text-decoration: none; } .hero-courses__eyebrow a:hover { text-decoration: underline; } .hero-courses__title { color: var(--page-title-fg); font-size: clamp(2.6rem, 5vw, 3.9rem); line-height: var(--display-lh-hero); letter-spacing: var(--display-track-hero); max-width: 22ch; margin-bottom: 1rem; } .hero-courses__title em { color: var(--page-title-em); } .hero-courses__meta { font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem; color: var(--page-title-eyebrow); margin-bottom: 1.3rem; max-width: none; } .hero-courses__intro { font-size: 1.3125rem; line-height: 1.6; color: var(--page-title-muted); max-width: 58ch; margin-bottom: 1.8rem; } .hero-courses__actions { display: flex; gap: .875rem; flex-wrap: wrap; margin-bottom: 2rem; } .hero-courses .btn--white-outline { color: var(--page-title-fg); border-color: var(--page-title-border); } /* Next open event date/time under the Book Open Event button. */ .hero-courses__event-date { font-size: var(--fs-min); font-weight: 700; color: var(--page-title-muted); margin: -1.3rem 0 0; } .hero-courses__stats { display: flex; gap: 2.4rem; flex-wrap: wrap; border-top: 1px solid var(--page-title-rule); padding-top: 1.4rem; margin: 0; } .hero-courses__stats dt { font-family: var(--font-display); font-weight: 800; font-size: 2.125rem; color: var(--page-title-eyebrow); line-height: 1; } .hero-courses__stats dd { margin: .4rem 0 0; font-size: var(--fs-min); color: var(--page-title-muted); } .hero-courses__aside { display: flex; flex-direction: column; gap: 1.2rem; } .hero-courses-info { background: var(--white); border-radius: var(--cs-radius-md); overflow: hidden; box-shadow: 0 18px 50px rgba(var(--tint-rgb), .34); } .hero-courses-info__title { font-size: 1.625rem; color: var(--text-heading); padding: 1.4rem 1.6rem .9rem; } .hero-courses-info-data { display: flex; flex-direction: column; gap: .8rem; padding: 0 1.6rem 1.2rem; } .hero-courses-info-data li { display: flex; justify-content: space-between; gap: 1.1rem; border-bottom: 1px solid var(--line); padding-bottom: .7rem; } .hero-courses-info-data li:last-child { border-bottom: 0; } .hero-courses-info__label { font-size: var(--fs-min); font-weight: 700; color: var(--muted); } .hero-courses-info__value { font-size: var(--fs-min); font-weight: 700; color: var(--navy); text-align: right; max-width: 24ch; } .hero-courses-info__foot { background: var(--light); border-top: 1px solid var(--line); padding: 1.3rem 1.6rem; display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; } .hero-courses-info__foot p { font-size: var(--fs-min); font-weight: 700; line-height: 1.55; color: var(--navy); max-width: none; } @media (max-width: 64em) { .hero-courses__grid { grid-template-columns: 1fr; } } /* ============================================================================ Course page-nav — single sticky bar (prototype). Sticky + flex come from base header.css (.page-navigation / .page-nav); these add the label and the right-pushed Apply button. ============================================================================ */ /* One line, always: label + anchor list (which shrinks / overflows into the "More" menu via page-nav.js) + a fixed action group pinned right. The action group never wraps below. */ .course-page-nav .page-nav { gap: 1.4rem; flex-wrap: nowrap; } .course-page-nav .page-nav > ul { min-width: 0; } .page-nav__label { font-size: var(--fs-meta); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; margin: 0; } .course-page-nav__actions { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: .55rem; } .course-page-nav__actions .btn { flex: 0 0 auto; white-space: nowrap; } /* Open Event is a btn--outline (white-on-dark by default); recolour it for the white nav bar so it is actually visible. */ .course-page-nav .course-page-nav__event { padding: .6rem 1.1rem; color: var(--navy); border-color: var(--navy); background: transparent; } .course-page-nav .course-page-nav__event:hover { background: var(--navy); color: var(--white); border-color: var(--navy); } .course-page-nav__apply { padding: .6rem 1.3rem; } /* ---- HE course tabs (ucdon/ucnl) ------------------------------------------- Course Structure / Assessment Methods / Progression are collapsed into tabs by parts/courses/course-he-tabs.php. Each panel holds a COMPLETE section, so: (1) the tab label already names it — its own big centred header repeats the label and breaks the page rhythm, so the FIRST section's header is hidden (only the first, so a panel holding two sections keeps the second's heading); (2) the section brings its own vertical padding, which would push the content far below the rail. The generic tabbed_content panel chrome is excluded from .course-he-tabs in that block's stylesheet. */ .course-he-tabs > [role="tabpanel"] > section:first-child > .container > .section__header { display: none; } .course-he-tabs > [role="tabpanel"] > section { padding-top: 0; padding-bottom: 3.2rem; } .course-he-tabs > [role="tabpanel"] > section:first-child > .container > * { margin-top: 0; } /* Line the rail up with the panel content: the prose block is a centred 900px reading measure, so match it rather than running the tabs the full container width, which read as belonging to nothing. */ .course-he-tabs > .container > .tabbed-menu { max-width: 900px; margin-inline: auto; }