One-Tick.github.io/styles.css at main · One-Tick/One-Tick.github.io · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/* index page layout:
/* Create a full-screen background for the index page */
.index-page .hero-image {
  background-image: url("data/Logos/Tick.jpg");
  background-size: cover; /* Ensures the image covers the entire viewport */
  background-position: center; /* Centers the image */
  background-attachment: fixed; /* Keeps the image fixed while scrolling */
  width: 100vw; /* Full viewport width */
  height: 100vh; /* Full viewport height */
  position: fixed; /* Fix the image in place */
  top: 0;
  left: 0;
  z-index: -1; /* Place image behind the content */
}

/* Fix für Mobilgeräte */
@media (max-width: 768px) {
  .index-page .hero-image {
    background-image: url("data/Logos/Tickphone.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
}

/* Text boxes */
.index-page .text-box {
  margin: 0 auto; /* Center horizontally */
  max-width: 800px; /* Constrain the text width */
  padding: 20px;
  background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center; /* Center-align text */
  font-size: 1.2em;
  line-height: 1.6;
  position: relative;
  transform: translateX(+15%);
  z-index: 1; /* Ensure text boxes appear above the image */
}

/* Text auf Mobile anpassen */
@media (max-width: 768px) {
  .index-page .text-box {
    font-size: 1em;
    padding: 15px;
    max-width: 90%;
    transform: translateX(+0%);
  }
}

/* Adjust first text box to have space from the top */
.index-page .text-box {
  margin-top: 200px; /* Add space to the top of the page */
}

.index-page .text-box + .text-box {
  margin-top: 400px;
}

/* Navbar and overlay styles (if needed, they will apply across all pages) */
.navbar-logo {
  max-height: 75px;
}


/* Ensures the container takes the full width */
.header-container {
    position: relative;
    width: 100vw; /* Full viewport width */
    height: 40vh; /* Adjust the height as needed */
    overflow: hidden;
}

.overview {
  position: relative; /* Ensures normal document flow */
  z-index: 1; /* Puts content above the background */
}

.overview .manyTicks {
  background-image: url("data/Logos/manyTicks.png");
  background-size: cover; /* Ensures full coverage */
  background-position: center top; /* Ensures correct start position */
  background-attachment: scroll; /* Makes it scrollable */
  width: 100vw; /* Adjusts width to container */
  min-height: 100vh; /* Ensures it covers at least the viewport height */
  position: absolute; /* Places it within .overview */
  top: 0;
  left: 0;
  z-index: -1; /* Ensures it stays behind content */
}


/* Text boxes */
.overview .text-boxoo {
  margin: 0 Center; /* Center horizontally */
  max-width: 800px; /* Constrain the text width */
  padding: 20px;
  background: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center; /* Center-align text */
  font-size: 1.2em;
  line-height: 1.6;
  position: relative;
  z-index: 1; /* Ensure text boxes appear above the image */
}

.overview .text-boxo {
  margin: 0 Center; /* Center horizontally */
  max-width: 800px; /* Constrain the text width */
  padding: 20px;
  background: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: left; /* Center-align text */
  font-size: 1.2em;
  line-height: 1.6;
  position: relative;
  z-index: 1; /* Ensure text boxes appear above the image */
}

/* Adjust first text box to have space from the top */
.overview .text-boxoo {
  margin-top: 200px; /* Add space to the top of the page */
}

.overview .text-boxoo + .text-boxo {
  margin-top: 50px;
}

.workpacks-image {
    width: 80%;  /* Makes the image 80% of the container width */
    max-width: 70vw; /* Limits the maximum width */
    height: auto; /* Keeps aspect ratio */
    display: block; /* Ensures proper alignment */
    margin: 0 auto; /* Centers the image */
}