/* * modules/modules.css * Styles for all dashboard module includes. * Load once in the parent page . * * Covers: * - modules/certifications.php (.certs-*, .cert-*, .m-*) * - modules/streak.php (.streak-*) * - modules/searchQuiz.php (.sq-*) */ /* ═══════════════════════════════════════════════════════════════ STREAK MODULE (modules/streak.php) ═══════════════════════════════════════════════════════════════ */ .streak-module { background: #ffffff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.07); margin-bottom: 20px; overflow: hidden; font-family: 'DM Sans', 'Segoe UI', sans-serif; } /* Header */ .streak-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #032D60; color: #fff; } .streak-header-title { display: flex; align-items: center; gap: 8px; font-family: 'Sora', 'Segoe UI', sans-serif; font-weight: 600; font-size: 0.9rem; } .streak-header-title i { color: #f97316; } .streak-live-badge { background: rgba(249,115,22,0.18); border: 1px solid rgba(249,115,22,0.35); color: #fdba74; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; letter-spacing: 0.02em; } /* Body */ .streak-body { padding: 18px; } /* Week row */ .streak-week { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-bottom: 16px; } .streak-day { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; } .streak-dot { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #e4e9f0; background: #f8faff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: transparent; transition: all 0.2s ease; } /* Done day */ .streak-day.done .streak-dot { background: #22c55e; border-color: #16a34a; color: #fff; box-shadow: 0 2px 8px rgba(34,197,94,0.35); } /* Today highlight (not yet done) */ .streak-day.today:not(.done) .streak-dot { border-color: #f97316; background: rgba(249,115,22,0.08); } /* Today + done */ .streak-day.today.done .streak-dot { box-shadow: 0 0 0 3px rgba(249,115,22,0.25), 0 2px 8px rgba(34,197,94,0.35); } .streak-day-label { font-size: 0.7rem; font-weight: 600; color: #8a9ab0; text-transform: uppercase; letter-spacing: 0.05em; } .streak-day.today .streak-day-label { color: #f97316; } .streak-day.done .streak-day-label { color: #16a34a; } /* Stats row */ .streak-stats { display: flex; align-items: center; justify-content: center; gap: 0; padding-top: 14px; border-top: 1px solid #f0f2f5; } .streak-stat { flex: 1; text-align: center; padding: 6px 0; } .streak-stat-value { font-family: 'Sora', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.6rem; color: #032D60; line-height: 1; margin-bottom: 4px; } .streak-stat-label { font-size: 0.72rem; font-weight: 600; color: #8a9ab0; text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; justify-content: center; gap: 4px; } .streak-stat-label i { font-size: 0.7rem; } .streak-stat-divider { width: 1px; height: 40px; background: #e4e9f0; flex-shrink: 0; } @media (max-width: 480px) { .streak-dot { width: 28px; height: 28px; font-size: 0.65rem; } .streak-day-label { font-size: 0.6rem; } } ═══════════════════════════════════════════════════════════════ */ .certs-module { background: #ffffff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.07); margin-bottom: 20px; overflow: hidden; font-family: 'DM Sans', 'Segoe UI', sans-serif; } /* Panel header */ .certs-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #032D60; color: #fff; } .certs-header-title { display: flex; align-items: center; gap: 9px; font-family: 'Sora', 'Segoe UI', sans-serif; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; } .certs-header-title i { color: #00A1E0; font-size: 1rem; } .certs-nav { display: flex; gap: 6px; } .certs-nav-btn { width: 30px; height: 30px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: #fff; font-size: 0.85rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; line-height: 1; } .certs-nav-btn:hover { background: rgba(0,161,224,0.4); border-color: #00A1E0; } /* Slider viewport */ .certs-body { padding: 16px 18px; } .certs-viewport { overflow: hidden; position: relative; } .certs-track { display: flex; gap: 12px; transition: transform 0.35s cubic-bezier(0.25,1,0.5,1); will-change: transform; } /* Cert card */ .cert-card { flex: 0 0 calc(33.333% - 8px); min-width: 110px; cursor: pointer; border-radius: 10px; overflow: hidden; border: 2px solid #e4e9f0; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; background: #f8faff; position: relative; } .cert-card:hover { border-color: #00A1E0; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,161,224,0.18); } .cert-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; pointer-events: none; } .cert-card-label { padding: 7px 8px; font-size: 0.72rem; font-weight: 600; color: #032D60; text-align: center; line-height: 1.3; background: #fff; border-top: 1px solid #e4e9f0; } /* Empty state */ .certs-empty { text-align: center; padding: 24px 12px; color: #8a9ab0; font-size: 0.85rem; } .certs-empty i { display: block; font-size: 1.8rem; margin-bottom: 8px; color: #c0ccda; } /* ── Modal overlay ──────────────────────────────────────────── */ .cert-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(3,45,96,0.7); z-index: 9999; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); } .cert-modal-overlay.open { display: flex; } .cert-modal-box { background: #fff; border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,0.35); width: 100%; max-width: 860px; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; } .cert-modal-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #e4e9f0; } .cert-modal-topbar-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.95rem; color: #032D60; } .cert-modal-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #e4e9f0; background: none; cursor: pointer; font-size: 1.1rem; color: #8a9ab0; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; } .cert-modal-close:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; } /* Certificate canvas inside modal */ .cert-canvas-wrap { padding: 20px 20px 0; } #certModalCanvas { width: 100%; aspect-ratio: 1.414 / 1; background: #fff; position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 4px 24px rgba(0,0,0,0.12); font-family: 'DM Sans', sans-serif; } /* ── Certificate canvas internals (m-* prefix) ────────────── */ .m-top-bar, .m-bottom-bar { position:absolute;left:0;right:0;height:8px;background:linear-gradient(90deg,#00A1E0,#032D60,#00A1E0); } .m-top-bar { top:0; } .m-bottom-bar { bottom:0; } .m-left-bar, .m-right-bar { position:absolute;top:0;bottom:0;width:8px;background:linear-gradient(180deg,#00A1E0,#032D60,#00A1E0); } .m-left-bar { left:0; } .m-right-bar { right:0; } .m-outer-border { position:absolute;inset:15px;border:1.5px solid #00A1E0;pointer-events:none; } .m-inner-border { position:absolute;inset:23px;border:0.5px solid rgba(0,161,224,0.22);pointer-events:none; } .m-corner { position:absolute;width:40px;height:40px; } .m-corner svg { width:40px;height:40px; } .m-tl { top:0;left:0; } .m-tr { top:0;right:0;transform:scaleX(-1); } .m-bl { bottom:0;left:0;transform:scaleY(-1); } .m-br { bottom:0;right:0;transform:scale(-1); } .m-watermark { position:absolute;bottom:12%;right:4%; opacity:0.04;width:32%;pointer-events:none; } .m-body { position:absolute;inset:30px; display:flex;flex-direction:column; align-items:center;justify-content:space-between; padding:clamp(8px,2%,20px) clamp(20px,6%,64px) clamp(8px,1.5%,16px); text-align:center; } .m-header { width:100%;display:flex;flex-direction:column;align-items:center;gap:3px; } .m-sf-logo { display:flex;align-items:center;gap:8px;margin-bottom:2px; } .m-sf-cloud { width:clamp(22px,3.5%,36px);flex-shrink:0; } .m-sf-word { font-family:'Sora','Segoe UI',sans-serif; font-weight:700;font-size:clamp(12px,2vw,20px); color:#032D60;letter-spacing:0.3px; } .m-rule { width:140px;height:1.5px;background:linear-gradient(90deg,transparent,#00A1E0,transparent);margin:2px 0; } .m-cert-label { font-size:clamp(6px,0.9vw,9px);letter-spacing:4px;text-transform:uppercase;color:#00A1E0;font-weight:600; } .m-cert-of { font-family:'Playfair Display',Georgia,serif; font-size:clamp(14px,2.5vw,26px);font-weight:700;color:#032D60;line-height:1; } .m-middle { width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(3px,0.8%,8px); } .m-presented { font-size:clamp(7px,1vw,10px);color:#6b87a0;letter-spacing:1.5px;text-transform:uppercase; } .m-name { font-family:'Playfair Display',Georgia,serif; font-size:clamp(16px,3.8vw,38px);font-weight:700;color:#032D60;line-height:1.1; } .m-name-line { display:block;width:100%;height:2px;margin-top:4px; background:linear-gradient(90deg,transparent,#00A1E0 30%,#FF6B35 50%,#00A1E0 70%,transparent); border-radius:2px; } .m-desc { font-size:clamp(7px,0.95vw,10px);color:#6b87a0;line-height:1.6;max-width:440px; } .m-course-box { background:linear-gradient(135deg,#032D60,#0d4a8c); border-radius:4px; padding:clamp(5px,1%,10px) clamp(16px,4%,36px); position:relative;overflow:hidden; } .m-course-box::after { content:'';position:absolute;inset:0; background:radial-gradient(ellipse at 30% 50%,rgba(0,161,224,0.15),transparent 70%); } .m-course-name { font-family:'Playfair Display',Georgia,serif; font-size:clamp(11px,2vw,20px);font-weight:700;color:#fff; position:relative;z-index:1;line-height:1.3; } .m-footer { width:100%;display:flex;align-items:flex-end;justify-content:space-between; } .m-seal { display:flex;flex-direction:column;align-items:center;gap:3px; } .m-seal-ring { width:clamp(42px,6%,60px);height:clamp(42px,6%,60px); border-radius:50%; background:linear-gradient(135deg,#FFD700,#FFA500); border:2px solid #DAA520; display:flex;align-items:center;justify-content:center; box-shadow:0 2px 8px rgba(218,165,32,0.4); } .m-seal-inner { width:76%;height:76%;border-radius:50%; background:linear-gradient(135deg,#B8860B,#DAA520); border:1px solid rgba(255,255,255,0.3); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; } .m-seal-star { color:#fff;font-size:clamp(9px,1.3vw,14px);line-height:1; } .m-seal-text { font-size:clamp(4px,0.6vw,6.5px);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;line-height:1; } .m-seal-cap { font-size:clamp(5px,0.75vw,8px);letter-spacing:1px;text-transform:uppercase;color:#6b87a0;font-weight:600; } .m-sig, .m-date { display:flex;flex-direction:column;align-items:center;gap:2px; } .m-sig-line { width:clamp(70px,10%,110px);height:1px;background:#032D60;margin-bottom:3px; } .m-sig-name { font-size:clamp(6px,0.85vw,9.5px);font-weight:600;color:#032D60;letter-spacing:0.3px; } .m-sig-role { font-size:clamp(5px,0.75vw,8px);color:#6b87a0; } .m-date-line{ width:clamp(60px,8%,90px);height:1px;background:#032D60;margin-bottom:3px; } .m-date-val { font-size:clamp(6px,0.85vw,9.5px);font-weight:600;color:#032D60; } .m-date-lbl { font-size:clamp(5px,0.75vw,8px);color:#6b87a0; } /* Modal action bar */ .cert-modal-actions { display: flex; gap: 10px; padding: 14px 20px 18px; flex-wrap: wrap; } .cert-modal-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 8px; font-family: 'DM Sans','Segoe UI',sans-serif; font-size: 0.85rem; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; } .cert-modal-btn.img { background: rgba(0,161,224,0.1); color: #00A1E0; border: 1px solid rgba(0,161,224,0.25); } .cert-modal-btn.img:hover { background: #00A1E0; color: #fff; } .cert-modal-btn.pdf { background: rgba(239,68,68,0.08); color: #dc2626; border: 1px solid rgba(239,68,68,0.2); } .cert-modal-btn.pdf:hover { background: #ef4444; color: #fff; } /* ═══════════════════════════════════════════════════════════════ SEARCH QUIZ MODULE (modules/searchQuiz.php) ═══════════════════════════════════════════════════════════════ */ .sq-module { background: #ffffff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.07); margin-bottom: 20px; overflow: hidden; font-family: 'DM Sans', 'Segoe UI', sans-serif; } /* Search form area */ .sq-form-wrap { padding: 16px 18px; } .sq-form { display: flex; gap: 8px; align-items: center; } .sq-input-wrap { position: relative; flex: 1; } .sq-input { width: 100%; padding: 9px 14px 9px 38px; border: 2px solid #e4e9f0; border-radius: 8px; font-family: 'DM Sans', 'Segoe UI', sans-serif; font-size: 0.875rem; color: #0f1923; background: #fff; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .sq-input:focus { border-color: #00A1E0; } .sq-input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #b0bec8; font-size: 0.8rem; pointer-events: none; transition: color 0.2s; } .sq-input:focus ~ .sq-input-icon { color: #00A1E0; } .sq-search-btn { padding: 9px 16px; background: #032D60; color: #fff; border: none; border-radius: 8px; font-family: 'Sora', 'Segoe UI', sans-serif; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s; display: flex; align-items: center; gap: 6px; } .sq-search-btn:hover { background: #00A1E0; } .sq-clear-btn { padding: 9px 12px; background: none; border: 2px solid #e4e9f0; border-radius: 8px; font-size: 0.78rem; font-weight: 600; color: #8a9ab0; cursor: pointer; white-space: nowrap; transition: all 0.2s; text-decoration: none; display: flex; align-items: center; gap: 5px; } .sq-clear-btn:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.05); } /* Results panel */ .sq-results { border-top: 1px solid #f0f2f5; } .sq-results-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: #f8faff; border-bottom: 1px solid #e4e9f0; } .sq-results-label { font-size: 0.78rem; font-weight: 600; color: #5a6a7a; display: flex; align-items: center; gap: 6px; } .sq-results-label i { color: #00A1E0; } .sq-results-count { font-size: 0.72rem; color: #8a9ab0; background: #e4e9f0; padding: 2px 8px; border-radius: 99px; font-weight: 600; } /* Result rows */ .sq-result-row { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid #f0f2f5; transition: background 0.15s; } .sq-result-row:last-child { border-bottom: none; } .sq-result-row:hover { background: #f8faff; } .sq-result-name { flex: 1; font-size: 0.875rem; color: #0f1923; line-height: 1.4; } .sq-result-name mark { background: #fef08a; color: #78350f; font-weight: 700; border-radius: 2px; padding: 0 1px; } .sq-view-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; background: rgba(0,161,224,0.1); color: #00A1E0; border: 1px solid rgba(0,161,224,0.25); border-radius: 6px; font-size: 0.75rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: all 0.2s; flex-shrink: 0; } .sq-view-btn:hover { background: #00A1E0; color: #fff; } /* Empty / no results */ .sq-empty { padding: 20px 18px; text-align: center; font-size: 0.85rem; color: #8a9ab0; border-top: 1px solid #f0f2f5; } .sq-empty i { display: block; font-size: 1.4rem; margin-bottom: 8px; color: #c0ccda; } /* Pagination */ .sq-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 18px; border-top: 1px solid #f0f2f5; flex-wrap: wrap; } .sq-page-btns { display: flex; gap: 4px; flex-wrap: wrap; } .sq-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 6px; font-size: 0.78rem; font-weight: 600; border: 1px solid #e4e9f0; color: #5a6a7a; background: #fff; text-decoration: none; transition: all 0.15s; } .sq-page-btn:hover:not(.active):not(.disabled) { border-color: #00A1E0; color: #00A1E0; } .sq-page-btn.active { background: #032D60; border-color: #032D60; color: #fff; } .sq-page-btn.disabled { opacity: 0.35; pointer-events: none; } .sq-advanced-link { font-size: 0.75rem; color: #8a9ab0; text-decoration: none; display: flex; align-items: center; gap: 4px; transition: color 0.2s; } .sq-advanced-link:hover { color: #00A1E0; } /* ── Guest prompt module ── */ .pts-guest-prompt { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 24px; gap: 12px; } .pts-guest-prompt-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #6b7a99; margin-bottom: 4px; } .pts-guest-prompt h3 { margin: 0; font-size: 1rem; font-weight: 600; color: #e2e8f0; } .pts-guest-prompt p { margin: 0; font-size: 0.82rem; color: #8a95aa; line-height: 1.55; } .pts-guest-prompt-perks { list-style: none; padding: 0; margin: 4px 0 0; width: 100%; text-align: left; display: flex; flex-direction: column; gap: 7px; } .pts-guest-prompt-perks li { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #c9d1e0; } .pts-guest-prompt-perks li i { color: #4f7ef7; font-size: 0.8rem; flex-shrink: 0; } .pts-guest-prompt-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 24px; border-radius: 8px; background: var(--primary, #4f7ef7); color: #fff !important; font-size: 0.85rem; font-weight: 600; text-decoration: none !important; transition: opacity 0.15s, transform 0.15s; } .pts-guest-prompt-btn:hover { opacity: 0.88; transform: translateY(-1px); }