/* ============================================================================ MORSBAGS — Design System ("Handmade for the planet") Loaded LATE over Divi + WooCommerce by munder-difflin/functions.php. Evolves the cold blue/cyan template into a warm, human, press-credible brand. Reversible: pure CSS, no dependencies. Tokens shared with the pods plugin. ========================================================================== */ :root { /* sea (keep, for recognition) */ --ms-blue: #38579e; --ms-blue-ink: #22335f; /* headings + body — AA on white & cream */ --ms-blue-deep: #2c4373; --ms-cyan: #71c7e2; --ms-cyan-soft: #d6f0f7; /* warmth (new — the human/craft side) */ --ms-coral: #e8663f; /* (demoted) warm accent — used sparingly now */ --ms-coral-deep:#cf5230; --ms-teal: #1f9c93; /* PRIMARY — sea-glass teal (buttons, CTAs, accents) */ --ms-teal-d: #17817a; /* teal hover */ --ms-amber: #f2b705; /* neutrals */ --ms-cream: #fbf7ef; /* warm section bg (was cold #f2fbff) */ --ms-sand: #efe7d7; --ms-sky: #eaf4fb; --ms-white: #ffffff; --ms-ink-soft: #59617a; /* primitives */ --ms-r-sm: 8px; --ms-r: 14px; --ms-r-lg: 22px; --ms-r-pill: 999px; --ms-sh-1: 0 2px 8px rgba(34,51,95,.08); --ms-sh-2: 0 12px 34px rgba(34,51,95,.13); --ms-ring: 0 0 0 3px rgba(113,199,226,.55); --ms-ease: .2s cubic-bezier(.4,0,.2,1); --ms-mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* eyebrow / chip kicker face */ } /* ---------------------------------------------------------------- base type */ body { color: var(--ms-blue-ink); background: var(--ms-white); } #page-container, .et_pb_row, p, li, .et_pb_text { font-size: 17px; line-height: 1.62; } p { color: var(--ms-blue-ink); } h1,h2,h3,h4,h5,h6, .et_pb_module h1,.et_pb_module h2,.et_pb_module h3,.et_pb_module h4 { color: var(--ms-blue-ink); letter-spacing: -.01em; line-height: 1.1; } h1,.et_pb_slide_title,.et_pb_fullwidth_header .et_pb_module_header { font-size: clamp(2.3rem,5vw,3.9rem); } h2 { font-size: clamp(1.8rem,3.4vw,2.7rem); } h3 { font-size: 1.5rem; } a { color: var(--ms-teal); transition: color var(--ms-ease); } a:hover { color: var(--ms-teal-d); } ::selection { background: var(--ms-amber); color: var(--ms-blue-ink); } /* Accessible focus everywhere (older users / keyboard) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .et_pb_button:focus-visible { outline: none !important; box-shadow: var(--ms-ring) !important; border-radius: var(--ms-r-sm); } /* ------------------------------------------------------------------ buttons */ /* Divi + generic buttons → warm coral pill. High specificity to beat Divi. */ body #page-container .et_pb_button, body #page-container .et_pb_button:hover, .et_pb_button, a.et_pb_button, input[type="submit"], button[type="submit"], .wp-block-button__link, body .woocommerce a.button, body .woocommerce button.button, body .woocommerce a.button.alt, body .woocommerce button.button.alt, body .woocommerce #respond input#submit, body .woocommerce input.button { display: inline-block; font-family: 'Palanquin Dark', sans-serif !important; font-weight: 700 !important; text-transform: lowercase; letter-spacing: .01em !important; color: #fff !important; background: var(--ms-teal) !important; background-image: none !important; border: 0 !important; border-radius: var(--ms-r-pill) !important; padding: .72em 1.5em !important; min-height: 48px; line-height: 1.35; box-shadow: var(--ms-sh-1); transition: transform var(--ms-ease), background var(--ms-ease), box-shadow var(--ms-ease) !important; } body #page-container .et_pb_button:hover, .et_pb_button:hover, a.et_pb_button:hover, input[type="submit"]:hover, button[type="submit"]:hover, body .woocommerce a.button:hover, body .woocommerce button.button:hover, body .woocommerce a.button.alt:hover, body .woocommerce button.button.alt:hover, body .woocommerce input.button:hover { color: #fff !important; background: var(--ms-teal-d) !important; transform: translateY(-3px); box-shadow: var(--ms-sh-2) !important; padding: .72em 1.5em !important; } /* Divi appends an arrow icon on hover — keep it tidy */ body #page-container .et_pb_button:after { color: #fff !important; } /* Secondary / outline variant: any button with .ms-btn-outline or Divi's second-column buttons */ .ms-btn-outline, a.ms-btn-outline { background: transparent !important; color: var(--ms-blue) !important; box-shadow: inset 0 0 0 2px var(--ms-blue) !important; } .ms-btn-outline:hover { background: var(--ms-blue) !important; color: #fff !important; box-shadow: none !important; } /* --------------------------------------------------------- cards & sections */ .ms-card, .et_pb_blurb.ms-card { background: #fff; border-radius: var(--ms-r-lg); box-shadow: var(--ms-sh-1); padding: 1.6rem; transition: transform var(--ms-ease), box-shadow var(--ms-ease); } .ms-card:hover { transform: translateY(-4px); box-shadow: var(--ms-sh-2); } /* Warm the cold pale-blue the template uses for section fills + dividers */ .et_pb_section[style*="f2fbff"], .et_pb_section.ms-cream { background-color: var(--ms-cream) !important; } /* Blog / grid hover already exists in theme; add soft card treatment */ .et_pb_blog_grid article.et_pb_post { border-radius: var(--ms-r-lg) !important; box-shadow: var(--ms-sh-1); background: #fff; border: 1px solid var(--ms-sand) !important; } .et_pb_blog_grid article.et_pb_post:hover { box-shadow: var(--ms-sh-2); } /* ----------------------------------------------------------- header / nav */ /* Bold solid sea-glass header — replaces the busy torn-fabric background image. Beats Divi's 4-class critical-inline rule (like the footer) with a body-prefixed match. */ body .et-l--header > .et_builder_inner_content > .et_pb_section.et_pb_section_0_tb_header, body .et_pb_section_0_tb_header { background-image: none !important; background-color: var(--ms-teal) !important; box-shadow: 0 4px 16px rgba(34,51,95,.16); } /* comfortable height for the solid band (the fabric image used to give it height) */ .et_pb_menu_0_tb_header.et_pb_menu { padding-top: 22px !important; padding-bottom: 22px !important; } .et_pb_menu_0_tb_header.et_pb_menu ul li a:hover { color: var(--ms-amber) !important; opacity: 1; } /* Donate pill → amber (teal-on-teal would vanish); navy text, warm + inviting */ body #top-menu li.ms-nav-cta a, body .et_pb_menu li.ms-nav-cta a { background: var(--ms-amber) !important; color: var(--ms-blue-ink) !important; box-shadow: 0 2px 8px rgba(0,0,0,.15); } body #top-menu li.ms-nav-cta a:hover, body .et_pb_menu li.ms-nav-cta a:hover { background: #ffcf45 !important; color: var(--ms-blue-ink) !important; transform: translateY(-2px); } /* header dropdowns (Make a Morsbag / Explore Pods) → match the palette: white, ink text, teal hover */ body .et_pb_menu_0_tb_header.et_pb_menu .nav li ul, body .et_pb_menu_0_tb_header .et_mobile_menu { background-color: #fff !important; border-color: var(--ms-teal) !important; border-radius: 0 0 12px 12px; box-shadow: 0 12px 28px rgba(34,51,95,.16); padding-top:4px; padding-bottom:4px; } body .et_pb_menu_0_tb_header.et_pb_menu .nav li ul li a { color: var(--ms-blue-ink) !important; } body .et_pb_menu_0_tb_header.et_pb_menu .nav li ul li a:hover { color: var(--ms-teal) !important; background: var(--ms-cream) !important; } /* Divi caps the header's inner content at z-index:2, which TIES with content columns (also z:2) so dropdowns fell behind page content. Lift the whole header wrapper into its own higher layer. */ body .et-l--header { position: relative; z-index: 1000; } #main-header { box-shadow: 0 2px 0 rgba(34,51,95,.04); } /* The header is an overlay (0-height in layout, painted via z-index:1000), so it covers the top of the page. Clear it — and add the WP admin-bar height when logged in, so the layout is viewable without signing out. Two cases: standard pages nest #content-area; builder/plugin pages (My Pods, pods…) render the article straight into #main-content and have no #content-area. Home is excluded (its full-bleed hero absorbs the overlap). */ :root { --ms-admin-bar: 0px; } body.admin-bar { --ms-admin-bar: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --ms-admin-bar: 46px; } } #main-content #content-area { padding-top: calc(3.4rem + var(--ms-admin-bar)); } @media (max-width: 980px) { #main-content #content-area { padding-top: calc(2rem + var(--ms-admin-bar)); } } body:not(.home) #main-content:not(:has(#content-area)) { padding-top: calc(6rem + var(--ms-admin-bar)); } #top-menu li a { font-weight: 600; } #top-menu li a:hover { color: var(--ms-amber) !important; opacity: 1; } #top-menu > li.current-menu-item > a { color: var(--ms-amber) !important; } /* Nav CTA button (added to the menu as .ms-nav-cta li, or any menu item flagged) */ #top-menu li.ms-nav-cta a, .et_pb_menu li.ms-nav-cta a { color: #fff !important; background: var(--ms-teal); border-radius: var(--ms-r-pill); padding: .45em 1.15em !important; margin-left: .4em; line-height: 1.4; box-shadow: var(--ms-sh-1); transition: transform var(--ms-ease), background var(--ms-ease); } #top-menu li.ms-nav-cta a:hover { background: var(--ms-teal-d) !important; color:#fff !important; transform: translateY(-2px); } /* ----------------------------------------------------------- WooCommerce */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background: #fff; border: 1px solid var(--ms-sand); border-radius: var(--ms-r-lg); box-shadow: var(--ms-sh-1); padding: 1.4rem 1.4rem 1.6rem; text-align: center; transition: transform var(--ms-ease), box-shadow var(--ms-ease); } .woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--ms-sh-2); } .woocommerce ul.products li.product img { border-radius: var(--ms-r); margin-bottom: 1rem; background: var(--ms-cream); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Palanquin Dark', sans-serif; color: var(--ms-blue-ink); font-size: 1.2rem; padding-bottom: .3rem; } .woocommerce ul.products li.product .price { color: var(--ms-teal); font-weight: 700; } .woocommerce ul.products li.product .price .amount { color: var(--ms-blue-ink); } /* Single-product PRICE + product-meta links were rendering in Divi's too-light global accent (#85ebf9). Retarget to style-guide tokens with AA contrast — price = teal (primary; matches the shop-grid price), meta links = brand blue (AA for small text). The .et-db #et-boc .et-l prefix + !important beats Divi's Theme-Builder module selector (.et_pb_wc_price_0_tb_body .price). */ .et-db #et-boc .et-l .et_pb_wc_price .price, .et-db #et-boc .et-l .et_pb_wc_price .price .amount, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ms-teal) !important; } .et-db #et-boc .et-l .posted_in a, .et-db #et-boc .et-l .tagged_as a, .et-db #et-boc .et-l .et_pb_wc_meta a, .woocommerce .product_meta a, .woocommerce .posted_in a, .woocommerce .tagged_as a { color: var(--ms-blue) !important; } .et-db #et-boc .et-l .posted_in a:hover, .et-db #et-boc .et-l .tagged_as a:hover, .woocommerce .product_meta a:hover { color: var(--ms-blue-deep) !important; } /* The single-product "Add to basket" button lives in .et_pb_wc_add_to_cart with NO .woocommerce ancestor, so the cart/checkout pill rule further down missed it and Divi's half-height accent gradient showed through (the "blue underline" look). It's folded into that pill rule's selector list instead — search "et_pb_wc_add_to_cart .button". The qty/variation selects keep a teal border. */ .et-db #et-boc .et-l .et_pb_wc_add_to_cart input.qty, .et-db #et-boc .et-l .et_pb_wc_add_to_cart .quantity input.qty, .et-db #et-boc .et-l .et_pb_wc_add_to_cart select, .et-db #et-boc .et-l .et_pb_wc_add_to_cart .quantity input.qty, .et-db #et-boc .et-l .et_pb_wc_add_to_cart select, .et-db #et-boc .et-l .et_pb_wc_add_to_cart .variations td select { border-bottom-color: var(--ms-teal) !important; } .woocommerce .star-rating span { color: var(--ms-amber); } /* WooCommerce notices ("added to your basket" etc.) were Divi's light-cyan #85ebf9 with white text (ugly + poor contrast) AND sat under the 120px fixed header. Give them a dark, on-brand, AA panel and clear the header. #et-boc + !important to beat Divi's inline accent. */ /* body-prefixed so it beats Divi's `.woocommerce-message{background:#85ebf9!important}` regardless of whether the notice renders inside the Divi .et-l canvas wrapper (it doesn't, always). */ body .woocommerce-message, body .woocommerce-info, body .woocommerce-error, body.woocommerce-page .woocommerce-message, body.woocommerce-page .woocommerce-info, body.woocommerce-page .woocommerce-error { background: var(--ms-blue-ink) !important; color: #fff !important; border: 0 !important; border-left: 5px solid var(--ms-teal) !important; border-radius: var(--ms-r) !important; box-shadow: var(--ms-sh-1); } body .woocommerce-info { border-left-color: var(--ms-blue) !important; } /* Validation / "please fix this" errors read as a WARNING, not the same navy as success/info: amber panel, dark navy text (AA on #f2b705), deeper-amber bar. Overrides the navy base rule above (same selector, later). */ body .woocommerce-error, body.woocommerce-page .woocommerce-error { background: var(--ms-amber) !important; color: var(--ms-blue-ink) !important; border: 0 !important; border-left: 6px solid #a06e00 !important; } body .woocommerce-error a { color: var(--ms-blue-ink) !important; text-decoration: underline; } body .woocommerce-error::before { color: var(--ms-blue-ink) !important; } /* Guest reminder inside the pod picker: sign in to link an existing pod. */ .mbp-pod-signin { background: #fff6da; border: 1px solid var(--ms-amber); border-radius: 12px; padding: .7rem 1rem; margin: 0 0 1.1rem; color: var(--ms-blue-ink); font-weight: 600; } .mbp-pod-signin a { color: var(--ms-teal-d); text-decoration: underline; } .woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: #fff !important; text-decoration: underline; } /* The "View basket" button renders via Divi's cart-notice module (inside #et-boc .et-l), whose preset paints it white with a 6px #85ecf9 underline → my white button text was invisible on white. Out-specify the preset (id + 4 classes + element) and paint a real teal pill; body-scoped fallback for any notice outside the canvas. */ .et-db #et-boc .et-l .et_pb_wc_cart_notice a.button, .et-db #et-boc .et-l .et_pb_wc_cart_notice a.button.wc-forward, .et-db #et-boc .et-l .woocommerce-message a.button, .et-db #et-boc .et-l .woocommerce-info a.button, body .woocommerce-message a.button, body .woocommerce-info a.button, body .woocommerce-error a.button { background: var(--ms-teal) !important; background-color: var(--ms-teal) !important; background-image: none !important; color: #fff !important; border: 0 !important; border-bottom: 0 !important; border-radius: 999px !important; padding: .45rem 1.1rem !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { color: #fff !important; } /* clear the fixed header so the top notice isn't tucked under it */ .woocommerce-notices-wrapper:first-child, .woocommerce > .woocommerce-message:first-child { margin-top: 2.5rem; } /* Support-us intro band injected on the shop archive */ .ms-shop-intro { background: var(--ms-cream); border: 1px solid var(--ms-sand); border-radius: var(--ms-r-lg); padding: 1.4rem 1.6rem; margin: 2.75rem 0 2rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } /* Shop/category archive: the WooCommerce loop starts ~96px down, under the 120px fixed header. Give the archive content its own header clearance so the intro band + products aren't clipped. */ body.woocommerce-page.archive .et-l--body > .et_pb_section:first-child, body.post-type-archive-product .et-l--body > .et_pb_section:first-child { padding-top: 2.5rem; } .ms-shop-intro .ms-shop-emoji { font-size: 2rem; line-height: 1; } .ms-shop-intro p { margin: 0; color: var(--ms-blue-ink); } .ms-shop-intro strong { color: var(--ms-teal-d); } /* -------------------------------------------------------------- footer (new) */ .ms-footer { background: var(--ms-blue-ink); color: #dfe6f5; padding: 3.4rem 0 0; margin-top: 3rem; font-size: 16px; } .ms-footer a { color: #dfe6f5; text-decoration: none; } .ms-footer a:hover { color: var(--ms-amber); } .ms-footer .ms-foot-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 2.4rem; } .ms-footer h4 { color: #fff; font-size: 1rem; text-transform: lowercase; letter-spacing: .04em; margin: 0 0 .9rem; } .ms-footer ul { list-style: none; margin: 0; padding: 0; } .ms-footer li { margin: .42rem 0; } .ms-foot-brand .ms-foot-logo { font-family: 'Palanquin Dark', sans-serif; font-size: 1.5rem; color: #fff; } .ms-foot-brand p { color: #b9c4de; font-size: 15px; line-height: 1.6; margin: .6rem 0 1rem; } .ms-foot-award { display: inline-flex; align-items: center; gap: .5rem; background: rgba(242,183,5,.15); color: var(--ms-amber); border: 1px solid rgba(242,183,5,.35); border-radius: var(--ms-r-pill); padding: .35rem .8rem; font-size: 13px; font-weight: 600; } .ms-foot-news form { display: flex; gap: .4rem; margin-top: .6rem; flex-wrap: wrap; } .ms-foot-news input[type=email] { flex: 1 1 150px; min-width: 140px; border: 0; border-radius: var(--ms-r-pill); padding: .6rem .95rem; font-size: 15px; color: var(--ms-blue-ink); } .ms-foot-news button { border: 0; border-radius: var(--ms-r-pill); background: var(--ms-teal); color: #fff; font-weight: 700; padding: .6rem 1.15rem; cursor: pointer; font-family: 'Palanquin Dark',sans-serif; text-transform: lowercase; } .ms-foot-news button:hover { background: var(--ms-teal-d); } .ms-foot-social { display: flex; gap: .6rem; margin-top: 1rem; } .ms-foot-social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.09); border-radius: 50%; transition: background var(--ms-ease); } .ms-foot-social a:hover { background: var(--ms-teal); } .ms-foot-social svg { width: 19px; height: 19px; fill: #fff; } .ms-foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.6rem; padding: 1.2rem 24px; text-align: center; color: #9fabca; font-size: 13.5px; } .ms-foot-bottom .ms-free { color: var(--ms-amber); font-weight: 600; } @media (max-width: 820px){ .ms-footer .ms-foot-wrap { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px){ .ms-footer .ms-foot-wrap { grid-template-columns: 1fr; gap: 1.6rem; } } /* ---------------------------------------------------------- forms / inputs */ input[type=text], input[type=email], input[type=search], input[type=tel], input[type=password], textarea, select, .et_pb_contact_field .input { border: 1.5px solid var(--ms-sand) !important; border-radius: var(--ms-r) !important; background: #fff !important; color: var(--ms-blue-ink) !important; padding: .7rem .9rem !important; } .widget_search input#s { background: var(--ms-cream); } /* ------------------------------------------------------------- rich content */ .ms-prose { max-width: 760px; margin: 0 auto; } .ms-prose > p { margin: 0 0 1.15rem; } .ms-prose h2 { margin: 2.4rem 0 1rem; } .ms-prose .ms-lead { font-size: 1.28rem; line-height: 1.55; color: var(--ms-blue-deep); } .ms-prose a { color: var(--ms-teal); } .ms-prose a:hover { color: var(--ms-teal-d); } /* responsive 16:9 video embed */ .ms-video { position: relative; padding-top: 56.25%; border-radius: var(--ms-r-lg); overflow: hidden; box-shadow: var(--ms-sh-2); background: #000; margin: 1.6rem 0; } .ms-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ms-figure { margin: 1.8rem 0; text-align: center; } .ms-figure img { max-width: 480px; width: 100%; height: auto; border-radius: var(--ms-r-lg); box-shadow: var(--ms-sh-1); border: 1px solid var(--ms-sand); background: #fff; } /* Opt-in wide banner (e.g. the recipe strip) — fills the full .ms-prose text column instead of the 480px cap. */ .ms-figure.ms-figure-wide img { max-width: 100%; } /* Eyebrow / kicker — mono, lowercase, letter-spaced (the style-guide treatment). Use one on every page as a short SEO-friendly summary of what the page is. Teal on light, amber on navy bands. */ .ms-eyebrow { display:inline-block; font-family:var(--ms-mono); text-transform: lowercase; font-weight:600; letter-spacing:.14em; color: var(--ms-teal-d); font-size:.8rem; margin-bottom:.5rem; } .ms-story-hero { background: linear-gradient(180deg, var(--ms-sky), #fff); padding: clamp(2.5rem,6vw,4.5rem) 0; } .ms-impact-band { background: var(--ms-blue-ink); color:#fff; border-radius: var(--ms-r-lg); padding: 2rem; display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; text-align:center; margin: 2.4rem 0; } .ms-impact-band .n { font-family:'Palanquin Dark',sans-serif; font-size: clamp(1.8rem,4vw,2.6rem); color: var(--ms-amber); line-height:1; } .ms-impact-band .l { color:#c9d3ea; font-size:.92rem; margin-top:.3rem; } @media(max-width:600px){ .ms-impact-band{ grid-template-columns:1fr; } } .ms-cta-row { display:flex; gap:.8rem; flex-wrap:wrap; margin: 1.6rem 0; } .ms-btn { display:inline-block; font-family:'Palanquin Dark',sans-serif; text-transform:lowercase; font-weight:700; border-radius: var(--ms-r-pill); padding:.72em 1.5em; min-height:48px; line-height:1.5; text-decoration:none; color:#fff; background: var(--ms-teal); box-shadow: var(--ms-sh-1); transition: transform var(--ms-ease), background var(--ms-ease); } .ms-btn:hover { color:#fff; background: var(--ms-teal-d); transform: translateY(-3px); } .ms-btn.ghost { background: transparent; color: var(--ms-blue); box-shadow: inset 0 0 0 2px var(--ms-blue); } .ms-btn.ghost:hover { background: var(--ms-blue); color:#fff; } .ms-btn.teal { background: var(--ms-teal); } .ms-btn.teal:hover { background:#17817a; } /* Inside .ms-prose the link-colour rule (.ms-prose a, 0,1,1) out-specifies .ms-btn (0,1,0) and turns solid buttons teal-on-teal (invisible). Re-assert button text colours at matching specificity. */ .ms-prose a.ms-btn { color:#fff; } .ms-prose a.ms-btn.ghost { color: var(--ms-blue); } .ms-prose a.ms-btn.ghost:hover { color:#fff; } /* ---- teal-dot bullets + mono chips (the style-guide list language) --------- */ /* Prose lists: swap the default disc for a teal dot, roomy spacing. */ .ms-prose ul{ list-style:none !important; padding-left:0; margin:1.15rem 0; display:grid; gap:.6rem; } .ms-prose ul li{ position:relative; padding-left:1.5rem; line-height:1.6; list-style:none !important; } .ms-prose ul li::before{ content:""; position:absolute; left:.2rem; top:.6em; width:.52rem; height:.52rem; border-radius:50%; background:var(--ms-teal); } .ms-prose ul li ul{ margin:.5rem 0; } .ms-prose ol{ padding-left:1.4rem; margin:1.15rem 0; display:grid; gap:.6rem; } .ms-prose ol li{ line-height:1.6; } .ms-prose ol li::marker{ color:var(--ms-teal); font-weight:700; } /* Standalone step list (flex dot + text) for authored lists. */ .ms-list{ list-style:none; padding:0; margin:1.1rem 0; display:grid; gap:.7rem; } .ms-list li{ display:flex; gap:.7rem; align-items:flex-start; line-height:1.6; } .ms-list li::before{ content:""; flex:0 0 auto; width:.6rem; height:.6rem; border-radius:50%; background:var(--ms-teal); margin-top:.55em; } .ms-list.ms-chips li::before{ display:none; } /* Mono chip / tag — cyan-soft pill; prefix a step or label a thing. */ .ms-chip,.ms-tag{ display:inline-block; font-family:var(--ms-mono); font-size:.72rem; letter-spacing:.02em; line-height:1.5; background:var(--ms-cyan-soft); color:var(--ms-blue); border-radius:var(--ms-r-pill); padding:.16rem .62rem; font-weight:600; } .ms-chip.teal{ background:#d9f2ef; color:var(--ms-teal-d); } .ms-chip.amber{ background:#fdf0c8; color:#8a6d00; } .ms-chip.coral{ background:#fbe2d9; color:var(--ms-coral-deep); } /* --------------------------------------------------------------- a11y / motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .et_pb_button:hover, .ms-btn:hover, .woocommerce ul.products li.product:hover { transform: none !important; } } .ms-skip-link { position:absolute; left:-999px; top:0; background:#fff; color:var(--ms-blue-ink); padding:.6rem 1rem; border-radius:0 0 var(--ms-r) 0; z-index:100000; } .ms-skip-link:focus { left:0; box-shadow: var(--ms-sh-2); } /* ============================ HOMEPAGE (clean hand-built template) ========= */ body.home{ overflow-x:clip; } /* page-scoped guard so full-bleed bands can't cause h-scroll */ .ms-home{ font-size:17px; } /* full-bleed section bands — content stays centred via .ms-in */ .ms-home .ms-sec{ padding: clamp(3rem,7vw,5.5rem) 0; width:100vw; margin-left:calc(50% - 50vw); } .ms-home .ms-in{ max-width:1080px; margin:0 auto; padding:0 24px; } .ms-home .ms-eyebrow{ display:inline-block; font-family:var(--ms-mono); text-transform:lowercase; font-weight:600; letter-spacing:.14em; color:var(--ms-teal-d); font-size:.82rem; margin:0 0 .6rem; } .ms-home h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); margin:0 0 .5rem; color:var(--ms-blue-ink); line-height:1.08; } .ms-home .ms-lead{ font-size:1.12rem; color:var(--ms-ink-soft); } /* hero */ .ms-home .ms-hero{ background: radial-gradient(120% 100% at 88% -10%, var(--ms-sky) 0%, rgba(234,244,251,0) 55%), linear-gradient(180deg, var(--ms-cream), #fff); } .ms-home .ms-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center; } @media(max-width:820px){ .ms-home .ms-hero-grid{ grid-template-columns:1fr; text-align:center; } .ms-home .ms-hero-art{ order:-1; max-width:320px; margin:0 auto; } .ms-home .ms-hero .ms-cta-row{ justify-content:center; } .ms-home .ms-hero p{ margin-inline:auto; } } /* Hero: big navy "Handmade for the planet." + rainbow subtitle underneath (style-guide hero). */ .ms-home .ms-hero-title{ font-family:'Palanquin Dark',sans-serif; font-weight:800; line-height:1.02; letter-spacing:-.02em; font-size:clamp(2.6rem,6vw,4.3rem); color:var(--ms-blue-ink); margin:0 0 .35rem; } .ms-home .ms-rainbow{ font-family:'Palanquin Dark',sans-serif; font-weight:800; line-height:1.06; letter-spacing:-.01em; font-size:clamp(1.4rem,3vw,2rem); color:var(--ms-blue-ink); margin:0 0 1rem; } .ms-home .ms-rainbow .r1{color:var(--ms-coral);} .ms-home .ms-rainbow .r2{color:#b8408f;} .ms-home .ms-rainbow .r3{color:var(--ms-blue);} .ms-home .ms-rainbow .r4{color:var(--ms-teal);} .ms-home .ms-rainbow .r5{color:#7b4bc4;} .ms-home .ms-hero p{ font-size:1.12rem; color:var(--ms-ink-soft); max-width:44ch; } .ms-home .ms-hero-art img{ width:100%; height:auto; filter:drop-shadow(0 22px 30px rgba(34,51,95,.16)); animation:ms-bob 6s ease-in-out infinite; } @keyframes ms-bob{ 0%,100%{ transform:translateY(0) rotate(-1.5deg);} 50%{ transform:translateY(-16px) rotate(1.5deg);} } /* section bands */ .ms-home .ms-band-cream{ background:var(--ms-cream); } .ms-home .ms-band-sea{ background:var(--ms-blue-ink); } .ms-home .ms-band-sea h2{ color:#fff; } .ms-home .ms-band-sea .ms-lead, .ms-home .ms-band-sea p{ color:#c6d1ea; } .ms-home .ms-band-sea .ms-eyebrow{ color:var(--ms-amber); } /* why split */ .ms-home .ms-why-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:2.5rem; align-items:center; } @media(max-width:820px){ .ms-home .ms-why-grid{ grid-template-columns:1fr; } } .ms-home .ms-why-grid img{ width:100%; max-width:440px; height:auto; } /* why: text on navy, then the real James Mayall underwater scene as a full-bleed panorama (turtle + jellyfish + the drifting bags they're mistaken for — replaces the drawn jellyfish). */ .ms-home .ms-scene-band{ width:100vw; margin-left:calc(50% - 50vw); display:block; line-height:0; } .ms-home .ms-scene-band img{ width:100%; height:auto; display:block; } .ms-home .ms-scene-band .ms-seascene, .ms-home .ms-scene-band .ms-seascene svg{ width:100%; height:auto; display:block; } /* hero pods-map placeholder (simplified globe of pods; swap for the interactive mini-map later) */ .ms-home .ms-hero-mapwrap{ display:flex; } .ms-home .ms-hero-map{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; text-align:center; padding:1.6rem 1.4rem; border-radius:var(--ms-r-lg); text-decoration:none; background:radial-gradient(120% 120% at 50% -10%, #ffffff, var(--ms-sky)); border:1px solid var(--ms-cyan-soft); box-shadow:var(--ms-sh-1); transition:box-shadow var(--ms-ease), transform var(--ms-ease); } .ms-home .ms-hero-map:hover{ box-shadow:var(--ms-sh-2); transform:translateY(-3px); } .ms-home .ms-hero-map svg{ width:100%; max-width:250px; height:auto; } .ms-home .ms-hero-map .cap{ font-family:'Palanquin Dark',sans-serif; color:var(--ms-blue-ink); font-size:1.05rem; } .ms-home .ms-hero-map .cap strong{ color:var(--ms-teal); } .ms-home .ms-hero-map .go{ color:var(--ms-teal); font-weight:700; white-space:nowrap; } .ms-home .ms-hero-map:hover .go{ color:var(--ms-teal-d); } /* animated jellyfish — waving tentacles via CSS/SVG (no Rive/Lottie runtime) */ .ms-home .ms-why-grid .ms-jelly-wrap{ display:block; } .ms-jelly{ width:100%; max-width:330px; height:auto; display:block; margin:0 auto; animation: ms-jbob 6.5s ease-in-out infinite; will-change:transform; } .ms-jelly .ms-ten{ transform-box: fill-box; transform-origin: top center; } .ms-jelly .ms-ten-a{ animation: ms-jsway 4.0s ease-in-out -0.2s infinite; } .ms-jelly .ms-ten-b{ animation: ms-jswayR 3.4s ease-in-out -0.9s infinite; } .ms-jelly .ms-ten-c{ animation: ms-jsway 3.7s ease-in-out -0.5s infinite; } .ms-jelly .ms-ten-d{ animation: ms-jswayR 4.6s ease-in-out -1.3s infinite; } .ms-jelly .ms-ten-e{ animation: ms-jsway 4.3s ease-in-out -0.7s infinite; } .ms-jelly .ms-ten-f{ animation: ms-jswayR 5.0s ease-in-out -0.3s infinite; } .ms-jelly .ms-ten-g{ animation: ms-jsway 4.8s ease-in-out -1.1s infinite; } @keyframes ms-jsway{ 0%,100%{ transform: rotate(-5.5deg);} 50%{ transform: rotate(5.5deg);} } @keyframes ms-jswayR{ 0%,100%{ transform: rotate(5.5deg);} 50%{ transform: rotate(-5.5deg);} } @keyframes ms-jbob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} } @media (prefers-reduced-motion: reduce){ .ms-jelly, .ms-jelly .ms-ten{ animation: none !important; } } /* stat banner spacing inside home */ .ms-home .mbp-stats-banner{ margin:0 auto; max-width:1040px; } /* pod-type cards */ .ms-home .ms-pods3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.8rem; } @media(max-width:820px){ .ms-home .ms-pods3{ grid-template-columns:1fr; } } .ms-home .ms-podcard{ background:#fff; border:1px solid var(--ms-sand); border-radius:var(--ms-r-lg); box-shadow:var(--ms-sh-1); padding:1.6rem; display:flex; flex-direction:column; transition:transform var(--ms-ease),box-shadow var(--ms-ease); } .ms-home .ms-podcard:hover{ transform:translateY(-4px); box-shadow:var(--ms-sh-2); } .ms-home .ms-podcard .ico{ width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin-bottom:.9rem;background:var(--ms-cyan-soft); } .ms-home .ms-podcard h3{ margin:0 0 .4rem; color:var(--ms-blue-ink); font-size:1.25rem; } .ms-home .ms-podcard p{ color:var(--ms-ink-soft); font-size:.96rem; flex:1; margin:0 0 1rem; } /* two-up help/donate */ .ms-home .ms-two{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; } @media(max-width:760px){ .ms-home .ms-two{ grid-template-columns:1fr; } } .ms-home .ms-panel{ background:#fff; border:1px solid var(--ms-sand); border-radius:var(--ms-r-lg); box-shadow:var(--ms-sh-1); padding:2rem; } .ms-home .ms-panel.coral{ background:#fff; border-color:var(--ms-sand); border-top:4px solid var(--ms-teal); } .ms-home .ms-panel h3{ margin:0 0 .5rem; color:var(--ms-blue-ink); font-size:1.4rem; } .ms-home .ms-panel p{ color:var(--ms-ink-soft); } /* shop strip */ .ms-home .ms-shop3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.6rem; } @media(max-width:640px){ .ms-home .ms-shop3{ grid-template-columns:1fr; } } .ms-home .ms-shopitem{ background:#fff; border:1px solid var(--ms-sand); border-radius:var(--ms-r-lg); box-shadow:var(--ms-sh-1); padding:1.3rem; text-align:center; } .ms-home .ms-shopitem img{ width:128px; height:128px; object-fit:contain; background:var(--ms-cream); border-radius:var(--ms-r); padding:.6rem; } .ms-home .ms-shopitem .nm{ font-weight:700; margin-top:.7rem; color:var(--ms-blue-ink); } .ms-home .ms-shopitem .pr{ color:var(--ms-teal); font-weight:700; font-size:.9rem; } /* final CTA band — cream (no big orange; orange lives on the buttons only) */ .ms-home .ms-final{ background:var(--ms-cream); text-align:center; } .ms-home .ms-final h2{ color:var(--ms-blue-ink); } .ms-home .ms-final p{ color:var(--ms-ink-soft); max-width:54ch; margin:.4rem auto 1.5rem; } /* Stats: a curated 3-stat NAVY banner on a CREAM band so it pops (style-guide impact band + stitch border). Static rounded figures (the live [mbp_stats_banner] showed sad this-month zeros). */ .ms-home .ms-statband .ms-eyebrow{ color:var(--ms-teal-d); } .ms-home .ms-statwrap{ background:var(--ms-blue-ink); border-radius:var(--ms-r-lg); padding:1.9rem 1.4rem; box-shadow:var(--ms-sh-2); border:2px dashed rgba(255,255,255,.20); margin-top:1.2rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; text-align:center; } @media(max-width:560px){ .ms-home .ms-statwrap{ grid-template-columns:1fr; } } .ms-home .ms-statwrap .n{ font-family:'Palanquin Dark',sans-serif; font-weight:800; font-size:clamp(1.9rem,4.2vw,2.8rem); color:var(--ms-amber); line-height:1; font-variant-numeric:tabular-nums; } .ms-home .ms-statwrap .l{ color:#c6d1ea; font-size:.92rem; margin-top:.35rem; } .ms-home .ms-center{ text-align:center; } .ms-home .ms-center .ms-cta-row{ justify-content:center; } /* hide the theme-builder "Home" page title on the front page (clean hero owns the top) */ .home .et_pb_title_container, .home .entry-title.main_title, .home .et-l--body .et_pb_post_title { display:none !important; } @media(prefers-reduced-motion:reduce){ .ms-home .ms-hero-art img{ animation:none; } } /* ============================ Theme Builder footer → warm navy band ======= */ /* Divi's critical-inline CSS paints the footer section #F2FBFF with a 4-class !important rule (.et-l--footer>.et_builder_inner_content>.et_pb_section.et_pb_section_0_tb_footer). Match that structure + a `body` prefix to out-specify it. */ .et-l--footer, body .et-l--footer > .et_builder_inner_content > .et_pb_section.et_pb_section_0_tb_footer, body .et-l--footer > .et_builder_inner_content > .et_pb_section { background-color: var(--ms-blue-ink) !important; background-image: none !important; } .et-l--footer .et_pb_section { padding: 3.4rem 0 1.6rem; } .et-l--footer, .et-l--footer p, .et-l--footer li, .et-l--footer span, .et-l--footer .et_pb_text, .et-l--footer .et_pb_text_inner { color: #ccd6ee !important; } .et-l--footer a { color: #e8edf9 !important; text-decoration: none; transition: color var(--ms-ease); } .et-l--footer a:hover { color: var(--ms-amber) !important; } .et-l--footer h1,.et-l--footer h2,.et-l--footer h3,.et-l--footer h4,.et-l--footer h5,.et-l--footer h6 { color: #fff !important; text-transform: lowercase; letter-spacing: .03em; font-size: 1.02rem !important; margin-bottom: .55rem !important; } .et-l--footer ul { list-style: none; padding-left: 0; margin: 0; } .et-l--footer li { margin: .34rem 0; } /* the footer wordmark is blue — invert it to crisp white on the navy band */ .et-l--footer .et_pb_image img { filter: brightness(0) invert(1); max-width: 220px; height: auto; } .et-l--footer .et_pb_button, .et-l--footer .et_pb_button:hover { color: #fff !important; } /* ============================ [mbp_stats_banner] on Home → warm impact cards */ .mbp-stats-banner { display: flex; flex-wrap: wrap; gap: .9rem !important; } .mbp-stats-banner .mbp-stat { background: #fff !important; border: 1px solid var(--ms-sand) !important; border-radius: var(--ms-r-lg) !important; box-shadow: var(--ms-sh-1); padding: 1.15rem .6rem !important; display: flex; flex-direction: column; gap: .15rem; transition: transform var(--ms-ease), box-shadow var(--ms-ease); } .mbp-stats-banner .mbp-stat:hover { transform: translateY(-3px); box-shadow: var(--ms-sh-2); } .mbp-stats-banner .mbp-num { font-family: 'Palanquin Dark', sans-serif; font-size: clamp(1.2rem, 2vw, 1.8rem) !important; font-weight: 700; color: var(--ms-blue-ink); line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.01em; max-width: 100%; white-space: nowrap; } /* the headline "bags made" is the emotional hook — let it sing in coral */ .mbp-stats-banner .mbp-stat:first-child .mbp-num { color: var(--ms-teal); } .mbp-stats-banner .mbp-label { font-size: .74rem; text-transform: lowercase; letter-spacing: .02em; color: var(--ms-ink-soft); font-weight: 600; } /* Pods header: the "My Pods" / "Create Pod" buttons floated far apart in wide Divi columns. Flex the header row so the title grows (pushing them right) and the two button columns shrink and sit together at the right. Scoped to the pods page via the map container. */ body:has(#pod-map) .et_pb_row:has(.et_pb_button_0_wrapper) { display: flex !important; align-items: center; flex-wrap: wrap; row-gap: .5rem; } body:has(#pod-map) .et_pb_row:has(.et_pb_button_0_wrapper) > .et_pb_column { margin-bottom: 0 !important; } body:has(#pod-map) .et_pb_row:has(.et_pb_button_0_wrapper) > .et_pb_column:first-child { flex: 1 1 220px; width: auto !important; } body:has(#pod-map) .et_pb_row:has(.et_pb_button_0_wrapper) > .et_pb_column:not(:first-child) { flex: 0 0 auto; width: auto !important; margin: 0 0 0 .6rem !important; } @media (max-width: 782px) { body:has(#pod-map) .et_pb_row:has(.et_pb_button_0_wrapper) { display: block !important; } body:has(#pod-map) .et_pb_row:has(.et_pb_button_0_wrapper) > .et_pb_column { width: 100% !important; margin-left: 0 !important; } } /* Pods page: the title section carried an oversized 120px/130px Divi padding — far more than the rest of the site, leaving a big empty band above & below "All Pods Map". Tighten it to match. */ body:has(#pod-map) .et_pb_section_0.et_pb_section { padding-top: 40px; padding-bottom: 22px; } /* ---- Pod dashboard (My Pods) — bolder stat numbers + new-design polish ------- The plugin's dashboard "2 / PODS YOU RUN" cards read small; enlarge the number and warm the cards to match the site. Scoped to .mbp-ui so the home stats banner is untouched. */ .mbp-ui .mbp-stats .mbp-stat .n{ font-family:'Palanquin Dark',sans-serif !important; font-weight:800 !important; font-size:clamp(2.3rem,4.6vw,3.1rem) !important; line-height:1 !important; color:var(--ms-blue-ink) !important; } .mbp-ui .mbp-stats .mbp-stat{ border:1px solid var(--ms-sand) !important; border-radius:var(--ms-r) !important; box-shadow:var(--ms-sh-1) !important; transition:transform var(--ms-ease), box-shadow var(--ms-ease); } .mbp-ui .mbp-stats .mbp-stat:hover{ box-shadow:var(--ms-sh-2) !important; transform:translateY(-2px); } /* ---- Normalise every page title to ONE treatment --------------------------- Content pages render the theme entry-title in sea-blue #38579e; pod/Woo pages use navy content H1s. Force all page titles to the same navy Palanquin-Dark. */ .entry-title, h1.entry-title, .entry-title.main_title, .et-l--body h1.entry-title, .et_pb_title_container h1, .et_pb_post_title h1, .woocommerce-products-header__title, .product_title, h1.product_title, .mbp-ui > h1:first-child, .mbp-head h1 { font-family:'Palanquin Dark',sans-serif !important; font-weight:800 !important; color:var(--ms-blue-ink) !important; font-size:clamp(2.1rem,4.4vw,3.2rem) !important; letter-spacing:-.01em !important; line-height:1.08 !important; } /* …but blog-listing / post-grid items reuse .entry-title too — keep THOSE listing-sized, not page-sized. */ .et_pb_blog_grid .entry-title, .et_pb_posts .entry-title, article.et_pb_post .entry-title, .et_pb_blog_grid_wrapper .entry-title, .et_pb_salvattore_content .entry-title { font-size:clamp(1.25rem,2.1vw,1.6rem) !important; font-weight:700 !important; line-height:1.22 !important; } /* ---- Feature cards: equal height, CTA pinned to bottom + centered ----------- */ .ms-home .ms-pods3, .ms-home .ms-two{ align-items:stretch; } .ms-home .ms-panel{ display:flex; flex-direction:column; } .ms-home .ms-podcard p{ flex:0 1 auto; } /* the CTA row owns the bottom, not the description */ .ms-home .ms-podcard .ms-cta-row, .ms-home .ms-panel .ms-cta-row{ margin-top:auto; margin-bottom:0; justify-content:center; } /* ---- All Pods map: view toggle + slider → teal (were sea-blue #38579e) ------ */ .pod-map-views button{ border-color:var(--ms-teal) !important; color:var(--ms-teal-d) !important; } .pod-map-views button:hover{ background:var(--ms-cream) !important; } .pod-map-views button.active{ background:var(--ms-teal) !important; border-color:var(--ms-teal) !important; color:#fff !important; } .mbp-ui input[type=range], .mbp-ui input[type=checkbox]{ accent-color:var(--ms-teal); } /* ---- Interactive hero pod mini-map (Leaflet) ------------------------------- */ .ms-home .ms-hero-mapwrap{ display:block; } .ms-home .ms-hero-livemap{ position:relative; border-radius:var(--ms-r-lg); overflow:hidden; box-shadow:var(--ms-sh-2); border:1px solid var(--ms-sand); background:var(--ms-sky); } .ms-home #ms-hero-leaflet{ height:clamp(300px,32vw,392px); width:100%; background:var(--ms-sky); cursor:grab; } .ms-home #ms-hero-leaflet:active{ cursor:grabbing; } .ms-home .ms-hero-livemap .leaflet-container{ background:var(--ms-sky) !important; font-family:inherit; } .ms-home .ms-hero-map-cap{ display:block; text-align:center; text-decoration:none; padding:.75rem 1rem; font-family:'Palanquin Dark',sans-serif; color:var(--ms-blue-ink); background:#fff; border-top:1px solid var(--ms-sand); } .ms-home .ms-hero-map-cap strong{ color:var(--ms-teal); } .ms-home .ms-hero-map-cap .go{ color:var(--ms-teal); font-weight:700; white-space:nowrap; } .ms-home .ms-hero-map-cap:hover .go{ color:var(--ms-teal-d); } .ms-home .ms-hero-livemap .leaflet-control-zoom a{ color:var(--ms-blue-ink); border-radius:8px; } /* ---- Real-artwork sea scene: the 5 James Mayall AI layers, stacked + animated (Rive-style) --- */ .ms-home .ms-scene-band .ms-seascene-real{ position:relative; width:100%; aspect-ratio:2812/997; overflow:hidden; line-height:0; } .ms-home .ms-scene-band .ms-seascene-real .lyr{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .ms-seascene-real .weed{ transform-origin:50% 100%; animation:ms-weed 6.5s ease-in-out infinite alternate; will-change:transform; } .ms-seascene-real .turtle{ transform-origin:25% 50%; animation:ms-turtle 8s ease-in-out infinite; will-change:transform; } .ms-seascene-real .bags{ transform-origin:78% 45%; animation:ms-bags 7s ease-in-out infinite; will-change:transform; } /* three jellies: same image, each clipped to its own vertical strip so they animate independently. Pulse = squeeze vertical + widen, then a thrust that snaps back and accelerates up, then a slow drift back down. Base durations differ; JS in the shortcode randomises period+phase per visit so none sync. */ .ms-seascene-real .jelly{ animation:ms-jelly-pulse 12s ease-in-out infinite; will-change:transform; } .ms-seascene-real .jelly-1{ clip-path:inset(0 76.5% 0 0); transform-origin:16.5% 25%; animation-duration:11s; } .ms-seascene-real .jelly-2{ clip-path:inset(0 56% 0 23.5%); transform-origin:29% 26%; animation-duration:13s; } .ms-seascene-real .jelly-3{ clip-path:inset(0 36% 0 44%); transform-origin:59% 41%; animation-duration:9.5s; } @keyframes ms-jelly-pulse{ 0% { transform:translateY(0) scale(1,1); } 12% { transform:translateY(1%) scale(1.06,0.86); } /* contract: squeeze vertically + widen a touch */ 22% { transform:translateY(-9%) scale(0.99,1.03); } /* thrust: snap back to normal + accelerate up */ 100% { transform:translateY(0) scale(1,1); } /* then gently drift back down over the rest (~10s) */ } @keyframes ms-weed{ from{ transform:skewX(-1.8deg);} to{ transform:skewX(1.8deg);} } @keyframes ms-turtle{ 0%,100%{ transform:translateY(0) rotate(-0.6deg);} 50%{ transform:translateY(-1.8%) rotate(0.8deg);} } @keyframes ms-bags{ 0%,100%{ transform:translateY(0) rotate(-1deg);} 50%{ transform:translateY(-1.6%) rotate(1.2deg);} } @media (prefers-reduced-motion: reduce){ .ms-seascene-real .lyr{ animation:none !important; } } /* whale (isolated from the BACKGROUND layer): faint + blurry, drifts left across the scene, slips off the left edge, waits off-screen, then reappears from the right — with a slow up/down waft throughout. Wrapper owns the horizontal drift; inner img owns the vertical waft (so the two transforms compose). */ .ms-seascene-real .whale-wrap{ animation:ms-whale-drift 128s linear infinite; animation-delay:-38s; } /* half speed again; negative delay seeks it on-screen so it starts immediately, no off-screen wait on load */ .ms-seascene-real .ms-whale-svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.35; filter:blur(1.4px); animation:ms-whale-bob 10s ease-in-out infinite; } /* even fainter */ .ms-seascene-real .ms-whale-fluke{ transform-box:fill-box; transform-origin:left center; animation:ms-whale-fluke 4.2s ease-in-out infinite; } @keyframes ms-whale-drift{ 0% { transform:translateX(58%); opacity:0; } 3% { transform:translateX(52%); opacity:1; } 94% { transform:translateX(-120%); opacity:1; } 97% { transform:translateX(-120%); opacity:0; } /* only a short wait off-screen before it loops */ 100% { transform:translateX(58%); opacity:0; } } @keyframes ms-whale-bob{ 0%,100%{ transform:translateY(-2.2%);} 50%{ transform:translateY(2.2%);} } @keyframes ms-whale-fluke{ 0%,100%{ transform:rotate(-10deg);} 50%{ transform:rotate(10deg);} } @media (prefers-reduced-motion: reduce){ .ms-seascene-real .whale-wrap, .ms-seascene-real .ms-whale-svg, .ms-seascene-real .ms-whale-fluke{ animation:none !important; } } /* The theme's FitVids wraps embeds in .fluid-width-video-wrapper (its own 16:9 box); when present, drop our own padding-top so the video isn't doubled (black bar above). */ .ms-video:has(.fluid-width-video-wrapper){ padding-top:0; } .ms-video .fluid-width-video-wrapper{ border-radius:inherit; } /* ===== hero + misc polish (round 3) ======================================== */ /* eyebrows read a touch bigger + bolder (were thin); hero eyebrow stays on one line */ .ms-eyebrow{ font-weight:700; font-size:.86rem; } .ms-home .ms-eyebrow{ font-weight:700; font-size:.9rem; } .ms-home .ms-hero .ms-eyebrow{ white-space:nowrap; letter-spacing:.09em; font-size:clamp(.64rem,1.5vw,.9rem); } /* rainbow subtitle bigger — roughly fills the width of "for the planet." (beat the .ms-hero p 1.12rem rule) */ .ms-home .ms-hero .ms-rainbow{ font-size:clamp(1.35rem,2.65vw,1.95rem); line-height:1.1; } /* gently cycle the rainbow word colours (each span offset so all 5 hues are always present) */ .ms-home .ms-rainbow span{ animation:ms-rainbow-cycle 15s linear infinite; } .ms-home .ms-rainbow .r1{ animation-delay:0s; } .ms-home .ms-rainbow .r2{ animation-delay:-3s; } .ms-home .ms-rainbow .r3{ animation-delay:-6s; } .ms-home .ms-rainbow .r4{ animation-delay:-9s; } .ms-home .ms-rainbow .r5{ animation-delay:-12s; } @keyframes ms-rainbow-cycle{ 0%,100%{ color:var(--ms-coral); } 20%{ color:#b8408f; } 40%{ color:var(--ms-blue); } 60%{ color:var(--ms-teal); } 80%{ color:#7b4bc4; } } /* centre the final "Bag it forward" CTA buttons (and any centred cta row) */ .ms-home .ms-final .ms-cta-row, .ms-home .ms-cta-row.ms-center{ justify-content:center; } /* Join nav pill: white + larger text (with a soft shadow so it reads on amber) */ body #top-menu li.ms-nav-cta a, body .et_pb_menu li.ms-nav-cta a{ color:#fff !important; font-size:1.06rem !important; font-weight:800 !important; text-shadow:0 1px 2px rgba(0,0,0,.3); } /* ===== round-4 fixes ======================================================= */ /* Single-pod pages showed the torn-fabric header again — Divi's per-page critical CSS uses the #et-boc id (id > classes) so it beat the old override's background-image:none. Match the id to win everywhere. */ body #et-boc .et-l--header .et_builder_inner_content .et_pb_section_0_tb_header, body #page-container #et-boc .et_pb_section_0_tb_header{ background-image:none !important; background-color:var(--ms-teal) !important; } /* Non-custom pages (my-account, shop, cart, /pods/, and every other page on the default Theme-Builder body template) still showed the leftover besuperfly DEMO illustration (Superfy-MunderDifflin-Illustration-06@2x.png, from madebysuperfly.com) striped across the page-title section. Divi sets it via `.et_pb_section_0{…!important}`. Kill it on whichever section holds the post-title (index-agnostic via :has); the section's own white bg-colour remains, giving a clean title band matching the rebuilt pages. */ body #page-container .et_pb_section:has(.et_pb_post_title){ background-image:none !important; } /* plastic bags fainter (~60% transparent) */ .ms-seascene-real .bags{ opacity:.4; } /* dial oversized buttons back a notch (keep the 44px a11y touch target) */ .ms-btn{ font-size:.95rem; padding:.62em 1.3em; min-height:44px; } body #page-container .et_pb_button, .et_pb_button, a.et_pb_button, input[type=submit], button[type=submit], .woocommerce a.button, .woocommerce button.button{ font-size:.95rem !important; padding:.62em 1.3em !important; min-height:44px !important; } /* Divi 5 button presets set font-size:26px !important at (1,2,1); triple-class beats it (1,3,1) */ body #page-container .et_pb_button.et_pb_button.et_pb_button{ font-size:.95rem !important; } /* ===== round-5: pod contact form + page-header spacing ===================== */ /* Default-template pages (contact-pod & friends) render a plain .entry-title flush against the nav — give it a top gap so those headers clear the teal band like the Divi post-title module pages (my-account/shop/pods) do. */ #left-area .entry-title.main_title{ margin-top:2.75rem !important; } /* Pod-plugin content pages (standalone contact-pod + the pod profile) shouldn't carry the theme's widget sidebar. */ body:has(.mbp-contact-pod) #sidebar, body:has(.mbp-ui) #sidebar{ display:none !important; } body:has(.mbp-contact-pod) #left-area, body:has(.mbp-ui) #left-area{ width:100% !important; padding-right:0 !important; } /* …and remove Divi's 1px grey content/sidebar separator line (an absolutely-positioned .container::before). */ body:has(.mbp-contact-pod) #main-content .container:before, body:has(.mbp-ui) #main-content .container:before{ display:none !important; } /* Un-squish the contact form: full-width fields (were ~175px inline-block), comfortable rhythm. */ .mbp-contact-pod{ max-width:640px; } .mbp-contact-pod label{ display:block; font-weight:600; } .mbp-contact-pod input[type=text], .mbp-contact-pod input[type=email], .mbp-contact-pod textarea{ width:100%; box-sizing:border-box; display:block; margin-top:.3rem; padding:.6em .8em; border:1px solid var(--ms-line,#d9d4c8); border-radius:10px; font:inherit; background:#fff; } .mbp-contact-pod textarea{ min-height:8rem; resize:vertical; } .mbp-contact-pod > form > p{ margin:0 0 1rem; } /* Inline "Contact this pod" disclosure on the profile: summary reads as a ghost button, no default triangle. */ .mbp-contact-inline{ margin-top:.6rem; } .mbp-contact-inline > summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.4em; } .mbp-contact-inline > summary::-webkit-details-marker{ display:none; } .mbp-contact-inline[open] > summary{ margin-bottom:.9rem; } .mbp-contact-inline .mbp-contact-pod{ max-width:100%; } /* Persistent basket pill (functions.php wp_footer, shown when the cart has items) */ .ms-cart-pill{position:fixed;right:18px;bottom:18px;z-index:9990;display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.05rem;background:var(--ms-teal);color:#fff;border-radius:999px;font-family:inherit;font-weight:700;font-size:.95rem;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.22);transition:transform var(--ms-ease),box-shadow var(--ms-ease);} .ms-cart-pill:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.28);color:#fff;background:var(--ms-teal-d);} .ms-cart-pill svg{flex:none;} .ms-cart-pill-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;background:var(--ms-amber);color:var(--ms-blue-ink);border-radius:999px;font-size:.8rem;font-weight:800;} @media(max-width:600px){.ms-cart-pill{right:12px;bottom:12px;padding:.62rem .8rem;} .ms-cart-pill-txt{display:none;}} /* ---- Monthly supporter (Stripe pay-what-you-wish) form: [ms_supporter] ---- */ .ms-supporter{max-width:560px;margin:1.5rem auto;padding:1.6rem 1.7rem;background:var(--ms-cream);border:1px solid rgba(0,0,0,.06);border-radius:var(--ms-r);box-shadow:var(--ms-sh-1);} .ms-supporter-lead{font-weight:600;color:var(--ms-blue-ink);margin:0 0 1rem;} .ms-supporter-row{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 1rem;} .ms-supporter-cur{font-size:1.9rem;font-weight:800;color:var(--ms-teal-d);} .ms-supporter-amt{width:8.5rem;font-size:1.9rem;font-weight:800;color:var(--ms-blue-ink);padding:.35rem .6rem;border:2px solid var(--ms-teal);border-radius:10px;background:#fff;text-align:right;} .ms-supporter-amt:focus{outline:none;border-color:var(--ms-teal-d);box-shadow:0 0 0 3px rgba(31,156,147,.2);} .ms-supporter-per{font-size:1.1rem;font-weight:700;color:var(--ms-blue-ink);} .ms-supporter-note{font-size:.9rem;line-height:1.5;color:#4a5064;margin:0 0 1.2rem;} .ms-supporter-note a{color:var(--ms-teal-d);} .ms-supporter-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:.85rem 1.2rem;background:var(--ms-teal);color:#fff;font-family:inherit;font-weight:800;font-size:1.05rem;border:0;border-radius:999px;cursor:pointer;transition:transform var(--ms-ease),background var(--ms-ease);} .ms-supporter-btn:hover:not(:disabled){background:var(--ms-teal-d);transform:translateY(-1px);} .ms-supporter-btn:disabled{opacity:.65;cursor:default;} .ms-supporter-err{margin:.9rem 0 0;padding:.6rem .8rem;background:#fdecec;border-left:4px solid #d85a30;border-radius:8px;color:#8a2b12;font-size:.9rem;} /* ---- WooCommerce cart/checkout: on-brand teal buttons + tighter spacing ---- */ /* All WC buttons → clean teal rounded pill; kill Divi's light-blue accent underline-gradient + blue text. The `.et-db #et-boc .et-l` prefix (an ID) is REQUIRED to beat Divi's own id-scoped rule for `.checkout-button` (a class — unlike `#place_order`, which is itself an id and wins on its own). */ .et-db #et-boc .et-l .woocommerce a.button, .et-db #et-boc .et-l .woocommerce button.button, .et-db #et-boc .et-l .woocommerce input.button, .et-db #et-boc .et-l .et_pb_wc_add_to_cart .button, .et-db #et-boc .et-l .single_add_to_cart_button, .et-db #et-boc .et-l #place_order, .et-db #et-boc .et-l a.checkout-button, .et-db #et-boc .et-l a.checkout-button.button.alt { background: var(--ms-teal) !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: .85rem 1.7rem !important; font-weight: 800 !important; box-shadow: none !important; text-decoration: none !important; text-shadow: none !important; line-height: 1.3 !important; } .et-db #et-boc .et-l .woocommerce a.button:hover, .et-db #et-boc .et-l .woocommerce button.button:hover, .et-db #et-boc .et-l .et_pb_wc_add_to_cart .button:hover, .et-db #et-boc .et-l .single_add_to_cart_button:hover, .et-db #et-boc .et-l #place_order:hover, .et-db #et-boc .et-l a.checkout-button:hover { background: var(--ms-teal-d) !important; color: #fff !important; } /* The two primary actions: large + full-width + centred (proceed to checkout / place order). */ .et-db #et-boc .et-l a.checkout-button, .et-db #et-boc .et-l #place_order { display: block !important; width: 100% !important; text-align: center !important; font-size: 1.1rem !important; } /* Divi 5 emits a per-page preset rule `.et-db #et-boc .et-l .preset--…product-add-to-cart--divi-button--default .button` (spec 1,4,0) painting the single "Add to basket" button white with a 6px light-blue underline — so my white button text rendered invisible on white. Out-specify it (1,5,0: two classes on the button element) with a real teal pill. Padding repeated in :hover because the preset's :hover collapses it to 0.3em. */ .et-db #et-boc .et-l .et_pb_wc_add_to_cart .single_add_to_cart_button.button { background: var(--ms-teal) !important; background-color: var(--ms-teal) !important; background-image: none !important; color: #fff !important; border: 0 !important; border-bottom: 0 !important; border-radius: 999px !important; padding: .85rem 1.7rem !important; font-weight: 800 !important; text-shadow: none !important; } .et-db #et-boc .et-l .et_pb_wc_add_to_cart .single_add_to_cart_button.button:hover { background: var(--ms-teal-d) !important; background-color: var(--ms-teal-d) !important; color: #fff !important; padding: .85rem 1.7rem !important; } /* Content links (product names, calculate shipping, privacy policy) → brand blue, never light-blue. Scoped to the .woocommerce CONTENT wrapper (a div) so the WHITE header nav + footer are NOT recoloured — the old body-scoped `.woocommerce-checkout a` was turning the header menu blue. Keep the cart remove-× red. */ .woocommerce-account .woocommerce a:not(.button):not(.remove):not(.checkout-button), .woocommerce-cart .woocommerce a:not(.button):not(.remove):not(.checkout-button), .woocommerce-checkout .woocommerce a:not(.button):not(.remove) { color: var(--ms-blue) !important; } /* Tighten the vertical spacing on ALL WooCommerce pages (shop / product / my-account / cart / checkout) — body sections only, i.e. NOT the header/footer TB layouts (which carry a _tb_header / _tb_footer suffix). */ .woocommerce-page .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) { padding-top: 28px !important; padding-bottom: 24px !important; } .woocommerce-page .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) .et_pb_row { padding-top: 6px !important; padding-bottom: 6px !important; } /* Notices on these pages sit BELOW the page title (which already clears the fixed header), so drop the header-clearance top margin + tighten the notice's own margins — it was adding ~76px of dead space. */ .woocommerce-account .woocommerce-notices-wrapper, .woocommerce-cart .woocommerce-notices-wrapper, .woocommerce-checkout .woocommerce-notices-wrapper { margin: 0 !important; } .woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-info, .woocommerce-account .woocommerce-error, .woocommerce-cart .woocommerce-message, .woocommerce-cart .woocommerce-info, .woocommerce-cart .woocommerce-error, .woocommerce-checkout .woocommerce-message, .woocommerce-checkout .woocommerce-info, .woocommerce-checkout .woocommerce-error { margin: 0 0 1rem !important; } /* Links INSIDE the navy notice bars → WHITE so they're legible (not blue-on-navy). The #et-boc prefix (an id) is needed to beat the blue content-link rule above. */ .et-db #et-boc .et-l .woocommerce-info a, .et-db #et-boc .et-l .woocommerce-message a, .et-db #et-boc .et-l .woocommerce-error a { color: #fff !important; text-decoration: underline !important; } /* ---- Checkout pod picker ([labels require a pod]) ---- */ .mbp-pod-picker{margin:1.5rem 0;padding:1.2rem 1.4rem;background:var(--ms-cream);border:1px solid var(--ms-sand);border-radius:var(--ms-r);} .mbp-pod-picker h3{margin:0 0 .5rem;color:var(--ms-blue-ink);} .mbp-pod-list{list-style:none;margin:.4rem 0;padding:0;} .mbp-pod-list li{margin:.3rem 0;} .mbp-pod-list label,.mbp-pod-or label{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--ms-blue-ink);} .mbp-pod-or{margin:.6rem 0 0;padding-top:.6rem;border-top:1px dashed var(--ms-sand);} .mbp-pod-new-fields{margin-top:.8rem;} .mbp-order-pods{margin-top:1.5rem;} .mbp-order-pods h2{color:var(--ms-blue-ink);font-size:1.2rem;} .mbp-pod-new-fields .optional{display:none;} /* fields are conditionally required — our own validation enforces */ /* Pod-type