css/main.css - master - peling-dev/Cards

css/main.css
1 строка4 KB
peling-dev
Загрузил проект отдельно по папкам
13 июн 2026, 14:11
13 июн 2026, 14:1158afd88
*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(145deg,#0f0f1a 0,#1a1a2e 100%);font-family:"Segoe UI",Inter,system-ui,sans-serif;padding:2rem;color:#f0f0f0}.container{max-width:1400px;margin:0 auto}h1{text-align:center;font-weight:500;letter-spacing:-.5px;margin-bottom:2rem;background:linear-gradient(135deg,#00c86b,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 4px rgba(0,0,0,.2)}.cards-grid{display:flex;flex-direction:column;gap:2rem}.card{background:rgba(255,255,255,.05);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:32px 64px;transition:all .25s ease;overflow:hidden}.card:hover{background:rgba(255,255,255,.178);border-color:rgba(0,200,107,.4);box-shadow:0 20px 35px -12px rgba(0,0,0,.4)}.btn{background:rgba(0,200,107,.15);border:1px solid #00c86b;padding:.6rem 1.2rem;border-radius:30px 45px;font-weight:600;color:#00c86b;cursor:pointer;transition:.2s;text-align:center;display:inline-block}.btn-primary{background:#00c86b;color:#0f0f1a;border:none}.btn-primary:hover{background:rgb(0,184,98.44);transform:scale(.98)}.btn-secondary{border-color:#ffb347;color:#ffb347}.badge{background:rgba(255,179,71,.125);border-left:3px solid #ffb347;padding:.2rem .6rem;font-size:.7rem;border-radius:12px 18px}.old-price{text-decoration:line-through;opacity:.6;font-size:.9rem}.rating{display:flex;align-items:center;gap:.4rem;color:#ffb347}.stars{letter-spacing:2px}.capacity-switch{display:flex;gap:.5rem;margin:.5rem 0}.cap-btn{background:rgba(255,255,240,.1);border:1px solid rgba(255,179,71,.5);padding:.3rem .9rem;border-radius:20px 30px;cursor:pointer;transition:.2s;font-size:.8rem}.cap-btn.active{background:#ffb347;color:#0f0f1a;border-color:#ffb347}.card-vertical{display:flex;flex-direction:column;padding:1.25rem;gap:.75rem}.card-vertical-img{width:100%;border-radius:24px 48px;background:#111;display:flex;justify-content:center;align-items:center;min-height:200px}.card-vertical-img img{width:100%;height:auto;display:block;border-radius:24px 48px;object-fit:cover}.card-title{font-size:1.4rem;font-weight:600}.card-desc{font-size:.85rem;opacity:.7}.price-row{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}.current-price{font-size:1.6rem;font-weight:700;color:#00c86b}.card-horizontal{display:flex;flex-wrap:wrap;gap:1.5rem;padding:1.25rem}.card-horizontal-left{flex:1.2;min-width:150px}.card-horizontal-left img{width:100%;border-radius:24px 48px}.card-horizontal-right{flex:2;display:flex;flex-direction:column;gap:.6rem}.card-tent{padding:1.25rem;position:relative;transition:all .3s}.card-tent .tent-extra{max-height:0;overflow:hidden;transition:max-height .4s ease-out;background:rgba(0,0,0,.3);border-radius:20px 30px;margin-top:0}.card-tent:hover .tent-extra{max-height:150px;margin-top:1rem;padding:.75rem}.card-compact{display:flex;align-items:center;gap:1rem;padding:.8rem 1.2rem}.card-compact .compact-img{width:70px;border-radius:16px 32px;overflow:hidden}.card-compact .compact-img img{width:100%;border-radius:16px 32px}.card-compact .compact-info{flex:1}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem}@media (max-width:680px){.main-header{flex-direction:column;gap:.5rem;text-align:center}.main-nav a{margin:0 .75rem!important}}.main-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:rgba(24,201,104,.26);backdrop-filter:blur(8px);margin-bottom:2rem;border-radius:60px}.main-header .logo{font-weight:700;font-size:1.4rem;background:linear-gradient(135deg,#00c86b,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent}.main-header .main-nav a{color:#fff;margin-left:1.5rem;text-decoration:none}.main-header .main-nav a:hover{color:#00c86b}.main-footer{text-align:center;padding:2rem;margin-top:3rem;border-top:1px solid rgba(245,248,244,.904);font-size:.8rem;opacity:.7}