/* * Site Theme Overrides * Colors controlled by SiteSettings via CSS custom properties * injected into by _Layout.cshtml. */ /* ── Body / global background ───────────────────────────────────────────── */ body { background-color: var(--site-dark-bg) !important; } #wrapper { background-color: var(--site-dark-bg); } #menu { background: var(--site-dark-bg); } header#header { background-color: var(--site-dark-bg); } footer#footer { background-color: var(--site-dark-bg); } #contact { background-color: var(--site-dark-bg); } /* ── Links ───────────────────────────────────────────────────────────────── */ a { color: var(--site-accent); border-bottom: none !important; } a:hover { color: var(--site-accent) !important; opacity: 0.85; border-bottom: none !important; } /* ── Nav menu links — white by default, accent on hover ─────────────────── */ nav#menu ul.links a, nav#menu ul.links a:visited { color: var(--site-menu-text, #fff) !important; border-bottom-color: transparent !important; } nav#menu ul.links a:hover { color: var(--site-accent, #9bf1ff) !important; opacity: 1; } /* ── "Menu" toggle text in header ────────────────────────────────────────── */ header#header nav a { color: var(--site-menu-text, #fff) !important; border-bottom: none !important; } header#header nav a:hover { color: var(--site-accent, #9bf1ff) !important; opacity: 1 !important; } /* ── All site buttons — uniform color + text ─────────────────────────────── */ input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary, button.primary, .button.primary, input[type="submit"]:not(.primary):not([class*="admin"]):not([class*="btn"]), input[type="reset"]:not(.primary):not([class*="admin"]):not([class*="btn"]), input[type="button"]:not(.primary):not([class*="admin"]):not([class*="btn"]), button:not(.primary):not([class*="admin"]):not([class*="btn"]):not(.ql-picker-label):not(.subscribe-btn):not(.close-btn), .button:not([class*="admin"]):not([class*="btn"]) { background-color: var(--site-button) !important; border: var(--site-button-border, none) !important; box-shadow: none !important; color: var(--site-button-text, #ffffff) !important; } input[type="submit"].primary:hover, input[type="submit"]:not(.primary):not([class*="admin"]):not([class*="btn"]):hover, input[type="reset"]:not(.primary):not([class*="admin"]):not([class*="btn"]):hover, button:not(.primary):not([class*="admin"]):not([class*="btn"]):not(.ql-picker-label):not(.subscribe-btn):not(.close-btn):hover, .button:hover:not([class*="admin"]):not([class*="btn"]) { filter: brightness(0.88); box-shadow: none !important; color: var(--site-button-text, #ffffff) !important; } /* ── Subscribe button in newsletter popup ────────────────────────────────── */ .subscribe-btn { background-color: var(--site-button) !important; border: var(--site-button-border, none) !important; color: var(--site-button-text, #ffffff) !important; } /* ── Form inputs focus ───────────────────────────────────────────────────── */ input:focus, select:focus, textarea:focus { border-color: var(--site-accent) !important; box-shadow: 0 0 0 2px var(--site-accent) !important; } /* ── Homepage Tiles — hover LIFT effect ─────────────────────────────────── */ #main .tiles article { transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer; } #main .tiles article:hover { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); z-index: 2; } /* ── Make ENTIRE tile clickable (not just the text label) ───────────────── The ::after on the expands to cover the full article. This fixes the Contact tile and standardises all tiles. ──── */ #main .tiles article { position: relative; overflow: visible; } #main .tiles article header.major h3 a { position: static; } #main .tiles article header.major h3 a::after { content: ''; position: absolute; inset: 0; z-index: 3; display: block; } /* ── Listing page card grid (Classes / Lessons / Ensembles / Teachers) ──── */ .listing-banner { padding: 1.8em 0 1.4em; } .listing-banner header.major h1 { font-size: 2em; margin-bottom: 0.1em; } .listing-banner .content p { font-size: 0.95em; margin: 0; } /* Per-page title sizes (Blog = 2em baseline; others progressively smaller) */ .listing-banner-blog header.major h1 { font-size: 2em; } .listing-banner-classes header.major h1 { font-size: 1.75em; } .listing-banner-lessons header.major h1 { font-size: 1.55em; } .listing-banner-ensembles header.major h1 { font-size: 1.35em; } /* Slider inside #main — sits below the title card */ .listing-main-slider { margin: 0 0 2em; border-radius: 12px; overflow: hidden; } .listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; padding: 3em 0 4em; } .listing-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; } .listing-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(0,0,0,0.45); } .listing-card-photo { width: 100%; height: 180px; object-fit: cover; display: block; background: rgba(255,255,255,0.06); } .listing-card-photo-placeholder { width: 100%; height: 130px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); font-size: 3em; color: rgba(255,255,255,0.2); } .listing-card-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; gap: 6px; } .listing-card-title { font-size: 1.1em; font-weight: 700; color: #fff; margin: 0 0 4px; line-height: 1.3; } .listing-card-title a { color: inherit !important; text-decoration: none; } .listing-card-title a:hover { color: var(--site-accent, #9bf1ff) !important; opacity: 1 !important; } .listing-card-meta { font-size: 0.82em; color: rgba(255,255,255,0.55); display: flex; align-items: center; gap: 6px; } .listing-card-meta strong { color: rgba(255,255,255,0.75); } .listing-card-snippet { font-size: 0.85em; color: rgba(255,255,255,0.6); margin: 4px 0 0; line-height: 1.55; flex: 1; } .listing-card-footer { padding: 14px 22px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: space-between; } .listing-badge { font-size: 0.75em; font-weight: 700; padding: 4px 11px; border-radius: 20px; letter-spacing: .03em; } .listing-badge-open { background: rgba(56,161,105,0.25); color: #68d391; } .listing-badge-full { background: rgba(229,62,62,0.2); color: #fc8181; } .listing-card-link { font-size: 0.82em; font-weight: 700; color: var(--site-accent, #9bf1ff) !important; text-decoration: none; opacity: 1 !important; white-space: nowrap; } .listing-card-link:hover { opacity: 0.8 !important; } @media (max-width: 480px) { .listing-grid { grid-template-columns: 1fr; } } /* ── Detail page banner — blur/contain pattern ───────────────────────────── */ .detail-banner-blur { width: 100%; height: 380px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #111; } .detail-banner-blur-bg { position: absolute; inset: -10%; background-size: cover; background-position: center; filter: blur(22px) brightness(0.35) saturate(0.7); z-index: 0; pointer-events: none; } .detail-banner-blur-fg { position: relative; z-index: 1; height: 100%; max-width: 100%; object-fit: contain; display: block; flex-shrink: 0; } /* ── Teacher profile banner (contain photo, blurred bg on sides) ────────── */ .teacher-banner { width: 100%; max-height: 380px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--site-dark-bg); } .teacher-banner-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(28px) brightness(0.35) saturate(0.8); transform: scale(1.15); } .teacher-banner-fg { position: relative; z-index: 1; max-height: 380px; max-width: min(480px, 80%); object-fit: contain; display: block; } /* ── FullCalendar — dark theme + sizing ─────────────────────────────────── */ /* Container */ .fc { color: rgba(255,255,255,0.85) !important; } /* Grid borders */ .fc .fc-scrollgrid, .fc .fc-scrollgrid td, .fc .fc-scrollgrid th { border-color: rgba(255,255,255,0.12) !important; } /* Column headers (day names) */ .fc .fc-col-header-cell { background: rgba(255,255,255,0.06) !important; } .fc .fc-col-header-cell-cushion { color: rgba(255,255,255,0.75) !important; text-decoration: none !important; } /* Day cells */ .fc .fc-daygrid-day { background: transparent !important; min-height: 90px !important; } .fc .fc-daygrid-day.fc-day-today { background: rgba(155,241,255,0.1) !important; } .fc .fc-daygrid-day-number { color: rgba(255,255,255,0.55) !important; text-decoration: none !important; } /* Time grid slots */ .fc .fc-timegrid-slot { border-color: rgba(255,255,255,0.08) !important; } .fc .fc-timegrid-col { background: transparent !important; } .fc .fc-timegrid-axis { background: rgba(255,255,255,0.03) !important; } .fc .fc-timegrid-slot-label-cushion, .fc .fc-timegrid-axis-cushion { color: rgba(255,255,255,0.45) !important; } /* Toolbar */ .fc .fc-toolbar-title { font-size: 1.15em !important; color: #fff !important; } /* Toolbar buttons */ .fc .fc-button-primary { background: var(--site-button,#6fc3df) !important; border-color: var(--site-button,#6fc3df) !important; color: var(--site-button-text,#fff) !important; box-shadow: none !important; text-transform: capitalize; } .fc .fc-button-primary:hover { filter: brightness(0.88) !important; } .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background: var(--site-accent,#9bf1ff) !important; border-color: var(--site-accent,#9bf1ff) !important; color: #111 !important; } /* List view */ .fc .fc-list-day-cushion { background: rgba(255,255,255,0.07) !important; } .fc .fc-list-day-text, .fc .fc-list-day-side-text { color: rgba(255,255,255,0.75) !important; text-decoration: none !important; } .fc .fc-list-event:hover td { background: rgba(255,255,255,0.05) !important; } .fc .fc-list-empty { background: transparent !important; color: rgba(255,255,255,0.4) !important; } /* Scrollgrid scroller background */ .fc .fc-scroller { background: transparent !important; } .fc .fc-scrollgrid-section-body td { background: transparent !important; } /* ── Listing page inline header (Classes: banner inside #main) ──────────── */ .listing-page-header { padding: 2.5em 0 1.5em; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 0; } .listing-page-header h1 { font-size: 2.8em; margin: 0 0 0.25em; color: #fff; font-weight: 700; letter-spacing: -0.01em; } .listing-page-header p { color: rgba(255,255,255,0.55); font-size: 1.05em; margin: 0; } /* ── Banner with slider as background (Lessons) ─────────────────────────── */ .listing-banner-slider-bg { position: relative; overflow: hidden; } .banner-bg-slider-wrap { position: absolute; inset: 0; z-index: 0; } .banner-bg-slider, .banner-bg-slider .swiper-slide { width: 100%; height: 100%; } .banner-bg-slider .swiper-slide { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #111; } /* Contained foreground image inside the banner slider */ .banner-bg-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; } .banner-bg-slider-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.58); z-index: 2; } /* ── Listing page search/filter bar ────────────────────────────────────── */ .listing-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 20px 0 8px; margin-bottom: 8px; } .listing-filter-bar input[type="text"], .listing-filter-bar select { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: #fff; padding: 9px 14px; font-size: 0.88em; outline: none; } .listing-filter-bar input[type="text"]::placeholder { color: rgba(255,255,255,0.4); } .listing-filter-bar input[type="text"]:focus, .listing-filter-bar select:focus { border-color: var(--site-accent, #9bf1ff) !important; box-shadow: 0 0 0 2px rgba(155,241,255,0.2) !important; } .listing-filter-bar select option { background: #1a1d2e; color: #fff; } #listing-no-results { display: none; text-align: center; padding: 3em 0; color: rgba(255,255,255,0.4); font-size: 0.95em; } /* ── Search + filter panel (new layout) ────────────────────────────────── */ .listing-search-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 20px 0 4px; } .listing-search-input { flex: 1; min-width: 180px; max-width: 400px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; color: #fff; padding: 9px 14px; font-size: 0.88em; outline: none; transition: border-color 0.15s; } .listing-search-input::placeholder { color: rgba(255,255,255,0.4); } .listing-search-input:focus { border-color: var(--site-accent, #9bf1ff); box-shadow: 0 0 0 2px rgba(155,241,255,0.18); } .filter-panel-wrapper { position: relative; } .filter-panel-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; color: rgba(255,255,255,0.8); padding: 9px 16px; font-size: 0.88em; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s; } .filter-panel-btn:hover { background: rgba(255,255,255,0.14); } .filter-panel-btn.filters-active { border-color: var(--site-accent, #9bf1ff); color: var(--site-accent, #9bf1ff); background: rgba(155,241,255,0.08); } .filter-count-badge { background: var(--site-accent, #9bf1ff); color: #111; border-radius: 20px; padding: 1px 7px; font-size: 0.78em; font-weight: 700; min-width: 18px; text-align: center; line-height: 1.6; } .filter-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 500; background: #14172b; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 18px 20px; min-width: 260px; max-width: 340px; box-shadow: 0 16px 48px rgba(0,0,0,0.55); display: flex; flex-direction: column; gap: 14px; } .filter-panel-row { display: flex; flex-direction: column; gap: 5px; } .filter-panel-row label.fp-label { font-size: 0.72em; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: .06em; } .filter-panel-row select { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 7px; color: #fff; padding: 8px 12px; font-size: 0.87em; outline: none; width: 100%; cursor: pointer; } .filter-panel-row select option { background: #1a1d2e; color: #fff; } .filter-panel-row select:focus { border-color: var(--site-accent, #9bf1ff); box-shadow: 0 0 0 2px rgba(155,241,255,0.18); } .filter-panel-clear { align-self: flex-start; background: none; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; color: rgba(255,255,255,0.6); padding: 6px 14px; font-size: 0.82em; cursor: pointer; transition: all 0.15s; } .filter-panel-clear:hover { border-color: #fc8181; color: #fc8181; } /* ── Collapsible filter sidebar layout ─────────────────────────────────── */ .listing-flex-layout { display: flex; gap: 0; align-items: flex-start; margin-top: 12px; } .listing-filter-sidebar { width: 0; overflow: hidden; flex-shrink: 0; transition: width 0.22s ease, padding 0.22s ease; padding-right: 0; } .listing-filter-sidebar.open { width: 268px; padding-right: 20px; } .listing-filter-sidebar-inner { width: 248px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 16px; } .listing-main-area { flex: 1; min-width: 0; } .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.88em; font-weight: 700; color: rgba(255,255,255,0.75); letter-spacing: 0.03em; } .sidebar-close-btn { background: none; border: none; outline: none; color: rgba(255,255,255,0.35); cursor: pointer; font-size: 15px; padding: 2px 4px; line-height: 1; transition: color 0.12s; } .sidebar-close-btn:hover { color: #fff; } .sidebar-close-btn:focus { outline: none; } .sidebar-section { margin-bottom: 14px; } .sidebar-section-label { font-size: 0.69em; font-weight: 700; color: rgba(255,255,255,0.38); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 7px; } .sidebar-select { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 7px; color: #fff; padding: 7px 10px; font-size: 0.85em; width: 100%; cursor: pointer; outline: none; appearance: auto; } .sidebar-select option { background: #1a1d2e; color: #fff; } .sidebar-select:focus { border-color: var(--site-accent, #9bf1ff); } /* Day pills */ .filter-day-pills { display: flex; flex-wrap: wrap; gap: 5px; } .filter-day-pill { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; color: rgba(255,255,255,0.7); padding: 4px 11px; font-size: 0.8em; cursor: pointer; user-select: none; transition: background 0.12s, border-color 0.12s, color 0.12s; line-height: 1.6; } .filter-day-pill:hover { background: rgba(255,255,255,0.11); } .filter-day-pill.active { background: var(--site-accent, #9bf1ff); border-color: var(--site-accent, #9bf1ff); color: #111; font-weight: 700; } /* Filter toggle button (replaces dropdown trigger) */ .filter-toggle-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; color: rgba(255,255,255,0.6); padding: 6px 11px; font-size: 0.78em; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; } .filter-toggle-btn:hover { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.85); } .filter-toggle-btn.open { border-color: var(--site-accent, #9bf1ff); color: var(--site-accent, #9bf1ff); background: rgba(155,241,255,0.06); } /* ── Admin image picker row ─────────────────────────────────────────────── */ .img-picker-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .img-picker-thumb { width: 80px; height: 50px; border-radius: 6px; overflow: hidden; border: 1px solid #e2e8f0; background: #f0f2f5; flex-shrink: 0; } .img-picker-thumb img { width: 100%; height: 100%; object-fit: cover; display: none; } .img-picker-thumb img.loaded { display: block; } /* ── Photo Slider ────────────────────────────────────────────────────────── */ .hero-photo-slider { width: 100%; height: 480px; position: relative; overflow: hidden; } /* Each slide: relative container so blur-bg + fg + overlay stack correctly */ .hero-photo-slider .swiper-slide { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #111; } /* Blurred background fill — same image stretched + blurred to cover unused area */ .slide-blur-bg { position: absolute; inset: -10%; /* overshoot to avoid blur-edge artifacts */ background-size: cover; background-position: center; filter: blur(22px) brightness(0.35) saturate(0.7); z-index: 0; pointer-events: none; } /* Contained foreground image — never cropped */ .slide-fg-img { position: relative; z-index: 1; height: 100%; max-width: 100%; object-fit: contain; display: block; flex-shrink: 0; } /* Caption overlay pinned to the bottom */ .slide-overlay { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; background: linear-gradient(transparent, rgba(0,0,0,0.72)); padding: 32px 48px 28px; color: #fff; pointer-events: none; } .slide-overlay a { pointer-events: auto; } .slide-overlay h3 { margin: 0 0 6px; font-size: 1.6em; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.5); } .slide-overlay p { margin: 0; font-size: 1em; opacity: 0.85; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } .hero-photo-slider .swiper-button-prev, .hero-photo-slider .swiper-button-next { color: #fff; z-index: 3; } .hero-photo-slider .swiper-pagination { z-index: 3; } .hero-photo-slider .swiper-pagination-bullet-active { background: var(--site-accent, #9bf1ff); } @media (max-width: 736px) { .hero-photo-slider { height: 260px; } .slide-overlay { padding: 16px 20px 14px; } .slide-overlay h3 { font-size: 1.1em; } } /* ── Multi-select filter chips (listing pages) ──────────────────────────── */ .filter-chip-group { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .filter-chip-label { font-size: 0.8em; font-weight: 700; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; margin-right: 2px; } .filter-chip { display: inline-flex; cursor: pointer; } .filter-chip input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .filter-chip span { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.78em; font-weight: 600; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.05); transition: background 0.18s, color 0.18s, border-color 0.18s; user-select: none; } .filter-chip:hover span { border-color: var(--site-accent, #9bf1ff); color: var(--site-accent, #9bf1ff); } .filter-chip input:checked + span { background: var(--site-accent, #9bf1ff); border-color: var(--site-accent, #9bf1ff); color: #111; } /* ── Multi-day dropdown picker ─────────────────────────────────────────── */ .multi-day-picker { position: relative; display: inline-block; } .multi-day-btn { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; color: rgba(255,255,255,0.85); padding: 8px 14px; font-size: 13px; cursor: pointer; white-space: nowrap; height: 38px; } .multi-day-btn:hover { background: rgba(255,255,255,0.14); } .multi-day-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 100; background: #1a1d2e; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 6px 0; min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,.4); } .multi-day-option { display: flex; align-items: center; gap: 10px; padding: 8px 18px; color: rgba(255,255,255,0.8); font-size: 13px; cursor: pointer; border-radius: 4px; user-select: none; } .multi-day-option:hover { background: rgba(255,255,255,0.08); } .multi-day-option input[type="checkbox"] { appearance: auto !important; -webkit-appearance: checkbox !important; display: inline-block !important; visibility: visible !important; position: static !important; opacity: 1 !important; width: 15px !important; height: 15px !important; min-width: 15px; margin: 0; padding: 0; accent-color: #9bf1ff; cursor: pointer; flex-shrink: 0; } .multi-day-clear { display: block; width: calc(100% - 24px); margin: 6px 12px 2px; padding: 5px; background: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; color: rgba(255,255,255,0.5); font-size: 11px; cursor: pointer; text-align: center; } .multi-day-clear:hover { color: #fff; border-color: rgba(255,255,255,0.4); } /* ── Profile Dashboard ──────────────────────────────────────────────────── */ .profile-page { max-width: 1040px; margin: 0 auto; padding: 2em 0 5em; } /* Alert banners */ .profile-alert { border-radius: 10px; padding: 13px 18px; font-size: 0.9em; font-weight: 600; margin-bottom: 22px; } .profile-alert-success { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.35); color: #6ee7b7; } .profile-alert-error { background: rgba(229,62,62,0.15); border: 1px solid rgba(229,62,62,0.35); color: #fc8181; } /* Setup prompt card (new accounts) */ .profile-setup-card { background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.35); border-radius: 14px; padding: 28px 32px 24px; margin-bottom: 28px; } .profile-setup-header h3 { margin: 0 0 6px; font-size: 1.1em; color: #a5b4fc; } .profile-setup-header p { color: rgba(255,255,255,0.55); font-size: 0.9em; margin: 0 0 22px; } .profile-setup-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; } .profile-setup-field { display: flex; flex-direction: column; gap: 6px; } .profile-setup-field label { font-size: 0.78em; font-weight: 700; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: .05em; } .profile-setup-field input { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 8px; color: #fff !important; padding: 10px 14px; font-size: 0.9em; outline: none; } .profile-setup-field input:focus { border-color: var(--site-accent, #9bf1ff) !important; box-shadow: 0 0 0 2px rgba(155,241,255,0.18) !important; } .profile-setup-field-wide { grid-column: 1 / -1; } /* Ghost / secondary button */ .btn-ghost { background: none !important; border: 1px solid rgba(255,255,255,0.22) !important; color: rgba(255,255,255,0.5) !important; border-radius: 8px; padding: 9px 20px; font-size: 0.88em; cursor: pointer; box-shadow: none !important; transition: border-color 0.15s, color 0.15s; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1 !important; } .btn-ghost:hover { border-color: rgba(255,255,255,0.4) !important; color: rgba(255,255,255,0.75) !important; filter: none !important; } /* Profile hero header */ .profile-hero { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 24px 28px; display: flex; align-items: center; gap: 20px; margin-bottom: 10px; } .profile-avatar { width: 58px; height: 58px; border-radius: 50%; background: var(--site-button, #6366f1); display: flex; align-items: center; justify-content: center; font-size: 1.4em; font-weight: 700; color: var(--site-button-text, #fff); flex-shrink: 0; letter-spacing: -0.02em; } .profile-hero-info { flex: 1; min-width: 0; } .profile-hero-name { font-size: 1.35em; font-weight: 700; color: #fff; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-hero-email { font-size: 0.85em; color: rgba(255,255,255,0.5); margin-bottom: 10px; } .profile-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .profile-type-badge { font-size: 0.73em; font-weight: 700; padding: 3px 11px; border-radius: 20px; letter-spacing: .03em; white-space: nowrap; } .profile-type-student { background: rgba(99,102,241,0.22); color: #a5b4fc; } .profile-type-parent { background: rgba(16,185,129,0.22); color: #6ee7b7; } .profile-type-both { background: rgba(245,158,11,0.22); color: #fcd34d; } .profile-link-code { font-size: 0.76em; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 7px; padding: 3px 11px; color: rgba(255,255,255,0.5); font-family: monospace; letter-spacing: 0.04em; white-space: nowrap; } .profile-link-code strong { color: rgba(255,255,255,0.82); } /* Edit profile button */ .profile-edit-btn { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.2) !important; color: rgba(255,255,255,0.7) !important; border-radius: 8px; padding: 8px 16px; font-size: 0.84em; font-weight: 600; cursor: pointer; box-shadow: none !important; white-space: nowrap; transition: background 0.15s; flex-shrink: 0; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1 !important; } .profile-edit-btn:hover { background: rgba(255,255,255,0.13) !important; filter: none !important; } /* Collapsible edit form */ .profile-edit-form { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 0 28px; margin-bottom: 0; } .profile-edit-form.open { max-height: 500px; padding: 24px 28px; margin-bottom: 24px; } /* Section wrapper */ .profile-section { margin-bottom: 44px; } .profile-section-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.08); } .profile-section-header h2 { font-size: 1.1em; font-weight: 700; color: #fff; margin: 0; letter-spacing: -0.01em; } .profile-section-count { background: rgba(255,255,255,0.09); border-radius: 20px; padding: 2px 9px; font-size: 0.74em; font-weight: 700; color: rgba(255,255,255,0.45); } /* Calendar legend */ .profile-cal-legend { display: flex; align-items: center; gap: 14px; font-size: 0.8em; color: rgba(255,255,255,0.55); margin-left: auto; flex-wrap: wrap; } .profile-cal-legend span { display: flex; align-items: center; gap: 5px; } .profile-cal-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block !important; } /* Enrollment card grid */ .profile-enrollment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .profile-enr-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; } .profile-enr-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.35); } .profile-enr-img { width: 100%; height: 130px; object-fit: cover; display: block; } .profile-enr-card-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 5px; } .profile-enr-card-title { font-size: 0.95em; font-weight: 700; color: #fff; margin: 0; } .profile-enr-card-title a { color: inherit !important; text-decoration: none; } .profile-enr-card-title a:hover { color: var(--site-accent, #9bf1ff) !important; opacity: 1 !important; } .profile-enr-card-meta { font-size: 0.8em; color: rgba(255,255,255,0.5); margin: 0; } .profile-enr-card-meta strong { color: rgba(255,255,255,0.7); } .profile-enr-card-footer { padding: 10px 16px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; justify-content: flex-end; align-items: center; } /* Unenroll / unlink button — must override global button styles */ .profile-enr-unenroll { background: rgba(229,62,62,0.12) !important; border: 1px solid rgba(229,62,62,0.28) !important; border-radius: 7px !important; color: #fca5a5 !important; font-size: 0.78em !important; font-weight: 600 !important; padding: 6px 14px !important; cursor: pointer !important; box-shadow: none !important; transition: background 0.15s !important; line-height: 1.4 !important; white-space: nowrap; } .profile-enr-unenroll:hover { background: rgba(229,62,62,0.26) !important; filter: none !important; color: #fca5a5 !important; } /* Empty state */ .profile-empty { text-align: center; padding: 2.5em 0; color: rgba(255,255,255,0.35); font-size: 0.9em; } .profile-empty a { color: var(--site-accent, #9bf1ff) !important; } /* Parent dashboard */ .profile-parent-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 20px 24px; } .profile-student-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.07); gap: 12px; } .profile-student-row:last-of-type { border-bottom: none; } .profile-student-name { font-weight: 600; color: #fff; font-size: 0.92em; } .profile-student-email { font-size: 0.8em; color: rgba(255,255,255,0.45); margin-top: 2px; } .profile-link-student-form { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.09); display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .profile-link-student-input { width: 100% !important; background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.2) !important; border-radius: 8px !important; color: #fff !important; padding: 10px 14px !important; font-size: 0.88em !important; font-family: monospace !important; letter-spacing: 0.06em !important; outline: none !important; box-sizing: border-box !important; } .profile-link-student-input::placeholder { color: rgba(255,255,255,0.3) !important; font-family: inherit !important; letter-spacing: normal !important; } .profile-link-student-input:focus { border-color: var(--site-accent, #9bf1ff) !important; box-shadow: 0 0 0 2px rgba(155,241,255,0.18) !important; } @media (max-width: 640px) { .profile-setup-fields { grid-template-columns: 1fr; } .profile-setup-field-wide { grid-column: auto; } .profile-hero { flex-wrap: wrap; } .profile-hero-edit { width: 100%; } .profile-cal-legend { display: none; } .profile-enrollment-grid { grid-template-columns: 1fr; } } /* ── FullCalendar: dark scrollbars ──────────────────────────────────────── */ .fc .fc-scroller::-webkit-scrollbar { width: 6px; height: 6px; } .fc .fc-scroller::-webkit-scrollbar-track { background: transparent; } .fc .fc-scroller::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; } .fc .fc-scroller::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); } /* ── FullCalendar: event title overflow fix ─────────────────────────────── */ .fc .fc-event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8em; } .fc .fc-daygrid-event-harness { overflow: hidden; } .fc .fc-timegrid-event .fc-event-title { white-space: normal; font-size: 0.76em; line-height: 1.3; }