2 lines
3.3 KiB
CSS
2 lines
3.3 KiB
CSS
.surname-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))}.surname-stats{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}.surname-stats span{padding:11px 14px;border:1px solid rgba(224,211,189,.78);border-radius:999px;color:#6d766f;background:#fffdf8bd;box-shadow:0 14px 32px #4839260f}.surname-stats b{margin-right:6px;color:var(--green)}.surname-search-card{position:relative;overflow:hidden;display:grid;gap:18px;align-content:center}.search-ornament{position:absolute;right:-72px;top:-84px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(200,59,50,.13),transparent 62%);animation:surnamePulse 4s ease-in-out infinite}.surname-search-card h3,.search-toolbar,.hot-query{position:relative;z-index:2}.search-toolbar{padding:8px;border:1px solid rgba(224,211,189,.78);border-radius:999px;background:#fffaf1d1}.search-toolbar .input{flex:1 1 280px;border:0;background:transparent}.hot-query{display:flex;gap:10px;flex-wrap:wrap}.hot-query span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#7c4a33;background:#fbf7ed;border:1px solid var(--line);font-family:SimSun,Songti SC,serif;font-weight:800;transition:transform .22s ease,color .22s ease,background .22s ease}.hot-query span:hover{color:#fff;background:var(--red);transform:translateY(-4px)}.surname-list-section{position:relative;overflow:hidden}.surname-list-section:before{content:"";position:absolute;left:50%;top:58px;width:520px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(196,146,69,.09),transparent 68%);transform:translate(-50%)}.surname-grid{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:12px;padding:24px;border:1px solid rgba(224,211,189,.8);border-radius:24px;background:#fffdf8b8;box-shadow:0 22px 60px #39302414}.surname-grid a{height:64px;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 .24s ease,color .24s ease,background .24s ease,border-color .24s ease,box-shadow .24s ease;will-change:transform}.surname-grid a:hover{color:#fff;background:var(--red);border-color:#c83b32b8;box-shadow:0 16px 34px #c83b322e;transform:translateY(-6px) scale(1.03)}.surname-grid:hover a{animation:surnameFloat 1.9s ease-in-out infinite}.surname-grid:hover a:nth-child(2n){animation-delay:.08s}.surname-grid:hover a:nth-child(3n){animation-delay:.14s}.surname-grid:hover a:nth-child(4n){animation-delay:.2s}.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}@keyframes surnameFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes surnamePulse{0%,to{opacity:.5;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}@media(max-width:720px){.hero-copy{padding-left:0}.hero-copy:before{display:none}.search-toolbar{border-radius:18px}.surname-grid{grid-template-columns:repeat(4,1fr);padding:14px}}
|