/* ===================================================================================================================== dgm_section_events, layout "explore" with ex_card "course": the Akademie's course card and the finder's list (Akademie beauty pass, task C, 2026-11-13). Loaded only where a course card is rendered (templates/frontend.html, section "course"), so no other explorer and not the shelf changes. The card keeps its own spacing (4 px grid), type sizes and elevation (a hairline at rest, the lift only under the pointer); it reads the Akademie theme's variables (Resources/Public/Akademie/theme.css: --akt-r, --akt-line, --akt-line-hi, --akt-lift, --akt-ink, --akt-mute) where they exist and keeps its own values elsewhere. Pinned: links, accents and filled controls #00abe3, text navy #003e52, nothing below 12 px. Round 2 (2026-11-14, the owner: "more compact, little smaller text size"): the whole finder one step denser, same structure; the people block (people.css) in one-line form inside this card only (rules below with a higher weight). ===================================================================================================================== */ #crm__widgets .dse-ex--course { --kc-r: var(--akt-r, 16px); --kc-line: var(--akt-line, #e1e8ed); --kc-line-hi: var(--akt-line-hi, rgb(0 171 227 / .5)); --kc-bg: #fff; --kc-lift: var(--akt-lift, 0 1px 2px rgb(0 40 60 / .06), 0 18px 36px -22px rgb(0 40 60 / .38)); --kc-ink: #003e52; --kc-text: var(--akt-ink, #3d5a6c); --kc-muted: var(--akt-mute, #4a6475); --kc-acc: #00abe3; --kc-deep: #007aa8; --kc-gap: 16px; } /* the list: one card per row on phones, two from 520 px of list width, three from 820 px (beside the filter column at 1440: about 285 px a card); the column of filters 240 px (two-line names break at a word) */ @media (min-width: 1024px) { #crm__widgets .dse-ex--course.dse-ex--open { grid-template-columns: 240px minmax(0, 1fr); column-gap: 28px; } } #crm__widgets .dse-ex--course .dse-ex__res { container: kc / inline-size; } #crm__widgets .dse-ex--course .dse-ex__res .dse-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; } @container kc (min-width: 520px) { #crm__widgets .dse-ex--course .dse-ex__res .dse-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kc-gap); } } @container kc (min-width: 820px) { #crm__widgets .dse-ex--course .dse-ex__res .dse-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kc-gap); } } /* the card: picture on top, then name, one line, the date block, "Zum Kurs" */ #crm__widgets .dse-ex--course .dse-cards > .dse-kc { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--kc-line); border-radius: var(--kc-r); background: var(--kc-bg); box-shadow: none; overflow: hidden; transition: border-color 200ms var(--ex-ease), box-shadow 200ms var(--ex-ease); } #crm__widgets .dse-ex--course .dse-cards > .dse-kc:hover { border-color: var(--kc-line-hi); box-shadow: var(--kc-lift); } #crm__widgets .dse-ex--course .dse-kc .dse-stretch::after { border-radius: var(--kc-r); } #crm__widgets .dse-kc__pic { --dse-ev: #00abe3; position: relative; display: block; flex: none; aspect-ratio: 2 / 1; overflow: hidden; background: color-mix(in srgb, var(--dse-ev) 18%, #eef6fa); } #crm__widgets .dse-kc__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ex-ease); } #crm__widgets .dse-kc__pic img.is-broken { visibility: hidden; } #crm__widgets .dse-kc:hover .dse-kc__pic img { transform: scale(1.035); } #crm__widgets .dse-kc__body { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 14px 16px; } /* the name: two lines for nearly every course, a third only for a very long one */ #crm__widgets .dse-kc__name { display: -webkit-box; margin: 0; overflow: hidden; color: var(--kc-ink); font: 600 16.5px/1.3 var(--ex-head); letter-spacing: -.01em; text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } #crm__widgets .dse-kc__name a { color: inherit; text-decoration: none; transition: color 150ms; } #crm__widgets .dse-kc:hover .dse-kc__name a { color: var(--kc-deep); } #crm__widgets .dse-kc__sub { display: -webkit-box; margin: 6px 0 0; overflow: hidden; color: var(--kc-text); font: 400 14px/1.45 var(--ex-body); text-wrap: pretty; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* the date is the strong line; duration, countdown, place and language beside and below it */ /* the foot: date block left, the round arrow right (one line of height); it sits on the card's foot, so feet align in a row */ #crm__widgets .dse-kc__meta { margin-top: auto; padding: 10px 44px 0 0; } #crm__widgets .dse-kc__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; color: var(--kc-ink); font-variant-numeric: tabular-nums; } #crm__widgets .dse-kc__date { font: 600 15px/1.35 var(--ex-body); letter-spacing: -.005em; } #crm__widgets .dse-kc__dur { white-space: nowrap; } #crm__widgets .dse-kc__left { display: none; } #crm__widgets .dse-kc__where { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 2px 0 0; color: var(--kc-muted); font: 400 13px/1.4 var(--ex-body); } #crm__widgets .dse-kc__where > span:not(:last-child)::after { content: "\00b7"; margin-left: 6px; color: var(--kc-muted); font-weight: 400; } #crm__widgets .dse-kc__lang { color: var(--kc-ink); font-weight: 600; } /* "Zur Fortbildung": the card is the link; the cue is the filled round arrow alone at the lower right (the words stay for assistive technology in the name's link, here they are hidden) */ #crm__widgets .dse-kc__go { position: absolute; right: 16px; bottom: 14px; display: inline-flex; margin: 0; color: var(--kc-acc); } #crm__widgets .dse-kc__got { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #crm__widgets .dse-kc__go svg { box-sizing: content-box; width: 14px; height: 14px; padding: 8px; border-radius: 50%; background: var(--kc-acc); color: #fff; transition: transform 200ms var(--ex-ease); } #crm__widgets .dse-kc:hover .dse-kc__go svg { transform: translateX(3px); } /* the feed's marks on the picture's corner */ #crm__widgets .dse-kc__marks { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; pointer-events: none; } #crm__widgets .dse-kc__mark { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px 2px 8px; border-radius: 999px; background: #fff; color: var(--kc-ink); font: 600 13px/1.3 var(--ex-body); white-space: nowrap; box-shadow: 0 1px 2px rgb(0 33 44 / .14), 0 4px 12px -6px rgb(0 33 44 / .3); } #crm__widgets .dse-kc__mark::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--kc-acc); } #crm__widgets .dse-kc__mark--booked { color: #a1262c; } #crm__widgets .dse-kc__mark--booked::before { background: #d13b42; } #crm__widgets .dse-kc__mark--plan { color: #00658a; } #crm__widgets .dse-kc__mark--plan::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--kc-acc); } #crm__widgets .dse-kc__mark--kind::before { display: none; } #crm__widgets .dse-kc__mark--kind i { width: 7px; height: 7px; border-radius: 50%; background: var(--dse-tc, #6f8798); } /* "add to calendar" at the foot (when the element offers it) */ #crm__widgets .dse-ex.dse-ex--course .dse-cards > .dse-kc.dse-card:nth-child(n) .dse-ex__ics { margin: 0; padding: 0 16px; } /* the featured card: the next course of the selection, two columns wide, the picture beside the text */ @container kc (min-width: 520px) { /* the picture 38 % of the width, as high as the row (no height of its own: the card is never taller than its neighbours) */ #crm__widgets .dse-ex--course .dse-cards > .dse-kc.is-feat:nth-child(n):nth-child(n) { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); grid-template-rows: 1fr auto; } #crm__widgets .dse-kc.is-feat .dse-kc__pic { grid-row: 1 / -1; aspect-ratio: auto; height: 100%; min-height: 0; } #crm__widgets .dse-kc.is-feat .dse-kc__pic img { position: absolute; inset: 0; } #crm__widgets .dse-kc.is-feat .dse-kc__body { padding: 16px 18px 14px 20px; } #crm__widgets .dse-kc.is-feat .dse-kc__name { font-size: 19.5px; line-height: 1.25; letter-spacing: -.015em; } #crm__widgets .dse-kc.is-feat .dse-kc__marks { right: auto; max-width: calc(38% - 20px); } #crm__widgets .dse-kc.is-feat .dse-ex__ics { grid-column: 2; } } /* a course alone in its year group spans the row the same way (no gap of empty columns beside it); its text keeps the card's sizes unless it is the featured one */ @container kc (min-width: 520px) { #crm__widgets .dse-ex--course .dse-cards > .dse-kc:only-child:nth-child(n):nth-child(n) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; } #crm__widgets .dse-kc:only-child .dse-kc__pic { grid-row: 1 / -1; aspect-ratio: auto; height: 100%; min-height: 200px; } #crm__widgets .dse-kc:only-child .dse-kc__pic img { position: absolute; inset: 0; } #crm__widgets .dse-kc:only-child .dse-kc__body { padding: 18px 20px 14px; } #crm__widgets .dse-kc:only-child .dse-kc__marks { right: auto; max-width: calc(50% - 20px); } } @container kc (min-width: 820px) { #crm__widgets .dse-ex--course .dse-cards > .dse-kc:only-child:nth-child(n):nth-child(n) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } #crm__widgets .dse-kc:only-child .dse-kc__marks { max-width: calc(33% - 24px); } #crm__widgets .dse-kc:only-child .dse-kc__body { padding: 18px 24px 14px; } } /* "in 3 Monaten" beside the date (on every card that is the featured one) */ #crm__widgets .dse-kc.is-feat .dse-kc__left:not(:empty) { display: inline; color: var(--kc-deep); font: 600 13px/1.35 var(--ex-body); white-space: nowrap; } /* phones: a lower picture, so the list does not double in length */ @media (max-width: 639.98px) { #crm__widgets .dse-ex--course .dse-ex__res .dse-cards { gap: 12px; } #crm__widgets .dse-kc__pic { aspect-ratio: auto; height: 150px; } #crm__widgets .dse-kc__body { padding: 14px 16px; } #crm__widgets .dse-kc__name { font-size: 17px; } #crm__widgets .dse-kc__sub { font-size: 14px; } #crm__widgets .dse-kc__meta { padding-right: 48px; } #crm__widgets .dse-kc__go svg { width: 16px; height: 16px; padding: 9px; } #crm__widgets .dse-ex.dse-ex--course .dse-cards > .dse-kc.dse-card:nth-child(n) .dse-ex__ics { min-height: 44px; padding: 0 16px; } } @media (prefers-reduced-motion: reduce) { #crm__widgets .dse-kc:hover :is(.dse-kc__pic img, .dse-kc__go svg) { transform: none; } } /* readable greys in the course finder (second review): empty months, options without a course */ #crm__widgets .dse-ex--course .dse-ex__mo[aria-disabled="true"] .dse-ex__mn { color: #5f7585; font-weight: 500; } #crm__widgets .dse-ex--course .dse-ex__opt.is-off { color: #5f7383; } /* r3: 4.9:1 on white (was #6b7f8f, 4.15:1) */ #crm__widgets .dse-ex--course .dse-ex__opt.is-off :is(input, .dse-ex__n) { opacity: 1; } #crm__widgets .dse-ex--course .dse-ex__opt.is-off .dse-ex__n { color: #5f7383; font-weight: 500; } #crm__widgets .dse-ex--course .dse-ex__opt.is-off input { border-style: dashed; border-color: #9fb2be; background: transparent; } /* the element's own link below the finder and in its empty state: a full touch target */ #crm__widgets .dse:has(> .dse-ex--course) > .dse-foot .dse-link, #crm__widgets .dse-ex--course .dse-ex__none .dse-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; } /* keyboard: the focus ring goes round the whole card (the name's link covers it) */ #crm__widgets .dse-ex--course .dse-kc:has(.dse-stretch:focus-visible) { outline: 2px solid var(--kc-acc); outline-offset: 3px; } #crm__widgets .dse-ex--course .dse-kc .dse-stretch:focus-visible { outline: none; } /* the people block (people.css, round k3) between the one line and the date block: the free space of the card above it, so people and dates line up along a row; 8 px to the blocks around it */ #crm__widgets .dse-ex--course .dse-kc .dse-kc__body > :has(+ .dkp) { margin-bottom: 8px; } #crm__widgets .dse-ex--course .dse-kc .dse-kc__body > .dkp ~ .dse-kc__meta { margin-top: 0; padding-top: 8px; } /* the wide cards: people and date on the card's foot as on the others, the name and the one line centred in the space above it (no empty middle) */ @container kc (min-width: 520px) { #crm__widgets .dse-ex--course .dse-kc:is(.is-feat, :only-child) .dse-kc__name { margin-top: auto; } #crm__widgets .dse-ex--course .dse-kc:is(.is-feat, :only-child) .dse-kc__body > :has(+ .dkp) { margin-bottom: 16px; } #crm__widgets .dse-ex--course .dse-kc:is(.is-feat, :only-child) .dkp { margin-top: auto; } } /* ===================================================================================================================== Round k3 (2026-11-14, the owner: "more polished and a little cleaner"): the finder around the cards made calm. One tool row without a box (count, search, sort), the chips below it only when a filter is set, a quiet month strip, collapsible filter groups (course.js) with number badges, options without a course hidden, year heads with a badge. Colours: navy ink, the theme's mute, cyan for accents and the pale cyan of the badges; nothing else. ===================================================================================================================== */ #crm__widgets .dse-ex--course { --kc-badge: #e2f3fa; } /* the layout from 1024 px: [count | tool row] above, then the chips and the month strip over the cards; the filter column starts beside the first year head */ @media (min-width: 1024px) { #crm__widgets .dse-ex--course.dse-ex--open { grid-template-columns: 240px minmax(0, 1fr); column-gap: 24px; row-gap: 0; } #crm__widgets .dse-ex--course.dse-ex--open > .dse-ex__count--solo { grid-column: 1; grid-row: 1; align-self: center; margin: 0; } #crm__widgets .dse-ex--course.dse-ex--open > .dse-ex__bar { grid-column: 2; grid-row: 1; } #crm__widgets .dse-ex--course.dse-ex--open > .dse-ex__main { display: contents; } #crm__widgets .dse-ex--course.dse-ex--open > .dse-ex__main > .dse-ex__state { grid-column: 2; grid-row: 2; } #crm__widgets .dse-ex--course.dse-ex--open > .dse-ex__main > .dse-ex__time { grid-column: 2; grid-row: 3; } #crm__widgets .dse-ex--course.dse-ex--open > .dse-ex__main > .dse-ex__res { grid-column: 2; grid-row: 4; } #crm__widgets .dse-ex--course.dse-ex--open > .dse-ex__main > .dse-ex__none { grid-column: 2; grid-row: 5; } #crm__widgets .dse-ex--course.dse-ex--open > .dse-ex__main > .dse-ex__more { grid-column: 2; grid-row: 6; justify-self: center; } #crm__widgets .dse-ex--course.dse-ex--open > .dse-ex__side { grid-column: 1; grid-row: 4 / span 3; align-self: start; margin-top: 16px; } } /* narrower: the chips above the strip as well */ #crm__widgets .dse-ex--course > .dse-ex__main { display: flex; flex-direction: column; min-width: 0; } #crm__widgets .dse-ex--course > .dse-ex__main > .dse-ex__state { order: -1; } /* the tool row: no box; count left, the search field (360 px), the sort switch right */ #crm__widgets .dse-ex--course > .dse-ex__count--solo { margin: 0 0 12px; color: var(--kc-ink); font: 600 15px/1.35 var(--ex-body); font-variant-numeric: tabular-nums; } #crm__widgets .dse-ex--course .dse-ex__barin { gap: 12px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #crm__widgets .dse-ex--course .dse-ex__bar.is-stuck .dse-ex__barin { margin: 0 -12px; padding: 8px 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(0 40 60 / .06), 0 12px 28px -18px rgb(0 40 60 / .4); } #crm__widgets .dse-ex--course .dse-ex__search { flex: 0 1 360px; max-width: 360px; min-width: 0; } #crm__widgets .dse-ex--course .dse-ex__search input { height: 44px; border: 1px solid var(--kc-line); border-radius: 10px; background: #fff; color: var(--kc-ink); } #crm__widgets .dse-ex--course .dse-ex__search input::placeholder { color: var(--kc-muted); } #crm__widgets .dse-ex--course .dse-ex__search svg { color: var(--kc-muted); } #crm__widgets .dse-ex--course .dse-ex__open { border-color: var(--kc-line); border-radius: 10px; } #crm__widgets .dse-ex--course .dse-ex__bar .dse-ex__seg { margin-left: auto; } @media (min-width: 640px) { #crm__widgets .dse-ex--course .dse-ex__search input { font-size: 15px; } #crm__widgets .dse-ex--course .dse-ex__open { height: 44px; font-size: 14px; } #crm__widgets .dse-ex--course .dse-ex__bar .dse-ex__seg button { min-height: 26px; padding: 0 12px; font-size: 13px; } #crm__widgets .dse-ex--course .dse-ex__pills button { min-height: 28px; padding: 0 9px 0 11px; font-size: 12.5px; } #crm__widgets .dse-ex--course .dse-ex__clear { min-height: 28px; font-size: 13px; } } @media (max-width: 639.98px) { #crm__widgets .dse-ex--course .dse-ex__barin { flex-wrap: nowrap; gap: 8px; } #crm__widgets .dse-ex--course .dse-ex__search { flex: 1 1 0; min-width: 0; max-width: none; } #crm__widgets .dse-ex--course .dse-ex__open { flex: none; } } /* the chips: only when a filter is set, right under the tool row */ #crm__widgets .dse-ex--course .dse-ex__state { gap: 8px 12px; margin: 12px 0 0; } /* the month strip (round k4, 2026-11-14, the owner: "needs a little more details"): a small, precise timeline. The year as a small label above its first month, the month names (navy where trainings run, muted elsewhere), above a hairline baseline a tiny chart: one rounded bar per training at its start day and as long as its days (6 px at least), up to three rows where they overlap, cyan (booked out: muted; outside the current filter: 30 %); short ticks at the month boundaries, a longer one where the year changes; today as a cyan dot on the baseline with "heute" under it. Hover or focus gives a month a pale cyan ground and a tooltip with its number (course.js), a chosen month a stronger one. */ #crm__widgets .dse-ex--course .dse-ex__time { margin: 12px 0 0; } #crm__widgets .dse-ex--course .dse-ex__strip { margin: 0 -4px; padding: 0 4px; grid-auto-columns: minmax(56px, 1fr); } #crm__widgets .dse-ex--course .dse-ex__mo { position: relative; display: block; min-width: 0; padding: 14px 6px 17px; border-radius: 8px; white-space: nowrap; transition: background-color 150ms var(--ex-ease); } #crm__widgets .dse-ex--course .dse-ex__mo:hover, #crm__widgets .dse-ex--course .dse-ex__mo:focus-visible { background: #eef8fc; } #crm__widgets .dse-ex--course .dse-ex__mo[aria-disabled="true"]:hover { background: transparent; } #crm__widgets .dse-ex--course .dse-ex__mo.is-on { background: #d3edf8; box-shadow: none; } /* the baseline (one hairline across, drawn per month) and the ticks at the month boundaries */ #crm__widgets .dse-ex--course .dse-ex__mo::after { content: ""; display: block; position: absolute; left: 0; right: 0; bottom: 15px; height: 1px; background: var(--kc-line); } #crm__widgets .dse-ex--course .dse-ex__mo::before { content: ""; display: block; position: absolute; left: 0; bottom: 11px; width: 1px; height: 5px; background: #c3d3dc; } #crm__widgets .dse-ex--course .dse-ex__mo:first-child::before { display: none; } #crm__widgets .dse-ex--course .dse-ex__mo.is-year::before { top: auto; bottom: 9px; height: 11px; background: rgb(0 62 82 / .35); } /* the year above its first month */ #crm__widgets .dse-ex--course .dse-ex__yr { position: absolute; top: 0; left: 6px; display: block; height: auto; margin: 0; color: var(--kc-muted); font: 600 12px/13px var(--ex-body); letter-spacing: 0; } #crm__widgets .dse-ex--course .dse-ex__yr:empty { display: none; } #crm__widgets .dse-ex--course .dse-ex__mn { display: block; color: var(--kc-ink); font: 600 12.5px/15px var(--ex-body); letter-spacing: 0; } #crm__widgets .dse-ex--course .dse-ex__mo[aria-disabled="true"] .dse-ex__mn { color: var(--kc-muted); font-weight: 400; } #crm__widgets .dse-ex--course .dse-ex__mo.is-on .dse-ex__mn { color: var(--kc-ink); font-weight: 700; } /* the chart: three rows of bars standing on the baseline */ #crm__widgets .dse-ex--course .dse-ex__lanes { position: relative; display: block; width: 100%; height: 14px; margin: 4px 0 0; overflow: visible; } #crm__widgets .dse-ex--course .dse-ex__lanes i { position: absolute; top: auto; bottom: calc(min(var(--l), 2) * 5px); left: min(var(--x), calc(100% - 6px)); width: max(6px, var(--w)); height: 4px; border-radius: 2px; background: var(--kc-acc); box-shadow: none; opacity: 1; cursor: pointer; transition: opacity 200ms; } #crm__widgets .dse-ex--course .dse-ex__lanes i::after { content: ""; position: absolute; inset: -2px -1px; } #crm__widgets .dse-ex--course .dse-ex__lanes i.is-booked { background: #a8bcc8; } #crm__widgets .dse-ex--course .dse-ex__lanes i.is-off, #crm__widgets .dse-ex--course .dse-ex__strip.has-pick .dse-ex__mo:not(.is-on) .dse-ex__lanes i:not(.is-off) { opacity: .3; } #crm__widgets .dse-ex--course .dse-ex__lanes i:hover { background: var(--kc-deep); } /* today: a cyan dot on the baseline, "heute" under it */ #crm__widgets .dse-ex--course .dse-ex__now { position: absolute; top: auto; bottom: -4px; left: var(--x); display: block; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--kc-acc); } #crm__widgets .dse-ex--course .dse-ex__now::after { display: none; } #crm__widgets .dse-ex--course .dse-ex__nowl { position: absolute; top: calc(100% + 4px); left: var(--x); display: block; color: var(--kc-deep); font: 600 12px/12px var(--ex-body); } /* the bar a click leads to: the card lights up for a moment */ #crm__widgets .dse-ex--course .dse-cards > .dse-kc.is-flash { border-color: var(--kc-acc); box-shadow: 0 0 0 3px rgb(0 171 227 / .28), var(--kc-lift); } /* the strip's tooltip: the portraits' look (people.css), repeated here for pages where no card shows people */ .dkp-tip { position: fixed; z-index: 2147483000; display: grid; gap: 1px; max-width: min(280px, calc(100vw - 16px)); padding: 6px 10px; box-sizing: border-box; border-radius: 6px; background: #fff; color: #003e52; pointer-events: none; text-align: left; outline: 1px solid rgb(0 62 82 / .1); box-shadow: 0 10px 28px -8px rgb(0 33 44 / .5), 0 2px 6px rgb(0 33 44 / .22); font: 400 12.5px/1.4 "Theme-Font", Inter, system-ui, sans-serif; opacity: 0; transform: scale(.96); transform-origin: var(--ax, 50%) 100%; } .dkp-tip.is-below { transform-origin: var(--ax, 50%) 0; } .dkp-tip.is-in { opacity: 1; transform: none; transition: opacity .12s ease-out, transform .12s ease-out; } .dkp-tip[hidden] { display: none; } .dkp-tip__n { font-weight: 600; } .dkp-tip__i { color: #4f6b78; } .dkp-tip__arrow { position: absolute; left: var(--ax, 50%); bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: #fff; transform: rotate(45deg); border-radius: 1px; } .dkp-tip.is-below .dkp-tip__arrow { top: -4px; bottom: auto; } @media (prefers-reduced-motion: reduce) { .dkp-tip, .dkp-tip.is-in { transform: none; transition: none; } #crm__widgets .dse-ex--course .dse-ex__mo { transition: none; } } /* the results and the year heads: "2027" and the number as a badge */ #crm__widgets .dse-ex--course .dse-ex__res { margin-top: 16px; } #crm__widgets .dse-ex--course .dse-ex__grp + .dse-ex__grp { margin-top: 32px; } #crm__widgets .dse-ex--course .dse-ex__yh { justify-content: flex-start; gap: 8px; margin: 0 0 12px; } #crm__widgets .dse-ex--course .dse-ex__yh::after { display: none; } #crm__widgets .dse-ex--course .dse-ex__y { font: 600 20px/1.2 var(--ex-head); letter-spacing: -.01em; } #crm__widgets .dse-ex--course :is(.dse-ex__yn, .dse-ex__n, .dkf__n) { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 24px; height: 20px; margin: 0; padding: 0 7px; border-radius: 10px; background: var(--kc-badge); color: var(--kc-ink); font: 600 12px/1 var(--ex-body); font-variant-numeric: tabular-nums; } #crm__widgets .dse-ex--course .dse-ex__yn { order: 0; } /* the filter column and the sheet: "Filter" once, collapsible groups (course.js) with a chevron and a badge with the number chosen; options 14 px on 32 px rows (44 px in the sheet), a 16 px box with a navy-tinted border, the count as a badge on the right; options without a course under the selection hidden (a chosen one stays); without script all open */ #crm__widgets .dse-ex--course .dse-ex__sideh { margin: 0 0 4px; color: var(--kc-ink); font: 600 13px/1.3 var(--ex-body); letter-spacing: 0; } #crm__widgets .dse-ex--course .dse-ex__side .dse-ex__fs { padding: 2px 0; border-top: 1px solid var(--kc-line); } #crm__widgets .dse-ex--course .dse-ex__side .dse-ex__sideh + .dse-ex__fs { padding-top: 2px; border-top: 1px solid var(--kc-line); } #crm__widgets .dse-ex--course .dse-ex__side .dse-ex__lg { margin: 0 0 2px; color: var(--kc-ink); font: 600 13px/1.3 var(--ex-body); } #crm__widgets .dse-ex--course .dse-ex__opt { gap: 10px; min-height: 32px; padding-block: 4px; color: var(--kc-ink); font: 400 14px/1.3 var(--ex-body); hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; } #crm__widgets .dse-ex--course .dse-ex__opt input { width: 16px; height: 16px; border: 1px solid rgb(0 62 82 / .32); border-radius: 4px; } #crm__widgets .dse-ex--course .dse-ex__opt input:checked { border-color: var(--kc-acc); } #crm__widgets .dse-ex--course .dse-ex__n { margin-left: auto; } #crm__widgets .dse-ex--course .dse-ex__gl { margin: 6px 0 2px; color: var(--kc-muted); font: 500 12.5px/1.3 var(--ex-body); } #crm__widgets .dse-ex--course .dse-ex__opt.is-off:not(:has(input:checked)), #crm__widgets .dse-ex--course .dse-ex__opt.is-cut { display: none; } #crm__widgets .dse-ex--course .dse-ex__side .is-clip:not(.is-all) .dse-ex__og > label:nth-of-type(n+9):not(:has(input:checked)):not(.is-cut):not(.is-off) { display: flex; } #crm__widgets .dse-ex--course .dse-ex__mopts { min-height: 30px; margin: 0; color: var(--kc-deep); font-size: 13px; } #crm__widgets .dse-ex--course .dse-ex__mopts[hidden] { display: none; } #crm__widgets .dse-ex--course .dkf > legend { float: none; width: 100%; margin: 0; padding: 0; } #crm__widgets .dse-ex--course .dkf__t { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; margin: 0; padding: 0; border: 0; background: none; color: var(--kc-ink); font: 600 13px/1.3 var(--ex-body); text-align: left; cursor: pointer; } #crm__widgets .dse-ex--course .dse-ex__side .dkf__t { min-height: 34px; } #crm__widgets .dse-ex--course .dkf__l { flex: 1; min-width: 0; } #crm__widgets .dse-ex--course .dkf__n { background: var(--kc-acc); color: #fff; } #crm__widgets .dse-ex--course .dkf__n[hidden] { display: none; } #crm__widgets .dse-ex--course .dkf__t svg { flex: none; width: 16px; height: 16px; color: var(--kc-muted); transition: transform 200ms var(--ex-ease); } #crm__widgets .dse-ex--course .dkf.is-shut .dkf__t svg { transform: rotate(-90deg); } #crm__widgets .dse-ex--course .dkf__t:hover { color: var(--kc-deep); } /* the fold (round k4): grid rows 0fr / 1fr and opacity over 180 ms; the inner box keeps 8 px of room on every side for the rows' hover ground and the focus rings (its negative margin keeps the alignment) */ #crm__widgets .dse-ex--course .dkf__b { display: grid; grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows 180ms var(--ex-ease), opacity 180ms var(--ex-ease), visibility 0s; } #crm__widgets .dse-ex--course .dkf.is-shut .dkf__b { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 180ms var(--ex-ease), opacity 120ms var(--ex-ease), visibility 0s 180ms; } #crm__widgets .dse-ex--course .dkf__in { min-height: 0; margin: -8px; padding: 8px 8px 14px; overflow: hidden; } #crm__widgets .dse-ex--course .dkf.is-shut .dkf__in { padding-bottom: 8px; } /* the sheet (phones and tablets): the same groups, 44 px rows */ #crm__widgets .dse-ex--course .dse-ex__sb .dse-ex__fs.dkf { padding: 4px 0; border-top: 1px solid var(--kc-line); } #crm__widgets .dse-ex--course .dse-ex__sb .dkf__t { min-height: 48px; font-size: 15px; } #crm__widgets .dse-ex--course .dse-ex__sb .dse-ex__opt { min-height: 44px; font-size: 15px; } #crm__widgets .dse-ex--course .dse-ex__sb .dkf .dse-ex__og { columns: auto; } /* the cards: a hairline at rest; under the pointer the hairline turns cyan and the card lifts 2 px with the soft shadow; the picture's corners follow the card's exactly */ #crm__widgets .dse-ex--course .dse-cards > .dse-kc { isolation: isolate; transition: border-color 200ms var(--ex-ease), box-shadow 200ms var(--ex-ease), transform 200ms var(--ex-ease); } #crm__widgets .dse-ex--course .dse-cards > .dse-kc:hover { border-color: var(--kc-acc); box-shadow: var(--kc-lift); transform: translateY(-2px); } #crm__widgets .dse-ex--course .dse-kc__pic { border-radius: calc(var(--kc-r) - 1px) calc(var(--kc-r) - 1px) 0 0; } #crm__widgets .dse-ex--course .dse-kc__pic img { border-radius: inherit; } @container kc (min-width: 520px) { #crm__widgets .dse-ex--course .dse-kc:is(.is-feat, :only-child) .dse-kc__pic { border-radius: calc(var(--kc-r) - 1px) 0 0 calc(var(--kc-r) - 1px); } } #crm__widgets .dse-ex--course .dse-kc:has(.dse-stretch:focus-visible) { outline: 2px solid var(--kc-acc); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { #crm__widgets .dse-ex--course .dse-cards > .dse-kc:hover { transform: none; } } /* the block's head on topic and start pages: the tool row follows the lead closely */ #crm__widgets .dse--explore:has(> .dse-ex--course) > .dse-head { margin-bottom: 24px; } /* --------------------------------------------------------------------------------------------------------------------- Round k4 (2026-11-14): focus, clipping and motion --------------------------------------------------------------------------------------------------------------------- */ /* one focus ring for every control of the finder: 2 px cyan, 2 px off, following the control's radius, keyboard only */ #crm__widgets .dse-ex--course :is(button, input, select, a, [tabindex]):focus { outline: none; } #crm__widgets .dse-ex--course :is(button, input, select, a, [tabindex]):focus-visible { outline: 2px solid var(--kc-acc); outline-offset: 2px; box-shadow: none; } #crm__widgets .dse-ex--course .dse-ex__search input:focus-visible { border-color: var(--kc-line); background: #fff; } #crm__widgets .dse-ex--course .dse-ex__opt input:focus-visible { border-radius: 4px; } /* nothing in the column is cut: room for the rows' hover ground and the rings at both sides of the scrolling column, and room above and below the month strip (it scrolls sideways) */ @media (min-width: 1024px) { #crm__widgets .dse-ex--course.dse-ex--open > .dse-ex__side { margin-left: -8px; padding-left: 8px; padding-right: 8px; } } #crm__widgets .dse-ex--course .dse-ex__strip { margin: -4px -4px; padding: 4px 4px; } #crm__widgets .dse-ex--course .dse-ex__sb { padding-inline: 20px; } /* motion (course.js): the copies of what has just left sit over the list in hosts with the same classes */ #crm__widgets .dse-ex--course { position: relative; } #crm__widgets .dse-ex--course > .dse-ex__res.dkm-wrap { position: absolute; z-index: 2; height: 0; margin: 0; padding: 0; pointer-events: none; } #crm__widgets .dse-ex--course .dkm-host { position: absolute; inset: 0; display: block; margin: 0; padding: 0; } #crm__widgets .dse-ex--course .dkm-ghost { transition: none; } /* first load: the cards of the first screen rise in once (CSS, before any script; course.js marks the finder done) */ @media (prefers-reduced-motion: no-preference) { @keyframes dkm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } #crm__widgets .dse-ex--course:not(.dkm-done) [data-dse-res] .dse-ex__grp:first-child .dse-cards > .dse-kc:nth-child(-n+6) { animation: dkm-rise 260ms cubic-bezier(.16, 1, .3, 1) both; } #crm__widgets .dse-ex--course:not(.dkm-done) [data-dse-res] .dse-ex__grp:first-child .dse-cards > .dse-kc:nth-child(2) { animation-delay: 30ms; } #crm__widgets .dse-ex--course:not(.dkm-done) [data-dse-res] .dse-ex__grp:first-child .dse-cards > .dse-kc:nth-child(3) { animation-delay: 60ms; } #crm__widgets .dse-ex--course:not(.dkm-done) [data-dse-res] .dse-ex__grp:first-child .dse-cards > .dse-kc:nth-child(4) { animation-delay: 90ms; } #crm__widgets .dse-ex--course:not(.dkm-done) [data-dse-res] .dse-ex__grp:first-child .dse-cards > .dse-kc:nth-child(5) { animation-delay: 120ms; } #crm__widgets .dse-ex--course:not(.dkm-done) [data-dse-res] .dse-ex__grp:first-child .dse-cards > .dse-kc:nth-child(6) { animation-delay: 150ms; } } /* the filter sheet: slides up and fades in and out over 220 ms */ #crm__widgets .dse-ex--course .dse-ex__sheet { transition: transform 220ms cubic-bezier(.16, 1, .3, 1), opacity 220ms ease-out, overlay 220ms allow-discrete, display 220ms allow-discrete; transform: translateY(24px); opacity: 0; } #crm__widgets .dse-ex--course .dse-ex__sheet[open] { animation: none; transform: none; opacity: 1; } @starting-style { #crm__widgets .dse-ex--course .dse-ex__sheet[open] { transform: translateY(24px); opacity: 0; } } #crm__widgets .dse-ex--course .dse-ex__sheet::backdrop { transition: background-color 220ms ease-out, overlay 220ms allow-discrete, display 220ms allow-discrete; } @media (prefers-reduced-motion: reduce) { #crm__widgets .dse-ex--course :is(.dkf__b, .dse-ex__sheet) { transition: none; } } /* director, 2026-11-14. The owner: "in the course browser, the image should also be linked, not just the texts". The card's link is the stretched link of the title (.dse-stretch::after, inset 0). The text block was positioned, so the link's layer ended at the text block and the picture was dead. The block is no longer the layer's containing box: the card itself is (position relative), so the layer covers picture and text. Portraits keep z-index 2 for tooltips. */ #crm__widgets .dse-ex--course .dse-cards > .dse-kc > .dse-kc__body { position: static; } #crm__widgets .dse-ex--course .dse-cards > .dse-kc > .dse-kc__pic { cursor: pointer; }