2 lines
4.3 KiB
CSS
2 lines
4.3 KiB
CSS
.page-genealogy{background:#fbf7ed}.genealogy-hero .container{min-height:470px;padding-top:76px;padding-bottom:76px}.hero-copy{position:relative;padding-left:28px}.hero-copy:before{content:"";position:absolute;left:0;top:58px;width:4px;height:136px;border-radius:999px;background:linear-gradient(180deg,var(--red),var(--gold))}.genealogy-stats{display:flex;gap:12px;margin-top:28px;padding:8px;border:1px solid rgba(224,211,189,.78);border-radius:18px;background:#fffdf8bd;box-shadow:0 16px 36px #48392612}.genealogy-stats div{min-width:118px;padding:12px 16px;border-radius:12px}.genealogy-stats div+div{border-left:1px solid rgba(218,201,174,.78)}.genealogy-stats strong{display:block;color:var(--green);font-size:24px;line-height:1.1}.genealogy-stats span{color:#6d766f;font-size:14px}.tree-preview{position:relative;min-height:300px;display:grid;gap:14px;align-content:center;overflow:hidden;background:linear-gradient(90deg,#fffdf8f2,#fffdf8c7),radial-gradient(circle at 78% 22%,rgba(196,146,69,.2),transparent 28%);transform-style:preserve-3d}.tree-glow{position:absolute;right:-70px;top:-80px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(200,59,50,.13),transparent 62%);animation:treePulse 4.2s ease-in-out infinite}.tree-row{position:relative;z-index:2;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.tree-row span{min-width:110px;padding:14px 18px;border:1px solid #dac9ae;border-radius:14px;text-align:center;color:var(--green-dark);background:#fffaf1e6;box-shadow:0 12px 28px #4535230f;font-weight:800;transition:transform .24s ease,color .24s ease,background .24s ease,box-shadow .24s ease}.tree-preview:hover .tree-row span{animation:nodeFloat 1.9s ease-in-out infinite}.tree-row span:hover{color:#fff;background:var(--green);box-shadow:0 16px 32px #476f6338}.tree-row.branch span:nth-child(2){animation-delay:.08s}.tree-row.branch span:nth-child(3){animation-delay:.16s}.tree-row.generation span:nth-child(2){animation-delay:.08s}.tree-row.generation span:nth-child(3){animation-delay:.16s}.tree-row.generation span:nth-child(4){animation-delay:.24s}.tree-line{position:relative;z-index:1;width:min(360px,70%);height:1px;margin:0 auto;background:linear-gradient(90deg,transparent,rgba(196,146,69,.5),transparent)}.tree-line.short{width:min(500px,86%)}.capability-section{position:relative;overflow:hidden}.capability-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%);pointer-events:none}.feature-card{min-height:210px;position:relative;overflow:hidden}.feature-card:after{content:"";position:absolute;left:-40%;top:0;width:36%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);transform:skew(-18deg);transition:left .56s ease}.feature-card:hover:after{left:110%}.icon-word{width:48px;height:48px;margin-bottom:18px;border-radius:14px;display:grid;place-items:center;color:var(--red);background:#f7e4dc;font-size:22px;font-weight:900;transition:transform .26s ease,background .26s ease,color .26s ease}.feature-card:hover .icon-word{color:#fff;background:var(--red);transform:rotate(-6deg) scale(1.08)}.coedit-section{background:radial-gradient(circle at 18% 20%,rgba(200,59,50,.08),transparent 24%),#f7efe2}.coedit-card{min-height:260px;padding:34px}.coedit-card .btn{margin-top:12px}.process-card{min-height:260px;padding:34px}.step-list{display:grid;gap:16px;margin-top:20px}.step-list p{display:flex;gap:14px;align-items:center;margin:0;color:var(--muted)}.step-list b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--green);flex:0 0 auto;box-shadow:0 12px 28px #476f632e}.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 nodeFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes treePulse{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}.genealogy-stats{flex-direction:column}.genealogy-stats div+div{border-left:0;border-top:1px solid rgba(218,201,174,.78)}}
|