/* Theme Name: Step by Step, Paso a Paso Theme URI: https://stepbystepchildren.com/ Author: Dependent Media Author URI: https://dependentmedia.com/ Description: Block theme for Step by Step, Paso a Paso, a Spanish immersion preschool, farm school and learning center in El Dorado Hills and Granite Bay, California. "Paso a paso": painted children's footprints (from the school's own logo) walk through every page; a drawn Granite Bay farm whose animals say their names in Spanish; a day you can scrub with the sun; footprint painting and chick-counting games; a fridge door of parent love; a clothesline gallery; a crayon-box class timetable and a five-step enrollment. Core blocks only; the interactive pieces are small HTML blocks wired by assets/site.js. Version: 1.0.0 Requires at least: 6.6 Tested up to: 7.1 Requires PHP: 8.1 License: GPL-2.0-or-later Text Domain: sbs-paso */ /* ===================================================================================================================== TOKENS ===================================================================================================================== */ :root { --ink: var(--wp--preset--color--ink); --ink-soft: var(--wp--preset--color--ink-soft); --grape: var(--wp--preset--color--grape); --grape-deep: var(--wp--preset--color--grape-deep); --sun: var(--wp--preset--color--sun); --tomato: var(--wp--preset--color--tomato); --tomato-deep: var(--wp--preset--color--tomato-deep); --tangerine: var(--wp--preset--color--tangerine); --lime: var(--wp--preset--color--lime); --leaf: var(--wp--preset--color--leaf); --sky: var(--wp--preset--color--sky); --sky-deep: var(--wp--preset--color--sky-deep); --bubblegum: var(--wp--preset--color--bubblegum); --berry: var(--wp--preset--color--berry); --barn: var(--wp--preset--color--barn); --paper: var(--wp--preset--color--paper); --kraft: var(--wp--preset--color--kraft); --sky-wash: var(--wp--preset--color--sky-wash); --mint: var(--wp--preset--color--mint); --blush: var(--wp--preset--color--blush); --lilac: var(--wp--preset--color--lilac); --display: var(--wp--preset--font-family--display); --body: var(--wp--preset--font-family--body); --hand: var(--wp--preset--font-family--hand); --line: 2.5px solid var(--ink); --ease: cubic-bezier(.22, .9, .3, 1); --bounce: cubic-bezier(.34, 1.56, .64, 1); --header-h: 84px; --radius: 26px; --pop: 0 6px 0 var(--ink); --pop-sm: 0 4px 0 var(--ink); --soft: 0 22px 40px -26px rgba(43, 34, 72, .55); /* the footprint, for masks and bullets */ --foot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M17 63 C10 63 9 56 10 50 C11 44 15 40 14 34 C13 28 6 26 7 19 C8 12 15 11 21 12 C28 13 34 16 35 22 C36 30 30 36 29 44 C28 52 30 63 17 63Z M6.6 5.6 a4.4 4.4 0 1 1 8.8 0 a4.4 4.4 0 1 1 -8.8 0Z M16.4 2.4 a3.1 3.1 0 1 1 6.2 0 a3.1 3.1 0 1 1 -6.2 0Z M22.9 3.2 a2.7 2.7 0 1 1 5.4 0 a2.7 2.7 0 1 1 -5.4 0Z M28.2 6.2 a2.4 2.4 0 1 1 4.8 0 a2.4 2.4 0 1 1 -4.8 0Z M32.2 10.6 a2 2 0 1 1 4 0 a2 2 0 1 1 -4 0Z'/%3E%3C/svg%3E"); --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 V16 C20 4 40 4 60 14 C80 24 100 26 120 14 C135 6 150 6 160 12 V30Z'/%3E%3C/svg%3E"); --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 22' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C40 7 80 6 120 9 C150 11 175 13 197 8 M10 19 C60 13 120 14 190 13' fill='none' stroke='%23FFC83D' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); } /* ===================================================================================================================== BASE ===================================================================================================================== */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } body { background-color: var(--paper); background-image: radial-gradient(rgba(43, 34, 72, .045) 1px, transparent 1.3px); background-size: 20px 20px; -webkit-font-smoothing: antialiased; overflow-x: clip; } ::selection { background: var(--sun); color: var(--ink); } h1, h2, h3 { font-stretch: 108%; text-wrap: balance; } h1 { font-weight: 650; } p { text-wrap: pretty; } a { text-underline-offset: .18em; text-decoration-thickness: 2px; } strong, b { font-weight: 600; } :focus-visible { outline: 3.5px solid var(--grape); outline-offset: 3px; border-radius: 8px; } .screen-reader-text, .sbs-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sbs-skip { position: absolute; left: 1rem; top: -100px; z-index: 1000; background: var(--grape); color: #fff; padding: .7rem 1.1rem; border-radius: 999px; font-weight: 600; text-decoration: none; } .sbs-skip:focus { top: .75rem; color: #fff; } .sbs-icon { width: 1.5em; height: 1.5em; flex: none; vertical-align: middle; overflow: visible; } .sbs-main { padding-top: 0 !important; } .sbs-main > .wp-block-post-content > *:first-child { margin-top: 0; } .wp-site-blocks > * + * { margin-block-start: 0; } .sbs-nowrap { white-space: nowrap; } [hidden] { display: none !important; } .sbs-center-btns { justify-content: center; margin-top: 2.4rem !important; } /* type roles */ .sbs-eyebrow { font-family: var(--hand); font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem) !important; line-height: 1.2; color: var(--berry); margin-bottom: .2rem !important; display: flex; align-items: center; gap: .5rem; } .sbs-eyebrow::before { content: ""; width: 18px; height: 28px; flex: none; background: var(--grape); -webkit-mask: var(--foot) center / contain no-repeat; mask: var(--foot) center / contain no-repeat; transform: rotate(14deg); } .sbs-center .sbs-eyebrow, .sbs-eyebrow--center { justify-content: center; } .sbs-lead { font-size: var(--wp--preset--font-size--l) !important; line-height: 1.55; color: var(--ink-soft); max-width: 42rem; } .sbs-fine { font-size: .92rem !important; color: var(--ink-soft); line-height: 1.55; } .sbs-center { text-align: center; } .sbs-center .sbs-lead { margin-inline: auto; } .sbs-hand { font-family: var(--hand); font-size: 1.5rem; line-height: 1.15; color: var(--berry); } .sbs-es { font-family: var(--hand); color: var(--berry); font-weight: 400; } .sbs-scribble { background: var(--scribble) bottom / 100% .45em no-repeat; padding-bottom: .05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } h1 em, h2 em, h3 em { font-style: normal; color: var(--grape); } .sbs-crumbs { font-size: .9rem !important; color: var(--ink-soft); margin-bottom: .4rem !important; display: flex; flex-wrap: wrap; gap: .45rem; } .sbs-crumbs a { color: var(--ink-soft); } /* ===================================================================================================================== BUTTONS (chunky, like a toy: ink outline, a solid shadow that squashes when pressed) ===================================================================================================================== */ .wp-element-button, .wp-block-button__link, .sbs-btn, .sbs-cta { border: var(--line) !important; box-shadow: var(--pop); transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .2s, color .2s; } .wp-block-button__link:hover, .sbs-btn:hover, .sbs-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); } .wp-block-button__link:active, .sbs-btn:active, .sbs-cta:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); } .wp-block-button__link:hover { background-color: var(--grape-deep); color: #fff; } .wp-block-button.is-style-sun > .wp-block-button__link { background: var(--sun); color: var(--ink); } .wp-block-button.is-style-sun > .wp-block-button__link:hover { background: #FFD45C; color: var(--ink); } .wp-block-button.is-style-tomato > .wp-block-button__link { background: var(--tomato-deep); color: #fff; } .wp-block-button.is-style-ghost > .wp-block-button__link { background: #fff; color: var(--ink); } .wp-block-button.is-style-ghost > .wp-block-button__link:hover { background: var(--mint); color: var(--ink); } .wp-block-button.is-style-link > .wp-block-button__link { background: none; color: var(--grape-deep); border: 0 !important; box-shadow: none; padding: .2rem 0; text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 6px; } .wp-block-button.is-style-link > .wp-block-button__link::after { content: " →"; } .wp-block-button.is-style-link > .wp-block-button__link:hover { transform: none; box-shadow: none; color: var(--berry); background: none; } .sbs-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; background: var(--grape); color: #fff; font: 600 1.08rem/1.2 var(--display); text-decoration: none; padding: .8rem 1.4rem; border-radius: 999px; cursor: pointer; } .sbs-btn .sbs-icon { width: 1.15em; height: 1.15em; } .sbs-btn:hover { background: var(--grape-deep); color: #fff; } .sbs-btn--ghost { background: #fff; color: var(--ink); } .sbs-btn--ghost:hover { background: var(--mint); color: var(--ink); } .sbs-btn--sun { background: var(--sun); color: var(--ink); } .sbs-btn--sun:hover { background: #FFD45C; color: var(--ink); } .sbs-btn--sm { font-size: .95rem; padding: .55rem 1rem; box-shadow: var(--pop-sm); } .sbs-btn[disabled] { opacity: .6; cursor: progress; } /* ===================================================================================================================== RIBBON + HEADER (sticky; the frosted layer is a ::before so the phone menu overlay isn't trapped by backdrop-filter) ===================================================================================================================== */ .sbs-ribbon { background: var(--sun); border-bottom: var(--line); text-align: center; padding: .45rem 1rem; font-size: .92rem; line-height: 1.4; } .sbs-ribbon p { margin: 0; } .sbs-ribbon strong { font-family: var(--display); font-weight: 600; margin-right: .25rem; } .sbs-ribbon a { color: var(--ink); font-weight: 600; } .sbs-ribbon__star .sbs-icon { width: 1.1em; height: 1.1em; color: #fff; margin: -.2em .35rem 0 0; animation: sbs-spin 6s linear 2; } @media (max-width: 700px) { .sbs-ribbon__phone { display: none; } } .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 60; } .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; } @media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } } /* the ribbon scrolls away; only the header row sticks */ .wp-site-blocks > header.wp-block-template-part { top: calc(-1 * var(--ribbon-h, 0px)); } .admin-bar .wp-site-blocks > header.wp-block-template-part { top: calc(32px - var(--ribbon-h, 0px)); } @media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: calc(46px - var(--ribbon-h, 0px)); } } .sbs-header { position: relative; isolation: isolate; transition: box-shadow .3s var(--ease); } .sbs-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 248, 236, .9); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); } .sbs-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: var(--paper); -webkit-mask: var(--wave) 0 0 / 120px 10px repeat-x; mask: var(--wave) 0 0 / 120px 10px repeat-x; transform: scaleY(-1); opacity: .95; } .sbs-header.is-scrolled { box-shadow: 0 16px 30px -26px rgba(43, 34, 72, .55); } .sbs-header__row { min-height: var(--header-h); gap: 1.1rem !important; margin-inline: auto; } .sbs-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); flex: none; } .sbs-brand:hover { color: var(--ink); } .sbs-brand__mark { width: 52px; height: 52px; flex: none; overflow: visible; } .sbs-brand__mark { transition: transform .45s var(--bounce); } .sbs-brand:hover .sbs-brand__mark { transform: rotate(-8deg) translateY(-2px); } .sbs-brand__name { display: flex; flex-direction: column; line-height: 1; white-space: nowrap; } .sbs-brand__en { font-family: var(--display); font-weight: 650; font-size: 1.42rem; font-stretch: 110%; color: var(--grape-deep); letter-spacing: -.01em; } .sbs-brand__es { font-family: var(--hand); font-size: 1.5rem; color: var(--berry); margin-top: -.05rem; } .sbs-brand__name small { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; margin-top: .25rem; } .sbs-nav { flex: 1; } .sbs-nav .wp-block-navigation__container { gap: .2rem 1.5rem; } .sbs-nav .wp-block-navigation-item__content { color: var(--ink); text-decoration: none; padding: .35rem 0; position: relative; font-weight: 500; } .sbs-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { white-space: nowrap; display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; font-family: var(--display); font-size: 1.08rem; font-weight: 550; } .sbs-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label { display: flex; flex-direction: column; align-items: flex-start; } .sbs-nav .sbs-es { font-size: .98rem; line-height: 1; margin-top: .05rem; } /* a little row of painted footprints walks in under the current / hovered item */ .sbs-nav > .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 9px; -webkit-mask: var(--foot) 0 0 / 9px 9px repeat-x; mask: var(--foot) 0 0 / 9px 9px repeat-x; background: var(--bubblegum); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .sbs-nav .wp-block-navigation-item__content:hover::after, .sbs-nav .current-menu-item > .wp-block-navigation-item__content::after, .sbs-nav [aria-current="page"]::after, .sbs-nav .current-menu-ancestor > .wp-block-navigation-item__content::after { transform: scaleX(1) !important; } .sbs-nav .wp-block-navigation-item__content:hover { color: var(--grape-deep); } /* dropdowns: text lines up under the parent's text, opens to the right, with a hover bridge */ .sbs-nav .wp-block-navigation__submenu-container { border: var(--line) !important; border-radius: 20px; padding: .45rem !important; min-width: 13.5rem !important; background: #fff !important; box-shadow: var(--pop), var(--soft); margin-top: .45rem; left: -.95rem !important; } .sbs-nav .wp-block-navigation__submenu-container::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; } .sbs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55rem .5rem !important; border-radius: 12px; font-weight: 500; display: block; } .sbs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .sbs-nav .wp-block-navigation__submenu-container [aria-current="page"] { background: var(--lilac); color: var(--grape-deep); } .sbs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; } .sbs-nav .wp-block-navigation__submenu-icon { margin-left: .2rem; align-self: flex-start; margin-top: .45rem; } .sbs-nav .sbs-nav-cta { display: none !important; } .sbs-header__ctas { display: flex; align-items: center; gap: .55rem; flex: none; } .sbs-cta { display: inline-flex; align-items: center; gap: .45rem; background: var(--tomato-deep); color: #fff; font: 600 1.05rem/1.2 var(--display); text-decoration: none; padding: .7rem 1.25rem; border-radius: 999px; white-space: nowrap; } .sbs-cta:hover { background: #9B2F18; color: #fff; } @media (min-width: 1100px) and (max-width: 1519px) { .sbs-brand__name small { display: none; } } @media (min-width: 1100px) and (max-width: 1279px) { .sbs-nav .wp-block-navigation__container { column-gap: 1.05rem; } .sbs-cta { padding: .6rem 1rem; } } /* nav: hamburger below 1100px (core only switches at 600px) */ @media (max-width: 1099px) { .sbs-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .sbs-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .sbs-nav { flex: none; order: 3; } .sbs-header__ctas { margin-left: auto; } } .sbs-nav .wp-block-navigation__responsive-container-open { width: 48px; height: 48px; border-radius: 50%; background: var(--grape); color: #fff; align-items: center; justify-content: center; border: var(--line); box-shadow: var(--pop-sm); } .sbs-nav .wp-block-navigation__responsive-container-open svg { width: 24px; height: 24px; } .sbs-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--grape-deep) !important; color: #fff !important; padding: 1.25rem clamp(1rem, 5vw, 2.5rem) 2.5rem; overflow-y: auto; animation: sbs-menu-in .18s ease-out both; background-image: radial-gradient(rgba(255, 255, 255, .07) 1.5px, transparent 1.8px) !important; background-size: 22px 22px !important; } @keyframes sbs-menu-in { from { opacity: 0; transform: translateY(-8px); } } .sbs-nav .is-menu-open .wp-block-navigation__responsive-container-content, .sbs-nav .is-menu-open .wp-block-navigation__container, .sbs-nav .is-menu-open .wp-block-navigation-item, .sbs-nav .is-menu-open .wp-block-navigation__submenu-container { align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; } .sbs-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4.5rem !important; } .sbs-nav .is-menu-open .wp-block-navigation__container { gap: .35rem !important; } .sbs-nav .is-menu-open .wp-block-navigation-item__content { color: #fff !important; font-family: var(--display); font-size: clamp(1.7rem, 7vw, 2.3rem); padding: .15rem 0 !important; flex-direction: row !important; align-items: baseline !important; gap: .6rem; } .sbs-nav .is-menu-open .sbs-es { color: var(--sun); font-size: 1.2rem; } .sbs-nav .is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; box-shadow: none !important; border: 0 !important; min-width: 0 !important; padding: 0 0 0 1rem !important; border-left: 3px dotted rgba(255, 200, 61, .7) !important; border-radius: 0 !important; margin: .2rem 0 .6rem !important; left: 0 !important; } .sbs-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-family: var(--body); font-size: 1.1rem; font-weight: 500; padding: .3rem 0 !important; color: #EFE8FC !important; } .sbs-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: none; color: var(--sun) !important; } .sbs-nav .is-menu-open [aria-current="page"], .sbs-nav .is-menu-open .wp-block-navigation__submenu-container [aria-current="page"] { background: none; color: var(--sun) !important; } .sbs-nav .is-menu-open .wp-block-navigation-item__content::after { display: none !important; } .sbs-nav .is-menu-open .sbs-nav-cta { display: block !important; } .sbs-nav .is-menu-open .sbs-nav-cta:not(.sbs-nav-cta--call) { margin-top: 1.3rem !important; } .sbs-nav .is-menu-open .sbs-nav-cta .wp-block-navigation-item__content { display: inline-flex !important; font-size: 1.1rem !important; padding: .8rem 1.4rem !important; border-radius: 999px; border: var(--line); box-shadow: var(--pop-sm); } .sbs-nav .is-menu-open .sbs-nav-cta:not(.sbs-nav-cta--call) .wp-block-navigation-item__content { background: var(--sun); color: var(--ink) !important; } .sbs-nav .is-menu-open .sbs-nav-cta--call .wp-block-navigation-item__content { background: #fff; color: var(--ink) !important; margin-top: .4rem; } .sbs-nav .wp-block-navigation__responsive-container-close { width: 48px; height: 48px; top: 1rem !important; right: 1rem !important; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; display: grid; place-items: center; } .sbs-nav .wp-block-navigation__responsive-container-close svg { fill: currentColor; } @media (max-width: 600px) { :root { --header-h: 70px; } .sbs-brand__mark { width: 42px; height: 42px; } .sbs-brand__en { font-size: 1.18rem; } .sbs-brand__es { font-size: 1.25rem; } .sbs-brand__name small { display: none; } .sbs-cta { padding: .55rem .9rem; font-size: .95rem; box-shadow: var(--pop-sm); } } @media (max-width: 400px) { .sbs-header .sbs-cta { display: none; } } /* ===================================================================================================================== SECTIONS + PAGE HEADS ===================================================================================================================== */ .sbs-section { padding-block: var(--wp--preset--spacing--60) !important; position: relative; } .sbs-section--tight { padding-block: var(--wp--preset--spacing--50) !important; } .sbs-tone-kraft { background: var(--kraft); } .sbs-tone-sky { background: var(--sky-wash); } .sbs-tone-mint { background: var(--mint); } .sbs-tone-blush { background: var(--blush); } .sbs-tone-lilac { background: var(--lilac); } .sbs-tone-grape { background: var(--grape-deep); color: #fff; } .sbs-tone-grape :is(h1, h2, h3, h4) { color: #fff; } .sbs-tone-grape .sbs-lead, .sbs-tone-grape p { color: #EFE8FC; } .sbs-tone-grape .sbs-eyebrow { color: var(--sun); } .sbs-tone-grape .sbs-eyebrow::before { background: var(--sun); } /* every toned section gets a wavy top edge in its own colour */ [class*="sbs-tone-"].sbs-section::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 23px; background: inherit; background-image: none; -webkit-mask: var(--wave) 0 0 / 220px 23px repeat-x; mask: var(--wave) 0 0 / 220px 23px repeat-x; pointer-events: none; } .sbs-section__head { margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 3rem) !important; max-width: 50rem; } .sbs-section__head.sbs-center { margin-inline: auto !important; } .sbs-section__head h2 { margin: .2rem 0 .6rem; } .sbs-pagehead { position: relative; padding-block: clamp(2.4rem, 1.6rem + 3vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5.5rem) !important; background: var(--sky-wash); overflow: hidden; } .sbs-pagehead--plain { padding-bottom: 2.5rem !important; } .sbs-pagehead::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 24px; background: var(--paper); -webkit-mask: var(--wave) 0 0 / 240px 24px repeat-x; mask: var(--wave) 0 0 / 240px 24px repeat-x; } .sbs-pagehead.is-mint { background: var(--mint); } .sbs-pagehead.is-blush { background: var(--blush); } .sbs-pagehead.is-lilac { background: var(--lilac); } .sbs-pagehead.is-kraft { background: var(--kraft); } .sbs-pagehead.is-sun { background: #FFE9A6; } .sbs-pagehead__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); position: relative; z-index: 1; } .sbs-pagehead__inner:not(:has(.sbs-pagehead__art)) { grid-template-columns: minmax(0, 1fr); } .sbs-pagehead h1 { margin: .15rem 0 .8rem; font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem); } .sbs-pagehead .sbs-lead { margin: 0; } .sbs-pagehead .wp-block-buttons { margin-top: 1.6rem; } .sbs-pagehead__art { margin: 0 !important; justify-self: center; width: 100%; max-width: 30rem; } .sbs-pagehead__art img { width: 100%; height: auto; display: block; } .sbs-pagehead__art svg { width: 100%; height: auto; display: block; overflow: visible; } .sbs-pagehead__prints { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .sbs-pagehead__prints span { position: absolute; width: 22px; height: 35px; background: var(--c); -webkit-mask: var(--foot) center / contain no-repeat; mask: var(--foot) center / contain no-repeat; opacity: .22; transform: rotate(var(--r)); } @media (max-width: 860px) { .sbs-pagehead__inner { grid-template-columns: minmax(0, 1fr); } .sbs-pagehead__art { max-width: 22rem; justify-self: start; } } .sbs-pagehead--post h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); } .sbs-postdate { color: var(--ink-soft); font-size: .95rem; } /* polaroid / blob images */ .is-style-polaroid img, .sbs-polaroid img { border: 10px solid #fff; border-bottom-width: 42px; box-shadow: var(--soft); transform: rotate(var(--tilt, -2.5deg)); border-radius: 4px; } .is-style-polaroid figcaption, .sbs-polaroid figcaption { font-family: var(--hand); font-size: 1.25rem; color: var(--ink); text-align: center; margin-top: -2.4rem; position: relative; transform: rotate(var(--tilt, -2.5deg)); } .is-style-blob img { border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%; border: 4px solid var(--ink); } .is-style-soft img { border-radius: var(--radius); border: var(--line); } .wp-block-image figcaption { font-size: .9rem; color: var(--ink-soft); } @media (max-width: 860px) { .sbs-polaroid { width: 90%; margin-inline: auto !important; } .sbs-collage { width: 92%; margin-inline: auto; } } /* ===================================================================================================================== HOME HERO: the farm ===================================================================================================================== */ .sbs-hero { position: relative; background: linear-gradient(#BFE5F8, #EAF7F7 62%, #FFF6DD); overflow: hidden; margin-top: 0 !important; isolation: isolate; } .sbs-hero__text { position: relative; z-index: 3; } .sbs-hero__text h1 { font-size: clamp(2.5rem, 1.5rem + 3.1vw, 4.1rem); margin: .15rem 0 .6rem; line-height: 1.02; } .sbs-hero__text .sbs-lead { color: var(--ink); max-width: 34rem; } .sbs-hero__text .wp-block-buttons { margin-top: 1.2rem; } .sbs-hero + .sbs-section::before { display: none; } .sbs-farm { position: relative; z-index: 1; } .sbs-farm__svg { display: block; overflow: hidden; } .sbs-farm__hint { font-family: var(--hand); font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); color: var(--berry); line-height: 1.05; margin: 1.5rem 0 0 !important; pointer-events: none; display: flex; align-items: flex-start; gap: .5rem; transform: rotate(-3deg); transform-origin: left; } .sbs-farm__hint svg { width: 70px; height: 48px; flex: none; margin-top: .4rem; } .sbs-farm__sound { position: absolute; z-index: 5; right: clamp(.75rem, 2vw, 1.5rem); bottom: clamp(.75rem, 2vw, 1.25rem); display: inline-flex; align-items: center; gap: .4rem; background: #fff; color: var(--ink); border: var(--line); border-radius: 999px; padding: .4rem .85rem .4rem .5rem; font: 600 .9rem/1 var(--body); box-shadow: var(--pop-sm); cursor: pointer; } .sbs-farm__sound .sbs-icon { width: 1.5rem; height: 1.5rem; color: var(--grape); } @media (min-width: 1100px) { .sbs-hero { height: clamp(620px, calc(100vw * 760 / 1600), 860px); } .sbs-farm { position: absolute; inset: 0; } .sbs-farm__svg { width: 100%; height: 100%; } .sbs-hero__text { max-width: min(46rem, 50vw); padding: clamp(1.6rem, 2.8vw, 3rem) 0 0 clamp(1.5rem, 4.5vw, 5rem) !important; margin: 0 !important; } } @media (max-width: 1099px) { .sbs-hero__text { padding: 2.2rem clamp(1rem, 4vw, 2.5rem) 0 !important; } .sbs-farm { height: clamp(340px, 72vw, 560px); overflow: hidden; margin-top: -1rem; } .sbs-farm__sound { top: .75rem; bottom: auto; } .sbs-farm__svg { position: absolute; top: 0; height: 100%; width: auto; aspect-ratio: 1600 / 760; left: 50%; transform: translateX(-55%); max-width: none; } .sbs-farm__hint svg { transform: rotate(40deg); } } /* critters */ .sbs-critter { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; } :is(.sbs-pig__body, .sbs-pig__tail, .sbs-goat__body, .sbs-goat__tail, .sbs-hen__head, .sbs-chick__hop, .sbs-dog__tail, .sbs-dog__head, .sbs-duck__body, .sbs-horse__head, .sbs-sun__rays, .sbs-sun__eye--r, .sbs-cloud__drift, .sbs-barn__door, .sbs-rooster__bird, .sbs-tree__crown, .sbs-tree__swing, .sbs-butterfly__flap, .sbs-butterfly__wing) { transform-box: fill-box; } .sbs-critter.sbs-cloud.is-playing path { transform-box: fill-box; } .sbs-critter:focus-visible { outline: 4px solid var(--grape); outline-offset: 4px; } .sbs-critter:hover > g:first-of-type, .sbs-critter:focus-visible > g:first-of-type { filter: drop-shadow(0 0 5px rgba(255, 255, 255, .95)); } .sbs-critter.is-playing .sbs-pig__body { animation: sbs-wiggle .8s var(--ease); transform-origin: 50% 100%; } .sbs-critter.is-playing .sbs-pig__tail { animation: sbs-spin .8s var(--ease); transform-origin: 0 50%; } .sbs-critter.is-playing .sbs-goat__body { animation: sbs-hop .8s var(--ease); transform-origin: 50% 100%; } .sbs-critter.is-playing .sbs-goat__tail { animation: sbs-wag .2s ease-in-out 4; transform-origin: 100% 100%; } .sbs-critter.is-playing .sbs-hen__head { animation: sbs-peck .36s ease-in-out 3; transform-origin: 0 100%; } .sbs-critter.is-playing .sbs-chick__hop { animation: sbs-hop .5s var(--ease) both; transform-origin: 50% 100%; } .sbs-critter.is-playing .sbs-chick--2 .sbs-chick__hop { animation-delay: .12s; } .sbs-critter.is-playing .sbs-chick--3 .sbs-chick__hop { animation-delay: .24s; } .sbs-critter.is-playing .sbs-dog__tail { animation: sbs-wag .16s ease-in-out 6; transform-origin: 100% 100%; } .sbs-critter.is-playing .sbs-dog__head { animation: sbs-tilt .9s var(--ease); transform-origin: 50% 90%; } .sbs-critter.is-playing .sbs-duck__body { animation: sbs-waddle .25s ease-in-out 4; transform-origin: 50% 100%; } .sbs-critter.is-playing .sbs-horse__head { animation: sbs-toss .8s var(--ease); transform-origin: 0 100%; } .sbs-critter.is-playing .sbs-sun__rays { animation: sbs-spin 1.2s var(--ease); transform-origin: center; } .sbs-critter.is-playing .sbs-sun__eye--r { animation: sbs-wink .9s ease-in-out; transform-origin: center; } .sbs-critter.sbs-cloud.is-playing path { animation: sbs-puff .7s var(--bounce); transform-origin: center; } .sbs-critter.is-playing .sbs-barn__door { animation: sbs-door 1.4s var(--ease); } .sbs-critter.is-playing .sbs-rooster__bird { animation: sbs-crow .9s var(--ease); transform-origin: 50% 100%; } .sbs-critter.is-playing .sbs-tree__crown { animation: sbs-sway 1s ease-in-out; transform-origin: 50% 100%; } .sbs-critter.is-playing .sbs-tree__swing { animation: sbs-swing 1.6s ease-in-out; transform-origin: 50% 0; } .sbs-butterfly__wing { transform-origin: 100% 50%; animation: sbs-flap .22s ease-in-out 6 alternate; } .sbs-butterfly__wing--r { transform-origin: 0 50%; } .sbs-critter.is-playing .sbs-butterfly__flap { animation: sbs-flutter 1.4s ease-in-out; transform-origin: center; } .sbs-critter.is-playing .sbs-butterfly__wing { animation: sbs-flap .12s ease-in-out 12 alternate; } .sbs-cloud__drift { animation: sbs-drift 14s ease-in-out 2 alternate; } .sbs-cloud--b .sbs-cloud__drift { animation-delay: -5s; } .sbs-print { opacity: 1; } .js .sbs-hero .sbs-print { animation: sbs-stamp .45s var(--bounce) both; animation-delay: calc(var(--i) * .11s + .6s); transform-box: fill-box; transform-origin: center; } @keyframes sbs-wiggle { 20% { transform: rotate(-5deg); } 40% { transform: rotate(4deg) translateY(-6px); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } } @keyframes sbs-spin { to { transform: rotate(360deg); } } @keyframes sbs-hop { 35% { transform: translateY(-22%) scaleY(1.05); } 60% { transform: translateY(0) scaleY(.9); } 80% { transform: translateY(-4%); } } @keyframes sbs-wag { 50% { transform: rotate(-24deg); } } @keyframes sbs-peck { 50% { transform: rotate(28deg) translateY(4px); } } @keyframes sbs-tilt { 30% { transform: rotate(-14deg); } 70% { transform: rotate(8deg); } } @keyframes sbs-waddle { 50% { transform: rotate(9deg); } } @keyframes sbs-toss { 30% { transform: rotate(-16deg) translateY(-4px); } 60% { transform: rotate(6deg); } } @keyframes sbs-wink { 40%, 60% { transform: scaleY(.15); } } @keyframes sbs-puff { 40% { transform: scale(1.12); } } @keyframes sbs-door { 30%, 70% { transform: translateX(-40px); } } @keyframes sbs-crow { 20% { transform: translateY(-8%) rotate(-10deg); } 50% { transform: translateY(-14%) rotate(6deg); } } @keyframes sbs-sway { 30% { transform: rotate(-2.5deg); } 70% { transform: rotate(2deg); } } @keyframes sbs-swing { 25% { transform: rotate(18deg); } 60% { transform: rotate(-12deg); } 85% { transform: rotate(5deg); } } @keyframes sbs-flap { to { transform: scaleX(.3); } } @keyframes sbs-flutter { 30% { transform: translate(30px, -40px) rotate(10deg); } 65% { transform: translate(-20px, -20px) rotate(-8deg); } } @keyframes sbs-drift { to { transform: translateX(46px); } } @keyframes sbs-stamp { from { opacity: 0; transform: scale(1.6); } } /* the speech bubble */ .sbs-bubble { position: absolute; z-index: 6; left: 0; top: 0; width: max-content; max-width: min(19rem, 82vw); background: #fff; border: var(--line); border-radius: 22px; padding: .8rem 1.05rem .85rem; box-shadow: var(--pop), var(--soft); transform: translate(-50%, calc(-100% - 18px)); pointer-events: none; text-align: center; } .sbs-bubble[hidden] { display: none; } .sbs-bubble.is-in { animation: sbs-bubble .4s var(--bounce); } .sbs-bubble::after { content: ""; position: absolute; left: calc(50% + var(--tail, 0px)); bottom: -14px; width: 24px; height: 24px; background: #fff; border-right: var(--line); border-bottom: var(--line); transform: translateX(-50%) rotate(45deg); border-bottom-right-radius: 6px; } .sbs-bubble.is-below { transform: translate(-50%, 18px); } .sbs-bubble.is-below::after { bottom: auto; top: -14px; transform: translateX(-50%) rotate(225deg); } .sbs-bubble__es { font: 650 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.05 var(--display); color: var(--grape-deep); margin: 0; font-stretch: 112%; } .sbs-bubble__pron { margin: .15rem 0 0; font-size: .85rem; color: var(--ink-soft); letter-spacing: .03em; } .sbs-bubble__en { margin: .35rem 0 0; font-weight: 500; } .sbs-bubble__sound { margin: .35rem 0 0; font-family: var(--hand); font-size: 1.3rem; color: var(--berry); line-height: 1.1; } @keyframes sbs-bubble { from { opacity: 0; transform: translate(-50%, calc(-100% - 6px)) scale(.6); } } .sbs-bubble.is-below.is-in { animation-name: sbs-bubble-below; } @keyframes sbs-bubble-below { from { opacity: 0; transform: translate(-50%, 8px) scale(.6); } } /* ===================================================================================================================== HOLA INTRO + BADGES ===================================================================================================================== */ .sbs-hola { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } @media (max-width: 900px) { .sbs-hola { grid-template-columns: minmax(0, 1fr); } } .sbs-hola h2 { margin-top: .2rem; } .sbs-badges { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; } .sbs-badges li { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: var(--line); border-radius: 999px; padding: .45rem .95rem .45rem .5rem; font-weight: 500; box-shadow: var(--pop-sm); } .sbs-badges .sbs-icon { width: 1.7rem; height: 1.7rem; } .sbs-collage { position: relative; aspect-ratio: 1 / .92; } .sbs-collage figure { position: absolute; margin: 0; width: 56%; } .sbs-collage figure img { width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-fit: cover; display: block; border: 10px solid #fff; border-bottom-width: 40px; box-shadow: var(--soft); border-radius: 4px; } .sbs-collage figcaption { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--hand); font-size: 1.15rem; color: var(--ink); } .sbs-collage figure:nth-child(1) { left: 0; top: 4%; transform: rotate(-5deg); z-index: 2; } .sbs-collage figure:nth-child(2) { right: 0; top: 0; transform: rotate(4deg); } .sbs-collage figure:nth-child(3) { left: 24%; bottom: 0; transform: rotate(-1.5deg); z-index: 3; } .sbs-collage__tape { position: absolute; width: 90px; height: 26px; background: rgba(255, 200, 61, .78); left: 50%; top: -12px; transform: translateX(-50%) rotate(-4deg); z-index: 4; } .sbs-collage figure:nth-child(2) .sbs-collage__tape { background: rgba(242, 123, 170, .7); } .sbs-collage figure:nth-child(3) .sbs-collage__tape { background: rgba(140, 198, 63, .7); } /* ===================================================================================================================== FIRST STEPS: a trail of painted footprints between three big steps ===================================================================================================================== */ .sbs-path { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); position: relative; counter-reset: paso; } .sbs-path__step { position: relative; background: #fff; border: var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem 1.5rem; box-shadow: 8px 8px 0 var(--c, var(--sun)); counter-increment: paso; } .sbs-path__step:nth-child(2) { margin-top: 3rem; } .sbs-path__step:nth-child(3) { margin-top: 6rem; } .sbs-path__num { position: absolute; top: -1.6rem; left: 1.2rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--c, var(--sun)); border: var(--line); display: grid; place-items: center; font: 650 1.5rem/1 var(--display); color: var(--ink); } .sbs-path__step h3 { font-size: 1.55rem; margin: .6rem 0 .1rem; } .sbs-path__es { font-family: var(--hand); color: var(--berry); font-size: 1.25rem; margin: 0 0 .5rem; } .sbs-path__step p { margin: .4rem 0 0; } .sbs-path__step .sbs-path__more { margin-top: .9rem; font-weight: 600; } .sbs-path__prints { position: absolute; inset: 0; pointer-events: none; } .sbs-path__prints span { position: absolute; width: 20px; height: 32px; background: var(--c); -webkit-mask: var(--foot) center / contain no-repeat; mask: var(--foot) center / contain no-repeat; transform: rotate(var(--r)) scaleX(var(--m, 1)); } .js .sbs-path__prints span { opacity: 0; transform: rotate(var(--r)) scaleX(var(--m, 1)) scale(1.6); transition: opacity .3s, transform .45s var(--bounce); transition-delay: calc(var(--i) * .12s); } .js .sbs-path.is-in .sbs-path__prints span, .sbs-noreveal .sbs-path__prints span { opacity: 1; transform: rotate(var(--r)) scaleX(var(--m, 1)); } @media (max-width: 1099px) { .sbs-path__prints { display: none; } } @media (max-width: 900px) { .sbs-path { grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin-inline: auto; gap: 3rem; } .sbs-path__step:nth-child(n) { margin-top: 0; } .sbs-path__prints { display: none; } } /* ===================================================================================================================== A DAY AT PASO: drag the sun across the sky ===================================================================================================================== */ .sbs-day { --t: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } @media (max-width: 960px) { .sbs-day { grid-template-columns: minmax(0, 1fr); } } .sbs-day__stage { background: #fff; border: var(--line); border-radius: var(--radius); box-shadow: 8px 8px 0 var(--sky); overflow: hidden; } .sbs-day__tabs { display: flex; gap: .4rem; padding: .8rem .8rem 0; flex-wrap: wrap; } .sbs-day__tab { font: 600 .98rem/1.2 var(--display); border: var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: .5rem 1rem; cursor: pointer; } .sbs-day__tab small { font-family: var(--body); font-weight: 400; color: var(--ink-soft); margin-left: .3rem; } .sbs-day__tab[aria-pressed="true"] { background: var(--grape); color: #fff; } .sbs-day__tab[aria-pressed="true"] small { color: #EFE8FC; } .sbs-day__sky { position: relative; margin: .8rem; height: clamp(170px, 22vw, 230px); border-radius: 18px; overflow: hidden; background: linear-gradient(hsl(calc(200 - 20 * var(--warm, 0)) 80% calc(82% - 6% * var(--noon, 0))), hsl(calc(45 - 10 * var(--warm, 0)) 95% 90%)); transition: background .4s; } .sbs-day__arc { position: absolute; inset: 12% 6% 22%; width: 88%; height: 66%; overflow: visible; } .sbs-day__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: #A9D46E; border-top: var(--line); } .sbs-day__ground::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; background: #C9E6A2; -webkit-mask: var(--wave) 0 0 / 90px 12px repeat-x; mask: var(--wave) 0 0 / 90px 12px repeat-x; } .sbs-day__sun { position: absolute; width: 54px; height: 54px; left: calc(6% + 88% * var(--x, 0)); top: calc(12% + 66% * var(--y, 1)); transform: translate(-50%, -50%); } .sbs-day__sun svg { width: 100%; height: 100%; overflow: visible; } .sbs-day__clock { position: absolute; right: .8rem; top: .7rem; font: 650 1.35rem/1 var(--display); background: #fff; border: var(--line); border-radius: 12px; padding: .35rem .6rem; font-variant-numeric: tabular-nums; } .sbs-day__school { position: absolute; left: 50%; bottom: 14%; width: 90px; transform: translateX(-50%); } .sbs-day__controls { display: flex; align-items: center; gap: .8rem; padding: 0 1rem 1rem; } .sbs-day__range { flex: 1; -webkit-appearance: none; appearance: none; height: 14px; border-radius: 999px; background: linear-gradient(90deg, #FFE08A, #9FD8F5 50%, #FFC97A); border: var(--line); cursor: pointer; } .sbs-day__range::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sun); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); } .sbs-day__range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--sun); border: 3px solid var(--ink); } .sbs-day__range:focus-visible { outline: 3.5px solid var(--grape); outline-offset: 4px; } .sbs-day__play { flex: none; } .sbs-day__card { background: #fff; border: var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: 8px 8px 0 var(--c, var(--sun)); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem 1.1rem; align-items: start; } .sbs-day__card .sbs-icon { width: 4.2rem; height: 4.2rem; grid-row: span 4; color: var(--c, var(--sun)); } .sbs-day__when { margin: 0; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .sbs-day__what { margin: 0; font: 650 clamp(1.4rem, 1.2rem + .8vw, 1.9rem)/1.1 var(--display); } .sbs-day__es { margin: 0; font-family: var(--hand); font-size: 1.35rem; color: var(--berry); } .sbs-day__note { margin: .2rem 0 0; color: var(--ink-soft); } .sbs-day__list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .25rem; } .sbs-day__list li { display: grid; grid-template-columns: 6.8rem auto minmax(0, 1fr); gap: .6rem; align-items: center; padding: .35rem .6rem; border-radius: 12px; font-size: .97rem; } .sbs-day__list li .sbs-icon { width: 1.6rem; height: 1.6rem; color: var(--grape); } .sbs-day__list time { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: .92rem; } .sbs-day__list li.is-now { background: var(--lilac); font-weight: 600; } .sbs-day__list li.is-now time { color: var(--ink); } .sbs-day__list [hidden] { display: none; } /* ===================================================================================================================== FARM FRIENDS: flip cards ===================================================================================================================== */ .sbs-friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); } .sbs-friend { position: relative; perspective: 1400px; } .sbs-friend__inner { position: relative; display: grid; transition: transform .7s var(--ease); transform-style: preserve-3d; } .sbs-friend.is-flipped .sbs-friend__inner { transform: rotateY(180deg); } .sbs-friend__face { grid-area: 1 / 1; background: #fff; border: var(--line); border-radius: var(--radius); overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 7px 7px 0 var(--c, var(--sun)); display: flex; flex-direction: column; } .sbs-friend__back { transform: rotateY(180deg); padding: 1.3rem 1.3rem 4rem; background: var(--paper); } .sbs-friend__front img, .sbs-friend__front .sbs-friend__draw { width: 100%; height: auto; aspect-ratio: 4 / 3.3; object-fit: cover; display: block; border-bottom: var(--line); } .sbs-friend__front .sbs-friend__draw { background: var(--sky-wash); display: grid; place-items: center; } .sbs-friend__front .sbs-friend__draw svg { width: 70%; height: 80%; overflow: visible; } .sbs-friend__label { padding: .9rem 1.1rem 4rem; } .sbs-friend__label h3 { font-size: 1.6rem; margin: 0; font-stretch: 112%; } .sbs-friend__label p { margin: .1rem 0 0; color: var(--ink-soft); } .sbs-friend__back h3 { font-size: 1.3rem; margin: 0 0 .5rem; } .sbs-friend__back p { margin: .45rem 0 0; font-size: .97rem; } .sbs-friend__say { font-family: var(--hand); color: var(--berry); font-size: 1.35rem !important; line-height: 1.15; } .sbs-friend__flip { position: absolute; z-index: 2; left: 1.1rem; bottom: 1.1rem; } .sbs-friend__flip .sbs-icon { transition: transform .5s var(--ease); } .sbs-friend.is-flipped .sbs-friend__flip .sbs-icon { transform: rotate(180deg); } .no-js .sbs-friend__inner { display: block; } .no-js .sbs-friend__back { transform: none; margin-top: 1rem; } .no-js .sbs-friend__flip { display: none; } /* ===================================================================================================================== TEACHERS ===================================================================================================================== */ .sbs-team { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3rem, 6vw, 5.5rem); } .sbs-teacher { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } .sbs-teacher:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); } .sbs-teacher:nth-child(even) .sbs-teacher__photo { order: 2; } @media (max-width: 800px) { .sbs-teacher, .sbs-teacher:nth-child(even) { grid-template-columns: minmax(0, 1fr); } .sbs-teacher:nth-child(even) .sbs-teacher__photo { order: 0; } .sbs-teacher__photo { max-width: 19rem; } } .sbs-teacher__photo { margin: 0; position: relative; transform: rotate(var(--tilt, -2deg)); } .sbs-teacher__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; display: block; border: 10px solid #fff; border-bottom-width: 54px; border-radius: 4px; box-shadow: var(--soft); } .sbs-teacher__photo figcaption { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: var(--hand); font-size: 1.35rem; color: var(--ink); } .sbs-teacher__photo::before { content: ""; position: absolute; z-index: 2; top: -14px; left: 50%; width: 110px; height: 30px; background: var(--c, var(--sun)); opacity: .82; transform: translateX(-50%) rotate(-3deg); } .sbs-teacher h3 { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); margin: 0; } .sbs-teacher__role { margin: .1rem 0 1rem; font-family: var(--hand); font-size: 1.45rem; color: var(--berry); } .sbs-teacher p { margin: 0 0 .9rem; } .sbs-funfact { margin-top: 1.2rem; } .sbs-funfact__body { margin-top: .9rem; background: #fff; border: var(--line); border-radius: 20px; padding: 1rem 1.2rem; box-shadow: 6px 6px 0 var(--c, var(--sun)); position: relative; } .sbs-funfact__body[hidden] { display: none; } .sbs-funfact__body.is-in { animation: sbs-pop .45s var(--bounce); } .sbs-funfact__body p { margin: 0; } .sbs-funfact__notes { position: absolute; right: 1rem; top: -1.2rem; display: flex; gap: .3rem; font-size: 1.6rem; color: var(--grape); pointer-events: none; } .sbs-funfact__notes span { animation: sbs-float 1.6s ease-out both; animation-delay: calc(var(--i) * .18s); } .sbs-funfact__play { margin-top: .8rem; } @keyframes sbs-float { from { opacity: 0; transform: translateY(16px) rotate(-10deg); } 40% { opacity: 1; } to { opacity: 0; transform: translateY(-34px) rotate(12deg); } } @keyframes sbs-pop { from { opacity: 0; transform: scale(.85); } } .sbs-funfact--neon .sbs-funfact__body { background: #241A44; color: #fff; box-shadow: 6px 6px 0 var(--bubblegum), 0 0 24px rgba(242, 123, 170, .5); } .sbs-funfact--neon .sbs-funfact__body p { color: #fff; } /* ===================================================================================================================== MINI GAMES: footprint painter + count the chicks ===================================================================================================================== */ .sbs-games { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } @media (max-width: 960px) { .sbs-games { grid-template-columns: minmax(0, 1fr); } } .sbs-game { background: #fff; border: var(--line); border-radius: var(--radius); box-shadow: 8px 8px 0 var(--c, var(--bubblegum)); padding: 1.3rem; display: flex; flex-direction: column; gap: .9rem; } .sbs-game h3 { font-size: 1.6rem; margin: 0; } .sbs-game__es { font-family: var(--hand); color: var(--berry); font-size: 1.3rem; margin: -.4rem 0 0; } .sbs-paint__pots { display: flex; flex-wrap: wrap; gap: .5rem; } .sbs-pot { width: 46px; height: 46px; border-radius: 50%; border: var(--line); background: var(--pot); cursor: pointer; position: relative; box-shadow: var(--pop-sm); transition: transform .2s var(--bounce); } .sbs-pot:hover { transform: translateY(-2px); } .sbs-pot[aria-pressed="true"] { transform: translateY(-4px) scale(1.12); box-shadow: 0 6px 0 var(--ink), 0 0 0 4px #fff, 0 0 0 7px var(--pot); } .sbs-paint__paper { position: relative; border: var(--line); border-radius: 18px; background: #FFFDF8; background-image: linear-gradient(rgba(89, 183, 234, .18) 1.5px, transparent 1.5px); background-size: 100% 34px; overflow: hidden; touch-action: manipulation; cursor: crosshair; } .sbs-paint__svg { display: block; width: 100%; height: auto; aspect-ratio: 800 / 380; } .sbs-paint__svg use { animation: sbs-stamp .35s var(--bounce) both; transform-box: fill-box; transform-origin: center; } .sbs-paint__word { position: absolute; left: 1rem; top: .6rem; margin: 0; font: 650 clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem)/1 var(--display); color: var(--word, var(--grape-deep)); pointer-events: none; text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff; } .sbs-paint__word small { display: block; font: 400 1.05rem/1.2 var(--body); color: var(--ink-soft); text-shadow: none; } .sbs-paint__word.is-in { animation: sbs-pop .4s var(--bounce); } .sbs-paint__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; margin: 0; font-family: var(--hand); font-size: 1.5rem; color: var(--ink-soft); pointer-events: none; text-align: center; padding: 1rem; } .sbs-game__tools { display: flex; flex-wrap: wrap; gap: .6rem; } .sbs-count__yard { position: relative; aspect-ratio: 5 / 3.2; border: var(--line); border-radius: 18px; background: linear-gradient(#DDF3FB 0 38%, #A9D46E 38%); overflow: hidden; } .sbs-count__yard::before { content: ""; position: absolute; left: 0; right: 0; top: 38%; height: 12px; margin-top: -11px; background: #C9E6A2; -webkit-mask: var(--wave) 0 0 / 80px 12px repeat-x; mask: var(--wave) 0 0 / 80px 12px repeat-x; } .sbs-chickbtn { position: absolute; left: var(--x); top: var(--y); width: 15%; aspect-ratio: 1; padding: 0; background: none; border: 0; cursor: pointer; transform: translate(-50%, -50%) scaleX(var(--f, 1)); border-radius: 50%; } .sbs-chickbtn svg { width: 100%; height: 100%; overflow: visible; display: block; } .sbs-chickbtn:hover svg { transform: translateY(-3px); } .sbs-chickbtn.is-counted svg { animation: sbs-hop .5s var(--ease); } .sbs-chickbtn__n { position: absolute; top: -16%; right: -6%; min-width: 1.7em; height: 1.7em; display: grid; place-items: center; background: var(--grape); color: #fff; border: 2px solid var(--ink); border-radius: 999px; font: 650 .95rem/1 var(--display); transform: scaleX(var(--f, 1)); } .sbs-chickbtn:not(.is-counted) .sbs-chickbtn__n { display: none; } .sbs-chickbtn:focus-visible { outline-offset: 0; } .sbs-count__score { display: flex; align-items: baseline; gap: .7rem; margin: 0; min-height: 3.2rem; } .sbs-count__n { font: 650 2.8rem/1 var(--display); color: var(--grape-deep); font-variant-numeric: tabular-nums; } .sbs-count__word { font: 650 2rem/1 var(--display); color: var(--berry); } .sbs-count__score.is-in .sbs-count__word { animation: sbs-pop .4s var(--bounce); } .sbs-count__done { font-family: var(--hand); font-size: 1.4rem; color: var(--leaf); margin: 0; } /* ===================================================================================================================== PARENT LOVE: the fridge door ===================================================================================================================== */ .sbs-fridge { position: relative; background: linear-gradient(100deg, #CFEFE3, #BDE6D6 60%, #B2DECD); border: 4px solid var(--ink); border-radius: 46px 46px 34px 34px; padding: clamp(4.5rem, 7vw, 6rem) clamp(1rem, 4vw, 3.2rem) clamp(2rem, 4vw, 3.2rem); box-shadow: 12px 12px 0 rgba(43, 34, 72, .14); } .sbs-fridge::before { content: ""; position: absolute; right: clamp(1rem, 3vw, 2rem); top: 22%; width: 16px; height: 140px; border-radius: 10px; background: linear-gradient(90deg, #E9EEF0, #B8C3C8); border: 3px solid var(--ink); } .sbs-fridge__magnets { position: absolute; left: clamp(1rem, 4vw, 3.2rem); right: 4rem; top: 1.2rem; height: 4rem; } .sbs-magnet { position: absolute; left: var(--x); top: var(--y); font: 700 clamp(2.2rem, 1.6rem + 2vw, 3.2rem)/1 var(--display); color: var(--m); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); transform: rotate(var(--r)); cursor: grab; user-select: none; touch-action: none; } @media (max-width: 600px) { .sbs-magnet { font-size: 1.75rem; -webkit-text-stroke-width: 2px; text-shadow: 0 3px 0 var(--ink); } .sbs-fridge { padding-top: 4rem; } } .sbs-magnet.is-dragging { cursor: grabbing; transform: rotate(0deg) scale(1.15); z-index: 5; } .sbs-fridge__notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; } .sbs-note { position: relative; background: #fff; background-image: linear-gradient(90deg, transparent 2.6rem, rgba(232, 83, 58, .45) 2.6rem, rgba(232, 83, 58, .45) calc(2.6rem + 1.5px), transparent calc(2.6rem + 1.5px)), linear-gradient(rgba(89, 183, 234, .28) 1.5px, transparent 1.5px); background-size: 100% 100%, 100% 1.9rem; background-position: 0 0, 0 1.62rem; padding: 2rem 1.4rem 1.4rem 3.4rem; border-radius: 6px; box-shadow: 0 16px 28px -18px rgba(43, 34, 72, .6); transform: rotate(var(--tilt, -1.2deg)); line-height: 1.9rem; } .sbs-note::before { content: ""; position: absolute; top: -14px; left: 50%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: var(--c, var(--tomato)); border: 3px solid var(--ink); box-shadow: inset -5px -5px 0 rgba(0, 0, 0, .15); } .sbs-note p { margin: 0 0 1.9rem; } .sbs-note p:last-of-type { margin-bottom: 0; } .sbs-note h3 { font-size: 1.45rem; line-height: 1.9rem; margin: 0 0 .1rem; } .sbs-note__who { font-family: var(--hand); font-size: 1.45rem !important; color: var(--berry); margin-top: .6rem !important; } .sbs-note--short { line-height: 1.7; } .sbs-fridge__art { position: absolute; pointer-events: none; } .sbs-fridge__art svg { width: 100%; height: auto; display: block; } @media (min-width: 860px) { .sbs-fridge:not(.sbs-fridge--mini) .sbs-fridge__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.6rem; } .sbs-fridge:not(.sbs-fridge--mini) #love-coldham { grid-row: 1 / span 2; } } .sbs-fridge--mini .sbs-fridge__notes { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); } .sbs-fridge--mini .sbs-note { line-height: 1.6; background-size: 100% 100%, 100% 1.6rem; } .sbs-fridge--mini .sbs-note p { margin-bottom: .7rem; } /* ===================================================================================================================== GALLERY: the clothesline ===================================================================================================================== */ .sbs-line__filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.4rem; } .sbs-line__photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.4rem clamp(1rem, 2.5vw, 2rem); } @media (max-width: 1000px) { .sbs-line__photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .sbs-line__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem .9rem; } } .sbs-line__item { position: relative; padding-top: 22px; } .sbs-line__item[hidden] { display: none; } /* each photo hangs from its own little dip of string, so a row reads as one sagging line */ .sbs-line__item::before { content: ""; position: absolute; top: 0; left: calc(-1 * clamp(.5rem, 1.25vw, 1rem) - 1px); right: calc(-1 * clamp(.5rem, 1.25vw, 1rem) - 1px); height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 26' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q50 30 100 4' fill='none' stroke='%238A6A4A' stroke-width='2.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } .sbs-line__photo { display: block; width: 100%; padding: 8px 8px 0; background: #fff; border: 0; border-radius: 3px; box-shadow: 0 14px 22px -14px rgba(43, 34, 72, .55); cursor: zoom-in; transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 0; transition: transform .5s var(--bounce), box-shadow .3s; position: relative; } .sbs-line__photo:hover, .sbs-line__photo:focus-visible { transform: rotate(calc(var(--tilt, 0deg) * -1.6)) translateY(3px); box-shadow: 0 20px 30px -16px rgba(43, 34, 72, .6); } .sbs-line__photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .sbs-line__photo::before { content: ""; position: absolute; z-index: 2; top: -16px; left: 50%; width: 12px; height: 34px; margin-left: -6px; background: linear-gradient(90deg, #C9A06E, #E6C28E 50%, #C9A06E); border: 2px solid #6B5136; border-radius: 3px; } .sbs-line__cap { display: block; font-family: var(--hand); font-size: 1.12rem; line-height: 1.15; color: var(--ink); padding: .55rem .2rem .7rem; text-align: center; } .sbs-lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); max-height: 94vh; overflow: visible; } .sbs-lightbox::backdrop { background: rgba(43, 34, 72, .82); } .sbs-lightbox__frame { position: relative; background: #fff; padding: 12px 12px 0; border-radius: 6px; margin: 0; } .sbs-lightbox__frame img { display: block; max-width: 100%; max-height: calc(94vh - 120px); width: auto; height: auto; margin: 0 auto; } .sbs-lightbox__cap { font-family: var(--hand); font-size: 1.45rem; text-align: center; padding: .7rem 1rem .9rem; color: var(--ink); } .sbs-lightbox__btn { position: absolute; top: 50%; width: 52px; height: 52px; border-radius: 50%; border: var(--line); background: var(--sun); color: var(--ink); display: grid; place-items: center; cursor: pointer; transform: translateY(-50%); box-shadow: var(--pop-sm); } .sbs-lightbox__btn .sbs-icon { width: 26px; height: 26px; } .sbs-lightbox__btn--prev { left: -26px; } .sbs-lightbox__btn--prev .sbs-icon { transform: scaleX(-1); } .sbs-lightbox__btn--next { right: -26px; } .sbs-lightbox__close { position: absolute; top: -20px; right: -20px; width: 46px; height: 46px; border-radius: 50%; border: var(--line); background: #fff; font: 600 1.6rem/1 var(--display); cursor: pointer; box-shadow: var(--pop-sm); } @media (max-width: 640px) { .sbs-lightbox__btn--prev { left: 6px; } .sbs-lightbox__btn--next { right: 6px; } .sbs-lightbox__close { right: 4px; top: -24px; } } /* chips (gallery filters, class filters) */ .sbs-chip { font: 500 .98rem/1.2 var(--body); border: var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: .5rem .95rem; cursor: pointer; transition: background .2s, transform .2s var(--bounce); } .sbs-chip:hover { transform: translateY(-2px); } .sbs-chip[aria-pressed="true"], .sbs-chip.is-on { background: var(--grape); color: #fff; } .sbs-chip small { font-family: var(--hand); font-size: 1.05rem; color: var(--berry); margin-left: .3rem; } .sbs-chip[aria-pressed="true"] small { color: #FFE9A6; } /* ===================================================================================================================== ENRICHMENT: crayon-box timetable, class cards, session stones ===================================================================================================================== */ .sbs-c-tomato { --c: var(--tomato); --cw: #FDE3DD; color: inherit; } .sbs-c-lime { --c: var(--lime); --cw: #E7F5D9; } .sbs-c-sky { --c: var(--sky); --cw: #E4F4FC; } .sbs-c-grape { --c: var(--grape); --cw: #EFE8FC; } .sbs-c-bubblegum { --c: var(--bubblegum); --cw: #FDE8EF; } .sbs-c-tangerine { --c: var(--tangerine); --cw: #FEEBD8; } .sbs-c-sun { --c: var(--sun); --cw: #FFF3CC; } .sbs-board__filters { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2rem; margin-bottom: 1.6rem; } .sbs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; } .sbs-chips__label { font-family: var(--hand); font-size: 1.3rem; color: var(--berry); margin-right: .2rem; } .sbs-board__count { margin: 0 0 0 auto; color: var(--ink-soft); font-weight: 500; } .sbs-week { display: grid; grid-template-columns: 8.5rem repeat(5, minmax(0, 1fr)); border: var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; box-shadow: 10px 10px 0 var(--sun); } .sbs-week__row { display: contents; } .sbs-week__row > * { padding: .7rem; border-bottom: 2px dashed rgba(43, 34, 72, .16); border-right: 2px dashed rgba(43, 34, 72, .1); } .sbs-week__row:last-child > * { border-bottom: 0; } .sbs-week__row > *:last-child { border-right: 0; } .sbs-week__row--head > * { background: var(--grape-deep); color: #fff; font: 600 1.1rem/1.1 var(--display); text-align: center; border-bottom: var(--line); border-right-color: rgba(255, 255, 255, .15); } .sbs-week__day small { display: block; font-family: var(--hand); font-weight: 400; font-size: 1.1rem; color: var(--sun); } .sbs-week__slot { background: var(--kraft); display: flex; flex-direction: column; justify-content: center; } .sbs-week__slot strong { font: 650 1.02rem/1.15 var(--display); } .sbs-week__slot small { color: var(--ink-soft); font-size: .82rem; margin-top: .2rem; } .sbs-week__cell { display: flex; flex-direction: column; gap: .45rem; } .sbs-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .5rem; align-items: center; background: var(--cw); border: 2px solid var(--ink); border-radius: 16px; padding: .5rem .6rem; text-decoration: none; color: var(--ink); box-shadow: 0 3px 0 var(--c); transition: transform .25s var(--bounce), opacity .25s, filter .25s; } .sbs-tile:hover { transform: translateY(-3px) rotate(-1deg); color: var(--ink); } .sbs-tile__icon { width: 2.1rem !important; height: 2.1rem !important; grid-row: span 2; color: var(--c); } .sbs-tile__name { font: 600 .98rem/1.1 var(--display); } .sbs-tile__meta { font-size: .76rem; color: var(--ink-soft); line-height: 1.3; } .sbs-tile.is-dim, .sbs-classcard.is-dim { opacity: .22; filter: grayscale(1); } .sbs-tile.is-dim:hover { transform: none; } .sbs-loc { display: inline-block; font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .05rem .45rem; vertical-align: 1px; white-space: nowrap; } .sbs-loc--both { background: var(--sun); color: var(--ink); } .sbs-loc--edh { background: var(--grape); color: #fff; } .sbs-loc--gb { background: var(--leaf); color: #fff; } .sbs-board__legend { font-size: .9rem; color: var(--ink-soft); margin: 1.4rem 0 0; } @media (max-width: 900px) { .sbs-week { display: block; box-shadow: 6px 6px 0 var(--sun); } .sbs-week__row { display: block; padding: .8rem; border-bottom: var(--line); } .sbs-week__row.sbs-week__row--head { display: none; } .sbs-week__row:last-child { border-bottom: 0; } .sbs-week__row > * { border: 0 !important; padding: 0; } .sbs-week__slot { background: none; margin-bottom: .6rem; } .sbs-week__cell { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .4rem; margin-bottom: .45rem; align-items: start; } .sbs-week__cell::before { content: attr(data-day); font: 600 .95rem/2.6 var(--display); grid-row: span 3; } .sbs-week__cell .sbs-tile { grid-column: 2; } } .sbs-classcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); margin-top: clamp(3rem, 6vw, 5rem); } .sbs-classcard { background: #fff; border: var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem 1.4rem; box-shadow: 7px 7px 0 var(--c); scroll-margin-top: calc(var(--header-h) + 2rem); transition: opacity .3s, filter .3s; position: relative; } .sbs-classcard:target { animation: sbs-wiggle .8s var(--ease); outline: 4px solid var(--c); outline-offset: 6px; } .sbs-classcard__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .sbs-classcard__icon { width: 3.6rem !important; height: 3.6rem !important; color: var(--c); } .sbs-classcard__es { font-family: var(--hand); font-size: 1.3rem; color: var(--berry); margin: 0; text-align: right; } .sbs-classcard h3 { font-size: 1.4rem; margin: .7rem 0 .4rem; line-height: 1.15; } .sbs-classcard__when, .sbs-classcard__who { margin: 0; font-weight: 500; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .sbs-classcard__when .sbs-icon { width: 1.25rem; height: 1.25rem; color: var(--c); } .sbs-classcard__who { color: var(--ink-soft); margin-top: .2rem; } .sbs-classcard__blurb { margin: .8rem 0 .9rem; font-size: .98rem; } .sbs-classcard__price { margin: 0; padding-top: .8rem; border-top: 2px dashed rgba(43, 34, 72, .18); font-size: .92rem; color: var(--ink-soft); } .sbs-classcard__price strong { font: 650 1.35rem/1 var(--display); color: var(--ink); } .sbs-board__none { text-align: center; font-family: var(--hand); font-size: 1.4rem; color: var(--ink-soft); margin-top: 2rem; } .sbs-stones { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; position: relative; } .sbs-stones::before { content: ""; position: absolute; left: 6%; right: 6%; top: 2.1rem; border-top: 4px dotted rgba(43, 34, 72, .3); } .sbs-stones__stone { position: relative; background: #fff; border: var(--line); border-radius: 44% 56% 48% 52% / 40% 44% 56% 60%; padding: 3.6rem 1rem 1.3rem; text-align: center; box-shadow: 6px 6px 0 rgba(43, 34, 72, .12); } .sbs-stones__n { position: absolute; top: .7rem; left: 50%; width: 2.8rem; height: 2.8rem; margin-left: -1.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--kraft); border: var(--line); font: 650 1.3rem/1 var(--display); } .sbs-stones__stone strong { display: block; font: 650 1.2rem/1.15 var(--display); } .sbs-stones__stone strong span { font-family: var(--hand); font-weight: 400; color: var(--berry); } .sbs-stones__dates { display: block; margin-top: .3rem; font-weight: 500; } .sbs-stones__note { display: block; font-size: .85rem; color: var(--ink-soft); margin-top: .2rem; } .sbs-stones__here { display: inline-block; margin-top: .6rem; background: var(--sun); border: 2px solid var(--ink); border-radius: 999px; padding: .15rem .65rem; font-weight: 600; font-size: .85rem; } .sbs-stones__stone.is-now { background: #FFF3CC; box-shadow: 6px 6px 0 var(--sun); } .sbs-stones__stone.is-now .sbs-stones__n { background: var(--sun); } .sbs-stones__stone.is-past { opacity: .62; } @media (max-width: 860px) { .sbs-stones { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sbs-stones::before { display: none; } } /* ===================================================================================================================== ENROLLMENT (five pasos) + backpack ===================================================================================================================== */ .sbs-enroll { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2rem clamp(1.5rem, 3vw, 3rem); align-items: start; } .sbs-enroll__steps { grid-column: 1 / -1; list-style: none; padding: 0; margin: 0 0 .5rem; display: flex; justify-content: space-between; gap: .5rem; position: relative; } .sbs-enroll__steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 24px; border-top: 4px dotted rgba(43, 34, 72, .22); z-index: 0; } .sbs-enroll__stepdot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; flex: 1; } .sbs-enroll__foot { width: 50px; height: 50px; border-radius: 50%; background: #fff; border: var(--line); display: grid; place-items: center; color: rgba(43, 34, 72, .2); transition: background .3s, color .3s, transform .4s var(--bounce); } .sbs-enroll__foot .sbs-icon { width: 30px; height: 30px; } .sbs-enroll__stepdot:nth-child(even) .sbs-enroll__foot .sbs-icon { transform: scaleX(-1); } .sbs-enroll__steplabel { font: 600 .95rem/1.15 var(--display); } .sbs-enroll__steplabel small { display: block; font-family: var(--hand); font-weight: 400; color: var(--berry); font-size: 1.05rem; } .sbs-enroll__stepdot.is-done .sbs-enroll__foot { color: var(--grape); background: var(--lilac); } .sbs-enroll__stepdot.is-current .sbs-enroll__foot { color: var(--ink); background: var(--sun); transform: scale(1.12) rotate(-6deg); } @media (max-width: 600px) { .sbs-enroll__steplabel { font-size: .78rem; } .sbs-enroll__steplabel small { font-size: .95rem; } .sbs-enroll__foot { width: 42px; height: 42px; } .sbs-enroll__steps::before { top: 20px; } } .sbs-enroll__form { background: #fff; border: var(--line); border-radius: var(--radius); box-shadow: 8px 8px 0 var(--grape); padding: clamp(1.2rem, 3vw, 2.2rem); min-width: 0; } .sbs-enroll__step[hidden] { display: none; } .sbs-enroll__step.is-active { animation: sbs-step-in .45s var(--ease); } @keyframes sbs-step-in { from { opacity: 0; transform: translateX(18px); } } .sbs-enroll__step h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); margin: 0 0 .3rem; outline: none; } .sbs-enroll__paso { display: block; font-family: var(--hand); font-weight: 400; font-size: 1.35rem; color: var(--berry); font-stretch: 100%; } .sbs-enroll__note { color: var(--ink-soft); margin: 0 0 1.2rem; } .sbs-req { color: var(--tomato-deep); font-weight: 700; } .sbs-fs { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; } .sbs-fs > legend { font: 650 1.2rem/1.2 var(--display); padding: 0; margin-bottom: .8rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; } .sbs-fs > legend span { font-family: var(--body); font-weight: 500; font-size: .92rem; color: var(--ink-soft); } .sbs-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1rem; } @media (max-width: 600px) { .sbs-fields { grid-template-columns: minmax(0, 1fr); } } .sbs-field { display: flex; flex-direction: column; min-width: 0; } .sbs-field--wide { grid-column: 1 / -1; } .sbs-field label { font-weight: 500; margin-bottom: .3rem; font-size: .98rem; } .sbs-field input, .sbs-field select, .sbs-field textarea, .sbs-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), .sbs-form select, .sbs-form textarea { box-sizing: border-box; min-height: 3rem; width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #FFFDF8; border: 2px solid rgba(43, 34, 72, .35); border-radius: 14px; padding: .72rem .9rem; transition: border-color .2s, box-shadow .2s, background .2s; } .sbs-field textarea, .sbs-form textarea { min-height: 6rem; resize: vertical; } .sbs-field input:focus, .sbs-field select:focus, .sbs-field textarea:focus, .sbs-form input:focus, .sbs-form select:focus, .sbs-form textarea:focus { outline: none; border-color: var(--grape); background: #fff; box-shadow: 0 0 0 4px rgba(107, 63, 199, .2); } .sbs-field.is-err input, .sbs-field.is-err select, .sbs-field.is-err textarea { border-color: var(--tomato-deep); background: #FFF6F3; } .sbs-help { font-size: .86rem; color: var(--ink-soft); margin: .3rem 0 0; } .sbs-err { color: var(--tomato-deep); font-size: .88rem; font-weight: 600; margin: .25rem 0 .55rem; min-height: 0; } .sbs-err:empty { margin: 0 0 .55rem; } .sbs-err--block:empty { display: none; } .sbs-err--block { background: #FFF1EE; border: 2px solid var(--tomato-deep); border-radius: 12px; padding: .55rem .8rem; margin: .4rem 0 1rem; } .sbs-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sbs-pick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); gap: .7rem; } .sbs-pick__card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .7rem; align-items: center; background: #fff; border: 2px solid rgba(43, 34, 72, .3); border-radius: 18px; padding: .7rem .8rem; cursor: pointer; transition: border-color .2s, background .2s, transform .25s var(--bounce), box-shadow .2s; } .sbs-pick__card:hover { border-color: var(--ink); transform: translateY(-2px); } .sbs-pick__card input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .sbs-pick__card:has(input:focus-visible) { outline: 3.5px solid var(--grape); outline-offset: 3px; } .sbs-pick__card:has(input:checked) { background: var(--cw); border-color: var(--ink); box-shadow: 0 4px 0 var(--c); } .sbs-pick__icon .sbs-icon { width: 2.4rem; height: 2.4rem; color: var(--c); } .sbs-pick__body { display: flex; flex-direction: column; line-height: 1.2; } .sbs-pick__body strong { font: 600 1rem/1.15 var(--display); } .sbs-pick__body span { font-size: .8rem; color: var(--ink-soft); margin-top: .15rem; } .sbs-pick__price { font: 600 .95rem/1 var(--display); color: var(--ink-soft); } .sbs-pick__tick { position: absolute; top: -10px; right: -8px; width: 28px; height: 28px; border-radius: 50%; background: var(--leaf); color: #fff; border: 2px solid var(--ink); display: grid; place-items: center; transform: scale(0); transition: transform .3s var(--bounce); } .sbs-pick__tick .sbs-icon { width: 16px; height: 16px; } .sbs-pick__card:has(input:checked) .sbs-pick__tick { transform: scale(1); } .sbs-checks { display: grid; gap: .7rem; } .sbs-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; background: var(--paper); border: 2px solid rgba(43, 34, 72, .18); border-radius: 16px; padding: .8rem .95rem; cursor: pointer; font-size: .95rem; line-height: 1.5; } .sbs-check input { width: 1.4rem; height: 1.4rem; accent-color: var(--grape); margin-top: .1rem; } .sbs-check:has(input:checked) { border-color: var(--grape); background: var(--lilac); } .sbs-check--final { margin-top: 1.2rem; } .sbs-pay { display: grid; gap: .7rem; } .sbs-pay__opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; border: 2px solid rgba(43, 34, 72, .25); border-radius: 18px; padding: .9rem 1rem; cursor: pointer; background: #fff; } .sbs-pay__opt input { width: 1.3rem; height: 1.3rem; accent-color: var(--grape); margin-top: .2rem; } .sbs-pay__opt strong { display: block; font: 650 1.12rem/1.2 var(--display); } .sbs-pay__opt span { font-size: .95rem; } .sbs-pay__opt:has(input:checked) { border-color: var(--ink); background: var(--lilac); box-shadow: 0 4px 0 var(--grape); } .sbs-enroll__nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 2px dashed rgba(43, 34, 72, .16); } .sbs-enroll__status { margin: 1rem 0 0; font-weight: 600; color: var(--tomato-deep); } .sbs-review { border: 2px solid rgba(43, 34, 72, .2); border-radius: 18px; overflow: hidden; } .sbs-review dl { margin: 0; display: grid; grid-template-columns: 9rem minmax(0, 1fr); } .sbs-review dt, .sbs-review dd { margin: 0; padding: .6rem .9rem; border-bottom: 1px solid rgba(43, 34, 72, .1); } .sbs-review dt { color: var(--ink-soft); background: var(--paper); font-size: .92rem; } .sbs-review dd ul { margin: 0; padding-left: 1.1rem; } .sbs-review__total dt, .sbs-review__total dd { font-weight: 650; font-size: 1.1rem; border-bottom: 0; } .sbs-review__total dd { color: var(--grape-deep); } @media (max-width: 520px) { .sbs-review dl { grid-template-columns: minmax(0, 1fr); } .sbs-review dt { border-bottom: 0; padding-bottom: 0; background: none; } } .sbs-backpack { position: sticky; top: calc(var(--header-h) + 1.5rem); background: var(--kraft); border: var(--line); border-radius: var(--radius); padding: 1.3rem 1.3rem 1.1rem; box-shadow: 8px 8px 0 var(--sun); } .sbs-backpack__bag { position: relative; width: 64px; margin: -3.2rem auto .2rem; } .sbs-backpack__bag svg { width: 100%; display: block; } .sbs-backpack__bag.is-bump svg { animation: sbs-hop .5s var(--ease); } .sbs-backpack__count { position: absolute; top: 14px; right: -12px; min-width: 1.8rem; height: 1.8rem; display: grid; place-items: center; background: var(--tomato-deep); color: #fff; border: 2px solid var(--ink); border-radius: 999px; font: 650 .95rem/1 var(--display); padding: 0 .3rem; } .sbs-backpack__title { font-size: 1.3rem; margin: 0 0 .6rem; text-align: center; } .sbs-backpack__title span { font-family: var(--hand); font-weight: 400; color: var(--berry); } .sbs-backpack__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; } .sbs-backpack__list li { display: flex; justify-content: space-between; gap: .6rem; background: #fff; border-radius: 10px; padding: .4rem .6rem; } .sbs-backpack__list li.sbs-backpack__empty { background: none; color: var(--ink-soft); font-family: var(--hand); font-size: 1.15rem; justify-content: center; text-align: center; } .sbs-backpack__disc { margin: .5rem 0 0; font-size: .9rem; color: var(--leaf); font-weight: 600; text-align: right; } .sbs-backpack__total { display: flex; justify-content: space-between; align-items: baseline; margin: .8rem 0 0; padding-top: .7rem; border-top: 2px dashed rgba(43, 34, 72, .25); font-weight: 600; } .sbs-backpack__total strong { font: 650 1.9rem/1 var(--display); color: var(--grape-deep); } .sbs-backpack__fine { font-size: .82rem; color: var(--ink-soft); margin: .7rem 0 0; } @media (max-width: 960px) { .sbs-enroll { grid-template-columns: minmax(0, 1fr); } .sbs-backpack { position: relative; top: 0; order: 2; margin-top: 2rem; } } .sbs-enroll__done { grid-column: 1 / -1; text-align: center; background: #fff; border: var(--line); border-radius: var(--radius); box-shadow: 8px 8px 0 var(--lime); padding: clamp(2rem, 5vw, 3.5rem) 1.5rem; outline: none; } .sbs-enroll__done h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin: .3rem 0 .6rem; } .sbs-enroll__done p { max-width: 34rem; margin: .4rem auto 0; } .sbs-done__burst .sbs-icon { width: 5rem; height: 5rem; color: var(--sun); animation: sbs-spin 1.2s var(--bounce); } .sbs-done__fine { font-size: .92rem; color: var(--ink-soft); margin-top: 1rem !important; } .sbs-enroll.is-done .sbs-enroll__form, .sbs-enroll.is-done .sbs-backpack, .sbs-enroll.is-done .sbs-enroll__steps { display: none; } /* ===================================================================================================================== NINJA FORMS (the tour form), styled to the site ===================================================================================================================== */ .sbs-formcard { background: #fff; border: var(--line); border-radius: var(--radius); box-shadow: 8px 8px 0 var(--bubblegum); padding: clamp(1.3rem, 3vw, 2.2rem); } .sbs-formcard h2 { font-size: clamp(1.8rem, 1.4rem + 1.3vw, 2.4rem); margin: .1rem 0 .4rem; } .sbs-form .nf-form-content { padding: 0; max-width: none; } .sbs-form .nf-before-form-content { font-size: .88rem; color: var(--ink-soft); margin-bottom: 1rem; } .sbs-form nf-fields-wrap { display: flex; flex-wrap: wrap; gap: 0 1rem; } .sbs-form nf-field { flex: 1 1 100%; min-width: 0; } .sbs-form nf-field:has(.sbs-half) { flex: 1 1 calc(50% - .5rem); } @media (max-width: 560px) { .sbs-form nf-field:has(.sbs-half) { flex-basis: 100%; } } .sbs-form .nf-field-container { margin-bottom: 1.05rem !important; } .sbs-form .nf-field-label label, .sbs-form .nf-field-label { font-weight: 500; font-size: 1rem; color: var(--ink); margin-bottom: .3rem; } .sbs-form .ninja-forms-req-symbol { color: var(--tomato-deep); } .sbs-form .nf-error .ninja-forms-field { border-color: var(--tomato-deep) !important; } .sbs-form .nf-error-msg, .sbs-form .nf-error-wrap { color: var(--tomato-deep); font-size: .9rem; font-weight: 600; margin-top: .3rem; } .sbs-form .sbs-chips-field ul { list-style: none; padding: 0; margin: .2rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; } .sbs-form .sbs-chips-field li { position: relative; margin: 0 !important; } .sbs-form .sbs-chips-field li input { position: absolute; opacity: 0; width: 1px; height: 1px; } .sbs-form .sbs-chips-field li label { display: inline-flex !important; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 999px; border: 2px solid rgba(43, 34, 72, .35); background: #FFFDF8; font-weight: 500; font-size: .98rem; cursor: pointer; margin: 0 !important; transition: background .2s, border-color .2s, color .2s; } .sbs-form .sbs-chips-field li input:checked + label, .sbs-form .sbs-chips-field li label.nf-checked-label { background: var(--grape); border-color: var(--ink); color: #fff; } .sbs-form .sbs-chips-field li input:focus-visible + label { outline: 3.5px solid var(--grape); outline-offset: 2px; } .sbs-form input[type="submit"], .sbs-form input[type="button"] { font: 600 1.12rem/1.2 var(--display); background: var(--sun); color: var(--ink); border: var(--line); border-radius: 999px; padding: .95rem 1.8rem; cursor: pointer; box-shadow: var(--pop); transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .sbs-form input[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); } .sbs-form .nf-form-fields-required { display: none; } /* the happy screen after sending */ .sbs-success { text-align: center; padding: 1rem 0 .5rem; outline: none; } .sbs-success__badge { width: 150px; height: 150px; margin: 0 auto .4rem; } .sbs-success__badge svg { width: 100%; height: 100%; overflow: visible; } .sbs-success__badge .sbs-success__foot { animation: sbs-stamp .5s var(--bounce) both; animation-delay: calc(var(--i) * .2s + .1s); transform-box: fill-box; transform-origin: center; } .sbs-success__eyebrow { font-family: var(--hand); font-size: 1.5rem; color: var(--berry); margin: 0; } .sbs-success__title { font: 650 clamp(2.1rem, 1.6rem + 2vw, 3rem)/1.05 var(--display); margin: .4rem 0 .7rem; } .sbs-success__lead { color: var(--ink-soft); max-width: 30rem; margin: 0 auto; } .sbs-success__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.4rem; } .sbs-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; width: 100%; height: 100%; } /* ===================================================================================================================== TWO SCHOOLS, ONE LAKE (map) + contact cards ===================================================================================================================== */ .sbs-map { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } @media (max-width: 960px) { .sbs-map { grid-template-columns: minmax(0, 1fr); } } .sbs-map__frame { position: relative; margin: 0; } .sbs-map__svg { width: 100%; height: auto; display: block; border-radius: 28px; box-shadow: 10px 10px 0 var(--sky), var(--soft); } .sbs-map__lake { font-family: var(--hand); font-size: 46px; fill: #1D6893; } .sbs-map__place { font-family: var(--display); font-weight: 600; font-size: 30px; fill: var(--ink); paint-order: stroke; stroke: #F6EBC8; stroke-width: 7px; } .sbs-map__place--sm { font-size: 24px; font-weight: 500; } .sbs-map__credit { font-size: .78rem; color: var(--ink-soft); margin: .8rem 0 0; } .sbs-map__pin { transform-box: fill-box; } .js .sbs-map.is-in .sbs-map__pin > * { animation: sbs-pin .7s var(--bounce) both; } @keyframes sbs-pin { from { transform: translateY(-60px); opacity: 0; } } .sbs-map__trail { stroke-dashoffset: 0; } .sbs-map__boat { animation: sbs-bob 2.4s ease-in-out 3; transform-box: fill-box; } @keyframes sbs-bob { 50% { transform: translateY(-6px) rotate(-3deg); } } .sbs-schools { display: grid; gap: 1.2rem; } .sbs-school { background: #fff; border: var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; box-shadow: 7px 7px 0 var(--c); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem 1rem; } .sbs-school > .sbs-icon { width: 3rem; height: 3rem; color: var(--c); grid-row: span 5; } .sbs-school h3 { font-size: 1.45rem; margin: 0; } .sbs-school p { margin: .25rem 0 0; } .sbs-school__tour { font-weight: 500; } .sbs-school__links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-weight: 600; margin-top: .5rem !important; } .sbs-contactcard { background: var(--grape-deep); color: #fff; border: var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: 8px 8px 0 var(--sun); } .sbs-contactcard h2 { color: #fff; font-size: 1.8rem; margin: 0 0 1rem; } .sbs-contactcard a { color: #fff; } .sbs-contactcard a:hover { color: var(--sun); } .sbs-contactcard__big { display: flex; align-items: center; gap: .8rem; text-decoration: none; font: 650 clamp(1.7rem, 1.4rem + 1vw, 2.2rem)/1.1 var(--display); margin-bottom: .6rem; } .sbs-contactcard__big .sbs-icon { width: 2.6rem; height: 2.6rem; color: var(--sun); } .sbs-contactcard ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .8rem; } .sbs-contactcard li { display: flex; gap: .7rem; line-height: 1.45; color: #EFE8FC; } .sbs-contactcard li .sbs-icon { width: 1.6rem; height: 1.6rem; color: var(--sun); } .sbs-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } @media (max-width: 900px) { .sbs-split { grid-template-columns: minmax(0, 1fr); } } /* ===================================================================================================================== CONTENT BLOCKS: feature rows, workshop cards, fact list, quote ===================================================================================================================== */ .sbs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; } .sbs-row + .sbs-row { margin-top: clamp(3rem, 6vw, 5rem) !important; } .sbs-row--flip > :first-child { order: 2; } @media (max-width: 860px) { .sbs-row { grid-template-columns: minmax(0, 1fr); } .sbs-row--flip > :first-child { order: 0; } } .sbs-row h2, .sbs-row h3 { margin: .2rem 0 .7rem; } .sbs-row figure { margin: 0; } .sbs-row figure img { width: 100%; height: auto; display: block; } .sbs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); } .sbs-card { background: #fff; border: var(--line); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.3rem; box-shadow: 7px 7px 0 var(--c, var(--sun)); } .sbs-card > .sbs-icon { width: 3.4rem; height: 3.4rem; color: var(--c, var(--sun)); } .sbs-card h3 { font-size: 1.4rem; margin: .5rem 0 .1rem; } .sbs-card__es { font-family: var(--hand); color: var(--berry); font-size: 1.25rem; margin: 0 0 .5rem; } .sbs-card p { margin: .4rem 0 0; } .sbs-feet { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .55rem; } .sbs-feet li { position: relative; padding-left: 2rem; } .sbs-feet li::before { content: ""; position: absolute; left: .2rem; top: .2rem; width: 15px; height: 24px; background: var(--c, var(--grape)); -webkit-mask: var(--foot) center / contain no-repeat; mask: var(--foot) center / contain no-repeat; transform: rotate(10deg); } .sbs-feet li:nth-child(6n+1)::before { background: var(--grape); } .sbs-feet li:nth-child(6n+2)::before { background: var(--tomato); transform: rotate(-10deg) scaleX(-1); } .sbs-feet li:nth-child(6n+3)::before { background: var(--sky); } .sbs-feet li:nth-child(6n+4)::before { background: var(--tangerine); transform: rotate(-10deg) scaleX(-1); } .sbs-feet li:nth-child(6n+5)::before { background: var(--lime); } .sbs-feet li:nth-child(6n+6)::before { background: var(--bubblegum); transform: rotate(-10deg) scaleX(-1); } .sbs-bigquote { position: relative; max-width: 50rem; margin-inline: auto; text-align: center; } .sbs-bigquote p { font: 600 clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem)/1.2 var(--display); margin: 0; font-stretch: 105%; } .sbs-bigquote cite { display: block; margin-top: .8rem; font-family: var(--hand); font-style: normal; font-size: 1.45rem; color: var(--berry); } .sbs-bigquote::before { content: "“"; display: block; font: 700 6rem/0.6 var(--display); color: var(--sun); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; margin-bottom: .5rem; } .sbs-tone-grape .sbs-bigquote cite { color: var(--sun); } .sbs-numbers { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 1rem; } .sbs-numbers li { background: #fff; border: var(--line); border-radius: 22px; padding: 1rem 1.1rem; box-shadow: 5px 5px 0 var(--c, var(--sun)); } .sbs-numbers strong { display: block; font: 650 2.4rem/1 var(--display); color: var(--grape-deep); } .sbs-numbers span { display: block; margin-top: .3rem; font-size: .95rem; line-height: 1.35; } .sbs-callout { background: #FFF3CC; border: var(--line); border-radius: 22px; padding: 1.1rem 1.3rem; box-shadow: 5px 5px 0 var(--sun); } .sbs-callout p { margin: 0; } .sbs-callout p + p { margin-top: .5rem; } .sbs-prose { max-width: 46rem; margin-inline: auto; } .sbs-prose h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); margin: 2.2rem 0 .6rem; } .sbs-prose h2:first-child { margin-top: 0; } /* ===================================================================================================================== CTA BAND ===================================================================================================================== */ .sbs-cta-band { position: relative; overflow: hidden; background: #FFE9A6; padding-block: clamp(4rem, 3rem + 5vw, 7.5rem) clamp(5rem, 4rem + 5vw, 8rem) !important; isolation: isolate; } .sbs-cta-band::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 24px; background: var(--paper); -webkit-mask: var(--wave) 0 0 / 240px 24px repeat-x; mask: var(--wave) 0 0 / 240px 24px repeat-x; transform: scaleY(-1); z-index: 2; } .sbs-cta-band__art { position: absolute; inset: 0; z-index: 0; margin: 0 !important; } .sbs-cta-band__art svg { width: 100%; height: 100%; display: block; } .sbs-cta-band__inner { position: relative; z-index: 1; max-width: 42rem; margin-left: 0 !important; } .sbs-cta-band h2 { font-size: clamp(2.4rem, 1.7rem + 3vw, 4.2rem); margin: .2rem 0 .7rem; } .sbs-cta-band .sbs-lead { color: var(--ink); } .js .sbs-cta-band__trail use { opacity: 0; } .js .sbs-cta-band.is-in .sbs-cta-band__trail use { animation: sbs-stamp .45s var(--bounce) both; animation-delay: calc(var(--i) * .13s); opacity: 1; transform-box: fill-box; transform-origin: center; } .sbs-noreveal .sbs-cta-band__trail use { opacity: 1 !important; } @media (max-width: 900px) { .sbs-cta-band__art svg { opacity: .5; } .sbs-cta-band__sun { display: none; } } /* ===================================================================================================================== FOOTER: the meadow ===================================================================================================================== */ .sbs-footer__meadow { position: relative; height: clamp(110px, 12vw, 190px); margin-top: clamp(-50px, -3vw, -24px); pointer-events: none; overflow: hidden; } .sbs-footer__meadow svg { position: absolute; inset: 0; width: 100%; height: 100%; } .sbs-peek { transform-box: fill-box; animation: sbs-peek 4s var(--ease) 2 both; } .sbs-peek--goat { animation-delay: .8s; } .sbs-peek--chick { animation-delay: 1.6s; } @keyframes sbs-peek { 0%, 100% { transform: translateY(0); } 40%, 60% { transform: translateY(-10px); } } .sbs-footer { background: #DDEFC4; padding-block: 1.2rem 1.6rem !important; } .sbs-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; } .sbs-footer .sbs-footer__hello { font-family: var(--hand); font-size: 2.3rem; color: var(--grape-deep); margin: 0 0 .3rem; line-height: 1; } .sbs-footer__title { font-size: 1.25rem; margin: 0 0 .6rem; } .sbs-footer p { margin: 0 0 .7rem; font-size: .97rem; } .sbs-footer a { color: var(--ink); } .sbs-footer a:hover { color: var(--grape-deep); } .sbs-footer__big { font: 650 1.6rem/1.1 var(--display); text-decoration: none; } .sbs-footer__links, .sbs-footer__social { list-style: none; margin: 0; padding: 0; } .sbs-footer__links li { margin-bottom: .35rem; } .sbs-footer__social { display: flex; gap: .5rem; margin-top: 1rem; } .sbs-footer__social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff; border: var(--line); box-shadow: var(--pop-sm); transition: transform .2s var(--bounce); } .sbs-footer__social a:hover { transform: translateY(-3px) rotate(-4deg); } .sbs-footer__social .sbs-icon { width: 30px; height: 30px; color: var(--grape-deep); } .sbs-footer__base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem 1.5rem; border-top: 2px dashed rgba(43, 34, 72, .22); margin-top: 1.6rem !important; padding-top: 1rem; } .sbs-footer__base p { margin: 0; font-size: .88rem; color: var(--ink-soft); } .sbs-footer__steps { display: flex; gap: .55rem; padding: 0 .5rem; } .sbs-footer__steps span { width: 13px; height: 21px; -webkit-mask: var(--foot) center / contain no-repeat; mask: var(--foot) center / contain no-repeat; } .sbs-footer__steps span:nth-child(1) { background: var(--grape); transform: rotate(80deg); } .sbs-footer__steps span:nth-child(2) { background: var(--sun); transform: rotate(100deg) scaleX(-1); } .sbs-footer__steps span:nth-child(3) { background: var(--tomato); transform: rotate(80deg); } .sbs-footer__steps span:nth-child(4) { background: var(--sky); transform: rotate(100deg) scaleX(-1); } .sbs-footer__steps span:nth-child(5) { background: var(--bubblegum); transform: rotate(80deg); } @media (max-width: 960px) { .sbs-footer__grid { grid-template-columns: 1fr 1fr; } .sbs-footer__brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .sbs-footer__grid { grid-template-columns: 1fr; } } /* ===================================================================================================================== NEWS + SINGLE + 404 ===================================================================================================================== */ .sbs-pagehead--news { background: var(--blush); } .sbs-news { padding-block: 1rem var(--wp--preset--spacing--60) !important; } .sbs-newscard { background: #fff; border: var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 7px 7px 0 var(--sun); height: 100%; display: flex; flex-direction: column; } .wp-block-post:nth-child(3n+2) .sbs-newscard { box-shadow: 7px 7px 0 var(--bubblegum); } .wp-block-post:nth-child(3n+3) .sbs-newscard { box-shadow: 7px 7px 0 var(--sky); } .sbs-newscard__img { margin: 0 !important; border-bottom: var(--line); } .sbs-newscard__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .sbs-newscard__date { margin: 1rem 1.2rem 0 !important; font-size: .88rem; color: var(--ink-soft); } .sbs-newscard__title { font-size: 1.35rem !important; margin: .3rem 1.2rem 0 !important; line-height: 1.2; } .sbs-newscard__title a { color: var(--ink); text-decoration: none; } .sbs-newscard__title a:hover { color: var(--grape-deep); text-decoration: underline; } .sbs-newscard__excerpt { margin: .5rem 1.2rem 1.3rem !important; font-size: .97rem; } .sbs-newscard__excerpt .wp-block-post-excerpt__more-text { display: none; } .sbs-single__hero { margin-top: 1rem !important; } .sbs-single__hero img { border: var(--line); border-radius: var(--radius); box-shadow: 8px 8px 0 var(--sun); max-height: 70vh; object-fit: cover; } .sbs-single .wp-block-post-content { padding-block: 2rem 1rem; } .sbs-single__more { padding-bottom: var(--wp--preset--spacing--60) !important; } .sbs-404 .sbs-pagehead { min-height: 62vh; display: flex; align-items: center; background: #FFE9A6; } .sbs-404__inner { align-items: center; } .sbs-404__art { width: clamp(220px, 28vw, 360px); margin: 0 !important; } .sbs-404__art svg { width: 100%; display: block; overflow: visible; } .sbs-404__chick { animation: sbs-wiggle 1.6s ease-in-out 3; transform-box: fill-box; transform-origin: 50% 100%; } /* ===================================================================================================================== REVEAL on scroll (only when JS runs; a 4 s safety net shows everything if it doesn't) ===================================================================================================================== */ .js .sbs-reveal { opacity: 0; transform: translateY(24px) rotate(var(--rr, 0deg)); transition: opacity .7s var(--ease), transform .8s var(--bounce); transition-delay: var(--d, 0s); } .js .sbs-reveal.is-in, .sbs-noreveal .sbs-reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js .sbs-reveal { opacity: 1; transform: none; } .js .sbs-path__prints span { opacity: 1; transform: rotate(var(--r)) scaleX(var(--m, 1)); } .js .sbs-cta-band__trail use { opacity: 1; } .sbs-friend__inner { transition: none; } } @media print { .sbs-ribbon, .sbs-header, .sbs-footer__meadow, .sbs-cta-band, .sbs-farm, .sbs-backpack { display: none !important; } body { background: #fff; } }