body.page-bjj-stretches { background-color: var(--ss-bg, #FBFAF8); color: var(--ss-ink, #362B24); } .ss-stretches-page { --stretch-ink: var(--ss-ink, #362B24); --stretch-muted: var(--ss-muted, #4F433C); --stretch-green: var(--ss-green, #116A42); color: var(--stretch-ink); text-align: center; } .ss-stretches-page > section { width: min(calc(100% - 2rem), 980px); margin-inline: auto; padding-block: clamp(2.5rem, 5vw, 4.5rem); } .ss-stretches-page .ss-hero { padding-top: clamp(3rem, 6vw, 5.5rem); } .ss-stretches-page :where(h1, h2, h3, p) { margin-inline: auto; } .ss-stretches-page h1, .ss-stretches-page h2, .ss-stretches-page h3 { font-family: 'Instrument Serif', Georgia, serif; color: var(--ss-ink, #362B24); line-height: 1.15; } .ss-stretches-page h1 { max-width: 14ch; font-size: clamp(2.5rem, 6.5vw, 4.5rem); margin-bottom: 1rem; } .ss-stretches-page h2 { font-size: clamp(1.85rem, 4vw, 2.75rem); margin-bottom: 1rem; } .ss-stretches-page h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); } .ss-stretches-page .ss-kicker { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ss-green, #116A42); margin-bottom: 0.5rem; } .ss-stretches-page :where(.ss-lede, .ss-section > p, .ss-trust-note) { max-width: 68ch; color: var(--stretch-muted); line-height: 1.65; } .ss-stretches-page .ss-hero-pills, .ss-stretches-page .ss-hero-actions, .ss-stretches-page .ss-cta-row, .ss-stretches-page .ss-resource-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem; } .ss-stretches-page .ss-hero-pills { max-width: 760px; margin: 1.5rem auto; } .ss-stretches-page .ss-hero-pills span { display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; border-radius: 999px; background-color: var(--ss-surface2, #F4F1ED); border: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); color: var(--ss-ink, #362B24); font-size: 0.85rem; font-weight: 600; } .ss-stretches-page .ss-routine-grid, .ss-stretches-page .ss-mini-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; } .ss-stretches-page :where(.ss-routine-card, .ss-mini-list > article, .ss-callout, .ss-warning-box) { padding: clamp(1.15rem, 3vw, 1.75rem); border: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); border-radius: 1.25rem; background: var(--ss-surface, #fff); box-shadow: 0 4px 16px rgba(54, 43, 36, 0.04); text-align: center; } .ss-stretches-page .ss-step { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; 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-weight: 700; font-size: 0.875rem; margin-bottom: 0.5rem; } .ss-stretches-page .ss-why { font-size: 0.875rem; color: var(--ss-green, #116A42); font-weight: 500; margin-top: 0.5rem; } .ss-stretches-page .ss-section--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 1.5rem; align-items: center; } .ss-stretches-page .ss-section--split > * { min-width: 0; } .ss-stretches-page details { max-width: 760px; margin: 0.75rem auto; padding: 1rem 1.25rem; border: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); border-radius: 1rem; background: var(--ss-surface, #fff); box-shadow: 0 2px 8px rgba(54, 43, 36, 0.03); text-align: left; } .ss-stretches-page summary { font-weight: 700; cursor: pointer; color: var(--ss-ink, #362B24); } .ss-stretches-page details p { margin-top: 0.5rem; margin-bottom: 0; color: var(--stretch-muted); } .ss-stretches-page .ss-btn-primary { background: var(--ss-green, #116A42); color: #fff; border-radius: 999px; padding: 0.75rem 1.5rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(17, 106, 66, 0.2); } .ss-stretches-page .ss-btn-primary:hover { background: #0d5434; color: #fff; transform: translateY(-1px); } .ss-stretches-page .ss-btn-secondary { background: var(--ss-surface, #fff); color: var(--ss-ink, #362B24); border: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); border-radius: 999px; padding: 0.75rem 1.5rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .ss-stretches-page .ss-btn-secondary:hover { background: var(--ss-surface2, #F4F1ED); color: var(--ss-ink, #362B24); } .ss-stretches-page .ss-text-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ss-green, #116A42); font-weight: 600; text-decoration: underline; padding: 0.75rem 1rem; } .ss-stretches-page .ss-resource-links a { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: 999px; background-color: var(--ss-surface2, #F4F1ED); border: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); color: var(--ss-ink, #362B24); font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: all 0.2s ease; } .ss-stretches-page .ss-resource-links a:hover { background-color: var(--ss-surface, #fff); color: var(--ss-green, #116A42); border-color: var(--ss-green, #116A42); } @media (max-width: 767.98px) { body.page-bjj-stretches .ss-mobile-sticky { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); background: rgba(251, 250, 248, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); box-shadow: 0 -4px 20px rgba(54, 43, 36, 0.08); } body.page-bjj-stretches .ss-mobile-sticky a { flex: 1; text-align: center; justify-content: center; padding: 0.75rem 1rem; font-size: 0.95rem; font-weight: 700; border-radius: 999px; text-decoration: none; } body.page-bjj-stretches { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } } @media (min-width: 768px) { body.page-bjj-stretches .ss-mobile-sticky { display: none !important; } } @media (max-width: 760px) { .ss-stretches-page > section { width: min(calc(100% - 1.5rem), 620px); } .ss-stretches-page .ss-routine-grid, .ss-stretches-page .ss-mini-list, .ss-stretches-page .ss-section--split { grid-template-columns: 1fr; } }