mirror of
https://github.com/CompassConnections/Compass.git
synced 2026-07-30 17:59:13 -04:00
679 lines
21 KiB
CSS
679 lines
21 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 */
|
||
--filter-offset: 0px; /* padding for filters on mobile */
|
||
touch-action: pan-y;
|
||
}
|
||
|
||
@media (width < 600px) {
|
||
:root {
|
||
--filter-offset: 20px;
|
||
}
|
||
}
|
||
|
||
.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: 'Cormorant Garamond', serif;
|
||
}
|
||
|
||
@layer base {
|
||
body {
|
||
font-family: var(--font-main), serif;
|
||
touch-action: pan-y;
|
||
}
|
||
|
||
button,
|
||
input,
|
||
label {
|
||
font-family:
|
||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||
}
|
||
|
||
html {
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
/*Background: #EDE8E0 (current - warm beige)*/
|
||
/*Sidebar: #2C2416 (dark espresso brown)*/
|
||
/*Cards: #F7F4EF (cream white)*/
|
||
/*Primary: #C17F3E (warm amber/gold)*/
|
||
/*Secondary: #8B5E3C (terracotta brown)*/
|
||
/*Accent: #6B8F71 (sage green)*/
|
||
/*Text: #1E1A14 (deep warm black)*/
|
||
/*Muted text: #8C8070 (warm gray)*/
|
||
/*Tags: #E8D5BC (light tan)*/
|
||
:root {
|
||
touch-action: pan-y;
|
||
|
||
--grid-stroke: rgb(232 213 188); /* canvas-200 */
|
||
|
||
/* Ink - Text Colors */
|
||
--color-ink-500: 140 128 112; /* Muted Warm Gray (#8C8070) */
|
||
--color-ink-600: 120 108 92;
|
||
--color-ink-700: 100 88 72;
|
||
--color-ink-900: 30 26 20; /* Deep Warm Black (#1E1A14) */
|
||
|
||
/* Green - Accents */
|
||
--color-green-200: #f0faf3;
|
||
--color-green-500: 107 143 113; /* Accent - Sage Green (#6B8F71) */
|
||
|
||
/* Canvas - Backgrounds & Surfaces */
|
||
--color-canvas-0: 255 255 255; /* white */
|
||
--color-canvas-25: 242 240 232;
|
||
--color-canvas-50: 247 244 239; /* Cards - Cream White (#F7F4EF) */
|
||
--color-canvas-100: 237 232 224; /* Main Page Background - Warm Beige (#EDE8E0) */
|
||
--color-canvas-200: 232 213 188; /* Tags - Light Tan (#E8D5BC) */
|
||
--color-canvas-300: 222 203 178;
|
||
--color-canvas-900: 68 52 34; /* Sidebar pressed */
|
||
--color-canvas-950: 44 36 22; /* Sidebar - Dark Espresso (#2C2416) */
|
||
--color-canvas-1000: 44 36 22; /* black */
|
||
|
||
/* Primary - Warm Amber */
|
||
--color-primary-50: 250 243 233; /* #FAF3E9 */
|
||
--color-primary-100: 243 228 206; /* #F3E4CE */
|
||
--color-primary-200: 232 201 157; /* #E8C99D */
|
||
--color-primary-300: 220 171 113; /* #DCAB71 */
|
||
--color-primary-400: 208 147 82; /* #D09352 */
|
||
--color-primary-500: 193 127 62; /* #C17F3E - Base */
|
||
--color-primary-600: 166 104 46; /* #A6682E */
|
||
--color-primary-700: 133 80 34; /* #855022 */
|
||
--color-primary-800: 101 58 24; /* #653A18 */
|
||
--color-primary-900: 71 39 16; /* #472710 */
|
||
--color-primary-950: 43 21 8; /* #2B1508 */
|
||
|
||
/* Filled-button background — the amber a *white label* is allowed to sit on.
|
||
The brand base (primary-500, #C17F3E) carries white at only 3.30:1, below the 4.5:1 AA needs
|
||
for normal-size text, and it is the background of every primary CTA in the app. This is one
|
||
ramp step down (#A6682E) at 4.52:1.
|
||
It is a token of its own rather than "just use primary-600" because the primary ramp *inverts*
|
||
between themes — in dark mode 600 is a step *lighter*, so `bg-primary-600` would clear AA in
|
||
light and drop dark to 2.64:1. Both themes therefore pin the same value here: a solid brand
|
||
block does not need to shift with the theme, and white has to stay legible on it either way.
|
||
Hover goes darker (not lighter) in both themes for the same reason. */
|
||
--color-cta: 166 104 46; /* #A6682E — white on this: 4.52:1 */
|
||
--color-cta-hover: 133 80 34; /* #855022 — white on this: 6.29:1 */
|
||
--color-cta-deep: 101 58 24; /* #653A18 — the far stop of the gradient CTA, ~9:1 */
|
||
|
||
--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 */
|
||
|
||
--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;
|
||
|
||
--grid-stroke: rgb(68 52 34); /* canvas-900 */
|
||
|
||
/* Ink - Text becomes light */
|
||
--color-ink-500: 176 160 140; /* Muted Text - shifted to warm tan */
|
||
--color-ink-600: 186 170 150;
|
||
--color-ink-700: 206 190 170;
|
||
--color-ink-900: 247 244 239; /* Main Body Text (Old Card color) */
|
||
--color-ink-950: 255 255 255; /* Purest highlight */
|
||
|
||
/* Button background — barely-there dark green surface */
|
||
--color-green-200: 32 54 38;
|
||
|
||
/* Icon, dot, text — readable sage on that dark surface */
|
||
--color-green-500: 125 160 131;
|
||
|
||
/* 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 */
|
||
|
||
/* Canvas - Backgrounds become dark */
|
||
--color-canvas-0: 0 0 0;
|
||
--color-canvas-25: 20 20 20;
|
||
--color-canvas-50: 35 31 26; /* Elevated surfaces (Cards) */
|
||
--color-canvas-100: 26 22 18; /* Main Page Background (#2C2416) */
|
||
--color-canvas-200: 68 52 34; /* UI Elements/Tags */
|
||
--color-canvas-300: 78 62 44;
|
||
--color-canvas-900: 25 23 20; /* Sidebar pressed */
|
||
--color-canvas-950: 15 13 10; /* Deepest depth (Sidebar/Bottom) */
|
||
--color-canvas-1000: 247 244 239; /* Deepest depth (Sidebar/Bottom) */
|
||
|
||
/* Dark Mode Primary - Luminous Amber */
|
||
--color-primary-50: 43 21 8; /* Deepest Shadow (Old 950) */
|
||
--color-primary-100: 71 39 16; /* Deep Bronze */
|
||
--color-primary-200: 101 58 24; /* Muted Gold */
|
||
--color-primary-300: 133 80 34; /* Antique Brass */
|
||
--color-primary-400: 166 104 46; /* Warm Gold */
|
||
--color-primary-500: 193 127 62; /* YOUR BASE (#C17F3E) */
|
||
--color-primary-600: 208 147 82; /* Lighter (Hover State in Dark) */
|
||
--color-primary-700: 220 171 113; /* Bright (Active State in Dark) */
|
||
--color-primary-800: 232 201 157; /* Highlight Tint */
|
||
--color-primary-900: 243 228 206; /* Near-Cream Tint */
|
||
--color-primary-950: 250 243 233; /* Glow Tint */
|
||
|
||
/* Same values as the light theme — see the note there. The ramp inverts in dark mode, so the
|
||
token cannot be expressed as a ramp step that works in both; white legibility is the
|
||
constraint, and it does not care which theme is active. */
|
||
--color-cta: 166 104 46; /* = primary-400 in this (dark) ramp */
|
||
--color-cta-hover: 133 80 34; /* = primary-300 in this (dark) ramp */
|
||
--color-cta-deep: 101 58 24; /* pinned dark: the gradient's far stop used to be primary-800,
|
||
which in this ramp is near-cream (232 201 157) — white text ran
|
||
off the end of it at about 1.3:1. */
|
||
|
||
--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-950: 240 253 244; /* lightest green */
|
||
--color-green-900: 220 252 231;
|
||
--color-green-800: 187 247 208;
|
||
--color-green-700: 134 239 172;
|
||
--color-green-600: 74 222 128;
|
||
/*--color-green-500: 34 197 94; !* standard green *!*/
|
||
--color-green-400: 22 163 74;
|
||
--color-green-300: 21 128 61;
|
||
/*--color-green-200: 22 101 52;*/
|
||
--color-green-100: 20 83 45;
|
||
--color-green-50: 5 46 22; /* darkest green */
|
||
|
||
--color-yellow-950: 255 251 235; /* lightest yellow */
|
||
--color-yellow-900: 254 243 199;
|
||
--color-yellow-800: 253 230 138;
|
||
--color-yellow-700: 252 211 77;
|
||
--color-yellow-600: 251 191 36;
|
||
--color-yellow-500: 245 158 11; /* standard yellow */
|
||
--color-yellow-400: 217 119 6;
|
||
--color-yellow-300: 180 83 9;
|
||
--color-yellow-200: 146 64 14;
|
||
--color-yellow-100: 113 63 18;
|
||
--color-yellow-50: 66 50 3; /* darkest yellow */
|
||
|
||
--color-red-950: 254 242 242; /* lightest red */
|
||
--color-red-900: 254 226 226;
|
||
--color-red-800: 254 202 202;
|
||
--color-red-700: 252 165 165;
|
||
--color-red-600: 248 113 113;
|
||
--color-red-500: 239 68 68; /* standard red */
|
||
--color-red-400: 220 38 38;
|
||
--color-red-300: 185 28 28;
|
||
--color-red-200: 153 27 27;
|
||
--color-red-100: 127 29 29;
|
||
--color-red-50: 69 10 10; /* darkest red */
|
||
|
||
touch-action: pan-y;
|
||
}
|
||
}
|
||
|
||
@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 */
|
||
}
|
||
|
||
/* The opposite of .scrollbar-hide: a slim scrollbar that is always drawn, never an overlay that fades
|
||
out. Used by ScrollPanel, where the whole point is that the region reads as scrollable at a glance. */
|
||
.scrollbar-visible {
|
||
scrollbar-width: thin; /* Firefox */
|
||
scrollbar-color: rgb(var(--color-primary-400) / 0.55) rgb(var(--color-canvas-200));
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
.scrollbar-visible::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
.scrollbar-visible::-webkit-scrollbar-track {
|
||
background: rgb(var(--color-canvas-200));
|
||
border-radius: 100px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.scrollbar-visible::-webkit-scrollbar-thumb {
|
||
background: rgb(var(--color-primary-400) / 0.55);
|
||
border-radius: 100px;
|
||
}
|
||
|
||
.scrollbar-visible::-webkit-scrollbar-thumb:hover {
|
||
background: rgb(var(--color-primary-500) / 0.8);
|
||
}
|
||
|
||
text {
|
||
font-family: icomoon, var(--font-main), emoji, sans-serif;
|
||
}
|
||
|
||
/* Style all headings globally */
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-family: 'Newsreader', Georgia, serif;
|
||
/* 900 exceeds Newsreader's 800 ceiling, so the browser clamps to 800. That is still a real weight
|
||
rather than the synthesised faux-bold headings got under Cormorant, which was only loaded to 600. */
|
||
font-weight: 700;
|
||
/*color: #111827; !* Near-black text for readability *!*/
|
||
line-height: 1.25;
|
||
margin-top: 1.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
/* Size scaling */
|
||
h1 {
|
||
font-weight: 600;
|
||
font-size: 2rem; /* ~32px */
|
||
}
|
||
|
||
h2 {
|
||
font-weight: 600;
|
||
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;
|
||
}
|
||
|
||
/* `primary-700`, not the raw #c17f3e brand base: that hex is 3.30:1 on the canvas and this rule
|
||
beats any `text-*` utility on the anchor (0,2,0 vs 0,1,0 specificity), so call sites could not
|
||
opt out of it. As a var it also flips with the theme instead of being a light-mode literal
|
||
duplicated into the .dark block below. */
|
||
.custom-link a,
|
||
.custom-link button {
|
||
color: rgb(var(--color-primary-700));
|
||
text-decoration: none;
|
||
font-family: var(--font-main), serif;
|
||
}
|
||
|
||
.dark .custom-link a,
|
||
.dark .custom-link button {
|
||
color: rgb(var(--color-primary-700));
|
||
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-100));
|
||
}
|
||
|
||
/* 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 */
|
||
}
|
||
|
||
/* Onboarding animations */
|
||
@keyframes fade-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fade-out-slow {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
80% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-5px);
|
||
}
|
||
}
|
||
|
||
.animate-fade-in {
|
||
animation: fade-in 0.8s ease-out;
|
||
}
|
||
|
||
.animate-fade-out-slow {
|
||
animation: fade-out-slow 3s ease-out forwards;
|
||
}
|
||
|
||
@keyframes profile-appear {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(16px) scale(0.98);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
.animate-profile-appear {
|
||
animation: profile-appear 0.7s ease-out;
|
||
}
|
||
|
||
/* Home hero entrance */
|
||
@keyframes fade-up {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(18px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.animate-fade-up {
|
||
animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.animate-fade-up {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
/* Was `opacity: 0.7`, which dimmed whatever it inherited to roughly 3.2:1 — and dimmed any link
|
||
inside it along with the text. A real colour token hits the same "secondary" register while
|
||
staying legible, and leaves nested links at their own contrast. */
|
||
.guidance {
|
||
color: rgb(var(--color-ink-700));
|
||
font-size: 14px;
|
||
}
|
||
|
||
input {
|
||
transition: background-color 0.2s ease-in-out;
|
||
}
|
||
|
||
.hover-bold {
|
||
transition: text-shadow 0.2s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.hover-bold:hover,
|
||
.force-bold {
|
||
text-shadow:
|
||
0.01em 0 currentColor,
|
||
-0.01em 0 currentColor,
|
||
0 0.01em currentColor,
|
||
0 -0.01em currentColor;
|
||
}
|
||
|
||
select {
|
||
@apply hover-bold;
|
||
@apply cursor-pointer;
|
||
}
|
||
|
||
.sidebar-text {
|
||
color: #f3e4ce;
|
||
}
|