| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- page {
- min-height: 100vh;
- background: linear-gradient(180deg, #eff4fb 0%, #e8eff7 100%);
- }
- .page {
- min-height: 100vh;
- }
- .shell {
- display: grid;
- gap: 24rpx;
- padding: 28rpx 24rpx 40rpx;
- }
- .hero,
- .panel {
- display: grid;
- gap: 16rpx;
- padding: 24rpx;
- border-radius: 24rpx;
- }
- .hero {
- background: linear-gradient(135deg, #163a66 0%, #1f5da1 100%);
- color: #ffffff;
- }
- .hero__eyebrow {
- font-size: 22rpx;
- letter-spacing: 0.16em;
- text-transform: uppercase;
- color: rgba(255, 255, 255, 0.72);
- }
- .hero__title {
- font-size: 40rpx;
- font-weight: 700;
- }
- .hero__desc {
- font-size: 24rpx;
- color: rgba(255, 255, 255, 0.84);
- line-height: 1.6;
- }
- .panel {
- background: rgba(255, 255, 255, 0.94);
- box-shadow: 0 14rpx 32rpx rgba(40, 63, 95, 0.08);
- }
- .panel__title {
- font-size: 30rpx;
- font-weight: 700;
- color: #17345a;
- }
- .summary {
- font-size: 24rpx;
- line-height: 1.6;
- color: #30465f;
- }
- .actions {
- display: flex;
- gap: 16rpx;
- flex-wrap: wrap;
- }
- .btn {
- margin: 0;
- min-height: 76rpx;
- padding: 0 24rpx;
- line-height: 76rpx;
- border-radius: 18rpx;
- font-size: 26rpx;
- }
- .btn::after {
- border: 0;
- }
- .btn--primary {
- background: #173d73;
- color: #ffffff;
- }
- .btn--secondary {
- background: #dfeaf8;
- color: #173d73;
- }
|