2 lines
2.3 KiB
CSS
2 lines
2.3 KiB
CSS
.page-family-detail [data-family-detail].is-loading{opacity:.82}.detail-hero .container{min-height:440px;padding-top:74px;padding-bottom:74px}.hero-copy{position:relative;padding-left:28px}.hero-copy:before{content:"";position:absolute;left:0;top:58px;width:4px;height:132px;border-radius:999px;background:linear-gradient(180deg,var(--red),var(--gold))}.detail-actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}.family-summary{position:relative;overflow:hidden;display:grid;align-content:center;gap:24px;color:#fff;background:linear-gradient(180deg,#213f382e,#213f38e0),linear-gradient(135deg,#476f63,#c49245 52%,#8f4634)}.family-summary:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:34px 34px;opacity:.38}.family-summary>*{position:relative;z-index:2}.summary-badge{width:fit-content;padding:8px 14px;border-radius:999px;color:var(--green-dark);background:#fffdf8e0;font-weight:800}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.summary-grid span{min-height:84px;padding:16px;border-radius:16px;display:grid;place-items:center;background:#ffffff21;border:1px solid rgba(255,255,255,.18)}.summary-grid b{display:block;font-size:30px}.detail-layout{display:grid;grid-template-columns:330px 1fr;gap:26px;align-items:start}.detail-panel,.content-card,.mini-card{border:1px solid var(--line);border-radius:18px;background:#fffdf8c7;box-shadow:0 20px 54px #39302414}.detail-panel{padding:26px;position:sticky;top:108px}.detail-panel p,.content-card p,.mini-card p{color:var(--muted);line-height:1.8}.detail-main{display:grid;gap:24px}.content-card{padding:30px}.mini-card{min-height:170px;padding:24px;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.mini-card:hover{border-color:#c492456b;box-shadow:0 24px 60px #3930241c}.tilt-card{transform:perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));transition:transform .18s ease,box-shadow .24s ease,border-color .24s ease}.tilt-card:hover{--lift: -6px}@media(max-width:900px){.detail-layout{grid-template-columns:1fr}.detail-panel{position:static}.summary-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.hero-copy{padding-left:0}.hero-copy:before{display:none}}
|