Sklad.Rent | Control Center

```html

Объекты

Дополнительные услуги

/* SKLAD.RENT PREMIUM ABSTRACT CARDS */ #objects-grid.card-grid, #services-grid.card-grid { align-items: stretch; gap: 20px; padding: 8px 4px 24px; scrollbar-width: thin; scrollbar-color: #334e68 transparent; } #objects-grid .obj-card, #services-grid .svc-card { position: relative; isolation: isolate; flex: 0 0 310px; min-width: 290px; max-width: 360px; padding: 0; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; text-align: left; color: #eaf2fc; background: linear-gradient(155deg, #152238 0%, #0d1524 72%, #101c2d 100%); border: 1px solid #263a53; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease; } #objects-grid .obj-card::after, #services-grid .svc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(120deg, transparent 25%, rgba(103, 232, 249, .045) 50%, transparent 75%); opacity: .5; } #objects-grid .obj-card:hover, #services-grid .svc-card:hover { transform: translateY(-5px); border-color: rgba(103, 232, 249, .65); background: linear-gradient(155deg, #192b43 0%, #101a2b 72%, #13243a 100%); box-shadow: 0 18px 38px rgba(0, 0, 0, .3), 0 0 24px rgba(34, 211, 238, .08); } .sr-card-visual { position: relative; height: 148px; flex: 0 0 148px; overflow: hidden; background: #14253a; border-bottom: 1px solid rgba(148, 197, 224, .15); } .sr-card-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 14, 26, .05) 35%, rgba(7, 14, 26, .65) 100%); } .sr-card-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transition: transform .65s cubic-bezier(.2, .7, .2, 1); } #objects-grid .obj-card:hover .sr-card-art, #services-grid .svc-card:hover .sr-card-art { transform: scale(1.07); } .sr-card-index { position: absolute; z-index: 1; top: 15px; left: 17px; color: #a9effa; font: 700 10px/1.4 Inter, Arial, sans-serif; letter-spacing: 2px; } .sr-visual-caption { position: absolute; z-index: 1; left: 17px; bottom: 13px; color: rgba(226, 244, 255, .8); font: 600 9px/1.4 Inter, Arial, sans-serif; letter-spacing: 1.7px; text-transform: uppercase; } .sr-card-content { display: flex; flex: 1 1 auto; flex-direction: column; align-items: stretch; padding: 19px 19px 17px; min-height: 190px; } .sr-card-kicker { margin-bottom: 9px; color: #70d8ed; font: 700 9px/1.5 Inter, Arial, sans-serif; letter-spacing: 1.8px; } .sr-card-title { margin: 0 0 9px; color: #f2f7fd; font: 600 18px/1.35 Inter, Arial, sans-serif; letter-spacing: -.25px; overflow-wrap: anywhere; } .sr-card-address, .sr-card-description { margin: 0; color: #9aabc0; font: 400 12px/1.65 Inter, Arial, sans-serif; } .sr-card-address { min-height: 39px; } .sr-card-description { min-height: 40px; } .sr-card-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; padding: 13px 0; border-top: 1px solid rgba(148, 163, 184, .16); border-bottom: 1px solid rgba(148, 163, 184, .16); } .sr-card-metrics > div { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .sr-card-metrics span { color: #7e92ab; font: 700 9px/1.4 Inter, Arial, sans-serif; letter-spacing: 1.1px; } .sr-card-metrics strong { color: #e7f3fc; font: 600 13px/1.4 Inter, Arial, sans-serif; overflow-wrap: anywhere; } .sr-card-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 17px; color: #80e4f4; font: 600 12px/1.5 Inter, Arial, sans-serif; } .sr-arrow { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; flex: 0 0 29px; border: 1px solid rgba(103, 232, 249, .28); border-radius: 50%; font-size: 16px; transition: transform .25s ease, background .25s ease; } #objects-grid .obj-card:hover .sr-arrow, #services-grid .svc-card:hover .sr-arrow { transform: translate(2px, -2px); background: rgba(34, 211, 238, .1); } @media (max-width: 700px) { #objects-grid.card-grid, #services-grid.card-grid { gap: 14px; } #objects-grid .obj-card, #services-grid .svc-card { flex-basis: min(82vw, 330px); min-width: min(82vw, 290px); } .sr-card-visual { height: 132px; flex-basis: 132px; } .sr-card-content { padding: 16px; } } @media (prefers-reduced-motion: reduce) { #objects-grid .obj-card, #services-grid .svc-card, .sr-card-art, .sr-arrow { transition: none; } #objects-grid .obj-card:hover, #services-grid .svc-card:hover { transform: none; } }