/* ========================================================================== DEKA Dental Academy — events catalog (accordion), single course, registration. Loads after pages.css. Uses the global --deka-* tokens. ========================================================================== */ /* ---------- Overview: "Why the Academy" intro ---------- Was the sticky left column of a two-column grid with the course accordion on the right. The courses now live in their own sections below (.acad-courses + .acad-elite-courses), so this runs full width and no longer sticks. .academy-overview__grid is kept for any page still authored the old way. */ .academy-overview { padding: clamp(64px, 8vh, 110px) 0 clamp(56px, 7vh, 90px); background: var(--deka-ivory); } .academy-overview__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 5vw, 88px); align-items: start; } @media (max-width: 960px) { .academy-overview__grid { grid-template-columns: 1fr; gap: 48px; } } .academy-overview__intro { max-width: 78ch; } .academy-overview__grid .academy-overview__intro { max-width: none; } .academy-overview__intro .kicker { font-family: var(--deka-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--deka-sapphire); font-weight: 500; } .academy-intro__title { font-family: var(--deka-serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.02em; color: var(--deka-ink); margin-top: 14px; text-wrap: balance; } .academy-intro__title em { font-family: var(--deka-serif); font-style: italic; font-weight: 400; color: var(--deka-sapphire); } .academy-intro__body { margin-top: 28px; } .academy-intro__body p { font-size: 16px; line-height: 1.7; color: var(--hm-muted, rgba(4,5,65,0.72)); margin-bottom: 18px; } .academy-intro__body p:last-child { margin-bottom: 0; } .academy-intro__body em { font-style: italic; color: var(--deka-ink); } /* ---------- Catalog / accordion (right column) ---------- */ .academy-overview__courses-head { margin-bottom: 8px; } .academy-overview__courses-head .kicker { font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--deka-sapphire); font-weight: 500; } .academy-overview__courses-title { font-family: var(--deka-serif); font-weight: 500; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.01em; color: var(--deka-ink); margin: 10px 0 20px; } /* Group = full-width, transparent container. Padding now lives on each card. */ .academy-group { background: transparent; border: 0; border-radius: 0; padding: 0; margin-bottom: clamp(28px, 4vh, 48px); } .academy-group:last-child { margin-bottom: 0; } .academy-group__title { font-family: var(--deka-serif); font-weight: 500; font-size: clamp(22px, 2.5vw, 30px); letter-spacing: -0.01em; color: #fff; background: var(--deka-ink); border-radius: 14px; padding: 16px 24px; margin: 0 0 18px; } /* Each course is its own white card. */ .academy-accordion { display: flex; flex-direction: column; gap: 16px; } .academy-item { background: #fff; border: 1px solid var(--deka-rule); border-radius: 16px; padding: clamp(18px, 2.2vw, 26px); transition: border-color .25s ease, box-shadow .25s ease; } .academy-item:hover { border-color: rgba(4,5,65,0.28); box-shadow: 0 18px 42px -30px rgba(4,5,65,0.4); } .academy-item__head { width: 100%; min-width: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(14px, 1.8vw, 22px); padding: 0; text-align: left; cursor: pointer; background: none; border: 0; color: var(--deka-ink); } .academy-item__title { font-family: var(--deka-serif); font-weight: 400; font-size: clamp(18px, 2vw, 24px); line-height: 1.25; letter-spacing: -0.01em; min-width: 0; } .academy-item__icon { color: var(--deka-ink); transition: transform .35s ease; font-size: 13px; } .academy-item__head[aria-expanded="true"] .academy-item__icon { transform: rotate(180deg); } /* Sold-out badge next to the title */ .academy-item__soldout { display: inline-block; vertical-align: middle; margin-left: 10px; font-family: var(--deka-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hm-muted, rgba(4,5,65,0.55)); background: rgba(4,5,65,0.06); border-radius: 999px; padding: 4px 9px; } /* Calendar-style date card */ .cal-card { display: flex; flex-direction: column; text-align: center; width: 66px; flex-shrink: 0; overflow: hidden; line-height: 1; border: 1px solid var(--deka-rule); border-radius: 11px; background: #fff; } .cal-card__month { background: var(--deka-sapphire-soft); color: var(--deka-ink); font-family: var(--deka-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 0 4px; } .cal-card__day { font-family: var(--deka-serif); font-weight: 500; font-size: 30px; color: var(--deka-ink); padding: 7px 0 0; } .cal-card__year { font-family: var(--deka-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--hm-muted-2, rgba(4,5,65,0.45)); padding: 3px 0 8px; } .cal-card--soon .cal-card__day { font-size: 22px; padding-top: 10px; color: var(--deka-sapphire-soft); } /* expanding panel */ .academy-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2,.7,.2,1); } .academy-item__panel.is-open { grid-template-rows: 1fr; } .academy-item__panel-inner { overflow: hidden; min-height: 0; } /* Top separator + spacing lives on an always-present inner wrapper so it is clipped by the height animation (no instant jump when collapsing). */ .academy-item__panel-body { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--deka-rule); } .academy-item.is-closed .academy-item__title { color: var(--hm-muted, rgba(4,5,65,0.55)); } /* instructor + CE tags row (CE moved out of the header into the card content) */ .academy-item__tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; } .academy-item__instructor { font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deka-ink); margin: 0; } .academy-item__ce { font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--deka-ink); background: var(--deka-sapphire-soft); border-radius: 999px; padding: 5px 12px; white-space: nowrap; } .academy-item__excerpt { font-size: 15px; line-height: 1.65; color: var(--hm-muted, rgba(4,5,65,0.7)); max-width: 70ch; margin: 0 0 18px; } .academy-item__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .academy-item__foot-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .academy-item__date-full { font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deka-ink); } .academy-item__loc { font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hm-muted-2, rgba(4,5,65,0.42)); } .academy-item__link { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; border-radius: 999px; background: var(--deka-ink); color: #fff; font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; transition: background .25s ease, box-shadow .25s ease; } .academy-item__link:hover { background: var(--deka-ink-2, #0a0b4e); box-shadow: 0 12px 26px -12px rgba(4,5,65,0.6); } .academy-item__link svg { transition: transform .3s ease; } .academy-item__link:hover svg { transform: translateX(4px); } /* ========================================================================== WHY THE ACADEMY — the three-card block from the laser pages. Replaces the old prose intro. The design is .laser-page .lp-practice .lp-card (gradient face, hairline border, inset highlight, brass glyph on an ink tile, soft lift on hover) — reproduced here rather than reused, because laser.css is scoped to .laser-page AND is only enqueued on the laser page IDs, so none of it reaches this page. Every rule below is scoped to .acad-why. academy.css loads site-wide, so an unscoped .lp-card here would reach into the laser pages and the home-alt "Beyond" block, which share those class names. ========================================================================== */ .acad-why { padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 7vh, 90px); background: var(--deka-ivory); } .acad-why .lp-practice-head { max-width: 62ch; margin: 0 auto; text-align: center; } .acad-why .lp-eyebrow { font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--deka-sapphire); font-weight: 500; display: inline-flex; align-items: center; gap: 10px; } .acad-why .lp-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--deka-sapphire); } .acad-why .lp-h2 { font-family: var(--deka-serif); font-weight: 300; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; color: var(--deka-ink); margin-top: 16px; text-wrap: balance; } .acad-why .lp-h2 em { font-style: italic; } @media (min-width: 1000px) { .acad-why .lp-h2 { font-size: var(--deka-h2); } } .acad-why .lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(40px, 5vw, 60px); } .acad-why .lp-card { padding: 30px 26px; background: linear-gradient(180deg, #ffffff 0%, #faf9f5 100%); border: 1px solid rgba(4, 5, 65, 0.10); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 26px -20px rgba(4, 5, 65, 0.30); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .acad-why .lp-card:hover { transform: translateY(-3px); border-color: rgba(4, 5, 65, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 26px 50px -30px rgba(4, 5, 65, 0.40); } /* The ink tile is the dark surface that licenses the brass glyph — brass is the one warm accent and never appears directly on ivory. */ .acad-why .lp-card__icon { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--deka-ink); color: var(--deka-brass); font-size: 18px; line-height: 1; margin-bottom: 20px; transition: transform .25s ease; } .acad-why .lp-card:hover .lp-card__icon { transform: scale(1.06); } .acad-why .lp-card-tag { font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deka-sapphire); margin-bottom: 10px; } .acad-why .lp-card h3 { font-family: var(--deka-serif); font-weight: 400; font-size: 20px; line-height: 1.28; color: var(--deka-ink); margin-bottom: 10px; letter-spacing: -0.01em; } .acad-why .lp-card p { font-size: 14px; line-height: 1.6; color: var(--hm-muted, rgba(4,5,65,0.7)); } @media (max-width: 860px) { .acad-why .lp-cards { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .acad-why .lp-card, .acad-why .lp-card__icon { transition: none; } .acad-why .lp-card:hover { transform: none; } .acad-why .lp-card:hover .lp-card__icon { transform: none; } } /* ========================================================================== COURSE CARDS — both catalogs are sliders (Courses, then ELITE). One card design (.acad-card) in one track design (.acad-el-*), lifted from the home-alt "Beyond Traditional Dentistry" block: head + prompt + arrows, a clipped viewport, drag / trackpad / arrow paging (academy.js). The card is image + date + title only; everything else lives on the event page, which is what the card links to. ========================================================================== */ /* ---------- Section shells + heads ---------- */ /* Leads the page directly off the hero now (the "Why" block moved below the catalogs), so it needs the deeper top breathing room the intro used to give. */ .acad-courses { background: var(--deka-ivory); padding: clamp(72px, 9vh, 120px) 0 clamp(64px, 8vh, 110px); } .acad-elite-courses { background: var(--deka-bone); padding: clamp(64px, 8vh, 110px) 0; } /* The kicker owns row 1 alone, so the nav column starts in ROW 2 and its top edge is the h2's top edge exactly — no magic padding to guess at. */ .acad-el-head { display: grid; grid-template-columns: 1fr auto; column-gap: 48px; row-gap: 14px; align-items: start; margin-bottom: clamp(28px, 4vw, 44px); } .acad-el-head > .kicker { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; gap: 10px; font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deka-ink); font-weight: 500; } .acad-el-head > .kicker::after { content: ''; width: 24px; height: 1px; background: var(--deka-ink); } .acad-el-head-copy { grid-column: 1; grid-row: 2; max-width: 62ch; } .acad-el-head-copy h2 { margin-top: 0; font-family: var(--deka-serif); font-weight: 300; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; color: var(--deka-ink); } .acad-el-head-copy h2 em { font-style: italic; } .acad-el-head-copy > p { margin-top: 16px; font-size: 15.5px; line-height: 1.7; color: var(--hm-muted, rgba(4,5,65,0.72)); } /* right column: the prompt sits level with the h2, arrows beneath it */ .acad-el-nav { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 22px; text-align: right; } .acad-el-prompt { margin: 0; max-width: 30ch; font-family: var(--deka-serif); font-weight: 300; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; color: var(--deka-ink); } .acad-el-prompt em { font-style: italic; } .acad-el-arrows { display: flex; gap: 10px; } .acad-el-arrow { width: 46px; height: 46px; border-radius: 999px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--deka-ink); border: 1px solid var(--deka-rule); cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; } .acad-el-arrow:hover:not(:disabled) { background: var(--deka-ink); color: var(--deka-ivory); border-color: var(--deka-ink); } .acad-el-arrow:disabled { opacity: .3; cursor: default; } .acad-el-arrow:focus-visible { outline: 2px solid var(--deka-ink); outline-offset: 3px; } /* ---------- Track ---------- */ /* The clip is load-bearing — it makes the cards peek past the edge — so overflow:visible is not an option. The bottom padding is sized to hold the hover Register button (which hangs BELOW the card) plus the card shadow; the equal negative margin pulls the box back so the layout below is unchanged. */ .acad-el-viewport { overflow: hidden; padding: 8px 0 84px; margin: -8px 0 -84px; } .acad-el-track { --acad-gap: 24px; display: flex; gap: var(--acad-gap); align-items: stretch; transition: transform .5s cubic-bezier(.22, .61, .36, 1); will-change: transform; /* pan-y: horizontal gestures belong to the slider, vertical ones still scroll the page. Without this, touch devices never deliver the swipe. */ touch-action: pan-y; } .acad-el-track .acad-card { --acad-per: 4; flex: 0 0 calc((100% - (var(--acad-gap) * (var(--acad-per) - 1))) / var(--acad-per)); } /* a drag must not select text or ghost-drag the photos */ .acad-el-track.is-dragging .acad-card { user-select: none; } @media (max-width: 1100px) { .acad-el-track .acad-card { --acad-per: 2.2; } } @media (max-width: 760px) { /* single column: kicker, copy, then the prompt + arrows stacked beneath */ .acad-el-head { grid-template-columns: 1fr; row-gap: 18px; } .acad-el-nav { grid-column: 1; grid-row: 3; align-items: flex-start; text-align: left; } .acad-el-prompt { max-width: none; } .acad-el-track .acad-card { --acad-per: 1.1; } } /* ---------- The card ---------- */ /* overflow MUST stay visible — the Register button hangs below the card. The rounding/clipping lives on .acad-card__media instead. */ .acad-card { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, #ffffff 0%, #faf9f5 100%); border: 1px solid rgba(4, 5, 65, 0.10); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 26px -20px rgba(4, 5, 65, 0.30); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .acad-card:hover { z-index: 2; /* lift above the neighbouring cards so the button isn't clipped by them */ transform: translateY(-3px); border-color: rgba(4, 5, 65, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 26px 50px -30px rgba(4, 5, 65, 0.40); } .acad-card__open { display: flex; flex-direction: column; flex: 1 1 auto; color: inherit; } /* Media: a cover-cropped photograph. Every source is a real photo — no transparent cutouts, no pattern behind. */ .acad-card__media { position: relative; display: block; overflow: hidden; /* Square. The sources are portrait headshots (400x528, 214x300, 288x432 …), so cover trims their top and bottom — fine, and far better than the 4:3 landscape crop that decapitated people. The two in-office trainings have no instructor and fall back to a landscape course photo; cover crops its sides, which is harmless. */ aspect-ratio: 1 / 1; border-radius: 13px 13px 0 0; background: var(--deka-bone, #f5f4ef); } .acad-card__img { display: block; width: 100%; height: 100%; /* 22% from the top keeps the face in frame on every headshot; dead-centre crops foreheads on the tighter ones. */ object-fit: cover; object-position: 50% 22%; -webkit-user-drag: none; user-drag: none; transition: transform .55s cubic-bezier(.2, .7, .2, 1); } .acad-card:hover .acad-card__img { transform: scale(1.05); } /* a soft floor so the date chip and any light photo still separate */ .acad-card__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4,5,65,0.20) 0%, rgba(4,5,65,0) 42%); } /* Date chip — the card leads with it. */ .acad-card__date { position: absolute; z-index: 2; top: 14px; left: 14px; display: flex; flex-direction: column; align-items: center; text-align: center; width: 62px; line-height: 1; overflow: hidden; background: rgba(255, 255, 255, 0.95); border-radius: 10px; box-shadow: 0 10px 22px -12px rgba(4, 5, 65, 0.55); } .acad-card__date-m { width: 100%; padding: 5px 0 4px; background: rgba(4, 5, 65, 0.07); font-family: var(--deka-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deka-ink); } .acad-card__date-d { padding: 6px 0 0; font-family: var(--deka-serif); font-weight: 500; font-size: 26px; color: var(--deka-ink); } .acad-card__date-y { padding: 3px 0 7px; font-family: var(--deka-mono); font-size: 9px; letter-spacing: 0.1em; color: rgba(4, 5, 65, 0.45); } .acad-card__date--soon .acad-card__date-d { font-family: var(--deka-mono); font-size: 12px; letter-spacing: 0.1em; padding: 8px 0 9px; color: rgba(4, 5, 65, 0.55); } .acad-card__soldout { position: absolute; z-index: 2; top: 16px; right: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(4, 5, 65, 0.85); color: var(--deka-ivory); font-family: var(--deka-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } /* Course-length badge ("2 Day Course") — the Anchor Events duration label. Bottom-left of the media, so it clears the date chip (top-left, 62px) and the Sold out pill (top-right) even when a card carries all three. Same ink pill as Sold out so the two read as one badge family. It carries its own opaque ground on purpose: .acad-card__media::after only darkens the TOP 42% of the photo, so a chip down here sits on raw image. Scoped under .acad-card — .anchor-event-label is a plugin-side class that also renders on the single-event page, which styles it separately. */ .acad-card .anchor-event-label-duration { position: absolute; z-index: 2; bottom: 14px; left: 14px; max-width: calc(100% - 28px); padding: 6px 11px; border-radius: 999px; background: rgba(4, 5, 65, 0.85); color: var(--deka-ivory); font-family: var(--deka-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acad-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 22px 22px; } .acad-card__title { margin: 0; font-family: var(--deka-serif); font-weight: 400; font-size: 20px; line-height: 1.28; letter-spacing: -0.01em; color: var(--deka-ink); text-wrap: balance; } .acad-card__open:hover .acad-card__title { text-decoration: underline; text-underline-offset: 3px; } .acad-card.is-closed .acad-card__title { color: rgba(4, 5, 65, 0.55); } /* The photo is a person — name them, or the card is a stranger's face. margin-top:auto pins the name to the bottom of the body, so it sits on the same baseline across every card regardless of whether the title above it runs to one line or three. */ .acad-card__instr { display: block; margin-top: auto; padding-top: 12px; font-family: var(--deka-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(4, 5, 65, 0.5); } /* ---------- Hover: Register Now, below the card ---------- Two things keep this from collapsing the instant the pointer heads for it: 1. It is a DESCENDANT of .acad-card, so hovering it still satisfies `.acad-card:hover` — an absolutely-positioned child outside the parent's box still counts. 2. It is anchored at `top: 100%` with a TRANSPARENT padding-top. That padding is the bridge: the button's hit area starts exactly at the card's bottom edge, so the pointer never crosses a dead gap on the way down. Set a margin or a `translateY` offset instead and you reintroduce the gap — the button disappears before it can be clicked. ------------------------------------------------------------------------- */ .acad-card__register { position: absolute; z-index: 3; top: 100%; left: 0; right: 0; display: flex; justify-content: center; padding-top: 12px; /* the bridge — MUST be padding, not margin */ opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease; } .acad-card__register > span { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 999px; background: var(--deka-ink); color: var(--deka-ivory); font-family: var(--deka-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 14px 30px -14px rgba(4, 5, 65, 0.6); transition: gap .25s ease; } .acad-card__register:hover > span { gap: 13px; } .acad-card__register svg { flex: none; } .acad-card:hover .acad-card__register, .acad-card:focus-within .acad-card__register { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Touch devices have no hover — show it always rather than never. */ @media (hover: none) { .acad-card__register { position: static; opacity: 1; pointer-events: auto; transform: none; padding: 0 22px 22px; justify-content: flex-start; } .acad-el-viewport { padding-bottom: 30px; margin-bottom: -30px; } } @media (prefers-reduced-motion: reduce) { .acad-card, .acad-card__img, .acad-el-track, .acad-card__register { transition: none; } .acad-card:hover { transform: none; } .acad-card:hover .acad-card__img { transform: none; } } /* ---------- Single course ---------- */ /* Chips are still used on the single-course hero (the catalog list no longer uses them). */ .academy-chip { font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deka-ink); background: var(--hm-sky, #e8eefb); border-radius: 999px; padding: 6px 12px; white-space: nowrap; } .academy-chip--closed { background: rgba(4,5,65,0.06); color: var(--hm-muted, rgba(4,5,65,0.58)); } .event-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; } .event-hero__chips .academy-chip { background: rgba(255,255,255,0.1); color: var(--deka-ivory); } /* Blue retired to dark purple; on the dark hero, keep the date chip legible with brand lavender. */ .event-hero__chips .academy-chip--date { background: var(--deka-sapphire-soft); border-color: var(--deka-sapphire-soft); color: var(--deka-ink); } .event-hero__chips .academy-chip--closed { background: rgba(255,255,255,0.08); color: rgba(245,244,239,0.7); } .event-body { padding: clamp(56px, 7vh, 96px) 0; background: var(--deka-ivory); } .event-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; } @media (max-width: 900px) { .event-grid { grid-template-columns: 1fr; gap: 36px; } } .event-content { font-size: 16.5px; line-height: 1.75; color: rgba(4,5,65,0.86); } /* Lead paragraph — the course overview opens larger + darker. */ .event-content > p:first-child { font-size: 20px; line-height: 1.55; color: var(--deka-ink); font-family: var(--deka-serif); font-weight: 400; } /* Section headings (serif) with a hairline divider so blocks read as sections. */ .event-content h2, .event-content h3 { font-family: var(--deka-serif); font-weight: 500; letter-spacing: -0.01em; color: var(--deka-ink); margin: 44px 0 14px; padding-top: 30px; border-top: 1px solid var(--deka-rule); } .event-content h2 { font-size: clamp(26px, 3vw, 34px); } .event-content h3 { font-size: clamp(22px, 2.4vw, 28px); } /* Sub-labels (mono, brand color) — "OFFICE LOCATION", "RECOMMENDED HOTEL", etc. */ .event-content h4 { font-family: var(--deka-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deka-sapphire); margin: 30px 0 8px; } .event-content p { margin-bottom: 17px; } .event-content strong { font-weight: 600; color: var(--deka-ink); } .event-content em { font-style: italic; } .event-content a { color: var(--deka-sapphire); border-bottom: 1px solid rgba(43,82,159,0.3); } .event-content a:hover { border-bottom-color: currentColor; } .event-content ul, .event-content ol { margin: 0 0 20px 1.1em; } .event-content li { margin-bottom: 8px; padding-left: 4px; } .event-content li::marker { color: var(--deka-sapphire); } /* Instructor headshot — floats right beside the "About the Instructor" section. */ .event-content .event-instructor__photo { float: right; width: 250px; max-width: 40%; margin: 4px 0 22px 32px; border-radius: 14px; box-shadow: 0 26px 54px -28px rgba(4,5,65,0.55); } @media (max-width: 600px) { /* Un-floated on mobile — add generous top space so it clearly starts the "About the Instructor" section (separates it from the register-below text). */ .event-content .event-instructor__photo { float: none; display: block; width: 62%; min-width: 180px; margin: 44px 0 20px; } } /* Contain the float so it can't bleed past the content column. */ .event-content::after { content: ''; display: block; clear: both; } .event-aside { position: sticky; top: 110px; } @media (max-width: 900px) { .event-aside { position: static; } } .event-card { background: #fff; border: 1px solid var(--deka-rule); border-radius: 20px; padding: 28px; box-shadow: 0 30px 70px -45px rgba(4,5,65,0.3); } .event-card__title { font-family: var(--deka-serif); font-weight: 400; font-size: 22px; color: var(--deka-ink); margin-bottom: 18px; } /* NOTE: base.css resets `ul,ol { margin:0 !important; padding:0 !important }`, so spacing on this