/* CND v1.0.0 — catalog UI Design pass: single source of truth for tokens, one primary CTA per view, poster-safe media (contain + blur backdrop), calmer filter row, richer decision panel on the single page. */ /* ---------------------------------------------------------------- tokens */ .cnd { /* ink */ --ink: #101828; --ink-2: #344054; --mute: #667085; --faint: #98a2b3; /* surface */ --line: #e4e7ec; --line-2: #eef0f3; --soft: #f7f8fa; --paper: #ffffff; /* brand */ --brand: #0b3d2e; --brand-2: #12715a; --brand-soft: #e9f2ef; --accent: #f7ab39; --accent-ink: #bd832c; --accent-soft: #fdf3e2; --hot: #d92d20; --ok: #12b76a; /* shape */ --r-xs: 8px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --pill: 999px; --sh-1: 0 1px 2px rgba(16, 24, 40, .04); --sh-2: 0 10px 28px -8px rgba(16, 24, 40, .14); --ring: 0 0 0 3px rgba(18, 113, 90, .18); /* type — Sis-Reg / Sis-Bold are DB OzoneX, declared by the theme. They are two SEPARATE families, not two weights of one: asking Sis-Reg for 600/700 makes the browser synthesize a smeared fake bold that is very visible on Thai glyphs. Bold is therefore always a family switch. */ --font: "Sis-Reg", "Sarabun", system-ui, -apple-system, sans-serif; /* --display: "Sis-Bold", "Sis-Reg", "Sarabun", system-ui, sans-serif; */ /* One scale, no more ad-hoc .92/.93/.95 values. NOTE: rem resolves against the root , not against .cnd — changing the .cnd font-size below does NOT scale these. Resize the scale here. Sized for DB OzoneX, whose Thai glyphs sit low and read ~1 step smaller than a Latin face at the same px, on a site whose body copy is 22px. */ --t-3xs: .8125rem; /* 13px — PDF tag */ --t-2xs: .875rem; /* 14px — micro labels, ribbon, badges */ --t-xs: .9375rem; /* 15px — chips, counters, notes */ --t-sm: 1rem; /* 16px — meta, list rows, links */ --t-base: 1.0625rem;/* 17px — body copy, buttons, card titles */ --t-md: 1.1875rem; /* 19px — small headings, price on cards */ --t-lg: 1.375rem; /* 22px — section headings */ --t-xl: 1.625rem; /* 26px — hero title */ --t-2xl: 2rem; /* 32px — page title, tuition figure */ font-family: var(--font); color: var(--ink); font-size: 17px; line-height: 1.55; max-width: 1140px; margin: 0 auto; /* The theme's .page-padding is vertical only, so these 4px were the entire side margin — below ~1150px the card grid ran into the screen edges. */ padding: 0 clamp(14px, 4vw, 20px) 2rem; box-sizing: border-box; -webkit-font-smoothing: antialiased; } .cnd *, .cnd *::before, .cnd *::after { box-sizing: border-box; } /* The theme header is `position: fixed` (~97px) and expects each page to clear it. The theme's own .page-padding gives 86px — less than the header itself — so every root that starts a page tops that up into a real gap. A root that only carries the hidden dialog is excluded: it must not reserve space. */ .cnd-single, .cnd-listing, .cnd-header:not(.cnd-header--quiet) { padding-top: clamp(1.5rem, 3vw, 2.25rem); } /* `overflow: hidden` on the theme's main wrapper turns it into the scrollport for its subtree, which silently disables `position: sticky` on the course sidebar. `clip` clips identically without creating that scroll container. */ body.single-course_nondegree #wrapper [role="main"] { overflow: clip; } /* Height of the fixed mobile action bar. Lives on :root because elements outside .cnd (third-party floating widgets, below) have to clear it too. */ /* --cnd-related-h is kept live by initRelatedDrawer() (course-nondegree.js) via ResizeObserver — 0 whenever the docked related-courses drawer isn't present/visible, so the back-to-top button knows how far to clear it. */ :root { --cnd-cta-h: 4.5rem; --cnd-related-h: 0px; } /* mobile CTA jumps here instead of opening the apply link straight away, so people see price/fine print first; offset clears the fixed theme header. */ #cnd-buy { scroll-margin-top: calc(clamp(1.5rem, 3vw, 2.25rem) + 6rem); } @media (min-width: 900px) { #cnd-buy { scroll-margin-top: 6rem; } } @media (prefers-reduced-motion: no-preference) { html:has(.cnd-single) { scroll-behavior: smooth; } } /* Floating widgets injected by other plugins sit at the bottom of the viewport and land on top of the mobile CTA. Lift them above the bar while it is on screen, instead of letting either one bury the other. Matched on a partial class because the numeric suffix is per-instance. This is the no-JS fallback and assumes the nominal bar height. The script (initFloatingWidgets) measures the bar and wins over this, which matters because these widgets are injected late and set `bottom` inline. */ @media (max-width: 919px) { body.single-course_nondegree [id*="gb-widget"], body.single-course_nondegree [class*="gb-widget"] { bottom: calc(var(--cnd-cta-h) + env(safe-area-inset-bottom) + .6rem) !important; } } /* keep the theme out */ .cnd img { max-width: 100%; height: auto; } .cnd a { text-decoration: none; color: inherit; font-size: inherit; } .cnd h1, .cnd h2, .cnd h3, .cnd h4 { font-family: var(--display); font-weight: 700; color: var(--ink); letter-spacing: -.01em; } /* The theme sets these globally and they reach inside the plugin: p { font-size: 22px; line-height: 1.15em !important } h1 { line-height: 1em !important } h2 { line-height: 1em !important; font-weight: normal !important } A type selector beats inheritance, so every

we do not size explicitly jumps to 22px; and !important beats our line-height and heading weight outright. :where() keeps this at zero specificity so our own component rules still win — except where !important is the only way through. */ .cnd :where(p) { font-size: inherit; line-height: inherit !important; } .cnd :where(h1, h2, h3, h4) { line-height: 1.3 !important; font-weight: 700 !important; } /* p rules that need their own leading have to re-assert it with !important */ .cnd-buy__deadline { line-height: 1.45 !important; } .cnd-buy__note { line-height: 1.5 !important; } /* Bold = family switch. Covers / in migrated course copy too. */ .cnd :where(b, strong) { font-family: var(--display); font-weight: 700; } .cnd-kicker, .cnd-a, .cnd-badge, .cnd-pill, .cnd-top__label, .cnd-top__link, .cnd-hero__date, .cnd-hero__date em, .cnd-docs__link, .cnd-docs__ext, .cnd-board__head b, .cnd-chip i, .cnd-toggle, .cnd-card__cat, .cnd-card__price small, .cnd-sched span, .cnd-crumb a, .cnd-buy__price > span, .cnd-buy__price small, .cnd-buy__deadline, .cnd-buy__list b, .cnd-buy__contact strong, .cnd-mobile-cta__price small { font-family: var(--display); font-size: inherit; font-weight: 700; } .cnd :focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; border-radius: 4px; } .cnd-icon { width: 1em; height: 1em; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.12em; } .cnd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ------------------------------------------------------------ primitives */ .cnd-kicker { display: inline-block; margin: 0 0 .35rem; font-size: var(--t-2xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-2); } .cnd-a { display: inline-flex; align-items: center; gap: .3rem; color: var(--brand-2); font-weight: 700; font-size: var(--t-sm); transition: color .15s ease; } .cnd-a:hover { color: var(--brand); text-decoration: underline; } .cnd-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.6rem; padding: .55rem 1.25rem; border: 1px solid transparent; border-radius: var(--pill); background: var(--accent); color: #fff; font-family: var(--display); font-size: var(--t-base); font-weight: 700; line-height: 1.2; cursor: pointer; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; } .cnd-btn:hover { background: #c97a04; color: #fff; box-shadow: 0 6px 16px -6px rgba(224, 140, 7, .7); } .cnd-btn:active { transform: translateY(1px); } .cnd-btn--sm { min-height: 2.2rem; padding: .4rem .95rem; font-size: var(--t-sm); } .cnd-btn--block { width: 100%; } .cnd-btn--ghost { background: var(--paper); color: var(--brand); border-color: var(--line); } .cnd-btn--ghost:hover { background: var(--soft); color: var(--brand); box-shadow: none; } .cnd-btn--muted { background: var(--soft); color: var(--faint); border-color: var(--line); cursor: not-allowed; box-shadow: none; } .cnd-btn--muted:hover { background: var(--soft); color: var(--faint); box-shadow: none; } /* status chip: dot + label, lighter than the old solid badge */ .cnd-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem .2rem .45rem; border-radius: var(--pill); background: rgba(255, 255, 255, .94); color: var(--mute); font-size: var(--t-2xs); font-weight: 700; line-height: 1.5; box-shadow: var(--sh-1); } .cnd-badge::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; } .cnd-badge.is-open { color: #05663a; } .cnd-badge.is-open::before { background: var(--ok); box-shadow: 0 0 0 3px rgba(18, 183, 106, .18); } .cnd-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: var(--pill); background: var(--soft); color: var(--ink-2); font-size: var(--t-xs); font-weight: 700; } /* -------------------------------------------------- utility / resource bar */ .cnd-header { margin: 0 0 1rem; } .cnd-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem .35rem .3rem .5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--pill); box-shadow: var(--sh-1); } .cnd-top__links { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; min-width: 0; } .cnd-top__label { padding: 0 .5rem 0 .3rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } .cnd-top__link { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: transparent; color: var(--ink-2); font-size: var(--t-sm); font-weight: 700; line-height: 1.4; padding: .42rem .7rem; border-radius: var(--pill); cursor: pointer; white-space: nowrap; transition: color .15s ease, background .15s ease; } .cnd-top__link .cnd-icon { color: var(--faint); transition: color .15s ease; } .cnd-top__link:hover { color: var(--brand); background: var(--brand-soft); } .cnd-top__link:hover .cnd-icon { color: var(--brand-2); } /* ------------------------------------------------------------------ hero */ .cnd-hero { margin-bottom: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); box-shadow: var(--sh-2); } /* poster-safe slider: contain over a blurred copy, never crops artwork */ .cnd-swiper { position: relative; background: #0b2a22; } /* The viewport now owns the box (slides are absolutely stacked inside it and can't size it themselves), matching the range the frame used to keep. */ .cnd-swiper__viewport { position: relative; overflow: hidden; min-height: 298px; max-height: 340px; /* aspect-ratio: 21 / 8; */ } /* Resting/default position is off to the right; the actual entry side for an incoming slide (left for "prev", right for "next") is set inline by the script, since it depends on which control triggered the change. */ .cnd-swiper__slide { position: absolute; inset: 0; margin: 0; transform: translateX(100%); transition: transform .55s cubic-bezier(.4, 0, .2, 1); } .cnd-swiper__slide.is-on { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .cnd-swiper__slide { transition: none; } } .cnd-swiper__frame { position: relative; width: 100%; height: 100%; overflow: hidden; display: grid; place-items: center; } .cnd-swiper__blur { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: blur(24px) saturate(1.1); opacity: .5; transform: scale(1.1); } .cnd-swiper__slide img { position: relative; z-index: 1; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .cnd-swiper__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); opacity: 0; transition: opacity .18s ease; } .cnd-swiper:hover .cnd-swiper__nav, .cnd-swiper__nav:focus-visible { opacity: 1; } .cnd-swiper__nav .cnd-icon { width: 1.05rem; height: 1.05rem; } .cnd-swiper__nav--prev { left: .6rem; } .cnd-swiper__nav--next { right: .6rem; } .cnd-swiper__dots { position: absolute; left: 0; right: 0; bottom: .6rem; display: flex; justify-content: center; gap: .3rem; z-index: 2; } .cnd-swiper__dots button { width: .4rem; height: .4rem; padding: 0; border: 0; border-radius: var(--pill); background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .2s ease, background .2s ease; } .cnd-swiper__dots button.is-on { width: 1.1rem; background: #fff; } .cnd-hero__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.15rem 1.35rem; background: linear-gradient(180deg, #fff, #f6faf8); border-top: 1px solid var(--line); } .cnd-hero__text { flex: 1 1 260px; min-width: 0; } .cnd-hero__text h2 { margin: 0 0 .3rem; font-size: clamp(var(--t-lg), 2.2vw, var(--t-xl)); line-height: 1.28; } .cnd-hero__text > p { margin: 0; color: var(--mute); font-size: var(--t-base); } .cnd-hero__date { display: inline-flex; align-items: center; gap: .4rem; margin: .6rem 0 0 !important; padding: .3rem .7rem; border-radius: var(--pill); background: var(--brand-soft); color: var(--brand) !important; font-size: var(--t-sm) !important; font-weight: 700; } .cnd-hero__date em { font-style: normal; font-weight: 700; } .cnd-hero__date.is-hot { background: #fef3f2; color: var(--hot) !important; } .cnd-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } /* The header shortcode keeps only the dialog when the listing is on the same page — no bar, so it must not reserve any space either. */ .cnd-header--quiet { margin: 0; padding: 0; } /* ------------------------------------------------------------- documents */ /* Sits between hero and catalog. Reads as a quiet reference row, not as a second set of filter chips. */ .cnd-docs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; margin: 0 0 1.6rem; padding: .75rem 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); } .cnd-docs__label { margin: 0; font-family: var(--font); font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); white-space: nowrap; } .cnd-docs__links { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .35rem; min-width: 0; } .cnd-docs__link { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .6rem; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--ink-2); font-size: var(--t-sm); font-weight: 700; line-height: 1.4; cursor: pointer; transition: background .15s ease, color .15s ease; } .cnd-docs__link .cnd-icon { color: var(--faint); } .cnd-docs__link:hover { background: var(--brand-soft); color: var(--brand); } .cnd-docs__link:hover .cnd-icon { color: var(--brand-2); } .cnd-docs__ext { padding: 0 .28rem; border: 1px solid var(--line); border-radius: 4px; font-size: var(--t-3xs); font-weight: 700; letter-spacing: .06em; color: var(--faint); } /* --------------------------------------------------------- board / filters */ .cnd-board__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: .5rem 1rem; margin-bottom: .9rem; } .cnd-board__head h3 { margin: 0; font-size: var(--t-lg); } .cnd-board__head p { margin: .15rem 0 0; color: var(--mute); font-size: var(--t-sm); } .cnd-board__head b { color: var(--brand-2); font-weight: 700; } /* chips first (what am I browsing), then the refinements for that view */ .cnd-chips-wrap { position: relative; } .cnd-chips-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: .7rem; width: 2.5rem; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--paper) 72%); } .cnd-chips { position: relative; display: flex; gap: .4rem; overflow-x: auto; scroll-behavior: smooth; padding-bottom: .7rem; scrollbar-width: none; -ms-overflow-style: none; } .cnd-chips::-webkit-scrollbar { display: none; } /* the active pill's background — repositioned/resized in JS (initTabs, course-nondegree.js) to sit under whichever chip is active, so switching tabs reads as one pill gliding over instead of two chips cross-fading */ .cnd-chips__slide { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: var(--pill); background: var(--brand); transform: translateX(0); transition: transform .32s cubic-bezier(.16, 1, .3, 1), width .32s cubic-bezier(.16, 1, .3, 1); pointer-events: none; z-index: 0; } @media (prefers-reduced-motion: reduce) { .cnd-chips__slide { transition: none; } } .cnd-chip { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border: 1px solid var(--line); border-radius: var(--pill); background: var(--paper); color: var(--ink-2); font-family: var(--display); font-size: var(--t-sm); font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .32s ease; } .cnd-chip:hover { border-color: #cfd6dd; background: var(--soft); } .cnd-chip i { font-style: normal; font-size: var(--t-xs); font-weight: 700; padding: .05rem .35rem; border-radius: var(--pill); background: var(--soft); color: var(--mute); transition: background .2s ease, color .2s ease; } .cnd-chip.is-on { /* the moving .cnd-chips__slide behind it now supplies the pill's fill */ background: transparent; border-color: transparent; color: #fff; } .cnd-chip.is-on i { background: rgba(255, 255, 255, .18); color: #fff; } .cnd-chip.is-empty { opacity: .5; } /* No container at all. The chips above already carry a lot of enclosed shapes; another bordered box under them just stacks frames. One hairline does the whole job, and it grows into a brand-coloured underline on focus so the bar still reacts as a single control. */ .cnd-board__filters { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.5rem; margin: 0 0 1.6rem; padding: .15rem .15rem .7rem; border-bottom: 1px solid var(--line); } .cnd-board__filters::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand-2); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.16, 1, .3, 1); } .cnd-board__filters:focus-within::after { transform: scaleX(1); } .cnd-field { display: flex; align-items: center; gap: .6rem; flex: 1 1 16rem; min-width: 0; max-width: 32rem; } .cnd-field > .cnd-icon { width: 1.2rem; height: 1.2rem; color: var(--faint); pointer-events: none; transition: color .2s ease; } .cnd-field:focus-within > .cnd-icon { color: var(--brand-2); } .cnd-search { flex: 1 1 auto; min-width: 0; height: unset; padding: 0; border: 0; background: transparent; font: inherit; font-size: var(--t-md); color: var(--ink); } .cnd-search::placeholder { color: var(--faint); font-size: var(--t-base); } /* the underline is the focus treatment — no second ring on the input */ .cnd-search:focus { outline: none; box-shadow: none; } .cnd-search::-webkit-search-cancel-button { display: none; } .cnd-clear { flex: 0 0 auto; display: none; place-items: center; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer; transition: background .15s ease, color .15s ease; } .cnd-clear:hover { background: var(--soft); color: var(--ink); } .cnd-clear .cnd-icon { width: .95rem; height: .95rem; } .cnd-field.has-value .cnd-clear { display: grid; } /* no chip fill in this style — the switch plus the label colouring carries the on-state on its own */ .cnd-toggle { position: relative; display: inline-flex; align-items: center; gap: .55rem; margin-left: auto; font-size: var(--t-sm); font-weight: 700; color: var(--mute); cursor: pointer; user-select: none; white-space: nowrap; transition: color .15s ease; margin-bottom: 0; } .cnd-toggle:hover { color: var(--ink-2); } .cnd-toggle:has(input:checked) { color: var(--brand); } .cnd-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .cnd-toggle__track { position: relative; width: 2.2rem; height: 1.25rem; border-radius: var(--pill); background: #d0d5dd; transition: background .18s ease; flex: 0 0 auto; } .cnd-toggle__track::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .95rem; height: .95rem; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform .18s ease; } .cnd-toggle input:checked + .cnd-toggle__track { background: var(--brand-2); } .cnd-toggle input:checked + .cnd-toggle__track::after { transform: translateX(.95rem); } .cnd-toggle input:focus-visible + .cnd-toggle__track { box-shadow: var(--ring); } /* Only appears once something is actually filtering. Without it a query typed before switching tabs keeps hiding cards with nothing on screen to undo. */ .cnd-reset { display: none; align-items: center; gap: .3rem; flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--mute); font-family: var(--display); font-size: var(--t-xs); font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); transition: color .15s ease, text-decoration-color .15s ease, display .15s ease; } .cnd-reset:hover { color: var(--hot); text-decoration-color: currentColor; } .cnd-reset .cnd-icon { width: .85rem; height: .85rem; } .cnd-listing.cnd-has-filters .cnd-reset { display: inline-flex; } .cnd-panel { display: none; } .cnd-panel.is-on { display: block; } .cnd-panel[hidden] { display: none !important; } .cnd-empty { padding: 2.5rem 1rem; text-align: center; color: var(--mute); background: var(--soft); border: 1px dashed var(--line); border-radius: var(--r); font-size: var(--t-base); } .cnd-empty b { display: block; color: var(--ink); font-size: var(--t-md); margin-bottom: .2rem; } .cnd-noresult { display: none; } .cnd-panel.is-filtered-empty .cnd-noresult { display: block; } .cnd-panel.is-filtered-empty .cnd-grid { display: none; } /* ----------------------------------------------------------------- cards */ .cnd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .9rem; } @media (min-width: 720px) { .cnd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1020px) { .cnd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .cnd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 800px) { .cnd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .cnd-card { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); overflow: hidden; color: inherit; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .cnd-card:hover { box-shadow: var(--sh-2); border-color: #d7dde3; transform: translateY(-3px); } .cnd-card:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; } .cnd-card.is-off { background: var(--soft); } .cnd-card.is-off .cnd-card__media img { filter: grayscale(.75); opacity: .8; } .cnd-card.is-off .cnd-card__body h4 { color: var(--ink-2); } .cnd-card--hidden { display: none !important; } .cnd-card--pg-hidden { display: none !important; } .cnd-listing--available-only .cnd-card.is-off { display: none !important; } .cnd-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; margin-top: 1.4rem; } .cnd-pg-btn { min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink); font-size: var(--t-base); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .cnd-pg-btn:hover:not(:disabled) { border-color: var(--brand-2); color: var(--brand-2); } .cnd-pg-btn.is-on { background: var(--brand-2); border-color: var(--brand-2); color: #fff; } .cnd-pg-btn:disabled { opacity: .4; cursor: default; } .cnd-card__media { position: relative; aspect-ratio: 4 / 3; background: #16302a; overflow: hidden; display: grid; place-items: center; } .cnd-card__blur { position: absolute; inset: -12%; background-size: cover; background-position: center; filter: blur(18px) saturate(1.05); transform: scale(1.15); opacity: .55; } .cnd-card__media img { position: relative; z-index: 1; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .3s ease; } .cnd-card:hover .cnd-card__media img { transform: scale(1.03); } .cnd-card__blank { position: relative; display: block; width: 100%; height: 100%; background: linear-gradient(145deg, #9dcbaf, #eef3f0); } .cnd-card__blank::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(313deg, #9dcbaf, #eef3f0); opacity: 0; transition: opacity .3s ease; } .cnd-card:hover .cnd-card__blank::after { opacity: 1; } .cnd-card__blank p {z-index:1;color: #fff; font-size: 1.6rem; text-align: center; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); -webkit-line-clamp: 3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; margin: 0; transition: font-size .3s ease; } .cnd-card:hover .cnd-card__blank p {font-size:1.3rem;} .cnd-card__media .cnd-badge { position: absolute; z-index: 2; top: .5rem; left: .5rem; } .cnd-card__body { display: flex; flex-direction: column; gap: .3rem; padding: .8rem .85rem .85rem; flex: 1; } .cnd-card__cat { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-2); } .cnd-card__body h4 { margin: 0; font-size: var(--t-base); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cnd-card__meta { margin-top: auto; padding-top: .6rem; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: var(--t-xs); color: var(--mute); } .cnd-card__meta > span { display: inline-flex; align-items: center; gap: .3rem; } .cnd-card__price { display: inline-flex; align-items: baseline; gap: .15rem; color: var(--accent-ink); font-family: var(--display); font-size: var(--t-md); font-weight: 700; white-space: nowrap; /* text-decoration can't be transitioned — the underline draw itself is a background bar growing from the left, so it can. */ background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: left bottom 2px; background-size: 0% 1px; transition: background-size .25s ease; } .cnd-card:hover .cnd-card__price { background-size: 100% 1px; } .cnd-card__price small { font-size: var(--t-2xs); font-weight: 700; color: var(--mute); } /* --------------------------------------------------------- corner ribbon */ /* Carries the open/closed state, replacing the old top-left pill. Geometry: the band must cross the corner and have BOTH ends land outside the artwork, otherwise the clip leaves a visible cut edge sitting in the middle of the image. So the clipping box is the whole media (inset: 0), not a small corner square, and the band is sized from the crossing distance d: d = 5rem how far along the top and right edges the band crosses width = d√2 + margin ≈ 8rem length, with overhang so the ends clear right = -(width - d) / 2 = -1.5rem centres it on the corner diagonal top = d/2 - height/2 ≈ 1.6rem The ends then fall past the top and right edges and are clipped by the card itself, so no cut is visible. */ .cnd-card__ribbon { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; transition: transform .3s ease; } /* .cnd-card__media clips overflow, so sliding the (unrotated) wrapper up is enough to carry the rotated band clean off the top instead of it just sitting there — animating the rotated span itself would need the rotated axis worked out first. */ .cnd-card:hover .cnd-card__ribbon { transform: translateY(-100%); } .cnd-card__ribbon span { position: absolute; display: block; top: 1.55rem; right: -2.5rem; width: 10rem; padding: .3rem 0; transform: rotate(45deg); background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; text-align: center; font-family: var(--display); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .02em; line-height: 1.5; box-shadow: 0 2px 8px rgba(16, 24, 40, .28); } .cnd-card.is-off .cnd-card__ribbon span { background: linear-gradient(135deg, #98a2b3, #667085); } /* The related-courses carousel cards (single course page) are much narrower than a listing card, so the ribbon's fixed rem sizing above reads as oversized there — scale it down to match. */ .cnd-related__track .cnd-card__ribbon span { top: 1.05rem; right: -2rem; width: 7.5rem; padding: .2rem 0; font-size: var(--t-3xs); line-height: 1.4; } /* ----------------------------------------------------------------- modal */ .cnd-modal[hidden] { display: none !important; } .cnd-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 1.25rem; } .cnd-modal__bg { position: absolute; inset: 0; background: rgba(11, 34, 27, .55); backdrop-filter: blur(3px); animation: cnd-fade .22s ease both; } .cnd-modal__panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(460px, 100%); max-height: min(86vh, 44rem); border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 32px 64px -12px rgba(11, 34, 27, .45); outline: none; overflow: hidden; animation: cnd-pop .26s cubic-bezier(.16, 1, .3, 1) both; } @keyframes cnd-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes cnd-pop { from { opacity: 0; transform: translateY(12px) scale(.98) } to { opacity: 1; transform: none } } /* branded head band — a slow gradient drift plus a softly floating circle, so the band reads as alive instead of a flat poster behind the title */ .cnd-modal__head { position: relative; padding: 1.35rem 3rem 1.25rem 1.35rem; background: linear-gradient(135deg, var(--brand-2), var(--brand) 70%); background-size: 200% 200%; color: #fff; overflow: hidden; animation: cnd-head-shift 9s ease-in-out infinite; } .cnd-modal__head::after { content: ""; position: absolute; right: -3.5rem; top: -5rem; width: 11rem; height: 11rem; border-radius: 50%; background: rgba(255, 255, 255, .07); animation: cnd-head-drift 10s ease-in-out infinite; } @keyframes cnd-head-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes cnd-head-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-.7rem, .9rem) scale(1.1); } } @media (prefers-reduced-motion: reduce) { .cnd-modal__head, .cnd-modal__head::after { animation: none; } } .cnd-modal__head .cnd-kicker { position: relative; color: rgba(255, 255, 255, .72); margin-bottom: .2rem; } .cnd-modal__head h2 { position: relative; margin: 0; color: #fff; font-size: var(--t-lg); } .cnd-modal__x { position: absolute; top: .85rem; right: .85rem; z-index: 2; display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; transition: background .15s ease; } .cnd-modal__x:hover { background: rgba(255, 255, 255, .3); } .cnd-modal__x .cnd-icon { width: 1rem; height: 1rem; } .cnd-modal__body { padding: 1.25rem 1.35rem; overflow-y: auto; overscroll-behavior: contain; } /* schedule as a timeline — the dates are a sequence, so show them as one */ .cnd-sched { position: relative; list-style: none; margin: 0 0 1.1rem; padding: 0 0 0 1.35rem; display: grid; gap: .9rem; } .cnd-sched::before { content: ""; position: absolute; left: .29rem; top: .45rem; bottom: .45rem; width: 2px; border-radius: var(--pill); background: var(--line); } .cnd-sched li { position: relative; display: grid; gap: .1rem; } .cnd-sched li::before { content: ""; position: absolute; left: -1.35rem; top: .3rem; width: .68rem; height: .68rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); } .cnd-sched span { font-size: var(--t-2xs); color: var(--mute); letter-spacing: .04em; text-transform: uppercase; } .cnd-sched b { font-size: var(--t-base); color: var(--ink); } .cnd-sched .is-hot::before { border-color: var(--hot); box-shadow: 0 0 0 4px rgba(217, 45, 32, .12); } .cnd-sched .is-hot span { color: var(--hot); } .cnd-sched .is-hot b { color: var(--hot); } .cnd-modal__contact { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; } .cnd-modal__contact span { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: var(--pill); background: var(--brand-soft); color: var(--brand); font-size: var(--t-sm); } .cnd-modal__contact .cnd-icon { color: var(--brand-2); } .cnd-modal__note { margin: 0; padding: .85rem .95rem; border-radius: var(--r-sm); border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: var(--t-xs); line-height: 1.7; color: var(--ink-2); } .cnd-modal__note-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; font-family: var(--display); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); } .cnd-modal__note-head .cnd-icon { width: 1rem; height: 1rem; } .cnd-modal__note p { margin: 0 0 .5rem; } .cnd-modal__note p:last-child { margin-bottom: 0; } .cnd-modal__note strong { color: var(--ink); } .cnd-modal__foot { padding: .9rem 1.35rem 1.1rem; border-top: 1px solid var(--line-2); background: var(--paper); } .cnd-modal__dismiss { display: flex; align-items: center; gap: .4rem; margin: 0 0 .7rem; color: var(--mute); font-size: var(--t-xs); cursor: pointer; } .cnd-modal__dismiss input { width: 1rem; height: 1rem; accent-color: var(--brand-2); cursor: pointer; } html.cnd-modal-open { overflow: hidden; } /* ---------------------------------------------------------------- single */ .cnd-single { padding-bottom: 0; } /* .page-padding supplies the bottom gap */ .cnd-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; margin: 0 0 1rem; font-size: var(--t-sm); color: var(--mute); } .cnd-crumb a { color: var(--brand-2); font-weight: 700; } .cnd-crumb a:hover { text-decoration: underline; } .cnd-crumb .cnd-icon { width: .85rem; height: .85rem; color: var(--faint); } .cnd-crumb__now { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); } .cnd-split { display: grid; gap: 1.5rem; } @media (min-width: 920px) { .cnd-split { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto 1fr; align-items: start; gap: 2rem; } /* Intro sits on its own row so cnd-buy's top can never rise above the intro's bottom. */ .cnd-split__intro { grid-column: 1; grid-row: 1; } .cnd-split__main { grid-column: 1; grid-row: 2; } .cnd-side { grid-column: 2; grid-row: 2; } } .cnd-split__intro { margin-bottom: 1.1rem; } .cnd-split__intro h1 { margin: .35rem 0 .6rem; font-size: clamp(var(--t-xl), 3vw, var(--t-2xl)); line-height: 1.3; } .cnd-split__tags { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .cnd-split__tags .cnd-badge { box-shadow: none; background: var(--soft); } .cnd-split__tags .cnd-badge.is-open { background: #e7f8ef; } .cnd-media { position: relative; margin: 0 0 1.5rem; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #10302a; aspect-ratio: 16 / 10; max-height: 440px; display: grid; place-items: center; } .cnd-media__blur { position: absolute; inset: -10%; background-size: cover; background-position: center; filter: blur(22px) saturate(1.05); opacity: .45; } .cnd-media img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .cnd-media--video { aspect-ratio: 16 / 9; max-height: none; background: #000; } /* In-body illustration: kept compact (not a full-bleed poster) since the click-to-zoom popup is where anyone reading detail actually looks. */ .cnd-media--content { aspect-ratio: auto; aspect-ratio: 16 / 9; max-height: 440px; background: var(--soft); } .cnd-media--content img { max-height: 400px; } .cnd-media--video iframe { width: 100%; height: 100%; border: 0; display: block; } .cnd-media__zoom { all: unset; position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; cursor: zoom-in; } .cnd-media__zoom-badge { position: absolute; right: .6rem; bottom: .6rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(11, 34, 27, .55); color: #fff; opacity: .85; transition: opacity .15s ease, transform .15s ease; } .cnd-media__zoom-badge .cnd-icon { width: 1.05rem; height: 1.05rem; } .cnd-media__zoom:hover .cnd-media__zoom-badge, .cnd-media__zoom:focus-visible .cnd-media__zoom-badge { opacity: 1; transform: scale(1.08); } /* This is moved to a direct child of at runtime (see initImageLightbox) so its z-index isn't trapped inside the theme's [role="main"], which sets its own z-index and would otherwise cap this below the fixed header no matter how high z-index goes here. That also takes it out from under the `.cnd` ancestor, so these rules intentionally use literal values instead of var(--token) — the tokens are only defined on `.cnd` and would resolve to nothing out here. */ .cnd-lightbox[hidden] { display: none !important; } .cnd-lightbox { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; /* extra top clearance so the panel/close button clear the theme's fixed header instead of sitting flush under it */ padding: 6rem 1.5rem 2rem; } .cnd-lightbox__bg { position: absolute; inset: 0; background: rgba(11, 34, 27, .78); backdrop-filter: blur(3px); animation: cnd-fade .2s ease both; cursor: zoom-out; } .cnd-lightbox__panel { position: relative; z-index: 1; margin: 0; max-width: min(92vw, 1100px); max-height: calc(100vh - 8rem); line-height: 0; animation: cnd-pop .22s cubic-bezier(.16, 1, .3, 1) both; } .cnd-lightbox__panel img { display: block; max-width: 100%; max-height: calc(100vh - 8rem); border-radius: 10px; object-fit: contain; } .cnd-lightbox__x { position: absolute; top: -1rem; right: -1rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: #fff; color: #101828; box-shadow: 0 8px 20px -6px rgba(11, 34, 27, .5); cursor: pointer; transition: transform .15s ease; } .cnd-lightbox__x:hover { transform: scale(1.08); } .cnd-lightbox__x .cnd-icon { width: 1.1rem; height: 1.1rem; } @media (max-width: 767px) { .cnd-lightbox__x { top: -.5rem; right: -12px; } .cnd-media__zoom-badge {bottom: 11.6rem;} } .cnd-gallery { margin: 0 0 1.5rem; } .cnd-gallery__stage { position: relative; margin-bottom: .6rem; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #10302a; /* the box itself owns the size now — matches the video's own ratio so the content-image slide (absolutely positioned inside it) never has to resize the stage when it comes on screen */ aspect-ratio: 16 / 9; max-height: 440px; } /* Both slides share one fixed-size box — matching the video's own aspect ratio — so switching between them never resizes the stage or jumps the page underneath it. Slides stack via absolute positioning and crossfade instead of being swapped with display/hidden, which is what makes the transition feel like a swipe instead of a hard cut. */ .cnd-gallery__stage .cnd-gallery__slide { position: absolute; inset: 0; margin: 0; border: 0; border-radius: 0; aspect-ratio: auto; max-height: none; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .cnd-gallery__stage .cnd-gallery__slide.is-on { opacity: 1; pointer-events: auto; } .cnd-gallery__stage .cnd-media--content { background: transparent; } .cnd-gallery__nav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%; background: #fff; color: rgba(11, 34, 27, .55); opacity: 0; transition: opacity .15s ease, background .15s ease; cursor: pointer; } .cnd-gallery__stage:hover .cnd-gallery__nav, .cnd-gallery__nav:focus-visible { opacity: 1; } .cnd-gallery__nav:hover { background: rgba(147, 153, 151, 0.8); } .cnd-gallery__nav .cnd-icon { width: 1.1rem; height: 1.1rem; } .cnd-gallery__nav--prev { left: .6rem; } .cnd-gallery__nav--next { right: .6rem; } @media (max-width: 919px) { /* no hover on touch — keep the arrows visible so the gallery reads as swipeable at a glance */ .cnd-gallery__nav { opacity: 1; } } /* Auto-slide progress bar — a thin line across the bottom of the stage that fills up to the next slide (see initMediaGallery, course-nondegree.js). One shared bar rather than one per slide: only ever one slide is visible at a time, so it just resets and refills each time go() runs. */ .cnd-gallery__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); z-index: 2; } .cnd-gallery__progress > span { display: block; height: 100%; width: 0%; background: var(--brand-2); } @media (prefers-reduced-motion: reduce) { .cnd-gallery__progress { display: none; } } .cnd-gallery__thumbs { display: flex; gap: .6rem; } .cnd-gallery__thumb { position: relative; flex: 0 0 5.5rem; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border-radius: calc(var(--r) - 4px); border: 2px solid transparent; background: #10302a; cursor: pointer; transition: border-color .2s ease; } .cnd-gallery__thumb.is-on { border-color: var(--brand-2); } .cnd-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .cnd-gallery__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 20, 18, .4); color: #fff; } .cnd-gallery__play .cnd-icon { width: 1.3rem; height: 1.3rem; fill: currentColor; stroke: none; } @media (max-width: 480px) { .cnd-gallery__thumb { flex-basis: 4.4rem; } .cnd-block { padding: 1.3rem 1.1rem 1.2rem; } .cnd-block:hover { transform: none; } .cnd-ol li { padding-left: 2.6rem; } .cnd-ol li::before { width: 2rem; height: 2rem; } .cnd-ol li:not(:last-child)::after { left: 1rem; } } .cnd-block { --cnd-accent: var(--brand-2); --cnd-accent-soft: var(--brand-soft); --cnd-accent-ink: var(--brand); position: relative; margin-bottom: 1.5rem; padding: 1.7rem 1.6rem 1.5rem; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-1); overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } .cnd-block::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: linear-gradient(90deg, var(--cnd-accent), transparent 135%); background-size: 200% 100%; animation: cnd-block-shine 5s ease-in-out infinite; } @keyframes cnd-block-shine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } @media (prefers-reduced-motion: reduce) { .cnd-block::before { animation: none; } } .cnd-block:hover { box-shadow: var(--sh-2); border-color: transparent; transform: translateY(-3px); } .cnd-block--outcome { --cnd-accent: var(--accent); --cnd-accent-soft: var(--accent-soft); --cnd-accent-ink: var(--accent-ink); } .cnd-block--curriculum { --cnd-accent: var(--brand); --cnd-accent-soft: var(--brand-soft); --cnd-accent-ink: var(--brand); } .cnd-block h2 { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.1rem; font-size: var(--t-md); } .cnd-block__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border-radius: 50%; background: var(--cnd-accent-soft); color: var(--cnd-accent-ink); box-shadow: 0 0 0 5px var(--cnd-accent-soft), 0 4px 10px -4px rgba(16, 24, 40, .25); } .cnd-block__icon .cnd-icon { width: 1.25rem; height: 1.25rem; } .cnd-block__count { margin-left: auto; display: inline-flex; align-items: center; padding: .3rem; border-radius: var(--pill); background: var(--cnd-accent-soft); color: var(--cnd-accent-ink); font-family: var(--display); font-size: var(--t-xs); font-weight: 700; justify-content: center; line-height: normal; min-width: 1.6rem; } .cnd-prose { font-size: var(--t-base); line-height: 1.8; color: var(--ink-2); } .cnd-prose p { margin: 0 0 .7rem; } .cnd-prose p:last-child { margin-bottom: 0; } .cnd-prose ol { margin: 0 0 .7rem; padding-left: 1.2rem; } .cnd-prose li { margin-bottom: .3rem; } /* bullet lists inside objective/outcome copy read as a checklist, not a wall of dashes */ .cnd-prose ul { list-style: none; margin: 0 0 .3rem; padding: 0; display: grid; gap: .6rem; } .cnd-prose ul li { position: relative; padding-left: 1.9rem; margin-bottom: 0; } .cnd-prose ul li::before { content: "✓"; position: absolute; left: 0; top: .1em; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--cnd-accent, var(--brand-2)); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1; } .cnd-a--file { margin-top: .5rem; } /* curriculum as a vertical roadmap — a connecting line threads the numbered nodes */ .cnd-ol { list-style: none; counter-reset: cnd-n; margin: 0 0 1rem; padding: 0; position: relative; } .cnd-ol li { counter-increment: cnd-n; position: relative; display: flex; gap: 1rem; align-items: center; padding: .55rem 0 .55rem 3rem; font-size: var(--t-base); line-height: 1.5; color: var(--ink-2); transition: color .15s ease, transform .15s ease; } /* .cnd-ol li:not(:last-child)::after { content: ""; position: absolute; left: 1.15rem; top: 2.4rem; bottom: -.55rem; width: 2px; background: var(--line-2); } */ .cnd-ol li:hover { color: var(--cnd-accent-ink, var(--brand)); transform: translateX(4px); } .cnd-ol li::before { content: counter(cnd-n); position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--cnd-accent, var(--brand)); color: #fff; font-family: var(--display); font-size: var(--t-sm); font-weight: 700; box-shadow: 0 4px 10px -3px rgba(16, 24, 40, .35); } /* decision panel */ .cnd-buy { padding: 1.1rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper); box-shadow: var(--sh-2); display: grid; gap: .8rem; } /* Offset clears the fixed theme header so the pinned column is never covered. Sticky lives on .cnd-side (the buy panel + related-courses box together) so the two scroll and pin as one unit instead of the related box drifting off on its own once the buy panel stops. */ @media (min-width: 920px) { .cnd-side { position: sticky; top: 7rem; display: grid; gap: 1.5rem; align-content: start; } } /* momentary ring when the mobile CTA jumps here via #cnd-buy, so the eye catches where the page moved instead of it just silently reappearing */ @keyframes cnd-buy-ping { 0% { box-shadow: var(--sh-2), 0 0 0 0 rgba(18, 113, 90, .35); } 100% { box-shadow: var(--sh-2), 0 0 0 10px rgba(18, 113, 90, 0); } } .cnd-buy:target { animation: cnd-buy-ping 1s ease-out 1; } .cnd-buy__price { display: grid; gap: .1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line-2); } .cnd-buy__price > span { font-size: var(--t-xs); color: var(--mute); font-weight: 700; } .cnd-buy__price strong { font-family: var(--display); font-size: var(--t-2xl); line-height: 1.2; color: var(--ink); } .cnd-buy__price small { font-size: var(--t-sm); color: var(--mute); font-weight: 700; } .cnd-buy__fx { font-size: var(--t-sm); color: var(--mute); font-weight: 700; } .cnd-buy__note { margin: .1rem 0 0; font-size: var(--t-xs); color: var(--brand-2); line-height: 1.5; } .cnd-buy__note--fx { font-size: var(--t-3xs); } .cnd-buy__deadline { display: flex; align-items: flex-start; gap: .5rem; margin: 0; padding: .6rem .7rem; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand); font-size: var(--t-sm); font-weight: 700; line-height: 1.45; } .cnd-buy__deadline.is-hot { background: #fef3f2; color: var(--hot); } .cnd-buy__deadline .cnd-icon { margin-top: .18rem; } .cnd-buy__list { list-style: none; margin: 0; padding: .8rem 0 0; border-top: 1px solid var(--line-2); display: grid; gap: .5rem; } .cnd-buy__list li { display: flex; justify-content: space-between; gap: .75rem; font-size: var(--t-sm); } .cnd-buy__list span { color: var(--mute); flex: 0 0 auto; } .cnd-buy__list b { font-weight: 700; text-align: right; color: var(--ink-2); } .cnd-buy__contact { display: grid; gap: .35rem; padding-top: .8rem; border-top: 1px solid var(--line-2); font-size: var(--t-sm); color: var(--ink-2); } .cnd-buy__contact strong { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-bottom: .1rem; } .cnd-buy__contact span { display: inline-flex; align-items: center; gap: .4rem; } .cnd-buy__contact .cnd-icon { color: var(--brand-2); } .cnd-buy__back { justify-self: start; } .cnd-mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; /* z-index 50 lost to every third-party floating widget on the page. This is the page's primary action on small screens, so it outranks them. */ z-index: 9998; min-height: var(--cnd-cta-h); padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .98); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px -10px rgba(16, 24, 40, .3); align-items: center; gap: .75rem; backdrop-filter: saturate(1.4) blur(6px); transform: translateY(0); transition: transform .3s ease; } /* pushed out top-to-bottom once the footer scrolls into view, so it never sits on top of footer content */ .cnd-mobile-cta--hidden { transform: translateY(100%); } .cnd-mobile-cta__price { display: grid; gap: 0; min-width: 0; } .cnd-mobile-cta__price small { font-size: var(--t-2xs); color: var(--mute); } .cnd-mobile-cta__price b { font-family: var(--display); font-size: var(--t-md); color: var(--ink); line-height: 1.2; } .cnd-mobile-cta .cnd-btn { margin-left: auto; flex: 0 0 auto; } .cnd-related { margin-top: 2.25rem; padding-top: 1.4rem; border-top: 1px solid var(--line); } /* Drag-handle bar — the standard bottom-sheet affordance, shown only in the docked mobile/tablet layout below (a bare chevron icon alone didn't read as "this opens/closes" to anyone who hadn't already tried it). */ .cnd-related__handle { display: none; } .cnd-related__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .9rem; } .cnd-related__head h2 { margin: 0; font-size: var(--t-lg); } .cnd-related__head-actions { display: flex; align-items: center; gap: .6rem; } /* Collapse mechanism (mobile/tablet only, see the docked-drawer block below): grid-template-rows 1fr/0fr animates smoothly without knowing the content's real height up front, which a max-height transition can't do. */ .cnd-related__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; } .cnd-related__body > * { overflow: hidden; min-height: 0; } .cnd-related__toggle { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink-2); cursor: pointer; } .cnd-related__toggle .cnd-icon { width: 1rem; height: 1rem; transition: transform .25s ease; } .cnd-related.is-collapsed .cnd-related__body { grid-template-rows: 0fr; } .cnd-related.is-collapsed .cnd-related__toggle .cnd-icon { transform: rotate(-90deg); } /* swipeable card row — sits right under the buy panel now (moved out of the page footer) so it stays in view as soon as someone lands on the price box, instead of only after scrolling past the whole write-up. */ .cnd-related__carousel { position: relative; } .cnd-related__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: .15rem .15rem .5rem; margin: -.15rem -.15rem 0; } .cnd-related__track::-webkit-scrollbar { display: none; } .cnd-related__track .cnd-card { flex: 0 0 auto; width: 15.5rem; scroll-snap-align: start; } .cnd-related__nav { /* centered on the 4:3 media area of a 15.5rem card, not the whole card (which runs taller once the title/meta row is included) */ position: absolute; top: 5.8rem; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--brand-2); box-shadow: var(--sh-2); cursor: pointer; transition: background .15s ease, color .15s ease; } .cnd-related__nav:hover { background: var(--brand-2); color: #fff; border-color: var(--brand-2); } .cnd-related__nav .cnd-icon { width: 1.05rem; height: 1.05rem; } .cnd-related__nav--prev { left: .6rem; } .cnd-related__nav--next { right: .6rem; } /* Pagination dots — desktop-only (see .cnd-side rule below): the sidebar swiper shows one card at a time, so dots read which one and jump straight to it, the way the arrows alone don't make obvious on a narrow column. Populated/kept in sync by initRelatedCarousel() (course-nondegree.js). */ .cnd-related__dots { display: none; justify-content: center; align-items: center; gap: .4rem; margin-top: .7rem; } .cnd-related__dot { flex: 0 0 auto; width: .5rem; height: .5rem; padding: 0; border: none; border-radius: 50%; background: var(--line); cursor: pointer; transition: background .15s ease, transform .15s ease; } .cnd-related__dot:hover { background: #cfd6dd; } .cnd-related__dot.is-on { background: var(--brand-2); transform: scale(1.25); } /* ---- tablet / stacked single (covers iPad portrait 768 and iPad Pro 834) -- */ @media (max-width: 919px) { .cnd-mobile-cta { display: flex; } /* clear the fixed bar so it never covers the last section */ /* .cnd-single { padding-bottom: calc(var(--cnd-cta-h) + 1rem); } */ /* the sidebar is no longer a sidebar here — full width it reads as a giant empty slab, so cap it and keep it left-aligned under the content */ .cnd-buy { max-width: 30rem; } /* docked above the mobile CTA bar instead of sitting inline in the page flow, so it stays reachable without scrolling; collapsible, open by default. Slides away in sync with the CTA bar near the footer (see initMobileCtaAutoHide, course-nondegree.js). */ .cnd-related { position: fixed; left: 0; right: 0; bottom: calc(var(--cnd-cta-h) + env(safe-area-inset-bottom)); z-index: 9990; margin: 0; padding: .7rem .9rem; border-top: 1px solid var(--line); border-bottom: none; background: rgba(255, 255, 255, .98); backdrop-filter: saturate(1.3) blur(6px); box-shadow: 0 -8px 20px -12px rgba(16, 24, 40, .3); max-height: 60vh; transition: transform .3s ease; } /* NOTE: 100% here is relative to the drawer's OWN height, but the drawer is anchored above the CTA bar (bottom: var(--cnd-cta-h)), not flush against the viewport edge like the CTA bar itself. Sliding by only 100% left a strip exactly var(--cnd-cta-h) tall still inside the viewport — the drawer's header would keep poking out at the very bottom even while "hidden". Clearing that offset too pushes the whole thing fully off-screen. */ .cnd-related--hidden { transform: translateY(calc(100% + var(--cnd-cta-h) + env(safe-area-inset-bottom))); } .cnd-related__handle { display: flex; justify-content: center; align-items: center; height: 1.1rem; margin: -.4rem -.9rem .1rem; cursor: pointer; } .cnd-related__handle::before { content: ''; width: 2.25rem; height: .28rem; border-radius: 999px; background: var(--line); transition: background .15s ease; } .cnd-related__handle:active::before { background: var(--mute); } .cnd-related__head { cursor: pointer; /* the whole row opens/closes too, not just the handle above and the small chevron button — a bare chevron icon alone didn't read as "tap here to open/close" to anyone who hadn't already tried it */ padding: .3rem .1rem; margin: -.3rem -.1rem .3rem; border-radius: var(--r-xs); } .cnd-related__head:active { background: var(--soft); } .cnd-related__toggle { display: flex; width: 2.2rem; height: 2.2rem; background: var(--soft); box-shadow: var(--sh-1); } /* Media-on-top-of-text (the default .cnd-card layout) made every card as tall as its image, eating most of the drawer's height budget. Laying each card out as a row — thumbnail beside the text — cuts that a lot. A fixed height (rather than leaving it to flex-stretch) is what actually equalizes cards whose titles wrap to 1 vs 2 lines. */ .cnd-related__track .cnd-card { flex-direction: row; align-items: stretch; width: 17rem; height: 5.75rem; } .cnd-related__track .cnd-card__media { width: 5.75rem; flex: 0 0 auto; aspect-ratio: auto; } /* the row layout's media square (5.75rem) is far smaller than the ribbon was ever sized for — shrink it again so it doesn't swallow the thumbnail */ .cnd-related__track .cnd-card__ribbon span { bottom: 0rem; right: -1rem; width: 7.5rem; padding: .05rem 0; font-size: .725rem; line-height: 1.2; top: unset; transform: rotate(0deg); } .cnd-related__track .cnd-card__body { min-width: 0; justify-content: center; gap: .15rem; padding: .5rem .7rem; } .cnd-related__track .cnd-card__body h4 { font-size: var(--t-sm); line-height: 1.3; -webkit-line-clamp: 2; } .cnd-related__track .cnd-card__meta { padding-top: .25rem; font-size: var(--t-2xs); } /* .cnd-card__price sets its own font-size (var(--t-md), ~19px) meant for the old full-width card — far too large for this 5.75rem-tall row and was overflowing/wrapping against the price column */ .cnd-related__track .cnd-card__price { font-size: var(--t-xs); } .cnd-related__track .cnd-card__price small { font-size: var(--t-3xs); } /* re-center the nav arrows on the shorter row card instead of the old tall stacked one */ .cnd-related__nav { top: 2.875rem; } } @media (min-width: 920px) { .cnd-related__toggle { display: none; } /* Related courses rides along in the sticky sidebar now, right under the buy panel (see .cnd-side above) — boxed to match it instead of the plain border-top separator used when it ran full width under the page. */ .cnd-side .cnd-related { margin-top: 0; padding: 1.1rem; border-top: none; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-2); } .cnd-side .cnd-related__head { margin-bottom: .7rem; } .cnd-side .cnd-related__head h2 { font-size: var(--t-md); } /* One card fills the sidebar's width, so the track becomes a proper swiper: drag or hit the arrows to page through related courses one at a time instead of a wide horizontal scroller that never fit 300px. Cards keep the default column layout (media on top, text below) — just stretched to the sidebar's width instead of the usual fixed 15.5rem. */ .cnd-side .cnd-related__track { gap: .75rem; } .cnd-side .cnd-related__track .cnd-card { width: 100%; } .cnd-side .cnd-related__track .cnd-card__body h4 { font-size: var(--t-sm); } .cnd-side .cnd-related__nav { top: 6rem; width: 1.9rem; height: 1.9rem; } .cnd-side .cnd-related__nav--prev { left: .3rem; } .cnd-side .cnd-related__nav--next { right: .3rem; } .cnd-side .cnd-related__dots { display: flex; } } /* floating scroll-to-top — off-screen until initBackToTop() (course-nondegree.js) flips .is-on past a scroll threshold; sits above the mobile CTA bar so it never gets buried under it. */ .cnd-backtop { position: fixed; right: 1.1rem; bottom: calc(1.1rem + env(safe-area-inset-bottom)); z-index: 9997; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--brand-2); box-shadow: var(--sh-2); cursor: pointer; opacity: 0; transform: translateY(.5rem); pointer-events: none; transition: opacity .2s ease, transform .2s ease, background .15s ease, color .15s ease; } .cnd-backtop.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; } .cnd-backtop:hover { background: var(--brand-2); color: #fff; border-color: var(--brand-2); } .cnd-backtop .cnd-icon { width: 1.2rem; height: 1.2rem; } @media (max-width: 919px) { .cnd-backtop { bottom: calc(var(--cnd-cta-h) + var(--cnd-related-h) + env(safe-area-inset-bottom) + .8rem); } .cnd-backtop.cnd-backtop--cta-hidden { bottom: calc(1.1rem + env(safe-area-inset-bottom)); } } /* Between the phone rules and the two-column layout the grid is doing its own thing per component; line them up so a tablet does not show 3 course cards above 2 related ones. */ @media (min-width: 641px) and (max-width: 799px) { .cnd-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ------------------------------------------------------------ responsive */ @media (max-width: 640px) { .cnd { font-size: 16.5px; /* headings only — body copy stays at full size on small screens */ --t-lg: 1.25rem; --t-xl: 1.4375rem; --t-2xl: 1.625rem; } .cnd-top { border-radius: var(--r); padding: .45rem; } .cnd-top__label { display: none; } .cnd-top__links { width: 100%; } .cnd-top .cnd-btn { width: 100%; } .cnd-hero { border-radius: var(--r); } .cnd-hero__bar { padding: 1rem; } .cnd-hero__cta { width: 100%; } .cnd-hero__cta .cnd-btn { flex: 1 1 auto; } .cnd-swiper__nav { opacity: 1; } .cnd-docs { gap: .3rem; padding: .7rem 0; } .cnd-docs__label { width: 100%; } /* stack: search keeps the underline, switch drops to its own row with the label leading and the track on the right */ .cnd-board__filters { gap: .1rem; padding-bottom: .6rem; } .cnd-field { flex: 1 1 100%; max-width: none; } .cnd-toggle { width: 100%; margin-left: 0; padding: .55rem 0 .15rem; justify-content: space-between; flex-direction: row-reverse; } .cnd-reset { margin-left: auto; padding-bottom: .3rem; } /* a full-width bottom sheet up to ~82% of the screen still read as "the modal ate the whole page" on a phone — keep it a small centered card instead, sized to its actual content, capped well short of the viewport */ .cnd-modal { padding: 1rem; align-items: center; } .cnd-modal__panel { width: 100%; max-width: 22rem; border-radius: var(--r-lg); max-height: 72vh; max-height: 72svh; } /* the decorative band and its floating circle were sized for a 460px desktop dialog — at phone width the same numbers read as oversized */ .cnd-modal__head { padding: 1rem 2.4rem .9rem 1rem; } .cnd-modal__head h2 { font-size: var(--t-sm); } .cnd-modal__head::after { width: 5.5rem; height: 5.5rem; right: -2rem; top: -2.8rem; } .cnd-modal__x { width: 1.7rem; height: 1.7rem; top: .65rem; right: .65rem; } .cnd-modal__body { flex: 1 1 auto; min-height: 0; padding: .85rem 1rem; } .cnd-modal__note { padding: .7rem .8rem; font-size: var(--t-2xs); } .cnd-modal__foot { padding: .65rem 1rem .8rem; } .cnd-media { aspect-ratio: 16 / 9; } } @media (prefers-reduced-motion: reduce) { .cnd *, .cnd *::before, .cnd *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .cnd-card:hover { transform: none; } }