.ss-evidence { margin: 3rem 0 2rem; padding: 2rem 0; background: #FBFAF8; border-top: 1px solid rgba(54, 43, 36, 0.12); border-bottom: 1px solid rgba(54, 43, 36, 0.12); } .ss-evidence__header { max-width: 760px; margin-bottom: 1.25rem; } .ss-evidence__header .eyebrow { margin-bottom: .35rem; color: #116A42; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .ss-evidence__header h2 { margin-bottom: .5rem; color: #362B24; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.1; } .ss-evidence__header p { color: #4F433C; font-size: 1rem; } .ss-evidence-accordion .accordion-item { border: 1px solid rgba(54, 43, 36, 0.14); border-radius: 1rem; overflow: hidden; background: #fff; } .ss-evidence-accordion .accordion-item + .accordion-item { margin-top: .75rem; } .ss-evidence-accordion .accordion-button { color: #362B24; font-weight: 800; background: #fff; } .ss-evidence-accordion .accordion-button:not(.collapsed) { color: #306061; background: #F4F1ED; box-shadow: none; } .ss-evidence-fact { margin-bottom: .75rem; color: #1F1712; font-size: 1rem; line-height: 1.55; } .ss-evidence a { color: #306061; font-weight: 800; text-decoration-thickness: .08em; text-underline-offset: .18em; } .ss-evidence a:hover, .ss-evidence a:focus-visible { color: #116A42; } .evidence-card { padding: 2rem; background: #fff; border: 1px solid rgba(54, 43, 36, 0.14); border-radius: 1rem; } .leo-evidence .eyebrow { margin-bottom: .35rem; color: #116A42; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 0.875rem; } .leo-evidence .source-note { font-style: italic; } .page-success-container { max-width: 1140px; margin: 0 auto; padding: 4rem 1.5rem; } .success-intro { text-align: center; max-width: 800px; margin: 0 auto 4rem; } .success-intro .eyebrow { color: var(--ss-green); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.875rem; margin-bottom: 0.75rem; } .success-intro h1 { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(2.5rem, 5vw, 4rem); color: var(--ss-text); line-height: 1.1; margin-bottom: 1rem; } .success-intro p { font-size: clamp(1.1rem, 2vw, 1.25rem); color: var(--ss-muted); max-width: 600px; margin: 0 auto; } .text-highlight { position: relative; display: inline-block; } .text-highlight::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 6px; height: 25%; background: rgba(17, 106, 66, 0.2); z-index: -1; border-radius: 4px; transform: rotate(-0.5deg); } .success-card-wrapper { margin-bottom: 2rem; } .success-card { display: flex; flex-direction: column; height: 100%; border-radius: 1rem; border: 1px solid var(--card-border-color, rgba(54, 43, 36, 0.14)); background: #FFFFFF; padding: 2rem; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 20px rgba(54, 43, 36, 0.03); } .success-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(54, 43, 36, 0.08); } .success-card__badge { align-self: center; padding: 0.4rem 1.25rem; border-radius: 50px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1.5rem; color: #FFFFFF; background: var(--card-badge-bg); } .success-card__image-wrapper { position: relative; width: 100%; padding-top: 75%; overflow: hidden; border-radius: 0.75rem; margin-bottom: 1.5rem; } .success-card__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .success-card:hover .success-card__image { transform: scale(1.03); } .success-card__quote-mark { font-family: Georgia, serif; font-size: 4rem; line-height: 1; color: var(--quote-color); margin-top: 0.5rem; margin-bottom: -1.25rem; height: 2rem; user-select: none; } .success-card__title { font-size: 1.25rem; font-weight: 700; color: var(--ss-text); margin-bottom: 0.75rem; line-height: 1.3; } .success-card__body { font-size: 1rem; line-height: 1.6; color: var(--ss-muted); margin-bottom: 1.5rem; flex-grow: 1; } .success-card__author { font-size: 0.95rem; font-weight: 600; color: var(--ss-text); border-top: 1px solid rgba(54, 43, 36, 0.08); padding-top: 1rem; margin-top: auto; } .success-card--kids { --card-badge-bg: var(--ss-teal, #289FA1); --card-border-color: rgba(40, 159, 161, 0.25); --quote-color: var(--ss-teal, #289FA1); } .success-card--teens { --card-badge-bg: var(--ss-green, #116A42); --card-border-color: rgba(17, 106, 66, 0.25); --quote-color: var(--ss-green, #116A42); } .success-card--adults { --card-badge-bg: var(--ss-ink, #362B24); --card-border-color: rgba(54, 43, 36, 0.25); --quote-color: var(--ss-ink, #362B24); } :where(.ss-evidence-accordion, .evidence-card, .success-card) { --ss-ease-premium: cubic-bezier(0.32, 0.72, 0, 1); border-color: var(--ss-border, rgba(33, 29, 24, 0.11)); border-radius: clamp(22px, 3vw, 34px); box-shadow: 0 16px 44px rgba(33, 29, 24, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.72); transition: transform 700ms var(--ss-ease-premium), box-shadow 700ms var(--ss-ease-premium), border-color 700ms var(--ss-ease-premium); } .ss-evidence-accordion .accordion-button { border-radius: 999px; transition: transform 650ms var(--ss-ease-premium), background-color 650ms var(--ss-ease-premium), color 650ms var(--ss-ease-premium); }