/* ============================================================ COURSE SIDE CATALOGUE SELF-CONTAINED STYLESHEET ============================================================ */ .course-side-catalogue{ --course-navy:#071b4b; --course-purple:#6a37e7; --course-green:#159c69; --course-ink:#10182f; --course-muted:#61708e; --course-line:#dbe1ef; --course-lav:#e9e1ff; --course-greenfill:#d7f1e5; --course-shadow: 0 12px 30px rgba(12,27,75,.10); color:var(--course-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ============================================================ BOX SIZING ============================================================ */ .course-side-catalogue *, .course-side-catalogue *::before, .course-side-catalogue *::after{ box-sizing:border-box; } /* ============================================================ PAGE HEADER ============================================================ */ .course-side-catalogue .pagehead{ padding:30px 0 12px; } .course-side-catalogue .pagehead h1{ margin:0; color:var(--course-ink); font-size:34px; font-weight:750; line-height:1.2; } .course-side-catalogue .pagehead p{ max-width:760px; margin:8px 0 0; color:var(--course-muted); line-height:1.6; } /* ============================================================ PAGE BADGE ============================================================ */ .course-side-catalogue .badge{ display:inline-flex; align-items:center; justify-content:center; width:fit-content; border-radius:999px; padding:6px 10px; background:var(--course-lav); color:#4f2cc5; font-size:12px; font-weight:800; line-height:1; } /* ============================================================ SEARCH / FILTER ROW ============================================================ */ .course-side-catalogue .searchrow{ display:grid; grid-template-columns: 1.6fr repeat( 4, minmax(130px,.45fr) ); gap:10px; margin:18px 0; } .course-side-catalogue .searchrow input, .course-side-catalogue .searchrow select{ width:100%; min-height:46px; border:1px solid var(--course-line); border-radius:12px; padding:12px 14px; background:#ffffff; color:var(--course-ink); font-family:inherit; font-size:16px; line-height:1.4; outline:none; appearance:none; -webkit-appearance:none; } .course-side-catalogue .searchrow input::placeholder{ color:#7b879f; opacity:1; } .course-side-catalogue .searchrow input:focus, .course-side-catalogue .searchrow select:focus{ border-color:var(--course-purple); outline:3px solid rgba(106,55,231,.12); outline-offset:0; } /* ============================================================ SELECT ARROW ============================================================ */ .course-side-catalogue .searchrow select{ padding-right:42px; background-color:#ffffff; background-image: linear-gradient( 45deg, transparent 50%, #61708e 50% ), linear-gradient( 135deg, #61708e 50%, transparent 50% ); background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px; background-size: 6px 6px, 6px 6px; background-repeat:no-repeat; } /* ============================================================ ROW / PATHWAY BUTTON ============================================================ */ .course-side-catalogue .row{ display:flex; align-items:center; gap:10px; } .course-side-catalogue .space{ justify-content:space-between; } .course-side-catalogue .btn{ display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--course-line); border-radius:11px; padding:11px 14px; background:#ffffff; color:var(--course-ink); font-family:inherit; font-weight:700; line-height:1.2; text-decoration:none; cursor:pointer; } .course-side-catalogue .btn.ghost{ background:#ffffff; } .course-side-catalogue .btn.small{ padding:8px 11px; font-size:13px; } .course-side-catalogue .btn:hover{ border-color:#c8d0e2; color:var(--course-ink); text-decoration:none; } /* ============================================================ SECTION ============================================================ */ .course-side-catalogue .section{ padding:26px 0; } /* ============================================================ COURSE GRID ============================================================ */ .course-side-catalogue .grid{ display:grid; grid-template-columns: repeat( 3, minmax(0,1fr) ); gap:18px; width:100%; } /* ============================================================ COURSE CARD ============================================================ */ .course-side-catalogue .course-card{ position:relative; display:flex; flex-direction:column; width:100%; min-width:0; background:#ffffff; border:1px solid var(--course-line); border-radius:16px; overflow:hidden; isolation:isolate; box-shadow: 0 6px 18px rgba(18,30,67,.06); transition: transform .2s ease, box-shadow .2s ease; } .course-side-catalogue .course-card:hover{ transform:translateY(-2px); box-shadow:var(--course-shadow); } /* ============================================================ FULL CARD LINK ============================================================ */ /* * New card structure: * *
* * * *
* * * Enrolled * *
* *
* ... *
* *
* View * Enroll *
* *
* * * The full link is an empty absolute overlay. * * It sits above the visual card content but below * the independent action buttons. */ .course-side-catalogue .course-card .course-card__full-link{ position:absolute; inset:0; display:block; width:100%; height:100%; z-index:10; background:transparent; color:transparent; text-decoration:none; cursor:pointer; pointer-events:auto; } .course-side-catalogue .course-card .course-card__full-link:visited, .course-side-catalogue .course-card .course-card__full-link:hover, .course-side-catalogue .course-card .course-card__full-link:active{ color:transparent; text-decoration:none; } /* ============================================================ COURSE MEDIA ============================================================ */ /* * IMPORTANT: * * The new JavaScript places the cover and enrolled badge * inside .course-card__media. * * The media wrapper owns the fixed 16:10 ratio. * * This prevents the image's intrinsic dimensions from * making the card excessively tall. */ .course-side-catalogue .course-card .course-card__media{ position:relative; z-index:1; display:block; width:100%; height:auto; aspect-ratio:16 / 10; flex:0 0 auto; overflow:hidden; margin:0; padding:0; background: linear-gradient( 135deg, #e9e1ff, #dce7ff ); } /* ============================================================ COURSE COVER ============================================================ */ .course-side-catalogue .course-card .course-card__media .course-card__cover{ position:relative; z-index:1; display:block; width:100%; height:100%; aspect-ratio:16 / 10; object-fit:contain; object-position:center; margin:0; padding:0; border:0; flex:0 0 auto; pointer-events:none; } /* ============================================================ COURSE COVER PLACEHOLDER ============================================================ */ .course-side-catalogue .course-card .course-card__media .course-card-cover-placeholder{ position:relative; z-index:1; display:block; width:100%; height:100%; aspect-ratio:16 / 10; margin:0; padding:0; border:0; flex:0 0 auto; background: linear-gradient( 135deg, #e9e1ff, #dce7ff ); pointer-events:none; } /* ============================================================ ENROLLED BADGE ============================================================ */ /* * The badge is now generated INSIDE .course-card__media. * * Therefore it is positioned relative to the media area, * not the entire course card. */ .course-side-catalogue .course-card .course-card__media .course-card__enrolled-badge{ position:absolute; top:12px; right:12px; left:auto; z-index:5; display:inline-flex; align-items:center; justify-content:center; width:fit-content; max-width:max-content; min-height:30px; padding:7px 13px; background:#198754; color:#ffffff; border-radius:999px; font-family:inherit; font-size:12px; font-weight:700; line-height:1; white-space:nowrap; pointer-events:none; box-shadow: 0 2px 6px rgba(0,0,0,.20); } .course-side-catalogue .course-card .course-card__media .course-card__enrolled-badge::before{ content:"✓"; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:16px; height:16px; margin-right:6px; border-radius:50%; background: rgba(255,255,255,.20); font-size:10px; font-weight:800; line-height:1; } /* ============================================================ CARD BODY ============================================================ */ /* * .cardbody contains ONLY the course information. * * The action area is now outside this element. */ .course-side-catalogue .course-card > .cardbody{ position:relative; z-index:1; display:flex; flex-direction:column; flex:1 1 auto; min-width:0; padding:16px; } .course-side-catalogue .course-card > .cardbody > *{ pointer-events:none; } /* ============================================================ EYEBROW / PRODUCT TYPE ============================================================ */ .course-side-catalogue .course-card .eyebrow{ margin:0; color:var(--course-purple); font-size:11px; font-weight:850; line-height:1.3; text-transform:uppercase; letter-spacing:.06em; } /* ============================================================ COURSE TITLE ============================================================ */ .course-side-catalogue .course-card h3{ margin:6px 0 10px; color:var(--course-ink); font-size:18px; font-weight:750; line-height:1.25; } /* ============================================================ COURSE SUBTITLE ============================================================ */ .course-side-catalogue .course-card .course-subtitle{ margin:0 0 12px; color:var(--course-muted); font-size:14px; line-height:1.5; } /* ============================================================ COURSE META ============================================================ */ .course-side-catalogue .course-card .meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--course-muted); font-size:12px; line-height:1.4; } .course-side-catalogue .course-card .meta span{ display:inline-flex; align-items:center; } /* ============================================================ PRICE LINE ============================================================ */ .course-side-catalogue .course-card .price-line{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:15px; } .course-side-catalogue .course-card .price{ color:var(--course-ink); font-size:20px; font-weight:850; line-height:1.2; } .course-side-catalogue .course-card .member{ margin-top:3px; color:var(--course-green); font-size:12px; font-weight:750; line-height:1.3; } /* ============================================================ COURSE ID BADGE ------------------------------------------------------------ This is the .badge generated inside .price-line. ============================================================ */ .course-side-catalogue .course-card .price-line .badge{ flex:0 0 auto; padding:5px 8px; border-radius:999px; background:var(--course-lav); color:#4f2cc5; font-size:11px; font-weight:800; line-height:1; } /* ============================================================ CARD ACTIONS ============================================================ */ /* * IMPORTANT: * * .course-card__actions is a DIRECT CHILD of .course-card. * * It is NOT inside .cardbody. * * This keeps the View and Enroll links completely separate * from the full-card overlay link. */ .course-side-catalogue .course-card > .course-card__actions{ position:relative; z-index:20; display:flex; align-items:stretch; width:100%; gap:12px; margin:0; padding: 0 16px 16px; box-sizing:border-box; pointer-events:auto; } /* ============================================================ CARD ACTION BUTTON ============================================================ */ .course-side-catalogue .course-card .course-card__button{ position:relative; z-index:21; display:flex; align-items:center; justify-content:center; flex:1 1 0; width:50%; min-width:0; height:42px; padding:0 14px; border:0; border-radius:7px; font-family:inherit; font-size:16px; font-weight:600; line-height:1; text-align:center; text-decoration:none; white-space:nowrap; cursor:pointer; pointer-events:auto; transition: background-color .2s ease, transform .2s ease; } .course-side-catalogue .course-card .course-card__button:hover{ text-decoration:none; } /* ============================================================ VIEW BUTTON ============================================================ */ .course-side-catalogue .course-card .course-card__button--view{ background:#c84208; color:#ffffff; } .course-side-catalogue .course-card .course-card__button--view:hover{ background:#ad3707; color:#ffffff; } /* ============================================================ ENROLL / CONTINUE BUTTON ============================================================ */ .course-side-catalogue .course-card .course-card__button--enroll{ background:#005844; color:#ffffff; } .course-side-catalogue .course-card .course-card__button--enroll:hover{ background:#004936; color:#ffffff; } /* ============================================================ BUTTON ACTIVE ============================================================ */ .course-side-catalogue .course-card .course-card__button:active{ transform:translateY(1px); } /* ============================================================ BUTTON FOCUS ============================================================ */ .course-side-catalogue .course-card .course-card__button:focus-visible{ outline:2px solid #111111; outline-offset:2px; } /* ============================================================ TABLET ============================================================ */ @media(max-width:1050px){ .course-side-catalogue .grid{ grid-template-columns: repeat( 2, minmax(0,1fr) ); } .course-side-catalogue .searchrow{ grid-template-columns: 1fr 1fr 1fr; } } /* ============================================================ MOBILE ============================================================ */ @media(max-width:720px){ .course-side-catalogue .pagehead{ padding-top:24px; } .course-side-catalogue .pagehead h1{ font-size:30px; } .course-side-catalogue .grid{ grid-template-columns:1fr; } .course-side-catalogue .searchrow{ grid-template-columns:1fr; } /* * Media keeps the same fixed ratio on mobile. */ .course-side-catalogue .course-card .course-card__media{ aspect-ratio:16 / 10; } .course-side-catalogue .course-card .course-card__actions{ gap:10px; margin:0; padding: 0 14px 14px; } .course-side-catalogue .course-card .course-card__button{ height:42px; padding:0 12px; font-size:16px; } } /* ============================================================ SMALL MOBILE ============================================================ */ @media(max-width:576px){ .course-side-catalogue .course-card .course-card__media{ aspect-ratio:16 / 10; } .course-side-catalogue .course-card .course-card__enrolled-badge{ top:8px; right:8px; left:auto; min-height:27px; padding:6px 10px; font-size:11px; } .course-side-catalogue .course-card .course-card__enrolled-badge::before{ width:14px; height:14px; margin-right:5px; font-size:9px; } .course-side-catalogue .course-card > .cardbody{ padding:14px; } .course-side-catalogue .course-card .course-card__actions{ gap:8px; margin:0; padding: 0 14px 14px; } .course-side-catalogue .course-card .course-card__button{ height:40px; padding:0 10px; border-radius:6px; font-size:16px; } .course-side-catalogue .course-card h3{ font-size:17px; } } /* ============================================================ VERY SMALL MOBILE ============================================================ */ @media(max-width:320px){ .course-side-catalogue .course-card .course-card__actions{ gap:6px; padding: 0 12px 12px; } .course-side-catalogue .course-card .course-card__button{ height:38px; padding:0 8px; font-size:16px; } .course-side-catalogue .course-card .course-card__enrolled-badge{ top:7px; right:7px; padding:5px 8px; font-size:10px; } .course-side-catalogue .course-card .course-card__enrolled-badge::before{ width:13px; height:13px; margin-right:4px; font-size:8px; } }