|
|
| 第242行： |
第242行： |
|
| |
|
| /* =============================== | | /* =============================== |
| Monthly Landing Page | | Monthly – Hero Title |
| =============================== */ | | =============================== */ |
|
| |
|
| 第248行： |
第248行： |
| max-width: 1200px; | | max-width: 1200px; |
| margin: 0 auto; | | margin: 0 auto; |
| padding: 48px 24px; | | padding: 80px 24px 40px; |
| } | | } |
|
| |
|
| /* Hero */
| | .monthly-hero { |
| .monthly-hero h1 { | | margin-bottom: 48px; |
| font-size: 2.6rem;
| |
| font-weight: 600;
| |
| letter-spacing: -0.02em;
| |
| margin-bottom: 12px; | |
| } | | } |
|
| |
|
| .monthly-subtitle { | | .monthly-title { |
| font-size: 1.15rem; | | font-size: clamp(3rem, 6vw, 4.2rem); |
| color: #555;
| |
| max-width: 720px;
| |
| }
| |
| | |
| /* Value cards */
| |
| .monthly-values {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
| |
| gap: 32px;
| |
| margin: 64px 0;
| |
| }
| |
| | |
| .value-card h3 {
| |
| font-size: 1.05rem;
| |
| font-weight: 600; | | font-weight: 600; |
| margin-bottom: 6px; | | letter-spacing: -0.03em; |
| | line-height: 1.05; |
| | margin: 0; |
| } | | } |
|
| |
|
| .value-card p { | | .monthly-tagline { |
| color: #666; | | margin-top: 16px; |
| | max-width: 720px; |
| | font-size: 1.25rem; |
| line-height: 1.6; | | line-height: 1.6; |
| }
| | color: #555; |
| | |
| /* Sections */
| |
| .monthly-section {
| |
| margin-bottom: 64px;
| |
| }
| |
| | |
| .monthly-section h2 {
| |
| font-size: 1.4rem;
| |
| font-weight: 600;
| |
| margin-bottom: 20px;
| |
| }
| |
| | |
| /* Year grid */
| |
| .year-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
| |
| gap: 16px;
| |
| }
| |
| | |
| .year-card {
| |
| border: 1px solid #e5e7eb;
| |
| border-radius: 14px;
| |
| padding: 22px 16px;
| |
| background: #fff;
| |
| text-align: center;
| |
| font-size: 1.1rem;
| |
| transition: all 0.2s ease;
| |
| }
| |
| | |
| .year-card:hover {
| |
| transform: translateY(-2px);
| |
| box-shadow: 0 6px 20px rgba(0,0,0,0.06);
| |
| }
| |
| | |
| /* Recent list */
| |
| .recent-list ul {
| |
| padding-left: 1.2em;
| |
| }
| |
| | |
| .recent-list li {
| |
| margin-bottom: 8px;
| |
| }
| |
| | |
| /* CTA */
| |
| .monthly-cta {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| align-items: center;
| |
| gap: 16px;
| |
| font-size: 1.05rem;
| |
| }
| |
| | |
| .cta-button {
| |
| background: #111827;
| |
| color: #fff !important;
| |
| padding: 10px 18px;
| |
| border-radius: 999px;
| |
| font-size: 0.95rem;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .cta-button:hover {
| |
| background: #000;
| |
| }
| |
| | |
| .cta-link {
| |
| color: #2563eb; | |
| text-decoration: none;
| |
| }
| |
| | |
| .cta-link:hover {
| |
| text-decoration: underline;
| |
| } | | } |
