main.css 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. @import "tailwindcss";
  2. @import "@nuxt/ui-pro";
  3. @theme static {
  4. --font-display: 'Manrope', sans-serif;
  5. --font-sans: 'Inter', sans-serif;
  6. --font-mono: 'Fira Code', monospace;
  7. --breakpoint-3xl: 1920px;
  8. --ui-pattern-fg: color-mix(in oklab,var(--ui-text)5%,transparent);
  9. --ui-pattern-bg: repeating-linear-gradient(315deg,var(--ui-pattern-fg)0,var(--ui-pattern-fg)1px,transparent 0,transparent 50%);
  10. --ui-header-height: 3rem;
  11. /* Technical blueprint styles */
  12. --ui-line-gap: 5px;
  13. --ui-line-width: 1px;
  14. --ui-line-offset: 172px;
  15. --ui-line-color: var(--color-gray-200);
  16. /* Teal Palette */
  17. --color-teal-50: #f2fbf8;
  18. --color-teal-100: #d3f4ea;
  19. --color-teal-200: #a6e9d6;
  20. --color-teal-300: #82dbc5;
  21. --color-teal-400: #44bda2;
  22. --color-teal-500: #2ba189;
  23. --color-teal-600: #20816f;
  24. --color-teal-700: #1d685b;
  25. --color-teal-800: #1c534b;
  26. --color-teal-900: #1b463f;
  27. --color-teal-950: #0a2925;
  28. /* Yellow/Brown Palette */
  29. --color-yellow-50: #fff8eb;
  30. --color-yellow-100: #feeac7;
  31. --color-yellow-200: #fdd48a;
  32. --color-yellow-300: #fbb03b;
  33. --color-yellow-400: #fa9e25;
  34. --color-yellow-500: #f47a0c;
  35. --color-yellow-600: #b85607;
  36. --color-yellow-700: #b3390a;
  37. --color-yellow-800: #922b0e;
  38. --color-yellow-900: #78250f;
  39. --color-yellow-950: #451003;
  40. }
  41. .dark {
  42. --ui-line-color: var(--color-gray-800);
  43. }
  44. .pattern-bg {
  45. background-image: var(--ui-pattern-bg);
  46. background-size: 10px 10px;
  47. background-attachment: fixed;
  48. }