@import "tailwindcss"; @import "trix/dist/trix.css"; @theme { --color-longhorn-50: #fffbea; --color-longhorn-100: #fff5c4; --color-longhorn-200: #ffe984; --color-longhorn-300: #ffd744; --color-longhorn-400: #ffc419; --color-longhorn-500: #ffa600; --color-longhorn-600: #e47f00; --color-longhorn-700: #bf5700; --color-longhorn-800: #994207; --color-longhorn-900: #7e3609; --color-longhorn-950: #481b00; } /* Profile accent themes — override the longhorn-* palette so every longhorn utility class in the app reskins by setting data-theme on . "texas" is the @theme default above. Selectors are html[data-theme=...] for specificity over the :root theme vars. */ html[data-theme="florida"] { --color-longhorn-50: #ebf1ff; --color-longhorn-100: #d7e3ff; --color-longhorn-200: #aec6ff; --color-longhorn-300: #7d9ff7; --color-longhorn-400: #4a73ea; --color-longhorn-500: #2350d6; --color-longhorn-600: #0f34bd; --color-longhorn-700: #0021a5; --color-longhorn-800: #001c87; --color-longhorn-900: #001566; --color-longhorn-950: #000b3a; } html[data-theme="aggie"] { --color-longhorn-50: #fbeaea; --color-longhorn-100: #f6d4d4; --color-longhorn-200: #e9a3a3; --color-longhorn-300: #d97272; --color-longhorn-400: #c24545; --color-longhorn-500: #9e2727; --color-longhorn-600: #771414; --color-longhorn-700: #500000; --color-longhorn-800: #420000; --color-longhorn-900: #330000; --color-longhorn-950: #1f0000; } /* Silver & black */ html[data-theme="spurs"] { --color-longhorn-50: #f5f6f7; --color-longhorn-100: #e7eaec; --color-longhorn-200: #cfd5d9; --color-longhorn-300: #aab2b8; --color-longhorn-400: #7c858c; --color-longhorn-500: #565e64; --color-longhorn-600: #3d4348; --color-longhorn-700: #2a2e32; --color-longhorn-800: #1c1f22; --color-longhorn-900: #101214; --color-longhorn-950: #000000; } /* Navy blue */ html[data-theme="cowboys"] { --color-longhorn-50: #e9f0fc; --color-longhorn-100: #cdddf8; --color-longhorn-200: #9bbbf0; --color-longhorn-300: #6493e4; --color-longhorn-400: #356fd4; --color-longhorn-500: #1450b8; --color-longhorn-600: #06409c; --color-longhorn-700: #003594; --color-longhorn-800: #002a76; --color-longhorn-900: #001f57; --color-longhorn-950: #001236; } /* Deep steel blue */ html[data-theme="texans"] { --color-longhorn-50: #eef4f6; --color-longhorn-100: #d3e3e8; --color-longhorn-200: #a8c6d0; --color-longhorn-300: #74a0ae; --color-longhorn-400: #46798b; --color-longhorn-500: #2e6070; --color-longhorn-600: #234e5c; --color-longhorn-700: #1b3e4a; --color-longhorn-800: #122d37; --color-longhorn-900: #0a1f27; --color-longhorn-950: #03141b; } /* Crimson red */ html[data-theme="rockets"] { --color-longhorn-50: #fdebef; --color-longhorn-100: #fbccd6; --color-longhorn-200: #f59bac; --color-longhorn-300: #ef6178; --color-longhorn-400: #e43253; --color-longhorn-500: #d51444; --color-longhorn-600: #ce1141; --color-longhorn-700: #a90d36; --color-longhorn-800: #850b2b; --color-longhorn-900: #5f071e; --color-longhorn-950: #3a0412; } /* Orange & navy (700 darkened from Broncos orange #fb4f14 so white nav text clears contrast) */ html[data-theme="broncos"] { --color-longhorn-50: #fff3ec; --color-longhorn-100: #ffe2d2; --color-longhorn-200: #ffc0a3; --color-longhorn-300: #fd9a6a; --color-longhorn-400: #fb6f33; --color-longhorn-500: #fb4f14; --color-longhorn-600: #e2400b; --color-longhorn-700: #c2410c; --color-longhorn-800: #9a330b; --color-longhorn-900: #7c2c0d; --color-longhorn-950: #431306; } /* Scarlet & gray — scarlet (#bb0000 @700) accent ramp. */ html[data-theme="buckeyes"] { --color-longhorn-50: #fef2f2; --color-longhorn-100: #fde0e0; --color-longhorn-200: #fbc4c4; --color-longhorn-300: #f79a9a; --color-longhorn-400: #ef5f5f; --color-longhorn-500: #e23535; --color-longhorn-600: #c81a1a; --color-longhorn-700: #bb0000; --color-longhorn-800: #9a0808; --color-longhorn-900: #7f0d0d; --color-longhorn-950: #460303; } /* Crimson & white — deep crimson (#9e1b32 @700) accent ramp. */ html[data-theme="alabama"] { --color-longhorn-50: #fcebee; --color-longhorn-100: #f7d2da; --color-longhorn-200: #eea6b4; --color-longhorn-300: #e2768c; --color-longhorn-400: #d04a66; --color-longhorn-500: #ba2945; --color-longhorn-600: #ab1e39; --color-longhorn-700: #9e1b32; --color-longhorn-800: #821628; --color-longhorn-900: #65111f; --color-longhorn-950: #3f0a13; } /* Halloween — pumpkin orange (700 darkened to #b83d0b so white-on-accent text clears contrast). Pairs with the dark color scheme for the classic orange-on-black look. */ html[data-theme="halloween"] { --color-longhorn-50: #fff5ec; --color-longhorn-100: #ffe8d2; --color-longhorn-200: #fecba0; --color-longhorn-300: #fda85f; --color-longhorn-400: #fb7e2d; --color-longhorn-500: #f6600a; --color-longhorn-600: #dd4e05; --color-longhorn-700: #b83d0b; --color-longhorn-800: #93330f; --color-longhorn-900: #762c11; --color-longhorn-950: #401206; } /* ── Caption text ───────────────────────────────────────────────────────────── ⚠ gray-400 is the app's "quieter than the label" ink — "2 days left", "$20.00/h", "for the range" — and at #99a1af it is 2.60 on white and 2.49 on gray-50, well under the 4.5 AA asks of normal text. There is no fix at that lightness: 4.5:1 over a gray-50 card needs roughly #6b7280, which IS gray-500. So the ramp step collapses, deliberately — a caption lighter than gray-500 cannot be read, and one that cannot be read is decoration pretending to be information. Borders and the single gray-400 fill ride along a shade darker, which is harmless; placeholders ride along and get better. Set as the variable rather than a .text-gray-400 override so hover/responsive variants keep working normally. */ @theme { --color-gray-400: #6b7280; } /* ── Dark color scheme ──────────────────────────────────────────────────────── A SECOND, independent axis from the accent theme above. Tailwind v4 emits every neutral utility as var(--color-*) (e.g. .bg-white → var(--color-white), .text-gray-900 → var(--color-gray-900)), so remapping the neutral palette darkens the whole app with no view edits. The gray ramp is inverted (50 = darkest page, 900 = lightest ink); white becomes an elevated surface. --color-white is shared by bg-white (surface, must darken) and text-white (on accents, must stay light), so text-white / ring-white are compensated back to light afterwards. Applied when the member chooses Dark, or chooses System and the OS is dark. */ html[data-scheme="dark"] { color-scheme: dark; --color-white: #1c2128; --color-gray-50: #0d1117; --color-gray-100: #161b22; --color-gray-200: #2d333b; --color-gray-300: #444c56; --color-gray-400: #8b949e; /* was #6e7681 — 3.52 on a card, see the caption note above */ --color-gray-500: #8b949e; --color-gray-600: #adbac7; --color-gray-700: #c9d1d9; --color-gray-800: #dde4ec; --color-gray-900: #f0f6fc; --color-gray-950: #ffffff; } html[data-scheme="dark"] .text-white { color: #ffffff; } html[data-scheme="dark"] .ring-white { --tw-ring-color: #1c2128; } /* ── Semantic colors on the dark canvas ─────────────────────────────────── ⚠ The dark scheme inverted the NEUTRAL ramp and left every semantic family alone, which breaks both ways at once: red/amber/emerald ink is picked for contrast against a white page (#c10007 is 2.52 on a dark card), while the -50 tint a banner sits on stays light, so lightening the ink alone would turn 145+ banners into pale text on pale tint. Both ends move together. ⚠ INK IS OVERRIDDEN AS A UTILITY, TINT AS A VARIABLE, and that asymmetry is the point: --color-red-600 is also what bg-red-600 paints, so remapping the variable would drag solid buttons light and break the white text on them. Overriding .text-* leaves every fill exactly as it was. Hover partners are listed explicitly — these selectors outrank a bare .hover\:text-* and would otherwise freeze the hover state. */ html[data-scheme="dark"] { --color-red-50: #3a1d1f; } html[data-scheme="dark"] { --color-red-100: #4a2528; } html[data-scheme="dark"] :is(.text-red-600, .text-red-700, .text-red-800, .text-red-900), html[data-scheme="dark"] :is(.hover\:text-red-600, .hover\:text-red-700, .hover\:text-red-800):hover { color: #ff9ea2; } html[data-scheme="dark"] { --color-amber-50: #3a2a12; } html[data-scheme="dark"] { --color-amber-100: #4a361a; } html[data-scheme="dark"] :is(.text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900), html[data-scheme="dark"] :is(.hover\:text-amber-600, .hover\:text-amber-700, .hover\:text-amber-800):hover { color: #f5c04a; } html[data-scheme="dark"] { --color-emerald-50: #132d24; } html[data-scheme="dark"] { --color-emerald-100: #1a3b2f; } html[data-scheme="dark"] :is(.text-emerald-600, .text-emerald-700, .text-emerald-800, .text-emerald-900), html[data-scheme="dark"] :is(.hover\:text-emerald-600, .hover\:text-emerald-700, .hover\:text-emerald-800):hover { color: #4ade9b; } html[data-scheme="dark"] { --color-sky-50: #12283a; } html[data-scheme="dark"] { --color-sky-100: #193448; } html[data-scheme="dark"] :is(.text-sky-600, .text-sky-700, .text-sky-800, .text-sky-900), html[data-scheme="dark"] :is(.hover\:text-sky-600, .hover\:text-sky-700, .hover\:text-sky-800):hover { color: #7cc7f5; } html[data-scheme="dark"] { --color-violet-50: #241d3a; } html[data-scheme="dark"] { --color-violet-100: #2f2649; } html[data-scheme="dark"] :is(.text-violet-600, .text-violet-700, .text-violet-800, .text-violet-900), html[data-scheme="dark"] :is(.hover\:text-violet-600, .hover\:text-violet-700, .hover\:text-violet-800):hover { color: #c0aefc; } html[data-scheme="dark"] { --color-blue-50: #16203a; } html[data-scheme="dark"] { --color-blue-100: #1e2b4a; } html[data-scheme="dark"] :is(.text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900), html[data-scheme="dark"] :is(.hover\:text-blue-600, .hover\:text-blue-700, .hover\:text-blue-800):hover { color: #9ab8ff; } /* The accent's own light tint, same trap: bg-longhorn-50 chips and sticky headers stayed cream while their ink moved to the light end of the ramp (1.53). The tint goes to a neutral dark surface rather than a themed one — fourteen accent themes share this rule and the accent still reads through the ink and the ring. ⚠ longhorn-100 is deliberately left alone: it is INK on dark accent fills (text-longhorn-100), not a surface. */ html[data-scheme="dark"] { --color-longhorn-50: #161b22; } /* ── Accent used as INK on the dark canvas ──────────────────────────────────── ⚠ The dark end of the accent ramp is picked for contrast against a WHITE page, so on the dark canvas it is the wrong end of the ramp: #bf5700 ink over the #1c2128 surface is 3.52, under the 4.5 AA asks for. Ink moves to the light end of whatever accent theme is active — a var, not a hex, so every theme brings its own. Accent FILLS (bg-longhorn-*) are deliberately untouched: they carry .text-white, compensated just above, and lightening the fill would break that instead. */ html[data-scheme="dark"] :is(.text-longhorn-600, .text-longhorn-700, .text-longhorn-800, .text-longhorn-900), html[data-scheme="dark"] :is(.hover\:text-longhorn-600, .hover\:text-longhorn-700, .hover\:text-longhorn-800):hover { color: var(--color-longhorn-400); } @media (prefers-color-scheme: dark) { html[data-scheme="system"] { color-scheme: dark; --color-white: #1c2128; --color-gray-50: #0d1117; --color-gray-100: #161b22; --color-gray-200: #2d333b; --color-gray-300: #444c56; --color-gray-400: #8b949e; /* was #6e7681 — 3.52 on a card, see the caption note above */ --color-gray-500: #8b949e; --color-gray-600: #adbac7; --color-gray-700: #c9d1d9; --color-gray-800: #dde4ec; --color-gray-900: #f0f6fc; --color-gray-950: #ffffff; } html[data-scheme="system"] .text-white { color: #ffffff; } html[data-scheme="system"] .ring-white { --tw-ring-color: #1c2128; } /* ── Semantic colors on the dark canvas ─────────────────────────────────── ⚠ The dark scheme inverted the NEUTRAL ramp and left every semantic family alone, which breaks both ways at once: red/amber/emerald ink is picked for contrast against a white page (#c10007 is 2.52 on a dark card), while the -50 tint a banner sits on stays light, so lightening the ink alone would turn 145+ banners into pale text on pale tint. Both ends move together. ⚠ INK IS OVERRIDDEN AS A UTILITY, TINT AS A VARIABLE, and that asymmetry is the point: --color-red-600 is also what bg-red-600 paints, so remapping the variable would drag solid buttons light and break the white text on them. Overriding .text-* leaves every fill exactly as it was. Hover partners are listed explicitly — these selectors outrank a bare .hover\:text-* and would otherwise freeze the hover state. */ html[data-scheme="system"] { --color-red-50: #3a1d1f; } html[data-scheme="system"] { --color-red-100: #4a2528; } html[data-scheme="system"] :is(.text-red-600, .text-red-700, .text-red-800, .text-red-900), html[data-scheme="system"] :is(.hover\:text-red-600, .hover\:text-red-700, .hover\:text-red-800):hover { color: #ff9ea2; } html[data-scheme="system"] { --color-amber-50: #3a2a12; } html[data-scheme="system"] { --color-amber-100: #4a361a; } html[data-scheme="system"] :is(.text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900), html[data-scheme="system"] :is(.hover\:text-amber-600, .hover\:text-amber-700, .hover\:text-amber-800):hover { color: #f5c04a; } html[data-scheme="system"] { --color-emerald-50: #132d24; } html[data-scheme="system"] { --color-emerald-100: #1a3b2f; } html[data-scheme="system"] :is(.text-emerald-600, .text-emerald-700, .text-emerald-800, .text-emerald-900), html[data-scheme="system"] :is(.hover\:text-emerald-600, .hover\:text-emerald-700, .hover\:text-emerald-800):hover { color: #4ade9b; } html[data-scheme="system"] { --color-sky-50: #12283a; } html[data-scheme="system"] { --color-sky-100: #193448; } html[data-scheme="system"] :is(.text-sky-600, .text-sky-700, .text-sky-800, .text-sky-900), html[data-scheme="system"] :is(.hover\:text-sky-600, .hover\:text-sky-700, .hover\:text-sky-800):hover { color: #7cc7f5; } html[data-scheme="system"] { --color-violet-50: #241d3a; } html[data-scheme="system"] { --color-violet-100: #2f2649; } html[data-scheme="system"] :is(.text-violet-600, .text-violet-700, .text-violet-800, .text-violet-900), html[data-scheme="system"] :is(.hover\:text-violet-600, .hover\:text-violet-700, .hover\:text-violet-800):hover { color: #c0aefc; } html[data-scheme="system"] { --color-blue-50: #16203a; } html[data-scheme="system"] { --color-blue-100: #1e2b4a; } html[data-scheme="system"] :is(.text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900), html[data-scheme="system"] :is(.hover\:text-blue-600, .hover\:text-blue-700, .hover\:text-blue-800):hover { color: #9ab8ff; } /* The accent's own light tint, same trap: bg-longhorn-50 chips and sticky headers stayed cream while their ink moved to the light end of the ramp (1.53). The tint goes to a neutral dark surface rather than a themed one — fourteen accent themes share this rule and the accent still reads through the ink and the ring. ⚠ longhorn-100 is deliberately left alone: it is INK on dark accent fills (text-longhorn-100), not a surface. */ html[data-scheme="system"] { --color-longhorn-50: #161b22; } /* ── Accent used as INK on the dark canvas ──────────────────────────────────── ⚠ The dark end of the accent ramp is picked for contrast against a WHITE page, so on the dark canvas it is the wrong end of the ramp: #bf5700 ink over the #1c2128 surface is 3.52, under the 4.5 AA asks for. Ink moves to the light end of whatever accent theme is active — a var, not a hex, so every theme brings its own. Accent FILLS (bg-longhorn-*) are deliberately untouched: they carry .text-white, compensated just above, and lightening the fill would break that instead. */ html[data-scheme="system"] :is(.text-longhorn-600, .text-longhorn-700, .text-longhorn-800, .text-longhorn-900), html[data-scheme="system"] :is(.hover\:text-longhorn-600, .hover\:text-longhorn-700, .hover\:text-longhorn-800):hover { color: var(--color-longhorn-400); } } /* ── The page canvas ────────────────────────────────────────────────────────── ⚠ The body carries no background of its own in the markup, so the page behind every card was the BROWSER's default. Under a dark scheme `color-scheme: dark` makes the browser paint that canvas dark, which looks right — but nothing in the document says so, so anything reading the page rather than looking at it (an auditor, a print stylesheet, an embedded webview that ignores color-scheme) sees the inverted ink over an assumed white sheet: #f0f6fc text at 1.08 against white. Naming the canvas costs nothing in light mode — --color-white IS #ffffff there — and makes the dark one true rather than merely painted. */ body { background-color: var(--color-white); color: var(--color-gray-900); } /* ── Trix rich-text editor (social feed) ────────────────────────────────────── Match the longhorn form controls and give the toolbar an underlined "U" button (added by app/javascript/lib/trix_setup.js). `.trix-content` styles the rendered, sanitized post body. */ trix-editor { border-radius: 0.5rem; border: 1px solid var(--color-gray-300); background: var(--color-white); padding: 0.625rem 0.875rem; font-size: 0.875rem; color: var(--color-gray-900); min-height: 6rem; } trix-editor:focus { outline: none; border-color: var(--color-longhorn-500); box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-longhorn-500) 40%, transparent); } trix-editor:empty:not(:focus)::before { color: var(--color-gray-400); } trix-toolbar .trix-button-group { border-color: var(--color-gray-300); } trix-toolbar .trix-button--icon { height: 1.6rem; } /* The injected Underline button is a plain text button — render a bold, underlined "U". */ trix-toolbar .trix-button[data-trix-attribute="underline"] { text-decoration: underline; font-weight: 700; } /* Rendered post body */ .trix-content { color: var(--color-gray-800); word-break: break-word; } .trix-content strong { font-weight: 700; } .trix-content em { font-style: italic; } .trix-content a { color: var(--color-longhorn-700); text-decoration: underline; } .trix-content ul { list-style: disc; padding-left: 1.25rem; } .trix-content ol { list-style: decimal; padding-left: 1.25rem; } .trix-content blockquote { border-left: 3px solid var(--color-gray-300); padding-left: 0.75rem; color: var(--color-gray-600); margin: 0.25rem 0; } .trix-content pre { background: var(--color-gray-100); border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.8125rem; overflow-x: auto; } /* Acceptable-use guidelines (Social / Chat) — the same rich text an org administrator edits, rendered as the document members sign. Trix offers a single heading level, so its h1 is sized down here to read as a section heading rather than a page title, and the paragraph rhythm comes from the block spacing below. */ .ack-guidelines > * + * { margin-top: 0.75rem; } .ack-guidelines h1 { font-size: 0.875rem; font-weight: 600; color: var(--color-gray-900); margin-top: 1.25rem; } .ack-guidelines ul, .ack-guidelines ol { margin-top: 0.375rem; } .ack-guidelines li + li { margin-top: 0.375rem; } /* ── Emoji picker (social posts & comments) ─────────────────────────────────── Toggle button + floating palette (app/javascript/controllers/emoji_picker_controller.js). The panel keeps `display: grid` behind :not([hidden]) so the [hidden] attribute still wins and toggles visibility. */ .emoji-picker__toggle { font-size: 1.125rem; line-height: 1; padding: 0.25rem 0.45rem; border-radius: 0.375rem; border: 1px solid var(--color-gray-300); background: var(--color-white); cursor: pointer; } .emoji-picker__toggle:hover { background: var(--color-gray-50); } .emoji-picker__panel { position: absolute; right: 0; top: 100%; z-index: 30; margin-top: 0.375rem; width: 15rem; max-height: 12rem; overflow-y: auto; padding: 0.5rem; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 0.5rem; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); } .emoji-picker__panel:not([hidden]) { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.125rem; } .emoji-picker__item { font-size: 1.125rem; line-height: 1; padding: 0.25rem; border-radius: 0.375rem; background: transparent; cursor: pointer; } .emoji-picker__item:hover { background: var(--color-gray-100); }