* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100vh;
font-family:
-apple-system,
BlinkMacSystemFont,
"Helvetica Neue",
"Segoe UI",
Arial,
sans-serif;
color: #3d3d3d;
overflow-x: hidden;
background:
#cfd3d6;
}
/*
FROSTED BACKGROUND
*/
.background {
position: fixed;
inset: -60px;
z-index: -10;
background:
radial-gradient(
ellipse at 18% 12%,
rgba(255,255,255,.9) 0%,
rgba(255,255,255,.45) 25%,
transparent 55%
),
radial-gradient(
ellipse at 80% 20%,
rgba(214,225,230,.75) 0%,
transparent 50%
),
radial-gradient(
ellipse at 45% 85%,
rgba(228,230,226,.85) 0%,
transparent 55%
),
linear-gradient(
135deg,
#c8ced1,
#e4e7e8 48%,
#cfd5d7
);
filter:
blur(20px);
transform:
scale(1.08);
}
/*
DECORATIVE AERO LIGHT
*/
.background::before {
content: "";
position: absolute;
width: 700px;
height: 700px;
left: -180px;
top: -220px;
border-radius: 50%;
background:
rgba(
255,
255,
255,
.38
);
filter:
blur(80px);
}
.background::after {
content: "";
position: absolute;
width: 600px;
height: 600px;
right: -150px;
bottom: -200px;
border-radius: 50%;
background:
rgba(
180,
195,
200,
.32
);
filter:
blur(90px);
}
/*
VIEW SWITCHER
*/
.mode-switcher {
position: fixed;
top: 14px;
left: 50%;
transform:
translateX(-50%);
z-index: 1000;
display: flex;
padding: 3px;
border-radius: 8px;
background:
rgba(
245,
247,
248,
.48
);
border:
1px solid
rgba(
255,
255,
255,
.72
);
box-shadow:
inset 0 1px 0
rgba(
255,
255,
255,
.7
),
0 4px 18px
rgba(
0,
0,
0,
.13
);
backdrop-filter:
blur(22px)
saturate(115%);
-webkit-backdrop-filter:
blur(22px)
saturate(115%);
}
.mode-switcher button {
border: 0;
padding:
6px
18px;
border-radius: 6px;
background:
transparent;
color:
rgba(
60,
60,
60,
.65
);
font-size:
12px;
cursor:
pointer;
transition:
all .2s ease;
}
.mode-switcher button:hover {
color:
#333;
background:
rgba(
255,
255,
255,
.22
);
}
.mode-switcher button.active {
color:
#333;
background:
rgba(
255,
255,
255,
.65
);
box-shadow:
inset 0 1px 0
rgba(
255,
255,
255,
.9
),
0 1px 5px
rgba(
0,
0,
0,
.12
);
}
/*
MAIN WINDOW
*/
.window {
position: fixed;
top: 50%;
left: 50%;
width:
min(
1240px,
94vw
);
height:
min(
760px,
86vh
);
transform:
translate(
-50%,
-50%
);
overflow: hidden;
display: flex;
flex-direction: column;
border-radius:
10px;
background:
rgba(
235,
238,
239,
.38
);
border:
1px solid
rgba(
255,
255,
255,
.72
);
box-shadow:
inset 0 1px 0
rgba(
255,
255,
255,
.82
),
0 25px 70px
rgba(
30,
40,
45,
.23
);
backdrop-filter:
blur(32px)
saturate(115%);
-webkit-backdrop-filter:
blur(32px)
saturate(115%);
}
/*
TITLE BAR
*/
.titlebar {
height:
48px;
flex-shrink:
0;
display:
flex;
align-items:
center;
position:
relative;
padding:
0 16px;
background:
rgba(
242,
244,
245,
.34
);
border-bottom:
1px solid
rgba(
255,
255,
255,
.45
);
box-shadow:
inset 0 -1px 0
rgba(
0,
0,
0,
.035
);
}
/*
TRAFFIC LIGHTS
*/
.traffic-lights {
display:
flex;
gap:
7px;
}
.traffic-lights span {
width:
12px;
height:
12px;
border-radius:
50%;
background:
rgba(
110,
110,
110,
.24
);
border:
1px solid
rgba(
255,
255,
255,
.72
);
box-shadow:
inset 0 1px 1px
rgba(
255,
255,
255,
.7
);
}
.window-title {
position:
absolute;
left:
50%;
transform:
translateX(-50%);
font-size:
13px;
color:
rgba(
50,
50,
50,
.72
);
font-weight:
500;
text-shadow:
0 1px 0
rgba(
255,
255,
255,
.7
);
}
/*
TOOLBAR
*/
.toolbar {
height:
48px;
flex-shrink:
0;
display:
flex;
align-items:
center;
gap:
8px;
padding:
7px 12px;
background:
rgba(
238,
241,
242,
.28
);
border-bottom:
1px solid
rgba(
255,
255,
255,
.48
);
}
/*
TOOLBAR BUTTON
*/
.nav-button {
width:
30px;
height:
30px;
border-radius:
6px;
border:
1px solid
rgba(
255,
255,
255,
.7
);
background:
rgba(
245,
247,
247,
.30
);
color:
rgba(
60,
60,
60,
.65
);
cursor:
pointer;
box-shadow:
inset 0 1px 0
rgba(
255,
255,
255,
.55
);
transition:
.18s;
}
.nav-button:hover {
background:
rgba(
255,
255,
255,
.52
);
}
/*
ADDRESS BAR
*/
.address {
flex:
1;
height:
30px;
display:
flex;
align-items:
center;
padding:
0 12px;
border-radius:
6px;
border:
1px solid
rgba(
255,
255,
255,
.68
);
background:
rgba(
255,
255,
255,
.24
);
color:
rgba(
70,
70,
70,
.58
);
font-size:
12px;
box-shadow:
inset 0 1px 3px
rgba(
0,
0,
0,
.035
);
}
/*
SEARCH
*/
.search {
width:
220px;
height:
30px;
padding:
0 12px;
border-radius:
6px;
border:
1px solid
rgba(
255,
255,
255,
.7
);
background:
rgba(
255,
255,
255,
.25
);
outline:
none;
color:
#444;
font-size:
12px;
box-shadow:
inset 0 1px 3px
rgba(
0,
0,
0,
.04
);
transition:
.2s;
}
.search::placeholder {
color:
rgba(
70,
70,
70,
.45
);
}
.search:focus {
background:
rgba(
255,
255,
255,
.48
);
border-color:
rgba(
255,
255,
255,
.9
);
box-shadow:
inset 0 1px 3px
rgba(
0,
0,
0,
.04
),
0 0 0 2px
rgba(
255,
255,
255,
.22
);
}
/*
EXPLORER
*/
.explorer {
flex:
1;
min-height:
0;
display:
flex;
}
/*
SIDEBAR
*/
.sidebar {
width:
205px;
flex-shrink:
0;
padding:
18px 12px;
overflow-y:
auto;
background:
rgba(
210,
216,
218,
.25
);
border-right:
1px solid
rgba(
255,
255,
255,
.48
);
box-shadow:
inset -1px 0 0
rgba(
0,
0,
0,
.025
);
}
.sidebar-title {
margin:
4px 10px 9px;
color:
rgba(
70,
70,
70,
.45
);
font-size:
10px;
letter-spacing:
.7px;
text-transform:
uppercase;
}
/*
CATEGORY
*/
.category {
padding:
8px 10px;
margin-bottom:
2px;
border-radius:
6px;
color:
rgba(
55,
55,
55,
.68
);
font-size:
12px;
cursor:
pointer;
transition:
all .18s ease;
}
.category:hover {
background:
rgba(
255,
255,
255,
.25
);
color:
#333;
}
.category.active {
background:
rgba(
255,
255,
255,
.43
);
color:
#333;
box-shadow:
inset 0 1px 0
rgba(
255,
255,
255,
.65
),
0 2px 7px
rgba(
0,
0,
0,
.05
);
}
/*
CONTENT
*/
.content {
flex:
1;
min-width:
0;
overflow-y:
auto;
padding:
24px 28px;
background:
rgba(
245,
247,
247,
.16
);
}
.content-header {
display:
flex;
align-items:
flex-end;
justify-content:
space-between;
margin-bottom:
22px;
}
.content-title {
font-size:
22px;
font-weight:
400;
color:
rgba(
40,
40,
40,
.75
);
text-shadow:
0 1px 0
rgba(
255,
255,
255,
.7
);
}
.result-count {
color:
rgba(
70,
70,
70,
.42
);
font-size:
11px;
}
/*
RESOURCE GRID
*/
.resource-grid {
display:
grid;
grid-template-columns:
repeat(
auto-fill,
minmax(
245px,
1fr
)
);
gap:
12px;
}
/*
RESOURCE CARD
*/
.resource {
position:
relative;
min-height:
150px;
padding:
16px;
border-radius:
8px;
background:
rgba(
245,
247,
247,
.27
);
border:
1px solid
rgba(
255,
255,
255,
.62
);
cursor:
pointer;
box-shadow:
inset 0 1px 0
rgba(
255,
255,
255,
.55
);
transition:
transform .22s ease,
background .22s ease,
box-shadow .22s ease;
}
.resource:hover {
transform:
translateY(
-2px
);
background:
rgba(
255,
255,
255,
.42
);
box-shadow:
inset 0 1px 0
rgba(
255,
255,
255,
.85
),
0 9px 24px
rgba(
30,
40,
45,
.10
);
}
.resource.hidden {
display:
none;
}
/*
RESOURCE ICON
*/
.resource-icon {
width:
42px;
height:
42px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
8px;
background:
rgba(
255,
255,
255,
.30
);
border:
1px solid
rgba(
255,
255,
255,
.62
);
box-shadow:
inset 0 1px 0
rgba(
255,
255,
255,
.75
);
font-size:
20px;
}
.resource-number {
position:
absolute;
top:
12px;
right:
13px;
color:
rgba(
60,
60,
60,
.32
);
font-size:
10px;
}
.resource-name {
margin-top:
12px;
color:
rgba(
40,
40,
40,
.76
);
font-size:
13px;
font-weight:
500;
}
.resource-description {
margin-top:
6px;
color:
rgba(
60,
60,
60,
.56
);
font-size:
11px;
line-height:
1.6;
}
.resource-domain {
margin-top:
8px;
color:
rgba(
70,
70,
70,
.38
);
font-size:
10px;
}
/*
MOBILE
*/
.mobile {
display:
none;
}
.mobile {
background:
rgba(
218,
223,
225,
.30
);
backdrop-filter:
blur(32px)
saturate(115%);
-webkit-backdrop-filter:
blur(32px)
saturate(115%);
}
.mobile-header {
padding:
20px
18px
10px;
}
.mobile-title {
font-size:
24px;
font-weight:
400;
color:
rgba(
40,
40,
40,
.78
);
}
.mobile-search {
height:
42px;
margin-top:
15px;
display:
flex;
align-items:
center;
padding:
0 13px;
border-radius:
8px;
background:
rgba(
255,
255,
255,
.27
);
border:
1px solid
rgba(
255,
255,
255,
.65
);
color:
rgba(
60,
60,
60,
.48
);
font-size:
12px;
box-shadow:
inset 0 1px 0
rgba(
255,
255,
255,
.65
);
}
/*
MOBILE CATEGORIES
*/
.mobile-categories {
display:
flex;
gap:
7px;
padding:
8px 18px;
overflow-x:
auto;
}
.mobile-category {
flex-shrink:
0;
padding:
7px 12px;
border-radius:
6px;
background:
rgba(
255,
255,
255,
.23
);
border:
1px solid
rgba(
255,
255,
255,
.55
);
color:
rgba(
60,
60,
60,
.58
);
font-size:
11px;
}
.mobile-category.active {
background:
rgba(
255,
255,
255,
.46
);
color:
#444;
box-shadow:
0 2px 8px
rgba(
0,
0,
0,
.05
);
}
/*
MOBILE CONTENT
*/
.mobile-content {
height:
calc(
100vh - 185px
);
padding:
8px 14px 80px;
overflow-y:
auto;
}
.mobile-section {
margin:
14px 5px;
color:
rgba(
70,
70,
70,
.42
);
font-size:
11px;
}
/*
MOBILE RESOURCE
*/
.mobile-resource {
display:
flex;
align-items:
center;
gap:
12px;
padding:
11px 9px;
border-radius:
8px;
border:
1px solid
transparent;
transition:
.18s;
}
.mobile-resource:hover {
background:
rgba(
255,
255,
255,
.27
);
border-color:
rgba(
255,
255,
255,
.38
);
}
.mobile-icon {
width:
43px;
height:
43px;
flex-shrink:
0;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
8px;
background:
rgba(
255,
255,
255,
.28
);
border:
1px solid
rgba(
255,
255,
255,
.62
);
box-shadow:
inset 0 1px 0
rgba(
255,
255,
255,
.7
);
font-size:
20px;
}
.mobile-name {
color:
rgba(
50,
50,
50,
.72
);
font-size:
13px;
}
.mobile-meta {
margin-top:
4px;
color:
rgba(
70,
70,
70,
.43
);
font-size:
10px;
white-space:
nowrap;
overflow:
hidden;
text-overflow:
ellipsis;
}
.mobile-more {
margin-left:
auto;
color:
rgba(
70,
70,
70,
.4
);
font-size:
17px;
}
/*
BOTTOM NAV
*/
.bottom-nav {
position:
fixed;
left:
0;
right:
0;
bottom:
0;
height:
62px;
display:
flex;
justify-content:
space-around;
align-items:
center;
background:
rgba(
220,
225,
227,
.45
);
border-top:
1px solid
rgba(
255,
255,
255,
.65
);
box-shadow:
0 -4px 20px
rgba(
0,
0,
0,
.06
);
backdrop-filter:
blur(25px);
-webkit-backdrop-filter:
blur(25px);
}
.bottom-item {
text-align:
center;
color:
rgba(
70,
70,
70,
.48
);
font-size:
10px;
}
.bottom-icon {
margin-bottom:
3px;
font-size:
18px;
}
/*
RESPONSIVE
*/
@media (
max-width: 700px
) {
.window {
display:
none;
}
.mobile {
display:
block;
position:
fixed;
inset:
0;
}
}
/*
MANUAL MODE
*/
body.desktop-mode .window {
display:
flex;
}
body.desktop-mode .mobile {
display:
none;
}
body.mobile-mode .window {
display:
none;
}
body.mobile-mode .mobile {
display:
block;
position:
fixed;
inset:
0;
}
/*
ANIMATION
*/
@keyframes fadeIn {
from {
opacity:
0;
transform:
translateY(
6px
);
}
to {
opacity:
1;
transform:
translateY(
0
);
}
}
.resource {
animation:
fadeIn
.35s
ease
both;
}
.footer {
position:
fixed;
left:
0;
right:
0;
bottom:
10px;
z-index:
3;
text-align:
center;
font-size:
12px;
color:
rgba(
60,
60,
60,
.82
);
letter-spacing:
.2px;
}