bot/WeatherTool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Experiment with sculpted home workspace cards

Browse Source
This commit is contained in:
b0txec
2026-08-19 11:02:39 +03:00
parent 35d6f51899
commit 6ee62a5ce0
1 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/pages/home/home.css
+15 -1
View File
@@ -1 +1,15 @@
.homePage{position:relative;max-width:1440px;margin:auto;padding:52px 32px 80px}.homePage:before{content:"";position:absolute;z-index:-1;top:-90px;right:4%;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(65,132,226,.18),transparent 68%);filter:blur(10px)}.homeHero{display:flex;justify-content:space-between;align-items:end;gap:48px;margin-bottom:32px}.homeHero h1{margin:7px 0 10px;font-size:clamp(38px,5vw,64px);line-height:1;letter-spacing:-.045em}.heroCopy{margin:0;color:var(--text-muted);font-size:16px}.eyebrow{color:var(--accent-strong);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.environmentBadge{min-width:220px;padding:13px 16px;border:1px solid rgba(116,158,211,.35);border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(225,238,255,.82));font-weight:700;box-shadow:var(--shadow-sm);backdrop-filter:blur(12px)}.environmentBadge small{display:block;margin:3px 0 0 18px;color:var(--text-muted);font-weight:400}.statusDot{display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(38,147,104,.12)}.toolGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.toolCard{position:relative;display:flex;min-height:180px;padding:24px;overflow:hidden;border:1px solid rgba(115,154,204,.28);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(231,241,255,.78));color:var(--text);text-decoration:none;box-shadow:0 12px 30px rgba(30,77,132,.08);transition:transform 280ms cubic-bezier(.23,1,.32,1),box-shadow 280ms,border-color 280ms}.toolCard:before{content:"";position:absolute;inset:auto -55px -70px auto;width:155px;height:155px;border-radius:50%;background:radial-gradient(circle,rgba(43,117,211,.16),transparent 70%);transition:transform 350ms}.toolCard:nth-child(3n+2){background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(226,235,255,.82))}.toolCard:nth-child(3n){background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(220,242,250,.8))}.toolCard:hover{transform:translateY(-4px);border-color:rgba(36,119,197,.5);box-shadow:0 18px 38px rgba(30,77,132,.16)}.toolCard:hover:before{transform:scale(1.18)}.toolCard:active{transform:translateY(0);box-shadow:0 8px 18px rgba(30,77,132,.1)}.toolCardCopy{align-self:flex-end;position:relative;z-index:1}.toolCard h2{margin:0 0 7px;font-size:clamp(27px,2.2vw,34px);letter-spacing:-.025em}.toolCard p{max-width:85%;margin:0;color:var(--text-muted);font-size:13px;line-height:1.45}.toolIcon{position:absolute;top:18px;left:22px;display:grid;place-items:center;width:56px;height:56px;border:1px solid rgba(57,126,209,.22);border-radius:17px;background:linear-gradient(145deg,#f8fbff,#dcecff);color:var(--accent);font-size:32px;box-shadow:0 8px 18px rgba(37,103,180,.12)}.cardArrow{position:absolute;right:22px;bottom:20px;color:var(--accent-strong);font-size:22px;font-weight:700;transition:transform 200ms}.toolCard:hover .cardArrow{transform:translateX(4px)}@media(max-width:960px){.toolGrid{grid-template-columns:repeat(2,1fr)}.homeHero{align-items:start;flex-direction:column}}@media(max-width:640px){.homePage{padding:36px 18px}.toolGrid{grid-template-columns:1fr}} .homePage{position:relative;max-width:1500px;margin:auto;padding:52px 32px 90px}.homePage:before{content:"";position:absolute;z-index:-1;top:-90px;right:4%;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(65,132,226,.18),transparent 68%);filter:blur(10px)}
.homeHero{display:flex;justify-content:space-between;align-items:end;gap:48px;margin-bottom:54px}.homeHero h1{margin:7px 0 10px;font-size:clamp(38px,5vw,64px);line-height:1;letter-spacing:-.045em}.heroCopy{margin:0;color:var(--text-muted);font-size:16px}.eyebrow{color:var(--accent-strong);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.environmentBadge{min-width:220px;padding:13px 16px;border:1px solid rgba(116,158,211,.35);border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(225,238,255,.82));font-weight:700;box-shadow:var(--shadow-sm);backdrop-filter:blur(12px)}.environmentBadge small{display:block;margin:3px 0 0 18px;color:var(--text-muted);font-weight:400}.statusDot{display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(38,147,104,.12)}
.toolGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:34px;row-gap:42px}
.toolCard{position:relative;display:flex;min-height:205px;padding:62px 28px 25px;color:var(--text);text-decoration:none;filter:drop-shadow(0 14px 20px rgba(30,77,132,.1));transition:transform 280ms cubic-bezier(.23,1,.32,1),filter 280ms}
.toolCard:before{content:"";position:absolute;z-index:-1;inset:0;clip-path:polygon(0 12%,66% 0,100% 15%,100% 100%,0 100%);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(225,239,255,.76));box-shadow:inset 0 0 0 1px rgba(115,154,204,.28),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(15px)}
.toolCard:after{content:"";position:absolute;z-index:-1;right:-35px;bottom:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(43,117,211,.17),transparent 69%);transition:transform 350ms}
.toolCard:nth-child(3n+2):before{clip-path:polygon(0 15%,58% 2%,100% 11%,100% 100%,0 100%);background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(222,233,255,.8))}
.toolCard:nth-child(3n):before{clip-path:polygon(0 10%,72% 1%,100% 17%,100% 100%,0 100%);background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(217,241,250,.78))}
.toolCard:hover{transform:translateY(-7px);filter:drop-shadow(0 20px 27px rgba(30,77,132,.17))}.toolCard:hover:after{transform:scale(1.2)}.toolCard:active{transform:translateY(-1px);filter:drop-shadow(0 9px 14px rgba(30,77,132,.1))}
.toolCardCopy{align-self:flex-end;position:relative;z-index:1}.toolCard h2{margin:0 0 7px;font-size:clamp(27px,2.2vw,34px);letter-spacing:-.025em}.toolCard p{max-width:82%;margin:0;color:var(--text-muted);font-size:13px;line-height:1.45}
.toolIcon{position:absolute;z-index:2;top:-9px;right:34px;color:var(--accent);font-size:58px;line-height:1;text-shadow:0 8px 16px rgba(31,93,169,.2);transform:rotate(2deg);transition:transform 280ms cubic-bezier(.23,1,.32,1)}.toolCard:nth-child(even) .toolIcon{top:-5px;right:42px;transform:rotate(-3deg)}.toolCard:hover .toolIcon{transform:translateY(-4px) rotate(0) scale(1.06)}
.cardArrow{position:absolute;right:25px;bottom:22px;color:var(--accent-strong);font-size:22px;font-weight:700;transition:transform 200ms}.toolCard:hover .cardArrow{transform:translateX(4px)}
@media(max-width:960px){.toolGrid{grid-template-columns:repeat(2,1fr)}.homeHero{align-items:start;flex-direction:column}.toolCard:nth-child(n):before{clip-path:polygon(0 12%,68% 0,100% 15%,100% 100%,0 100%)}}
@media(max-width:640px){.homePage{padding:36px 18px}.toolGrid{grid-template-columns:1fr;row-gap:34px}}