mirror of
https://github.com/CompassConnections/Compass.git
synced 2025-12-23 22:18:43 -05:00
493 lines
16 KiB
CSS
493 lines
16 KiB
CSS
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
:root {
|
||
/*--font-main: "Crimson Pro", "EB Garamond", Georgia, "Times New Roman", Times, serif;*/
|
||
--font-main: "Atkinson Hyperlegible Next", Georgia, "Times New Roman", Times, serif;
|
||
--bnh: env(safe-area-inset-bottom); /* native bottom nav height */
|
||
--tnh: env(safe-area-inset-top); /* native top nav height */
|
||
--hloss: calc(var(--bnh) + var(--tnh)); /* mobile height loss due to native top and bottom bars */
|
||
}
|
||
|
||
.safe-top {
|
||
/*padding-top: calc(20px);*/
|
||
padding-top: env(safe-area-inset-top);
|
||
box-sizing: border-box; /* ensure padding doesn’t break layout */
|
||
}
|
||
|
||
.safe-bottom {
|
||
/*bottom: calc(48px);*/
|
||
bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.keyboard-open .pb-page-base {
|
||
padding-bottom: calc(61px);
|
||
}
|
||
|
||
.pb-page-base {
|
||
padding-bottom: calc(61px + env(safe-area-inset-bottom));
|
||
/*bottom: calc(48px);*/
|
||
/*padding-bottom: env(safe-area-inset-bottom);*/
|
||
}
|
||
|
||
/* When keyboard is open, remove safe area offset */
|
||
.keyboard-open .safe-bottom {
|
||
bottom: 0;
|
||
}
|
||
|
||
.keyboard-open {
|
||
--bnh: 0;
|
||
/*--tnh: 0;*/
|
||
--hloss: var(--tnh);
|
||
}
|
||
|
||
/* Replace default Tailwind behavior */
|
||
.min-h-screen {
|
||
min-height: calc(1dvh * 100 - var(--hloss));
|
||
}
|
||
|
||
.main-font {
|
||
font-family: var(--font-main), serif;
|
||
}
|
||
|
||
.main-font a,
|
||
.main-font label,
|
||
.main-font button {
|
||
font-family: var(--font-main), serif;
|
||
}
|
||
|
||
.logo {
|
||
font-family: var(--font-main), serif;
|
||
}
|
||
|
||
@layer base {
|
||
body {
|
||
font-family: var(--font-main), serif;
|
||
}
|
||
|
||
button, input, label {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||
}
|
||
|
||
html {
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
:root {
|
||
/* Text / Ink Grey Scale */
|
||
/* High Contrast */
|
||
--color-ink-0: 255 255 255; /* white */
|
||
--color-ink-50: 255 255 255;
|
||
--color-ink-100: 255 255 255;
|
||
--color-ink-200: 255 255 255;
|
||
--color-ink-300: 160 160 160;
|
||
--color-ink-400: 160 160 160;
|
||
--color-ink-500: 80 80 80;
|
||
--color-ink-600: 0 0 0;
|
||
--color-ink-700: 0 0 0;
|
||
--color-ink-800: 0 0 0;
|
||
--color-ink-900: 0 0 0;
|
||
--color-ink-950: 0 0 0;
|
||
--color-ink-1000: 0 0 0; /* black */
|
||
|
||
/* Medium Contrast */
|
||
/*--color-ink-0: 255 255 255; !* white *!*/
|
||
/*--color-ink-50: 245 245 245;*/
|
||
/*--color-ink-100: 230 230 230;*/
|
||
/*--color-ink-200: 200 200 200;*/
|
||
/*--color-ink-300: 170 170 170;*/
|
||
/*--color-ink-400: 140 140 140;*/
|
||
/*--color-ink-500: 110 110 110;*/
|
||
/*--color-ink-600: 85 85 85;*/
|
||
/*--color-ink-700: 60 60 60;*/
|
||
/*--color-ink-800: 40 40 40;*/
|
||
/*--color-ink-900: 25 25 25;*/
|
||
/*--color-ink-950: 12 12 12;*/
|
||
/*--color-ink-1000: 0 0 0; !* black *!*/
|
||
|
||
/* Background / Canvas Grey Scale */
|
||
--color-canvas-0: 255 255 255; /* white */
|
||
--color-canvas-25: 245 245 245;
|
||
--color-canvas-50: 245 245 245;
|
||
--color-canvas-100: 245 245 245;
|
||
--color-canvas-200: 210 210 210;
|
||
--color-canvas-300: 190 190 190;
|
||
--color-canvas-400: 160 160 160;
|
||
--color-canvas-500: 130 130 130;
|
||
--color-canvas-600: 100 100 100;
|
||
--color-canvas-700: 75 75 75;
|
||
--color-canvas-800: 50 50 50;
|
||
--color-canvas-900: 30 30 30;
|
||
--color-canvas-950: 15 15 15;
|
||
--color-canvas-1000: 0 0 0; /* black */
|
||
|
||
--color-primary-950: 23 37 84; /* very dark navy */
|
||
--color-primary-900: 30 58 138;
|
||
--color-primary-800: 30 64 175;
|
||
--color-primary-700: 29 78 216;
|
||
--color-primary-600: 29 78 216;
|
||
--color-primary-500: 59 130 246; /* standard blue */
|
||
--color-primary-400: 96 165 250;
|
||
--color-primary-300: 147 197 253;
|
||
--color-primary-200: 191 219 254;
|
||
--color-primary-100: 219 234 254;
|
||
--color-primary-50: 239 246 255; /* very light blue */
|
||
|
||
--color-yes-0: 255 255 255;
|
||
--color-yes-50: 249 249 249;
|
||
--color-yes-100: 242 242 242;
|
||
--color-yes-200: 217 217 217;
|
||
--color-yes-300: 191 191 191;
|
||
--color-yes-400: 166 166 166;
|
||
--color-yes-500: 140 140 140;
|
||
--color-yes-600: 115 115 115;
|
||
--color-yes-700: 89 89 89;
|
||
--color-yes-800: 64 64 64;
|
||
--color-yes-900: 34 34 34;
|
||
--color-yes-950: 17 17 17;
|
||
--color-yes-1000: 0 0 0;
|
||
|
||
--color-no-0: 255 255 255;
|
||
--color-no-50: 249 249 249;
|
||
--color-no-100: 242 242 242;
|
||
--color-no-200: 217 217 217;
|
||
--color-no-300: 191 191 191;
|
||
--color-no-400: 166 166 166;
|
||
--color-no-500: 140 140 140;
|
||
--color-no-600: 115 115 115;
|
||
--color-no-700: 89 89 89;
|
||
--color-no-800: 64 64 64;
|
||
--color-no-900: 34 34 34;
|
||
--color-no-950: 17 17 17;
|
||
--color-no-1000: 0 0 0;
|
||
|
||
--color-green-950: 5 46 22; /* darkest green */
|
||
--color-green-900: 20 83 45;
|
||
--color-green-800: 22 101 52;
|
||
--color-green-700: 21 128 61;
|
||
--color-green-600: 22 163 74;
|
||
--color-green-500: 34 197 94; /* standard green */
|
||
--color-green-400: 74 222 128;
|
||
--color-green-300: 110 231 183; /* vibrant but not neon */
|
||
--color-green-200: 167 243 208; /* gentle mid-light tone */
|
||
--color-green-100: 209 260 229; /* soft and airy */
|
||
--color-green-50: 240 263 245; /* subtle, barely tinted background */
|
||
|
||
--color-yellow-950: 66 50 3; /* darkest yellow */
|
||
--color-yellow-900: 113 63 18;
|
||
--color-yellow-800: 146 64 14;
|
||
--color-yellow-700: 180 83 9;
|
||
--color-yellow-600: 217 119 6;
|
||
--color-yellow-500: 245 158 11; /* standard yellow */
|
||
--color-yellow-400: 251 191 36;
|
||
--color-yellow-300: 252 211 77;
|
||
--color-yellow-200: 253 230 138;
|
||
--color-yellow-100: 254 243 199;
|
||
--color-yellow-50: 255 251 235; /* lightest yellow */
|
||
|
||
--color-red-950: 69 10 10; /* darkest red */
|
||
--color-red-900: 127 29 29;
|
||
--color-red-800: 153 27 27;
|
||
--color-red-700: 185 28 28;
|
||
--color-red-600: 220 38 38;
|
||
--color-red-500: 239 68 68; /* standard red */
|
||
--color-red-400: 248 113 113;
|
||
--color-red-300: 252 165 165;
|
||
--color-red-200: 254 202 202;
|
||
--color-red-100: 254 226 226;
|
||
--color-red-50: 254 242 242; /* lightest red */
|
||
}
|
||
|
||
.dark {
|
||
color-scheme: dark;
|
||
|
||
/* High Contrast */
|
||
--color-ink-1000: 255 255 255; /* white */
|
||
--color-ink-950: 255 255 255;
|
||
--color-ink-900: 255 255 255;
|
||
--color-ink-800: 255 255 255;
|
||
--color-ink-700: 255 255 255;
|
||
--color-ink-600: 255 255 255;
|
||
--color-ink-500: 200 200 200;
|
||
--color-ink-400: 100 100 100;
|
||
--color-ink-300: 100 100 100;
|
||
--color-ink-200: 0 0 0;
|
||
--color-ink-100: 0 0 0;
|
||
--color-ink-50: 0 0 0;
|
||
--color-ink-0: 0 0 0; /* black */
|
||
/* Medium Contrast */
|
||
/*--color-ink-1000: 255 255 255; !* white *!*/
|
||
/*--color-ink-950: 250 250 250; !* #FAFAFA *!*/
|
||
/*--color-ink-900: 242 242 242; !* #F2F2F2 *!*/
|
||
/*--color-ink-800: 217 217 217; !* #D9D9D9 *!*/
|
||
/*--color-ink-700: 191 191 191; !* #BFBFBF *!*/
|
||
/*--color-ink-600: 166 166 166; !* #A6A6A6 *!*/
|
||
/*--color-ink-500: 140 140 140; !* #8C8C8C *!*/
|
||
/*--color-ink-400: 115 115 115; !* #737373 *!*/
|
||
/*--color-ink-300: 89 89 89; !* #595959 *!*/
|
||
/*--color-ink-200: 64 64 64; !* #404040 *!*/
|
||
/*--color-ink-100: 34 34 34; !* #222222 *!*/
|
||
/*--color-ink-50: 17 17 17; !* #111111 *!*/
|
||
/*--color-ink-0: 0 0 0; !* black *!*/
|
||
|
||
--color-canvas-25: 0 0 0;
|
||
--color-canvas-0: 20 20 20;
|
||
--color-canvas-50: 20 20 20;
|
||
--color-canvas-100: 40 40 40;
|
||
--color-canvas-200: 60 60 60;
|
||
--color-canvas-300: 90 90 90;
|
||
|
||
--color-primary-950: 255 255 255;
|
||
--color-primary-900: 255 255 255;
|
||
--color-primary-800: 170 220 250;
|
||
--color-primary-700: 150 200 250;
|
||
--color-primary-600: 150 200 250;
|
||
--color-primary-500: 59 130 246; /* standard blue */
|
||
--color-primary-400: 37 99 235;
|
||
--color-primary-300: 29 78 216;
|
||
--color-primary-200: 30 64 175;
|
||
--color-primary-100: 30 58 138;
|
||
--color-primary-50: 23 37 84; /* very dark navy */
|
||
|
||
--color-no-950: 255 255 255; /* white */
|
||
--color-no-900: 242 242 242;
|
||
--color-no-800: 217 217 217;
|
||
--color-no-700: 191 191 191;
|
||
--color-no-600: 166 166 166;
|
||
--color-no-500: 140 140 140;
|
||
--color-no-400: 115 115 115;
|
||
--color-no-300: 89 89 89;
|
||
--color-no-200: 64 64 64;
|
||
--color-no-100: 34 34 34;
|
||
--color-no-50: 17 17 17;
|
||
--color-no-0: 0 0 0; /* black */
|
||
|
||
--color-yes-950: 255 255 255; /* white */
|
||
--color-yes-900: 242 242 242;
|
||
--color-yes-800: 217 217 217;
|
||
--color-yes-700: 191 191 191;
|
||
--color-yes-600: 166 166 166;
|
||
--color-yes-500: 140 140 140;
|
||
--color-yes-400: 115 115 115;
|
||
--color-yes-300: 89 89 89;
|
||
--color-yes-200: 64 64 64;
|
||
--color-yes-100: 34 34 34;
|
||
--color-yes-50: 17 17 17;
|
||
--color-yes-0: 0 0 0; /* black */
|
||
|
||
--color-green-50: 240 253 244; /* lightest green */
|
||
--color-green-100: 220 252 231;
|
||
--color-green-200: 187 247 208;
|
||
--color-green-300: 134 239 172;
|
||
--color-green-400: 74 222 128;
|
||
--color-green-500: 34 197 94; /* standard green */
|
||
--color-green-600: 22 163 74;
|
||
--color-green-700: 21 128 61;
|
||
--color-green-800: 22 101 52;
|
||
--color-green-900: 20 83 45;
|
||
--color-green-950: 5 46 22; /* darkest green */
|
||
|
||
--color-yellow-50: 255 251 235; /* lightest yellow */
|
||
--color-yellow-100: 254 243 199;
|
||
--color-yellow-200: 253 230 138;
|
||
--color-yellow-300: 252 211 77;
|
||
--color-yellow-400: 251 191 36;
|
||
--color-yellow-500: 245 158 11; /* standard yellow */
|
||
--color-yellow-600: 217 119 6;
|
||
--color-yellow-700: 180 83 9;
|
||
--color-yellow-800: 146 64 14;
|
||
--color-yellow-900: 113 63 18;
|
||
--color-yellow-950: 66 50 3; /* darkest yellow */
|
||
|
||
--color-red-50: 254 242 242; /* lightest red */
|
||
--color-red-100: 254 226 226;
|
||
--color-red-200: 254 202 202;
|
||
--color-red-300: 252 165 165;
|
||
--color-red-400: 248 113 113;
|
||
--color-red-500: 239 68 68; /* standard red */
|
||
--color-red-600: 220 38 38;
|
||
--color-red-700: 185 28 28;
|
||
--color-red-800: 153 27 27;
|
||
--color-red-900: 127 29 29;
|
||
--color-red-950: 69 10 10; /* darkest red */
|
||
|
||
}
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'emoji';
|
||
src: local('AppleColorEmoji'), local('Segoe UI Emoji'), local('Noto Color Emoji');
|
||
/* from official unicode range for emoji: https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5B%3AEmoji%3DYes%3A%5D%0D%0A&abb=on&esc=on&g=&i= */
|
||
/* but include zero width joiner and variant block selector, like 🏳️🌈 */
|
||
unicode-range: U+200D, U+FE0?, U+203C, U+2049, U+2122, U+2139, U+2194-2199,
|
||
U+21A9, U+21AA, U+231A, U+231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FA,
|
||
U+24C2, U+25AA, U+25AB, U+25B6, U+25C0, U+25FB-25FE, U+2600-2604, U+260E,
|
||
U+2611, U+2614, U+2615, U+2618, U+261D, U+2620, U+2622, U+2623, U+2626,
|
||
U+262A, U+262E, U+262F, U+2638-263A, U+2640, U+2642, U+2648-2653, U+265F,
|
||
U+2660, U+2663, U+2665, U+2666, U+2668, U+267B, U+267E, U+267F, U+2692-2697,
|
||
U+2699, U+269B, U+269C, U+26A0, U+26A1, U+26A7, U+26AA, U+26AB, U+26B0,
|
||
U+26B1, U+26BD, U+26BE, U+26C4, U+26C5, U+26C8, U+26CE, U+26CF, U+26D1,
|
||
U+26D3, U+26D4, U+26E9, U+26EA, U+26F0-26F5, U+26F7-26FA, U+26FD, U+2702,
|
||
U+2705, U+2708-270D, U+270F, U+2712, U+2714, U+2716, U+271D, U+2721, U+2728,
|
||
U+2733, U+2734, U+2744, U+2747, U+274C, U+274E, U+2753-2755, U+2757, U+2763,
|
||
U+2764, U+2795-2797, U+27A1, U+27B0, U+27BF, U+2934, U+2935, U+2B05-2B07,
|
||
U+2B1B, U+2B1C, U+2B50, U+2B55, U+3030, U+303D, U+3297, U+3299, U+1F004,
|
||
U+1F0CF, U+1F170, U+1F171, U+1F17E, U+1F17F, U+1F18E, U+1F191-1F19A,
|
||
U+1F1E6-1F1FF, U+1F201, U+1F202, U+1F21A, U+1F22F, U+1F232-1F23A, U+1F250,
|
||
U+1F251, U+1F300-1F321, U+1F324-1F393, U+1F396, U+1F397, U+1F399-1F39B,
|
||
U+1F39E-1F3F0, U+1F3F3-1F3F5, U+1F3F7-1F4FD, U+1F4FF-1F53D, U+1F549-1F54E,
|
||
U+1F550-1F567, U+1F56F, U+1F570, U+1F573-1F57A, U+1F587, U+1F58A-1F58D,
|
||
U+1F590, U+1F595, U+1F596, U+1F5A4, U+1F5A5, U+1F5A8, U+1F5B1, U+1F5B2,
|
||
U+1F5BC, U+1F5C2-1F5C4, U+1F5D1-1F5D3, U+1F5DC-1F5DE, U+1F5E1, U+1F5E3,
|
||
U+1F5E8, U+1F5EF, U+1F5F3, U+1F5FA-1F64F, U+1F680-1F6C5, U+1F6CB-1F6D2,
|
||
U+1F6D5-1F6D7, U+1F6DC-1F6E5, U+1F6E9, U+1F6EB, U+1F6EC, U+1F6F0,
|
||
U+1F6F3-1F6FC, U+1F7E0-1F7EB, U+1F7F0, U+1F90C-1F93A, U+1F93C-1F945,
|
||
U+1F947-1F9FF, U+1FA70-1FA7C, U+1FA80-1FA88, U+1FA90-1FABD, U+1FABF-1FAC5,
|
||
U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'icomoon';
|
||
src: url('../public/fonts/icomoon.eot?v49ui9#iefix') format('embedded-opentype'),
|
||
url('../public/fonts/icomoon.ttf?v49ui9') format('truetype'),
|
||
url('../public/fonts/icomoon.woff?v49ui9') format('woff'),
|
||
url('../public/fonts/icomoon.svg?v49ui9#icomoon') format('svg');
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
font-display: block;
|
||
unicode-range: U+1E40;
|
||
}
|
||
|
||
[class^='icon-'],
|
||
[class*=' icon-'] {
|
||
/* use !important to prevent issues with browser extensions that change fonts */
|
||
font-family: 'icomoon', serif !important;
|
||
speak: never;
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
font-variant: normal;
|
||
text-transform: none;
|
||
line-height: 1;
|
||
|
||
/* Better Font Rendering =========== */
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
.icon-mana_3:before {
|
||
content: '\1e40';
|
||
}
|
||
|
||
/* For Webkit-inkd browsers (Chrome, Safari and Opera) */
|
||
.scrollbar-hide::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* For IE, Edge and Firefox */
|
||
.scrollbar-hide {
|
||
-ms-overflow-style: none; /* IE and Edge */
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
|
||
text {
|
||
font-family: icomoon, var(--font-main), emoji, sans-serif;
|
||
}
|
||
|
||
/* Style all headings globally */
|
||
h1, h2, h3, h4, h5, h6 {
|
||
/*font-family: 'Inter', sans-serif; !* Clean modern font *!*/
|
||
font-weight: 600; /* Semi-bold for clarity */
|
||
/*color: #111827; !* Near-black text for readability *!*/
|
||
line-height: 1.25;
|
||
margin-top: 1.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
/* Size scaling */
|
||
h1 {
|
||
font-size: 2rem; /* ~32px */
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.5rem; /* ~24px */
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1.25rem; /* ~20px */
|
||
}
|
||
|
||
h4 {
|
||
font-size: 1.125rem; /* ~18px */
|
||
}
|
||
|
||
h5 {
|
||
font-size: 1rem; /* ~16px */
|
||
}
|
||
|
||
h6 {
|
||
font-size: 0.875rem; /* ~14px */
|
||
color: #374151; /* Slightly lighter for subheadings */
|
||
}
|
||
|
||
ul {
|
||
list-style: disc;
|
||
padding-left: 1.25rem;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.custom-link a,
|
||
.custom-link button {
|
||
color: #0969da;
|
||
text-decoration: none;
|
||
font-family: var(--font-main), serif;
|
||
}
|
||
|
||
.dark .custom-link a,
|
||
.dark .custom-link button {
|
||
color: #4493f8;
|
||
text-decoration: none;
|
||
font-family: var(--font-main), serif;
|
||
}
|
||
|
||
.custom-link a:hover,
|
||
.custom-link button:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.dark .custom-link a:hover,
|
||
.dark .custom-link button:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.sidebar-nav {
|
||
font-family: var(--font-main), serif;
|
||
}
|
||
|
||
.body-bg {
|
||
background-color: rgb(var(--color-canvas-0));
|
||
}
|
||
|
||
/* Restore normal ol numbers and ensure they are visible */
|
||
ol {
|
||
list-style-position: inside; /* or 'inside' if you prefer */
|
||
/*margin: 0 0 1rem 0;*/
|
||
list-style: decimal;
|
||
padding-left: 0.5rem; /* space for numbers */
|
||
}
|
||
|
||
/* Ensure li behaves as a list item (some resets or flex can break markers) */
|
||
ol > li {
|
||
display: list-item; /* prevents flex from removing marker layout */
|
||
/*padding-left: 0rem; !* extra spacing after number *!*/
|
||
/*text-indent: -0rem; !* pull first line back so text aligns *!*/
|
||
}
|
||
|
||
/* Style the marker (modern browsers) */
|
||
ol > li::marker {
|
||
font-weight: 600;
|
||
font-size: 1em;
|
||
color: #374151; /* pick a visible color */
|
||
}
|
||
|