/* Right Start Site Builder — scoped styles (prefix rsb-). Mobile-first. */ .rsb-body { margin: 0; background: #fff; } .rsb-site { --rsb-green: #98CA4C; --rsb-green-light: #F4FAEC; --rsb-green-mid: #DDF0C4; --rsb-ink: #183008; --rsb-blue: #507FE5; --rsb-blue-deep: #1E4AA8; --rsb-blue-light: #EEF3FD; --rsb-blue-mid: #D3E0F8; --rsb-muted: #3E4F33; --rsb-radius: 18px; --rsb-shadow: 0 6px 24px rgba(24, 48, 8, .10); color: var(--rsb-ink); font-family: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .rsb-site *, .rsb-site *::before, .rsb-site *::after { box-sizing: border-box; } .rsb-site img { max-width: 100%; height: auto; display: block; } .rsb-site p { margin: 0 0 1em; } .rsb-site a { color: var(--rsb-blue-deep); text-underline-offset: 3px; } .rsb-site a:hover { color: var(--rsb-ink); } .rsb-site a:focus-visible, .rsb-site button:focus-visible, .rsb-site summary:focus-visible { outline: 3px solid var(--rsb-blue-deep); outline-offset: 3px; border-radius: 6px; } .rsb-site ul, .rsb-site ol { margin: 0; padding: 0; } .rsb-site .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } .rsb-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .rsb-break { overflow-wrap: anywhere; } .rsb-skip { position: absolute; left: -9999px; top: 0; background: var(--rsb-ink); color: #fff !important; padding: 12px 16px; z-index: 1000; } .rsb-skip:focus { left: 12px; top: 12px; } /* Type */ .rsb-h1 { font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.1; margin: 0 0 .4em; font-weight: 800; letter-spacing: -.02em; color: var(--rsb-ink); } .rsb-h1--page { margin-top: .2em; } .rsb-h2 { font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; color: var(--rsb-ink); } .rsb-h3 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 .4em; font-weight: 800; color: var(--rsb-ink); } .rsb-eyebrow { display: inline-block; font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--rsb-ink); background: var(--rsb-green-mid); border-radius: 999px; padding: 6px 14px; margin-bottom: 1em !important; } .rsb-lead { font-size: 1.15rem; } .rsb-intro { max-width: 760px; font-size: 1.08rem; } .rsb-muted { color: var(--rsb-muted); font-size: .95rem; } .rsb-fineprint { font-size: .9rem; color: var(--rsb-muted); margin-top: 1em; } /* Buttons & links */ .rsb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 26px; border-radius: 999px; font-weight: 800; font-size: 1.05rem; line-height: 1.2; text-decoration: none !important; border: 3px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; text-align: center; } .rsb-btn:hover { transform: translateY(-2px); box-shadow: var(--rsb-shadow); } .rsb-btn--primary { background: var(--rsb-green); color: var(--rsb-ink) !important; border-color: var(--rsb-green); } .rsb-btn--primary:hover { background: #8BBE3E; } .rsb-btn--secondary { background: #fff; color: var(--rsb-blue-deep) !important; border-color: var(--rsb-blue); } .rsb-btn--light { background: transparent; color: #fff !important; border-color: #fff; } .rsb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.2em 0 .6em; } .rsb-actions .rsb-btn { flex: 1 1 100%; } .rsb-actions--center { justify-content: center; } .rsb-link { font-weight: 800; display: inline-flex; min-height: 48px; align-items: center; } .rsb-more { margin-top: 1.2em; } .rsb-big-link { font-size: 1.2rem; font-weight: 800; display: inline-flex; min-height: 48px; align-items: center; } /* Header */ .rsb-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 4px solid var(--rsb-green); box-shadow: 0 2px 10px rgba(0,0,0,.05); } .admin-bar .rsb-header { top: 0; } @media (min-width: 783px) { .admin-bar .rsb-header { top: 32px; } } .rsb-header__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; min-height: 72px; gap: 8px; } .rsb-logo img { width: 168px; height: auto; } .rsb-header__quick { display: flex; align-items: center; gap: 8px; } .rsb-header__join { min-height: 48px; padding: 8px 14px; font-size: .9rem; border-width: 2px; } .rsb-nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); } @media (min-width: 540px) { .rsb-logo img { width: 230px; } .rsb-nav-toggle__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; } } .rsb-nav-toggle { display: none; align-items: center; gap: 10px; min-height: 48px; min-width: 48px; padding: 10px 16px; background: var(--rsb-green-light); color: var(--rsb-ink); border: 2px solid var(--rsb-green); border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; } @media (max-width: 419px) { /* phones: logo, Join, and Menu on one compact row */ .rsb-header__bar { padding-left: 14px; padding-right: 14px; gap: 6px; } .rsb-logo img { width: 148px; } .rsb-header__quick { gap: 6px; } .rsb-header__join { padding: 6px 10px; font-size: .78rem; } .rsb-nav-toggle { padding: 10px 12px; } } @media (max-width: 339px) { .rsb-header__quick .rsb-header__join { display: none; } /* Join stays in the opened menu */ } .rsb-nav-toggle__bars, .rsb-nav-toggle__bars::before, .rsb-nav-toggle__bars::after { display: block; width: 20px; height: 3px; background: var(--rsb-ink); border-radius: 3px; position: relative; content: ""; } .rsb-nav-toggle__bars::before { position: absolute; top: -6px; } .rsb-nav-toggle__bars::after { position: absolute; top: 6px; } .rsb-js .rsb-nav-toggle { display: inline-flex; } .rsb-nav { width: 100%; padding: 8px 0 16px; } .rsb-js .rsb-nav { display: none; } .rsb-js .rsb-nav.is-open { display: block; } .rsb-menu { list-style: none; } .rsb-menu li { list-style: none; position: relative; } .rsb-menu a { display: flex; align-items: center; min-height: 48px; padding: 8px 12px; color: var(--rsb-ink) !important; font-weight: 700; text-decoration: none; border-radius: 12px; } .rsb-menu a:hover, .rsb-menu .current-menu-item > a { background: var(--rsb-green-light); } .rsb-menu .current-menu-item > a { box-shadow: inset 4px 0 0 var(--rsb-green); } .rsb-menu .sub-menu { list-style: none; padding-left: 14px; } .rsb-js .rsb-menu .sub-menu { display: none; } .rsb-js .rsb-menu .is-open > .sub-menu { display: block; } .rsb-sub-toggle { position: absolute; right: 0; top: 0; width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer; border-radius: 12px; } .rsb-sub-toggle::before { content: ""; display: block; margin: 0 auto; width: 10px; height: 10px; border-right: 3px solid var(--rsb-ink); border-bottom: 3px solid var(--rsb-ink); transform: rotate(45deg); } .rsb-sub-toggle[aria-expanded="true"]::before { transform: rotate(-135deg); } .rsb-menu-soon > a::after { content: "Soon"; margin-left: 8px; font-size: .7rem; font-weight: 800; text-transform: uppercase; background: var(--rsb-blue-light); color: var(--rsb-blue-deep); border-radius: 999px; padding: 2px 8px; } .rsb-nav__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .rsb-login { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 18px; border: 2px solid var(--rsb-blue); border-radius: 999px; font-weight: 800; color: var(--rsb-blue-deep) !important; text-decoration: none; } /* Sections */ .rsb-section { padding: 56px 0; } .rsb-tone-white { background: #fff; } .rsb-tone-green { background: var(--rsb-green-light); } .rsb-tone-blue-light { background: var(--rsb-blue-light); } .rsb-tone-blue { background: var(--rsb-blue-deep); color: #fff; } .rsb-tone-blue .rsb-h2 { color: #fff; } .rsb-tone-dark { background: var(--rsb-ink); color: #fff; } .rsb-tone-dark .rsb-h2 { color: #fff; } .rsb-tone-dark a:not(.rsb-btn), .rsb-tone-blue a:not(.rsb-btn) { color: #fff; } /* Hero */ .rsb-hero { position: relative; padding: 36px 0 48px; background: radial-gradient(circle at 92% 8%, rgba(152,202,76,.35) 0 100px, transparent 101px), radial-gradient(circle at 4% 90%, rgba(80,125,225,.24) 0 100px, transparent 101px), linear-gradient(180deg, var(--rsb-green-light), #fff); } .rsb-hero__grid { display: grid; gap: 28px; align-items: center; } .rsb-hero__contact { font-size: .98rem; margin-top: .6em; } .rsb-hero__contact a { font-weight: 800; overflow-wrap: anywhere; } .rsb-hero__media { position: relative; } .rsb-hero__media::before { content: ""; position: absolute; inset: 14px -8px -10px 14px; background: var(--rsb-blue); border-radius: 32px; transform: rotate(2deg); z-index: 0; } .rsb-photo { width: 100%; border-radius: var(--rsb-radius); object-fit: cover; aspect-ratio: 4 / 3; position: relative; z-index: 1; box-shadow: var(--rsb-shadow); } .rsb-photo--hero { border-radius: 28px; aspect-ratio: 3 / 2; } .rsb-photo--placeholder { background: radial-gradient(circle at 25% 35%, #fff 0 34px, transparent 35px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.7) 0 56px, transparent 57px), radial-gradient(circle at 45% 80%, rgba(80,125,225,.45) 0 40px, transparent 41px), linear-gradient(135deg, var(--rsb-green) 0%, #BFE08A 45%, #9DB8F0 100%); } /* Chips & cards */ .rsb-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; } .rsb-chip { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 18px; background: #fff; border: 2px solid var(--rsb-green); border-radius: 999px; color: var(--rsb-ink) !important; font-weight: 700; text-decoration: none; } .rsb-chip:hover { background: var(--rsb-green); } .rsb-cards { list-style: none; display: grid; gap: 16px; } .rsb-card { background: #fff; border-radius: var(--rsb-radius); padding: 22px; box-shadow: var(--rsb-shadow); border-top: 6px solid var(--rsb-green); list-style: none; } .rsb-card--link { padding: 0; } .rsb-card--link a { display: flex; flex-direction: column; gap: 6px; padding: 22px; min-height: 100%; color: var(--rsb-ink) !important; text-decoration: none; border-radius: var(--rsb-radius); } .rsb-card--link a:hover { background: var(--rsb-green-light); } .rsb-card__tag { align-self: flex-start; font-size: .8rem; font-weight: 800; background: var(--rsb-blue-light); color: var(--rsb-blue-deep); border-radius: 999px; padding: 3px 12px; } .rsb-card__title { font-size: 1.2rem; font-weight: 800; } .rsb-card__more { color: var(--rsb-blue-deep); font-weight: 700; font-size: .98rem; } .rsb-two { display: grid; gap: 16px; } /* Benefits */ .rsb-benefits { list-style: none; display: grid; gap: 14px; margin-top: 1.2em; } .rsb-benefit { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 14px; padding: 14px 16px; border: 2px solid var(--rsb-green-mid); list-style: none; } .rsb-benefit__desc { display: block; font-size: .98rem; color: var(--rsb-muted); margin-top: 2px; } .rsb-check { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--rsb-green); position: relative; margin-top: 1px; } .rsb-check::after { content: ""; position: absolute; left: 10px; top: 5px; width: 8px; height: 15px; border-right: 3px solid var(--rsb-ink); border-bottom: 3px solid var(--rsb-ink); transform: rotate(45deg); } .rsb-tone-green .rsb-benefit { border-color: #fff; } /* Ticks list */ .rsb-ticks { list-style: none; display: grid; gap: 10px; margin: .6em 0 1em; } .rsb-ticks li { position: relative; padding-left: 34px; list-style: none; } .rsb-ticks li::before { content: ""; position: absolute; left: 4px; top: .45em; width: 16px; height: 16px; border-radius: 50%; background: var(--rsb-green); box-shadow: 0 0 0 4px var(--rsb-green-mid); } /* Split */ .rsb-split { display: grid; gap: 28px; align-items: center; } /* Steps */ .rsb-steps { list-style: none; counter-reset: rsbstep; display: grid; gap: 16px; margin-top: 1.2em; } .rsb-step { counter-increment: rsbstep; background: #fff; border-radius: var(--rsb-radius); padding: 22px 22px 18px 78px; position: relative; box-shadow: var(--rsb-shadow); list-style: none; } .rsb-step::before { content: counter(rsbstep); position: absolute; left: 20px; top: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--rsb-blue-deep); color: #fff; font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; } .rsb-step p { margin: 0; } /* Quotes */ .rsb-quotes { list-style: none; display: grid; gap: 16px; margin-top: 1em; } .rsb-quote { list-style: none; background: #fff; border-radius: var(--rsb-radius); padding: 24px; box-shadow: var(--rsb-shadow); border-left: 6px solid var(--rsb-blue); } .rsb-quote figure { margin: 0; } .rsb-quote blockquote { margin: 0 0 12px; padding: 0; border: 0; font-size: 1.05rem; font-style: normal; } .rsb-quote blockquote p { margin: 0; } .rsb-quote figcaption { font-size: .95rem; color: var(--rsb-muted); } .rsb-quote figcaption strong { color: var(--rsb-ink); display: block; } /* Insurance */ .rsb-insurance { list-style: none; display: grid; gap: 14px; margin-top: 1em; } .rsb-insurance li { list-style: none; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.35); border-radius: 16px; padding: 18px; } .rsb-insurance strong { display: block; font-size: 1.15rem; margin-bottom: 4px; } /* Contact */ .rsb-contact-cards { list-style: none; display: grid; gap: 16px; margin: 1em 0; } .rsb-hours { margin: 0; } .rsb-hours div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; padding: 6px 0; border-bottom: 1px dashed rgba(24,48,8,.25); } .rsb-hours dt { font-weight: 700; } .rsb-hours dd { margin: 0 0 0 auto; text-align: right; white-space: nowrap; } .rsb-form-grid { display: grid; gap: 24px; } .rsb-form-embed { background: var(--rsb-green-light); border-radius: var(--rsb-radius); padding: 20px; } .rsb-admin-note { background: #FEE7DC; border: 2px dashed #B8431A; color: #3D1405; padding: 12px 14px; border-radius: 12px; font-size: .95rem; } /* Prose & FAQ */ .rsb-prose { max-width: 820px; } .rsb-prose h2 { margin-top: 1.2em; } .rsb-prose > h2:first-child { margin-top: 0; } .rsb-faq { display: grid; gap: 12px; max-width: 860px; } .rsb-faq__item { background: var(--rsb-green-light); border-radius: 14px; padding: 0 18px; border: 2px solid var(--rsb-green-mid); } .rsb-faq__item summary { cursor: pointer; font-weight: 800; min-height: 56px; display: flex; align-items: center; list-style: none; padding: 10px 28px 10px 0; position: relative; } .rsb-faq__item summary::-webkit-details-marker { display: none; } .rsb-faq__item summary::after { content: "+"; position: absolute; right: 0; font-size: 1.5rem; line-height: 1; } .rsb-faq__item[open] summary::after { content: "–"; } .rsb-faq__item p { padding-bottom: 14px; margin: 0; } /* CTA */ .rsb-cta { text-align: center; max-width: 820px; margin: 0 auto; } .rsb-cta .rsb-btn--primary { box-shadow: 0 0 0 4px rgba(152,202,76,.35); } /* Footer */ .rsb-footer { background: var(--rsb-ink); color: #fff; padding: 48px 0 20px; font-size: 1rem; } .rsb-footer a { color: var(--rsb-green-mid); } .rsb-footer a.rsb-btn { color: var(--rsb-ink) !important; } .rsb-footer__grid { display: grid; gap: 28px; } .rsb-footer__logo { width: 230px; margin-bottom: 14px; } .rsb-footer__h { color: #fff; font-size: 1.1rem; margin: 0 0 .6em; font-weight: 800; } .rsb-footer__links { list-style: none; } .rsb-footer__links a { display: inline-flex; min-height: 44px; align-items: center; } .rsb-footer .rsb-hours div { border-color: rgba(255,255,255,.25); } .rsb-footer__base { border-top: 1px solid rgba(255,255,255,.2); margin-top: 28px; padding-top: 16px; font-size: .9rem; } /* ≥ 640px */ @media (min-width: 640px) { .rsb-actions .rsb-btn { flex: 0 0 auto; } .rsb-cards, .rsb-benefits, .rsb-contact-cards, .rsb-insurance, .rsb-two, .rsb-quotes { grid-template-columns: repeat(2, 1fr); } .rsb-benefits--one { grid-template-columns: 1fr; } .rsb-footer__grid { grid-template-columns: repeat(2, 1fr); } } /* ≥ 1024px */ @media (min-width: 1024px) { .rsb-site { font-size: 19px; } .rsb-section { padding: 80px 0; } .rsb-hero { padding: 64px 0 80px; } .rsb-hero__grid { grid-template-columns: 1.05fr 1fr; gap: 56px; } .rsb-split { grid-template-columns: 1.1fr 1fr; gap: 56px; } .rsb-split--rev .rsb-split__media { order: -1; } .rsb-cards { grid-template-columns: repeat(3, 1fr); } .rsb-benefits { grid-template-columns: repeat(3, 1fr); } .rsb-benefits--compact { grid-template-columns: repeat(3, 1fr); } .rsb-benefits--one { grid-template-columns: 1fr; } .rsb-insurance { grid-template-columns: repeat(4, 1fr); } .rsb-contact-cards { grid-template-columns: repeat(2, 1fr); } .rsb-header__quick .rsb-header__join { display: none; } .rsb-quotes { grid-template-columns: repeat(3, 1fr); } .rsb-steps { grid-template-columns: repeat(2, 1fr); } .rsb-form-grid { grid-template-columns: 1.5fr 1fr; align-items: start; } .rsb-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } /* Desktop nav */ .rsb-header__bar { flex-wrap: nowrap; min-height: 84px; } .rsb-logo img { width: 270px; } .rsb-js .rsb-nav-toggle { display: none; } .rsb-nav, .rsb-js .rsb-nav { display: flex; align-items: center; justify-content: flex-end; gap: 14px; width: auto; padding: 0; } .rsb-menu { display: flex; align-items: center; gap: 2px; } .rsb-menu a { padding: 8px 10px; font-size: .95rem; white-space: nowrap; } .rsb-menu .current-menu-item > a { box-shadow: inset 0 -4px 0 var(--rsb-green); } .rsb-sub-toggle { display: none; } .rsb-menu .sub-menu, .rsb-js .rsb-menu .sub-menu { display: block; position: absolute; left: 0; top: 100%; min-width: 290px; background: #fff; border-radius: 14px; box-shadow: var(--rsb-shadow); padding: 8px; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 10; border-top: 4px solid var(--rsb-green); } .rsb-menu li:hover > .sub-menu, .rsb-menu li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: none; } .rsb-menu .sub-menu a { white-space: normal; } .rsb-nav__actions { flex-direction: row; margin: 0; align-items: center; } .rsb-nav__actions .rsb-btn { min-height: 48px; padding: 10px 20px; font-size: 1rem; } .rsb-login { font-size: .95rem; } } @media (min-width: 1024px) and (max-width: 1180px) { .rsb-login { display: none; } } @media (prefers-reduced-motion: reduce) { .rsb-site * { transition: none !important; } .rsb-btn:hover { transform: none; } } /* Page Builder hides body.pb until its JS runs; never let a third-party JS error blank our pages. */ body.rsb-body.pb { opacity: 1 !important; } .rsb-split.rsb-split--solo { grid-template-columns: 1fr; } .rsb-split--solo .rsb-split__text { max-width: 820px; } /* v0.1.5 green + sky-blue balance (matches the logo). Light sections cycle sky, white, green, white; deep-blue bands (insurance, final CTA) and the dark-green footer anchor the page. */ .rsb-main > .rsb-section:is(.rsb-tone-white, .rsb-tone-green, .rsb-tone-blue-light) { background: #fff; --rsb-tint-mid: var(--rsb-blue-mid); } .rsb-main > .rsb-section:is(.rsb-tone-white, .rsb-tone-green, .rsb-tone-blue-light):nth-child(4n+1 of .rsb-section:is(.rsb-tone-white, .rsb-tone-green, .rsb-tone-blue-light)) { background: var(--rsb-blue-light); } .rsb-main > .rsb-section:is(.rsb-tone-white, .rsb-tone-green, .rsb-tone-blue-light):nth-child(4n+3 of .rsb-section:is(.rsb-tone-white, .rsb-tone-green, .rsb-tone-blue-light)) { background: var(--rsb-green-light); --rsb-tint-mid: var(--rsb-green-mid); } .rsb-tone-dark { background: var(--rsb-blue-deep); } .rsb-card { border-top-color: var(--rsb-blue); } .rsb-card--link a:hover { background: var(--rsb-blue-light); } .rsb-chip { border-color: var(--rsb-blue); } .rsb-chip:hover { background: var(--rsb-blue-light); } .rsb-main .rsb-benefit { border-color: var(--rsb-blue-mid); } .rsb-faq__item { background: #fff; border-color: var(--rsb-tint-mid, var(--rsb-blue-mid)); } .rsb-form-embed { background: #fff; border: 2px solid var(--rsb-tint-mid, var(--rsb-blue-mid)); } /* v0.1.6 benefit cards: the original round feature icons from the live homepage (Fable theme glyphs, inline SVG), white line icon on a solid logo-blue or logo-green circle, same colors and mapping as the live page. */ .rsb-bicon { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #507FE5; color: #fff; } .rsb-bicon--green { background: var(--rsb-green); } .rsb-bicon svg { display: block; width: 24px; height: 24px; fill: currentColor; } .rsb-benefit { gap: 16px; } .rsb-benefit:has(> .rsb-bicon) > span:last-child { padding-top: 2px; } .rsb-benefits--compact .rsb-benefit { align-items: center; } .rsb-benefits--compact .rsb-benefit:has(> .rsb-bicon) > span:last-child { padding-top: 0; } /* v0.1.7 home headline (motto since v0.2.6: "You change lives. We handle your billing and admin."): a bit smaller than other heroes, one balanced block per sentence, so each sentence gets its own line at every width. */ .rsb-hero--home .rsb-h1 { font-size: clamp(2rem, 6.2vw, 3rem); } .rsb-hero--home .rsb-h1__s { display: block; text-wrap: balance; } /* v0.1.9 benefit board: grouped outcome cards, "Most asked about"/"Bonus" tags, native You/We expands, filter chips (JS, 700px+) and group accordions on phones. */ .rsb-bcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 2px; } .rsb-bcard__title { font-weight: 800; line-height: 1.3; } .rsb-btag { display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 2px 10px; margin-bottom: 4px; } .rsb-btag--primary { background: var(--rsb-blue-light); color: var(--rsb-blue-deep); } .rsb-btag--bonus { background: var(--rsb-green-mid); color: var(--rsb-ink); } .rsb-main .rsb-bcard--primary { border-color: var(--rsb-blue); box-shadow: 0 4px 14px rgba(80,125,225,.14); } .rsb-main .rsb-bcard--bonus { border-style: dashed; border-color: var(--rsb-green); background: var(--rsb-green-light); } .rsb-benefits--compact .rsb-bcard__body { padding-top: 0; } .rsb-fchip:focus-visible, .rsb-bgroup__sum:focus-visible { outline: 3px solid var(--rsb-blue); outline-offset: 2px; } .rsb-fchips { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 4px; } .rsb-fchips[hidden] { display: none; } .rsb-fchip { font: inherit; font-size: .98rem; font-weight: 700; min-height: 44px; padding: 8px 18px; border-radius: 999px; background: #fff; color: var(--rsb-ink); border: 1.5px solid #C9D3BE; cursor: pointer; } .rsb-fchip:hover { border-color: var(--rsb-ink); } .rsb-fchip[aria-pressed="true"] { background: var(--rsb-ink); color: #fff; border-color: var(--rsb-ink); } .rsb-bgroup { margin-top: 24px; } .rsb-bgroup[hidden] { display: none; } .rsb-bgroup__sum { display: flex; align-items: center; gap: 10px; list-style: none; } .rsb-bgroup__sum::-webkit-details-marker { display: none; } .rsb-bgroup__title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--rsb-ink); } .rsb-bgroup__count { display: none; } .rsb-bgroup .rsb-bgrid { margin-top: 10px; } .rsb-bboard__cta { margin-top: 26px; } @keyframes rsb-fade { from { opacity: 0; } to { opacity: 1; } } .rsb-fade { animation: rsb-fade .18s ease-out; } @media (min-width: 700px) { .rsb-bgroup__sum { pointer-events: none; } } @media (max-width: 699px) { .rsb-fchips { display: none !important; } .rsb-bgroup { margin-top: 10px; border: 2px solid var(--rsb-blue-mid); border-radius: 14px; background: #fff; } .rsb-bgroup__sum { min-height: 56px; padding: 10px 16px; cursor: pointer; border-radius: 12px; } .rsb-bgroup__sum::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin: 0 4px 4px 6px; border-right: 2px solid var(--rsb-ink); border-bottom: 2px solid var(--rsb-ink); transform: rotate(45deg); } .rsb-bgroup[open] > .rsb-bgroup__sum::after { margin-bottom: -4px; transform: rotate(-135deg); } .rsb-bgroup__count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; margin-left: auto; border-radius: 999px; background: var(--rsb-green-mid); color: var(--rsb-ink); font-size: .9rem; font-weight: 800; } .rsb-bgroup .rsb-bgrid { margin-top: 0; padding: 0 10px 12px; } } @media (prefers-reduced-motion: reduce) { .rsb-fade { animation: none; } } /* v0.1.13: disciplines are anchored cards on Join (#slp, #ot, ...); keep anchor targets clear of the sticky header. */ .rsb-section[id], .rsb-disc, .rsb-hero[id] { scroll-margin-top: 96px; } .rsb-disc { display: flex; flex-direction: column; gap: 8px; } .rsb-disc .rsb-h3 { margin: 2px 0 0; } .rsb-disc p { margin: 0; } .rsb-disc__fit { font-size: .95rem; color: var(--rsb-muted, #4a5563); } .rsb-disc:target { box-shadow: 0 0 0 3px var(--rsb-green), var(--rsb-shadow); } /* v0.1.15 Resources hub + guides: compact hero, visible breadcrumb, narrow reading column, phone-first. */ .rsb-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0 0 14px; padding: 0; font-size: .92rem; } .rsb-crumbs li { min-width: 0; overflow-wrap: anywhere; } .rsb-crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--rsb-ink); opacity: .6; } .rsb-crumbs a { font-weight: 700; } .rsb-crumbs [aria-current] { color: var(--rsb-ink); opacity: .85; } .rsb-hero--guide { padding: 24px 0 36px; } .rsb-hero--guide .rsb-h1 { font-size: clamp(1.8rem, 6vw, 2.7rem); text-wrap: balance; } .rsb-hero--guide .rsb-lead { font-size: 1.08rem; } .rsb-hero--guide .rsb-hero__media { max-width: 520px; } .rsb-guide__head { max-width: 760px; } .rsb-guide__checked { font-size: .92rem; margin: .4em 0 0; opacity: .85; } .rsb-guide__body { max-width: 760px; } .rsb-guide__body > .rsb-h2 { font-size: clamp(1.4rem, 4.6vw, 1.9rem); margin-top: 1.6em; } .rsb-guide__body > .rsb-h2:first-child { margin-top: 0; } .rsb-guide__body p, .rsb-guide__body li { overflow-wrap: anywhere; } .rsb-guide__ul, .rsb-guide__ol { margin: 0 0 1em; padding-left: 1.3em; } .rsb-guide__ul li, .rsb-guide__ol li { margin-bottom: .6em; } .rsb-guide__ol li::marker { font-weight: 800; color: var(--rsb-blue-deep); } .rsb-glance { display: grid; gap: 16px; margin: 4px 0 12px; } .rsb-glance__card { padding: 20px; } .rsb-glance__card .rsb-ticks { margin: 0; } .rsb-callout { margin: 32px 0 24px; padding: 20px 22px; border-radius: var(--rsb-radius); background: var(--rsb-green-light); border-left: 6px solid var(--rsb-green); } .rsb-callout p { margin: 0; } .rsb-callout .rsb-link { min-height: 0; display: inline; } .rsb-guide__note { font-size: .95rem; font-style: italic; } .rsb-sources { margin-top: 24px; padding: 20px 22px; border-radius: var(--rsb-radius); background: #fff; border: 2px solid var(--rsb-blue-mid); font-size: .95rem; } .rsb-sources ul { margin: 0 0 .6em; padding-left: 1.2em; } .rsb-sources li { margin-bottom: .5em; overflow-wrap: anywhere; } .rsb-sources p { margin: 0; } .rsb-hub { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .rsb-hub__card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px; } .rsb-hub__card .rsb-h3 { margin: 0; } .rsb-hub__card .rsb-h3 a { color: var(--rsb-ink); text-decoration: none; } .rsb-hub__card .rsb-h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .rsb-hub__card:hover { border-color: var(--rsb-blue); } .rsb-hub__card:focus-within { outline: 3px solid var(--rsb-blue); outline-offset: 2px; } .rsb-hub__card p { margin: 0; } .rsb-hub__card .rsb-link { min-height: 36px; margin-top: auto; } .rsb-linklist { list-style: none; margin: 0; padding: 0; } @media (min-width: 700px) { .rsb-glance { grid-template-columns: 1fr 1fr; } .rsb-hub { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .rsb-hero--guide { padding: 40px 0 52px; } .rsb-hero--guide .rsb-hero__grid { grid-template-columns: 1.3fr 1fr; gap: 48px; } } /* v0.1.16 Home "What sets Right Start apart" strip: compact row right below the hero (5 across on desktop, 2 on tablets, a tight list on phones). */ .rsb-edge-section { padding: 28px 0 32px; } .rsb-edge__title { font-size: clamp(1.25rem, 3.6vw, 1.5rem); font-weight: 800; margin: 0 0 14px; color: var(--rsb-ink); } .rsb-edge { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .rsb-edge__item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: #fff; border: 2px solid var(--rsb-blue-mid); border-radius: 14px; min-width: 0; } .rsb-edge__item .rsb-bicon { flex-basis: 42px; width: 42px; height: 42px; } .rsb-edge__item .rsb-bicon svg { width: 20px; height: 20px; } .rsb-edge__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rsb-edge__name { font-weight: 800; line-height: 1.25; } .rsb-edge__desc { font-size: .95rem; line-height: 1.4; } .rsb-edge__more { margin: 10px 0 0; } @media (min-width: 700px) { .rsb-edge { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .rsb-edge { grid-template-columns: repeat(5, 1fr); } .rsb-edge__item { flex-direction: column; gap: 8px; } } /* v0.1.16 Join application path. */ .rsb-apply { display: grid; gap: 22px; margin-top: 1em; } .rsb-apply__list { margin: 0; padding-left: 1.2em; } .rsb-apply__list > li { margin-bottom: .8em; overflow-wrap: anywhere; } .rsb-apply__status { margin: .4em 0 0; padding-left: 1.1em; list-style: disc; } .rsb-apply__status li { margin-bottom: .3em; } .rsb-apply__note { margin: .6em 0 0; font-size: .95rem; } .rsb-numsteps { list-style: none; counter-reset: rsbnum; margin: 0; padding: 0; display: grid; gap: 12px; } .rsb-numsteps > li { counter-increment: rsbnum; position: relative; background: #fff; border-radius: var(--rsb-radius); box-shadow: var(--rsb-shadow); padding: 16px 18px 14px 70px; } .rsb-numsteps > li::before { content: counter(rsbnum); position: absolute; left: 16px; top: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--rsb-blue-deep); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; } .rsb-numsteps .rsb-h3 { margin: 0 0 .25em; font-size: 1.1rem; } .rsb-numsteps p { margin: 0; overflow-wrap: anywhere; } .rsb-apply__steps .rsb-actions { margin-top: 18px; } @media (min-width: 1024px) { .rsb-apply { grid-template-columns: 1fr 1.25fr; align-items: start; } } /* v0.1.16 Stay Independent: "Stays yours" vs "Right Start takes over". */ .rsb-split { display: grid; gap: 18px; margin-top: 1em; } .rsb-split__list { margin: 0; padding-left: 1.2em; } .rsb-split__list li { margin-bottom: .8em; overflow-wrap: anywhere; } .rsb-split__col--ours { border-top-color: var(--rsb-green); } @media (min-width: 900px) { .rsb-split { grid-template-columns: 1fr 1fr; } } /* v0.1.16: beat the ".rsb-site ul/ol" reset for content lists. */ .rsb-site .rsb-guide__ul, .rsb-site .rsb-guide__ol { padding-left: 1.3em; } .rsb-site .rsb-sources ul { padding-left: 1.2em; } .rsb-site .rsb-apply__list, .rsb-site .rsb-split__list { padding-left: 1.2em; } .rsb-site .rsb-apply__status { padding-left: 1.3em; margin-top: .4em; list-style: circle; } .rsb-edge__more .rsb-link { display: inline; } /* v0.1.17: pay-schedule card is a link target (Join, Stay Independent). */ .rsb-bcard[id] { scroll-margin-top: 96px; } /* ================================================================================================== v0.2.0 Direction A (photo-led), approved by Taso. Bolder type, solid color bands, full-width photos. Contrast rule: dark ink (#183008) on leaf green (#98CA4C), never white text on green. ================================================================================================== */ .rsb-site { --rsb-orange: #F66D39; --rsb-orange-light: #FEE7DC; --rsb-teal: #24B1C8; --rsb-purple: #943CCE; --rsb-green-deep: #3A580E; --rsb-sky: #DCE7FA; --rsb-green-ink: #4F7D14; font-size: 18px; } @media (min-width: 1024px) { .rsb-site { font-size: 18px; } } .rsb-h1 { font-size: clamp(30px, 7.6vw, 52px); font-weight: 900; line-height: 1.08; } .rsb-h2 { font-size: clamp(28px, 4.2vw, 44px); font-weight: 900; line-height: 1.12; } .rsb-h3 { font-weight: 800; } .rsb-hl { color: var(--rsb-green-ink); } .rsb-hl--blue { color: var(--rsb-blue-deep); } .rsb-lead { font-size: 1.1rem; } .rsb-eyebrow { font-weight: 900; letter-spacing: .1em; } .rsb-eyebrow--white { background: #fff; } @media (max-width: 600px) { .rsb-eyebrow { font-size: .72rem; letter-spacing: .07em; padding: 5px 12px; border-radius: 12px; } } /* Buttons: ink (on green), outline (ink border, on green), white (on green/blue). */ .rsb-btn--ink { background: var(--rsb-ink); color: #fff !important; border-color: var(--rsb-ink); } .rsb-btn--ink:hover { background: #0E1F04; color: #fff !important; } .rsb-btn--outline { background: transparent; color: var(--rsb-ink) !important; border-color: var(--rsb-ink); } .rsb-btn--outline:hover { background: rgba(255,255,255,.35); color: var(--rsb-ink) !important; } .rsb-btn--white { background: #fff; color: var(--rsb-blue-deep) !important; border-color: #fff; } .rsb-btn--white:hover { color: var(--rsb-ink) !important; } .rsb-btag--ink { background: var(--rsb-ink); color: #fff; } .rsb-bicon--green { color: var(--rsb-ink); } /* ink glyph on the green circle (contrast) */ /* Site-wide green utility bar (scrolls away; the white header stays sticky). */ .rsb-topbar { background: var(--rsb-green); color: var(--rsb-ink); font-size: .85rem; font-weight: 800; } .rsb-topbar__bar { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 38px; } .rsb-topbar__tag { display: none; } .rsb-site .rsb-topbar a { color: var(--rsb-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 38px; } .rsb-site .rsb-topbar a:hover { text-decoration: underline; } @media (min-width: 760px) { .rsb-topbar__tag { display: inline; } .rsb-topbar__bar { justify-content: space-between; } } .rsb-header { border-bottom: 0; box-shadow: 0 2px 0 rgba(24,48,8,.08); } /* New section tones (outside the v0.1.5 light-tone cycle). */ .rsb-tone-plain { background: #fff; } .rsb-tone-sky { background: var(--rsb-sky); } .rsb-tone-mint { background: var(--rsb-green-light); } .rsb-tone-forest { background: var(--rsb-green-deep); color: #fff; } .rsb-tone-forest .rsb-h2 { color: #fff; } .rsb-tone-forest a:not(.rsb-btn) { color: #fff; } /* Photo resets for full-bleed images. */ .rsb-site .rsb-hero__img, .rsb-site .rsb-pay__img, .rsb-site .rsb-cta-photo__img, .rsb-site .rsb-bphoto__img, .rsb-site .rsb-m__img { width: 100%; height: 100%; max-width: none; object-fit: cover; aspect-ratio: auto; border-radius: 0; box-shadow: none; } /* --- Home hero: full-width photo + overlapping leaf-green card --- */ .rsb-hero--photo { padding: 0 0 32px; background: var(--rsb-green-light); } .rsb-hero__photo { height: 300px; overflow: hidden; background: var(--rsb-green-mid); } .rsb-site .rsb-hero__img { object-position: 42% 30%; } .rsb-hero__inner { position: relative; } .rsb-hero__card { position: relative; background: var(--rsb-green); color: var(--rsb-ink); border-radius: 22px; padding: 24px 18px 26px; margin-top: -40px; box-shadow: 0 12px 32px rgba(24,48,8,.18); } .rsb-hero--photo .rsb-h1 { font-size: clamp(26px, 8vw, 52px); margin: 0 0 .35em; } /* v0.2.6: 26px floor keeps "You change lives." on one line down to 320px */ .rsb-hero--photo .rsb-h1__s { display: block; } .rsb-hero--photo .rsb-lead { font-weight: 600; } .rsb-site .rsb-hero--photo .rsb-hero__contact a { color: var(--rsb-ink); } .rsb-hero--photo .rsb-actions { margin-top: .8em; } .rsb-hero__dot { display: none; } @media (min-width: 900px) { .rsb-hero--photo { padding-bottom: 56px; } .rsb-hero__photo { height: 580px; } .rsb-site .rsb-hero__img { object-position: 50% 30%; } /* v0.2.6: the longer motto needs the full card width for one sentence per line, so the headline sits on top and the lead (left) and buttons + contact (right) share the row below it. */ .rsb-hero__card { margin-top: -130px; padding: 40px 44px 36px; } .rsb-hero__head { margin-bottom: 24px; } .rsb-hero--photo .rsb-h1 { font-size: clamp(40px, 4.1vw, 52px); margin: 0; } .rsb-hero--photo .rsb-h1__s { white-space: nowrap; } .rsb-hero__body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; align-items: start; } .rsb-hero__body .rsb-lead { grid-column: 1; grid-row: 1 / span 2; margin: 0; } .rsb-hero__body .rsb-actions { grid-column: 2; margin-top: 4px; } .rsb-hero__body .rsb-hero__contact { grid-column: 2; } .rsb-hero__dot { display: block; position: absolute; right: 36px; bottom: -34px; width: 84px; height: 84px; border-radius: 50%; background: var(--rsb-orange); box-shadow: 0 10px 24px rgba(24,48,8,.18); } } @media (min-width: 1600px) { .rsb-hero__photo { height: 660px; } } /* --- "What sets Right Start apart": solid color tiles --- */ .rsb-edge-section { padding: 44px 0 40px; } .rsb-edge__title { margin: 0 0 18px; } .rsb-edge { gap: 12px; } .rsb-edge__item { border: 0; border-radius: 20px; padding: 16px 16px 12px; gap: 14px; } .rsb-edge__item .rsb-bicon { background: #fff; color: var(--rsb-blue-deep); flex-basis: 48px; width: 48px; height: 48px; } .rsb-edge__item .rsb-bicon svg { width: 24px; height: 24px; } .rsb-edge__name { font-size: 1.08rem; } .rsb-edge__desc { font-size: .95rem; } .rsb-tile--blue { background: var(--rsb-blue-deep); color: #fff; } .rsb-tile--green { background: var(--rsb-green); color: var(--rsb-ink); } .rsb-tile--green .rsb-bicon { color: var(--rsb-ink); } .rsb-tile--orange { background: var(--rsb-orange); color: var(--rsb-ink); } .rsb-tile--white { background: #fff; color: var(--rsb-ink); } .rsb-tile--white .rsb-bicon { background: var(--rsb-blue-deep); color: #fff; } .rsb-tile--teal { background: var(--rsb-teal); color: var(--rsb-ink); } .rsb-tile--teal .rsb-bicon { color: #0F6F80; } .rsb-edge__more { margin-top: 18px; font-size: 1.05rem; } @media (min-width: 620px) { .rsb-edge { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .rsb-edge { grid-template-columns: repeat(5, 1fr); gap: 14px; } .rsb-edge__item { flex-direction: column; padding: 22px 18px 16px; gap: 12px; } .rsb-edge__item .rsb-bicon { flex-basis: 64px; width: 64px; height: 64px; } .rsb-edge__item .rsb-bicon svg { width: 30px; height: 30px; } } /* --- Getting paid split (#rsb-pay-schedule) --- */ .rsb-pay { padding: 0; display: grid; background: var(--rsb-green); color: var(--rsb-ink); } .rsb-pay__photo { position: relative; min-height: 260px; overflow: hidden; background: var(--rsb-green-mid); } .rsb-site .rsb-pay__img { position: absolute; inset: 0; object-position: 72% 40%; } .rsb-pay__panel { padding: 36px 20px 40px; scroll-margin-top: 96px; } .rsb-pay__tags { margin: 0 0 14px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rsb-pay__tags .rsb-eyebrow { margin: 0 !important; } .rsb-pay__tags .rsb-btag { margin: 0; } .rsb-pay__title { font-size: clamp(30px, 4.6vw, 50px); margin-bottom: .3em; } .rsb-pay__sub { font-size: 1.2rem; font-weight: 800; } .rsb-site .rsb-pay__more { grid-template-columns: 1fr; margin: 0 0 8px; } .rsb-site .rsb-pay__more .rsb-benefit { background: rgba(255,255,255,.6); border-color: transparent; } .rsb-site .rsb-pay__more .rsb-benefit__desc { color: var(--rsb-ink); } @media (min-width: 900px) { .rsb-pay { grid-template-columns: 1fr 1fr; min-height: 620px; } .rsb-pay__panel { padding: 64px max(20px, calc((100vw - 1200px) / 2 + 20px)) 64px 56px; display: flex; flex-direction: column; justify-content: center; } .rsb-pay__panel > * { max-width: 580px; } } /* --- Detail band (deep blue) --- */ .rsb-band-section { padding: 40px 0; } .rsb-band { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; } .rsb-band__item { list-style: none; border-left: 4px solid var(--rsb-green); padding-left: 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rsb-band__big { font-size: clamp(24px, 3vw, 34px); font-weight: 900; line-height: 1.1; color: #fff; } .rsb-band__lbl { font-size: .95rem; font-weight: 700; line-height: 1.35; } @media (min-width: 900px) { .rsb-band { grid-template-columns: repeat(5, 1fr); } } /* --- Benefits: photo + icon rows --- */ .rsb-bhead { max-width: 780px; margin-bottom: 26px; } .rsb-bphoto { display: grid; gap: 28px; } .rsb-bphoto__media { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--rsb-shadow); } .rsb-bphoto__media::after { content: ""; position: absolute; right: 0; bottom: 0; width: 40%; height: 18px; background: var(--rsb-orange); border-top-left-radius: 18px; } .rsb-bcol + .rsb-bcol { margin-top: 22px; } .rsb-bcol__title { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rsb-blue-deep); font-weight: 900; margin: 4px 0 12px; } .rsb-site .rsb-bcol .rsb-bgrid { margin-top: 0; grid-template-columns: 1fr; gap: 12px; } .rsb-site .rsb-bcol .rsb-benefit { border: 0; background: var(--rsb-blue-light); border-radius: 16px; } .rsb-site .rsb-bcol .rsb-benefit:nth-child(even) { background: var(--rsb-green-light); } .rsb-site .rsb-bcol .rsb-bcard--bonus { background: var(--rsb-orange-light); border: 2px dashed var(--rsb-green); } .rsb-bcol .rsb-btag--bonus { background: var(--rsb-orange); } @media (min-width: 640px) { .rsb-site .rsb-bcol .rsb-bgrid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .rsb-bphoto { grid-template-columns: 5fr 7fr; align-items: start; gap: 40px; } .rsb-bphoto__media { position: sticky; top: 110px; aspect-ratio: 4 / 5; } .rsb-site .rsb-bcol .rsb-bgrid { grid-template-columns: repeat(2, 1fr); } } /* --- Insurance: deep-green band, white chips --- */ .rsb-tone-forest .rsb-insurance li { background: #fff; border: 0; box-shadow: 0 4px 0 rgba(24,48,8,.12); color: var(--rsb-ink); } /* --- Steps: numbered circles in brand colors (Home steps and Join's numbered steps) --- */ .rsb-step::before, .rsb-numsteps > li::before { font-weight: 900; } .rsb-step:nth-child(4n+2)::before, .rsb-numsteps > li:nth-child(4n+2)::before { background: var(--rsb-green); color: var(--rsb-ink); } .rsb-step:nth-child(4n+3)::before, .rsb-numsteps > li:nth-child(4n+3)::before { background: var(--rsb-orange); color: var(--rsb-ink); } .rsb-step:nth-child(4n+4)::before, .rsb-numsteps > li:nth-child(4n+4)::before { background: var(--rsb-purple); color: #fff; } .rsb-tone-plain .rsb-step { box-shadow: none; border: 3px solid var(--rsb-sky); } @media (min-width: 1024px) { .rsb-tone-plain .rsb-steps { grid-template-columns: repeat(4, 1fr); } .rsb-tone-plain .rsb-step { padding: 84px 20px 22px; } .rsb-tone-plain .rsb-step::before { width: 50px; height: 50px; font-size: 1.4rem; } } /* --- Discipline mosaic --- */ .rsb-mosaic { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; } .rsb-m { list-style: none; min-width: 0; } .rsb-site .rsb-m > a { position: relative; display: flex; height: 100%; min-height: 150px; border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--rsb-ink); } .rsb-m--photo > a { align-items: flex-end; background: var(--rsb-green-mid); } .rsb-site .rsb-m__img { position: absolute; inset: 0; transition: transform .3s ease; } .rsb-m--photo > a:hover .rsb-m__img { transform: scale(1.04); } .rsb-m__lbl { position: relative; margin: 10px; background: #fff; color: var(--rsb-ink); border-radius: 10px; padding: 6px 10px; font-weight: 900; font-size: .88rem; line-height: 1.25; } .rsb-m--big { grid-column: span 2; } .rsb-site .rsb-m--color > a { flex-direction: column; justify-content: space-between; padding: 14px; gap: 10px; } .rsb-m--color .rsb-m__lbl { margin: 0; padding: 0; background: none; color: inherit; font-size: 1rem; } .rsb-m__ico { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--rsb-blue-deep); display: flex; align-items: center; justify-content: center; } .rsb-m__ico svg { width: 22px; height: 22px; } .rsb-site .rsb-m--blue > a { background: var(--rsb-blue-deep); color: #fff; } .rsb-site .rsb-m--orange > a { background: var(--rsb-orange); color: var(--rsb-ink); } .rsb-site .rsb-m--green > a { background: var(--rsb-green); color: var(--rsb-ink); } .rsb-site .rsb-m--purple > a { background: var(--rsb-purple); color: #fff; } .rsb-m--purple .rsb-m__ico { color: var(--rsb-purple); } .rsb-site .rsb-m > a:hover .rsb-m__lbl { text-decoration: underline; } @media (min-width: 900px) { .rsb-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 14px; } .rsb-m--big { grid-row: span 2; } .rsb-site .rsb-m > a { min-height: 0; } .rsb-m__lbl { font-size: .95rem; } .rsb-m--color .rsb-m__lbl { font-size: 1.05rem; } } /* --- Testimonials: color-topped cards; swipe row on phones --- */ .rsb-quote { border-left: 0; border-top: 8px solid var(--rsb-blue-deep); background: var(--rsb-blue-light); box-shadow: none; } .rsb-quote:nth-child(5n+2) { background: var(--rsb-green-light); border-top-color: var(--rsb-green); } .rsb-quote:nth-child(5n+3) { background: var(--rsb-orange-light); border-top-color: var(--rsb-orange); } .rsb-quote:nth-child(5n+4) { background: var(--rsb-green-light); border-top-color: var(--rsb-green); } .rsb-quote blockquote { font-weight: 600; } .rsb-swipe { display: none; } @media (max-width: 759px) { .rsb-site .rsb-quotes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; overscroll-behavior-x: contain; } .rsb-quote { scroll-snap-align: start; } .rsb-swipe { display: inline; } } @media (min-width: 1024px) { .rsb-quote:first-child { grid-column: span 2; } .rsb-quote:first-child blockquote { font-size: 1.25rem; } } /* --- Home closing CTA over the park photo --- */ .rsb-cta-photo { padding: 0; position: relative; background: var(--rsb-blue-deep); } .rsb-cta-photo__media { height: 260px; overflow: hidden; } .rsb-site .rsb-cta-photo__img { object-position: 20% 50%; } .rsb-cta--card { color: #fff; text-align: left; max-width: none; padding: 32px 0 44px; } .rsb-cta--card .rsb-h2 { color: #fff; } .rsb-site .rsb-cta--card a:not(.rsb-btn) { color: #fff; font-weight: 800; } .rsb-cta--card .rsb-actions--center { justify-content: flex-start; } @media (min-width: 900px) { .rsb-cta-photo__media { height: 600px; } .rsb-cta-photo__wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; } .rsb-cta--card { pointer-events: auto; max-width: 540px; margin: 0; padding: 40px; border-radius: 26px; background: var(--rsb-blue-deep); box-shadow: 0 16px 40px rgba(0,0,0,.25); } } /* --- Carry the look to the other pages: solid leaf-green heroes (dark ink), logo-orange accent, stronger bands --- */ .rsb-hero:not(.rsb-hero--photo) { background: var(--rsb-green); color: var(--rsb-ink); } .rsb-hero:not(.rsb-hero--photo) .rsb-eyebrow { background: #fff; } .rsb-site .rsb-hero:not(.rsb-hero--photo) a:not(.rsb-btn) { color: var(--rsb-ink); } .rsb-hero:not(.rsb-hero--photo) .rsb-btn--primary { background: var(--rsb-ink); color: #fff !important; border-color: var(--rsb-ink); } .rsb-hero:not(.rsb-hero--photo) .rsb-btn--secondary { border-color: #fff; } .rsb-hero__media::before { background: var(--rsb-orange); } .rsb-hero:not(.rsb-hero--photo) .rsb-crumbs li + li::before { opacity: .8; } .rsb-card { border-top-width: 8px; } .rsb-tone-dark { background: var(--rsb-blue-deep); } .rsb-tone-dark .rsb-cta .rsb-h2 { font-size: clamp(28px, 4vw, 42px); } .rsb-callout { border-left-width: 8px; } /* --- Footer --- */ .rsb-footer__h { color: var(--rsb-green); text-transform: uppercase; letter-spacing: .1em; font-size: .9rem; font-weight: 900; } /* v0.2.0: keep cards above the full-bleed photos (.rsb-photo carries z-index:1). */ .rsb-hero__card { z-index: 2; } .rsb-cta-photo__wrap { position: relative; z-index: 2; } @media (min-width: 900px) { .rsb-cta-photo__wrap { position: absolute; } } .rsb-m__lbl, .rsb-m__ico { z-index: 2; } /* v0.2.1: Taso's hero photo (: phones get their own crop). v0.2.7 (Taso: "we can't see the baby or her toys"): both crops now come from the wide photo and include the rug and floor toys; the photo box is taller and the blue card overlaps less, so all three heads, the girl, her toy and the floor toys sit above the card at every width. Phones (<760px): 840x732 crop in a box of the same aspect ratio (no extra cropping). 760-899px: 420px tall. 900px+: 580-900px tall (36vw). */ .rsb-picture { display: contents; } .rsb-hero__photo { height: auto; aspect-ratio: 840 / 590; } /* v0.3.0: crops end mid toy house / bucket, the card covers the rest */ .rsb-site .rsb-hero__img { object-position: 50% 50%; } .rsb-hero__card { margin-top: -32px; } @media (min-width: 760px) { .rsb-hero__photo { aspect-ratio: auto; height: 420px; } } @media (min-width: 900px) { .rsb-hero__photo { height: clamp(580px, 36vw, 900px); } .rsb-hero__card { margin-top: -72px; } } /* ========================================================================== v0.2.2 (Taso: "instead of green let's use blue with white letters") Primary blocks move from leaf green + ink text to deep logo blue #1E4AA8 + white text (8.1:1). Green stays as a small accent (icons, checks, a few tiles, highlight words #4F7D14 on white). The detail band moves to deep green #3A580E so it doesn't blur into the blue pay panel. ========================================================================== */ .rsb-site { --rsb-blue-darker: #183B85; } /* Primary buttons: blue with white text; secondary stays white with a blue outline. */ .rsb-btn--primary { background: var(--rsb-blue-deep); color: #fff !important; border-color: var(--rsb-blue-deep); } .rsb-btn--primary:hover { background: var(--rsb-blue-darker); border-color: var(--rsb-blue-darker); color: #fff !important; } .rsb-btn--secondary { background: #fff; color: var(--rsb-blue-deep) !important; border-color: var(--rsb-blue-deep); } .rsb-btn--secondary:hover { color: var(--rsb-blue-darker) !important; } /* Utility bar */ .rsb-topbar { background: var(--rsb-blue-deep); color: #fff; } .rsb-site .rsb-topbar a, .rsb-site .rsb-topbar a:hover { color: #fff; } /* Blue blocks: Home hero card, inner-page heroes, pay panel. */ .rsb-hero__card, .rsb-hero:not(.rsb-hero--photo), .rsb-pay { background: var(--rsb-blue-deep); color: #fff; } .rsb-hero__card .rsb-h1, .rsb-hero__card .rsb-lead, .rsb-hero__card p, .rsb-hero:not(.rsb-hero--photo) .rsb-h1, .rsb-hero:not(.rsb-hero--photo) .rsb-lead, .rsb-hero:not(.rsb-hero--photo) p, .rsb-pay .rsb-h2, .rsb-pay__sub, .rsb-pay__panel > p { color: #fff; } .rsb-hero__card .rsb-eyebrow, .rsb-hero:not(.rsb-hero--photo) .rsb-eyebrow, .rsb-pay .rsb-eyebrow { background: #fff; color: var(--rsb-blue-deep); } .rsb-hero__card .rsb-hl, .rsb-hero:not(.rsb-hero--photo) .rsb-hl, .rsb-pay .rsb-hl { color: #fff; } .rsb-site .rsb-hero--photo .rsb-hero__contact a, .rsb-site .rsb-hero:not(.rsb-hero--photo) a:not(.rsb-btn), .rsb-site .rsb-hero__card a:not(.rsb-btn), .rsb-site .rsb-hero:not(.rsb-hero--photo) a:not(.rsb-btn):hover, .rsb-site .rsb-hero__card a:not(.rsb-btn):hover { color: #fff; } .rsb-hero:not(.rsb-hero--photo) .rsb-crumbs, .rsb-hero:not(.rsb-hero--photo) .rsb-crumbs li { color: #fff; } /* Buttons on blue: white fill with blue text (primary / ink), white outline (outline / secondary / white-as-secondary). */ .rsb-hero__card .rsb-btn--ink, .rsb-pay .rsb-btn--ink, .rsb-hero:not(.rsb-hero--photo) .rsb-btn--primary, .rsb-hero:not(.rsb-hero--photo) .rsb-btn--ink, .rsb-tone-blue .rsb-btn--primary, .rsb-tone-dark .rsb-btn--primary, .rsb-cta--card .rsb-btn--primary { background: #fff; color: var(--rsb-blue-deep) !important; border-color: #fff; } .rsb-hero__card .rsb-btn--ink:hover, .rsb-pay .rsb-btn--ink:hover, .rsb-hero:not(.rsb-hero--photo) .rsb-btn--primary:hover, .rsb-hero:not(.rsb-hero--photo) .rsb-btn--ink:hover, .rsb-tone-blue .rsb-btn--primary:hover, .rsb-tone-dark .rsb-btn--primary:hover, .rsb-cta--card .rsb-btn--primary:hover { background: var(--rsb-blue-light); color: var(--rsb-blue-darker) !important; border-color: var(--rsb-blue-light); } .rsb-hero__card .rsb-btn--outline, .rsb-hero:not(.rsb-hero--photo) .rsb-btn--secondary, .rsb-pay .rsb-btn--white { background: transparent; color: #fff !important; border-color: #fff; } .rsb-hero__card .rsb-btn--outline:hover, .rsb-hero:not(.rsb-hero--photo) .rsb-btn--secondary:hover, .rsb-pay .rsb-btn--white:hover { background: rgba(255,255,255,.14); color: #fff !important; } /* Pay panel details */ .rsb-site .rsb-pay__more .rsb-benefit { background: #fff; } .rsb-pay .rsb-btag--ink { background: var(--rsb-orange); color: var(--rsb-ink); } .rsb-pay__photo { background: var(--rsb-blue-mid); } /* Visible focus on blue */ .rsb-topbar a:focus-visible, .rsb-hero__card a:focus-visible, .rsb-hero:not(.rsb-hero--photo) a:focus-visible, .rsb-pay a:focus-visible, .rsb-pay summary:focus-visible, .rsb-tone-blue a:focus-visible, .rsb-tone-dark a:focus-visible, .rsb-tone-forest a:focus-visible, .rsb-cta--card a:focus-visible { outline-color: #fff; } /* Detail band: deep green so it separates from the blue pay panel above it. */ .rsb-band-section.rsb-tone-blue { background: var(--rsb-green-deep); } .rsb-band__item { border-left-color: var(--rsb-green); } /* Green as a small accent: header underline and current-menu marker switch to blue; nav toggle to blue tint. */ .rsb-header { box-shadow: 0 2px 0 rgba(30,74,168,.12); } .rsb-nav-toggle { background: var(--rsb-blue-light); border-color: var(--rsb-blue-deep); color: var(--rsb-blue-deep); } .rsb-hero__photo { background: var(--rsb-blue-mid); } /* v0.2.3: fixes from the v0.2.2 contrast scan. */ .rsb-site .rsb-pay .rsb-pay__more .rsb-benefit, .rsb-site .rsb-pay .rsb-pay__more .rsb-bcard__title { color: var(--rsb-ink); } .rsb-hero:not(.rsb-hero--photo) .rsb-crumbs [aria-current], .rsb-hero:not(.rsb-hero--photo) .rsb-crumbs li + li::before { color: #fff; opacity: 1; } .rsb-footer a.rsb-btn--primary { background: #fff; color: var(--rsb-blue-deep) !important; border-color: #fff; } .rsb-footer a.rsb-btn--primary:hover { background: var(--rsb-blue-light); color: var(--rsb-blue-darker) !important; border-color: var(--rsb-blue-light); } .rsb-hero--photo { background: var(--rsb-blue-light); } /* v0.2.4: footer text links kept light on hover (the global a:hover ink colour made them vanish on the dark footer). */ .rsb-site .rsb-footer a:not(.rsb-btn):hover { color: #fff; } /* ========================================================================== v0.3.0 (Taso's markups, batch A) ========================================================================== */ /* Header: bigger logo on every page (phone 148px, tablet 230px, desktop 270px). Keep the row tidy. */ .rsb-header__bar { min-height: 84px; } @media (min-width: 1024px) { .rsb-header__bar { min-height: 100px; } .rsb-menu a { padding: 8px 8px; } } @media (max-width: 419px) { .rsb-header__join { padding: 6px 9px; font-size: .74rem; } .rsb-nav-toggle { padding: 8px 10px; } .rsb-header__bar { gap: 4px; } } /* Stats band: lighter brand green #98CA4C with dark ink (#183008 on #98CA4C = 8.6:1). */ .rsb-band-section.rsb-tone-blue, .rsb-band-section { background: var(--rsb-green); color: var(--rsb-ink); } .rsb-band-section .rsb-band__big { color: var(--rsb-ink); } .rsb-band-section .rsb-band__item { border-left-color: var(--rsb-ink); } @media (min-width: 900px) { .rsb-band { grid-template-columns: repeat(4, 1fr); } } /* "What sets Right Start apart": the founder card's You/We box sits inside the colored card (no overhang). */ .rsb-edge__item { overflow: hidden; } .rsb-edge__body { width: 100%; } /* Discipline mosaic: five tiles fill the grid. */ .rsb-m--wide { grid-column: span 2; } @media (min-width: 900px) { .rsb-m--wide { grid-column: span 2; } } /* Join hero: text below the buttons */ .rsb-hero__after { margin-top: 1em; font-weight: 600; } /* Application form */ .rsb-appform { max-width: 640px; } .rsb-appform__form { display: grid; gap: 16px; margin-top: .6em; } .rsb-appform__row { display: flex; flex-direction: column; gap: 6px; } .rsb-appform label { font-weight: 800; font-size: 1rem; } .rsb-appform .rsb-req, .rsb-appform .rsb-opt { font-weight: 600; color: var(--rsb-muted); font-size: .88rem; } .rsb-appform input[type=text], .rsb-appform input[type=email], .rsb-appform input[type=tel], .rsb-appform select { width: 100%; min-height: 54px; padding: 12px 14px; font: inherit; font-size: 1.05rem; color: var(--rsb-ink); background: #fff; border: 2px solid #5F6F55; border-radius: 12px; -webkit-appearance: none; appearance: none; } .rsb-appform select { background-image: linear-gradient(45deg, transparent 50%, #183008 50%), linear-gradient(135deg, #183008 50%, transparent 50%); background-position: calc(100% - 22px) 24px, calc(100% - 16px) 24px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; } .rsb-appform input:focus, .rsb-appform select:focus { outline: 3px solid var(--rsb-blue-deep); outline-offset: 2px; border-color: var(--rsb-blue-deep); } .rsb-appform__hint { font-size: .9rem; color: var(--rsb-muted); } .rsb-appform__row.has-error input, .rsb-appform__row.has-error select { border-color: #B3261E; } .rsb-appform__msg { color: #8C1D18; font-weight: 800; font-size: .95rem; } .rsb-appform__err { background: #FDECEA; border: 2px solid #B3261E; color: #5C0F0B; border-radius: 12px; padding: 12px 14px; font-weight: 700; margin: .6em 0; } .rsb-appform__ok { background: #EAF6D8; border: 2px solid #3A580E; color: #183008; border-radius: 12px; padding: 16px; font-size: 1.05rem; } .rsb-appform__btn { width: 100%; border: 2px solid var(--rsb-green); cursor: pointer; font-family: inherit; } @media (min-width: 640px) { .rsb-appform__btn { width: auto; align-self: flex-start; } } .rsb-appform__note { margin: 0; font-weight: 800; } .rsb-appform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .rsb-form-h3 { margin-top: 1.4em; } .rsb-apply__tell .rsb-h3 { margin-top: 0; } /* Resources: video cards */ .rsb-vids { list-style: none; display: grid; gap: 18px; margin: 1em 0 0; padding: 0; } @media (min-width: 640px) { .rsb-vids { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .rsb-vids { grid-template-columns: repeat(3, 1fr); } } .rsb-vid { list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 14px; } .rsb-vid__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--rsb-ink); } .rsb-site .rsb-vid__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rsb-vid__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(30,74,168,.92); border: 3px solid #fff; } .rsb-vid__play::after { content: ""; position: absolute; left: 25px; top: 18px; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; } .rsb-vid__thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .rsb-vid__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .rsb-vid__body .rsb-h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; } .rsb-vid__body .rsb-h3 a { color: var(--rsb-ink); text-decoration: none; } .rsb-vid__body .rsb-h3 a:hover { text-decoration: underline; } .rsb-credit { font-weight: 800; margin: 0; } /* ========================================================================== v0.3.1 ========================================================================== */ /* Header logo: ~190px phone, 290px tablet, 340px desktop (was 148 / 230 / 270). Row stays single-line. */ .rsb-logo img { width: 190px; } @media (max-width: 384px) { .rsb-logo img { width: 166px; } } @media (min-width: 540px) { .rsb-logo img { width: 260px; } } @media (min-width: 768px) { .rsb-logo img { width: 290px; } } @media (min-width: 1024px) { .rsb-logo img { width: 300px; } .rsb-header__bar { min-height: 104px; } } @media (min-width: 1240px) { .rsb-logo img { width: 340px; } .rsb-header__bar { min-height: 112px; } } @media (max-width: 419px) { .rsb-header__join { padding: 6px 8px; font-size: .72rem; min-height: 44px; } .rsb-nav-toggle { padding: 8px 9px; min-height: 44px; min-width: 44px; } .rsb-header__quick { gap: 4px; } } /* Discipline mosaic: 5 tiles (SLP large + OT, PT, DT, Feeding) fill the grid. */ .rsb-mosaic .rsb-m--big { grid-column: span 2; } /* v0.3.1 hero zoom: crops recut tighter (desktop 1700x523, phone 760x526 from the wide photo). Same bottom position against the card; top and sides cropped; heads stay inside. Desktop people are ~1.45x larger than v0.3.0. */ .rsb-hero__photo { aspect-ratio: 650 / 530; } .rsb-site .rsb-hero__img { object-position: 50% 100%; } @media (min-width: 760px) { .rsb-hero__photo { aspect-ratio: auto; height: 460px; } } @media (min-width: 900px) { .rsb-hero__photo { height: clamp(540px, 51.5vw, 660px); } } /* v0.3.1 phone header: logo + Join + Menu stay on ONE row. Logo is 190px max and shrinks with the viewport (360px: ~155px). */ @media (max-width: 539px) { .rsb-logo img { width: min(190px, calc(100vw - 200px)); } } @media (max-width: 539px) { .rsb-header__bar { flex-wrap: nowrap; } .rsb-logo { flex: 0 1 auto; min-width: 0; } .rsb-header__quick { flex: 0 0 auto; } } /* v0.3.3 Resources: Clearinghouse card, stacked link-row cards, partners. Phone: one column; desktop: two. */ .rsb-ch { max-width: 820px; display: grid; gap: 16px; } .rsb-ch__p { font-size: 1.1rem; margin: 0; } .rsb-ch__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 1.05rem; } .rsb-rgroup { margin-top: 1.4em; } .rsb-rlinks { list-style: none; margin: 1em 0 0; padding: 0; display: grid; gap: 14px; } @media (min-width: 760px) { .rsb-rlinks { grid-template-columns: repeat(2, 1fr); } } .rsb-rlink { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; min-width: 0; } .rsb-rlink__t { font-size: 1.12rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; } .rsb-rlink__a { color: var(--rsb-blue-deep); text-decoration: underline; text-underline-offset: 3px; } .rsb-rlink__a:hover, .rsb-rlink__a:focus-visible { color: var(--rsb-ink); } .rsb-rlink__p { font-size: 1rem; line-height: 1.45; color: var(--rsb-ink); overflow-wrap: anywhere; } .rsb-rlink__note { color: var(--rsb-muted); font-size: .95rem; } .rsb-rlink .rsb-link { color: var(--rsb-blue-deep); text-decoration: underline; } /* --- v0.3.7 --- */ /* Stay Independent hero has no photo any more: text spans the full width, no orange backing shape. */ .rsb-hero--solo .rsb-hero__grid { grid-template-columns: 1fr; } @media (min-width: 900px) { .rsb-hero--solo .rsb-hero__text { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: start; } .rsb-hero--solo .rsb-eyebrow { grid-column: 1; grid-row: 1; justify-self: start; } .rsb-hero--solo .rsb-h1 { grid-column: 1; grid-row: 2 / span 3; margin: 0; } .rsb-hero--solo .rsb-lead { grid-column: 2; grid-row: 1 / span 2; margin: 0; } .rsb-hero--solo .rsb-actions { grid-column: 2; grid-row: 3; margin-top: 18px; } .rsb-hero--solo .rsb-hero__contact { grid-column: 2; grid-row: 4; } } .rsb-hero--solo .rsb-hero__media { display: none; } /* Home hero: "We have 32+ Years of Experience" (white on the blue card). Phone: its own line under the headline. */ .rsb-hero__card .rsb-hero__exp { margin: .6em 0 0; font-family: var(--rsb-font-head, inherit); font-weight: 800; font-size: clamp(1.4rem, 6vw, 1.9rem); line-height: 1.15; letter-spacing: -.01em; color: #fff; text-wrap: balance; } @media (min-width: 900px) { .rsb-hero__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: center; } .rsb-hero__head .rsb-eyebrow { grid-column: 1; justify-self: start; } .rsb-hero__head .rsb-h1 { grid-column: 1; } .rsb-hero__card .rsb-hero__exp { grid-column: 2; grid-row: 1 / span 2; margin: 0; max-width: 300px; text-align: left; font-size: clamp(1.9rem, 2.8vw, 2.6rem); padding-left: 28px; border-left: 4px solid var(--rsb-orange); } } /* Home card order 1-9: the benefit board (1-2) is short, so its photo is landscape, not a tall sticky column. */ #rsb-benefits .rsb-bphoto__media { aspect-ratio: 4 / 3; position: relative; top: auto; } #rsb-benefits .rsb-bcol--cred { margin-top: 0; } .rsb-edge__body .rsb-btag--bonus { background: var(--rsb-ink); color: #fff; align-self: flex-start; } @media (min-width: 1100px) { .rsb-edge { grid-template-columns: repeat(3, 1fr); } .rsb-edge__item { flex-direction: row; align-items: flex-start; } .rsb-edge__item .rsb-bicon { flex-basis: 56px; width: 56px; height: 56px; } .rsb-edge__item .rsb-bicon svg { width: 26px; height: 26px; } } #rsb-credentialing { padding-top: 12px; } #rsb-credentialing .rsb-bcol--cred .rsb-bgrid { grid-template-columns: repeat(2, 1fr); } @media (max-width: 639px) { #rsb-credentialing .rsb-bcol--cred .rsb-bgrid { grid-template-columns: 1fr; } } #rsb-credentialing .rsb-bboard__cta { margin-top: 18px; } /* --- v0.3.8 Resources link cards: squarer 3-column grid (Start here for providers; For families and general reference). --- */ #rsb-best-resources .rsb-rlinks { grid-template-columns: 1fr; gap: 16px; } #rsb-best-resources .rsb-rlink { position: relative; gap: 10px; padding: 22px 22px 18px; min-height: 150px; border-radius: 22px; border-top-width: 8px; border-left: 6px solid var(--rsb-blue); transition: transform .15s, box-shadow .15s; } #rsb-best-resources .rsb-rlink__t { font-size: 1.25rem; line-height: 1.25; } #rsb-best-resources .rsb-rlink__p { font-size: 1.05rem; line-height: 1.45; } #rsb-best-resources .rsb-rlink__a::after { content: ""; position: absolute; inset: 0; border-radius: 22px; } /* whole card is the tap target */ #rsb-best-resources .rsb-rlink:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20,40,90,.16); } #rsb-best-resources .rsb-rlink__cue { margin-top: auto; padding-top: 6px; font-weight: 800; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: var(--rsb-blue-deep); } #rsb-best-resources .rsb-rlink:hover .rsb-rlink__cue span { display: inline-block; transform: translate(2px,-2px); } .rsb-rlink__cue { display: none; } #rsb-best-resources .rsb-rlink__cue { display: block; } @media (min-width: 700px) { #rsb-best-resources .rsb-rlinks { grid-template-columns: repeat(2, 1fr); } #rsb-best-resources .rsb-rlink { min-height: 200px; } } @media (min-width: 1000px) { #rsb-best-resources .rsb-rlinks { grid-template-columns: repeat(3, 1fr); gap: 20px; } #rsb-best-resources .rsb-rlink { min-height: 240px; padding: 26px 24px 20px; } #rsb-best-resources .rsb-rlink__t { font-size: 1.35rem; } } /* --- v0.3.9 --- */ /* Check-mark icon everywhere a card says what we do / include: white check in a strong circle. */ .rsb-bicon, .rsb-bicon--green { background: var(--rsb-blue-deep); color: #fff; } .rsb-bicon--green { background: var(--rsb-green-deep); } .rsb-bicon svg { width: 26px; height: 26px; fill: none; } .rsb-edge__item .rsb-bicon, .rsb-tile--green .rsb-bicon, .rsb-tile--teal .rsb-bicon { background: rgba(10,25,60,.42); color: #fff; } .rsb-tile--white .rsb-bicon { background: var(--rsb-blue-deep); color: #fff; } .rsb-tile--blue .rsb-bicon { background: rgba(255,255,255,.22); } .rsb-pay .rsb-bicon { background: var(--rsb-blue-deep); } .rsb-ticks li::before { width: 22px; height: 22px; left: 0; top: .2em; box-shadow: none; background: var(--rsb-green-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.6l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; } /* YOUR PRACTICE cards (Home cards 1 and 2): big, solid, high contrast. */ #rsb-benefits .rsb-bcol:not(.rsb-bcol--cred) .rsb-bgrid { gap: 16px; } #rsb-benefits .rsb-bcol:not(.rsb-bcol--cred) .rsb-bcol__title { font-size: 1rem; } #rsb-benefits .rsb-bcol:not(.rsb-bcol--cred) .rsb-benefit { flex-direction: column; gap: 16px; padding: 26px 24px 22px; border-radius: 24px; border: 0; min-height: 260px; } #rsb-benefits .rsb-bcol:not(.rsb-bcol--cred) .rsb-benefit:nth-child(odd) { background: var(--rsb-blue-deep); color: #fff; } #rsb-benefits .rsb-bcol:not(.rsb-bcol--cred) .rsb-benefit:nth-child(even) { background: var(--rsb-green); color: var(--rsb-ink); } #rsb-benefits .rsb-bcol:not(.rsb-bcol--cred) .rsb-bicon { flex-basis: 60px; width: 60px; height: 60px; background: rgba(10,25,60,.42); color: #fff; } #rsb-benefits .rsb-bcol:not(.rsb-bcol--cred) .rsb-benefit:nth-child(odd) .rsb-bicon { background: rgba(255,255,255,.22); } #rsb-benefits .rsb-bcol:not(.rsb-bcol--cred) .rsb-bicon svg { width: 32px; height: 32px; } #rsb-benefits .rsb-bcol:not(.rsb-bcol--cred) .rsb-bcard__title { font-size: 1.4rem; line-height: 1.22; font-weight: 800; color: inherit; } #rsb-benefits .rsb-bcol:not(.rsb-bcol--cred) .rsb-benefit__desc { font-size: 1.08rem; color: inherit; } #rsb-benefits .rsb-bcol:not(.rsb-bcol--cred) .rsb-bgrid { grid-template-columns: 1fr; } @media (min-width: 900px) { #rsb-benefits .rsb-bcol:not(.rsb-bcol--cred) .rsb-bgrid { grid-template-columns: repeat(2, 1fr); } } /* Home hero line: shorter now ("32+ Years of Experience"). */ @media (min-width: 900px) { .rsb-hero__card .rsb-hero__exp { max-width: 260px; } } /* Scroll reveal: only active when JS adds .rsb-rv-on (content is visible by default). */ .rsb-rv-on .rsb-rv { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .5s ease-out, transform .5s ease-out; } .rsb-rv-on .rsb-rv.is-in { opacity: 1; transform: none; } .rsb-hero--home .rsb-hero__img { will-change: transform; } @media (prefers-reduced-motion: reduce) { .rsb-rv-on .rsb-rv { opacity: 1 !important; transform: none !important; transition: none !important; } .rsb-hero--home .rsb-hero__img { transform: none !important; } } /* --- v0.3.10 Privacy Policy: 16 collapsible sections --- */ .rsb-pp { max-width: 860px; margin: 0 auto; } .rsb-pp .rsb-h1 { margin-bottom: .2em; } .rsb-pp__org { font-size: 1.25rem; font-weight: 800; color: var(--rsb-blue-deep); margin: 0 0 .4em; } .rsb-pp__dates { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0 0 1.2em; font-weight: 700; color: var(--rsb-muted); } .rsb-pp__all { margin: 0 0 18px; } .rsb-pp__allbtn, .rsb-pp__btn { font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; min-height: 46px; padding: 8px 22px; border-radius: 999px; border: 2px solid var(--rsb-blue-deep); background: #fff; color: var(--rsb-blue-deep); } .rsb-pp__allbtn:hover, .rsb-pp__btn:hover { background: var(--rsb-blue-deep); color: #fff; } .rsb-pp__allbtn:focus-visible, .rsb-pp__btn:focus-visible { outline: 3px solid var(--rsb-ink); outline-offset: 3px; } .rsb-pp__sec { background: var(--rsb-blue-light); border-left: 8px solid var(--rsb-blue-deep); border-radius: 18px; padding: 22px 22px 20px; margin: 0 0 16px; font-size: 1.06rem; line-height: 1.65; color: var(--rsb-ink); } .rsb-pp__sec:nth-of-type(even) { background: var(--rsb-green-light); border-left-color: var(--rsb-green-deep); } .rsb-pp__h { font-size: 1.4rem; line-height: 1.25; margin: 0 0 .5em; color: var(--rsb-ink); } .rsb-pp__sub { font-size: 1.1rem; margin: 1.1em 0 .3em; color: var(--rsb-blue-deep); } .rsb-pp__sec p { margin: 0 0 .9em; } .rsb-pp__list { margin: 0 0 1em; padding-left: 1.3em; display: grid; gap: .5em; } .rsb-pp__list li { list-style: disc; padding-left: .2em; } .rsb-pp__sec a { color: var(--rsb-blue-deep); font-weight: 700; overflow-wrap: anywhere; } .rsb-pp__addr { font-style: normal; display: grid; gap: .3em; margin: 0 0 1em; font-weight: 700; } .rsb-pp__addr a { font-weight: 800; } .rsb-pp__sec.is-collapsed .rsb-pp__first > p:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .5em; } .rsb-pp__more[hidden], .rsb-pp__tog[hidden], .rsb-pp__all[hidden] { display: none; } .rsb-pp__tog { margin: .5em 0 0; } .rsb-pp__sec.is-open .rsb-pp__first > p:last-child { margin-bottom: .9em; } @media (max-width: 599px) { .rsb-pp__sec { padding: 18px 16px 16px; border-left-width: 6px; } .rsb-pp__h { font-size: 1.25rem; } .rsb-pp__btn, .rsb-pp__allbtn { width: 100%; } } .rsb-pp__sec[data-solo="1"].is-collapsed .rsb-pp__first > p:last-child { -webkit-line-clamp: 2; } /* v0.3.10: the theme leaves an empty 60x60 "supersized-loader" box in the middle of the top of the page; it sat on top of phone buttons there (found on the Privacy "Expand all" button). Not used by our pages. */ .rsb-body #supersized-loader { display: none !important; } /* --- v0.3.12 application form: optional company field + optional background textarea --- */ .rsb-appform textarea { width: 100%; min-height: 150px; padding: 12px 14px; font: inherit; font-size: 1.05rem; line-height: 1.5; color: var(--rsb-ink); background: #fff; border: 2px solid #5F7A4B; border-radius: 12px; resize: vertical; } .rsb-appform textarea:focus { outline: 3px solid var(--rsb-blue-deep); outline-offset: 2px; border-color: var(--rsb-blue-deep); } .rsb-appform__row.has-error textarea { border-color: #B3261E; } /* --- v0.3.13 optional CV upload --- */ .rsb-appform input[type=file] { width: 100%; min-height: 54px; padding: 10px 12px; font: inherit; font-size: 1rem; color: var(--rsb-ink); background: #fff; border: 2px dashed #5F7A4B; border-radius: 12px; cursor: pointer; } .rsb-appform input[type=file]::file-selector-button { font: inherit; font-weight: 800; min-height: 40px; margin-right: 12px; padding: 6px 18px; border-radius: 999px; border: 2px solid var(--rsb-blue-deep); background: #fff; color: var(--rsb-blue-deep); cursor: pointer; } .rsb-appform input[type=file]:hover::file-selector-button { background: var(--rsb-blue-deep); color: #fff; } .rsb-appform input[type=file]:focus { outline: 3px solid var(--rsb-blue-deep); outline-offset: 2px; } .rsb-appform__row.has-error input[type=file] { border-color: #B3261E; } /* --- v0.3.15 --- */ /* HERO FIX (Taso: heads cut at the top on wide screens). The hero crops now keep ~130px of headroom (source rows 120-790 of the 2128x912 photo). The box always matches the crop's ratio so nothing is cut top or bottom: phone 650:670; 760-1599px height 480-670px (only the sides trim); 1600px+ height grows with width (39.2vw = 100vw / 2.55, the desktop crop ratio); 2000px+ switches to the wider crop (2128x670) and grows the box the same way (31.4vw = 100vw / 3.18), capped at 900px. Zoom look unchanged (~1.25x / 1.3x). */ .rsb-hero__photo { height: auto; aspect-ratio: 650 / 670; } .rsb-site .rsb-hero__img { object-position: 50% 100%; } @media (min-width: 760px) { .rsb-hero__photo { aspect-ratio: auto; height: 480px; } } @media (min-width: 900px) { .rsb-hero__photo { height: clamp(560px, 51.5vw, 670px); } } @media (min-width: 1600px) { .rsb-hero__photo { height: max(670px, 39.2vw); } } @media (min-width: 2000px) { .rsb-hero__photo { height: min(900px, max(670px, 31.4vw)); } } /* PHOTO AUDIT fixes (focal points so faces stay in frame at any width). */ .rsb-site .rsb-pay__img { object-position: 72% 15%; } .rsb-site .rsb-cta-photo__img { object-position: 20% 12%; } @media (min-width: 900px) { .rsb-cta-photo__media { height: clamp(600px, 27vw, 780px); } } .rsb-site .rsb-m--slp .rsb-m__img { object-position: 50% 15%; } .rsb-site .rsb-m--ot .rsb-m__img { object-position: 50% 8%; } .rsb-site .rsb-m--pt .rsb-m__img { object-position: 50% 70%; } .rsb-site .rsb-m--developmental-therapist .rsb-m__img { object-position: 50% 0%; } .rsb-site .rsb-m--feeding-swallowing .rsb-m__img { object-position: 50% 12%; } .rsb-site .rsb-photo--hero { object-position: 45% 25%; } /* v0.3.17 MERGED Home benefits: photo + 9 icon cards, no accordions. Phone 1 column, tablet 2, desktop 6-column grid (photo 2 cols x 2 rows + cards 1-4, then 3 cards, then 2 wide cards). */ .rsb-site { --rsb-yellow: #FFD23F; } .rsb-merge-section { padding: 56px 0 64px; } .rsb-merge-section .rsb-bhead { max-width: 820px; margin-bottom: 8px; } .rsb-merge-section .rsb-h2 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.12; } .rsb-merge-section .rsb-intro { font-size: 1.15rem; } .rsb-bmerge { list-style: none; display: grid; grid-template-columns: 1fr; gap: 16px; margin: 28px 0 0; padding: 0; } .rsb-bmerge__photo { list-style: none; position: relative; border-radius: 26px; overflow: hidden; min-height: 260px; aspect-ratio: 4 / 5; box-shadow: var(--rsb-shadow); background: var(--rsb-green-mid); } .rsb-bmerge__photo::after { content: ""; position: absolute; right: 0; bottom: 0; width: 34%; height: 16px; background: var(--rsb-orange); border-top-left-radius: 16px; } .rsb-site .rsb-bmerge__photo .rsb-bphoto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; } .rsb-site .rsb-bmerge .rsb-bm { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 26px 30px; border: 0; border-radius: 24px; min-width: 0; box-shadow: none; min-height: 100%; } .rsb-site .rsb-bmerge .rsb-bm--blue { background: var(--rsb-blue-deep); color: #fff; } .rsb-site .rsb-bmerge .rsb-bm--green { background: var(--rsb-green); color: var(--rsb-ink); } .rsb-site .rsb-bmerge .rsb-bm--orange { background: var(--rsb-orange); color: var(--rsb-ink); } .rsb-site .rsb-bmerge .rsb-bm--teal { background: var(--rsb-teal); color: var(--rsb-ink); } .rsb-site .rsb-bmerge .rsb-bm--yellow { background: var(--rsb-yellow); color: var(--rsb-ink); } .rsb-site .rsb-bmerge .rsb-bm--white { background: #fff; color: var(--rsb-ink); box-shadow: var(--rsb-shadow); } .rsb-site .rsb-bmerge .rsb-bm .rsb-bicon { flex: 0 0 68px; width: 68px; height: 68px; background: var(--rsb-ink); color: #fff; } .rsb-site .rsb-bmerge .rsb-bm--blue .rsb-bicon { background: rgba(255,255,255,.22); } .rsb-site .rsb-bmerge .rsb-bm--white .rsb-bicon { background: var(--rsb-blue-deep); } .rsb-site .rsb-bmerge .rsb-bm .rsb-bicon svg { width: 34px; height: 34px; fill: none; } .rsb-site .rsb-bmerge .rsb-bcard__body { padding-top: 0; gap: 10px; } .rsb-site .rsb-bmerge .rsb-bcard__title { font-size: 22px; line-height: 1.22; font-weight: 800; color: inherit; } .rsb-site .rsb-bmerge .rsb-benefit__desc { font-size: 17.5px; line-height: 1.5; color: inherit; margin-top: 0; } .rsb-site .rsb-bmerge .rsb-btag--bonus { background: var(--rsb-ink); color: #fff; margin: 0; } @media (min-width: 640px) { .rsb-bmerge { grid-template-columns: repeat(2, 1fr); gap: 18px; } .rsb-bmerge__photo { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 520px; aspect-ratio: 5 / 6; } /* tablet: centered portrait photo (aspect keeps both faces inside the crop) */ .rsb-bmerge > li.rsb-bm:last-child { grid-column: 1 / -1; } } @media (min-width: 1100px) { .rsb-bmerge { grid-template-columns: repeat(6, 1fr); gap: 20px; } .rsb-bmerge__photo { grid-column: 1 / span 2; grid-row: 1 / span 2; aspect-ratio: auto; min-height: 0; max-width: none; justify-self: stretch; } .rsb-bmerge > li.rsb-bm { grid-column: span 2; } .rsb-bmerge > li.rsb-bm:nth-last-child(-n+2) { grid-column: span 3; } .rsb-site .rsb-bmerge .rsb-bcard__title { font-size: 24px; } .rsb-site .rsb-bmerge .rsb-bm { padding: 30px 28px 32px; } } /* STAY INDEPENDENT photos: a notes photo beside "Who this is for", then Taso's tablet photos as a band (portrait, landscape, portrait). */ .rsb-who { display: grid; gap: 24px; align-items: center; } .rsb-who__photo { border-radius: 24px; overflow: hidden; aspect-ratio: 1 / 1; box-shadow: var(--rsb-shadow); position: relative; } .rsb-site .rsb-who__img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 20%; } @media (min-width: 900px) { .rsb-who { grid-template-columns: 1fr 380px; gap: 56px; } } .rsb-stay-photos { padding: 36px 0; } .rsb-tabs { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; } .rsb-tabs__i { list-style: none; position: relative; overflow: hidden; border-radius: 22px; box-shadow: var(--rsb-shadow); background: #fff; min-width: 0; } .rsb-tabs__p { aspect-ratio: 2 / 3; } .rsb-tabs__l { grid-column: 1 / -1; order: 3; aspect-ratio: 3 / 2; } .rsb-site .rsb-tabs__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; } @media (min-width: 640px) { .rsb-tabs { grid-template-columns: 1fr 2.25fr 1fr; gap: 18px; } .rsb-tabs__l { grid-column: auto; order: 0; aspect-ratio: auto; } } /* v0.3.19: "Paid consistently, without delay." now sits right after the hero (above the benefits), so it switches from blue (the header/hero are blue) to bright leaf green with dark ink text, a white payee card and dark-blue buttons. Section order on Home: hero (blue) > pay (green) > benefits (sky) > credentialing (white) > band (deep green) > ... */ .rsb-site .rsb-pay { background: var(--rsb-green); color: var(--rsb-ink); } .rsb-site .rsb-pay .rsb-h2, .rsb-site .rsb-pay .rsb-pay__title, .rsb-site .rsb-pay .rsb-pay__sub, .rsb-site .rsb-pay .rsb-pay__panel > p { color: var(--rsb-ink); } .rsb-site .rsb-pay__title { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; font-weight: 900; } .rsb-site .rsb-pay__sub { font-size: clamp(1.25rem, 2.1vw, 1.5rem); line-height: 1.4; font-weight: 800; } .rsb-site .rsb-pay .rsb-eyebrow { background: var(--rsb-blue-deep); color: #fff; } .rsb-site .rsb-pay .rsb-btag--ink { background: var(--rsb-ink); color: #fff; } .rsb-site .rsb-pay__photo { background: var(--rsb-green-mid); } .rsb-site .rsb-pay .rsb-pay__more .rsb-benefit { background: #fff; border: 0; border-radius: 22px; padding: 24px 24px 26px; box-shadow: 0 6px 20px rgba(24,48,8,.16); gap: 18px; align-items: flex-start; } .rsb-site .rsb-pay .rsb-pay__more .rsb-bcard__title { font-size: 1.3rem; line-height: 1.25; color: var(--rsb-ink); } .rsb-site .rsb-pay .rsb-pay__more .rsb-benefit__desc { font-size: 1.06rem; line-height: 1.5; color: var(--rsb-ink); } .rsb-site .rsb-pay .rsb-bicon { background: var(--rsb-blue-deep); color: #fff; flex-basis: 60px; width: 60px; height: 60px; } .rsb-site .rsb-pay .rsb-bicon svg { width: 30px; height: 30px; fill: none; } .rsb-site .rsb-pay .rsb-btn--ink { background: var(--rsb-blue-deep); color: #fff !important; border-color: var(--rsb-blue-deep); } .rsb-site .rsb-pay .rsb-btn--ink:hover { background: var(--rsb-blue-darker); border-color: var(--rsb-blue-darker); color: #fff !important; } .rsb-site .rsb-pay .rsb-btn--white { background: transparent; color: var(--rsb-blue-deep) !important; border-color: var(--rsb-blue-deep); } .rsb-site .rsb-pay .rsb-btn--white:hover { background: var(--rsb-blue-deep); color: #fff !important; } .rsb-site .rsb-pay a:focus-visible { outline-color: var(--rsb-blue-deep); } .rsb-site .rsb-pay .rsb-actions { margin-top: 22px; } /* --- v0.3.20: Join "Where you can work" (city chips) --- */ .rsb-places { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; padding: 0; } .rsb-place { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 18px 8px 12px; background: #fff; border-radius: 999px; font-weight: 800; color: var(--rsb-ink); box-shadow: 0 3px 0 rgba(30,74,168,.14); border: 2px solid var(--rsb-blue-mid); } .rsb-place__ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--rsb-blue-deep); color: #fff; } .rsb-place__ico svg { width: 18px; height: 18px; } .rsb-place--all { background: var(--rsb-green); border-color: var(--rsb-green); } .rsb-place--all .rsb-place__ico { background: var(--rsb-ink); } .rsb-place--tele { background: var(--rsb-blue-deep); border-color: var(--rsb-blue-deep); color: #fff; } .rsb-place--tele .rsb-place__ico { background: rgba(255,255,255,.22); } .rsb-actions--start { justify-content: flex-start; margin-top: 20px; } .rsb-actions--start .rsb-btn { flex: 0 1 auto; } @media (max-width: 539px) { .rsb-place { flex: 1 1 calc(50% - 10px); min-width: 0; font-size: .98rem; padding-right: 12px; } .rsb-place--all, .rsb-place--tele { flex-basis: 100%; } .rsb-actions--start .rsb-btn { flex: 1 1 100%; } } /* --- v0.3.20: layout-shift guard --- Cause of the 0.307 mobile shift (found with a screencast): the mobile menu showed fully open until rsb.js (deferred, loaded after ~90 page-builder scripts) added .rsb-js at about 3.6 s, then collapsed. The template now adds .rsb-js inline, before first paint. The logo box is also reserved by its aspect ratio. */ .rsb-logo img { aspect-ratio: 225 / 58; height: auto; } /* v0.3.20: Privacy sections start collapsed in CSS once .rsb-js is set (inline, before first paint), so the script no longer changes the layout when it runs. Without JS every section stays fully open and the toggles stay hidden. */ .rsb-js .rsb-pp__sec:not(.is-open) .rsb-pp__more { display: none; } .rsb-js .rsb-pp__sec:not(.is-open) .rsb-pp__first > p:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .5em; } .rsb-js .rsb-pp__sec[data-solo="1"]:not(.is-open) .rsb-pp__first > p:last-child { -webkit-line-clamp: 2; } .rsb-js .rsb-pp__tog[hidden] { display: block; visibility: hidden; min-height: 46px; } .rsb-js .rsb-pp__all[hidden] { display: block; visibility: hidden; min-height: 46px; } /* --- v0.3.21: tenure line under "35+ combined years in EI" on the Home hero card --- */ .rsb-hero__card .rsb-hero__since { display: block; margin-top: .45em; font-size: .92rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; color: rgba(255,255,255,.92); } @media (min-width: 900px) { .rsb-hero__card .rsb-hero__since { font-size: .98rem; } } /* --- v0.3.23: "Our standing in Illinois EI" (text only, no logos) --- */ .rsb-affil-section { padding: 44px 0 48px; } .rsb-affil-section .rsb-h2 { text-align: center; margin-bottom: .6em; } .rsb-affil__lead { margin: 0; font-size: .82rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--rsb-blue-deep); } .rsb-affil--list { list-style: none; max-width: 860px; margin: 0 auto; padding: 0; color: var(--rsb-muted); font-weight: 600; font-size: 1.02rem; line-height: 1.45; } .rsb-affil--list li { list-style: none; position: relative; margin: 0; padding: 9px 0 9px 26px; border-top: 1px solid rgba(58,88,14,.18); } .rsb-affil--list li:first-child { border-top: 0; } .rsb-affil--list li::before { content: ""; position: absolute; left: 6px; top: 1.05em; width: 8px; height: 8px; border-radius: 50%; background: var(--rsb-green-deep); } .rsb-affil--short { margin: 0 auto; max-width: 900px; text-align: center; color: var(--rsb-muted); font-weight: 600; font-size: 1rem; line-height: 1.5; } .rsb-affil--short .rsb-affil__lead { display: block; margin-bottom: .35em; }