RapidRescueUser/styles.css at main · lakshay776/RapidRescueUser · 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
styles.css


/* General Styles */
body {
    font-family: Arial, sans-serif, Inter, system-ui, sans-serif;
    background-color: #f9fafb; /* Light background color */
    color: #374151; /* Dark text color */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
}

/* Navigation Styles */
nav {
    background-color: #1f2937; /* Dark background for the navbar */
}

nav a {
    color: #ffffff; /* White text for links */
}

nav a:hover {
    color: #d1d5db; /* Light gray on hover */
}

/* Main Section Styles */
#emergency-button {
    background-color: #1f2937; /* Dark background for the emergency section */
    padding: 2rem; /* Padding for the section */
}

#sosButton {
    background: linear-gradient(to bottom right, #dc2626, #ef4444); /* Gradient for SOS button */
}

#sosButton:hover {
    background: linear-gradient(to bottom right, #b91c1c, #c62828); /* Darker gradient on hover */
}

/* Button Styles */
button {
    transition: background-color 0.3s ease; /* Smooth transition for button hover */
}

button:hover {
    background-color: #4b5563; /* Darker background on hover */
}

/* Instruction Section Styles */
#instructions {
    background-color: #374151; /* Dark background for instructions */
    padding: 4rem 0; /* Padding for the section */
}

#instructions h2 {
    color: #ffffff; /* White text for the heading */
}

#instructions .bg-neutral-700 {
    background-color: #4b5563; /* Darker background for instruction boxes */
}

/* Emergency Contacts Section */
#emergency-contacts {
    background-color: #374151; /* Dark background for emergency contacts */
    padding: 4rem 0; /* Padding for the section */
}

#emergency-contacts h2 {
    color: #ffffff; /* White text for the heading */
}

#emergency-contacts .bg-neutral-700 {
    background-color: #4b5563; /* Darker background for contact boxes */
}

/* Responsive Styles */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column; /* Stack navigation items on small screens */
    }
}

/* Modal Background */
#manualDetailsModal {
    backdrop-filter: blur(5px); /* Optional: Adds a blur effect to the background */
}

/* Modal Shadow */
#manualDetailsModal > div {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Optional: Adds a more pronounced shadow */
}