/* ============================================================ Scale skin for the Courses pages (listing + detail). Pure CSS (no Tailwind) so it never collides with bootstrap. Styles the Scale nav/footer (.sl-*) + recolors the course UI (cr-* / am-*). Loaded last so it wins over module CSS. Palette: deep #075E54 / teal #128C7E / green #25D366, paper #FBFAF6, ink #0B1F1C, hairline #E5DFD0, amber #E5A04E. ============================================================ */ .scale-shell { background: #FBFAF6 !important; font-family: 'Inter', sans-serif; } .scale-shell .am-main { background: #FBFAF6 !important; padding-top: 0; } .scale-shell .cr-search-courses, .scale-shell .cr-courses-container { background: transparent !important; } /* ===================== SCALE NAV ===================== */ .sl-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #E5DFD0; } .sl-nav-in { max-width: 1360px; margin: 0 auto; height: 68px; display: flex; align-items: center; gap: 28px; padding: 0 20px; } @media (min-width: 640px) { .sl-nav-in { padding: 0 28px; } } .sl-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .sl-mark { width: 36px; height: 36px; border-radius: 11px; background: #075E54; display: inline-flex; align-items: center; justify-content: center; flex: none; } .sl-mark svg { width: 22px; height: 22px; } .sl-word { display: inline-flex; flex-wrap: wrap; align-items: baseline; line-height: 1; } .sl-word .sl-w1, .sl-word .sl-w2 { font-size: 22px; letter-spacing: -.01em; } .sl-w1 { font-weight: 400; color: #0B1F1C; } .sl-w2 { font-weight: 800; color: #075E54; } .sl-tag { flex-basis: 100%; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; color: #6B807C; margin-top: 4px; } .sl-links { display: flex; align-items: center; gap: 28px; margin: 0 auto; } .sl-links a { font-size: 13.5px; color: #1F4540; text-decoration: none; position: relative; } .sl-links a:hover { color: #075E54; } .sl-links a.is-active { color: #075E54; font-weight: 600; } .sl-links a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -23px; height: 2px; background: #075E54; } .sl-cta { display: flex; align-items: center; gap: 8px; } .sl-signin { font-size: 13.5px; color: #1F4540; text-decoration: none; padding: 8px 12px; } .sl-signin:hover { color: #075E54; } .sl-btn { display: inline-flex; align-items: center; gap: 6px; background: #075E54; color: #FBFAF6; text-decoration: none; font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 999px; border: 0; } .sl-btn:hover { background: #128C7E; color: #FBFAF6; } .sl-burger { display: none; background: none; border: 0; color: #1F4540; width: 40px; height: 40px; cursor: pointer; } .sl-burger svg { width: 24px; height: 24px; } .sl-mobile { display: none; } @media (max-width: 1024px) { .sl-links, .sl-cta { display: none; } .sl-burger { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; } .sl-mobile { flex-direction: column; gap: 6px; padding: 14px 24px 20px; border-top: 1px solid #E5DFD0; background: #fff; } .sl-mobile.open { display: flex; } .sl-mobile a { color: #0B1F1C; text-decoration: none; padding: 8px 0; font-size: 16px; } .sl-mobile .sl-btn { justify-content: center; padding: 12px; margin-top: 6px; } .sl-mobile .sl-signin { padding: 8px 0; } } /* ===================== SCALE FOOTER ===================== */ .sl-foot { background: #0B1F1C; color: #FBFAF6; } .sl-foot-in { max-width: 1360px; margin: 0 auto; padding: 56px 28px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; } .sl-foot-logo { display: flex; align-items: center; gap: 10px; } .sl-foot-logo .sl-mark { background: #25D366; } .sl-foot-word .sl-w1 { color: #FBFAF6; font-size: 24px; } .sl-foot-word .sl-w2 { color: #25D366; font-size: 24px; } .sl-foot-brand p { color: rgba(251,250,246,.7); font-size: 13px; line-height: 1.6; margin-top: 18px; max-width: 320px; } .sl-foot-col h4 { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: rgba(251,250,246,.5); margin: 0 0 16px; } .sl-foot-col a { display: block; color: rgba(251,250,246,.85); text-decoration: none; font-size: 13px; padding: 5px 0; } .sl-foot-col a:hover { color: #25D366; } .sl-foot-bottom { border-top: 1px solid rgba(251,250,246,.15); text-align: center; padding: 18px; font-size: 11px; color: rgba(251,250,246,.55); font-family: 'JetBrains Mono', monospace; } .sl-foot-bottom span { opacity: .4; margin: 0 6px; } .sl-foot-bottom a { color: inherit; text-decoration: none; } .sl-foot-bottom a:hover { color: #25D366; } @media (max-width: 768px) { .sl-foot-in { grid-template-columns: 1fr 1fr; } .sl-foot-brand { grid-column: 1 / -1; } } /* ===================== COURSE LISTING ===================== */ .scale-shell .am-breadcrumb a { color: #6B807C; } .scale-shell .am-breadcrumb a:hover { color: #075E54; } .scale-shell .am-breadcrumb .active span { color: #0B1F1C; } .scale-shell .cr-filters-sidebar-wapper { background: #FFFFFF; border: 1px solid #E5DFD0; border-radius: 16px; } .scale-shell .cr-filter-title { color: #0B1F1C; font-weight: 600; } .scale-shell .cr-clear-filters-text, .scale-shell .cr-clear-button { color: #075E54 !important; } .scale-shell .am-searchinput input, .scale-shell .cr-filter-sidebar .form-control { border: 1px solid #E5DFD0 !important; border-radius: 10px !important; background: #FBFAF6 !important; color: #0B1F1C !important; } .scale-shell .am-searchinput input:focus, .scale-shell .cr-filter-sidebar .form-control:focus { border-color: #075E54 !important; box-shadow: none !important; } .scale-shell .accordion-item { background: transparent !important; border: 0 !important; border-top: 1px solid #EFEBE0 !important; } .scale-shell .accordion-button { background: transparent !important; color: #0B1F1C !important; font-weight: 500; box-shadow: none !important; } .scale-shell .accordion-button:not(.collapsed) { color: #075E54 !important; } .scale-shell .cr-option-label, .scale-shell .cr-level-name, .scale-shell .am-radio label, .scale-shell .cr-rating-value { color: #1F4540; } .scale-shell .cr-option-count, .scale-shell .cr-level-count, .scale-shell .cr-rating-count { color: #9AA8A4; } .scale-shell .cr-checkbox, .scale-shell .cr-checkbox-input, .scale-shell input[type="checkbox"], .scale-shell input[type="radio"] { accent-color: #075E54; } .scale-shell .cr-stars i, .scale-shell .am-icon-star-01, .scale-shell .am-icon-star-filled { color: #E5A04E; } .scale-shell .noUi-connect { background: #075E54 !important; } .scale-shell .noUi-handle { border: 1px solid #075E54 !important; border-radius: 50% !important; box-shadow: 0 2px 6px -2px rgba(7,94,84,.4) !important; } .scale-shell .noUi-handle:before, .scale-shell .noUi-handle:after { display: none; } .scale-shell .cr-price-input input { border: 1px solid #E5DFD0 !important; border-radius: 8px !important; } .scale-shell .cr-results-count { color: #0B1F1C; font-weight: 600; } .scale-shell .cr-results-listing, .scale-shell .cr-results-text { color: #6B807C; } .scale-shell .cr-option-select { color: #6B807C; } .scale-shell .select2-container--default .select2-selection--single { border: 1px solid #E5DFD0 !important; border-radius: 10px !important; height: 38px !important; background: #FFFFFF; } .scale-shell .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px !important; color: #0B1F1C; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted { background: #075E54 !important; color: #FBFAF6 !important; } .select2-container--default .select2-results__option { color: #1F4540; } .select2-dropdown { border: 1px solid #E5DFD0 !important; border-radius: 10px !important; } .scale-shell .cr-card { background: #FFFFFF; border: 1px solid #E5DFD0; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 14px -10px rgba(7,94,84,.25); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .scale-shell .cr-card:hover { transform: translateY(-4px); border-color: #075E54; box-shadow: 0 30px 60px -30px rgba(7,94,84,.35); } .scale-shell .cr-course-title a { color: #0B1F1C !important; font-weight: 600; } .scale-shell .cr-course-title a:hover { color: #075E54 !important; } .scale-shell .cr-instructor-name { color: #3A5A55 !important; } .scale-shell .cr-category-link { color: #075E54 !important; background: #E7FFDB; border-radius: 999px; padding: 2px 10px; font-size: 11px; } .scale-shell .cr-rating-score { color: #0B1F1C; font-weight: 600; } .scale-shell .cr-review-count, .scale-shell .cr-info-item span, .scale-shell .cr-lesson-count span { color: #6B807C; } .scale-shell .cr-info-item i, .scale-shell .cr-lesson-count i, .scale-shell .cr-duration-info i { color: #128C7E; } .scale-shell .cr-price-amount { color: #075E54 !important; font-weight: 700; } .scale-shell .cr-original-price { color: #9AA8A4 !important; } .scale-shell figcaption span { background: #E87A5D; color: #fff; border-radius: 999px; } .scale-shell .cr-bookmark-button { border: 1px solid #E5DFD0; border-radius: 999px; background: #fff; } .scale-shell .am-btn, .scale-shell .am-white-btn, .scale-shell .cr-enroll-btn, .scale-shell .at-btn { background: #075E54 !important; color: #FBFAF6 !important; border: 0 !important; border-radius: 999px !important; } .scale-shell .am-btn:hover, .scale-shell .cr-enroll-btn:hover, .scale-shell .at-btn:hover { background: #128C7E !important; } .scale-shell .pagination .page-link, .scale-shell .am-pagination a, .scale-shell .am-pagination span { color: #1F4540; border-radius: 8px !important; border-color: #E5DFD0 !important; } .scale-shell .pagination .page-item.active .page-link, .scale-shell .am-pagination .active span { background: #075E54 !important; border-color: #075E54 !important; color: #FBFAF6 !important; } .scale-shell .cr-courses-emptycase h6 { color: #3A5A55; } /* ===================== COURSE DETAIL ===================== */ .scale-shell .cr-detail-title, .scale-shell .am-course-detail h1, .scale-shell .cr-course-detail h1 { color: #0B1F1C; font-family: 'Instrument Serif', serif; letter-spacing: -.01em; } .scale-shell .nav-tabs .nav-link, .scale-shell .am-tab-link { color: #6B807C !important; border: 0 !important; background: transparent !important; } .scale-shell .nav-tabs .nav-link.active, .scale-shell .am-tab-link.active { color: #075E54 !important; border-bottom: 2px solid #075E54 !important; } .scale-shell .cr-sidebar-card, .scale-shell .am-course-sidebar, .scale-shell .cr-detail-sidebar { background: #FFFFFF; border: 1px solid #E5DFD0; border-radius: 16px; } .scale-shell .cr-detail-price, .scale-shell .am-course-price { color: #075E54 !important; font-weight: 700; } /* ===================== FIND TUTORS ===================== */ .scale-shell .am-searchhead_title h2 { font-family: 'Instrument Serif', serif; color: #0B1F1C; letter-spacing: -.01em; } .scale-shell .am-searchhead_title p { color: #3A5A55; } .scale-shell .am-searchfilter { background: #FFFFFF; border: 1px solid #E5DFD0; border-radius: 16px; } .scale-shell .am-searchfilter_title, .scale-shell .am-select_title { color: #6B807C; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; } .scale-shell .am-session-tab { color: #3A5A55; border: 1px solid #E5DFD0; background: #FFFFFF; border-radius: 999px; } .scale-shell .am-session-tab.active { background: #075E54; color: #FBFAF6; border-color: #075E54; } .scale-shell .am-clearfilterbtn a, .scale-shell #clear_filters { color: #075E54 !important; } .scale-shell .am-tutorsearch_card { background: #FFFFFF; border: 1px solid #E5DFD0; border-radius: 16px; box-shadow: 0 4px 14px -10px rgba(7,94,84,.25); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .scale-shell .am-tutorsearch_card:hover { transform: translateY(-4px); border-color: #075E54; box-shadow: 0 30px 60px -30px rgba(7,94,84,.35); } .scale-shell .am-tutorsearch_user_name h3, .scale-shell .am-tutorsearch_user_name a, .scale-shell .am-tutorsearch_user_name strong { color: #0B1F1C !important; } .scale-shell .am-tutorsearch_fee strong { color: #075E54; } .scale-shell .am-tutorsearch_fee em { color: #6B807C; } .scale-shell .am-tutorsearch_info_icon i { color: #128C7E; } .scale-shell .am-tutorsearch_info .am-icon-star-01 { color: #E5A04E; } .scale-shell .am-besttutor { background: #FFFFFF; border: 1px solid #E5DFD0; border-radius: 16px; } /* am-white-btn = secondary/outline (overrides the solid rule above) */ .scale-shell .am-white-btn { background: transparent !important; color: #075E54 !important; border: 1px solid #075E54 !important; border-radius: 999px !important; } .scale-shell .am-white-btn:hover { background: #075E54 !important; color: #FBFAF6 !important; } /* select2 multi-select (subjects / languages) */ .scale-shell .select2-container--default .select2-selection--multiple { border: 1px solid #E5DFD0 !important; border-radius: 10px !important; } .scale-shell .select2-container--default .select2-selection--multiple .select2-selection__choice { background: #E7FFDB !important; border-color: #25D366 !important; color: #075E54 !important; border-radius: 6px; } /* ===================== COURSE DETAIL (real classes) ===================== */ .scale-shell .cr-course-details-area, .scale-shell .cr-contentbox { background: #FFFFFF; border: 1px solid #E5DFD0; border-radius: 16px; } .scale-shell .cr-title-box h1, .scale-shell .cr-course-details-area h1, .scale-shell .cr-overview-course h2 { font-family: 'Instrument Serif', serif; color: #0B1F1C; letter-spacing: -.01em; } .scale-shell .am-tabitem { color: #6B807C !important; border: 0 !important; background: transparent !important; } .scale-shell .am-tabitem.active { color: #075E54 !important; border-bottom: 2px solid #075E54 !important; } .scale-shell .cr-stat-item { background: #FBFAF6; border: 1px solid #E5DFD0; border-radius: 12px; } .scale-shell .cr-stat-icon-wrapper i, .scale-shell .cr-stat-icon-wrapper svg { color: #128C7E; } .scale-shell .cr-stat-value { color: #0B1F1C; } .scale-shell .cr-stat-label { color: #6B807C; } .scale-shell .cr-price-wrapper, .scale-shell .cr-price-section { background: #FFFFFF; border: 1px solid #E5DFD0; border-radius: 16px; } .scale-shell .cr-amount, .scale-shell .cr-price { color: #075E54 !important; font-weight: 700; } .scale-shell .cr-includes-item { border-bottom: 1px solid #EFEBE0; } .scale-shell .cr-includes-item i, .scale-shell .cr-includes-icon { color: #128C7E; } .scale-shell .cr-includes-label, .scale-shell .cr-includes-text, .scale-shell .cr-includes-value { color: #3A5A55; } .scale-shell .am-tutorreview-item { background: #FBFAF6 !important; border: 1px solid #E5DFD0 !important; border-radius: 10px !important; display: flex; align-items: center; gap: 10px; padding: 9px 12px; } .scale-shell .am-tutorreview-item > span, .scale-shell .am-tutorreview-item span strong { color: #0B1F1C; font-weight: 600; } .scale-shell .am-tutorreview-item em { color: #6B807C; font-style: normal; font-weight: 400; } .scale-shell .am-tutorreview-item_icon i, .scale-shell .am-tutorreview-item_icon svg { color: #128C7E; } .scale-shell .am-tutorreview-item_icon svg path { stroke: #128C7E; } .scale-shell .wa-tags-list ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; } .scale-shell .wa-tags-list li { list-style: none; } .scale-shell .wa-tags-list li span { background: #EFEBE0; color: #1F4540; border-radius: 6px; padding: 3px 9px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; } .scale-shell .wa-tags-list li span em { background: #DCF8C6; color: #075E54; font-style: normal; font-weight: 600; border-radius: 4px; padding: 1px 5px; font-size: 10px; } .scale-shell .wa-tags-list a { color: #075E54; font-weight: 500; } .scale-shell .cr-view-profile-btn, .scale-shell .cr-review-button { background: #075E54 !important; color: #FBFAF6 !important; border-radius: 999px !important; border: 0 !important; } .scale-shell .cr-faq-accordion .accordion-button { background: transparent !important; color: #0B1F1C !important; } .scale-shell .cr-stars i, .scale-shell .cr-review-star i, .scale-shell .cr-review-rating i { color: #E5A04E; } /* ===================== SPACING / PADDING FIXES ===================== */ /* Level / Language / Enrolments / Views stat tiles — icon was cramped against the border */ .scale-shell .cr-stat-item { padding: 14px 18px !important; display: flex; align-items: center; gap: 12px; } .scale-shell .cr-stat-icon-wrapper { margin: 0 !important; flex: none; display: inline-flex; } .scale-shell .cr-stat-content { display: flex; flex-direction: column; gap: 3px; min-width: 0; } /* find-tutors: breathing room between the session tabs and the filter bar, and inside it */ .scale-shell .am-searchfilter_tabs { margin-bottom: 20px; gap: 10px; } .scale-shell .am-searchfilter_tabslist { gap: 10px; } .scale-shell .am-searchfilter { padding: 22px !important; margin-bottom: 18px; gap: 18px; } .scale-shell .am-searchfilter_item { padding: 0 6px; } .scale-shell .am-session-tab { padding: 10px 22px; } /* a touch more room inside the course-includes + tutor rows */ .scale-shell .cr-includes-item { padding: 11px 4px !important; } /* ===================== READABILITY + OVERLAP HARDENING ===================== */ /* Price row: the struck original price sat only 5px from the final price and the duration could wrap into it. Give the row baseline alignment + breathing room so nothing crowds or overlaps. */ .scale-shell .cr-price-container { min-height: 46px; align-items: center; } .scale-shell .cr-price-info { gap: 10px; padding: 8px 14px; align-items: baseline; flex-wrap: wrap; } .scale-shell .cr-original-price { font-size: 13px; margin-right: 2px; } .scale-shell .cr-discounted-price .cr-price-amount, .scale-shell .cr-price-amount { font-size: 18px; line-height: 1.15; } .scale-shell .cr-duration-info { white-space: nowrap; padding: 8px 14px; } /* Title never crowds the category chip beneath it. */ .scale-shell .cr-course-title { margin-bottom: 8px; } .scale-shell .cr-course-title a { line-height: 1.34; } /* Contrast: several small meta labels/counts were too light on the paper bg (ink-400 #9AA8A4 ~2:1, ink-500 #6B807C ~3.5:1 — both fail AA for small text). Bump the readable-meta group to a darker green-ink that clears 4.5:1. */ .scale-shell .cr-review-count, .scale-shell .cr-info-item span, .scale-shell .cr-lesson-count span, .scale-shell .cr-results-listing, .scale-shell .cr-results-text, .scale-shell .cr-option-select, .scale-shell .cr-includes-label, .scale-shell .cr-includes-text, .scale-shell .cr-stat-label { color: #4C635E !important; } .scale-shell .cr-option-count, .scale-shell .cr-level-count, .scale-shell .cr-rating-count { color: #6B807C !important; } /* Sort / per-page selects: keep the selected value clear of the dropdown arrow. */ .scale-shell .select2-container--default .select2-selection--single .select2-selection__rendered { padding-right: 26px; } .scale-shell .select2-container--default .select2-selection--single .select2-selection__arrow { top: 8px; } /* ===================== SCALE HERO BACKDROP (gridlines + blob, matches /pricing) ===================== */ /* Decorative band behind the page header on courses / find-tutors / legal / tutor pages — consistent with the marketing pages' hero. */ .scale-shell { position: relative; } .scale-shell::before { content: ""; position: absolute; top: 68px; left: 0; right: 0; height: 360px; z-index: 0; pointer-events: none; background-image: linear-gradient(#E5DFD0 1px, transparent 1px), linear-gradient(90deg, #E5DFD0 1px, transparent 1px); background-size: 56px 56px; opacity: .3; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); } .scale-shell::after { content: ""; position: absolute; top: -60px; right: -60px; width: 460px; height: 460px; z-index: 0; pointer-events: none; border-radius: 50%; background: rgba(37,211,102,.13); filter: blur(80px); } .scale-shell .am-main, .scale-shell .sl-foot { position: relative; z-index: 1; } /* Results header + sort controls: align the label with the select. */ .scale-shell .cr-results-header, .scale-shell .cr-sortby-wrapper, .scale-shell .am-searchfilter_right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .scale-shell .am-select, .scale-shell .cr-option-select-wrapper { display: inline-flex; align-items: center; gap: 8px; } .scale-shell .am-select_title, .scale-shell .cr-sort-label { white-space: nowrap; color: #4C635E; font-size: 13px; margin: 0; } .scale-shell .cr-results-listing .select2-container, .scale-shell .cr-sortby-wrapper .select2-container { min-width: 150px; } /* ===================== LEGAL / PAGE-BUILDER PROSE (terms · privacy · refund) ===================== */ .scale-shell .page-terms-condition, .scale-shell .page-privacy-policy, .scale-shell .page-refund-policy { position: relative; z-index: 1; } .scale-shell .page-terms-condition .container, .scale-shell .page-privacy-policy .container, .scale-shell .page-refund-policy .container { max-width: 860px; } .scale-shell [class^="page-"] h1, .scale-shell [class^="page-"] h2 { font-family: 'Instrument Serif', serif; letter-spacing: -.01em; color: #0B1F1C; line-height: 1.12; } .scale-shell [class^="page-"] h2 { font-size: 26px; margin: 40px 0 14px; } .scale-shell [class^="page-"] h3 { font-size: 18px; font-weight: 700; color: #13312D; margin: 26px 0 10px; } .scale-shell [class^="page-"] p, .scale-shell [class^="page-"] li { color: #3A5A55; line-height: 1.75; font-size: 15.5px; } .scale-shell [class^="page-"] p { margin: 0 0 16px; } .scale-shell [class^="page-"] ul, .scale-shell [class^="page-"] ol { margin: 0 0 18px; padding-left: 22px; } .scale-shell [class^="page-"] li { margin: 0 0 8px; } .scale-shell [class^="page-"] a { color: #075E54; text-decoration: underline; text-underline-offset: 2px; } .scale-shell [class^="page-"] strong { color: #0B1F1C; } .scale-shell [class^="page-"] hr { border: 0; border-top: 1px solid #E5DFD0; margin: 32px 0; } /* ===================== BLOG (listing + detail) ===================== */ .scale-shell .am-page-title-wrap h1, .scale-shell .am-page-title-wrap h2, .scale-shell .am-blogs-main h1, .scale-shell .am-learning h1, .scale-shell .am-learning h2 { font-family: 'Instrument Serif', serif; color: #0B1F1C; letter-spacing: -.01em; } .scale-shell .am-blog-items, .scale-shell .am-blog-result, .scale-shell .am-blog-card, .scale-shell .am-blogitem, .scale-shell .am-blog-box, .scale-shell .bl-card { background: #FFFFFF; border: 1px solid #E5DFD0; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 14px -10px rgba(7,94,84,.25); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .scale-shell .am-blog-items:hover, .scale-shell .am-blog-result:hover, .scale-shell .am-blogitem:hover, .scale-shell .am-blog-box:hover, .scale-shell .bl-card:hover { transform: translateY(-4px); border-color: #075E54; box-shadow: 0 30px 60px -30px rgba(7,94,84,.35); } .scale-shell .am-blog-items h2 a, .scale-shell .am-blog-items h3 a, .scale-shell .am-blogitem h3 a, .scale-shell .am-blog-box h3 a, .scale-shell .am-blog-title a { color: #0B1F1C !important; font-weight: 600; } .scale-shell .am-blog-items h3 a:hover, .scale-shell .am-blogitem h3 a:hover, .scale-shell .am-blog-title a:hover { color: #075E54 !important; } .scale-shell .am-blog-category, .scale-shell .am-blog-tag, .scale-shell .am-blog-meta-cat { color: #075E54 !important; background: #E7FFDB; border-radius: 999px; padding: 2px 10px; font-size: 11px; display: inline-flex; } .scale-shell .am-blog-date, .scale-shell .am-blog-meta, .scale-shell .am-blog-author { color: #6B807C !important; } /* detail prose */ .scale-shell .am-blog-details, .scale-shell .am-blog-content, .scale-shell .am-blogdetail-content, .scale-shell .am-blog-desc { color: #3A5A55; line-height: 1.75; font-size: 15.5px; } .scale-shell .am-blog-details h1, .scale-shell .am-blogdetail h1, .scale-shell .am-blog-content h2, .scale-shell .am-blog-details h2, .scale-shell .am-blog-desc h2 { font-family: 'Instrument Serif', serif; color: #0B1F1C; letter-spacing: -.01em; } .scale-shell .am-blog-content a, .scale-shell .am-blog-details a, .scale-shell .am-blog-desc a { color: #075E54; text-decoration: underline; } .scale-shell .am-blog-content img, .scale-shell .am-blog-details img { border-radius: 14px; } /* ============================================================ DESIGN OVERHAUL — courses + find-tutors → post design language (refined hero, hairline cards, cleaner filter/sort, pill tabs) ============================================================ */ /* hero eyebrow pill */ .scale-shell .cr-hero-eyebrow, .scale-shell .cr-search-courses .cr-hero-eyebrow { display: inline-flex; align-items: center; margin-bottom: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #1F4540; background: #fff; border: 1px solid #E5DFD0; border-radius: 999px; padding: 5px 12px; } /* search head → hero */ .scale-shell .am-searchhead { padding-top: 44px !important; padding-bottom: 26px !important; } .scale-shell .cr-searchhead { padding-top: 30px !important; padding-bottom: 22px !important; } .scale-shell .cr-searchhead .am-searchhead_title { margin-top: 14px; } .scale-shell .am-searchhead_title h2 { font-family: 'Instrument Serif', serif !important; font-size: 48px !important; line-height: 1.02 !important; letter-spacing: -.02em !important; color: #0B1F1C !important; margin: 0; } .scale-shell .am-searchhead_title p { font-size: 15.5px !important; color: #3A5A55 !important; max-width: 640px; margin-top: 12px !important; } /* course + tutor + best-tutor cards → soft hairline, generous radius, lift */ .scale-shell .cr-card, .scale-shell .am-tutorsearch_card, .scale-shell .am-besttutor { border: 1px solid #EFEBE0 !important; border-radius: 20px !important; box-shadow: 0 1px 2px rgba(11,31,28,.04) !important; } .scale-shell .cr-card:hover, .scale-shell .am-tutorsearch_card:hover { border-color: #D4CCB6 !important; box-shadow: 0 30px 60px -32px rgba(7,94,84,.3) !important; transform: translateY(-5px); } .scale-shell .cr-course-title a, .scale-shell .am-tutorsearch_user_name a, .scale-shell .am-tutorsearch_user_name h3 { font-weight: 600; letter-spacing: -.005em; } /* filter sidebar / card → cleaner hairline + serif label */ .scale-shell .cr-filters-sidebar-wapper, .scale-shell .am-searchfilter { border: 1px solid #EFEBE0 !important; border-radius: 20px !important; box-shadow: 0 1px 2px rgba(11,31,28,.04) !important; } .scale-shell .cr-filter-title { font-family: 'Instrument Serif', serif !important; font-size: 21px !important; color: #0B1F1C !important; font-weight: 400 !important; } /* results count → serif */ .scale-shell .cr-results-count { font-family: 'Instrument Serif', serif !important; font-size: 23px !important; color: #0B1F1C !important; font-weight: 400 !important; } /* pagination → pill buttons */ .scale-shell .pagination .page-link, .scale-shell .am-pagination a, .scale-shell .am-pagination span { border-radius: 10px !important; border: 1px solid #E5DFD0 !important; color: #1F4540; min-width: 38px; text-align: center; } .scale-shell .pagination .page-item.active .page-link { background: #075E54 !important; border-color: #075E54 !important; color: #fff !important; } /* session tabs (find-tutors) → segmented pill group */ .scale-shell .am-searchfilter_tabslist { gap: 4px !important; background: #F5F3EC; padding: 5px !important; border-radius: 999px; display: inline-flex !important; list-style: none; } .scale-shell .am-searchfilter_tabslist li { list-style: none; } .scale-shell .am-session-tab { border: 0 !important; border-radius: 999px !important; padding: 8px 20px !important; color: #3A5A55 !important; background: transparent !important; transition: all .15s ease; } .scale-shell .am-session-tab.active { background: #075E54 !important; color: #fff !important; } /* ===================== COURSES FILTER SIDEBAR — "Narrow search" padding ===================== */ /* The white filter card had no inner padding, so the "Narrow search" title and the keyword field sat flush against its border. */ .scale-shell .cr-filters-sidebar-wapper { padding: 22px 20px; } .scale-shell .cr-filter-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .scale-shell .cr-filter-title { margin: 0; font-size: 16px; } .scale-shell .cr-filter-sidebar > .am-searchinput { margin-bottom: 8px; } /* ===================== FIND-TUTORS FILTER CONTROLS — padding + radius ===================== */ /* Subject group / Choose subject / Fee / Location selects + inputs had thin borders and cramped padding. Give them the Scale input shell (46px, r12, 16px pad). */ .scale-shell .am-searchfilter_item { margin-bottom: 6px; } .scale-shell .am-searchfilter_title, .scale-shell .am-select_title { display: block; margin-bottom: 7px; color: #4C635E; } .scale-shell .am-searchfilter .am-select, .scale-shell .am-searchfilter_item .am-select { display: block; width: 100%; } .scale-shell .am-searchfilter .form-control, .scale-shell .am-searchfilter_item .form-control, .scale-shell .am-searchfilter .am-select select, .scale-shell .am-searchfilter select.am-select2 { width: 100%; height: 46px; padding: 0 38px 0 16px; border: 1px solid #E5DFD0 !important; border-radius: 12px !important; background-color: #FFFFFF !important; color: #0B1F1C !important; font-size: 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23075E54' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 15px; } .scale-shell .am-searchfilter .form-control:focus, .scale-shell .am-searchfilter .am-select select:focus, .scale-shell .am-searchfilter select.am-select2:focus { border-color: #075E54 !important; box-shadow: none !important; } /* select2 rendered control → same shell as the native inputs */ .scale-shell .am-searchfilter .select2-container { width: 100% !important; } .scale-shell .am-searchfilter .select2-container--default .select2-selection--single { height: 46px !important; border: 1px solid #E5DFD0 !important; border-radius: 12px !important; background: #FFFFFF; } .scale-shell .am-searchfilter .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px !important; padding-left: 16px; padding-right: 30px; color: #0B1F1C; } .scale-shell .am-searchfilter .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; right: 12px !important; } .scale-shell .am-searchfilter .select2-container--default .select2-selection--multiple { min-height: 46px !important; border: 1px solid #E5DFD0 !important; border-radius: 12px !important; padding: 4px 10px; } /* ============================================================ SORT / SHOW-PER-PAGE (courses) + SORT / LANGUAGE (find-tutors) Clean overlaid-label pills, fixed height, zero overlap. Root cause of the old overlap: the module overlays the label (position:absolute) and pads the select2 __rendered 9px top/bottom with line-height 36px, while our global rule forced the parent selection--single to height:38px — so the value overflowed below the centred label and the pill spilled onto the course grid. These rules take full ownership of the geometry so it can't recur. ============================================================ */ /* ---------- COURSES: results header row ---------- */ .scale-shell .cr-search-results-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; position: relative; z-index: 4; } .scale-shell .cr-results-summary { flex: 1 1 auto; min-width: 200px; } .scale-shell .cr-sorting-options { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .scale-shell .cr-sorting-options .at-form-group { position: relative; height: 44px; } /* overlaid label — vertically centred */ .scale-shell .cr-sorting-options .at-form-group .cr-option-select { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none; margin: 0; white-space: nowrap; font-size: 13px; color: #4C635E !important; line-height: 1; } /* manual chevron centred right; hide select2's own arrow */ .scale-shell .cr-sorting-options .at-form-group > svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none; } .scale-shell .cr-sorting-options .select2-container--default .select2-selection--single .select2-selection__arrow { display: none !important; } /* select2 pill geometry — one fixed height, no vertical padding conflict */ .scale-shell .cr-sorting-options .select2-container { height: 44px !important; } .scale-shell .cr-sorting-options .select2-container--default .select2-selection--single { height: 44px !important; border: 1px solid #E5DFD0 !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(16,24,40,.05); } .scale-shell .cr-sorting-options .select2-container--default .select2-selection--single .select2-selection__rendered { height: 44px !important; line-height: 44px !important; color: #0B1F1C !important; border: 0 !important; background: transparent !important; padding: 0 36px 0 78px !important; } /* "Show per page:" is a longer label → more left room */ .scale-shell .cr-sorting-options .at-form-group + .at-form-group .select2-selection__rendered { padding-left: 132px !important; } .scale-shell .cr-sorting-options .at-form-group .select2 { width: 220px !important; } .scale-shell .cr-sorting-options .at-form-group + .at-form-group .select2 { width: 210px !important; } /* native