/* ANANFX Academy — Courses Page-Scoped Dark Premium Color System V114 * Scope: body[data-page-key="courses"] only. Layout, content and behavior remain unchanged. */ body[data-page-key="courses"] { --ananfx-page-bg-primary: #0B0B0C; --ananfx-page-bg-secondary: #101011; --ananfx-page-bg-tertiary: #141415; --ananfx-page-surface-primary: #1C1C1E; --ananfx-page-surface-secondary: #222224; --ananfx-page-surface-elevated: #28282B; --ananfx-page-surface-hover: #2D2D30; --ananfx-page-border-primary: #38383C; --ananfx-page-border-secondary: #303034; --ananfx-page-divider: #28282B; --ananfx-page-gold-primary: #FFD000; --ananfx-page-gold-bright: #FFE066; --ananfx-page-gold-soft: #FFD000; --ananfx-page-gold-dark: #D9A800; --ananfx-page-text-primary: #F5F5F7; --ananfx-page-text-secondary: #B8B8BD; --ananfx-page-text-muted: #8E8E93; --ananfx-page-text-disabled: #636366; --ananfx-page-success: #42d392; --ananfx-page-danger: #ef5a4c; --ananfx-page-warning: #FFD000; --ananfx-page-info: #4ea1ff; --ananfx-page-overlay: rgba(0, 0, 0, .72); --ananfx-page-shadow: rgba(0, 0, 0, .32); --ananfx-page-focus-ring: rgba(255, 208, 0, .32); /* Existing page aliases retained so no structural or script-facing changes are required. */ --courses-gold: var(--ananfx-page-gold-primary); --courses-border: var(--ananfx-page-border-primary); --courses-muted: var(--ananfx-page-text-muted); background-color: var(--ananfx-page-bg-primary); color: var(--ananfx-page-text-primary); color-scheme: dark; } /* All-breakpoint page paint layer. It does not alter geometry, typography or visibility. */ body[data-page-key="courses"] .courses-mobile, body[data-page-key="courses"] .courses-main { background-color: var(--ananfx-page-bg-primary); color: var(--ananfx-page-text-primary); } body[data-page-key="courses"] .site-header { background-color: var(--ananfx-page-bg-primary); border-color: var(--ananfx-page-divider); color: var(--ananfx-page-text-primary); box-shadow: inset 0 -1px 0 var(--ananfx-page-divider); } body[data-page-key="courses"] :is(.header-menu, .icon-button, .notification-button, .text-close) { color: var(--ananfx-page-text-primary); } /* Existing navigation PNGs are monochrome dark assets; recolor only their rendered pixels for contrast. */ body[data-page-key="courses"] :is( .site-header .header-menu img, .site-header .icon-button img, .search-field img ) { filter: brightness(0) invert(1); opacity: .92; } body[data-page-key="courses"] :is(.notification-dot, .notification-card-dot) { background-color: var(--ananfx-page-gold-bright); } body[data-page-key="courses"] :is(.bottom-panel, .search-panel, .notification-panel) { background-color: var(--ananfx-page-surface-elevated); border-color: var(--ananfx-page-border-primary); color: var(--ananfx-page-text-primary); } body[data-page-key="courses"] :is(.panel-backdrop, .ananfx-mobile-drawer-overlay) { background-color: var(--ananfx-page-overlay); } body[data-page-key="courses"] :is(.panel-kicker, .site-footer-link:hover, .site-footer-social:hover, .site-footer-contact:hover) { color: var(--ananfx-page-gold-primary); } body[data-page-key="courses"] :is(.search-empty, .notification-card p) { color: var(--ananfx-page-text-muted); } body[data-page-key="courses"] .panel-data-note { color: var(--ananfx-page-text-secondary); } body[data-page-key="courses"] :is(.search-field, .search-suggestions button, .notification-card) { background-color: var(--ananfx-page-surface-primary); border-color: var(--ananfx-page-border-primary); color: var(--ananfx-page-text-primary); } body[data-page-key="courses"] :is(.search-field input, .course-search input) { color: var(--ananfx-page-text-primary); caret-color: var(--ananfx-page-gold-primary); } body[data-page-key="courses"] :is(.search-field input, .course-search input)::placeholder { color: var(--ananfx-page-text-muted); opacity: 1; } body[data-page-key="courses"] .site-footer-scene { background-color: var(--ananfx-page-bg-primary); border-color: var(--ananfx-page-divider); color: var(--ananfx-page-text-primary); box-shadow: inset 0 1px 0 var(--ananfx-page-divider); } body[data-page-key="courses"] :is(.site-footer-scene__divider, .site-footer-scene__legal-divider, .ananfx-mobile-drawer__divider) { background-color: var(--ananfx-page-divider); } body[data-page-key="courses"] :is(.site-footer-accordion, .ananfx-mobile-drawer__header, .ananfx-mobile-drawer__group) { border-color: var(--ananfx-page-divider); } body[data-page-key="courses"] :is( .site-footer-accordion__toggle, .site-footer-contact, .site-footer-social, .ananfx-mobile-drawer__direct, .ananfx-mobile-drawer__group-toggle, .ananfx-mobile-drawer__sub-link ) { color: var(--ananfx-page-text-primary); } body[data-page-key="courses"] :is( .site-footer-link, .site-footer-scene__description, .site-footer-contact__copy > span, .site-footer-scene__copyright, .ananfx-mobile-drawer__profile-copy span ) { color: var(--ananfx-page-text-muted); } body[data-page-key="courses"] :is( .site-footer-contact__icon, .site-footer-social, .ananfx-mobile-drawer__close, .ananfx-mobile-drawer__profile, .ananfx-mobile-drawer__account-button--outline ) { border-color: var(--ananfx-page-border-primary); } body[data-page-key="courses"] :is( .ananfx-mobile-drawer, .ananfx-mobile-drawer__header ) { background-color: var(--ananfx-page-bg-primary); color: var(--ananfx-page-text-primary); } body[data-page-key="courses"] :is( .ananfx-mobile-drawer__close, .ananfx-mobile-drawer__profile, .ananfx-mobile-drawer__account-button--outline ) { background-color: var(--ananfx-page-surface-primary); color: var(--ananfx-page-text-primary); } body[data-page-key="courses"] :is( .ananfx-mobile-drawer__direct[aria-current="page"], .ananfx-mobile-drawer__sub-link[aria-current="page"] ) { color: var(--ananfx-page-gold-primary); } body[data-page-key="courses"] ::selection { background-color: var(--ananfx-page-gold-primary); color: var(--ananfx-page-bg-primary); } @media (max-width: 767px) { body[data-page-key="courses"] { --courses-gold:var(--ananfx-page-gold-primary); --courses-border:var(--ananfx-page-border-primary); --courses-muted:var(--ananfx-page-text-muted); background:var(--ananfx-page-bg-primary); color:var(--ananfx-page-text-primary); } body[data-page-key="courses"] .courses-mobile { min-height:100vh; overflow-x:clip; background:var(--ananfx-page-bg-primary); } body[data-page-key="courses"] .courses-main { display:block; } body[data-page-key="courses"] .courses-container { width:min(100% - 32px, 720px); margin-inline:auto; } body[data-page-key="courses"] .courses-section { padding:52px 0; scroll-margin-top:76px; background:var(--ananfx-page-bg-primary); } body[data-page-key="courses"] .eyebrow { margin:0 0 8px; color:var(--ananfx-page-gold-primary); font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } body[data-page-key="courses"] .section-heading { margin-bottom:22px; text-align:center; } body[data-page-key="courses"] .section-heading h2 { margin:0; font-size:28px; line-height:1.22; } body[data-page-key="courses"] .section-heading p:not(.eyebrow) { margin:8px auto 0; color:var(--courses-muted); line-height:1.75; max-width:560px; } body[data-page-key="courses"] .section-heading--row { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; text-align:left; } body[data-page-key="courses"] .section-heading--row a { color:var(--ananfx-page-gold-primary); font-weight:750; min-height:44px; display:inline-flex; align-items:center; } body[data-page-key="courses"] .anchor-alias { display:block; position:relative; top:-76px; visibility:hidden; } body[data-page-key="courses"] .courses-hero { padding:28px 0 48px; background:var(--ananfx-page-bg-primary); } body[data-page-key="courses"] .courses-hero__grid { display:grid; gap:24px; } body[data-page-key="courses"] .courses-hero__copy h1 { margin:0; font-size:34px; line-height:1.12; } body[data-page-key="courses"] .courses-hero__lead { margin:16px 0 10px; font-size:17px; line-height:1.55; font-weight:750; } body[data-page-key="courses"] .courses-hero__copy > p:last-of-type { color:var(--courses-muted); line-height:1.8; } body[data-page-key="courses"] .courses-hero__visual { margin:0; display:grid; place-items:center; min-height:250px; } body[data-page-key="courses"] .courses-hero__visual img { width:100%; max-width:520px; height:auto; object-fit:contain; } body[data-page-key="courses"] .courses-actions { display:grid; grid-template-columns:minmax(0,1fr); width:100%; gap:10px; margin-top:22px; } body[data-page-key="courses"] .btn, body[data-page-key="courses"] .course-card__actions button, body[data-page-key="courses"] .empty-state button { width:100%; min-width:0; min-height:50px; border-radius:10px; border:1px solid var(--courses-border); padding:10px 14px; font:inherit; font-weight:700; line-height:1.25; display:inline-flex; align-items:center; justify-content:center; gap:12px; text-align:center; white-space:normal; overflow-wrap:break-word; word-break:normal; cursor:pointer; text-decoration:none; } body[data-page-key="courses"] .btn--primary { background:var(--courses-gold); color:var(--ananfx-page-bg-primary); border-color:var(--courses-gold); } body[data-page-key="courses"] .btn--secondary { background:var(--ananfx-page-surface-primary); color:var(--ananfx-page-text-primary); border-color:var(--ananfx-page-gold-primary); } body[data-page-key="courses"] .btn--ghost { background:transparent; color:var(--ananfx-page-text-primary); } body[data-page-key="courses"] .btn--dark { color:var(--ananfx-page-text-primary); background:transparent; border-color:var(--ananfx-page-border-primary); } body[data-page-key="courses"] :where(a,button,input,select):focus-visible { outline:3px solid var(--ananfx-page-focus-ring); outline-offset:3px; } body[data-page-key="courses"] .featured-card { background:var(--ananfx-page-surface-primary); color:var(--ananfx-page-text-primary); border-radius:22px; padding:18px; display:grid; gap:18px; box-shadow:0 18px 45px var(--ananfx-page-shadow); } body[data-page-key="courses"] .featured-card img { width:100%; height:auto; border-radius:16px; background:var(--ananfx-page-surface-secondary); } body[data-page-key="courses"] .featured-card h3 { margin:12px 0 8px; font-size:17px; line-height:1.35; } body[data-page-key="courses"] .featured-card p { margin:0; color:var(--ananfx-page-text-secondary); line-height:1.7; } body[data-page-key="courses"] .featured-card__meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } body[data-page-key="courses"] .featured-card__meta span { border:1px solid var(--ananfx-page-border-secondary); border-radius:999px; padding:6px 10px; font-size:12px; } body[data-page-key="courses"] .featured-card .btn--ghost { color:var(--ananfx-page-text-primary); border-color:var(--ananfx-page-border-primary); } body[data-page-key="courses"] .course-search { background:var(--ananfx-page-surface-primary); border:1px solid var(--courses-border); } body[data-page-key="courses"] .course-search label { font-weight:800; } body[data-page-key="courses"] fieldset legend { font-weight:800; margin-bottom:8px; } body[data-page-key="courses"] .course-search input { border:1px solid var(--ananfx-page-border-primary); font:inherit; background:var(--ananfx-page-surface-secondary); color:var(--ananfx-page-text-primary); caret-color:var(--ananfx-page-gold-primary); } body[data-page-key="courses"] .course-search input::placeholder { color:var(--ananfx-page-text-muted); opacity:1; } body[data-page-key="courses"] .course-search button { border:0; background:var(--ananfx-page-gold-primary); color:var(--ananfx-page-bg-primary); font:inherit; font-weight:700; line-height:1.3; text-align:center; } body[data-page-key="courses"] .filter-stack { display:grid; gap:14px; margin-top:16px; } body[data-page-key="courses"] fieldset { border:0; padding:0; margin:0; } body[data-page-key="courses"] .filter-row { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 2px 8px; scrollbar-width:thin; } body[data-page-key="courses"] .filter-row button { flex:0 0 auto; min-height:44px; padding:9px 14px; border-radius:999px; border:1px solid var(--ananfx-page-border-primary); background:var(--ananfx-page-surface-primary); color:var(--ananfx-page-text-primary); font:inherit; scroll-snap-align:start; } body[data-page-key="courses"] .filter-row button[aria-pressed="true"] { background:var(--ananfx-page-gold-primary); border-color:var(--ananfx-page-gold-primary); color:var(--ananfx-page-bg-primary); } body[data-page-key="courses"] .result-count { color:var(--courses-muted); margin:12px 0 0; } body[data-page-key="courses"] .learning-path-grid { display:grid; grid-template-columns:1fr; gap:12px; } body[data-page-key="courses"] .learning-path-grid button { min-height:116px; padding:18px; border:1px solid var(--courses-border); border-radius:18px; background:var(--ananfx-page-surface-primary); text-align:left; display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center; font:inherit; } body[data-page-key="courses"] .learning-path-grid span { grid-row:1/3; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--ananfx-page-surface-elevated); color:var(--ananfx-page-gold-primary); font-weight:900; } body[data-page-key="courses"] .learning-path-grid strong { font-size:17px; } body[data-page-key="courses"] .learning-path-grid small { color:var(--courses-muted); margin-top:4px; } body[data-page-key="courses"] .course-list { display:grid; gap:12px; } body[data-page-key="courses"] .course-card { display:grid; grid-template-columns:112px 1fr; gap:14px; padding:12px; border:1px solid var(--courses-border); border-radius:18px; background:var(--ananfx-page-surface-primary); box-shadow:0 6px 20px var(--ananfx-page-shadow); scroll-margin-top:84px; } body[data-page-key="courses"] .course-card[hidden] { display:none; } body[data-page-key="courses"] .course-card__thumb { width:112px; height:112px; object-fit:cover; border-radius:13px; background:var(--ananfx-page-surface-secondary); align-self:start; } body[data-page-key="courses"] .course-card__badges { display:flex; flex-wrap:wrap; gap:6px; } body[data-page-key="courses"] .badge { display:inline-flex; border-radius:999px; padding:4px 8px; font-size:11px; font-weight:800; } body[data-page-key="courses"] .badge--free { background:rgba(66,211,146,.14); color:var(--ananfx-page-success); } body[data-page-key="courses"] .badge--premium { background:rgba(255,208,0,.14); color:var(--ananfx-page-gold-bright); } body[data-page-key="courses"] .badge--level { background:var(--ananfx-page-surface-secondary); color:var(--ananfx-page-text-secondary); } body[data-page-key="courses"] .course-card h3 { margin:8px 0 4px; font-size:17px; line-height:1.45; } body[data-page-key="courses"] .course-card p { margin:0; color:var(--courses-muted); line-height:1.55; font-size:13px; } body[data-page-key="courses"] .course-card__meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; color:var(--ananfx-page-text-muted); font-size:12px; } body[data-page-key="courses"] .course-card__actions { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; align-items:stretch; } body[data-page-key="courses"] .course-card__actions button { height:100%; background:var(--ananfx-page-surface-primary); color:var(--ananfx-page-text-primary); white-space:nowrap; overflow-wrap:normal; word-break:normal; } body[data-page-key="courses"] .course-card__actions button:last-child { background:var(--ananfx-page-gold-primary); color:var(--ananfx-page-bg-primary); border-color:var(--ananfx-page-gold-primary); } body[data-page-key="courses"] .course-card.is-highlighted { animation:courses-highlight 1.6s ease; } body[data-page-key="courses"] .empty-state { border:1px dashed var(--ananfx-page-border-primary); border-radius:18px; padding:28px 18px; text-align:center; margin-top:14px; } body[data-page-key="courses"] .empty-state p { color:var(--courses-muted); } body[data-page-key="courses"] .empty-state button, body[data-page-key="courses"] .courses-subset--premium { background:var(--ananfx-page-bg-primary); color:var(--ananfx-page-text-primary); } body[data-page-key="courses"] .courses-subset--premium .section-heading p { color:var(--ananfx-page-text-secondary); } body[data-page-key="courses"] .course-detail__card { border:1px solid var(--courses-border); border-radius:22px; overflow:hidden; background:var(--ananfx-page-surface-primary); } body[data-page-key="courses"] .course-detail__card > img { width:100%; height:auto; background:var(--ananfx-page-surface-secondary); } body[data-page-key="courses"] .course-detail__summary { padding:18px; } body[data-page-key="courses"] .course-detail__summary p { color:var(--courses-muted); line-height:1.7; } body[data-page-key="courses"] .course-detail__meta { display:flex; flex-wrap:wrap; gap:8px; } body[data-page-key="courses"] .course-detail__meta span { background:var(--ananfx-page-surface-secondary); border-radius:999px; padding:6px 10px; font-size:12px; } body[data-page-key="courses"] .detail-accordion { border-top:1px solid var(--courses-border); } body[data-page-key="courses"] .detail-accordion article + article { border-top:1px solid var(--courses-border); } body[data-page-key="courses"] .detail-accordion button { width:100%; min-height:52px; padding:0 18px; border:0; background:var(--ananfx-page-surface-primary); color:var(--ananfx-page-text-primary); display:flex; align-items:center; justify-content:space-between; font:inherit; font-weight:800; text-align:left; } body[data-page-key="courses"] .detail-accordion article > div { padding:0 18px 18px; color:var(--courses-muted); line-height:1.7; } body[data-page-key="courses"] .detail-accordion [hidden] { display:none; } body[data-page-key="courses"] .course-detail__card > .courses-actions { padding:0 18px 20px; } body[data-page-key="courses"].courses-dialog-open { overflow:hidden; } body[data-page-key="courses"] .courses-dialog-backdrop { position:fixed; inset:0; background:var(--ananfx-page-overlay); z-index:1400; } body[data-page-key="courses"] .courses-dialog { position:fixed; z-index:1401; left:16px; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); max-height:calc(100vh - 32px); overflow:auto; background:var(--ananfx-page-surface-elevated); border-radius:22px; padding:24px; box-shadow:0 28px 80px var(--ananfx-page-shadow); } body[data-page-key="courses"] .courses-dialog[hidden], body[data-page-key="courses"] .courses-dialog-backdrop[hidden] { display:none; } body[data-page-key="courses"] .courses-dialog__close { width:44px; height:44px; border:0; background:var(--ananfx-page-surface-hover); color:var(--ananfx-page-text-primary); border-radius:50%; position:absolute; right:12px; top:12px; font-size:24px; } body[data-page-key="courses"] .courses-dialog h2 { padding-right:42px; margin:0 0 12px; } body[data-page-key="courses"] .courses-dialog p { color:var(--courses-muted); line-height:1.7; } body[data-page-key="courses"] .courses-dialog__meta { margin:14px 0 4px; } body[data-page-key="courses"] .courses-dialog__media { position:relative; overflow:hidden; border-radius:16px; background:var(--ananfx-page-surface-secondary); margin:16px 0; aspect-ratio:16 / 9; } body[data-page-key="courses"] .courses-dialog__media img { width:100%; height:100%; display:block; object-fit:cover; } body[data-page-key="courses"] .courses-dialog__media span { position:absolute; left:12px; bottom:12px; max-width:calc(100% - 24px); border:1px solid rgba(255,208,0,.38); border-radius:999px; background:rgba(11,11,12,.84); color:var(--ananfx-page-gold-primary); padding:7px 10px; font-size:12px; font-weight:800; line-height:1.2; letter-spacing:.02em; } @keyframes courses-highlight { 0%,100%{box-shadow:0 0 0 0 rgba(255,208,0,0)} 35%{box-shadow:0 0 0 5px rgba(255,208,0,.32)} } @media (min-width: 430px) { body[data-page-key="courses"] .learning-path-grid, } @media (min-width: 540px) { body[data-page-key="courses"] :is(.courses-hero, .featured-card, .courses-dialog) .courses-actions { grid-template-columns:repeat(2,minmax(0,1fr)); } body[data-page-key="courses"] .courses-hero__grid { grid-template-columns:minmax(0,1.05fr) minmax(240px,.95fr); align-items:center; } body[data-page-key="courses"] .courses-hero__copy h1 { font-size:42px; } body[data-page-key="courses"] .featured-card { grid-template-columns:220px 1fr; align-items:center; } body[data-page-key="courses"] .course-card { grid-template-columns:150px 1fr; } body[data-page-key="courses"] .course-card__thumb { width:150px; height:130px; } body[data-page-key="courses"] .course-card__actions { grid-column:2; } body[data-page-key="courses"] .learning-path-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (prefers-reduced-motion: reduce) { body[data-page-key="courses"] *, body[data-page-key="courses"] *::before, body[data-page-key="courses"] *::after { scroll-behavior:auto; animation-duration:.01ms; animation-iteration-count:1; transition-duration:.01ms; } } body[data-page-key="courses"] #searchPanel input { min-height:44px; } body[data-page-key="courses"] .text-close { min-width:44px; min-height:44px; } } /* Final semantic color completion for page content and interactive states. */ body[data-page-key="courses"] :is(h1,h2,h3,h4,strong,legend,label) { color:var(--ananfx-page-text-primary); } body[data-page-key="courses"] :is(.courses-hero__lead,.course-detail__summary,.detail-accordion article > div) { color:var(--ananfx-page-text-secondary); } body[data-page-key="courses"] :is(.eyebrow,.section-heading--row a) { color:var(--ananfx-page-gold-primary); } body[data-page-key="courses"] :is(.btn--primary,.course-search button,.filter-row button[aria-pressed="true"],.course-card__actions button:last-child) { background-color:var(--ananfx-page-gold-primary); border-color:var(--ananfx-page-gold-primary); color:var(--ananfx-page-bg-primary); } body[data-page-key="courses"] :is(.btn--primary,.course-search button,.filter-row button[aria-pressed="true"],.course-card__actions button:last-child):hover { background-color:var(--ananfx-page-gold-bright); border-color:var(--ananfx-page-gold-bright); } body[data-page-key="courses"] :is(.btn--secondary,.btn--ghost,.course-card__actions button,.empty-state button) { color:var(--ananfx-page-text-primary); } body[data-page-key="courses"] :is(button,a,input,select):focus-visible { outline-color:var(--ananfx-page-gold-bright); } body[data-page-key="courses"] :is(button,input,select):disabled { background-color:var(--ananfx-page-surface-primary); border-color:var(--ananfx-page-border-primary); color:var(--ananfx-page-text-disabled); } body[data-page-key="courses"] :is(.courses-dialog,.course-detail__card,.course-search,.course-card,.learning-path-grid button) { color:var(--ananfx-page-text-primary); } /* Preserve the shared mobile shell's original zero-border geometry while painting dark separators. */ @media (max-width: 767px) { body[data-page-key="courses"] .site-header { border-bottom-width: 0; } body[data-page-key="courses"] :is(.text-close, .search-field, .notification-card, .site-footer-social, .site-footer-contact__icon) { border-width: 0; box-shadow: inset 0 0 0 1px var(--ananfx-page-border-primary); } body[data-page-key="courses"] .notification-dot { border-width: 0; box-shadow: 0 0 0 2px var(--ananfx-page-bg-primary); } /* V217 — Courses core architecture: position mapping and related courses */ body[data-page-key="courses"] .course-card__badges { display:grid; grid-template-columns:max-content max-content; align-items:center; justify-content:start; gap:6px; } body[data-page-key="courses"] .course-card__badges .badge--path { grid-column:1 / -1; justify-self:start; } body[data-page-key="courses"] .badge--path { background:var(--ananfx-page-surface-elevated); color:var(--ananfx-page-gold-primary); border:1px solid var(--ananfx-page-border-secondary); } body[data-page-key="courses"] .featured-card__path { display:inline-flex; margin-left:6px; } body[data-page-key="courses"] .course-detail__position { margin:0 0 10px; color:var(--ananfx-page-gold-primary); font-size:13px; font-weight:800; letter-spacing:.02em; } body[data-page-key="courses"] .course-detail, body[data-page-key="courses"] .related-courses { background-color: var(--page-bg-primary); } body[data-page-key="courses"] .related-courses { margin-top:24px; } body[data-page-key="courses"] .related-courses__heading { margin-bottom:16px; } body[data-page-key="courses"] .related-courses__heading h3 { margin:0; font-size:22px; } body[data-page-key="courses"] .related-courses__list { gap:12px; } body[data-page-key="courses"] .related-course-card .course-card__actions { grid-template-columns:1fr; } body[data-page-key="courses"] .site-footer-contact__icon { box-shadow: inset 0 0 0 1px var(--ananfx-page-gold-primary); } body[data-page-key="courses"] .site-footer-scene { border-top-width: 0; } body[data-page-key="courses"] .site-footer-accordion { border-bottom-width: 0; box-shadow: inset 0 -1px 0 var(--ananfx-page-divider); } } /* V141 — COURSES BLACK–GRAY–GOLD COLOR ONLY (page scoped) */ body[data-page-key="courses"] { --page-bg-primary:#0B0B0C;--page-bg-secondary:#101011;--page-bg-tertiary:#141415; --page-card-primary:#1C1C1E;--page-card-secondary:#222224;--page-card-elevated:#28282B;--page-card-hover:#2D2D30;--page-card-selected:#252527; --page-border-primary:#38383C;--page-border-secondary:#303034;--page-divider:#28282B;--page-border-hover:#4A4A4F; --page-yellow-primary:#FFD000;--page-yellow-bright:#FFE066;--page-yellow-hover:#FFE066;--page-yellow-dark:#D9A800; --page-text-primary:#F5F5F7;--page-text-secondary:#B8B8BD;--page-text-muted:#8E8E93;--page-text-disabled:#636366; --page-success:#42D392;--page-danger:#EF5A4C;--page-warning:#FFD000;--page-info:#4EA1FF; --page-overlay:rgba(0,0,0,.74);--page-shadow-color:rgba(0,0,0,.34);--page-focus-ring:rgba(255,208,0,.32); --ananfx-page-bg-primary:var(--page-bg-primary);--ananfx-page-bg-secondary:var(--page-bg-secondary);--ananfx-page-bg-tertiary:var(--page-bg-tertiary); --ananfx-page-surface-primary:var(--page-card-primary);--ananfx-page-surface-secondary:var(--page-card-secondary);--ananfx-page-surface-elevated:var(--page-card-elevated);--ananfx-page-surface-hover:var(--page-card-hover); --ananfx-page-border-primary:var(--page-border-primary);--ananfx-page-border-secondary:var(--page-border-secondary);--ananfx-page-divider:var(--page-divider); --ananfx-page-gold-primary:var(--page-yellow-primary);--ananfx-page-gold-bright:var(--page-yellow-bright); --ananfx-page-text-primary:var(--page-text-primary);--ananfx-page-text-secondary:var(--page-text-secondary);--ananfx-page-text-muted:var(--page-text-muted);--ananfx-page-text-disabled:var(--page-text-disabled); --ananfx-page-success:var(--page-success);--ananfx-page-danger:var(--page-danger);--ananfx-page-warning:var(--page-warning);--ananfx-page-info:var(--page-info); --ananfx-page-overlay:var(--page-overlay);--ananfx-page-shadow:var(--page-shadow-color);--ananfx-page-focus-ring:var(--page-focus-ring); --courses-border:var(--page-border-primary);--courses-muted:var(--page-text-secondary);--courses-gold:var(--page-yellow-primary); background-color:var(--page-bg-primary);color:var(--page-text-primary); } body[data-page-key="courses"] :is(.courses-mobile,.courses-main,.courses-hero,.courses-section,.courses-discovery,.courses-featured,.courses-subset,.site-header,.site-footer-scene){background-color:var(--page-bg-primary);} body[data-page-key="courses"] :is(.featured-card,.course-card,.course-detail__card,.course-search,.learning-path-grid button,.detail-accordion,.empty-state,.notification-card,.search-field,.text-close){background-color:var(--page-card-primary);border-color:var(--page-border-primary);} body[data-page-key="courses"] :is(.courses-dialog,.bottom-panel,.route-toast,.search-panel,.notification-panel){background-color:var(--page-card-elevated);border-color:var(--page-border-primary);} body[data-page-key="courses"] :is(.course-detail__meta,.course-card__meta,.featured-card__meta,.filter-row button,.search-suggestions button,.site-footer-accordion__panel,.site-footer-contact__icon,.site-footer-social,.detail-accordion button){background-color:var(--page-card-secondary);border-color:var(--page-border-secondary);} @media (max-width: 767px) { body[data-page-key="courses"] :is(.course-detail__meta,.course-card__meta,.featured-card__meta) { background-color: transparent; border-color: transparent; } body[data-page-key="courses"] :is(.course-detail__meta span,.featured-card__meta span) { background-color: var(--page-card-secondary); border-color: var(--page-border-secondary); } body[data-page-key="courses"] .course-search input { background-color: var(--page-card-secondary); border-color: var(--page-border-secondary); } } body[data-page-key="courses"] :is(.featured-card,.course-card,.learning-path-grid button,.notification-card):hover{background-color:var(--page-card-hover);border-color:var(--page-border-hover);} body[data-page-key="courses"] :is(.filter-row button[aria-pressed="true"],.course-card.is-selected,[aria-current="page"]){background-color:var(--page-card-selected);border-color:var(--page-yellow-primary);} body[data-page-key="courses"] :is(h1,h2,h3,h4,strong,.section-heading,.panel-header h2){color:var(--page-text-primary);} body[data-page-key="courses"] :is(p,.courses-hero__lead,.course-detail__summary,.detail-accordion article > div,.site-footer-scene__description){color:var(--page-text-secondary);} body[data-page-key="courses"] :is(.course-card__meta,.featured-card__meta,.result-count,.notification-card p,.site-footer-scene__copyright){color:var(--page-text-muted);} body[data-page-key="courses"] :is(.eyebrow,.section-heading--row a,.panel-kicker,.site-footer-link:hover){color:var(--page-yellow-primary);} body[data-page-key="courses"] :is(.btn--primary,.course-search button,.filter-row button[aria-pressed="true"],.course-card__actions button:last-child){background-color:var(--page-yellow-primary);border-color:var(--page-yellow-primary);color:var(--page-bg-primary);} body[data-page-key="courses"] :is(.btn--primary,.course-search button,.course-card__actions button:last-child):hover{background-color:var(--page-yellow-bright);border-color:var(--page-yellow-bright);} body[data-page-key="courses"] :is(.btn--secondary,.btn--ghost,.course-card__actions button,.empty-state button){background-color:var(--page-card-primary);border-color:var(--page-yellow-primary);color:var(--page-text-primary);} body[data-page-key="courses"] :is(input,select,textarea){background-color:var(--page-card-primary);border-color:var(--page-border-primary);color:var(--page-text-primary);caret-color:var(--page-yellow-primary);} body[data-page-key="courses"] :is(input,textarea)::placeholder{color:var(--page-text-muted);} body[data-page-key="courses"] :is(button,a,input,select,textarea):focus-visible{outline-color:var(--page-yellow-primary);} body[data-page-key="courses"] :is(button,input,select,textarea):disabled{background-color:var(--page-card-secondary);border-color:var(--page-border-secondary);color:var(--page-text-disabled);} body[data-page-key="courses"] .courses-dialog-backdrop,body[data-page-key="courses"] .panel-backdrop{background-color:var(--page-overlay);} /* V222 — Courses mobile final scene copied 1:1 from approved Home final CTA + footer. */ @media (max-width: 767px) { body[data-page-key="courses"] { --home-shell: calc(100% - 36px); --home-card-bg-elevated: var(--page-card-elevated); --home-card-bg-hover: var(--page-card-hover); --home-card-shadow-color: var(--page-shadow-color); } /* Preserve the legacy Courses footer for tablet/desktop; replace it only on mobile. */ body[data-page-key="courses"] #siteFooter { display: none; } body[data-page-key="courses"] .courses-home-final-clone, body[data-page-key="courses"] .courses-home-footer-clone { display: block; } body[data-page-key="courses"] .courses-home-final-clone { padding: 12px 0 54px; background: var(--ananfx-page-bg-primary); } body[data-page-key="courses"] .courses-home-final-clone .home-final-cta__card { position: relative; overflow: hidden; padding: 34px 22px; border-radius: 20px; background-color: var(--home-card-bg-elevated); color: var(--ananfx-page-text-primary); text-align: center; box-shadow: 0 18px 44px var(--home-card-shadow-color); } body[data-page-key="courses"] .courses-home-final-clone .home-final-cta__card:hover { background-color: var(--home-card-bg-hover); } body[data-page-key="courses"] .courses-home-final-clone .home-final-cta__copy { position: relative; z-index: 2; max-width: 620px; margin-inline: auto; } body[data-page-key="courses"] .courses-home-final-clone h2 { margin: 0; color: var(--ananfx-page-text-primary); } body[data-page-key="courses"] .courses-home-final-clone p { margin: 12px 0 0; color: var(--ananfx-page-text-secondary); } body[data-page-key="courses"] .courses-home-final-clone .home-final-cta__actions { position: relative; z-index: 2; display: grid; gap: 10px; margin-top: 22px; } body[data-page-key="courses"] .courses-home-final-clone .home-final-cta__line { position: absolute; width: 80%; height: 120px; border: 1px solid rgba(255,208,0,.22); border-radius: 50%; transform: rotate(-12deg); } body[data-page-key="courses"] .courses-home-final-clone .home-final-cta__line--one { left: -34%; bottom: -52px; } body[data-page-key="courses"] .courses-home-final-clone .home-final-cta__line--two { right: -38%; top: -58px; } body[data-page-key="courses"] .courses-home-final-clone .home-button--primary { background-color: var(--page-yellow-primary); border-color: var(--page-yellow-primary); color: var(--page-bg-primary); } body[data-page-key="courses"] .courses-home-final-clone .home-button--dark { background-color: var(--page-card-primary); border-color: var(--page-yellow-primary); color: var(--page-text-primary); } body[data-page-key="courses"] .courses-home-footer-clone { padding: 38px 0 calc(22px + env(safe-area-inset-bottom)); background: var(--ananfx-page-bg-primary); border-top: 1px solid var(--ananfx-page-border-primary); } body[data-page-key="courses"] .courses-home-footer-clone .site-footer-scene__inner { width: var(--home-shell); margin-inline: auto; } body[data-page-key="courses"] .courses-home-footer-clone .site-footer-scene__brand { display: block; width: 190px; max-width: 58vw; line-height: 0; } body[data-page-key="courses"] .courses-home-footer-clone .site-footer-scene__brand img { width: 100%; height: auto; } body[data-page-key="courses"] .courses-home-footer-clone .site-footer-scene__description { margin: 14px 0 18px; color: var(--page-text-secondary); } body[data-page-key="courses"] .courses-home-footer-clone .site-footer-scene__framework-name { white-space: nowrap; } body[data-page-key="courses"] #coursesHomeFooter .site-footer-direct-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } body[data-page-key="courses"] #coursesHomeFooter .site-footer-direct-action { display: inline-flex; min-width: 0; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--ananfx-page-border-primary); border-radius: 999px; background-color: var(--ananfx-page-surface-primary); color: var(--ananfx-page-text-primary); font: inherit; text-align: center; text-decoration: none; cursor: pointer; } body[data-page-key="courses"] #coursesHomeFooter .site-footer-direct-action img { width: 28px; height: 28px; flex: 0 0 28px; object-fit: contain; } body[data-page-key="courses"] #coursesHomeFooter .site-footer-direct-action:last-child { grid-column: 1 / -1; } body[data-page-key="courses"] #coursesHomeFooter .site-footer-direct-action:focus-visible, body[data-page-key="courses"] #coursesHomeFooter .site-footer-email-link:focus-visible { outline: 3px solid var(--ananfx-page-focus-ring); outline-offset: 3px; } body[data-page-key="courses"] #coursesHomeFooter .site-footer-direct-actions__status { margin: 12px 0 0; color: var(--ananfx-page-text-muted); text-align: center; } body[data-page-key="courses"] #coursesHomeFooter .site-footer-email-link { display: block; width: fit-content; margin: 12px auto 0; color: var(--ananfx-page-text-secondary); text-decoration: none; } body[data-page-key="courses"] .courses-home-footer-clone .site-footer-scene__legal-divider { height: 1px; margin: 22px 0; background: var(--ananfx-page-border-primary); } body[data-page-key="courses"] .courses-home-footer-clone .site-footer-scene__copyright { margin: 0; color: var(--ananfx-page-text-muted); text-align: center; } @media (min-width: 540px) { body[data-page-key="courses"] .courses-home-final-clone .home-final-cta__actions { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 520px; margin-inline: auto; } } body[data-page-key="courses"] .courses-home-final-clone .home-button--primary:active { background-color: var(--page-yellow-dark); border-color: var(--page-yellow-dark); color: var(--page-bg-primary); } body[data-page-key="courses"] .courses-home-final-clone .home-button--dark:active { background-color: var(--page-card-selected); border-color: var(--page-yellow-dark); color: var(--page-text-primary); } @media (hover: hover) { body[data-page-key="courses"] .courses-home-final-clone .home-button--primary:hover { background-color: var(--page-yellow-bright); border-color: var(--page-yellow-bright); } body[data-page-key="courses"] .courses-home-final-clone .home-button--dark:hover { background-color: var(--page-card-hover); border-color: var(--page-yellow-bright); } body[data-page-key="courses"] #coursesHomeFooter .site-footer-direct-action:hover, body[data-page-key="courses"] #coursesHomeFooter .site-footer-email-link:hover { color: var(--ananfx-page-gold-primary); border-color: var(--ananfx-page-gold-primary); } } } @media (min-width: 768px) { body[data-page-key="courses"] .courses-home-final-clone, body[data-page-key="courses"] .courses-home-footer-clone { display: none; } } @media (max-width: 359px) { body[data-page-key="courses"] .course-card__actions button { white-space: nowrap; overflow-wrap: normal; word-break: normal; } body[data-page-key="courses"] .course-card__actions { grid-template-columns: 1fr; } body[data-page-key="courses"] #coursesHomeFooter .site-footer-direct-actions { grid-template-columns: 1fr; } body[data-page-key="courses"] #coursesHomeFooter .site-footer-direct-action:last-child { grid-column: auto; } } /* V235 — Courses mobile typography parity with approved Home and Learning Journey. */ @media (max-width: 767px) { body[data-page-key="courses"] { font-family: var(--anan-font-family); } body[data-page-key="courses"] .courses-hero__copy h1 { font-size: 34px !important; font-weight: 800; line-height: 1.16; letter-spacing: -0.025em; } body[data-page-key="courses"] :is( .courses-section > .courses-container > .section-heading:not(.related-courses__heading) h2, .course-detail > .courses-container > .section-heading h2, .courses-dialog h2, .home-final-cta__copy h2 ) { font-size: 28px !important; font-weight: 800; line-height: 1.22; letter-spacing: -0.02em; } body[data-page-key="courses"] .courses-hero__lead { font-size: 17px !important; line-height: 1.55; } body[data-page-key="courses"] :is( .courses-hero__copy > p:not(.eyebrow):not(.courses-hero__lead), .section-heading > p:not(.eyebrow), .course-detail__summary > p:not(.course-detail__position), .courses-dialog > p:not(.eyebrow), .home-final-cta__copy > p ) { font-size: 17px !important; font-weight: 400; line-height: 1.65; } body[data-page-key="courses"] .eyebrow { font-size: 12px !important; font-weight: 800; line-height: 1.35; letter-spacing: .06em; } body[data-page-key="courses"] :is( .featured-card h3, .course-card h3, .related-course-card h3, .learning-path-grid strong, .related-courses__heading h3 ) { font-size: 17px !important; font-weight: 700; line-height: 1.45; } body[data-page-key="courses"] .featured-card h3 { line-height: 1.35; } body[data-page-key="courses"] :is( .course-card__body > p, .featured-card > div > p, .featured-card__content > p, .related-course-card p, .learning-path-grid small, .learning-path-grid .learning-path-description, .detail-accordion article > div, .detail-accordion article > div p, .detail-accordion article > div li ) { font-size: 13px !important; font-weight: 400; line-height: 1.55; } body[data-page-key="courses"] :is( .btn, .courses-actions > a, .courses-actions > button, .course-card__actions button, .course-search label, .course-search input, .course-search button, .filter-stack legend, .filter-row button, .learning-path-grid button, .detail-accordion > article > button, .empty-state button, .courses-dialog .courses-actions button, .home-final-cta__actions .home-button, .search-field input, .search-suggestions button, .text-close, .site-footer-accordion__toggle, .site-footer-link, .site-footer-direct-action ) { font-size: 17px !important; font-weight: 600; line-height: 1.35; } body[data-page-key="courses"] :is( .badge, .course-card__badges .badge ) { font-size: 11px !important; } body[data-page-key="courses"] :is( .course-card__meta, .course-card__meta span, .featured-card__meta, .featured-card__meta span, .course-detail__meta, .course-detail__meta span, .courses-dialog__media span, .result-count ) { font-size: 12px !important; line-height: 1.35; } body[data-page-key="courses"] .course-detail__position { font-size: 13px !important; line-height: 1.45; } body[data-page-key="courses"] :is( .courses-actions, .course-card__actions, .home-final-cta__actions ) > * { min-width: 0; } } /* V236 — Courses mobile final panel, footer accordion and dialog typography QA. */ @media (max-width: 767px) { body[data-page-key="courses"] :is( #searchPanel .panel-kicker, #notificationPanel .panel-kicker ) { font-size: 12px !important; font-weight: 800 !important; line-height: 1.35 !important; letter-spacing: .06em !important; } body[data-page-key="courses"] :is( #searchPanel .panel-header h2, #notificationPanel .panel-header h2 ) { min-width: 0; font-size: 28px !important; font-weight: 800 !important; line-height: 1.22 !important; letter-spacing: -.02em !important; overflow-wrap: anywhere; word-break: normal; } body[data-page-key="courses"] :is( #searchPanel .search-field input, #searchPanel .search-suggestions button, #searchPanel .text-close, #notificationPanel .text-close, #notificationPanel .notification-card strong ) { font-size: 17px !important; line-height: 1.35 !important; } body[data-page-key="courses"] :is( #searchPanel .search-empty, #notificationPanel .notification-card p ) { font-size: 13px !important; font-weight: 400 !important; line-height: 1.55 !important; } body[data-page-key="courses"] #siteFooter :is( .site-footer-accordion__toggle, .site-footer-accordion__toggle > span, .site-footer-link, .site-footer-contact__copy strong ) { font-size: 17px !important; font-weight: 600 !important; line-height: 1.35 !important; } body[data-page-key="courses"] #siteFooter .site-footer-contact__copy > span { font-size: 13px !important; font-weight: 400 !important; line-height: 1.55 !important; overflow-wrap: anywhere; } body[data-page-key="courses"] #siteFooter .site-footer-scene__copyright { font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; } body[data-page-key="courses"] :is( .courses-section > .courses-container > .section-heading h2, .course-detail > .courses-container > .section-heading h2, .home-final-cta__copy h2, .courses-dialog h2 ) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: normal; } body[data-page-key="courses"] .courses-dialog > p:not(.eyebrow) { font-size: 17px !important; font-weight: 400 !important; line-height: 1.65 !important; } body[data-page-key="courses"] .courses-dialog :is( .course-detail__meta, .course-detail__meta span, .courses-dialog__media span ) { font-size: 12px !important; line-height: 1.35 !important; } body[data-page-key="courses"] .courses-dialog .courses-actions button { min-width: 0; font-size: 17px !important; font-weight: 600 !important; line-height: 1.35 !important; } } /* V237 — Courses mobile course-card CTA width balance only. */ @media (max-width: 767px) { body[data-page-key="courses"] .course-card__actions { width: 100%; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body[data-page-key="courses"] .course-card__actions button { width: 100%; min-width: 0; padding-inline: 8px; font-size: 17px !important; } } @media (max-width: 359px) { body[data-page-key="courses"] .course-card__actions { grid-template-columns: minmax(0, 1fr); } } /* V238 — Courses mobile card pattern, asset and zone consistency repair. */ @media (max-width: 767px) { body[data-page-key="courses"] :is( #free-courses .course-card, #premium-courses .course-card, .related-courses .course-card ) { height: 100%; } body[data-page-key="courses"] :is( #free-courses .course-card__body, #premium-courses .course-card__body, .related-courses .course-card__body ) { display: grid; grid-template-rows: auto minmax(49px, auto) minmax(61px, auto) auto auto; align-content: stretch; height: 100%; min-width: 0; } body[data-page-key="courses"] :is( #free-courses .course-card__body > h3, #premium-courses .course-card__body > h3, .related-courses .course-card__body > h3, #free-courses .course-card__body > p, #premium-courses .course-card__body > p, .related-courses .course-card__body > p, #free-courses .course-card__meta, #premium-courses .course-card__meta, .related-courses .course-card__meta, #free-courses .course-card__actions, #premium-courses .course-card__actions, .related-courses .course-card__actions ) { min-width: 0; } body[data-page-key="courses"] .related-course-card .course-card__actions { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body[data-page-key="courses"] .related-course-card .course-card__actions button { width: 100%; min-width: 0; height: 100%; padding-inline: 8px; } } @media (max-width: 359px) { body[data-page-key="courses"] .related-course-card .course-card__actions { grid-template-columns: minmax(0, 1fr); } } /* V238.1 — Courses mobile card zone alignment and narrow CTA overflow correction. */ @media (max-width: 767px) { body[data-page-key="courses"] :is( #free-courses .course-card__body, #premium-courses .course-card__body, .related-courses .course-card__body ) { grid-template-rows: 60px 65px 64px 16px 50px; } body[data-page-key="courses"] :is( #free-courses .course-card__actions, #premium-courses .course-card__actions, .related-courses .course-card__actions ) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } body[data-page-key="courses"] :is( #free-courses .course-card__actions button, #premium-courses .course-card__actions button, .related-courses .course-card__actions button ) { padding-inline: 4px; } } @media (max-width: 359px) { body[data-page-key="courses"] :is( #free-courses .course-card__body, #premium-courses .course-card__body, .related-courses .course-card__body ) { grid-template-rows: 60px 65px 86px 42px 108px; } body[data-page-key="courses"] :is( #free-courses .course-card__actions, #premium-courses .course-card__actions, .related-courses .course-card__actions ) { grid-template-columns: minmax(0, 1fr); gap: 8px; } body[data-page-key="courses"] :is( #free-courses .course-card__actions button, #premium-courses .course-card__actions button, .related-courses .course-card__actions button ) { padding-inline: 8px; } } @media (min-width: 360px) and (max-width: 375px) { body[data-page-key="courses"] :is( #free-courses .course-card__actions, #premium-courses .course-card__actions, .related-courses .course-card__actions ) { grid-template-columns: minmax(0, 1fr); gap: 8px; } body[data-page-key="courses"] :is( #free-courses .course-card__body, #premium-courses .course-card__body, .related-courses .course-card__body ) { grid-template-rows: 60px 65px 64px 16px 108px; } body[data-page-key="courses"] :is( #free-courses .course-card__actions button, #premium-courses .course-card__actions button, .related-courses .course-card__actions button ) { padding-inline: 8px; } } /* V239 — Courses mobile typography parity cleanup with approved Home and Learning Journey. */ @media (max-width: 767px) { body[data-page-key="courses"] .courses-hero__copy h1 { font-size: 34px !important; } body[data-page-key="courses"] .courses-hero__lead { font-size: 17px !important; } body[data-page-key="courses"] :is( .courses-section > .courses-container > .section-heading h2, .course-detail > .courses-container > .section-heading h2, .home-final-cta__copy h2, .courses-dialog h2, .related-courses__heading h3 ) { font-size: 28px !important; font-weight: 800; line-height: 1.22; letter-spacing: -0.02em; } body[data-page-key="courses"] .featured-card h3 { font-size: 17px !important; font-weight: 700; line-height: 1.35; } body[data-page-key="courses"] .learning-path-grid small { font-size: 13px !important; font-weight: 400; line-height: 1.55; } } /* V242 — Courses mobile final card image, zone height and description spacing cleanup. */ @media (max-width: 767px) { body[data-page-key="courses"] :is( #free-courses .course-card, #premium-courses .course-card, .related-courses .course-card ) { display: grid; grid-template-rows: 112px minmax(0, 1fr); height: 100%; } body[data-page-key="courses"] :is( #free-courses .course-card__thumb, #premium-courses .course-card__thumb, .related-courses .course-card__thumb ) { width: 112px; height: 112px; min-height: 112px; object-fit: cover; } body[data-page-key="courses"] :is( #free-courses .course-card__body, #premium-courses .course-card__body, .related-courses .course-card__body ) { display: grid; grid-template-rows: minmax(60px, auto) minmax(65px, auto) minmax(64px, auto) minmax(16px, auto) minmax(50px, auto); align-content: stretch; height: 100%; min-width: 0; } body[data-page-key="courses"] :is( #free-courses .course-card__body > h3, #premium-courses .course-card__body > h3, .related-courses .course-card__body > h3 ) { min-height: 60px; margin: 0; } body[data-page-key="courses"] :is( #free-courses .course-card__body > p, #premium-courses .course-card__body > p, .related-courses .course-card__body > p ) { min-height: 65px; margin: 8px 0 0; } body[data-page-key="courses"] :is( #free-courses .course-card__meta, #premium-courses .course-card__meta, .related-courses .course-card__meta ) { min-height: 16px; margin-top: 8px; } body[data-page-key="courses"] :is( #free-courses .course-card__actions, #premium-courses .course-card__actions, .related-courses .course-card__actions ) { min-height: 50px; margin-top: 10px; align-self: end; } } @media (max-width: 359px) { body[data-page-key="courses"] :is( #free-courses .course-card, #premium-courses .course-card, .related-courses .course-card ) { grid-template-rows: 112px minmax(0, 1fr); } body[data-page-key="courses"] :is( #free-courses .course-card__body, #premium-courses .course-card__body, .related-courses .course-card__body ) { grid-template-rows: minmax(60px, auto) minmax(65px, auto) minmax(86px, auto) minmax(42px, auto) minmax(108px, auto); } } /* V243 — Courses mobile final typography standardization and section spacing parity. */ @media (max-width: 767px) { body[data-page-key="courses"] .courses-hero__lead { font-size: 17px !important; line-height: 1.55 !important; } body[data-page-key="courses"] :is( #free-courses .course-card__body > p, #premium-courses .course-card__body > p, .related-courses .course-card__body > p, .related-course-card .course-card__body > p, .learning-path-grid small, .learning-path-grid .learning-path-description ) { font-size: 13px !important; font-weight: 400 !important; line-height: 1.55 !important; } body[data-page-key="courses"] :is( .course-detail__summary > p:not(.course-detail__position), .course-detail__summary > [data-detail-description] ) { font-size: 17px !important; font-weight: 400 !important; line-height: 1.65 !important; } body[data-page-key="courses"] :is( .detail-accordion article > div, .detail-accordion article > div p, .detail-accordion article > div li ) { font-size: 13px !important; font-weight: 400 !important; line-height: 1.55 !important; } body[data-page-key="courses"] :is( .course-search input, .course-search input::placeholder, #searchPanel .search-field input, #searchPanel .search-field input::placeholder ) { font-size: 17px !important; line-height: 1.35 !important; } body[data-page-key="courses"] :is( .course-search button, .filter-row button ) { font-size: 17px !important; font-weight: 600 !important; line-height: 1.35 !important; } body[data-page-key="courses"] :is( .course-card__meta, .course-card__meta span, .featured-card__meta, .featured-card__meta span, .course-detail__meta, .course-detail__meta span, .courses-dialog__meta, .courses-dialog__meta span ) { font-size: 12px !important; line-height: 1.35 !important; } body[data-page-key="courses"] .section-heading > :is(h2, h3) + p:not(.eyebrow) { margin-top: 8px; } body[data-page-key="courses"] .section-heading { margin-bottom: 22px; } body[data-page-key="courses"] :is( #free-courses .course-card__body > h3, #premium-courses .course-card__body > h3, .related-courses .course-card__body > h3 ) + p { margin-top: 8px; } body[data-page-key="courses"] .home-final-cta__copy > p { margin-top: 12px; } body[data-page-key="courses"] .home-final-cta__actions { margin-top: 22px; } } /* V244 — Courses mobile course-card intrinsic height and bottom CTA layout only. */ @media (max-width: 767px) { body[data-page-key="courses"] :is( #free-courses .course-card, #premium-courses .course-card, .related-courses .course-card ) { height: auto; min-height: 0; grid-template-rows: none; align-items: stretch; overflow: hidden; } body[data-page-key="courses"] :is( #free-courses .course-card__body, #premium-courses .course-card__body, .related-courses .course-card__body ) { display: flex; flex-direction: column; height: auto; min-height: 0; min-width: 0; overflow: visible; } body[data-page-key="courses"] :is( #free-courses .course-card__body > h3, #premium-courses .course-card__body > h3, .related-courses .course-card__body > h3 ) { min-height: 0; margin: 8px 0 0; overflow-wrap: anywhere; } body[data-page-key="courses"] :is( #free-courses .course-card__body > p, #premium-courses .course-card__body > p, .related-courses .course-card__body > p ) { min-height: 0; margin: 8px 0 0; overflow-wrap: anywhere; } body[data-page-key="courses"] :is( #free-courses .course-card__meta, #premium-courses .course-card__meta, .related-courses .course-card__meta ) { min-height: 0; margin-top: 8px; } body[data-page-key="courses"] :is( #free-courses .course-card__actions, #premium-courses .course-card__actions, .related-courses .course-card__actions ) { min-height: 0; margin-top: auto; padding-top: 10px; align-self: stretch; } } /* V245 — Courses mobile card bottom-alignment polish only. */ @media (max-width: 767px) { body[data-page-key="courses"] :is( #free-courses .course-card, #premium-courses .course-card, .related-courses .course-card ) { height: 100%; align-self: stretch; } body[data-page-key="courses"] :is( #free-courses .course-card__body, #premium-courses .course-card__body, .related-courses .course-card__body ) { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } body[data-page-key="courses"] :is( #free-courses .course-card__body > h3, #premium-courses .course-card__body > h3, .related-courses .course-card__body > h3 ) { min-height: calc(1.35em * 3); } body[data-page-key="courses"] :is( #free-courses .course-card__body > p, #premium-courses .course-card__body > p, .related-courses .course-card__body > p ) { min-height: calc(1.55em * 3); } body[data-page-key="courses"] :is( #free-courses .course-card__meta, #premium-courses .course-card__meta, .related-courses .course-card__meta ) { margin-top: 14px; flex: 0 0 auto; } body[data-page-key="courses"] :is( #free-courses .course-card__actions, #premium-courses .course-card__actions, .related-courses .course-card__actions ) { margin-top: auto; padding-top: 10px; flex: 0 0 auto; align-self: stretch; } } /* V246 — Courses mobile final micro-spacing polish only. */ @media (max-width: 767px) { body[data-page-key="courses"] :is( #free-courses .course-card__body > h3, #premium-courses .course-card__body > h3, .related-courses .course-card__body > h3 ) { margin-top: 10px; } body[data-page-key="courses"] :is( #free-courses .course-card__actions, #premium-courses .course-card__actions, .related-courses .course-card__actions ) { padding-top: 12px; } } /* V247 — Courses mobile final pixel-perfect spacing polish only. */ @media (max-width: 767px) { body[data-page-key="courses"] :is( #free-courses .course-card__body > p, #premium-courses .course-card__body > p, .related-courses .course-card__body > p ) { margin-top: 12px; } body[data-page-key="courses"] :is( #free-courses .course-card__meta, #premium-courses .course-card__meta, .related-courses .course-card__meta ) { margin-top: 14px; } body[data-page-key="courses"] :is( #free-courses .course-card__actions, #premium-courses .course-card__actions, .related-courses .course-card__actions ) { margin-top: auto; padding-top: 12px; } } /* V248 — Courses mobile final vertical-rhythm optimization only. */ @media (max-width: 767px) { body[data-page-key="courses"] :is( #free-courses .course-card__body > p, #premium-courses .course-card__body > p, .related-courses .course-card__body > p ) { margin-top: 8px; } body[data-page-key="courses"] :is( #free-courses .course-card__meta, #premium-courses .course-card__meta, .related-courses .course-card__meta ) { margin-top: 8px; } body[data-page-key="courses"] :is( #free-courses .course-card__actions, #premium-courses .course-card__actions, .related-courses .course-card__actions ) { margin-top: auto; padding-top: 6px; } } /* V249 — Courses mobile course-card description line-height tightening only. */ @media (max-width: 767px) { body[data-page-key="courses"] :is( #free-courses .course-card__body > p, #premium-courses .course-card__body > p, .related-courses .course-card__body > p, .related-course-card .course-card__body > p ) { line-height: 1.4 !important; } } /* V250 — Courses mobile course-card excessive middle-space removal only. */ @media (max-width: 767px) { body[data-page-key="courses"] :is( #free-courses .course-card__body > h3, #premium-courses .course-card__body > h3, .related-courses .course-card__body > h3, .related-course-card .course-card__body > h3 ) { min-height: 0; } body[data-page-key="courses"] :is( #free-courses .course-card__body > p, #premium-courses .course-card__body > p, .related-courses .course-card__body > p, .related-course-card .course-card__body > p ) { min-height: 0; margin-top: 8px; line-height: 1.4 !important; } body[data-page-key="courses"] :is( #free-courses .course-card__meta, #premium-courses .course-card__meta, .related-courses .course-card__meta, .related-course-card .course-card__meta ) { margin-top: 8px; } body[data-page-key="courses"] :is( #free-courses .course-card__actions, #premium-courses .course-card__actions, .related-courses .course-card__actions, .related-course-card .course-card__actions ) { margin-top: auto; padding-top: 6px; } } /* V251 — Courses mobile course-card CTA compactness polish only. */ @media (max-width: 767px) { body[data-page-key="courses"] :is( #free-courses .course-card__actions, #premium-courses .course-card__actions, .related-courses .course-card__actions, .related-course-card .course-card__actions ) { padding-top: 4px; gap: 6px; } } /* V252 — Courses mobile contextual icon mapping only. */ @media (max-width: 767px) { body[data-page-key="courses"] :is( .course-card .badge--free, .related-course-card .badge--free, .course-card .badge--premium, .related-course-card .badge--premium, .course-card .badge--path, .related-course-card .badge--path, .featured-card .badge--premium, .featured-card .badge--path, .course-card__meta > span ) { display: inline-flex; align-items: center; } body[data-page-key="courses"] :is( .course-card .badge--free, .related-course-card .badge--free, .course-card .badge--premium, .related-course-card .badge--premium, .course-card .badge--path, .related-course-card .badge--path, .featured-card .badge--premium, .featured-card .badge--path, .course-card__meta > span )::before { content: ""; width: 1em; height: 1em; flex: 0 0 1em; margin-right: 0.38em; background-color: currentColor; -webkit-mask: var(--course-context-icon) center / contain no-repeat; mask: var(--course-context-icon) center / contain no-repeat; } /* Free access — gift. */ body[data-page-key="courses"] :is( .course-card .badge--free, .related-course-card .badge--free ) { --course-context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M5 12v9h14v-9M7.5 8C5.6 8 4 6.7 4 5.2 4 3.9 5.1 3 6.4 3 8.8 3 12 8 12 8M16.5 8C18.4 8 20 6.7 20 5.2 20 3.9 18.9 3 17.6 3 15.2 3 12 8 12 8'/%3E%3C/svg%3E"); } /* Premium access — crown. */ body[data-page-key="courses"] :is( .course-card .badge--premium, .related-course-card .badge--premium, .featured-card .badge--premium ) { --course-context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 4.5 5L12 4l4.5 7L21 6l-2 12H5L3 6Z'/%3E%3Cpath d='M5 18h14M7 21h10'/%3E%3C/svg%3E"); } /* Course position — Foundation / Book. */ body[data-page-key="courses"] :is( .course-card[data-path-stage="ขั้นที่ 1"] .badge--path, .course-card[data-path-stage="ขั้นที่ 2"] .badge--path, .related-course-card[data-related-course="course-forex-basics"] .badge--path, .related-course-card[data-related-course="course-candlestick"] .badge--path, .related-course-card[data-related-course="course-support-resistance"] .badge--path, .related-course-card[data-related-course="course-trend-basics"] .badge--path, .related-course-card[data-related-course="course-price-action"] .badge--path, .related-course-card[data-related-course="course-trend-following"] .badge--path, .related-course-card[data-related-course="course-smart-money"] .badge--path, .related-course-card[data-related-course="course-supply-demand"] .badge--path, .related-course-card[data-related-course="course-multi-timeframe"] .badge--path ) { --course-context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z'/%3E%3C/svg%3E"); } /* Course position — Strategy / Target. */ body[data-page-key="courses"] :is( .course-card[data-path-stage="ขั้นที่ 3"] .badge--path, .related-course-card[data-related-course="course-czs-complete"] .badge--path, .featured-card .badge--path ) { --course-context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); } /* Course position — Risk / Shield. */ body[data-page-key="courses"] :is( .course-card[data-path-stage="ขั้นที่ 4"] .badge--path, .related-course-card[data-related-course="course-risk-basics"] .badge--path, .related-course-card[data-related-course="course-risk-money"] .badge--path ) { --course-context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } /* Course position — Mindset / Brain. */ body[data-page-key="courses"] :is( .course-card[data-path-stage="ขั้นที่ 5"] .badge--path, .related-course-card[data-related-course="course-trading-mindset"] .badge--path, .related-course-card[data-related-course="course-psychology"] .badge--path ) { --course-context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 4.5A3.5 3.5 0 0 1 12 3a3.5 3.5 0 0 1 2.5 1.5A3.5 3.5 0 0 1 18 8a3.5 3.5 0 0 1 1 6.8A3.5 3.5 0 0 1 15.5 20H12V3H8.5A3.5 3.5 0 0 0 5 8a3.5 3.5 0 0 0-1 6.8A3.5 3.5 0 0 0 7.5 20H12'/%3E%3Cpath d='M8 9h4M7 15h5M16 9h-4M17 15h-5'/%3E%3C/svg%3E"); } /* Metadata — lesson count / book. */ body[data-page-key="courses"] .course-card__meta > span:first-child { --course-context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z'/%3E%3C/svg%3E"); } /* Metadata — duration / clock. */ body[data-page-key="courses"] .course-card__meta > span:last-child { --course-context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); } } /* V253 — Courses mobile contextual thumbnail system only. */ @media (max-width: 767px) { body[data-page-key="courses"] .course-card__thumb[src$="ananfx-premium-video-smart-money.svg"] { content: url("../images/courses/mobile-thumbnails/smart-money-mobile.svg"); } body[data-page-key="courses"] .course-card__thumb[src$="ananfx-video-supply-demand.svg"] { content: url("../images/courses/mobile-thumbnails/supply-demand-mobile.svg"); } body[data-page-key="courses"] .course-card__thumb[src$="ananfx-premium-video-trading-psychology.svg"] { content: url("../images/courses/mobile-thumbnails/trading-psychology-mobile.svg"); } body[data-page-key="courses"] .course-card__thumb[src$="ananfx-premium-video-multi-timeframe.svg"] { content: url("../images/courses/mobile-thumbnails/multi-timeframe-mobile.svg"); } } /* V254 — Courses mobile icon and thumbnail size parity with approved Home / Learning Journey. */ @media (max-width: 767px) { /* Header controls: approved 44px touch target with 28px rendered icon. */ body[data-page-key="courses"] .site-header .icon-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; } body[data-page-key="courses"] .site-header .icon-button img { width: 28px; height: 28px; max-width: 28px; max-height: 28px; object-fit: contain; } /* Search panel: approved 24px search icon. */ body[data-page-key="courses"] .search-panel .search-field img, body[data-page-key="courses"] #searchPanel .search-field img { width: 24px; min-width: 24px; height: 24px; min-height: 24px; object-fit: contain; } /* Notification status marker: approved 8px visual dot. */ body[data-page-key="courses"] .site-header .notification-dot { width: 8px; height: 8px; } /* Footer direct-action icons: approved 24px parity. */ body[data-page-key="courses"] #coursesHomeFooter .site-footer-direct-action img, body[data-page-key="courses"] #siteFooter .site-footer-direct-action img { width: 24px; min-width: 24px; height: 24px; min-height: 24px; flex: 0 0 24px; object-fit: contain; } /* Every mobile course thumbnail remains a fixed 112px square without distortion. */ body[data-page-key="courses"] :is( #free-courses .course-card__thumb, #premium-courses .course-card__thumb, .related-courses .course-card__thumb, .related-course-card .course-card__thumb ) { width: 112px; min-width: 112px; max-width: 112px; height: 112px; min-height: 112px; max-height: 112px; object-fit: cover; object-position: center; overflow: hidden; } } /* Preserve the existing Tablet/Desktop card structure while the overlay remains mobile-only. */ body[data-page-key="courses"] .course-card__media { display: contents; } /* V255 — Courses mobile standardized contextual video play overlay only. */ @media (max-width: 767px) { body[data-page-key="courses"] .course-card[data-video-course="true"] .course-card__media, body[data-page-key="courses"] .related-course-card[data-video-course="true"] .course-card__media { display: block; position: relative; width: 112px; min-width: 112px; max-width: 112px; height: 112px; min-height: 112px; max-height: 112px; flex: 0 0 112px; overflow: hidden; border-radius: inherit; } body[data-page-key="courses"] .course-card[data-video-course="true"] .course-card__media > .course-card__thumb, body[data-page-key="courses"] .related-course-card[data-video-course="true"] .course-card__media > .course-card__thumb { display: block; width: 112px; min-width: 112px; max-width: 112px; height: 112px; min-height: 112px; max-height: 112px; object-fit: cover; object-position: center; } body[data-page-key="courses"] .course-card[data-video-course="true"] .course-card__play-overlay, body[data-page-key="courses"] .related-course-card[data-video-course="true"] .course-card__play-overlay { position: absolute; inset: 50% auto auto 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; pointer-events: auto; z-index: 2; background: rgba(8, 9, 11, .82); border: 2px solid #FFD400; box-sizing: border-box; } body[data-page-key="courses"] .course-card[data-video-course="true"] .course-card__play-icon, body[data-page-key="courses"] .related-course-card[data-video-course="true"] .course-card__play-icon { display: block; width: 22px; height: 22px; position: relative; } body[data-page-key="courses"] .course-card[data-video-course="true"] .course-card__play-icon::before, body[data-page-key="courses"] .related-course-card[data-video-course="true"] .course-card__play-icon::before { content: ""; position: absolute; left: 7px; top: 4px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid #FFFFFF; } } /* V256 — Courses mobile header SVG parity and featured play overlay size fix only. */ /* Preserve the existing Tablet/Desktop featured-card structure. */ body[data-page-key="courses"] .featured-card__media { display: contents; } @media (max-width: 767px) { /* Header icon parity: support both raster and inline SVG sources. */ body[data-page-key="courses"] .site-header .icon-button img, body[data-page-key="courses"] .site-header .icon-button svg, body[data-page-key="courses"] .site-header .header-menu img, body[data-page-key="courses"] .site-header .header-menu svg, body[data-page-key="courses"] .site-header .notification-button img, body[data-page-key="courses"] .site-header .notification-button svg { width: 28px; height: 28px; min-width: 28px; min-height: 28px; max-width: 28px; max-height: 28px; object-fit: contain; flex: 0 0 28px; } /* Featured course uses a dedicated standardized play overlay on mobile only. */ body[data-page-key="courses"] .featured-card__media { display: block; position: relative; overflow: hidden; border-radius: 16px; } body[data-page-key="courses"] .featured-card__media > img { display: block; width: 100%; height: auto; object-fit: cover; object-position: center; } body[data-page-key="courses"] .featured-card__play-overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; min-width: 56px; max-width: 56px; height: 56px; min-height: 56px; max-height: 56px; border: 2px solid #FFD400; border-radius: 50%; background: rgba(8, 9, 11, .82); display: grid; place-items: center; box-sizing: border-box; pointer-events: auto; z-index: 2; } body[data-page-key="courses"] .featured-card__play-icon { display: block; position: relative; width: 26px; height: 26px; } body[data-page-key="courses"] .featured-card__play-icon::before { content: ""; position: absolute; left: 9px; top: 5px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #FFFFFF; } /* Reaffirm the approved course-card play size without changing layout. */ body[data-page-key="courses"] .course-card[data-video-course="true"] .course-card__play-overlay, body[data-page-key="courses"] .related-course-card[data-video-course="true"] .course-card__play-overlay { width: 44px; min-width: 44px; max-width: 44px; height: 44px; min-height: 44px; max-height: 44px; } body[data-page-key="courses"] .course-card[data-video-course="true"] .course-card__play-icon, body[data-page-key="courses"] .related-course-card[data-video-course="true"] .course-card__play-icon { width: 22px; min-width: 22px; max-width: 22px; height: 22px; min-height: 22px; max-height: 22px; } } /* V258 — Courses mobile Search & Filter premium black-gold color system only. */ @media (max-width: 767px) { /* Discovery section surface only; no spacing or structure changes. */ body[data-page-key="courses"] .courses-discovery { background-color: #070809; } /* Search card: premium black gradient, restrained gold border and glow. */ body[data-page-key="courses"] .course-search { background: linear-gradient(180deg, #111316 0%, #0C0D0F 100%); border-color: rgba(255, 208, 0, .55); box-shadow: 0 16px 34px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 208, 0, .04), 0 0 24px rgba(255, 208, 0, .07); } body[data-page-key="courses"] .course-search label { color: #F5F5F7; } /* Search input: dark inset surface with yellow focus state. */ body[data-page-key="courses"] .course-search input { background: linear-gradient(180deg, #15171A 0%, #101114 100%); border-color: #3A3C42; color: #F5F5F7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); } body[data-page-key="courses"] .course-search input::placeholder { color: #8E8E93; } body[data-page-key="courses"] .course-search input:focus, body[data-page-key="courses"] .course-search input:focus-visible { border-color: #FFD000; outline: none; box-shadow: 0 0 0 3px rgba(255, 208, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .03); } /* Clear-filter CTA: dimensional yellow, never a flat fill. */ body[data-page-key="courses"] .course-search button { background: linear-gradient(135deg, #FFE45C 0%, #FFD000 55%, #E8B800 100%); border-color: #FFD400; color: #090909; box-shadow: 0 8px 24px rgba(255, 208, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .30); } body[data-page-key="courses"] .course-search button:hover { background: linear-gradient(135deg, #FFF07A 0%, #FFE45C 52%, #FFD000 100%); border-color: #FFE45C; } /* Existing fieldsets become distinct visual cards without HTML changes. */ body[data-page-key="courses"] .filter-stack > fieldset { background: linear-gradient(180deg, #111316 0%, #0C0D0F 100%); border: 1px solid #303238; box-shadow: 0 12px 28px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .02); } body[data-page-key="courses"] .filter-stack > fieldset legend { color: #FFD000; } /* Inactive chips. */ body[data-page-key="courses"] .filter-row button { background: #1A1B1F; border-color: #3A3C42; color: #F5F5F7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); } /* Active chips. */ body[data-page-key="courses"] .filter-row button[aria-pressed="true"] { background: linear-gradient(135deg, #FFE45C 0%, #FFD000 55%, #E8B800 100%); border-color: #FFD400; color: #090909; box-shadow: 0 8px 24px rgba(255, 208, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .28); } @media (hover: hover) { body[data-page-key="courses"] .filter-row button:not([aria-pressed="true"]):hover { border-color: rgba(255, 208, 0, .72); box-shadow: 0 0 0 1px rgba(255, 208, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .035); } } /* Existing icon color hooks: headings yellow, inactive chip icons white, active chip icons black, Free green and Premium yellow. */ body[data-page-key="courses"] .filter-stack > fieldset legend :is(svg, img), body[data-page-key="courses"] .filter-stack > fieldset legend::before { color: #FFD000; fill: currentColor; stroke: currentColor; } body[data-page-key="courses"] .filter-row button :is(svg, img), body[data-page-key="courses"] .filter-row button::before { color: #F5F5F7; fill: currentColor; stroke: currentColor; } body[data-page-key="courses"] .filter-row button[aria-pressed="true"] :is(svg, img), body[data-page-key="courses"] .filter-row button[aria-pressed="true"]::before { color: #090909; fill: currentColor; stroke: currentColor; } body[data-page-key="courses"] .filter-row[data-filter-group="access"] button[data-filter="free"]:not([aria-pressed="true"]), body[data-page-key="courses"] .filter-row[data-filter-group="access"] button[data-filter="free"]:not([aria-pressed="true"]) :is(svg, img), body[data-page-key="courses"] .filter-row[data-filter-group="access"] button[data-filter="free"]:not([aria-pressed="true"])::before { color: #42D392; } body[data-page-key="courses"] .filter-row[data-filter-group="access"] button[data-filter="premium"]:not([aria-pressed="true"]), body[data-page-key="courses"] .filter-row[data-filter-group="access"] button[data-filter="premium"]:not([aria-pressed="true"]) :is(svg, img), body[data-page-key="courses"] .filter-row[data-filter-group="access"] button[data-filter="premium"]:not([aria-pressed="true"])::before { color: #FFD000; } /* Result count card. Dynamic count text remains owned by the existing JS. */ body[data-page-key="courses"] .result-count { background: #111316; border: 1px solid #303238; color: #B8B8BD; box-shadow: 0 10px 24px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .02); } } /* V259 — Courses mobile final floating Search & Filter polish only. */ @media (max-width: 767px) { /* Filter groups: soft floating cards, no hard rectangular outline. */ body[data-page-key="courses"] .filter-stack > fieldset { background: linear-gradient(180deg, #121316 0%, #0D0E11 100%); border: 1px solid rgba(255, 255, 255, .05); border-radius: 22px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); margin-top: 12px; margin-bottom: 12px; } /* Preserve typography while giving the existing labels more breathing room. */ body[data-page-key="courses"] .filter-stack > fieldset legend { padding-top: 8px; padding-bottom: 8px; } /* Active chips: restrained depth without a large glow. */ body[data-page-key="courses"] .filter-row button[aria-pressed="true"] { box-shadow: 0 4px 12px rgba(255, 210, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .28); } /* Inactive chips: low-contrast edge for a floating rather than boxed feel. */ body[data-page-key="courses"] .filter-row button:not([aria-pressed="true"]) { background: #1A1B1F; border: 1px solid rgba(255, 255, 255, .08); } /* Result status becomes a compact floating card. */ body[data-page-key="courses"] .result-count { height: 42px; min-height: 42px; border-radius: 12px; background: #121316; border: 1px solid rgba(255, 255, 255, .06); padding-left: 16px; color: #B8B8BD; box-shadow: 0 8px 20px rgba(0, 0, 0, .20); box-sizing: border-box; display: flex; align-items: center; } } /* V260 — Courses mobile final premium Search & Filter spacing polish only. */ @media (max-width: 767px) { /* Add a clear visual break between Search and the first filter card. */ body[data-page-key="courses"] .filter-stack { margin-top: 34px; gap: 12px; } /* Each existing fieldset remains its own inset floating card. */ body[data-page-key="courses"] .filter-stack > fieldset { width: auto; margin: 0 8px; padding: 0 12px 12px; box-sizing: border-box; } /* More top breathing room for หมวด / ระดับ / สิทธิ์ without typography changes. */ body[data-page-key="courses"] .filter-stack > fieldset legend { padding-top: 19px; padding-bottom: 8px; } /* Chips become slightly more compact while preserving the existing type rules. */ body[data-page-key="courses"] .filter-row button { min-height: 41px; padding-top: 7px; padding-bottom: 7px; } /* Reduce active-chip glow by about 40% from the prior final value. */ body[data-page-key="courses"] .filter-row button[aria-pressed="true"] { box-shadow: 0 4px 12px rgba(255, 210, 0, .07), inset 0 1px 0 rgba(255, 255, 255, .28); } } /* V261 — Courses discovery mobile premium-fintech structure: desktop/tablet neutrality. */ body[data-page-key="courses"] .discovery-hero__copy { display: contents; } body[data-page-key="courses"] .discovery-hero__visual, body[data-page-key="courses"] .filter-section-header, body[data-page-key="courses"] .discovery-feature-card, body[data-page-key="courses"] .course-search__icon, body[data-page-key="courses"] .course-search button > .ui-icon, body[data-page-key="courses"] .filter-row button > .ui-icon, body[data-page-key="courses"] .result-status-card > .ui-icon { display: none; } body[data-page-key="courses"] .result-status-card { display: contents; } /* V277 — Courses mobile discovery-hero top-spacing and artwork-position polish only. */ @media (max-width: 767px) { body[data-page-key="courses"] .courses-discovery { position: relative; overflow: hidden; margin-top: -20px; padding-top: 0; background: radial-gradient(circle at 86% 10%, rgba(255, 208, 0, .11), transparent 26%), linear-gradient(180deg, #070809 0%, #090A0C 48%, #070809 100%); } body[data-page-key="courses"] .courses-discovery > .courses-container { width: min(100% - 32px, 720px); overflow: visible; } /* Search-and-filter hero */ body[data-page-key="courses"] .courses-discovery .discovery-hero { position: relative; display: block; min-height: 220px; margin: 0 -16px 20px; padding: 28px 16px 24px; overflow: hidden; border-bottom: 1px solid rgba(255, 212, 0, .10); background: radial-gradient(circle at 82% 45%, rgba(255, 208, 0, .16), transparent 35%), linear-gradient(135deg, #070809 0%, #0B0D10 58%, #08090B 100%); isolation: isolate; } body[data-page-key="courses"] .discovery-hero::after { content: ""; position: absolute; inset: auto -24% -55% 34%; height: 240px; border-radius: 50%; background: rgba(255, 208, 0, .08); filter: blur(54px); z-index: -1; } body[data-page-key="courses"] .discovery-hero__copy { display: block; position: relative; z-index: 2; width: 74%; } body[data-page-key="courses"] .discovery-hero .eyebrow { margin: 0 0 10px; color: #FFD000; } body[data-page-key="courses"] .discovery-hero h2 { max-width: 320px; margin: 0; color: #FFFFFF; line-height: 1.18; text-wrap: balance; } body[data-page-key="courses"] .discovery-hero__copy > p:last-child { max-width: 310px; margin: 10px 0 0; color: #B8B8BD; line-height: 1.55; text-wrap: balance; } body[data-page-key="courses"] .discovery-hero__visual { display: block; position: absolute; right: -8px; bottom: 0; width: 40%; max-width: 210px; margin: 0; z-index: 1; pointer-events: auto; } body[data-page-key="courses"] .discovery-hero__visual img { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .48)); } /* Shared line-icon system */ body[data-page-key="courses"] .ui-icon { --ui-icon: none; display: inline-block; width: 24px; min-width: 24px; height: 24px; flex: 0 0 24px; color: currentColor; background: currentColor; -webkit-mask-image: var(--ui-icon); mask-image: var(--ui-icon); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } body[data-page-key="courses"] .ui-icon--search { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m20%2020-4-4%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--filter { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16l-6%207v5l-4%202v-7z%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--grid { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--target { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%202v3M22%2012h-3M12%2022v-3M2%2012h3%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--lock { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%2210%22%20width%3D%2214%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2010V7a4%204%200%200%201%208%200v3%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--chevron-right { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--bar-chart { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10M10%2020V4M16%2020v-7M22%2020H2%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--hexagon { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%202%208%205v10l-8%205-8-5V7z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--trend { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2017%206-6%204%204%208-9%22%2F%3E%3Cpath%20d%3D%22M15%206h6v6%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--shield { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202%2020%205v6c0%205-3.5%208.5-8%2011-4.5-2.5-8-6-8-11V5z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--coins { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%226%22%20rx%3D%225%22%20ry%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M4%206v4c0%201.4%202.2%202.5%205%202.5s5-1.1%205-2.5V6%22%2F%3E%3Cpath%20d%3D%22M10%2015c.8%201%202.5%201.7%204.5%201.7%202.8%200%205-1.1%205-2.5v-4%22%2F%3E%3Cellipse%20cx%3D%2214.5%22%20cy%3D%2210%22%20rx%3D%225%22%20ry%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--brain { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%204a3%203%200%200%200-3%203v1a3%203%200%200%200-1%205%203%203%200%200%200%203%204h1%22%2F%3E%3Cpath%20d%3D%22M15%204a3%203%200%200%201%203%203v1a3%203%200%200%201%201%205%203%203%200%200%201-3%204h-1%22%2F%3E%3Cpath%20d%3D%22M9%204v16M15%204v16M9%208h3M12%2012h3M9%2016h3%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--star { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%202%203%206%206%20.8-4.5%204.4%201%206.3-5.5-3-5.5%203%201-6.3L3%208.8%209%208z%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--leaf { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%204C11%204%205%209%205%2016c0%202%201%204%203%205%207-1%2011-7%2012-17z%22%2F%3E%3Cpath%20d%3D%22M5%2020c3-4%207-7%2012-10%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--rocket { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%204c3-2%205-2%206-2%200%201%200%203-2%206l-5%205-5-5z%22%2F%3E%3Cpath%20d%3D%22M8%208%204%209l-2%204%205%201M13%2013l1%205-4%202-1-4%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%228%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--crown { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%207%204%204%205-7%205%207%204-4-2%2011H5z%22%2F%3E%3Cpath%20d%3D%22M5%2018h14%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--diamond { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%202%208%206-8%2014L4%208z%22%2F%3E%3Cpath%20d%3D%22M4%208h16M8%208l4%2014%204-14%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--gift { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%209v12M3%2013h18%22%2F%3E%3Cpath%20d%3D%22M12%209H8a3%203%200%201%201%204-3zM12%209h4a3%203%200%201%200-4-3z%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--dot { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--book-open { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205a7%207%200%200%201%209%202v14a7%207%200%200%200-9-2z%22%2F%3E%3Cpath%20d%3D%22M21%205a7%207%200%200%200-9%202v14a7%207%200%200%201%209-2z%22%2F%3E%3C%2Fsvg%3E"); } body[data-page-key="courses"] .ui-icon--growth { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10M10%2020V14M16%2020V7M22%2020H2%22%2F%3E%3Cpath%20d%3D%22m5%208%205-4%204%203%206-5%22%2F%3E%3Cpath%20d%3D%22M16%202h4v4%22%2F%3E%3C%2Fsvg%3E"); } /* Premium search card */ body[data-page-key="courses"] .course-search { margin: 0; border: 1px solid rgba(255, 212, 0, .20); background: #121212; box-shadow: 0 18px 42px rgba(0, 0, 0, .36), 0 0 30px rgba(255, 208, 0, .055), inset 0 1px 0 rgba(255, 255, 255, .035); } body[data-page-key="courses"] .course-search > label { display: block; padding: 0; color: #F5F5F7; } body[data-page-key="courses"] .course-search__icon { color: #F5F5F7; opacity: .92; } body[data-page-key="courses"] .course-search input { border: 1px solid rgba(255, 255, 255, .10); background: linear-gradient(180deg, #16181B 0%, #101114 100%); color: #F5F5F7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); } body[data-page-key="courses"] .course-search input::placeholder { color: #8F949B; opacity: 1; } body[data-page-key="courses"] .course-search input:focus, body[data-page-key="courses"] .course-search input:focus-visible { border-color: #FFD000; outline: none; box-shadow: 0 0 0 3px rgba(255, 208, 0, .11), inset 0 1px 0 rgba(255, 255, 255, .04); } body[data-page-key="courses"] .course-search button { border: 1px solid #FFD400; background: linear-gradient(135deg, #FFE45C 0%, #FFD000 55%, #E8B800 100%); color: #090909; box-shadow: 0 8px 18px rgba(255, 208, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .30); } /* Distinct premium filter cards */ body[data-page-key="courses"] .filter-stack { display: grid; gap: 20px; margin-top: 24px; } body[data-page-key="courses"] .filter-stack > fieldset { width: 100%; margin: 0; padding: 20px; overflow: hidden; border: 1px solid rgba(255, 212, 0, .15); border-radius: 22px; background: #151515; box-shadow: 0 14px 34px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .025); box-sizing: border-box; } body[data-page-key="courses"] .filter-stack > fieldset > .filter-section-legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body[data-page-key="courses"] .filter-section-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; margin: 0 0 18px; } body[data-page-key="courses"] .filter-section-header__title, body[data-page-key="courses"] .filter-section-header__all { display: inline-flex; align-items: center; min-width: 0; } body[data-page-key="courses"] .filter-section-header__title { gap: 10px; color: #F5F5F7; font-weight: 800; } body[data-page-key="courses"] .filter-section-header__title > .ui-icon { color: #FFD000; } body[data-page-key="courses"] .filter-section-header__all { gap: 6px; color: #FFD000; white-space: nowrap; } body[data-page-key="courses"] .filter-section-header__all > .ui-icon { width: 18px; min-width: 18px; height: 18px; flex-basis: 18px; } body[data-page-key="courses"] .filter-row { display: flex; gap: 12px; margin: 0; padding: 0 0 4px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body[data-page-key="courses"] .filter-row::-webkit-scrollbar { display: none; } body[data-page-key="courses"] .filter-row button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: 0 0 auto; height: 50px; min-height: 50px; padding: 0 24px; border: 1px solid #3A3A3A; border-radius: 999px; background: #252525; color: #F5F5F7; font-size: 16px !important; font-weight: 600; line-height: 1.2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); scroll-snap-align: start; white-space: nowrap; } body[data-page-key="courses"] .filter-row button > .ui-icon { display: inline-block; width: 22px; min-width: 22px; height: 22px; flex-basis: 22px; color: #F5F5F7; } body[data-page-key="courses"] .filter-row button[aria-pressed="true"] { border-color: #FFD400; background: linear-gradient(135deg, #FFE45C 0%, #FFD000 58%, #E8B800 100%); color: #090909; box-shadow: 0 4px 12px rgba(255, 210, 0, .07), inset 0 1px 0 rgba(255, 255, 255, .28); } body[data-page-key="courses"] .filter-row button[aria-pressed="true"] > .ui-icon { color: #090909; } body[data-page-key="courses"] .filter-row[data-filter-group="access"] button[data-filter="free"]:not([aria-pressed="true"]), body[data-page-key="courses"] .filter-row[data-filter-group="access"] button[data-filter="free"]:not([aria-pressed="true"]) > .ui-icon { color: #42D392; } body[data-page-key="courses"] .filter-row[data-filter-group="access"] button[data-filter="premium"]:not([aria-pressed="true"]) > .ui-icon { color: #FFD000; } @media (hover: hover) { body[data-page-key="courses"] .filter-row button:not([aria-pressed="true"]):hover { border-color: rgba(255, 212, 0, .42); background: #292929; } } /* Premium result status */ body[data-page-key="courses"] .result-status-card { display: flex; align-items: center; gap: 12px; min-height: 58px; margin-top: 20px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 18px; background: #161616; box-shadow: 0 12px 28px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .025); box-sizing: border-box; } body[data-page-key="courses"] .result-status-card > .ui-icon { display: inline-block; color: #FFD000; } body[data-page-key="courses"] .result-status-card .result-count { display: flex; align-items: center; min-width: 0; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #B8B8BD; box-shadow: none; } /* Bottom three-column feature card */ body[data-page-key="courses"] .discovery-feature-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 20px; padding: 18px 12px; border: 1px solid rgba(255, 212, 0, .24); border-radius: 22px; background: radial-gradient(circle at 50% 100%, rgba(255, 208, 0, .08), transparent 48%), linear-gradient(180deg, #121316 0%, #0B0C0E 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, .34), 0 0 28px rgba(255, 208, 0, .04), inset 0 1px 0 rgba(255, 255, 255, .025); } body[data-page-key="courses"] .discovery-feature-card__item { display: flex; align-items: flex-start; justify-content: center; gap: 10px; min-width: 0; padding: 2px 12px; } body[data-page-key="courses"] .discovery-feature-card__item + .discovery-feature-card__item { border-left: 1px solid rgba(255, 212, 0, .14); } body[data-page-key="courses"] .discovery-feature-card__item > .ui-icon { width: 30px; min-width: 30px; height: 30px; flex-basis: 30px; color: #FFD000; } body[data-page-key="courses"] .discovery-feature-card__item > div { min-width: 0; } body[data-page-key="courses"] .discovery-feature-card__item strong { display: block; color: #F5F5F7; line-height: 1.3; } body[data-page-key="courses"] .discovery-feature-card__item p { margin: 5px 0 0; color: #8E8E93; font-size: 12px !important; line-height: 1.45; } body[data-page-key="courses"] .empty-state { margin-top: 20px; } } @media (max-width: 390px) { body[data-page-key="courses"] .courses-discovery > .courses-container { width: min(100% - 24px, 720px); } body[data-page-key="courses"] .discovery-hero { margin-left: -12px; margin-right: -12px; padding-left: 14px; padding-right: 14px; } body[data-page-key="courses"] .discovery-hero__copy { width: 76%; } body[data-page-key="courses"] .discovery-hero__visual { right: -10px; width: 42%; } body[data-page-key="courses"] .filter-stack > fieldset { padding: 18px 16px; } body[data-page-key="courses"] .filter-row button { padding-left: 20px; padding-right: 20px; } body[data-page-key="courses"] .discovery-feature-card { padding-left: 6px; padding-right: 6px; } body[data-page-key="courses"] .discovery-feature-card__item { display: grid; justify-items: center; gap: 8px; padding-left: 7px; padding-right: 7px; text-align: center; } body[data-page-key="courses"] .discovery-feature-card__item p { font-size: 11px !important; } } @media (max-width: 339px) { body[data-page-key="courses"] .discovery-hero { min-height: 236px; } body[data-page-key="courses"] .discovery-hero__copy { width: 80%; } body[data-page-key="courses"] .discovery-hero__visual { right: -14px; width: 44%; } body[data-page-key="courses"] .filter-section-header__all { font-size: 14px; } body[data-page-key="courses"] .discovery-feature-card__item strong { font-size: 13px; } body[data-page-key="courses"] .discovery-feature-card__item p { display: none; } } /* V262 — Courses mobile compact-premium search/filter spacing polish only. */ @media (max-width: 767px) { /* Search → first filter card and card-to-card rhythm. */ body[data-page-key="courses"] .filter-stack { gap: 16px; margin-top: 16px; } /* Filter cards: reduce vertical padding without changing structure, color, or typography. */ body[data-page-key="courses"] .filter-stack > fieldset { padding: 16px; } body[data-page-key="courses"] .filter-section-header { gap: 10px; margin-bottom: 12px; } body[data-page-key="courses"] .filter-section-header__title { gap: 8px; } body[data-page-key="courses"] .filter-section-header__all { gap: 4px; } /* Compact chips while retaining the existing type declarations. */ body[data-page-key="courses"] .filter-row { gap: 10px; padding-bottom: 2px; } body[data-page-key="courses"] .filter-row button { gap: 8px; height: 47px; min-height: 47px; padding-left: 20px; padding-right: 20px; border-radius: 20px; } body[data-page-key="courses"] .filter-row button > .ui-icon { width: 20px; min-width: 20px; height: 20px; flex-basis: 20px; } /* Rights → result and result → feature spacing. */ body[data-page-key="courses"] .result-status-card { min-height: 50px; margin-top: 16px; padding-left: 15px; padding-right: 15px; } body[data-page-key="courses"] .result-status-card > .ui-icon { width: 22px; min-width: 22px; height: 22px; flex-basis: 22px; } /* Bottom feature card: roughly 15% less vertical footprint. */ body[data-page-key="courses"] .discovery-feature-card { margin-top: 16px; padding: 14px 10px; } body[data-page-key="courses"] .discovery-feature-card__item { gap: 8px; padding-top: 0; padding-bottom: 0; padding-left: 10px; padding-right: 10px; } body[data-page-key="courses"] .discovery-feature-card__item > .ui-icon { width: 27px; min-width: 27px; height: 27px; flex-basis: 27px; } body[data-page-key="courses"] .discovery-feature-card__item p { margin-top: 3px; } } @media (max-width: 390px) { body[data-page-key="courses"] .filter-stack > fieldset { padding: 15px 14px; } body[data-page-key="courses"] .filter-row button { padding-left: 18px; padding-right: 18px; } body[data-page-key="courses"] .discovery-feature-card { padding-top: 12px; padding-bottom: 12px; } body[data-page-key="courses"] .discovery-feature-card__item { gap: 6px; padding-left: 6px; padding-right: 6px; } } /* V263 — Courses mobile ultra-compact premium search/filter layout polish only. */ @media (max-width: 767px) { /* Search → filters and filter-to-filter rhythm. */ body[data-page-key="courses"] .filter-stack { gap: 12px; margin-top: 12px; } /* Filter cards: approximately 18% less internal height. */ body[data-page-key="courses"] .filter-stack > fieldset { padding: 13px; } body[data-page-key="courses"] .filter-section-header { gap: 10px; margin-bottom: 12px; } body[data-page-key="courses"] .filter-section-header__title { gap: 10px; } body[data-page-key="courses"] .filter-section-header__all { gap: 4px; } /* Ultra-compact chips. */ body[data-page-key="courses"] .filter-row { gap: 8px; padding-bottom: 0; } body[data-page-key="courses"] .filter-row button { gap: 7px; height: 44px; min-height: 44px; padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; } body[data-page-key="courses"] .filter-row button > .ui-icon { width: 18px; min-width: 18px; height: 18px; flex-basis: 18px; } /* Rights → result and result → feature. */ body[data-page-key="courses"] .result-status-card { min-height: 43px; margin-top: 12px; padding: 9px 13px; border-radius: 14px; } body[data-page-key="courses"] .result-status-card > .ui-icon { width: 20px; min-width: 20px; height: 20px; flex-basis: 20px; } /* Bottom feature card: tighter visual footprint. */ body[data-page-key="courses"] .discovery-feature-card { margin-top: 12px; padding: 10px 8px; } body[data-page-key="courses"] .discovery-feature-card__item { gap: 5px; padding: 0 7px; } body[data-page-key="courses"] .discovery-feature-card__item > .ui-icon { width: 26px; min-width: 26px; height: 26px; flex-basis: 26px; } body[data-page-key="courses"] .discovery-feature-card__item strong { font-size: 20px; line-height: 1.2; } body[data-page-key="courses"] .discovery-feature-card__item p { margin-top: 2px; font-size: 13px !important; line-height: 1.35; } } @media (max-width: 390px) { body[data-page-key="courses"] .filter-stack > fieldset { padding: 12px; } body[data-page-key="courses"] .filter-row button { padding-left: 16px; padding-right: 16px; } body[data-page-key="courses"] .discovery-feature-card { padding-top: 9px; padding-bottom: 9px; } body[data-page-key="courses"] .discovery-feature-card__item { gap: 4px; padding-left: 5px; padding-right: 5px; } } /* V264 — Courses mobile reference-scale compact search/filter polish only. */ @media (max-width: 767px) { body[data-page-key="courses"] .filter-stack { gap: 10px; margin-top: 10px; } body[data-page-key="courses"] .filter-stack > fieldset { padding: 14px; border-radius: 16px; } body[data-page-key="courses"] .filter-section-header { gap: 8px; margin-bottom: 10px; } body[data-page-key="courses"] .filter-section-header__title { gap: 8px; line-height: 1.15; } body[data-page-key="courses"] .filter-section-header__title > .ui-icon { width: 18px; min-width: 18px; height: 18px; flex-basis: 18px; } body[data-page-key="courses"] .filter-section-header__all { gap: 3px; font-size: 13px; line-height: 1.15; } body[data-page-key="courses"] .filter-section-header__all > .ui-icon { width: 16px; min-width: 16px; height: 16px; flex-basis: 16px; } body[data-page-key="courses"] .filter-row { gap: 8px; } body[data-page-key="courses"] .filter-row button { gap: 6px; height: 40px; min-height: 40px; padding: 8px 14px; border-width: 1px; border-radius: 999px; font-size: 15px !important; line-height: 1.15; } body[data-page-key="courses"] .filter-row button > .ui-icon { width: 16px; min-width: 16px; height: 16px; flex-basis: 16px; } body[data-page-key="courses"] .filter-row button[aria-pressed="true"] { box-shadow: 0 2px 7px rgba(255, 210, 0, .045), inset 0 1px 0 rgba(255, 255, 255, .22); } body[data-page-key="courses"] .result-status-card { min-height: 38px; margin-top: 10px; padding: 8px 14px; border-radius: 12px; gap: 9px; } body[data-page-key="courses"] .result-status-card > .ui-icon { width: 18px; min-width: 18px; height: 18px; flex-basis: 18px; } body[data-page-key="courses"] .discovery-feature-card { margin-top: 10px; padding: 14px 8px; border-radius: 16px; } body[data-page-key="courses"] .discovery-feature-card__item { gap: 4px; padding: 0 5px; align-items: flex-start; } body[data-page-key="courses"] .discovery-feature-card__item + .discovery-feature-card__item { border-left-width: 1px; } body[data-page-key="courses"] .discovery-feature-card__item > .ui-icon { width: 27px; min-width: 27px; height: 27px; flex-basis: 27px; } body[data-page-key="courses"] .discovery-feature-card__item strong { font-size: 17px; line-height: 1.15; } body[data-page-key="courses"] .discovery-feature-card__item p { margin-top: 1px; font-size: 13px !important; line-height: 1.25; } } @media (max-width: 390px) { body[data-page-key="courses"] .filter-stack > fieldset { padding-left: 12px; padding-right: 12px; } body[data-page-key="courses"] .filter-row button { height: 38px; min-height: 38px; padding: 7px 12px; font-size: 14px !important; } body[data-page-key="courses"] .discovery-feature-card { padding: 12px 6px; } body[data-page-key="courses"] .discovery-feature-card__item { padding-left: 3px; padding-right: 3px; } body[data-page-key="courses"] .discovery-feature-card__item > .ui-icon { width: 26px; min-width: 26px; height: 26px; flex-basis: 26px; } body[data-page-key="courses"] .discovery-feature-card__item strong { font-size: 16px; } body[data-page-key="courses"] .discovery-feature-card__item p { font-size: 12px !important; } } /* V265 — Courses mobile final reference-density spacing polish only. */ @media (max-width: 767px) { body[data-page-key="courses"] .filter-stack { gap: 10px; margin-top: 10px; } body[data-page-key="courses"] .filter-stack > fieldset { padding: 12px; } body[data-page-key="courses"] .filter-section-header { margin-bottom: 6px; } body[data-page-key="courses"] .filter-row { gap: 6px; } body[data-page-key="courses"] .filter-row button { padding-left: 11px; padding-right: 11px; } body[data-page-key="courses"] .result-status-card { min-height: 32px; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; } body[data-page-key="courses"] .discovery-feature-card { margin-top: 10px; padding-top: 10px; padding-bottom: 10px; } body[data-page-key="courses"] .discovery-feature-card__item { gap: 3px; padding-left: 3px; padding-right: 3px; } body[data-page-key="courses"] .discovery-feature-card__item > .ui-icon { width: 24px; min-width: 24px; height: 24px; flex-basis: 24px; } body[data-page-key="courses"] .discovery-feature-card__item p { margin-top: 0; } } @media (max-width: 390px) { body[data-page-key="courses"] .filter-stack > fieldset { padding: 11px; } body[data-page-key="courses"] .filter-row button { padding-left: 10px; padding-right: 10px; } body[data-page-key="courses"] .discovery-feature-card { padding-top: 8px; padding-bottom: 8px; } body[data-page-key="courses"] .discovery-feature-card__item > .ui-icon { width: 23px; min-width: 23px; height: 23px; flex-basis: 23px; } } /* V266 — Courses mobile compact-density search/filter polish only. */ @media (max-width: 767px) { body[data-page-key="courses"] .filter-stack { gap: 10px; margin-top: 10px; } body[data-page-key="courses"] .filter-stack > fieldset { padding: 10px; border-radius: 14px; } body[data-page-key="courses"] .filter-section-header { margin-bottom: 4px; } body[data-page-key="courses"] .filter-row { gap: 6px; padding-bottom: 2px; } body[data-page-key="courses"] .filter-row button { padding-left: 9px; padding-right: 9px; white-space: nowrap; overflow-wrap: normal; word-break: normal; } body[data-page-key="courses"] .result-status-card { margin-top: 10px; padding-top: 3px; padding-bottom: 3px; border-radius: 11px; } } @media (max-width: 390px) { body[data-page-key="courses"] .filter-stack > fieldset { padding: 9px; } body[data-page-key="courses"] .filter-row button { padding-left: 8px; padding-right: 8px; } } /* V275 — Courses mobile search-title vertical-density refinement and final consolidation lock. */ @media (max-width: 767px) { body[data-page-key="courses"] .course-search { padding: 10px; border-radius: 14px; } body[data-page-key="courses"] .course-search > label { display: block; margin-bottom: 4px; padding: 0; } body[data-page-key="courses"] .course-search__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 100px; align-items: center; gap: 5px; width: 100%; min-width: 0; } body[data-page-key="courses"] .course-search__row > .course-search__icon { display: block; position: absolute; top: 50%; left: 14px; width: 18px; min-width: 18px; height: 18px; transform: translateY(-50%); z-index: 1; pointer-events: auto; } body[data-page-key="courses"] .course-search__row > input { grid-column: 1; box-sizing: border-box; width: 100%; min-width: 0; height: 42px; min-height: 42px; max-height: 42px; padding: 0 7px 0 40px; border-radius: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-page-key="courses"] .course-search__row > button { grid-column: 2; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 100px; min-width: 100px; max-width: 100px; height: 40px; min-height: 40px; max-height: 40px; padding: 0 6px; border-radius: 12px; white-space: nowrap; overflow: hidden; text-overflow: clip; flex-shrink: 0; } body[data-page-key="courses"] .course-search__row > button > .ui-icon { display: none; } } /* V280 — Courses mobile discovery section-header left-alignment only. */ @media (max-width: 767px) { body[data-page-key="courses"] .courses-discovery { margin-top: 0; padding-top: 20px; background: transparent; overflow: visible; } body[data-page-key="courses"] .courses-discovery .discovery-hero { min-height: 0; margin: 0 0 20px; padding: 0; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; isolation: auto; text-align: left; } body[data-page-key="courses"] .discovery-hero::after { content: none; display: none; } body[data-page-key="courses"] .discovery-hero__copy { display: block; position: relative; width: 100%; max-width: none; margin-inline: 0; z-index: auto; text-align: left; } body[data-page-key="courses"] .discovery-hero .eyebrow { margin: 0 0 8px; text-align: left; } body[data-page-key="courses"] .discovery-hero h2 { max-width: 100%; margin: 0; text-align: left; } body[data-page-key="courses"] .discovery-hero__copy > p:last-child { max-width: 620px; margin: 12px 0 0; text-align: left; } body[data-page-key="courses"] .discovery-hero__visual { display: none; } } /* V282 — Courses mobile iPhone-safe category/level horizontal swipe repair. */ @media (max-width: 767px) { body[data-page-key="courses"] .filter-stack > fieldset:has( .filter-row:is([data-filter-group="category"], [data-filter-group="level"]) ) { min-width: 0; } body[data-page-key="courses"] .filter-row:is( [data-filter-group="category"], [data-filter-group="level"] ) { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 2px 24px; padding-inline-end: 24px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body[data-page-key="courses"] .filter-row:is( [data-filter-group="category"], [data-filter-group="level"] )::-webkit-scrollbar { display: none; } body[data-page-key="courses"] .filter-row:is( [data-filter-group="category"], [data-filter-group="level"] ) > button { flex: 0 0 auto; min-width: max-content; scroll-snap-align: start; } } /* V284 — Courses mobile metadata runtime cascade repair only. */ @media (max-width: 767px) { body[data-page-key="courses"] :is( #free-courses .course-card__meta, #premium-courses .course-card__meta, .related-courses .course-card__meta, .related-course-card .course-card__meta ) { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-color: transparent !important; box-shadow: none !important; outline: 0 !important; filter: none !important; } body[data-page-key="courses"] :is( #free-courses .course-card__meta, #premium-courses .course-card__meta, .related-courses .course-card__meta, .related-course-card .course-card__meta )::before, body[data-page-key="courses"] :is( #free-courses .course-card__meta, #premium-courses .course-card__meta, .related-courses .course-card__meta, .related-course-card .course-card__meta )::after { content: none !important; display: none !important; background: none !important; border: 0 !important; box-shadow: none !important; } body[data-page-key="courses"] :is( #free-courses .course-card__meta, #premium-courses .course-card__meta, .related-courses .course-card__meta, .related-course-card .course-card__meta ) > span { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; } } /* V285 — Course detail video availability contract (Mobile only) */ @media (max-width: 767px) { body[data-page-key="courses"] .course-detail__video-actions { align-items: stretch; } body[data-page-key="courses"] [data-start-video][disabled], body[data-page-key="courses"] [data-start-video][aria-disabled="true"] { cursor: not-allowed; opacity: .58; } body[data-page-key="courses"] .course-detail__video-status { margin: 10px 0 0; color: #8a919c; font-size: 13px; line-height: 1.5; } } /* V288 — Accessible course-card play controls and truthful video-source feedback. */ body[data-page-key="courses"] .course-card__play-overlay, body[data-page-key="courses"] .featured-card__play-overlay { appearance: none; -webkit-appearance: none; border: 0; padding: 0; font: inherit; cursor: pointer; } body[data-page-key="courses"] .course-card__play-overlay:focus-visible, body[data-page-key="courses"] .featured-card__play-overlay:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } body[data-page-key="courses"] .course-card__play-overlay.is-feedback, body[data-page-key="courses"] .featured-card__play-overlay.is-feedback { transform: translate(-50%, -50%) scale(.92); } body[data-page-key="courses"] .course-card__play-overlay[data-video-state="no-source"], body[data-page-key="courses"] .course-card__play-overlay[data-video-state="premium-locked"], body[data-page-key="courses"] .featured-card__play-overlay[data-video-state="no-source"], body[data-page-key="courses"] .featured-card__play-overlay[data-video-state="premium-locked"] { cursor: not-allowed; } body[data-page-key="courses"] .course-video-action-status { position: fixed; z-index: 1200; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); width: min(calc(100% - 32px), 430px); margin: 0; padding: 12px 14px; transform: translateX(-50%); border: 1px solid rgba(255, 212, 0, .42); border-radius: 12px; background: #1c1c1e; box-shadow: 0 12px 34px rgba(0, 0, 0, .32); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.45; text-align: center; } @media (min-width: 768px) { body[data-page-key="courses"] .course-video-action-status { bottom: 24px; } } /* V292 — Course Detail play button: shared play interaction, all breakpoints */ body[data-page-key="courses"] .course-detail__media { position: relative; overflow: hidden; background: var(--ananfx-page-surface-secondary); } body[data-page-key="courses"] .course-detail__media > img { display: block; width: 100%; height: auto; background: var(--ananfx-page-surface-secondary); } body[data-page-key="courses"] .course-detail__play-overlay { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; pointer-events: auto; appearance: none; -webkit-appearance: none; touch-action: manipulation; } body[data-page-key="courses"] .course-detail__play-icon { width: 58px; height: 58px; border-radius: 50%; background: rgba(11, 11, 12, .82); border: 2px solid var(--ananfx-page-gold-primary); box-shadow: 0 10px 28px rgba(0, 0, 0, .38); position: relative; } body[data-page-key="courses"] .course-detail__play-icon::before { content: ""; position: absolute; left: 23px; top: 17px; width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 17px solid var(--ananfx-page-gold-primary); } body[data-page-key="courses"] .course-detail__play-overlay:focus-visible { outline: 3px solid var(--ananfx-page-gold-bright); outline-offset: -4px; } body[data-page-key="courses"] .course-detail__play-overlay:hover .course-detail__play-icon, body[data-page-key="courses"] .course-detail__play-overlay:focus-visible .course-detail__play-icon { transform: scale(1.06); }