.create-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)); } .create-tags { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; } .create-tags span { padding: 10px 14px; border: 1px solid rgba(224, 211, 189, .78); border-radius: 999px; color: #6d766f; background: rgba(255,253,248,.74); box-shadow: 0 14px 32px rgba(72, 57, 38, .06); font-weight: 800; transition: transform .22s ease, color .22s ease, background .22s ease; } .create-tags span:hover { color: #fff; background: var(--green); transform: translateY(-3px); } .process-card { position: relative; overflow: hidden; display: grid; align-content: center; } .process-card:before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(196,146,69,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(196,146,69,.06) 1px, transparent 1px); background-size: 34px 34px; opacity: .72; } .process-card h3, .process-card .step-list { position: relative; z-index: 2; } .process-orb { position: absolute; right: -70px; top: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 59, 50, .13), transparent 62%); animation: createPulse 4s ease-in-out infinite; } .step-list { display: grid; gap: 16px; margin-top: 18px; } .step-list p { display: flex; gap: 14px; align-items: center; margin: 0; color: var(--muted); transition: transform .22s ease, color .22s ease; } .step-list p:hover { color: var(--green-dark); transform: translateX(6px); } .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 rgba(71, 111, 99, .18); transition: transform .22s ease, background .22s ease; } .step-list p:hover b { background: var(--red); transform: scale(1.08); } .create-form-section { position: relative; overflow: hidden; } .create-form-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: translateX(-50%); } .create-form { max-width: 720px; position: relative; overflow: hidden; padding: 36px; } .form-ornament { position: absolute; right: -82px; top: -88px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(71, 111, 99, .12), transparent 66%); } .create-form h2, .create-form .form-note, .create-form .form-grid { position: relative; z-index: 2; } .form-note { margin-bottom: 22px; color: var(--muted); line-height: 1.8; } .create-form .input, .create-form textarea { transition: border-color .22s ease, box-shadow .22s ease, background .22s ease, transform .22s ease; } .create-region-picker { /* 创建家谱页地区选择器占满表单宽度,编码通过隐藏字段提交 */ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .create-form .input:focus, .create-form textarea:focus { outline: none; border-color: rgba(200, 59, 50, .62); background: #fffdf8; box-shadow: 0 0 0 4px rgba(200, 59, 50, .08); transform: translateY(-2px); } .submit-btn { width: 100%; } .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 createPulse { 0%, 100% { 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; } .create-region-picker { grid-template-columns: 1fr; } }