2 lines
2.0 KiB
CSS
2 lines
2.0 KiB
CSS
.promo-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))}.promo-tags{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}.promo-tags span{padding:10px 14px;border:1px solid rgba(224,211,189,.78);border-radius:999px;color:#6d766f;background:#fffdf8bd;font-weight:800;transition:transform .22s ease,color .22s ease,background .22s ease}.promo-tags span:hover{color:#fff;background:var(--green);transform:translateY(-3px)}.album-preview{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:repeat(2,130px);gap:14px;overflow:hidden}.album-photo{border-radius:18px;background:radial-gradient(circle at 72% 24%,rgba(255,255,255,.75) 0 8%,transparent 9%),linear-gradient(135deg,#e7c89e,#b94135 48%,#143d57);box-shadow:0 16px 36px #39302414;transition:transform .26s ease}.album-photo.large{grid-row:1 / 3;background:linear-gradient(180deg,#1c302d1a,#153733b8),url(../images/ancestral-hall.png) center/cover}.album-photo.warm{background:linear-gradient(135deg,#f0d8ac,#c49245 45%,#7d342d)}.album-photo.green{background:linear-gradient(135deg,#dfd1b5,#6b7f70 48%,#26302c)}.album-preview:hover .album-photo{transform:scale(1.025)}.album-card{min-height:180px;position:relative;overflow:hidden}.album-card:after{content:"";position:absolute;left:-42%;top:0;width:36%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.54),transparent);transform:skew(-18deg);transition:left .56s ease}.album-card:hover:after{left:112%}.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:720px){.hero-copy{padding-left:0}.hero-copy:before{display:none}.album-preview{grid-template-columns:1fr;grid-template-rows:repeat(4,120px)}.album-photo.large{grid-row:auto}}
|