/* Shared visual language for public pages, account flows and learning workspaces. Bootstrap/Tailwind retain layout and interaction; these components own appearance. */ html { font-size: 16px; scroll-padding-top: 100px; } body.fl { zoom: 1; min-height: 100vh; background: var(--bg); background-image: radial-gradient(ellipse at 8% 0%,var(--glow-soft),transparent 55%); background-attachment: fixed; } .skip-link { position: fixed; top: -100px; left: 16px; z-index: 10000; background: var(--glass-strong); padding: 12px 20px; border-radius: 12px; } .skip-link:focus { top: 12px; } .site-header { position: sticky; top: 0; padding: 14px 20px; z-index: 40; max-width: 1200px; margin: auto; } .site-nav { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 28px; } .site-links { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; } .site-links a, .site-menu-links a { padding: 10px 12px; border-radius: 14px; font-size: 14px; text-decoration: none; white-space: nowrap; } .site-links a:hover, .site-menu-links a:hover { background: var(--chip); } .site-menu { display: none; margin-inline-start: auto; } .site-menu summary { cursor: pointer; list-style: none; } .site-menu summary::-webkit-details-marker { display: none; } .site-signin { background: var(--glass-strong); } .site-nav .fl-lang { margin: 0; } .site-nav .fl-lang select { padding: 10px; max-width: 110px; } .site-main { width: min(1120px, calc(100% - 40px)); margin: 32px auto 64px; min-height: 60vh; } .site-main > .container { padding: 0 !important; } .site-footer { max-width: 1120px; margin: 40px auto 0; padding: 32px 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 24px; border-top: 1px solid var(--hairline); color: var(--ink-soft); } .site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; margin-inline-start: auto; } .site-footer a { text-decoration: none; } .site-footer small { width: 100%; } .site-ui h1 { font-size: clamp(30px,4vw,48px); letter-spacing: -.04em; font-weight: 600; line-height: 1.12; } .site-ui h2 { font-size: clamp(23px,3vw,32px); } .site-ui h3 { font-size: 21px; letter-spacing: -.02em; } .site-ui p { line-height: 1.65; } .site-ui .card, .site-ui .auth-card, .site-ui .profile-card, .site-ui .fl-card, .site-ui .stat-card, .site-ui .bg-white.rounded-lg, .site-ui .bg-white.rounded-xl, .site-ui .bg-white.rounded-2xl, .site-ui .bg-white.rounded-4, .site-ui .modal-content { background: var(--glass) !important; color: var(--ink); border: 1px solid var(--glass-edge) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow) !important; backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); } .site-ui .card-header, .site-ui .card-footer, .site-ui .fl-card-header, .site-ui .fl-card-footer { background: transparent !important; border-color: var(--hairline); padding: 20px 24px; } .site-ui .card-body, .site-ui .fl-card-body { padding: 24px; } .site-ui .btn, .site-ui .fl-btn { font-family: var(--font-body); border-radius: 999px; min-height: 42px; font-weight: 500; padding: 10px 18px; } .site-ui .btn-primary, .site-ui .btn-success, .site-ui .fl-btn-primary { background: var(--green-deep) !important; color: #fff !important; border-color: transparent !important; } .site-ui .btn-outline-primary, .site-ui .btn-outline-success { color: var(--chip-ink); border-color: var(--hairline); background: var(--glass); } .site-ui .btn-outline-primary:hover, .site-ui .btn-outline-success:hover { background: var(--chip); } .site-ui .form-control, .site-ui .form-select, .site-ui input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]), .site-ui select, .site-ui textarea { border: 1px solid var(--hairline); border-radius: 12px; background: var(--glass-strong); color: var(--ink); min-height: 44px; padding: 10px 13px; font: inherit; max-width: 100%; } .site-ui input[type=checkbox], .site-ui input[type=radio] { accent-color: var(--green-deep); } .site-ui label { font-weight: 500; color: var(--ink); } .site-ui input:focus, .site-ui textarea:focus, .site-ui select:focus { border-color: var(--green); outline: 2px solid var(--chip); outline-offset: 1px; box-shadow: none; } .site-ui .text-muted, .site-ui .text-gray-500, .site-ui .text-gray-600 { color: var(--ink-soft) !important; } .site-ui .text-dark, .site-ui .text-gray-700, .site-ui .text-gray-800, .site-ui .text-gray-900 { color: var(--ink) !important; } .site-ui .text-success, .site-ui .text-green-600, .site-ui .text-green-700 { color: var(--chip-ink) !important; } .site-ui .bg-light, .site-ui main.bg-gray-50 { background: transparent !important; } .site-ui .table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--hairline); } .site-ui table { width: 100%; color: var(--ink); border-collapse: collapse; } .site-ui th { font-size: 12px; letter-spacing: .04em; color: var(--ink-soft); font-weight: 600; } .site-ui td, .site-ui th { border-color: var(--hairline); } .site-ui .alert { border: 1px solid var(--hairline); border-radius: 16px; } .site-ui .pagination .page-link { border-color: var(--hairline); background: var(--glass); color: var(--ink); } .site-ui .pagination .active .page-link { background: var(--green-deep); color: #fff; } .account-panel { max-width: 680px; margin: 40px auto; padding: clamp(24px,5vw,48px); border-radius: 28px; } .account-heading { margin-bottom: 28px; } .account-heading h1 { margin: 14px 0; } .account-heading p, .account-footer { color: var(--ink-soft); } .account-panel input:not([type=checkbox]):not([type=radio]), .account-panel textarea, .account-panel select { width: 100%; } .account-panel button[type=submit] { background: var(--green-deep); color: white; border: 0; border-radius: 999px; padding: 12px 22px; } .account-footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hairline); } /* Portal: floating sidebar and a quiet, translucent toolbar. */ .portal-workspace { min-width: 0; } .portal-main { width: 100%; max-width: 1440px; margin-inline: auto; padding: clamp(20px,3vw,40px) !important; } .portal-main > .p-4:not(.brand-gradient), .portal-main > .p-6:not(.brand-gradient) { padding: 0; } #appSidebar { top: 16px; bottom: 16px; left: 16px; width: 240px; height: auto; overflow-y: auto; border-radius: 26px; background: var(--glass-strong) !important; border: 1px solid var(--glass-edge); box-shadow: var(--shadow); backdrop-filter: blur(22px); } #appSidebar .nav-item { margin: 3px 12px; padding: 12px 14px; border-radius: 13px; border: 0; font-size: 14px; } #appSidebar .nav-item:hover, #appSidebar .nav-item[aria-current=page], #appSidebar .nav-item.bg-green-50 { background: var(--chip); color: var(--chip-ink); } .portal-brand { display: flex; align-items: center; gap: 10px; padding: 24px 22px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 600; } .portal-brand img { width: 34px; height: auto; } .portal-toolbar { margin: 16px 24px 0; border-radius: 22px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); backdrop-filter: blur(22px); } .portal-toolbar h1 { font-size: 19px; letter-spacing: -.02em; } .portal-toolbar [class*=text-white] { color: var(--ink) !important; } .portal-toolbar button:hover, .portal-toolbar a:hover { background-color: var(--chip); } .portal-toolbar #profileDropdown, .portal-toolbar #notificationsDropdown { background: var(--glass-strong); color: var(--ink); } .site-ui .workspace-hero, .site-ui .brand-gradient:not(.rounded-full), .site-ui .next-lesson-card { background: var(--glass) !important; color: var(--ink) !important; border: 1px solid var(--glass-edge); border-radius: 26px; box-shadow: var(--shadow); backdrop-filter: blur(22px); } .site-ui .workspace-hero [class*=text-white], .site-ui .brand-gradient:not(.rounded-full) [class*=text-white], .site-ui .next-lesson-card [class*=text-white] { color: var(--ink) !important; } .site-ui .brand-gradient.rounded-full { background: var(--green-deep); } .site-ui .next-lesson-card { border-inline-start: 4px solid var(--gold); } .site-ui .fl-btn-ghost, .site-ui .fl-btn-outline { color: var(--ink); background: var(--glass-strong); border: 1px solid var(--hairline); } .site-ui .stat-card h3 { font-size: 30px; } .site-ui .qa-tile { border-radius: 18px; } .portal-mobile-nav { background: var(--glass-strong) !important; backdrop-filter: blur(22px); border-color: var(--hairline); } /* Calendar controls keep their existing event semantics and status colours. */ .site-ui .fc { --fc-border-color: var(--hairline); --fc-page-bg-color: var(--glass); --fc-today-bg-color: var(--chip); --fc-button-bg-color: var(--green-deep); --fc-button-border-color: var(--green-deep); --fc-button-active-bg-color: var(--chip-ink); } .site-ui .fc-toolbar { gap: 12px; flex-wrap: wrap; } .site-ui .fc-toolbar-title { font-size: 24px; } .site-ui .fc-button { border-radius: 12px; } .site-ui .fc-event { border-radius: 7px; } .site-ui .calendar-container { border-radius: 24px; overflow: auto; } @media (min-width: 768px) { .portal-workspace { margin-left: 272px !important; } } @media (max-width: 1100px) { .site-links { display: none; } .site-menu { display: block; } .site-menu summary { display: block; padding: 9px 12px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 14px; } .site-menu-links { position: absolute; top: calc(100% - 4px); left: 20px; right: 20px; display: grid; padding: 12px; border-radius: 20px; background: #fbfcfa; border: 1px solid var(--hairline); box-shadow: 0 24px 48px -20px rgba(28,64,36,.35); z-index: 50; } } @media (max-width: 767px) { .site-header { padding: 10px; } .site-nav { gap: 7px; padding: 10px; border-radius: 22px; flex-wrap: wrap; } .site-nav .fl-brand { font-size: 15px; } .site-nav .fl-brand img { height: 26px; } .site-nav .fl-lang select { max-width: 94px; font-size: 13px; } .site-primary, .site-signin { font-size: 13px; padding: 10px 12px; } .site-main { width: calc(100% - 28px); margin-top: 20px; } .portal-toolbar { margin: 10px 12px 0; } .portal-main { padding: 20px 16px 90px !important; } #appSidebar { top: 10px; bottom: 80px; left: 10px; } .site-ui .card-body, .site-ui .fl-card-body { padding: 18px; } .account-panel { margin: 20px auto; } } @media (prefers-reduced-motion: reduce) { .site-ui *, .site-ui *::before, .site-ui *::after { animation: none !important; transition: none !important; } } /* Public editorial pages */ .site-ui .display-3, .site-ui .display-4 { font-size: clamp(30px,4vw,48px); } .site-ui .fs-2, .site-ui .fs-3 { font-size: 20px !important; } .site-ui .fs-4, .site-ui .fs-5 { font-size: 16px !important; } .site-ui .mb-6 { margin-bottom: 40px; } .site-ui .bg-success-light { background: var(--chip); } .site-ui .bg-success-gradient { background: var(--green-deep); border-radius: 26px; } .site-ui .accordion .btn-link { font-size: 17px !important; text-decoration: none; text-align: start; white-space: normal; } .site-ui .divider { color: var(--ink-soft); display: flex; gap: 12px; align-items: center; margin: 24px 0; font-size: 14px; } .site-ui .divider::before, .site-ui .divider::after { content: ''; height: 1px; flex: 1; background: var(--hairline); } .site-ui .btn-block { display: block; width: 100%; } .site-ui .bookings-container, .site-ui .cart-summary, .site-ui .empty-cart { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 20px; box-shadow: var(--shadow); } .site-ui .tutor-modal .modal-header { background: var(--green-deep); } .site-ui .fl-card-title { font-size: 17px; margin: 0; } .site-ui .fl-section-title { font-size: 20px; } .site-ui .rounded-full.text-white { color: #fff; } [dir=rtl] .portal-workspace { margin-left: 0 !important; } @media (min-width:768px) { [dir=rtl] .portal-workspace { margin-right: 272px; } [dir=rtl] #appSidebar { left: auto; right: 16px; } } .site-ui .card-header.text-white, .site-ui .card-header.text-white h2, .site-ui .card-header.text-white h3 { color: var(--ink) !important; } .site-ui .workspace-hero .bg-white, .site-ui .workspace-hero .bg-white\/20 { background: var(--glass-strong) !important; color: var(--ink); border: 1px solid var(--hairline); } /* Detailed flows (booking, lessons, availability, settings, payments). These templates still carry Tailwind utility classes that JavaScript and tests rely on, so the palette is remapped here instead of rewriting markup. Blue accents become brand green; grey surfaces become glass; status colours stay. */ /* Only actions and step markers change hue; legend swatches, toasts and slot states keep their status colours. */ .site-ui :is(button, a, input[type=submit], .rounded-full).bg-blue-500, .site-ui :is(button, a, input[type=submit], .rounded-full).bg-blue-600, .site-ui :is(button, a, input[type=submit], .rounded-full).bg-blue-700, .site-ui :is(button, a).bg-indigo-600, .site-ui :is(button, a, input[type=submit]).bg-green-600, .site-ui :is(button, a, input[type=submit]).bg-green-700 { background-color: var(--green-deep) !important; color: #fff; } .site-ui .hover\:bg-blue-500:hover, .site-ui .hover\:bg-blue-600:hover, .site-ui .hover\:bg-blue-700:hover, .site-ui .hover\:bg-green-700:hover, .site-ui .hover\:bg-indigo-700:hover { background-color: var(--chip-ink) !important; color: #fff; } .site-ui button.bg-blue-500, .site-ui button.bg-blue-600, .site-ui a.bg-blue-500, .site-ui a.bg-blue-600, .site-ui button.bg-green-600, .site-ui a.bg-green-600 { border-radius: 999px !important; font-weight: 500; } .site-ui .bg-blue-50, .site-ui .bg-blue-100, .site-ui .bg-green-50, .site-ui .bg-green-100, .site-ui .bg-indigo-50, .site-ui .hover\:bg-blue-50:hover, .site-ui .hover\:bg-blue-100:hover, .site-ui .hover\:bg-green-100:hover { background-color: var(--chip) !important; } .site-ui .text-blue-500, .site-ui .text-blue-600, .site-ui .text-blue-700, .site-ui .text-blue-800, .site-ui .text-blue-900, .site-ui .text-indigo-600, .site-ui .text-green-800, .site-ui .text-green-900, .site-ui .text-primary, .site-ui .hover\:text-blue-500:hover, .site-ui .hover\:text-blue-700:hover, .site-ui .hover\:text-green-600:hover, .site-ui .hover\:text-green-700:hover { color: var(--chip-ink) !important; } .site-ui .text-green-500 { color: var(--green) !important; } .site-ui .border-blue-200, .site-ui .border-blue-500, .site-ui .border-green-100, .site-ui .border-green-200 { border-color: rgba(40,167,69,.28) !important; } .site-ui .focus\:ring-blue-500:focus, .site-ui .focus\:ring-green-400:focus { --tw-ring-color: rgba(40,167,69,.35); } .site-ui .focus\:border-blue-500:focus { border-color: var(--green) !important; } .site-ui .text-gray-400, .site-ui .text-gray-300 { color: #7f8b83 !important; } .site-ui .text-gray-200 { color: rgba(22,33,26,.28) !important; } .site-ui .hover\:text-gray-600:hover { color: var(--ink) !important; } .site-ui .border-gray-100, .site-ui .border-gray-200, .site-ui .divide-gray-100 > * + *, .site-ui .divide-gray-200 > * + * { border-color: var(--hairline) !important; } .site-ui .border-gray-300 { border-color: rgba(22,33,26,.16) !important; } .site-ui .bg-gray-50 { background-color: rgba(255,255,255,.42) !important; } .site-ui .bg-gray-100, .site-ui .bg-gray-200 { background-color: var(--muted-bg) !important; } .site-ui .hover\:bg-gray-50:hover, .site-ui .hover\:bg-gray-100:hover, .site-ui .hover\:bg-gray-200:hover { background-color: var(--chip) !important; } .site-ui thead.bg-gray-50, .site-ui thead .bg-gray-50, .site-ui tr.bg-gray-50 { background: transparent !important; } .site-ui .portal-main div.bg-white.shadow, .site-ui .portal-main div.bg-white.shadow-sm, .site-ui .portal-main div.bg-white.shadow-md, .site-ui .portal-main div.bg-white.shadow-lg, .site-ui .portal-main section.bg-white, .site-ui .portal-main div.bg-white.rounded, .site-ui .portal-main div.bg-white.border { background: var(--glass) !important; border: 1px solid var(--glass-edge) !important; border-radius: 20px !important; box-shadow: var(--shadow) !important; -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); } .site-ui .portal-main .rounded-full.bg-blue-500, .site-ui .portal-main .rounded-full.bg-green-600 { border-radius: 999px !important; } .site-ui .bg-gradient-to-br.from-green-400 { background: linear-gradient(135deg, var(--green), var(--green-deep)) !important; } .site-ui .portal-main input[type=file] { min-height: 0; padding: 8px; } /* Custom components inside the lessons, booking and payment templates. */ .site-ui .lessons-hero { background: var(--glass) !important; border: 1px solid var(--glass-edge); border-radius: 26px !important; box-shadow: var(--shadow) !important; backdrop-filter: blur(22px); } .site-ui .lessons-hero__title { color: var(--ink) !important; letter-spacing: -.03em; font-weight: 600 !important; } .site-ui .lessons-hero__sub, .site-ui .hero-stat__lbl { color: var(--ink-soft) !important; } .site-ui .hero-stat, .site-ui .hero-stat--green, .site-ui .hero-stat--blue { background: var(--glass-strong) !important; border: 1px solid var(--hairline); } .site-ui .hero-stat__num { color: var(--ink) !important; font-weight: 600 !important; } .site-ui .hero-btn { border-radius: 999px !important; } .site-ui .hero-btn--solid { background: var(--green-deep) !important; color: #fff !important; } .site-ui .hero-btn--ghost { background: var(--glass-strong) !important; color: var(--ink) !important; border: 1px solid var(--hairline) !important; } .site-ui .filter-bar, .site-ui .card__header + .card__body { border-color: var(--hairline) !important; } .site-ui .filter-bar { background: var(--glass) !important; border: 1px solid var(--glass-edge) !important; border-radius: 20px !important; box-shadow: var(--shadow) !important; backdrop-filter: blur(22px); } .site-ui .filter-pill { background: var(--muted-bg); color: var(--ink-soft); } .site-ui .filter-pill:hover { background: var(--chip); color: var(--chip-ink); } .site-ui .filter-pill--active, .site-ui .filter-pill--active:hover { background: var(--green-deep); color: #fff; border-color: var(--green-deep); } .site-ui .card__header, .site-ui .lesson-card + .lesson-card, .site-ui .pagination-bar { border-color: var(--hairline) !important; } .site-ui .card__title, .site-ui .lc__name { color: var(--ink); } .site-ui .card__count { background: var(--chip); color: var(--chip-ink); } .site-ui .lesson-card:not(.lc--inprogress):hover { background: rgba(255,255,255,.45); } .site-ui .zoom-block { border-radius: 14px; } .site-ui .zoom-btn--ready { background: var(--green-deep); } .site-ui .zoom-btn { border-radius: 999px; } .site-ui .lc__action-btn { border-radius: 999px; } .site-ui .lc__action-btn--primary { background: var(--green-deep); border-color: var(--green-deep); } .site-ui .lc__action-btn--primary:hover { background: var(--chip-ink); } .site-ui .lc__action-btn--outline, .site-ui .pg-btn { background: var(--glass-strong); color: var(--ink); border-color: var(--hairline); } .site-ui .lc__action-btn--outline:hover, .site-ui .pg-btn:hover { background: var(--chip); } .site-ui .lc__action-btn--danger, .site-ui .lc__action-btn--star { background: var(--glass-strong); } .site-ui .pg-btn { border-radius: 999px; } .site-ui .card__title { font-size: 17px; letter-spacing: -.01em; } .site-ui .filter-pill { white-space: nowrap; flex-shrink: 0; } /* project.css paints every