tophhie.cloud
Front-end showing the service status for Tophhie Social
status.tophhie.social
ewancroft.uk
1@import "tailwindcss";
2
3/* Global variables */
4:root {
5 --bg-color: #100235;
6 --primary-color: #2563eb;
7 --secondary-color: #1e293b;
8 --success-color: #16a34a;
9 --error-color: #dc2626;
10 --font-family: 'Inter', sans-serif;
11}
12
13/* Global body styles */
14body {
15 font-family: var(--font-family);
16 -webkit-font-smoothing: antialiased;
17 -moz-osx-font-smoothing: grayscale;
18}
19
20/* Header */
21header {
22 background: var(--primary-color);
23 color: white;
24 padding: 1rem;
25 text-align: center;
26 font-size: 1.5rem;
27}
28
29/* Footer */
30footer {
31 text-align: center;
32 padding: 1rem;
33 font-size: 0.9rem;
34 color: #6b7280;
35}
36
37/* Status card container (basic fallback if needed) */
38.status-card {
39 background: white;
40 border-radius: 8px;
41 padding: 1rem;
42 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
43 text-align: center;
44 max-width: 50%;
45}
46
47/* Status colours */
48.status-online {
49 color: var(--success-color);
50}
51
52.status-offline {
53 color: var(--error-color);
54}
55
56/* Mobile optimizations */
57@media (max-width: 640px) {
58 /* Improve tap targets on mobile */
59 a, button {
60 min-height: 44px;
61 min-width: 44px;
62 }
63
64 /* Prevent text from being too small */
65 body {
66 font-size: 16px; /* Prevents iOS zoom on input focus */
67 }
68
69 /* Better touch scrolling */
70 * {
71 -webkit-overflow-scrolling: touch;
72 }
73}
74
75/* Ensure links are easily tappable */
76a {
77 -webkit-tap-highlight-color: rgba(37, 99, 235, 0.3);
78}