/* ========================================================= book.css Matched to workplace-trauma-book.cfm Use with: ========================================================= */ .book-page { margin: 0; font-family: Arial, Helvetica, sans-serif; background: linear-gradient(180deg, #f6faf8 0%, #eef5f2 100%); color: #16312b; line-height: 1.6; } .book-page *, .book-page *::before, .book-page *::after { box-sizing: border-box; } .book-page img { max-width: 100%; display: block; height: auto; } .book-page a { color: #225145; text-decoration: none; transition: 0.2s ease; } .book-page a:hover { text-decoration: none; } .book-page .wrap { width: min(100% - 2rem, 1180px); margin: 0 auto; } .book-page .wrap-inner { width: min(100% - 1.25rem, 1180px); margin: 0 auto; } .book-page .hero { padding: 3rem 0 2.5rem; } .book-page .section { padding: 3.75rem 0; } .book-page h1, .book-page h2, .book-page h3, .book-page h4 { margin-top: 0; color: #16312b; line-height: 1.12; } .book-page h1 { font-size: clamp(2.4rem, 4.4vw, 4.3rem); letter-spacing: -0.03em; margin-bottom: .75rem; } .book-page h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 0.8rem; } .book-page h3 { font-size: 1.2rem; margin-bottom: 0.6rem; } .book-page p, .book-page li { color: #42635a; font-size: 1.03rem; } .book-page .eyebrow { display: inline-block; padding: 0.45rem 0.85rem; border-radius: 999px; background: #dcece6; color: #225145; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1rem; } .book-page .hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 380px); gap: 2rem; align-items: start; } .book-page .subhead { font-size: 1.18rem; color: #2c4d45; margin-bottom: .85rem; max-width: 48rem; } .book-page .lead { font-size: 1.08rem; color: #42635a; margin-bottom: 0; max-width: 48rem; } .book-page .highlight-box { background: linear-gradient(180deg, #ffffff 0%, #eef6f2 100%); border: 1px solid #c7d8d1; border-radius: 20px; box-shadow: 0 10px 30px rgba(24, 46, 39, 0.08); padding: 1.25rem 1.35rem; margin-top: 1.2rem !important; } .book-page .note { margin: 0; color: #42635a; line-height: 1.7; } .book-page .benefit-strip { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.35rem 0 1.4rem; } .book-page .pill { display: inline-flex; align-items: center; padding: 0.65rem 1rem; border-radius: 999px; background: #e8f0ec; border: 1px solid #d7e4de; color: #16312b; font-size: 0.95rem; font-weight: 700; } .book-page .buy-badge { display: inline-block; padding: 0.4rem 0.75rem; border-radius: 999px; background: #dcece6; color: #225145; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.85rem; } .book-page .helps-box { background: #ffffff; border: 1px solid #c7d8d1; border-radius: 20px; box-shadow: 0 10px 30px rgba(24, 46, 39, 0.06); padding: 1.5rem; margin: 0 0 1.5rem; } .book-page .helps-kicker { margin: 0 0 0.4rem; color: #225145; font-weight: 700; font-size: 0.94rem; text-transform: uppercase; letter-spacing: 0.03em; } .book-page .helps-box h3 { margin-bottom: 0.8rem; } .book-page .helps-list { margin: 0; padding-left: 1.2rem; } .book-page .helps-list li { margin-bottom: 0.55rem; } .book-page .hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 1.4rem 0 0.9rem; } .book-page .btn, .book-page button.btn, .book-page a.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0.95rem 1.35rem; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: 1rem; cursor: pointer; text-decoration: none; transition: 0.2s ease; } .book-page .btn:hover, .book-page button.btn:hover, .book-page a.btn:hover { transform: translateY(-1px); } .book-page .btn { background: #2f6f5e; color: #ffffff; } .book-page .btn:hover { background: #225145; color: #ffffff; } .book-page .btn-secondary { background: #ffffff; color: #16312b; border-color: #c7d8d1; } .book-page .btn-secondary:hover { background: #e8f0ec; color: #16312b; } .book-page .microcopy { color: #5a756c; font-size: 0.94rem; } .book-page .card, .book-page .section-card, .book-page .buy-card, .book-page .mini-card, .book-page .final-cta, .book-page .affiliate-support-box { background: #ffffff; border: 1px solid #c7d8d1; border-radius: 20px; box-shadow: 0 10px 30px rgba(24, 46, 39, 0.08); } .book-page .buy-card { position: sticky; top: 92px; padding: 1.6rem; align-self: start; background: linear-gradient(180deg, #ffffff 0%, #f6fbf8 100%); border: 1px solid #c7d8d1; border-radius: 24px; box-shadow: 0 18px 42px rgba(24, 46, 39, 0.10); } .book-page .cover-frame { width: 100%; aspect-ratio: 2 / 3; /* better for book covers */ overflow: hidden; border-radius: 16px; border: 1px solid #d9e5df; box-shadow: 0 12px 28px rgba(24, 46, 39, 0.10); margin-bottom: 1rem; background: #ffffff; } .book-page .cover { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; border: none; margin: 0; border-radius: 0; box-shadow: none; } .book-page .price { font-size: 2.5rem; font-weight: 800; line-height: 1; color: #225145; margin: 1rem 0 0.35rem; letter-spacing: -0.03em; } .book-page .price-note { color: #5a756c; font-size: 0.98rem; margin-bottom: 1.15rem; } .book-page .buy-msg { margin-top: 0.85rem; color: #225145; font-weight: 700; min-height: 1.2em; } .book-page .trust-list { margin: 1.15rem 0 0; padding-left: 1.15rem; } .book-page .trust-list li { margin-bottom: 0.65rem; color: #48655d; line-height: 1.65; } .book-page .section-card { padding: 1.7rem; } .book-page .grid-2, .book-page .grid-3 { display: grid; gap: 1.2rem; margin-top: 1.1rem; } .book-page .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .book-page .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .book-page .mini-card { padding: 1.3rem; height: 100%; } .book-page .mini-card h3 { margin-bottom: 0.55rem; } .book-page .mini-card p { margin-bottom: 0; } .book-page .bullets { margin: 0; padding-left: 1.2rem; } .book-page .bullets li { margin-bottom: 0.75rem; } .book-page .quote { font-size: 1.08rem; color: #16312b; font-weight: 700; margin-bottom: 0.65rem; } .book-page .faq + .faq { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid #d9e5df; } .book-page .faq h3 { margin-bottom: 0.45rem; } .book-page .faq p { margin-bottom: 0; } .book-page .final-cta { padding: 2rem; text-align: center; background: linear-gradient(180deg, #ffffff 0%, #eef6f2 100%); } .book-page .final-cta p { max-width: 46rem; margin: 0 auto 1rem; } .book-page .final-cta .price { margin: 1rem 0 1rem; } .book-page .affiliate-support-box { padding: 1.7rem; background: linear-gradient(180deg, #fffefb 0%, #f7f4ea 100%); } .book-page .affiliate-support-box p:last-child { margin-bottom: 0; } .book-page .affiliate-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.9rem 1.25rem; border-radius: 999px; background: #2f6f5e; color: #ffffff; font-weight: 700; border: 1px solid transparent; transition: 0.2s ease; } .book-page .affiliate-btn:hover { background: #225145; color: #ffffff; transform: translateY(-1px); } .book-page .affiliate-disclosure { margin-top: 1rem; font-size: 0.92rem; color: #5a756c; } .book-page .sticky-mobile-cta { display: none; } @media (max-width: 1024px) { .book-page .hero-grid { grid-template-columns: 1fr 340px; gap: 1.5rem; } .book-page .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .book-page .hero, .book-page .section { padding: 3rem 0; } .book-page .hero-grid, .book-page .grid-2, .book-page .grid-3 { grid-template-columns: 1fr; } .book-page .buy-card { position: static; top: auto; } .book-page .hero-cta-row { flex-direction: column; align-items: stretch; } .book-page .btn, .book-page button.btn, .book-page a.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 1rem 1.45rem; border-radius: 999px; border: 1px solid transparent; font-weight: 800; font-size: 1rem; cursor: pointer; text-decoration: none; transition: 0.2s ease; box-shadow: 0 8px 20px rgba(47, 111, 94, 0.14); } .book-page .sticky-mobile-cta { display: block; position: sticky; bottom: 0; z-index: 60; padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom)); background: rgba(246, 250, 248, 0.96); backdrop-filter: blur(10px); border-top: 1px solid #d7e4de; } .book-page .sticky-mobile-cta .btn { width: 100%; } } @media (max-width: 640px) { .book-page .wrap { width: min(100% - 1.25rem, 1180px); } .book-page h1 { font-size: 2.2rem; } .book-page .section-card, .book-page .buy-card, .book-page .mini-card, .book-page .final-cta, .book-page .affiliate-support-box, .book-page .helps-box, .book-page .highlight-box { padding: 1.2rem; } .book-page .benefit-strip { gap: 0.6rem; } .book-page .pill { width: 100%; justify-content: center; } }