/* ========================================= Phonics Forest – Base Styles 結構 / 排版 / 文字（不含顏色主題） ========================================= */ /* Reset */ * { box-sizing: border-box; } /* Body */ body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "PingFang HK", "Noto Sans TC", sans-serif; color: #222; line-height: 1.7; background: #ffffff; } /* Headings */ h1, h2, h3 { line-height: 1.35; margin-top: 0; } /* Container（⚠️ 不可用於 menu） */ .container { max-width: 1100px; margin: auto; padding: 0 20px; } /* ========================================= Hero（只影響 hero，不影響 menu） ========================================= */ header:not(.site-header) { padding: 60px 20px; text-align: center; } /* Hero video placeholder */ .hero-video { max-width: 820px; margin: 24px auto 32px; /* 👈 上下呼吸感 */ aspect-ratio: 16 / 9; background: #ddd; display: flex; align-items: center; justify-content: center; color: #666; border-radius: 14px; font-size: 0.95rem; } /* Hero 文字排版優化（中文版） */ .section-green h1 { line-height: 1.15; letter-spacing: 0.5px; margin-bottom: 20px; } .section-green p { max-width: 680px; margin: 0 auto 14px; line-height: 1.75; font-size: 1rem; } /* ========================================= Sections ========================================= */ section { padding: 60px 0; } /* Hero section spacing fix */ background: /* Feature grid */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin-top: 36px; } /* Feature card base */ .feature { border-radius: 16px; padding: 28px; } .features.audience { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } @media (max-width: 768px) { .features.audience { grid-template-columns: 1fr; } } /* ========================================= English text handling (SEO safe) ========================================= */ /* 視覺隱藏，但 SEO / Screen reader 可讀 */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 語言預留：預設隱藏英文 */ [lang="en"] { display: none; } /* 將來只要即可開英文 */ body.lang-en [lang="en"] { display: block; } /* 英文 helper（如果有顯示時） */ .en { font-size: 0.9rem; margin-top: 8px; } /* ========================================= Lists ========================================= */ ul { margin-top: 20px; padding-left: 20px; } li { margin-bottom: 10px; } /* ========================================= CTA links ========================================= */ .cta-links a { margin-right: 18px; font-weight: 600; text-decoration: none; } /* ========================================= Footer ========================================= */ footer { padding: 30px 20px; text-align: center; font-size: 0.9rem; } /* ========================================= Mobile ========================================= */ @media (max-width: 600px) { section { padding: 40px 0; } h1 { font-size: 1.6rem; } h2 { font-size: 1.35rem; } .section-green h1 { line-height: 1.2; letter-spacing: 0.3px; } .section-green p { font-size: 0.95rem; } } /* ========================================= Section rhythm (layout only) ========================================= */ background: .section-brown { background: #7b4a1e; /* 深啡 */ color: #ffffff; } .section-white { background: #ffffff; color: #222222; } .section-soft-green { background: #eef5f1; /* 淺綠 */ color: #222222; } /* Lock hero h1 size */ .section-green h1 { font-size: 2.6rem; /* 約等於 100% 視覺標準 */ }