/* ═══════════════════════════════════════════════════════ MEDLINK — privacy-consent.css Data Privacy Consent Modal · matches xstyle.css tokens Add to on register.html and index.html ═══════════════════════════════════════════════════════ */ /* ── Overlay ─────────────────────────────────────────── */ .consent-overlay { position: fixed; inset: 0; z-index: 10500; background: rgba(53, 120, 112, 0.35); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .consent-overlay.active { opacity: 1; pointer-events: all; } /* ── Dialog card ─────────────────────────────────────── */ .consent-dialog { background: #fff; border-radius: 24px; box-shadow: 0 24px 72px rgba(74, 157, 150, 0.22), 0 4px 20px rgba(0,0,0,0.06); width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; transform: translateY(28px) scale(0.97); transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid rgba(125, 211, 201, 0.25); } .consent-overlay.active .consent-dialog { transform: translateY(0) scale(1); } /* ── Header ──────────────────────────────────────────── */ .consent-header { background: linear-gradient(135deg, #7dd3c9 0%, #5bc0b5 50%, #4a9d96 100%); padding: 26px 28px 22px; position: relative; overflow: hidden; flex-shrink: 0; } .consent-header::after { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,0.07); bottom: -90px; right: -50px; pointer-events: none; } .consent-header-top { display: flex; align-items: flex-start; gap: 14px; } .consent-icon-wrap { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; background: rgba(255,255,255,0.22); border: 1.5px solid rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; } .consent-header h2 { font-family: 'Lora', Georgia, serif; font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0 0 4px; line-height: 1.2; } .consent-header p { font-size: 0.83rem; color: rgba(255,255,255,0.82); margin: 0; line-height: 1.4; } .consent-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 13px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.28); border-radius: 50px; padding: 4px 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.6px; color: rgba(255,255,255,0.92); text-transform: uppercase; } /* ── Body (scrollable) ───────────────────────────────── */ .consent-body { padding: 22px 28px; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: rgba(91,192,181,0.35) transparent; } .consent-body::-webkit-scrollbar { width: 4px; } .consent-body::-webkit-scrollbar-thumb { background: rgba(91,192,181,0.4); border-radius: 4px; } /* ── Section blocks ──────────────────────────────────── */ .consent-section { margin-bottom: 16px; border: 1px solid rgba(125, 211, 201, 0.22); border-radius: 14px; overflow: hidden; } .consent-section-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #f0fafa; cursor: pointer; user-select: none; transition: background 0.2s; } .consent-section-header:hover { background: #e4f7f5; } .consent-section-icon { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; } .csi-blue { background: rgba(91,192,181,0.15); color: #4a9d96; } .csi-rose { background: rgba(232,165,152,0.18); color: #c0604e; } .csi-amber { background: rgba(212,168,83,0.18); color: #a07828; } .csi-teal { background: rgba(74,157,150,0.15); color: #357870; } .consent-section-title { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.875rem; color: #50372c; flex: 1; } .consent-section-chevron { font-size: 0.75rem; color: #7a6355; transition: transform 0.25s; } .consent-section.open .consent-section-chevron { transform: rotate(180deg); } .consent-section-body { padding: 0 16px; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.25s; font-size: 0.84rem; line-height: 1.65; color: #6b5349; } .consent-section.open .consent-section-body { max-height: 400px; padding: 12px 16px 14px; } .consent-section-body ul { margin: 8px 0 0 4px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; } .consent-section-body ul li::before { content: '·'; color: #5bc0b5; font-weight: 900; margin-right: 7px; font-size: 1rem; } /* ── Checkbox row ────────────────────────────────────── */ .consent-checks { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; } .consent-check-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(125,211,201,0.28); background: #f9fefe; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .consent-check-row:hover { border-color: rgba(91,192,181,0.55); background: #f0fafa; } .consent-check-row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; accent-color: #5bc0b5; cursor: pointer; } .consent-check-label { font-size: 0.84rem; line-height: 1.55; color: #50372c; cursor: pointer; } .consent-check-label strong { color: #357870; } .consent-check-label a { color: #4a9d96; font-weight: 600; text-decoration: none; } .consent-check-label a:hover { text-decoration: underline; } /* Required asterisk */ .consent-required { font-size: 0.73rem; font-weight: 700; color: #c0392b; vertical-align: super; margin-left: 2px; } /* ── Footer ──────────────────────────────────────────── */ .consent-footer { padding: 16px 28px 22px; border-top: 1px solid rgba(125,211,201,0.2); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; flex-wrap: wrap; background: #fafffe; } .consent-footer-note { font-size: 0.73rem; color: #7a6355; line-height: 1.4; flex: 1; min-width: 140px; } .consent-footer-note i { color: #5bc0b5; margin-right: 4px; } .consent-btns { display: flex; gap: 10px; align-items: center; } .btn-consent-decline { background: none; border: 1.5px solid rgba(125,211,201,0.4); border-radius: 50px; padding: 9px 20px; font-size: 0.84rem; font-weight: 600; color: #7a6355; cursor: pointer; transition: all 0.22s; white-space: nowrap; font-family: 'DM Sans', sans-serif; } .btn-consent-decline:hover { border-color: rgba(91,192,181,0.7); color: #50372c; background: #f0fafa; } .btn-consent-accept { background: linear-gradient(135deg, #7dd3c9 0%, #5bc0b5 50%, #4a9d96 100%); border: none; border-radius: 50px; padding: 9px 24px; font-size: 0.84rem; font-weight: 700; color: #fff; cursor: pointer; transition: all 0.22s; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 4px 16px rgba(91,192,181,0.32); font-family: 'DM Sans', sans-serif; } .btn-consent-accept:hover { transform: translateY(-1px); box-shadow: 0 7px 22px rgba(91,192,181,0.42); } .btn-consent-accept:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } /* ── Navbar fix: scrolled state profile text ─────────── */ /* When page is scrolled, the nav bg becomes near-white. Force the patient toggle text + avatar to use dark colors. */ .navbar-custom.scrolled #navPatient > a { color: var(--warm-text, #50372c) !important; background: rgba(91,192,181,0.12) !important; } .navbar-custom.scrolled .patient-avatar { background: var(--teal-pale, #c8eeeb) !important; color: var(--teal-deep, #357870) !important; border-color: var(--teal-light, #7dd3c9) !important; } /* ── Responsive ──────────────────────────────────────── */ @media (max-width: 600px) { .consent-dialog { border-radius: 18px; max-height: 92vh; } .consent-header { padding: 20px 20px 18px; } .consent-body { padding: 16px 18px; } .consent-footer { padding: 14px 18px 18px; flex-direction: column; align-items: stretch; } .consent-btns { width: 100%; justify-content: flex-end; } }