body.page-parent-resources { background-color: var(--ss-bg, #FBFAF8); color: var(--ss-text, #1F1712); font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; overflow-x: hidden; } .page-parent-resources .pr-main { width: min(100% - 2rem, 76rem); margin-inline: auto; padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 7vw, 6rem); } .page-parent-resources .pr-breadcrumbs, .page-parent-resources .pr-shell { width: min(100%, 68rem); margin-inline: auto; } .page-parent-resources .pr-breadcrumbs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; padding-block: 0.75rem 1.5rem; color: var(--ss-muted, #4F433C); font-size: 0.85rem; text-align: center; } .page-parent-resources .pr-breadcrumbs a { color: var(--ss-muted, #4F433C); text-decoration: none; } .page-parent-resources .pr-breadcrumbs a:hover { color: var(--ss-teal, #289FA1); text-decoration: underline; } .page-parent-resources .pr-hero, .page-parent-resources .pr-section { width: min(100%, 48rem); margin-inline: auto; } .page-parent-resources .pr-hero { padding: clamp(1.75rem, 5vw, 3.5rem); border: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); border-radius: 1.5rem; background: radial-gradient(circle at 85% 15%, rgba(40, 159, 161, 0.08), transparent 45%), radial-gradient(circle at 15% 85%, rgba(139, 82, 46, 0.05), transparent 45%), var(--ss-surface, #FFFFFF); box-shadow: 0 1rem 3rem rgba(54, 43, 36, 0.05); text-align: center; } .page-parent-resources .pr-kicker { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border-radius: 999px; background-color: var(--ss-surface2, #F4F1ED); border: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); color: var(--ss-green, #116A42); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem; } .page-parent-resources .pr-hero h1, .page-parent-resources .pr-section h2 { font-family: 'Instrument Serif', Georgia, serif; color: var(--ss-ink, #362B24); text-align: center; text-wrap: balance; overflow-wrap: break-word; word-break: break-word; } .page-parent-resources .pr-hero h1 { margin-inline: auto; max-width: 22ch; font-size: clamp(2.2rem, 5vw, 3.75rem); line-height: 1.05; font-weight: 400; letter-spacing: -0.015em; margin-bottom: 0.85rem; } .page-parent-resources .pr-section h2 { font-size: clamp(1.85rem, 4vw, 2.75rem); line-height: 1.1; font-weight: 400; margin-bottom: 1.25rem; } .page-parent-resources .pr-hero > p, .page-parent-resources .pr-section > p, .page-parent-resources .faq-item > p { max-width: 68ch; margin-inline: auto; text-align: left; line-height: 1.6; color: var(--ss-muted, #4F433C); } .page-parent-resources .lead-text { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.5; color: var(--ss-text, #1F1712) !important; } .page-parent-resources .pr-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); } .page-parent-resources .pr-section + .pr-section { border-top: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); } .page-parent-resources .pr-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-block: 1.5rem 1rem; } .page-parent-resources .ss-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.65rem 1.4rem; border-radius: 999px; font-size: 0.95rem; font-weight: 700; text-decoration: none; transition: all 0.22s cubic-bezier(0.32, 0.72, 0, 1); cursor: pointer; border: 1px solid transparent; } .page-parent-resources .ss-btn-primary { background-color: var(--ss-green, #116A42); color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(17, 106, 66, 0.25); } .page-parent-resources .ss-btn-primary:hover, .page-parent-resources .ss-btn-primary:focus-visible { background-color: #0d5434; color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(17, 106, 66, 0.35); } .page-parent-resources .ss-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.65rem 1.35rem; border-radius: 9999px; font-weight: 700; font-size: 0.95rem; border: 1px solid var(--ss-border, rgba(54, 43, 36, 0.2)); background: var(--ss-surface, #FFFFFF); color: var(--ss-text, #1F1712) !important; text-decoration: none; box-shadow: 0 2px 6px rgba(54, 43, 36, 0.04); transition: all 0.22s ease; } .page-parent-resources .ss-btn-secondary:hover, .page-parent-resources .ss-btn-secondary:focus-visible { background: var(--ss-surface2, #F4F1ED); border-color: var(--ss-teal, #289FA1); color: var(--ss-ink, #362B24) !important; transform: translateY(-2px); } .page-parent-resources .pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-inline: auto; } .page-parent-resources .pr-link-card { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; gap: 0.5rem; height: 100%; padding: 1.25rem; border: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); border-radius: 1.15rem; background: var(--ss-surface, #FFFFFF); color: inherit; text-align: left; text-decoration: none; box-shadow: 0 4px 12px rgba(54, 43, 36, 0.03); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .page-parent-resources .pr-link-card strong { font-family: 'Lexend', ui-sans-serif, system-ui, sans-serif; font-size: 1rem; color: var(--ss-ink, #362B24); } .page-parent-resources .pr-link-card span { font-size: 0.88rem; color: var(--ss-muted, #4F433C); line-height: 1.45; } .page-parent-resources .pr-link-card:hover { transform: translateY(-3px); border-color: var(--ss-teal, #289FA1); box-shadow: 0 0.75rem 2rem rgba(54, 43, 36, 0.08); } .page-parent-resources .table-responsive { border-radius: 1rem; border: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); overflow: hidden; box-shadow: 0 4px 14px rgba(54, 43, 36, 0.03); margin-block: 1.25rem; } .page-parent-resources .table { margin-bottom: 0; } .page-parent-resources .table thead th { background-color: var(--ss-surface2, #F4F1ED); color: var(--ss-ink, #362B24); font-family: 'Lexend', ui-sans-serif, system-ui, sans-serif; font-weight: 700; padding: 0.85rem 1rem; border-bottom: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); } .page-parent-resources .table tbody th { background-color: rgba(40, 159, 161, 0.04); color: var(--ss-teal, #289FA1); font-family: 'Lexend', ui-sans-serif, system-ui, sans-serif; font-weight: 700; width: 25%; padding: 0.85rem 1rem; border-color: var(--ss-border, rgba(54, 43, 36, 0.1)); } .page-parent-resources .table tbody td { padding: 0.85rem 1rem; color: var(--ss-text, #1F1712); border-color: var(--ss-border, rgba(54, 43, 36, 0.1)); } .page-parent-resources .faq-item { padding-block: 1.25rem; border-top: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); } .page-parent-resources .faq-item h3 { font-family: 'Lexend', ui-sans-serif, system-ui, sans-serif; font-size: 1.08rem; font-weight: 700; color: var(--ss-ink, #362B24); margin-bottom: 0.45rem; text-align: left; } .page-parent-resources .faq-item p { margin-bottom: 0; } .pr-mobile-sticky { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040; display: none; background-color: rgba(251, 250, 248, 0.96); border-top: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); backdrop-filter: blur(12px); gap: 0.75rem; box-shadow: 0 -4px 20px rgba(54, 43, 36, 0.08); } .pr-mobile-sticky .ss-btn { flex: 1; padding: 0.85rem 1rem; font-size: 0.88rem; } @media (max-width: 47.99rem) { body.page-parent-resources { padding-bottom: 5.5rem; } .pr-mobile-sticky { display: flex; } .page-parent-resources .pr-main { width: min(100% - 1.25rem, 76rem); } .page-parent-resources .pr-hero { padding: 1.35rem 1rem; } .page-parent-resources .pr-grid { grid-template-columns: 1fr; } .page-parent-resources .table tbody th { width: 30%; font-size: 0.85rem; } }