/* ============================================================ ScriptWise — CAYMAN theme (light only) ------------------------------------------------------------ An alternative look for the authenticated application, drawing on the Cayman Islands coat of arms. Loaded by , which resolves to /css/cayman-base.css. This is an ADDITIVE experiment: scriptwise-base.css, scriptwise-dark-base.css and the older material3/fluent files are all left in place and untouched. Reverting is a one-word change in App.razor (Theme="scriptwise") plus removing the cayman-chrome.css link. ── Where the palette comes from ──────────────────────────── The arms are: a red chief bearing a gold lion passant guardant; beneath it three green stars on blue-and-white wavy bands for the sea and the three islands; crested by a green turtle and a gold pineapple. sea navy — the wavy bands. Carries the platform: primary actions, links, the sidebar. The dominant colour of the arms. gold — the lion and the pineapple. Accent only: active indicators, rules, focus. Never body text — see the note on gold below. star green — the three stars. Success and confirmation. gules red — the chief. Reserved for danger, which keeps the most arresting colour in the arms genuinely meaningful in the UI. Deliberately restrained: this is a government registry handling patient data, so the heraldry informs the palette rather than being decorated with. ── No dark variant ───────────────────────────────────────── Only a light theme is defined. RadzenAppearanceToggle is currently commented out in MainLayout; if it is ever re-enabled it will look for "cayman-dark", which does not exist, and the toggle will fail to find a stylesheet. ============================================================ */ @import url("/_content/Radzen.Blazor/css/default-base.css"); :root { /* ---- Arms palette ---- */ --cy-navy: #0d3c66; /* sea — primary */ --cy-navy-deep: #082a4a; /* sea, in shadow — sidebar, active nav */ --cy-navy-ink: #061d33; /* deepest — headings on light */ --cy-navy-tint: #d8e4ef; /* washed — selected rows, subtle fills */ --cy-navy-wash: #eef3f8; /* palest — table headers, hover */ /* Gold is a mid-luminance hue: #c9a227 on white is only ~2.3:1, so it can never carry text. The darker --cy-gold-ink is the text-safe form and is used where a gold *word* is needed; bright gold stays decorative or sits on navy, where it reads at ~7:1. */ --cy-gold: #c9a227; --cy-gold-bright: #e3bf4d; --cy-gold-ink: #6f5410; --cy-green: #1a6b45; /* the three stars */ --cy-green-tint: #dcece4; --cy-red: #a02016; /* the chief — danger only */ --cy-red-tint: #f7dedb; /* ---- Neutrals ---- Cooled very slightly toward the navy so greys sit with the palette instead of fighting it. */ --rz-base: #dfe5ec; --rz-base-50: #fbfcfd; --rz-base-100: #f4f7fa; --rz-base-200: #eaeff5; --rz-base-300: #dfe5ec; --rz-base-400: #c7d0da; --rz-base-500: #9aa7b5; --rz-base-600: #6f7d8c; --rz-base-700: #55636f; /* 800/900 are the sidebar and its active state — Radzen derives the panel menu from them, which is why they are navy rather than grey. */ --rz-base-800: var(--cy-navy); --rz-base-900: var(--cy-navy-deep); --rz-base-light: #f4f7fa; --rz-base-lighter: #ffffff; --rz-base-dark: #55636f; --rz-base-darker: var(--cy-navy-ink); /* ---- Primary: sea navy ---- */ --rz-primary: var(--cy-navy); --rz-primary-light: var(--cy-navy-tint); --rz-primary-lighter: rgba(13, 60, 102, 0.10); --rz-primary-dark: var(--cy-navy-deep); --rz-primary-darker: var(--cy-navy-ink); /* ---- Secondary: deep gold ---- Radzen fills secondary buttons with this and puts WHITE text on them, so it cannot be the bright heraldic gold: #c9a227 under white is 2.4:1 and fails AA outright. The darker, text-safe gold reads as struck bronze and clears AA comfortably. The bright gold is still used where it belongs — as the sidebar's active indicator and focus ring, both set explicitly below rather than inherited from here. */ --rz-secondary: var(--cy-gold-ink); --rz-secondary-light: #f6eccd; --rz-secondary-lighter: rgba(111, 84, 16, 0.12); --rz-secondary-dark: #57420c; --rz-secondary-darker: #3d2e08; /* ---- Status ---- */ --rz-success: var(--cy-green); --rz-success-light: var(--cy-green-tint); --rz-success-lighter: rgba(26, 107, 69, 0.10); --rz-success-dark: #145536; --rz-success-darker: #0e3f28; --rz-danger: var(--cy-red); --rz-danger-light: var(--cy-red-tint); --rz-danger-lighter: rgba(160, 32, 22, 0.10); --rz-danger-dark: #841a12; --rz-danger-darker: #63130d; /* Warning leans amber rather than gold so it is not mistaken for the brand accent — a caution must not look like decoration. */ --rz-warning: #8a5a00; --rz-warning-light: #f8e8c6; --rz-warning-lighter: rgba(138, 90, 0, 0.12); --rz-warning-dark: #6f4900; --rz-warning-darker: #513500; --rz-info: #1f5673; --rz-info-light: #d9e7ef; --rz-info-lighter: rgba(31, 86, 115, 0.10); --rz-info-dark: #17435a; --rz-info-darker: #103041; /* ---- Surfaces and text ---- Text is set explicitly rather than inherited from --rz-base-800, which is now navy: body copy stays near-black for legibility, and navy is kept for things that are meant to be navy. */ --rz-body-background-color: #f4f7fa; --rz-base-background-color: #ffffff; --rz-layout-body-background-color: #f4f7fa; --rz-panel-background-color: #ffffff; --rz-text-color: #10202e; --rz-text-secondary-color: #55636f; --rz-text-disabled-color: #8b97a3; --rz-text-title-color: var(--cy-navy-ink); --rz-text-h1-color: var(--cy-navy-ink); --rz-text-h2-color: var(--cy-navy-ink); --rz-text-h3-color: var(--cy-navy-ink); --rz-text-h4-color: var(--cy-navy-ink); --rz-text-h5-color: var(--cy-navy-ink); --rz-text-h6-color: var(--cy-navy-ink); --rz-link-color: var(--cy-navy); --rz-link-hover-color: var(--cy-navy-deep); --rz-border-color: #dfe5ec; --rz-input-border-color: #c7d0da; /* ---- Header and sidebar ---- */ --rz-header-background-color: #ffffff; --rz-header-color: var(--cy-navy-ink); --rz-footer-background-color: #ffffff; --rz-panel-menu-item-active-indicator: var(--cy-gold-bright); --rz-panel-menu-item-hover-background-color: rgba(255, 255, 255, 0.08); /* ---- Shape ---- Squarer than the ScriptWise theme's 9px. Official records read as official when the geometry is crisp; heavy rounding reads consumer. */ --rz-border-radius: 3px; --rz-border-radius-1: 2px; --rz-border-radius-2: 3px; --rz-border-radius-3: 6px; --rz-border-radius-4: 10px; /* ---- Typography ---- Montserrat is retained — the webfont is already bundled in app.css, and swapping families would mean shipping new font files. Its geometric caps suit an institutional register well enough for this experiment. */ --rz-text-font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif; --rz-body-font-size: 0.875rem; /* ---- Chart series ---- Navy → gold → green is the arms in order of prominence, extended with muted tints. Ordered so neighbouring series stay separable. */ --rz-series-1: #0d3c66; --rz-series-2: #c9a227; --rz-series-3: #1a6b45; --rz-series-4: #4a7fa8; --rz-series-5: #8a5a00; --rz-series-6: #57937b; --rz-series-7: #a8bdd0; --rz-series-8: #55636f; }