/* ============================================================ MAIN ============================================================ */ main#all-programs { display: grid; align-content: flex-start; } /* main#all-programs .wrapper { padding-top: 0; padding-bottom: 0; }*/ /* ============================================================ NAV GRADIENT OVERLAY ───────────────────────────────────────────────────────────── Fixed div — first child of . Sits above everything via z-index but pointer-events:none so nav links stay fully clickable. Height = utility bar (--top-bar-h 40px) + nav (--nav-h 80px). Hidden completely on mobile (gradient not in mobile Figma). ============================================================ */ .ap-nav-gradient { top: 0; left: 0; width: 100%; /* height: calc(var(--top-bar-h, 40px) + var(--nav-h, 80px));*/ height: 176px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.30) 100%); pointer-events: none; z-index: 999; /* below nav dropdowns but above page content */ } /* ============================================================ SECTION 0 — INTRO ───────────────────────────────────────────────────────────── SVG V-shape background ============================================================ */ .ap-intro { background: url('/Files/templates/main-2026/images/big_v.svg') center top no-repeat; background-size: 100% auto; max-width: 1440px; margin: 0 auto; position: relative; } /* ── Two-column inner layout ── */ .ap-intro__inner { padding-top: 48px; padding-bottom: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .ap-intro__desc { margin-bottom: 24px; } /* ── Heading — colour override only, type from base.css h1 ── */ .ap-intro__title { color: var(--vcc-midnight-violet, #2C1224); margin-bottom: 24px; } /* ── Body copy ── */ .ap-intro__desc p { color: var(--vcc-shadow-grey, #272932); margin-bottom: 16px; } .ap-intro__desc p:last-child { margin-bottom: 0; } /* ── Pillar tags ── */ .ap-intro__pillars { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin-top: 28px; } .ap-intro__pillar { display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid rgba(116, 131, 134, 0.50); padding: 16px 8px; font-family: "Outfit-Medium"; font-size: var(--font-sm, 15px); line-height: var(--lh-sm, 130%); color: var(--vcc-midnight-violet, #2C1224); text-align: center; flex: 1 1 0; min-width: 140px; } /* ── Media column ── */ .ap-intro__media { display: flex; flex-direction: column; gap: 12px; } /* ============================================================ SECTION 1 — PROGRAM CATEGORIES Add these rules to all-programs.css ============================================================ */ /* ── Section wrapper ── */ .ap-categories { max-width: 1440px; margin: 0 auto; } /* ── Row: image + content side by side ── */ .ap-cat-row { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; } /* Reverse: content left, image right */ .ap-cat-row--reverse .ap-cat__image { order: 2; } .ap-cat-row--reverse .ap-cat__content { order: 1; background: var(--Snow, #FBF9FF); } /* ── Image column ── */ .ap-cat__image { width: 100%; height: 100%; overflow: hidden; } .ap-cat__image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* ── Content column ── */ .ap-cat__content { /* background: linear-gradient(0deg, rgba(116, 131, 134, 0.10) 0%, rgba(116, 131, 134, 0.10) 100%), var(--vcc-snow, #FBF9FF);*/ background: linear-gradient(0deg, rgba(44, 18, 36, 0.10) 0%, rgba(44, 18, 36, 0.10) 100%), #FBF9FF; padding: 64px 48px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } /* ── Category heading ── */ .ap-cat__title { color: var(--vcc-midnight-violet, #2C1224); /* inherits base.css h2: ZalandoSansExpanded-SemiBold, --font-h2 */ } /* ── Subtitle / tagline ── */ .ap-cat__subtitle { font-family: "Outfit-Light"; font-size: var(--font-lead, 24px); line-height: var(--lh-lead, 150%); color: var(--vcc-shadow-grey, #272932); } /* ── Description ── */ .ap-cat__desc p { font-family: "Outfit-Regular"; font-size: var(--font-p, 18px); line-height: var(--lh-p, 130%); color: var(--vcc-shadow-grey, #272932); } /* ── "Featured Programs:" label ── */ .ap-cat__programs-label { font-family: "Outfit-SemiBold"; font-size: var(--font-p, 18px); line-height: var(--lh-p, 130%); color: var(--vcc-shadow-grey, #272932); margin-top: 8px; } /* ── Programs list ── */ .ap-cat__programs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .ap-cat__program-item { border-bottom: 1px solid rgba(116, 131, 134, 0.20); background: linear-gradient(0deg, rgba(116, 131, 134, 0.10) 0%, rgba(116, 131, 134, 0.10) 100%), #FBF9FF; } .ap-cat__program-item:first-child { border-top: 1px solid rgba(116, 131, 134, 0.20); } .ap-cat__program-item a { display: grid; grid-template-columns: 24px 1fr 16px; gap: 16px; align-items: center; padding: 16px; color: var(--vcc-shadow-grey, #272932); text-decoration: none; transition: color 0.2s; } .ap-cat__program-item a:hover { color: var(--vcc-carmine, #BE1E2D); text-decoration: none; } .ap-cat__program-item a span { font-family: "Outfit-Regular"; font-size: var(--font-p, 18px); line-height: var(--lh-p, 130%); text-decoration: underline; } .ap-cat__program-item a i[data-lucide="graduation-cap"] { width: 24px; height: 24px; color: var(--vcc-midnight-violet, #2C1224); flex-shrink: 0; } .ap-cat__program-item a i[data-lucide="chevron-right"] { width: 16px; height: 16px; color: var(--vcc-state-grey, #748386); flex-shrink: 0; justify-self: end; } section.pw-cta { max-width: 1440px; margin: 0 auto; } /* ============================================================= Tablet ≤ 1024px ============================================================= */ @media only screen and (max-width: 1024px) { .ap-nav-gradient { display: none; } main.all-programs { margin-top: var(--nav-h); } } /* ============================================================ 960px — MOBILE FIXES ============================================================ */ @media only screen and (max-width: 960px) { main.all-programs { --wrapper-padding: 24px; } .ap-nav-gradient { display: none; } /* Switch inner to flex column so we can order each child */ .ap-intro__inner { display: flex; flex-direction: column; /*align-items: center;*/ gap: 24px; padding-top: 32px; padding-bottom: 48px; } /* Dissolve .ap-intro__content so its children become direct flex items we can order independently */ .ap-intro__content { display: contents; } /* 1 — Title stays first */ .ap-intro__title { align-items: center; order: 1; margin-bottom: 0; } /* 2 — Image comes right after title */ .ap-intro__media { order: 2; margin-bottom: 24px; } /* 3 — Description paragraphs */ .ap-intro__desc { order: 3; margin-bottom: 0; align-items: center; } /* 4 — Pillar tags last */ .ap-intro__pillars { order: 4; flex-direction: column; gap: 8px; margin-top: 0; width: 100%; } .ap-intro__pillar { flex: none; width: 100%; } .ap-intro__img { width: 100%; height: auto; } .ap-cat-row { display: flex; flex-direction: column; min-height: unset; /* background moves here since content div dissolves */ } /* dissolve content wrapper — children become direct flex items */ .ap-cat__content { display: contents; } /* reset reverse — no more grid ordering needed */ .ap-cat-row--reverse .ap-cat__image { order: 3; } /* These were already set but need to beat the reverse specificity */ .ap-cat-row--reverse .ap-cat__title { order: 1; } .ap-cat-row--reverse .ap-cat__subtitle { order: 2; } .ap-cat-row--reverse .ap-cat__desc { order: 4; } .ap-cat-row--reverse .ap-cat__programs-label { order: 5; } .ap-cat-row--reverse .ap-cat__programs { order: 6; } .ap-cat-row--reverse .ap-cat__content { order: unset; } /* explicit order for every child */ .ap-cat__title { order: 1; padding: 48px 24px 16px 24px; } .ap-cat__subtitle { order: 2; padding: 0 24px; } .ap-cat__image { order: 3; padding: 24px; } .ap-cat__desc { order: 4; padding: 0 24px; } .ap-cat__programs-label { order: 5; padding: 24px; margin-top: 0px; } .ap-cat__programs { order: 6; padding: 0 24px 48px 24px; } /* odd rows — tinted */ .ap-cat-row-wrap:nth-child(odd) .ap-cat-row { background: linear-gradient(0deg, rgba(44, 18, 36, 0.10) 0%, rgba(44, 18, 36, 0.10) 100%), #FBF9FF; } /* even rows — plain white */ .ap-cat-row-wrap:nth-child(even) .ap-cat-row { background: #FBF9FF; } }