/* ============ Theme system (Light / Dark) ============ Powers both the Tailwind color config (admin.html/student.html map their Tailwind color names to these same variables) AND all the plain CSS classes below. Toggling adds/removes .dark on - see js/theme.js for the toggle button + localStorage persistence. */ :root { --c-background:#f7f9fb; --c-surface:#f7f9fb; --c-surface-container-lowest:#ffffff; --c-surface-container-low:#f2f4f6; --c-surface-container:#eceef0; --c-surface-container-high:#e6e8ea; --c-surface-container-highest:#e0e3e5; --c-surface-variant:#e0e3e5; --c-surface-bright:#f7f9fb; --c-surface-dim:#d8dadc; --c-on-surface:#191c1e; --c-on-surface-variant:#45464d; --c-on-background:#191c1e; --c-outline:#76777d; --c-outline-variant:#c6c6cd; --c-primary:#000000; --c-on-primary:#ffffff; --c-primary-container:#131b2e; --c-on-primary-container:#7c839b; --c-secondary:#0058be; --c-on-secondary:#ffffff; --c-secondary-container:#2170e4; --c-on-secondary-container:#fefcff; --c-tertiary:#000000; --c-on-tertiary:#ffffff; --c-tertiary-container:#07006c; --c-error:#ba1a1a; --c-on-error:#ffffff; --c-error-container:#ffdad6; --c-on-error-container:#93000a; --c-inverse-surface:#2d3133; --c-inverse-on-surface:#eff1f3; /* Plain-CSS (non-Tailwind) app chrome */ --c-body-bg:#f4f4f2; --c-body-text:#22221f; --c-card-bg:#fff; --c-card-border:#e7e5df; --c-input-bg:#fff; --c-input-border:#d6d3cb; --c-text-mute:#57534e; --c-text-faint:#9a978f; --c-table-stripe:#faf9f6; --c-modal-overlay:rgba(0,0,0,0.5); } html.dark { --c-background:#121316; --c-surface:#121316; --c-surface-container-lowest:#0c0d0f; --c-surface-container-low:#1a1c1f; --c-surface-container:#1e2023; --c-surface-container-high:#292b2e; --c-surface-container-highest:#333539; --c-surface-variant:#3c3e42; --c-surface-bright:#38393c; --c-surface-dim:#121316; --c-on-surface:#e2e2e5; --c-on-surface-variant:#c6c6cd; --c-on-background:#e2e2e5; --c-outline:#8f9099; --c-outline-variant:#45464d; --c-primary:#ffffff; --c-on-primary:#000000; --c-primary-container:#2a3350; --c-on-primary-container:#c6cde8; --c-secondary:#7db4ff; --c-on-secondary:#00305e; --c-secondary-container:#0058be; --c-on-secondary-container:#ffffff; --c-tertiary:#ffffff; --c-on-tertiary:#000000; --c-tertiary-container:#211f70; --c-error:#ffb4ab; --c-on-error:#690005; --c-error-container:#93000a; --c-on-error-container:#ffdad6; --c-inverse-surface:#e2e2e5; --c-inverse-on-surface:#2d3133; --c-body-bg:#121316; --c-body-text:#e2e2e5; --c-card-bg:#1a1c1f; --c-card-border:#333539; --c-input-bg:#1e2023; --c-input-border:#45464d; --c-text-mute:#a9a9ad; --c-text-faint:#8a8a8e; --c-table-stripe:#1a1c1f; --c-modal-overlay:rgba(0,0,0,0.7); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--c-body-bg); color: var(--c-body-text); } header.topbar { background: #1f2937; color: #fff; padding: 16px 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; } header.topbar h1 { margin: 0; font-size: 20px; font-weight: 600; } header.topbar p { margin: 4px 0 0; font-size: 13px; color: #cbd5e1; } header.topbar button.logout { background:#374151; color:#fff; border:none; padding:8px 14px; border-radius:8px; cursor:pointer; font-size:13px; } .container { max-width: 1000px; margin: 0 auto; padding: 20px; } .tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; } .tabs button { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--c-input-border); background: var(--c-card-bg); color: var(--c-body-text); cursor: pointer; font-size: 13px; } .tabs button.active { background: #1f2937; color: #fff; border-color: #1f2937; } .tab-panel { display: none; } .tab-panel.active { display: block; } .legend { display: flex; gap: 16px; font-size: 13px; margin-bottom: 12px; color: var(--c-text-mute); flex-wrap:wrap; } .legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; } .dot.available { background: #22c55e; } .dot.morning { background: #f59e0b; } .dot.evening { background: #3b82f6; } .dot.night { background: #8b5cf6; } .dot.full { background: #dc2626; } .dot.selected { background: #1f6feb; } .room { position: relative; background: var(--c-card-bg); border: 1px solid var(--c-card-border); border-radius: 12px; height: 440px; margin-bottom: 20px; overflow: hidden; } .room .entrance { position: absolute; top: 8px; left: 8px; right: 8px; text-align: center; font-size: 11px; color: var(--c-text-faint); border-bottom: 1px dashed var(--c-card-border); padding-bottom: 6px; } .seat { position: absolute; width: 44px; height: 36px; border-radius: 6px; border: 1px solid #16a34a; color:#fff; font-size: 11px; display: flex; flex-direction: column; cursor: pointer; user-select: none; font-weight:600; overflow: hidden; } .seat .seat-stripe { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 9px; } .seat .seat-stripe.stripe-available { background: #22c55e; } .seat .seat-stripe.stripe-morning { background: #f59e0b; } .seat .seat-stripe.stripe-evening { background: #3b82f6; } .seat .seat-stripe.stripe-night { background: #8b5cf6; } .seat.status-full { background: #dc2626; border-color:#b91c1c; align-items: center; justify-content: center; } .seat.selected { outline: 3px solid #1f6feb; } .seat.editable { cursor: move; } .seat.editable:hover { outline: 2px solid #1f6feb; } .card { background:var(--c-card-bg); border:1px solid var(--c-card-border); border-radius:10px; padding:16px; margin-bottom:16px; } .card h3 { margin-top:0; } .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } @media (max-width:700px){ .grid-3 { grid-template-columns:1fr 1fr; } .grid-2 { grid-template-columns:1fr; } } /* Exam Prep tab - mobile friendly timer & controls */ #tab-examprep .card { overflow-x: hidden; } #tab-examprep select, #tab-examprep input[type="number"], #tab-examprep input[type="text"], #tab-examprep input[type="date"] { width: 100%; box-sizing: border-box; } @media (max-width:600px) { #ep-timer-display { font-size: 30px !important; } #tab-examprep div[style*="display:flex"]:not(#ep-mock-trend) { flex-wrap: wrap; } #tab-examprep .ep-remove-subject-btn { white-space: nowrap; } #ep-mock-trend { -webkit-overflow-scrolling: touch; } } .ep-heatmap-day { aspect-ratio: 1/1; border-radius: 4px; display:flex; align-items:center; justify-content:center; font-size:10px; cursor:pointer; } .stat-box { background:var(--c-card-bg); border:1px solid var(--c-card-border); border-radius:10px; padding:16px; text-align:center; } .stat-box .num { font-size:26px; font-weight:700; color:var(--c-body-text); } .stat-box .label { font-size:12px; color:var(--c-text-mute); margin-top:4px; } table { width:100%; border-collapse:collapse; font-size:13px; color:var(--c-body-text); } td, th { text-align:left; padding:8px 6px; border-bottom:1px solid var(--c-card-border); } th { color:var(--c-text-mute); font-weight:600; } .badge { padding:2px 8px; border-radius:12px; font-size:11px; font-weight:600; } .badge.paid { background:#dcfce7; color:#166534; } .badge.due { background:#fee2e2; color:#991b1b; } .badge.open { background:#fef9c3; color:#854d0e; } .badge.resolved { background:#dcfce7; color:#166534; } input, select, textarea { width:100%; padding:8px 10px; border-radius:6px; border:1px solid var(--c-input-border); background:var(--c-input-bg); color:var(--c-body-text); font-size:14px; margin-bottom:8px; } label { display:block; font-size:13px; color:var(--c-text-mute); margin:6px 0 4px; } button.primary { background:#1f6feb; color:#fff; border:none; padding:10px 18px; border-radius:8px; cursor:pointer; font-size:14px; } button.danger { background:#b42318; color:#fff; border:none; padding:6px 12px; border-radius:6px; cursor:pointer; font-size:12px; } button.secondary { background:#fff; border:1px solid #d6d3cb; padding:8px 14px; border-radius:8px; cursor:pointer; font-size:13px; } .login-box { max-width:360px; margin:60px auto; background:#F5F0E6; border-radius:2px; padding:28px; border:1px solid #ECE4D3; box-shadow:0 14px 34px rgba(31,58,46,0.25); position:relative; z-index:1; font-family:'Karla', -apple-system, sans-serif; } /* Study Point branded loading screen (used while auth/session is resolving) */ /* Brand "Study Point" name shown in a small coloured box/badge wherever it appears as the app's logo/wordmark (sidebar, header bars, login/signup, loading screen, footer) - makes it read as a logo rather than plain text. */ .sp-brand-badge { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #0ea5e9, #0058be); color: #ffffff !important; padding: 4px 12px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,88,190,0.25); line-height: 1.3; } .sp-brand-badge .sp-brand-sub { color: rgba(255,255,255,0.8) !important; font-weight: 400; } footer .sp-brand-badge { background: rgba(255,255,255,0.15); box-shadow: none; } .sp-loading-screen { min-height:100vh; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#f7f9fb; position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999; } .sp-loading-logo { width:76px; height:76px; border-radius:20px; box-shadow:0 8px 24px rgba(0,0,0,0.15); animation: sp-pulse 1.4s ease-in-out infinite; } .sp-loading-name { margin-top:16px; font-family:'Inter','Karla',-apple-system,sans-serif; font-weight:700; font-size:22px; letter-spacing:0.02em; color:#191c1e; } @keyframes sp-pulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(0.92); opacity:0.75; } } .login-box h2 { font-family:'Domine', Georgia, serif; } .login-box .primary { background:#C89B3C; color:#211D14; font-weight:700; border:none; } .login-box input, .login-box select { border-color:#ECE4D3; } .login-box a { color:#2C4A6E; } /* Fallback link colour: without this, any plain not covered by a specific rule above falls back to the browser's default blue, which clashes with the cream/paper background. Use the theme's ink-blue instead everywhere a link doesn't already have its own colour. */ a { color: #2C4A6E; } a:hover { color: #C89B3C; } #admin-app a:not(.primary):not(.secondary):not(.tab-link) { color: #0058be; } /* ===== Phase 2: colourful shiny sidebar advertisement card ===== */ .sp-ad-card { position: relative; margin: 14px 4px 4px; padding: 12px 14px; border-radius: 14px; cursor: pointer; overflow: hidden; background: linear-gradient(120deg, #ff6a3d, #ffb703, #06d6a0, #3b82f6, #a855f7); background-size: 300% 300%; animation: sp-ad-gradient 6s ease infinite; box-shadow: 0 6px 16px rgba(0,0,0,0.18); } @keyframes sp-ad-gradient { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} } .sp-ad-shine { position: absolute; top:0; left:-60%; width:40%; height:100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-20deg); animation: sp-ad-shine-move 2.6s ease-in-out infinite; } @keyframes sp-ad-shine-move { 0% { left:-60%; } 60%,100% { left:130%; } } .sp-ad-card-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; } .sp-ad-icon { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .sp-ad-text { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.35); overflow: hidden; } .sp-ad-title { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-ad-code { font-size: 11px; opacity: 0.95; } /* Container for MULTIPLE ads shown "samne samne" (side by side) - fixed height, horizontally scrollable, so however many ads exist, they never push Gallery/Settings/Logout/etc. around in the sidebar (see sidebar-ad.js). BUG FIX: these two classes were referenced by sidebar-ad.js but never actually defined here, so the ad strip was rendering with no layout at all. */ .sp-ad-strip-label { margin: 14px 4px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #9a978f; } .sp-ad-strip-label-btn { display: flex; align-items: center; gap: 6px; border: none; background: none; padding: 0; cursor: pointer; font-family: inherit; } .sp-ad-strip-label-btn:hover { color: var(--c-body-text, #191c1e); } .sp-ad-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ff6a3d; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: normal; text-transform: none; } .sp-ad-new-badge { display: inline-block; padding: 1px 5px; border-radius: 4px; background: #16a34a; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.03em; vertical-align: middle; margin-left: 4px; flex-shrink: 0; } .sp-ad-strip { display: flex; gap: 10px; margin: 4px 4px 4px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .sp-ad-strip .sp-ad-card { flex: 0 0 auto; width: 220px; margin: 0; scroll-snap-align: start; } .sp-ad-strip-wrap { position: relative; display: flex; align-items: center; } .sp-ad-strip-wrap .sp-ad-strip { flex: 1; scroll-behavior: smooth; } .sp-ad-nav { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--c-card-bg, #fff); color: var(--c-body-text, #191c1e); box-shadow: 0 1px 4px rgba(0,0,0,0.25); font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; } .sp-ad-nav-prev { margin-right: 4px; } .sp-ad-nav-next { margin-left: 4px; } body.login-bg { background: #1F3A2E; min-height:100vh; } .login-box h2 { margin-top:0; } .error-msg { color:#b42318; font-size:13px; margin-top:8px; } .success-msg { color:#2e7d32; font-size:13px; margin-top:8px; } .hint { font-size:12px; color:var(--c-text-faint); margin-top:6px; } /* BUG FIX: "inset" is a shorthand for top/right/bottom/left together - not supported by the older Android system WebView versions this app's wrapped Capacitor APK can end up running on. When unsupported, this position:fixed overlay silently kept its default (static) position - i.e. wherever it landed in the DOM, which for a confirm/delete popup appended at the very end of is the very bottom of the page - so it looked like the popup opened "at the bottom" instead of centered on screen. Spelling out top/right/bottom/left individually below works everywhere the shorthand does, plus everywhere it doesn't. */ .modal-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: var(--c-modal-overlay); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal { background: var(--c-card-bg); color: var(--c-body-text); border-radius: 12px; padding: 24px; width: 340px; max-height:80vh; overflow:auto; } .modal .actions { display: flex; gap: 8px; margin-top: 18px; } .modal .actions button { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--c-input-border); background: var(--c-input-bg); color: var(--c-body-text); cursor: pointer; font-size: 14px; } .modal .actions button.confirm { background: #1f6feb; color: #fff; border: none; } .id-card { width:340px; max-width:92vw; box-sizing:border-box; border:2px solid #1f2937; border-radius:12px; padding:16px; margin:0 auto; background:#fff; } .id-card h3 { margin:0 0 4px; } .id-card .row { display:flex; justify-content:space-between; font-size:13px; margin:4px 0; } @media print { header.topbar, .tabs, .no-print, #students-sections { display:none !important; } body { font-size: 12px; } table { width: 100%; table-layout: fixed; } th, td { word-break: break-word; } } #print-register table, #print-payments table { width:100%; border-collapse:collapse; } #print-register th, #print-register td, #print-payments th, #print-payments td { border:1px solid #ccc; padding:6px 8px; font-size:12px; text-align:left; } /* ============ Homepage (landing page) ============ */ @import url('https://fonts.googleapis.com/css2?family=Domine:wght@500;700&family=Karla:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { --bg-deep: #1F3A2E; --bg-deep-2: #25493A; --bg-paper: #F5F0E6; --bg-paper-2: #ECE4D3; --accent-gold: #C89B3C; --accent-gold-soft: rgba(200,155,60,0.15); --ink-blue: #2C4A6E; --text-dark: #211D14; --text-mute: #5B5647; --text-light: #F5F0E6; --text-light-mute: rgba(245,240,230,0.7); --hp-line: rgba(245,240,230,0.18); --hp-radius: 2px; } .home-body { font-family:'Karla', -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg-paper); color:var(--text-dark); } .home-body h1, .home-body h2, .home-body h3 { font-family:'Domine', Georgia, serif; font-weight:700; letter-spacing:-0.01em; } .home-body .mono { font-family:'IBM Plex Mono', monospace; } .home-nav { display:flex; justify-content:space-between; align-items:center; padding:18px 28px; background:var(--bg-deep); border-bottom:1px solid var(--hp-line); flex-wrap:wrap; gap:10px; position:sticky; top:0; z-index:50; } .home-nav .brand { color:var(--text-light); font-family:'Domine', Georgia, serif; font-weight:700; font-size:20px; letter-spacing:0.2px; } .home-nav .links { display:flex; flex-wrap:wrap; } .home-nav .links a { color:var(--text-light-mute); text-decoration:none; margin-left:20px; font-size:14px; font-weight:500; } .home-nav .links a:hover { color:var(--text-light); } .home-nav .cta { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; } .home-nav .cta a { display:inline-block; background:var(--accent-gold); color:var(--text-dark); padding:9px 16px; border-radius:var(--hp-radius); text-decoration:none; font-size:13px; font-weight:700; white-space:nowrap; } .home-nav .cta a.outline { background:transparent; border:1px solid var(--text-light-mute); color:var(--text-light); font-weight:500; } .home-nav .menu-toggle { display:none; background:none; border:none; color:var(--text-light); font-size:22px; cursor:pointer; } @media (max-width:760px) { .home-nav .menu-toggle { display:block; } .home-nav .links { display:none; width:100%; flex-direction:column; background:var(--bg-deep); padding:14px 0 4px; order:3; } .home-nav .links.open { display:flex; } .home-nav .links a { margin:0; padding:10px 4px; border-top:1px solid var(--hp-line); } } .hero { position:relative; text-align:center; padding:100px 20px 80px; background:var(--bg-deep); color:var(--text-light); overflow:hidden; } .hero::before { content:''; position:absolute; top:0; right:0; bottom:0; left:0; background-image: repeating-linear-gradient(0deg, transparent, transparent 63px, var(--hp-line) 63px, var(--hp-line) 64px), repeating-linear-gradient(90deg, transparent, transparent 95px, var(--hp-line) 95px, var(--hp-line) 96px); mask-image: radial-gradient(ellipse at 50% 40%, black 10%, transparent 72%); opacity:0.9; } .hero .eyebrow { position:relative; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-gold); margin-bottom:16px; display:flex; align-items:center; justify-content:center; gap:10px; } .hero .eyebrow::before { content:''; width:22px; height:1px; background:var(--accent-gold); display:inline-block; } .hero h1 { position:relative; font-size:44px; font-weight:700; margin:0 0 16px; line-height:1.15; } .hero p { position:relative; font-size:16px; color:var(--text-light-mute); max-width:520px; margin:0 auto 34px; line-height:1.6; } .hero .buttons { position:relative; } .hero .buttons a { display:inline-block; margin:0 8px; padding:13px 26px; border-radius:var(--hp-radius); text-decoration:none; font-size:14px; font-weight:700; } .hero .buttons a.primary { background:var(--accent-gold); color:var(--text-dark); } .hero .buttons a.secondary { background:transparent; color:var(--text-light); border:1px solid var(--text-light-mute); font-weight:500; } .home-section { max-width:880px; margin:0 auto; padding:70px 24px; } .home-section .eyebrow { font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-gold); font-weight:500; margin-bottom:12px; display:flex; align-items:center; gap:10px; } .home-section .eyebrow::before { content:''; width:22px; height:1px; background:var(--accent-gold); display:inline-block; } .home-section h2 { font-size:30px; margin:0 0 16px; color:var(--text-dark); } .home-section p { font-size:15.5px; line-height:1.75; color:var(--text-mute); } .info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; } @media (max-width:700px){ .info-grid { grid-template-columns:1fr; } } .info-box { background:#fff; border:1px solid var(--bg-paper-2); border-radius:var(--hp-radius); padding:20px; text-align:center; } .info-box strong { font-family:'Domine', serif; font-size:17px; color:var(--text-dark); } .info-box .label { font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--text-mute); margin-top:6px; letter-spacing:0.08em; text-transform:uppercase; display:block; } .facilities-list { list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; } @media (max-width:600px){ .facilities-list { grid-template-columns:1fr; } } .facilities-list li { position:relative; padding-left:32px; font-size:15px; color:var(--text-dark); line-height:1.5; } .facilities-list li::before { content:'✓'; position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; background:var(--bg-deep); color:var(--accent-gold); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; } /* Gallery filmstrip */ .gallery-strip { display:flex; gap:14px; overflow-x:auto; padding:8px 4px 16px; scroll-snap-type:x mandatory; } .gallery-strip img { width:220px; height:160px; object-fit:cover; border-radius:var(--hp-radius); flex:0 0 auto; scroll-snap-align:start; cursor:pointer; background:var(--bg-paper-2); transition:transform 0.15s ease; border:1px solid var(--bg-paper-2); } .gallery-strip img:hover { transform:translateY(-3px); } .gallery-empty { font-size:14px; color:var(--text-mute); font-style:italic; } .lightbox-overlay { position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(20,18,12,0.88); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; } .lightbox-overlay.open { display:flex; } .lightbox-overlay img { max-width:92vw; max-height:82vh; border-radius:var(--hp-radius); } .lightbox-overlay .lb-close { position:absolute; top:20px; right:24px; color:#fff; font-size:28px; cursor:pointer; background:none; border:none; } .lightbox-overlay .lb-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.12); border:none; color:#fff; font-size:22px; width:44px; height:44px; border-radius:50%; cursor:pointer; } .lightbox-overlay .lb-prev { left:16px; } .lightbox-overlay .lb-next { right:16px; } .founder-card { display:flex; gap:26px; align-items:center; background:#fff; border:1px solid var(--bg-paper-2); border-radius:var(--hp-radius); padding:26px; } .founder-card img { width:104px; height:104px; border-radius:50%; object-fit:cover; background:var(--bg-paper-2); flex-shrink:0; border:2px solid var(--accent-gold); } @media (max-width:560px){ .founder-card { flex-direction:column; text-align:center; } } .contact-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:22px; } @media (max-width:560px){ .contact-grid { grid-template-columns:1fr; } } .contact-item { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--bg-paper-2); border-radius:var(--hp-radius); padding:15px 16px; text-decoration:none; color:var(--text-dark); font-size:14.5px; transition:border-color .15s; } .contact-item:hover { border-color:var(--accent-gold); } .contact-item .icon { width:36px; height:36px; border-radius:50%; background:var(--bg-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .contact-item .icon svg { width:17px; height:17px; fill:var(--accent-gold); } footer.home-footer { text-align:center; padding:28px; font-size:12.5px; color:var(--text-light-mute); background:var(--bg-deep); font-family:'IBM Plex Mono', monospace; } /* ============ Mobile responsiveness (whole app) ============ */ input, select, textarea { font-size:16px; } /* prevents iOS auto-zoom on focus */ @media (max-width:640px) { .container { padding:14px; } header.topbar { padding:12px 16px; } header.topbar h1 { font-size:17px; } .tabs { gap:5px; } .tabs button { padding:7px 11px; font-size:12.5px; } .card { padding:12px; } .grid-3 { grid-template-columns:1fr 1fr; } .grid-2 { grid-template-columns:1fr; } table { font-size:12px; } .room { height:340px; overflow:auto; } .modal { width:92vw; } .hero h1 { font-size:30px; } .hero p { font-size:15px; } .home-section { padding:40px 18px; } } .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; } .gallery-admin-grid { grid-template-columns:repeat(4,1fr); } @media (max-width:700px){ .gallery-admin-grid { grid-template-columns:repeat(2,1fr); } } .gallery-admin-item { position:relative; padding:0; overflow:hidden; } .gallery-admin-item img { width:100%; height:100px; object-fit:cover; display:block; } .gallery-admin-item button { position:absolute; top:4px; right:4px; background:#b42318; color:#fff; border:none; border-radius:6px; padding:3px 8px; font-size:11px; cursor:pointer; } .sp-notify-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; margin-left: 4px; vertical-align: top; } .sp-copy-link-btn:hover { background: var(--c-surface-container-high) !important; } .sp-copy-link-btn:active { background: var(--c-surface-container-highest) !important; } /* Same gradient as the public homepage's "Register your library" button (see .btn-primary in homepage-stitch-skin.css) - used here for the "I've completed the payment" buttons so the accent colour is consistent wherever someone is being asked to confirm a payment. BUG FIX: this used to lose to `button.secondary` (background:#fff) whenever both classes were on the same button (class="secondary btn-primary-gradient") - `button.secondary` is MORE specific (element + class beats just a class), so it silently won regardless of which rule came later in the file, leaving 3 of the 4 payment-confirm buttons plain white instead of the intended gradient. !important on just the colours that actually need to win keeps .secondary's padding/border- radius/cursor/font-size intact underneath. */ .btn-primary-gradient { background: linear-gradient(90deg, #1E40AF 0%, #06B6D4 100%) !important; color: #000000 !important; border: 1px solid #1E40AF !important; font-weight: 700; cursor: pointer; } .btn-primary-gradient:hover { opacity: 0.92; }