/* ═══════════════════════════════════════════════════════════════════ St Catherine's Hospital — Patient Portal Design System "Quiet luxury clinic": warm ivory, deep evergreen, brass accents. Fonts (load in ): https://fonts.googleapis.com/css2?family=Marcellus&family=Figtree:wght@400;500;600;700;800&display=swap ═══════════════════════════════════════════════════════════════════ */ :root { /* palette */ --ink: #13221f; --ink-soft: #33443f; --muted: #6f7f78; --faint: #9aa8a1; --evergreen-900: #0c2b24; --evergreen-800: #0e3b31; --evergreen-700: #14503f; --evergreen-600: #1c6a52; --evergreen-100: #ddeae2; --evergreen-50: #eef5f0; --brass-600: #a07424; --brass-500: #b98a2f; --brass-400: #d0a54a; --brass-100: #f3e8cf; --ivory: #faf7f1; --ivory-deep: #f3eee4; --paper: #fffdf9; --hairline: #e6dfd2; --hairline-soft: #efe9dd; --ok-600: #2e7d5b; --ok-100: #ddefe5; --warn-600: #a3641a; --warn-100: #f7e8d2; --bad-600: #b03a3a; --bad-100: #f7dede; --info-600: #2f6274; --info-100: #ddecf1; /* type */ --font-display: 'Marcellus', 'Palatino Linotype', Georgia, serif; --font-body: 'Figtree', 'Segoe UI', system-ui, sans-serif; /* shape & depth */ --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-full: 999px; --shadow-sm: 0 1px 2px rgba(19, 34, 31, .06); --shadow-md: 0 6px 24px -8px rgba(19, 34, 31, .14); --shadow-lg: 0 24px 60px -24px rgba(12, 43, 36, .30); --nav-h: 66px; --sidebar-w: 264px; --bottom-nav-h: 66px; --ease-out: cubic-bezier(.22, .8, .3, 1); } /* ── reset ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--ivory); color: var(--ink); line-height: 1.55; min-height: 100dvh; -webkit-font-smoothing: antialiased; } /* paper grain atmosphere */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(rgba(19,34,31,.028) 1px, transparent 1px); background-size: 22px 22px; } img { max-width: 100%; display: block; } a { color: var(--evergreen-700); text-decoration: none; } a:hover { color: var(--evergreen-600); } button { font-family: inherit; } h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; color: var(--evergreen-900); line-height: 1.15; } .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-600); } /* ── portal shell ──────────────────────────────────────────────── */ .pp-shell { position: relative; z-index: 1; min-height: 100dvh; } .pp-topbar { position: sticky; top: 0; z-index: 60; height: var(--nav-h); display: flex; align-items: center; gap: 14px; padding: 0 22px; background: var(--evergreen-900); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); } .pp-brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .pp-brand-mark { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--r-sm); background: linear-gradient(140deg, var(--brass-400), var(--brass-600)); display: grid; place-items: center; color: var(--evergreen-900); font-size: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); } .pp-brand-mark img { width: 26px; height: 26px; object-fit: contain; } .pp-brand-name { font-family: var(--font-display); font-size: 17px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; } .pp-brand-name small { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--brass-400); } .pp-topbar-actions { display: flex; align-items: center; gap: 8px; } .pp-iconbtn { width: 40px; height: 40px; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; font-size: 15px; display: grid; place-items: center; cursor: pointer; position: relative; transition: background .2s, transform .2s var(--ease-out); } .pp-iconbtn:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); } .pp-iconbtn .dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--brass-400); border: 2px solid var(--evergreen-900); } .pp-avatar { width: 40px; height: 40px; border-radius: var(--r-full); background: var(--evergreen-700); border: 1px solid rgba(255,255,255,.25); color: #fff; font-weight: 700; font-size: 14px; display: grid; place-items: center; cursor: pointer; overflow: hidden; } .pp-avatar img { width: 100%; height: 100%; object-fit: cover; } /* dropdown menu (avatar) */ .pp-menu { position: absolute; top: calc(var(--nav-h) - 8px); right: 16px; min-width: 220px; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 8px; z-index: 90; animation: pp-pop .18s var(--ease-out); } .pp-menu a, .pp-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--ink-soft); border: 0; background: none; cursor: pointer; border-radius: var(--r-sm); text-align: left; } .pp-menu a:hover, .pp-menu button:hover { background: var(--evergreen-50); color: var(--evergreen-800); } .pp-menu .danger { color: var(--bad-600); } .pp-menu .danger:hover { background: var(--bad-100); color: var(--bad-600); } .pp-menu hr { border: 0; border-top: 1px solid var(--hairline-soft); margin: 6px 4px; } /* layout: sidebar + main */ .pp-layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); max-width: 1440px; margin: 0 auto; } .pp-sidebar { position: sticky; top: var(--nav-h); align-self: start; height: calc(100dvh - var(--nav-h)); overflow-y: auto; padding: 26px 16px 26px 22px; border-right: 1px solid var(--hairline); background: transparent; } .pp-sidebar .pp-nav-label { font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); padding: 0 12px 10px; } .pp-navlink { display: flex; align-items: center; gap: 12px; padding: 11px 13px; margin-bottom: 2px; border-radius: var(--r-md); color: var(--ink-soft); font-size: 14.5px; font-weight: 500; border-left: 2px solid transparent; transition: background .18s, color .18s; } .pp-navlink i { width: 20px; text-align: center; font-size: 15px; color: var(--muted); transition: color .18s; } .pp-navlink:hover { background: var(--ivory-deep); color: var(--evergreen-800); } .pp-navlink:hover i { color: var(--evergreen-700); } .pp-navlink.active { background: var(--evergreen-900); color: #fff; box-shadow: var(--shadow-md); } .pp-navlink.active i { color: var(--brass-400); } .pp-main { padding: 34px 38px 90px; min-width: 0; animation: pp-rise .5s var(--ease-out); } /* mobile bottom nav */ .pp-bottomnav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--evergreen-900); border-top: 1px solid rgba(255,255,255,.1); } .pp-bottomnav .wrap { display: flex; overflow-x: auto; height: var(--bottom-nav-h); scrollbar-width: none; } .pp-bottomnav .wrap::-webkit-scrollbar { display: none; } .pp-bottomnav a { flex: 1 0 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: rgba(255,255,255,.62); font-size: 10px; font-weight: 600; } .pp-bottomnav a i { font-size: 17px; } .pp-bottomnav a.active { color: var(--brass-400); } /* ── page header / hero band ───────────────────────────────────── */ .pp-pagehead { margin-bottom: 26px; } .pp-pagehead h1 { font-size: clamp(26px, 3.4vw, 38px); margin: 4px 0 6px; } .pp-pagehead .sub { color: var(--muted); font-size: 15px; max-width: 640px; } .pp-pagehead .rule { width: 64px; height: 2px; margin-top: 16px; background: linear-gradient(90deg, var(--brass-500), transparent); } .pp-hero { position: relative; overflow: hidden; background: var(--evergreen-900); color: #fff; border-radius: var(--r-lg); padding: 30px 34px; margin-bottom: 26px; box-shadow: var(--shadow-lg); } .pp-hero::after { content: ''; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(208,165,74,.35); box-shadow: 0 0 0 40px rgba(208,165,74,.06), 0 0 0 90px rgba(208,165,74,.04); } .pp-hero h1, .pp-hero h2 { color: #fff; } .pp-hero .eyebrow { color: var(--brass-400); } .pp-hero .sub { color: rgba(255,255,255,.72); } /* ── cards ─────────────────────────────────────────────────────── */ .pp-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .pp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid var(--hairline-soft); } .pp-card-head .title { font-family: var(--font-display); font-size: 19px; color: var(--evergreen-900); } .pp-card-head .meta { font-size: 13px; color: var(--muted); } .pp-card-body { padding: 22px; } /* record card (list item) */ .pp-records { display: grid; gap: 14px; } .pp-record { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 18px 20px; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease-out); animation: pp-rise .45s var(--ease-out) backwards; } .pp-record:nth-child(1) { animation-delay: .03s; } .pp-record:nth-child(2) { animation-delay: .07s; } .pp-record:nth-child(3) { animation-delay: .11s; } .pp-record:nth-child(4) { animation-delay: .15s; } .pp-record:nth-child(5) { animation-delay: .19s; } .pp-record:hover { border-color: var(--evergreen-600); box-shadow: var(--shadow-md); transform: translateY(-2px); } .pp-record-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .pp-record-title { font-family: var(--font-display); font-size: 17px; color: var(--evergreen-900); } .pp-record-meta { font-size: 13px; color: var(--muted); margin-top: 2px; } /* field grid */ .pp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 20px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--hairline); } .pp-field-label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; } .pp-field-value { font-size: 14.5px; font-weight: 600; color: var(--ink); } /* stat tiles */ .pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; } .pp-stat { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 16px 18px; position: relative; overflow: hidden; } .pp-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brass-500); } .pp-stat .num { font-family: var(--font-display); font-size: 28px; color: var(--evergreen-900); line-height: 1.1; } .pp-stat .lbl { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; } /* ── status pills ──────────────────────────────────────────────── */ .pp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-full); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: capitalize; background: var(--evergreen-50); color: var(--evergreen-700); border: 1px solid var(--evergreen-100); white-space: nowrap; } .pp-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pp-pill.ok { background: var(--ok-100); color: var(--ok-600); border-color: transparent; } .pp-pill.warn { background: var(--warn-100); color: var(--warn-600); border-color: transparent; } .pp-pill.bad { background: var(--bad-100); color: var(--bad-600); border-color: transparent; } .pp-pill.info { background: var(--info-100); color: var(--info-600); border-color: transparent; } .pp-pill.brass { background: var(--brass-100); color: var(--brass-600); border-color: transparent; } /* ── buttons ───────────────────────────────────────────────────── */ .pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 22px; border-radius: var(--r-full); font-size: 14px; font-weight: 700; letter-spacing: .01em; border: 1px solid transparent; cursor: pointer; transition: transform .18s var(--ease-out), box-shadow .18s, background .18s, color .18s, border-color .18s; text-decoration: none; } .pp-btn:active { transform: scale(.98); } .pp-btn-primary { background: var(--evergreen-800); color: #fff; box-shadow: 0 10px 24px -10px rgba(12,43,36,.5); } .pp-btn-primary:hover { background: var(--evergreen-700); color: #fff; transform: translateY(-1px); } .pp-btn-brass { background: linear-gradient(140deg, var(--brass-400), var(--brass-600)); color: var(--evergreen-900); box-shadow: 0 10px 24px -10px rgba(160,116,36,.55); } .pp-btn-brass:hover { filter: brightness(1.06); transform: translateY(-1px); color: var(--evergreen-900); } .pp-btn-outline { background: transparent; border-color: var(--hairline); color: var(--evergreen-800); } .pp-btn-outline:hover { border-color: var(--evergreen-600); background: var(--evergreen-50); color: var(--evergreen-800); } .pp-btn-ghost { background: transparent; color: var(--muted); } .pp-btn-ghost:hover { color: var(--evergreen-800); background: var(--ivory-deep); } .pp-btn-danger { background: var(--bad-600); color: #fff; } .pp-btn-danger:hover { background: #963030; color: #fff; } .pp-btn.sm { padding: 7px 15px; font-size: 12.5px; } .pp-btn[disabled] { opacity: .55; pointer-events: none; } /* ── forms ─────────────────────────────────────────────────────── */ .pp-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px; } .pp-input, .pp-select, .pp-textarea { width: 100%; padding: 12px 15px; font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-md); outline: none; transition: border-color .18s, box-shadow .18s; } .pp-input:focus, .pp-select:focus, .pp-textarea:focus { border-color: var(--evergreen-600); box-shadow: 0 0 0 4px rgba(28,106,82,.12); } .pp-input::placeholder, .pp-textarea::placeholder { color: var(--faint); } .pp-form-row { margin-bottom: 18px; } .pp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .pp-help { font-size: 12.5px; color: var(--muted); margin-top: 6px; } .pp-error-text { font-size: 13px; font-weight: 600; color: var(--bad-600); margin-top: 6px; } /* ── modal ─────────────────────────────────────────────────────── */ .pp-modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(12, 27, 23, .55); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 20px; } .pp-modal-backdrop.open { display: flex; animation: pp-fade .2s ease; } .pp-modal { width: 100%; max-width: 560px; max-height: calc(100dvh - 60px); overflow-y: auto; background: var(--paper); border-radius: var(--r-lg); border: 1px solid var(--hairline); box-shadow: var(--shadow-lg); animation: pp-pop .25s var(--ease-out); } .pp-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--hairline-soft); } .pp-modal-head .title { font-family: var(--font-display); font-size: 20px; color: var(--evergreen-900); } .pp-modal-body { padding: 24px; } .pp-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--hairline-soft); } .pp-close { width: 34px; height: 34px; border-radius: var(--r-full); border: 1px solid var(--hairline); background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; } .pp-close:hover { color: var(--bad-600); border-color: var(--bad-600); } /* ── toasts ────────────────────────────────────────────────────── */ .pp-toasts { position: fixed; z-index: 200; bottom: calc(var(--bottom-nav-h) + 18px); right: 18px; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 36px)); } @media (min-width: 901px) { .pp-toasts { bottom: 22px; } } .pp-toast { display: flex; align-items: flex-start; gap: 12px; background: var(--evergreen-900); color: #fff; border-radius: var(--r-md); padding: 14px 16px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg); border-left: 3px solid var(--brass-400); animation: pp-toast-in .3s var(--ease-out); } .pp-toast.ok { border-left-color: #4fbf8f; } .pp-toast.bad { border-left-color: #e07070; } .pp-toast i { margin-top: 2px; color: var(--brass-400); } .pp-toast.ok i { color: #4fbf8f; } .pp-toast.bad i { color: #e07070; } .pp-toast.out { animation: pp-toast-out .3s ease forwards; } /* ── skeletons / empty ─────────────────────────────────────────── */ .pp-skeleton { border-radius: var(--r-md); background: linear-gradient(100deg, var(--ivory-deep) 40%, #fbf8f1 50%, var(--ivory-deep) 60%); background-size: 200% 100%; animation: pp-shimmer 1.4s infinite linear; min-height: 84px; } .pp-empty { text-align: center; padding: 56px 20px; color: var(--muted); } .pp-empty .orb { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--evergreen-50); border: 1px solid var(--evergreen-100); display: grid; place-items: center; font-size: 22px; color: var(--evergreen-600); } .pp-empty .t { font-family: var(--font-display); font-size: 18px; color: var(--ink-soft); margin-bottom: 4px; } /* ── tables (fallback) ─────────────────────────────────────────── */ .pp-table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-md); } .pp-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--paper); } .pp-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 12px 16px; border-bottom: 1px solid var(--hairline); background: var(--ivory); } .pp-table td { padding: 13px 16px; border-bottom: 1px solid var(--hairline-soft); } .pp-table tr:last-child td { border-bottom: 0; } .pp-table tr:hover td { background: var(--evergreen-50); } /* ── chat / conversation ───────────────────────────────────────── */ .pp-chat { display: flex; flex-direction: column; gap: 14px; } .pp-bubble { max-width: 78%; padding: 13px 17px; border-radius: var(--r-lg); font-size: 14.5px; animation: pp-rise .35s var(--ease-out) backwards; } .pp-bubble .who { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; opacity: .75; } .pp-bubble .when { font-size: 11px; opacity: .6; margin-top: 6px; } .pp-bubble.them { align-self: flex-start; background: var(--paper); border: 1px solid var(--hairline); border-bottom-left-radius: var(--r-sm); } .pp-bubble.me { align-self: flex-end; background: var(--evergreen-800); color: #fff; border-bottom-right-radius: var(--r-sm); } /* ── misc utilities ────────────────────────────────────────────── */ .pp-flex { display: flex; align-items: center; gap: 10px; } .pp-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .pp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .pp-mt { margin-top: 18px; } .pp-mb { margin-bottom: 18px; } .pp-muted { color: var(--muted); } .pp-divider { border: 0; border-top: 1px solid var(--hairline-soft); margin: 18px 0; } .pp-money { font-variant-numeric: tabular-nums; font-weight: 700; } /* ── animations ────────────────────────────────────────────────── */ @keyframes pp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes pp-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pp-pop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } } @keyframes pp-shimmer { to { background-position: -200% 0; } } @keyframes pp-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } @keyframes pp-toast-out { to { opacity: 0; transform: translateX(24px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── responsive ────────────────────────────────────────────────── */ @media (max-width: 900px) { .pp-layout { grid-template-columns: 1fr; } .pp-sidebar { display: none; } .pp-bottomnav { display: block; } .pp-main { padding: 22px 16px calc(var(--bottom-nav-h) + 40px); } .pp-hero { padding: 24px 20px; } .pp-form-grid, .pp-grid-2, .pp-grid-3 { grid-template-columns: 1fr; } .pp-bubble { max-width: 92%; } }