/* ========================================================= index-home.css Homepage-only styles Use with: ========================================================= */ .home-page .hero { padding: 4rem 0 3.5rem; background: linear-gradient(135deg, #f7f3ea 0%, #edf3ec 100%); border-bottom: 1px solid #d8e0d9; } .home-page .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2rem; align-items: center; } .home-page .hero-copy h1 { margin: 1rem 0 1rem; font-size: clamp(2.1rem, 4vw, 4rem); line-height: 1.08; letter-spacing: -0.03em; } .home-page .hero-copy p { font-size: 1.12rem; color: var(--text-soft); max-width: 44rem; margin: 0 0 1.5rem; } .home-page .hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.25rem; } .home-page .hero-note { color: var(--text-soft); font-size: 0.95rem; } .home-page .hero-panel { background: linear-gradient(180deg, #dfe8e1 0%, #d3ddd6 100%); border: 1px solid #bccbc1; border-radius: 30px; box-shadow: 0 20px 45px rgba(20, 40, 34, 0.10); padding: 1.25rem; } .home-page .hero-graphic { aspect-ratio: 4 / 5; border-radius: 24px; background: linear-gradient(180deg, #eef3ee 0%, #dfe7de 100%); border: 1px solid #c7d4ca; position: relative; overflow: hidden; } .home-page .hero-card { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; background: #ffffff; border: 1px solid #c9d4cb; border-radius: 20px; padding: 1.15rem 1rem; box-shadow: 0 16px 30px rgba(20, 40, 34, 0.12); z-index: 3; } .home-page .hero-card strong { display: block; margin-bottom: 0.45rem; font-size: 1.05rem; color: #18342d; } .home-page .hero-card p { margin: 0; font-size: 1rem; color: #4d665e; } .home-page .resource-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; } .home-page .hero-feature-list { position: absolute; top: 1.2rem; left: 1.2rem; right: 1.2rem; display: grid; gap: 0.85rem; z-index: 2; } .home-page .hero-feature-list div { background: rgba(255, 255, 255, 0.78); border: 1px solid #cfd9d1; border-radius: 16px; padding: 0.85rem 1rem; font-weight: 700; color: #22453d; backdrop-filter: blur(4px); box-shadow: 0 8px 18px rgba(20, 40, 34, 0.05); } .home-page .resource-thumb { width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; margin-bottom: 1rem; background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid #d3ddd6; box-shadow: 0 10px 24px rgba(20, 40, 34, 0.06); } .home-page .thumb-reset { background-image: url('/assets/images/3-minute-reset.png'); } .home-page .thumb-grounding { background-image: url('/assets/images/grounding-checklist.png'); } .home-page .thumb-breathing { background-image: url('/assets/images/quick-calm-breathing.png'); } .home-page .thumb-workday { background-image: url('/assets/images/workday-stress-reset.png'); } .home-page .signup-wrap { display: grid; grid-template-columns: 1fr 0.95fr; gap: 1.5rem; align-items: stretch; } .home-page .signup-box, .home-page .signup-side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow); } .home-page .signup-box ul { margin: 1rem 0 1.4rem 1.2rem; padding: 0; } .home-page .signup-form { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1rem; } .home-page .signup-form input[type="email"] { flex: 1 1 280px; min-width: 0; min-height: 50px; padding: 0.95rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--border); font-size: 1rem; color: var(--text); background: #ffffff; } .home-page .mini-list { display: grid; gap: 0.9rem; } .home-page .mini-item { background: var(--surface-soft); border-radius: 14px; padding: 1rem; border: 1px solid #d4e2dc; } .home-page .mini-item strong { display: block; margin-bottom: 0.25rem; } .home-page .book-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 1.6rem; align-items: center; } .home-page .book-cover { aspect-ratio: 4 / 5; border-radius: 22px; background: linear-gradient(160deg, rgba(47,111,94,0.14), rgba(239,229,200,0.22)), url('/assets/images/book-feature-cover.jpg') center/cover no-repeat; border: 1px solid var(--border); box-shadow: var(--shadow); } .home-page section:nth-of-type(even):not(.hero) { background: #f7faf7; } @media (max-width: 980px) { .home-page .hero-grid, .home-page .signup-wrap, .home-page .book-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .home-page .hero { padding: 3rem 0; } .home-page .hero-grid, .home-page .signup-wrap, .home-page .book-grid { grid-template-columns: 1fr; } .home-page .hero-copy h1 { font-size: 2.4rem; } .home-page .hero-actions, .home-page .signup-form { flex-direction: column; align-items: stretch; } }