2 lines
6.2 KiB
CSS
2 lines
6.2 KiB
CSS
.page{background:#faf9f6;color:#242622;font-family:Arial,'PingFang SC',sans-serif}.page *{box-sizing:border-box}.page a{text-decoration:none;color:inherit}.nav{max-width:1320px;margin:auto;height:92px;display:flex;align-items:center;gap:28px;padding:0 38px;border-bottom:1px solid #dedfd8}.logo{display:flex;align-items:center;gap:10px;font-size:24px}.logo span{font-size:11px;letter-spacing:2px;color:#7c8075}.nav>div{display:flex;gap:30px;flex:1;margin-left:60px;font-size:13px}.nav>a:not(.logo){font-size:13px}.dark{display:inline-flex;align-items:center;justify-content:center;gap:16px;background:#252a23;color:#fff!important;border-radius:7px;padding:14px 20px;font-size:14px}.dark:hover{background:#47513d}.hero{text-align:center;padding:78px 32px 40px;max-width:1320px;margin:auto}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#68725b;font-weight:600}.hero h1{font-size:clamp(36px,4.6vw,68px);line-height:1.24;letter-spacing:-3px;font-weight:600;margin:28px 0}.hero h1>span{color:#75865d}.intro{font-size:16px;line-height:1.95;color:#7b7e73}.actions{display:flex;align-items:center;justify-content:center;gap:28px;margin:28px 0 55px;font-size:13px}.product{text-align:left;border:1px solid #d8dcd0;border-radius:13px;overflow:hidden;box-shadow:0 20px 65px #39442b0c;background:white}.productBar{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 23px;border-bottom:1px solid #e0e3d9;font-size:10px;color:#8c9284}.productBar b{letter-spacing:2px;color:#3a4434}.demo{display:flex;min-height:385px}.demo>aside{width:175px;flex-shrink:0;padding:26px 20px;border-right:1px solid #e0e3d9;font-size:11px;color:#707969}.demo hr{border:0;border-top:1px solid #e0e3d9;margin:20px 0}.demo aside p{padding:8px 0}.demo aside small{display:block;margin-top:90px;font-size:9px}.demoWorld{position:relative;flex:1;min-width:0;background:radial-gradient(#cdd4c4 .7px,transparent .7px) 0 0/18px 18px,#f1f3ec}.demoWorld>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#8fa174;stroke-width:1.5}.demoWorld>article{position:absolute;border:1px solid #d6ddcb;box-shadow:0 8px 20px #39442b09;border-radius:7px;padding:23px;width:23%;background:#fff}.demoWorld small{font-size:8px;letter-spacing:1px;color:#7b886d}.demoWorld h3{font-size:22px;font-weight:500;line-height:1.5;margin:18px 0 12px}.demoWorld p{font-size:10px;line-height:1.9;color:#7f8775}.note{left:5%;top:55px;transform:rotate(-3deg)}.demoWorld>.art{left:36%;top:35px;width:25%;height:260px;overflow:hidden;background:#c9d3b1;color:#34452c}.art h3{position:absolute;bottom:24px;z-index:1}.art>span{position:absolute;bottom:23px;font-size:6px;letter-spacing:2px}.orbit{width:165px;height:165px;border-radius:50%;background:linear-gradient(135deg,#f7f2d8,#7f9469);box-shadow:20px 10px 30px #52613e44;position:absolute;right:-28px;top:25px}.prompt{left:69%;top:100px;transform:rotate(3deg)}.prompt>svg{display:block;margin-bottom:16px;color:#748361}.dock{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:23px;padding:12px 18px;border:1px solid #dbe1d2;background:#fff;border-radius:10px}.dock svg{width:17px;color:#647353}.caption{font-size:10px;color:#8a8e82;margin-top:23px}.tools{max-width:1160px;padding:75px 32px;margin:auto}.page h2{font-size:clamp(30px,3.5vw,47px);line-height:1.3;letter-spacing:-1.8px;font-weight:500;margin:20px 0 35px}.toolGrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.toolGrid>a{border:1px solid #dedfd6;padding:30px;border-radius:12px;background:#fff;transition:transform .2s}.toolGrid>a:hover{transform:translateY(-4px)}.toolGrid>a>svg{width:21px;vertical-align:middle;color:#788462}.toolGrid>a>span{font-size:9px;letter-spacing:2px;margin-left:13px;color:#7a8170}.toolGrid h3{font-size:27px;letter-spacing:-1px;margin:25px 0 14px;font-weight:500}.toolGrid p{font-size:13px;line-height:1.9;color:#85887e;max-width:370px}.toolGrid strong{display:flex;justify-content:space-between;font-weight:400;font-size:12px;margin-top:24px}.poster,.miniCanvas{height:225px;margin-top:30px;overflow:hidden;background:#ebeedf;position:relative;border-radius:6px}.poster>span{display:block;font-size:48px;letter-spacing:-3px;font-weight:700;line-height:1;padding:28px;color:#434e32}.poster i{font-family:Georgia,serif;font-weight:400}.poster>b{position:absolute;right:20px;top:20px;font-size:175px;line-height:1;color:#9cae79;transform:rotate(15deg)}.miniCanvas{display:flex;align-items:center;justify-content:center;gap:10px;background:radial-gradient(#ccd3c5 .7px,transparent .7px) 0 0/15px 15px,#f0f2eb}.miniCanvas b{font-size:11px;font-weight:400;padding:20px 13px;border:1px solid #cfd8c1;background:#fff;border-radius:6px}.miniCanvas i{color:#92a17c}.workflow{max-width:1160px;margin:20px auto;padding:65px 32px 90px;display:grid;grid-template-columns:1fr 1fr;gap:100px;border-top:1px solid #dddfd4}.workflow p{font-size:13px;line-height:1.9;color:#85897d}.workflow a{display:inline-flex;gap:10px;font-size:12px;margin-top:20px}.workflow ol{list-style:none;padding:0}.workflow li{display:flex;gap:25px;border-bottom:1px solid #dedfd6;padding:22px 0}.workflow li>b{font-size:12px;color:#98a38a;padding-top:6px}.workflow h3{font-size:18px;font-weight:500;margin:0}.end{text-align:center;padding:75px 25px 95px;background:#eef0e7;border-top:1px solid #dfe2d5}.end>span{font-size:55px;color:#8c9c70}.footer{max-width:1240px;display:flex;justify-content:space-between;gap:25px;align-items:center;margin:auto;padding:35px;font-size:11px;color:#7a8171}.footer .logo{font-size:16px}.page a:focus-visible{outline:2px solid #647c48;outline-offset:5px}@media(max-width:760px){.nav{padding:0 20px;height:72px;gap:14px}.nav>div{display:none}.nav .logo{flex:1}.nav .logo span{display:none}.nav .dark{padding:10px}.hero{padding:50px 18px 20px}.hero h1{letter-spacing:-1.5px}.intro{font-size:13px}.actions{gap:15px}.demo>aside{display:none}.demo{min-height:340px}.demoWorld>article{padding:12px}.demoWorld h3{font-size:16px}.demoWorld p{font-size:8px}.demoWorld small{font-size:6px}.demoWorld>.art{height:220px}.prompt{left:68%}.orbit{width:110px;height:110px}.productBar span:last-child{display:none}.toolGrid{grid-template-columns:1fr}.tools{padding:50px 20px}.workflow{grid-template-columns:1fr;gap:20px;padding:45px 20px}.footer{flex-wrap:wrap;padding:25px 20px}.footer>span{display:none}}
|