/* * courses-v2.css — template-scoped: single-courses-fe.php (FE course v2) * Used by: dc + nlc. * Source site: dc, base-theme/css/courses-v2.css (already a standalone file). * * dc-vs-nlc DIFF (ignoring colour): the two files are otherwise IDENTICAL. * The ONLY difference is one line, the --font-display stack * dc: "nove", "nort", sans-serif * nlc: "enra-slab-variable", "program", sans-serif * That is a brand TYPE value, not colour and not structural, so the two * copies collapse to this ONE shared file. The divergent display face * belongs in child tokens (flagged inline on --font-display below). * * This file carries its OWN design-system :root (--navy, --lime, --parents, * --advisers, shadows). Those aliases are now sourced from base tokens where * one exists (--navy->--surface-dark, --lime->--accent, --parents-> * --aud-parents, --white->--surface, --light-grey->--neutral-50, and the * matching -rgb variants). Phase 3a: --navy-deep and --text-muted now come * straight from base tokens; --advisers* -> --aud-advisers*, --parents-dark -> * --aud-parents-dark, --growth-* -> the --success* status tokens, * --lime-glow -> --lime, --text-dark -> --ink. * Per-page/per-audience colours (--primary*, --secondary*, --accent-light, * --pink) are set inline by the template and are intentionally left as-is. * Former inline rgba() literals now resolve through --shadow-rgb, * --overlay-light-rgb and --surface-dark-rgb; remaining greys/darks resolved in * Phase 3a (--muted, --navy, --neutral-100, --aud-advisers-dark). No font-size * changed. */ :root { /* SHEET-PRIVATE CUSTOM PROPERTIES. Every name is --cv2-* 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. */ --cv2-growth-bg: linear-gradient(135deg, var(--success-tint) 0%, var(--success-tint-2) 100%); --cv2-advisers-rgb: var(--aud-advisers-rgb); --cv2-font-size-base: 1.2rem; --cv2-font-size-sm: 1.2rem; --cv2-font-size-lg: 1.35rem; --cv2-font-size-xl: 1.5rem; --cv2-font-size-2xl: 1.875rem; --cv2-font-size-3xl: 2.25rem; --cv2-font-size-4xl: 3rem; --cv2-radius-sm: 8px; --cv2-radius-md: 12px; --cv2-radius-lg: 16px; --cv2-radius-xl: 24px; --cv2-radius-2xl: 32px; --cv2-radius-full: 9999px; --cv2-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --cv2-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1); --cv2-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); --cv2-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); --cv2-shadow-sm: 0 1px 2px rgba(var(--shadow-rgb), 0.05); --cv2-shadow-md: 0 4px 6px -1px rgba(var(--shadow-rgb), 0.1); --cv2-shadow-lg: 0 10px 15px -3px rgba(var(--shadow-rgb), 0.1); --cv2-shadow-xl: 0 20px 25px -5px rgba(var(--shadow-rgb), 0.1); --cv2-shadow-2xl: 0 25px 50px -12px rgba(var(--shadow-rgb), 0.25); } /* ======================================== Base Reset ======================================== */ html { scroll-behavior: smooth; scroll-padding-top: 80px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ======================================== Typography ======================================== */ /* Headings take the design-system type from typography.css (display font, display weight, em/strong treatment, dark-ground colour flips): the design system leads. courses-v2.css no longer overrides h1-h4 globally (that forced the body font and rotated every h2). Per-section rules below only set heading colour where a section sits on a dark ground. */ .font-display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } /* ======================================== Scroll Progress ======================================== */ .scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 4px; background: linear-gradient( 90deg, var(--blue), var(--navy), var(--navy), var(--blue) ); background-size: 300% 100%; animation: gradient-shift 3s ease infinite; z-index: 9999; } @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ======================================== Buttons ======================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1rem 2rem; font-family: var(--font-body); font-size: var(--cv2-font-size-base); font-weight: 600; line-height: 1; border: none; border-radius: var(--cv2-radius-full); cursor: pointer; transition: all var(--cv2-transition-base); text-decoration: none; position: relative; overflow: hidden; } .btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--overlay-light-rgb), 0.2) 0%, transparent 50%); opacity: 0; transition: opacity var(--cv2-transition-fast); } .btn:hover::before { opacity: 1; } .btn--lime { background: var(--navy); color: var(--white); box-shadow: 0 4px 14px rgba(var(--navy-rgb), 0.4); } .btn--lime:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(var(--navy-rgb), 0.6); color: var(--white); } .btn--outline { background: transparent; color: var(--white); border: 2px solid rgba(var(--overlay-light-rgb), 0.4); } .btn--outline:hover { background: rgba(var(--overlay-light-rgb), 0.15); border-color: var(--white); transform: translateY(-2px); color: var(--white); } .btn--green { background: var(--aud-advisers); color: var(--white); box-shadow: 0 4px 14px rgba(var(--cv2-advisers-rgb), 0.4); } .btn--green:hover { background: var(--aud-advisers-dark); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(var(--cv2-advisers-rgb), 0.5); color: var(--white); } .btn--green-outline { background: transparent; color: var(--aud-advisers); border: 2px solid var(--aud-advisers); } .btn--green-outline:hover { background: var(--aud-advisers); color: var(--white); transform: translateY(-2px); } .btn__icon { transition: transform var(--cv2-transition-fast); } .btn:hover .btn__icon { transform: translateX(4px); } /* ======================================== Breadcrumb ======================================== */ .breadcrumb { padding: 1rem 0; background: var(--neutral-50); border-bottom: 1px solid rgba(var(--shadow-rgb), 0.05); } .breadcrumb__list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; font-size: var(--cv2-font-size-sm); } .breadcrumb__item { display: flex; align-items: center; gap: 0.5rem; } .breadcrumb__item::after { content: "›"; color: var(--text-muted); } .breadcrumb__item:last-child::after { display: none; } .breadcrumb__item:last-child { color: var(--text-muted); } /* Hero styling lives in course-sections.css (shared). The old bare `header { z-index: 999 }` was removed: it matched the site-header too and lifted the course hero above the global menu's dropdowns. */ /* ======================================== Age Notice Banner ======================================== */ .age-notice { background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%); position: relative; overflow: hidden; } .age-notice::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--navy), var(--navy)); } .age-notice__inner { display: flex; align-items: flex-start; gap: 1.5rem; padding: 2rem 0; } .age-notice__icon { flex-shrink: 0; width: 48px; height: 48px; background: rgba(var(--blue-rgb), 0.2); border: 2px solid var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .age-notice__icon svg { width: 24px; height: 24px; color: var(--aud-students-tint); } .age-notice__heading { font-family: var(--font-body); font-size: var(--cv2-font-size-xl); font-weight: 700; color: var(--white); margin-bottom: 0.5rem; } .age-notice__text { font-size: var(--cv2-font-size-base); color: rgba(var(--overlay-light-rgb), 0.8); line-height: 1.6; margin-bottom: 0.75rem; } /* The .age-notice panel is a navy gradient, and --secondary resolves to that same navy on dc, so this copy and its link were navy-on-navy: 1.00:1, invisible. --secondary is a FILL token (it pairs with --secondary-text on .btn--lime); it was never an on-dark text colour. */ .age-notice__cta-text { font-size: var(--cv2-font-size-base); color: var(--text-on-dark); font-weight: 600; line-height: 1.6; } .age-notice__cta-text a { color: var(--accent-on-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; } .age-notice__cta-text a:hover { color: var(--text-on-dark); } @media (max-width: 640px) { .age-notice__inner { flex-direction: column; gap: 1rem; } } /* Progression — mobile responsive */ @media (max-width: 768px) { .progression__list { flex-direction: column; align-items: center; gap: 0.75rem; } .progression__icon--arrow svg { transform: rotate(90deg); } .progression__step { max-width: 280px; width: 100%; } .progression__line { display: none; } .progression__card { width: 100%; } .progression__stack { max-width: 280px; width: 100%; } .progression__stack-card { padding: 1rem; } .progression__stack-card .progression__level { font-size: var(--cv2-font-size-sm, 1.2rem); } .progression__stack-card .progression__name { font-size: var(--cv2-font-size-sm, 1.2rem); } } /* ======================================== Gallery & Video Section ======================================== */ .gallery-section { padding: 5rem 0; background: var(--neutral-50); position: relative; } .gallery-section .section__eyebrow { color: var(--aud-parents); } .gallery-section .section__header { margin-bottom: 2.5rem; } .media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } /* Masonry (CSS columns) — images keep their natural aspect ratio and flow into balanced columns rather than being cropped to a uniform grid. */ .media-grid__gallery { display: block; list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 0.6rem; } .media-grid__gallery > li { break-inside: avoid; margin: 0 0 0.6rem; } .media-grid__gallery .lightbox { display: block; position: relative; aspect-ratio: auto; background: none; border-radius: var(--cv2-radius-sm); overflow: hidden; } .media-grid__gallery .lightbox img { display: block; width: 100%; height: auto; } /* Gallery-only (no video): more columns since it has the full width. */ .media-grid--gallery-only .media-grid__gallery { columns: 4; } .media-grid__video { display: flex; flex-direction: column; } .video-frame { width: 100%; aspect-ratio: 16 / 9; position: relative; border-radius: var(--cv2-radius-lg); overflow: hidden; box-shadow: var(--cv2-shadow-lg); background: var(--navy); } .video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .video-frame__label { margin-top: 0.75rem; text-align: center; font-size: var(--cv2-font-size-sm); font-weight: 600; color: var(--text-muted); } @media (max-width: 900px) { .media-grid { grid-template-columns: 1fr; gap: 1.5rem; } .media-grid__gallery, .media-grid--gallery-only .media-grid__gallery { columns: 3; } .media-grid__video { max-width: 600px; margin: 0 auto; width: 100%; } } @media (max-width: 600px) { .media-grid__gallery, .media-grid--gallery-only .media-grid__gallery { columns: 2; } } @keyframes rotate-slow { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Event Banner (Parents section) */ .event-banner { background: linear-gradient(135deg, var(--aud-parents) 0%, var(--aud-parents-dark) 100%); border-radius: var(--cv2-radius-2xl); padding: 2.5rem 3rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; color: var(--white); position: relative; overflow: hidden; box-shadow: 0 20px 50px rgba(var(--aud-parents-rgb), 0.4); border: 3px solid rgba(var(--overlay-light-rgb), 0.2); } .event-banner::before { content: ""; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(var(--overlay-light-rgb), 0.15) 0%, transparent 70%); } .event-banner__content { display: flex; align-items: center; gap: 1.5rem; position: relative; } .event-banner__icon { width: 70px; height: 70px; background: rgba(var(--overlay-light-rgb), 0.2); border-radius: var(--cv2-radius-lg); display: flex; align-items: center; justify-content: center; border: 2px solid rgba(var(--overlay-light-rgb), 0.3); color: var(--white); } .event-banner__icon svg { width: 32px; height: 32px; } .event-banner__title { font-size: var(--cv2-font-size-xl); font-weight: 700; margin-bottom: 0.25rem; } .event-banner__desc { font-size: var(--cv2-font-size-sm); opacity: 0.9; } @media (max-width: 768px) { .advisers-facts { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .advisers-facts { grid-template-columns: repeat(2, 1fr); } } /* ======================================== Responsive ======================================== */ @media (max-width: 1100px) { .learn-grid { grid-template-columns: 1fr; gap: 2rem; } .learn-copy { padding-right: 0; } .career-paths { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .support-grid { grid-template-columns: repeat(2, 1fr); } .quick-facts-grid { grid-template-columns: repeat(3, 1fr); } .entry-grid { grid-template-columns: 1fr; } } @media (min-width: 769px) and (max-width: 1024px) { .careers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .testimonial-layout { grid-template-columns: 1fr; text-align: center; } .testimonial-content { padding-left: 0; order: 2; } .testimonial-visual { order: 1; margin: 0; padding: 2rem; } .testimonial-quote::before { display: none; } .testimonial-quote__text { padding-left: 0; font-size: var(--cv2-font-size-lg); } .testimonial-quote__icon { position: static; display: block; margin-bottom: 1rem; } } @media (max-width: 768px) { .support-grid { grid-template-columns: 1fr; } .quick-facts-grid { grid-template-columns: repeat(2, 1fr); } .event-banner { flex-direction: column; text-align: center; padding: 2rem; } .career-path__roles { grid-template-columns: 1fr; } .dsa-banner { flex-direction: column; text-align: center; } .careers-grid { grid-template-columns: 1fr; } .progression__list { flex-direction: column; gap: 1rem; } .progression__line { display: none; } .progression__card { min-width: unset; } } @media (max-width: 500px) { .container { padding: 0 1rem; } .apply-actions { flex-direction: column; } .apply-actions .btn { width: 100%; } }