2 lines
2.4 KiB
CSS
2 lines
2.4 KiB
CSS
.surname-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}.surname-emblem{position:relative;overflow:hidden;display:grid;place-items:center;text-align:center;color:#fff;background:radial-gradient(circle at 72% 24%,rgba(255,255,255,.28) 0 10%,transparent 11%),linear-gradient(135deg,#476f63,#c49245 54%,#8f4634)}.surname-emblem span{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;color:var(--red);background:#fffdf8f2;font-family:SimSun,Songti SC,serif;font-size:58px;font-weight:800;transition:transform .24s ease}.surname-emblem:hover span{transform:rotate(-8deg) scale(1.08)}.surname-emblem p{margin:18px 0 0;color:#ffffffe6;font-size:22px}.surname-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.content-card,.related-panel{border:1px solid var(--line);border-radius:18px;background:#fffdf8d1;box-shadow:0 20px 54px #39302414}.content-card{padding:30px}.content-card:first-child{grid-column:1 / -1}.content-card p{color:var(--muted);font-size:17px;line-height:1.9}.generation-row{display:flex;flex-wrap:wrap;gap:10px}.generation-row span{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;color:#7c4a33;background:#fbf7ed;border:1px solid var(--line);font-family:SimSun,Songti SC,serif;font-size:24px;font-weight:800;transition:transform .22s ease,color .22s ease,background .22s ease}.generation-row span:hover{color:#fff;background:var(--red);transform:translateY(-5px)}.related-panel{padding:26px}.related-panel a{display:block;margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;color:#6f4a37;background:#fbf7ed;transition:transform .22s ease,color .22s ease,background .22s ease}.related-panel a:hover{color:#fff;background:var(--green);transform:translate(5px)}.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:860px){.surname-detail-grid{grid-template-columns:1fr}.content-card:first-child{grid-column:auto}}@media(max-width:720px){.hero-copy{padding-left:0}.hero-copy:before{display:none}}
|