Hugging Face's logo

Spaces:
J266501
/
LabAid_v1
Sleeping

App Files Community
LabAid_v1
File size: 4,071 Bytes 
effe6e2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
 
.labassist-footer {
  background-color: #111122; /* 頁腳背景色，比 body 略深 */
  padding: 60px 40px; /* 上下左右內邊距 */
  display: flex;
  flex-direction: column; /* 讓主要內容和底部版權資訊垂直堆疊 */
  align-items: center; /* 讓整個 footer 的內容水平居中（在有 max-width 的情況下） */
}

/* 主要內容區域：包含四個列 */
.footer-main-content {
  display: flex;
  justify-content: space-between; /* 將四個列均勻分佈在水平空間 */
  width: 100%; /* 佔滿父容器寬度 */
  max-width: 1200px; /* 限制內容的最大寬度，使其不會太寬 */
  margin-bottom: 50px; /* 與底部版權資訊的間距 */
  flex-wrap: wrap; /* 允許在小螢幕上換行 */
}

/* 每一個列（公司資訊、Product、Support、Company） */
.footer-column {
  flex-basis: 22%; /* 讓每列佔據大約 22% 的空間，以便容納 4 列並留有間距 */
  /* 可以根據內容調整 flex-basis，或者使用 flex-grow: 1; 讓它們自動分配空間 */
  margin-bottom: 20px; /* 小螢幕換行時的間距 */
}

.footer-column h4 {
  font-size: 1.1em;
  color: #FFFFFF; /* 標題文字白色 */
  margin-bottom: 15px; /* 標題與下方連結的間距 */
  font-weight: bold;
}

.footer-column ul {
  list-style: none; /* 移除列表點 */
}

.footer-column ul li {
  margin-bottom: 8px; /* 連結之間的間距 */
}

.footer-column ul li a {
  color: #B0B0B0; /* 連結文字顏色 */
  text-decoration: none; /* 移除下劃線 */
  font-size: 0.95em;
  transition: color 0.3s ease; /* 平滑過渡效果 */
}

.footer-column ul li a:hover {
  color: #FFFFFF; /* 鼠標懸停時變白 */
}

/* 左側公司資訊區塊特有樣式 */
.company-info {
  flex-basis: 30%; /* 給公司資訊列更多空間 */
  min-width: 250px; /* 確保在小螢幕上有足夠寬度 */
}

.company-logo-section {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.footer-logo {
  height: 30px; /* Logo 高度 */
  margin-right: 10px;
}

.company-logo-section span {
  font-size: 1.2em;
  font-weight: bold;
  color: #FFFFFF;
}

.company-info p {
  font-size: 0.9em;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #B0B0B0;
}

.social-icons {
  display: flex;
  gap: 15px; /* 圖標間距 */
}

.social-icons a img {
  width: 20px; /* 圖標大小 */
  height: 20px;
  filter: invert(100%) brightness(80%); /* 將圖標顏色反轉為淺色 */
  transition: filter 0.3s ease;
}

.social-icons a:hover img {
  filter: invert(100%) brightness(100%); /* 鼠標懸停時變亮 */
}


/* 底部版權資訊區域 */
.footer-bottom-bar {
  border-top: 1px solid #333344; /* 上方加一條細分隔線 */
  padding-top: 30px;
  width: 100%;
  max-width: 1200px; /* 與主要內容寬度保持一致 */
  display: flex;
  justify-content: space-between; /* 版權資訊靠左，法律連結靠右 */
  align-items: center; /* 垂直居中對齊 */
  font-size: 0.85em;
  color: #888899; /* 較淺的灰色 */
}

.footer-legal-links a {
  color: #888899;
  text-decoration: none;
  margin-left: 20px; /* 連結之間的間距 */
  transition: color 0.3s ease;
}

.footer-legal-links a:hover {
  color: #FFFFFF;
}

/* 響應式設計：小螢幕適應 */
@media (max-width: 768px) {
  .labassist-footer {
    padding: 40px 20px;
  }

  .footer-main-content {
    flex-direction: column; /* 小螢幕時，列變成垂直堆疊 */
    align-items: flex-start; /* 讓每個列都靠左對齊 */
    gap: 30px; /* 列之間的間距 */
  }

  .footer-column {
    flex-basis: 100%; /* 每列佔據全部寬度 */
    max-width: 100%; /* 確保最大寬度 */
  }

  .footer-bottom-bar {
    flex-direction: column; /* 版權和法律連結垂直堆疊 */
    text-align: center;
  }

  .footer-legal-links {
    margin-top: 15px; /* 與版權資訊的間距 */
  }

  .footer-legal-links a {
    margin: 0 10px; /* 調整連結間距 */
  }
}

@media (max-width: 480px) {
  .labassist-footer {
    padding: 30px 15px;
  }

  .footer-main-content {
    gap: 20px;
  }

  .social-icons {
    gap: 10px;
  }
}