documentation/app/global.css at e2fd045e84c87063562cf073102d7d9f316007fe · deploystackio/documentation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/* Import Tailwind CSS v4 and Fumadocs UI presets */
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

/* Include Fumadocs UI source for Tailwind v4 */
@source '../node_modules/fumadocs-ui/dist/**/*.js';

/* Define primary color in Tailwind v4 @theme directive */
@theme {
  /* Primary color - Teal theme matching DeployStack brand */
  --color-primary: hsl(177, 79%, 28%); /* Teal-700 */
  --color-primary-foreground: hsl(0, 0%, 100%); /* White text on primary */

  /* Additional variants */
  --color-primary-hover: hsl(176, 79%, 23%); /* Darker teal for hover states */
  --color-primary-light: hsl(174, 72%, 56%); /* Lighter teal variant */
  --color-primary-dark: hsl(176, 100%, 16%); /* Darker teal variant */
}

/* Dark mode color overrides */
:root {
  /* Light mode is default, defined in @theme above */
}

.dark {
  /* Dark mode primary colors */
  --color-primary: hsl(174, 72%, 56%); /* Lighter teal for dark mode */
  --color-primary-foreground: hsl(176, 100%, 6%); /* Dark text on primary in dark mode */

  --color-primary-hover: hsl(173, 68%, 64%); /* Lighter on hover in dark mode */
  --color-primary-light: hsl(172, 66%, 70%); /* Even lighter variant */
  --color-primary-dark: hsl(177, 79%, 28%); /* Original teal for contrast */
}

/* Custom navbar styling to match main site */
/* Navbar height override removed since navbar is now inside content area */

/* Ensure logo and navigation styling matches main site */
.fd-nav-title {
  font-weight: 600;
  font-size: 18px;
}

/* Style the login button to match main site */
[data-fumadocs-nav] a[href*="login"] {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

[data-fumadocs-nav] a[href*="login"]:hover {
  background: var(--color-primary-hover);
}

/* Ensure Documentation link is highlighted when active */
[data-fumadocs-nav] a[href="/docs"][data-active="true"] {
  color: var(--color-primary);
  font-weight: 600;
}

/* Optional: Add your own global styles or font imports here */
/* For example, to set a default font:
body {
  font-family: 'Inter', sans-serif; // Make sure to import 'Inter' or your chosen font
}
*/