:root { --val-font-sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --val-font-serif: "Lora","georgia",serif; --val-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --val-font-family: var(--val-font-sans); /* Font size */ --val-fs--x3l: 2.5rem; --val-fs--x2l: 2rem; --val-fs--xl: 1.75rem; --val-fs--l: 1.5rem; --val-fs--m: 1.25rem; --val-fs--base: 1rem; --val-fs--s: 0.875rem; --val-fs--xs: 0.75rem; --val-fs--x2s: 0.5625rem; --val-fs--x3s: 0.375rem; /* Font weight */ --val-fw--light: 300; --val-fw--base: 400; --val-fw--bold: 500; /* Line height */ --val-lh--base: 1.5; --val-lh--header: 1.2; --val-max-width: 90rem; /* --val-color-rgb: 33,37,41; --val-main--bg-rgb: 255,255,255; --val-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --line-height-base: 1.6875rem; --line-height-s: 1.125rem; --max-bg-color: 98.125rem; */ --val-gap: 1.125rem; /* --content-left: 5.625rem; --site-header-height-wide: var(--val-gap10); --container-padding: var(--val-gap); */ } /* @media (min-width: 75rem) { :root { --container-padding:var(--val-gap2); } } :root { --scrollbar-width: 0px; --grid-col-count: 6; --grid-gap: var(--val-gap); --grid-gap-count: calc(var(--grid-col-count) - 1); --grid-full-width: calc(100vw - var(--val-gap2) - var(--scrollbar-width)); --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count)); } @media (min-width: 43.75rem) { :root { --grid-col-count:14; --grid-gap: var(--val-gap2); } } @media (min-width: 62.5rem) { :root { --scrollbar-width:0.9375rem; } } @media (min-width: 75rem) { :root { --grid-full-width:calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--val-gap4)); } } @media (min-width: 90rem) { :root { --grid-full-width:calc(var(--max-width) - var(--val-gap4)); } } */ :root { --val-gap-0-15: calc(0.15 * var(--val-gap)); --val-gap-0-25: calc(0.25 * var(--val-gap)); --val-gap-0-35: calc(0.35 * var(--val-gap)); --val-gap-0-5: calc(0.5 * var(--val-gap)); --val-gap-0-75: calc(0.75 * var(--val-gap)); --val-gap-1-5: calc(1.5 * var(--val-gap)); --val-gap-2: calc(2 * var(--val-gap)); --primary-hue: 216; --primary-sat: 60%; --val-color--primary: hsl(var(--primary-hue), var(--primary-sat), 50%); --val-color--primary-light: hsl(var(--primary-hue), var(--primary-sat), 60%); --val-color--primary-dark: hsl(var(--primary-hue), var(--primary-sat), 40%); --val-color--primary-link: hsl(var(--primary-hue), var(--primary-sat), 55%); --val-color--primary-link-hover: hsl(var(--primary-hue), var(--primary-sat), 30%); --val-color--primary-link-active: hsl(var(--primary-hue), var(--primary-sat), 70%); --info-hue: 190; --info-sat: 90%; --val-color--info: hsl(var(--info-hue), var(--info-sat), 54%); --val-color--info-light: hsl(var(--info-hue), var(--info-sat), 70%); --val-color--info-dark: hsl(var(--info-hue), var(--info-sat), 45%); --val-color--info-link: hsl(var(--info-hue), var(--info-sat), 30%); --val-color--info-link-hover: hsl(var(--info-hue), var(--info-sat), 20%); --val-color--info-link-active: hsl(var(--info-hue), var(--info-sat), 40%); --success-hue: 150; --success-sat: 50%; --val-color--success: hsl(var(--success-hue), var(--success-sat), 50%); --val-color--success-light: hsl(var(--success-hue), var(--success-sat), 68%); --val-color--success-dark: hsl(var(--success-hue), var(--success-sat), 38%); --val-color--success-link: hsl(var(--success-hue), var(--success-sat), 26%); --val-color--success-link-hover: hsl(var(--success-hue), var(--success-sat), 18%); --val-color--success-link-active: hsl(var(--success-hue), var(--success-sat), 36%); --warning-hue: 44; --warning-sat: 100%; --val-color--warning: hsl(var(--warning-hue), var(--warning-sat), 50%); --val-color--warning-light: hsl(var(--warning-hue), var(--warning-sat), 60%); --val-color--warning-dark: hsl(var(--warning-hue), var(--warning-sat), 40%); --val-color--warning-link: hsl(var(--warning-hue), var(--warning-sat), 30%); --val-color--warning-link-hover: hsl(var(--warning-hue), var(--warning-sat), 20%); --val-color--warning-link-active: hsl(var(--warning-hue), var(--warning-sat), 38%); --danger-hue: 348; --danger-sat: 86%; --val-color--danger: hsl(var(--danger-hue), var(--danger-sat), 50%); --val-color--danger-light: hsl(var(--danger-hue), var(--danger-sat), 60%); --val-color--danger-dark: hsl(var(--danger-hue), var(--danger-sat), 35%); --val-color--danger-link: hsl(var(--danger-hue), var(--danger-sat), 25%); --val-color--danger-link-hover: hsl(var(--danger-hue), var(--danger-sat), 10%); --val-color--danger-link-active: hsl(var(--danger-hue), var(--danger-sat), 30%); --light-hue: 0; --light-sat: 0%; --val-color--light: hsl(var(--light-hue), var(--light-sat), 96%); --val-color--light-light: hsl(var(--light-hue), var(--light-sat), 98%); --val-color--light-dark: hsl(var(--light-hue), var(--light-sat), 92%); --dark-hue: 0; --dark-sat: 0%; --val-color--dark: hsl(var(--dark-hue), var(--dark-sat), 25%); --val-color--dark-light: hsl(var(--dark-hue), var(--dark-sat), 40%); --val-color--dark-dark: hsl(var(--dark-hue), var(--dark-sat), 8%); --val-color--dark-link: hsl(var(--dark-hue), var(--dark-sat), 90%); --val-color--dark-link-hover: hsl(var(--dark-hue), var(--dark-sat), 100%); --val-color--dark-link-active: hsl(var(--dark-hue), var(--dark-sat), 70%); --gray-hue: 201; --gray-sat: 15%; --val-color--gray-5: hsl(var(--gray-hue), var(--gray-sat), 5%); --val-color--gray-10: hsl(var(--gray-hue), var(--gray-sat) ,11%); --val-color--gray-20: hsl(var(--gray-hue), var(--gray-sat),20%); --val-color--gray-45: hsl(var(--gray-hue), var(--gray-sat), 44%); --val-color--gray-60: hsl(var(--gray-hue), var(--gray-sat), 57%); --val-color--gray-65: hsl(var(--gray-hue), var(--gray-sat), 63%); --val-color--gray-70: hsl(var(--gray-hue), var(--gray-sat), 72%); --val-color--gray-90: hsl(var(--gray-hue), var(--gray-sat), 88%); --val-color--gray-95: hsl(var(--gray-hue), var(--gray-sat), 93%); --val-color--gray-100: hsl(var(--gray-hue), var(--gray-sat), 97%); --val-color--bg: #fafafa; --val-color--text: #212529; --val-color--white: #fff; /* --color-text-neutral-soft: var(--color--gray-45); --color-text-neutral-medium: var(--color--gray-20); --color-text-neutral-loud: var(--color--gray-5); --color-text-primary-medium: var(--val-color--primary-40); --color-text-primary-loud: var(--val-color--primary-30); --color--black: #000; */ /* --color--red: #e33f1e; --color--gold: #fdca40; --color--green: #3fa21c; --header-height-wide-when-fixed: calc(6 * var(--val-gap)); --mobile-nav-width: 31.25rem; --val-menu--border-radius: 0.625rem; */ --val-border-radius: 0.375rem; /* Menu component */ --val-menu--color-bg: var(--val-color--bg); --val-menu--color-highlight: #e91e63; --val-menu--color-border: rgba(0, 0, 0, 0.1); --val-menu--color-shadow: rgba(0, 0, 0, 0.06); --val-menu--line-padding: 0.625rem; --val-menu--line-height: calc(1.875rem + 1px); --val-menu--item-height: calc(var(--val-menu--line-padding) + var(--val-menu--line-height)); --val-menu--item-width-min: 14rem; --val-menu--item-width-max: 20rem; --val-menu--item-gap: 1rem; --val-menu--trigger-width: 2.675rem; --val-menu--side-width: 20rem; }