Wickedness/CompanyIntroduction
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine mobile clients section

Browse Source
This commit is contained in:
y2keui
2026-06-26 10:10:06 +09:00
parent 6926d4ff23
commit 831b3fd561
1 changed files with 121 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
styles.css
View File

@@ -835,6 +835,7 @@ body.is-ready .loader {
margin-top: 44px;
background: var(--line);
border: 1px solid var(--line);
counter-reset: client-logo;
}
.logo-grid figure {
@@ -1428,6 +1429,7 @@ body.is-ready .loader {
position: relative;
background: #e7e1d6;
overflow: hidden;
isolation: isolate;
transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
@@ -1443,15 +1445,6 @@ body.is-ready .loader {
transition: opacity 0.3s var(--ease);
}
.logo-grid figure:hover {
background: var(--paper);
transform: translateY(-3px);
}
.logo-grid figure:hover::after {
opacity: 1;
}
.logo-grid img {
position: relative;
z-index: 1;
@@ -1460,10 +1453,50 @@ body.is-ready .loader {
transition: filter 0.35s var(--ease), opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.logo-grid figure:hover img {
filter: none;
opacity: 1;
transform: scale(1.04);
@media (hover: hover) and (pointer: fine) {
.logo-grid figure:hover {
background: var(--paper);
transform: translateY(-3px);
}
.logo-grid figure:hover::after {
opacity: 1;
}
.logo-grid figure:hover img {
filter: none;
opacity: 1;
transform: scale(1.04);
}
}
@media (hover: none), (pointer: coarse) {
.logo-grid {
background: transparent;
border: 0;
}
.logo-grid figure {
background:
linear-gradient(145deg, rgba(241, 238, 230, 0.1), rgba(241, 238, 230, 0.045)),
#10100e;
border: 1px solid rgba(241, 238, 230, 0.16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
transform: none;
}
.logo-grid figure::after {
background:
linear-gradient(90deg, rgba(241, 238, 230, 0.055) 1px, transparent 1px) 0 0 / 24px 24px,
linear-gradient(180deg, rgba(241, 238, 230, 0.045) 1px, transparent 1px) 0 0 / 24px 24px;
opacity: 0.42;
}
.logo-grid img {
filter: none;
opacity: 1;
transform: none;
}
}
.service-card {
@@ -1798,6 +1831,64 @@ html.js .reveal[data-delay="2"] {
grid-template-columns: 1fr;
}
.clients {
background:
linear-gradient(180deg, rgba(7, 7, 6, 0), rgba(17, 17, 15, 0.82) 34%, rgba(7, 7, 6, 0.96) 100%),
linear-gradient(135deg, rgba(115, 221, 255, 0.08), transparent 42%),
var(--ink);
}
.clients__head {
gap: 18px;
}
.clients .section-heading h2 {
font-size: 2.86rem;
line-height: 0.96;
}
.client-note {
max-width: 34rem;
color: rgba(241, 238, 230, 0.76);
font-size: 0.96rem;
line-height: 1.78;
}
.clients .logo-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 34px;
}
.logo-grid figure {
min-height: 98px;
padding: 20px 14px 16px;
border-radius: 8px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 12px 30px rgba(0, 0, 0, 0.18);
}
.logo-grid figure::before {
counter-increment: client-logo;
content: counter(client-logo, decimal-leading-zero);
position: absolute;
top: 9px;
left: 11px;
z-index: 1;
color: rgba(241, 238, 230, 0.38);
font-family: var(--mono);
font-size: 0.56rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
}
.logo-grid img {
max-width: 84%;
max-height: 44px;
}
.station-strip {
grid-template-columns: repeat(2, 1fr);
}
@@ -1918,8 +2009,24 @@ html.js .reveal[data-delay="2"] {
padding: 24px;
}
.clients .section-heading h2 {
font-size: 2.4rem;
}
.logo-grid figure {
min-height: 104px;
min-height: 92px;
padding: 19px 12px 15px;
}
.logo-grid figure::before {
top: 8px;
left: 9px;
font-size: 0.52rem;
}
.logo-grid img {
max-width: 88%;
max-height: 40px;
}
.station-strip {