/* ════════════════════════════════════════════════════════════════════════ Taiwhenua Pharmacy — shared portal theme Tokens lifted verbatim from the marketing site (index.html :root) so the staff portal reads as one continuous brand. Fonts load via the same Google Fonts link in each portal page's . ════════════════════════════════════════════════════════════════════════ */ :root { /* ── Light corporate palette (refined gold on warm off-white) ────────────── The token NAMES are kept for backward compatibility with the many rules across theme.css + app.css that reference them. Their ROLES now map to a LIGHT theme: --black = page background (base) --dark-surface = card surface --charcoal = elevated surface --white = primary text (ink) --off-white = secondary text --muted = tertiary/muted text Text-on-a-gold-fill uses the new --on-accent token, NOT --black. */ /* Accent — deep, readable gold */ --gold: #9A7A2E; /* borders, focus, filled-button background */ --gold-light: #866321; /* accent TEXT: headings, links, pills (~5:1) */ --gold-dark: #6E521A; /* darker accent / hover */ --gold-faint: #F3ECD9; /* faint gold wash: hovers, active nav, badges */ /* Neutrals (light) */ --black: #F4F3EE; /* page background (warm off-white) */ --charcoal: #FFFFFF; /* elevated surface: modals, table head, toast */ --dark-surface: #FFFFFF; /* card surface */ --white: #201E18; /* primary text (near-black, warm) */ --off-white: #3E3B33; /* secondary text */ --muted: #6C685D; /* tertiary / muted text (>=4.5:1 on white) */ --line: #E4E0D4; /* borders */ --line-soft: #EDEAE1; /* faint dividers */ --on-accent: #FFFFFF; /* text/icons on a gold-filled control */ --card-shadow: 0 1px 2px rgba(32, 30, 24, 0.05), 0 2px 6px rgba(32, 30, 24, 0.05); /* Status */ --ok: #2E7D4F; --warn: #9A7A2E; --warn-light: #B4552A; --danger: #C0392B; /* Type — clean sans throughout (corporate) */ --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--black); color: var(--white); font-weight: 400; -webkit-font-smoothing: antialiased; min-height: 100vh; line-height: 1.6; } a { color: var(--gold-light); text-decoration: none; } a:hover { color: var(--gold-dark); } /* ─── Koru pattern background (matches marketing site) ─── */ .koru-bg { position: fixed; inset: 0; opacity: 0.035; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 10 C30 10 10 30 10 60 C10 90 30 110 60 110 C80 110 90 95 90 80 C90 65 80 55 65 55 C55 55 50 62 50 70 C50 78 55 82 60 82' stroke='%23C9A84C' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-size: 140px 140px; } /* ─── Top navigation ─── */ .pnav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 2rem; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); box-shadow: 0 1px 3px rgba(32, 30, 24, 0.05); } .pnav-logo { display: flex; align-items: center; gap: 0.6rem; } .pnav-logo img { width: 38px; height: 38px; object-fit: contain; } .pnav-logo .main { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--gold-light); letter-spacing: 0.06em; line-height: 1; } .pnav-logo .sub { font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .pnav-links { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; } .pnav-links a { color: var(--white); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; transition: opacity .2s, color .2s; white-space: nowrap; } .pnav-links a:hover, .pnav-links a.active { opacity: 1; color: var(--gold-light); } .pnav-links a.active { border-bottom: 1px solid var(--gold); padding-bottom: 2px; } .pnav-meta { display: flex; align-items: center; gap: 0.9rem; font-size: 0.72rem; color: var(--muted); } .pnav-meta .who { color: var(--off-white); letter-spacing: 0.04em; } /* ─── Layout ─── */ .wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 2.5rem 2rem 4rem; } .page-head { margin-bottom: 2rem; } .eyebrow { font-size: 0.62rem; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; } .eyebrow::before { content: ''; width: 2.2rem; height: 0.5px; background: var(--gold); display: block; } .title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; color: var(--white); } .title em { font-style: normal; color: var(--gold-light); } .lead { color: var(--muted); max-width: 60ch; margin-top: 0.6rem; font-size: 0.95rem; } /* ─── Cards / grid ─── */ .grid { display: grid; gap: 1.25rem; } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .card { background: var(--dark-surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem; box-shadow: var(--card-shadow); } .card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--white); margin-bottom: 0.4rem; letter-spacing: -0.01em; } .card .sub { color: var(--muted); font-size: 0.82rem; } .card-link { display: block; transition: border-color .2s, box-shadow .2s, transform .2s; } .card-link:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(32, 30, 24, 0.10); } .card-link .arrow { color: var(--gold); margin-top: 1rem; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; } /* ─── Stats ─── */ .stat .label { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .stat .value { font-family: var(--font-display); font-size: 2.4rem; color: var(--white); line-height: 1.1; margin-top: 0.3rem; } .stat .value small { font-size: 1rem; color: var(--muted); } /* ─── Buttons ─── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.72rem 1.5rem; border: 1px solid var(--gold); border-radius: 6px; background: transparent; color: var(--gold-light); cursor: pointer; transition: all .18s; } .btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--on-accent); } .btn.solid { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--on-accent); } .btn.solid:hover { background: var(--gold); border-color: var(--gold); } .btn.ghost { border-color: var(--line); color: var(--off-white); background: #fff; } .btn.ghost:hover { border-color: var(--gold); background: var(--gold-faint); color: var(--gold-dark); } .btn.danger { border-color: var(--danger); color: var(--danger); background: #fff; } .btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; } .btn.lg { font-size: 0.85rem; padding: 1.1rem 2.6rem; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-row { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* ─── Forms ─── */ .field { margin-bottom: 1rem; } .field label { display: block; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; font-weight: 600; } .input, select.input, textarea.input { width: 100%; background: #fff; color: var(--white); border: 1px solid #D8D3C6; border-radius: 6px; padding: 0.68rem 0.85rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 400; } .input::placeholder { color: #A8A296; } .input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(154, 122, 46, 0.15); } .row { display: flex; gap: 1rem; flex-wrap: wrap; } .row > * { flex: 1 1 160px; } /* ─── Tables ─── */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--card-shadow); } table.table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } table.table th, table.table td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line-soft); white-space: nowrap; } table.table th { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: #F7F5EF; position: sticky; top: 0; } table.table tr:hover td { background: var(--gold-faint); } table.table td.num { text-align: right; font-variant-numeric: tabular-nums; } /* ─── Pills / badges ─── */ .pill { display: inline-block; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: #F7F5EF; } .pill.ok { color: var(--ok); border-color: rgba(46,125,79,0.35); background: rgba(46,125,79,0.08); } .pill.live { color: var(--gold-dark); border-color: rgba(154,122,46,0.4); background: var(--gold-faint); } .pill.edited { color: var(--gold-dark); border-color: rgba(154,122,46,0.4); background: var(--gold-faint); } /* ─── Toast ─── */ .toast-host { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; } .toast { background: var(--charcoal); border: 1px solid var(--line); color: var(--white); border-left: 3px solid var(--gold); padding: 0.8rem 1.4rem; border-radius: 6px; font-size: 0.85rem; letter-spacing: 0.01em; box-shadow: 0 8px 28px rgba(32,30,24,0.18); animation: toastin .25s ease; } .toast.err { border-color: var(--danger); } .toast.ok { border-color: var(--ok); } @keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ─── Footer ─── */ .pfoot { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 1.5rem 2rem; text-align: center; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.04em; } .pfoot .tag { font-family: var(--font-display); font-style: italic; color: var(--gold-dark); font-size: 1rem; } /* ─── Utilities ─── */ .muted { color: var(--muted); } .center { text-align: center; } .mt-1 { margin-top: 0.75rem; } .mt-2 { margin-top: 1.5rem; } .mt-3 { margin-top: 2.25rem; } .hidden { display: none !important; } .spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -0.15em; } @keyframes spin { to { transform: rotate(360deg); } } /* ─── Responsive ─── */ @media (max-width: 860px) { .pnav { flex-wrap: wrap; padding: 0.8rem 1.1rem; } .pnav-links { gap: 1rem; order: 3; width: 100%; } .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } .wrap { padding: 1.75rem 1.1rem 3rem; } }