/* ============================================================================ GayatriFin design system -> Metabase. Values copied verbatim from the site's own tokens (same oklch colour space), not approximated: --bg #f6f7f9 --card #ffffff --border #e6e8ec --text #16181c --accent oklch(0.5 0.125 252) --accent2 oklch(0.44 0.12 252) --green oklch(0.6 0.14 152) --red oklch(0.58 0.18 27) Injected by nginx. Metabase itself is untouched, so upgrades survive. ========================================================================== */ @font-face{font-family:"Hanken Grotesk";src:url("/gfs-fonts/hanken-grotesk-400.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"Hanken Grotesk";src:url("/gfs-fonts/hanken-grotesk-500.woff2") format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"Hanken Grotesk";src:url("/gfs-fonts/hanken-grotesk-600.woff2") format("woff2");font-weight:600;font-display:swap} @font-face{font-family:"Hanken Grotesk";src:url("/gfs-fonts/hanken-grotesk-700.woff2") format("woff2");font-weight:700;font-display:swap} @font-face{font-family:"Hanken Grotesk";src:url("/gfs-fonts/hanken-grotesk-800.woff2") format("woff2");font-weight:800;font-display:swap} html:root, html body, :root, body { --gfs-accent: oklch(0.5 0.125 252); --gfs-accent2: oklch(0.44 0.12 252); --gfs-tint: oklch(0.5 0.125 252 / 0.09); --gfs-green: oklch(0.6 0.14 152); --gfs-red: oklch(0.58 0.18 27); --mb-color-brand: var(--gfs-accent) !important; --mb-color-core-brand: var(--gfs-accent) !important; --mb-color-core-brand-hover: var(--gfs-accent2) !important; --mb-color-brand-light: oklch(0.5 0.125 252 / 0.12) !important; --mb-color-brand-lighter: oklch(0.5 0.125 252 / 0.06) !important; --mb-color-brand-alpha-04: oklch(0.5 0.125 252 / 0.04) !important; --mb-color-brand-alpha-88: oklch(0.5 0.125 252 / 0.88) !important; --mb-color-border-brand: var(--gfs-accent) !important; --mb-color-text-brand: var(--gfs-accent) !important; --mb-color-text-brand-hover: var(--gfs-accent2) !important; --mb-color-text-brand-strong: var(--gfs-accent2) !important; --mb-color-text-brand-strong-hover: var(--gfs-accent2) !important; --mb-color-text-selected: var(--gfs-accent) !important; --mb-color-icon-brand: var(--gfs-accent) !important; --mb-color-input-focus: var(--gfs-tint) !important; --mb-color-focus: var(--gfs-tint) !important; --mb-color-core-filter: var(--gfs-accent) !important; --mb-color-filter: var(--gfs-accent) !important; --mb-color-border-filter: var(--gfs-accent) !important; --mb-color-illustration-secondary-brand: var(--gfs-accent) !important; --mb-color-illustration-tertiary-brand: var(--gfs-tint) !important; --mb-color-core-summarize: var(--gfs-green) !important; --mb-color-summarize: var(--gfs-green) !important; --mb-color-feedback-positive: var(--gfs-green) !important; --mb-color-feedback-positive-selected: var(--gfs-green) !important; --mb-color-core-green-saturated: var(--gfs-green) !important; --mb-color-feedback-negative: var(--gfs-red) !important; --mb-color-core-red-saturated: var(--gfs-red) !important; --mb-color-background:#f6f7f9 !important; --mb-color-bg-light:#f6f7f9 !important; --mb-color-bg-medium:#eef0f3 !important; --mb-color-bg-white:#ffffff !important; --mb-color-core-white:#ffffff !important; --mb-color-bg-dashboard:#f6f7f9 !important; --mb-color-bg-dashboard-card:#ffffff !important; --mb-color-notebook-step-bg:#f6f7f9 !important; --mb-color-notebook-step-bg-hover:#eef0f3 !important; --mb-color-border:#e6e8ec !important; --mb-color-border-neutral:#e6e8ec !important; --mb-color-border-neutral-subtle:#eef0f3 !important; --mb-color-border-neutral-strongest:#c9ced6 !important; --mb-color-shadow-default: oklch(0.2 0.03 252 / 0.06) !important; --mb-color-text-primary:#16181c !important; --mb-color-text-dark:#16181c !important; --mb-color-text-secondary:#5b6472 !important; --mb-color-text-medium:#5b6472 !important; --mb-color-text-light:#8a93a1 !important; --mb-default-font-family:"Hanken Grotesk" !important; /* chart series = the site's own --acc rotation */ --mb-color-accent0: oklch(0.52 0.13 252) !important; --mb-color-accent1: oklch(0.60 0.13 60) !important; --mb-color-accent2: oklch(0.52 0.13 152) !important; --mb-color-accent3: oklch(0.55 0.16 25) !important; --mb-color-accent4: oklch(0.52 0.15 300) !important; --mb-color-accent5: oklch(0.52 0.10 195) !important; --mb-color-accent6: oklch(0.44 0.12 252) !important; --mb-color-accent7: oklch(0.6 0.14 152) !important; } body, button, input, select, textarea, .Form-input { font-family:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } h1,h2,h3,.h1,.h2,.h3 { letter-spacing:-0.02em !important; } /* the site's card treatment */ [data-element-id="dashboard-card"], section[data-testid="dashcard"], [data-testid="dashcard"], .DashCard, .Card { border-radius:14px !important; border:1px solid #e6e8ec !important; box-shadow:0 1px 2px oklch(0.2 0.03 252 / 0.05) !important; } button, .Button, a.Button { border-radius:11px !important; } /* --------------------------------------------------------------------------- Shape + type layer, measured from lol.lookatmypolicy.com: radius 14px cards / 10px controls / 99px pills shadow 0 18px 36px rgba(10,12,16,.10) elevated 0 6px 20px rgba(10,12,16,.08) resting weights 600 / 700 / 800 headings letter-spacing -0.02em labels uppercase, letter-spacing 0.06em ------------------------------------------------------------------------- */ :root { --gfs-shadow-lift:0 18px 36px rgba(10,12,16,.10); --gfs-shadow-rest:0 6px 20px rgba(10,12,16,.08); } [data-element-id="dashboard-card"], section[data-testid="dashcard"], [data-testid="dashcard"], .DashCard, .Card { border-radius:14px !important; border:1px solid #e6e8ec !important; box-shadow:var(--gfs-shadow-rest) !important; } [role="dialog"], .Modal, .PopoverBody, [data-element-id="popover"] { border-radius:14px !important; box-shadow:var(--gfs-shadow-lift) !important; } button, .Button, a.Button, input, select, textarea, .Form-input { border-radius:10px !important; } .Badge, .Pill, [data-testid="filter-pill"] { border-radius:99px !important; } h1,.h1 { font-size:27px !important; font-weight:800 !important; letter-spacing:-0.02em !important; } h2,.h2 { font-size:22px !important; font-weight:800 !important; letter-spacing:-0.02em !important; } h3,.h3 { font-size:15px !important; font-weight:700 !important; letter-spacing:-0.02em !important; } th, .ColumnHeader, [data-testid="header-cell"] { font-size:11.5px !important; font-weight:700 !important; letter-spacing:0.06em !important; text-transform:uppercase !important; }