html { scroll-behavior: smooth; } body { margin: 0; font-family: Helvetica, sans-serif; color: #000000; background-color: #ffffff; line-height: 1.6; margin-top: 200px; /* 给 header 留出空间 */ } header { position: fixed; /* 固定在页面上方 */ top: 0px; /* 距离页面顶部 60px */ left: 0; width: 100%; /* 占满整个宽度 */ background-color: rgba(100, 193, 247, 0.6); padding: 0px; text-align: center; backdrop-filter: blur(0px); /* 模糊背景，让下方内容透过 */ z-index: 1000; /* 确保在最上层 */ height: 200px; } .headerInner1 { display: flex; align-items: center; /* 垂直居中 */ justify-content: flex-start;/* 水平方向整体居中 */ gap: 40px; /* 元素之间的间距 */ height: 130px; width: 1200px; margin: 15px auto auto auto; } .headerInner2 { display: flex; align-items: center; /* 垂直居中 */ justify-content: flex-start;/* 水平方向整体居中 */ gap: 40px; /* 元素之间的间距 */ height: calc(200px - 130px - 15px - 15px); /* 剩余空间 */ width: 1200px; margin: 0 auto; } .headerText { display: flex; flex-direction: column; /* 垂直排版 h2 和 p */ align-items: flex-start;/* 左对齐文字 */ } .headerText h2 { margin: 0; font-size: 28px; font-weight: bold; } .headerText p { margin: 0px 0 0 0; font-size: 16px; } .profilePic { width: 120px; height: 120px; object-fit: cover; margin-left: 10px; } .headerLogo { display: flex; max-width: 680px; height: 120px; object-fit: contain; margin: 10px 0px 0px auto; /* 让盒子居 */ justify-content: flex-end; /* 靠右 */ } .divider { width: 1200px; margin: 15px auto 0 auto; height: 1px; background-color: #000000; } .subNav { display: flex; justify-content: center; gap: 120px; /* 标签之间间距 */ margin-top: -2px; margin-left: 200px; } .subTag { font-size: 20px; color: #000000; text-decoration: none; /* 去掉下划线 */ opacity: 0.6; font-weight: bold; } .subTag:hover { opacity: 1; /* 鼠标移上变亮 */ } .pink { background-color: #f0c8c7; padding: 60px 20px; text-align: center; } .pink h2 { margin: -30px auto auto auto; font-size: 26px; font-weight: lighter; color: #222; width: 960px; text-align: left; font-family: "palatino linotype", serif; } .offwhite { background-color: #EDEBE3; padding: 60px 20px; } section.offwhite h2 { font-size: 26px; color: #222; margin-bottom: 15px; } section.lavender { background-color: #EBD5E9; padding: 60px 20px; text-align: center; } section.gray { background-color: #CACACA; padding: 60px 20px; text-align: center; } section.skinBeige { background-color: #DEC9C0; padding: 60px 20px; text-align: center; } section.lavender2 { background-color: #EBD5E9; padding: 60px 20px; text-align: center; } section.lightBlue { background-color: #98B9C970; padding: 60px 20px; text-align: center; } section.softPink { background-color: #FFDCDD; padding: 60px 20px; text-align: center; } section.mintWhite { background-color: #F5FFF3; padding: 60px 20px; text-align: center; } section.txstMaroon { background-color: #501214; padding: 60px 20px; text-align: center; color: white; font-family: palatino, serif; font-size: 24px; } section.darkGold { background-color: #AC9155; padding: 60px 20px; text-align: center; } section.brightGold { background-color: #D7BD8A; padding: 60px 20px; text-align: center; } section.theatreRojo { background-color: #E32849; padding: 60px 20px; text-align: center; } section.strahanCenterCourt { background-color: #EBBA45; padding: 60px 20px; text-align: center; } section.blindSalamander { background-color: #F9DCDE; padding: 60px 20px; text-align: center; } section.peach { background-color: #EA664D; padding: 60px 20px; text-align: center; } section.greenHills { background-color: #266725; padding: 60px 20px; text-align: center; } section.wildRiceGreen { background-color: #419E69; padding: 60px 20px; text-align: center; } section.glassBottomBoat { background-color: #70B7AA; padding: 60px 20px; text-align: center; } section.riverJump { background-color: #BFF3FD; padding: 60px 20px; text-align: center; } section.springLakeBlue { background-color: #007096; padding: 60px 20px; text-align: center; } section.charcoal { background-color: #363534; padding: 60px 20px; text-align: center; } section.sandstone { background-color: #F5F1EE; padding: 60px 20px; text-align: center; } section.darkGold2 { background-color: #64480C; padding: 60px 20px; text-align: center; } section.darkGreen { background-color: #2A4F39; padding: 60px 20px; text-align: center; } .icon { width: 40px; height: 40px; filter: invert(100%); /* 把黑色 SVG 自动变成白色 */ margin: 0 10px; } .iconLink { display: inline-block; }
