/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #021412 #153634 #f3faf9 #0f8f83 #0d6f65 #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #f3faf9; --surface: #fafdfc; --surface-2: #e7efed; --border: #d1dad9; --border-strong: #abb5b4; --ink: #153634; --muted: #5d6f6f; --accent: #0f8f83; --accent-hover: #0d7a6f; --accent-ink: #021412; --accent-text: #0d6f65; --accent-strong: #0c6f66; --accent-soft: #d3ebe8; --accent-border: #8ccac4; --success: #15803d; --success-ink: #ffffff; --success-soft: #d8ebe2; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #ebe6dc; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #ecdfde; --danger-strong: #b91c1c; --chart-1: #0f8f83; --chart-2: #3891d4; --chart-3: #764fa0; --chart-4: #d16c87; --chart-5: #8c5204; --chart-6: #7d9b38; --font-display: "Outfit Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Nunito Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-sans: "Nunito Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 700; --display-tracking: -0.02em; --eyebrow-tracking: 0.10em; --look: playful; --radius-sm: 12px; --radius: 24px; --radius-lg: 28px; --radius-xl: 32px; --radius-btn: 999px; --radius-card: 28px; --radius-input: 16px; --border-w: 0px; --border-strong-w: 2px; --shadow-card: 0 6px 20px color-mix(in srgb, var(--accent) 14%, transparent); --shadow-raised: 0 12px 36px color-mix(in srgb, var(--accent) 20%, transparent); --shadow-btn: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent); --section-y: 7rem; --card-pad: 2rem; --caps: none; --caps-tracking: 0.04em; --btn-weight: 700; --measure: 65ch; } /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #02110f; --surface: #1b2927; --surface-2: #0f1d1b; --border: #253231; --border-strong: #4e5857; --ink: #f3faf9; --muted: #939d9b; --accent: #0f8f83; --accent-hover: #33a096; --accent-ink: #021412; --accent-text: #34a096; --accent-strong: #34a096; --accent-soft: #052d29; --accent-border: #084a43; --success: #15803d; --success-ink: #ffffff; --success-soft: #062919; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #29200e; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2a1312; --danger-strong: #d16969; --chart-1: #0f8f83; --chart-2: #469ee1; --chart-3: #926abe; --chart-4: #d16c87; --chart-5: #b56d12; --chart-6: #83a13f; } /* ==================================================================== * app.css — Careflow's own styling. * * Careflow is a mobile-style clinical tool: a fixed dark bottom tab bar * with a floating centre action, a gradient banner, pastel category cards * and rounded, photo-led screens. None of that exists in the frozen * component vocabulary, so it is written here, in full, in tokens only. * ==================================================================== */ /* ---- app frame ------------------------------------------------------- */ .app-main { max-width: 30rem; margin: 0 auto; padding: 1.25rem 1rem 7rem; min-height: 100dvh; } @media (min-width: 640px) { .app-main { padding-top: 1.5rem; } } /* ---- bottom tab bar --------------------------------------------------- * Dark, so it reads as the app's own furniture against the pastel content * above it — var(--ink) is this palette's darkest tone. */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; max-width: 30rem; margin: 0 auto; background: var(--ink); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-raised); padding: 0.5rem 0.25rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); } @media (min-width: 640px) { .tabbar { left: 50%; transform: translateX(-50%); bottom: 1rem; border-radius: var(--radius-btn); padding: 0.5rem 0.75rem; } } .tabbar-item { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.35rem 0.2rem; border-radius: var(--radius); color: color-mix(in srgb, var(--canvas) 55%, transparent); font-size: 0.65rem; font-family: var(--font-mono); letter-spacing: var(--eyebrow-tracking); text-decoration: none; transition: color 0.15s ease; } .tabbar-item .icon { width: 1.2rem; height: 1.2rem; } .tabbar-item.is-active { color: var(--canvas); } .tabbar-item.is-active .icon { color: var(--accent); } .tabbar-spacer { position: relative; height: 1px; } .tabbar-fab { position: absolute; left: 50%; bottom: 0.35rem; transform: translate(-50%, -55%); width: 3.25rem; height: 3.25rem; border-radius: var(--radius-btn); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: var(--accent-ink); box-shadow: var(--shadow-raised); border: 3px solid var(--ink); } .tabbar-fab .icon { width: 1.4rem; height: 1.4rem; } .tabbar-fab:hover { filter: brightness(1.05); } /* ---- the drawer's own brand row (the hamburger menu) ------------------ */ .drawer-brand { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 1rem; margin-bottom: 0.5rem; border-bottom: var(--border-w) solid var(--border); font-family: var(--font-display); font-weight: var(--display-weight); } .drawer-brand .brand-mark { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-strong); } /* ---- home screen header ------------------------------------------------ */ .home-topbar { display: flex; align-items: center; justify-content: space-between; } .menu-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-btn); background: var(--surface); box-shadow: var(--shadow-card); cursor: pointer; } /* The hamburger opens the drawer of secondary links, and the drawer is a mobile-only surface (the frozen stylesheet hides it past 48rem) — so the button that opens it hides at the same point, rather than sitting there doing nothing on a laptop. */ @media (min-width: 48rem) { .menu-btn { display: none; } } .theme-fab { position: fixed; top: 1rem; right: 1rem; z-index: 45; background: var(--surface); box-shadow: var(--shadow-card); } .menu-dot { position: absolute; top: 0.55rem; right: 0.6rem; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--danger); border: 2px solid var(--surface); } .brand-badge { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-btn); background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: var(--accent-ink); box-shadow: var(--shadow-card); } /* ---- avatars ------------------------------------------------------------ */ .avatar-circle { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-btn); background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: var(--accent-ink); font-family: var(--font-display); font-weight: var(--display-weight); flex-shrink: 0; } .avatar-circle-sm { width: 2.25rem; height: 2.25rem; font-size: 0.8rem; } .avatar-circle-md { width: 3rem; height: 3rem; font-size: 1rem; } .avatar-circle-lg { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; } /* ---- gradient banners / headers ----------------------------------------- */ .clinic-banner { position: relative; display: flex; align-items: center; gap: 1rem; border-radius: var(--radius-lg); padding: 1.5rem; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: var(--accent-ink); overflow: hidden; box-shadow: var(--shadow-raised); } .clinic-banner-text { position: relative; z-index: 1; flex: 1; min-width: 0; } .clinic-banner-media { width: 6.5rem; height: 6.5rem; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; border: 3px solid color-mix(in srgb, var(--accent-ink) 25%, transparent); } .clinic-banner-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .banner-btn { background: var(--accent-ink); color: var(--canvas); border: none; } .banner-btn:hover { filter: brightness(0.97); } /* the slim back-button header used on every screen but Home */ .section-header { display: flex; align-items: center; gap: 0.75rem; border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: var(--accent-ink); box-shadow: var(--shadow-card); margin-bottom: 1.5rem; } .section-header .back-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-btn); background: color-mix(in srgb, var(--accent-ink) 18%, transparent); color: var(--accent-ink); flex-shrink: 0; } /* ---- search pill ---------------------------------------------------- */ .search-pill { display: flex; align-items: center; gap: 0.6rem; width: 100%; border-radius: var(--radius-btn); background: var(--surface); box-shadow: var(--shadow-card); padding: 0.75rem 1rem; color: var(--muted); } .search-pill input { flex: 1 1 auto; min-width: 0; min-height: 2.5rem; border: none; outline: none; background: transparent; color: var(--ink); font-family: var(--font-body); } .search-pill input::placeholder { color: var(--muted); } .search-pill .icon { color: var(--muted); flex-shrink: 0; } /* ---- "My Medical Cards" grid ------------------------------------------ */ .med-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; } .med-card { display: flex; flex-direction: column; gap: 0.6rem; border-radius: var(--radius-lg); padding: 1.1rem; box-shadow: var(--shadow-card); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .med-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); } .med-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius); background: color-mix(in srgb, currentColor 18%, transparent); } .med-card-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 0.95rem; color: var(--ink); } .med-card-sub { font-size: 0.75rem; color: var(--muted); } /* ---- calendar date chips (appointments) -------------------------------- */ .date-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(3.25rem, 1fr); gap: 0.6rem; overflow-x: auto; padding-bottom: 0.25rem; } .date-chip { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; border-radius: var(--radius-lg); padding: 0.65rem 0.25rem; background: var(--surface); border: var(--border-w) solid var(--border); color: var(--ink); cursor: pointer; } .date-chip .dow { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; color: var(--muted); } .date-chip .dom { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.1rem; } .date-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .date-chip.is-active .dow { color: color-mix(in srgb, var(--accent-ink) 75%, transparent); } /* ---- time slot buttons -------------------------------------------------- */ .slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } .slot-btn { border-radius: var(--radius-btn); padding: 0.55rem 0.5rem; background: var(--surface-2); border: var(--border-w) solid var(--border); color: var(--ink); font-size: 0.85rem; font-family: var(--font-mono); text-align: center; cursor: pointer; } .slot-btn:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .slot-btn.is-taken { background: var(--surface); color: var(--muted); text-decoration: line-through; cursor: not-allowed; } /* ---- report row ----------------------------------------------------- */ .report-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: var(--radius); background: var(--surface-2); } .report-row .icon-tile { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-strong); flex-shrink: 0; }