/* ===================================================================================================== Design v3 (Ayesha's 31-page Canva + the 2026-10-14 email), loaded after ysb-ui.css: logo without the tagline, account menu, school finder, Latest Updates, Google reviews, Help Centre + query forms, School Partnerships, Bring YourSchoolBox, the school list and My Account. Uses ysb-ui.css's tokens, so dark mode follows; tinted areas have their own dark rules. ===================================================================================================== */ /* Logo without the tagline: wider and shorter than the tagline logo it replaces */ .ysb-header__logo img { max-height: 38px; } @media (min-width: 600px) { .ysb-header__logo img { max-height: 44px; } } @media (min-width: 1024px) { .ysb-header__logo img { max-height: 58px; max-width: 100%; } } @media (min-width: 1408px) { .ysb-header__logo img { max-height: 62px; } } /* Dark-mode switch: the same sun/moon switch, a little smaller, as in Ayesha's header mock-ups (pp.27-31) */ .ysb-theme__svg { width: 46px; } .ysb-actions__theme .ysb-theme__svg { width: 40px; } /* Account menu (p.30): light-blue background, blue text and icon on hover / focus */ .ysb-dropdown a:hover, .ysb-dropdown a:focus-visible, .ysb-dropdown button:hover { background: var(--ysb-blue-tint); color: #0b7f96 !important; box-shadow: inset 3px 0 0 var(--ysb-blue); } .ysb-dropdown a:hover .ysb-icon, .ysb-dropdown a:focus-visible .ysb-icon { color: var(--ysb-blue); } .ysb-dropdown__hello { color: var(--ysb-orange); font-weight: 600; font-size: .9rem; } html[data-theme="dark"] .ysb-dropdown a:hover, html[data-theme="dark"] .ysb-dropdown a:focus-visible { color: #5FD4EE !important; } /* School finder: a more prominent title, and the field headings above the boxes (email 2026-10-14) */ .ysb-schoolfinder__title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; } @media (min-width: 768px) { .ysb-schoolfinder__title { font-size: 2rem; } } .ysb-schoolfinder__help { font-size: .9rem; } .ysb-schoolfinder__heading { display: block; margin: 0 0 .35rem; font-size: .95rem; font-weight: 700; color: #0b7f96; } html[data-theme="dark"] .ysb-schoolfinder__heading { color: #5FD4EE; } .ysb-schoolfinder__box .ysb-schoolfinder__input { min-height: 54px; padding: 0 1rem 0 2.75rem; } .ysb-schoolfinder__box--select .ysb-schoolfinder__input { padding: 0 2.6rem 0 1rem; } .ysb-schoolfinder__go { min-height: 54px; } @media (min-width: 768px) { .ysb-schoolfinder__go { margin-top: calc(.95rem * 1.5 + .35rem); } } /* Banner and finder: no gap; the finder card sits over the banner's bottom edge (p.12, "close the gap as discussed") */ .ysb-home__hero { gap: 0; } .ysb-home__hero .ysb-home__finder-card { position: relative; z-index: 2; } @media (min-width: 768px) { .ysb-home__hero .ysb-home__banner + .ysb-home__finder-card { margin: -3.25rem 1.5rem 0; } } @media (max-width: 767px) { .ysb-home__hero .ysb-home__banner + .ysb-home__finder-card { margin: -1.25rem .5rem 0; } } /* Latest Updates (p.13): order window (navy, wide) | notice and free delivery stacked */ .ysb-home__updates--window { grid-auto-flow: row; } @media (min-width: 900px) { .ysb-home__updates--window { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-auto-flow: row; } } .ysb-home__updates-side { display: grid; gap: 1rem; align-content: start; } /* no current order window (2026-10-17): notice and free delivery side by side as squares */ @media (min-width: 700px) { .ysb-home__updates-side--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ysb-home__updates-side--pair .ysb-update { aspect-ratio: 1 / 1; max-height: 22rem; justify-content: center; } } .ysb-update--window { flex-direction: row; align-items: center; gap: 1rem; padding: 1.6rem 1.75rem; } .ysb-update__body { display: flex; flex-direction: column; gap: .4rem; flex: 1; min-width: 0; } .ysb-update--navy h3 { font-size: 1.55rem; color: #fff; } .ysb-update--navy .ysb-update__sub { color: #5FD4EE; font-weight: 700; font-size: 1.1rem; margin: 0; } .ysb-update--navy p { color: #dbe3ee; } .ysb-update__cta { align-self: flex-start; margin-top: .75rem; border-radius: 999px; } .ysb-update__calendar { flex: none; width: 108px; height: 108px; border-radius: 999px; background: rgba(31, 193, 224, .18); display: grid; place-items: center; position: relative; } .ysb-update__calendar::before { content: ""; position: absolute; width: 60px; height: 58px; background: #fff; border-radius: 10px; top: 28px; } .ysb-update__calendar-top { position: absolute; top: 28px; width: 60px; height: 16px; background: var(--ysb-pink); border-radius: 10px 10px 0 0; } .ysb-update__calendar-day { position: relative; margin-top: 18px; font-size: 1.6rem; font-weight: 800; color: #112755; } @media (max-width: 599px) { .ysb-update__calendar { display: none; } } .ysb-update--free { position: relative; padding-right: 5.5rem; } .ysb-update__truck { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--ysb-blue); } .ysb-update__pill--green { background: var(--ysb-green); color: #112755; } html[data-theme="dark"] .ysb-update--navy { background: var(--ysb-d-raised); border-color: var(--ysb-d-border); } /* Reviews: real star counts, the Google badge, and the link to all Google reviews */ .ysb-review__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } .ysb-review__stars { color: var(--ysb-orange); letter-spacing: 2px; } .ysb-review__stars-off { color: var(--ysb-border); } .ysb-review__google { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; color: var(--ysb-muted); background: var(--ysb-grey); border-radius: 999px; padding: .15rem .55rem; } .ysb-reviews__more { text-align: center; margin: 1rem 0 0; font-weight: 600; } .ysb-reviews__more a { display: inline-flex; align-items: center; gap: .35rem; color: #0b7f96; } html[data-theme="dark"] .ysb-reviews__more a { color: #5FD4EE; } /* ---------------------------------------------------------------- shared pieces for the new pages */ .ysb-tint--green { background: rgba(12, 221, 107, .14); color: #079a4a; } .ysb-tint--pink { background: rgba(241, 95, 145, .14); color: #c93a6c; } .ysb-tint--blue { background: rgba(31, 193, 224, .16); color: #0b7f96; } .ysb-tint--orange { background: rgba(237, 133, 52, .16); color: #c2601a; } .ysb-tint--violet { background: rgba(124, 92, 230, .14); color: #6a48d7; } html[data-theme="dark"] .ysb-tint--green { color: #3BE88A; } html[data-theme="dark"] .ysb-tint--pink { color: #FF75A4; } html[data-theme="dark"] .ysb-tint--blue { color: #5FD4EE; } html[data-theme="dark"] .ysb-tint--orange { color: #F7A766; } html[data-theme="dark"] .ysb-tint--violet { color: #B39DFF; } .ysb-pill { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border-radius: 999px; padding: .3rem .85rem; } .ysb-pill--blue { background: var(--ysb-blue-tint); color: #0b7f96; } .ysb-pill--green { background: var(--ysb-green); color: #112755; } .ysb-pill--pink { background: var(--ysb-pink); color: #fff; } html[data-theme="dark"] .ysb-pill--blue { color: #5FD4EE; } .ysb-btn--navy { background: #112755; color: #fff !important; } .ysb-btn--navy:hover { background: #0c1e44; } .ysb-btn--outline-blue { background: transparent; color: #0b7f96 !important; border: 2px solid var(--ysb-blue); } .ysb-btn--outline-blue:hover { background: var(--ysb-blue-tint); } html[data-theme="dark"] .ysb-btn--navy { background: var(--ysb-d-raised); border: 1px solid var(--ysb-d-border); } html[data-theme="dark"] .ysb-btn--outline-blue { color: #5FD4EE !important; } .ysb-notice { display: flex; gap: .75rem; align-items: flex-start; margin: 0 0 1rem; line-height: 1.5; } .ysb-notice > .ysb-icon { flex: none; margin-top: .1rem; } .ysb-notice--green { background: #effcf5; border-color: #bff3d5; } .ysb-notice--green > .ysb-icon { color: #079a4a; } .ysb-notice--pink { background: #fdeef3; border-color: rgba(241, 95, 145, .45); color: #8f1c40; } .ysb-notice--blue { background: var(--ysb-blue-tint); border-color: rgba(31, 193, 224, .35); } .ysb-notice--blue > .ysb-icon { color: #0b7f96; } .ysb-notice--red { background: #fff0f0; border: 2px solid #e5484d; color: #8f1c1c; } .ysb-notice--red > .ysb-icon { color: #e5484d; } .ysb-notice--small { font-size: .85rem; padding: .6rem .8rem; } html[data-theme="dark"] .ysb-notice--pink { background: rgba(241, 95, 145, .12); color: #FFB3CB; } html[data-theme="dark"] .ysb-notice--blue { background: rgba(31, 193, 224, .1); } html[data-theme="dark"] .ysb-notice--red { background: rgba(229, 72, 77, .14); color: #FFB3B5; } .ysb-help__small { font-size: .82rem; color: var(--ysb-muted); } /* forms */ .ysb-form { padding: 1.25rem; } @media (min-width: 768px) { .ysb-form { padding: 1.75rem 2rem; } } .ysb-form__grid { display: grid; grid-template-columns: 1fr; gap: 0 1.25rem; } @media (min-width: 640px) { .ysb-form__grid { grid-template-columns: 1fr 1fr; } } .ysb-field { margin: 0 0 1rem; min-width: 0; border: 0; padding: 0; } .ysb-field > label, .ysb-field > legend, .ysb-field__label { display: block; font-weight: 600; font-size: .92rem; color: var(--ysb-navy); margin: 0 0 .35rem; padding: 0; } .ysb-field__opt { font-weight: 400; color: var(--ysb-muted); } .ysb-field__req { color: #c93a6c; font-weight: 700; } .ysb-input { width: 100%; min-height: 46px; padding: .55rem .9rem; border: 1.5px solid var(--ysb-border); border-radius: 10px; background: var(--ysb-white); color: var(--ysb-navy); font: inherit; font-size: .95rem; outline: none; transition: border-color .15s, box-shadow .15s; } .ysb-input::placeholder { color: #8b97aa; } .ysb-input:focus { border-color: var(--ysb-blue); box-shadow: 0 0 0 4px rgba(31, 193, 224, .15); } .ysb-textarea { min-height: 120px; resize: vertical; } .ysb-form__error { color: #c93a6c; font-weight: 600; font-size: .85rem; margin: .35rem 0 0; } .ysb-captcha { margin: 0 0 1rem; } .ysb-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .ysb-radios { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; } .ysb-radios legend { width: 100%; } .ysb-radios label { display: inline-flex; align-items: center; gap: .45rem; font-size: .95rem; color: var(--ysb-navy); cursor: pointer; } .ysb-radios input, .ysb-checkline input { width: 18px; height: 18px; accent-color: var(--ysb-blue); } .ysb-checkline { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0 .25rem; padding: .85rem 1rem; border: 1.5px solid var(--ysb-blue); border-radius: 10px; background: var(--ysb-blue-tint); color: var(--ysb-navy); font-weight: 600; font-size: .92rem; cursor: pointer; } .ysb-checkline input { flex: none; margin-top: .15rem; } /* ---------------------------------------------------------------- Help Centre (pp.18-26) */ .ysb-help__hero { position: relative; overflow: hidden; text-align: center; padding: 3rem 1rem 2.5rem; background: linear-gradient(180deg, #f3f8fd, #ffffff); } .ysb-help__hero h1 { position: relative; margin: 0; font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; color: var(--ysb-navy); letter-spacing: -.02em; line-height: 1.1; } .ysb-help__hero p { position: relative; margin: .4rem 0 0; font-size: clamp(1.1rem, 3vw, 1.6rem); color: var(--ysb-navy); } .ysb-blob { position: absolute; border-radius: 50%; opacity: .55; pointer-events: none; } .ysb-blob--green { width: 220px; height: 300px; left: -70px; top: -40px; background: #c9f6dc; transform: rotate(30deg); } .ysb-blob--pink { width: 220px; height: 220px; right: -60px; top: -50px; background: #fcd2e1; } .ysb-blob--orange { width: 180px; height: 160px; right: -40px; top: 110px; background: #fde0c6; } html[data-theme="dark"] .ysb-help__hero { background: linear-gradient(180deg, #0f2452, var(--ysb-d-canvas)); } html[data-theme="dark"] .ysb-blob { opacity: .14; } .ysb-helptabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.25rem 0 1.75rem; } .ysb-helptab { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .5rem 1.6rem; border-radius: 999px; border: 1.5px solid #b9cbe2; background: var(--ysb-white); color: var(--ysb-navy) !important; font-weight: 500; font-size: 1.02rem; text-decoration: none !important; transition: background .15s, border-color .15s; } .ysb-helptab:hover { border-color: var(--ysb-blue); background: var(--ysb-blue-tint); } .ysb-helptab.is-active { background: var(--ysb-blue-tint); border-color: var(--ysb-blue); font-weight: 700; box-shadow: 0 2px 8px rgba(31, 193, 224, .25); } @media (max-width: 599px) { .ysb-helptabs { gap: .4rem; } .ysb-helptab { min-height: 42px; padding: .35rem 1rem; font-size: .9rem; } } .ysb-helppanel { margin: 0 0 2.5rem; scroll-margin-top: 140px; } .ysb-help--tabs .ysb-helppanel { margin-bottom: 1.5rem; } .ysb-helppanel__head { text-align: center; max-width: 760px; margin: 0 auto 1.25rem; } .ysb-helppanel__head h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; color: var(--ysb-navy); margin: 0; } .ysb-helppanel__head p { color: #2340a8; margin: .4rem 0 0; } html[data-theme="dark"] .ysb-helppanel__head p { color: var(--ysb-d-text-2); } .ysb-helppanel__head .ysb-helppanel__sub { font-size: 1.2rem; font-weight: 600; color: var(--ysb-navy); } .ysb-help__h3 { text-align: center; font-size: 1.5rem; font-weight: 800; color: var(--ysb-navy); margin: 1.75rem 0 .25rem; } .ysb-help__lead { text-align: center; color: var(--ysb-muted); margin: 0 0 1rem; } .ysb-anchor { display: block; position: relative; top: -140px; visibility: hidden; } #where-is-my-order { scroll-margin-top: 140px; } .ysb-contactcards { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 700px) { .ysb-contactcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ysb-contactcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; padding: 1.5rem 1rem; background: var(--ysb-white); border: 1px solid var(--ysb-border); border-radius: var(--ysb-radius-lg); box-shadow: var(--ysb-shadow); color: var(--ysb-navy) !important; text-decoration: none !important; transition: transform .15s, box-shadow .15s, border-color .15s; } .ysb-contactcard:hover, .ysb-contactcard[aria-expanded="true"] { transform: translateY(-2px); box-shadow: var(--ysb-shadow-lg); border-color: var(--ysb-blue); } .ysb-contactcard strong { font-size: 1.35rem; font-weight: 800; margin-top: .4rem; } .ysb-contactcard span:last-child { color: var(--ysb-navy); font-size: .95rem; } .ysb-contactcard__icon { width: 104px; height: 104px; border-radius: 999px; display: grid; place-items: center; } .ysb-contactcard__icon--green { background: rgba(12, 221, 107, .16); color: #11b85a; } .ysb-contactcard__icon--blue { background: rgba(31, 193, 224, .16); color: var(--ysb-blue); } .ysb-contactcard__icon--orange { background: rgba(237, 133, 52, .16); color: var(--ysb-orange); } .ysb-query { margin-top: 1.75rem; scroll-margin-top: 140px; } .ysb-query__head { text-align: center; margin-bottom: 1rem; } .ysb-query__head h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; color: var(--ysb-navy); margin: .5rem 0 .25rem; } .ysb-query__head p { color: var(--ysb-navy); margin: 0; } .ysb-querytypes { border: 1.5px solid var(--ysb-blue); border-radius: 12px; padding: .75rem; background: var(--ysb-white); } .ysb-querytypes legend { padding: 0 .35rem; } .ysb-querytypes__grid { display: grid; grid-template-columns: 1fr; gap: .2rem 1rem; grid-auto-flow: row; } @media (min-width: 640px) { .ysb-querytypes__grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); grid-auto-flow: column; } } .ysb-querytype { position: relative; display: flex; align-items: center; gap: .7rem; padding: .45rem .55rem; border-radius: 10px; cursor: pointer; color: var(--ysb-navy); font-size: .95rem; } .ysb-querytype:hover { background: var(--ysb-grey); } .ysb-querytype input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ysb-querytype:has(input:checked) { background: var(--ysb-blue-tint); box-shadow: inset 0 0 0 2px var(--ysb-blue); font-weight: 600; } .ysb-querytype:has(input:focus-visible) { outline: 3px solid var(--ysb-blue); outline-offset: 1px; } .ysb-querytype__icon { flex: none; width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; } .ysb-drop { position: relative; display: flex; align-items: center; justify-content: center; gap: .9rem; padding: 1.25rem 1rem; border: 2px dashed #9fd9e9; border-radius: 12px; background: #f3fbfe; color: #0b7f96; cursor: pointer; text-align: left; transition: background .15s, border-color .15s; } .ysb-drop:hover, .ysb-drop.is-over, .ysb-drop:focus-within { background: var(--ysb-blue-tint); border-color: var(--ysb-blue); } .ysb-drop span { display: flex; flex-direction: column; gap: .15rem; color: var(--ysb-navy); } .ysb-drop small { color: var(--ysb-muted); font-size: .78rem; } .ysb-drop__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; } .ysb-drop__files { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .85rem; color: var(--ysb-navy); } .ysb-drop__files li::before { content: "\1F4CE "; } .ysb-drop__files li.is-error { color: #c93a6c; font-weight: 600; } html[data-theme="dark"] .ysb-drop { background: rgba(31, 193, 224, .06); border-color: rgba(31, 193, 224, .45); } .ysb-accordion { margin: 0 0 1rem; border: 1.5px solid #9fd9e9; border-radius: 12px; background: var(--ysb-white); overflow: hidden; } .ysb-accordion > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .9rem 1.1rem; background: var(--ysb-blue-tint); font-weight: 800; font-size: 1.15rem; color: #1d2f86; } html[data-theme="dark"] .ysb-accordion > summary { color: var(--ysb-d-text); } .ysb-accordion > summary::-webkit-details-marker { display: none; } .ysb-accordion > summary::after { content: "\2212"; flex: none; width: 30px; height: 30px; border-radius: 999px; border: 2px solid var(--ysb-blue); color: var(--ysb-blue); display: grid; place-items: center; font-size: 1.2rem; line-height: 1; } .ysb-accordion:not([open]) > summary::after { content: "+"; } .ysb-accordion > *:not(summary) { margin-left: 1rem; margin-right: 1rem; } .ysb-accordion > *:last-child { margin-bottom: 1rem; } .ysb-steps { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: 0; } .ysb-step { display: flex; gap: .9rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--ysb-border); } .ysb-step:last-child { border-bottom: 0; } .ysb-step strong { color: var(--ysb-navy); font-size: 1rem; } .ysb-step p { margin: .15rem 0 0; color: #2340a8; font-size: .92rem; line-height: 1.5; } html[data-theme="dark"] .ysb-step p { color: var(--ysb-d-text-2); } .ysb-step__icon { flex: none; width: 44px; height: 44px; border-radius: 999px; display: inline-grid; place-items: center; } .ysb-steps--numbered { counter-reset: ysbstep; } .ysb-steps--numbered > .ysb-step::before { counter-increment: ysbstep; content: counter(ysbstep); flex: none; width: 36px; height: 36px; margin-top: 4px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; background: var(--ysb-grey); color: var(--ysb-navy); } .ysb-infocard { background: var(--ysb-white); border: 1.5px solid var(--ysb-border); border-radius: 14px; padding: 1.1rem 1.25rem; margin: 0 0 1rem; } .ysb-infocard h3 { margin: 0 0 .35rem; font-size: 1.15rem; font-weight: 800; color: var(--ysb-navy); } .ysb-infocard p { margin: 0 0 .35rem; color: var(--ysb-navy); line-height: 1.55; } .ysb-infocard--row { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; } .ysb-infocard--row > div { flex: 1 1 260px; min-width: 0; } .ysb-infocard--row > .ysb-btn { align-self: center; } .ysb-infocard__icon { flex: none; width: 72px; height: 72px; border-radius: 999px; display: grid; place-items: center; } .ysb-infocard--green { background: #f1fdf6; border-color: #a9eec7; } .ysb-infocard--green .ysb-infocard__icon { color: #11b85a; background: rgba(12, 221, 107, .14); } .ysb-infocard--blue { background: #f3fbfe; border-color: #a8e3f1; } .ysb-infocard--blue .ysb-infocard__icon { color: #0b7f96; background: rgba(31, 193, 224, .14); } .ysb-infocard--orange { background: #fff7f0; border-color: #f7cfae; } .ysb-infocard--orange .ysb-infocard__icon { color: var(--ysb-orange); background: rgba(237, 133, 52, .14); } .ysb-infocard--pink { background: #fff3f7; border-color: #f7bfd3; } .ysb-infocard--pink .ysb-infocard__icon { color: var(--ysb-pink); background: rgba(241, 95, 145, .14); } html[data-theme="dark"] .ysb-infocard--green { background: rgba(12, 221, 107, .06); border-color: rgba(12, 221, 107, .35); } html[data-theme="dark"] .ysb-infocard--blue { background: rgba(31, 193, 224, .06); border-color: rgba(31, 193, 224, .35); } html[data-theme="dark"] .ysb-infocard--orange { background: rgba(237, 133, 52, .07); border-color: rgba(237, 133, 52, .4); } html[data-theme="dark"] .ysb-infocard--pink { background: rgba(241, 95, 145, .07); border-color: rgba(241, 95, 145, .4); } .ysb-infocard--hero { display: flex; gap: 1.25rem; align-items: center; padding: 1.4rem 1.5rem; } .ysb-infocard__big { font-size: clamp(1.25rem, 3vw, 1.8rem); font-weight: 800; line-height: 1.25; } .ysb-infocard p.ysb-infocard__big { margin: 0 0 .35rem; } .ysb-text-green { color: #0cbf5d; } .ysb-infogrid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 0 1rem; } @media (min-width: 768px) { .ysb-infogrid { grid-template-columns: 1fr 1fr; } } .ysb-infogrid > .ysb-infocard { margin: 0; } .ysb-infocard .ysb-infogrid { margin: .75rem 0 0; } .ysb-table { width: 100%; border-collapse: collapse; margin: .75rem 0; background: var(--ysb-white); border-radius: 10px; overflow: hidden; } .ysb-table th { text-align: left; padding: .7rem 1rem; background: var(--ysb-grey); color: var(--ysb-navy); font-size: .92rem; } .ysb-table td { padding: .7rem 1rem; border-top: 1px solid var(--ysb-border); color: var(--ysb-navy); } .ysb-table--windows th, .ysb-table--windows td { text-align: center; font-size: 1.02rem; } .ysb-table--windows td:last-child { background: rgba(12, 221, 107, .08); } .ysb-paycard { background: var(--ysb-white); border: 1px solid var(--ysb-border); border-radius: 12px; padding: 1rem 1.1rem; } .ysb-paycard__head { display: flex; gap: .75rem; align-items: center; margin-bottom: .5rem; } .ysb-paycard__head strong { display: block; font-size: 1.3rem; color: #1d2f86; } .ysb-paycard__head div span { color: #2340a8; } html[data-theme="dark"] .ysb-paycard__head strong, html[data-theme="dark"] .ysb-paycard__head div span { color: var(--ysb-d-text); } .ysb-ticks { list-style: none; margin: .5rem 0 0; padding: .5rem 0 0; border-top: 1px solid var(--ysb-border); display: grid; gap: .5rem; } .ysb-ticks li { position: relative; padding-left: 2rem; color: var(--ysb-navy); } .ysb-ticks li::before { content: "\2713"; position: absolute; left: 0; top: -.05rem; width: 1.45rem; height: 1.45rem; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: .8rem; } .ysb-ticks--green li::before { background: rgba(12, 221, 107, .18); color: #079a4a; } .ysb-ticks--pink li::before { background: rgba(241, 95, 145, .18); color: #c93a6c; } .ysb-ticks--blue li::before { background: rgba(31, 193, 224, .18); color: #0b7f96; } .ysb-faqs { display: grid; gap: .6rem; margin: 0 0 1.25rem; } .ysb-faq { border: 1.5px solid #a8e3f1; border-radius: 12px; background: var(--ysb-white); } html[data-theme="dark"] .ysb-faq, html[data-theme="dark"] .ysb-accordion { border-color: rgba(31, 193, 224, .35); } .ysb-faq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem; padding: .65rem .9rem; font-weight: 700; color: #1d2f86; font-size: 1.02rem; } html[data-theme="dark"] .ysb-faq > summary { color: var(--ysb-d-text); } .ysb-faq > summary::-webkit-details-marker { display: none; } .ysb-faq > summary::after { content: "+"; margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--ysb-blue); color: var(--ysb-blue); display: grid; place-items: center; font-size: 1.1rem; line-height: 1; } .ysb-faq[open] > summary::after { content: "\2212"; } .ysb-faq > p, .ysb-faq__body { margin: 0; padding: 0 1rem 1rem 4.2rem; color: var(--ysb-navy); line-height: 1.6; } @media (max-width: 599px) { .ysb-faq > p, .ysb-faq__body { padding-left: 1rem; } } .ysb-faq__body .ysb-infocard { margin: .6rem 0; } .ysb-wa { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: .75rem 0 .5rem; } .ysb-wa__number { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.35rem; font-weight: 800; color: #0cbf5d !important; text-decoration: none !important; padding-left: 1rem; border-left: 2px solid var(--ysb-border); } .ysb-infocard .ysb-infocard__icon--wa { color: #fff; background: #25D366; } /* ---------------------------------------------------------------- School Partnerships + Bring YourSchoolBox (pp.28-29) */ .ysb-partnerpage { padding: 1.5rem 0 2rem; } .ysb-partnerhero { display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: 20px; background: linear-gradient(135deg, #eef8fd, #ffffff); border: 1px solid var(--ysb-border); box-shadow: var(--ysb-shadow); } @media (min-width: 900px) { .ysb-partnerhero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .ysb-partnerhero__body { padding: 2rem 1.75rem; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; justify-content: center; } .ysb-partnerhero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.1; color: var(--ysb-navy); } .ysb-partnerhero p { margin: 0; color: var(--ysb-muted); font-size: 1.02rem; max-width: 34rem; } .ysb-underline { background: linear-gradient(transparent 82%, var(--ysb-orange) 82%, var(--ysb-orange) 94%, transparent 94%); padding-bottom: .1rem; } .ysb-partnerhero__media { min-height: 260px; } .ysb-partnerhero__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ysb-partnerhero__media--icon { display: grid; place-items: center; color: var(--ysb-blue); background: radial-gradient(circle, rgba(31, 193, 224, .18), transparent 70%); } html[data-theme="dark"] .ysb-partnerhero { background: linear-gradient(135deg, #12306a, var(--ysb-d-surface)); } .ysb-benefits { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .ysb-benefits { grid-template-columns: 1fr 1fr; } } .ysb-benefit { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1.4rem; border-radius: 16px; background: var(--ysb-white); border: 2px solid; box-shadow: var(--ysb-shadow); } .ysb-benefit strong { display: block; font-size: 1.1rem; color: var(--ysb-navy); } .ysb-benefit p { margin: .2rem 0 0; color: var(--ysb-muted); } .ysb-benefit--green { border-color: var(--ysb-green); } .ysb-benefit--pink { border-color: var(--ysb-pink); } .ysb-benefit--orange { border-color: var(--ysb-orange); } .ysb-benefit--blue { border-color: var(--ysb-blue); } .ysb-conversation { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; padding: 1.75rem; border-radius: 20px; background: linear-gradient(135deg, #eef8fd, #fdf3f7); scroll-margin-top: 140px; } @media (min-width: 900px) { .ysb-conversation { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding: 2.25rem; } } html[data-theme="dark"] .ysb-conversation { background: linear-gradient(135deg, #12306a, #2a1d4d); } .ysb-conversation__intro h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); font-weight: 800; color: var(--ysb-navy); margin: 0 0 .35rem; } .ysb-conversation__intro h3 { font-size: 1.1rem; font-weight: 700; color: var(--ysb-navy); margin: 1.25rem 0 .5rem; } .ysb-conversation__intro p { color: var(--ysb-muted); } .ysb-conversation__form h2 { font-size: 1.5rem; font-weight: 800; color: var(--ysb-navy); margin: .4rem 0 1rem; } .ysb-stripes { display: flex; gap: .35rem; } .ysb-stripes i { width: 30px; height: 5px; border-radius: 4px; background: var(--ysb-pink); } .ysb-stripes i:nth-child(2) { background: var(--ysb-orange); } .ysb-stripes i:nth-child(3) { background: var(--ysb-green); } .ysb-numbered { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .ysb-numbered li { display: flex; align-items: center; gap: .65rem; color: var(--ysb-navy); } .ysb-num { flex: none; width: 28px; height: 28px; border-radius: 999px; display: inline-grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff; } .ysb-num--green { background: var(--ysb-green); color: #112755; } .ysb-num--orange { background: var(--ysb-orange); } .ysb-num--pink { background: var(--ysb-pink); } .ysb-num--blue { background: var(--ysb-blue); color: #112755; } .ysb-howsteps { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .ysb-howsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ysb-howstep { display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem; border-radius: 16px; background: var(--ysb-white); border: 1px solid var(--ysb-border); box-shadow: var(--ysb-shadow); } .ysb-howstep strong { color: var(--ysb-navy); font-size: 1.05rem; } .ysb-howstep p { margin: 0; color: var(--ysb-muted); } /* ---------------------------------------------------------------- Select Your School List (p.27) */ .ysb-schoolhero { min-height: 230px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: left; padding: 2rem 2.5rem 4.5rem; background: linear-gradient(110deg, #dff4fb 0%, #eef8fd 45%, #fdf1f6 100%); } .ysb-schoolhero > * { max-width: 30rem; width: 100%; } .ysb-schoolhero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.05; color: var(--ysb-navy); } .ysb-schoolhero p { margin: .6rem 0 0; color: var(--ysb-muted); } @media (max-width: 767px) { .ysb-schoolhero { align-items: flex-start; padding: 1.5rem 1.25rem 2.5rem; min-height: 0; } } html[data-theme="dark"] .ysb-schoolhero { background: linear-gradient(110deg, #12306a, #172F60 60%, #2a1d4d); } .ysb-home__panel-sub--left { text-align: left; } .ysb-schools { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .ysb-schools { grid-template-columns: 1fr 1fr; } } .ysb-schools > li.is-more { display: none; } .ysb-schools.is-all > li.is-more { display: block; } /* Featured Schools (Aqeel 2026-10-17): 5 on phones, 2 x 5 = 10 on narrower screens, 3 x 5 = 15 on wide screens */ .ysb-schools--featured > li:nth-child(n+6) { display: none; } @media (min-width: 768px) { .ysb-schools--featured > li:nth-child(n+6) { display: block; } .ysb-schools--featured > li:nth-child(n+11) { display: none; } } @media (min-width: 1100px) { .ysb-schools--featured, .ysb-schools--all { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ysb-schools--featured > li:nth-child(n+11) { display: block; } .ysb-schools--featured > li:nth-child(n+16) { display: none; } } .ysb-schools__alltitle { margin-top: 1.5rem; } .ysb-schoolcard { display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem; border: 1px solid var(--ysb-border); border-radius: 12px; background: var(--ysb-white); color: var(--ysb-navy) !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s, transform .15s; } .ysb-schoolcard:hover { border-color: var(--ysb-blue); box-shadow: var(--ysb-shadow-lg); transform: translateY(-1px); } .ysb-schoolcard__crest { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 10px; background: var(--ysb-image-well, #eef2f7); color: #5d6b82; overflow: hidden; } .ysb-schoolcard__crest img { width: 100%; height: 100%; object-fit: contain; } .ysb-schoolcard__text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .8rem; color: var(--ysb-muted); } .ysb-schoolcard__text strong { font-size: .98rem; color: var(--ysb-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ysb-schoolcard__go { flex: none; color: var(--ysb-navy); } .ysb-schools__more { text-align: center; margin-top: 1.25rem; } .ysb-schools__missing { text-align: center; margin: 1rem 0 0; color: var(--ysb-muted); font-size: .92rem; } /* ---------------------------------------------------------------- My Account (p.31) */ .ysb-account { padding: 1.5rem 0 2.5rem; } .ysb-account__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; } .ysb-account__head h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; color: var(--ysb-navy); } .ysb-account__head p { margin: .2rem 0 0; color: var(--ysb-muted); } .ysb-account__head .ysb-btn { border-radius: 999px; } .ysb-latestorder { padding: 1.25rem 1.5rem; margin: 0 0 1.5rem; border-left: 6px solid var(--ysb-blue); } .ysb-latestorder h2 { font-size: 1.25rem; font-weight: 700; color: var(--ysb-navy); margin: 0 0 .75rem; padding-bottom: .6rem; border-bottom: 1px solid var(--ysb-border); } .ysb-latestorder__row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; } .ysb-latestorder dl { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin: 0; } .ysb-latestorder dt { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ysb-muted); } .ysb-latestorder dd { margin: .15rem 0 0; font-size: 1.1rem; font-weight: 800; color: var(--ysb-navy); } .ysb-latestorder__actions { display: flex; gap: .6rem; flex-wrap: wrap; } .ysb-latestorder__actions .ysb-btn { border-radius: 999px; } .ysb-accountcards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .ysb-accountcards { grid-template-columns: 1fr 1fr; } } .ysb-accountcard { background: var(--ysb-white); border: 1px solid var(--ysb-border); border-radius: 16px; overflow: hidden; box-shadow: var(--ysb-shadow); } .ysb-accountcard h2 { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .9rem 1.25rem; font-size: 1.25rem; font-weight: 700; color: #fff; } .ysb-accountcard--blue h2 { background: var(--ysb-blue); color: #112755; } .ysb-accountcard--green h2 { background: var(--ysb-green); color: #112755; } .ysb-accountcard--orange h2 { background: var(--ysb-orange); color: #112755; } .ysb-accountcard--pink h2 { background: var(--ysb-pink); color: #112755; } .ysb-accountcard ul { list-style: none; margin: 0; padding: .6rem 1rem 1rem; } .ysb-accountcard li a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .6rem; border-bottom: 1px solid var(--ysb-border); color: var(--ysb-navy) !important; font-weight: 600; text-decoration: none !important; border-radius: 8px; } .ysb-accountcard li:last-child a { border-bottom: 0; } .ysb-accountcard li a:hover { background: var(--ysb-blue-tint); box-shadow: inset 4px 0 0 var(--ysb-blue); } /* the 2026-10-10 Help Centre was one narrow column; the v3 one is full width with the page container inside */ .ysb-scope.ysb-help { max-width: none; padding-top: 0; } /* ---------- School sign-up + account chooser (design v4 Canva p.39-43, 2026-10-16). Tokens only, so dark mode follows. ---------- */ .ysb-pill--orange { background: rgba(237, 133, 52, .16); color: #B85E14; } html[data-theme="dark"] .ysb-pill--orange { color: #F7A766; } .ysb-field__error { display: block; color: #C2185B; font-size: .82rem; margin-top: .25rem; } html[data-theme="dark"] .ysb-field__error { color: #FF75A4; } .ysb-field__error:empty { display: none; } .ysb-signup { padding: 1.5rem 0 3rem; } .ysb-signup__head { margin: 0 0 1.25rem; } .ysb-signup__head h1 { margin: .4rem 0 .25rem; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; color: var(--ysb-navy); } .ysb-signup__head p { margin: 0; color: var(--ysb-muted); } .ysb-signup__head--center { text-align: center; } .ysb-signup__card { position: relative; display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 2rem; padding: 2rem; overflow: hidden; } .ysb-signup__side { background: var(--ysb-blue-tint); border-radius: var(--ysb-radius-lg); padding: 1.5rem; align-self: start; } .ysb-signup__side h2 { font-size: 1.5rem; font-weight: 800; color: var(--ysb-navy); margin: 0 0 .5rem; line-height: 1.2; } .ysb-signup__side h2 span { color: var(--ysb-orange); } .ysb-signup__side p { color: var(--ysb-muted); margin: 0 0 1rem; } .ysb-signup__steps { list-style: none; margin: 0 0 1rem; padding: 0; } .ysb-signup__steps li { padding: .55rem .75rem; border-radius: 10px; color: var(--ysb-muted); font-size: .9rem; } .ysb-signup__steps li strong { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; } .ysb-signup__steps li.is-current { background: var(--ysb-white); color: var(--ysb-navy); box-shadow: inset 4px 0 0 var(--ysb-green); } .ysb-signup__perks { list-style: none; margin: 0; padding: 0; } .ysb-signup__perks li { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; color: var(--ysb-navy); font-weight: 600; font-size: .92rem; } .ysb-signup__form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .ysb-signup__legend { display: block; font-size: 1.35rem; font-weight: 800; color: var(--ysb-navy); margin: 0 0 1rem; } .ysb-signup__legend span { display: block; font-size: .85rem; font-weight: 400; color: var(--ysb-muted); } .ysb-signup__phone { display: flex; align-items: stretch; } .ysb-signup__phone span { display: flex; align-items: center; padding: 0 .75rem; border: 1px solid var(--ysb-border); border-right: 0; border-radius: var(--ysb-radius) 0 0 var(--ysb-radius); background: var(--ysb-grey); color: var(--ysb-muted); font-weight: 600; } .ysb-signup__phone .ysb-input { border-radius: 0 var(--ysb-radius) var(--ysb-radius) 0; } .ysb-signup__pw { position: relative; } .ysb-signup__pw .ysb-input { padding-right: 2.75rem; } .ysb-signup__eye { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--ysb-muted); cursor: pointer; padding: .25rem; } .ysb-signup__hint { background: var(--ysb-grey); border-radius: 10px; padding: .6rem .85rem; font-size: .85rem; color: var(--ysb-navy); margin: .25rem 0 .9rem; } .ysb-signup__tick { display: flex; gap: .55rem; align-items: flex-start; margin: .5rem 0 .25rem; font-size: .9rem; color: var(--ysb-navy); cursor: pointer; } .ysb-signup__tick input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--ysb-blue); flex: 0 0 auto; } .ysb-signup__small { text-align: center; font-size: .82rem; color: var(--ysb-muted); margin: .75rem 0 0; } .ysb-signup__form .ysb-btn--block { margin-top: 1rem; } .ysb-signup__three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; } .ysb-signup__typehead { background: #112755; color: #fff; border-radius: var(--ysb-radius); padding: .8rem 1rem; margin: 1rem 0 .75rem; } html[data-theme="dark"] .ysb-signup__typehead { background: var(--ysb-d-raised); } .ysb-signup__typehead strong { display: block; } .ysb-signup__typehead span { font-size: .85rem; opacity: .85; } .ysb-signup__types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0 0 .75rem; } .ysb-signup__type { display: flex; gap: .6rem; border: 2px solid var(--ysb-border); border-radius: var(--ysb-radius-lg); padding: 1rem; cursor: pointer; background: var(--ysb-white); } .ysb-signup__type:has(input:checked) { border-color: var(--ysb-green); box-shadow: 0 0 0 3px rgba(12, 221, 107, .18); } .ysb-signup__type input { margin-top: .25rem; accent-color: var(--ysb-green); } .ysb-signup__typebody strong { display: block; color: var(--ysb-navy); font-size: 1.05rem; } .ysb-signup__typebody > span { display: block; color: var(--ysb-muted); font-size: .88rem; margin: .15rem 0 .4rem; } .ysb-signup__typebody ul { margin: 0 0 .35rem 1.1rem; padding: 0; list-style: disc; color: var(--ysb-navy); font-size: .85rem; } .ysb-signup__typebody small { color: var(--ysb-muted); font-size: .78rem; } .ysb-signup__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.25rem; } .ysb-signup__done { position: relative; max-width: 44rem; margin: 0 auto; padding: 2.5rem 2rem 2rem; text-align: center; overflow: hidden; } .ysb-signup__done h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 800; color: var(--ysb-navy); margin: .6rem 0 .4rem; } .ysb-signup__done > p { color: var(--ysb-muted); margin: 0 auto 1.25rem; max-width: 34rem; } .ysb-signup__doneicon { display: inline-flex; width: 4.5rem; height: 4.5rem; align-items: center; justify-content: center; border-radius: 50%; background: rgba(12, 221, 107, .16); color: #08A853; margin-bottom: .5rem; } .ysb-signup__doneicon.is-orange { background: rgba(237, 133, 52, .16); color: #D06A1A; } .ysb-signup__box { text-align: left; border: 1px solid var(--ysb-border); border-radius: var(--ysb-radius-lg); padding: 1rem 1.25rem; margin: 0 0 .75rem; background: var(--ysb-white); } .ysb-signup__box strong { display: block; color: var(--ysb-navy); margin-bottom: .25rem; } .ysb-signup__box span, .ysb-signup__box small { color: var(--ysb-muted); font-size: .9rem; } .ysb-signup__box .ysb-numbered { margin: .5rem 0; } .ysb-signup__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0 0 1.25rem; } .ysb-signup__choice { border-radius: var(--ysb-radius-lg); padding: 1.75rem; background: var(--ysb-white); border: 1px solid var(--ysb-border); border-top: 6px solid var(--ysb-pink); box-shadow: var(--ysb-shadow); display: flex; flex-direction: column; } .ysb-signup__choice--green { border-top-color: var(--ysb-green); } .ysb-signup__choice h2 { font-size: 1.5rem; font-weight: 800; color: var(--ysb-navy); margin: .3rem 0 .4rem; } .ysb-signup__choice p { color: var(--ysb-muted); margin: 0 0 .75rem; } .ysb-signup__choice ul { list-style: none; margin: 0 0 1.25rem; padding: 0; flex: 1; } .ysb-signup__choice li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; color: var(--ysb-navy); } .ysb-signup__choice li .ysb-icon { color: #08A853; } html[data-theme="dark"] .ysb-signup__choice li .ysb-icon { color: #3BE88A; } .ysb-signup__kicker { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ysb-muted); } .ysb-signup__back { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; } .ysb-signup__back strong { display: block; color: var(--ysb-navy); font-size: 1.1rem; } @media (max-width: 860px) { .ysb-signup__card { grid-template-columns: 1fr; padding: 1.25rem; gap: 1.25rem; } .ysb-signup__side { display: none; } .ysb-signup__three, .ysb-signup__types, .ysb-signup__choices { grid-template-columns: 1fr; } } /* ---------- Email verification pop-up (design v4 p.47-48, 2026-10-17) ---------- */ .ysb-verify { border: 0; border-radius: var(--ysb-radius-lg); padding: 0; width: min(28rem, 92vw); background: var(--ysb-white); color: var(--ysb-navy); box-shadow: var(--ysb-shadow-lg); } .ysb-verify::backdrop { background: rgba(8, 22, 48, .6); } .ysb-verify__view { padding: 2rem 1.75rem 1.5rem; text-align: center; } .ysb-verify__view h2 { font-size: 1.45rem; font-weight: 800; margin: .5rem 0; color: var(--ysb-navy); } .ysb-verify__view p { color: var(--ysb-muted); margin: 0 0 .75rem; font-size: .92rem; } .ysb-verify__view p strong { color: var(--ysb-navy); } .ysb-verify__icon { display: inline-flex; width: 4rem; height: 4rem; border-radius: 50%; align-items: center; justify-content: center; background: rgba(12, 221, 107, .16); color: #08A853; } .ysb-verify__icon.is-orange { background: rgba(237, 133, 52, .16); color: #D06A1A; } .ysb-verify__email { display: inline-block; background: var(--ysb-blue-tint); color: var(--ysb-navy) !important; font-weight: 700; border-radius: 999px; padding: .4rem 1rem; word-break: break-all; } .ysb-verify .ysb-btn--block { margin-top: .6rem; } .ysb-verify__small { font-size: .85rem !important; margin: .6rem 0 0 !important; } .ysb-verify__link { border: 0; background: none; padding: 0; color: #0b7f96; font-weight: 700; cursor: pointer; text-decoration: underline; } html[data-theme="dark"] .ysb-verify__link { color: #5FD4EE; } .ysb-verify__status { font-size: .88rem !important; color: #C2185B !important; margin-top: .75rem !important; } .ysb-verify__status.is-ok { color: #08A853 !important; } html[data-theme="dark"] .ysb-verify__status.is-ok { color: #3BE88A !important; } .ysb-verify__note { background: rgba(241, 95, 145, .12); border-radius: 10px; padding: .45rem .75rem; font-size: .78rem !important; margin-top: 1rem !important; } .ysb-verify .ysb-field { text-align: left; } /* ---------- Sign in / Create account (design v4 p.38, p.44, 2026-10-17) ---------- */ .ysb-btn--outline-navy { background: transparent; color: var(--ysb-navy); border: 2px solid var(--ysb-navy); } .ysb-btn--outline-navy:hover { background: var(--ysb-navy); color: var(--ysb-white); } .ysb-acct { padding-top: 2.25rem; } .ysb-acct__bar { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--ysb-green); } .ysb-acct__rule { display: block; width: 3rem; height: 4px; border-radius: 4px; background: var(--ysb-orange); margin: .6rem auto 0; } .ysb-acctside { position: relative; overflow: hidden; } .ysb-acctside h2 span { color: var(--ysb-orange); } .ysb-acctside__list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .6rem; } .ysb-acctside__list li { display: flex; gap: .75rem; align-items: center; background: var(--ysb-white); border-radius: 12px; padding: .7rem .85rem; box-shadow: var(--ysb-shadow); } .ysb-acctside__list strong { display: block; color: var(--ysb-navy); font-size: .92rem; } .ysb-acctside__list li span:last-child { color: var(--ysb-muted); font-size: .8rem; line-height: 1.35; } .ysb-acctside__ic { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ysb-grey); } .ysb-acctside__pill { display: inline-flex; align-items: center; gap: .3rem; background: #112755; color: #fff; border-radius: 999px; padding: .45rem 1rem; font-size: .8rem; font-weight: 700; } html[data-theme="dark"] .ysb-acctside__pill { background: var(--ysb-d-raised); } .ysb-acctside__pill i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ysb-green); } .ysb-acctside__pill i:nth-child(2) { background: var(--ysb-orange); } .ysb-acctside__pill i:nth-child(3) { background: var(--ysb-pink); } .ysb-acctside__pill i:nth-child(4) { background: var(--ysb-blue); margin-right: .35rem; } .ysb-acct__iconfield { position: relative; } .ysb-acct__iconfield > .ysb-icon:first-child { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--ysb-muted); pointer-events: none; } .ysb-acct__iconfield .ysb-input { padding-left: 2.6rem; } .ysb-acct__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin: .25rem 0 .5rem; } .ysb-acct__link { color: #0b7f96; font-weight: 600; font-size: .88rem; } html[data-theme="dark"] .ysb-acct__link { color: #5FD4EE; } .ysb-acct__divider { display: flex; align-items: center; gap: .75rem; color: var(--ysb-muted); font-size: .82rem; margin: 1.25rem 0 .25rem; } .ysb-acct__divider::before, .ysb-acct__divider::after { content: ""; flex: 1; height: 1px; background: var(--ysb-border); } .ysb-acct__snapplify { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .75rem; font-weight: 600; font-size: .9rem; color: var(--ysb-navy); } .ysb-acct__secure { display: flex; align-items: center; gap: .5rem; background: rgba(12, 221, 107, .12); color: var(--ysb-navy); border-radius: 10px; padding: .6rem .85rem; font-size: .85rem; font-weight: 600; margin-top: 1rem; } .ysb-acct__secure .ysb-icon { color: #08A853; } .ysb-signup__optional { color: var(--ysb-muted); font-size: .78rem; } /* ---------- My Account frame + account pages (design v4 p.31-37, 2026-10-17) ---------- */ .ysb-acctpage { padding: 1.5rem 0 2.5rem; } .ysb-acctpage__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; margin: 0 0 1.25rem; } .ysb-acctpage__head h1 { margin: 0; font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 800; color: var(--ysb-navy); } .ysb-acctpage__head p { margin: .2rem 0 .35rem; color: var(--ysb-muted); } .ysb-acctpage__crumbs { display: flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--ysb-muted); } .ysb-acctpage__crumbs a { color: #0b7f96; font-weight: 600; } html[data-theme="dark"] .ysb-acctpage__crumbs a { color: #5FD4EE; } .ysb-acctpage__hi { font-weight: 700; color: var(--ysb-navy); background: var(--ysb-blue-tint); border-radius: 999px; padding: .4rem 1rem; } .ysb-acctpage__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .ysb-acctpage__grid { grid-template-columns: 270px minmax(0, 1fr); } } .ysb-acctpage__main { min-width: 0; } .ysb-acctmenu { display: flex; flex-direction: column; padding: 1rem .75rem; gap: .1rem; } @media (min-width: 900px) { .ysb-acctmenu { position: sticky; top: calc(var(--ysb-header-h) + 1rem); } } .ysb-acctmenu__title { font-size: 1.05rem; color: var(--ysb-navy); padding: .25rem .6rem .6rem; } .ysb-acctmenu a, .ysb-acctmenu__soon { display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem; border-radius: 10px; color: var(--ysb-navy) !important; font-weight: 600; font-size: .92rem; text-decoration: none !important; } .ysb-acctmenu a .ysb-icon { border-radius: 8px; padding: .2rem; } .ysb-acctmenu a:hover { background: var(--ysb-grey); } .ysb-acctmenu a.is-active { background: var(--ysb-blue-tint); box-shadow: inset 4px 0 0 var(--ysb-blue); } .ysb-acctmenu__soon { color: var(--ysb-muted) !important; opacity: .65; cursor: not-allowed; } .ysb-acctmenu__soon em, .ysb-accountcard__soon em { margin-left: auto; font-style: normal; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--ysb-grey); border-radius: 999px; padding: .15rem .5rem; } .ysb-acctmenu hr { margin: .4rem .6rem; border: 0; border-top: 1px solid var(--ysb-border); background: none; height: 0; } @media (max-width: 899px) { .ysb-acctmenu { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: .5rem; gap: .35rem; } .ysb-acctmenu__title, .ysb-acctmenu hr, .ysb-acctmenu__soon { display: none; } .ysb-acctmenu a { flex: none; white-space: nowrap; } } .ysb-acctform { padding: 1.5rem; } .ysb-acctform__title { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; font-weight: 700; color: var(--ysb-navy); margin: 0 0 1rem; } .ysb-acctform__title .ysb-icon { border-radius: 10px; padding: .25rem; } .ysb-acctform__form { max-width: 36rem; } .ysb-acctform__form--wide { max-width: 48rem; } .ysb-acctform__two { display: grid; gap: 0 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .ysb-acctform__two { grid-template-columns: 1fr 1fr; } } .ysb-acctform__badge { display: inline-flex; align-items: center; gap: .25rem; margin-left: .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: .15rem .55rem; background: rgba(237, 133, 52, .16); color: #B85E14; vertical-align: middle; } .ysb-acctform__badge--ok { background: rgba(12, 221, 107, .16); color: #067a3b; } html[data-theme="dark"] .ysb-acctform__badge { color: #F7A766; } html[data-theme="dark"] .ysb-acctform__badge--ok { color: #3BE88A; } .ysb-acctform__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; } .ysb-acctform__actions .ysb-btn { border-radius: 999px; } .ysb-acctform__actions--center { justify-content: center; } .ysb-field__hint { display: block; color: var(--ysb-muted); font-size: .8rem; margin-top: .3rem; } .ysb-pwrules { list-style: none; margin: -.4rem 0 1rem; padding: 0; display: grid; gap: .25rem; font-size: .82rem; color: var(--ysb-muted); } .ysb-pwrules li::before { content: "\25CB"; display: inline-block; width: 1.2rem; font-weight: 700; } .ysb-pwrules li.is-ok { color: #067a3b; } .ysb-pwrules li.is-ok::before { content: "\2713"; } html[data-theme="dark"] .ysb-pwrules li.is-ok { color: #3BE88A; } .ysb-acctbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 1rem; } .ysb-acctbar .ysb-acctform__title { margin: 0; } .ysb-acctbar .ysb-btn { border-radius: 999px; } .ysb-acctbar__count { font-size: .8rem; font-weight: 700; background: var(--ysb-grey); color: var(--ysb-muted); border-radius: 999px; padding: .1rem .55rem; } .ysb-acctempty { text-align: center; padding: 2rem 1.5rem; margin: 0 0 1rem; } .ysb-acctempty > .ysb-icon { border-radius: 50%; padding: .6rem; } .ysb-acctempty h3 { font-size: 1.15rem; font-weight: 700; color: var(--ysb-navy); margin: .6rem 0 .25rem; } .ysb-acctempty p { color: var(--ysb-muted); margin: 0 0 1rem; } .ysb-acctempty .ysb-btn { border-radius: 999px; } .ysb-acctconfirm .ysb-field { text-align: left; } /* addresses */ .ysb-addrcards { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 700px) { .ysb-addrcards { grid-template-columns: 1fr 1fr; } } .ysb-addrcard { display: flex; flex-direction: column; padding: 1.1rem 1.25rem; border-top: 5px solid var(--ysb-border); } .ysb-addrcard.is-default { border-top-color: var(--ysb-green); } .ysb-addrcard header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .5rem; color: var(--ysb-navy); } .ysb-addrcard address { font-style: normal; color: var(--ysb-muted); font-size: .9rem; line-height: 1.55; flex: 1; } .ysb-addrcard__phone { display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; } .ysb-addrcard footer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--ysb-border); } .ysb-addrcard footer form { margin: 0; } .ysb-addrcard footer .ysb-btn { border-radius: 999px; } .ysb-addrcard__delete { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; color: #c93a6c; font-weight: 600; font-size: .85rem; cursor: pointer; padding: .3rem; } html[data-theme="dark"] .ysb-addrcard__delete { color: #FF75A4; } .ysb-addrtype { display: flex; flex-wrap: wrap; gap: .5rem; } .ysb-addrtype label { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1.1rem; border-radius: 999px; border: 2px solid var(--ysb-border); font-weight: 600; color: var(--ysb-navy); cursor: pointer; } .ysb-addrtype label.blue-button-selected { border-color: var(--ysb-blue); background: var(--ysb-blue-tint); } .ysb-addrtype label.orange-button-selected { border-color: var(--ysb-orange); background: rgba(237, 133, 52, .14); } .ysb-addrmaps .input { min-height: 46px; border-radius: 10px; } .ysb-addrmaps .label { color: var(--ysb-navy); } /* dashboard */ .ysb-account__verify { align-items: flex-start; } .ysb-account__verifyacts { display: block; margin-top: .35rem; } .ysb-account__verifymsg { display: block; font-size: .85rem; margin-top: .25rem; } .ysb-accountcard__soon { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .6rem; border-bottom: 1px solid var(--ysb-border); color: var(--ysb-muted); font-weight: 600; opacity: .65; cursor: not-allowed; } .ysb-accountcard li:last-child .ysb-accountcard__soon { border-bottom: 0; } .ysb-latestorder__none { margin: 0; color: var(--ysb-muted); } .ysb-latestorder__none strong { color: var(--ysb-navy); } .ysb-account__hand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; margin-top: 1.5rem; border-left: 6px solid var(--ysb-green); } .ysb-account__hand h2 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--ysb-navy); } .ysb-account__hand p { margin: .2rem 0 0; color: var(--ysb-muted); } .ysb-account__handacts { display: flex; flex-wrap: wrap; gap: .6rem; } .ysb-account__handacts .ysb-btn { border-radius: 999px; } /* orders */ .ysb-orderfilters { display: flex; flex-wrap: wrap; gap: .75rem; padding: .85rem; margin: 0 0 1rem; } .ysb-orderfilters label { position: relative; display: block; margin: 0; } .ysb-orderfilters label > .ysb-icon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--ysb-muted); pointer-events: none; } .ysb-orderfilters .ysb-input { padding-left: 2.5rem; } .ysb-orderfilters__search { flex: 1 1 16rem; } .ysb-orderfilters__when { flex: 0 1 13rem; } .ysb-orderfilters__none { color: var(--ysb-muted); text-align: center; padding: 1rem; } .ysb-ordercards { display: grid; gap: 1rem; } .ysb-ordercard { padding: 1.1rem 1.25rem; } .ysb-ordercard__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .ysb-ordercard__kicker { display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ysb-muted); } .ysb-ordercard__num { font-size: 1.15rem; color: var(--ysb-navy); } .ysb-orderstatus { font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .3rem .8rem; white-space: nowrap; } .ysb-orderstatus--blue { background: var(--ysb-blue-tint); color: #0b7f96; } .ysb-orderstatus--green { background: rgba(12, 221, 107, .16); color: #067a3b; } .ysb-orderstatus--orange { background: rgba(237, 133, 52, .16); color: #B85E14; } .ysb-orderstatus--pink { background: rgba(241, 95, 145, .16); color: #b02a5a; } html[data-theme="dark"] .ysb-orderstatus--blue { color: #5FD4EE; } html[data-theme="dark"] .ysb-orderstatus--green { color: #3BE88A; } html[data-theme="dark"] .ysb-orderstatus--orange { color: #F7A766; } html[data-theme="dark"] .ysb-orderstatus--pink { color: #FF75A4; } .ysb-ordercard__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; margin: .9rem 0; } @media (min-width: 640px) { .ysb-ordercard__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ysb-ordercard__facts dt { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ysb-muted); } .ysb-ordercard__facts dd { margin: .1rem 0 0; font-weight: 700; color: var(--ysb-navy); } .ysb-ordercard__note { font-size: .85rem; color: #b02a5a; margin: 0 0 .6rem; } html[data-theme="dark"] .ysb-ordercard__note { color: #FF75A4; } .ysb-ordercard__actions { display: flex; flex-wrap: wrap; gap: .5rem; } .ysb-ordercard__actions form { margin: 0; } .ysb-ordercard__actions .ysb-btn { border-radius: 999px; } .ysb-ordercard__detail { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ysb-border); } .ysb-ordercard__group { font-size: .95rem; font-weight: 700; color: var(--ysb-navy); margin: .75rem 0 .35rem; } .ysb-orderlines { list-style: none; margin: 0; padding: 0; } .ysb-orderlines li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .75rem; padding: .45rem 0; border-bottom: 1px dashed var(--ysb-border); font-size: .88rem; color: var(--ysb-navy); } .ysb-orderlines small { display: block; color: var(--ysb-muted); font-size: .75rem; } .ysb-orderlines li span:nth-child(2) { color: var(--ysb-muted); } .ysb-orderlines li span:last-child { font-weight: 700; text-align: right; min-width: 5.5rem; } .ysb-ordersum { margin: 1rem 0 0 auto; max-width: 20rem; } .ysb-ordersum div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; font-size: .9rem; color: var(--ysb-muted); } .ysb-ordersum dd { margin: 0; color: var(--ysb-navy); font-weight: 600; } .ysb-ordersum__total { border-top: 1px solid var(--ysb-border); margin-top: .3rem; padding-top: .5rem !important; } .ysb-ordersum__total dt, .ysb-ordersum__total dd { color: var(--ysb-navy); font-weight: 800; font-size: 1.05rem; } /* favourites */ .ysb-favcards { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .ysb-favcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .ysb-favcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ysb-favcard { display: flex; flex-direction: column; padding: 1.1rem 1.25rem; border-top: 5px solid var(--ysb-border); } .ysb-favcard--orange { border-top-color: var(--ysb-orange); } .ysb-favcard--blue { border-top-color: var(--ysb-blue); } .ysb-favcard--green { border-top-color: var(--ysb-green); } .ysb-favcard--pink { border-top-color: var(--ysb-pink); } .ysb-favcard__open { display: flex; flex-direction: column; gap: .2rem; flex: 1; color: var(--ysb-navy) !important; text-decoration: none !important; } .ysb-favcard__open strong, .ysb-favcard--new > strong { font-size: 1.05rem; color: var(--ysb-navy); margin-top: .5rem; } .ysb-favcard__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; } .ysb-favcard__meta { color: var(--ysb-muted); font-size: .85rem; } .ysb-favcard__total { font-weight: 800; font-size: 1.15rem; margin-top: .25rem; } .ysb-favcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--ysb-border); } .ysb-favcard__actions .ysb-btn { border-radius: 999px; } .ysb-favcard__link { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; padding: .25rem 0; font-weight: 600; font-size: .85rem; color: #0b7f96; cursor: pointer; } .ysb-favcard__link--danger { color: #c93a6c; } html[data-theme="dark"] .ysb-favcard__link { color: #5FD4EE; } html[data-theme="dark"] .ysb-favcard__link--danger { color: #FF75A4; } .ysb-favcard--new { border-top-style: dashed; border-top-color: var(--ysb-green); } .ysb-favcard__create { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; } .ysb-favcard__create .ysb-btn { border-radius: 999px; align-self: flex-start; } .ysb-favsum { border-radius: var(--ysb-radius-lg) !important; } .ysb-favsum__back { display: inline-flex; align-items: center; gap: .2rem; font-size: .85rem; font-weight: 600; color: #0b7f96; margin-bottom: .5rem; } html[data-theme="dark"] .ysb-favsum__back { color: #5FD4EE; } .ysb-favsum .ysb-btn { border-radius: 999px; margin-top: .5rem; } /* ---------- Cart, checkout steps, list pop-up, confirmation (design v4 p.42-46, 2026-10-17) ---------- */ .ysb-cart { padding: 1.5rem 0 2.5rem; } .ysb-cart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; } .ysb-cart__head h1 { margin: 0; font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 800; color: var(--ysb-navy); } .ysb-checkout .ysb-cart__head { margin-top: 1rem; } .ysb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; counter-reset: none; } .ysb-steps li { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem .4rem .45rem; border-radius: 999px; background: var(--ysb-grey); color: var(--ysb-muted); font-size: .82rem; font-weight: 600; } .ysb-steps li a { display: inline-flex; align-items: center; gap: .45rem; color: inherit !important; text-decoration: none !important; } .ysb-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ysb-white); font-weight: 800; } .ysb-steps li.is-current { background: var(--ysb-orange); color: #112755; } .ysb-steps li.is-done { background: rgba(12, 221, 107, .16); color: var(--ysb-navy); } .ysb-steps li.is-done span { background: var(--ysb-green); color: #112755; } @media (max-width: 560px) { .ysb-steps li:not(.is-current) { font-size: 0; gap: 0; padding: .3rem; } .ysb-steps li:not(.is-current) span { font-size: .8rem; } } .ysb-cart__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; } @media (min-width: 1000px) { .ysb-cart__grid { grid-template-columns: minmax(0, 1fr) 360px; } } .ysb-cart__items { display: grid; gap: 1rem; min-width: 0; } .ysb-cart__side { min-width: 0; } @media (min-width: 1000px) { .ysb-cart__side { position: sticky; top: calc(var(--ysb-header-h) + 1rem); } } .ysb-cart__summary { padding: 1.25rem; } .ysb-cart__note { font-size: .85rem; color: var(--ysb-muted); margin: .75rem 0 .5rem; } .ysb-cart__note--ok { color: #067a3b; font-weight: 700; } html[data-theme="dark"] .ysb-cart__note--ok { color: #3BE88A; } .ysb-cart__go { margin-top: 1rem; border-radius: 999px; min-height: 50px; font-size: 1rem; } .ysb-cart__tools { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6rem; } .ysb-cart__tools .ysb-btn { border-radius: 999px; justify-content: center; } .ysb-cart__clear { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; color: var(--ysb-muted); font-size: .82rem; font-weight: 600; cursor: pointer; margin: .75rem auto 0; padding: .25rem; width: 100%; justify-content: center; } .ysb-cart__clear:hover { color: #c93a6c; } .ysb-cart__empty { max-width: 34rem; margin: 1rem auto; } .ysb-cart__emptyline { color: var(--ysb-muted); text-align: center; padding: 2rem 0; } .ysb-cart__mobilebar { display: none; } @media (max-width: 999px) { .ysb-cart { padding-bottom: 6rem; } .ysb-cart__mobilebar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: .7rem 16px; background: var(--ysb-white); border-top: 1px solid var(--ysb-border); box-shadow: 0 -6px 18px rgba(17, 39, 85, .1); } .ysb-cart__mobilebar small { display: block; color: var(--ysb-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; } .ysb-cart__mobilebar strong { font-size: 1.15rem; color: var(--ysb-navy); } .ysb-cart__mobilebar .ysb-btn { border-radius: 999px; } } /* voucher forms (CartVoucher component + Cart/_CartVoucher keep their Bulma markup; restyled here) */ .ysb-cart__voucher .voucher-container { display: flex; gap: .4rem; margin: 0; } .ysb-cart__voucher .voucher-input { flex: 1; position: relative; } .ysb-cart__voucher .voucher-input .input { width: 100%; min-height: 44px; border: 1.5px solid var(--ysb-border) !important; border-radius: 10px !important; background: var(--ysb-white); color: var(--ysb-navy); box-shadow: none; } .ysb-cart__voucher .voucher-button .button { min-height: 44px; border-radius: 999px !important; background: var(--ysb-navy) !important; color: #fff !important; border: 0; font-weight: 700; font-size: .78rem; padding: 0 1rem !important; } .ysb-cart__voucher .voucher-button .button.is-danger { background: #c93a6c !important; } /* cart groups + lines */ .ysb-cartgroup { padding: 1rem 1.1rem .75rem; border-top: 5px solid var(--ysb-border); } .ysb-cartgroup--blue { border-top-color: var(--ysb-blue); } .ysb-cartgroup--green { border-top-color: var(--ysb-green); } .ysb-cartgroup--orange { border-top-color: var(--ysb-orange); } .ysb-cartgroup--pink { border-top-color: var(--ysb-pink); } .ysb-cartgroup__head { display: flex; align-items: center; gap: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--ysb-border); } .ysb-cartgroup__head strong { display: block; font-size: 1.05rem; color: var(--ysb-navy); } .ysb-cartgroup__head div span { font-size: .82rem; color: var(--ysb-muted); } .ysb-cartgroup__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; } .ysb-cartgroup__remove { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; color: var(--ysb-muted); font-weight: 600; font-size: .82rem; cursor: pointer; padding: .3rem; } .ysb-cartgroup__remove:hover { color: #c93a6c; } .ysb-cartgroup__subject { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ysb-muted); font-weight: 700; margin: .9rem 0 .2rem; } .ysb-cartgroup__foot { display: flex; justify-content: space-between; gap: 1rem; padding-top: .7rem; margin-top: .25rem; border-top: 1px solid var(--ysb-border); color: var(--ysb-muted); font-size: .9rem; } .ysb-cartgroup__foot strong { color: var(--ysb-navy); } .ysb-cartline { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img name remove" "img qty total"; align-items: center; gap: .35rem .85rem; padding: .7rem 0; border-bottom: 1px dashed var(--ysb-border); } .ysb-cartline:last-of-type { border-bottom: 0; } @media (min-width: 700px) { .ysb-cartline { grid-template-columns: 56px minmax(0, 1fr) auto 6.5rem auto; grid-template-areas: "img name qty total remove"; } } .ysb-cartline__img { grid-area: img; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--ysb-border); display: flex; align-items: center; justify-content: center; } .ysb-cartline__img img { max-width: 100%; max-height: 100%; object-fit: contain; } .ysb-cartline__name { grid-area: name; min-width: 0; } .ysb-cartline__name > a { display: block; font-weight: 600; font-size: .92rem; color: var(--ysb-navy) !important; line-height: 1.35; } .ysb-cartline__meta { display: block; font-size: .78rem; color: var(--ysb-muted); } .ysb-cartline__deal { color: #067a3b; } html[data-theme="dark"] .ysb-cartline__deal { color: #3BE88A; } .ysb-cartline .ysb-stepper { grid-area: qty; justify-self: start; } .ysb-cartline__total { grid-area: total; text-align: right; color: var(--ysb-navy); font-size: .95rem; } .ysb-cartline__remove { grid-area: remove; justify-self: end; border: 0; background: none; color: var(--ysb-muted); cursor: pointer; padding: .35rem; border-radius: 8px; } .ysb-cartline__remove:hover { color: #c93a6c; background: var(--ysb-grey); } .ysb-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--ysb-border); border-radius: 999px; overflow: hidden; background: var(--ysb-white); } .ysb-stepper__btn { width: 2.1rem; height: 2.1rem; border: 0; background: none; color: var(--ysb-navy); font-size: 1.1rem; font-weight: 700; cursor: pointer; } .ysb-stepper__btn:hover { background: var(--ysb-grey); } .ysb-stepper__input { width: 2.6rem; height: 2.1rem; border: 0; background: none; text-align: center; color: var(--ysb-navy); font: inherit; font-weight: 700; -moz-appearance: textfield; appearance: textfield; } .ysb-stepper__input::-webkit-outer-spin-button, .ysb-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* summary */ .ysb-cartsum__title { font-size: 1.2rem; font-weight: 700; color: var(--ysb-navy); margin: 0 0 .75rem; } .ysb-freebar { background: var(--ysb-blue-tint); border-radius: 12px; padding: .75rem .85rem; margin: 0 0 1rem; } .ysb-freebar p { display: flex; align-items: center; gap: .4rem; margin: 0 0 .45rem; font-size: .88rem; color: var(--ysb-navy); } .ysb-freebar small { display: block; margin-top: .4rem; color: var(--ysb-muted); font-size: .75rem; } .ysb-freebar__track { height: 8px; border-radius: 999px; background: rgba(17, 39, 85, .12); overflow: hidden; } .ysb-freebar__track span { display: block; height: 100%; border-radius: 999px; background: var(--ysb-orange); transition: width .3s; } .ysb-freebar.is-done { background: rgba(12, 221, 107, .14); } .ysb-freebar.is-done .ysb-freebar__track span { background: var(--ysb-green); } .ysb-cartsum__rows { margin: 0; } .ysb-cartsum__rows div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .92rem; color: var(--ysb-muted); } .ysb-cartsum__rows dd { margin: 0; color: var(--ysb-navy); font-weight: 600; } .ysb-cartsum__saving dd { color: #067a3b; } html[data-theme="dark"] .ysb-cartsum__saving dd { color: #3BE88A; } .ysb-cartsum__total { border-top: 1px solid var(--ysb-border); margin-top: .4rem; padding-top: .7rem !important; } .ysb-cartsum__total dt, .ysb-cartsum__total dd { color: var(--ysb-navy) !important; font-weight: 800 !important; font-size: 1.2rem !important; } .ysb-cartsum__total small { font-size: .72rem; font-weight: 600; color: var(--ysb-muted); } .ysb-checkout #cart-summary .ysb-cartsum { padding: 1rem; } /* checkout (existing Bulma forms restyled lightly) */ .ysb-checkout .addressCard { border-radius: var(--ysb-radius-lg) !important; border: 2px solid var(--ysb-border) !important; box-shadow: none; } .ysb-checkout .addressCard.selectedcard { border-color: var(--ysb-orange) !important; box-shadow: 0 0 0 4px rgba(237, 133, 52, .15); } .ysb-checkout .input, .ysb-checkout select { border-radius: 10px; } .ysb-checkout .button.is-secondary, .ysb-checkout #completeOrder { border-radius: 999px; font-weight: 700; } /* "Who is this list for?" pop-up (Bulma modal shell kept for subjectgrade.js) */ .ysb-whofor .modal-content.ysb-whofor__card { position: relative; width: min(30rem, 92vw); background: var(--ysb-white); color: var(--ysb-navy); border-radius: var(--ysb-radius-lg); padding: 2rem 1.75rem 1.5rem; box-shadow: var(--ysb-shadow-lg); text-align: center; overflow: visible; } .ysb-whofor__card h2 { font-size: 1.5rem; font-weight: 800; margin: .6rem 0 .35rem; color: var(--ysb-navy); } .ysb-whofor__card > p { color: var(--ysb-muted); font-size: .92rem; margin: 0 0 1rem; } .ysb-whofor__fields { display: grid; grid-template-columns: 1fr; gap: 0 .75rem; text-align: left; } @media (min-width: 520px) { .ysb-whofor__fields { grid-template-columns: 1.6fr 1fr; } } .ysb-whofor__fields .ysb-input[readonly] { background: var(--ysb-grey); } .ysb-whofor__err { color: #c93a6c; font-size: .85rem; margin: -.4rem 0 .6rem; text-align: left; } .ysb-whofor__card .ysb-btn { border-radius: 999px; min-height: 48px; } .ysb-whofor__x { position: absolute; top: .6rem; right: .6rem; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: var(--ysb-grey); color: var(--ysb-navy); font-size: 1.4rem; line-height: 1; cursor: pointer; } .ysb-whofor__notes { list-style: none; margin: 1rem 0 0; padding: 0; text-align: left; font-size: .82rem; color: var(--ysb-muted); display: grid; gap: .3rem; } .ysb-whofor__notes li::before { content: "\2713"; color: #079a4a; font-weight: 800; margin-right: .45rem; } /* "List added to your cart!" */ .ysb-listadded { padding: 2rem 0 2.5rem; } .ysb-listadded__card { text-align: center; padding: 2rem 1.5rem; max-width: 40rem; margin: 0 auto 1.5rem; } .ysb-listadded__tick { display: inline-flex; color: #079a4a; } .ysb-listadded__card h1 { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 800; color: var(--ysb-navy); margin: .5rem 0 .4rem; } .ysb-listadded__card p { color: var(--ysb-muted); margin: 0 0 1.25rem; } .ysb-listadded__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; } .ysb-listadded__actions .ysb-btn { border-radius: 999px; } .ysb-listadded__search { max-width: 40rem; margin: 0 auto; padding: 1.25rem 1.5rem; transition: box-shadow .3s; } .ysb-listadded__search h2 { font-size: 1.1rem; font-weight: 700; color: var(--ysb-navy); margin: 0 0 .75rem; } .ysb-listadded__search.is-highlighted { box-shadow: 0 0 0 4px rgba(31, 193, 224, .35); } /* confirmation */ .ysb-confirm__card { text-align: center; padding: 2rem 1.5rem; max-width: 42rem; margin: 0 auto; border-top: 6px solid var(--ysb-green); } .ysb-confirm__card--pending { border-top-color: var(--ysb-blue); } .ysb-confirm__card--failed, .ysb-confirm__card--cancelled { border-top-color: var(--ysb-pink); } .ysb-confirm__icon { display: inline-flex; color: #079a4a; } .ysb-confirm__card--pending .ysb-confirm__icon { color: #0b7f96; } .ysb-confirm__card--failed .ysb-confirm__icon, .ysb-confirm__card--cancelled .ysb-confirm__icon { color: #c93a6c; } .ysb-confirm__card h2 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); font-weight: 800; color: var(--ysb-navy); margin: .5rem 0 .4rem; } .ysb-confirm__card > p { color: var(--ysb-muted); margin: 0 auto 1rem; max-width: 32rem; } .ysb-confirm__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; margin: 1rem 0 .5rem; } .ysb-confirm__facts dt { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ysb-muted); } .ysb-confirm__facts dd { margin: .15rem 0 0; font-weight: 800; font-size: 1.05rem; color: var(--ysb-navy); } .ysb-confirm .ysb-account__hand { max-width: 42rem; margin: 1.25rem auto 0; } /* ---------- Checkout: delivery instructions + billing address (design v4 p.43, 2026-10-18) ---------- */ .ysb-checkextras { margin: 1rem 0 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--ysb-border); border-radius: var(--ysb-radius-lg); background: var(--ysb-white); } .ysb-checkextras textarea.ysb-input { min-height: 84px; resize: vertical; } .ysb-checkextras__same { color: var(--ysb-navy); font-weight: 600; margin: .25rem 0; } .ysb-checkextras__billing { border: 0; padding: .75rem 0 0; margin: .5rem 0 0; border-top: 1px dashed var(--ysb-border); } .ysb-checkextras__billing legend { font-weight: 700; color: var(--ysb-navy); padding: 0 0 .5rem; } .ysb-checkextras__two { display: grid; gap: 0 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .ysb-checkextras__two { grid-template-columns: 1fr 1fr; } } .ysb-ordercard__extras { margin: 1rem 0 0; display: grid; gap: .5rem; } .ysb-ordercard__extras dt { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ysb-muted); } .ysb-ordercard__extras dd { margin: .1rem 0 0; color: var(--ysb-navy); white-space: pre-line; } /* ---------- Site footer (design v4 p.45, 2026-10-18) ---------- */ .ysb-footer { background: #112755; color: #dbe3ee; margin-top: 3rem; } html[data-theme="dark"] .ysb-footer { background: #0b1a3a; border-top: 1px solid var(--ysb-d-border); } .ysb-footer a { color: #ffffff !important; text-decoration: none !important; } .ysb-footer a:hover { color: var(--ysb-green) !important; } .ysb-footer__news { background: var(--ysb-blue); color: #112755; } .ysb-footer__newsinner { display: grid; gap: 1rem 2rem; grid-template-columns: 1fr; align-items: center; padding-top: 1.5rem; padding-bottom: 1.5rem; } @media (min-width: 900px) { .ysb-footer__newsinner { grid-template-columns: 1fr 1.1fr; } } .ysb-footer__news h3 { margin: 0 0 .25rem; font-size: 1.35rem; font-weight: 800; color: #112755; } .ysb-footer__news p { margin: 0; color: #112755; } .ysb-footer__newsform { display: flex; flex-wrap: wrap; gap: .5rem; } .ysb-footer__newsform .ysb-input { flex: 1 1 15rem; border-color: transparent; background: #fff; color: #112755; } .ysb-footer__newsform .ysb-btn { border-radius: 999px; } .ysb-footer__small { flex-basis: 100%; font-size: .75rem; margin: 0; } .ysb-footer__news .ysb-footer__small a { color: #112755 !important; text-decoration: underline !important; } .ysb-footer__newsmsg { flex-basis: 100%; margin: 0; font-weight: 700; font-size: .9rem; color: #112755; } .ysb-footer__newsmsg:empty { display: none; } .ysb-footer__newsmsg.is-error { color: #8f1c40; } .ysb-footer__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; } .ysb-footer__main { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: 1fr; padding-top: 2.5rem; padding-bottom: 2rem; } @media (min-width: 900px) { .ysb-footer__main { grid-template-columns: 1.1fr 2fr; } } .ysb-footer__logo { height: 52px; width: auto; margin-bottom: .75rem; } .ysb-footer__brand p { margin: 0 0 1rem; color: #b8c6dc; } .ysb-footer__contact, .ysb-footer__social, .ysb-footer__legal { list-style: none; margin: 0; padding: 0; } .ysb-footer__contact li { margin: 0 0 .4rem; } .ysb-footer__contact i { width: 1.2rem; color: var(--ysb-green); } .ysb-footer__social { display: flex; gap: .5rem; margin-top: 1rem; } .ysb-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(255, 255, 255, .12); } .ysb-footer__social a:hover { background: var(--ysb-green); color: #112755 !important; } .ysb-footer__groups { display: grid; gap: 0 2rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .ysb-footer__groups { grid-template-columns: repeat(3, 1fr); } } .ysb-footer__group summary { list-style: none; cursor: pointer; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; padding: .75rem 0; display: flex; justify-content: space-between; align-items: center; } .ysb-footer__group summary::-webkit-details-marker { display: none; } .ysb-footer__group summary::after { content: "+"; font-size: 1.2rem; color: var(--ysb-green); } .ysb-footer__group[open] summary::after { content: "\2212"; } @media (min-width: 768px) { .ysb-footer__group summary { cursor: default; pointer-events: none; } .ysb-footer__group summary::after { content: none; } } @media (max-width: 767px) { .ysb-footer__group { border-bottom: 1px solid rgba(255, 255, 255, .12); } } .ysb-footer__group ul { list-style: none; margin: 0 0 .75rem; padding: 0; } .ysb-footer__group li { margin: 0 0 .5rem; } .ysb-footer__group a { color: #dbe3ee !important; font-size: .92rem; } .ysb-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); } .ysb-footer__bottominner { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; font-size: .82rem; color: #b8c6dc; } .ysb-footer__bottominner p { margin: 0; } .ysb-footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; } .ysb-footer__legal a { color: #b8c6dc !important; } .ysb-footer__pay { display: inline-flex; align-items: center; gap: .5rem; } @media (max-width: 999px) { .ysb-cart ~ .ysb-footer, body:has(.ysb-cart__mobilebar) .ysb-footer { padding-bottom: 4.5rem; } } /* 2026-10-21 fixes: .ysb-input's background shorthand reset the select arrow to a repeating tile; the stripes took the sign-up card's first grid cell */ .ysb-input.ysb-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23112755' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 16px 16px; padding-right: 2.5rem; appearance: none; -webkit-appearance: none; } html[data-theme="dark"] .ysb-input.ysb-select { background-repeat: no-repeat; background-position: right .85rem center; background-size: 16px 16px; } .ysb-signup__card > .ysb-stripes { grid-column: 1 / -1; } /* 2026-10-22: the banner artwork has a white strip at the bottom (about 2.1% of its width on desktop, 2.3% on the phone version). Trim it (negative margin in % = share of the width; the card hides the overflow) and sit the finder's blue border right on the picture's bottom edge instead of overlapping into it, so "Quick & Easy" is never covered. */ .ysb-home__card.ysb-home__banner .ysb-home__banner-img { width: 100%; height: auto; margin-bottom: -2.1%; } .ysb-home__card.ysb-home__banner a, .ysb-home__card.ysb-home__banner picture { display: block; } @media (max-width: 599px) { .ysb-home__card.ysb-home__banner .ysb-home__banner-img { margin-bottom: -2.35%; } } @media (min-width: 768px) { .ysb-home__hero .ysb-home__banner + .ysb-home__finder-card { margin: -2px 1.5rem 0; } } @media (max-width: 767px) { .ysb-home__hero .ysb-home__banner + .ysb-home__finder-card { margin: -2px .5rem 0; } }