2026-08-19 11:02:39 +03:00
|
|
|
.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}
|
2026-08-19 11:31:49 +03:00
|
|
|
.toolIcon{position:absolute;z-index:2;top:-9px;right:34px;display:block;width:64px;height:64px;color:var(--accent);filter:drop-shadow(0 8px 8px rgba(31,93,169,.2));transform:rotate(2deg);transition:transform 280ms cubic-bezier(.23,1,.32,1)}.toolIcon svg{display:block;width:100%;height:100%}.toolCard:nth-child(even) .toolIcon{top:-5px;right:42px;transform:rotate(-3deg)}.toolCard:hover .toolIcon{transform:translateY(-4px) rotate(0) scale(1.06)}
|
2026-08-19 11:02:39 +03:00
|
|
|
.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}}
|
